:root { --bg:#0e1216; --panel:#161c22; --raised:#1e2630; --ink:#e8eef4; --dim:#9aa7b4; --fine:#67727e; --line:#2c3642; --accent:#58b7e8; --green:#7bd88f; --gold:#e8c35a; --danger:#e87a7a; --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"SF Mono",ui-monospace,Menlo,monospace; }
* { box-sizing:border-box; } html,body { height:100%; } body { margin:0; min-width:320px; min-height:100vh; color:var(--ink); background:var(--bg); font-family:var(--sans); } button,input { font:inherit; }
.app-shell { height:100dvh; min-height:600px; overflow:hidden; display:grid; grid-template-columns:300px minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
.topbar { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; background:#11171d; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:12px; min-width:0; }.logo { width:40px; height:40px; flex:0 0 auto; border-radius:11px; background:radial-gradient(circle at 48% 45%,#8fd4f5 0 18%,#3d7ea6 19% 45%,#1d2f3f 46%); }.brand h1 { margin:0; font:800 clamp(18px,2.2vw,26px)/1 var(--sans); letter-spacing:.06em; text-transform:uppercase; }.brand p { margin:4px 0 0; color:var(--dim); font-size:13px; }
.top-actions { display:flex; align-items:center; gap:10px; }
.sidebar { grid-column:1; grid-row:2; min-height:0; overflow:auto; padding:14px; background:var(--panel); border-right:1px solid var(--line); }
.search-row input { width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:#0d1116; color:var(--ink); }
.part-title { margin:14px 4px 6px; color:var(--accent); font:700 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.nav-ch { display:block; width:100%; text-align:left; margin-bottom:4px; padding:8px 10px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--dim); cursor:pointer; font-size:13px; }.nav-ch b { color:var(--fine); font-family:var(--mono); margin-right:6px; }.nav-ch:hover { border-color:var(--accent); color:var(--ink); }.nav-ch.on { border-color:var(--accent); background:#58b7e81a; color:var(--ink); }.nav-ch.done { border-left:3px solid var(--green); }
.content { grid-column:2; grid-row:2; min-height:0; overflow:auto; padding:22px clamp(16px,4vw,54px) 60px; }
.eyebrow { display:flex; align-items:center; gap:8px; color:var(--fine); font-size:11px; }.chip { padding:4px 8px; border:1px solid var(--accent); border-radius:4px; color:var(--accent); font:700 10px var(--mono); letter-spacing:.09em; text-transform:uppercase; }
.chap-head h2 { margin:10px 0 2px; font-size:clamp(24px,3vw,34px); line-height:1.1; }.ref { margin:0 0 8px; color:var(--fine); font:11px var(--mono); }.lede { margin:0 0 8px; color:var(--dim); font-size:15px; line-height:1.55; max-width:70ch; }
.concepts { display:grid; gap:6px; margin:14px 0; }.concept { padding:9px 12px; border:1px solid var(--line); border-radius:6px; background:var(--panel); font-size:13px; line-height:1.55; }.concept code, .widget-card code { font-family:var(--mono); font-size:12px; color:var(--gold); background:#0d1116; padding:1px 5px; border-radius:4px; }
.widget-card, .ws-card { margin-top:16px; padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--panel); }.widget-card h3, .ws-card h3 { margin:0 0 10px; color:var(--accent); font-size:11px; text-transform:uppercase; letter-spacing:.12em; }.ws-card h3 span { color:var(--fine); text-transform:none; letter-spacing:0; }
.ctl { display:grid; grid-template-columns:150px 1fr 110px; align-items:center; gap:10px; margin:8px 0; font-size:13px; color:var(--dim); }.ctl output { font-family:var(--mono); color:var(--accent); text-align:right; }.ctl input[type=range] { width:100%; accent-color:var(--accent); }
.btnrow { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }
.readout { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; }.pill { padding:5px 9px; border:1px solid var(--line); border-radius:5px; background:#0d1116; font:600 12px var(--mono); color:var(--gold); }
canvas.plot { width:100%; height:220px; display:block; margin-top:8px; border:1px solid var(--line); border-radius:6px; background:#0b0f13; }
.ws-item { margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--line); }.ws-item:last-child { border-bottom:0; }.ws-item p { margin:0 0 6px; font-size:14px; }
.opts { display:grid; gap:5px; }.opt { padding:7px 10px; border:1px solid #455348; border-radius:5px; background:#121914; color:var(--dim); font-size:13px; text-align:left; cursor:pointer; }.opt:hover { border-color:var(--accent); color:var(--ink); }.opt.right { border-color:var(--green); color:var(--green); }.opt.wrong { border-color:var(--danger); color:var(--danger); }.opt:disabled { cursor:default; opacity:.85; }
.expl { margin:6px 0 0; font-size:12px; color:var(--dim); }
button { border:1px solid #4a5a68; border-radius:5px; padding:8px 12px; background:var(--raised); color:var(--ink); cursor:pointer; }.ghost { background:transparent; }button:hover { border-color:var(--accent); }
select { background:#0d1116; color:var(--ink); border:1px solid var(--line); border-radius:5px; padding:7px 9px; }
@media (max-width:820px) { .app-shell { grid-template-columns:1fr; grid-template-rows:auto auto minmax(0,1fr); height:auto; min-height:100dvh; overflow:visible; }.sidebar { grid-column:1; grid-row:2; border-right:0; border-bottom:1px solid var(--line); max-height:300px; }.content { grid-column:1; grid-row:3; }.brand p { display:none; }.ctl { grid-template-columns:110px 1fr 90px; } }