:root{
  --text-xs:clamp(0.75rem,0.7rem + 0.25vw,0.875rem);
  --text-sm:clamp(0.875rem,0.8rem + 0.35vw,1rem);
  --text-base:clamp(1rem,0.95rem + 0.25vw,1.125rem);
  --text-lg:clamp(1.125rem,1rem + 0.75vw,1.5rem);
  --text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --font-display:'Zodiak',Georgia,serif;
  --font-body:'General Sans','Segoe UI',system-ui,sans-serif;
  --radius:10px;--radius-lg:16px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
:root,[data-theme="light"]{
  --color-bg:#f3eee2;
  --color-surface:#faf7ef;
  --color-surface-2:#fffdf8;
  --color-surface-offset:#ebe4d4;
  --color-border:#d9cfba;
  --color-divider:#e4dccb;
  --color-text:#13294b;
  --color-text-muted:#56637a;
  --color-text-faint:#8d95a3;
  --color-primary:#a8285f;
  --color-primary-hover:#861c4a;
  --color-primary-soft:#f3dbe5;
  --color-ink:#13294b;
  --color-ink-inverse:#f6f1e5;
  --color-success:#2b6b3d;
  --color-success-soft:#dcebdc;
  --color-error:#a3312a;
  --color-error-soft:#f4dcd7;
  --color-sea:#c9dbe0;
  --grid:rgba(19,41,75,.06);
  --shadow:0 1px 2px rgba(19,41,75,.06),0 6px 20px rgba(19,41,75,.06);
}
[data-theme="dark"]{
  --color-bg:#0b1627;
  --color-surface:#112038;
  --color-surface-2:#152742;
  --color-surface-offset:#1a2e4d;
  --color-border:#2a4166;
  --color-divider:#213656;
  --color-text:#ebe5d6;
  --color-text-muted:#a6b0c2;
  --color-text-faint:#6d7a91;
  --color-primary:#ec7fae;
  --color-primary-hover:#f59cc2;
  --color-primary-soft:#3a2238;
  --color-ink:#ebe5d6;
  --color-ink-inverse:#0b1627;
  --color-success:#7cc98f;
  --color-success-soft:#173a29;
  --color-error:#f08b80;
  --color-error-soft:#41201f;
  --color-sea:#1d3a55;
  --grid:rgba(235,229,214,.04);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:var(--text-base);line-height:1.55;color:var(--color-text);background:var(--color-bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:48px 48px;min-height:100vh;display:flex;flex-direction:column;
  transition:background-color .25s var(--ease),color .25s var(--ease)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:6px}
h1,h2,h3{margin:0;font-weight:700;line-height:1.15}
p{margin:0}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) clamp(var(--space-4),4vw,var(--space-10));border-bottom:1px solid var(--color-divider);background:color-mix(in oklab,var(--color-bg) 88%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--color-ink)}
.logo{width:36px;height:36px;flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text strong{font-family:var(--font-display);font-size:var(--text-lg);letter-spacing:-.01em}
.brand-text span{font-size:var(--text-xs);color:var(--color-text-muted);letter-spacing:.06em;text-transform:uppercase}
.topbar-right{display:flex;align-items:center;gap:var(--space-3)}
.status{font-size:var(--text-sm);color:var(--color-text-muted);font-variant-numeric:tabular-nums}
.icon-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface);display:grid;place-items:center}
.icon-btn:hover{border-color:var(--color-text-muted)}

main{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:clamp(var(--space-6),5vw,var(--space-12)) clamp(var(--space-4),4vw,var(--space-8))}
main:focus{outline:none}
.foot{padding:var(--space-6) clamp(var(--space-4),4vw,var(--space-10));border-top:1px solid var(--color-divider);font-size:var(--text-xs);color:var(--color-text-muted);text-align:center}
.foot p{max-width:70ch;margin:0 auto}

.eyebrow{font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--color-primary);font-weight:600}
.page-title{font-family:var(--font-display);font-size:var(--text-xl);letter-spacing:-.015em;margin-top:var(--space-2)}
.lede{color:var(--color-text-muted);max-width:62ch;margin-top:var(--space-3)}

