/* Regs Atlas v3: playful, clean, minimal. Pastel hues h0-h5 per branch, ink lines, one dark ink. */
:root{
  --paper:#FBFAF7;--panel:#FFFFFF;--ink:#16181D;--muted:#5F6470;--faint:#9097A3;--line:#E7E4DD;--wash:#F3F1EC;--dot:#E4E1D9;--wire:#C9C4B8;
  --h0:#DCE6FF;--h0i:#2541A3;--h1:#D3F1E3;--h1i:#126B4D;--h2:#FFE1D1;--h2i:#AB4A17;
  --h3:#E8E0FF;--h3i:#5636B0;--h4:#FFF0C2;--h4i:#7D5A00;--h5:#FFDCE3;--h5i:#A8243F;
  --accent:#3D5BD9;--warn:#D9442B;--warn-bg:#FFE0D9;--num:#B86A00;
  --tip-bg:#16181D;--tip-fg:#F7F6F2;
  --head:'Bricolage Grotesque','DM Sans',system-ui,sans-serif;
  --font:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  --shadow:0 1px 2px rgba(22,24,29,.06),0 6px 18px rgba(22,24,29,.06);
  --pop:3px 3px 0 var(--ink);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#111318;--panel:#1A1D24;--ink:#ECEDF0;--muted:#A4A9B4;--faint:#767C88;--line:#2B2F38;--wash:#20242C;--dot:#252932;--wire:#454B57;
  --h0:#243258;--h0i:#B8C9FF;--h1:#173D31;--h1i:#9BE3C3;--h2:#4A2A1B;--h2i:#FFC3A2;
  --h3:#33285A;--h3i:#D2C4FF;--h4:#40361A;--h4i:#FFE08A;--h5:#4A2029;--h5i:#FFB3C2;
  --accent:#8EA6FF;--warn:#FF8A73;--warn-bg:#4A221B;--num:#FFC266;--tip-bg:#ECEDF0;--tip-fg:#16181D;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.25);color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#111318;--panel:#1A1D24;--ink:#ECEDF0;--muted:#A4A9B4;--faint:#767C88;--line:#2B2F38;--wash:#20242C;--dot:#252932;--wire:#454B57;
  --h0:#243258;--h0i:#B8C9FF;--h1:#173D31;--h1i:#9BE3C3;--h2:#4A2A1B;--h2i:#FFC3A2;
  --h3:#33285A;--h3i:#D2C4FF;--h4:#40361A;--h4i:#FFE08A;--h5:#4A2029;--h5i:#FFB3C2;
  --accent:#8EA6FF;--warn:#FF8A73;--warn-bg:#4A221B;--num:#FFC266;--tip-bg:#ECEDF0;--tip-fg:#16181D;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 22px rgba(0,0,0,.25);color-scheme:dark}
.h0{--hb:var(--h0);--hi:var(--h0i)}.h1{--hb:var(--h1);--hi:var(--h1i)}.h2{--hb:var(--h2);--hi:var(--h2i)}
.h3{--hb:var(--h3);--hi:var(--h3i)}.h4{--hb:var(--h4);--hi:var(--h4i)}.h5{--hb:var(--h5);--hi:var(--h5i)}
.hw{--hb:var(--warn-bg);--hi:var(--warn)}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);background-image:radial-gradient(var(--dot) 1px,transparent 1.2px);background-size:22px 22px;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;padding-inline:16px;-webkit-font-smoothing:antialiased}
a{color:inherit}button{font:inherit;color:inherit}p{margin:0}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:8px}
.ico{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-.2em}

