:root{--bg:#0b0e14;--bg-2:#121722;--panel:#151b27;--line:#242c3b;--text:#e6e9ef;--muted:#8a93a6;--accent:#f5b544;--accent-2:#5ec8e5;--danger:#ef6b6b;--good:#7bd88f;--mono:"IBM Plex Mono", ui-monospace, monospace;--sans:"IBM Plex Sans", system-ui, sans-serif;--serif:"Fraunces", Georgia, serif;--panel-w:300px}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);font-family:var(--sans);margin:0;font-size:14px}a{color:inherit}.topbar{border-bottom:1px solid var(--line);background:var(--bg-2);z-index:5;align-items:center;gap:24px;height:48px;padding:0 16px;display:flex;position:relative}.brand{font-family:var(--serif);white-space:nowrap;font-size:20px;font-weight:600;text-decoration:none}.brand-mark{color:var(--accent)}#nav{scrollbar-width:none;gap:4px;display:flex;overflow-x:auto}#nav a{color:var(--muted);white-space:nowrap;border-radius:6px;padding:6px 10px;font-size:13px;text-decoration:none}#nav a:hover{color:var(--text);background:var(--panel)}#nav a.active{color:var(--bg);background:var(--accent)}#app{height:calc(100% - 48px);position:relative}.home{max-width:1100px;height:100%;margin:0 auto;padding:48px 16px;overflow-y:auto}.home h1{font-family:var(--serif);letter-spacing:-.02em;margin:0 0 8px;font-size:clamp(32px,5vw,52px);font-weight:400}.home h1 em{color:var(--accent);font-style:italic}.home p.lede{color:var(--muted);max-width:60ch;margin:0 0 40px;font-size:16px}.cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;display:grid}.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;text-decoration:none;transition:border-color .15s,transform .15s;display:block}.card:hover{border-color:var(--accent);transform:translateY(-2px)}.card .glyph{color:var(--accent-2);font-size:28px;font-family:var(--serif)}.card h3{font-family:var(--serif);margin:10px 0 6px;font-size:19px;font-weight:600}.card p{color:var(--muted);margin:0;line-height:1.5}.card .tag{font-family:var(--mono);color:var(--accent);text-transform:uppercase;letter-spacing:.08em;margin-top:12px;font-size:11px;display:inline-block}.sim{height:100%;display:flex}.stage{background:radial-gradient(ellipse at center, #111726 0%, var(--bg) 70%);flex:1;min-width:0;position:relative;overflow:hidden}.stage canvas{width:100%;height:100%;display:block}.panel{width:var(--panel-w);border-left:1px solid var(--line);background:var(--bg-2);flex-shrink:0;padding:16px;overflow-y:auto}.panel h2{font-family:var(--serif);margin:0 0 4px;font-size:20px;font-weight:600}.panel .desc{color:var(--muted);margin:0 0 16px;font-size:13px;line-height:1.5}.panel .section{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}.panel .section-title{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:10px;font-size:11px}.ctl{margin-bottom:12px}.ctl-row{justify-content:space-between;align-items:baseline;margin-bottom:4px;font-size:13px;display:flex}.ctl-val{font-family:var(--mono);color:var(--accent);font-size:12px}input[type=range]{width:100%;accent-color:var(--accent)}select,input[type=text],input[type=number]{background:var(--panel);width:100%;color:var(--text);border:1px solid var(--line);font:inherit;border-radius:6px;padding:6px 8px}.check{cursor:pointer;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;display:flex}.check input{accent-color:var(--accent)}.btns{flex-wrap:wrap;gap:6px;margin-bottom:12px;display:flex}button.btn{background:var(--panel);color:var(--text);border:1px solid var(--line);font:inherit;cursor:pointer;border-radius:6px;padding:7px 12px;font-size:13px}button.btn:hover{border-color:var(--accent)}button.btn.primary{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:600}button.btn:disabled{opacity:.4;cursor:default}.readout{font-family:var(--mono);grid-template-columns:auto 1fr;gap:3px 12px;font-size:12px;display:grid}.readout dt{color:var(--muted)}.readout dd{text-align:right;color:var(--text);margin:0}.hud{font-family:var(--mono);color:var(--muted);pointer-events:none;background:#0b0e1499;border-radius:6px;padding:8px 10px;font-size:12px;position:absolute;top:12px;left:12px}.hint{color:var(--muted);font-size:12px;line-height:1.5}@media (width<=760px){.sim{flex-direction:column}.stage{flex:55%}.panel{border-left:none;border-top:1px solid var(--line);flex:45%;width:100%}}