:root { color-scheme:light; --bg:#f8fafc; --paper:#fff; --ink:#172033; --muted:#475569; --line:#cbd5e1; --blue:#075985; --orange:#b45309; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:1rem/1.65 system-ui,-apple-system,sans-serif; }
header, main, footer { max-width:1080px; margin:auto; padding:1.3rem; }
header { padding-top:2rem; }
h1,h2,h3 { line-height:1.25; }
h1 { font-size:clamp(2rem,5vw,3.2rem); margin:.6rem 0; }
h2 { font-size:1.5rem; margin:0 0 1rem; }
h3 { font-size:1.12rem; }
a { color:var(--blue); }
.eyebrow { color:var(--orange); font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:.85rem; }
.lede { max-width:70ch; color:var(--muted); font-size:1.1rem; }
.chips,.buttons,.presets { display:flex; flex-wrap:wrap; gap:.55rem; }
.chips { list-style:none; padding:0; }
.chips li { border:1px solid #bae6fd; background:#f0f9ff; color:#075985; border-radius:999px; padding:.2rem .75rem; font-weight:700; }
section { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:clamp(1.1rem,3vw,1.8rem); margin:1.2rem 0; box-shadow:0 3px 14px #1720330a; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.grid > *, .controls > *, .readouts > * { min-width:0; }
.callout { border-left:4px solid #0284c7; padding:.8rem 1rem; background:#f0f9ff; border-radius:0 10px 10px 0; }
.sim { border-top:5px solid #0284c7; }
.stage { overflow:hidden; border-radius:12px; background:#0f172a; }
canvas { width:100%; height:280px; display:block; }
.ruler { display:flex; justify-content:space-between; padding:.4rem 4%; color:#e2e8f0; font-size:.8rem; }
.legend { display:flex; flex-wrap:wrap; gap:1rem; font-size:.9rem; margin:.6rem 0; }
.legend b { display:inline-block; width:.8rem; height:.8rem; border-radius:50%; margin-right:.3rem; }
.controls { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1rem 0; }
.controls label, .answers label { display:block; font-weight:700; }
input[type=range] { width:100%; accent-color:#0284c7; margin:.6rem 0; }
output { display:block; color:var(--blue); min-height:1.8rem; }
button { font:inherit; font-weight:750; background:#075985; border:1px solid #075985; color:white; border-radius:9px; padding:.55rem 1rem; cursor:pointer; }
button.secondary { background:white; color:#075985; }
button:disabled { opacity:.55; cursor:default; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline:3px solid #f59e0b; outline-offset:3px; }
.readouts { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.65rem; margin:1rem 0; }
.readouts > div { border:1px solid #bae6fd; background:#f0f9ff; border-radius:10px; padding:.65rem; }
.readouts > div > strong { display:block; font-size:.8rem; }
.readouts > div > span { display:block; min-height:1.8rem; overflow-x:auto; white-space:nowrap; }
.energy-bar { display:flex; height:24px; border-radius:8px; overflow:hidden; background:#fb923c; }
#energy-fill { width:100%; background:#0284c7; }
.status { min-height:1.6rem; font-weight:700; color:#075985; }
.task { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:1rem; margin:1rem 0; }
.task h3 { margin:.2rem 0; }
.answers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1rem 0; }
.answers input, .exit-answer { width:100%; min-width:0; padding:.65rem; border:1px solid #94a3b8; border-radius:8px; font:inherit; background:white; }
.code { width:100%; min-width:0; min-height:220px; background:#0f172a; color:#bae6fd; border:1px solid #334155; border-radius:12px; padding:1rem; font: .88rem/1.6 ui-monospace,monospace; resize:vertical; }
code { overflow-wrap:anywhere; }
pre { max-width:100%; overflow-x:auto; background:#f1f5f9; padding:1rem; border-radius:8px; }
details { border:1px solid #fed7aa; border-radius:12px; padding:1rem; background:#fff7ed; }
summary { cursor:pointer; font-weight:800; }
.table-scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th,td { text-align:left; padding:.65rem; border-bottom:1px solid #cbd5e1; }
@media(max-width:750px) { .grid,.controls { grid-template-columns:1fr; } .readouts { grid-template-columns:repeat(2,minmax(0,1fr)); } canvas { height:220px; } }
@media(max-width:420px) { .answers { grid-template-columns:1fr; } }
@media print { button, textarea, .controls, .cookies, #mates-cookie-banner, #mates-cookie-settings { display:none!important; } body { background:white; } section { break-inside:avoid; box-shadow:none; } }