:root{--bg: #0f1115;--bg-elev: #171a21;--bg-elev-2: #1f232c;--border: #2a2f3a;--text: #e6e9ef;--text-dim: #9aa3b2;--accent: #5b9dff;--accent-2: #36d399;--danger: #ff6b6b;--radius: 10px;--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;--sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased}#app{max-width:1180px;margin:0 auto;padding:24px 20px 48px}.app-header{margin-bottom:18px}.app-header h1{font-size:22px;margin:0 0 4px;letter-spacing:.2px}.subtitle{margin:0;color:var(--text-dim);font-size:14px}code{font-family:var(--mono);background:var(--bg-elev-2);padding:1px 6px;border-radius:6px;font-size:.9em}.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:18px}.toolbar .spacer{flex:1 1 auto}button{appearance:none;border:1px solid var(--border);background:var(--bg-elev-2);color:var(--text);font:inherit;font-size:14px;padding:9px 14px;border-radius:8px;cursor:pointer;transition:border-color .15s,background .15s,transform .05s}button:hover{border-color:var(--accent)}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:linear-gradient(180deg,#4f93ff,#3f7fe6);border-color:#3f7fe6;color:#fff;font-weight:600}button.ghost{background:transparent;border-color:transparent;color:var(--text-dim)}button.ghost:hover{color:var(--text);border-color:var(--border)}.switch{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--text-dim);user-select:none;cursor:pointer}.switch input{accent-color:var(--accent);width:16px;height:16px}.scene-badge{font-size:13px;color:var(--text-dim);padding:6px 10px;border:1px dashed var(--border);border-radius:8px}.scene-badge strong{color:var(--text)}.stage-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}@media (max-width: 880px){.stage-row{grid-template-columns:1fr}}.stage{margin:0}.stage figcaption{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin-bottom:8px}.stage figcaption small{color:var(--text-dim);font-weight:400}.dot{width:10px;height:10px;border-radius:50%;display:inline-block}.dot-pixi{background:var(--accent)}.dot-skia{background:var(--accent-2)}.canvas-box{background:linear-gradient(45deg,#14161c 25%,transparent 25%) 0 0/24px 24px,linear-gradient(-45deg,#14161c 25%,transparent 25%) 0 12px/24px 24px,linear-gradient(45deg,transparent 75%,#14161c 75%) 12px -12px/24px 24px,linear-gradient(-45deg,transparent 75%,#14161c 75%) -12px 0/24px 24px,#0c0e12;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;line-height:0}.canvas-box canvas{display:block;width:100%;height:auto;touch-action:none}.log-panel{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;margin-bottom:18px}.log-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}.log-head small{color:var(--text-dim);flex:1 1 auto}.event-log{list-style:none;margin:0;padding:0;max-height:168px;overflow-y:auto;font-family:var(--mono);font-size:12.5px}.event-log li{padding:4px 6px;border-radius:6px;display:flex;gap:10px;align-items:baseline}.event-log li:nth-child(odd){background:#ffffff06}.event-log .ev-time{color:var(--text-dim)}.event-log .ev-src{font-weight:700}.event-log .ev-src.src-pixi{color:var(--accent)}.event-log .ev-src.src-skia{color:var(--accent-2)}.event-log .ev-type-down{color:#ffd166}.event-log .ev-type-up{color:#a0e7a0}.event-log .empty{color:var(--text-dim);font-style:italic}.app-footer{font-size:13px}.status{color:var(--text-dim);font-family:var(--mono)}.status.ok{color:var(--accent-2)}.status.warn{color:#ffd166}.status.err{color:var(--danger)}