@charset "utf-8";
/* Layout: clean white app — top bar with stat pills → welcome row (week card + current-unit card) → unit tiles on a route. Unit page: hero + lesson list joined by a line. */
:root{
  --bg:#FFFFFF; --surface:#FFFFFF; --ink:#12141A; --muted:#5A6072; --line:#E3E6EE; --line-strong:#CDD2DE;
  --blue:#2F4CDD; --blue-2:#5C76F0; --blue-3:#A8B6FA; --blue-4:#E4E9FF; --on-blue:#FFFFFF; --deep:#1B2C8F;
  --yellow:#F2C230; --yellow-2:#FBE7A4;
  --green:#1F8A50; --green-bg:#DDF3E5; --lock:#8A90A0;
  --shadow:0 1px 0 rgba(18,20,26,.04), 0 6px 20px rgba(18,20,26,.06);
  --f-ui:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-math:"STIX Two Text","Cambria Math","Times New Roman",serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0F1117; --surface:#181B24; --ink:#ECEEF4; --muted:#A2A8B8; --line:#272B37; --line-strong:#353A48;
  --blue:#7389FF; --blue-2:#5C76F0; --blue-3:#3B4E9E; --blue-4:#1E2647; --on-blue:#0F1117; --deep:#26357A;
  --yellow:#F2C230; --yellow-2:#5A4914;
  --green:#5BCB8B; --green-bg:#18392A; --lock:#7A8090;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.3);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F1117; --surface:#181B24; --ink:#ECEEF4; --muted:#A2A8B8; --line:#272B37; --line-strong:#353A48;
  --blue:#7389FF; --blue-2:#5C76F0; --blue-3:#3B4E9E; --blue-4:#1E2647; --on-blue:#0F1117; --deep:#26357A;
  --yellow:#F2C230; --yellow-2:#5A4914;
  --green:#5BCB8B; --green-bg:#18392A; --lock:#7A8090;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.3);
  color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.5}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:14px}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.math{font-family:var(--f-math);font-style:italic}