/* ---------- shell ---------- */
.site{max-width:1200px;margin-inline:auto;padding-block:18px 90px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:34px}
.bar a{text-decoration:none;font-weight:600;font-size:14px;display:inline-flex;gap:6px;align-items:center}
.pill{border:1.5px solid var(--ink);background:var(--panel);border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;cursor:pointer;box-shadow:2px 2px 0 var(--ink);transition:transform .12s,box-shadow .12s;display:inline-flex;gap:6px;align-items:center;text-decoration:none}
.pill:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.pill:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.pill.on{background:var(--ink);color:var(--paper)}
.pill.soft{border-color:var(--line);box-shadow:none;background:var(--panel)}
.layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:48px;align-items:start}
.toc{position:sticky;top:20px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.toc a{text-decoration:none;color:var(--muted);padding:7px 12px;border-radius:999px;display:flex;gap:9px;align-items:center;line-height:1.25;transition:background .2s,color .2s}
.toc a i{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--faint)}
.toc a:hover{background:var(--wash);color:var(--ink)}
.toc a.on{background:var(--ink);color:var(--paper)}.toc a.on i{color:var(--paper)}
@media (max-width:920px){.layout{grid-template-columns:1fr;gap:0}.toc{display:none}}
main.col{display:flex;flex-direction:column;gap:84px;min-width:0}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:28px;align-items:center}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero-art{display:none}}
.hero-txt{display:flex;flex-direction:column;gap:14px}
.chip{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:13px;font-weight:700;padding:5px 12px;border-radius:999px;background:var(--hb,var(--h0));color:var(--hi,var(--h0i))}
h1{font-family:var(--head);font-size:clamp(36px,6vw,64px);line-height:1;letter-spacing:-.02em;margin:0;font-weight:700;text-wrap:balance}
.big{font-size:clamp(18px,2.2vw,21px);color:var(--muted);line-height:1.45;max-width:640px;text-wrap:pretty}
.hero-art svg{width:100%;height:auto;display:block}
.minute{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.note{background:var(--hb);color:var(--ink);border-radius:18px;padding:16px 16px 18px;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.45;transform:rotate(var(--rot,0deg));transition:transform .2s}
.note:hover{transform:rotate(0) translateY(-3px)}
.note b{font-family:var(--head);font-size:26px;line-height:1;color:var(--hi)}
.sect-label{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:12px}

/* ---------- lesson ---------- */
.lesson{display:flex;flex-direction:column;gap:18px;scroll-margin-top:20px}
.lh{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;max-width:820px}
.badge{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--hb);color:var(--hi);font-family:var(--head);font-weight:700;font-size:20px}
.badge .ico{width:24px;height:24px}
.lh h2{font-family:var(--head);font-size:clamp(24px,3vw,32px);line-height:1.15;margin:4px 0 0;letter-spacing:-.01em;font-weight:700;text-wrap:balance}
.lh p{color:var(--muted);margin-top:6px;font-size:16px}
.stage{background:var(--panel);border-radius:24px;padding:26px;box-shadow:var(--shadow);min-width:0;position:relative}
@media (max-width:560px){.stage{padding:16px;border-radius:18px}}
.under{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.takeaway{flex:1 1 380px;display:flex;gap:12px;align-items:flex-start;background:var(--ink);color:var(--paper);border-radius:18px;padding:14px 18px;font-size:16px;line-height:1.45}
.takeaway .ico{width:20px;height:20px;margin-top:2px;color:var(--h4)}
.hook{flex:0 1 320px;background:var(--h4);color:var(--ink);border-radius:18px;padding:12px 16px;font-size:14.5px;transform:rotate(-1deg);display:flex;flex-direction:column;gap:2px}
.hook b{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--h4i)}
.scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.hint{font-size:13px;color:var(--faint)}
.tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}

/* ---------- detail card (shared) ---------- */
.detail{margin-top:18px;border-radius:16px;background:var(--wash);padding:14px 18px;display:flex;gap:14px;align-items:flex-start;min-height:62px;transition:background .25s}
.detail .dot{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--hb,var(--panel));color:var(--hi,var(--ink));flex:none}
.detail b{display:block;font-size:16px}
.detail p{color:var(--muted);font-size:15px}
.detail.fresh{animation:pop .35s both}
@keyframes pop{from{transform:scale(.98);opacity:.4}to{transform:none;opacity:1}}