/* home */
.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--space-8);align-items:end;margin-bottom:var(--space-10)}
.modes{display:grid;gap:var(--space-2)}
.mode-pill{display:flex;gap:var(--space-3);align-items:baseline;font-size:var(--text-sm);padding:var(--space-2) 0;border-bottom:1px dashed var(--color-border)}
.mode-pill b{font-family:var(--font-display);min-width:5.5em;color:var(--color-ink)}
.mode-pill span{color:var(--color-text-muted)}
.levels{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-4)}
.level-card{text-align:left;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);box-shadow:var(--shadow);transition:transform .2s var(--ease),border-color .2s var(--ease);position:relative;overflow:hidden}
.level-card:hover{transform:translateY(-2px);border-color:var(--color-primary)}
.level-num{font-family:var(--font-display);font-size:var(--text-sm);color:var(--color-primary);display:flex;align-items:center;gap:var(--space-2)}
.level-num::after{content:'';flex:1;height:1px;background:var(--color-divider)}
.level-card h2{font-family:var(--font-display);font-size:var(--text-lg)}
.level-card p{font-size:var(--text-sm);color:var(--color-text-muted)}
.level-meta{display:flex;gap:var(--space-4);font-size:var(--text-xs);color:var(--color-text-muted);margin-top:auto;padding-top:var(--space-2);font-variant-numeric:tabular-nums}
.level-meta b{color:var(--color-text)}
.best{color:var(--color-success)!important}

