@import"https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@300;400;500&display=swap";@font-face{font-family:Departure Mono;src:url(/scenes/chronophase/fonts/DepartureMono.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:block}.chronophase{--bg: #060608;--fg: #f3eee3;--dim: #7d828c;--accent: #ff4a1f;--ease: cubic-bezier(.2, .7, .2, 1);--mono: "Departure Mono", monospace;--sans: "Host Grotesk", sans-serif}.chronophase *{box-sizing:border-box;margin:0}.chronophase{position:fixed;inset:0;height:100%;background:var(--bg);color:var(--fg);overflow:hidden}.chronophase canvas{display:block}.chronophase #intro{position:fixed;inset:0;overflow-y:auto;background:var(--bg);z-index:2;--gut: clamp(16px, 5.25vw, 105px);--accent: #e00908}.chronophase #intro.gone{opacity:0;pointer-events:none}.chronophase #intro>.keys{display:none}.chronophase .xr{position:fixed;left:50%;bottom:96px;transform:translate(-50%);z-index:3}.chronophase .xr button{font-size:13px;padding:12px 20px}.chronophase .xr button:disabled{display:none}.chronophase #sound-hint{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;padding:10px 16px;font:500 12px/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--fg);background:#060608b8;border:1px solid rgba(243,238,227,.22);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s}.chronophase #sound-hint .coarse{display:none}@media(pointer:coarse)and (hover:none){.chronophase #sound-hint .fine{display:none}.chronophase #sound-hint .coarse{display:inline}}.chronophase #sound-hint.on{opacity:1;animation:chronophase-hint 2.4s ease-in-out infinite}@keyframes chronophase-hint{50%{opacity:.55}}.chronophase .credit{position:fixed;top:20px;right:20px;z-index:3;font:400 12px/1.5 var(--sans);color:var(--dim)}@media(max-width:720px){.chronophase .credit{top:62px;left:0;right:0;text-align:center}.chronophase #sound-hint{top:28%}}.chronophase .credit a{color:#b4b8bf;text-decoration:none;transition:color .2s}.chronophase .credit a:hover,.chronophase .credit a:focus-visible{color:#fff;outline:none}.chronophase .keys{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}.chronophase .keys h2{font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}.chronophase .keys table{border-collapse:collapse;width:100%;font:400 13px/1.3 var(--sans);color:var(--dim)}.chronophase .keys td{padding:5px 0;vertical-align:middle}.chronophase .keys td:first-child{white-space:nowrap;padding-right:24px;width:128px}.chronophase .keys>div:first-child td:first-child{width:96px}.chronophase .keys td:last-child{color:#a3a8b0;white-space:nowrap}.chronophase .keys td:last-child i{font-style:normal;color:var(--dim)}.chronophase kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;margin-right:3px;font:500 11px/1 var(--mono);color:#a3a8b0;border:1px solid rgba(243,238,227,.16);border-bottom-width:2px;border-radius:4px}.chronophase kbd.wide{padding:0 8px}.chronophase .keys .to{color:var(--dim);margin:0 5px 0 2px;font:400 11px var(--mono)}.chronophase .status{margin-top:14px;font:500 11px/1.5 var(--mono);letter-spacing:.08em;color:var(--dim)}.chronophase .status:empty{display:none}@media(max-height:820px){.chronophase .keys td{padding:3px 0}.chronophase .keys h2{margin-bottom:6px}.chronophase kbd{height:18px;min-width:18px}}@media(max-width:620px){.chronophase .keys{grid-template-columns:1fr;gap:22px}}.chronophase button{font:500 22px/1 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--fg);background:none;border:1px solid var(--fg);padding:14px 22px;cursor:pointer}.chronophase button:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:var(--bg)}.chronophase button:disabled{opacity:.3;cursor:default}.chronophase #hud{position:fixed;left:0;right:0;bottom:28px;text-align:center;padding:0 16px;font:500 11px var(--mono);letter-spacing:.25em;text-transform:uppercase;color:var(--fg);opacity:0;transition:opacity .6s;pointer-events:none;z-index:1}.chronophase #hud.on{opacity:.8}.chronophase #transport{position:fixed;left:20px;right:20px;bottom:9px;padding-block:10px;z-index:3;display:flex;align-items:center;gap:22px;font:500 11px var(--mono);letter-spacing:.18em;color:var(--fg);opacity:0;pointer-events:none;transition:opacity .5s}.chronophase #transport.on{opacity:.9;pointer-events:auto}.chronophase #tp-play{flex:none;width:36px;height:36px;padding:0;border:none;border-radius:50%;background:none;display:grid;place-items:center;color:#a3a8b0;transition:color .25s}.chronophase #tp-play:hover:not(:disabled){background:none;color:var(--accent)}.chronophase #tp-play svg{display:block;width:36px;height:36px;overflow:visible;transition:transform .4s var(--ease)}.chronophase #tp-play:active svg{transform:scale(.9);transition-duration:.08s}.chronophase #tp-play:focus-visible{outline:none;box-shadow:0 0 0 1px #f3eee34d}.chronophase #tp-play .ring{fill:none;stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.55;transition:opacity .25s}.chronophase #tp-play:hover .ring{opacity:1}.chronophase #tp-play path{fill:currentColor}.chronophase #tp-play[data-state=play] .i-pause,.chronophase #tp-play[data-state=pause] .i-play{display:none}.chronophase #tp-track{position:relative;flex:1;height:38px;cursor:pointer;touch-action:none}.chronophase #tp-canvas{position:absolute;inset:0;width:100%;height:100%}.chronophase #tp-time{flex:none;text-align:left;font-size:11px;color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}@media(max-width:560px){.chronophase #tp-time{display:none}}.chronophase #slots{position:fixed;inset:0;z-index:3;pointer-events:none;font:500 11px var(--mono);letter-spacing:.18em;color:var(--fg);opacity:0;transition:opacity .5s}.chronophase #slots.on{opacity:.9}.chronophase #slots.on button{pointer-events:auto}.chronophase #slot-bar{position:absolute;top:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:6px;height:28px;padding:0 2px;border:1px solid rgba(243,238,227,.2);border-radius:999px;background:#0606088c}.chronophase #slots .slot-step{width:24px;height:24px;padding:0;border:none;border-radius:50%;background:none;color:#a3a8b0;cursor:pointer;transition:color .25s,transform .4s var(--ease)}.chronophase #slot-bar:hover .slot-step{color:var(--fg)}.chronophase #slots .slot-step:hover:not(:disabled){background:none;color:var(--accent)}.chronophase #slots .slot-step:active{transform:scale(.9);transition-duration:.25s,.08s}.chronophase #slots .slot-step:focus-visible{outline:none;color:var(--fg);box-shadow:0 0 0 3px #f3eee31f}.chronophase #slots .slot-step svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.chronophase #slot-name{white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:7px}.chronophase #slot-name .idx{font:500 13px/1 var(--mono);letter-spacing:0;font-variant-numeric:tabular-nums lining-nums;color:#5c6169;flex:0 0 auto;min-width:1ch;height:1em;display:flex;align-items:center;justify-content:center}.chronophase #slot-name .nm{font:500 13px/1 var(--mono);letter-spacing:1.2px;text-transform:uppercase}.chronophase #slot-name .fig{letter-spacing:0;font-variant-numeric:tabular-nums lining-nums}.chronophase #slot-name .tag{color:#5c6169}.chronophase #slot-name .dot{width:5px;height:5px;border-radius:50%;background:var(--accent);transform:translateY(var(--dot-y, 0px))}@media(prefers-reduced-motion:reduce){.chronophase #slots button,.chronophase #slots button svg,.chronophase #tp-play svg{transform:none!important}}.chronophase #slots>button{position:absolute;top:50%;width:36px;height:36px;margin-top:-18px;padding:0;border-radius:50%;border-color:#f3eee34d;color:#a3a8b0;background:none;transition:border-color .25s,color .25s,transform .4s var(--ease)}.chronophase #slots>button svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}.chronophase #slots>button:hover:not(:disabled){background:none;border-color:var(--accent);color:var(--accent)}.chronophase #slots>button:active{transform:scale(.94);transition-duration:.25s,.25s,.08s}.chronophase #slots>button:focus-visible{outline:none;border-color:var(--fg);box-shadow:0 0 0 1px #f3eee34d}.chronophase #slot-prev{left:20px}.chronophase #slot-next{right:20px}.chronophase #view-cap{position:absolute;left:50%;bottom:88px;font:500 13px/1 var(--mono);letter-spacing:1.2px;color:#a3a8b0;white-space:nowrap;opacity:0;transform:translate(-50%,4px);transition:opacity .6s,transform .6s var(--ease)}.chronophase #view-cap.on{opacity:1;transform:translate(-50%);transition-duration:.25s,.4s}@media(prefers-reduced-motion:reduce){.chronophase #view-cap{transform:translate(-50%)}}.chronophase #slots>#help{top:auto;bottom:74px;left:26px;width:24px;height:24px;margin-top:0;font:500 11px/1 var(--mono);letter-spacing:0;color:#5c6169;border-color:#f3eee324;transition:border-color .25s,color .25s,transform .4s var(--ease),opacity .25s,visibility 0s}.chronophase #slots>#help[aria-expanded=true]{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,visibility 0s .15s}.chronophase #key-panel{position:absolute;left:20px;bottom:74px;isolation:isolate;opacity:0;transform:translateY(6px);visibility:hidden;pointer-events:none;transition:opacity .25s,transform .4s var(--ease),visibility 0s .4s}.chronophase #key-panel.open{opacity:1;transform:none;visibility:visible;transition:opacity .25s,transform .4s var(--ease)}.chronophase #key-panel:before{content:"";position:absolute;inset:-56px -96px -40px -60px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#060608c7 45%,#06060866 75%,#06060800)}.chronophase #slots.on #key-panel.open{pointer-events:auto;cursor:pointer}.chronophase #key-panel kbd{transition:color .5s,border-color .5s}.chronophase #key-panel kbd.hit{color:var(--accent);border-color:var(--accent);transition:none}@media(prefers-reduced-motion:reduce){.chronophase #key-panel{transform:none!important}}