:root{
  --bg:#F6F6F3; --surface:#FFFFFF; --surface-2:#FBFBFA;
  --border:#E9E9E3; --border-strong:#DDDDD6;
  --ink:#18181B; --ink-2:#71717A; --ink-3:#A1A1AA;
  --accent:#5B5BD6; --accent-soft:#EEEEFB; --accent-line:#C9C9F2;
  --safe:#2F9E6B; --safe-soft:#E7F4EE;
  --danger:#E5484D; --danger-soft:#FCEBEC;
  --pid:#C27803; --mrac:#7C5CBF;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 1px 2px rgba(24,24,27,.04),0 8px 28px rgba(24,24,27,.05);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; line-height:1.5;
  padding:0 24px 56px;
}
.top{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1120px; margin:0 auto; padding:18px 0 8px;
  font-size:13px;
}
.top a{color:var(--ink-2); text-decoration:none}
.top a:hover{color:var(--ink)}
.top .brand{font-weight:650; color:var(--ink); letter-spacing:-.02em}
.top .brand span{color:var(--ink-3); font-weight:500}
.wrap{max-width:1120px; margin:0 auto}
header{margin-bottom:22px}
.eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:600; margin-bottom:8px}
h1{font-size:30px; line-height:1.15; margin:0 0 8px; letter-spacing:-.02em; font-weight:650}
.lede{font-size:15.5px; color:var(--ink-2); max-width:64ch; margin:0}
.grid{display:grid; grid-template-columns:1fr 348px; gap:18px; align-items:start}
@media(max-width:880px){.grid{grid-template-columns:1fr}}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
.stage{padding:14px; position:relative}
.stage-banner{display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; padding:12px 14px;
  background:var(--surface-2); border:1px solid var(--border); border-radius:10px;
  transition:border-color .25s, background .25s}
.stage-banner .dot{width:9px; height:9px; border-radius:50%; background:var(--safe); flex:0 0 auto; margin-top:4px;
  box-shadow:0 0 0 3px var(--safe-soft); transition:.25s}
