:root{color-scheme:dark;--bg: #0b1020;--panel: #121a2f;--border: #243049;--text: #e5e7eb;--muted: #94a3b8;--accent: #60a5fa;--bad: #f87171;--warn: #fbbf24;--good: #34d399;font-family:Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top,#172554 0%,var(--bg) 45%);color:var(--text);min-height:100vh}a{color:inherit;text-decoration:none}.app-shell{max-width:1100px;margin:0 auto;padding:16px}.top-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;margin-bottom:20px}.brand{font-weight:700;font-size:1.1rem;color:var(--accent)}.nav-links{display:flex;flex-wrap:wrap;gap:8px}.nav-link{padding:6px 12px;border-radius:999px;border:1px solid var(--border);font-size:.85rem;color:var(--muted)}.nav-link.active,.nav-link:hover{color:var(--text);border-color:var(--accent);background:#60a5fa1f}.panel{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px 18px}.hero h1{margin:8px 0 12px;font-size:1.75rem}.eyebrow{color:var(--accent);font-size:.85rem;margin:0}.lead{color:var(--muted);line-height:1.6;margin:0}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:16px}.demo-card{transition:transform .15s,border-color .15s}.demo-card:hover{transform:translateY(-2px);border-color:var(--accent)}.demo-card[data-tone=bad]{border-left:4px solid var(--bad)}.demo-card[data-tone=warn]{border-left:4px solid var(--warn)}.demo-card[data-tone=good]{border-left:4px solid var(--good)}.demo-card h3{margin:0 0 8px}.demo-card p{color:var(--muted);font-size:.92rem;line-height:1.5}.link{display:inline-block;margin-top:10px;color:var(--accent);font-size:.9rem}.compare-table table{width:100%;border-collapse:collapse;font-size:.9rem}.compare-table th,.compare-table td{border-bottom:1px solid var(--border);padding:10px 8px;text-align:left}.compare-table .bad{color:var(--bad)}.compare-table .good{color:var(--good)}.steps{color:var(--muted);line-height:1.7}.demo-page{display:flex;flex-direction:column;gap:14px}.metrics-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.metrics-head h2{margin:6px 0 4px;font-size:1.2rem}.subtitle{margin:0;color:var(--muted);font-size:.9rem}.badge{display:inline-block;margin:0;padding:2px 10px;border-radius:999px;font-size:.75rem}.badge[data-tone=bad]{background:#f8717126;color:var(--bad)}.badge[data-tone=warn]{background:#fbbf2426;color:var(--warn)}.badge[data-tone=good]{background:#34d39926;color:var(--good)}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:14px}.metric{background:#ffffff08;border-radius:10px;padding:10px}.metric .label{display:block;font-size:.75rem;color:var(--muted)}.metric strong{font-size:1.25rem}.metric[data-level=bad] strong{color:var(--bad)}.metric[data-level=warn] strong{color:var(--warn)}.metric[data-level=good] strong{color:var(--good)}.hint{margin:12px 0 0;font-size:.82rem;color:var(--muted)}.btn{border:none;border-radius:8px;padding:8px 14px;cursor:pointer;font-size:.85rem}.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}.flow-card ol{margin:0;padding-left:1.2rem;line-height:1.7}.flow-card.bad{border-left:4px solid var(--bad)}.flow-card.warn{border-left:4px solid var(--warn)}.flow-card.good{border-left:4px solid var(--good)}.compare{margin:10px 0 0;color:var(--muted);font-size:.9rem}.scene-tabs{display:flex;gap:8px;margin-bottom:10px}.tab{flex:1;padding:10px;border-radius:10px;border:1px solid var(--border);background:#ffffff08;color:var(--text);cursor:pointer}.tab.active{border-color:var(--accent);background:#60a5fa2e}.tab:disabled{opacity:.5;cursor:not-allowed}.scene-view{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--border)}.scene-view.singleton .scene-tabs{position:absolute;left:12px;right:12px;bottom:12px;margin:0}.game-canvas{display:block;width:100%;height:auto;aspect-ratio:800 / 420;background:#000}.scene-label{position:absolute;top:10px;left:10px;z-index:2;background:#0000008c;padding:4px 10px;border-radius:6px;font-size:.8rem}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;display:grid;place-items:center;background:#0000008c;color:var(--warn);font-weight:600}.log-panel h3{margin:0 0 10px;font-size:1rem}.log-list{list-style:none;margin:0;padding:0;max-height:220px;overflow:auto;font-size:.82rem}.log-list li{display:grid;grid-template-columns:64px 1fr;gap:8px;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.05)}.log-list li[data-level=bad] span{color:var(--bad)}.log-list li[data-level=warn] span{color:var(--warn)}.log-list li[data-level=good] span{color:var(--good)}.log-list time{color:var(--muted)}.log-list .empty{color:var(--muted);display:block}.loading-box{text-align:center;color:var(--muted);padding:40px}