html,body{margin:0;width:100%;height:100%;overflow:hidden}#mount{position:relative;width:100vw;height:100dvh}#piano-game{height:728px;width:1280px;display:grid;grid-template-rows:225px 423px 80px;color:#202c38;background:radial-gradient(ellipse at 50% 20%,#fff,#f6f5f1 65%,#e6e7e5);font-family:"Microsoft YaHei",sans-serif}#piano-game *{box-sizing:border-box}#instruction{text-align:center;display:flex;flex-direction:column;justify-content:center;gap:8px}#piano-game h1{font-size:56px;margin:0;line-height:1.2}#subtitle{font-size:30px;margin:0}#progress{font-size:24px;color:#6c7781}#eyebrow{font-size:16px;color:#786b56}#piano-game footer{display:flex;align-items:center;justify-content:space-between;padding:0 45px;font-size:17px;color:#647078}#replay{font-size:23px;padding:12px 28px;border:1px solid #888;border-radius:12px;background:#fffdf7;color:#263541}#replay:disabled{visibility:hidden}#piano{position:relative;margin:0 1.2%;isolation:isolate;filter:drop-shadow(0 12px 12px #14110e38)}.case-back{position:absolute;inset:0 1.4% 0;background:linear-gradient(#171411,#090807 22%,#100f0e 80%,#332b23);border:2px solid #302923;border-radius:20px 20px 10px 10px;box-shadow:inset 0 2px 3px #928273,inset 0 12px 10px #000}.case-back:before{content:"";position:absolute;left:1%;right:1%;top:0;height:15%;background-image:url('assets/body.png');background-size:100% 450%;background-position:center 12%;border-bottom:2px solid #bda064;box-shadow:0 6px 7px #000}.keys{position:absolute;left:3.2%;right:3.2%;top:17%;bottom:11%;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:.5%;background:#080706;z-index:2}.key{padding:0;position:relative;min-width:0;border:none;background:transparent;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.key img{position:absolute;inset:-1% -1.5%;width:103%;height:102%;object-fit:fill;pointer-events:none;transition:transform 90ms ease-out,filter 90ms}.key .gold{opacity:0}.key.pressed img{transform:translateY(9px)}.key.pressed .white{opacity:0}.key.pressed .gold{opacity:1}.key.error img.gold{filter:hue-rotate(325deg) saturate(.8) brightness(.85)}.key:focus-visible{outline-offset:0;z-index:5}.case-front{position:absolute;left:1%;right:1%;bottom:-1%;height:13%;background:linear-gradient(#31271f,#100e0c 20%,#241b15 90%,#090807);border-top:3px solid #776353;border-radius:0 0 12px 12px;box-shadow:inset 0 5px 6px #000;z-index:3}.cheek{position:absolute;top:-6%;bottom:-1%;width:3%;border-radius:40% 40% 5% 5%;background:linear-gradient(90deg,#080706,#3b332c 35%,#16120f 65%,#050403);box-shadow:inset 2px 0 2px #b4a99b55;z-index:4}.cheek.left{left:0}.cheek.right{right:0}#controls{position:fixed;bottom:8px;right:10px;z-index:30;font-size:13px;background:#fffef8ef;border:1px solid #b9b9b2;border-radius:8px;box-shadow:0 2px 8px #0001;color:#37434b}#controls summary{cursor:pointer;padding:7px 12px}#settings-badge{font-size:11px;color:#707b82}.control-body{padding:8px 16px 16px;width:350px}.control-body label{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:12px 0}.control-body input{width:120px}.control-body p{line-height:1.5;color:#68727b;font-size:12px}.control-body button{padding:7px 12px;border:1px solid #ccc;background:#f3f0e9;border-radius:5px;margin-right:8px}.control-body select{padding:4px}#controls[open]{bottom:12px}#controls[open] summary{border-bottom:1px solid #ddd}/* Collapsible difficulty dashboard; overlays the game without resizing the piano. */
#controls{max-width:calc(100vw - 20px)}#controls summary{font-size:16px;font-weight:600;padding:10px 14px}.control-body{width:380px;max-width:calc(100vw - 22px);max-height:calc(100dvh - 74px);overflow:auto}.difficulty-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.difficulty-grid button{margin:0;padding:10px 6px;font-size:18px;background:#fff;border:1px solid #c7c3b8;color:#283743;border-radius:8px}.difficulty-grid small{display:block;margin-top:3px;font-size:12px;font-weight:400}.difficulty-grid .auto-level{grid-column:1/-1}.difficulty-grid button[aria-pressed=true]{background:#283743;color:#fff;border-color:#283743;box-shadow:inset 0 0 0 2px #bd9957}.difficulty-status{margin-top:12px;padding:12px;background:#f1eee5;border-radius:8px}.difficulty-status strong{font-size:15px}.difficulty-status p{margin:6px 0 0;line-height:1.5}#difficulty-pending{color:#865c15}.control-body button:focus-visible{outline:3px solid #c98e32;outline-offset:2px}

#controls{z-index:1000;font-size:14px}#controls button,#controls input{font:inherit}#launch{position:fixed;inset:0;background:#f6f5f1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;z-index:900;font-family:"Microsoft YaHei",sans-serif;color:#273743}#launch[hidden]{display:none}#launch h1{font-size:48px;margin:0}#launch p{font-size:26px}#launch button{padding:18px 46px;font-size:28px;border:0;border-radius:12px;background:#273743;color:white;cursor:pointer}#launch small{font-size:16px}
#eyebrow,#subtitle,#mode,#hint{display:none}
#instruction{gap:22px}#piano-game h1{font-size:48px}
#progress{height:24px;display:flex;justify-content:center;align-items:center;gap:16px}
.progress-dot{width:18px;height:18px;border:2px solid #59685d;border-radius:50%;background:#fff}.progress-dot.filled{background:#356c46;border-color:#356c46}
#piano-game footer{justify-content:center}
.public-feedback.piano-scored-feedback .badge{width:336px;min-width:0;min-height:254px;padding:40px 30px 44px;box-sizing:border-box;border-radius:30px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:30px;background:#fff}
.piano-success-line{font-size:32px;line-height:1.3;display:flex;gap:12px;align-items:center;white-space:nowrap;color:#252c39}
.piano-success-check{display:flex;align-items:center;justify-content:center;border-radius:50%;width:44px;height:44px;background:#7db177;color:white;font-size:40px;font-weight:400;line-height:1}
.piano-earned{font-size:80px;line-height:1;font-weight:800;white-space:nowrap;color:#395f3e}.piano-earned small{font-size:28px;margin-left:6px}