.stage-banner .copy{flex:1; min-width:0}
.stage-banner .phase{font-size:15px; font-weight:650; color:var(--ink); line-height:1.25}
.stage-banner .desc{font-size:12.5px; color:var(--ink-2); margin-top:3px; line-height:1.45}
.stage-banner.learn,.stage-banner.flip{background:var(--accent-soft); border-color:var(--accent-line)}
.stage-banner.learn .dot,.stage-banner.flip .dot{background:var(--accent); box-shadow:0 0 0 3px rgba(91,91,214,.12)}
.stage-banner.scramble{background:#F3F0FB; border-color:#DDD7F2}
.stage-banner.scramble .dot{background:var(--mrac); box-shadow:0 0 0 3px rgba(124,92,191,.12)}
.stage-banner.heavier,.stage-banner.bad{background:var(--danger-soft); border-color:#E9C9CB}
.stage-banner.heavier .dot,.stage-banner.bad .dot{background:var(--danger); box-shadow:0 0 0 3px rgba(229,72,77,.14)}
.stage-banner.recovered{background:var(--safe-soft); border-color:#B8E0CE}
.stage-banner.recovered .dot{background:var(--safe); box-shadow:0 0 0 3px var(--safe-soft)}
.stage-banner.frozen{background:var(--danger-soft); border-color:#E9C9CB}
.stage-banner.frozen .dot{background:var(--danger); box-shadow:0 0 0 3px rgba(229,72,77,.14)}
.goal-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:10px}
.goal-row input[type=number]{
  font-family:var(--mono); font-size:13.5px; font-weight:600; color:var(--ink);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:9px;
  padding:7px 8px; width:72px; font-variant-numeric:tabular-nums
}
.goal-row input[type=number]:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.goal-row .unit{font-size:13px; color:var(--ink-2)}
.stage canvas{width:100%; height:auto; display:block; border-radius:10px; background:linear-gradient(180deg,#FFFFFF 0%,#FBFBF9 100%)}
.stage-foot{display:flex; justify-content:space-between; align-items:center; padding:12px 8px 4px; gap:12px}
.status{display:inline-flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-2)}
.status .pill{width:9px; height:9px; border-radius:50%; background:var(--safe); box-shadow:0 0 0 4px var(--safe-soft)}
.status.bad .pill{background:var(--danger); box-shadow:0 0 0 4px var(--danger-soft)}
.status.learn .pill{background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.readout{font-family:var(--mono); font-size:13px; color:var(--ink-2)}
.readout b{color:var(--ink)}
.panel{display:flex; flex-direction:column; gap:18px}
.sect{padding:16px 16px 18px}
.sect h2{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px; font-weight:600}
.metrics{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.metric{background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:10px 12px}
.metric .k{font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.08em}
.metric .v{font-family:var(--mono); font-size:18px; color:var(--ink); font-weight:600; margin-top:3px; font-variant-numeric:tabular-nums}
.metric .v.good{color:var(--safe)} .metric .v.bad{color:var(--danger)}
.note{font-size:12px; color:var(--ink-3); margin-top:12px; line-height:1.5}
.btns{display:flex; flex-wrap:wrap; gap:8px}
/* Two kinds of button, never confused:
   ACTIONS fire and return to rest (flip, scramble, reset, age) — they flash on press.
   SELECTORS show which state is currently chosen (.active) — a tinted "selected"
   look, never the solid fill, so nothing sits permanently lit for no reason.
   .suggest marks the one thing worth pressing first; JS clears it after any press. */
button{font-family:var(--sans); font-size:13px; font-weight:550; color:var(--ink); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:9px; padding:8px 13px; cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease, transform .06s ease;
  position:relative}
button:hover:not(:disabled){background:var(--surface-2); border-color:var(--ink-3)}
button:active:not(:disabled){transform:scale(.97)}
button:focus-visible{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}

/* selected state (mode selectors) */
button.active{background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:650}
button.active:hover:not(:disabled){background:#E4E4F9; border-color:var(--accent)}
button.active::before{content:"● "; font-size:9px; vertical-align:1px; opacity:.85}

/* suggested first action — a quiet ring, not a fill; cleared on first interaction */
button.suggest{border-color:var(--accent); color:var(--accent)}
button.suggest:not(:disabled){animation:suggestPulse 2.4s ease-in-out infinite}
@keyframes suggestPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(91,91,214,.28)}
  50%{box-shadow:0 0 0 5px rgba(91,91,214,0)}
}

/* press confirmation */
button.flash{background:var(--accent); border-color:var(--accent); color:#fff}
button.flash::before{content:none}

button.danger{color:var(--danger); border-color:#E9C9CB}
button.danger:hover:not(:disabled){background:var(--danger-soft)}
button:disabled{opacity:.45; cursor:not-allowed; animation:none}
.row{display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--border)}
.row:first-of-type{border-top:0}
.tag{width:132px; flex:0 0 auto}
.tag .nm{font-weight:700; font-size:13px; letter-spacing:.4px}
.tag .sub2{display:block; font-size:10px; font-weight:500; color:var(--ink-3); margin-top:1px}
.tag.brain .nm{color:var(--accent)} .tag.pid .nm{color:var(--pid)} .tag.mrac .nm{color:var(--mrac)}
.meter{flex:1; height:9px; border-radius:5px; background:#EFEFEA; overflow:hidden}
.meter > i{display:block; height:100%; width:0%; border-radius:5px; transition:width .12s linear}
.row.brain .meter>i{background:var(--accent)} .row.pid .meter>i{background:var(--pid)} .row.mrac .meter>i{background:var(--mrac)}
.otk{width:46px; text-align:right; font-variant-numeric:tabular-nums; font-weight:650; font-size:13px}
.yval{width:72px; text-align:right; color:var(--ink-3); font-variant-numeric:tabular-nums; font-size:12px; font-family:var(--mono)}
.dead{color:var(--danger); font-weight:700}
.host-msg{
  display:none; margin:0 0 18px; padding:14px 16px; border-radius:12px;
  background:var(--surface); border:1px solid var(--border); color:var(--ink-2); font-size:14px; line-height:1.55
}
.host-msg.show{display:block}
.host-msg code{font-family:var(--mono); font-size:12px; background:var(--surface-2); border:1px solid var(--border);
  border-radius:6px; padding:2px 6px}
.legend{display:flex; gap:16px; margin:8px 2px 0; font-size:12px; color:var(--ink-3); flex-wrap:wrap}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend i{width:11px; height:11px; border-radius:3px; display:inline-block}
.legend i.tick{width:2px; height:13px; border-radius:1px; background:var(--ink)}
.legend i.dot{width:11px; height:11px; border-radius:50%}

/* ---- "What you're looking at": full-width explainer under every live demo ---- */
.breakdown{margin-top:22px; padding:26px 30px 30px}
.breakdown h2{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:0 0 16px; font-weight:600}
.breakdown h3{font-size:15px; font-weight:650; margin:24px 0 7px; letter-spacing:-.01em}
.breakdown h3:first-of-type{margin-top:0}
.breakdown p{font-size:14.5px; color:var(--ink-2); line-height:1.62; margin:0 0 11px; max-width:70ch}
.breakdown a{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.breakdown a:hover{color:var(--accent)}
.breakdown strong{color:var(--ink); font-weight:600}
.bd-cols{display:grid; grid-template-columns:1fr 1fr; gap:26px}
@media(max-width:880px){.bd-cols{grid-template-columns:1fr}}
.key{list-style:none; margin:0 0 4px; padding:0}
.key li{display:flex; gap:11px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--border);
  font-size:14px; color:var(--ink-2); line-height:1.5}
.key li:first-child{border-top:0}
.key .swatch{flex:0 0 auto; width:13px; height:13px; border-radius:4px; margin-top:4px}
.key .swatch.round{border-radius:50%}
.key .swatch.bar{width:3px; height:15px; border-radius:2px; margin-top:3px; background:var(--ink)}
.key b{color:var(--ink); font-weight:600}
.steps{counter-reset:s; list-style:none; margin:0; padding:0}
.steps li{counter-increment:s; position:relative; padding:0 0 13px 32px; font-size:14.5px; color:var(--ink-2); line-height:1.6; max-width:68ch}
.steps li::before{content:counter(s); position:absolute; left:0; top:1px; width:21px; height:21px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent); font-size:11.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-family:var(--mono)}
.takeaway{margin-top:22px; padding:15px 18px; background:var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--accent); border-radius:0 10px 10px 0}
.takeaway p{margin:0; font-size:14.5px; color:var(--ink); line-height:1.6; max-width:none}