/* ---------- flowchart (tree) ---------- */
.fc{position:relative;min-width:max-content;padding:4px 4px 8px}
.fc svg.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wires path{fill:none;stroke:var(--wire);stroke-width:2;transition:stroke .25s,stroke-width .25s}
.wires path.lit{stroke:var(--ink);stroke-width:2.5}
.wires path.draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw .8s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.fc-top{display:flex;justify-content:center;margin-bottom:44px}
.fc-cols{display:flex;gap:22px;align-items:flex-start;justify-content:center}
.fc-col{display:flex;flex-direction:column;align-items:flex-start;width:200px}
.fc-leaves{display:flex;flex-direction:column;gap:8px;margin:14px 0 0 26px;width:calc(100% - 26px)}
.fc-leaves .fc-leaves{margin-top:8px;margin-left:20px;width:calc(100% - 20px)}
.fc-leaves[hidden]{display:none}
.nd{position:relative;border:1.5px solid var(--ink);border-radius:14px;background:var(--panel);padding:9px 12px;font-size:14px;font-weight:600;line-height:1.3;text-align:left;cursor:pointer;width:100%;display:flex;gap:9px;align-items:flex-start;transition:transform .15s,box-shadow .15s,opacity .25s,background .2s}
.nd small{display:block;font-weight:500;font-size:12px;color:var(--muted);margin-top:2px}
.nd .ico{margin-top:1px;color:var(--hi)}
.nd:hover{transform:translate(-1px,-1px);box-shadow:var(--pop)}
.nd.root{background:var(--ink);color:var(--paper);font-family:var(--head);font-size:19px;padding:12px 22px;border-radius:999px;width:auto;align-items:center}
.nd.root small{color:var(--faint);font-family:var(--font)}
.nd.br{background:var(--hb);border-color:transparent;font-size:15px;padding:12px 14px}
.nd.br small{color:var(--hi);opacity:.85}
.nd.lf{border-color:var(--line);font-weight:500}
.nd.lf.has::after{content:'+';position:absolute;right:8px;top:6px;font-weight:700;color:var(--faint)}
.nd.lf.has.open::after{content:'\2212'}
.nd.lf.has{padding-right:24px}
.nd.on{box-shadow:var(--pop);transform:translate(-1px,-1px);border-color:var(--ink)}
.nd.lf.on{background:var(--hb)}
.fc.focus .nd:not(.on):not(.root){opacity:.45}
.fc.stacked .fc-cols{flex-direction:column;align-items:stretch;gap:14px;padding-left:28px}
.fc.stacked .fc-top{justify-content:flex-start;margin-bottom:18px}
.fc.stacked .fc-col{width:auto}
.fc.stacked{min-width:0}

/* ---------- decision flowchart ---------- */
.df{position:relative}
.df svg.wires{position:absolute;inset:0;pointer-events:none;overflow:visible}
.df .wires text{font-size:12px;font-weight:700;fill:var(--muted);font-family:var(--font)}
.df .wires text.lit{fill:var(--ink)}
.dn{position:absolute;border-radius:16px;padding:11px 13px;font-size:14px;line-height:1.3;font-weight:600;background:var(--panel);border:1.5px solid var(--ink);transition:opacity .3s,box-shadow .2s,transform .2s;cursor:pointer;display:flex;flex-direction:column;gap:8px;text-align:left}
.dn.q::before{content:'?';position:absolute;top:-11px;left:-11px;width:24px;height:24px;border-radius:50%;background:var(--h4);color:var(--h4i);border:1.5px solid var(--ink);display:grid;place-items:center;font-size:13px;font-weight:800}
.dn.end{background:var(--hb);border-color:transparent;border-radius:999px;text-align:center;align-items:center;justify-content:center;padding:12px 14px;font-family:var(--head);font-size:16px}
.dn.cur{box-shadow:var(--pop);transform:translate(-1px,-1px)}
.dn.end.cur{border-color:var(--ink)}
.df.tracing .dn:not(.lit){opacity:.28}
.dn .yn{display:none;gap:6px}
.dn.cur .yn{display:flex}
.yn button{flex:1;border:1.5px solid var(--ink);border-radius:999px;background:var(--panel);font-size:13px;font-weight:700;padding:4px 0;cursor:pointer}
.yn button:hover{background:var(--ink);color:var(--paper)}