/* setup */
.back{background:none;border:none;color:var(--color-text-muted);font-size:var(--text-sm);padding:0;margin-bottom:var(--space-4);display:inline-flex;gap:var(--space-2);align-items:center}
.back:hover{color:var(--color-text)}
.setup{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);margin-top:var(--space-8)}
.field{display:flex;flex-direction:column;gap:var(--space-3)}
.field-label{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);font-weight:600;display:flex;justify-content:space-between;align-items:center}
.field-label button{background:none;border:none;color:var(--color-primary);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;font-weight:600;padding:0}
.mode-options{display:grid;gap:var(--space-3)}
.mode-opt{display:flex;gap:var(--space-4);align-items:flex-start;text-align:left;padding:var(--space-4);border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface)}
.mode-opt .radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--color-border);flex:none;margin-top:3px;display:grid;place-items:center}
.mode-opt[aria-pressed="true"]{border-color:var(--color-primary);background:var(--color-primary-soft)}
.mode-opt[aria-pressed="true"] .radio{border-color:var(--color-primary)}
.mode-opt[aria-pressed="true"] .radio::after{content:'';width:8px;height:8px;border-radius:50%;background:var(--color-primary)}
.mode-opt b{display:block;font-family:var(--font-display);font-size:var(--text-base)}
.mode-opt small{display:block;color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.45;margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{font-size:var(--text-sm);padding:var(--space-2) var(--space-3);border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);display:inline-flex;gap:var(--space-2);align-items:center}
.chip .n{font-size:var(--text-xs);color:var(--color-text-faint);font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"]{background:var(--color-ink);color:var(--color-ink-inverse);border-color:var(--color-ink)}
.chip[aria-pressed="true"] .n{color:inherit;opacity:.7}
.seg{display:inline-flex;border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;background:var(--color-surface);width:fit-content}
.seg button{border:none;background:none;padding:var(--space-2) var(--space-4);font-size:var(--text-sm);font-variant-numeric:tabular-nums;border-right:1px solid var(--color-border)}
.seg button:last-child{border-right:none}
.seg button[aria-pressed="true"]{background:var(--color-ink);color:var(--color-ink-inverse)}
.toggle{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-sm);background:none;border:none;padding:0;text-align:left}
.toggle .sw{width:40px;height:22px;border-radius:999px;background:var(--color-border);position:relative;flex:none;transition:background .2s}
.toggle .sw::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--color-surface-2);transition:transform .2s var(--ease)}
.toggle[aria-pressed="true"] .sw{background:var(--color-primary)}
.toggle[aria-pressed="true"] .sw::after{transform:translateX(18px)}
.hint{font-size:var(--text-sm);color:var(--color-text-muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius);border:1px solid transparent;font-weight:600;font-size:var(--text-sm);transition:background .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--color-primary);color:#fff}
[data-theme="dark"] .btn-primary{color:#1a0d16}
.btn-primary:hover{background:var(--color-primary-hover)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost{background:var(--color-surface);border-color:var(--color-border)}
.btn-ghost:hover{border-color:var(--color-text-muted)}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
.start-bar{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--color-divider);display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap}

/* quiz */
.quiz-head{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-4);flex-wrap:wrap}
.quiz-meta{display:flex;gap:var(--space-3);align-items:center;font-size:var(--text-sm);color:var(--color-text-muted);flex-wrap:wrap}
.tag{font-size:var(--text-xs);padding:2px var(--space-2);border-radius:6px;background:var(--color-surface-offset);color:var(--color-text);font-weight:500}
.timer{font-variant-numeric:tabular-nums;font-weight:600;color:var(--color-text)}
.timer.low{color:var(--color-error)}
.progress{height:4px;background:var(--color-surface-offset);border-radius:999px;overflow:hidden;margin-bottom:var(--space-6)}
.progress i{display:block;height:100%;background:var(--color-primary);transition:width .3s var(--ease)}
.qcard{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(var(--space-5),4vw,var(--space-10));box-shadow:var(--shadow)}
.qgrid{display:grid;grid-template-columns:1fr;gap:var(--space-6)}
.qgrid.has-fig{grid-template-columns:200px 1fr;align-items:start}
.fig{background:var(--color-surface-offset);border-radius:var(--radius);padding:var(--space-4);display:grid;place-items:center}
.fig{width:100%;margin:0}
.fig svg{width:100%;max-width:150px;height:auto}
.fig.night{background:#06101e}
.fig figcaption{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-2);text-align:center}
.fig.night figcaption{color:#8d9ab0}
.qnum{font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--color-text-muted);font-weight:600}
.qtext{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.3;margin-top:var(--space-2);letter-spacing:-.005em}
.answers{display:grid;gap:var(--space-3);margin-top:var(--space-6);list-style:none;padding:0}
.ans{width:100%;text-align:left;display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface-2);font-size:var(--text-base);line-height:1.4;transition:border-color .15s,background .15s}
.ans:hover:not(:disabled){border-color:var(--color-text-muted)}
.ans .key{flex:none;width:26px;height:26px;border-radius:6px;border:1px solid var(--color-border);display:grid;place-items:center;font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);margin-top:-1px}
.ans.selected{border-color:var(--color-ink);background:var(--color-surface-offset)}
.ans.selected .key{background:var(--color-ink);color:var(--color-ink-inverse);border-color:var(--color-ink)}
.ans.correct{border-color:var(--color-success);background:var(--color-success-soft)}
.ans.correct .key{background:var(--color-success);border-color:var(--color-success);color:var(--color-surface-2)}
.ans.wrong{border-color:var(--color-error);background:var(--color-error-soft)}
.ans.wrong .key{background:var(--color-error);border-color:var(--color-error);color:var(--color-surface-2)}
.ans.dim{opacity:.55}
.ans:disabled{cursor:default}
.explain{margin-top:var(--space-6);padding:var(--space-4) var(--space-5);border-left:3px solid var(--color-primary);background:var(--color-primary-soft);border-radius:0 var(--radius) var(--radius) 0;animation:rise .3s var(--ease)}
.explain .verdict{font-weight:600;margin-bottom:var(--space-1)}
.explain .verdict.ok{color:var(--color-success)}
.explain .verdict.no{color:var(--color-error)}
.explain p{font-size:var(--text-sm);line-height:1.6}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.quiz-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin-top:var(--space-6);flex-wrap:wrap}
.flag{background:none;border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-2) var(--space-3);font-size:var(--text-sm);display:inline-flex;gap:var(--space-2);align-items:center}
.flag[aria-pressed="true"]{border-color:var(--color-primary);color:var(--color-primary)}
.navdots{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--space-6)}
.navdots button{width:30px;height:30px;border-radius:6px;border:1px solid var(--color-border);background:var(--color-surface);font-size:var(--text-xs);font-variant-numeric:tabular-nums;position:relative}
.navdots button.done{background:var(--color-surface-offset);border-color:var(--color-text-faint)}
.navdots button.cur{border-color:var(--color-ink);box-shadow:inset 0 0 0 1px var(--color-ink)}
.navdots button.flagged::after{content:'';position:absolute;top:-3px;right:-3px;width:8px;height:8px;border-radius:50%;background:var(--color-primary)}
.learn-rate{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* results */
.result-top{display:grid;grid-template-columns:auto 1fr;gap:var(--space-8);align-items:center;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:clamp(var(--space-5),4vw,var(--space-10));box-shadow:var(--shadow)}
.dial{width:150px;height:150px;position:relative}
.dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.dial .pct{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-display);font-size:var(--text-xl);font-variant-numeric:tabular-nums}
.verdict-big{font-family:var(--font-display);font-size:var(--text-xl)}
.verdict-big.pass{color:var(--color-success)}
.verdict-big.fail{color:var(--color-error)}
.breakdown{margin-top:var(--space-8);display:grid;gap:var(--space-3)}
.bd-row{display:grid;grid-template-columns:minmax(140px,220px) 1fr 64px;gap:var(--space-4);align-items:center;font-size:var(--text-sm)}
.bd-bar{height:8px;background:var(--color-surface-offset);border-radius:999px;overflow:hidden}
.bd-bar i{display:block;height:100%;border-radius:999px}
.bd-row .v{text-align:right;font-variant-numeric:tabular-nums;color:var(--color-text-muted)}
.section-h{font-family:var(--font-display);font-size:var(--text-lg);margin:var(--space-10) 0 var(--space-4)}
.review{display:grid;gap:var(--space-3)}
.rv{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-4) var(--space-5)}
.rv summary{cursor:pointer;display:flex;gap:var(--space-3);align-items:flex-start;list-style:none}
.rv summary::-webkit-details-marker{display:none}
.rv .mark{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--color-surface-2);margin-top:2px}
.rv .mark.ok{background:var(--color-success)}
.rv .mark.no{background:var(--color-error)}
.rv .mark.skip{background:var(--color-text-faint)}
.rv-q{font-weight:500}
.rv-body{margin-top:var(--space-3);padding-left:calc(22px + var(--space-3));font-size:var(--text-sm);display:grid;gap:var(--space-2)}
.rv-body .yours{color:var(--color-error)}
.rv-body .right{color:var(--color-success);font-weight:500}
.rv-body .ex{color:var(--color-text-muted)}
.empty{padding:var(--space-8);text-align:center;color:var(--color-text-muted);border:1px dashed var(--color-border);border-radius:var(--radius-lg)}