/* Top bar */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:28px;min-height:68px;flex-wrap:wrap}
.brand{font-weight:800;font-size:26px;letter-spacing:-.03em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:8px}
.brand svg{color:var(--blue)}
.tabs{display:flex;gap:24px;align-self:stretch}
.tabs a{display:flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-weight:600;border-bottom:3px solid transparent;padding-top:3px}
.tabs a[aria-current="page"]{color:var(--ink);border-color:var(--ink)}
.pills{margin-left:auto;display:flex;gap:10px}
.pill{display:flex;align-items:center;gap:6px;border:2px solid var(--line);border-radius:999px;padding:6px 16px;font-weight:800;font-size:18px;font-variant-numeric:tabular-nums}
.pill .bolt{color:var(--yellow)} .pill .flame{color:#E8731A}
@media (max-width:640px){.tabs{display:none}.topbar .wrap{gap:12px}.pill{padding:4px 12px;font-size:16px}}

/* Home */
.welcome{padding-block:36px 8px}
.welcome h1{font-size:clamp(30px,3.6vw,36px)}   /* same size as "Let's study" (Max, Nov 1) */
.home-row{display:flex;flex-wrap:wrap;gap:24px;padding-block:20px 8px}
.card{background:var(--surface);border:2px solid var(--line);border-radius:28px;box-shadow:var(--shadow)}
.week{flex:1 1 320px;min-width:0;padding:26px 28px;display:flex;flex-direction:column;gap:18px}
.big-num{display:flex;align-items:center;gap:10px;font-size:48px;font-weight:800;line-height:1}
.big-num svg{color:#E8731A}
.week .lbl{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;text-align:center;font-size:13px;font-weight:700;color:var(--muted)}
.days span{display:flex;flex-direction:column;align-items:center;gap:6px}
.days i{width:30px;height:30px;border-radius:50%;border:2px solid var(--line-strong);display:grid;place-items:center;color:var(--on-blue)}
.days .on i{background:var(--yellow);border-color:var(--yellow);color:#3A2E00}
.days .today i{border-color:var(--blue);border-width:3px}
.week hr{border:0;border-top:2px solid var(--line);margin:0}
.week .xp-row{display:flex;justify-content:space-between;align-items:baseline;font-weight:700}
.week .xp-row b{font-size:22px}

.current{flex:2 1 460px;min-width:0;padding:28px;display:flex;flex-wrap:wrap;gap:28px;align-items:center;background:linear-gradient(var(--surface),var(--surface)) padding-box}
.current .art{flex:0 0 auto;width:170px;height:150px;border-radius:24px;background:var(--blue-4);display:grid;place-items:center}
.current .art svg{width:130px;height:auto}
.current .body{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:10px}
.eyebrow{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.current h2{font-size:28px;line-height:1.15}
.progress{height:10px;background:var(--line);border-radius:999px;overflow:hidden}
.progress i{display:block;height:100%;background:var(--blue);border-radius:inherit}
.next{display:flex;align-items:center;gap:12px;padding:12px 0;color:var(--muted);font-weight:600}
.next .num{width:32px;height:32px;border-radius:50%;background:var(--blue-4);color:var(--blue);display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:10px;border:0;cursor:pointer;border-radius:16px;padding:15px 26px;font-weight:800;font-size:17px}
.btn-primary{background:var(--blue);color:var(--on-blue);box-shadow:0 4px 0 color-mix(in srgb,var(--blue) 55%,#000)}
.btn-primary:hover{filter:brightness(1.07)}
.btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--blue) 55%,#000)}

.topic{padding-block:44px 56px}
.topic-head{display:flex;flex-wrap:wrap;gap:24px;align-items:center;margin-bottom:22px}
.topic-head .badge{width:84px;height:84px;border-radius:22px;background:var(--blue);display:grid;place-items:center;color:var(--on-blue);flex:none}
.topic-head .badge span{font-family:var(--f-math);font-style:italic;font-size:34px}
.topic-head .txt{flex:1 1 300px;min-width:0}
.topic-head .sub{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.topic-head h2{font-size:28px;margin-top:2px}
.topic-head p{color:var(--muted);margin-top:4px;max-width:62ch;font-size:17px}
.units-title{font-size:clamp(30px,3.6vw,36px);margin-bottom:20px}

.route{--gap:32px;position:relative;background:none;border-radius:0;padding:4px 0 8px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px var(--gap)}
.tile .box{position:relative}
.tile .box::after{display:none}
.tile:nth-child(4n) .box::after,.tile:last-child .box::after{display:none}
@media (max-width:860px){.route{grid-template-columns:repeat(2,minmax(0,1fr))}.tile:nth-child(4n) .box::after{display:block}.tile:nth-child(2n) .box::after,.tile:last-child .box::after{display:none}}
@media (max-width:560px){.route{--gap:16px;gap:18px var(--gap);padding:4px 0 8px}}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;background:none;border:0;padding:0;cursor:pointer;text-align:center}
.tile .box{width:100%;max-width:100%;background:var(--surface);border:2px solid var(--line);border-radius:22px;box-shadow:0 5px 0 var(--line);display:flex;flex-direction:column;gap:10px;padding:14px 16px 16px;text-align:left;transition:transform .15s ease, box-shadow .15s ease}
.tile:hover .box{transform:translateY(-4px);box-shadow:0 9px 0 var(--line)}
.tile:active .box{transform:translateY(3px);box-shadow:0 2px 0 var(--line)}
.tile .top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--muted);min-height:24px}
.tag{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:3px 9px}
.tag.done{background:var(--green-bg);color:var(--green)}
.tag.now{background:var(--blue);color:var(--on-blue)}
.tile .art{height:96px;display:grid;place-items:center}
.tile .art svg{height:100%;width:auto}
.tile.locked .art svg{filter:grayscale(1);opacity:.45}
.tile .mini{height:12px;border-radius:999px;background:var(--line);overflow:hidden}
.tile .mini i{display:block;height:100%;background:var(--blue);border-radius:inherit}
.tile.done .mini i{background:var(--green)}
.tile .name{font-weight:800;font-size:18px;line-height:1.2;color:var(--ink);min-height:2.4em;display:flex;align-items:flex-end}
.tile .prog{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.tile .prog .mini{flex:1}
.tile.locked .name{color:var(--muted)}
.tile.current .box{border-color:var(--blue);box-shadow:0 5px 0 color-mix(in srgb,var(--blue) 55%,#000)}

/* Unit page */
.crumbs{display:flex;align-items:center;gap:8px;padding-top:28px;font-weight:700;font-size:14px;color:var(--muted)}
.crumbs button{background:none;border:0;padding:4px 0;cursor:pointer;color:var(--blue);font-weight:800;display:flex;align-items:center;gap:6px}
.unit-hero{display:flex;flex-wrap:wrap;gap:28px;align-items:center;padding-block:20px 32px}
.unit-hero .art{width:150px;height:140px;border-radius:28px;background:var(--blue-4);display:grid;place-items:center;flex:none}
.unit-hero .art svg{width:110px;height:auto}
.unit-hero.locked .art svg{filter:grayscale(1);opacity:.5}
.unit-hero .txt{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:8px}
.unit-hero h1{font-size:clamp(28px,4vw,40px);line-height:1.1}
.unit-hero p{color:var(--muted);font-size:17px;max-width:60ch}
.unit-hero .pr{display:flex;align-items:center;gap:14px;max-width:440px;font-weight:700;color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.unit-hero .pr .progress{flex:1}

.unit-body{display:flex;flex-wrap:wrap;gap:28px;align-items:flex-start;padding-bottom:56px}
.lessons{flex:999 1 560px;min-width:0;padding:12px 0;position:relative}
.lessons ol{list-style:none;margin:0;padding:0;position:relative}
.lessons ol::before{content:none}
.lesson{position:relative;display:flex;align-items:center;gap:18px;padding:14px 22px}
.lesson + .lesson{border-top:2px solid var(--line)}
.lesson .ic{position:relative;z-index:1;flex:none;width:50px;height:50px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--surface);font-weight:800}
.lesson.done .ic{background:var(--green);color:var(--surface)}
.lesson.current .ic{background:var(--blue);color:var(--on-blue);box-shadow:0 0 0 5px var(--blue-4)}
.lesson.locked .ic{background:var(--line);color:var(--lock)}
.lesson .tx{flex:1;min-width:0}
.lesson .tt{font-weight:700;font-size:17px;line-height:1.3}
.lesson.locked .tt{color:var(--muted)}
.lesson .mt{font-size:14px;color:var(--muted);font-weight:600;margin-top:2px}
.lesson .type{font-weight:800}
.lesson.current{background:var(--blue-4);border-radius:18px;border-top-color:transparent}
.lesson.current + .lesson{border-top-color:transparent}
.lesson .go{padding:10px 18px;font-size:15px;border-radius:12px}
.lesson .ok{color:var(--green);flex:none}

.side{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:18px}
.side .card{padding:22px 24px}
.side h3{font-size:18px}
.mix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px;text-align:center}
.mix div{background:color-mix(in srgb,var(--line) 55%,var(--bg));border-radius:16px;padding:12px 6px}
.mix b{display:block;font-size:26px;line-height:1.1}
.mix span{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.side .xp{display:flex;justify-content:space-between;margin-top:14px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.side .xp b{color:var(--ink)}
.unit-nav{display:flex;gap:10px}
.unit-nav button{flex:1;border:2px solid var(--line);background:var(--surface);border-radius:14px;padding:12px;cursor:pointer;font-weight:800;font-size:14px;box-shadow:0 3px 0 var(--line)}
.unit-nav button:disabled{opacity:.4;cursor:default}
.note{font-size:13px;color:var(--muted);padding-bottom:28px}

/* ---------- Lesson player ---------- */
:root{--red:#D33A4A;--red-bg:#FDE4E6;--red-shadow:#9E2633;--green-shadow:#13603A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--red:#FF7A85;--red-bg:#3A1A1F;--red-shadow:#A2404A;--green-shadow:#2E7A51}}
:root[data-theme="dark"]{--red:#FF7A85;--red-bg:#3A1A1F;--red-shadow:#A2404A;--green-shadow:#2E7A51}
body.lesson-mode .topbar{display:none}
.lesson-shell{min-height:100vh;display:flex;flex-direction:column}
.l-top{width:100%;max-width:960px;margin:0 auto;display:flex;align-items:center;gap:18px;padding-block:24px 8px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.l-close{background:none;border:0;color:var(--muted);cursor:pointer;padding:6px;display:grid;place-items:center;border-radius:10px}
.l-close:hover{color:var(--ink);background:var(--blue-4)}
.l-progwrap{flex:1;position:relative}
.l-prog{height:18px;border-radius:99px;background:var(--line);overflow:hidden}
.l-prog i{position:relative;display:block;height:100%;min-width:18px;background:var(--green);border-radius:inherit;transition:width .5s cubic-bezier(.25,.8,.3,1), background .3s;overflow:hidden}
.l-prog i::after{content:"";position:absolute;left:9px;right:9px;top:4px;height:5px;border-radius:5px;background:rgba(255,255,255,.35)}
.l-prog i.zero{min-width:0}
.l-prog{position:relative}
.l-ghost{position:absolute;left:0;top:0;height:100%;min-width:18px;border-radius:99px;background:var(--green);opacity:.3;transition:width .5s cubic-bezier(.25,.8,.3,1), background .3s}   /* how far the student has got (Oct 30) */
.l-ghost.zero{min-width:0}
.l-progwrap.hot .l-ghost{background:#FF9600}
.l-prog i.boost{animation:boost .6s ease}
.l-prog i.boost::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);transform:translateX(-100%);animation:shine .7s ease forwards}
@keyframes boost{35%{filter:brightness(1.18)}}
@keyframes shine{to{transform:translateX(100%)}}
.l-progwrap.hot .l-prog i{background:#FF9600}
.l-combo{position:absolute;top:-28px;transform:translateX(-50%);font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#E07F00;white-space:nowrap;pointer-events:none;opacity:0}
.l-combo.show{animation:combo 2.4s ease forwards}
@keyframes combo{0%{opacity:0;transform:translate(-50%,8px) scale(.7)}15%{opacity:1;transform:translate(-50%,0) scale(1.15)}25%{transform:translate(-50%,0) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-6px)}}
.l-prog.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.l-body{flex:1;display:flex;justify-content:center;padding-block:28px 170px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.l-card{width:100%;max-width:760px;display:flex;flex-direction:column;gap:22px}
.l-kick{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.l-card h2{font-size:clamp(24px,3vw,30px);line-height:1.2}
.l-card p{font-size:18px;line-height:1.55;max-width:62ch}
.l-card p.muted{color:var(--muted);font-size:16px}
.l-card ul{margin:0;padding-left:22px;font-size:18px;line-height:1.7}
.stage{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;padding:22px;border-radius:24px;background:color-mix(in srgb,var(--line) 40%,var(--bg))}
.callout{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:18px;background:var(--blue-4);font-size:17px;line-height:1.5}
.callout b,.rule-box b{color:var(--blue)}   /* bold is blue in every blue box (Max, Oct 29) */
.eqline{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:24px;font-family:var(--f-math);font-style:italic}

/* matrix */
.mx{display:inline-flex;align-items:stretch;font-size:24px;color:var(--ink)}
.mx{position:relative}
.ent{padding-right:.14em}
.l-nav{display:flex;gap:4px;flex:none}
.l-arrow{width:48px;height:48px;padding:0;border-radius:12px;background:none;color:var(--blue);box-shadow:none}
.l-arrow svg{width:30px;height:30px}
.l-arrow:hover{background:var(--blue-4);filter:none}
.l-arrow:active{transform:scale(.92);box-shadow:none}
.l-arrow:disabled{background:none;color:var(--line-strong);box-shadow:none;cursor:default;opacity:1}
.l-foot.ok .l-arrow,.l-foot.bad .l-arrow,.l-foot.rev .l-arrow{background:none}
@media (max-width:560px){.l-nav{order:2;justify-content:space-between}.l-arrow{flex:1}}
.l-foot-in .l-msg{flex:1;min-width:0}
.l-foot.rev{background:var(--blue-4);border-color:transparent}
.l-foot.rev .l-msg{color:var(--blue)}
.opts{position:relative}
.opt.hint-on{background:color-mix(in srgb,var(--blue-4) 50%,var(--surface))}
.opt.hint-sel{border-color:var(--blue);background:var(--blue-4);box-shadow:0 4px 0 var(--blue)}
.opt.hint-press{transform:translateY(2px)}
button.mx-c.hint-sel{background:var(--blue-4)}
.tcap{font-size:13px;font-weight:600;color:var(--muted);text-align:center;line-height:1.3}
.mx-c.p1,.sl-a.p1{background:var(--yellow);color:#12141A}.mx-c.p2,.sl-a.p2{background:#7FA6FF;color:#12141A}.mx-c.p3,.sl-a.p3{background:#5ED39B;color:#12141A}.mx-c.dg{background:var(--line)}
.mx-c{transition:background .35s}
button.mx-c.sel{background:var(--blue-4)}
button.mx-c.right{background:var(--green-bg);color:var(--green)}
button.mx-c.wrong{background:var(--red-bg);color:var(--red)}
.opt-l{display:block}
.sizes b.tt{font-family:var(--f-ui);font-style:normal;font-size:16px;font-weight:800;text-align:center}
.sizes.s3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sizes.s2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:620px){.sizes.s3{grid-template-columns:1fr}}
.mx-c.dim{color:var(--muted);opacity:.55}
.mx-c.zr{background:var(--blue-4)}
.mx-c.empty{border:2px dashed var(--line-strong);color:transparent}
.mx-c.focus{box-shadow:0 0 0 3px var(--blue);border-radius:10px}
.mx-c.filled{animation:popin .35s ease}
@keyframes popin{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}
.rule-box{padding:18px 24px 20px;border-radius:18px;background:var(--blue-4);display:flex;flex-direction:column;gap:10px}
.rule-box p{margin:0}   /* text left, the formula (.rule-f) centred: text reads from the left edge, visuals sit in the middle */
.rule-f{align-self:center;display:flex;align-items:baseline;gap:14px;font-size:30px}
.rule-f small{font-size:15px;color:var(--muted);font-family:var(--f-ui)}
.rule{align-self:center;display:flex;align-items:baseline;gap:14px;font-size:30px;padding:14px 28px;border-radius:18px;background:var(--blue-4)}
.rule small{font-size:15px;color:var(--muted);font-family:var(--f-ui)}
.pair-cap{min-height:46px;text-align:center;font-size:20px}
.mx.roomy > .mx-g{gap:30px 36px;padding:16px 10px}
.sym-stage{gap:36px;min-height:260px}
.sym-stage .eqline{position:relative;z-index:1}
.sym-side{width:0;margin-left:-36px;opacity:0;display:flex;flex-direction:column;justify-content:center;gap:14px;font-size:32px;white-space:nowrap;transition:width .6s cubic-bezier(.45,.05,.3,1),margin .6s cubic-bezier(.45,.05,.3,1),opacity .35s ease .2s}
.sym-side.open{width:200px;margin-left:0;opacity:1}
.sym-side.wide.open{width:300px}
.sym-side.wide{font-size:28px}
#symside.wide .sl{animation:slGentle .7s cubic-bezier(.25,.1,.25,1) backwards}
@keyframes slGentle{from{opacity:0;transform:translateY(5px)}}
.sym-row.sm{height:34px;font-size:22px;font-family:var(--f-math);font-style:italic;color:var(--muted)}
.sym-row.sm .sl{gap:16px}
.res{font-weight:700}
.cl{font-size:.72em;color:var(--muted);transition:opacity .3s ease}
.cl.gone{opacity:0}
.mx-c.p1 .cl{color:#12141A}
.rule-fly{position:absolute;z-index:4;display:block;text-align:center;color:#12141A;pointer-events:none;transform-origin:50% 50%}
.sym-row{height:58px;display:flex;align-items:center}
.sl{display:flex;align-items:baseline;gap:12px;transform-origin:0 50%;animation:slSoft .45s cubic-bezier(.2,.7,.3,1) backwards;transition:opacity .4s ease,transform .4s ease}
.sl.out{opacity:0;transform:translateY(-6px)}
@keyframes slSoft{from{opacity:0;transform:translateY(8px) scale(.97)}}
.res.sent{opacity:.3;transition:opacity .3s ease}
.num-in{animation:numIn .3s ease}
@keyframes numIn{from{opacity:.6}}
.wh-stage .num-in{animation:whIn .45s ease}
.wh-stage .mx-c{border-style:dashed;transition:background .45s ease,border-color .45s ease}   /* both matrices light up at the same pace; the empty slot's dashed frame fades out instead of vanishing */@keyframes whIn{from{opacity:0}}
.sl.copy{animation:none}
.sym-row:first-child{position:relative;z-index:2}.sym-row{position:relative;z-index:1}
.sl-a{padding:2px 10px 4px;border-radius:12px}
.sl-a.p0,.mx-c.p0{background:#8B5CF6;color:#fff}
.sl.self .sl-v{color:#7C4DEB;font-family:var(--f-ui);font-style:normal;font-size:.55em;font-weight:800}
.sl-a .d{display:inline-block}
.sl-v{opacity:0;transition:opacity .35s ease;font-family:var(--f-math);font-style:italic}
.sl-v.on{opacity:1}
.sl.ok .sl-v{color:var(--green)}
.sl.ok .sl-v::after{content:" ✓";font-size:.7em}
@keyframes slIn{from{opacity:0;transform:translateY(10px)}}
.mx-c.pick{animation:eqPop .7s cubic-bezier(.3,0,.2,1)}
.ptag .d{display:inline-block}
.ptag{transform-origin:50% 100%}
.mx-c.eq{animation:eqSoft .45s ease}
@keyframes eqPop{40%{transform:scale(1.2)}}
@keyframes eqSoft{50%{transform:scale(1.08)}}
.sym-stage .mx-c.instant{transition:none}
.sym-stage .mx-c{transition:background .3s ease,color .3s ease}
.mline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1}
.mline line{stroke:var(--blue);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:.55;animation:mlineDraw .9s ease forwards}
.mline.out{opacity:0;transition:opacity .4s}
@keyframes mlineDraw{to{stroke-dashoffset:0}}
#pcap.sym{transition:opacity .4s}#pcap.sym:not(.show){opacity:0}
.ptag{position:absolute;z-index:3;transform:translate(-50%,-100%);font-size:16px;line-height:1;padding:4px 8px 5px;border-radius:9px;background:var(--surface);color:var(--ink);box-shadow:0 2px 0 var(--line);pointer-events:none;animation:ptagIn .25s ease both;white-space:nowrap}
.ptag.p1{background:#DCE6FF}.ptag.p2{background:#FFE7C2}.ptag.p3{background:#D9F2E3}
@keyframes ptagIn{from{opacity:0;transform:translate(-50%,-80%)}}
.mx-c.fly{position:absolute;z-index:4;margin:0;display:grid;place-items:center;pointer-events:none;box-shadow:0 6px 16px rgba(20,30,80,.18)}
.mx-c.ghosted{color:transparent}
.mx-c.same{animation:samePop .5s ease}
@keyframes samePop{40%{transform:scale(1.18)}}
.pair-cap .ok-txt{color:var(--green);font-family:var(--f-ui);font-size:16px}
.sort-wrap{position:relative;display:flex;flex-direction:column;gap:16px;touch-action:none}
.sort-tray{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px;border-radius:20px;background:color-mix(in srgb,var(--line) 40%,var(--bg));border:2px solid transparent}
.sort-tray.over{border-color:var(--blue)}
@media (max-width:520px){.sort-tray{grid-template-columns:repeat(2,minmax(0,1fr))}}
.slot{height:112px;display:grid;place-items:center;border-radius:14px;background:color-mix(in srgb,var(--line) 60%,var(--bg))}
.sort-item{border:2px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 4px 0 var(--line);padding:6px 8px;cursor:grab;display:grid;place-items:center;transition:transform .5s cubic-bezier(.45,.05,.3,1),box-shadow .15s;user-select:none;touch-action:none}
.sort-item .mx.sm{font-size:15px}
.sort-item .mx-c{min-width:20px;padding:0 4px;line-height:1.4}
.sort-item .mx.sm > .mx-g{margin:0 11px;gap:0 2px;padding:4px 2px}
.sort-item:hover{background:color-mix(in srgb,var(--blue-4) 50%,var(--surface))}
.sort-item.sel{border-color:var(--blue);background:var(--blue-4);box-shadow:0 4px 0 var(--blue)}
.sort-item.lifted{box-shadow:0 12px 24px rgba(18,20,26,.18);border-color:var(--blue);position:relative;z-index:2}
.sort-item.placeholder{visibility:hidden}
.sort-item.ghost{position:fixed;left:0;top:0;z-index:50;pointer-events:none;margin:0;cursor:grabbing;box-shadow:0 14px 30px rgba(18,20,26,.22);border-color:var(--blue);transition:none}
.sort-item.right{border-color:var(--green);background:var(--green-bg);box-shadow:0 4px 0 var(--green)}
.sort-item.wrong{border-color:var(--red);background:var(--red-bg);box-shadow:0 4px 0 var(--red)}
.bins{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:700px){.bins{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bin{height:180px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 8px;border:2px dashed var(--line-strong);border-radius:18px;background:var(--surface);cursor:pointer;color:var(--ink);overflow:hidden;transition:border-color .15s,background .15s}
.bin b{font-size:15px}
.bin:hover,.bin.over{border-color:var(--blue);background:color-mix(in srgb,var(--blue-4) 45%,var(--surface))}
.bin-drop{flex:1;width:100%;display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;gap:6px}
.bin-drop .sort-item{zoom:.68}
.stage{position:relative}
.hint-cur{position:absolute;left:0;top:0;width:30px;height:34px;margin:-2px 0 0 -4px;pointer-events:none;z-index:3;opacity:0;transition:transform .6s cubic-bezier(.45,.05,.3,1),opacity .3s;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.hint-cur.on{opacity:1}
.hint-cur.gone{opacity:0}
.hint-cur svg{transition:transform .15s}
.hint-cur.press svg{transform:scale(.82)}
button.mx-c.hint-on{background:var(--blue-4)}
button.mx-c.hint-press{transform:scale(.92)}
.shake-x{animation:shakex .45s ease}
@keyframes shakex{15%{transform:translateX(-7px)}35%{transform:translateX(6px)}55%{transform:translateX(-4px)}75%{transform:translateX(3px)}100%{transform:none}}
.opt.out{opacity:.4;box-shadow:0 4px 0 var(--line)}
@media (prefers-reduced-motion:reduce){.shake-x{animation:none}}
button.mx-c.ok-ring,button.mx-c.ok-ring:hover{background:var(--green-bg);color:var(--green)}
button.mx-c.bad-ring,button.mx-c.bad-ring:hover{background:var(--red-bg);color:var(--red)}
.speed-q{flex-wrap:wrap;justify-content:space-between}
.sp-dots{display:flex;gap:8px}
.sp-dots i{width:14px;height:14px;border-radius:50%;background:var(--line);transition:background .2s}
.sp-dots i.cur{background:none;box-shadow:inset 0 0 0 3px var(--blue)}
.sp-dots i.ok{background:var(--green)} .sp-dots i.bad{background:var(--red)}
.mx,.lmx,.eqline .mx,.eqline .lmx{font-family:var(--f-math);font-style:italic}
.lmx .cl,.lmx .rl{font-family:var(--f-ui);font-style:normal}
.sizes b{font-family:var(--f-math);font-style:italic;font-size:20px}
.lmx{column-gap:10px}
.lmx:has(.num){column-gap:14px;row-gap:12px}
.lmx .num.cell{margin:4px 0}
.done-art{width:132px;height:120px;border-radius:28px;background:var(--blue-4);display:grid;place-items:center}
.done-art svg{width:84px;height:auto}
.s2s.anim .mx-c{opacity:0;transform:scale(.6)}
.s2s .mx-c{transition:opacity .35s ease, transform .35s cubic-bezier(.3,1.6,.5,1), background .3s}
.s2s.anim .mx-c.in{opacity:1;transform:none}
.s2s .mx-c.now{background:var(--yellow);color:#3A2E00}
.s2s .sheet > div{transition:background .3s}
.s2s .sheet > div.lit{background:#FFF1B8}
.mx.sm > .par{width:11px}
.mx.sm > .mx-g{margin:0 12px;gap:2px 4px}
.sizes > div{display:grid !important;grid-template-columns:100%;grid-template-rows:1fr auto;justify-content:stretch !important;justify-items:center;align-items:center;gap:14px !important;padding:20px 10px !important;min-width:0}
.opt:focus-visible,button.mx-c:focus-visible{outline:none}
.opt:focus-visible:not(.sel):not(.right):not(.wrong){border-color:var(--blue)}
button.mx-c:focus-visible:not(.sel){background:var(--blue-4)}
.eqline:has(> .lmx) > span:first-child{margin-top:28px}
.par{position:absolute;top:0;bottom:0;width:20px;height:100%;overflow:visible}
.mx > .par:first-child{left:0}.mx > .par:last-child{right:0}
.mx > .mx-g{margin:0 20px}
.lmx .br{position:relative}.lmx .br .par{left:0}
.mx-g{display:grid;gap:4px 8px;padding:8px 6px}
.mx-c{min-width:46px;padding:6px 8px;text-align:center;border-radius:10px;font-weight:700;font-variant-numeric:tabular-nums;border:2px solid transparent;background:none;font-size:inherit;line-height:1.3;transition:background .15s}
button.mx-c{cursor:pointer}
button.mx-c:hover{background:var(--blue-4)}
.mx-c.hl{background:var(--yellow);color:#3A2E00}
.mx-c.sel{background:var(--blue-4)}
.mx-c.right{background:var(--green);color:#fff}
.mx-c.wrong{background:var(--red);color:#fff}
.mx.sm{font-size:21px}.mx.sm .mx-c{min-width:30px;padding:2px 6px}
.ent{font-family:var(--f-math);font-style:italic;font-weight:500;white-space:nowrap}
.ent sub{font-size:.62em;font-style:italic}

/* spreadsheet picture (a fixed light image in both themes) */
.sheet-win{border-radius:12px;overflow:hidden;border:1px solid #C9CED6;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.08)}
.sheet-bar{height:22px;background:#1E7145;display:flex;align-items:center;gap:6px;padding:0 10px}
.sheet-bar span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55)}
.sheet{display:grid;grid-template-columns:40px 116px repeat(2,90px);font-family:Calibri,"Segoe UI",Arial,sans-serif;font-size:18px;color:#1F1F1F}
.sheet > div{border-right:1px solid #DADCE0;border-bottom:1px solid #DADCE0;height:38px;display:flex;align-items:center;justify-content:flex-end;padding:0 10px}
.sheet .h{background:#F3F3F3;color:#555;justify-content:center;font-size:14px}
.sheet .sel{outline:2px solid #1E7145;outline-offset:-2px}
.sheet .lab{justify-content:flex-start;font-weight:700}
.sheet .lab.hd{justify-content:flex-end}
.morph{display:grid;place-items:center}
.morph > *{grid-area:1/1;transition:opacity .7s ease, transform .7s ease}
.morph .m-mx{opacity:0;transform:scale(.92)}
.morph.go .m-sheet{opacity:0;transform:scale(1.06)}
.morph.go .m-mx{opacity:1;transform:none}
.linkbtn{background:none;border:0;padding:0;color:var(--blue);font-weight:800;cursor:pointer;font-size:15px;align-self:flex-start}

/* sizes */
.sizes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.sizes > div{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:10px;padding:16px 8px;border-radius:18px;background:var(--surface);border:2px solid var(--line)}
.sizes b{font-size:18px}
@media (max-width:620px){.sizes{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* hotel door */
.door{flex:none;width:74px;height:104px;border-radius:12px 12px 4px 4px;background:var(--blue);color:#fff;display:flex;flex-direction:column;align-items:center;padding-top:14px;position:relative;box-shadow:0 5px 0 var(--deep)}
.door span{background:#fff;color:var(--blue);font-weight:800;font-size:15px;border-radius:6px;padding:1px 7px}
.door::after{content:"";position:absolute;right:12px;top:56px;width:8px;height:8px;border-radius:50%;background:var(--yellow)}

/* answers */
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.opt{border:2px solid var(--line);border-radius:18px;padding:16px;background:var(--surface);box-shadow:0 4px 0 var(--line);font-weight:800;font-size:22px;cursor:pointer;color:var(--ink);display:flex;justify-content:center;align-items:center;min-height:68px;transition:transform .1s}
.opt:hover{background:color-mix(in srgb,var(--blue-4) 50%,var(--surface))}
.opt:active{transform:translateY(2px)}
.opt.sel{border-color:var(--blue);background:var(--blue-4);box-shadow:0 4px 0 var(--blue)}
.opt.right{border-color:var(--green);background:var(--green-bg);box-shadow:0 4px 0 var(--green)}
.opt.wrong{border-color:var(--red);background:var(--red-bg);box-shadow:0 4px 0 var(--red)}
.opt .ent{font-size:26px}
.opt.mxopt{min-height:150px}
.inrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;font-size:30px;font-weight:800}
.inrow .sep{height:72px;display:flex;align-items:center;font-size:30px;line-height:1}
.inrow label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.num{width:96px;height:68px;font:inherit;font-size:30px;font-weight:800;text-align:center;border:2px solid var(--line);border-radius:16px;background:var(--surface);color:var(--ink);box-shadow:0 4px 0 var(--line)}
.num:focus{outline:none;border-color:var(--blue)}
.num.right{border-color:var(--green);background:var(--green-bg)}
.num.wrong{border-color:var(--red);background:var(--red-bg)}
.speed-q{font-size:18px;font-weight:500;display:flex;align-items:center;gap:12px;margin-top:-8px}   /* a line under the heading, not a second heading */
.speed-q .ent{font-size:1.3em}
.speed-q small{font-size:15px;color:var(--muted);font-weight:700}

/* footer */
.l-foot{position:fixed;left:0;right:0;bottom:0;border-top:2px solid var(--line);background:var(--surface);padding-bottom:env(safe-area-inset-bottom,0px);z-index:6}
.l-foot.ok{background:var(--green-bg);border-color:transparent}
.l-foot.bad{background:var(--red-bg);border-color:transparent}
.l-foot-in{max-width:960px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.l-msg{font-size:20px;font-weight:800;min-height:1em}
.l-foot.ok .l-msg{color:var(--green)} .l-foot.bad .l-msg{color:var(--red)}
.l-msg small{display:block;font-size:16px;font-weight:600;color:var(--ink);margin-top:2px}
.l-btn{min-width:180px}
.l-btn[disabled]{background:var(--line);color:var(--lock);box-shadow:0 4px 0 var(--line-strong);cursor:default;filter:none}
.l-foot.ok .l-btn{background:var(--green);color:#fff;box-shadow:0 4px 0 var(--green-shadow)}
.l-foot.bad .l-btn{background:var(--red);color:#fff;box-shadow:0 4px 0 var(--red-shadow)}
@media (max-width:560px){.l-foot-in{flex-direction:column;align-items:stretch}.l-btn{width:100%}}

/* done */
.done-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding-top:10px}
.done-hero h2{font-size:clamp(28px,4vw,38px);color:var(--yellow-ink, var(--ink))}
.done-tiles{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.done-tiles div{min-width:130px;border:2px solid var(--line);border-radius:18px;overflow:hidden;text-align:center;background:var(--surface)}
.done-tiles span{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px;color:#fff}
.done-tiles b{display:block;font-size:26px;padding:12px}
.done-tiles .xp span{background:var(--yellow);color:#3A2E00} .done-tiles .acc span{background:var(--green)}
.recap{border:2px solid var(--line);border-radius:20px;padding:18px 22px;background:var(--surface)}
.recap h3{font-size:17px;margin-bottom:6px}
.lmx{display:inline-grid;align-items:center;column-gap:4px;row-gap:4px;font-size:22px;color:var(--ink)}
.lmx .cl{font-size:13px;font-weight:800;color:var(--muted);text-align:center;letter-spacing:.04em;padding-bottom:2px}
.lmx .rl{font-size:14px;font-weight:700;color:var(--muted);text-align:right;padding-right:8px;white-space:nowrap}
.lmx .br{align-self:stretch}
.num.cell{width:64px;height:50px;font-size:22px;box-shadow:none}
.rep{border-collapse:collapse;background:var(--surface);border-radius:16px;overflow:hidden;font-size:17px;box-shadow:0 0 0 2px var(--line)}
.rep th,.rep td{padding:10px 16px;text-align:right;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.rep th{background:var(--blue-4);color:var(--blue);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.rep th:first-child,.rep td:first-child{text-align:left;font-weight:700}
.rep tr:last-child td{border-bottom:0}
.tablewrap{overflow-x:auto;max-width:100%}
.opt.txt{font-size:17px;text-align:center;line-height:1.3}
.story{padding:16px 18px;border-radius:18px;border:2px dashed var(--line-strong);font-size:17px;line-height:1.55}
/* DEV-ONLY review tools (remove before launch) */
.dev{display:flex;align-items:center;gap:6px;flex:none;padding:4px;border:2px dashed #E0218A;border-radius:12px;background:#FFE3F1}
.dev span{font:800 14px/1 ui-monospace,Menlo,monospace;color:#B0006A;padding:0 6px;white-space:nowrap}
.dev button{border:0;border-radius:8px;background:#E0218A;color:#fff;font:800 13px/1 ui-monospace,Menlo,monospace;padding:7px 10px;cursor:pointer}
.dev button:disabled{opacity:.35;cursor:default}
/* press feedback: anything that is a button reacts when pressed */
.btn,.unit-nav button,.dev button{transition:transform .1s ease,box-shadow .1s ease,background .15s,filter .15s,color .15s}
.opt:not(:disabled):active{transform:translateY(4px);box-shadow:0 0 0 var(--line)}
.opt.sel:not(:disabled):active{box-shadow:0 0 0 var(--blue)}
.unit-nav button{color:var(--ink)}
.unit-nav button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--line)}
.unit-nav button:not(:disabled):active{transform:translateY(3px);box-shadow:0 0 0 var(--line)}
/* text-style buttons: just a simple fade on hover and press */
.crumbs button,.linkbtn,.l-close{transition:opacity .12s ease,color .15s,background .15s}
.crumbs button:hover,.linkbtn:hover{opacity:.75}
.crumbs button:active,.linkbtn:active,.l-close:active{opacity:.45}
.linkbtn{display:inline-flex;align-items:center;gap:6px}
.linkbtn.in-stage{position:absolute;top:14px;right:18px;z-index:5;font-size:14px}
.linkbtn.in-stage svg{width:14px;height:14px}
.linkbtn.in-stage.compact{font-size:0;gap:0;padding:8px;top:10px;right:10px}
.linkbtn.in-stage.compact svg{width:16px;height:16px}
.dev button:not(:disabled):active{transform:scale(.9)}
button.mx-c{transition:background .15s,transform .1s}
button.mx-c:not(:disabled):active{transform:scale(.9)}
.redo-tag{display:inline-flex;align-self:flex-start;width:fit-content;align-items:center;gap:6px;margin-bottom:10px;padding:5px 10px;border-radius:999px;background:var(--red-bg);color:var(--red);font-size:13px;font-weight:800}
@media (prefers-reduced-motion:reduce){.morph > *{transition:none}.l-prog i,.l-ghost{transition:none}.l-prog i.boost,.l-prog i.boost::before,.l-prog.shake{animation:none}}
/* Lesson 1.4: A ± B = C and A → Aᵗ animations, transpose entries */
.op-stage{flex-direction:column;gap:14px;padding-bottom:16px}
.op-stage .eqline{gap:20px;justify-content:center}
.op-stage .mx > .mx-g{gap:18px 24px;padding:12px 8px}
.opm{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:8px}
.opm-l{font-size:22px;color:var(--muted)}
.op-line{width:100%;height:58px;display:flex;justify-content:center;align-items:center;font-size:28px;font-family:var(--f-math);font-style:italic;white-space:nowrap}
.op-line .sl{gap:10px}
.mx-c.p3 .cl{color:#12141A}
.tr-arrow{font-size:30px;color:var(--muted);font-style:normal}
.tr-tag{font-family:var(--f-ui);font-style:normal;font-size:19px;font-weight:700}
.tr-tag .ent{font-size:1.15em}
.ss{position:relative;display:inline-block;font-size:.62em;margin-left:.06em;line-height:1}
.ss i{font-style:italic}
.ss .b{position:relative;top:.38em}
.ss .t{position:absolute;left:0;top:-.62em}
/* Lesson 1.4: work space above A ± B = C (playOp) */
.calc-stage{gap:6px;padding-top:12px}
.calc{height:80px;display:flex;align-items:center;justify-content:center;gap:14px;font-family:var(--f-math);font-style:italic;font-size:30px;opacity:0;transition:opacity .4s ease}
.calc.on{opacity:1}
.calc .ch{min-width:64px;height:56px;padding:0 10px;border-radius:12px;display:grid;place-items:center;font-weight:700;color:#12141A;font-variant-numeric:tabular-nums;transition:color .3s ease,opacity .35s ease}
.calc .ch.p1{background:var(--yellow)}.calc .ch.p2{background:#7FA6FF}.calc .ch.p3{background:#5ED39B}
.calc .eq,.calc [data-s="r"]{opacity:0;transition:opacity .35s ease}
.calc.res .eq,.calc.res [data-s="r"]{opacity:1}
.calc .ch.sent{color:rgba(18,20,26,.3)}
.calc .ch.wait{background:transparent;transition:none}   /* playOp: the box gets its colour only when its number lands (Oct 30) */
.box-fly{position:absolute;z-index:4;display:grid;place-items:center;color:#12141A;pointer-events:none;font-variant-numeric:tabular-nums}
.calc-stage .calc [data-s="r"]{transition:opacity .2s ease}
.calc-stage .mx-c.instant{transition:none}
/* Lesson 1.4: the transpose as a sheet turned over by its top-left corner (playFlip) */
.flip-stage{gap:28px;align-items:flex-start;padding-block:28px}
.flip-stage.two{gap:64px}
.flip-stage > .eqline{margin-top:24px}
.flip-stage > .tr-arrow{margin-top:70px;padding:0}
.flipper{display:inline-flex;flex-direction:column;align-items:center;gap:12px}
.flip-box{position:relative;perspective:800px;transition:transform 1.6s cubic-bezier(.45,.05,.3,1)}
.flip-card{display:grid;transform-origin:0 0;transform-style:preserve-3d;transition:transform 1.6s cubic-bezier(.45,.05,.3,1)}
.flip-face{grid-area:1/1;align-self:start;justify-self:start;padding:12px;border-radius:14px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 6px 18px rgba(20,30,80,.08);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip-face.back{transform:rotate3d(1,1,0,180deg);transform-origin:0 0}
.flipper .mx{font-size:26px}
.flipper .mx > .mx-g{margin:0 24px;padding:24px 0;gap:10px}
.flipper .mx-c{width:50px;height:50px;min-width:0;padding:0;display:grid;place-items:center;transition:background .45s ease}
.flipper.lit .front .mx-c[data-k^="1"],.flipper.lit .back .mx-c[data-k$="1"]{background:var(--yellow);color:#12141A}
.flipper.lit .front .mx-c[data-k^="2"],.flipper.lit .back .mx-c[data-k$="2"]{background:#7FA6FF;color:#12141A}
.flipper.lit .front .mx-c[data-k^="3"],.flipper.lit .back .mx-c[data-k$="3"]{background:#5ED39B;color:#12141A}
.flip-axis{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;transform:scale(0);transform-origin:0 0;transition:transform .8s cubic-bezier(.45,.05,.3,1),opacity .4s ease;z-index:3}
.flip-axis line{stroke:var(--deep);stroke-width:2.5;stroke-dasharray:7 7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.flip-pin{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--deep);box-shadow:0 0 0 3px var(--surface);opacity:0;transition:opacity .4s ease;z-index:4}
.flipper.axis-on .flip-axis{opacity:.8;transform:none}
.flipper.axis-on .flip-pin{opacity:1}
.flip-l{font-size:24px;color:var(--muted);min-height:1.4em}
.fl-in{display:inline-block;animation:slSoft .45s cubic-bezier(.2,.7,.3,1) backwards}
/* Lesson 1.4: where each number goes (playWhere) */
.wh-pos{display:inline-flex;font-family:var(--f-ui);font-style:normal;font-weight:800;font-size:26px;letter-spacing:.02em}
.wh-pos .d{display:inline-block}
.wh-t{font-family:var(--f-ui);font-style:normal;font-size:20px;color:var(--muted)}
.wh-new{display:inline-flex;align-items:baseline;gap:12px}
.wh-arr{color:var(--muted);font-style:normal}
.wh-same{font-family:var(--f-ui);font-style:normal;font-size:16px;font-weight:800;color:var(--green);opacity:0;transition:opacity .35s ease}
.wh-same.on{opacity:1}
@media (prefers-reduced-motion:reduce){.flip-card,.flip-box{transition:none}}
.flip-stage.one{padding-block:28px 20px}
.wh-tt{opacity:0;transition:opacity .4s ease}
.wh-tt.on{opacity:1}
.ss .d{display:inline-block}
/* Lessons 1.5 and 1.7: scalar chip, row × column terms, size boxes */
.calc .ch.kk{background:var(--blue-4);color:var(--ink)}
.calc .ch.sm{min-width:48px;height:48px;font-size:26px;padding:0 8px}
.calc .term{display:inline-flex;align-items:center;gap:6px}
.calc .cop.dot{font-size:26px}
.mul-stage .calc{gap:10px}
.mul-stage .eqline{gap:12px}
.sc-k{font-size:30px;transition:opacity .15s ease}   /* when the k copies leave, the "·" left behind goes at once (it used to linger and fade slowly) */
.sc-k.gone{opacity:0}
.szstage{padding-block:26px}
.szline{font-size:26px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.szb{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 8px;border-radius:10px;color:#12141A;font-variant-numeric:tabular-nums}
.szb.in{background:var(--yellow)}.szb.out{background:#5ED39B}
.sumf{flex-wrap:wrap;justify-content:center;font-size:26px}
.sig{display:inline-flex;flex-direction:column;align-items:center;line-height:.9;font-size:1.25em;font-style:normal;vertical-align:middle}
.sig small{font-size:.42em;font-family:var(--f-math);font-style:italic;color:var(--ink)}
/* Question screens: the given data in the dashed box (givenBox) */
.story.given{display:flex;flex-direction:column;gap:14px}
.story.given.grey{border:none;border-radius:24px;padding:22px;background:color-mix(in srgb,var(--line) 40%,var(--bg))}   /* short condition + matrices, answer is one field or options: all grey */
.given-m{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 40px;padding:4px 0}
/* Lesson 1.3: mirror pairs above the symmetric animation, in the animation's pair colours */
.mpairs{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px}
.sl-a.dgc{background:var(--line);color:var(--ink)}
.mp{display:inline-flex;align-items:center;gap:10px;font-size:26px}
.mp-ar{font-size:20px;font-weight:700;color:var(--muted)}
/* Lesson 1.3: mirror positions (playPairs) */
.mp-stage{padding-block:26px}
.mp-stage .mx-c{min-width:64px}
.mp-stage .cl{font-size:.8em}
.mx-c.p2 .cl,.mx-c.p3 .cl{color:#12141A}
.mx-c.dg .cl{color:var(--ink)}
.pair-cap .mp{font-size:22px}
.pairbox{display:inline-flex;align-items:center;gap:12px;font-size:24px;padding:4px 14px 6px}
.mp-stage ~ .pair-cap .sl-a{font-size:22px}
.pairbox .pb-ar{font-family:var(--f-ui);font-style:normal;font-size:.75em;font-weight:700}
/* playPairs: smooth colour changes and a fixed row of pair slots under the matrix */
.mp-stage{flex-direction:column;gap:20px}
.mp-stage .mx-c{transition:background .45s ease}
.mp-stage .mx-c .cl{transition:color .45s ease}
.pb-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 24px;min-height:46px}
.pb-slot{min-width:150px;display:flex;justify-content:center;opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.pb-slot.in{opacity:1;transform:none}
.pb-slot .pairbox{font-size:22px}
@media (max-width:560px){.pb-slot{min-width:0}}
@media (prefers-reduced-motion:reduce){.pb-slot{transition:none}}
/* Rule boxes (Max): the sentence is plain text; only the formula sits in a blue box, centred */
.rule-box{padding:0;background:none;border-radius:0;gap:14px}
.rule-box .rule-f{background:var(--blue-4);padding:14px 30px 16px;border-radius:18px}
/* The symmetric matrix: the formula sits at the top of the stage, as the title of what the animation shows */
.sym-stage.demo{flex-direction:column;gap:22px;min-height:0;padding-block:24px 28px}
.demo-f{background:var(--blue-4);padding:10px 28px 12px;border-radius:16px;font-size:28px}
.demo-row{display:flex;align-items:center;justify-content:center;gap:36px;min-height:250px}
.demo-row .eqline{position:relative;z-index:1}
.pair-cap{font-size:18px}
/* Mirror positions: the pair boxes appear under the stage, in the caption area; the diagonal sentence follows them */
.pb-row.below{margin-top:-6px}
.mp-stage{min-height:0}
/* formula plates are as wide as the grey stage (Max), formula centred inside */
.rule-box .rule-f{align-self:stretch;justify-content:center}
/* transpose flip: no paper card, just the matrix turning; the name fades while the matrix turns */
.flip-face{background:none;box-shadow:none;padding:6px}
.flip-l{transition:opacity .3s ease}
.flip-l.dim{opacity:.25}
/* the name under a flipping matrix: additions fade in on their own, full changes cross-fade */
.flip-l.swap{opacity:0}
.flip-l{position:relative;display:inline-block}
.fl-add.tight{left:calc(100% - .12em)}   /* a t sits close to its letter, like a normal superscript */
.fl-add{position:absolute;left:100%;top:0;white-space:nowrap;animation:flAdd .2s ease both}   /* quick (Oct 31) */   /* hangs to the right, so the old part never moves */
.flip-l sup{vertical-align:baseline;position:relative;top:-.5em;line-height:0}   /* the t never changes the line height, so nothing jumps when a label changes */
@keyframes flAdd{from{opacity:0}}
/* the t of Aᵗ (Oct 31, Max: it used to just blink in): it rises from the foot of the letter, growing to full size and fading in */
.fl-add.tight{animation:tIn .5s cubic-bezier(.2,.8,.3,1) both;transform-origin:0 100%}
@keyframes tIn{0%{opacity:0;transform:translate(-.12em,.45em) scale(.4)}60%{opacity:1}100%{opacity:1;transform:none}}

/* Thinner footer bar (Oct 30, Max): less padding and a slightly lower button, so it covers less of the screen */
.l-foot-in{padding-block:12px}
.l-foot .l-btn{padding-block:12px;min-height:0}
.l-arrow{width:44px;height:44px}
.l-body{padding-bottom:130px}

.l-foot.no-anim,.l-foot.no-anim *{transition:none!important}   /* first frames of a new screen: no fade from the previous button state */
.l-kick{display:none}   /* the small blue line above the heading ("Part 1 · …", "Practice") is hidden everywhere to save vertical space (Oct 30, Max); delete this line to bring it back */
/* Phone footer in one row like desktop (Oct 30, Max): arrows left, button right. Feedback text, when there is any, takes its own row above. */
@media (max-width:560px){
  .l-foot-in{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 12px}
  .l-nav{order:0;justify-content:flex-start}
  .l-arrow{flex:none}
  .l-foot-in .l-msg{order:-1;flex:1 1 100%}
  .l-foot-in .l-msg:empty{display:none}
  .l-btn{width:auto;min-width:150px;margin-left:auto}
}

/* Leave the lesson? dialog (Oct 30) */
.leave-bg{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;background:rgba(18,20,26,.4);opacity:0;transition:opacity .2s ease}
.leave-bg.on{opacity:1}
.leave-box{width:min(420px,100%);background:var(--surface);border-radius:18px;padding:28px 28px 20px;box-shadow:0 20px 50px rgba(20,30,80,.25)}
.leave-box h3{margin:0 0 8px;font-size:24px;font-weight:800;color:var(--ink)}
.leave-box p{margin:0 0 22px;font-size:17px;color:var(--muted)}
.leave-btns{display:flex;flex-direction:column;gap:8px}
.leave-btns .btn{width:100%}
.leave-go{border:0;background:none;padding:12px;font:800 16px/1 inherit;font-family:inherit;color:var(--red);cursor:pointer;border-radius:12px;transition:opacity .15s}
.leave-go:hover{opacity:.75}
.leave-go:active{opacity:.6}

/* Oct 30 (Max) */
.calc-stage:not(.mul-stage) .calc .cop:not(.eq){opacity:0;transition:opacity .3s ease}   /* playOp: "+" / "−" appears only when the numbers fly up (not in row × column: there the "·" and "+" are always shown) */
.calc-stage:not(.mul-stage) .calc.fly .cop:not(.eq){opacity:1}
.flipper.side{display:inline-flex;flex:0 0 auto;flex-direction:row;align-items:center;gap:0}   /* "A = ( … )": the name sits left of the matrix */
.flipper.side .flip-l,.flipper.side .flip-eq{font-size:24px;color:var(--ink)}
.flipper.side .flip-l{order:1;margin-right:.3em;min-height:0}   /* room for the t, so "=" never moves */
.flipper.side .flip-eq{order:2;margin-left:.12em;margin-right:8px}
.flipper.side .flip-box{order:3}
.stage-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stage-pair > .stage{margin:0;justify-content:center}
@media (max-width:640px){.stage-pair{grid-template-columns:1fr}}
.mx-join{display:inline-flex;align-items:stretch;gap:6px}   /* B = ( 5 2 / 7 0 ) followed by empty spots outside the bracket */
.mx.bare > .par{visibility:hidden;width:0}
.story.given.one-line{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 24px}   /* formula and matrices in one line */
.story.given.one-line .given-m{padding:0;gap:14px 24px}
.story.given.grey.one-line .given-t{font-size:24px}   /* a formula on its own ("C = A + B") is as big as "A =" */

/* Oct 31: the name under a matrix (A, B, C) no longer counts for the line's height, so "=", "+", "→" and "k ·" sit at the matrix's middle */
.opm-l{position:absolute;top:100%;left:0;right:0;text-align:center;margin-top:8px}
.op-stage .eqline{padding-bottom:40px;row-gap:52px}   /* when a line wraps (phone), the name under a matrix keeps its room */
/* playScalar (Oct 31): A's cells keep room for "k·" from the start, so the matrix never changes size */
.sc-stage [data-m="a"] .mx-c{min-width:2.9em;justify-content:center;display:inline-flex;align-items:baseline}
.sc-stage [data-m="a"] .mx-c,.sc-stage [data-m="c"] .mx-c{transition:background .45s ease,color .45s ease,border-color .45s ease}
.sc-stage .mx-c.instant,.sc-k.instant{transition:none!important}
.k-pre{display:inline-block;max-width:0;overflow:visible;white-space:nowrap;transition:max-width .5s cubic-bezier(.45,.05,.3,1)}
.k-pre.open{max-width:1.3em}
.k-pre .k-n,.k-pre .k-dot{opacity:0;transition:opacity .3s ease}
.k-pre.on .k-n{opacity:1;transition:none}   /* the flying copy is removed exactly where this one is */
.k-pre.on .k-dot{opacity:1;transition:none}   /* the "·" arrives on the flying copy, so it is swapped in at the same moment as the k */
.fly-dot{opacity:0;margin:0 .08em}   /* same spacing as the "·" it is swapped for */
.k-pre .k-dot{margin:0 .08em}
.sc-stage .wh-in,.sc-stage [data-m="c"] .num-in{animation:whIn .45s ease}
.sc-stage [data-m="c"] .mx-c{border:2px dashed transparent}   /* the dashed frame fades out instead of vanishing, and the slot never changes size */
.sc-stage [data-m="c"] .mx-c.empty{border-color:var(--line-strong)}

/* playMerge (Oct 31): "k·p" in a cell, merging into the result */
.mg{position:relative;display:inline-flex;align-items:baseline;white-space:nowrap}
.mg-k{color:inherit}   /* digits are always black */
.mg-r{position:absolute;left:0;right:0;text-align:center;opacity:0}
.mg.done .mg-k,.mg.done .mg-p{opacity:0}
.mg.done .mg-r{opacity:1}
.mg-stage .mx > .mx-g{gap:18px 28px}
.mg-s{color:var(--blue)}   /* the scalar is blue (Max, Oct 31) */
.mg-dot{margin:0 .22em}   /* room on both sides of "·", so it never runs into the decimal point */
.mg.pre .mg-k{opacity:0}   /* before the scalars come in */

/* Lesson 7 opening (Oct 31) */
.why-line{gap:14px 22px;justify-content:center}
.sz2-stage{padding-block:30px}
.sz2{display:flex;align-items:flex-start;justify-content:center;gap:34px;font-family:var(--f-math);font-style:italic}
.sz2-col{display:flex;flex-direction:column;align-items:center;gap:10px}
.sz2-L{font-size:40px;line-height:1.1}
.sz2-eq{font-size:36px;line-height:1.2;font-style:normal}
.sz2-s{display:flex;align-items:center;gap:6px;font-family:var(--f-ui);font-style:normal;font-weight:700;color:var(--muted);font-size:17px;transition:font-size .8s cubic-bezier(.45,.05,.3,1),color .8s ease}
.sz2-s .szb{min-width:0;height:auto;padding:2px 6px;border-radius:8px;color:inherit;background:transparent;transition:background .45s ease,color .45s ease,padding .8s cubic-bezier(.45,.05,.3,1),min-width .8s cubic-bezier(.45,.05,.3,1)}
.sz2-s i{font-style:normal}
.sz2.zoom .sz2-s{font-size:30px;color:var(--ink)}   /* zoom in on the sizes */
.sz2.zoom .sz2-s .szb{min-width:46px;padding:4px 10px}
.sz2 .szb.in{background:var(--yellow);color:#12141A}
.sz2 .szb.out{background:#5ED39B;color:#12141A}
.sz2-eq,.sz2-res{opacity:0;transition:opacity .5s ease}
.sz2.res-on .sz2-eq,.sz2.res-on .sz2-res{opacity:1}
.sz2.instant,.sz2.instant *{transition:none!important}
.paper-tag{display:inline-block;align-self:flex-start;width:max-content;margin-bottom:8px;padding:5px 12px;border-radius:10px;background:var(--blue-4);color:var(--blue);font-weight:800;font-size:15px}   /* "✎ Work it out on paper" above a heavy task (Oct 31) */
.mul-stage .calc .ch.wait{background:transparent;transition:none}   /* playMul: a box gets its colour only when its number lands (Oct 31) */
.mul-stage .mx-c.instant{transition:none}

/* Oct 31: row × column, the signs appear one at a time */
.mul-stage .calc .cop:not(.eq){opacity:0;transform:scale(.6);transition:opacity .35s ease,transform .4s cubic-bezier(.2,.7,.3,1)}   /* each sign fades in and grows into place */
.mul-stage .calc .cop.on{opacity:1;transform:none}
/* "Two steps" slide */
.steps2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.step2{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:18px;background:color-mix(in srgb,var(--line) 40%,var(--bg));font-size:17px}
.step2 b{font-size:20px}
.step2-n{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--blue);color:#fff;font-weight:800;font-size:20px;margin-bottom:6px}
@media (max-width:640px){.steps2{grid-template-columns:1fr}}
/* Check the sizes: A₂ₓ₃ · B₃ₓ₄ = C₂ₓ₄ */
.sz3-stage{padding-block:36px 30px}
.sz3{display:flex;align-items:baseline;justify-content:center;gap:18px;font-family:var(--f-math);font-style:italic;font-size:52px}
.sz3-m{display:inline-flex;align-items:baseline}
.sz3-s{display:inline-flex;align-items:baseline;gap:2px;font-size:.5em;font-style:normal;font-family:var(--f-ui);font-weight:700;margin-left:0;transform:translateY(.35em)}
.sz3-s b{display:inline-block;padding:1px 6px;border-radius:8px;transition:background .45s ease}
.sz3-s b.in{background:var(--yellow);color:#12141A}
.sz3-op{position:relative;font-style:normal}
.sz3-ok{position:absolute;left:50%;top:100%;transform:translate(-50%,.25em);font-size:.36em;white-space:nowrap;color:#1E9E5A;font-family:var(--f-ui);font-style:normal;font-weight:800;opacity:0;transition:opacity .4s ease}   /* "3 = 3 ✓" under the "·", between the two inner numbers */
.sz3[data-ok="0"] .sz3-ok{color:var(--red)}
.sz3.ok .sz3-ok{opacity:1}
.sz3-res{display:inline-flex;align-items:baseline;gap:18px;opacity:0;max-width:0;overflow:visible;white-space:nowrap;transition:max-width .8s cubic-bezier(.45,.05,.3,1),margin .8s cubic-bezier(.45,.05,.3,1),opacity .4s ease .4s}   /* starts closed, so A · B sit in the middle */
.sz3.res .sz3-res{opacity:1;max-width:4em}   /* opens: A · B slide left, "= C" fades in once there is room */
.sz3-res{margin-left:0}
.sz3:not(.res) .sz3-res{margin-left:-18px}   /* no gap for the closed part */
.sz3-eq{font-style:normal}
.sz3-t{opacity:0}
.sz3-t.on{opacity:1}
.sz3.instant,.sz3.instant *{transition:none!important}
.sz3-s b.bad{background:var(--red-bg);color:var(--red)}
.sz3-s i{font-style:normal;margin:0 2px}
.sz3-x{transition:opacity .3s ease}
.sz3-s i.sz3-x{display:inline-block}
.sz3-stage{flex-direction:column;align-items:center;gap:18px;padding-block:30px 22px}
.sz3-stage + .sz3-stage{margin-top:14px}
.sz3-cap{font-size:18px;min-height:1.5em;opacity:0;transition:opacity .35s ease;text-align:center}
.sz3-cap.show{opacity:1}
.sz3.fade{opacity:0;transition:opacity .5s ease}
.sz3-mini{font-size:38px;padding-bottom:22px}
.c-wait{opacity:0}
[data-m="c"]{transition:opacity .5s ease}
[data-m="c"].instant{transition:none}
.mul-stage .calc{min-height:80px}
.sz3-stage .sz3{padding-bottom:34px}   /* room for "3 = 3 ✓" under the "·" so it never touches the caption */
.sz3-stage{position:relative}

/* B's columns in their own colours (Oct 31) */
.mx-c.qt1{background:color-mix(in srgb,#7FA6FF 30%,transparent)}.mx-c.qt2{background:color-mix(in srgb,#B58CFF 30%,transparent)}.mx-c.qt3{background:color-mix(in srgb,#FF9F70 30%,transparent)}
.mx-c.q1,.calc .ch.q1{background:#7FA6FF;color:#12141A}.mx-c.q2,.calc .ch.q2{background:#B58CFF;color:#12141A}.mx-c.q3,.calc .ch.q3{background:#FF9F70;color:#12141A}
.mul-stage .mx-c{transition:background .45s ease}
/* "Every entry is a row times a column": a title and the work area inside the grey box, matrices start in the middle */
.mul-full .mul-top{height:150px;display:flex;flex-direction:column;align-items:center;gap:6px}
.mul-title{font-size:19px;min-height:1.5em;opacity:0;transition:opacity .3s ease}
.mul-title.show{opacity:1}
.mul-title b{color:var(--blue)}
.mul-full .mul-eq{transition:transform .8s cubic-bezier(.45,.05,.3,1)}
.mul-full.mid .mul-eq{transform:translateY(-75px)}
.mul-full.instant .mul-eq,.mul-full.instant .mul-title{transition:none}
.mul-full .calc{min-height:0;height:110px;align-items:flex-start}
.mul-full .calc .sz3-mini{padding-top:4px}
.c-eq{transition:opacity .5s ease}
.mul-full.instant .c-eq{transition:none}
.sz3-cap{line-height:1.5}
.sz3-cap{height:1.5em;overflow:visible}   /* fixed height: the plate never grows by a pixel when the caption appears */

/* Oct 31 (Max: text was appearing "cut"): every line here fades out fully before it changes, and rises in softly */
.sz3-cap{opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.sz3-cap.show{opacity:1;transform:none}
.mul-title{transform:translateY(6px);transition:opacity .35s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.mul-title.show{transform:none}
.sz3-ok{transform:translate(-50%,calc(.25em + 6px));transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.sz3.ok .sz3-ok{transform:translate(-50%,.25em)}
.sz3-s{transform:translateY(.22em);margin-left:.04em}
.sz3-x{transform:scale(.6)}
.sz3-x.on{transform:none;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.3,1)}

/* rows of A in their own colours (Oct 31) */
.mx-c.rt1{background:color-mix(in srgb,#F2C230 30%,transparent)}.mx-c.rt2{background:color-mix(in srgb,#FF8FB1 30%,transparent)}.mx-c.rt3{background:color-mix(in srgb,#FFC98A 30%,transparent)}
.mx-c.r1,.calc .ch.r1{background:#F2C230;color:#12141A}.mx-c.r2,.calc .ch.r2{background:#FF8FB1;color:#12141A}.mx-c.r3,.calc .ch.r3{background:#FFC98A;color:#12141A}
/* "= C" starts closed, so A and B sit in the middle; it opens after step 1 (Oct 31) */
.c-res{display:inline-flex;align-items:center;gap:20px;max-width:600px;overflow:hidden;white-space:nowrap;padding-bottom:40px;margin-bottom:-40px;transition:max-width .9s cubic-bezier(.45,.05,.3,1),margin-left .9s cubic-bezier(.45,.05,.3,1),opacity .5s ease .45s}
.c-res.c-wait{max-width:0;margin-left:-20px;opacity:0}
.mul-full.instant .c-res{transition:none}
.mul-full .mul-eq{flex-wrap:nowrap}   /* A and B stay side by side while "= C" is still closed */

/* Σ with its limits sits on the formula's middle line, like the other terms (Oct 31) */
.rule-f.sumf{align-items:center}
.sumf .sig{align-self:center;line-height:1;margin:0 2px}
.sumf .sig small{line-height:1.1}
.mul-full + .rule-box{margin-top:6px}
.mul-full .calc{align-items:center}   /* the work line sits in the middle between the step title and the matrices (Oct 31) */
.mul-full .mul-title{margin-top:4px}

/* Lesson 1.8: determinant and inverse (Oct 31) */
.det-bars{display:inline-flex;align-items:stretch;gap:6px;vertical-align:middle}
.det-bars .dbar{width:2px;background:currentColor;border-radius:1px}
.det-bars .dg2{display:grid;grid-template-columns:auto auto;gap:2px 14px;padding:4px 2px;font-size:.8em;line-height:1.1}
.det-stage{flex-direction:column;gap:6px;padding-top:12px}
.det-stage .calc{gap:12px}
.det-stage .calc .ch.wait{background:transparent;transition:none}
.det-stage .calc .cop:not(.eq){opacity:0;transform:scale(.6);transition:opacity .35s ease,transform .4s cubic-bezier(.2,.7,.3,1)}
.det-stage .calc .cop.on{opacity:1;transform:none}
.det-stage .mx-c{transition:background .45s ease}
.m8-stage{flex-direction:row;flex-wrap:wrap;gap:28px;align-items:center;justify-content:center}
.m8-area{width:340px;max-width:100%;height:auto}
.m8-grid line{stroke:var(--line-strong);stroke-width:1}
.m8-par{fill:color-mix(in srgb,#7FA6FF 35%,transparent);stroke:none}
line.m8-u,line.m8-v{stroke-width:3.5;stroke-linecap:round}
.m8-u{stroke:#2F4CDD;fill:#2F4CDD}.m8-v{stroke:#8E5FE8;fill:#8E5FE8}
text.m8-lab{font:600 15px var(--f-ui);stroke:none}
text.m8-lab.m8-u{fill:#2F4CDD}text.m8-lab.m8-v{fill:#7B4FD6}
.m8-ar{font:italic 500 26px var(--f-math);fill:#12141A}
.m8-rules .rule-f + .rule-f{margin-top:0}
.fr{display:inline-grid;grid-template-rows:auto auto;text-align:center;vertical-align:middle;font-size:.72em;line-height:1.1;margin:0 3px}
.fr i{font-style:inherit;display:block;padding:0 3px}
.fr i:last-child{border-top:1.5px solid currentColor}   /* the bar is as wide as the wider of the two lines */
.neg{opacity:0;transition:opacity .45s ease}
.neg.on{opacity:1}
.mx.sym .mx-c{font-style:italic}

/* lesson 1.8 fixes (Oct 31) */
.rule-f.det-f,.rule-f.inv-f{align-items:center}
.inv-f{justify-content:center;gap:12px}
.det-stage .calc .det-l{font-size:.85em;margin-right:4px}
.mx-c.c1{background:color-mix(in srgb,#7FA6FF 35%,transparent)}.mx-c.c2{background:color-mix(in srgb,#B58CFF 35%,transparent)}
.m8-rules .m8-note{margin:-6px 4px 0;font-size:16px}   /* sits right under the det(cA) plate it explains */
.m8-warn{margin:6px 2px 0;font-size:17px}
.big-fr .fr{font-size:1em}
.nv{position:relative;display:inline-block}
.opt .fr{font-size:.85em}   /* a fraction in an answer option, in the maths font like the other options */
.rule-f .fr{font-size:.85em}   /* fractions in formula plates are easy to read */
.m8-side{stroke-width:2.5;stroke-linecap:round;opacity:.75}
.m8-col path{fill:none;stroke-width:1.6}
.m8-col text{font:italic 500 18px var(--f-math);stroke:none}
.m8-col.m8-u text{fill:#2F4CDD}.m8-col.m8-v text{fill:#7B4FD6}
.m8-col.m8-u path{stroke:#2F4CDD}.m8-col.m8-v path{stroke:#7B4FD6}

/* lesson 1.8 rebuild (Oct 31, Max): det on one line with straight bars; the inverse step by step inside the box */
.dl{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-math);font-style:italic;font-size:24px;white-space:nowrap}
.dl-l,.dbx,.dl .cop,.dl .rb,.dl-ok{opacity:0;transition:opacity .4s ease}
.dl .cop{transform:scale(.7);transition:opacity .35s ease,transform .4s cubic-bezier(.2,.7,.3,1)}
.dl-l.on,.dbx.on,.dl .cop.on,.dl .rb.on,.dl-ok.on{opacity:1;transform:none}
.dl-l{margin-right:2px}
.dbx{display:inline-flex;align-items:stretch;gap:3px}
.dbx .dbar{width:2.5px;background:currentColor;border-radius:2px}
.dbx .dg{display:grid;grid-template-columns:auto auto;gap:3px 4px;padding:3px 1px}
.dbx .mx-c{min-width:34px;padding:2px 5px;font-size:22px;transition:background .45s ease}
.dl .mx-c.gh{color:transparent}
.dl .ch{min-width:40px;height:44px;padding:0 7px;border-radius:11px;display:grid;place-items:center;font-weight:700;font-variant-numeric:tabular-nums;color:#12141A}
.dl .ch.gh{color:transparent;background:transparent}
.dl .ch.p1{background:var(--yellow)}.dl .ch.q1{background:#7FA6FF}.dl .ch.rb{background:#5ED39B}
.dl-ok{font-family:var(--f-ui);font-style:normal;font-size:17px;font-weight:700;color:#1E9E5A;margin-left:4px}
.dt-stage{flex-direction:column;gap:8px;padding:26px 16px 18px}
.dt-row{flex-wrap:nowrap;justify-content:center;gap:26px;font-size:22px}
.dt-a{display:inline-flex;align-items:center;gap:10px}
.dt-a .mx-c{min-width:36px}
.dt-stage .mx-c{transition:background .45s ease}
.inv-stage{flex-direction:column;gap:18px;padding:18px 16px 20px}
.inv-stage .eqline{gap:12px;justify-content:center;flex-wrap:nowrap}
.inv-title{text-align:center}
.inv-l,.inv-k,.inv-dot,.inv-mw,.inv-res{opacity:0;transition:opacity .5s ease}
.inv-l.on,.inv-k.on,.inv-dot.on,.inv-mw.on,.inv-res.on{opacity:1}
.inv-stage.instant *{transition:none!important}
.inv-k .fr{font-size:.9em}
.inv-den.gh{color:transparent}
.inv-res{display:inline-flex;align-items:center;gap:12px}
.inv-m .mx-c,.inv-out .mx-c{min-width:2.5em;display:grid;place-items:center;transition:background .45s ease}
.inv-m .mx-c.gh{color:transparent}
.inv-out .mx-c{opacity:0;transform:translateY(5px);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.inv-out .mx-c.on{opacity:1;transform:none}
.inv-out .fr{font-size:.75em}
/* the minus grows in front of the number, so "−2" stays centred in its cell the whole time */
.nv{display:inline-flex;align-items:baseline}
.ng{display:inline-block;max-width:0;opacity:0;overflow:hidden;transition:max-width .55s cubic-bezier(.45,.05,.3,1),opacity .45s ease .1s}
.ng.on{max-width:.7em;opacity:1}
.in-fr{font-size:1em;font-family:var(--f-math);font-style:italic}
.in-fr i:last-child{padding-top:4px}
.in-fr input.num{width:64px}
.m8opt .mx.sm{font-size:20px}
.bins.two{grid-template-columns:1fr 1fr}
.inv-k .fr{font-size:1.05em}
.inv-den{border-top-color:var(--ink)!important}
.inv-a .mx-c{padding:2px 8px}
.inv-a .mx-g{padding:4px 6px}
.dt-a .mx-c{padding:2px 8px}
.dbx .dg{padding:3px 4px}

/* Oct 31: the tap task is the heading; only the target changes */
.sp-h{min-height:1.3em}
.sp-swap{display:inline-grid;vertical-align:baseline}
.sp-swap > span{grid-area:1/1;justify-self:start}
.sp-new{animation:spIn .5s cubic-bezier(.2,.7,.3,1) .2s both}
.sp-old{animation:spOut .3s cubic-bezier(.4,0,.6,1) forwards;pointer-events:none}
@keyframes spIn{0%{opacity:0;transform:translateY(.55em) scale(.9)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes spOut{to{opacity:0;transform:translateY(-.5em) scale(.9)}}
.sp-row{margin-top:-6px}

/* Lesson 1.8 · Sums and averages with products (Oct 31) */
b.one{font-family:var(--f-ui);font-style:normal;font-weight:800}
.opm-l b.one{font-size:1em}
.sa-arrow{font-family:var(--f-ui);font-style:normal;color:var(--muted);margin:0 12px}
.rule-f .sa-arrow + span{font-family:var(--f-ui);font-style:normal;font-size:17px}
.sort-x{font-family:var(--f-math);font-style:italic;font-size:22px;padding:6px 10px;white-space:nowrap}
.sort-x .fr{font-size:.72em}

/* lesson 1.8 rebuild (Oct 31 evening): matrices of ones named by size, size reasoning animation */
.one + sub,b.one + sub{font-family:var(--f-ui);font-style:normal;font-size:.55em;font-weight:600;margin-left:1px}
.bins.five{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:700px){.bins.five{grid-template-columns:repeat(2,minmax(0,1fr))}}
.os-stage{flex-direction:column;gap:10px;padding:20px 16px 22px}
.os-title{text-align:center}
.os-why{min-height:2.9em;max-width:560px;text-align:center;font-size:16px;color:var(--ink);opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .5s cubic-bezier(.2,.7,.3,1)}
.os-why.show{opacity:1;transform:none}
.os-s b{display:inline-block;min-width:1.5em;text-align:center;padding:2px 4px;border-radius:8px;color:var(--ink);transition:background .45s ease,color .3s ease}
.os-s b.q{color:var(--muted);background:color-mix(in srgb,var(--line) 70%,transparent)}
.os-s b.in{background:var(--yellow);color:#12141A}.os-s b.out{background:#5ED39B;color:#12141A}
.os-ones:not(.on),.os-r:not(.on){opacity:0}
.os-op{color:var(--ink)}
.sa-sz{font-family:var(--f-ui);font-style:normal;font-size:16px;font-weight:700;color:var(--muted);padding:2px 6px;border-radius:8px;background:color-mix(in srgb,var(--line) 60%,transparent);margin:0 2px;white-space:nowrap}
.sa-sz.sa-out{background:#5ED39B;color:#12141A}
.sa-i{font-style:normal;background:var(--yellow);color:#12141A;border-radius:5px;padding:0 4px}
.sa-szq{gap:10px}
.sa-szin{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-ui);font-style:normal;font-size:20px}
.sa-szin input.num{width:58px}
.sa-chain{gap:12px}
.sa-chs{display:inline-flex;align-items:center;font-family:var(--f-ui);font-style:normal;font-size:18px}
.sa-steps{display:flex;flex-direction:column;gap:10px}
.sa-steps > div{display:flex;align-items:center;gap:12px}

/* lesson 1.8 · size reasoning v2 (Oct 31 evening): sizes as subscripts at the bottom right; matrices of ones always written out */
.os-top{justify-content:center;margin:2px 0 4px}
.os-top .mx-c{transition:background .45s ease}
.os-line{display:flex;align-items:center;gap:16px;font-family:var(--f-math);font-style:italic;font-size:30px;min-height:120px;opacity:0;transition:opacity .5s ease}
.os-line.on{opacity:1}
.os-m{display:inline-flex;align-items:flex-end;gap:2px;transition:opacity .5s ease}
.os-s{font-family:var(--f-ui);font-style:normal;font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:2px;color:var(--muted);margin-bottom:-6px}
.os-s b{min-width:1.35em;padding:1px 3px;border-radius:7px}
.os-slot{display:grid;align-items:center;justify-items:center}
.os-slot > *{grid-area:1/1}
.os-ph{align-self:stretch;justify-self:stretch;border:2px dashed var(--line-strong);border-radius:12px;transition:opacity .5s ease}
.os-slot .mx{opacity:0;transition:opacity .6s ease}
.os-m.done .os-ph{opacity:0}.os-m.done .os-slot .mx{opacity:1}
.os-stage.instant *{transition:none!important}
.mx.xs{font-size:15px;vertical-align:middle}
.mx.xs > .mx-g{margin:0 8px;gap:0 4px;padding:2px 1px}
.mx.xs .mx-c{min-width:0;padding:0 2px;line-height:1.2;font-weight:700}
.mx.xs > .par{width:8px}
.sa-o{display:inline-flex;vertical-align:middle;margin:0 2px}
.sa-ph{display:inline-block;width:44px;height:84px;border:2px dashed var(--line-strong);border-radius:10px;vertical-align:middle}
.sa-szq .sa-szin{align-self:flex-end;margin-bottom:-14px;font-size:16px}
.sa-szq .sa-szin input.num{width:50px;height:40px}
.sa-szq .sa-sz{align-self:flex-end;margin-bottom:-8px;background:none;padding:0}
.sa-szq{gap:4px}
.sa-szq > .ent{margin:0 6px}

/* lesson 1.8 v3 (Oct 31 night): letters with subscript sizes; matrices of ones are given as B = (…) */
.os-line{min-height:70px}
.os-m .ent{font-size:1em}
.os-res{display:flex;align-items:center;justify-content:center;gap:40px;min-height:110px;opacity:0;transition:opacity .6s ease}
.os-res.on{opacity:1}
.os-res .eqline{font-size:22px}
sub.sa-sub{font-family:var(--f-ui);font-style:normal;font-size:.55em;font-weight:700;vertical-align:-.45em;margin-left:1px;color:var(--ink)}
.sa-chain sub.sa-sub{font-size:15px}
.sa-szq{gap:6px;align-items:baseline}
.sa-szq .ent{font-size:30px}
.sa-szq sub.sa-sub{font-size:17px}
.sa-dot{margin:0 8px}
.sa-subin{display:inline-flex;align-items:center;gap:3px;font-family:var(--f-ui);font-style:normal;font-size:16px;font-weight:700;transform:translateY(16px);margin-left:2px}
.sa-subin input.num{width:48px;height:42px;font-size:18px;padding:0}

/* Play gate (Oct 31): the animation waits under a blurred, dimmed box until Play is pressed */
.stage.gated > *:not(.play-ov),.stage.ungating > *:not(.play-ov){transition:filter .45s ease,opacity .45s ease}
.stage.gated > *:not(.play-ov){filter:blur(4px);opacity:.45;pointer-events:none}
.play-ov{position:absolute;inset:0;z-index:6;display:grid;place-items:center;border:0;border-radius:inherit;background:color-mix(in srgb,#12141A 22%,transparent);cursor:pointer;transition:opacity .4s ease}
.play-ov.gone{opacity:0;pointer-events:none}
.play-btn{display:grid;place-items:center;color:#fff;filter:drop-shadow(0 2px 6px rgba(18,20,26,.35));transition:transform .15s ease}
.play-ov:hover .play-btn{transform:scale(1.08)}
.play-ov:active .play-btn{transform:scale(.92)}

.sa1-b{display:inline-flex;opacity:0;transform:translateX(18px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.sa1-b.on{opacity:1;transform:none}

/* lesson 1.8 slide 1 v2: by hand vs with a product, no subtitles */
.sa1-stage{flex-direction:column;align-items:stretch;gap:8px;padding:22px 26px}
.sa1-row{display:flex;align-items:center;gap:18px;min-height:64px}
.sa1-lab{flex:0 0 140px;font-weight:800;font-size:15px;color:var(--blue);opacity:0;transition:opacity .4s ease}
.sa1-lab.on{opacity:1}
.sa1-sum{display:flex;align-items:center;gap:12px;font-family:var(--f-math);font-style:italic;font-size:30px}
.sa1-p{opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.sa1-p.on{opacity:1;transform:none}
.sa1-p.ch{min-width:56px;height:52px;display:grid;place-items:center;border-radius:12px;font-weight:700;color:#12141A}
.sa1-row .calc{flex:1;justify-content:flex-start;height:64px}
.sa1-eq{justify-content:center;opacity:0;transition:opacity .5s ease}
.sa1-eq.on{opacity:1}
.sa1-p.ch.p3{background:#5ED39B}

/* lesson 1.8 · playOS2 scenes (Oct 31 night) */
.os2-stage{flex-direction:column;gap:4px;padding:20px 16px 26px;overflow:hidden}
.os2-title{text-align:center;min-height:1.5em}
.os2-line{justify-content:center;flex-wrap:nowrap;gap:14px;min-height:150px}
.os2-w{display:inline-flex;align-items:flex-end;gap:2px}
.os2-a{transition:transform .9s cubic-bezier(.45,.05,.3,1);transform-origin:center}
.os2-a.instant{transition:none}
.os2-b,.os2-c,.os2-op{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.3,1)}
.os2-b.on,.os2-c.on,.os2-op.on{opacity:1;transform:none}
.os2-sub{font-family:var(--f-ui);font-style:normal;font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:2px;color:var(--muted);margin-bottom:-4px;opacity:0;transition:opacity .4s ease}
.os2-sub.on{opacity:1}
.os2-sub b{min-width:1.3em;padding:1px 3px;border-radius:7px;text-align:center;color:var(--ink);transition:background .45s ease}
.os2-sub b.q{color:var(--muted);background:color-mix(in srgb,var(--line) 70%,transparent)}
.os2-sub b.in{background:var(--yellow);color:#12141A}.os2-sub b.out{background:#5ED39B;color:#12141A}
.os2-b .os-slot .mx{opacity:0;transition:opacity .6s ease}
.os2-b.done .os-slot .mx{opacity:1}.os2-b.done .os-ph{opacity:0}
.os2-b .os-ph{min-width:44px}
.os2-stage.instant *{transition:none!important}
.os2-sum{position:absolute;transform:translate(0,-50%) translateX(-8px);font-family:var(--f-math);font-style:italic;font-size:24px;font-weight:700;padding:4px 12px;border-radius:12px;color:#12141A;opacity:0;white-space:nowrap;transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.3,1);z-index:2}
.os2-sum.down{transform:translate(-50%,0) translateY(-8px);font-size:20px;padding:3px 8px}
.os2-sum.on{opacity:1;transform:translate(0,-50%)}
.os2-sum.down.on{transform:translate(-50%,0)}
.os2-sum.r1{background:#F2C230}.os2-sum.r2{background:#FF8FB1}.os2-sum.q1{background:#7FA6FF}.os2-sum.q2{background:#B58CFF}.os2-sum.q3{background:#FF9F70}
.os2-stage[data-mode="l"] .os2-sum.down{font-size:15px;padding:2px 6px}
.os2-stage[data-mode="l"] .os2-b .os-ph{min-width:70px}
.os2-stage[data-mode="l"] .os2-w{gap:0}
.os2-stage[data-mode="l"] .os2-b .os-ph{min-width:60px}

/* playOS2 v2 (Oct 31 night): labels go away when A moves aside; sizes don't count for centring; a bolder multiplication dot */
.os2-a{transform-origin:0 0}
.os2-a .cl,.os2-a .rl{transition:opacity .4s ease}
.os2-a.labfade .cl,.os2-a.labfade .rl{opacity:0}
.os2-a.nolab .cl,.os2-a.nolab .rl{font-size:0;padding:0;height:0;width:0;overflow:hidden}
/* (row-gap kept: removing it squeezed the rows together, Max) */
.os2-w{position:relative;margin-right:46px}
.os2-sub{position:absolute;left:100%;bottom:-8px;margin:0 0 0 2px;white-space:nowrap}
.os2-line{align-items:center}
.os2-op{display:inline-flex;align-items:center;justify-content:center;min-width:14px}
.os2-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:currentColor}

/* sizes under the matrices with a curved arrow (Oct 31 night, Max) */
.os2-w{margin-right:0}
.os2-sub{position:absolute;left:50%;top:100%;bottom:auto;transform:translateX(-50%);margin:4px 0 0;display:inline-flex;align-items:flex-end;gap:3px;color:var(--ink);font-size:14px}
.os2-arr{color:var(--ink);margin-right:2px;align-self:flex-start;margin-top:-6px}
.os2-szt{font-weight:600;color:var(--muted);margin-right:3px}
.os2-line{margin-bottom:46px}
.os2-stage{padding-bottom:30px}
.os2-stage[data-mode="l"] .os2-line{gap:14px}
.os2-sub{flex-direction:row;align-items:center}

/* lesson 1.8: drag & drop into the two places of a product; the total in two steps (Oct 31 night) */
.bins.dotlay{grid-template-columns:1fr 44px 1fr;align-items:center}
.bins.dotlay .bin[data-bin="x"]{grid-column:1 / -1;height:150px}
.bin-dot{display:grid;place-items:center}
.bin-dot i{display:block;width:10px;height:10px;border-radius:50%;background:var(--ink)}
.bin-drop .sort-item .sort-x{font-size:18px}
.sort-x{display:inline-flex;align-items:center}
.sort-x .ent + .mx{margin-left:6px}
.tot-stage{flex-direction:column;gap:4px;padding:16px 16px 40px}
.tot-title{opacity:1;text-align:center}
.tot-line{justify-content:center;gap:16px;flex-wrap:nowrap}
.tot-w{margin-bottom:24px;align-items:center}
.tot-l{margin-right:8px;align-self:center}
.tot2{opacity:.35;transition:opacity .6s ease}
.tot2.on{opacity:1}
.tot-line .os2-op{opacity:1;transform:none}
/* playOS2: A is hidden until it has been put in the middle, then fades in there (Oct 31, Max) */
.os2-stage:not(.ready) .os2-a{opacity:0}
.os2-stage .os2-a{transition:transform .9s cubic-bezier(.45,.05,.3,1),opacity .5s ease}
.os2-stage.instant .os2-a{transition:none}
.os2-stage .os2-a.instant{transition:none}

/* Oct 31 night (Max): the animation sits lower (less empty grey below); size highlights get their own colours, not the green of results */
.os2-line{margin-top:34px;margin-bottom:34px}
.os2-stage{padding-bottom:14px}

/* a letter with its size right at its bottom right, in the maths font (Oct 31 night, Max) */
.sa-nm{display:inline-flex;align-items:baseline;white-space:nowrap}
sub.sa-sub{font-family:var(--f-math);font-style:normal;font-weight:500;font-size:.58em;vertical-align:baseline;position:relative;top:.35em;margin-left:.06em}
.sa-szq sub.sa-sub{font-size:18px}
.sa-nm .sa-subin{margin-left:3px}

/* playOS2 v5 (Oct 31 night): calm and centred */
.os2-stage{min-height:430px;justify-content:flex-start}
.os2-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
.os2-line{margin:0 0 34px;min-height:0}
.os2-stage .os2-b,.os2-stage .os2-c,.os2-stage .os2-op{opacity:1;transform:none}
.os2-g{display:inline-flex;align-items:center;gap:14px;max-width:0;opacity:0;overflow:hidden;transition:max-width .9s cubic-bezier(.45,.05,.3,1),opacity .6s ease .15s}
.os2-g.open{opacity:1}
.os2-g.vis{overflow:visible}
.os2-gb{margin:0 0 0 14px}.os2-stage[data-mode="l"] .os2-gb{margin:0 14px 0 0}
.os2-gc{margin-left:14px}
.os2-stage .os2-a{transform-origin:center center;transition:transform .9s cubic-bezier(.45,.05,.3,1),opacity .5s ease}
.os2-a .cl,.os2-a .rl{transition:opacity .4s ease,font-size .9s cubic-bezier(.45,.05,.3,1),padding .9s cubic-bezier(.45,.05,.3,1)}
.os2-a.nolab .cl,.os2-a.nolab .rl{font-size:0;padding:0;width:auto;height:auto}
.os2-sub{opacity:0;transition:opacity .5s ease}
.os2-sub.on{opacity:1}
.os2-sub b.q{color:var(--muted);background:color-mix(in srgb,var(--line) 70%,transparent)}
.os2-sub b.in{background:var(--yellow);color:#12141A}.os2-sub b.out{background:#5ED39B;color:#12141A}
.os2-b .os-ph{min-width:46px}
.os2-stage .os2-line{gap:0}
.os2-stage[data-mode="l"] .os2-line{gap:0}
.os2-g.instant{transition:none!important}

/* every "size" label in a product line sits on one common line under the tallest matrix (Oct 31 night, Max) */
.os2-line,.tot-line{align-items:stretch}
.os2-g{align-self:stretch;align-items:stretch}
.os2-w{align-self:stretch;align-items:center}
.os2-op{align-self:center}
.os2-sub{top:100%;bottom:auto}
.tot-w{margin-bottom:0}
.tot-line{margin-bottom:36px}
.os2-g{transition:max-width .9s cubic-bezier(.45,.05,.3,1),opacity .5s ease .4s}   /* the content shows only once the part is mostly open: no clipped wipe (Oct 31, Max) */
.bins.dotlay .bin{height:170px}
.hint-cur svg{transition:transform .15s ease}
.hint-cur.press svg{transform:scale(.88)}
.hint-cur svg{transform-origin:4px 2px}
.sa-whole{justify-content:center;gap:12px;flex-wrap:nowrap}
.sa-whole .os2-op{display:inline-flex}
.mx-c.sa-big{display:grid;place-items:center;min-width:56px;height:52px;font-family:var(--f-math);font-style:italic;font-size:26px}
.sa-whole .os2-op{opacity:1;transform:none}

/* labels on a matrix in a product animation, folded away before counting (lesson 8, weighted averages) */
.sa-lab .cl,.sa-lab .rl{transition:opacity .4s ease,font-size .8s cubic-bezier(.45,.05,.3,1),padding .8s cubic-bezier(.45,.05,.3,1)}
.sa-lab.labfade .cl,.sa-lab.labfade .rl{opacity:0}
.sa-lab.nolab .cl,.sa-lab.nolab .rl{font-size:0;padding:0}
.mul-stage.instant .sa-lab .cl,.mul-stage.instant .sa-lab .rl{transition:none}
.sa-w-stage [data-m="c"] .mx-c{min-width:2.6em;display:grid;place-items:center}   /* the result slots are as wide as "7.2": nothing moves when it lands */
/* ---- Practice 1 (Oct 31): formula with two cases, three baskets ---- */
.p1-cases{display:flex;align-items:center;justify-content:center;gap:4px;font-size:24px;padding:4px 0}
.p1-cases > .ent{font-family:var(--f-math);font-style:italic}
.p1-br{width:14px;align-self:stretch;margin:0 6px 0 8px;color:var(--ink)}
.p1-cl{display:grid;grid-template-columns:auto auto;gap:6px 22px;align-items:baseline}
.p1-if{font-size:20px;color:var(--ink)}
.bins.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.p1-row{gap:14px 34px;flex-wrap:wrap}
.p1-pair{display:inline-flex;align-items:center;gap:12px}
.bins.three .bin > b{font-size:19px}
@media (max-width:700px){.bins.three .bin > b{font-size:14px}}
.p1-gt{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 0}
.p1-sep{margin:0 14px 0 2px}
.p1-gap{width:40px}
/* drills in their own card under the lessons (Oct 31 night) */
.lcol{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:12px}
.lcol .lessons{flex:none;padding:0;overflow:hidden}   /* no extra space above the first row / below the last (Max, Nov 1) */
.lgrp{font-size:20px;margin:0 6px}   /* back at the left (Max, Nov 1) */
.lcol .lessons + .lgrp{margin-top:20px}
.lcol ~ .side{margin-top:42px}   /* the side card lines up with the Lessons card, not with its heading */
/* practice lessons 10–12 (Nov 1): options with formulas stay on one line; smaller on phones */
.p2-ko .opt:not(.txt) .opt-l{white-space:nowrap}
@media (max-width:700px){.p2-ko .opt{padding:12px 8px}.p2-ko .ent{font-size:19px}.p2-ko .opt.txt{font-size:15px}}
/* ---- Unit 6 · lesson 1 (Nov 1): the function machine, small tables ---- */
.f1-mach{display:flex;flex-direction:column;align-items:center;gap:18px;padding:44px 16px 24px}
.f1-row{display:flex;align-items:center;justify-content:center;gap:18px}
.f1-in{display:flex;flex-direction:column;gap:14px}
.f1-v{display:flex;align-items:center;gap:8px;font-size:26px;opacity:0;transform:translateY(6px);transition:opacity .55s ease,transform .55s cubic-bezier(.45,.05,.3,1)}
.f1-v.on{opacity:1;transform:none}
.f1-n{display:inline-block;min-width:40px;text-align:center;padding:2px 8px;border-radius:10px}
.f1-n.c1,.f1-s .n.c1{background:var(--yellow)} .f1-n.c2,.f1-s .n.c2{background:#7FA6FF}
.f1-arr{font-size:28px;color:var(--muted)}
.f1-box{border:2px solid var(--line-strong);border-radius:18px;background:var(--surface);padding:12px 22px 16px;text-align:center}
.f1-boxw{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:-34px}   /* f stands above the box (Max, Nov 2) */
.f1-name{font-size:30px;line-height:1.1}
.f1-rule{font-size:28px;white-space:nowrap}
.f1-s{display:inline-grid;vertical-align:baseline}
.f1-s > i{grid-area:1/1;font-style:inherit;text-align:center;border-radius:10px;padding:0 6px}
.f1-s .l{transition:opacity .3s ease;padding:0;justify-self:end} .f1-s.fade .l{opacity:0}
.f1-s .n{opacity:0} .f1-s.got .n{opacity:1}
.f1-box{position:relative}
.f1-res{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;font-size:28px}   /* only the start point of the result's flight: the box shows 3² + 2 and nothing else */
.f1-s[data-s="y"] .l{justify-self:start}   /* y stays next to the "+" before its number arrives */
.f1-r{display:inline-block;padding:0 6px;border-radius:10px;background:#5ED39B}
.f1-out{display:flex;align-items:center;gap:8px;font-size:26px}
.f1-z{display:inline-block;min-width:52px;text-align:center;padding:2px 8px;border-radius:10px;background:color-mix(in srgb,var(--line) 70%,var(--surface));color:transparent;transition:background .45s ease}
.f1-z.got{background:#5ED39B;color:var(--ink);transition:none}
.f1-sum{font-size:26px;opacity:0;transform:translateY(6px);transition:opacity .55s ease,transform .55s cubic-bezier(.45,.05,.3,1)}
.f1-sum.on{opacity:1;transform:none}
.f1-two{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:24px}
.f1-tab{border-collapse:collapse;margin:0 auto;font-family:var(--f-math);font-style:italic;font-size:22px}
.f1-tab th{font-weight:500;padding:6px 22px;border-bottom:2px solid var(--line-strong)}
.f1-tab td{text-align:center;padding:6px 22px}
.f1-tab td + td,.f1-tab th + th{border-left:2px solid var(--line)}
@media (max-width:700px){.f1-row{gap:8px}.f1-v,.f1-out{font-size:20px}.f1-rule{font-size:22px}.f1-name{font-size:24px}.f1-box{padding:10px 12px 12px}.f1-arr{font-size:20px}.f1-sum{font-size:22px}}
/* ---- Unit 6 · lesson 2 (Nov 1): 3D pictures ---- */
.g2-stage{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 12px 14px}
@media (max-width:700px){.g2-stage{padding-top:40px}}   /* the step title sits under Replay on phones */
.g2-title{font-size:19px;min-height:1.5em;opacity:0;transform:translateY(6px);transition:opacity .35s ease,transform .5s cubic-bezier(.45,.05,.3,1)}
.g2-title.show{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.45,.05,.3,1)}
.g2-title b{color:var(--blue)}
.g2-svg{display:block;width:100%;max-width:560px;height:auto;overflow:visible;user-select:none}
.g2-layers{display:grid;width:100%;max-width:560px}
.g2-layers > svg{grid-area:1/1;transition:opacity .9s ease}
.g2-layers > svg.instant{transition:none}
.g2-svg text{font-family:var(--f-math);font-style:italic}
.g2-n{font-size:17px;text-anchor:middle;fill:var(--muted)}
.g2-ax{font-size:22px;text-anchor:middle;fill:var(--ink)}
.g2-h{font-size:19px;text-anchor:middle;fill:var(--ink);font-weight:600}
.g2-t{font-size:16px;fill:var(--ink)}
.g2-drag{cursor:grab;touch-action:pan-y}.g2-drag.grab{cursor:grabbing}
.g2-thumbs .opt{padding:8px}
.g2-thumb{max-width:260px}
.g2-topst{display:flex;flex-direction:column;align-items:center;gap:8px}
.g2-top{display:grid;gap:4px;align-items:center}
.g2-sq{width:64px;height:64px;border-radius:10px;background:#EEF0F5;display:grid;place-items:center}
.g2-sq input.num.cell{width:52px;height:48px}
.g2-yl{text-align:center;font-size:20px;color:var(--muted)}
.g2-xl{text-align:center;font-size:20px;color:var(--muted)}
.g2-axn{color:var(--ink);font-size:22px}
/* ---- Unit 6 · lesson 3 (Nov 1): the (x, y) plane, domains ---- */
.d3-st{display:flex;justify-content:center}
.d3-svg{display:block;width:100%;max-width:340px;height:auto;margin:0 auto;color:var(--ink);overflow:visible}
.d3-grid{stroke:var(--line);stroke-width:1}
.d3-ax{stroke:currentColor;stroke-width:1.6}
.d3-axl{font-family:var(--f-math);font-style:italic;font-size:20px;fill:currentColor}
.d3-tk{font-family:var(--f-math);font-style:italic;font-size:15px;fill:var(--muted);text-anchor:middle}
.d3-shade{fill:#7FA6FF;opacity:.42}
.d3-edge{stroke:var(--blue);stroke-width:3;fill:none;stroke-linecap:round}
.d3-edge.dash{stroke-dasharray:9 7}
.d3-edge.minus{stroke:var(--red, #D33)}
.d3-pt{fill:#5ED39B;stroke:#fff;stroke-width:2}
.d3-ptl{font-family:var(--f-math);font-style:italic;font-size:17px;fill:var(--ink)}
/* the drawing animation: line draws itself, point and shading fade in */
.d3-draw .d3-edge{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s cubic-bezier(.45,.05,.3,1)}
.d3-draw .d3-edge.on{stroke-dashoffset:0}
.d3-draw .d3-pt,.d3-draw .d3-ptl{opacity:0;transition:opacity .5s ease}.d3-draw .d3-pt.on,.d3-draw .d3-ptl.on{opacity:1}
.d3-draw .d3-shade{opacity:0;transition:opacity .7s ease}.d3-draw .d3-shade.on{opacity:.42}
.d3-layers{display:grid;width:100%;max-width:340px}
.d3-layers > .d3-svg{grid-area:1/1;opacity:0;transition:opacity .8s ease}
.d3-layers > .d3-svg.on{opacity:1}
.d3-pics .opt{padding:8px}
.d3-pics .d3-svg{max-width:200px}
.d3-rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.d3-rules > div{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:18px 10px;border-radius:18px;background:color-mix(in srgb,var(--line) 40%,var(--bg))}
.d3-rf{font-size:30px;min-height:48px;display:flex;align-items:center}
.d3-rules b{font-size:16px}
.d3-rules small{font-size:20px}
@media (max-width:700px){.d3-rules{grid-template-columns:1fr}}
.p1-gt .fr{font-size:.9em}   /* fractions in a formula line stay readable (Nov 1) */
/* ---- 6-2 "Fill in the height of every point": tap a point, type its height (Nov 2) ---- */
.g2-ask{position:relative}
.g2-hit{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:0;background:transparent;cursor:pointer;z-index:2}
.g2-hit:hover{background:color-mix(in srgb,var(--blue) 18%,transparent)}
.g2-pop{position:absolute;z-index:4;display:flex;align-items:center;gap:8px;padding:8px 10px 8px 14px;border-radius:14px;background:var(--surface);border:2px solid var(--line-strong);box-shadow:0 8px 22px rgba(18,20,26,.16);font-size:20px;transform:translate(-50%, calc(-100% - 22px));opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s .25s;white-space:nowrap}
.g2-pop.on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s ease}   /* hidden windows can't take focus or typing */
.g2-pop input.num{width:62px;height:44px;font-size:20px}
.g2-pop.demo input.num{border-color:var(--blue)}
.g2-pop{flex-direction:column;align-items:flex-start;gap:6px;padding:8px 10px 10px 14px}   /* the formula on top, "f(2, 2) = [ ]" under it (Max, Nov 2) */
.g2-pop .g2-pf{font-size:16px;color:var(--muted)}
.g2-pop .g2-pr{display:flex;align-items:center;gap:8px;font-size:20px}
.g2-pop .g2-pr .ent{font-size:20px}
.g2-pr{font-size:12.5px;text-anchor:middle;fill:var(--muted);font-family:var(--f-math);font-style:italic}
.g2-n,.g2-ax{paint-order:stroke;stroke:#F3F4F8;stroke-width:5px;stroke-linejoin:round}   /* axis labels stay readable next to cylinders */
.g2-nh{font-size:14px}
.g2-blocks .g2-svg{overflow:hidden}   /* the zoom never draws outside the grey box */
.g2-svg text.g2-flat{font-size:16px;paint-order:normal;stroke:none}

/* 6-2: the axis numbers that fly up to the top of a cylinder */
.g2-svg text.g2-fly{fill:var(--blue);font-weight:700}
.story.given.one-line.g2-cond .given-t{font-size:24px}   /* 6-2 fill-in: the condition in the dashed box, as big as in the grey one */

/* a square root (Max, Nov 2): one SVG path for the sign and the bar, drawn by rtDraw() in engine.js; the text inside is normal */
.rt{position:relative;display:inline-block;white-space:nowrap;padding:.16em .06em 0 .62em;line-height:1.12}
.rt-s{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
math.rt mo{font-style:normal;padding:0 .12em}
.g2-svg text.g2-axg{fill:#9AA1B1}   /* axis letters on the turnable surfaces: grey like the axes */

/* 6-4 level curves (Nov 2) */
.l4-c{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.l4-k{font-family:var(--f-math);font-style:italic;font-size:14px;fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:#F3F4F8;stroke-width:4px;stroke-linejoin:round}
.l4-vl{stroke:#5A6072;stroke-width:1.8;stroke-dasharray:6 5}
.l4-ar line{stroke:var(--ink);stroke-width:2;color:var(--ink)}
.l4-ar text{font-size:14px;fill:var(--ink);font-weight:600}
.l4-p circle{fill:#E0525F;stroke:#fff;stroke-width:2}
.l4-p text{font-family:var(--f-math);font-style:italic;font-size:17px;font-weight:700;fill:#E0525F;paint-order:stroke;stroke:#F3F4F8;stroke-width:4px}
.l4-anim .l4-c,.l4-anim .l4-k[data-n],.l4-anim .l4-ar,.l4-anim .l4-p{opacity:0;transition:opacity .5s ease}
.l4-anim .on{opacity:1!important}
.l4-read .l4-c{transition:opacity .5s ease,stroke-width .5s ease}
.l4-read.hl .l4-c{opacity:.2!important}
.l4-read.hl .l4-c[data-n="1"]{opacity:1!important;stroke-width:4.5}
.l4-names{grid-template-columns:repeat(2,minmax(0,1fr))}
.l4-names small{font-size:14px;color:var(--muted)}
.l4-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.l4-two .stage,.c5-four .stage,.c5-rules .stage{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px}
.l4-two .g2-title{font-size:15px;text-align:center}
.l4-svg{max-width:100%;height:auto}
/* 6-5 conic sections (Nov 2) */
.c5-gen{font-size:22px;text-align:center}
.c5-a{color:#C98A00}.c5-b{color:#3B5BDB}.c5-c{color:#1F8A50}
.c5-terms{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:8px;font-size:28px}
.c5-t{display:inline-flex;flex-direction:column;align-items:center}
.c5-t small{font-size:14px;font-style:normal;color:var(--muted);margin-top:4px}
.c5-t b{font-weight:600}
.c5-rules,.c5-four{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.c5-four{grid-template-columns:repeat(2,minmax(0,1fr))}
.c5-rules b.ent{font-size:18px}
.c5-rules small,.c5-four small{font-size:13px;color:var(--muted);text-align:center}
.c5-four .ent{font-size:20px}
.c5-r{stroke:#E0525F;stroke-width:2;stroke-dasharray:5 4}
.c5-ins{gap:22px;flex-wrap:wrap}
@media (max-width:700px){.c5-rules{grid-template-columns:1fr}.l4-two{grid-template-columns:1fr}}

/* 6-4 (Nov 2, 23:17): the contour plot of x + y turns 3D; "a level curve is a formula too" */
.l4-layers{display:grid;width:100%;justify-items:center;align-items:center}
.l4-layers > svg{grid-area:1/1;transition:opacity .6s ease}
.l4-layers > .l4-3d{opacity:0;width:100%;max-width:560px}
.l4-eq{display:flex;flex-direction:column;align-items:center;gap:10px}
.l4-steps{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;font-size:26px;min-height:1.6em}
.l4-s{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s cubic-bezier(.45,.05,.3,1)}
.l4-s.on{opacity:1;transform:none}
.l4-s + .l4-s::before{content:"→";font-style:normal;color:var(--muted);margin-right:26px}
.l4-hi{color:#E8A23A}
.l4-eqp .l4-c,.l4-eqp .l4-p{opacity:0;transition:opacity .5s ease}
.l4-eqp .on{opacity:1}

/* ---------- Welcome screens (Nov 2, Max): welcome.js — #welcome, #signup, #login, a demo overlay over the app ---------- */
.wl-open{margin-left:auto;display:inline-flex;align-items:center;border:2px solid var(--line);border-radius:12px;padding:6px 14px;font-weight:800;font-size:15px;color:var(--blue);text-decoration:none;box-shadow:0 3px 0 var(--line);transition:transform .1s ease,box-shadow .1s ease,background .15s}
.wl-open:hover{background:var(--blue-4)}
.wl-open:active{transform:translateY(3px);box-shadow:0 0 0 var(--line)}
.wl-open + .pills{margin-left:0}
#wl{position:fixed;inset:0;z-index:300;overflow-y:auto;background:var(--bg);color:var(--ink)}
#wl.wl-open-anim{animation:wlFade .25s ease}
#wl.wl-close{opacity:0;transition:opacity .2s ease;pointer-events:none}
/* screen changes inside the overlay are instant, like the app's own pages (Max, Nov 3: the fade looked like flicker) */
@keyframes wlFade{from{opacity:0}}
#wl a{color:var(--blue)}
#wl .brand{color:var(--ink)}
#wl h1,#wl h2,#wl h3{color:var(--ink)}
#wl .btn{text-decoration:none;color:var(--on-blue);transition:transform .1s ease,box-shadow .1s ease,filter .15s}
#wl .btn-primary:active{transform:translateY(3px);box-shadow:0 1px 0 color-mix(in srgb,var(--blue) 55%,#000)}
.wl-sm{padding:10px 20px;font-size:16px;border-radius:14px}
.wl-lg{padding:17px 32px;font-size:18px}
/* secondary button: white, grey edge, pressed like .btn */
.wl-btn2{display:inline-flex;justify-content:center;align-items:center;gap:10px;border:2px solid var(--line);border-radius:16px;padding:13px 24px;background:var(--surface);font-weight:800;font-size:17px;text-decoration:none;box-shadow:0 4px 0 var(--line);cursor:pointer;transition:transform .1s ease,box-shadow .1s ease,background .15s}
.wl-btn2.wl-lg{padding:15px 28px}
.wl-btn2:hover{background:color-mix(in srgb,var(--blue-4) 50%,var(--surface))}
.wl-btn2:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.wl-btn-w{display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#2F4CDD !important;border-radius:16px;font-weight:800;text-decoration:none;box-shadow:0 4px 0 var(--deep);transition:transform .1s ease,box-shadow .1s ease,filter .15s}
.wl-btn-w:hover{filter:brightness(.96)}
.wl-btn-w:active{transform:translateY(3px);box-shadow:0 1px 0 var(--deep)}
.wl-link{color:var(--ink) !important;font-weight:800;text-decoration:none;padding:10px 16px;border-radius:12px;transition:background .15s}
.wl-link:hover{background:var(--blue-4)}
.wl-link:active{transform:translateY(1px)}

/* top bar */
.wl-top{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.wl-top .wrap{display:flex;align-items:center;gap:16px;min-height:68px;flex-wrap:wrap}
.wl-acc{margin-left:auto;display:flex;align-items:center;gap:8px}
.wl-switch{text-align:center;color:var(--muted);font-weight:600;font-size:15px}
.wl-switch a{font-weight:800;text-decoration:none}
.wl-switch a:hover,.wl-terms a:hover,.wl-forgot:hover{text-decoration:underline}

/* hero */
.wl-hero{display:flex;flex-wrap:wrap;gap:56px;align-items:center;padding-block:72px 64px}
.wl-hero-tx{flex:1 1 460px;min-width:0;display:flex;flex-direction:column;gap:20px}
.wl-hero-tx h1{font-size:clamp(40px,5.2vw,62px);line-height:1.05;letter-spacing:-.025em}
.wl-hero-tx p{font-size:20px;color:var(--muted);max-width:36ch}
.wl-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px}
/* hero: a strip of lesson screens gliding to the left (Nov 3, 00:20) */
.wl-deck-w{flex:1 1 420px;max-width:520px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:18px}
.wl-car{width:100%;overflow:hidden;padding:6px 4px 12px;margin:-6px -4px -12px;box-sizing:content-box}
.wl-track{display:flex;gap:20px;transition:transform .7s cubic-bezier(.45,0,.25,1);will-change:transform}
.wl-slide{flex:0 0 88%;box-sizing:border-box;height:460px;padding:24px 26px 26px;display:flex;flex-direction:column;gap:14px;overflow:hidden;box-shadow:var(--shadow)}
.wl-dots{display:flex;gap:8px}
.wl-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:var(--line-strong);cursor:pointer;transition:background .3s,width .3s}
.wl-dots button.on{background:var(--blue);width:22px}
.wl-dots{padding:6px}
.wl-slide h3{font-size:24px}
.wl-slide .wl-name{white-space:nowrap;font-size:24px}
.wl-slide .wl-opts .wl-o{padding:10px}
.wl-demo-top{display:flex;align-items:center;gap:14px;color:var(--muted)}
.wl-bar{flex:1;height:14px;border-radius:99px;background:var(--line);overflow:hidden}
.wl-bar i{display:block;height:100%;background:var(--green);border-radius:inherit}
.wl-sl-p{color:var(--muted);font-size:17px;margin-top:-6px}
.wl-sl-btn{margin-top:auto;width:100%;cursor:default}
.wl-arrow{font-size:24px;color:var(--muted)}
.wl-white{background:var(--surface);border:2px dashed var(--line-strong)}
.wl-stage .mx-c.p1{background:var(--yellow)}
.wl-stage{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;border-radius:20px;background:color-mix(in srgb,var(--line) 40%,var(--bg))}
.wl-name{font-size:26px}
.wl-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.wl-o{border:2px solid var(--line);border-radius:16px;padding:12px;text-align:center;font-weight:800;font-size:20px;background:var(--surface);box-shadow:0 4px 0 var(--line);font-variant-numeric:tabular-nums}
.wl-o.right{border-color:var(--green);background:var(--green-bg);color:var(--green);box-shadow:0 4px 0 var(--green)}
.wl-ok{display:flex;align-items:center;gap:12px;background:var(--green-bg);border-radius:18px;padding:14px 18px;color:var(--green);font-weight:800}
.wl-ok > span{flex:1} .wl-ok small{font-size:15px;font-weight:600;color:var(--green-shadow)}
.wl-ok b{display:flex;align-items:center;gap:4px;color:var(--ink)} .wl-ok b svg{color:var(--yellow)}

/* sections */
.wl-band{background:color-mix(in srgb,var(--line) 40%,var(--bg));border-block:1px solid var(--line)}   /* exactly the grey of the lesson boxes (.stage) */
.wl-sec{padding-block:64px;display:flex;flex-direction:column;gap:28px}
.wl-sec h2,.wl-cta h2{font-size:clamp(30px,3.6vw,36px)}
.wl-sub{color:var(--muted);font-size:18px;margin-top:6px}
.wl-how-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:860px){.wl-how-grid{grid-template-columns:minmax(0,1fr)}}
.wl-how{padding:18px;display:flex;flex-direction:column;gap:18px}
.wl-pic{height:280px;border-radius:20px;background:color-mix(in srgb,var(--line) 40%,var(--bg));display:grid;place-items:center;padding:16px;overflow:hidden}
.wl-how-tx{padding:0 8px 8px;display:flex;flex-direction:column;gap:6px}
.wl-how-tx h3{font-size:21px}
.wl-how-tx p{color:var(--muted);font-size:17px}
.wl-plate{background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:18px 24px 20px;display:flex;flex-direction:column;gap:12px}
.wl-plate p{font-size:16px}
.wl-plate .rule-f{font-size:22px;align-items:center;align-self:center;display:flex;gap:10px}
/* sort cards (practice) */
.wl-sortp{width:100%;max-width:360px;display:flex;flex-direction:column;gap:8px;zoom:.82}
.wl-sort{display:flex;justify-content:center;min-height:62px}
.wl-card-m{display:inline-grid;place-items:center;border:2px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 4px 0 var(--line);padding:4px 6px;font-size:18px}
.wl-sort .wl-card-m{transform:rotate(-4deg);box-shadow:0 10px 22px rgba(18,20,26,.16);border-color:var(--blue)}
.wl-bins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.wl-bin{border:2px dashed var(--line-strong);border-radius:16px;background:var(--surface);padding:10px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:110px}
.wl-bin b{font-size:14px}
.wl-card-m.in{zoom:.8}
/* practice card: fill in Aᵗ, the last cell waits with a blinking cursor */
.wl-fill{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;font-size:22px}
.wl-fill .wl-name{font-size:24px}
.wl-in{background:var(--surface);border:2px solid var(--line-strong) !important;min-width:40px}
.wl-cur{border-color:var(--blue) !important;box-shadow:0 0 0 3px var(--blue-4);display:grid;place-items:center}
.wl-cur i{display:block;width:2px;height:1.1em;background:var(--ink);animation:wlBlink 1s steps(1) infinite}
@keyframes wlBlink{50%{opacity:0}}
.wl-check{padding:10px 20px;font-size:15px;border-radius:12px;cursor:default}
/* exam card: one problem, three parts */
.wl-exam{width:min(100%,340px);background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;font-size:15px}
.wl-exam-h{display:flex;justify-content:space-between;align-items:center}
.wl-exam-h span{display:flex;align-items:center;gap:4px;font-weight:800;font-size:13px;color:var(--muted)} .wl-exam-h svg{color:var(--yellow)}
.wl-exam p{color:var(--muted)}
.wl-exam ol{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.wl-exam li{display:flex;align-items:center;gap:10px;font-weight:600}
.wl-exam li > i{width:20px;height:20px;border:2px solid var(--line-strong);border-radius:6px;flex:none}
.wl-exam li > svg{width:20px;height:20px;padding:2px;border-radius:6px;background:var(--green);color:var(--surface);flex:none}
.wl-exam li.done > span{color:var(--muted)}
/* units */
.wl-tiles{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:860px){.wl-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wl-tile{font:inherit;color:var(--ink);text-align:left;cursor:pointer;background:var(--surface);border:2px solid var(--line);border-radius:22px;box-shadow:0 5px 0 var(--line);padding:14px 16px 18px;display:flex;flex-direction:column;gap:10px;transition:transform .15s ease,box-shadow .15s ease,opacity .2s ease,border-color .2s}
.wl-tile:hover{transform:translateY(-4px);box-shadow:0 9px 0 var(--line)}
.wl-tile:active,.wl-tile.hint-press{transform:translateY(3px);box-shadow:0 2px 0 var(--line)}

.wl-tile-n{font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--muted)}
.wl-tile-art{height:96px;display:grid;place-items:center}.wl-tile-art svg{height:100%;width:auto}
.wl-tile-t{font-weight:800;font-size:18px;line-height:1.2;min-height:2.4em;display:flex;align-items:flex-end}
.wl-end{padding-bottom:80px}
.wl-cta{background:var(--blue);border-radius:32px;padding:48px 40px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.wl-cta > div{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:8px}
#wl .wl-cta h2{color:var(--on-blue)} .wl-cta p{color:var(--on-blue);opacity:.85;font-size:18px}
.wl-foot{border-top:1px solid var(--line)}
.wl-foot .wrap{padding-block:24px 88px;color:var(--muted);font-size:14px;font-weight:600}

/* sign up / log in */
.wl-auth{display:flex;justify-content:center;padding:32px 20px 96px}
.wl-auth-col{width:100%;max-width:460px;display:flex;flex-direction:column;gap:22px}
.wl-auth-h{text-align:center;display:flex;flex-direction:column;gap:8px}
.wl-auth-h h1{font-size:clamp(30px,3.6vw,36px);line-height:1.15}
.wl-auth-h p{color:var(--muted);font-size:17px}
.wl-auth-card{padding:32px 32px 26px;display:flex;flex-direction:column;gap:18px}
@media (max-width:480px){.wl-auth-card{padding:22px}}
#wl .wl-google{color:var(--ink);width:100%}
.wl-or{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:13px;font-weight:800;letter-spacing:.1em}
.wl-or span{flex:1;height:2px;background:var(--line)}
.wl-f{display:flex;flex-direction:column;gap:6px}
.wl-f-l{display:flex;justify-content:space-between;align-items:baseline}
.wl-f label{font-weight:800;font-size:15px}
.wl-forgot{font-size:14px;font-weight:700;text-decoration:none}
.wl-f input{width:100%;border:2px solid var(--line);border-radius:14px;padding:14px 16px;font:inherit;font-size:17px;color:var(--ink);background:var(--surface);transition:border-color .15s,box-shadow .15s}
.wl-f input::placeholder{color:var(--lock)}
.wl-f input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-4)}
.wl-pw{position:relative}.wl-pw input{padding-right:56px}
.wl-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:none;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:background .15s,color .15s}
.wl-eye:hover{background:var(--blue-4);color:var(--ink)} .wl-eye.on{color:var(--blue)}
#wl .wl-submit{width:100%;margin-top:6px}
.wl-terms{text-align:center;color:var(--muted);font-size:14px}
@media (max-width:640px){.wl-hero{padding-block:40px 48px;gap:40px}.wl-switch{font-size:14px}.wl-pic{height:190px}.wl-slide{padding:20px}.wl-slide .wl-stage{gap:8px;padding:12px}.wl-cta{padding:36px 24px}}
@media (prefers-reduced-motion:reduce){#wl *,#wl{animation:none !important}}
/* pricing (Nov 2, 23:50, Max): 7 days free, then €5 a month */
.wl-note{font-size:15px !important;color:var(--muted);font-weight:600}
#wl button.wl-link{border:0;background:none;font:inherit;font-weight:800;cursor:pointer}
#wlPrice{scroll-margin-top:68px}
.wl-price-h{text-align:center;display:flex;flex-direction:column;align-items:center}
.wl-price{align-self:center;width:100%;max-width:820px;padding:36px;display:flex;flex-wrap:wrap;gap:36px;align-items:center}
.wl-price-l{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.wl-price-l .tag{font-size:12px;padding:4px 10px}
.wl-amt{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.wl-amt b{font-size:28px;line-height:1;font-weight:800;letter-spacing:-.01em}
.wl-amt span{font-size:20px;font-weight:700;color:var(--muted)}
.wl-price-l .btn{margin-top:14px}
.wl-price-l p{color:var(--muted);font-size:16px}
.wl-price-l .btn{margin-top:10px}
.wl-feat{flex:1 1 300px;min-width:0;list-style:none;margin:0;padding:0 0 0 36px;border-left:2px solid var(--line);display:flex;flex-direction:column;gap:14px}
.wl-feat li{display:flex;align-items:center;gap:12px;font-weight:700;font-size:17px}
.wl-feat svg{width:26px;height:26px;padding:4px;border-radius:50%;background:var(--green-bg);color:var(--green);flex:none}
@media (max-width:700px){.wl-feat{padding:24px 0 0;border-left:0;border-top:2px solid var(--line)}.wl-price{padding:26px}}
.wl-band + .wl-end{padding-top:64px}
@media (max-width:640px){#wl button.wl-link[data-wl-to]{display:none}}
.wl-how{padding:0}
.wl-how.ex .wl-how.ex /* What's inside: the window next to the tile under the pointer (Nov 3, 00:20) */
.wl-tile{transition:transform .15s ease,box-shadow .15s ease,opacity .25s ease,filter .25s ease,border-color .2s}
.wl-tiles.pop-on .wl-tile:not(.on){opacity:.35;filter:blur(1px)}
.wl-tile{transition:box-shadow .3s ease,opacity .4s ease,filter .4s ease,border-color .3s ease}
.wl-tiles.pop-on .wl-tile.on{border-color:var(--blue);box-shadow:0 5px 0 color-mix(in srgb,var(--blue) 55%,#000)}
.wl-pop{position:absolute;z-index:4;padding:8px 6px;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .3s ease}
.wl-pop.show{opacity:1}
.wl-tiles .wl-tile:hover,.wl-tiles .wl-tile.on{transform:none}   /* no lift: the tile never moves out from under the pointer */   /* never catches the pointer: the tiles under it stay reachable */
.wl-pop ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(var(--rows,6),auto);column-gap:6px}
.wl-pop .lesson{padding:7px 14px;gap:12px}
.wl-pop .lesson + .lesson{border-top:2px solid var(--line)}
.wl-pop .lesson .ic{width:36px;height:36px;background:var(--blue-4);color:var(--blue);border-width:2px}
.wl-pop .lesson .ic svg{width:18px;height:18px}
.wl-pop .lesson .tt{font-size:15px;line-height:1.25}
.wl-pop .lesson .mt{font-size:13px;margin-top:0}
@media (max-width:860px){.wl-pop ol{grid-template-columns:minmax(0,1fr);grid-auto-flow:row}}
/* sign up / log in: grey page, the card in the middle, back arrow inside the card (Nov 3, 00:20) */
.wl-auth{min-height:calc(100vh - 69px);align-items:center;padding:40px 20px 96px;background:color-mix(in srgb,var(--line) 40%,var(--bg))}
.wl-auth-card{position:relative;padding:36px 36px 28px}
.wl-back-x{position:absolute;left:14px;top:14px;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--muted) !important;transition:background .15s,color .15s}
.wl-back-x:hover{background:var(--blue-4);color:var(--ink) !important}
.wl-back-x:active{transform:translateY(1px)}
.wl-back-x svg{width:22px;height:22px}
.wl-auth-h{padding:0 30px}
/* How it works (Nov 3, 00:20): the same lesson-screen frame as the strip at the top, readable size */
.wl-how{display:flex;flex-direction:column;gap:16px}
.wl-how-tx{padding:0 6px}
.wl-static{position:relative;flex:none;height:430px}
.wl-how .wl-stage{flex:1;min-height:0}
.wl-flipw{max-width:none;flex:1;min-height:0;gap:0}
.wl-flipw .flip-stage{height:100%;padding-block:18px;align-items:center;justify-content:center}
.wl-flipw .flipper .mx{font-size:20px}
.wl-flipw .flipper .mx > .mx-g{margin:0 16px;padding:12px 0;gap:6px}
.wl-flipw .flipper .mx-c{width:38px;height:38px}
.wl-flipw .flip-l{font-size:20px}
.wl-dd{position:relative;flex:1;display:flex;flex-direction:column;gap:12px;justify-content:center}
.wl-dd-tray{min-height:62px;display:flex;justify-content:center;align-items:center;border-radius:16px;background:color-mix(in srgb,var(--line) 40%,var(--bg))}
.wl-dd-item{position:relative;z-index:2;transition:transform .9s cubic-bezier(.45,.05,.3,1),box-shadow .2s,opacity .5s,border-color .2s}
.wl-dd-item.drag{box-shadow:0 12px 24px rgba(18,20,26,.2);border-color:var(--blue)}
.wl-dd-item.landed{transition:transform .3s ease,opacity .5s}
.wl-dd-item.wl-gone{opacity:0}
.wl-dd-bins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wl-dd-bins .wl-bin{min-height:120px}
.wl-bin.over{border-color:var(--blue);background:var(--blue-4)}
.wl-dd .hint-cur{z-index:4;transition:transform .9s cubic-bezier(.45,.05,.3,1),opacity .3s}
.wl-paper{align-self:flex-start;margin-bottom:-4px}
.wl-ex-s{flex-wrap:wrap;gap:6px 8px}
.wl-ex-s .wl-name{font-size:20px}
.wl-ex-s .mx-c{min-width:36px}
.wl-ex-s .mx.sm{font-size:16px}
.wl-ex-s .mx.sm > .mx-g{margin:0 9px;gap:0 2px}
.wl-ex-s .mx.sm .mx-c{min-width:28px;padding:1px 4px}
.wl-ex-s .wl-name{font-size:17px}
.ex .wl-slide h3{font-size:21px}
/* How cards without progress bar and button (Nov 3, 00:25) */
.wl-static{height:auto;min-height:360px;padding:26px 28px 28px;gap:12px}
.wl-static .wl-stage{flex:1;min-height:210px}
.wl-3d{position:relative;flex-direction:column;gap:2px;padding:12px}
.wl-3d-t{font-weight:800;font-size:17px}
.wl-3d .g2-svg{width:100%;max-width:460px;height:auto}
.wl-3d .g2-ax{font-size:18px}
.wl-how-grid{align-items:stretch}
.wl-how > .wl-slide{flex:1}
.wl-3d .g2-svg{max-width:520px}
/* Nov 3, 00:32: How cards back to the 00:05 design: white card, grey picture box (the .stage grey), title + line inside the card */
.wl-how.card{padding:18px;gap:18px;display:flex;flex-direction:column}
.wl-how .wl-pic{height:290px;border-radius:20px;background:color-mix(in srgb,var(--line) 40%,var(--bg));display:grid;place-items:center;padding:16px;overflow:hidden}
.wl-how .wl-how-tx{padding:0 8px 8px;display:flex;flex-direction:column;gap:6px}
.wl-how .wl-how-tx h3{font-size:21px}
.wl-how .wl-how-tx p{color:var(--muted);font-size:17px}
.wl-th{background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:16px 22px 18px;display:flex;flex-direction:column;gap:6px;max-width:400px}
.wl-th b{font-size:16px}.wl-th p{font-size:14px;color:var(--muted)}
.wl-th-m{align-self:center;display:flex;align-items:center;gap:8px;margin-top:6px}
.wl-th-m .wl-name{font-size:22px}
.wl-th .mx-c.hl{background:var(--yellow);color:#3A2E00}
.wl-3d{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:0;background:none}
.wl-3d-t{font-weight:800;font-size:15px}
.wl-3d .g2-svg{width:100%;max-width:460px;height:auto}
.wl-dd{width:100%;max-width:430px;flex:none}
.wl-dd-q{font-size:15px;text-align:center}
.wl-dd-tray{background:var(--surface);border:2px dashed var(--line-strong);min-height:58px}
.wl-dd-bins .wl-bin{min-height:104px}
.wl-ex{width:100%;max-width:460px;background:var(--surface);border:2px dashed var(--line-strong);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.wl-ex .wl-paper{margin:0}
.wl-ex-q{font-size:15px}
.wl-ex-s{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 8px}
/* Practice card (Nov 3, 00:40): a multi-select from unit 6, three variables; real .opt / .sel / .right */
.wl-mc{position:relative;width:100%;max-width:440px;background:var(--surface);border:2px solid var(--line);border-radius:18px;padding:14px 18px 16px;display:flex;flex-direction:column;gap:8px}
.wl-mc > b{font-size:16px}
.wl-mc > p{font-size:13px;color:var(--muted);margin-top:-4px}
.wl-mc-f{align-self:center;font-size:18px;padding:4px 0}
.wl-mc-o{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wl-mc-o .opt{font-size:17px;padding:8px;min-height:0;cursor:default;transition:background .25s,border-color .25s,box-shadow .25s,transform .1s}
.wl-mc-o .opt.wl-press{transform:translateY(2px)}
.wl-mc-btn{padding:9px 18px;font-size:15px;border-radius:12px;cursor:default;opacity:.45;transition:opacity .25s,transform .1s}
.wl-mc-btn.wl-on{opacity:1}
.wl-mc-btn.wl-press{transform:translateY(2px)}
.wl-mc .hint-cur{z-index:4;transition:transform .7s cubic-bezier(.45,.05,.3,1),opacity .3s}
.wl-mc-o .opt,.wl-mc-o .opt .ent{font-size:16px !important}
.wl-mc-o .opt{padding:6px 8px;border-radius:14px}
.wl-mc{gap:6px;padding:12px 16px 14px}
.wl-mc-f .ent{font-size:16px}
.wl-mc > b .ent{font-size:15px}
/* Nov 3, 00:45 (Max) */
.wl-pop .lesson.first{border-top:0 !important}   /* the top of each column: no line */
.wl-auth{background:var(--bg)}                     /* account screens: white again */
.wl-one{flex:none;width:100%;max-width:500px;box-shadow:0 1px 0 rgba(18,20,26,.04),0 18px 40px rgba(18,20,26,.08)}
.wl-deck-w{max-width:500px}
/* Nov 3, 00:50 (Max: "How it works takes too long to scroll"): one row of four compact cards (two per row on smaller screens) */
.wl-how-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media (max-width:1100px){.wl-how-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.wl-how-grid{grid-template-columns:minmax(0,1fr)}}
.wl-how.card{padding:12px;gap:12px}
.wl-how .wl-pic{height:196px;padding:10px;border-radius:16px}
.wl-how .wl-how-tx{padding:0 6px 6px;gap:3px}
.wl-how .wl-how-tx .eyebrow{font-size:12px}
.wl-how .wl-how-tx h3{font-size:18px}
.wl-how .wl-how-tx p{font-size:15px;line-height:1.4}
.wl-band .wl-sec{padding-block:48px;gap:22px}
.wl-th{padding:10px 14px 12px;gap:2px;border-radius:14px}
.wl-th b{font-size:14px;text-align:center}
.wl-th-m{margin-top:2px}.wl-th-m .wl-name{font-size:18px}
.wl-th .mx.sm{font-size:17px}.wl-th .mx.sm .mx-c{min-width:26px;padding:1px 4px}
.wl-3d-t{font-size:14px}.wl-3d-t .ent{font-size:15px}
.wl-3d .g2-svg{max-width:280px}
.wl-3d .g2-ax{font-size:15px}
.wl-mc{padding:10px 12px 12px;gap:6px;border-radius:14px}
.wl-mc > b{font-size:13px}.wl-mc > b .ent{font-size:14px}
.wl-mc-f{padding:0}.wl-mc-f .ent{font-size:13px}
.wl-mc-o{gap:6px}
.wl-mc-o .opt,.wl-mc-o .opt .ent{font-size:13px !important}
.wl-mc-o .opt{padding:4px 6px;border-radius:11px;box-shadow:0 3px 0 var(--line)}
.wl-mc-o .opt.sel{box-shadow:0 3px 0 var(--blue)}
.wl-ex{padding:10px 12px;gap:6px;border-radius:14px}
.wl-ex .wl-paper{font-size:11px;padding:3px 8px}
.wl-ex-q{font-size:13px}.wl-ex-q .ent{font-size:14px}
.wl-ex-s{gap:3px 5px}
.wl-ex-s .wl-name{font-size:14px}
.wl-ex-s .mx.sm{font-size:12px}
.wl-ex-s .mx.sm > .mx-g{margin:0 6px}
.wl-ex-s .mx.sm .mx-c{min-width:20px;padding:0 2px}
.wl-ex-s .mx.sm .mx-c{line-height:1.25}
.wl-ex{max-width:100%}
.wl-ex-s .mx.sm .mx-c{min-width:18px;padding:0 1px;line-height:1.15}
.wl-ex-s .wl-in{min-width:30px !important}
.wl-how.ex .wl-pic{padding:6px}
.wl-grp{display:inline-flex;align-items:center;gap:5px}
/* What's inside as an accordion (Nov 3, 00:55) */
.wl-acc-list{padding:6px 8px;display:flex;flex-direction:column}
.wl-acc-u + .wl-acc-u{border-top:2px solid var(--line)}
.wl-acc-h{width:100%;display:flex;align-items:center;gap:16px;padding:12px 14px;border:0;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer;border-radius:16px;transition:background .15s}
.wl-acc-h:hover{background:color-mix(in srgb,var(--blue-4) 45%,var(--surface))}
.wl-acc-h:active{transform:translateY(1px)}
.wl-acc-art{width:58px;height:52px;border-radius:14px;background:var(--blue-4);display:grid;place-items:center;flex:none}
.wl-acc-art svg{width:42px;height:auto}
.wl-acc-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.wl-acc-t{font-weight:800;font-size:18px;line-height:1.25}
.wl-acc-n{flex:none;font-weight:700;font-size:14px;color:var(--muted)}
.wl-acc-ch{flex:none;color:var(--muted);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.wl-acc-u.open .wl-acc-ch{transform:rotate(180deg);color:var(--blue)}
.wl-acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1)}
.wl-acc-u.open .wl-acc-b{grid-template-rows:1fr}
.wl-acc-b > .lessons{overflow:hidden;min-height:0;padding:0;opacity:0;transition:opacity .25s ease}
.wl-acc-u.open .wl-acc-b > .lessons{opacity:1;transition:opacity .3s ease .08s}
.wl-acc-b ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-template-rows:repeat(var(--rows,6),auto);column-gap:16px;padding:0 14px 12px 88px}
.wl-acc-b .lesson{padding:7px 10px;gap:12px}
.wl-acc-b .lesson + .lesson{border-top:2px solid var(--line)}
.wl-acc-b .lesson.first{border-top:0}
.wl-acc-b .lesson .ic{width:34px;height:34px;background:var(--blue-4);color:var(--blue);border-width:2px}
.wl-acc-b .lesson .ic svg{width:17px;height:17px}
.wl-acc-b .lesson .tt{font-size:15px;line-height:1.25}
.wl-acc-b .lesson .mt{font-size:13px;margin-top:0}
@media (max-width:760px){.wl-acc-b ol{grid-template-columns:minmax(0,1fr);grid-auto-flow:row;padding:0 8px 10px}.wl-acc-b .lesson.first + .lesson,.wl-acc-b .lesson.first:not(:first-child){border-top:2px solid var(--line)}.wl-acc-n{display:none}}
/* Nov 3, 01:00 (Max): sign-up fits on a laptop screen without scrolling; the title on one line */
.wl-auth{padding:24px 20px 72px;min-height:0;align-items:flex-start}
.wl-auth-col{gap:12px}
.wl-auth-card{padding:28px 32px 22px;gap:14px}
.wl-auth-h{padding:0 36px;gap:4px}
.wl-auth-h h1{font-size:28px;white-space:nowrap;line-height:1.2}
.wl-auth-h p{font-size:16px}
.wl-back-x{top:22px}
.wl-f{gap:4px}
.wl-f input{padding:11px 14px;font-size:16px}
.wl-google{padding:11px 20px !important}
#wl .wl-submit{margin-top:2px;padding:13px 24px}
.wl-or{font-size:12px}
.wl-terms{font-size:13px}
@media (max-width:420px){.wl-auth-h{padding:0 30px}.wl-auth-h h1{font-size:24px}}
/* site footer (Nov 3, 01:02) */
.wl-foot{border-top:1px solid var(--line);background:color-mix(in srgb,var(--line) 40%,var(--bg))}
.wl-foot .wrap{padding-block:44px 28px;display:flex;flex-direction:column;gap:32px;color:var(--muted);font-size:15px;font-weight:600}
.wl-foot-top{display:flex;flex-wrap:wrap;gap:36px;justify-content:space-between}
.wl-foot-brand{flex:1 1 260px;max-width:340px;display:flex;flex-direction:column;gap:10px}
.wl-foot-brand .brand{font-size:22px}
.wl-foot-brand p{font-weight:500;line-height:1.5}
.wl-foot-cols{flex:2 1 420px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:560px){.wl-foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wl-foot-cols > div{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.wl-foot-cols b{color:var(--ink);font-size:14px;font-weight:800;margin-bottom:2px}
#wl .wl-foot-cols a,.wl-foot-cols button{color:var(--muted);text-decoration:none;font:inherit;font-weight:600;background:none;border:0;padding:0;cursor:pointer;transition:color .15s}
#wl .wl-foot-cols a:hover,.wl-foot-cols button:hover{color:var(--ink)}
.wl-foot-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:20px;border-top:1px solid var(--line-strong);font-size:14px;padding-bottom:56px}
#wlHow,#wlUnits{scroll-margin-top:68px}
.g2-svg text.l4-k3{font-size:15px;font-weight:700;font-family:var(--f-ui);font-style:normal;fill:var(--ink);paint-order:stroke;stroke:#F3F4F8;stroke-width:4px}   /* heights written on the map at the end of "Lines of equal height" (6-4) */
/* 6-4 (Nov 3, 08:55): contour plots inside the dashed condition box, bigger "k = …" labels; tick numbers on the 3D floor */
.l4-given{align-items:stretch}
.l4-gplot{display:flex;justify-content:center;padding:6px;border-radius:16px;background:color-mix(in srgb,var(--line) 40%,var(--bg))}
.l4-big .l4-k{font-family:var(--f-ui);font-style:normal;font-weight:800;font-size:15px}
.g2-svg text.l4-tk{font-size:13px;fill:var(--muted);text-anchor:middle;font-family:var(--f-math);font-style:italic}
.l4-gplot .l4-svg{max-width:420px !important}
/* 6-5 cone (Nov 3, 09:05): the names of the four cuts */
.g2-svg text.c5-lab{font-family:var(--f-ui);font-style:normal;font-weight:800;font-size:19px;text-anchor:start;paint-order:stroke;stroke:#F3F4F8;stroke-width:5px;stroke-linejoin:round}
.g2-svg text.c5-circle{fill:#C0394A}.g2-svg text.c5-ellipse{fill:#2F8A52}.g2-svg text.c5-parabola{fill:#3B5BDB}.g2-svg text.c5-hyperbola{fill:#C26A1E}
/* 6-5 "The equation of a conic" (Nov 3, 09:10): every term in its own column, its letter right under it */
.c5-ex{flex-direction:column;gap:12px}
.c5-tab{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:6px 14px;font-size:28px}
.c5-col{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:44px}
.c5-top{white-space:nowrap}
.c5-top b{font-weight:600}
.c5-key .c5-top b{color:var(--blue)}
.c5-rest .c5-top b{color:var(--muted)}
.c5-lb{font-size:15px;font-style:normal;font-family:var(--f-ui);font-weight:800;padding:2px 8px;border-radius:8px}
.c5-key .c5-lb{background:var(--blue-4);color:var(--blue)}
.c5-rest .c5-lb{color:var(--muted)}
.c5-note{font-size:15px !important;color:var(--muted);text-align:center;max-width:none !important}
.c5-ins{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:14px 26px}
@media (max-width:560px){.c5-ins{grid-template-columns:repeat(2,auto)}}
.c5-top{display:block;height:1.6em;line-height:1.6em;text-align:center}
.c5-top sup{line-height:0}
/* 6-4 (Nov 3, 16:30): the levels written on a contour plot, along one straight line; a white-ish halo so the line under them breaks */
.g2-svg text.l4-kl{font-size:13px;font-weight:700;font-family:var(--f-ui);font-style:normal;fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:color-mix(in srgb, var(--line) 40%, var(--bg));stroke-width:3.5px;stroke-linejoin:round}
.g2-svg text.l4-kr{fill:#E0443A}
.lesson.open .ic{background:var(--blue-4);color:var(--blue)}   /* a lesson of an open unit (Nov 3): can be started, not the next one */

/* ---------- Accounts (Nov 9, auth.js) ---------- */
html.booting #app, html.booting header.topbar{visibility:hidden}   /* until we know who is signed in */
html:not(.dev-on) .dev{display:none}                              /* DEV tools only on localhost or with ?dev */
button.wl-open{background:var(--surface);font:inherit;font-weight:800;font-size:15px;cursor:pointer}
button.wl-btn2{font:inherit;font-weight:800;font-size:17px;color:var(--ink);cursor:pointer}
.wl-form{display:flex;flex-direction:column;gap:inherit}
.wl-auth-card .wl-form{gap:14px}
button.wl-forgot{border:0;background:none;padding:0;font:inherit;font-size:14px;font-weight:700;color:var(--blue);cursor:pointer}
.wl-msg{margin:0;min-height:0;font-size:15px;font-weight:700;color:#C0392B;text-align:center}
.wl-msg:empty{display:none}
.wl-msg.ok{color:#1E8E3E}
.wl-submit:disabled{opacity:.6;cursor:default}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wl-f-after{display:flex;justify-content:flex-end}

/* ---------- Lesson order (Nov 9): "Jump here" on a locked lesson = a quiet secondary button ---------- */
.lesson .go.jump{background:var(--surface);color:var(--blue);border:2px solid var(--line);box-shadow:0 3px 0 var(--line);padding:8px 16px}
.lesson .go.jump:hover{background:var(--blue-4)}
.lesson .go.jump:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}

/* ---------- Loading circle (Nov 9, Max): while the site finds out who is signed in, and while a sign-in is on its way ---------- */
.ml-spin{position:fixed;inset:0;z-index:1000;display:none;place-items:center;background:var(--bg)}
html.booting:not(:has(#wl)) .ml-spin, html.auth-wait .ml-spin{display:grid}
.ml-spin i{width:44px;height:44px;border-radius:50%;border:4px solid var(--blue-4);border-top-color:var(--blue);animation:mlSpin .8s linear infinite}
@keyframes mlSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ml-spin i{animation-duration:2s}}