/* Approved piano scene, scoped to the production homepage. */
html{scroll-behavior:auto}
.piano-journey{height:420svh;background:#050506}
.piano-stage{height:100svh;min-height:520px;position:sticky;top:0;isolation:isolate;overflow:hidden;background:#050506}
.piano-stage #scene{position:absolute;inset:0;z-index:0}
.piano-stage #scene canvas{width:100%;height:100%;display:block}
.piano-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#05050655,transparent 45%),linear-gradient(0deg,#05050699,transparent 22%)}
.piano-title{position:absolute;z-index:2;pointer-events:none;top:29%;left:7vw;max-width:34vw;opacity:var(--title-opacity,1);transform:translateZ(0)}
.piano-title .eyebrow{font-size:9px;letter-spacing:2.6px;line-height:1.8;margin:0 0 25px;color:#c2b7a9}
.piano-title h1{font:400 clamp(52px,5.5vw,90px)/1.04 Georgia,'Times New Roman',serif;letter-spacing:-.05em;margin:0;text-wrap:balance}
.piano-title .description{color:#aaa9a7;font-size:14px;line-height:1.9;margin-top:30px}
.piano-stage #loading{position:absolute;z-index:2;left:60%;top:55%;transform:translate(-50%,-50%);font-size:12px;letter-spacing:1px;color:#aaa;max-width:280px;text-align:center;line-height:1.7}
.piano-stage #loading[hidden]{display:none}
.piano-stage .motion-controls{opacity:var(--piano-exit,1);position:absolute;bottom:40px;right:4vw;width:310px;z-index:2}
.piano-stage .motion-actions{display:flex;gap:10px;margin-bottom:20px}
.piano-stage .motion-actions button,.piano-stage .motion-actions a{border:1px solid #ffffff27;flex:1;padding:12px 14px;background:#08090bb3;min-height:44px;font:11px Arial,sans-serif;text-align:center;color:#f6f4f2;transition:background .2s,color .2s}
.piano-stage .motion-actions a{display:flex;align-items:center;justify-content:center;color:#aeaeae}
.piano-stage .motion-actions span{margin-left:15px;color:#c6a574}
.piano-stage .motion-actions button:hover,.piano-stage .motion-actions a:hover{color:#fff;background:#ffffff14}
.piano-stage .motion-controls label{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1px;color:#aaa}
.piano-stage .motion-controls output{color:#c6a574;font-variant-numeric:tabular-nums}
.piano-stage .motion-controls input{width:100%;height:22px;margin:8px 0 0;accent-color:#c6a574;cursor:pointer}
.piano-stage button:disabled,.piano-stage input:disabled{opacity:.45;cursor:wait}
.piano-stage :focus-visible{outline:2px solid #c6a574;outline-offset:4px}
.piano-scroll-cue{opacity:var(--piano-exit,1);position:absolute;z-index:2;bottom:47px;left:4vw;display:flex;align-items:center;gap:18px;color:#aaa;font-size:9px;letter-spacing:2px}
.piano-scroll-cue i{height:1px;width:50px;background:#c6a57488}
@media(max-width:760px){
  .piano-title{top:17%;left:7%;right:7%;max-width:none}
  .piano-title .eyebrow{font-size:8px;letter-spacing:2px;margin-bottom:16px}
  .piano-title h1{font-size:46px;line-height:1.02}
  .piano-title .description{font-size:12px;margin-top:20px;line-height:1.7}
  .piano-stage #loading{left:50%;top:60%}
  .piano-stage .motion-controls{left:7%;right:7%;width:auto;bottom:30px}
  .piano-stage .motion-actions{margin-bottom:8px}
  .piano-stage .motion-actions button,.piano-stage .motion-actions a{padding:9px 12px;min-height:38px;font-size:10px}
  .piano-stage .motion-controls label{font-size:9px}
  .piano-stage .motion-controls input{margin-top:3px;height:17px}
  .piano-scroll-cue{display:none}
  header{flex-wrap:wrap;gap:10px}header nav{gap:16px;font-size:11px}
  header #sound{font-size:10px;padding:9px}
}
@media(max-height:620px) and (min-width:761px){.piano-title{top:25%}.piano-title h1{font-size:55px}.piano-title .description{margin-top:20px}.piano-stage .motion-controls{bottom:24px}}
@media(prefers-reduced-motion:reduce){.piano-journey{height:100svh}.piano-stage *{transition:none!important}}