/* ---------- route (sequence) ---------- */
.route{position:relative;padding:8px 0 0}
.stops{display:flex;position:relative;z-index:1}
.stop{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;background:none;border:0;cursor:pointer;padding:0 6px;min-width:0}
.stop .wp{width:22px;height:22px;border-radius:50%;background:var(--panel);border:2.5px solid var(--line);transition:all .3s}
.stop.done .wp{border-color:var(--ink);background:var(--ink)}
.stop.on .wp{border-color:var(--ink);background:var(--h4);transform:scale(1.25)}
.stop.warn.on .wp{background:var(--warn-bg);border-color:var(--warn)}
.stop b{font-size:14px;line-height:1.25;font-weight:700}
.stop>div{display:flex;flex-direction:column;align-items:center;gap:2px}
.stop span{font-size:12px;color:var(--muted);line-height:1.3}
.stop:not(.on) b{color:var(--muted)}
.track{position:absolute;left:0;right:0;top:51px;height:0;border-top:2.5px dashed var(--line)}
.track i{position:absolute;left:0;top:-2.5px;height:2.5px;background:var(--ink);width:0;transition:width .6s ease}
.plane{position:absolute;top:24px;left:0;width:30px;height:30px;transition:left .6s cubic-bezier(.5,0,.3,1),top .6s cubic-bezier(.5,0,.3,1);color:var(--ink);z-index:2;pointer-events:none}
.route.v .stops{flex-direction:column;gap:16px;padding-left:46px}
.route.v .stop{flex-direction:row;text-align:left;align-items:center;padding:0}
.route.v .stop>div{align-items:flex-start}
.route.v .track{left:56px;right:auto;top:0;bottom:0;border-top:0;border-left:2.5px dashed var(--line);width:0;height:auto}
.route.v .track i{width:2.5px;height:0;left:-2.5px;top:0;transition:height .6s ease}
.route.v .plane{left:0}
.route.v .plane svg{transform:rotate(90deg)}
.route-ctl{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap;align-items:center}

/* ---------- altitude (layers) ---------- */
.alt{display:grid;grid-template-columns:84px 44px minmax(0,1fr);gap:0 8px}
.alt .lab{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;padding-top:6px}
.alt .lane{position:relative}
.alt .lane .plane{left:6px;top:0;transition:top .55s cubic-bezier(.5,0,.3,1)}
.alt .band{border:0;border-radius:14px;margin-bottom:6px;padding:12px 16px;text-align:left;cursor:pointer;background:var(--hb);color:var(--ink);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.alt .band b{font-size:15.5px}.alt .band span{font-size:13.5px;color:var(--muted)}
.alt .band.on{box-shadow:var(--pop);transform:translate(-1px,-1px);outline:1.5px solid var(--ink)}
.alt .gnd{grid-column:3;height:10px;border-radius:999px;background:repeating-linear-gradient(90deg,var(--ink) 0 10px,transparent 10px 16px);opacity:.6;margin-top:2px}

/* ---------- rings ---------- */
.rings{display:grid;grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:28px;align-items:center}
@media (max-width:760px){.rings{grid-template-columns:1fr}}
.rings svg{width:100%;height:auto;display:block}
.rings circle{cursor:pointer;transition:stroke-width .2s}
.rings circle.on{stroke:var(--ink)!important;stroke-width:3}
.rings ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rings li{display:grid;grid-template-columns:16px 1fr;gap:12px;padding:10px 12px;border-radius:14px;cursor:pointer;transition:background .2s}
.rings li.on{background:var(--wash)}
.rings li i{width:16px;height:16px;border-radius:50%;margin-top:3px;background:var(--hb);border:1.5px solid var(--hi)}
.rings li span{display:block;color:var(--muted);font-size:14px}

/* ---------- table ---------- */
table.mx{border-collapse:separate;border-spacing:0 6px;width:100%;min-width:560px;font-size:14.5px}
.mx th,.mx td{padding:11px 14px;text-align:left;vertical-align:top}
.mx thead th{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:700;padding-block:2px 4px}
.mx tbody tr{background:var(--wash);transition:background .2s}
.mx tbody tr:hover{background:var(--hb)}
.mx tbody td:first-child,.mx tbody th:first-child{border-radius:12px 0 0 12px}
.mx tbody td:last-child{border-radius:0 12px 12px 0}
.mx tbody th{font-weight:700;white-space:nowrap}
.mx tbody th span{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--hb);color:var(--hi);font-size:13.5px}
.mx td[data-tipped]{cursor:help;text-decoration:underline dotted var(--faint);text-underline-offset:3px}
.mx .k{display:inline-block;background:var(--panel);border:1.5px solid var(--ink);border-radius:8px;padding:1px 8px;font-weight:700}
.mx .w{display:inline-block;background:var(--warn-bg);color:var(--warn);border-radius:8px;padding:1px 8px;font-weight:700}

