/* Lesson pages: step-through infographics, prose, takeaways, quizzes */
.prose{max-width:66ch}
.prose p{margin:0 0 14px;font-size:17px}
.prose a,.prose-note a,.fsmall a,.quiz a{color:var(--moss);font-weight:700;text-underline-offset:3px}
.prose-note{color:var(--muted);max-width:66ch;margin:14px 0 0}
.btn{display:inline-block;font:inherit;font-weight:700;font-size:16px;text-decoration:none;padding:11px 16px;border-radius:12px;cursor:pointer;border:1.5px solid var(--moss);background:transparent;color:var(--ink)}
.btn.primary{background:var(--moss);color:var(--bg)}

/* --- trace infographic --- */
.trace{border:1px solid var(--rule);border-radius:20px;background:var(--surface);padding:14px 14px 16px;margin:18px 0 8px}
@media (min-width:640px){.trace{padding:18px 22px 20px}}
.track{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(8,1fr);gap:4px;position:relative}
.track::before{content:"";position:absolute;left:6%;right:6%;top:21px;height:3px;background:var(--rule);border-radius:2px}
.track li{position:relative;text-align:center}
.track button{all:unset;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
.track button:focus-visible .dot{outline:2px solid var(--gold);outline-offset:2px}
.track .dot{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:var(--bg);border:2px solid var(--rule);position:relative;z-index:1;transition:transform .2s,border-color .2s,background .2s}
.track .past .dot{border-color:var(--moss)}
.track .on .dot{border-color:var(--gold);background:var(--gold-soft);transform:scale(1.12);box-shadow:0 0 0 5px var(--gold-soft)}
.track .lbl{font-size:12px;font-weight:700;color:var(--muted);line-height:1.15}
.track .on .lbl{color:var(--ink)}
@media (max-width:560px){.track .lbl{display:none}.track .dot{width:34px;height:34px;font-size:16px}.track::before{top:16px}}
.stage{display:grid;gap:16px;min-height:300px;align-items:start}
@media (min-width:720px){.stage{grid-template-columns:1.05fr 1fr;min-height:260px}}
.stage-art{background:var(--bg);border-radius:16px;padding:16px;display:grid;justify-items:center;align-content:center;gap:8px;min-height:180px;overflow:hidden}
.stage-text h3{font-size:22px;margin:0 0 6px}
.stage-text p{margin:0 0 8px}
.stage-text a{color:var(--moss);font-weight:700;text-underline-offset:3px}
.stepno{font-size:13px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.05em}
.controls{display:flex;gap:8px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.illus{font-size:12.5px;color:var(--muted);font-style:italic;margin:2px 0 0;text-align:center}
.illus a{color:var(--moss)}
.stage-art{animation:fadein .35s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.stage-art{animation:none}.track .dot{transition:none}}

/* art pieces */
.bubble{background:var(--moss);color:var(--bg);padding:12px 16px;border-radius:18px 18px 4px 18px;font-size:18px;font-weight:700;max-width:90%}
.bubble.bot{background:var(--surface);color:var(--ink);border:1px solid var(--rule);border-radius:18px 18px 18px 4px;font-weight:400;font-size:16px}
.cursor{animation:blink 1s steps(1) infinite;color:var(--moss)}
@keyframes blink{50%{opacity:0}}
.chips-row{display:flex;flex-wrap:wrap;gap:5px;justify-content:center}
.tchip{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;padding:5px 8px;border-radius:8px;background:var(--gold-soft);border:1px solid var(--gold);white-space:pre}
.tchip.num{background:var(--moss-soft);border-color:var(--moss)}
.arrow-down{font-weight:700;color:var(--muted);font-size:14px}
.trip{display:flex;align-items:center;gap:10px;font-size:40px}
.trip .dots{font-size:22px;color:var(--gold);letter-spacing:2px;animation:travel 1.6s linear infinite}
@keyframes travel{from{opacity:.3}50%{opacity:1}to{opacity:.3}}
.vecs{display:grid;gap:5px;width:100%;max-width:300px}
.vec{display:grid;grid-template-columns:62px repeat(4,1fr) 14px;gap:4px;align-items:center;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.vec i{height:12px;border-radius:3px;background:linear-gradient(90deg,var(--moss) var(--a),var(--rule) var(--a))}
.vec b{color:var(--muted)}
.stack{display:grid;gap:4px;width:100%;max-width:220px}
.layer{text-align:center;font-size:13px;font-weight:700;padding:6px;border-radius:8px;background:var(--moss-soft);border:1px solid var(--moss)}
.attn{width:100%;display:grid;justify-items:center}
.tchip.hot{background:var(--gold);color:var(--bg);border-color:var(--gold);box-shadow:0 0 0 4px var(--gold-soft)}
.tchip.look{background:var(--moss);color:var(--bg);border-color:var(--moss)}
.tchip.dim{opacity:.55}
.bars{display:grid;gap:6px;width:100%;max-width:320px}
.barrow{display:grid;grid-template-columns:110px 1fr 40px;gap:8px;align-items:center;font-size:14px}
.barrow span{font-family:ui-monospace,Menlo,Consolas,monospace;white-space:pre;overflow:hidden;text-overflow:ellipsis}
.barwrap{height:14px;background:var(--rule);border-radius:7px;overflow:hidden}
.barwrap>.bar{height:100%;background:var(--gold);border-radius:7px}
.barrow b{font-size:13px;text-align:right}

/* --- factory infographic --- */
.factory{display:grid;gap:10px;margin:14px 0 0}
@media (min-width:760px){.factory{grid-template-columns:1fr 28px 1fr 28px 1fr;align-items:stretch}}
.fstep{border:1px solid var(--rule);border-radius:18px;background:var(--surface);padding:16px}
.fstep h3{margin:6px 0 6px}
.fstep p{margin:0 0 8px;font-size:15.5px}
.fsmall{font-size:13.5px!important;color:var(--muted)}
.ficon svg{width:52px;height:52px}
.s-stroke{fill:none;stroke:var(--moss);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.s-fill{fill:var(--moss-soft)}
.farrow{display:grid;place-items:center;font-size:24px;font-weight:800;color:var(--gold)}
@media (max-width:759px){.farrow{transform:rotate(90deg);height:20px}}

/* --- takeaways and quiz --- */
.keep{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.keep li{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:12px 14px}
.keep span{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--bg);font-weight:800;font-family:var(--display)}
.keep p{margin:2px 0 0}
.quiz details{border:1px solid var(--rule);border-radius:14px;background:var(--surface);margin:8px 0;padding:0 14px}
.quiz summary{cursor:pointer;font-weight:700;padding:12px 0;list-style:none}
.quiz summary::-webkit-details-marker{display:none}
.quiz summary::before{content:"❓ ";}
.quiz details[open] summary::before{content:"💡 ";}
.quiz details p{margin:0 0 12px;color:var(--muted)}