:root{--title-bottom:58vh;--ink:#ecdfc6;--ink-dim:#ecdfc68f;--ink-faint:#ecdfc638;--line:#ecdfc621;--glass:#080d1861;--copper:#c4774a;--amber:#e8a24a;--verdigris:#5fb3a6;--ease:cubic-bezier(.22, 1, .36, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--serif:"Cormorant Garamond", "Times New Roman", serif;--mono:"IBM Plex Mono", ui-monospace, monospace;--safe-b:env(safe-area-inset-bottom,0px)}*{box-sizing:border-box;margin:0;padding:0}html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;background:#03060c;width:100%;height:100%;overflow:hidden}body{color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased;font-weight:300}#stage{touch-action:none;opacity:0;width:100vw;height:100dvh;transition:opacity 1.6s var(--ease);outline:none;display:block;position:fixed;inset:0}body.ready #stage{opacity:1}.ui{pointer-events:none;z-index:2;position:fixed;inset:0}.intro{left:0;right:0;top:calc(var(--title-bottom) + clamp(22px, 4.2vh, 44px));text-align:center;transition:opacity 1.1s var(--ease), transform 1.6s var(--ease), filter 1.1s var(--ease);padding:0 24px;position:absolute}.intro.is-gone{opacity:0;filter:blur(6px);transform:translateY(-14px)}.intro__kicker{font-family:var(--serif);letter-spacing:.01em;color:var(--ink-dim);opacity:0;animation:rise 1.8s var(--ease) 1.5s forwards;font-size:clamp(17px,1.55vw,23px);font-style:italic;font-weight:300}.intro__cta{letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:var(--ink);opacity:0;animation:rise 1.6s var(--ease) 2.3s forwards, breathe 4.2s var(--ease-in-out) 3.9s infinite;margin-top:clamp(18px,3vh,30px);font-size:10.5px}.cta-touch{display:none}body.is-touch .cta-touch{display:inline}body.is-touch .cta-desktop{display:none}@keyframes rise{0%{opacity:0;filter:blur(4px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}@keyframes breathe{0%,to{opacity:.38}50%{opacity:.85}}.hint{left:0;right:0;top:max(28px, env(safe-area-inset-top,0px) + 18px);text-align:center;font-family:var(--serif);color:var(--ink);text-shadow:0 0 18px #03060ce6,0 0 4px #03060ccc;opacity:0;transition:opacity 1.2s var(--ease), transform 1.2s var(--ease);padding:0 28px;font-size:16px;font-style:italic;line-height:1.5;position:absolute;transform:translateY(-6px)}.hint.is-on{opacity:1;transform:none}.keymap{left:50%;bottom:calc(96px + var(--safe-b));opacity:0;transition:opacity 1.4s var(--ease), transform 1.4s var(--ease);flex-direction:column;gap:10px;display:flex;position:absolute;transform:translate(-50%,10px)}.keymap.is-on{opacity:1;transform:translate(-50%)}.keymap__row{align-items:center;gap:8px;display:flex}.keymap__row--high{margin-left:-18px}.keymap__row--low{margin-left:10px}.keymap__tag{letter-spacing:.3em;text-transform:uppercase;width:54px;color:var(--ink-faint);text-align:right;margin-right:8px;font-size:9px}.key{border:1px solid var(--line);width:44px;height:46px;transition:border-color .5s var(--ease), background .6s var(--ease), transform .4s var(--ease), box-shadow .8s var(--ease);background:#080d1838;border-radius:9px;flex-direction:column;justify-content:center;align-items:center;gap:3px;display:flex;position:relative}.key b{color:var(--ink-dim);font-size:12px;font-weight:400;transition:color .4s}.key i{letter-spacing:.06em;color:#ecdfc65c;font-size:9px;font-style:normal}.keymap__row--low .key.is-down{background:#c4774a29;border-color:#e8a24ab3;transition-duration:60ms;transform:translateY(1px);box-shadow:0 0 22px #e8a24a40}.keymap__row--high .key.is-down{background:#a9c8e81f;border-color:#bed7f0b3;transition-duration:60ms;transform:translateY(1px);box-shadow:0 0 22px #a9c8e840}.key.is-down b{color:var(--ink)}body.is-touch .keymap{display:none}.keymap[data-layout=piano]{gap:12px}.keymap[data-layout=piano] .keymap__row{gap:5px}.keymap[data-layout=piano] .key{width:36px;height:44px}.key--black{background:#03060c8c;transform:translateY(-7px);height:36px!important}.key--black b{font-size:10px}.grid-keys{pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease);position:absolute;inset:0}.grid-keys:not(.is-active){display:none}.grid-keys.is-on{opacity:1}body.is-playing[data-keys=grilla] .grid-keys.is-active{opacity:.55}body.is-playing[data-keys=grilla] .grid-keys.is-on{opacity:1}.gkey{border:1px solid var(--line);width:34px;height:34px;transition:border-color .5s var(--ease), background .6s var(--ease), box-shadow .8s var(--ease), transform .4s var(--ease);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:1px;display:flex;position:absolute;transform:translate(-50%,-50%)}.gkey b{color:var(--ink-dim);font-size:11px;font-weight:400}.gkey i{color:#ecdfc657;font-size:8px;font-style:normal}.gkey.is-down{background:#c4774a29;border-color:#e8a24abf;transition-duration:60ms;transform:translate(-50%,-50%)scale(1.12);box-shadow:0 0 24px #e8a24a4d}.gkey--high.is-down{background:#a9c8e81f;border-color:#bed7f0b3;box-shadow:0 0 24px #a9c8e847}.gkey.is-down b{color:var(--ink)}body.is-touch .grid-keys{display:none}.pedal{right:max(28px, env(safe-area-inset-right,0px) + 20px);top:max(26px, env(safe-area-inset-top,0px) + 18px);letter-spacing:.3em;text-transform:uppercase;color:var(--amber);opacity:0;transition:opacity .25s var(--ease);pointer-events:none;border:1px solid #e8a24a73;border-radius:999px;padding:8px 14px;font-size:10px;position:absolute}body.is-sustain .pedal{opacity:1;box-shadow:0 0 18px #e8a24a33}body.is-touch .modes--keys{display:none}.controls{left:0;right:0;bottom:calc(26px + var(--safe-b));opacity:0;transition:opacity 1s var(--ease), transform 1s var(--ease);justify-content:center;align-items:center;gap:10px;padding:0 16px;display:flex;position:absolute;transform:translateY(12px)}body.is-playing.controls-on .controls,body.is-playing.is-touch .controls{opacity:1;transform:none}body.is-playing .controls>*{pointer-events:auto}body.is-playing.is-touch:not(.controls-on) .controls{opacity:.7}.ctl{appearance:none;border:1px solid var(--line);background:var(--glass);-webkit-backdrop-filter:blur(14px)saturate(120%);backdrop-filter:blur(14px)saturate(120%);color:var(--ink-dim);font:inherit;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;touch-action:manipulation;height:42px;transition:color .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease), transform .35s var(--ease);border-radius:999px;align-items:center;gap:10px;padding:0 18px;font-size:10.5px;display:inline-flex}.ctl:hover{color:var(--ink);border-color:#ecdfc647}.ctl:active{transform:scale(.97)}.ctl:focus-visible{outline-offset:3px;outline:1px solid #e8a24ab3}.ctl[hidden]{display:none}.ctl__label{color:var(--ink-faint)}.ctl__value{transition:opacity .18s var(--ease), transform .18s var(--ease), filter .18s;display:inline-block}.ctl__value.is-swap{opacity:0;filter:blur(3px);transform:translateY(4px)}.ctl--icon{justify-content:center;width:42px;padding:0}.modes{position:relative}.modes__list{border:1px solid var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:0;transform-origin:0 100%;pointer-events:none;min-width:100%;transition:opacity .45s var(--ease), transform .45s var(--ease);background:#080d189e;border-radius:18px;padding:6px;list-style:none;position:absolute;bottom:calc(100% + 10px);left:0;transform:translateY(8px)scale(.98)}.modes.is-open .modes__list{opacity:1;pointer-events:auto;transform:none}.modes__list li{letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);cursor:pointer;white-space:nowrap;transition:background .3s var(--ease), color .3s;border-radius:12px;align-items:center;gap:10px;padding:11px 14px;font-size:10.5px;display:flex}.modes__list li:before{content:"";background:var(--amber);opacity:0;width:5px;height:5px;transition:opacity .4s var(--ease), transform .4s var(--ease);border-radius:50%;transform:scale(.4)}.modes__list li:hover{color:var(--ink);background:#ecdfc60f}.modes__list li[aria-selected=true]{color:var(--ink)}.modes__list li[aria-selected=true]:before{opacity:1;box-shadow:0 0 10px var(--amber);transform:none}.dots{gap:5px;display:inline-flex}.dot{opacity:.55;width:6px;height:6px;transition:background .6s var(--ease), opacity .6s var(--ease), box-shadow .6s var(--ease);border:1px solid;border-radius:50%}.dot--tuba{color:var(--copper)}.dot--mid{color:var(--amber)}.dot--counter{color:var(--verdigris)}.ctl--ensemble[aria-pressed=true]{color:var(--ink);border-color:#ecdfc642}.ctl--ensemble[aria-pressed=true] .dot{opacity:.8;background:currentColor}.dot.is-pulse{animation:pulse 1.1s var(--ease)}@keyframes pulse{0%{opacity:1;transform:scale(1.35);box-shadow:0 0}to{transform:scale(1);box-shadow:0 0 0 7px #0000}}.rec{width:28px;height:28px;transform:rotate(-90deg)}.rec circle{fill:none}.rec__track{stroke:var(--line);stroke-width:1.2px}.rec__progress{stroke:var(--copper);stroke-width:1.6px;stroke-linecap:round;stroke-dasharray:100.53;stroke-dashoffset:100.53px}.rec__dot{opacity:.85;transform-origin:18px 18px;transition:transform .5s var(--ease), opacity .5s;fill:var(--copper)!important}.ctl--rec:hover .rec__dot{opacity:1;transform:scale(1.12)}.ctl--rec.is-rec{border-color:#c4774a8c}.ctl--rec.is-rec .rec__dot{animation:recblink 1.4s var(--ease-in-out) infinite;transform:scale(.72)}@keyframes recblink{50%{opacity:.35}}.fs{fill:none;stroke:currentColor;stroke-width:1.3px;stroke-linecap:round;width:17px;height:17px;transition:transform .5s var(--ease)}#fsBtn:hover .fs{transform:scale(1.1)}#fsBtn.is-on .fs{transform:scale(.86)}.toast{left:50%;bottom:calc(84px + var(--safe-b));white-space:nowrap;font-family:var(--serif);color:var(--ink-dim);opacity:0;transition:opacity .7s var(--ease), transform .7s var(--ease);align-items:center;gap:14px;font-size:16px;font-style:italic;display:flex;position:absolute;transform:translate(-50%,8px)}.toast.is-on{opacity:1;transform:translate(-50%)}.toast__action{pointer-events:auto;appearance:none;font-family:var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--ink);cursor:pointer;background:#c4774a2e;border:1px solid #c4774a8c;border-radius:999px;padding:10px 16px;font-size:10.5px;font-style:normal}body.controls-on .keymap.is-on~.toast{bottom:calc(220px + var(--safe-b))}@media (max-width:640px){.controls{bottom:calc(18px + var(--safe-b));gap:8px}.ctl{letter-spacing:.16em;height:40px;padding:0 14px;font-size:10px}.ctl--icon{width:40px;padding:0}.ctl__label{display:none}.toast{bottom:calc(74px + var(--safe-b));font-size:15px}}@media (max-width:480px){.controls{gap:6px;padding:0 10px}.ctl{letter-spacing:.1em;padding:0 12px}.ctl--ensemble .ctl__value{display:none}}@media (prefers-reduced-motion:reduce){.intro__cta{animation:rise 1.6s var(--ease) 1s forwards}}body.no-webgl .intro{top:44vh}body.no-webgl .intro__kicker{opacity:1;animation:none}.harmony{left:max(28px, env(safe-area-inset-left,0px) + 20px);top:max(26px, env(safe-area-inset-top,0px) + 18px);pointer-events:none;opacity:0;max-width:min(420px,100vw - 56px);transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);text-shadow:0 0 18px #03060ce6,0 0 4px #03060ccc;position:absolute;transform:translateY(-6px)}body.scene-geo.is-playing .harmony.is-on{opacity:1;transform:none}.harmony__ratio{font-family:var(--serif);letter-spacing:.04em;color:var(--ink);font-variant-numeric:lining-nums;font-size:clamp(38px,6.4vw,64px);font-weight:300;line-height:1}.harmony__name{font-family:var(--serif);color:var(--ink);margin-top:8px;font-size:clamp(17px,2.1vw,21px);font-style:italic}.harmony__name em{color:var(--amber);font-style:italic}.harmony__detail{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-dim);margin-top:10px;font-size:10.5px}.harmony p{transition:opacity .35s var(--ease)}.harmony.is-swap p{opacity:.25}.tetractys{width:46px;height:40px;margin-bottom:14px;display:block;overflow:visible}.tetractys circle{fill:var(--ink-faint);transition:fill .5s var(--ease), filter .5s var(--ease)}.tetractys g.is-lit circle{fill:var(--amber);filter:drop-shadow(0 0 4px var(--amber))}@media (max-width:640px){.harmony{text-align:center;max-width:none;left:0;right:0}.tetractys{width:38px;height:33px;margin-bottom:10px;margin-left:auto;margin-right:auto}}