/* ---------- decoder ---------- */
.code{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:24px}
.code button{font-family:var(--mono);font-size:clamp(28px,6vw,48px);font-weight:700;border:1.5px solid transparent;background:var(--hb);color:var(--hi);border-radius:16px;padding:8px 18px;cursor:pointer;transition:transform .2s,box-shadow .2s}
.code button.on{border-color:var(--ink);box-shadow:var(--pop);transform:translate(-2px,-4px)}
.keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.keys div{padding:12px 14px;border-radius:14px;background:var(--wash);border:1.5px solid transparent;transition:all .2s;cursor:pointer}
.keys div.on{background:var(--hb);border-color:var(--ink)}
.keys b{font-family:var(--mono);background:var(--hb);color:var(--hi);border-radius:6px;padding:0 7px;margin-right:8px}
.keys p{font-size:14px;color:var(--muted);margin-top:4px}

/* ---------- numbers ---------- */
.nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.num{border:0;text-align:left;background:var(--hb);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;cursor:default;min-height:118px;transition:transform .2s;position:relative}
.num:hover{transform:translateY(-3px)}
.num .ico{color:var(--hi);width:20px;height:20px}
.num .v{font-family:var(--head);font-size:24px;font-weight:700;line-height:1.1;color:var(--ink);transition:filter .3s,opacity .3s}
.num .k{font-size:14px;font-weight:600;line-height:1.3}
.num .n{font-size:12.5px;color:var(--muted);line-height:1.3}
.nums.quiz .num{cursor:pointer}
.nums.quiz .num:not(.shown) .v{filter:blur(9px);opacity:.5}
.nums.quiz .num:not(.shown)::after{content:'tap to reveal';position:absolute;right:12px;top:14px;font-size:11px;color:var(--hi);font-weight:700}

/* ---------- pairs ---------- */
.pairs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:16px}
.pair{display:flex;flex-direction:column;gap:0}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:relative}
.side{border-radius:18px;padding:16px;background:var(--hb);min-height:96px}
.side b{display:block;font-family:var(--head);font-size:18px;color:var(--hi);margin-bottom:3px;line-height:1.2}
.side p{font-size:14px;color:var(--ink);opacity:.85}
.vs::after{content:'vs';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:12px;font-weight:800;font-family:var(--head)}
.tell{margin:-6px 14px 0;background:var(--panel);border:1.5px solid var(--ink);border-radius:14px;padding:9px 14px;font-size:14px;position:relative;box-shadow:var(--pop)}
.tell b{margin-right:6px}

