:root{--bg:#030407;--ink:#e9e6df;--ink-2:#b4b2ab;--muted:#7d7f86;--faint:#4a4c53;--rule:#e9e6df24;--rule-strong:#e9e6df52;--accent:#f2b45a;--serif:"Instrument Serif", "Times New Roman", serif;--sans:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;--mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;--gutter:28px}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;margin:0;overflow:hidden}#app,#app canvas{display:block;position:fixed;inset:0}.labels{pointer-events:none;z-index:0;position:fixed;inset:0}#scrim{z-index:1}#info,#stages,#hints,#note,#legend,#readout{z-index:2}@media (width>=901px){.labels{-webkit-mask-composite:source-in;-webkit-mask-image:linear-gradient(90deg,#0000 0 440px,#000 540px),linear-gradient(0deg,#0000 0 130px,#000 190px);mask-image:linear-gradient(90deg,#0000 0 440px,#000 540px),linear-gradient(0deg,#0000 0 130px,#000 190px);-webkit-mask-composite:source-in;mask-composite:intersect}}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0}:focus-visible{outline:1px solid var(--accent);outline-offset:2px}#scrim{pointer-events:none;background:linear-gradient(90deg,#030407d1 0,#03040773 420px,#03040700 640px),linear-gradient(0deg,#030407bf 0,#03040700 180px);position:fixed;inset:0}#info{top:var(--gutter);left:var(--gutter);width:min(390px, calc(100vw - 2 * var(--gutter)));position:fixed}.eyebrow{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);align-items:baseline;gap:14px;font-size:11px;display:flex}#stage-index{color:var(--accent)}#info h1{font-family:var(--serif);letter-spacing:-.01em;margin:10px 0 14px;font-size:52px;font-weight:400;line-height:.95}#info p{color:var(--ink-2);max-width:36em;margin:0;font-size:14px;line-height:1.6}#info p b{color:var(--ink);font-weight:500}#info p i{font-family:var(--serif);color:var(--ink);font-size:1.12em}#stage-actions{border-top:1px solid var(--rule);flex-wrap:wrap;margin-top:20px;display:flex}#stage-actions button{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);border-top:1px solid #0000;margin-top:-1px;margin-right:14px;padding:10px 14px 10px 0;font-size:11px;transition:color .15s,border-color .15s}#stage-actions button:before{content:"→ ";color:var(--faint);transition:color .15s}#stage-actions button:hover{color:var(--ink);border-top-color:var(--accent)}#stage-actions button:hover:before{color:var(--accent)}#stages{left:var(--gutter);right:var(--gutter);bottom:var(--gutter);border-top:1px solid var(--rule-strong);grid-template-columns:repeat(4,1fr);display:grid;position:fixed}#stages button{text-align:left;color:var(--muted);grid-template-columns:auto 1fr;align-items:baseline;gap:2px 12px;padding:12px 16px 0 0;transition:color .2s;display:grid;position:relative}#stages button:before{content:"";background:var(--rule-strong);width:1px;height:7px;position:absolute;top:-1px;left:0}#stages button:after{content:"";background:var(--accent);transform-origin:0;height:3px;transition:transform .5s cubic-bezier(.2,.7,.2,1);position:absolute;top:-2px;left:0;right:16px;transform:scaleX(0)}#stages button:hover{color:var(--ink-2)}#stages button.active{color:var(--ink)}#stages button.active:after{transform:scaleX(1)}#stages .m sup{vertical-align:.5em;margin-right:.15em;font-size:.72em;line-height:0}#stages .m{font-family:var(--mono);color:var(--accent);opacity:.55;grid-row:span 2;min-width:52px;font-size:12px}#stages button.active .m{opacity:1}#stages .t{font-family:var(--serif);font-size:21px;line-height:1.1}#stages .s{font-family:var(--mono);color:var(--muted);letter-spacing:.02em;font-size:10.5px}#hints{left:var(--gutter);bottom:calc(var(--gutter) + 74px);font-family:var(--mono);color:var(--muted);pointer-events:none;flex-wrap:wrap;gap:18px;font-size:10.5px;display:flex;position:fixed}kbd{font:inherit;color:var(--ink-2);border:1px solid var(--rule-strong);border-bottom-width:2px;border-radius:2px;margin:0 3px 0 0;padding:0 4px}#note{right:var(--gutter);bottom:calc(var(--gutter) + 108px);width:300px;color:var(--muted);text-align:right;margin:0;font-size:11.5px;line-height:1.55;position:fixed}#note i{font-family:var(--serif);color:var(--ink-2);font-size:1.1em}@media (width<=1280px){#note{display:none}}#sound{z-index:2;right:var(--gutter);bottom:calc(var(--gutter) + 70px);font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);align-items:center;gap:10px;padding:6px 0;font-size:10.5px;transition:color .15s;display:flex;position:fixed}#sound:hover{color:var(--ink)}#sound .eq{align-items:flex-end;gap:2px;height:12px;display:flex}#sound .eq i{background:currentColor;width:2px;height:2px}#sound[aria-pressed=true]{color:var(--ink-2)}#sound[aria-pressed=true] .eq i{background:var(--accent);animation:1.4s ease-in-out infinite alternate eq}#sound[aria-pressed=true] .eq i:nth-child(2){animation-duration:1.1s;animation-delay:-.5s}#sound[aria-pressed=true] .eq i:nth-child(3){animation-duration:1.7s;animation-delay:-.9s}#sound[aria-pressed=true] .eq i:nth-child(4){animation-duration:1.3s;animation-delay:-.2s}@keyframes eq{0%{height:2px}to{height:12px}}@media (prefers-reduced-motion:reduce){#sound .eq i{height:7px;animation:none!important}}@media (width<=900px){#sound{bottom:calc(var(--gutter) + 58px)}}#legend{left:var(--gutter);bottom:calc(var(--gutter) + 112px);width:150px;font-family:var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:10px;position:fixed}#legend .legend-title:before{content:"Curvature"}#legend.time .legend-title:before{content:"Clock rate"}#legend .legend-title{color:var(--ink-2);margin-bottom:8px}#legend .bar{height:3px}#legend .curvature{background:linear-gradient(90deg,#1a3cff,#29d4ff,#fff)}#legend .time{outline:1px solid var(--rule);background:linear-gradient(90deg,#26bfff,#ffcc40,#ff2618,#000);display:none}#legend.time .curvature{display:none}#legend.time .time{display:block}#legend .ends{justify-content:space-between;margin-top:6px;display:flex}#legend .l:before{content:"flat"}#legend .r:before{content:"deep"}#legend.time .l:before{content:"normal"}#legend.time .r:before{content:"stopped"}#readout{pointer-events:none;opacity:0;min-width:210px;font-family:var(--mono);border:1px solid var(--rule-strong);border-left:2px solid var(--accent);background:#030407e0;padding:9px 11px;font-size:11px;transition:opacity .12s;position:fixed;top:0;left:0}#readout.on{opacity:1}#readout div{justify-content:space-between;gap:16px;line-height:1.7;display:flex}#readout span{color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-size:10px}#readout b{font-weight:500}#readout em{border-top:1px solid var(--rule);color:var(--accent);margin-top:6px;padding-top:6px;font-style:normal;display:block}.label{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);white-space:nowrap;text-align:center;text-shadow:0 0 6px #000,0 0 2px #000;font-size:10px}.label small{letter-spacing:.02em;text-transform:none;color:var(--muted);margin-top:2px;font-size:9px;display:block}.label.major{font-family:var(--serif);letter-spacing:0;text-transform:none;font-size:17px}.label.minor{color:var(--muted);font-size:9px}.hide-labels .label{display:none}#fade{opacity:0;pointer-events:none;background:#000;transition:opacity .45s;position:fixed;inset:0}#fade.on{opacity:1}#loader{z-index:10;background:var(--bg);transition:opacity 1s .2s,visibility 0s linear 1.2s;position:fixed;inset:0}#loader.done{opacity:0;visibility:hidden}#loader-canvas{width:100%;height:100%;position:absolute;inset:0}.loader-head{top:var(--gutter);left:var(--gutter);right:var(--gutter);position:absolute}.loader-kicker{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:11px}.loader-title{font-family:var(--serif);margin-top:10px;font-size:clamp(44px,7vw,88px);line-height:.95}.loader-title i{color:var(--accent)}.loader-foot{left:var(--gutter);right:var(--gutter);bottom:var(--gutter);font-family:var(--mono);font-size:11px;position:absolute}.loader-row{text-transform:uppercase;letter-spacing:.06em;justify-content:space-between;gap:16px;display:flex}.loader-row.dim{color:var(--muted);margin-top:10px}#loader-pct{font-variant-numeric:tabular-nums}.loader-track{background:var(--rule-strong);height:1px;margin-top:10px;position:relative}#loader-fill{background:var(--accent);transform-origin:0;transition:transform .4s ease-out;position:absolute;inset:-1px 0;transform:scaleX(0)}#loader.failed #loader-step{color:#ff7a6b;text-transform:none}.loader-enter{left:50%;bottom:calc(var(--gutter) + 92px);opacity:0;justify-items:center;gap:12px;transition:opacity .6s,transform .6s;display:grid;position:absolute;transform:translate(-50%,8px)}.loader-enter.on{opacity:1;transform:translate(-50%)}#loader-enter{font-family:var(--serif);color:var(--ink);border:1px solid var(--rule-strong);padding:10px 28px 12px;font-size:40px;line-height:1;transition:border-color .2s,color .2s,background .2s}#loader-enter span{color:var(--accent);transition:transform .25s;display:inline-block}#loader-enter:hover{border-color:var(--accent);background:#f2b45a0f}#loader-enter:hover span{transform:translate(4px)}.loader-enter-note{font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-size:10.5px}#loader-silent{text-transform:inherit;letter-spacing:inherit;color:var(--ink-2);border-bottom:1px solid var(--rule-strong)}#loader-silent:hover{color:var(--ink);border-bottom-color:var(--accent)}.lil-gui{--font-family:var(--mono);--font-size:11px;--input-font-size:11px;--background-color:#030407db;--title-background-color:transparent;--title-text-color:var(--ink);--text-color:var(--ink-2);--widget-color:#e9e6df14;--hover-color:#e9e6df24;--focus-color:#e9e6df33;--number-color:var(--accent);--string-color:var(--ink);--widget-border-radius:0;--row-height:22px;--padding:6px;--spacing:6px}.lil-gui.lil-root{z-index:3;border:1px solid var(--rule);top:var(--gutter)!important;right:var(--gutter)!important}.lil-gui .lil-title{text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--rule)}.lil-gui .lil-gui .lil-title{color:var(--muted)}.lil-gui .lil-slider .lil-fill{border-right-color:var(--accent)}@media (width<=900px){:root{--gutter:16px}#info h1{font-size:38px}#info p{font-size:13px}#hints,#legend,#stages .s,#stages .m{display:none}#stages .t{font-size:16px}#scrim{background:linear-gradient(#030407d9 0,#03040700 55%),linear-gradient(0deg,#030407cc 0,#03040700 120px)}}