/* =====================================================================
   AP TYPING · LEARN  (AP Microeconomics, AP Macroeconomics, AP Statistics)
   Uses the existing AP Typing design tokens from app.html (:root):
   --zoom, --poison, --busy, --meeting, --giraffe, --fluff, --border-soft,
   --text-muted, --shadow-*, --r. Nothing here restyles existing pages:
   every selector is scoped under .lrn- or .lg- prefixes.
   ===================================================================== */
.lrn{font-feature-settings:"calt" 0,"liga" 0;font-variant-ligatures:no-common-ligatures no-contextual;--lrn-ok:#03b980;--lrn-ok-bg:rgba(3,226,157,.12);--lrn-bad:#e0457f;--lrn-bad-bg:rgba(250,88,167,.10);--lrn-part:#b7860b;--lrn-part-bg:rgba(239,202,98,.18);--lrn-soft:#f7f7fb}
.lrn .lrn-eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-family:'Manrope',sans-serif;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--zoom)}
.lrn h1.page-title{margin-top:.35rem}
.lrn .lrn-sub{color:var(--text-muted);margin-top:.45rem;max-width:44rem}
.lrn-journey{display:flex;flex-wrap:wrap;gap:.45rem;margin:1.1rem 0 1.6rem}
.lrn-journey span{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--border-soft);border-radius:999px;padding:.38rem .8rem;font-size:.82rem;font-weight:600}
.lrn-journey span i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;font-weight:800;color:#fff;background:var(--zoom)}
.lrn-journey .arr{border:none;background:none;padding:0 .1rem;color:var(--text-muted)}

