:root{
  --ink:#0B1220; --panel:#121C30; --panel2:#0E1626; --line:#22304C;
  --amber:#F5B942; --amber-dim:#8a6a2a; --jade:#7FD1C0; --ember:#E2604C;
  --text:#E8E4D8; --muted:#8FA0BC;
  --disp:'Plus Jakarta Sans',sans-serif; --body:'Plus Jakarta Sans',sans-serif; --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--text);font-family:var(--body);font-size:15.5px;line-height:1.6}
a{color:var(--amber);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:var(--body);cursor:pointer}
.wrap{max-width:1040px;margin:0 auto;padding:0 18px}
.btn{background:var(--amber);color:#1a1406;border:none;border-radius:9px;padding:10px 20px;font-weight:600;font-size:15px;display:inline-block}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--text);font-weight:500}
.btn.disabled{background:var(--line);color:var(--muted);cursor:not-allowed;pointer-events:none;border-color:var(--line)}
.btn:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
nav{position:sticky;top:0;z-index:5;background:rgba(11,18,32,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:18px;padding:12px 18px;flex-wrap:wrap}
nav .logo{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--text)}
nav .logo span{color:var(--amber)}
nav .links{margin-left:auto;display:flex;gap:14px;font-size:14px;align-items:center;flex-wrap:wrap}
nav .links a{color:var(--muted)} nav .links a:hover{color:var(--amber)}
nav .links a.here{color:var(--amber)}
.langBtn{font-family:var(--mono);font-size:12px;background:none;border:1px solid var(--line);color:var(--muted);border-radius:7px;padding:4px 10px;cursor:pointer}
.langBtn:hover{color:var(--amber);border-color:var(--amber-dim)}
.langBtn.acct.signedin{color:var(--jade);border-color:var(--jade)}
.modalOverlay{position:fixed;inset:0;z-index:50;background:rgba(4,6,10,.72);display:flex;align-items:center;justify-content:center;padding:18px}
.modalCard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px;width:100%;max-width:360px;position:relative;display:flex;flex-direction:column;gap:10px}
.modalCard h3{font-family:var(--disp);font-size:21px;margin-bottom:4px}
.modalClose{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;line-height:1}
.modalCard input{background:var(--ink);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:10px 12px;font-size:14px}
.modalCard .gbtn{background:#fff;color:#1a1406}
.authOr{text-align:center;color:var(--muted);font-size:12px;font-family:var(--mono);margin:2px 0}
.authErr{color:var(--ember);font-size:13px;min-height:16px}
.authErr.ok{color:var(--jade)}
#authResend{align-self:flex-start;font-size:13px}
.noticeCard{text-align:center;max-width:400px}
.noticeCard .noticeIc{font-size:38px;line-height:1}
.noticeCard p{color:var(--muted);font-size:14px;line-height:1.6;margin:0 0 6px}
.noticeCard .authErr{text-align:left}
.authSwitch{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:6px;font-size:13px;color:var(--muted)}
.authToggleRow{display:flex;gap:6px;align-items:baseline}
.authLink{background:none;border:none;padding:0;margin:0;font:inherit;color:var(--amber);cursor:pointer}
.authLink:hover{text-decoration:underline}
.authLink.strong{font-weight:600}
.authCenter{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:64vh;text-align:center}
.authCenter .coCard{text-align:left;width:100%}
.hero{padding:64px 0 48px;border-bottom:1px solid var(--line);background:
 radial-gradient(700px 320px at 80% -10%, rgba(245,185,66,.08), transparent),
 linear-gradient(180deg,#0d1526,var(--ink))}
.hero h1{font-family:var(--disp);font-size:clamp(30px,5vw,46px);font-weight:700;line-height:1.15;max-width:680px}
.hero h1 em{color:var(--amber);font-style:normal}
.hero p{color:var(--muted);max-width:580px;margin:16px 0 26px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap}
.hero .proof{margin-top:26px;font-family:var(--mono);font-size:12.5px;color:var(--muted);display:flex;gap:22px;flex-wrap:wrap}
.hero .proof b{color:var(--jade)}
section{padding:48px 0}
.shead{margin-bottom:22px}
.shead .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.shead h2{font-family:var(--disp);font-size:27px;font-weight:600;margin-top:4px}
.shead p{color:var(--muted);max-width:640px;margin-top:6px}
.courses{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.course{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:10px}
.course h3{font-family:var(--disp);font-size:20px}
.course .meta{font-family:var(--mono);font-size:12px;color:var(--muted)}
.course p{color:var(--muted);font-size:14.5px;flex:1}
.course .price{font-family:var(--mono);color:var(--amber);font-size:14px}
.pill{font-family:var(--mono);font-size:11px;border:1px solid var(--line);border-radius:20px;padding:2px 10px;color:var(--muted);align-self:flex-start}
.pill.live{border-color:var(--jade);color:var(--jade)}
.lessons{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--panel)}
.lrow{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);width:100%;background:none;border-left:none;border-right:none;border-top:none;color:var(--text);text-align:left;font-size:15px;cursor:pointer}
.lrow:last-child{border-bottom:none}
.lrow:hover{background:var(--panel2)}
.lrow .n{font-family:var(--mono);font-size:12px;color:var(--muted);width:26px}
.lrow .t{flex:1}
.badge{font-family:var(--mono);font-size:11px;border-radius:6px;padding:2px 8px;white-space:nowrap}
.badge.free{color:var(--jade);border:1px solid var(--jade)}
.badge.lock{color:var(--muted);border:1px solid var(--line)}
.badge.open{color:var(--amber);border:1px solid var(--amber-dim)}
.courseTop{display:flex;align-items:center;gap:10px;margin:8px 0 10px}
.courseTop h3{font-family:var(--disp);font-size:20px;flex:1}
.courseTop .unlockedAs{font-family:var(--mono);font-size:12px;color:var(--jade)}
.beltTag{font-family:var(--mono);font-size:11px;border-radius:20px;padding:3px 11px;border:1px solid var(--line);color:var(--text)}
.belt-0{background:#e9e6dd;color:#1a1406;border-color:#e9e6dd}
.belt-1{background:#f5d442;color:#1a1406;border-color:#f5d442}
.belt-2{background:#f0a24b;color:#1a1406;border-color:#f0a24b}
.belt-3{background:#5fb98a;color:#06110b;border-color:#5fb98a}
.belt-4{background:#8a5a3c;color:#fff;border-color:#8a5a3c}
.belt-5{background:#0b0f18;color:var(--amber);border-color:var(--amber-dim)}
.courseProg{display:flex;align-items:center;gap:12px;margin:2px 0 14px}
.courseProg .pbar{flex:1;height:8px;background:var(--panel2);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.courseProg .pbar span{display:block;height:100%;background:var(--amber);transition:width .3s}
.courseProg .pnum{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.syncStatus{font-family:var(--mono);font-size:11.5px;white-space:nowrap}
.syncStatus.sync{color:var(--muted)} .syncStatus.ok{color:var(--jade)} .syncStatus.err{color:var(--ember)}
.syncStatus.err a{color:var(--amber)}
.legal{max-width:760px}
.legal h3{font-family:var(--disp);font-size:18px;color:var(--amber);margin:22px 0 8px}
.legal ul{list-style:none;margin:0}
.legal li{position:relative;padding:5px 0 5px 18px;color:var(--muted);font-size:14.5px}
.legal li::before{content:"\2014";position:absolute;left:0;color:var(--amber-dim)}
.legal li b{color:var(--text)}
.lrow .prog{font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:1px 7px}
.lrow .prog.done{color:var(--jade);border-color:var(--jade)}
.lessonOutline{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:6px 0 16px}
.lessonOutline .olabel{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:6px}
.lessonOutline ul{list-style:none;margin:0;padding:0;columns:2;column-gap:24px}
.lessonOutline li{margin:3px 0;font-size:13.5px;break-inside:avoid}
@media (max-width:640px){.lessonOutline ul{columns:1}}
.ex.done{border-color:var(--jade)}
.ex.done .exq b::after{content:" ✓";color:var(--jade)}
.ex.stretch{border-color:var(--ember);background:linear-gradient(180deg,rgba(226,96,76,.06),var(--panel2))}
.ex.homework{border-color:var(--amber-dim);background:linear-gradient(180deg,rgba(245,185,66,.05),var(--panel2))}
.runex{margin:10px 0}
.sensei{margin-left:auto}
.senseiBox{margin-top:10px;background:var(--panel2);border:1px solid var(--amber-dim);border-radius:10px;padding:12px 14px}
.senseiBox .sIntro{font-size:13px;color:var(--muted);margin-bottom:8px}
.senseiBox textarea.sq{width:100%;min-height:64px;background:var(--ink);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:9px 12px;font-family:var(--body);font-size:14px;resize:vertical}
.senseiBox .sNote{font-family:var(--mono);font-size:12px;color:var(--jade);margin-top:8px}
.viewer{display:none;margin-top:16px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.viewer.show{display:block}
.viewer h3{font-family:var(--disp);font-size:21px;margin-bottom:10px}
.viewer h4{font-family:var(--disp);font-size:16.5px;margin:18px 0 6px;color:var(--amber)}
.viewer p,.viewer li{color:var(--text)}
.viewer ol,.viewer ul{margin:8px 0 8px 22px}
.viewer pre{font-family:var(--mono);font-size:13px;background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:12px;overflow:auto;margin:10px 0}
.viewer code{font-family:var(--mono);font-size:.92em;background:var(--ink);padding:1px 5px;border-radius:4px;color:var(--jade)}
.viewer pre code{background:none;padding:0}
.viewer .close{float:right;background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;padding:4px 12px;cursor:pointer}
.viewer .recap{border-left:2px solid var(--jade);padding:4px 0 4px 12px;color:var(--muted);font-size:14px;margin:8px 0 14px}
.viewer .hw{border:1px dashed var(--amber-dim);border-radius:10px;padding:12px 16px;margin-top:16px}
.viewer .hw b{color:var(--amber)}
figure.diagram{margin:14px 0;background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:14px;text-align:center}
figure.diagram svg{max-width:100%;height:auto}
/* lesson SVGs (encrypted content) still name the old IBM Plex fonts */
figure.diagram svg[font-family*="Mono"]{font-family:var(--mono)}
figure.diagram svg[font-family*="Sans"]{font-family:var(--body)}
figure.diagram figcaption{font-size:12.5px;color:var(--muted);margin-top:8px}
.videoBox{position:relative;padding-bottom:56.25%;height:0;margin:14px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.videoBox iframe,.videoBox video{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.unlock{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
.unlock input{background:var(--ink);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:9px 12px;font-family:var(--mono);font-size:14px}
.err{color:var(--ember);font-size:14px;margin-top:8px}
.ex{border:1px solid var(--line);border-radius:10px;padding:14px;margin:14px 0;background:var(--panel2)}
.ex .st{font-family:var(--mono);font-size:12px;color:var(--muted);float:right}
.ex .st.pass{color:var(--jade)}
.ex .exq{display:block;margin-bottom:8px}
textarea.code{width:100%;min-height:90px;background:var(--ink);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-family:var(--mono);font-size:13.5px;line-height:1.6;resize:vertical}
textarea.code:focus{outline:2px solid var(--amber-dim)}
.CodeMirror{height:auto !important;border:1px solid var(--line);border-radius:8px;font-family:var(--mono);font-size:13.5px;line-height:1.55}
.CodeMirror-scroll{min-height:64px !important}
.CodeMirror-focused{outline:2px solid var(--amber-dim)}
.exrun{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
.out{margin-top:10px;background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-family:var(--mono);font-size:13px;white-space:pre-wrap;max-height:240px;overflow:auto;display:none}
.out.show{display:block}
.out .ok{color:var(--jade)} .out .bad{color:var(--ember)}
.out .term{background:#05070c;border:1px solid var(--line);border-radius:6px;padding:8px 10px;margin-bottom:8px}
.out .term .lbl{display:block;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:5px}
.pyFig{display:block;max-width:100%;height:auto;background:#fff;border-radius:8px;margin:0 0 8px}
.out .verdict{font-weight:600}
.webprev{margin-top:10px}
.webprev .lbl{display:block;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:5px}
.webprev iframe.prev{width:100%;height:220px;background:#fff;border:1px solid var(--line);border-radius:8px}
.webfiles{display:grid;gap:10px}
.webfile .lbl{display:block;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:4px}
table.res{border-collapse:collapse;margin-top:6px;font-family:var(--mono);font-size:12.5px}
table.res th,table.res td{border:1px solid var(--line);padding:4px 9px;text-align:left}
table.res th{color:var(--amber);background:var(--panel2)}
.opts{list-style:none;margin:8px 0 0 0 !important}
.opts li{margin:6px 0}
.opts button{width:100%;text-align:left;background:var(--ink);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:9px 12px;font-size:14px}
.opts button:hover{border-color:var(--amber-dim)}
.opts button.right{border-color:var(--jade);color:var(--jade)}
.opts button.wrong{border-color:var(--ember);color:var(--ember)}
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.plan{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px}
.plan.hot{border-color:var(--amber-dim);background:linear-gradient(180deg,rgba(245,185,66,.06),var(--panel))}
.plan h3{font-family:var(--disp);font-size:19px}
.plan .pr{font-family:var(--mono);font-size:24px;color:var(--amber);margin:8px 0}
.plan .pr small{font-size:12px;color:var(--muted)}
.plan ul{list-style:none;margin:12px 0 18px}
.plan li{padding:4px 0;color:var(--muted);font-size:14.5px}
.plan li::before{content:"\2014 ";color:var(--amber)}
.editme{font-family:var(--mono);font-size:11.5px;color:var(--ember);border:1px dashed var(--ember);border-radius:6px;padding:2px 8px}
.about2{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:start}
.about2 p{color:var(--muted)}
.fact{font-family:var(--mono);font-size:13px;border-left:2px solid var(--amber);padding:2px 0 2px 12px;margin:12px 0;color:var(--text)}
.outcome{list-style:none;margin:2px 0 4px;flex:1}
.outcome li{position:relative;padding:3px 0 3px 22px;color:var(--muted);font-size:14px}
.outcome li::before{content:"\2713";position:absolute;left:0;color:var(--jade);font-weight:700}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:640px){.vs{grid-template-columns:1fr}}
.vscard{border:1px solid var(--line);border-radius:14px;padding:20px;background:var(--panel2)}
.vscard.good{border-color:var(--amber-dim);background:linear-gradient(180deg,rgba(245,185,66,.07),var(--panel))}
.vscard h3{font-family:var(--disp);font-size:18px;margin-bottom:10px}
.vscard.bad h3{color:var(--muted)}
.vscard.good h3{color:var(--amber)}
.vscard ul{list-style:none;margin:0}
.vscard li{position:relative;padding:5px 0 5px 24px;font-size:14px;color:var(--muted)}
.vscard.bad li::before{content:"\2715";position:absolute;left:0;color:var(--ember);font-weight:700}
.vscard.good li::before{content:"\2713";position:absolute;left:0;color:var(--jade);font-weight:700}
.vscard.good li{color:var(--text)}
footer{border-top:1px solid var(--line);padding:40px 0 30px;color:var(--muted);font-size:13px;background:var(--panel2)}
.footGrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
.footBrand .logo{font-family:var(--disp);font-size:20px;font-weight:700;color:var(--text)}
.footBrand .logo span{color:var(--amber)}
.footBrand p{margin-top:10px;max-width:260px;color:var(--muted);font-size:13.5px;line-height:1.6}
.footCol h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:10px}
.footCol a{display:block;color:var(--muted);padding:4px 0;font-size:14px}
.footCol a:hover{color:var(--amber)}
.footCol span{display:block;color:var(--muted);padding:4px 0;font-size:14px}
.footBottom{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--muted)}
@media (max-width:760px){.footGrid{grid-template-columns:1fr 1fr}.footBrand{grid-column:1/-1}}
.loadnote{font-family:var(--mono);font-size:12px;color:var(--muted);margin:6px 0}
@media (max-width:760px){.about2{grid-template-columns:1fr}}

/* ---------- course overview page ---------- */
.chero{padding:56px 0 44px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(245,185,66,.05),transparent)}
.chero h1{font-family:var(--disp);font-size:clamp(28px,4.5vw,42px);font-weight:700;line-height:1.15;max-width:720px;margin-top:6px}
.chero .cheroTag{color:var(--jade);font-family:var(--mono);font-size:14px;margin-top:10px}
.chero .cheroLead{color:var(--muted);max-width:680px;margin:18px 0 24px;font-size:15.5px;line-height:1.6}
.cmeta{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.cmeta b{display:block;color:var(--amber);letter-spacing:.08em;text-transform:uppercase;font-size:10.5px;font-weight:600;margin-bottom:2px}
.cbtns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.cbtns .btn{cursor:pointer}
.freeNote{font-family:var(--mono);font-size:12px;color:var(--jade);margin-top:14px}
.cardlink{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.cardlink:hover{color:var(--amber)}
.outcome-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2px 26px}
.syllabus{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.module{border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--panel2)}
.module .mhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.module h3{font-family:var(--disp);font-size:17px;color:var(--amber)}
.module .mrange{font-family:var(--mono);font-size:11.5px;color:var(--muted);white-space:nowrap}
.module ul{list-style:none;margin:0}
.module li{position:relative;padding:4px 0 4px 18px;font-size:14px;color:var(--muted)}
.module li::before{content:"\2014";position:absolute;left:0;color:var(--amber-dim)}
.faq{display:grid;gap:10px;max-width:760px}
.faqItem{border:1px solid var(--line);border-radius:12px;background:var(--panel2);padding:4px 16px}
.faqItem summary{cursor:pointer;padding:12px 0;font-weight:600;list-style:none}
.faqItem summary::-webkit-details-marker{display:none}
.faqItem summary::before{content:"+";color:var(--amber);font-family:var(--mono);margin-right:10px}
.faqItem[open] summary::before{content:"\2212"}
.faqItem p{color:var(--muted);font-size:14.5px;padding:0 0 14px 24px;margin:0}
.ccta{text-align:center}
.ccta h2{font-family:var(--disp);font-size:27px}
.ccta p{color:var(--muted);max-width:580px;margin:12px auto 24px}
@media (max-width:640px){.cmeta{gap:16px}}

/* ---------- pricing card buttons ---------- */
.planBtns{display:flex;gap:10px;flex-wrap:wrap}
.planBtns .btn{flex:1;text-align:center;white-space:nowrap}

/* ---------- checkout / profile / forms ---------- */
[hidden]{display:none !important}
.checkout{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.coCard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:8px}
.coLabel{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber);margin-top:8px}
.coInput,.coSelect{background:var(--ink);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:10px 12px;font-size:14px;font-family:var(--body);width:100%}
.coInput:focus,.coSelect:focus{outline:2px solid var(--amber-dim)}
textarea.coInput{resize:vertical}
.coTotalRow{display:flex;justify-content:space-between;align-items:baseline;margin:14px 0 6px;padding-top:12px;border-top:1px solid var(--line)}
.coTotal{font-family:var(--mono);font-size:22px;color:var(--amber)}
.coOwned{margin:8px 0 12px;padding:10px 12px;border-radius:10px;background:rgba(127,209,192,.08);border:1px solid rgba(127,209,192,.35);font-size:14px;color:var(--text)}
.coOwned a{color:var(--jade);font-weight:600;white-space:nowrap}
#coPay:disabled{opacity:.45;cursor:not-allowed}
/* AI tutor chat */
/* SQL step-through */
.sqOrder{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.sqChips{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:10px}
.sqChip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.04);border:1px solid var(--line2);color:var(--muted);border-radius:999px;padding:4px 10px;font-family:var(--mono);font-size:12px;cursor:pointer}
.sqChip span{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.08);font-size:10.5px}
.sqChip.done{color:var(--jade);border-color:rgba(127,209,192,.4)}
.sqChip.on{color:var(--amber);border-color:var(--amber);background:rgba(245,185,66,.12)}
.sqArrow{color:#4d5a78;font-size:12px}
.sqQuery{margin:0 0 8px;padding:8px 12px;background:#060B15;border:1px solid var(--line2);border-radius:10px;font-family:var(--mono);font-size:13px;white-space:pre-wrap;line-height:1.6}
.sqQuery .todo{color:#4d5a78}
.sqQuery .done{color:#cfd6e6}
.sqQuery .new{color:var(--amber);background:rgba(245,185,66,.12);border-radius:4px}
.sqTable{max-height:300px;overflow:auto;margin-bottom:8px}
/* CSS Dojo game */
.cgLevels{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 18px}
.cgDot{width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--muted);font-family:var(--mono);font-size:13px;cursor:pointer}
.cgDot.done{border-color:rgba(127,209,192,.6);color:var(--jade);background:rgba(127,209,192,.1)}
.cgDot.on{border-color:var(--amber);color:var(--amber);box-shadow:0 0 0 2px rgba(245,185,66,.25)}
.cgGame{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start}
.cgLeft{display:flex;flex-direction:column;gap:12px}
.cgLvl{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.cgTask{margin:0;font-size:15.5px;line-height:1.6;color:var(--text)}
.cgTask code,.cgChips code{font-family:var(--mono);font-size:.92em;background:var(--ink);padding:1px 6px;border-radius:5px;color:var(--jade)}
.cgChips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px;color:var(--muted)}
.cgEditor{border:1px solid var(--line2);border-radius:12px;background:#060B15;padding:10px 14px;font-family:var(--mono);font-size:14.5px}
.cgFixed{margin:0;color:#6b7a99;white-space:pre}
.cgEditor textarea{display:block;width:100%;box-sizing:border-box;margin:4px 0;padding:6px 10px 6px 18px;background:rgba(245,185,66,.06);border:1px dashed rgba(245,185,66,.45);border-radius:8px;color:var(--amber);font:inherit;resize:vertical;line-height:1.6}
.cgEditor textarea:focus{outline:none;border-style:solid}
.cgBtns{display:flex;gap:8px;flex-wrap:wrap}
.cgMsg{font-size:14px;color:var(--muted);min-height:20px}
.cgMsg.ok{color:var(--jade);font-weight:600}
.cgBoard{position:relative;height:340px;border-radius:16px;border:1px solid var(--line2);background:radial-gradient(circle at 30% 20%,rgba(127,209,192,.08),transparent 60%),#0A1424;overflow:hidden;transition:box-shadow .3s}
.cgBoard.win{box-shadow:0 0 0 2px var(--jade),0 0 30px rgba(127,209,192,.25)}
.cgLayer{position:absolute;inset:0;padding:0}
.cgMat,.cgNinja{width:56px;height:56px;flex-shrink:0;border-radius:50%;box-sizing:border-box}
.cgMat{border:3px dashed var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.cgNinja{display:flex;align-items:center;justify-content:center;font-size:30px;background:color-mix(in srgb,var(--c) 30%,#0A1424);border:3px solid var(--c);transition:transform .35s ease,box-shadow .3s}
.cgNinja.ok{box-shadow:0 0 14px var(--c)}
@media (max-width:820px){.cgGame{grid-template-columns:minmax(0,1fr)}.cgBoard{height:300px}}
/* CSS Dojo: Motion */
.bmStage{overflow-x:auto;padding:4px 0}
.bmMargin{display:inline-block;background:repeating-linear-gradient(45deg,rgba(245,185,66,.16) 0 6px,rgba(245,185,66,.05) 6px 12px);border:1px dashed rgba(245,185,66,.5);transition:padding .15s}
.bmBox{border-style:solid;border-color:#E2604C;background:rgba(127,209,192,.18);transition:all .15s}
.bmBox span{display:flex;align-items:center;justify-content:center;min-height:44px;background:rgba(95,179,249,.35);font-family:var(--mono);font-size:12px;color:#dfeaff}
.bmMath{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;color:var(--muted)}
.bmMath b{color:var(--amber);font-family:var(--mono)}
.mvBoard{height:360px}
.mvLayer{position:absolute;inset:0;padding:20px}
#mvRef{visibility:hidden}
.mvNinja{width:56px;height:56px;border-radius:50%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:30px;background:color-mix(in srgb,#F5B942 30%,#0A1424);border:3px solid #F5B942}
.mvGhost{background:rgba(127,209,192,.08);border:3px dashed #7FD1C0}
.mvGroup{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 2px 0 8px;align-self:center}
.mvGroup:first-child{margin-left:0}
.cgFixed.mvGo{margin-top:8px;color:#7FD1C0;white-space:pre-wrap}
/* game link cards inside lessons */
.gameLink{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0;padding:14px 16px;border-radius:14px;border:1px solid rgba(245,185,66,.35);background:linear-gradient(120deg,rgba(245,185,66,.08),rgba(127,209,192,.06))}
.gameLink .glIcon{font-size:30px}
.gameLink .glText{flex:1;min-width:200px}
.gameLink .glText b{display:block;color:var(--amber);margin-bottom:2px}
.gameLink .glText span{color:var(--muted);font-size:14px}
/* concept widgets */
.widget{margin:18px 0;border:1px solid rgba(127,209,192,.3);border-left:4px solid var(--jade);border-radius:14px;background:rgba(127,209,192,.04);padding:14px 16px}
.wgHead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.wgTag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--jade);font-weight:600}
.wgSub{color:var(--muted);font-size:13px}
.wgBody{display:flex;flex-direction:column;gap:12px}
.wgCode{font-size:14px;min-height:22px}
.viewer .wgCode code,.wgCode code{font-family:var(--mono);background:#060B15;border:1px solid var(--line2);padding:3px 8px;border-radius:7px;color:#cfd6e6;font-size:13.5px}
.viewer .wgCode code.wgRes,.wgCode code.wgRes{color:var(--amber);border-color:rgba(245,185,66,.4)}
.wgArrow{color:var(--muted);margin:0 4px}
.wgNote{color:var(--muted);font-size:12.5px;margin-left:6px}
.wgNone{color:var(--muted);font-size:13px}
.wgCtl{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;font-size:13.5px}
.wgCtl code{font-family:var(--mono);color:var(--jade);font-size:13px}
.wgSl{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-family:var(--mono);font-size:12.5px}
.wgSl input[type=range]{accent-color:var(--amber);width:130px}
.wgSl output{min-width:2.5ch;color:var(--amber)}
.wgSl input[type=text],.wgCtl input[type=text],.wgCtl select,.wgSl select{background:#060B15;border:1px solid var(--line2);color:var(--text);border-radius:7px;padding:4px 8px;font-family:var(--mono);font-size:13px}
.wgCtl input[type=text]{width:110px}
.wgOmit{display:inline-flex;align-items:center;gap:4px;font-size:11.5px}
.wgBtns{display:flex;flex-wrap:wrap;gap:6px}
.wgBtn{background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--text);border-radius:9px;padding:6px 10px;font-family:var(--mono);font-size:12.5px;cursor:pointer}
.wgBtn:hover{border-color:rgba(127,209,192,.6)}
.wgBtn.on{border-color:var(--jade);color:var(--jade);background:rgba(127,209,192,.1)}
.wgBtn.ghost{color:var(--muted)}
.wgLog{margin:0;min-height:20px;padding:8px 10px;background:#060B15;border:1px solid var(--line2);border-radius:8px;font-family:var(--mono);font-size:12.5px;color:var(--jade);white-space:pre-wrap}
.wgLog:empty{display:none}
.slTrack{display:flex;flex-wrap:wrap;gap:4px}
.slCell{display:flex;flex-direction:column;align-items:center;min-width:42px;padding:4px 2px;border:1px solid var(--line2);border-radius:9px;background:#060B15;cursor:pointer;transition:background .2s,border-color .2s}
.slCell b{font-family:var(--mono);font-size:16px;color:#cfd6e6;padding:4px 0}
.slCell span{font-family:var(--mono);font-size:10.5px;color:#4d5a78}
.slCell .slNeg{color:#6b5a78}
.slCell .slOrd{color:var(--amber);min-height:12px}
.slCell.on{background:rgba(245,185,66,.16);border-color:var(--amber)}
.slCell.on b{color:var(--amber)}
.rgTiles{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:40px}
.rgTile{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;border-radius:9px;background:rgba(245,185,66,.14);border:1px solid var(--amber);color:var(--amber);font-family:var(--mono);font-size:15px;animation:wgPop .25s ease}
.rgTile.ghost{background:none;border:1px dashed rgba(226,96,76,.7);color:#ffb3a6;text-decoration:line-through}
@keyframes wgPop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.tvSwitches{display:flex;gap:10px;flex-wrap:wrap}
.tvSw{display:flex;align-items:center;gap:10px;background:#060B15;border:1px solid var(--line2);border-radius:999px;padding:6px 14px;cursor:pointer;color:var(--text)}
.tvSw code{font-family:var(--mono);color:#cfd6e6}
.tvSw span{font-family:var(--mono);font-weight:600;color:var(--ember)}
.tvSw.on{border-color:var(--jade)}
.tvSw.on span{color:var(--jade)}
.tvRows{display:flex;flex-direction:column;gap:6px}
.tvRow{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 10px;border-radius:9px;background:#060B15;border:1px solid var(--line2)}
.tvRow code{font-family:var(--mono);font-size:13.5px;color:#cfd6e6}
.tvLamp{font-family:var(--mono);font-weight:600;padding:2px 10px;border-radius:999px;background:rgba(226,96,76,.12);color:#ffb3a6;transition:all .25s}
.tvLamp.on{background:rgba(127,209,192,.18);color:var(--jade);box-shadow:0 0 12px rgba(127,209,192,.35)}
.lsBoxes,.dcDrawers{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:52px}
.lsName{font-family:var(--mono);color:var(--muted);margin-right:4px}
.lsBox{display:flex;flex-direction:column;align-items:center;min-width:56px;border:1px solid var(--line2);border-radius:9px;background:#060B15;padding:3px 8px}
.lsBox span{font-family:var(--mono);font-size:10.5px;color:#4d5a78}
.lsBox b,.dcDrawer b{font-family:var(--mono);font-size:14px;color:#cfd6e6;padding:3px 0}
.lsBox.hi,.dcDrawer.hi{border-color:var(--amber);background:rgba(245,185,66,.14);animation:wgPop .3s ease}
.dcDrawer{display:flex;flex-direction:column;align-items:center;min-width:70px;border:1px solid var(--line2);border-top:4px solid var(--jade);border-radius:9px;background:#060B15;padding:4px 10px}
.dcDrawer span{font-family:var(--mono);font-size:12px;color:var(--jade)}
.wgTable{overflow-x:auto}
.wgTable table.res tr.drop td{opacity:.28;text-decoration:line-through;text-decoration-color:rgba(226,96,76,.5)}
.wgTable table.res tr.keep td{background:rgba(127,209,192,.06)}
.wgTable table.res .hl{color:var(--amber)}
.wgTable table.res tr.nullrow td{background:rgba(245,185,66,.08)}
.wgTable table.res i{color:var(--amber);font-style:normal;font-family:var(--mono)}
.gbPile,.gbChips{display:flex;flex-wrap:wrap;gap:6px}
.gbChip{display:flex;flex-direction:column;padding:4px 9px;border-radius:9px;background:#060B15;border:1px solid var(--line2);font-size:12px;animation:wgPop .3s ease}
.gbChip b{font-weight:500;color:var(--text)}
.gbChip small{color:var(--muted);font-family:var(--mono);font-size:11px}
.gbBuckets{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.gbBucket{border:1px dashed rgba(245,185,66,.5);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:8px;background:rgba(245,185,66,.04)}
.gbName{font-weight:600;color:var(--amber);font-size:13.5px}
.gbRes{margin-top:auto;font-size:13px}
.gbRes code{font-family:var(--mono);color:var(--jade)}
.gbRes b{color:var(--amber);font-family:var(--mono)}
.jnWrap{display:grid;grid-template-columns:minmax(0,1fr) 70px minmax(0,1.2fr);align-items:stretch;gap:0}
.jnWrap table.res{margin:0}
.jnSvg{width:100%;height:100%}
.jnSvg path{fill:none;stroke:var(--jade);stroke-width:1.6;opacity:.8}
.jnL tr.nomatch td{color:#ffb3a6}
@media (max-width:640px){.jnWrap{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr)}}
.plEasy{margin-top:8px}
.easyBox{margin-top:10px}
.easyBox[hidden]{display:none}
.qcOrder.qcFixed{margin-bottom:6px}
.qcOrder.qcFixed li{cursor:default;opacity:.7}
.plAi{margin-top:8px}
.aiBox{margin-top:10px;border:1px solid rgba(127,209,192,.35);border-radius:14px;background:rgba(127,209,192,.05);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.aiBox[hidden]{display:none}
.aiHead{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px}
.aiHead b{color:var(--jade)}
.aiLeft{font-size:12px;color:var(--muted)}
.aiLog{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow:auto;padding-right:2px}
.aiMsg{padding:8px 11px;border-radius:12px;font-size:14px;line-height:1.55;max-width:92%;word-wrap:break-word}
.aiMsg.bot{background:rgba(255,255,255,.05);border:1px solid var(--line2);align-self:flex-start}
.aiMsg.me{background:rgba(245,185,66,.12);border:1px solid rgba(245,185,66,.3);align-self:flex-end}
.aiMsg.wait{color:var(--muted);font-style:italic}
.aiMsg.err{border-color:rgba(226,96,76,.45);color:#ffb3a6}
.aiMsg code{font-family:var(--mono);font-size:.92em;background:var(--ink);padding:1px 5px;border-radius:4px;color:var(--jade)}
.aiMsg pre{margin:6px 0;padding:8px 10px;background:#060B15;border:1px solid var(--line2);border-radius:8px;font-family:var(--mono);font-size:12.5px;white-space:pre-wrap;overflow-x:auto}
.aiChips{display:flex;flex-wrap:wrap;gap:6px}
.aiChip{background:rgba(255,255,255,.04);border:1px solid var(--line2);color:var(--text);border-radius:999px;padding:5px 11px;font:inherit;font-size:12.5px;cursor:pointer}
.aiChip:hover{border-color:rgba(127,209,192,.6);color:var(--jade)}
.aiForm{display:flex;gap:8px;align-items:flex-end}
.aiForm textarea{flex:1;resize:vertical;min-height:40px;padding:8px 10px;border-radius:9px;border:1px solid var(--line2);background:#060B15;color:var(--text);font:inherit;font-size:14px}
.aiForm textarea:focus{outline:none;border-color:var(--jade)}
.aiNote{margin:0;font-size:12px;color:var(--muted)}
.coQr h3{font-family:var(--disp);font-size:18px;color:var(--amber);text-align:center}
.coQrImg{width:230px;max-width:100%;align-self:center;background:#fff;border-radius:10px;padding:8px;margin:6px auto}
.coBank{font-size:13.5px;display:grid;gap:6px;margin:8px 0}
.coBank>div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px dashed var(--line);padding-bottom:6px}
.coBank span{color:var(--muted)} .coBank b{font-family:var(--mono);color:var(--text);text-align:right}
.coSteps{margin:10px 0 14px;padding-left:20px;color:var(--muted);font-size:14px;display:grid;gap:8px}
.coContact{text-align:center;font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:6px}
.pfCourses{display:grid;gap:10px;margin-top:8px}
.pfCourse{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.pfCourse b{color:var(--text)}
.pfNotice{background:linear-gradient(180deg,rgba(245,185,66,.10),var(--panel2));border:1px solid var(--amber-dim);border-radius:12px;padding:14px 18px;margin-bottom:18px;color:var(--text);font-size:14.5px}
.pfNotice b{color:var(--amber)}
@media (max-width:760px){.checkout{grid-template-columns:1fr}}

/* ---------- admin dashboard ---------- */
.adStats{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.adStat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 20px;min-width:120px}
.adStat b{display:block;font-family:var(--mono);font-size:26px;color:var(--amber)}
.adStat span{font-size:12.5px;color:var(--muted)}
.adTableWrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.adTable{width:100%;border-collapse:collapse;font-family:var(--body);font-size:13px}
.adTable th,.adTable td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.adTable th{color:var(--amber);background:var(--panel2);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.adTable td .fact{border:none;padding:0;margin:0;font-size:12px;color:var(--muted)}
.adGoal{max-width:220px;color:var(--muted)}
.adView{padding:5px 12px;font-size:12.5px;white-space:nowrap}

/* ---------- account avatar + dropdown ---------- */
.avatarBtn{width:34px;height:34px;min-width:34px;padding:0;border-radius:50%;background-color:var(--panel);border:1px solid var(--jade);color:var(--jade);font-family:var(--body);font-weight:600;font-size:13px;display:inline-flex;align-items:center;justify-content:center;background-size:cover;background-position:center;cursor:pointer}
.avatarBtn.hasImg{color:transparent}
.links{position:relative}
.acctMenu{position:absolute;right:0;top:calc(100% + 8px);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px;min-width:170px;display:flex;flex-direction:column;gap:2px;box-shadow:0 10px 30px rgba(0,0,0,.35);z-index:20}
.acctMenu a,.acctMenu button{display:block;width:100%;text-align:left;background:none;border:none;color:var(--text);padding:9px 12px;border-radius:7px;font-size:14px;font-family:var(--body);cursor:pointer}
.acctMenu a:hover,.acctMenu button:hover{background:var(--panel2);color:var(--amber)}
#acctLogout{color:var(--ember)}
#acctLogout:hover{color:var(--ember);background:rgba(226,96,76,.10)}

/* ---------- auth gate ---------- */
.authGate{position:fixed;inset:0;z-index:50;background:rgba(11,18,32,.86);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px}
.authGateCard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px;max-width:360px;text-align:center;display:flex;flex-direction:column;gap:10px}
.authGateCard h3{font-family:var(--disp);font-size:20px;color:var(--amber)}
.authGateCard p{color:var(--muted);font-size:14.5px}
.authGateHome{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:4px}

/* ---------- profile page ---------- */
.pfCardBig{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px}
.pfHead{display:flex;align-items:center;gap:18px}
.pfHeadInfo{flex:1}
.pfHeadInfo h2{font-family:var(--disp);font-size:24px}
.pfMetaLine{color:var(--muted);font-family:var(--mono);font-size:13px;margin-top:4px}
.pfAvatar{width:56px;height:56px;border-radius:50%;background:var(--panel2);border:1px solid var(--line);color:var(--amber);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:20px;font-weight:700;background-size:cover;background-position:center;flex-shrink:0}
.pfAvatar.big{width:80px;height:80px;font-size:28px}
.pfGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
.pfField{display:flex;flex-direction:column;gap:3px}
.pfField.wide{grid-column:1/-1}
.pfField span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.pfField b{color:var(--text);font-weight:500;font-size:15px}
.pfCardBig h3{font-family:var(--disp);font-size:17px;color:var(--amber);margin:22px 0 10px}
.pfHr{border:none;border-top:1px solid var(--line);margin:22px 0 16px}
.pfForm{display:flex;flex-direction:column;gap:6px;margin-top:18px}
.pfForm .coLabel{margin-top:8px}
.pfFormBtns{display:flex;gap:10px;margin-top:12px}
.pfPhoto{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:12.5px;color:var(--jade);border:1px solid var(--jade);border-radius:7px;padding:4px 10px;cursor:pointer}
.pfPhotoMsg{font-family:var(--mono);font-size:12px;color:var(--muted);margin-left:8px}
@media (max-width:640px){.pfGrid{grid-template-columns:1fr}}

/* ---------- mobile: keep opened lessons within the viewport ---------- */
@media (max-width:640px){
  nav .wrap{gap:10px;padding:10px 14px}
  nav .links{gap:10px;font-size:13px}
  .viewer{overflow-x:hidden}
  .viewer pre,.viewer table,table.res{display:block;max-width:100%;overflow-x:auto}
  .viewer figure{max-width:100%;overflow-x:auto}
  .viewer figure svg{max-width:100%;height:auto}
  .exrun .btn{flex:1 1 auto}
}

/* ---------- progress detail page ---------- */
.prCard{margin-bottom:18px}
.prHead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.prHead h3{font-family:var(--disp);font-size:19px;color:var(--amber)}
.prBar{height:8px;background:var(--panel2);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin:12px 0 8px}
.prBar span{display:block;height:100%;background:var(--amber)}
.prSummary{font-size:14px;color:var(--muted);margin-bottom:14px}
.prSummary b{color:var(--text)}
.prTable{width:100%}
.prTable td,.prTable th{font-family:var(--body)}
.prTable tr.prDone td{color:var(--jade)}
.prAnswers{margin-top:14px}
.prAnswers summary{cursor:pointer;font-family:var(--mono);font-size:12.5px;color:var(--amber);padding:6px 0}
.prAns{margin:10px 0}
.prAnsLbl{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.prAns pre{font-family:var(--mono);font-size:12.5px;background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px 12px;overflow:auto;white-space:pre-wrap}

/* ---------- course overview (v2) ---------- */
.courseTop .xpTag{font-family:var(--mono);font-size:12px;color:var(--amber);border:1px solid var(--amber-dim);border-radius:20px;padding:2px 10px}
.courseTop .ctaGo{margin-left:auto}
.lrow .lbar{width:80px;height:6px;background:var(--panel2);border:1px solid var(--line);border-radius:20px;overflow:hidden;flex:none}
.lrow .lbar span{display:block;height:100%;background:var(--jade)}
@media (max-width:640px){.lrow .lbar{display:none}.courseTop .ctaGo{margin-left:0;width:100%}}

/* ---------- step player ---------- */
section:has(.viewer.show .pl) .shead,section:has(.viewer.show .pl) #lessonList{display:none}
.viewer:has(> .pl){margin-top:0;padding:16px 18px 22px}
.pl{display:flex;flex-direction:column;gap:12px}
.plTop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.plTop .close{float:none;order:9}
.plOlBtn{padding:6px 12px;font-size:13px}
.plHead{flex:1;min-width:180px}
.plLesson{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.plTitle{font-family:var(--disp);font-size:18px;line-height:1.25}
.plXp{font-family:var(--mono);font-size:12px;color:var(--amber);border:1px solid var(--amber-dim);border-radius:20px;padding:3px 10px;white-space:nowrap}
.plNav{display:flex;align-items:center;gap:6px}
.plNav button{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:8px;width:34px;height:32px;cursor:pointer;font-size:15px}
.plNav button:disabled{opacity:.35;cursor:default}
.plCount{font-family:var(--mono);font-size:12px;color:var(--muted);min-width:52px;text-align:center}
.plBar{height:6px;background:var(--panel2);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.plBar span{display:block;height:100%;background:var(--jade);transition:width .3s}
.plStep{display:none}
.plStep.on{display:block}
.plRead{max-width:820px;margin:0 auto}
.plFoot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;grid-column:1/-1}
.plStep.exercise.on{display:grid;grid-template-columns:minmax(260px,2fr) 3fr;gap:16px;align-items:start}
.plLeft{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:16px;position:sticky;top:12px}
.plLeft h4{margin-top:0}
.plLeft .exq{display:block;margin:10px 0}
.plStep.stretch .plLeft{border-color:var(--ember)}
.plStep.hw .plLeft{border-color:var(--amber-dim)}
.plTags{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.plTag{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.plXpTag{font-family:var(--mono);font-size:11px;color:#1a1406;background:var(--amber);border-radius:6px;padding:1px 7px;margin-left:auto}
.plHint{margin-top:10px;font-size:13px;padding:6px 12px}
.plHintBox{margin-top:10px;border-left:2px solid var(--amber);padding:6px 0 6px 12px;font-size:14px}
.plHintBox pre{white-space:pre-wrap}
.plHintLbl{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber);margin-bottom:4px}
.plRight .ex{margin:0}
.plRight .exrun{flex-wrap:wrap}
.plRight .exrun .plRun{order:-1}
.plDrawer{position:fixed;inset:0;z-index:45;background:rgba(4,6,10,.6)}
.plDrawerIn{position:absolute;top:0;left:0;bottom:0;width:min(380px,92vw);background:var(--panel);border-right:1px solid var(--line);overflow:auto;padding:16px}
.plDrawerHead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;position:relative}
.plDrawerHead .modalClose{position:static}
.plOl{list-style:none;margin:0;padding:0}
.plOi{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14px}
.plOi:hover{background:var(--panel2)}
.plOi.cur{background:var(--panel2);outline:1px solid var(--line)}
.plOi .ic{font-family:var(--mono);font-size:12px;width:26px;text-align:center;color:var(--muted)}
.plOi .lb{flex:1}
.plOi .xp{font-family:var(--mono);font-size:11px;color:var(--muted)}
.plOi .ck{width:14px;color:var(--jade)}
.plOi.done .lb{color:var(--muted)}
.plToast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--jade);color:#06231d;font-weight:600;border-radius:20px;padding:8px 18px;z-index:60;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.dmCard{max-width:420px}
.dmText{color:var(--muted);font-size:14.5px;line-height:1.55}
.dmActions{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.dmActions .btn{text-align:center}
@media (max-width:860px){.plStep.exercise.on{grid-template-columns:1fr}.plLeft{position:static}}
section:has(.viewer.show .pl) .wrap{max-width:1360px}
.plRight .CodeMirror{height:auto}
.plRight .CodeMirror-scroll{min-height:240px !important}
.plRight textarea.code{min-height:240px}
.plRead .runex .CodeMirror-scroll{min-height:90px !important}

/* ---------- learning dashboard ---------- */
.lnHead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.lnStats{display:flex;gap:12px}
.lnStat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 16px;min-width:110px}
.lnStat b{display:block;font-family:var(--disp);font-size:24px;color:var(--amber)}
.lnStat span{font-size:12.5px;color:var(--muted)}
.lnResume{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:linear-gradient(135deg,var(--panel),var(--panel2));border:1px solid var(--amber-dim);border-radius:16px;padding:20px 22px;margin-bottom:26px}
.lnResumeTxt{flex:1;min-width:240px}
.lnResume h3{font-family:var(--disp);font-size:22px;margin:4px 0 2px}
.lnBar{height:8px;background:var(--panel2);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin:10px 0 6px}
.lnBar span{display:block;height:100%;background:var(--jade)}
.lnH{font-family:var(--disp);font-size:19px;margin:8px 0 12px}
.lnGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:24px}
.lnCard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.lnCardTop{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.lnCardTop h3{font-family:var(--disp);font-size:18px}
.lnMeta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12px;color:var(--muted)}
.lnActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.lnActions .btn{padding:8px 14px;font-size:14px}
.lnDetail{font-size:13px;color:var(--muted);margin-left:auto}

/* ---------- dashboard extras ---------- */
.lnSub{font-family:var(--mono);font-size:12.5px;color:var(--muted)}

/* ---------- code playground ---------- */
.pgTabs{display:flex;gap:6px;margin-bottom:12px}
.pgTab{background:var(--panel);border:1px solid var(--line);color:var(--muted);border-radius:9px;padding:8px 18px;font-family:var(--mono);font-size:13px;cursor:pointer}
.pgTab.on{color:#1a1406;background:var(--amber);border-color:var(--amber)}
.pgPane .CodeMirror-scroll{min-height:300px !important}
.pgPane .out{margin-top:10px}

/* ---------- certificate ---------- */
.ctMsgCard{max-width:560px}
.ctActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.cert{max-width:820px;margin:0 auto;background:linear-gradient(160deg,var(--panel),var(--panel2));border:2px solid var(--amber-dim);border-radius:18px;padding:44px 48px;text-align:center;box-shadow:inset 0 0 0 8px var(--panel2),inset 0 0 0 9px var(--line)}
.certBrand{font-family:var(--disp);font-size:22px;font-weight:700;color:var(--text)}
.certBrand span{color:var(--amber)}
.certTitle{font-family:var(--mono);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--amber);margin:18px 0 26px}
.certLine{color:var(--muted);font-size:15px}
.certName{font-family:var(--disp);font-size:40px;font-weight:700;margin:8px 0 18px;line-height:1.15}
.certCourse{font-family:var(--disp);font-size:26px;color:var(--jade);margin-top:6px}
.certMeta{display:flex;justify-content:center;gap:48px;margin-top:32px;flex-wrap:wrap}
.certMeta span{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.certMeta b{font-family:var(--mono);font-size:14px}
.certVerify{margin-top:24px;font-family:var(--mono);font-size:11.5px;color:var(--muted);word-break:break-all}
.certNote{margin-top:8px;font-size:12.5px;color:var(--muted)}
@media (max-width:640px){.cert{padding:30px 20px}.certName{font-size:30px}}
@media print{
  nav,footer,.noPrint{display:none !important}
  body{background:#fff}
  .cert{box-shadow:none;border-color:#b8902f;background:#fff;color:#111}
  .certName,.certBrand{color:#111}.certCourse{color:#0b6e5f}.certLine,.certMeta span,.certVerify,.certNote{color:#555}
}

/* ---------- locked-lesson table of contents ---------- */
.lrow .lmeta{display:block;font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:2px}
.dmToc{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;max-height:240px;overflow:auto}
.dmToc b{display:block;font-family:var(--disp);font-size:15px;margin-bottom:6px}
.dmToc ol{margin:0 0 6px 20px;font-size:13.5px;color:var(--text)}
.dmToc li{margin:2px 0}
.dmToc span{font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* ---------- leaderboard ---------- */
.lnBoard{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:24px;max-width:560px}
.lbList{list-style:none;margin:10px 0;padding:0}
.lbList li{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:8px}
.lbList li:nth-child(odd){background:var(--panel2)}
.lbList li.me{outline:1px solid var(--amber-dim)}
.lbRank{font-family:var(--mono);font-size:13px;color:var(--amber);width:24px;text-align:right}
.lbName{flex:1}
.lbName em{color:var(--muted);font-style:normal;font-size:13px}
.lbXp{font-family:var(--mono);font-size:13px;color:var(--muted)}
.lbHide{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer}

/* ================= app shell: sidebar ================= */
body.hasSide{padding-left:236px}
.side{position:fixed;top:0;left:0;bottom:0;width:236px;z-index:20;background:linear-gradient(180deg,#0F1A2C,#0A111D);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;padding:16px 12px;overflow-y:auto}
.sLogo{font-family:var(--disp);font-weight:700;font-size:21px;color:var(--text);padding:4px 12px 12px}
.sLogo:hover{text-decoration:none}
.sLogo span{color:var(--amber)}
.sGroup{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--muted);padding:16px 12px 6px;opacity:.75}
.sItem{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:var(--muted);font-size:14.5px;font-weight:500;transition:background .15s,color .15s}
.sItem:hover{background:rgba(255,255,255,.045);color:var(--text);text-decoration:none}
.sItem.on{background:rgba(245,185,66,.12);color:var(--amber);box-shadow:inset 3px 0 0 var(--amber)}
.sStats{margin-top:auto;display:flex;gap:8px;padding:14px 2px 2px}
.sStat{flex:1;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 10px;display:flex;align-items:baseline;gap:5px;white-space:nowrap}
.sStat b{font-family:var(--disp);font-size:17px}
.sStat small{color:var(--muted);font-size:11px}
.sLogin{width:100%;background:var(--panel);border:1px dashed var(--amber-dim);color:var(--amber);border-radius:10px;padding:10px;font-size:13px;cursor:pointer}
@media (min-width:901px){body.hasSide nav .logo{display:none}}
body:has(.viewer.show .pl) .side{display:none}
body.hasSide:has(.viewer.show .pl){padding-left:0}
body:has(.viewer.show .pl) nav .logo{display:inline}
@media (max-width:900px){
  body.hasSide{padding-left:0;padding-bottom:66px}
  .side{top:auto;height:62px;width:100%;flex-direction:row;padding:4px 4px;justify-content:space-around;border-right:none;border-top:1px solid var(--line);overflow:visible;background:#0C1524}
  .sLogo,.sGroup,.sStats{display:none}
  .sItem{flex-direction:column;gap:2px;padding:6px 2px;font-size:10.5px;flex:1;justify-content:center;text-align:center}
  .sItem span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .sItem.on{box-shadow:inset 0 2px 0 var(--amber)}
  body.hasSide:has(.viewer.show .pl){padding-bottom:0}
}

/* ================= shared widgets ================= */
.wTiles{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.wTile{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:1px;position:relative;overflow:hidden}
.wTile::after{content:'';position:absolute;right:-18px;top:-18px;width:64px;height:64px;border-radius:50%;background:currentColor;opacity:.06}
.wTile .wIc{font-size:16px}
.wTile b{font-family:var(--disp);font-size:25px;line-height:1.15}
.wTile span:last-child{font-size:12px;color:var(--muted)}
.wTile.fire{color:#FF8A4C}.wTile.xp{color:var(--amber)}.wTile.les{color:var(--jade)}.wTile.ex{color:#9FB4FF}
.wTile span:last-child,.wTile .wIc{color:var(--muted)}
@media (max-width:720px){.wTiles{grid-template-columns:repeat(2,1fr)}}
.wWeek{display:flex;gap:8px;flex-wrap:wrap}
.wDay{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.wDay i{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:16px;background:var(--panel2)}
.wDay.on i{background:radial-gradient(circle,rgba(255,138,76,.38),rgba(245,185,66,.10));border-color:#FF8A4C}
.wDay.today span{color:var(--amber);font-weight:600}
.wDay.today i{box-shadow:0 0 0 2px var(--amber-dim)}
.wDay.future i{opacity:.35}
.wBadgeHead{font-size:13px;color:var(--muted);margin-bottom:10px}
.wBadgeHead b{color:var(--amber);font-family:var(--disp);font-size:18px}
.wBadges{display:grid;grid-template-columns:repeat(auto-fill,minmax(122px,1fr));gap:10px}
.wBadge{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center;display:flex;flex-direction:column;gap:3px;align-items:center;filter:grayscale(1);opacity:.42}
.wBadge.on{filter:none;opacity:1;border-color:var(--amber-dim);background:linear-gradient(160deg,rgba(245,185,66,.12),var(--panel2))}
.wBadge .bIc{font-size:26px;line-height:1.2}
.wBadge b{font-size:13px}
.wBadge small{font-size:11px;color:var(--muted);line-height:1.35}
.wHeat{display:flex;gap:3px;overflow-x:auto;padding-bottom:4px}
.hCol{display:flex;flex-direction:column;gap:3px}
.wHeat i,.hLegend i{width:13px;height:13px;border-radius:3px;display:inline-block;background:var(--panel2);border:1px solid rgba(255,255,255,.04);flex:none}
.wHeat i.h1,.hLegend i.h1{background:rgba(127,209,192,.32)}
.wHeat i.h2,.hLegend i.h2{background:rgba(127,209,192,.6)}
.wHeat i.h3,.hLegend i.h3{background:var(--jade)}
.wHeat i.hx{visibility:hidden}
.wHeatFoot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:12px;color:var(--muted);margin-top:8px}
.hLegend{display:flex;align-items:center;gap:3px}
.ring{--p:0;width:58px;height:58px;border-radius:50%;background:conic-gradient(var(--jade) calc(var(--p) * 1%),rgba(255,255,255,.06) 0);display:grid;place-items:center;flex:none}
.ring::before{content:'';grid-area:1/1;width:46px;height:46px;border-radius:50%;background:var(--panel)}
.ring b{grid-area:1/1;font-family:var(--mono);font-size:12px;z-index:1}

/* ================= dashboard ================= */
.dHero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:22px;align-items:center;background:radial-gradient(120% 160% at 0% 0%,rgba(245,185,66,.16),transparent 55%),radial-gradient(120% 160% at 100% 100%,rgba(127,209,192,.11),transparent 50%),var(--panel);border:1px solid var(--line);border-radius:20px;padding:26px 28px;margin-bottom:20px}
.dHero .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber)}
.dHero h2{font-family:var(--disp);font-size:30px;line-height:1.2;margin:4px 0 6px}
.dHero p{color:var(--muted);font-size:14.5px;margin-bottom:14px}
.dGrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.dPanel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin-bottom:20px}
.dPanel>h3{font-family:var(--disp);font-size:18px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.dPanel>h3 a{font-family:var(--body);font-size:13px;font-weight:400;color:var(--muted)}
.dResume{display:flex;gap:20px;align-items:center;flex-wrap:wrap;background:linear-gradient(120deg,rgba(245,185,66,.14),rgba(127,209,192,.06) 70%),var(--panel);border:1px solid var(--amber-dim);border-radius:18px;padding:20px 22px;margin-bottom:20px}
.dResume .ring{width:76px;height:76px}.dResume .ring::before{width:62px;height:62px}.dResume .ring b{font-size:14px}
.dResumeTxt{flex:1;min-width:220px}
.dResumeTxt .eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.dResumeTxt h3{font-family:var(--disp);font-size:23px;margin:2px 0}
.dResumeTxt p{color:var(--muted);font-size:14px}
.dResume .btn{padding:12px 24px;font-size:15.5px}
.dCourses{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.dCourse{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,transform .15s}
.dCourse:hover{border-color:#33456a;transform:translateY(-2px)}
.dCourseTop{display:flex;gap:12px;align-items:center}
.dCourseTop h4{font-family:var(--disp);font-size:17px;line-height:1.25}
.dCourseTop small{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:2px}
.dCourse .lnActions{margin-top:0}
.dEmpty{color:var(--muted);font-size:14px}
@media (max-width:1100px){.dGrid{grid-template-columns:1fr}}
@media (max-width:820px){.dHero{grid-template-columns:1fr;padding:20px}}
.dMiniBoard .lbList{margin:0}
.dMiniBoard .lbList li{padding:6px 8px;font-size:14px}

/* ================= app pages: dashboard / activity / leaderboard / profile ================= */
.appSec{padding:28px 0 46px}
.wrap.wide{max-width:1240px}
body.hasSide footer .wrap{max-width:1240px}
.acTabs{display:flex;gap:6px;margin:4px 0 14px}
.acCourse{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:14px}
.acHead{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.acInfo{flex:1;min-width:200px}
.acInfo h3{font-family:var(--disp);font-size:19px}
.acInfo small{font-family:var(--mono);font-size:12px;color:var(--muted)}
.acHead .lnActions{margin-top:0}
.acToggle{background:none;border:none;color:var(--muted);font-size:13px;cursor:pointer;margin-top:10px;padding:4px 0}
.acToggle:hover{color:var(--amber)}
.acRows{display:flex;flex-direction:column;margin-top:6px;border-top:1px solid var(--line)}
.acRow{display:grid;grid-template-columns:30px minmax(0,1fr) 110px 120px 18px;gap:12px;align-items:center;padding:9px 6px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text);font-size:14px}
.acRow:hover{background:rgba(255,255,255,.03);text-decoration:none}
.acRow .n{font-family:var(--mono);font-size:12px;color:var(--muted)}
.acRow .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acEx{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-align:right}
.acBar{height:6px;background:var(--panel2);border-radius:20px;overflow:hidden}
.acBar span{display:block;height:100%;background:var(--jade)}
.acRow .ck{color:var(--jade)}
.acRow.done .t{color:var(--muted)}
@media (max-width:640px){.acRow{grid-template-columns:26px minmax(0,1fr) 70px 18px}.acEx{display:none}}
.lbPodium{display:flex;justify-content:center;align-items:flex-end;gap:14px;margin:6px 0 18px}
.lbStep{display:flex;flex-direction:column;align-items:center;gap:2px;width:30%;max-width:170px;text-align:center}
.lbStep b{font-size:15px}
.lbStep small{font-family:var(--mono);font-size:12px;color:var(--muted)}
.lbMedal{font-size:30px}
.lbBlock{width:100%;margin-top:6px;border-radius:10px 10px 0 0;display:grid;place-items:center;font-family:var(--disp);font-size:24px;color:#1a1406}
.lbStep.p1 .lbBlock{height:110px;background:linear-gradient(180deg,#F5B942,#c98f22)}
.lbStep.p2 .lbBlock{height:80px;background:linear-gradient(180deg,#cfd6e3,#97a1b3)}
.lbStep.p3 .lbBlock{height:62px;background:linear-gradient(180deg,#d89a6a,#a8693d)}
.lbStep.me b{color:var(--amber)}
.lbMine{grid-template-columns:repeat(2,1fr)}
.pfLearn{margin-top:20px}
.wWeek{flex-wrap:nowrap}
@media (max-width:520px){.wWeek{gap:4px}.wDay i{width:31px;height:31px;font-size:14px}.dHero h2{font-size:25px}}

/* =====================================================================
   THEME v2 — one design layer over every page (marketing + app)
   ===================================================================== */
:root{
  --ink:#070D19; --panel:#0F1828; --panel2:#0B1322; --line:#1E2A42; --line2:rgba(255,255,255,.07);
  --glass:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 10px 30px -12px rgba(0,0,0,.6);
  --glow:0 0 0 1px rgba(245,185,66,.35),0 8px 28px -6px rgba(245,185,66,.45);
  --r:16px; --blue:#8FA8FF;
}
body{background:
  radial-gradient(900px 600px at 8% -10%,rgba(245,185,66,.10),transparent 60%),
  radial-gradient(800px 600px at 105% 10%,rgba(127,209,192,.08),transparent 60%),
  radial-gradient(700px 500px at 50% 110%,rgba(143,168,255,.07),transparent 60%),
  var(--ink);background-attachment:fixed;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 70%)}
::selection{background:rgba(245,185,66,.35)}
*{scrollbar-width:thin;scrollbar-color:#2A3856 transparent}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:#24314d;border-radius:10px;border:2px solid transparent;background-clip:padding-box}

/* buttons */
.btn{background:linear-gradient(180deg,#FFCB5E,#F0A929);color:#1a1205;border-radius:12px;padding:11px 22px;font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 6px 18px -6px rgba(245,185,66,.6);transition:transform .15s,box-shadow .15s,filter .15s}
.btn:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 10px 26px -6px rgba(245,185,66,.7);filter:none}
.btn:active{transform:translateY(0)}
.btn.ghost{background:rgba(255,255,255,.035);border:1px solid var(--line2);color:var(--text);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.btn.disabled{background:#1a2438;box-shadow:none}

/* top bar */
nav{background:rgba(7,13,25,.72);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line2)}
nav .wrap{padding:10px 18px}
nav .links{gap:4px}
nav .links>a{padding:7px 12px;border-radius:10px;color:var(--muted);transition:background .15s,color .15s}
nav .links>a:hover{background:rgba(255,255,255,.05);color:var(--text);text-decoration:none}
nav .links>a.here{background:rgba(245,185,66,.12);color:var(--amber)}
.langBtn{border-radius:10px;padding:6px 11px;border-color:var(--line2);background:rgba(255,255,255,.03)}
.navSearch{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.04);border:1px solid var(--line2);color:var(--muted);border-radius:10px;padding:6px 10px;font-size:13px;margin:0 4px}
.navSearch:hover{color:var(--text);border-color:rgba(255,255,255,.16)}
kbd{font-family:var(--mono);font-size:10.5px;background:rgba(255,255,255,.06);border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--muted)}
@media (max-width:760px){.navSearch span,.navSearch kbd{display:none}}

/* surfaces */
.course,.coCard,.plan,.vscard,.module,.faqItem,.dPanel,.lnCard,.dCourse,.wTile,.acCourse,.lessons,.viewer,.modalCard,.lnBoard,.prCard,.pfCardBig,.cert,.dResume,.dHero,.qsCard{
  background:var(--glass),var(--panel);border:1px solid var(--line2);box-shadow:var(--shadow);border-radius:var(--r)}
.dResume{background:radial-gradient(120% 140% at 0% 0%,rgba(245,185,66,.16),transparent 55%),var(--glass),var(--panel);border-color:rgba(245,185,66,.28)}
.dHero{background:radial-gradient(90% 140% at 0% 0%,rgba(245,185,66,.17),transparent 55%),radial-gradient(90% 140% at 100% 100%,rgba(127,209,192,.12),transparent 55%),var(--glass),var(--panel);border-radius:22px}
.course,.dCourse,.lnCard,.plan,.module,.vscard{transition:transform .2s,border-color .2s,box-shadow .2s}
.course:hover,.dCourse:hover,.lnCard:hover,.plan:hover,.module:hover{transform:translateY(-3px);border-color:rgba(245,185,66,.28);box-shadow:var(--shadow),0 18px 40px -20px rgba(245,185,66,.35)}
.course{position:relative;overflow:hidden;padding:22px}
.course::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--amber),var(--jade))}
.courses>.course:nth-child(3n+2)::before{background:linear-gradient(90deg,var(--jade),var(--blue))}
.courses>.course:nth-child(3n)::before{background:linear-gradient(90deg,var(--blue),var(--ember))}
.plan.hot{background:radial-gradient(120% 90% at 50% 0%,rgba(245,185,66,.16),transparent 60%),var(--glass),var(--panel);border-color:rgba(245,185,66,.35)}

/* headings */
section{padding:56px 0}
.shead .eyebrow,.dHero .eyebrow,.dResumeTxt .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;padding:4px 10px;border-radius:999px;background:rgba(245,185,66,.1);border:1px solid rgba(245,185,66,.22)}
.shead h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.01em}
.dPanel>h3,.acInfo h3,.dCourseTop h4{letter-spacing:-.005em}

/* homepage hero */
.hero{padding:72px 0 64px;border-bottom:1px solid var(--line2);background:none;position:relative;overflow:hidden}
.heroGrid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center}
.hero h1{font-size:clamp(34px,5.2vw,58px);letter-spacing:-.02em;line-height:1.06}
.hero h1 em{background:linear-gradient(90deg,#FFD27A,#F5B942 40%,#7FD1C0);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:17px}
.hero .proof span{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid var(--line2)}
.heroArt{position:relative;perspective:1200px}
.mock{background:var(--glass),#0C1424;border:1px solid var(--line2);border-radius:18px;box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.03);transform:rotateY(-8deg) rotateX(4deg);overflow:hidden;animation:floaty 7s ease-in-out infinite}
.mockBar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line2);font-family:var(--mono);font-size:11px;color:var(--muted)}
.mockBar i{width:9px;height:9px;border-radius:50%;background:#2a3550}.mockBar i:nth-child(1){background:#E2604C}.mockBar i:nth-child(2){background:#F5B942}.mockBar i:nth-child(3){background:#7FD1C0}
.mockBar b{margin-left:auto;color:var(--amber);font-weight:500}
.mockBody{display:grid;grid-template-columns:.9fr 1.1fr;gap:12px;padding:14px}
.mockLeft{background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:12px;padding:12px;font-size:12.5px;color:var(--muted)}
.mockLeft b{display:block;color:var(--text);font-size:13.5px;margin:4px 0 6px}
.mockLeft .tag{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--amber)}
.mockCode{background:#060B15;border:1px solid var(--line2);border-radius:12px;padding:12px;font-family:var(--mono);font-size:12px;line-height:1.7;color:#cfd6e6}
.mockCode .k{color:#c792ea}.mockCode .s{color:#c3e88d}.mockCode .n{color:#f78c6c}.mockCode .c{color:#5f6d8c}
.mockOut{margin-top:10px;border-top:1px dashed var(--line2);padding-top:8px;color:var(--jade)}
.mockPass{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-family:var(--mono);font-size:11.5px;color:#06231d;background:var(--jade);border-radius:999px;padding:3px 10px}
.mockChip{position:absolute;display:flex;align-items:center;gap:8px;background:rgba(15,24,40,.92);backdrop-filter:blur(8px);border:1px solid var(--line2);border-radius:14px;padding:9px 13px;font-size:13px;box-shadow:0 12px 30px -10px rgba(0,0,0,.7);animation:floaty 6s ease-in-out infinite}
.mockChip b{font-family:var(--disp);font-size:16px}
.mockChip.c1{left:-22px;bottom:-18px;animation-delay:-2s}
.mockChip.c2{right:-14px;top:-18px;animation-delay:-4s}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -8px}}
@media (max-width:900px){.heroGrid{grid-template-columns:1fr}.heroArt{display:none}}

/* entrance motion */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.course,.dPanel,.dCourse,.wTile,.acCourse,.plan,.module,.dHero,.dResume,.lnCard{animation:fadeUp .45s ease both}
.courses>*:nth-child(2),.dCourses>*:nth-child(2),.wTiles>*:nth-child(2){animation-delay:.06s}
.courses>*:nth-child(3),.dCourses>*:nth-child(3),.wTiles>*:nth-child(3){animation-delay:.12s}
.courses>*:nth-child(4),.wTiles>*:nth-child(4){animation-delay:.18s}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}}

/* course page */
.courseTop{background:radial-gradient(110% 160% at 0% 0%,rgba(245,185,66,.14),transparent 55%),var(--glass),var(--panel);border:1px solid var(--line2);border-radius:20px;padding:18px 20px;flex-wrap:wrap;box-shadow:var(--shadow)}
.courseTop h3{font-size:24px}
.lessons{overflow:hidden}
.lrow{padding:14px 18px;transition:background .15s}
.lrow:hover{background:rgba(255,255,255,.035)}
.lrow .n{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.04);border:1px solid var(--line2);font-size:12px}
.lrow .t{font-weight:500}
.viewer:has(> .pl){background:var(--glass),var(--panel)}
.plTop{padding-bottom:6px}
.plLeft{background:var(--glass),var(--panel2);border-color:var(--line2);border-radius:16px}
.plBar{height:7px;border:none;background:rgba(255,255,255,.06)}
.plBar span{background:linear-gradient(90deg,var(--jade),#B8F0E3)}

/* sidebar: level chip + goal ring */
.side{background:linear-gradient(180deg,rgba(15,24,40,.96),rgba(7,13,25,.98));backdrop-filter:blur(10px)}
.sStats{flex-direction:column}
.sRow{display:flex;gap:8px}
.sLevel{display:flex;align-items:center;gap:10px;background:var(--glass),var(--panel);border:1px solid var(--line2);border-radius:12px;padding:9px 10px;color:var(--text)}
.sLevel:hover{text-decoration:none;border-color:rgba(245,185,66,.3)}
.sLevel b{display:block;font-size:13px}.sLevel small{color:var(--muted);font-size:11px}
.sLv{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-family:var(--disp);font-weight:700;font-size:16px;color:#1a1205;background:linear-gradient(135deg,#FFD27A,#E9A21F)}
.sGoal{align-items:center}
.sRing{width:16px;height:16px;border-radius:50%;flex:none;background:conic-gradient(var(--jade) calc(var(--p)*1%),rgba(255,255,255,.1) 0);-webkit-mask:radial-gradient(circle,transparent 4px,#000 4.5px);mask:radial-gradient(circle,transparent 4px,#000 4.5px)}

/* level widget */
.wLevel{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.lvBadge{width:62px;height:62px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;color:#1a1205;
  background:linear-gradient(135deg,#FFD98A,#EBA52A);box-shadow:0 10px 28px -10px rgba(245,185,66,.75),0 1px 0 rgba(255,255,255,.5) inset}
.lvBadge small{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.lvBadge b{font-family:var(--disp);font-size:26px;line-height:1}
.wLevel.tier2 .lvBadge,.sLevel.tier2 .sLv{background:linear-gradient(135deg,#B8F0E3,#5CBFAA)}
.wLevel.tier3 .lvBadge,.sLevel.tier3 .sLv{background:linear-gradient(135deg,#C9D4FF,#7C93F0)}
.wLevel.tier4 .lvBadge,.sLevel.tier4 .sLv{background:linear-gradient(135deg,#FFB3A6,#E2604C)}
.wLevel.tier5 .lvBadge,.sLevel.tier5 .sLv{background:linear-gradient(135deg,#F2F2F2,#9AA3B5)}
.lvTxt{flex:1;min-width:0}
.lvTxt b{font-family:var(--disp);font-size:18px}
.lvBar{height:8px;background:rgba(255,255,255,.07);border-radius:20px;overflow:hidden;margin:6px 0 4px}
.lvBar span{display:block;height:100%;background:linear-gradient(90deg,#FFD27A,var(--amber))}
.lvTxt small{font-size:12px;color:var(--muted)}

/* daily goal widget */
.dHeroSide{display:flex;flex-direction:column;gap:6px}
.wGoal{display:flex;align-items:center;gap:16px;background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:16px;padding:12px 14px}
.gRing{--p:0;width:84px;height:84px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--jade) calc(var(--p)*1%),rgba(255,255,255,.07) 0);position:relative}
.gRing::before{content:'';position:absolute;inset:8px;border-radius:50%;background:var(--panel)}
.gRing div{position:relative;text-align:center;line-height:1.1}
.gRing b{display:block;font-family:var(--disp);font-size:22px}
.gRing small{font-size:11px;color:var(--muted)}
.wGoal.met .gRing{background:conic-gradient(var(--amber) 100%,transparent 0);box-shadow:0 0 30px -6px rgba(245,185,66,.6)}
.gTxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.gTxt b{font-size:15px}.gTxt>span{font-size:12.5px;color:var(--muted)}
.gPick summary{cursor:pointer;font-size:12.5px;color:var(--amber);list-style:none;margin-top:4px}
.gPick summary::-webkit-details-marker{display:none}
.gOpts{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:8px}
.gOpt{background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:10px;color:var(--text);padding:6px 8px;display:flex;flex-direction:column;align-items:flex-start;font-size:11.5px}
.gOpt b{font-family:var(--mono);font-size:13px}.gOpt span{color:var(--muted)}
.gOpt.on{border-color:var(--jade);background:rgba(127,209,192,.1)}
@media (min-width:821px){.dHero{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.dHero + .wTiles{margin:-6px 0 20px}

/* toasts + confetti */
#toastStack{position:fixed;right:18px;bottom:18px;z-index:70;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
.dToast{display:flex;align-items:center;gap:12px;min-width:220px;max-width:340px;background:rgba(15,24,40,.95);backdrop-filter:blur(10px);border:1px solid var(--line2);border-radius:14px;padding:11px 14px;box-shadow:0 18px 40px -16px rgba(0,0,0,.8);animation:toastIn .35s cubic-bezier(.2,.9,.3,1.3) both}
.dToast.out{animation:toastOut .4s ease both}
.dToast .tIc{font-size:22px}
.dToast b{display:block;font-size:14px}.dToast small{color:var(--muted);font-size:12.5px}
.dToast.gold{border-color:rgba(245,185,66,.45);box-shadow:0 18px 40px -16px rgba(0,0,0,.8),0 0 24px -8px rgba(245,185,66,.6)}
.dToast.jade{border-color:rgba(127,209,192,.45)}
.dToast.xp b{color:var(--amber);font-family:var(--disp);font-size:17px}
@keyframes toastIn{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(30px)}}
@media (max-width:900px){#toastStack{bottom:78px;right:10px}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:80}

/* quick search */
.qsOverlay{align-items:flex-start;padding-top:12vh;backdrop-filter:blur(4px)}
.qsCard{width:100%;max-width:620px;overflow:hidden;padding:0}
.qsInput{width:100%;background:transparent;border:none;border-bottom:1px solid var(--line2);color:var(--text);font-size:17px;padding:18px 20px;outline:none;font-family:var(--body)}
.qsList{max-height:52vh;overflow:auto;padding:8px}
.qsItem{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;color:var(--text)}
.qsItem:hover,.qsItem.on{background:rgba(245,185,66,.1);text-decoration:none}
.qsItem.on{box-shadow:inset 3px 0 0 var(--amber)}
.qsIc{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.05);color:var(--muted);flex:none}
.qsTxt b{display:block;font-weight:500;font-size:14.5px}.qsTxt small{color:var(--muted);font-size:12px}
.qsEmpty{padding:24px;text-align:center;color:var(--muted)}
.qsFoot{border-top:1px solid var(--line2);padding:9px 14px;font-size:12px;color:var(--muted)}

/* footer */
footer{background:linear-gradient(180deg,transparent,rgba(0,0,0,.25));border-top:1px solid var(--line2)}
.mockChip.c2{right:-10px;top:-46px}
.plan{position:relative;overflow:hidden;display:flex;flex-direction:column}
.plan::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--amber),var(--jade))}
.plan ul{flex:1}
.plan li{display:flex;gap:10px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.05)}
.plan li:last-child{border-bottom:none}
.plan li::before{content:"\2713";color:var(--jade);font-weight:700}
@media (max-width:900px){.heroGrid{grid-template-columns:minmax(0,1fr)}.hero .cta{flex-wrap:wrap}}

/* sidebar everywhere + collapsible rail */
.sHead{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-bottom:4px}
.sHead .sLogo{padding:4px 12px 8px}
.sToggle{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:9px;background:transparent;border:1px solid transparent;color:var(--muted);cursor:pointer}
.sToggle:hover{background:rgba(255,255,255,.05);border-color:var(--line2);color:var(--text)}
.side{transition:width .2s}
body.hasSide{transition:padding-left .2s}
@media (min-width:901px){
  body.hasSide.sideMini{padding-left:68px}
  .sideMini .side{width:68px;padding:14px 10px;align-items:center}
  .sideMini .sHead{flex-direction:column}
  .sideMini .sLogo,.sideMini .sGroup,.sideMini .sItem span,.sideMini .sRow,.sideMini .sLevel>span:last-child,.sideMini .sLogin{display:none}
  .sideMini .sGroup + .sItem{margin-top:10px}
  .sideMini .sItem{justify-content:center;padding:11px;width:46px}
  .sideMini .sItem.on{box-shadow:inset 0 0 0 1px rgba(245,185,66,.35)}
  .sideMini .sStats{padding:10px 0 2px;align-items:center}
  .sideMini .sLevel{padding:5px;background:none;border:none}
  body.hasSide.sideMini nav .logo{display:inline}
}
@media (max-width:900px){.sHead,.sToggle{display:none}}
@media (min-width:901px) and (max-width:1180px){
  body.hasSide:not(.sideMini) .heroGrid{grid-template-columns:minmax(0,1fr)}
  body.hasSide:not(.sideMini) .heroArt{display:none}
}
@media print{.side{display:none !important}body.hasSide{padding:0 !important}}

/* sidebar explore group: desktop only (the top nav already has these on mobile) */
#sideAdmin{display:contents}#sideAdmin[hidden]{display:none}
@media (max-width:900px){.side .sExtra{display:none}}

/* ================= profile v2: hero + tabbed settings ================= */
.pfHero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;padding:26px 28px;border-radius:22px;margin-bottom:18px;
  background:radial-gradient(120% 160% at 0% 0%,rgba(245,185,66,.16),transparent 55%),radial-gradient(90% 140% at 100% 100%,rgba(127,209,192,.12),transparent 55%),var(--glass),var(--panel);
  border:1px solid var(--line2);box-shadow:var(--shadow)}
.pfAvaWrap{position:relative}
.pfAvatar.big{width:96px;height:96px;font-size:34px;box-shadow:0 0 0 4px rgba(245,185,66,.22)}
.pfCam{position:absolute;right:-2px;bottom:-2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--amber);color:#1a1205;cursor:pointer;border:3px solid var(--panel);transition:transform .15s}
.pfCam:hover{transform:scale(1.08)}
.pfCam:focus-within{outline:2px solid var(--amber);outline-offset:2px}
.pfHeroInfo h2{font-family:var(--disp);font-size:28px;line-height:1.15;margin:0 0 8px}
.pfChips{display:flex;flex-wrap:wrap;gap:6px}
.pfChip{font-size:12.5px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--muted)}
.pfChip.on{color:var(--jade);border-color:rgba(127,209,192,.4);background:rgba(127,209,192,.08)}
.pfStats{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pfStat{background:rgba(255,255,255,.03);border:1px solid var(--line2);border-radius:14px;padding:10px 14px}
.pfStat b{display:block;font-family:var(--disp);font-size:22px}
.pfStat small{color:var(--muted);font-size:12px}
.pfLayout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;align-items:start}
.pfTabs{display:flex;flex-direction:column;gap:4px;position:sticky;top:76px;background:var(--glass),var(--panel);border:1px solid var(--line2);border-radius:16px;padding:8px}
.pfTab{padding:10px 12px;border-radius:10px;color:var(--muted);font-weight:500;font-size:14.5px}
.pfTab:hover{background:rgba(255,255,255,.05);color:var(--text);text-decoration:none}
.pfTab.on{background:rgba(245,185,66,.12);color:var(--amber);box-shadow:inset 3px 0 0 var(--amber)}
.pfPane{display:flex;flex-direction:column;gap:16px;min-width:0}
.pfPane .dPanel{margin:0}
.pfPaneHead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.pfPaneHead h3{margin:0}
.pfTwo{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px}
.pfCourseInfo{flex:1;min-width:0}
.pfBar{height:7px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin:7px 0 5px}
.pfBar span{display:block;height:100%;background:linear-gradient(90deg,var(--jade),#B8F0E3)}
.pfCourseInfo small{color:var(--muted);font-size:12.5px}
.pfFormGrid{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px}
.pfFormGrid > div{display:flex;flex-direction:column;gap:6px}
.pfForm.narrow{max-width:420px}
.pfNote{margin-top:12px}
.pfSeg{display:inline-flex;border:1px solid var(--line2);border-radius:12px;padding:3px;gap:3px}
.pfSegBtn{background:transparent;border:none;color:var(--muted);padding:8px 14px;border-radius:9px;cursor:pointer;font:inherit}
.pfSegBtn.on{background:rgba(245,185,66,.14);color:var(--amber)}
.pfToggle{display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:500}
.pfToggle input{width:42px;height:24px;appearance:none;-webkit-appearance:none;background:rgba(255,255,255,.14);border-radius:99px;position:relative;cursor:pointer;transition:background .2s;flex:none;margin:0}
.pfToggle input::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s}
.pfToggle input:checked{background:var(--jade)}
.pfToggle input:checked::after{transform:translateX(18px)}
.pfToggle input:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.pfList{margin:0;padding-left:18px;color:var(--muted);line-height:1.9}
.pfDanger{border-color:rgba(226,96,76,.35) !important}
.pfDanger h3{color:var(--ember)}
@media (max-width:820px){
  .pfHero{grid-template-columns:auto minmax(0,1fr);padding:20px}
  .pfHero > .btn{grid-column:1/-1;justify-self:start}
  .pfStats{grid-template-columns:repeat(2,1fr)}
  .pfLayout{grid-template-columns:minmax(0,1fr)}
  .pfTabs{flex-direction:row;overflow-x:auto;position:static}
  .pfTab{white-space:nowrap}
  .pfTab.on{box-shadow:inset 0 -2px 0 var(--amber)}
  .pfTwo,.pfFormGrid{grid-template-columns:minmax(0,1fr)}
}
.pfPane .fact{font-family:inherit;border:none;padding:0;margin:6px 0 12px;color:var(--muted);font-size:14px;line-height:1.6}

/* ================= friendly error card ================= */
.errCard{margin-top:10px;border:1px solid rgba(226,96,76,.45);border-left:4px solid var(--ember);border-radius:12px;background:rgba(226,96,76,.07);padding:12px 14px;font-size:14px;line-height:1.55}
.errHead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.errType{font-family:var(--mono);font-weight:600;color:var(--ember)}
.errWhere{font-family:var(--mono);font-size:12px;padding:2px 8px;border-radius:999px;background:rgba(226,96,76,.15);color:#ffb3a6}
.errSrc{margin:6px 0;padding:8px 10px;border-radius:8px;background:#060B15;border:1px solid var(--line2);font-family:var(--mono);font-size:13px;white-space:pre-wrap;color:#ffd9d2}
.errSrc span{display:inline-block;min-width:2ch;margin-right:12px;color:var(--muted);user-select:none}
.errMsg{font-family:var(--mono);font-size:13px;color:var(--text)}
.errMean{margin-top:6px;color:var(--amber)}
.errMean code{font-family:var(--mono);background:rgba(245,185,66,.12);padding:1px 6px;border-radius:5px}
.errHelp{margin-top:8px;color:var(--text)}
.errRaw{margin-top:8px}
.errRaw summary{cursor:pointer;color:var(--muted);font-size:12.5px}
.errRaw pre{margin:6px 0 0;max-height:220px;overflow:auto;font-size:12px;color:var(--muted);white-space:pre-wrap}
.CodeMirror .cmErrLine{background:rgba(226,96,76,.18)}

/* ================= step-through viewer ================= */
.viz{border:1px solid var(--line2);border-radius:14px;background:var(--glass),var(--panel2);padding:12px;outline:none}
.viz:focus-visible{box-shadow:0 0 0 2px var(--amber)}
.vizLoad{color:var(--muted);font-size:14px}
.vizBar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vizBtn{background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--text);border-radius:9px;padding:6px 10px;font:inherit;font-size:13px;cursor:pointer}
.vizBtn:hover{border-color:rgba(245,185,66,.4)}
.vizPlay{color:var(--amber)}
.vizRange{flex:1;min-width:120px;accent-color:var(--amber)}
.vizCount{font-family:var(--mono);font-size:12px;color:var(--muted);margin-left:auto}
.vizNote{margin:10px 0;padding:8px 12px;border-radius:10px;background:rgba(127,209,192,.08);border:1px solid rgba(127,209,192,.25);font-size:14px;min-height:20px}
.vizNote.bad{background:rgba(226,96,76,.08);border-color:rgba(226,96,76,.35)}
.vizBody{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px}
.vizCode{list-style:none;margin:0;padding:6px 0;background:#060B15;border:1px solid var(--line2);border-radius:10px;font-family:var(--mono);font-size:13px;max-height:340px;overflow:auto}
.vizCode li{display:flex;gap:10px;padding:1px 10px;border-left:3px solid transparent;white-space:pre}
.vizCode code{font-family:inherit;color:#cfd6e6}
.vizLn{color:#4d5a78;min-width:2ch;text-align:right;user-select:none}
.vizCode li.done{background:rgba(127,209,192,.08);border-left-color:rgba(127,209,192,.6)}
.vizCode li.next{background:rgba(245,185,66,.16);border-left-color:var(--amber)}
.vizCode li.next::after{content:'\2190';margin-left:auto;color:var(--amber)}
.vizCode li.err{background:rgba(226,96,76,.18);border-left-color:var(--ember)}
.vizSide{display:flex;flex-direction:column;gap:10px;min-width:0}
.vizSide h5{margin:0 0 6px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.vizTbl{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px;margin-bottom:8px}
.vizTbl td{padding:4px 8px;border-bottom:1px solid var(--line2);vertical-align:top;word-break:break-word}
.vizTbl td:first-child{color:var(--jade);white-space:nowrap}
.vizTbl td:last-child{color:var(--muted);font-size:11px;white-space:nowrap}
.vizTbl tr.new td,.vizTbl tr.chg td{background:rgba(245,185,66,.12);transition:background .4s}
.vizNone{color:var(--muted);font-size:13px;margin:0 0 8px}
.vizOut{margin:0;min-height:40px;max-height:160px;overflow:auto;padding:8px 10px;border-radius:8px;background:#060B15;border:1px solid var(--line2);font-family:var(--mono);font-size:12.5px;white-space:pre-wrap;color:var(--jade)}
@media (max-width:720px){.vizBody{grid-template-columns:minmax(0,1fr)}.vizCount{margin-left:0}}

/* ================= quick checks (ungraded, inside reading steps) ================= */
.qc{margin:18px 0;border:1px solid rgba(245,185,66,.3);border-left:4px solid var(--amber);border-radius:14px;background:rgba(245,185,66,.05);padding:14px 16px}
.qc > p{margin:6px 0 10px}
.qcHead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.qcTag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber);font-weight:600}
.qcSub{color:var(--muted);font-size:13px}
.qcCode{margin:8px 0;padding:10px 12px;border-radius:10px;background:#060B15;border:1px solid var(--line2);font-family:var(--mono);font-size:13.5px;line-height:1.7;white-space:pre;overflow-x:auto;color:#cfd6e6}
.qcLbl{display:block;margin-top:8px;font-size:13.5px;color:var(--muted)}
.qcIn{display:block;width:100%;margin-top:6px;padding:8px 10px;border-radius:9px;border:1px solid var(--line2);background:#060B15;color:var(--jade);font-family:var(--mono);font-size:13.5px;resize:vertical;box-sizing:border-box}
.qcIn:focus,.qcBlank:focus{outline:none;border-color:var(--amber)}
.qcBtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.qcBlank{font-family:var(--mono);font-size:13px;padding:1px 6px;margin:0 2px;border-radius:6px;border:1px dashed rgba(245,185,66,.6);background:rgba(245,185,66,.08);color:var(--amber);max-width:100%}
.qcBlank.ok{border:1px solid var(--jade);background:rgba(127,209,192,.12);color:var(--jade)}
.qcBlank.bad{border:1px solid var(--ember);background:rgba(226,96,76,.12);color:#ffb3a6}
.qcOrder{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.qcOrder li{display:flex;align-items:center;gap:10px;padding:6px 8px 6px 10px;border-radius:9px;background:#060B15;border:1px solid var(--line2);cursor:grab;transition:border-color .2s,background .2s}
.qcOrder li.drag{opacity:.45}
.qcOrder li code{flex:1;font-family:var(--mono);font-size:13.5px;white-space:pre;overflow-x:auto;color:#cfd6e6}
.qcOrder li.ok{border-color:var(--jade);background:rgba(127,209,192,.08)}
.qcOrder li.bad{border-color:rgba(226,96,76,.6);background:rgba(226,96,76,.07)}
.qcGrip{color:#4d5a78;user-select:none}
.qcMv{display:flex;gap:4px}
.qcMv button{background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--muted);border-radius:7px;width:30px;height:28px;cursor:pointer;font-size:11px}
.qcMv button:hover{color:var(--amber);border-color:rgba(245,185,66,.4)}
.qcLines{list-style:none;margin:8px 0 0;padding:6px 0;background:#060B15;border:1px solid var(--line2);border-radius:10px}
.qcLine{display:flex;gap:10px;width:100%;text-align:left;background:none;border:0;border-left:3px solid transparent;padding:3px 10px;color:#cfd6e6;font-family:var(--mono);font-size:13.5px;cursor:pointer;white-space:pre}
.qcLine:hover:not(:disabled){background:rgba(245,185,66,.1);border-left-color:var(--amber)}
.qcLine:disabled{cursor:default;color:#cfd6e6}
.qcLine .ln{color:#4d5a78;min-width:2ch;text-align:right;user-select:none}
.qcLine code{font-family:inherit}
.qcLine.ok{background:rgba(127,209,192,.14);border-left-color:var(--jade)}
.qcLine.bad{background:rgba(226,96,76,.12);border-left-color:var(--ember);text-decoration:line-through;text-decoration-color:rgba(226,96,76,.6)}
.qcFb{display:none;margin-top:10px;padding:8px 12px;border-radius:10px;font-size:14px;line-height:1.55;background:rgba(255,255,255,.04);border:1px solid var(--line2)}
.qcFb.show{display:block}
.qcFb.ok{background:rgba(127,209,192,.08);border-color:rgba(127,209,192,.35)}
.qcFb.ok > b{color:var(--jade)}
.qcFb.bad{background:rgba(226,96,76,.07);border-color:rgba(226,96,76,.35)}
.qcFb.bad > b{color:var(--ember)}
.qcFb .term{margin-top:8px;background:#05070c;border:1px solid var(--line);border-radius:6px;padding:8px 10px;font-family:var(--mono);font-size:13px;white-space:pre-wrap;color:var(--jade)}
.qcFb .term .lbl{display:block;font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:5px}
.out:has(> .viz){white-space:normal;max-height:none;overflow:visible;padding:0;border:0;background:none;font-family:inherit}
.qcWhy{margin-top:8px;padding-top:8px;border-top:1px solid var(--line2);color:var(--text)}
.qcWhy code{font-family:var(--mono);background:rgba(255,255,255,.06);padding:1px 5px;border-radius:5px}
.qcViz{margin-top:10px}
.viewer .qc ol.qcOrder,.viewer .qc ol.qcLines{margin-left:0}
.viewer .qcOrder li code,.viewer .qcLine code{background:none;padding:0;border-radius:0;font-size:inherit;color:#cfd6e6}
.viewer .vizCode{margin:0}
.viewer .vizCode code{background:none;padding:0;border-radius:0;font-size:inherit;color:#cfd6e6}

/* ================= learning hubs: practice, skill check, paths, projects, cheat sheets ================= */
.hubHero{display:flex;justify-content:space-between;align-items:center;gap:20px;background:radial-gradient(90% 140% at 0% 0%,rgba(245,185,66,.15),transparent 55%),radial-gradient(90% 140% at 100% 100%,rgba(127,209,192,.11),transparent 55%),var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px 28px;margin-bottom:20px}
.hubHero h2{font-family:var(--disp);font-size:clamp(24px,3.4vw,32px);margin:4px 0 8px}
.hubHero p{color:var(--muted);max-width:640px;line-height:1.6}
.hubArt{font-size:64px;line-height:1;flex:none;filter:drop-shadow(0 8px 20px rgba(0,0,0,.35))}
.hubNote{margin:12px 0 16px}
.hubH{font-family:var(--disp);font-size:20px;margin:6px 0 14px}
.hubCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.hubCard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,transform .15s}
.hubCard:hover{border-color:var(--amber-dim);transform:translateY(-2px)}
.hubCard h4{font-family:var(--disp);font-size:19px}
.hubCard p{color:var(--muted);font-size:14px;line-height:1.55;flex:1}
.hubCard small{font-family:var(--mono);font-size:12px;color:var(--muted)}
.hubCard .btn{align-self:flex-start}
.hubCardIc{font-size:34px;line-height:1}
.hubTiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.hubTile{display:flex;flex-direction:column;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:14px;color:var(--text)}
.hubTile:hover{border-color:var(--amber-dim);text-decoration:none}
.hubTile span{color:var(--muted);font-size:13px}
.prCourse{margin-top:12px}
.prCourse h4{font-size:15px;margin-bottom:8px}
.prChips{display:flex;flex-wrap:wrap;gap:8px}
.prChip{position:relative;display:flex;flex-direction:column;min-width:150px;max-width:240px;padding:8px 12px 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel2);color:var(--text);overflow:hidden}
.prChip:hover{border-color:var(--amber-dim);text-decoration:none}
.prChip b{font-family:var(--mono);font-size:12px;color:var(--amber)}
.prChip span{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prChip i{position:absolute;left:0;bottom:0;height:3px;width:calc(var(--p) * 1%);background:var(--jade)}
.lbList li.lbGap{background:none;justify-content:center;color:var(--muted);padding:2px}
.lbMore{margin-top:4px}
/* skill check */
.asQ{max-width:760px;animation:none}
.asTop{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:8px}
.asLv{border:1px solid var(--line);border-radius:999px;padding:1px 10px}
.asLv.lv1{color:var(--jade);border-color:rgba(127,209,192,.4)}.asLv.lv2{color:var(--amber);border-color:var(--amber-dim)}.asLv.lv3{color:var(--ember);border-color:rgba(226,96,76,.45)}
.asQ h3{font-size:18px;margin:16px 0 10px;line-height:1.45}
.asCode{background:#060B15;border:1px solid var(--line2);border-radius:10px;padding:12px 14px;font-family:var(--mono);font-size:13.5px;white-space:pre;overflow-x:auto;margin-bottom:12px}
.asOpts{display:grid;gap:8px}
.asOpt{text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:11px 14px;color:var(--text);font:inherit;cursor:pointer;transition:border-color .15s}
.asOpt:hover:not(:disabled){border-color:var(--amber-dim)}
.asOpt code{font-family:var(--mono);font-size:13.5px;white-space:pre-wrap}
.asOpt.right{border-color:var(--jade);background:rgba(127,209,192,.1)}
.asOpt.wrong{border-color:var(--ember);background:rgba(226,96,76,.1)}
.asOpt:disabled{cursor:default}
.asFb{margin:12px 0;font-weight:600}.asFb.ok{color:var(--jade)}.asFb.bad{color:var(--ember)}
.asResult{max-width:760px}
.asScore{display:flex;gap:18px;align-items:center;margin-bottom:16px}
.asScore h3{font-family:var(--disp);font-size:26px;margin:2px 0 4px}
.asScore p{color:var(--muted);line-height:1.55}
.asScore .ring{width:84px;height:84px;flex:none}
.asResult h4{margin:6px 0 8px}
.asRecs{list-style:none;padding:0;display:grid;gap:6px;margin-bottom:6px}
.asRecs a{display:block;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;color:var(--text)}
.asRecs a:hover{border-color:var(--amber-dim);text-decoration:none}
.asRecs b{font-family:var(--mono);font-size:12.5px;color:var(--amber);margin-right:6px}
/* learning paths */
.paHead{display:flex;gap:16px;align-items:center}
.paHead h3{font-family:var(--disp);font-size:22px;margin-bottom:4px}
.paHead p{color:var(--muted);line-height:1.55}
.paHead > div:nth-child(2){flex:1}
.paIc{font-size:42px;line-height:1}
.paBody{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:22px;margin-top:16px}
.paBody h4{font-size:13px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.paSteps{list-style:none;padding:0;display:grid;gap:10px}
.paStep{display:flex;gap:12px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.paStep.done{border-color:rgba(127,209,192,.4)}
.paNum{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(245,185,66,.12);color:var(--amber);font-family:var(--mono);font-weight:600}
.paStep.done .paNum{background:rgba(127,209,192,.15);color:var(--jade)}
.paInfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.paInfo small{color:var(--muted);font-size:12px}
.paInfo .lnBar{height:5px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;margin:3px 0}
.paAct{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.paDone{color:var(--jade);font-weight:600;font-size:13px}
.paSkills{list-style:none;padding:0;display:grid;gap:6px;margin-bottom:14px}
.paSkills li{position:relative;padding-left:22px;color:var(--text);font-size:14px}
.paSkills li::before{content:"\2713";position:absolute;left:0;color:var(--jade);font-weight:700}
.paPrice{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.paPrice b{font-family:var(--disp);font-size:26px;color:var(--amber)}
.paPrice s{color:var(--muted)}
.paPrice span{font-size:12.5px;color:var(--jade);border:1px solid rgba(127,209,192,.4);border-radius:999px;padding:1px 8px}
.paSide .btn{margin:4px 6px 0 0}
.paOwn,.paComplete{color:var(--jade);font-weight:600}
.paComplete{margin-top:12px;background:rgba(127,209,192,.08);border:1px solid rgba(127,209,192,.35);border-radius:10px;padding:10px 14px}
/* projects */
.pjTag{display:inline-block;font-family:var(--mono);font-size:11.5px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 9px;margin:0 4px 4px 0}
.pjTag.lv1{color:var(--jade);border-color:rgba(127,209,192,.4)}.pjTag.lv2{color:var(--amber);border-color:var(--amber-dim)}
.pjFilter{margin:0 0 14px}
.pjLockTag{color:var(--amber) !important}
.pjBack{display:inline-block;margin-bottom:12px;color:var(--muted);font-size:14px}
.pjHero{align-items:flex-start}
.pjHero h4{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.pjHero p{margin-bottom:8px}
.pjTags{margin-top:2px}
.pjGoal{margin-top:12px;background:rgba(245,185,66,.08);border:1px solid var(--amber-dim);border-radius:10px;padding:10px 14px;line-height:1.55}
.pjSkills{margin-top:10px;font-size:13px;color:var(--muted)}
.pjSkills b{margin-right:6px}
.pjProg{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.pjProg .ring{width:84px;height:84px}
.pjProg small{font-family:var(--mono);font-size:12px;color:var(--muted)}
.pjLocked{border-color:var(--amber-dim);background:linear-gradient(180deg,rgba(245,185,66,.07),var(--panel))}
.pjLocked p{color:var(--muted);line-height:1.6}
.pjOutline{margin:0 0 0 20px;display:grid;gap:6px}
.pjBar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.pjModes{display:flex;gap:8px;flex-wrap:wrap}
.pjMode{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 14px;color:var(--text);font:inherit;cursor:pointer;text-align:left;max-width:280px}
.pjMode small{color:var(--muted);font-size:12px}
.pjMode.on{border-color:var(--amber);background:rgba(245,185,66,.1)}
.pjBarBtns{display:flex;gap:8px;flex-wrap:wrap}
.pjGrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:20px;align-items:start}
.pjTasks .hubH{margin-top:0}
.pjTask{margin-bottom:14px}
.pjTask.done{border-color:rgba(127,209,192,.45)}
.pjTaskHead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.pjTaskHead b{flex:1;font-size:15.5px}
.pjTick{color:var(--jade);font-weight:700}
.pjTask.done .paNum{background:rgba(127,209,192,.15);color:var(--jade)}
.pjTaskText{line-height:1.6;font-size:14.5px}
.pjTaskText code,.pjHint code,.pjNote code,.pjGoal code,.pjHero p code{font-family:var(--mono);font-size:.9em;background:rgba(255,255,255,.06);padding:1px 5px;border-radius:5px}
.pjHint{margin-top:8px;background:rgba(127,209,192,.07);border:1px dashed rgba(127,209,192,.4);border-radius:9px;padding:8px 12px;font-size:13.5px;line-height:1.55}
.pjTask .exrun{margin-top:10px}
.pjTask .CodeMirror{min-height:90px;height:auto}
.pjSide{position:sticky;top:16px;display:flex;flex-direction:column;gap:0;max-height:calc(100vh - 32px);overflow-y:auto}
.pjData h3,.pjWs h3{font-family:var(--disp);font-size:18px;margin-bottom:8px}
.pjWs h3 small{font-family:var(--mono);font-size:12px;color:var(--muted);font-weight:400;margin-left:6px}
.pjNote{color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:8px}
.pjTable{margin-top:10px}
.pjTableHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.pjTableHead b{font-family:var(--mono);color:var(--amber)}
.pjTableHead .btn{padding:4px 10px;font-size:12.5px}
.pjDict{width:100%;font-size:12.5px}
.pjDict td code{font-family:var(--mono)}
.pjPeekOut{overflow-x:auto}
.pjDataCode{background:#060B15;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;font-family:var(--mono);font-size:12.5px;white-space:pre;overflow-x:auto;max-height:260px}
.pjFiles{margin:0 0 8px}
.pjWs .webprev iframe{height:340px}
.pjGrader{position:absolute;left:-10000px;top:0;width:900px;height:700px;border:0;visibility:hidden}
.pjFoot{margin-top:8px;font-size:12.5px}
.pjComplete{border-color:rgba(127,209,192,.45);background:linear-gradient(180deg,rgba(127,209,192,.09),var(--panel))}
.pjComplete h3{font-family:var(--disp);font-size:22px;margin-bottom:6px}
.pjComplete p{font-size:15px;line-height:1.6}
.pjHow summary{cursor:pointer;font-family:var(--disp);font-size:18px;font-weight:600}
.pjHow ol{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pjHow li{display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:12px;padding:12px}
.pjHow p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.pjHow p b{color:var(--text)}
.pjHowIc{font-size:22px}
.pjHowN{color:var(--amber) !important}
.pjSteps{display:flex;align-items:center;gap:0;flex-wrap:wrap;margin:0 0 16px;row-gap:8px}
.pjStepChip{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 5px;color:var(--muted);font:inherit;font-size:13px;cursor:pointer;max-width:220px}
.pjStepChip b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.06);color:var(--text);font-size:12.5px;flex:none}
.pjStepChip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pjStepChip.done{border-color:rgba(127,209,192,.45);color:var(--text)}
.pjStepChip.done b{background:rgba(127,209,192,.18);color:var(--jade)}
.pjStepLine{width:14px;height:2px;background:var(--line)}
.pjReqH{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin:10px 0 4px}
.pjReq{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.pjReq li{position:relative;padding-left:24px;font-size:14px;line-height:1.5}
.pjReq li::before{content:'';position:absolute;left:2px;top:4px;width:12px;height:12px;border:1.5px solid var(--amber-dim);border-radius:3px}
.pjTask.done .pjReq li::before{content:'✓';border-color:var(--jade);color:var(--jade);font-size:10px;line-height:11px;text-align:center}
.pjReq code{font-family:var(--mono);font-size:.9em;background:rgba(255,255,255,.06);padding:1px 5px;border-radius:5px}
.pjExWrap{overflow-x:auto}
.pjEx{width:100%;font-size:12.5px}
.pjEx code{font-family:var(--mono);white-space:pre-wrap;word-break:break-word}
.pjYours.ok{background:rgba(127,209,192,.12)}.pjYours.ok code{color:var(--jade)}
.pjYours.bad{background:rgba(226,96,76,.12)}.pjYours.bad code{color:var(--ember)}
.pjExpect{margin:10px 0;background:rgba(127,209,192,.06);border:1px dashed rgba(127,209,192,.4);border-radius:10px;padding:8px 12px;overflow-x:auto}
.pjViews{margin:12px 0 8px}
.pjTargetNote{font-size:13px;color:var(--amber);margin:0 0 6px}
@media (max-width:1000px){.pjHow ol{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:560px){.pjHow ol{grid-template-columns:minmax(0,1fr)}.pjStepChip span{display:none}.pjStepChip{padding-right:5px}}
@media (max-width:1000px){.pjGrid{grid-template-columns:minmax(0,1fr)}.pjSide{position:static;max-height:none;overflow:visible;order:-1}}
/* cheat sheets */
.csBar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.csBar .pgTabs{margin:0}
.csSheet{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px}
.csHead{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:14px}
.csHead b{font-family:var(--disp);font-size:22px}
.csHead span{font-family:var(--mono);color:var(--amber);font-size:13px}
.csGrid{columns:3 300px;column-gap:16px}
.csSec{break-inside:avoid;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.csSec h4{font-family:var(--disp);font-size:16px;color:var(--amber);margin-bottom:8px}
.csRow{padding:6px 0;border-top:1px dashed var(--line2)}
.csRow:first-of-type{border-top:0}
.csRow pre{margin:0 0 3px;font-family:var(--mono);font-size:12.5px;white-space:pre-wrap;color:#cfe9e2}
.csRow span{font-size:12.5px;color:var(--muted)}
.csFoot{margin-top:6px;font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right}
@media (max-width:760px){
  .hubArt{display:none}
  .paBody{grid-template-columns:1fr}
  .paHead .ring{display:none}
  .paStep{flex-wrap:wrap}
  .asScore{flex-direction:column;align-items:flex-start}
}
@media print{
  .csNoPrint,.side,.navSearch{display:none !important}
  .appSec{padding:0}
  .csSheet{background:#fff;color:#111;border:0;padding:0}
  .csHead{border-color:#ccc}.csHead b{color:#111}.csHead span{color:#8a6a2a}
  .csGrid{columns:3;column-gap:10px}
  .csSec{background:#fff;border-color:#bbb;padding:8px 10px;margin-bottom:10px}
  .csSec h4{color:#8a6a2a;font-size:13px}
  .csRow pre{color:#0b3d35;font-size:10.5px}.csRow span{color:#444;font-size:10.5px}
  .csFoot{color:#666}
}

/* ---- tokens, course filters, pricing (courses.html / checkout.html / playground.html) ---- */
.coMsg{margin:10px 0 0;min-height:1.2em;font-size:14px;color:var(--muted)}
.coMsg.ok{color:var(--jade)}
.coMsg.err{color:var(--ember)}
.pgXp{margin:6px 0 10px;font-size:14px;color:var(--amber)}
.cxBar{display:flex;flex-direction:column;gap:10px;margin:6px 0 4px}
.cxSearch{max-width:520px}
.cxChips{display:flex;flex-wrap:wrap;gap:8px}
.cxChip{background:transparent;border:1px solid var(--line);color:var(--text);border-radius:999px;padding:6px 14px;font:inherit;font-size:14px;cursor:pointer}
.cxChip:hover{border-color:var(--amber)}
.cxChip.on{background:var(--amber);border-color:var(--amber);color:#0E1626;font-weight:600}
.cxCount{margin:6px 0 14px}
.cxTags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.prSteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:8px 0 26px}
.prStep{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:var(--ink2,#121C30)}
.prStep b{color:var(--amber)}
.prStep p{margin:6px 0 0;color:var(--muted);font-size:14px}