:root{--bg:#06070b;--panel:#0c0f16db;--panel-solid:#0c0f16;--line:#ffffff14;--line-strong:#ffffff29;--fg:#e6ebf5;--muted:#6e7889;--accent:#3ef0c0;--accent-2:#6ea8ff;--danger:#ff6b8a;--mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", "WenQuanYi Micro Hei", sans-serif;--top:46px;--rail:224px;--insp:264px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--bg);height:100%;color:var(--fg);font-family:var(--font);-webkit-font-smoothing:antialiased;margin:0;font-size:13px;overflow:hidden}#stage{position:fixed;inset:0}#stage canvas{touch-action:none;width:100%;height:100%;display:block}#topbar{height:var(--top);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);z-index:20;background:linear-gradient(#06070bf0,#06070b99);justify-content:space-between;align-items:center;gap:12px;padding:0 12px;display:flex;position:fixed;top:0;left:0;right:0}.tb-left,.tb-right{align-items:center;gap:12px;min-width:0;display:flex}.logo{font-family:var(--mono);letter-spacing:.14em;color:var(--fg);white-space:nowrap;font-size:12px;font-weight:700}.logo span{color:var(--accent)}.crumb{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;border-left:1px solid var(--line);padding-left:12px;font-size:12px;overflow:hidden}.stat{font-family:var(--mono);color:var(--muted);white-space:nowrap;align-items:baseline;gap:3px;display:flex}.stat b{color:var(--fg);min-width:2ch;font-size:12px;font-weight:600}.stat i{letter-spacing:.04em;opacity:.7;font-size:10px;font-style:normal}#spark{opacity:.85;width:64px;height:18px;margin-left:4px}#spark polyline{fill:none;stroke:var(--accent);stroke-width:1px;vector-effect:non-scaling-stroke}.tb-actions{gap:4px;margin-left:4px;display:flex}.tb-actions button,.insp-head button{appearance:none;border:1px solid var(--line);color:var(--muted);cursor:pointer;background:#ffffff08;border-radius:6px;width:28px;height:26px;font-size:12px;line-height:1;transition:all .15s}.tb-actions button:hover,.insp-head button:hover{color:var(--fg);border-color:var(--line-strong);background:#ffffff12}.tb-actions button.on{color:var(--bg);background:var(--accent);border-color:var(--accent)}#rail{top:var(--top);width:var(--rail);background:var(--panel);border-right:1px solid var(--line);-webkit-backdrop-filter:blur(12px);z-index:15;flex-direction:column;transition:transform .24s cubic-bezier(.3,.7,.2,1),opacity .2s;display:flex;position:fixed;bottom:0;left:0}.rail-head{font-family:var(--mono);letter-spacing:.16em;color:var(--muted);justify-content:space-between;padding:12px 12px 8px;font-size:10px;display:flex}#menu{flex-direction:column;flex:1;gap:2px;padding:0 8px 8px;display:flex;overflow-y:auto}#menu::-webkit-scrollbar{width:6px}#menu::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:3px}#menu button{appearance:none;color:var(--muted);text-align:left;cursor:pointer;background:0 0;border:0;border-left:2px solid #0000;border-radius:0 6px 6px 0;align-items:center;gap:8px;padding:8px 10px;font-family:inherit;font-size:12.5px;transition:all .14s;display:flex}#menu button:hover{color:var(--fg);background:#ffffff0a}#menu button.active{color:#fff;border-left-color:var(--accent);background:linear-gradient(90deg,#3ef0c024,#0000)}#menu button .idx{font-family:var(--mono);color:#ffffff42;min-width:14px;font-size:10px}#menu button.active .idx{color:var(--accent)}.rail-foot{border-top:1px solid var(--line);color:var(--muted);padding:10px 12px;font-size:10.5px;line-height:1.7}kbd{font-family:var(--mono);border:1px solid var(--line-strong);color:var(--fg);opacity:.75;border-radius:3px;padding:0 3px;font-size:10px}#inspector{top:var(--top);width:var(--insp);background:var(--panel);border-left:1px solid var(--line);-webkit-backdrop-filter:blur(12px);z-index:15;transition:transform .24s cubic-bezier(.3,.7,.2,1),opacity .2s;position:fixed;bottom:0;right:0;overflow-y:auto}#inspector::-webkit-scrollbar{width:6px}#inspector::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:3px}.insp-head{font-family:var(--mono);letter-spacing:.16em;color:var(--muted);justify-content:space-between;align-items:center;padding:12px 12px 8px;font-size:10px;display:flex}.insp-head button{width:auto;height:20px;font-family:var(--font);letter-spacing:0;padding:0 8px;font-size:10.5px}.params{flex-direction:column;gap:12px;padding:0 12px 12px;display:flex}.param label{color:var(--muted);justify-content:space-between;margin-bottom:6px;font-size:11.5px;display:flex}.param label b{font-family:var(--mono);color:var(--fg);font-weight:500}input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:18px;margin:0}input[type=range]::-webkit-slider-runnable-track{background:#ffffff1a;border-radius:2px;height:3px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--accent);border-radius:50%;width:11px;height:11px;margin-top:-4px;transition:box-shadow .15s;box-shadow:0 0 0 3px #3ef0c024}input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 5px #3ef0c038}input[type=range]::-moz-range-track{background:#ffffff1a;border-radius:2px;height:3px}input[type=range]::-moz-range-thumb{background:var(--accent);border:0;border-radius:50%;width:11px;height:11px}.info{flex-direction:column;gap:6px;margin:0;padding:0 12px 12px;display:flex}.info div{justify-content:space-between;gap:8px;display:flex}.info dt{color:var(--muted);font-size:11px}.info dd{font-family:var(--mono);color:var(--fg);text-align:right;margin:0;font-size:11px}.hint{border-top:1px solid var(--line);color:var(--muted);margin:0;padding:10px 12px 16px;font-size:11px;line-height:1.7}body.bare #rail{transform:translateX(calc(-1 * var(--rail)));opacity:0;pointer-events:none}body.bare #inspector{transform:translateX(var(--insp));opacity:0;pointer-events:none}body.paused #stage:after{content:"PAUSED";width:max-content;font-family:var(--mono);letter-spacing:.3em;color:var(--danger);background:#14080ccc;border:1px solid #ff6b8a59;border-radius:4px;margin:auto;padding:6px 14px;font-size:10px;position:fixed;inset:auto 0 0;transform:translateY(-24px)}@media (width<=860px){:root{--rail:0px;--insp:0px}#rail,#inspector{border:0;border-top:1px solid var(--line-strong);opacity:1;pointer-events:none;border-radius:14px 14px 0 0;width:100%;max-height:52vh;inset:auto 0 0;transform:translateY(101%)}#rail.open,#inspector.open{pointer-events:auto;transform:translateY(0)}body.bare #rail,body.bare #inspector{transform:translateY(101%)}#menu{flex-direction:row;gap:4px;padding:4px 8px 12px;overflow-x:auto}#menu button{white-space:nowrap;border-bottom:2px solid #0000;border-left:0;border-radius:6px 6px 0 0}#menu button.active{border-left:0;border-bottom-color:var(--accent);background:linear-gradient(#0000,#3ef0c024)}.rail-foot,.crumb,#spark,.stat:nth-of-type(2){display:none}}