@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:var(--space-6)}
  .levels{grid-template-columns:1fr}
  .setup{grid-template-columns:1fr}
  .qgrid.has-fig{grid-template-columns:1fr}
  .fig svg{max-width:120px}
  .result-top{grid-template-columns:1fr;justify-items:center;text-align:center}
  .bd-row{grid-template-columns:1fr 64px}
  .bd-row .bd-bar{grid-column:1/-1;grid-row:2}
  .status{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.inote,.ref{font-size:var(--text-sm);line-height:1.55;margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px dashed color-mix(in oklab,var(--color-primary) 35%,transparent)}
.inote b,.ref b{display:block;font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary);margin-bottom:2px}
.ref{color:var(--color-text-muted)}
.rv-body .inote,.rv-body .ref{border-top-color:var(--color-divider)}
[data-theme="dark"] .fig:not(.night){background:#c3d0da}
[data-theme="dark"] .fig:not(.night) figcaption{color:#2c3a4d}
[data-theme="dark"] .fig:not(.night){--color-sea:#9fb6c6}

/* ================= Learn: lessons ================= */
.learn-blurb p{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.6;margin-bottom:var(--space-4);max-width:60ch}
.lib-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-6);flex-wrap:wrap;margin-bottom:var(--space-8)}
.lib-group{font-family:var(--font-display);font-size:var(--text-lg);margin:var(--space-10) 0 var(--space-4);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-divider)}
.lesson-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-4)}
.lesson-card{display:flex;gap:var(--space-4);text-align:left;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-5);transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.lesson-card:hover{border-color:var(--color-primary);transform:translateY(-2px);box-shadow:var(--shadow)}
.lc-num{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-primary);line-height:1;min-width:2ch}
.lc-body{display:flex;flex-direction:column;gap:var(--space-2)}
.lc-body b{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;line-height:1.2}
.lc-body small{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.5}
.lc-meta{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1)}
.lc-meta span{font-size:var(--text-xs);padding:2px 8px;border-radius:999px;background:var(--color-surface-offset);color:var(--color-text-muted)}
.lc-meta .lc-done{background:var(--color-success-soft);color:var(--color-success);font-weight:600}
.lesson-card.done{border-color:color-mix(in oklab,var(--color-success) 45%,var(--color-border))}