/* ---------- quiz ---------- */
.quizbox{max-width:720px;display:flex;flex-direction:column;gap:16px}
.qbar{display:flex;gap:6px}
.qbar i{flex:1;height:6px;border-radius:999px;background:var(--line)}
.qbar i.ok{background:var(--h1i)}.qbar i.no{background:var(--warn)}.qbar i.cur{background:var(--ink)}
.qq{font-family:var(--head);font-size:22px;line-height:1.3;font-weight:600}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{border:1.5px solid var(--line);background:var(--panel);border-radius:14px;padding:12px 16px;text-align:left;cursor:pointer;font-size:15.5px;display:flex;gap:12px;align-items:center;transition:all .15s}
.opt i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--wash);display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
.opt:hover:not([disabled]){border-color:var(--ink);transform:translate(-1px,-1px);box-shadow:var(--pop)}
.opt.ok{background:var(--h1);border-color:var(--h1i)}.opt.ok i{background:var(--h1i);color:var(--h1)}
.opt.no{background:var(--warn-bg);border-color:var(--warn)}.opt.no i{background:var(--warn);color:var(--warn-bg)}
.opt[disabled]{cursor:default}
.why{background:var(--wash);border-radius:14px;padding:12px 16px;font-size:15px;animation:pop .3s both}
.score{font-family:var(--head);font-size:40px;font-weight:700}

/* ---------- tooltip ---------- */
#tip{position:fixed;z-index:50;max-width:300px;background:var(--tip-bg);color:var(--tip-fg);padding:10px 13px;border-radius:12px;font-size:14px;line-height:1.45;box-shadow:0 12px 32px rgba(0,0,0,.22);pointer-events:none;display:none}
#tip b{display:block;margin-bottom:2px}

/* ---------- foot ---------- */
details.teacher{color:var(--muted);font-size:14px;background:var(--panel);border-radius:18px;padding:14px 18px}
details.teacher summary{cursor:pointer;font-weight:600}
details.teacher ul{margin:10px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
details.teacher h4{margin:14px 0 0;font-size:13px;color:var(--ink)}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pager a{text-decoration:none;background:var(--panel);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow);transition:transform .2s}
.pager a:hover{transform:translateY(-3px)}
.pager a span{font-size:13px;color:var(--faint)}
.pager a b{display:block;font-family:var(--head);font-size:18px;line-height:1.25}

/* ---------- index ---------- */
.ix-hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:center;margin-bottom:28px}
@media (max-width:760px){.ix-hero{grid-template-columns:1fr}.ix-hero .hero-art{display:none}}
.ix-search{width:100%;max-width:440px;padding:13px 18px;border-radius:999px;border:1.5px solid var(--ink);background:var(--panel);color:var(--ink);font:inherit;box-shadow:var(--pop)}
.part{margin-top:40px}
.part h2{font-family:var(--head);font-size:26px;margin:0 0 14px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{background:var(--panel);border-radius:22px;padding:18px;text-decoration:none;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden;min-height:180px}
.card:hover{transform:translate(-2px,-3px);box-shadow:var(--pop);outline:1.5px solid var(--ink)}
.card .top{display:flex;justify-content:space-between;align-items:center}
.card .no{font-family:var(--head);font-size:34px;font-weight:700;color:var(--hi);line-height:1}
.card .ic{width:44px;height:44px;border-radius:14px;background:var(--hb);color:var(--hi);display:grid;place-items:center}
.card .ic .ico{width:24px;height:24px}
.card h3{margin:0;font-family:var(--head);font-size:19px;line-height:1.2}
.card p{color:var(--muted);font-size:14px;line-height:1.4}
.card.off{opacity:.5;pointer-events:none;box-shadow:none;background:transparent;border:1.5px dashed var(--line)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* book definitions */
blockquote.book{margin:8px 0 0;padding:8px 12px;border-left:3px solid var(--hi,var(--ink));background:var(--panel);border-radius:0 10px 10px 0;font-size:14px;line-height:1.5;color:var(--ink);font-style:italic}
blockquote.book span{display:block;font-style:normal;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--faint);margin-bottom:2px}
#tip em{display:block;margin-top:6px;opacity:.8;font-size:13px}
.keys .kq{font-style:italic;font-size:13px;margin-top:6px;color:var(--ink);opacity:.8}