:root{--bg: #000000;--ink: #f5f5f7;--ink-dim: rgba(235, 235, 245, .62);--ink-faint: rgba(235, 235, 245, .32);--accent: #0a84ff;--sep: rgba(255, 255, 255, .1);--control: rgba(255, 255, 255, .1);--control-hover: rgba(255, 255, 255, .16);--material: rgba(40, 40, 44, .6);--material-thick: rgba(36, 36, 40, .78);--blur: blur(30px) saturate(180%);--window-shadow: 0 0 0 .5px rgba(0, 0, 0, .7), inset 0 .5px 0 rgba(255, 255, 255, .14), 0 22px 60px rgba(0, 0, 0, .5);--sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", sans-serif;--display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", sans-serif;--mono: ui-monospace, "SF Mono", Menlo, "Roboto Mono", monospace}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}#app{position:fixed;inset:0}#app canvas{display:block;width:100%;height:100%;touch-action:none}#loader{position:fixed;inset:0;display:grid;place-items:center;background:#000;z-index:100;transition:opacity .8s ease,visibility .8s}#loader.hidden{opacity:0;visibility:hidden}.loader-inner{display:grid;justify-items:center}.loader-logo{width:72px;height:72px;color:var(--ink)}.loader-bar{width:180px;height:5px;margin-top:48px;border-radius:3px;background:#ffffff38;overflow:hidden}.loader-bar i{display:block;height:100%;width:0;border-radius:3px;background:var(--ink);transition:width .3s ease}#welcome{position:fixed;inset:0;z-index:101;display:grid;place-items:center;background:#000;cursor:default;transition:opacity .9s ease,visibility .9s}#welcome.out{opacity:0;visibility:hidden}.welcome-inner{text-align:center;padding:0 24px}.welcome-hello{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(88px,15vw,190px);line-height:1;letter-spacing:-.045em;color:var(--ink)}.welcome-hello span{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(18px);animation:welcome-letter .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(.15s + var(--i) * .12s)}.welcome-line,.welcome-credit{margin:0;opacity:0;animation:welcome-fade .8s ease forwards}.welcome-line{margin-top:22px;font-size:clamp(17px,2vw,22px);color:var(--ink-dim);animation-delay:.9s}.welcome-credit{margin-top:56px;font-size:13px;letter-spacing:.01em;color:var(--ink-faint);animation-delay:1.4s}.welcome-credit a{color:var(--ink);font-weight:600;text-decoration:none}.welcome-credit a:hover{color:var(--accent)}@keyframes welcome-letter{to{opacity:1;filter:none;transform:none}}@keyframes welcome-fade{to{opacity:1}}@media (prefers-reduced-motion: reduce){.welcome-hello span,.welcome-line,.welcome-credit{animation-duration:.01s;animation-delay:0s}}#hud{position:fixed;inset:0;pointer-events:none;z-index:10;font-family:var(--sans);font-size:13px;letter-spacing:-.003em}#hud button,#hud input,#hud .panel,#hud .timeline,#hud .composer,#hud .topbar,#hud .intro{pointer-events:auto}#hud button{font:inherit;color:inherit;cursor:default;border:0;background:none}#hud button:disabled{opacity:.3}#hud button:focus-visible,#hud input:focus-visible{outline:none;box-shadow:0 0 0 3px #0a84ff8c}.window{background:var(--material-thick);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-radius:12px;box-shadow:var(--window-shadow);overflow:hidden}.titlebar{position:relative;height:36px;display:flex;align-items:center;justify-content:center;border-bottom:.5px solid rgba(0,0,0,.6);background:#ffffff0a}.lights{position:absolute;left:13px;top:50%;transform:translateY(-50%);display:flex;gap:8px}.lights i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 .5px #00000040}.lights i:nth-child(1){background:#ff5f57}.lights i:nth-child(2){background:#febc2e}.lights i:nth-child(3){background:#28c840}.window-body{padding:18px 20px 20px}.lang,.speed{display:flex;padding:2px;gap:2px;border-radius:7px;background:var(--control)}.lang button,.speed button{padding:2px 9px;border-radius:5px;font-size:12px;font-weight:500;color:var(--ink-dim)}.lang button.on,.speed button.on{background:#ffffff38;color:var(--ink);box-shadow:0 .5px 1.5px #00000073}.icon-btn{width:34px;height:30px;border-radius:6px;display:grid;place-items:center;color:var(--ink)}.icon-btn:hover:not(:disabled){background:var(--control)}.icon-btn[aria-pressed=false]{color:var(--ink-dim)}.icon-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.topbar{z-index:2;position:absolute;top:0;left:0;right:0;height:34px;display:flex;justify-content:space-between;align-items:center;padding:0 10px 0 14px;gap:12px;background:#1e1e228c;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:0 .5px #0009;font-size:13.5px}.brand{display:flex;align-items:center;gap:4px;min-width:0}.logo{display:grid;place-items:center;width:30px;height:24px;color:var(--ink)}.logo svg{width:15px;height:15px}.brand-title{padding:0 8px;font-weight:700;white-space:nowrap}.views{display:flex;gap:2px}.views button{padding:3px 9px;border-radius:5px;color:var(--ink)}.views button:hover{background:var(--control)}.views button.on{background:var(--control-hover)}.top-actions{display:flex;align-items:center;gap:4px}.top-actions .icon-btn{width:30px;height:24px;border-radius:5px}.top-actions .icon-btn svg{width:15px;height:15px}.top-actions .lang{margin:0 6px}.clock{padding:0 6px;font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}.panel{position:absolute;right:20px;top:50%;transform:translateY(-50%);width:360px;max-height:calc(100vh - 190px);overflow-y:auto;transition:opacity .4s}.panel-step{font-size:13px;font-weight:600;color:var(--ink-dim)}.panel-title{margin:0 0 8px;font-family:var(--display);font-weight:700;font-size:26px;line-height:1.15;letter-spacing:-.022em}.panel-body{margin:0 0 16px;font-size:13.5px;line-height:1.55;color:#ebebf5d1}.panel-fact{font-size:12.5px;line-height:1.5;color:var(--ink-dim);background:#ffffff0d;border:.5px solid var(--sep);border-radius:8px;padding:10px 12px}.panel-fact b{display:block;margin-bottom:3px;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--ink-faint)}.panel-progress{margin-top:16px;height:4px;border-radius:2px;background:#ffffff1f;overflow:hidden}.panel-progress i{display:block;height:100%;width:0;border-radius:2px;background:var(--accent)}.panel-controls:empty{display:none}.panel-controls{margin-bottom:16px}.ctrl{display:grid;gap:8px;font-size:13px;color:var(--ink)}.ctrl span{display:flex;justify-content:space-between}.ctrl output{font-family:var(--mono);color:var(--ink-dim);font-variant-numeric:tabular-nums}input[type=range]{--p: 30%;-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;outline:none}input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent) var(--p),rgba(255,255,255,.18) var(--p))}input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:#ffffff2e}input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:#fff;box-shadow:0 .5px 3px #0000008c}input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:#fff;box-shadow:0 .5px 3px #0000008c}.heads{display:grid;grid-template-columns:1fr 1fr;gap:6px}.heads button{text-align:left;padding:8px 10px;border-radius:8px;background:var(--control)!important;font-size:13px;font-weight:600;box-shadow:inset 0 0 0 .5px var(--sep)}.heads button small{display:block;margin-top:1px;font-weight:400;font-size:12px;color:var(--ink-dim)}.heads button:hover{background:var(--control-hover)!important}.heads button.on{background:var(--accent)!important;box-shadow:none}.heads button.on small{color:#fffc}.composer{position:absolute;left:20px;right:400px;bottom:100px;display:none;justify-content:center}#hud.composing .composer{display:flex;animation:rise .35s cubic-bezier(.2,.8,.2,1) both}.composer-box{width:min(640px,100%);border-radius:14px;background:var(--material-thick);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--window-shadow);overflow:hidden}.spot-row{display:flex;align-items:center;gap:10px;padding:0 10px 0 16px;height:56px}.spot-row>svg{flex:none;width:22px;height:22px;fill:none;stroke:var(--ink-dim);stroke-width:1.8;stroke-linecap:round}.spot-row input{flex:1;min-width:0;background:none;border:0;color:var(--ink);font:400 21px var(--display);letter-spacing:-.01em}.spot-row input:focus-visible{box-shadow:none!important}.spot-row input::placeholder{color:var(--ink-faint)}.send{flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent)!important;display:grid;place-items:center}.send svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.suggestions{display:grid;padding:6px;border-top:.5px solid var(--sep)}.suggestions button{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;text-align:left;font-size:14px;color:var(--ink)}.suggestions button svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--ink-dim);stroke-width:1.7;stroke-linejoin:round}.suggestions button:hover{background:var(--accent)!important}.suggestions button:hover svg{stroke:#fff}.timeline{position:absolute;left:20px;right:20px;bottom:12px;height:62px;border-radius:18px;display:flex;align-items:center;padding:0 10px;gap:2px;background:#28282c80;backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:0 0 0 .5px #ffffff29,0 12px 40px #00000073}.timeline .icon-btn{width:34px;height:34px;border-radius:8px}.play{width:38px!important;height:38px!important;border-radius:50%!important;background:#ffffff24!important}.play:hover{background:#ffffff38!important}.steps{flex:1;display:flex;list-style:none;margin:0 10px;padding:0;gap:4px;min-width:0}.steps li{flex:1;min-width:0}.steps button{width:100%;padding:8px 4px 5px;display:flex;flex-direction:column;align-items:center;gap:6px;border-radius:8px}.steps button:not(:disabled):hover{background:#ffffff12}.steps i{width:100%;height:4px;border-radius:2px;background:#ffffff24;transition:background .3s}.steps .done i{background:#ffffff80}.steps .on i{background:var(--accent)}.steps span{font-size:11px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.steps .done span{color:var(--ink-dim)}.steps .on span{color:var(--ink);font-weight:600}.speed{margin:0 8px}.hint{position:absolute;left:24px;bottom:84px;font-size:11.5px;color:var(--ink-faint)}#hud.composing .hint{display:none}.intro{position:absolute;inset:34px 0 0;display:none;align-items:center;padding:0 6vw;background:#00000040}#hud.show-intro .intro{display:flex}#hud.show-intro .panel,#hud.show-intro .timeline,#hud.show-intro .hint,#hud.show-intro .views{opacity:0;pointer-events:none}.intro-card{width:min(520px,100%);animation:pop .45s cubic-bezier(.2,.9,.25,1.1) both}.intro-card .window-body{padding:26px 30px}.app-icon{width:64px;height:64px;border-radius:15px;background:#2c2c2e;box-shadow:inset 0 0 0 .5px #ffffff2e,0 4px 12px #0006}.app-icon svg{width:100%;height:100%}.intro h1{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.2vw,38px);line-height:1.1;letter-spacing:-.025em;margin:20px 0 12px}.intro p{font-size:15px;line-height:1.55;color:#ebebf5d1;margin:0 0 24px}.intro-start{padding:8px 22px;border-radius:8px;font-size:14px!important;font-weight:500!important;background:var(--accent)!important;color:#fff!important;box-shadow:inset 0 .5px #ffffff40,0 1px 2px #0006}.intro-start:hover{filter:brightness(1.1)}.intro small{display:block;margin-top:18px;padding-top:14px;border-top:.5px solid var(--sep);color:var(--ink-faint);font-size:12px;line-height:1.45}#hud a{pointer-events:auto}.intro-credit{margin-top:10px;font-size:12px;color:var(--ink-faint)}.intro-credit a{color:var(--ink-dim);font-weight:600;text-decoration:none}.intro-credit a:hover{color:var(--accent)}@keyframes rise{0%{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}@keyframes pop{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}@media (max-width: 1100px){.steps span{display:none}.steps .on span{display:block}.clock{display:none}}@media (max-width: 760px){.topbar{padding:0 6px 0 8px}.views{display:none}.brand-title{font-size:13px;overflow:hidden;text-overflow:ellipsis}.panel{inset:auto 10px 82px;width:auto;transform:none;max-height:38vh}.panel .window-body{padding:12px 16px 14px}.panel-title{font-size:22px}.panel-body{font-size:13.5px}.panel-fact,#hud.composing .panel{display:none}.composer{left:10px;right:10px;bottom:82px}.spot-row input{font-size:17px}.timeline{left:8px;right:8px;bottom:10px;height:58px;padding:0 4px}.speed,.steps span,.steps .on span,.hint{display:none}.intro{align-items:flex-end;padding:0 12px 24px}.intro-card .window-body{padding:20px}.intro p{font-size:14px}}