.lesson-head{max-width:760px;margin-bottom:var(--space-10)}
.lesson-head .lede{font-size:var(--text-lg);line-height:1.6;color:var(--color-text)}
.lesson-head .toggle{margin-top:var(--space-5)}
.lesson-sec{margin-bottom:var(--space-12)}
.sec-title{font-family:var(--font-display);font-size:var(--text-xl);margin-bottom:var(--space-5);display:flex;align-items:center;gap:var(--space-3)}
.sec-title span{font-family:var(--font-body);font-size:var(--text-xs);background:var(--color-primary-soft);color:var(--color-primary);padding:2px 10px;border-radius:999px;font-weight:600}

.illus-list{display:grid;gap:var(--space-6)}
.illus{margin:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);overflow:hidden}
.il-title{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);margin-bottom:var(--space-4)}
.il-art{display:block}
.il-cap{margin-top:var(--space-4);color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.6;max-width:75ch;padding-left:var(--space-4);border-left:3px solid var(--color-primary)}
.illus-svg{width:100%;max-width:640px;height:auto;margin:0 auto;display:block;color:var(--color-text);overflow:hidden}
.illus-svg.sq{max-width:320px}
.illus-svg.fit{max-width:440px}
.illus.fixed .il-art{background:#e6edf2;border-radius:var(--radius);padding:var(--space-3)}
.illus.fixed .illus-svg{color:#13294b}
.illus-svg text{font-family:var(--font-body)}
.illus-svg text:not([fill]){fill:currentColor}
.illus-svg .t{font-size:13px}.illus-svg .ts{font-size:11.5px}
.illus-svg .tb{font-size:13px;font-weight:600}.illus-svg .tbig{font-family:var(--font-display);font-size:28px;font-weight:700}

.gallery{display:grid;gap:var(--space-3)}
.gallery.g2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px;margin:0 auto}
.gallery.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.gal{align-content:start}
.gal svg{max-width:110px}
.gal figcaption{display:flex;flex-direction:column;gap:2px;line-height:1.35}
.gal figcaption b{color:var(--color-text);font-size:var(--text-sm)}
.fig.gal figcaption b{color:#13294b}
[data-theme="dark"] .fig:not(.night) figcaption b{color:#13294b}
.fig.night.gal figcaption b{color:#e8edf5}
.gallery.plain .gal{background:var(--color-surface-offset);border-radius:var(--radius);padding:var(--space-4);margin:0;display:grid;place-items:center;text-align:center}
.gallery.plain .gal svg{max-width:64px}
.gallery.plain figcaption{font-size:var(--text-xs);color:var(--color-text-muted);margin-top:var(--space-2)}
@keyframes blink{0%,55%{opacity:1}60%,100%{opacity:.12}}
.flashing svg circle{animation:blink 1s steps(1) infinite}

.itable{width:100%;border-collapse:collapse;font-size:var(--text-sm);margin-bottom:var(--space-4)}
.itable th{text-align:left;font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);font-weight:600;padding:var(--space-2) var(--space-3);border-bottom:2px solid var(--color-border)}
.itable td{padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--color-divider);vertical-align:top;line-height:1.5}
.itable td:first-child{font-weight:600;white-space:nowrap}
.itable.seq td:first-child{color:var(--color-primary)}
.itable.seq td{white-space:normal}
.two-tables{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.two-tables h4{font-family:var(--font-display);font-size:var(--text-base);margin-bottom:var(--space-2)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}
.blasts{display:inline-flex;align-items:center;gap:4px}
.blasts i{display:inline-block;height:8px;border-radius:4px;background:var(--color-primary)}
.blasts i.sh{width:10px}.blasts i.pl{width:34px}.blasts i.gap{width:8px;background:none}

.ladder{list-style:none;counter-reset:l;display:grid;gap:var(--space-2);max-width:560px;margin:0 auto;padding:0}
.ladder li{counter-increment:l;display:flex;align-items:center;gap:var(--space-3);flex-wrap:nowrap;background:var(--color-surface-offset);border-radius:var(--radius);padding:var(--space-3) var(--space-4);position:relative}
.ladder li::before{content:counter(l);font-family:var(--font-display);font-weight:700;color:var(--color-primary);min-width:1.5ch}
.ladder li:nth-child(1){margin:0 0}.ladder li:nth-child(2){margin:0 4%}.ladder li:nth-child(3){margin:0 8%}.ladder li:nth-child(4){margin:0 12%}.ladder li:nth-child(5){margin:0 16%}
.ladder span{font-size:var(--text-xs);color:var(--color-text-muted)}
.illus-note{margin-top:var(--space-4);font-size:var(--text-sm);line-height:1.6;background:var(--color-primary-soft);border-radius:var(--radius);padding:var(--space-3) var(--space-4)}

.tvmdc{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);max-width:420px;margin:0 auto}
.tvmdc .rung{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:var(--space-4);width:100%;background:var(--color-surface-offset);border-radius:var(--radius);padding:var(--space-3) var(--space-4)}
.tvmdc .rung b{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-primary);text-align:center}
.tvmdc .rung em{font-style:normal;font-weight:600;font-variant-numeric:tabular-nums}
.tvmdc .op{font-size:var(--text-sm);color:var(--color-text-muted);padding:var(--space-1) 0}
.tvmdc .op::before{content:'↓ '}

.script h4{font-family:var(--font-display);font-size:var(--text-base);margin-bottom:var(--space-2)}
.script ol{list-style:none;padding:0;display:grid;gap:6px;font-size:var(--text-sm);line-height:1.5}
.script li{background:var(--color-surface-offset);border-radius:var(--radius);padding:6px var(--space-3)}
.script li b{color:var(--color-primary);font-size:var(--text-base)}

.steps{display:grid;gap:var(--space-3)}
.steps.three{grid-template-columns:repeat(3,1fr)}
.steps.six{grid-template-columns:repeat(3,1fr)}
.steps > div{background:var(--color-surface-offset);border-radius:var(--radius);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}
.steps i{font-style:normal;font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--color-primary);line-height:1}
.steps b{font-family:var(--font-display);font-size:var(--text-lg)}
.steps span{font-size:var(--text-sm);color:var(--color-text-muted);line-height:1.55}

