body{margin:0}
/* Layout: course map on the left, lesson column on the right; every lesson = theory → task bench (code | result) → quiz. */
:root{
  --bg:#F3F4F8;
  --surface:#FFFFFF;
  --surface-2:#ECEEF4;
  --ink:#161821;
  --muted:#586074;
  --line:#DCE0EA;
  --accent:#3446D8;
  --accent-ink:#FFFFFF;
  --accent-soft:#E4E7FC;
  --good:#17794D;
  --good-soft:#DDF1E6;
  --bad:#B23E2A;
  --bad-soft:#F8E4DE;
  --code-bg:#1A1C25;
  --code-ink:#D9DCE8;
  --code-line:#2B2F3D;
  --code-caret:#FFFFFF;
  --t-tag:#93A3FF;
  --t-attr:#F0B77E;
  --t-str:#A3D69C;
  --t-com:#737A93;
  --t-sel:#F2C866;
  --t-prop:#7FD0E4;
  --t-val:#EAA8DA;
  --t-punct:#9AA1B8;
  --bm-margin:#F5D4AA;
  --bm-border:#EFDC86;
  --bm-padding:#BFE2C1;
  --bm-content:#BACAF5;
  --bm-ink:#1B1D26;
  --warn:#8A5A00;
  --grid-col:rgba(240,70,90,.14);
  --display:"Unbounded","Golos Text",system-ui,sans-serif;
  --body:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --top:56px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0E1016; --surface:#161922; --surface-2:#1F2331; --ink:#E6E8F0; --muted:#9BA2B7; --line:#2A2F40;
    --accent:#8E9AFF; --accent-ink:#0E1016; --accent-soft:#242A4A;
    --good:#5BC592; --good-soft:#15332A; --bad:#F08A73; --bad-soft:#3A221C;
    --code-bg:#11131A; --code-ink:#D9DCE8; --code-line:#262A38; --code-caret:#FFFFFF;
    --bm-margin:#6A4E2E; --bm-border:#6A6131; --bm-padding:#2E5839; --bm-content:#33467B; --bm-ink:#EEF0F6;
    --warn:#E3B55C; --grid-col:rgba(255,110,125,.2);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0E1016; --surface:#161922; --surface-2:#1F2331; --ink:#E6E8F0; --muted:#9BA2B7; --line:#2A2F40;
  --accent:#8E9AFF; --accent-ink:#0E1016; --accent-soft:#242A4A;
  --good:#5BC592; --good-soft:#15332A; --bad:#F08A73; --bad-soft:#3A221C;
  --code-bg:#11131A; --code-ink:#D9DCE8; --code-line:#262A38; --code-caret:#FFFFFF;
  --bm-margin:#6A4E2E; --bm-border:#6A6131; --bm-padding:#2E5839; --bm-content:#33467B; --bm-ink:#EEF0F6;
  --warn:#E3B55C; --grid-col:rgba(255,110,125,.2);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-underline-offset:2px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
code{font-family:var(--mono);font-size:.88em;background:var(--surface-2);padding:1px 5px;border-radius:4px;white-space:nowrap}
kbd{font-family:var(--mono);font-size:11px;padding:1px 5px;border-radius:4px;border:1px solid currentColor;opacity:.75}

/* top bar */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;height:var(--top);display:flex;align-items:center;gap:16px;padding-inline:20px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);text-decoration:none;letter-spacing:-.01em;white-space:nowrap}
.brand span{color:var(--accent)}
.progress{display:flex;align-items:center;gap:10px;margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap}
.bar{width:120px;height:6px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:6px;transition:width .3s}
.top-links{display:flex;gap:4px}
.top-links a{padding:6px 10px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14px}
.top-links a:hover,.top-links a[aria-current="page"]{background:var(--surface-2)}
.map-toggle{display:none;padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:14px;cursor:pointer}

