:root{color-scheme:dark;--sf-bg: #000000;--sf-bg-inset: #0b0b0e;--sf-surface: #101014;--sf-surface-strong: #17171c;--sf-text-primary: #f5f7fa;--sf-text-secondary: #c6cbd6;--sf-text-muted: #8b8f9a;--sf-text-faint: #5a5d66;--sf-border: rgba(255, 255, 255, .08);--sf-border-strong: rgba(255, 255, 255, .18);--sf-fill-gradient: linear-gradient( 90deg, #1b4fd8 0%, #2e5ce8 26%, #4a63ee 52%, #6a5cf0 74%, #8b5cf6 100% );--sf-glow-blue: rgba(74, 108, 245, .45);--sf-glow-violet: rgba(139, 92, 246, .42);--sf-font-sans: Inter, "SF Pro Display", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;--sf-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;--sf-tele-size: clamp(40px, 4.4vw, 64px);--sf-tele-weight: 700;--sf-mode-size: clamp(28px, 3vw, 40px);--sf-mode-weight: 650;--sf-mode-tracking: -.02em;--sf-label-size: 13px;--sf-space-1: 4px;--sf-space-2: 8px;--sf-space-3: 12px;--sf-space-4: 16px;--sf-space-5: 20px;--sf-space-6: 24px;--sf-space-8: 32px;--sf-space-10: 40px;--sf-space-12: 48px;--sf-radius-md: 14px;--sf-radius-lg: 18px;--sf-radius-xl: 24px;--sf-radius-pill: 999px;--sf-motion-instant: .14s;--sf-motion-fast: .25s;--sf-motion-normal: .35s;--sf-motion-slow: .65s;--sf-motion-grand: .95s;--sf-ease-standard: cubic-bezier(.22, 1, .36, 1);--sf-ease-enter: cubic-bezier(.2, .8, .2, 1);--sf-ease-exit: cubic-bezier(.4, 0, 1, 1);--sf-z-canvas: 1;--sf-z-content: 10;--sf-z-panel: 40;--sf-target-min: 44px;--sf-focus-width: 3px;--sf-focus-offset: 3px;--sf-ring: rgba(122, 162, 255, .55)}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{background:var(--sf-bg);color:var(--sf-text-primary);font-family:var(--sf-font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden;overscroll-behavior:none}button{font-family:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}:focus-visible{outline:var(--sf-focus-width) solid var(--sf-ring);outline-offset:var(--sf-focus-offset)}.app{position:fixed;inset:0;background:#000;overflow:hidden}.app:after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(120% 90% at 42% 46%,transparent 55%,rgba(0,0,0,.5) 100%)}.scene-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:var(--sf-z-canvas);display:block;opacity:0;transition:opacity 1.4s ease}.app.is-ready .scene-canvas{opacity:1}.brand{position:absolute;top:clamp(18px,3.4vh,34px);left:clamp(18px,3vw,40px);z-index:var(--sf-z-content);user-select:none}.brand-title{font-size:15px;font-weight:700;letter-spacing:.01em;color:var(--sf-text-primary);display:flex;align-items:baseline;gap:2px}.brand-title .tm{font-size:9px;color:var(--sf-text-muted);transform:translateY(-4px)}.brand-kicker{margin-top:6px;font-family:var(--sf-font-mono);font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--sf-text-faint)}.telemetry{position:absolute;top:clamp(14px,2.6vh,28px);right:clamp(18px,3vw,40px);z-index:var(--sf-z-content);display:flex;flex-direction:column;align-items:flex-end;gap:2px;user-select:none;pointer-events:none}.tele-item{display:flex;align-items:baseline;gap:7px;line-height:1.04}.tele-value{font-size:var(--sf-tele-size);font-weight:var(--sf-tele-weight);font-variant-numeric:tabular-nums;letter-spacing:-.015em;color:var(--sf-text-primary);min-width:2.1ch;text-align:right}.tele-unit{font-size:13px;font-weight:500;color:var(--sf-text-muted);letter-spacing:.02em;font-variant-numeric:tabular-nums}.stage{position:absolute;left:0;right:0;margin-inline:auto;bottom:max(clamp(18px,4.2vh,44px),env(safe-area-inset-bottom));z-index:var(--sf-z-content);width:min(760px,calc(100vw - 40px));display:flex;flex-direction:column;align-items:center;user-select:none;touch-action:pan-y}.mode-wrap{height:calc(var(--sf-mode-size) * 1.5);display:flex;align-items:center;justify-content:center;margin-bottom:10px;position:relative;width:100%}.mode-name{font-size:var(--sf-mode-size);font-weight:var(--sf-mode-weight);letter-spacing:var(--sf-mode-tracking);color:var(--sf-text-primary);line-height:1.1;position:absolute;white-space:nowrap}.mode-name.is-in{animation:mode-in var(--sf-motion-slow) var(--sf-ease-enter) both}.mode-name.is-out{animation:mode-out .22s var(--sf-ease-exit) both}@keyframes mode-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes mode-out{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-10px)}}.slider{position:relative;width:100%;height:78px;cursor:grab;touch-action:none}.slider:active{cursor:grabbing}.slider-shell{position:absolute;inset:0;border-radius:var(--sf-radius-pill);background:var(--sf-surface);border:1px solid var(--sf-border);box-shadow:inset 0 1px #ffffff0a,0 18px 60px #0009;transition:border-color var(--sf-motion-fast) ease,box-shadow var(--sf-motion-normal) ease}.slider.is-active .slider-shell{border-color:#ffffff24;box-shadow:inset 0 1px #ffffff0d,0 22px 72px #000000a6}.slider-rail{position:absolute;inset:11px;border-radius:var(--sf-radius-pill);background:#0a0a0d;overflow:hidden}.slider-fill{position:absolute;inset:0;border-radius:var(--sf-radius-pill);background:var(--sf-fill-gradient);will-change:clip-path}.fill-sheen{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.1) 46%,rgba(255,255,255,.03) 54%,transparent 68%);background-size:240% 100%;animation:fill-sheen 9s cubic-bezier(.45,0,.55,1) infinite;pointer-events:none}@keyframes fill-sheen{0%{background-position:130% 0}to{background-position:-30% 0}}.fill-star{position:absolute;width:2px;height:2px;border-radius:50%;background:#ffffffd9;filter:blur(.4px);opacity:0;animation:star calc(var(--star-dur, 6s) / var(--star-speed, 1)) ease-in-out infinite;animation-delay:var(--star-delay, 0s);pointer-events:none}.fill-star:after{content:"";position:absolute;inset:-2px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.35) 0%,transparent 70%)}@keyframes star{0%,to{opacity:.1;transform:translate(0)}50%{opacity:.62;transform:translate(2px,-1.5px)}}.detent{position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:#ffffff38;transform:translate(-2.5px);transition:background var(--sf-motion-fast) ease,box-shadow var(--sf-motion-fast) ease;pointer-events:none}.detent.is-passed{background:#ffffffd9}.detent.is-current{background:#fff;box-shadow:0 0 10px #ffffff8c}.slider-thumb{position:absolute;top:50%;left:0;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff,#fffffff7 38%,#e2e5f0f5);box-shadow:0 6px 30px #0000008c,0 1px 4px #0006;will-change:transform;pointer-events:none;transition:box-shadow var(--sf-motion-normal) ease}.slider-thumb:after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px #00000014,inset 0 -6px 14px #5a608029}.slider.is-hover .slider-thumb{box-shadow:0 8px 34px #0009,0 0 18px #ffffff1a}.slider.is-active .slider-thumb{box-shadow:0 10px 40px #0000009e,0 0 26px var(--sf-glow-violet),0 0 12px #fff3}.labels-row{position:relative;width:100%;height:26px;margin-top:10px}.labels-inner{position:absolute;inset:0 11px}.label{position:absolute;top:0;transform:translate(-50%);font-size:var(--sf-label-size);font-weight:500;letter-spacing:.005em;color:var(--sf-text-faint);white-space:nowrap;transition:color var(--sf-motion-normal) ease;pointer-events:none}.label.is-current{color:var(--sf-text-primary);font-weight:600}.hint{margin-top:8px;font-size:12px;color:var(--sf-text-faint);letter-spacing:.01em;transition:opacity var(--sf-motion-slow) ease;pointer-events:none}.hint.is-hidden{opacity:0}.hud{position:absolute;left:clamp(16px,2.6vw,34px);bottom:max(clamp(16px,3vh,30px),env(safe-area-inset-bottom));z-index:var(--sf-z-content);display:flex;align-items:center;gap:8px}.hud-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--sf-text-muted);border:1px solid transparent;transition:color var(--sf-motion-fast) ease,border-color var(--sf-motion-fast) ease,background var(--sf-motion-fast) ease}.hud-btn:before{content:"";position:absolute;inset:-5px;border-radius:50%}.hud-btn{position:relative}.hud-btn:hover{color:var(--sf-text-primary);border-color:var(--sf-border);background:#ffffff08}.hud-btn.is-on{color:var(--sf-text-primary)}.hud-btn svg{width:17px;height:17px;display:block}.hud-lang{font-size:12px;font-weight:600;letter-spacing:.04em;width:auto;min-width:44px;height:34px;padding:0 10px;border-radius:var(--sf-radius-pill)}.info-panel{position:absolute;left:clamp(16px,2.6vw,34px);bottom:calc(max(clamp(16px,3vh,30px),env(safe-area-inset-bottom)) + 52px);z-index:var(--sf-z-panel);width:min(360px,calc(100vw - 32px));padding:20px 22px;border-radius:var(--sf-radius-lg);background:#0a0a0d;border:1px solid var(--sf-border);box-shadow:0 24px 80px #000000b3;animation:panel-in var(--sf-motion-normal) var(--sf-ease-enter) both}@keyframes panel-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.info-title{font-family:var(--sf-font-mono);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--sf-text-muted);margin:0 0 10px}.info-body{font-size:13px;line-height:1.7;color:var(--sf-text-secondary);margin:0}.info-note{margin-top:12px;padding-top:12px;border-top:1px solid var(--sf-border);font-size:12px;line-height:1.65;color:var(--sf-text-muted)}.info-note em{font-style:normal;color:var(--sf-text-secondary)}.info-kbd{margin-top:10px;font-size:11px;color:var(--sf-text-faint);font-family:var(--sf-font-mono);letter-spacing:.03em}.info-kbd kbd{font-family:inherit;border:1px solid var(--sf-border-strong);border-radius:5px;padding:1px 5px;font-size:10px;color:var(--sf-text-secondary)}.rise{opacity:0;transform:translateY(14px);animation:rise var(--sf-motion-grand) var(--sf-ease-enter) both;animation-delay:var(--rise-delay, 0ms)}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1024px){.stage{width:min(700px,calc(100vw - 36px))}}@media(max-width:900px){:root{--sf-tele-size: clamp(34px, 6vw, 46px);--sf-mode-size: clamp(26px, 5vw, 32px)}.tele-unit{font-size:12px}}@media(max-width:640px){:root{--sf-tele-size: clamp(30px, 8.4vw, 38px);--sf-mode-size: clamp(24px, 7vw, 28px);--sf-label-size: 12px}.brand{top:max(14px,env(safe-area-inset-top));left:18px}.telemetry{top:max(12px,env(safe-area-inset-top));right:18px;gap:0}.stage{width:calc(100vw - 32px);bottom:max(18px,env(safe-area-inset-bottom))}.slider{height:76px}.slider-thumb{width:42px;height:42px;margin:-21px 0 0 -21px}.labels-row{height:22px;margin-top:8px}.hint{display:none}.hud{left:18px;bottom:auto;top:calc(max(14px,env(safe-area-inset-top)) + 46px)}.info-panel{left:16px;right:16px;width:auto;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 168px)}}@media(max-width:400px){.label{font-size:11px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.mode-name.is-in{animation:mode-in-fade var(--sf-motion-fast) ease both}.scene-canvas{transition:opacity .4s ease}}@keyframes mode-in-fade{0%{opacity:0}to{opacity:1}}