.kp-list{display:grid;gap:var(--space-4)}
.kp{display:grid;grid-template-columns:1fr;gap:var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}
.kp.has-fig{grid-template-columns:160px 1fr}
.kp-fig .fig{padding:var(--space-3)}
.kp-body{position:relative;padding-left:var(--space-12)}
.kp-num{position:absolute;left:0;top:2px;font-family:var(--font-display);font-size:var(--text-lg);color:var(--color-text-faint)}
.kp h3{font-family:var(--font-display);font-size:var(--text-lg);line-height:1.3;margin-bottom:var(--space-3)}
.kp-fact{display:inline-flex;align-items:baseline;gap:var(--space-3);background:var(--color-primary-soft);border-radius:var(--radius);padding:var(--space-2) var(--space-4);font-weight:600;margin-bottom:var(--space-3);line-height:1.45}
.kp-fact span{font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--color-primary);flex:none}
.kp-exp{line-height:1.65;max-width:72ch}
.kp-pile{margin-top:var(--space-4);background:none;border:1px solid var(--color-border);border-radius:999px;padding:4px 12px;font-size:var(--text-xs);color:var(--color-text-muted)}
.kp-pile:hover{border-color:var(--color-text-muted);color:var(--color-text)}
.kp-pile[aria-pressed="true"]{background:var(--color-primary-soft);border-color:var(--color-primary);color:var(--color-primary)}