/* shell */
.shell{display:grid;grid-template-columns:288px minmax(0,1fr);min-height:calc(100vh - var(--top))}
.map{position:sticky;top:calc(var(--top) + env(safe-area-inset-top,0px));height:calc(100vh - var(--top));overflow:auto;border-right:1px solid var(--line);background:var(--surface);padding-block:20px 32px;padding-inline:16px}
.mod{display:flex;flex-direction:column;gap:6px;margin-bottom:22px}
.mod-name{margin:0 0 4px 8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mod-name b{color:var(--ink);font-weight:500}
.mod-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.lesson-link{display:grid;grid-template-columns:18px 22px 1fr;align-items:center;gap:6px;padding:7px 8px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14.5px;line-height:1.3}
.lesson-link:hover{background:var(--surface-2)}
.lesson-link[aria-current="page"]{background:var(--accent-soft)}
.lesson-link .ln{font-family:var(--mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.st{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line);display:block;position:relative}
.st-1 .st{border-color:var(--accent);background:linear-gradient(90deg,var(--accent) 50%,transparent 50%)}
.st-2 .st{border-color:var(--accent);background:var(--accent)}
.st-2 .st::after{content:"";position:absolute;left:4px;top:1.5px;width:3px;height:6px;border:solid var(--accent-ink);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.map-extra{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:14px}
.map-extra a{padding:7px 8px;border-radius:8px;color:var(--ink);text-decoration:none;font-size:14.5px}
.map-extra a:hover,.map-extra a[aria-current="page"]{background:var(--surface-2)}
.save-note{margin:18px 8px 0;font-size:12.5px;color:var(--muted);line-height:1.45}

/* lesson column */
.view{min-width:0;outline:none}
.lesson{container-type:inline-size;max-width:1060px;margin-inline:auto;padding-inline:40px;padding-block:36px 96px;display:flex;flex-direction:column;gap:28px}
.eyebrow{margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.l-title{margin:-16px 0 0;font-family:var(--display);font-weight:700;font-size:clamp(28px,4vw,40px);line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
.lede{margin:-12px 0 0;font-size:19px;line-height:1.5;max-width:62ch;color:var(--ink)}
.prose{display:flex;flex-direction:column;gap:14px}
.prose>p,.prose>ul,.prose>ol{margin:0;max-width:68ch}
.prose h2{margin:18px 0 0;font-size:21px;font-weight:600;line-height:1.3;text-wrap:balance}
.code{margin:0;background:var(--code-bg);color:var(--code-ink);border-radius:10px;padding:14px 16px;font-family:var(--mono);font-size:13.5px;line-height:1.65;overflow-x:auto;white-space:pre;tab-size:2;font-variant-ligatures:none}
.t-tag{color:var(--t-tag)}.t-attr{color:var(--t-attr)}.t-str{color:var(--t-str)}.t-com{color:var(--t-com);font-style:italic}.t-sel{color:var(--t-sel)}.t-prop{color:var(--t-prop)}.t-val{color:var(--t-val)}.t-punct{color:var(--t-punct)}

.trio{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;max-width:760px}
.trio div{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.trio dt{font-family:var(--mono);font-weight:500;color:var(--accent);font-size:14px}
.trio dd{margin:2px 0 0;font-size:15px;line-height:1.45}

/* Figma-panel callout */
.figma{max-width:620px;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:14px}
.figma-head{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px 14px;background:var(--surface-2);font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.figma-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;padding:8px 14px;border-top:1px solid var(--line)}
.figma-row code{justify-self:start;white-space:normal;background:transparent;padding:0;color:var(--accent);font-size:13px}

.note{max-width:68ch;margin:0;padding:12px 16px;border-radius:10px;background:var(--accent-soft);font-size:15px;line-height:1.55}
.note.warn{background:var(--bad-soft)}
.note strong{font-weight:600}

.steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px;max-width:68ch}

.anatomy{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:18px;align-items:start;max-width:760px}
.anatomy-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.45}
.anatomy-legend li{display:grid;grid-template-columns:14px 1fr;gap:10px;align-items:baseline}
.sw{width:12px;height:12px;border-radius:3px;display:block;transform:translateY(1px)}
.t-sel-bg{background:var(--t-sel)}.t-prop-bg{background:var(--t-prop)}.t-val-bg{background:var(--t-val)}
@container (max-width:560px){.anatomy{grid-template-columns:1fr}}

/* blocks */
.block{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:14px}
.block-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);font-weight:500}
.pill{font-size:12.5px;padding:2px 10px;border-radius:99px;background:var(--surface-2);color:var(--muted)}
.pill.ok{background:var(--good-soft);color:var(--good)}
.task-text{margin:0;font-size:16.5px;max-width:72ch}

/* bench = editor + result */
.bench{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;--h:340px}
.bench.small{--h:220px}
.bench.tall{--h:520px}
@container (min-width:720px){.bench{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.pane{display:flex;flex-direction:column;min-width:0;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.pane-bar{display:flex;align-items:center;gap:8px;height:34px;padding-inline:12px;font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--surface-2);border-bottom:1px solid var(--line)}
.code-pane .pane-bar{background:var(--code-bg);color:#8D94AB;border-bottom-color:var(--code-line)}
.pane-bar .file{margin-right:auto}
.dots{display:flex;gap:5px;margin-right:4px}.dots i{width:8px;height:8px;border-radius:50%;background:#3A3F50;display:block}
.out-pane .dots i{background:var(--line)}
.out{display:block;width:100%;height:100%;border:0;background:#FFFFFF}
.stage{position:relative;height:var(--h);overflow:hidden;background:#FFFFFF}
.stage.scaled{background:var(--surface-2)}
.stage.scaled .out{transform-origin:0 0;box-shadow:0 0 0 1px var(--line)}
.bench.js .stage{height:calc(var(--h) - 120px)}
.bench.small.js{--h:300px}
.dev{display:flex;gap:2px}
.dev button{padding:3px 7px;border-radius:6px;border:1px solid transparent;background:transparent;font-family:var(--mono);font-size:11.5px;color:var(--muted);cursor:pointer;line-height:1.2}
.dev button:hover{color:var(--ink)}
.dev button[aria-pressed="true"]{background:var(--surface);border-color:var(--line);color:var(--ink)}
.console{height:120px;display:flex;flex-direction:column;border-top:1px solid var(--line);background:var(--surface)}
.con-bar{display:flex;align-items:center;gap:8px;height:30px;flex:none;padding-inline:12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.con-bar .btn.sm{margin-left:auto;text-transform:none;letter-spacing:0;padding:2px 8px;font-size:12px}
.con-body{flex:1;overflow:auto;padding:4px 12px;font-family:var(--mono);font-size:12.5px;line-height:1.5}
.con-line{display:grid;grid-template-columns:12px 1fr;gap:8px;padding:3px 0;border-bottom:1px solid var(--line)}
.con-line:last-child{border-bottom:0}
.con-ico{color:var(--muted)}
.con-text{white-space:pre-wrap;word-break:break-word}
.con-line.error{color:var(--bad)}.con-line.error .con-ico{color:var(--bad)}
.con-line.warn{color:var(--warn)}.con-line.warn .con-ico{color:var(--warn)}
.con-line small{display:block;color:var(--muted);font-family:var(--body);font-size:12.5px;line-height:1.4;margin-top:1px}
.con-empty{margin:4px 0;color:var(--muted);font-family:var(--body);font-size:13px}

.ed{position:relative;height:var(--h);background:var(--code-bg)}
.ed pre,.ed textarea{position:absolute;inset:0;margin:0;padding:14px 16px;font-family:var(--mono);font-size:13.5px;line-height:1.65;white-space:pre;tab-size:2;letter-spacing:0;word-spacing:0;font-variant-ligatures:none;border:0}
.ed pre{overflow:hidden;color:var(--code-ink);pointer-events:none}
.ed textarea{width:100%;height:100%;overflow:auto;resize:none;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--code-caret);outline:none}
.ed textarea::selection{background:rgba(142,154,255,.35)}
.ed:focus-within{box-shadow:inset 0 0 0 2px var(--accent)}

.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-size:14.5px;font-weight:500;cursor:pointer;text-decoration:none;color:var(--ink)}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08);background:var(--accent)}
.btn.sm{padding:4px 10px;font-size:12.5px;border-radius:7px}
.code-pane .btn.sm{background:transparent;border-color:#3A3F50;color:#C7CBDA}
.code-pane .btn.sm:hover{background:#262A37}
.btn[disabled]{opacity:.5;cursor:default}

.results{display:flex;flex-direction:column;gap:10px}
.results:empty{display:none}
.summary{margin:0;font-weight:600}
.summary.ok{color:var(--good)}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.checks li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:15px;line-height:1.45}
.mark{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;margin-top:1px}
.checks .ok .mark{background:var(--good-soft);color:var(--good)}
.checks .no .mark{background:var(--bad-soft);color:var(--bad)}
.checks small{display:block;color:var(--muted);font-size:13.5px}
.reveal{background:var(--surface-2);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;font-size:15px}
.reveal p{margin:0}
.muted{color:var(--muted)}

/* AI */
.aibox{border:1px solid var(--line);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;background:var(--surface)}
.ai-head{display:flex;align-items:center;gap:10px}
.ai-head .btn{margin-left:auto}
.ai-body{display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.55}
.ai-body p{margin:0}
.ai-body .code{font-size:13px}
.thinking{color:var(--muted)}
.err{color:var(--bad)}
.ask-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start}
.ask-row textarea{width:100%;min-height:52px;resize:vertical;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:15px}

/* quiz */
.qq{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.qq+.qq{border-top:1px solid var(--line);padding-top:16px}
.qq legend{padding:0;font-weight:600;font-size:16px;margin-bottom:8px}
.opts{display:flex;flex-direction:column;gap:6px}
.opt{text-align:left;padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg);cursor:pointer;font-size:15px;line-height:1.4}
.opt:hover{border-color:var(--accent)}
.opt.right{border-color:var(--good);background:var(--good-soft)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.qfb{margin:0;font-size:14.5px}
.qfb b.okv{color:var(--good)}.qfb b.nov{color:var(--bad)}

/* demos */
.demo{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;max-width:860px}
@container (min-width:720px){.demo{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.demo-stage{background:var(--surface-2);border-radius:10px;padding:16px;display:grid;place-items:center;min-height:240px;overflow:hidden}
.demo-side{display:flex;flex-direction:column;gap:12px;min-width:0}
.demo-code{font-size:12.5px}
.rng{display:grid;grid-template-columns:96px 1fr 44px;gap:10px;align-items:center;font-family:var(--mono);font-size:12.5px}
.rng input{width:100%;accent-color:var(--accent)}
.rng output{text-align:right;font-variant-numeric:tabular-nums}
.bm{position:relative;color:var(--bm-ink)}
.bm-m{background:var(--bm-margin)}
.bm-b{background:var(--bm-border)}
.bm-p{background:var(--bm-padding)}
.bm-c{background:var(--bm-content);padding:14px 18px;font-family:var(--mono);font-size:12.5px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:12px;border-radius:3px;display:block}
.seg{display:flex;flex-direction:column;gap:6px}
.seg-l{font-family:var(--mono);font-size:12px;color:var(--muted)}
.seg-b{display:flex;flex-wrap:wrap;gap:4px}
.seg-b button{padding:5px 10px;border-radius:7px;border:1px solid var(--line);background:var(--bg);font-family:var(--mono);font-size:12px;cursor:pointer}
.seg-b button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.fx{display:flex;width:100%;height:200px;background:var(--surface);border:1.5px dashed var(--accent);border-radius:8px;padding:10px}
.fx-i{background:var(--accent);color:var(--accent-ink);border-radius:6px;display:grid;place-items:center;font-family:var(--mono);font-size:13px;min-width:40px;min-height:30px}
.fx-figma{margin:0;font-size:13.5px;color:var(--muted)}
.fx-figma b{color:var(--ink);font-weight:500}

.target{max-width:900px;--h:440px}

/* grid demo */
.gd{position:relative;width:100%;padding:10px;background:var(--surface);border-radius:8px}
.gd-cols{position:absolute;inset:10px;display:grid}
.gd-cols i{display:block;background:var(--grid-col)}
.gd-items{position:relative;display:grid}
.gd-i{height:48px;border-radius:6px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--mono);font-size:13px;opacity:.9}
/* ease demo */
.demo-stage.ez-stage{display:flex;flex-direction:column;justify-content:center;gap:18px;place-items:stretch}
.ez-lane{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:10px}
.ez-name{font-family:var(--mono);font-size:12px;color:var(--muted)}
.ez-lane.sel .ez-name{color:var(--ink);font-weight:500}
.ez-track{height:30px;border-radius:99px;background:var(--surface);padding:0;overflow:hidden}
.ez-ball{display:block;width:30px;height:30px;border-radius:50%;background:var(--muted)}
.ez-lane.sel .ez-ball{background:var(--accent)}
/* transform demo */
.tf-row{display:flex;align-items:center;gap:20px}
.tf-slot{position:relative;width:120px;height:120px}
.tf-ghost{position:absolute;inset:0;border:1.5px dashed var(--muted);border-radius:12px}
.tf-card{position:absolute;inset:0;border-radius:12px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--mono);font-size:13px;opacity:.92}
.tf-nb{width:90px;height:120px;border-radius:12px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:13px;color:var(--muted)}
.new-tag{display:inline-block;margin-left:4px;padding:1px 7px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font-size:10px;letter-spacing:.04em;vertical-align:1px}

/* pager */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pager a{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);text-decoration:none;color:var(--ink)}
.pager a:hover{border-color:var(--accent)}
.pager a small{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pager .next{text-align:right;grid-column:2}
.pager a.hl{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}

/* cheatsheet */
.sheet{display:flex;flex-direction:column;gap:10px}
.sheet h2{margin:10px 0 0;font-size:21px;font-weight:600}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.tbl table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
.tbl th,.tbl td{text-align:left;padding:9px 14px;border-top:1px solid var(--line);vertical-align:top}
.tbl thead th{border-top:0;background:var(--surface-2);font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:500}
.tbl td:first-child{white-space:nowrap}

@media (max-width:1000px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .map{position:fixed;top:calc(var(--top) + env(safe-area-inset-top,0px));left:0;bottom:0;width:min(320px,88vw);height:auto;z-index:30;transform:translateX(-102%);transition:transform .2s;box-shadow:0 10px 30px rgba(0,0,0,.18)}
  .map.open{transform:none}
  .map-toggle{display:inline-flex}
  .lesson{padding-inline:20px;padding-block:24px 72px}
}
@media (max-width:640px){
  .topbar{gap:10px;padding-inline:16px}
  .top-links{display:none}
  .bar{width:64px}
  .progress .ptext-long{display:none}
  .lesson{padding-inline:16px}
  .block{padding:16px}
  .pager{grid-template-columns:1fr}
  .pager .next{grid-column:1}
  .lede{font-size:17px}
}
@media (prefers-reduced-motion:reduce){*:not(.ez-ball){transition:none!important}}