/* Stories: builds on explained.css tokens. One story at a time; a single
   3D stage; four short steps; the live formula right under them. */
.engine{display:grid;gap:14px}
.pieces{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pieces li{display:grid;gap:2px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:opacity .3s,border-color .3s}
.pieces li b{font:800 20px var(--display);font-stretch:68%}
.pieces li span{font-size:14px;color:var(--muted)}
.pieces li.on{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.pieces li.off{opacity:.38}
@media (max-width:640px){.pieces{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.pieces{grid-template-columns:1fr}}

.picker{display:flex;flex-wrap:wrap;gap:8px;position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);padding-block:10px;margin-block:-10px}
.chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:10px 16px;font-weight:700}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.swatch{width:12px;height:12px;border-radius:50%;display:inline-block}
@media (max-width:560px){.picker{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.chip{flex:0 0 auto}}

.story{display:grid;gap:26px}
.story-head{display:grid;gap:12px}
.story h2{font-size:clamp(34px,6.2vw,52px)}
.stage{position:relative}
.caption{position:absolute;left:12px;right:12px;bottom:12px;font-size:14px;padding:8px 12px;border-radius:10px;background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--line);color:var(--ink);pointer-events:none;min-height:1.2em}
.caption:empty{display:none}
.flow{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.step{border:1px solid var(--line);border-radius:18px;background:var(--surface);padding:18px;display:grid;gap:12px;animation:rise .4s ease-out}
.step-n{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.act{display:grid;gap:10px}
.note{color:var(--muted);font-size:15px}
.note code{font:500 13px var(--mono);color:var(--ink)}
.field.sm{font-size:16px;padding:10px 12px;max-width:320px}
select.field{appearance:auto}
.check-row{display:flex;gap:10px;align-items:center;font-weight:700}
.check-row input{width:20px;height:20px;accent-color:var(--accent)}
.chance{font-size:17px}
.chance b{font:800 26px var(--display);font-stretch:68%;color:var(--accent)}
.small{font-size:15px}
.receipt{display:grid;gap:6px;padding:14px;border-radius:12px;border:1px dashed var(--line);background:var(--bg)}
.rrow{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:baseline}
.rrow code{font:500 14px var(--mono);overflow-wrap:anywhere}
@media (max-width:480px){.rrow{grid-template-columns:1fr;gap:0}}
.pill[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
.verdict{font-weight:700;min-height:1.4em;max-width:62ch}
.verdict.ok{color:var(--accent)}
.verdict.bad{color:var(--warn)}
.bars{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;align-items:end;height:90px}
.bars:empty{display:none}
.barcol{display:grid;gap:4px;justify-items:center;height:100%;align-content:end}
.bar{display:block;width:100%;height:var(--h,0%);min-height:4px;border-radius:4px 4px 0 0;background:var(--line)}
.bar.you{background:var(--accent)}
.barcol small{font:500 11px var(--mono);color:var(--muted)}

.proof-card{display:grid;gap:12px;padding:18px;border-radius:18px;border:1px solid var(--ink);background:var(--surface)}
.formula{display:grid;gap:8px}
.frow{display:grid;grid-template-columns:150px 1.4fr 1fr;gap:10px;align-items:baseline;padding-bottom:8px;border-bottom:1px solid var(--line)}
.frow:last-child{border-bottom:0}
.fname{font-weight:700}
.fexpr{font:500 14px var(--mono);color:var(--muted);overflow-wrap:anywhere}
.fval{font:500 14px var(--mono);overflow-wrap:anywhere}
.frow.bad .fval,.frow.bad .fname{color:var(--warn)}
@media (max-width:600px){.frow{grid-template-columns:1fr;gap:2px}}
.fact{font-size:15px;color:var(--muted);display:block;border-left:3px solid var(--line);padding-left:14px;max-width:64ch}
.fact a{color:var(--ink)}
.levels-sec{display:grid;gap:22px;justify-items:start}
.levels3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:n}
.levels3 li{counter-increment:n;border-top:2px solid var(--ink);padding-top:12px;display:grid;gap:6px;align-content:start}
.levels3 li::before{content:"Level " counter(n);font:500 12px var(--mono);color:var(--accent)}
.levels3 b{font:800 24px var(--display);font-stretch:68%}
.levels3 span{color:var(--muted);font-size:15px}
@media (max-width:640px){.levels3{grid-template-columns:1fr}}
.deep{font-weight:700;color:var(--ink)}

.fact .k{display:block;margin-bottom:4px}
/* The scene stays in view while you work through the steps */
.story-grid{display:grid;gap:22px}
.story-col{display:grid;gap:22px;min-width:0;align-content:start}
.stage-col{min-width:0}
@media (min-width:1000px){
  .page{max-width:1180px}
  .story-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
  .stage-col{position:sticky;top:calc(env(safe-area-inset-top,0px) + 76px)}
  .stage-col .stage{aspect-ratio:4/3.4}
}
@media (max-width:999px){
  .picker{position:static}
  .stage-col{position:sticky;top:env(safe-area-inset-top,0px);z-index:4;background:var(--bg);padding-bottom:8px}
  .stage-col .stage{aspect-ratio:auto;height:38vh;min-height:230px}
  .caption{font-size:12.5px;bottom:8px;left:8px;right:8px;padding:6px 10px}
}