.takeaways{background:var(--color-ink);color:var(--color-ink-inverse);border-radius:var(--radius-lg);padding:var(--space-8);margin-bottom:var(--space-8)}
.takeaways .sec-title{color:inherit}
.takeaways ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-3) var(--space-8);padding:0;list-style:none}
.takeaways li{padding-left:var(--space-5);position:relative;line-height:1.55}
.takeaways li::before{content:'';position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:2px;background:var(--color-primary);transform:rotate(45deg)}
.lesson-end{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap;border:1px dashed var(--color-primary);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);margin-bottom:var(--space-6)}
.lesson-end div{display:flex;flex-direction:column;gap:2px}
.lesson-end span{color:var(--color-text-muted);font-size:var(--text-sm)}
.lesson-nav{display:flex;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}

@media (max-width:820px){
  .gallery.g4,.gallery.g5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two-tables,.steps.three,.steps.six{grid-template-columns:1fr}
  .kp.has-fig{grid-template-columns:1fr}
  .kp-fig .fig svg{max-width:110px}
  .kp-body{padding-left:0}.kp-num{position:static;display:block;margin-bottom:var(--space-1)}
  .illus{padding:var(--space-4)}
  .itable td:first-child{white-space:normal}
  .ladder li{margin:0!important}
  .takeaways{padding:var(--space-6)}
}


/* responsive diagrams: always fit, never cropped */
.il-art{position:relative;min-width:0}
.illus-svg{max-height:min(560px,72vh)}
.illus-svg.fit{max-width:440px}
.panels{display:grid;gap:var(--space-4);grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.panels.p2{--n:2}.panels.p3{--n:3}
.panel{background:var(--color-surface-offset);border-radius:var(--radius);padding:var(--space-3) var(--space-3) var(--space-2);min-width:0}
.panel-t{font-weight:600;font-size:var(--text-sm);text-align:center;margin-bottom:var(--space-2)}
.panel .illus-svg{max-width:340px}
.steps.four{grid-template-columns:repeat(4,1fr)}
.il-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-4)}
.il-head .il-title{margin:0}
.zoom-btn{flex:none;display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--color-border);border-radius:999px;padding:4px 12px;font-size:var(--text-xs);color:var(--color-text-muted)}
.zoom-btn:hover{color:var(--color-text);border-color:var(--color-text-muted)}
.zoom-ov{position:fixed;inset:0;z-index:50;background:color-mix(in oklab,var(--color-bg) 92%,transparent);backdrop-filter:blur(4px);display:flex;flex-direction:column;padding:var(--space-4)}
.zoom-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);max-width:1200px;width:100%;margin:0 auto var(--space-3)}
.zoom-bar b{font-family:var(--font-display);font-size:var(--text-lg)}
.zoom-body{flex:1;overflow:auto;max-width:1200px;width:100%;margin:0 auto;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6)}
.zoom-body.fixed{background:#e6edf2;color:#13294b}
.zoom-body .illus-svg{max-width:none;max-height:none;width:100%}
.zoom-body .panel .illus-svg{max-width:none}
.zoom-body .gal svg{max-width:150px}
.zoom-cap{max-width:1200px;width:100%;margin:var(--space-3) auto 0;color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.6}
@media (max-width:820px){
  .steps.four{grid-template-columns:1fr 1fr}
  .zoom-body{padding:var(--space-3)}
}
@media (max-width:640px){
  .panels{grid-template-columns:1fr}
  .panel .illus-svg{max-width:300px}
  .steps.four{grid-template-columns:1fr}
  .zoom-bar b{font-size:var(--text-base)}
}

@media (max-width:640px){
  .itable thead{display:none}
  .itable, .itable tbody, .itable tr, .itable td{display:block;width:100%}
  .itable tr{background:var(--color-surface-offset);border-radius:var(--radius);padding:var(--space-3);margin-bottom:var(--space-2)}
  .itable td{border:none;padding:2px 0;white-space:normal!important}
  .itable td:first-child{font-family:var(--font-display);font-size:var(--text-base);margin-bottom:4px}
  .itable td:not(:first-child)[data-label]:not([data-label=""])::before{content:attr(data-label);display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-faint);font-weight:600;margin-top:4px}
}

