:root{--bg:#05070a;--panel:#0c1016c7;--panel-solid:#0e131a;--line:#ffffff1a;--line-strong:#ffffff38;--text:#eef2f6;--muted:#95a1ae;--green:#3ddc84;--amber:#ffae1a;--red:#ff5252;--blue:#4aa3ff;--cyan:#22d3ff;--magenta:#e45cff;--radius:10px;--safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);--font:"Inter", "Noto Sans TC", system-ui, -apple-system, "PingFang TC", sans-serif;--mono:"B612 Mono", ui-monospace, monospace;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body,#root{width:100%;height:100vh;background:var(--bg);height:100dvh;color:var(--text);font-family:var(--font);-webkit-font-smoothing:antialiased;overscroll-behavior:none;margin:0;overflow:hidden}button,select,input{font:inherit;color:inherit}button{cursor:pointer}:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.app{touch-action:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0}.gl{width:100%;height:100%;display:block;position:absolute;inset:0}.loading{z-index:20;background:radial-gradient(at 50% 30%,#0f1822 0%,#05070a 70%);place-content:center;gap:36px;padding:24px;transition:opacity .6s;display:grid;position:absolute;inset:0}.loading.fade-out{opacity:0;pointer-events:none}.brand-type{letter-spacing:.04em;font-size:clamp(34px,7vw,64px);font-weight:700}.brand-sub{font-family:var(--mono);color:var(--muted);letter-spacing:.32em;margin-top:4px;font-size:clamp(11px,1.6vw,14px)}.load-steps{font-family:var(--mono);letter-spacing:.12em;color:#4d5864;gap:10px;margin:0;padding:0;font-size:13px;list-style:none;display:grid}.load-steps li{align-items:center;gap:12px;display:flex}.load-steps li.active{color:var(--text)}.load-steps li.done{color:var(--muted)}.load-dot{background:currentColor;border-radius:50%;width:7px;height:7px}.load-steps li.active .load-dot{background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:1s infinite blink}.load-ok{color:var(--green);margin-left:auto}.load-bar{background:var(--line);width:min(420px,80vw);height:2px}.load-bar div{background:var(--cyan);height:100%;transition:width .3s}@keyframes blink{50%{opacity:.35}}.menu{padding:calc(24px + var(--safe-t)) calc(24px + var(--safe-r)) calc(24px + var(--safe-b)) calc(24px + var(--safe-l));z-index:10;touch-action:pan-y;background:linear-gradient(90deg,#05070ae0 0%,#05070a80 45%,#05070a00 70%);justify-content:flex-start;align-items:safe center;display:flex;position:absolute;inset:0;overflow-y:auto}.menu-card{gap:22px;width:min(560px,100%);margin:auto 0;display:grid}.menu-head{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.section-label{letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-size:11px;font-weight:600}.scenario-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.scenario{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);gap:6px;padding:14px 14px 12px;transition:border-color .15s,background .15s;display:grid}.scenario:hover{border-color:var(--line-strong)}.scenario.selected{border-color:var(--cyan);background:#22d3ff14}.scenario-title{font-size:15px;font-weight:600}.scenario-desc{color:var(--muted);font-size:12.5px;line-height:1.45}.menu-row{flex-wrap:wrap;align-items:flex-end;gap:16px;display:flex}.primary{background:var(--text);color:#06090d;border-radius:var(--radius);letter-spacing:.06em;border:0;padding:12px 22px;font-weight:700}.primary:hover{background:#fff}.primary.small{padding:6px 12px;font-size:12px}.start{justify-self:start;min-width:180px;font-size:15px}.seg{border:1px solid var(--line);background:#ffffff0f;border-radius:8px;gap:2px;padding:2px;display:inline-flex}.seg button{color:var(--muted);background:0 0;border:0;border-radius:6px;padding:7px 14px;font-size:13px;font-weight:500}.seg button.on{color:var(--text);background:#ffffff24}.seg.small button{padding:4px 9px;font-size:12px}.field{color:var(--muted);gap:6px;font-size:12.5px;display:grid}.field select,.cam-select{border:1px solid var(--line);color:var(--text);background:#ffffff0f;border-radius:8px;padding:7px 10px}.field select option,.cam-select option{background:var(--panel-solid)}.check{color:var(--text);align-items:center;gap:8px;font-size:13px;display:flex}input[type=range]{accent-color:var(--cyan);width:100%}.note{color:var(--muted);font-size:11.5px}.sim-ui{pointer-events:none;z-index:5;position:absolute;inset:0}.sim-ui>*{pointer-events:auto}.topbar{padding:calc(8px + var(--safe-t)) calc(12px + var(--safe-r)) 8px calc(12px + var(--safe-l));background:linear-gradient(#05070ab8,#05070a00);justify-content:space-between;align-items:center;gap:10px;display:flex;position:absolute;top:0;left:0;right:0}.tb-left,.tb-center,.tb-right{align-items:center;gap:8px;min-width:0;display:flex}.tb-right{flex-wrap:wrap;justify-content:flex-end}.brand-btn{letter-spacing:.04em;background:0 0;border:0;padding:4px 6px;font-size:16px;font-weight:700}.brand-btn span{color:var(--muted);font-weight:500}.phase-chip{font-family:var(--mono);letter-spacing:.12em;color:var(--green);white-space:nowrap;border:1px solid #3ddc8459;border-radius:6px;padding:3px 7px;font-size:11px}.chip-btn{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap;border-radius:8px;padding:6px 11px;font-size:12.5px}.chip-btn.on{border-color:var(--cyan);color:var(--cyan)}.chip-btn:disabled{opacity:.4;cursor:default}.chip-wrap{flex-wrap:wrap;gap:6px;display:flex}.icon-btn{color:var(--muted);background:0 0;border:0;padding:4px 8px;font-size:16px}.panel{top:calc(60px + var(--safe-t));right:calc(12px + var(--safe-r));width:min(360px,100vw - 24px);max-height:calc(100dvh - 90px - var(--safe-t) - var(--safe-b));background:var(--panel);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);z-index:6;touch-action:pan-y;border-radius:12px;position:absolute;overflow-y:auto}.panel-head{background:var(--panel);justify-content:space-between;align-items:center;padding:12px 14px 6px;display:flex;position:sticky;top:0}.panel-head h2{letter-spacing:.08em;margin:0;font-size:14px}.panel-body{gap:14px;padding:6px 14px 16px;display:grid}.panel h3{letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:4px 0 0;font-size:11px}.help-list{gap:8px;margin:0;padding-left:18px;font-size:13px;line-height:1.45;display:grid}.stat-grid{gap:6px;display:grid}.stat{border-left:2px solid var(--line-strong);justify-content:space-between;gap:10px;padding:3px 8px;font-size:12px;display:flex}.stat-label{color:var(--muted)}.stat-value{font-family:var(--mono);text-align:right}.stat.ok{border-color:var(--green)}.stat.warn{border-color:var(--amber)}.stat.warn .stat-value{color:var(--amber)}.stat.bad{border-color:var(--red)}.stat.bad .stat-value{color:var(--red)}.ext-hud{left:calc(14px + var(--safe-l));bottom:calc(16px + var(--safe-b));border:1px solid var(--line);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#05070a80;border-radius:10px;gap:4px;min-width:170px;padding:8px 6px;display:grid;position:absolute}.demo-banner{top:calc(56px + var(--safe-t));background:var(--panel);border:1px solid var(--line);font-family:var(--mono);letter-spacing:.14em;white-space:nowrap;border-radius:999px;align-items:center;gap:10px;padding:5px 6px 5px 14px;font-size:11.5px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.pulse{background:var(--green);border-radius:50%;width:8px;height:8px;animation:1.4s infinite blink}.center-reticle{pointer-events:none;border:1px solid #ffffff59;border-radius:50%;width:14px;height:14px;margin:-7px 0 0 -7px;position:absolute;top:50%;left:50%}.mouse-reticle{pointer-events:none;border:1px solid #ffffff40;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.mouse-reticle:before,.mouse-reticle:after{content:"";background:#ffffff40;position:absolute}.mouse-reticle:before{width:1px;top:0;bottom:0;left:50%}.mouse-reticle:after{height:1px;top:50%;left:0;right:0}.mr-dot{background:var(--cyan);width:12px;height:12px;box-shadow:0 0 8px var(--cyan);border-radius:50%;margin:-6px 0 0 -6px;position:absolute;top:50%;left:50%}.hover-tip{left:50%;bottom:calc(22px + var(--safe-b));background:var(--panel);border:1px solid var(--line);pointer-events:none;font-size:12px;font-family:var(--mono);border-radius:8px;gap:10px;padding:6px 12px;display:flex;position:absolute;transform:translate(-50%)}.hover-tip span{color:var(--muted)}.assist{left:calc(14px + var(--safe-l));top:calc(64px + var(--safe-t));background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #22d3ff59;border-radius:10px;width:min(340px,100vw - 28px);padding:10px 12px;position:absolute}.assist.done{border-color:#3ddc8473;font-size:13px}.assist-head{letter-spacing:.18em;color:var(--cyan);text-transform:uppercase;margin-bottom:4px;font-size:10.5px}.assist-text{font-size:13px;line-height:1.45}.toast{top:calc(96px + var(--safe-t));background:var(--panel);border:1px solid var(--line);font-family:var(--mono);border-radius:8px;padding:6px 14px;font-size:12px;position:absolute;left:50%;transform:translate(-50%)}.paused-badge{font-family:var(--mono);letter-spacing:.4em;border:1px solid var(--line-strong);pointer-events:none;background:#05070a99;border-radius:8px;padding:10px 20px;font-size:18px;position:absolute;top:45%;left:50%;transform:translate(-50%,-50%)}.replay-bar{left:50%;bottom:calc(18px + var(--safe-b));background:var(--panel);border:1px solid var(--line);border-radius:10px;align-items:center;gap:10px;width:min(640px,100vw - 24px);padding:8px 12px;display:flex;position:absolute;transform:translate(-50%)}.replay-bar .rec{color:var(--red);font-family:var(--mono);letter-spacing:.14em;white-space:nowrap;font-size:11px}.dev-overlay{right:calc(12px + var(--safe-r));bottom:calc(12px + var(--safe-b));font-family:var(--mono);color:var(--green);pointer-events:none;background:#0009;border-radius:6px;padding:6px 10px;font-size:11px;line-height:1.5;position:absolute}.overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:30;background:#03040699;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.overlay-card{background:var(--panel-solid);border:1px solid var(--line);text-align:center;border-radius:12px;max-width:420px;padding:22px 26px}.overlay-card h2{letter-spacing:.08em;margin:0 0 8px}.overlay-card p{color:var(--muted)}.pfd-repeater{right:calc(10px + var(--safe-r));top:calc(158px + var(--safe-t));aspect-ratio:1;border:1px solid var(--line-strong);pointer-events:none;background:#000;border-radius:8px;width:34vw;max-width:180px;position:absolute}.mobile-controls{pointer-events:none;position:absolute;inset:0}.mobile-controls>*{pointer-events:auto}.joystick{left:calc(16px + var(--safe-l));bottom:calc(24px + var(--safe-b));aspect-ratio:1;border:1px solid var(--line-strong);touch-action:none;background:#0c101673;border-radius:50%;width:min(38vw,150px);position:absolute}.joy-cross{border:1px dashed #ffffff26;border-radius:50%;position:absolute;inset:22%}.joy-knob{aspect-ratio:1;background:#eef2f6d9;border-radius:50%;width:38%;position:absolute;top:50%;left:50%;box-shadow:0 2px 10px #00000080}.throttle{right:calc(14px + var(--safe-r));bottom:calc(24px + var(--safe-b));justify-items:center;gap:6px;display:grid;position:absolute}.thr-track{border:1px solid var(--line-strong);touch-action:none;background:#0c10168c;border-radius:10px;width:58px;height:min(42vh,230px);position:relative}.thr-detent{font-family:var(--mono);color:var(--muted);padding-right:4px;font-size:9.5px;position:absolute;left:-2px;transform:translate(-100%,50%)}.thr-handle{background:#eef2f6;border-radius:5px;height:18px;position:absolute;left:4px;right:4px;transform:translateY(50%)}.thr-n1{font-family:var(--mono);color:var(--green);font-size:11px}.rudder-brake{left:50%;bottom:calc(18px + var(--safe-b));justify-items:center;gap:8px;width:min(40vw,260px);display:grid;position:absolute;transform:translate(-50%)}.brake-btn{background:#ff525229;border:1px solid #ff525280;border-radius:8px;width:100%;padding:8px;font-size:13px;font-weight:600}.cam-btn{right:calc(12px + var(--safe-r));top:calc(100px + var(--safe-t));background:var(--panel);border:1px solid var(--line);text-align:left;border-radius:10px;padding:6px 12px;font-size:12.5px;display:grid;position:absolute}.cam-btn small{color:var(--muted);font-size:10.5px}.cam-sheet{right:calc(12px + var(--safe-r));top:calc(150px + var(--safe-t));background:var(--panel-solid);border:1px solid var(--line);touch-action:pan-y;border-radius:10px;gap:2px;width:190px;max-height:60dvh;padding:6px;display:grid;position:absolute;overflow-y:auto}.cam-sheet button{text-align:left;background:0 0;border:0;border-radius:6px;padding:8px 10px;font-size:13px}.cam-sheet button.on{color:var(--cyan);background:#22d3ff1f}.knob-pad{left:50%;bottom:calc(20px + var(--safe-b));background:var(--panel-solid);border:1px solid var(--line-strong);touch-action:none;border-radius:14px;gap:8px;width:min(280px,100vw - 24px);padding:12px;display:grid;position:absolute;transform:translate(-50%)}.knob-title{font-family:var(--mono);letter-spacing:.16em;text-align:center;color:var(--cyan);font-size:12px}.knob-row{grid-template-columns:1fr 1fr;gap:8px;display:grid}.knob-row button,.knob-close{border:1px solid var(--line);background:#ffffff14;border-radius:8px;padding:12px;font-weight:600}.is-mobile .tb-right .chip-btn{padding:5px 8px;font-size:11.5px}.is-mobile .topbar{flex-wrap:wrap}.is-mobile .ext-hud{bottom:auto;top:calc(100px + var(--safe-t));min-width:132px;font-size:11px}.is-mobile.is-portrait .ext-hud{top:calc(250px + var(--safe-t));right:calc(10px + var(--safe-r));left:auto}.is-mobile .assist{top:calc(100px + var(--safe-t))}.is-mobile .demo-banner{top:auto;bottom:calc(190px + var(--safe-b))}.mobile-controls.landscape .joystick{width:min(28vh,150px)}.mobile-controls.landscape .rudder-brake{width:min(30vw,240px)}@media (max-width:720px){.scenario-grid{grid-template-columns:1fr}.menu{background:linear-gradient(#05070ae6 0%,#05070ab8 100%);align-items:flex-start}.tb-center .seg button{padding:6px 10px}}@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}.is-mobile:not(.is-portrait) .cam-btn{right:auto;left:calc(12px + var(--safe-l));top:calc(52px + var(--safe-t))}.is-mobile:not(.is-portrait) .cam-sheet{right:auto;left:calc(12px + var(--safe-l));top:calc(100px + var(--safe-t))}.mobile-controls.landscape .thr-track{height:46vh}