/* ---------- course picker ---------- */
.lrn-courses{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
.lrn-course{text-align:left;background:#fff;border:1px solid var(--border-soft);border-radius:var(--r);padding:1.3rem;display:flex;flex-direction:column;gap:.6rem;transition:transform .15s,box-shadow .2s;position:relative;overflow:hidden}
.lrn-course:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.lrn-course .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff}
.lrn-course h3{font-size:1.15rem}
.lrn-course p{font-size:.88rem;color:var(--text-muted)}
.lrn-course .meta{display:flex;justify-content:space-between;font-size:.8rem;color:var(--text-muted);font-weight:600}
.lrn-bar{height:8px;border-radius:99px;background:#eeeef6;overflow:hidden}
.lrn-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--zoom),#7c5cff);transition:width .4s ease}
.lrn-bar.ok i{background:linear-gradient(90deg,#03c88c,var(--meeting))}

/* ---------- resume banner ---------- */
.lrn-resume{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:linear-gradient(110deg,rgba(63,34,236,.07),rgba(3,226,157,.08));border:1px solid rgba(63,34,236,.16);border-radius:var(--r);padding:1rem 1.2rem;margin-bottom:1.4rem}
.lrn-resume b{font-family:'Manrope';font-size:1.02rem}
.lrn-resume small{display:block;color:var(--text-muted);font-size:.82rem;margin-top:.15rem}

/* ---------- unit list ---------- */
.lrn-units{display:flex;flex-direction:column;gap:.9rem}
.lrn-unit{background:#fff;border:1px solid var(--border-soft);border-radius:var(--r);overflow:hidden}
.lrn-unit>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;padding:1rem 1.15rem}
.lrn-unit>summary::-webkit-details-marker{display:none}
.lrn-unit .un{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-family:'Manrope';font-weight:800;color:var(--zoom);background:rgba(63,34,236,.08)}
.lrn-unit h3{font-size:1.02rem}
.lrn-unit .us{font-size:.8rem;color:var(--text-muted);margin-top:.15rem}
.lrn-unit .lrn-bar{margin-top:.45rem;max-width:340px}
.lrn-unit .chev{transition:transform .2s;color:var(--text-muted)}
.lrn-unit[open] .chev{transform:rotate(180deg)}
.lrn-topics{border-top:1px solid var(--border-soft);display:flex;flex-direction:column}
.lrn-topic{display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;padding:.75rem 1.15rem;text-align:left;border-bottom:1px solid #f1f1f6;width:100%}
.lrn-topic:last-child{border-bottom:none}
.lrn-topic:hover{background:#fafaff}
.lrn-topic>span:nth-child(2){display:flex;flex-direction:column;min-width:0}
.lrn-topic .code{font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:600;color:var(--text-muted);min-width:2.6rem}
.lrn-topic .tn{font-weight:600;font-size:.93rem}
.lrn-topic .ts{font-size:.76rem;color:var(--text-muted);margin-top:.1rem}
.lrn-pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:700;padding:.22rem .6rem;border-radius:999px;white-space:nowrap;background:#f1f1f7;color:var(--text-muted)}
.lrn-pill.prog{background:rgba(63,34,236,.09);color:var(--zoom)}
.lrn-pill.done{background:var(--lrn-ok-bg);color:#047857}
.lrn-pill.lock{background:#fff7d6;color:#7a5b00}
.lrn-ring{--p:0;width:34px;height:34px;border-radius:50%;background:conic-gradient(var(--zoom) calc(var(--p)*1%),#ececf4 0);display:grid;place-items:center;flex:none}
.lrn-ring::after{content:attr(data-v);width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:.6rem;font-weight:800;color:var(--text-muted)}
.lrn-ring.full{background:conic-gradient(var(--meeting) 100%,#ececf4 0)}

/* ---------- topic hub ---------- */
.lrn-hub-head{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.2rem}
.lrn-hub-head .code{font-family:'JetBrains Mono',monospace;font-weight:700;color:#fff;background:var(--zoom);border-radius:12px;padding:.4rem .6rem;font-size:.85rem;flex:none}
.lrn-objectives{background:#fff;border:1px solid var(--border-soft);border-radius:var(--r);padding:1rem 1.2rem;margin:0 0 1.2rem}
.lrn-objectives h3{font-size:.95rem;margin-bottom:.4rem}
.lrn-objectives ul{margin-left:1.1rem;font-size:.9rem;color:#33333d;display:flex;flex-direction:column;gap:.2rem}
.lrn-stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:.85rem;margin-bottom:1.2rem}
.lrn-stage{position:relative;text-align:left;background:#fff;border:1px solid var(--border-soft);border-radius:var(--r);padding:1.05rem 1.1rem 1rem;display:flex;flex-direction:column;gap:.35rem;transition:transform .15s,box-shadow .2s,border-color .2s}
.lrn-stage:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.lrn-stage.next{border:2px solid var(--zoom);box-shadow:0 14px 34px -18px rgba(63,34,236,.5)}
.lrn-stage .sn{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.lrn-stage h3{font-size:1.04rem;display:flex;align-items:center;gap:.45rem}
.lrn-stage p{font-size:.84rem;color:var(--text-muted);flex:1}
.lrn-stage .foot{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;font-weight:600;color:var(--text-muted);margin-top:.3rem}
.lrn-stage .badge{position:absolute;top:.8rem;right:.8rem}
.lrn-stage.typing{background:linear-gradient(140deg,#fff,rgba(223,247,0,.18));}
.lrn-terms{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.lrn-terms button{border:1px solid var(--border-soft);background:#fff;border-radius:999px;padding:.32rem .75rem;font-size:.82rem;font-weight:600}
.lrn-terms button.open{background:var(--zoom);color:#fff;border-color:var(--zoom)}
.lrn-termdef{margin-top:.55rem;font-size:.88rem;min-height:1.4em;color:#33333d}

/* ---------- session ---------- */
.lrn-session{max-width:820px;margin:0 auto}
.lrn-head{display:flex;flex-direction:column;gap:.55rem;margin-bottom:.9rem}
.lrn-head-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.lrn-where{font-size:.82rem;color:var(--text-muted);font-weight:600;min-width:0}
.lrn-where b{color:var(--text-main)}
.lrn-head-actions{display:flex;gap:.45rem;flex-wrap:wrap}
.lrn-progress{display:flex;align-items:center;gap:.6rem}
.lrn-progress .lrn-bar{flex:1;height:10px}
.lrn-progress .n{font-size:.78rem;font-weight:700;color:var(--text-muted);white-space:nowrap}
.lrn-dots{display:flex;gap:4px;flex-wrap:wrap}
.lrn-dots i{width:9px;height:9px;border-radius:50%;background:#e4e4ee;display:block}
.lrn-dots i.ok{background:var(--meeting)}
.lrn-dots i.bad{background:var(--busy)}
.lrn-dots i.part{background:var(--giraffe)}
.lrn-dots i.seen{background:#b9b1ff}
.lrn-dots i.cur{outline:2px solid var(--zoom);outline-offset:2px;background:#fff}
.lrn-card{background:#fff;border:1px solid var(--border-soft);border-radius:24px;box-shadow:var(--shadow-sm);padding:clamp(1.1rem,3vw,1.7rem)}
.lrn-kicker{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.75rem}
.lrn-kicker .k{font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:.25rem .6rem;border-radius:999px;background:rgba(63,34,236,.08);color:var(--zoom)}
.lrn-kicker .k.cmd{background:#171717;color:var(--poison)}
.lrn-kicker .k.lvl{background:#f3f3f8;color:var(--text-muted)}
.lrn-qrow{display:flex;gap:.8rem;align-items:flex-start;justify-content:space-between}
.lrn-q{font-family:'Manrope',sans-serif;font-weight:700;font-size:clamp(1.02rem,2.4vw,1.16rem);line-height:1.45;flex:1;min-width:0}
.lrn-q p+p{margin-top:.45rem}
.lrn-hintbtn{flex:none;display:inline-flex;align-items:center;gap:.35rem;border:1px solid #f1df9a;background:#fffbea;color:#7a5b00;border-radius:999px;padding:.38rem .75rem;font-size:.8rem;font-weight:700}
.lrn-hintbtn:hover{background:#fff4c4}
.lrn-hintbtn[disabled]{opacity:.5}
.lrn-hints{display:flex;flex-direction:column;gap:.4rem;margin:.6rem 0 0}
.lrn-hint{display:flex;gap:.55rem;align-items:flex-start;background:#fffbea;border:1px solid #f4e3a3;border-radius:14px;padding:.55rem .75rem;font-size:.9rem;color:#5a4300;animation:lrnIn .25s ease}
.lrn-hint b{flex:none;font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;background:#f7e08a;border-radius:999px;padding:.12rem .45rem;margin-top:.1rem}
@keyframes lrnIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.lrn-body{margin-top:1rem}
.lrn-stem{background:var(--lrn-soft);border:1px solid var(--border-soft);border-left:3px solid var(--zoom);border-radius:12px;padding:.8rem 1rem;font-size:.93rem;line-height:1.6;margin-bottom:.9rem}
.lrn-stem .lab{display:block;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.3rem}
.lrn-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:1.1rem}
.lrn-actions .grow{flex:1}
.lrn-enter{font-size:.78rem;color:var(--text-muted)}
.lrn-nav{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:1rem}

/* choices */
.lrn-choices{display:flex;flex-direction:column;gap:.55rem}
.lrn-choice{display:flex;gap:.7rem;align-items:flex-start;text-align:left;width:100%;background:#fff;border:1.5px solid var(--border-soft);border-radius:14px;padding:.7rem .85rem;font-size:.95rem;transition:border-color .15s,background .15s}
.lrn-choice:hover:not([disabled]){border-color:#bdb3ff;background:#fbfaff}
.lrn-choice .l{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:.8rem;background:#f1f1f7;color:var(--text-muted)}
.lrn-choice.sel{border-color:var(--zoom);background:rgba(63,34,236,.05)}
.lrn-choice.sel .l{background:var(--zoom);color:#fff}
.lrn-choice.correct{border-color:var(--lrn-ok);background:var(--lrn-ok-bg)}
.lrn-choice.correct .l{background:var(--lrn-ok);color:#fff}
.lrn-choice.wrong{border-color:var(--lrn-bad);background:var(--lrn-bad-bg)}
.lrn-choice.wrong .l{background:var(--lrn-bad);color:#fff}
.lrn-choice.missed{border-style:dashed;border-color:var(--lrn-ok)}
.lrn-choice .why{display:block;font-size:.83rem;color:#4b4b57;margin-top:.3rem}
.lrn-tf{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.lrn-tf .lrn-choice{justify-content:center;font-weight:700}

/* text inputs */
.lrn-input{width:100%;font:inherit;font-size:1rem;padding:.7rem .9rem;border:1.5px solid var(--border-soft);border-radius:12px;background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
.lrn-input:focus{border-color:var(--zoom);box-shadow:0 0 0 3px rgba(63,34,236,.12)}
.lrn-input.ok{border-color:var(--lrn-ok);background:var(--lrn-ok-bg)}
.lrn-input.bad{border-color:var(--lrn-bad);background:var(--lrn-bad-bg)}
textarea.lrn-input{min-height:110px;resize:vertical;line-height:1.55}
.lrn-gaptext{font-size:1.02rem;line-height:2.3}
.lrn-gap{display:inline-block;width:auto;min-width:7.5rem;max-width:100%;padding:.25rem .55rem;font-size:.95rem;border-radius:9px;vertical-align:baseline}
.lrn-bank{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.lrn-bank button{border:1px dashed #c8c3ea;background:#fbfaff;border-radius:999px;padding:.32rem .75rem;font-size:.85rem;font-weight:600}
.lrn-bank button.used{opacity:.35}
.lrn-calcrow{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.lrn-calcrow .lrn-input{max-width:240px}
.lrn-unit-t{font-weight:600;color:var(--text-muted)}
.lrn-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.7rem}
.lrn-fields label{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;font-weight:700;color:#3a3a46}

/* match */
.lrn-match{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.lrn-match .col{display:flex;flex-direction:column;gap:.45rem}
.lrn-mi{text-align:left;background:#fff;border:1.5px solid var(--border-soft);border-radius:12px;padding:.6rem .75rem;font-size:.88rem;position:relative;min-height:44px}
.lrn-mi.sel{border-color:var(--zoom);background:rgba(63,34,236,.06)}
.lrn-mi.done{border-color:var(--lrn-ok);background:var(--lrn-ok-bg);cursor:default}
.lrn-mi.flash{animation:lrnShake .4s}
.lrn-mi .tagn{position:absolute;top:-8px;right:-8px;width:20px;height:20px;border-radius:50%;background:var(--lrn-ok);color:#fff;font-size:.7rem;font-weight:800;display:grid;place-items:center}
@keyframes lrnShake{0%,100%{transform:none}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* order */
.lrn-order{display:flex;flex-direction:column;gap:.45rem}
.lrn-oi{display:grid;grid-template-columns:auto 1fr auto;gap:.6rem;align-items:center;background:#fff;border:1.5px solid var(--border-soft);border-radius:12px;padding:.55rem .7rem;font-size:.9rem;cursor:grab}
.lrn-oi .n{width:24px;height:24px;border-radius:7px;background:#f1f1f7;display:grid;place-items:center;font-weight:800;font-size:.75rem;color:var(--text-muted)}
.lrn-oi .b{display:flex;gap:.25rem}
.lrn-oi .b button{width:32px;height:32px;border-radius:9px;border:1px solid var(--border-soft);background:#fff;font-size:.8rem}
.lrn-oi.ok{border-color:var(--lrn-ok);background:var(--lrn-ok-bg)}
.lrn-oi.bad{border-color:var(--lrn-bad);background:var(--lrn-bad-bg)}
.lrn-oi.over{border-color:var(--zoom)}

/* classify */
.lrn-classify .pool{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.8rem;min-height:2.4rem}
.lrn-chip{border:1.5px solid var(--border-soft);background:#fff;border-radius:999px;padding:.4rem .8rem;font-size:.86rem;font-weight:600;text-align:left}
.lrn-chip.sel{border-color:var(--zoom);background:rgba(63,34,236,.07)}
.lrn-chip.ok{border-color:var(--lrn-ok);background:var(--lrn-ok-bg)}
.lrn-chip.bad{border-color:var(--lrn-bad);background:var(--lrn-bad-bg)}
.lrn-buckets{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.6rem}
.lrn-bucket{border:1.5px dashed #cfcbe8;border-radius:14px;padding:.6rem;min-height:92px;text-align:left;display:flex;flex-direction:column;gap:.4rem;background:#fcfcff}
.lrn-bucket .bh{font-size:.78rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--zoom)}
.lrn-bucket.armed{border-color:var(--zoom);background:rgba(63,34,236,.04)}
.lrn-bucket .lrn-chip{font-size:.8rem}

/* spot the mistake */
.lrn-spot{font-size:1.02rem;line-height:2}
.lrn-spot span.w{cursor:pointer;border-radius:6px;padding:.05rem .12rem}
.lrn-spot span.w:hover{background:#f1efff}
.lrn-spot span.w.sel{background:rgba(63,34,236,.14)}
.lrn-spot span.w.ok{background:var(--lrn-ok-bg);color:#047857;font-weight:700}
.lrn-spot span.w.missed{background:var(--lrn-bad-bg);color:#b3245d;font-weight:700}

/* feedback */
.lrn-fb{margin-top:1rem;border-radius:16px;padding:.9rem 1rem;display:flex;gap:.75rem;align-items:flex-start;animation:lrnIn .25s ease}
.lrn-fb.ok{background:var(--lrn-ok-bg);border:1px solid rgba(3,185,128,.35)}
.lrn-fb.bad{background:var(--lrn-bad-bg);border:1px solid rgba(224,69,127,.3)}
.lrn-fb.part{background:var(--lrn-part-bg);border:1px solid rgba(183,134,11,.3)}
.lrn-fb .fi{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800}
.lrn-fb.ok .fi{background:var(--lrn-ok)}
.lrn-fb.bad .fi{background:var(--lrn-bad)}
.lrn-fb.part .fi{background:var(--lrn-part)}
.lrn-fb .fc{flex:1;min-width:0;display:flex;flex-direction:column;gap:.45rem;font-size:.92rem;line-height:1.55}
.lrn-fb .fh{font-weight:800;font-family:'Manrope'}
.lrn-why{color:#2f2f3a}
.lrn-chain{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin:.1rem 0}
.lrn-chain span{background:#fff;border:1px solid rgba(63,34,236,.2);border-radius:10px;padding:.25rem .55rem;font-size:.84rem;font-weight:600}
.lrn-chain em{font-style:normal;color:var(--zoom);font-weight:800}
.lrn-working{background:#fff;border:1px solid var(--border-soft);border-radius:12px;padding:.7rem .85rem}
.lrn-working .wh{font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.35rem}
.lrn-working dl{display:grid;grid-template-columns:auto 1fr;gap:.25rem .8rem;font-size:.88rem}
.lrn-working dt{font-weight:800;color:var(--zoom);font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;padding-top:.12rem}
.lrn-working dd{margin:0}
.lrn-working ol{margin-left:1.1rem;display:flex;flex-direction:column;gap:.15rem}
.lrn-model{background:#fff;border:1px solid var(--border-soft);border-radius:12px;padding:.7rem .85rem;font-size:.9rem}
.lrn-model .wh{font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.3rem}
.lrn-fix{font-size:.86rem;color:#2f2f3a}
.lrn-fix b{color:#047857}
.lrn-miss{color:#b3245d;font-weight:600}

/* rubric */
.lrn-rubric{display:flex;flex-direction:column;gap:.45rem}
.lrn-rp{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:flex-start;background:#fff;border:1px solid var(--border-soft);border-radius:12px;padding:.6rem .75rem;font-size:.88rem}
.lrn-rp input{width:20px;height:20px;margin-top:.1rem;accent-color:var(--zoom)}
.lrn-rp.det{border-color:rgba(3,185,128,.4)}
.lrn-rp .det-t{display:block;font-size:.74rem;font-weight:700;margin-top:.2rem}
.lrn-rp .det-t.y{color:#047857}
.lrn-rp .det-t.n{color:#b3245d}
.lrn-score{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;background:#171717;color:#fff;border-radius:14px;padding:.7rem 1rem}
.lrn-score b{font-family:'Manrope';font-size:1.25rem;color:var(--poison)}
.lrn-score small{color:#c9c9d6;font-size:.78rem}
.lrn-earn{background:#fbfbff;border:1px solid #e6e3fb;border-radius:14px;padding:.7rem .9rem;font-size:.86rem}
.lrn-earn h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--zoom);margin-bottom:.35rem}
.lrn-earn ul{margin-left:1rem;display:flex;flex-direction:column;gap:.15rem}
.lrn-cmdtip{display:flex;gap:.5rem;align-items:flex-start;font-size:.84rem;background:#171717;color:#e9e9f2;border-radius:12px;padding:.55rem .75rem;margin-bottom:.8rem}
.lrn-cmdtip b{color:var(--poison)}

/* understand cards */
.lrn-concept h2{font-size:clamp(1.25rem,3vw,1.55rem);margin-bottom:.55rem}
.lrn-concept .lead{font-size:1.04rem;line-height:1.6;color:#262631}
.lrn-concept ul.pts{margin:.7rem 0 0 1.1rem;display:flex;flex-direction:column;gap:.3rem;font-size:.95rem}
.lrn-formula{margin:.9rem 0;background:#171717;color:#fff;border-radius:16px;padding:.9rem 1.1rem}
.lrn-formula .ex{font-family:'JetBrains Mono',monospace;font-size:clamp(.95rem,2.6vw,1.12rem);color:var(--poison);font-weight:600;overflow-wrap:anywhere}
.lrn-formula dl{display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;margin-top:.6rem;font-size:.85rem;color:#d7d7e3}
.lrn-formula dt{font-family:'JetBrains Mono',monospace;color:#fff}
.lrn-example{margin-top:.9rem;border:1px solid #e6e3fb;background:#fbfbff;border-radius:16px;padding:.85rem 1rem}
.lrn-example h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--zoom);margin-bottom:.4rem}
.lrn-example ol{margin-left:1.1rem;display:flex;flex-direction:column;gap:.25rem;font-size:.92rem}
.lrn-real{margin-top:.9rem;display:flex;gap:.6rem;align-items:flex-start;background:rgba(3,226,157,.09);border-radius:14px;padding:.75rem .9rem;font-size:.9rem}
.lrn-real .t{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#047857;white-space:nowrap;margin-top:.15rem}
.lrn-termgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.5rem;margin-top:.8rem}
.lrn-termgrid div{border:1px solid var(--border-soft);border-radius:12px;padding:.55rem .7rem;font-size:.86rem;background:#fff}
.lrn-termgrid b{display:block;font-size:.88rem;color:var(--zoom)}
.lrn-mistake{margin-top:.9rem;display:flex;gap:.6rem;align-items:flex-start;background:var(--lrn-bad-bg);border-radius:14px;padding:.7rem .9rem;font-size:.88rem}
.lrn-mistake .t{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#b3245d;white-space:nowrap;margin-top:.15rem}

/* explore buttons on graphs */
.lrn-explore{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.lrn-explore button{border:1px solid #d9d4fb;background:#fbfaff;border-radius:999px;padding:.38rem .8rem;font-size:.82rem;font-weight:600;color:#2a1a9c}
.lrn-explore button.on{background:var(--zoom);color:#fff;border-color:var(--zoom)}
.lrn-explore-note{font-size:.88rem;margin-top:.5rem;min-height:1.3em;color:#2f2f3a}

/* graph task controls */
.lrn-gtask{display:flex;flex-direction:column;gap:.55rem;margin-top:.6rem}
.lrn-gstep{font-size:.84rem;font-weight:700;color:#3a3a46}
.lrn-gstep .st{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--zoom);color:#fff;font-size:.7rem;margin-right:.35rem}
.lrn-dirs{display:flex;flex-wrap:wrap;gap:.45rem}
.lrn-dirs button{border:1.5px solid var(--border-soft);background:#fff;border-radius:999px;padding:.45rem .9rem;font-weight:700;font-size:.85rem}
.lrn-dirs button.sel{border-color:var(--zoom);background:rgba(63,34,236,.07);color:var(--zoom)}
.lrn-labels{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.5rem}
.lrn-labels label{display:flex;align-items:center;gap:.5rem;font-size:.85rem;font-weight:700}
.lrn-labels .num{flex:none;width:22px;height:22px;border-radius:50%;background:var(--zoom);color:#fff;display:grid;place-items:center;font-size:.72rem}
.lrn-labels select{flex:1;font:inherit;font-size:.88rem;padding:.45rem .5rem;border-radius:10px;border:1.5px solid var(--border-soft);background:#fff;min-width:0}
.lrn-labels select.ok{border-color:var(--lrn-ok);background:var(--lrn-ok-bg)}
.lrn-labels select.bad{border-color:var(--lrn-bad);background:var(--lrn-bad-bg)}
.lrn-slider{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.lrn-slider input[type=range]{flex:1;min-width:180px;accent-color:var(--zoom)}
.lrn-slider output{font-family:'JetBrains Mono',monospace;font-weight:700;min-width:5.5rem}
.lrn-simbtns{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.5rem}

/* stage complete / topic complete */
.lrn-done{text-align:center}
.lrn-done .m{width:110px;margin:0 auto}
.lrn-done h1{margin-top:.6rem}
.lrn-stats{display:flex;justify-content:center;gap:1.4rem;flex-wrap:wrap;margin:1rem 0}
.lrn-stats div b{display:block;font-family:'Manrope';font-size:1.6rem}
.lrn-stats div span{font-size:.8rem;color:var(--text-muted)}
.lrn-review{text-align:left;max-width:620px;margin:0 auto 1rem;display:flex;flex-direction:column;gap:.45rem}
.lrn-review button{display:flex;gap:.6rem;align-items:flex-start;text-align:left;background:#fff;border:1px solid var(--border-soft);border-radius:12px;padding:.6rem .75rem;font-size:.87rem}
.lrn-review button:hover{border-color:#cfcfe6}
.lrn-review .x{color:var(--lrn-bad);font-weight:800}
.lrn-cta{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-top:1rem}
.lrn-typing-cta{margin:1.4rem auto 0;max-width:620px;border-radius:24px;padding:1.3rem;background:#171717;color:#fff;display:flex;flex-direction:column;gap:.6rem;align-items:center}
.lrn-typing-cta h3{color:#fff;font-size:1.25rem}
.lrn-typing-cta p{color:#cfcfdc;font-size:.9rem}
.lrn-typing-cta .btn-secondary{font-weight:800}

/* practice entry card (subject page) */
.lrn-entry{display:flex;align-items:center;gap:.9rem;width:100%;text-align:left;margin:0 0 1.2rem;background:linear-gradient(110deg,rgba(63,34,236,.08),rgba(223,247,0,.16));border:1px solid rgba(63,34,236,.18);border-radius:var(--r);padding:.95rem 1.1rem;transition:transform .15s,box-shadow .2s}
.lrn-entry:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.lrn-entry .ei{width:42px;height:42px;border-radius:13px;background:var(--zoom);color:#fff;display:grid;place-items:center;flex:none;font-size:1.2rem}
.lrn-entry .eb{flex:1;display:flex;flex-direction:column;font-size:.86rem;color:var(--text-muted)}
.lrn-entry .eb b{font-family:'Manrope';color:var(--text-main);font-size:1rem}
.lrn-entry .eg{font-weight:800;color:var(--zoom);white-space:nowrap}
.lrn-note{font-size:.78rem;color:var(--text-muted);margin-top:1.4rem}

/* rich text helpers */
.lrn .rt code{font-family:'JetBrains Mono',monospace;background:#f1f1f7;border-radius:5px;padding:.05rem .3rem;font-size:.88em}
.lrn .rt sub,.lrn .rt sup{font-size:.72em}
.lrn .hl{background:var(--hl-bg,rgba(239,202,98,.32));color:inherit;border-radius:4px;padding:0 .15rem}

/* =================== graphs =================== */
.lg-fig{margin:.9rem 0 .2rem;background:#fff;border:1px solid var(--border-soft);border-radius:18px;padding:.6rem .6rem .5rem}
.lg-fig figcaption{font-size:.78rem;font-weight:700;color:var(--text-muted);padding:.1rem .3rem .3rem}
.lg-svg{display:block;width:100%;height:auto;max-width:520px;margin:0 auto;touch-action:manipulation;font-family:'Inter',system-ui,sans-serif}
.lg-panels{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.lg-panel .lg-svg{max-width:100%}
.lg-axis{stroke:#1f2937;stroke-width:1.6}
.lg-axlabel{font-size:13px;font-weight:700;fill:#1f2937}
.lg-tick{font-size:11.5px;fill:#374151;font-weight:600}
.lg-tickmark{stroke:#1f2937;stroke-width:1.2}
.lg-guide{stroke:#9ca3af;stroke-width:1.2;stroke-dasharray:4 4}
.lg-curve{fill:none;stroke:var(--cc);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.lg-curve.faded{opacity:.38}
.lg-curve.is-sel{stroke-width:4.2;filter:drop-shadow(0 0 4px rgba(63,34,236,.45))}
.lg-curve.is-ok{stroke-width:4}
.lg-clabel{font-size:12.5px;font-weight:800}
.lg-clabel.faded{opacity:.5}
.lg-ctag circle{fill:var(--zoom,#3f22ec)}
.lg-ctag text{fill:#fff;font-size:11px;font-weight:800}
.lg-chit{fill:none;stroke:transparent;stroke-width:22;cursor:pointer;pointer-events:stroke}
.lg-chit:hover{stroke:rgba(63,34,236,.10)}
.lg-chit.is-sel{stroke:rgba(63,34,236,.16)}
.lg-point{fill:#1f2937;stroke:#fff;stroke-width:1.5}
.lg-point.small{fill:#4b5563}
.lg-point.is-sel{fill:var(--zoom,#3f22ec)}
.lg-point.is-ok{fill:#03b980}.lg-point.is-bad{fill:#e0457f}.lg-point.is-answer{fill:#03b980}
.lg-plabel{font-size:12.5px;font-weight:800;fill:#111827;paint-order:stroke;stroke:#fff;stroke-width:3px}
.lg-phit{fill:transparent;cursor:pointer}
.lg-phit:hover{fill:rgba(63,34,236,.12)}
.lg-phit.is-sel{fill:rgba(63,34,236,.22);stroke:var(--zoom,#3f22ec);stroke-width:1.5}
.lg-phit.is-ok,.lg-phit.is-answer{fill:rgba(3,185,128,.25);stroke:#03b980;stroke-width:1.5}
.lg-phit.is-bad{fill:rgba(224,69,127,.22);stroke:#e0457f;stroke-width:1.5}
.lg-region{fill:var(--rf);stroke:rgba(31,41,55,.25);stroke-width:1}
.lg-region.lg-click{cursor:pointer;fill:rgba(124,58,237,.06);stroke:rgba(63,34,236,.35);stroke-dasharray:3 3}
.lg-region.lg-click:hover{fill:rgba(124,58,237,.16)}
.lg-region.is-sel{fill:rgba(63,34,236,.30)!important;stroke:var(--zoom,#3f22ec);stroke-dasharray:none}
.lg-region.is-ok,.lg-region.is-answer{fill:rgba(3,185,128,.32)!important;stroke:#03b980;stroke-dasharray:none}
.lg-region.is-bad{fill:rgba(224,69,127,.28)!important;stroke:#e0457f;stroke-dasharray:none}
.lg-comp{fill:var(--rf);stroke:none}
.lg-rlabel{font-size:13px;font-weight:800;fill:#1f2937;pointer-events:none;paint-order:stroke;stroke:#fff;stroke-width:3px}
.lg-arrow{stroke:#1f2937;stroke-width:1.8}
.lg-bracket{fill:none;stroke:#1f2937;stroke-width:1.3}
.lg-note{font-size:11.5px;font-weight:700;fill:#374151}
.lg-bar{fill:rgba(63,34,236,.55);stroke:#fff;stroke-width:1}
.lg-bar.hi{fill:#d6336c}
.lg-bar.lg-click{cursor:pointer}
.lg-bar.is-sel{fill:var(--zoom,#3f22ec)}
.lg-bar.is-ok,.lg-bar.is-answer{fill:#03b980}.lg-bar.is-bad{fill:#e0457f}
.lg-seg{stroke:#fff;stroke-width:1}
.lg-seg.k0{fill:#3f22ec}.lg-seg.k1{fill:#fa58a7}.lg-seg.k2{fill:#03e29d}.lg-seg.k3{fill:#efca62}.lg-seg.k4{fill:#8b8f9c}
.lg-seg.is-sel{stroke:#111;stroke-width:3}
.lg-seg-t{font-size:11px;font-weight:800;fill:#fff;pointer-events:none;paint-order:stroke;stroke:rgba(0,0,0,.35);stroke-width:2px}
.lg-dot{fill:#3f22ec;stroke:#fff;stroke-width:1}
.lg-dot.named{fill:#d6336c}
.lg-dot.lg-click{cursor:pointer}
.lg-dot.is-sel{fill:#111;r:6}
.lg-dot.is-ok,.lg-dot.is-answer{fill:#03b980}.lg-dot.is-bad{fill:#e0457f}
.lg-outlier{font-size:14px;fill:#d6336c;font-weight:800}
.lg-box line{stroke:#1f2937;stroke-width:1.6}
.lg-box rect{fill:rgba(63,34,236,.12);stroke:#1f2937;stroke-width:1.6}
.lg-box line.med{stroke:#3f22ec;stroke-width:2.6}
.lg-iv line{stroke:#3f22ec;stroke-width:2.4}
.lg-iv circle{fill:#3f22ec}
.lg-iv.miss line{stroke:#e0457f}.lg-iv.miss circle{fill:#e0457f}
.lg-iv .lg-hitbox{fill:transparent}
.lg-iv.lg-click{cursor:pointer}
.lg-iv.is-sel line{stroke-width:4}
.lg-iv.is-ok line,.lg-iv.is-answer line{stroke:#03b980;stroke-width:4}
.lg-tree-edge{stroke:#6b7280;stroke-width:1.6}
.lg-tree-root{fill:#1f2937}
.lg-tree-p{font-size:12px;font-weight:800;fill:#3f22ec;paint-order:stroke;stroke:#fff;stroke-width:3px}
.lg-tree-node rect{fill:#fff;stroke:#c7c2ea;stroke-width:1.4}
.lg-tree-node text{font-size:12px;font-weight:700;fill:#1f2937}
.lg-tree-node.lg-click{cursor:pointer}
.lg-tree-node.lg-click:hover rect{fill:#f3f1ff}
.lg-tree-node.is-sel rect{fill:rgba(63,34,236,.12);stroke:#3f22ec}
.lg-tree-node.is-ok rect,.lg-tree-node.is-answer rect{fill:rgba(3,185,128,.18);stroke:#03b980}
.lg-tree-node.is-bad rect{fill:rgba(224,69,127,.15);stroke:#e0457f}
.lg-leafhit{fill:transparent}
.lg-venn-u{fill:#fbfbff;stroke:#9ca3af;stroke-width:1.4}
.lg-venn-c{fill:rgba(63,34,236,.10);stroke:#3f22ec;stroke-width:1.8}
.lg-venn-c.b{fill:rgba(214,51,108,.10);stroke:#d6336c}
.lg-venn-both{fill:rgba(124,58,237,.18)}
.lg-venn-u.lg-click,.lg-venn-c.lg-click,.lg-venn-both.lg-click{cursor:pointer}
.lg-venn-u.is-sel,.lg-venn-c.is-sel,.lg-venn-both.is-sel{fill:rgba(63,34,236,.30)}
.lg-venn-u.is-ok,.lg-venn-c.is-ok,.lg-venn-both.is-ok,.lg-venn-u.is-answer,.lg-venn-c.is-answer,.lg-venn-both.is-answer{fill:rgba(3,185,128,.32)}
.lg-venn-u.is-bad,.lg-venn-c.is-bad,.lg-venn-both.is-bad{fill:rgba(224,69,127,.25)}
.lg-venn-t{font-size:13px;font-weight:800;fill:#1f2937}
.lg-venn-v{font-size:13px;font-weight:700;fill:#1f2937;pointer-events:none}
.lg-cf-box{fill:#fff;stroke:var(--cc);stroke-width:2}
.lg-cf-t{font-size:12.5px;font-weight:800;fill:#1f2937}
.lg-cf-arrow{fill:none;stroke:#1f2937;stroke-width:1.5}
.lg-cf-tag rect{fill:#fff;stroke:#c7c2ea;stroke-width:1.4}
.lg-cf-tag text{font-size:11.5px;font-weight:700;fill:#1f2937}
.lg-cf-tag.lg-click{cursor:pointer}
.lg-cf-tag.is-sel rect{fill:rgba(63,34,236,.14);stroke:#3f22ec}
.lg-cf-tag.is-ok rect,.lg-cf-tag.is-answer rect{fill:rgba(3,185,128,.2);stroke:#03b980}
.lg-cf-tag.is-bad rect{fill:rgba(224,69,127,.15);stroke:#e0457f}
.lg-payoff{overflow-x:auto}
.lg-payoff table{border-collapse:separate;border-spacing:4px;margin:0 auto;font-size:.9rem}
.lg-payoff th{font-size:.8rem;padding:.3rem .5rem;font-weight:800}
.lg-payoff th.vert{writing-mode:vertical-rl;transform:rotate(180deg)}
.lg-pay{border:1.5px solid var(--border-soft);border-radius:12px;padding:.7rem 1rem;text-align:center;font-weight:700;background:#fff;min-width:96px}
.lg-pay.lg-click{cursor:pointer}
.lg-pay.lg-click:hover{background:#faf9ff}
.lg-pay.is-sel{border-color:var(--zoom);background:rgba(63,34,236,.07)}
.lg-pay.is-ok,.lg-pay.is-answer{border-color:#03b980;background:rgba(3,185,128,.12)}
.lg-pay.is-bad{border-color:#e0457f;background:rgba(224,69,127,.1)}
.lg-payoff .pa{color:#3f22ec}.lg-payoff .pb{color:#d6336c}
.lg-cap{font-size:.78rem;color:var(--text-muted);text-align:center;margin-top:.35rem}
.lg-cap.mono,.lg-table.mono{font-family:'JetBrains Mono',monospace}
.lg-table-wrap{overflow-x:auto}
.lg-table{border-collapse:collapse;margin:0 auto;font-size:.88rem;min-width:60%}
.lg-table th{background:#f5f5fa;font-weight:800;font-size:.8rem;padding:.45rem .7rem;border:1px solid var(--border-soft);text-align:center}
.lg-table td{padding:.45rem .7rem;border:1px solid var(--border-soft);text-align:center}
.lg-table td.lg-click{cursor:pointer}
.lg-table td.lg-click:hover{background:#faf9ff}
.lg-table td.is-sel{background:rgba(63,34,236,.1)}
.lg-table td.is-ok,.lg-table td.is-answer{background:rgba(3,185,128,.15)}
.lg-table td.is-bad{background:rgba(224,69,127,.12)}
.lg-simstats{display:flex;flex-wrap:wrap;gap:.4rem 1rem;justify-content:center;font-size:.8rem;color:#374151;margin-top:.3rem}
.lg-simstats b{font-family:'JetBrains Mono',monospace}
.lg-desc{font-size:.78rem;color:var(--text-muted);padding:.2rem .3rem 0}
.lg-desc summary{cursor:pointer;font-weight:600}

/* =================== responsive =================== */
@media (max-width:640px){
  .lrn-match{grid-template-columns:1fr 1fr;gap:.4rem}
  .lrn-mi{font-size:.8rem;padding:.5rem .55rem}
  .lg-panels{grid-template-columns:1fr}
  .lrn-qrow{flex-direction:column}
  .lrn-hintbtn{align-self:flex-start}
  .lrn-topic{grid-template-columns:auto 1fr;}
  .lrn-topic .lrn-pill{grid-column:2;justify-self:start}
  .lrn-head-actions .btn{padding:.45rem .8rem;font-size:.8rem}
  .lrn-nav .btn{padding:.55rem .95rem}
  .lrn-oi .b button{width:36px;height:36px}
  .lg-tick,.lg-note{font-size:16px}
  .lg-clabel,.lg-plabel,.lg-rlabel,.lg-axlabel{font-size:17px}
  .lg-tree-node text,.lg-tree-p,.lg-cf-t,.lg-cf-tag text,.lg-venn-t,.lg-venn-v{font-size:15px}
  .lg-fig{padding:.35rem .2rem}
}
@media (prefers-reduced-motion:reduce){.lrn *,.lg-svg *{animation:none!important;transition:none!important}}