:root{
  --bg:#f5f7fa;--panel:#fff;--panel2:#eef2f6;--text:#1f2937;--muted:#667085;
  --border:#d6dde5;--accent:#2989b3;--accent2:#226f92;--soft:rgba(41,137,179,.12);
  --purple:#7654a4;--purple-soft:rgba(118,84,164,.14);--green:#2c7a52;--red:#a23e3e;
  --amber:#9a681c;--shadow:0 10px 30px rgba(15,23,42,.08)
}
body.dark{
  --bg:#12171b;--panel:#1c2329;--panel2:#252d34;--text:#eef2f6;--muted:#aab5bf;
  --border:#39444e;--accent:#59b0d1;--accent2:#83c9e2;--soft:rgba(89,176,209,.14);
  --purple:#b49bd5;--purple-soft:rgba(180,155,213,.17);--shadow:none
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);
font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.55}
button,input,select{font:inherit}.container{width:min(1120px,calc(100% - 28px));margin:auto}
header{background:radial-gradient(circle at top left,var(--soft),transparent 42%),var(--panel);
border-bottom:1px solid var(--border);padding:36px 0 28px}.head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}
.eyebrow{color:var(--accent2);font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.8rem;margin:0 0 7px}
h1{font-size:clamp(2rem,4vw,3.15rem);line-height:1.05;margin:0 0 10px}h2{font-size:1.35rem}h3{font-size:1.05rem}
p{margin-top:0}.sub{max-width:800px;color:var(--muted);margin:0}.tabs{display:flex;gap:8px;flex-wrap:wrap;padding:22px 0 10px}
.tab,.btn{border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:var(--r-md,14px);padding:10px 14px;cursor:pointer}
.btn.disabled{opacity:.45;cursor:not-allowed}
.tab.active,.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn:hover,.tab:hover{border-color:var(--accent)}
.panel{display:none;padding:18px 0 48px}.panel.active{display:block}.card{background:var(--panel);border:1px solid var(--border);
border-radius:var(--r-lg,18px);padding:18px;box-shadow:var(--shadow)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.controls{display:flex;gap:12px;flex-wrap:wrap;align-items:end}.controls label{min-width:180px;flex:1}.controls span{display:block;color:var(--muted);font-size:.88rem;margin-bottom:5px}
select,input[type=text],input[type=number],input[type=range]{width:100%;border:1px solid var(--border);background:var(--bg);color:var(--text);
border-radius:var(--r-sm,10px);padding:9px 11px}.badge{display:inline-block;background:var(--accent);color:#fff;border-radius:999px;padding:5px 9px;font-weight:800;font-size:.82rem}
.badge.alt{background:var(--purple)}.badge.soft{background:var(--soft);color:var(--accent2)}.muted{color:var(--muted)}
.stat{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md,14px);padding:14px}.stat strong{display:block;font-size:1.65rem}
.note{border-left:5px solid var(--accent);background:var(--panel);border-radius:var(--r-md,14px);padding:14px 16px}.warn{border-left-color:var(--amber)}
.good{color:var(--green)}.bad{color:var(--red)}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.tablewrap{overflow:auto;border:1px solid var(--border);border-radius:var(--r-md,14px)}table{border-collapse:collapse;width:100%;min-width:760px;background:var(--panel)}
th,td{padding:11px 12px;border-bottom:1px solid var(--border);text-align:left}th{background:var(--panel2);font-size:.9rem}
.quizq{padding:14px 0;border-bottom:1px solid var(--border)}.quizq:last-child{border-bottom:0}.option{display:flex;gap:8px;margin:7px 0}
footer{border-top:1px solid var(--border);background:var(--panel);color:var(--muted);padding:24px 0;margin-top:12px}
canvas,svg{max-width:100%}.vizbox{background:linear-gradient(var(--panel2) 1px,transparent 1px),linear-gradient(90deg,var(--panel2) 1px,transparent 1px);
background-size:26px 26px;border-radius:var(--r-md,14px);overflow:hidden;border:1px solid var(--border)}
@media(max-width:820px){.grid4,.grid3,.grid2{grid-template-columns:1fr 1fr}.head{flex-direction:column}}
@media(max-width:560px){.grid4,.grid3,.grid2{grid-template-columns:1fr}.tabs{display:grid;grid-template-columns:1fr 1fr}.tab{width:100%}}