*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 8%,#382544,transparent 52%),#171120;color:#faf2e9;font:16px/1.45 system-ui,sans-serif;min-height:100svh}button,select{font:inherit;cursor:pointer}button,a,select{touch-action:manipulation}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #e9c389;outline-offset:3px}a{color:inherit}.top,main{width:min(1160px,92%);margin:auto}.top{display:flex;justify-content:space-between;align-items:center;padding:21px 0;border-bottom:1px solid #ffffff22}.top a{text-decoration:none}.top a:first-child{font:24px Georgia}.top small{font:12px system-ui}.top a:last-child{font-size:13px}.hero{display:flex;justify-content:space-between;align-items:center;min-height:210px;gap:12px}.hero img{width:32%;max-height:220px;object-fit:contain;filter:drop-shadow(0 12px 12px #0008)}.eyebrow,.settings>div>label:first-child{font:600 10px/1.5 system-ui;letter-spacing:.17em;color:#dfc594}h1{font:normal clamp(42px,6.4vw,90px)/.98 Georgia,serif;letter-spacing:-.052em;margin:10px 0}h1 span,.nameplate{color:#d5b481}.hero p:last-child{color:#cfbfd2}.console{background:#261e30;border:1px solid #ffffff27;border-radius:17px;padding:clamp(13px,2.2vw,30px);box-shadow:0 15px 55px #0004}.modes{display:flex;border-bottom:1px solid #ffffff24;gap:25px}.modes button{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:#cbbdd1;padding:5px 4px 11px}.modes button[aria-pressed=true]{color:#f1d3a0;border-color:#dcb173}.settings{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:15px 0}.settings small{display:block;color:#c5b5cb;font-size:12px}.settings label{display:block}#piece{display:block;font:clamp(20px,3vw,31px) Georgia;max-width:100%;margin:3px 0;color:#fff6ea;background:#261e30;border:0;padding:0 22px 0 0}#transport,.tools,.tools div{display:flex;align-items:center;gap:9px;flex-wrap:wrap}#transport label{font-size:12px;color:#ded0df}button,#tempo{color:#fbf3e7;background:#392d43;border:1px solid #62536e;border-radius:8px;padding:8px 12px}#start,[aria-pressed=true]#pedal{background:#e4c99b;color:#241a27}#instruction{width:100%;font-size:13px;color:#edd7b4;margin:0}#instruction:empty{display:none}.case{background:linear-gradient(#392f39,#100d13 45%,#211922);padding:0 8px 12px;border:1px solid #6b5558;border-radius:9px;box-shadow:inset 0 1px 2px #ffffff38,0 9px 18px #10091280}.nameplate{text-align:center;font:12px Georgia;padding:11px}.key-scroll{overflow:hidden;border-top:4px solid #722c3e}#keys{position:relative;display:flex;--whites:52;width:100%;isolation:isolate;height:clamp(130px,16vw,193px);background:#110d12}.key{padding:0;border:0;border-radius:0 0 3px 3px;touch-action:none;transform-origin:top;transition:transform 60ms ease,filter 60ms;display:flex;align-items:flex-end;justify-content:center;user-select:none}.white{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:linear-gradient(#beb6a9,#f3efe6 16%,#fffdf3 82%,#e4daca);box-shadow:inset 0 -5px 1px #b9ac99,inset -1.5px 0 #4b4144;color:#62585b}.black{position:absolute;top:0;height:62%;width:calc(64% / var(--whites));background:linear-gradient(90deg,#28242a,#100e14 70%,#302935);box-shadow:inset 0 -8px 2px #39313d,1px 3px 2px #0008;color:#efe3d2;z-index:2}.key span{font:10px system-ui;margin-bottom:10px}.key.target{box-shadow:inset 0 -8px #a67ccb}.key.target:after{content:'';position:absolute;bottom:25%;height:7px;width:7px;border-radius:50%;background:#a27ac9}.key.down{transform:perspective(600px) rotateX(-5deg) scaleY(.963);filter:brightness(.88);box-shadow:inset 0 -5px #d5ac61}.tools{justify-content:space-between;font-size:12px;color:#d5c6d9;margin-top:16px}.tools button{min-width:34px}.tools #progress{margin-left:auto}details{margin:18px 0 115px;color:#c2afc7;font-size:13px}details p{max-width:82ch}summary{cursor:pointer}[hidden]{display:none!important}@media(max-width:620px){.hero{min-height:145px}.hero img{width:28%}.top{padding:14px 0}.hero p:last-child{font-size:13px}.eyebrow{font-size:8px}.settings{gap:10px}.case{padding-inline:4px}.tools{gap:5px}.tools #progress{width:100%;margin:0}.key span{display:none}}

@media(max-width:650px) and (orientation:portrait){
  main{width:98%}.console{padding-inline:6px}.case{padding-inline:2px}
}
@media(max-height:520px) and (orientation:landscape){
  .top{padding:4px 0}.hero{min-height:0}.hero img,.hero .eyebrow,.hero p:last-child{display:none}
  h1{font-size:26px;margin:5px 0}.console{padding:7px 12px}.modes button{padding:3px 8px}
  .settings{padding:4px 0;gap:3px}.settings #piece{font-size:18px}
  #instruction{font-size:11px}.nameplate{padding:3px}.case{padding-bottom:3px}
  #keys{height:clamp(70px,24svh,120px)}.tools{margin-top:4px}
}
@media(max-width:650px) and (max-height:720px) and (orientation:portrait){
  .top{padding:7px 0}.hero{min-height:60px}.hero img{height:59px}.hero .eyebrow,.hero p:last-child{display:none}
  .hero h1{font-size:34px;margin:4px 0}.console{padding-block:6px}
  .settings{padding-block:7px;gap:5px}.settings small{font-size:11px}
  .nameplate{padding:5px}#keys{height:100px}.tools{margin-top:7px}
}

#room details{margin-bottom:1rem}#music-credits{max-width:78ch;margin:1.5rem 0 7rem;color:#ddcfdf;font:14px/1.65 system-ui,sans-serif}#music-credits h2{font:30px Georgia,serif;color:#f3e3ca}#music-credits h3{margin-bottom:.25rem}#music-credits p{margin-top:.25rem}#music-credits li{margin:.35rem 0}#music-credits a{text-underline-offset:3px}

#landscape-piano[open] {
  inset: 0;
  margin: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  border: 0;
  padding: max(6px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  background: #211827;
  color: #faf2e9;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.piano-toolbar { display: flex; align-items: center; gap: 10px; }
.piano-toolbar strong { margin-right: auto; font: 20px Georgia, serif; color: #efd7b0; }
#piano-sound[aria-pressed=true] { background: #e4c99b; color: #241a27; }
#landscape-piano #instrument-panel, #landscape-piano .case { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#landscape-piano .key-scroll, #landscape-piano #keys { flex: 1; height: 100%; }
#landscape-piano .tools { justify-content: space-between; margin-top: 6px; }
#landscape-piano .key span { display: block; }
#landscape-piano .nameplate, #landscape-piano #progress { display: none; }
#landscape-piano button:not(.key) { min-height: 40px; min-width: 44px; }