.zoom-body.fitted{display:flex;align-items:center;justify-content:center;overflow:hidden}
.zoom-body .panels{max-width:1100px;margin:0 auto}
.zoom-body .panel .illus-svg{max-height:calc(100dvh - 220px)}
@media (max-width:640px){ .zoom-body .panels{grid-template-columns:1fr} .zoom-body .panel .illus-svg{max-height:none} .zoom-ov{padding:var(--space-2)} .zoom-cap{font-size:var(--text-xs)} }
.rot-hint{display:none;text-align:center;font-size:var(--text-xs);color:var(--color-primary);font-weight:600;margin-top:var(--space-2)}
.zoom-ov:has(.rotated) .rot-hint{display:block}

/* ---------- knot gallery ---------- */
.knot-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
@media (max-width:860px){.knot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.knot-card{display:flex;flex-direction:column;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}
.knot-art{display:grid;place-items:center;height:190px;padding:var(--space-3);background:var(--color-surface-offset);border:0;border-bottom:1px solid var(--color-border);cursor:zoom-in;color:var(--color-text)}
.knot-art:hover{background:color-mix(in srgb,var(--color-surface-offset) 80%,var(--color-primary) 6%)}
.knot-art:focus-visible{outline:2px solid var(--color-primary);outline-offset:-3px}
.knot-art .knot-svg{width:100%;height:100%;max-width:none;max-height:none}
.knot-body{display:flex;flex-direction:column;gap:6px;padding:var(--space-3) var(--space-4) var(--space-4);flex:1}
.knot-body h3{margin:0;font-family:var(--font-display);font-size:var(--text-base);line-height:1.25}
.knot-body p{margin:0;font-size:var(--text-sm);line-height:1.5}
.knot-body .k-note,.knot-body .k-novid{color:var(--color-text-muted)}
.knot-body .k-novid{margin-top:auto;padding-top:6px;font-size:var(--text-xs)}
.k-vid{margin-top:auto;display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--color-border);border-radius:var(--radius);text-decoration:none;color:var(--color-text);font-size:var(--text-sm);font-weight:600;line-height:1.3}
.k-vid > svg{flex:none;width:28px;height:28px;padding:6px;border-radius:50%;background:var(--color-primary);color:#fff}
[data-theme="dark"] .k-vid > svg{color:#1a0d16}
.k-vid small{display:block;font-weight:400;font-size:var(--text-xs);color:var(--color-text-muted)}
.k-vid:hover{border-color:var(--color-primary)}
.k-vid:hover span{text-decoration:underline;text-underline-offset:2px}
.knot-body .k-vid{margin-top:auto}
.knot-body .k-note{margin-bottom:6px}
.zoom-body .knot-svg{color:var(--color-text)}
@media (max-width:560px){
  .knot-grid{grid-template-columns:1fr;gap:var(--space-3)}
  .knot-art{height:150px;padding:var(--space-2) var(--space-4)}
  .knot-body{padding:var(--space-3) var(--space-4) var(--space-4)}
}


/* Installed-app safe areas (notch / home indicator) */
.topbar{padding-top:max(var(--space-3),env(safe-area-inset-top));padding-left:max(clamp(var(--space-4),4vw,var(--space-10)),env(safe-area-inset-left));padding-right:max(clamp(var(--space-4),4vw,var(--space-10)),env(safe-area-inset-right))}
.foot{padding-bottom:max(var(--space-6),env(safe-area-inset-bottom))}