/* AI Library — theme + layout */
:root{
  --bg:#0d1117; --bg2:#131a23; --panel:#161d27; --panel2:#1c2430;
  --bd:#26303d; --bd2:#334154;
  --fg:#e6edf3; --fg2:#a7b4c4; --fg3:#78889c;
  --acc:#5eb3ff; --acc2:#7ee2b8; --warn:#ffb86b; --bad:#ff7b72; --pur:#c39bff;
  --radius:12px;
  --mono:"JetBrains Mono","Fira Code",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;
}
/* Light theme. The muted/status colours are darker than their dark-theme counterparts
   because the contrast maths runs the other way: on a near-white panel a mid-grey that
   reads fine on #0d1117 lands around 4.1:1, under the 4.5:1 WCAG AA floor for small text.
   Values below were computed to clear 4.6:1 against ALL four light surfaces
   (#ffffff card, #f7f9fc page, #eef2f7 sidebar, #f2f5fa panel2), not just white. */
html[data-theme="light"]{
  --bg:#f7f9fc; --bg2:#eef2f7; --panel:#ffffff; --panel2:#f2f5fa;
  --bd:#dde4ee; --bd2:#c6d2e2;
  --fg:#131b26; --fg2:#465468; --fg3:#616e81;
  --acc:#1466c7; --acc2:#0d7c55; --warn:#9d5e09; --bad:#c0362c; --pur:#7440cc;
}

/* Accent-filled controls hardcode a near-black label, which works on the dark theme's
   light-blue accent but fails on the light theme's dark-blue one (3.61:1). Flip to white. */
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .pill.on,
html[data-theme="light"] .logo{ color:#ffffff }
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--fg); font-family:var(--sans);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--acc); text-decoration:none}
a:hover{text-decoration:underline}
code,kbd,pre{font-family:var(--mono)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--acc);color:#000;padding:8px;z-index:99;border-radius:6px}

/* ---------- topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:14px;
  padding:10px 16px; background:color-mix(in srgb,var(--bg) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--bd);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand strong{display:block;line-height:1.1;font-size:15px}
.brand small{display:block;color:var(--fg3);font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.logo{
  width:32px;height:32px;display:grid;place-items:center;border-radius:9px;
  background:linear-gradient(135deg,var(--acc),var(--pur)); color:#04070c; font-weight:800;
}
.searchwrap{position:relative;flex:1;max-width:640px;margin-left:auto}
#globalSearch{
  width:100%; padding:9px 14px; border-radius:999px; border:1px solid var(--bd2);
  background:var(--panel); color:var(--fg); font-size:14px; outline:none;
}
#globalSearch:focus{border-color:var(--acc); box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 22%,transparent)}
.searchresults{
  position:absolute; top:46px; left:0; right:0; max-height:65vh; overflow:auto; z-index:60;
  background:var(--panel); border:1px solid var(--bd2); border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(0,0,0,.45); padding:6px;
}
.sr-item{display:block;padding:8px 10px;border-radius:8px;color:var(--fg)}
.sr-item:hover,.sr-item.active{background:var(--panel2);text-decoration:none}
.sr-item .k{font-size:11px;color:var(--fg3);text-transform:uppercase;letter-spacing:.05em}
.sr-item .t{font-weight:600}
.sr-item .d{font-size:12.5px;color:var(--fg2)}
.sr-empty{padding:14px;color:var(--fg3);text-align:center}
.topactions{display:flex;align-items:center;gap:8px}
select,button{font-family:inherit}
#trackFilter{
  background:var(--panel);color:var(--fg);border:1px solid var(--bd2);
  border-radius:999px;padding:8px 12px;font-size:13px;outline:none;cursor:pointer
}
.iconbtn{
  background:var(--panel);border:1px solid var(--bd2);color:var(--fg);
  border-radius:10px;width:36px;height:36px;font-size:15px;cursor:pointer
}
.iconbtn:hover{border-color:var(--acc)}
#navToggle{display:none}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:262px minmax(0,1fr);gap:0;align-items:start}
.sidebar{
  position:sticky; top:57px; height:calc(100vh - 57px); overflow-y:auto;
  padding:18px 12px 40px; border-right:1px solid var(--bd); background:var(--bg2);
}
.navgroup{margin-bottom:18px;display:flex;flex-direction:column;gap:2px}
/* The sidebar grew past 30 links. Groups collapse so you can shrink the parts you
   are not using; the state is remembered per group. Keyboard-operable because a
   div that only responds to a mouse is not a control. */
.navlabel{
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);
  padding:5px 10px 6px;display:flex;align-items:center;gap:6px;
  cursor:pointer;user-select:none;border-radius:6px;
}
.navlabel:hover{color:var(--fg2);background:var(--panel)}
.navlabel:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}

/* Keyboard focus was invisible everywhere except the two controls I had wired by hand.
   A sighted keyboard user could tab through the whole sidebar with no idea where they
   were — WCAG 2.4.7. :focus-visible keeps mouse clicks from drawing rings. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--acc);
  outline-offset:2px;
  border-radius:4px;
}
.navlink:focus-visible{outline-offset:-2px}

/* Announced to screen readers, invisible on screen. Used to restore heading order
   where the visual design uses a styled row rather than a real <h2>. */
.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;
}
.navlabel .navchev{
  margin-left:auto;font-size:9px;opacity:.6;transition:transform .15s ease;
}
.navgroup.collapsed .navchev{transform:rotate(-90deg)}
.navgroup.collapsed .navlink{display:none}
.navlabel .navcount{
  font-size:9.5px;opacity:0;transition:opacity .15s ease;
  background:var(--panel2);padding:1px 5px;border-radius:8px;
}
.navgroup.collapsed .navcount{opacity:.7}
.navlink{
  display:block;padding:7px 11px;border-radius:8px;color:var(--fg2);font-size:14px;
  border-left:2px solid transparent;
}
.navlink:hover{background:var(--panel);color:var(--fg);text-decoration:none}
.navlink.active{background:var(--panel);color:var(--fg);border-left-color:var(--acc);font-weight:600}
.navfoot{border-top:1px solid var(--bd);padding-top:12px;display:flex;flex-direction:column;gap:4px}
.stat{font-size:11.5px;color:var(--fg3);padding:0 10px}
.stat span{color:var(--acc);font-weight:700}
.content{padding:26px 30px 90px;min-width:0;max-width:1180px}

/* ---------- typography ---------- */
h1{font-size:30px;line-height:1.2;margin:0 0 8px}
h2{font-size:21px;margin:34px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--bd)}
h3{font-size:16.5px;margin:22px 0 8px}
h4{font-size:14px;margin:16px 0 6px;color:var(--fg2)}
p{margin:0 0 12px}
.lede{color:var(--fg2);font-size:16px;max-width:78ch}
.muted{color:var(--fg3)}
ul,ol{margin:0 0 12px;padding-left:20px}
li{margin:3px 0}
hr{border:0;border-top:1px solid var(--bd);margin:26px 0}

/* ---------- components ---------- */
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.card{
  background:var(--panel);border:1px solid var(--bd);border-radius:var(--radius);
  padding:16px 18px;
}
.card.hover:hover{border-color:var(--acc);transform:translateY(-2px)}
.card.hover{transition:.14s ease}
.card h3{margin-top:0}
.card-link{color:inherit}
.card-link:hover{text-decoration:none}

.badge{
  display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--bd2);color:var(--fg2);background:var(--panel2);
  margin:0 5px 5px 0;white-space:nowrap
}
.badge.acc{color:var(--acc);border-color:color-mix(in srgb,var(--acc) 45%,transparent)}
.badge.ok{color:var(--acc2);border-color:color-mix(in srgb,var(--acc2) 45%,transparent)}
.badge.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.badge.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.badge.pur{color:var(--pur);border-color:color-mix(in srgb,var(--pur) 45%,transparent)}

.note{border-left:3px solid var(--acc);background:var(--panel2);padding:10px 14px;border-radius:0 8px 8px 0;margin:12px 0}
.note.warn{border-color:var(--warn)}
.note.bad{border-color:var(--bad)}
.note.ok{border-color:var(--acc2)}
.note strong{color:var(--fg)}

/* Derivations are written with real line breaks and column-aligned shape tables
   (X in R^{n x d_model}   input, n tokens). Default HTML whitespace collapsing turns
   that into one unreadable run-on paragraph, so preserve it and let wide lines scroll
   inside the block rather than pushing the page sideways. */
.mathblock{
  display:block;white-space:pre-wrap;font-family:var(--mono);
  font-size:12.5px;line-height:1.55;margin-top:6px;
  overflow-x:auto;max-width:100%;
}

pre{
  background:#0a0e14;border:1px solid var(--bd);border-radius:10px;padding:13px 14px;
  overflow-x:auto;font-size:12.8px;line-height:1.55;margin:8px 0;position:relative;color:#d6e2f0
}
html[data-theme="light"] pre{background:#101720;color:#dfe8f3}
pre .c{color:#7d8ea3}         /* comment */
pre .k{color:#7ee2b8}         /* keyword/binary */
pre .f{color:#ffb86b}         /* flag */
/* ---- copy-ready terminal window ---- */
.term{
  border:1px solid var(--bd2);border-radius:11px;overflow:hidden;margin:10px 0;
  background:#0a0e14;box-shadow:0 6px 20px rgba(0,0,0,.28)
}
.term-bar{
  display:flex;align-items:center;gap:10px;padding:7px 11px;
  background:#151b24;border-bottom:1px solid #222c39
}
.term-bar .dots{display:flex;gap:6px;flex:none}
.term-bar .dots i{width:11px;height:11px;border-radius:50%;display:block}
.term-bar .dots i:nth-child(1){background:#ff5f57}
.term-bar .dots i:nth-child(2){background:#febc2e}
.term-bar .dots i:nth-child(3){background:#28c840}
.term-title{
  flex:1;min-width:0;font-family:var(--mono);font-size:11.5px;color:#8b9bb0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.term pre{margin:0;border:0;border-radius:0;background:transparent;padding:14px 15px}
.copybtn{
  flex:none;font-size:11px;padding:4px 12px;border-radius:6px;font-family:var(--sans);
  border:1px solid #33404f;background:#1d2530;color:#b9c6d6;cursor:pointer;transition:.14s
}
.copybtn:hover{color:#fff;border-color:var(--acc);background:#243040}
.copybtn:active{transform:scale(.96)}

table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13.5px;display:block;overflow-x:auto}
th,td{border:1px solid var(--bd);padding:8px 11px;text-align:left;vertical-align:top}
th{background:var(--panel2);font-weight:600;white-space:nowrap}

.pill-row{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.pill{
  padding:5px 12px;border-radius:999px;border:1px solid var(--bd2);background:var(--panel);
  color:var(--fg2);font-size:12.5px;cursor:pointer;user-select:none
}
.pill:hover{border-color:var(--acc);color:var(--fg)}
.pill.on{background:var(--acc);border-color:var(--acc);color:#04070c;font-weight:600}

.level{
  border:1px solid var(--bd);border-radius:var(--radius);margin:12px 0;overflow:hidden;background:var(--panel)
}
.level-head{
  display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;background:var(--panel2)
}
.level-head:hover{background:var(--bd)}
.level-num{
  width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;
  font-weight:800;background:var(--bg);border:1px solid var(--bd2);color:var(--acc)
}
.level-title{flex:1;min-width:0}
.level-title b{display:block;font-size:15.5px}
.level-title small{color:var(--fg3);font-size:12px}
.level-body{padding:4px 18px 18px;display:none}
.level.open .level-body{display:block}
.level.open .chev{transform:rotate(90deg)}
.chev{transition:.15s;color:var(--fg3)}

.toolrow{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:start;
  padding:13px 16px;border:1px solid var(--bd);border-radius:10px;background:var(--panel);margin-bottom:8px;cursor:pointer
}
.toolrow:hover{border-color:var(--acc)}
.toolrow h4{margin:0 0 3px;color:var(--fg);font-size:15px}
.toolrow p{margin:0;color:var(--fg2);font-size:13.5px}
.toolrow.open{border-color:var(--acc)}
.tooldetail{grid-column:1/-1;border-top:1px solid var(--bd);margin-top:10px;padding-top:12px;display:none}
.toolrow.open .tooldetail{display:block}

.kv{display:grid;grid-template-columns:120px 1fr;gap:6px 14px;font-size:13.5px;margin:8px 0}
.kv dt{color:var(--fg3);font-weight:600}
.kv dd{margin:0}

/* ---- pillars & learning resources ---- */
ol.pillars{
  counter-reset:pil;list-style:none;padding:0;margin:8px 0 14px;
  display:grid;gap:5px
}
ol.pillars li{
  counter-increment:pil;position:relative;padding:6px 10px 6px 34px;margin:0;
  background:var(--panel2);border:1px solid var(--bd);border-radius:8px;font-size:13.6px
}
ol.pillars li::before{
  content:counter(pil);position:absolute;left:9px;top:6px;
  width:18px;height:18px;border-radius:5px;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--bd2);color:var(--acc);
  font-size:10.5px;font-weight:700;font-family:var(--mono)
}
ul.learnlist{list-style:none;padding:0;margin:8px 0 14px;display:grid;gap:4px}
ul.learnlist li{margin:0;font-size:13.6px;line-height:1.5}
ul.learnlist .badge{margin-right:4px;min-width:62px;text-align:center}

/* ---- domain hierarchy ---- */
.subdomain{border-left:3px solid var(--acc);padding-left:14px;margin:0 0 16px}
.sd-name{font-weight:700;font-size:14.5px;margin-bottom:6px;color:var(--fg)}
.topic{margin:0 0 10px}
.tp-name{
  font-size:13.2px;font-weight:600;color:var(--acc2);margin-bottom:3px;
  text-transform:uppercase;letter-spacing:.04em
}
ul.subtopics{list-style:none;padding:0;margin:0;display:grid;gap:2px}
ul.subtopics li{
  margin:0;padding:3px 0 3px 16px;font-size:13.3px;color:var(--fg2);position:relative
}
ul.subtopics li::before{
  content:"▸";position:absolute;left:2px;color:var(--fg3);font-size:11px
}

/* ---- interview questions ---- */
.iq{
  border:1px solid var(--bd);border-left:3px solid var(--pur);border-radius:0 10px 10px 0;
  background:var(--panel);padding:12px 15px;margin-bottom:9px
}
.iq-q{font-weight:600;font-size:14.3px;line-height:1.5}
.iq-ctx{font-size:12px;margin-top:3px}
.iq details{margin-top:9px}
.iq summary{
  cursor:pointer;font-size:12.5px;color:var(--acc);user-select:none;
  padding:3px 0;list-style:none
}
.iq summary::-webkit-details-marker{display:none}
.iq summary::before{content:"▸ ";display:inline-block;transition:.15s}
.iq details[open] summary::before{transform:rotate(90deg)}
.iq summary:hover{text-decoration:underline}
.iq-signal{
  margin-top:8px;padding:9px 12px;border-radius:8px;font-size:13.4px;line-height:1.55;
  background:color-mix(in srgb,var(--acc2) 10%,var(--panel2));
  border:1px solid color-mix(in srgb,var(--acc2) 30%,transparent)
}
.iq-trap{
  margin-top:6px;padding:9px 12px;border-radius:8px;font-size:13.4px;line-height:1.55;
  background:color-mix(in srgb,var(--bad) 9%,var(--panel2));
  border:1px solid color-mix(in srgb,var(--bad) 28%,transparent)
}

/* ---- weekly plan ---- */
.level.week.done .level-head{background:color-mix(in srgb,var(--acc2) 12%,var(--panel2))}
.level.week.done .level-num{color:var(--acc2);border-color:color-mix(in srgb,var(--acc2) 50%,transparent)}
.level.week.done .level-title b{text-decoration:line-through;text-decoration-color:var(--fg3)}
.wkdone{
  display:flex;align-items:center;gap:5px;flex:none;font-size:11.5px;color:var(--fg3);
  padding:3px 9px;border:1px solid var(--bd2);border-radius:999px;cursor:pointer;background:var(--bg)
}
.wkdone:hover{border-color:var(--acc2);color:var(--fg)}
.wkdone input{accent-color:var(--acc2);cursor:pointer;margin:0}
.linkbtn{
  background:none;border:0;color:var(--acc);cursor:pointer;font:inherit;
  padding:0;text-decoration:underline
}

.timeline{border-left:2px solid var(--bd);padding-left:18px;margin-left:8px}
.timeline .t-item{position:relative;padding-bottom:16px}
.timeline .t-item::before{
  content:"";position:absolute;left:-25px;top:6px;width:10px;height:10px;border-radius:50%;
  background:var(--acc);border:2px solid var(--bg)
}
.feeditem{border:1px solid var(--bd);border-radius:10px;padding:12px 14px;background:var(--panel);margin-bottom:8px}
.feeditem .meta{font-size:11.5px;color:var(--fg3);display:flex;gap:10px;flex-wrap:wrap;margin-top:5px}

.errbanner{
  position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;
  justify-content:space-between;gap:14px;padding:9px 18px;font-size:13.5px;
  background:color-mix(in srgb,var(--bad) 22%,var(--panel));
  border-bottom:1px solid var(--bad);color:var(--fg)
}
.errbanner a{color:var(--fg);text-decoration:underline}
.errbanner button{color:var(--fg);font-size:15px;line-height:1}

.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:99;
  background:var(--panel);border:1px solid var(--acc);color:var(--fg);
  padding:10px 18px;border-radius:999px;font-size:13.5px;box-shadow:0 10px 30px rgba(0,0,0,.4)
}
.btn{
  display:inline-block;padding:9px 16px;border-radius:9px;border:1px solid var(--bd2);
  background:var(--panel);color:var(--fg);font-size:13.5px;cursor:pointer;text-decoration:none
}
.btn:hover{border-color:var(--acc);text-decoration:none}
.btn.primary{background:var(--acc);border-color:var(--acc);color:#04070c;font-weight:600}
.btn.primary:hover{opacity:.9}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}

.hero{
  border:1px solid var(--bd);border-radius:16px;padding:28px 30px;margin-bottom:8px;
  background:
    radial-gradient(900px 260px at 8% -30%, color-mix(in srgb,var(--acc) 20%,transparent), transparent),
    radial-gradient(700px 240px at 92% -20%, color-mix(in srgb,var(--pur) 18%,transparent), transparent),
    var(--panel);
}
.progress{height:6px;background:var(--bd);border-radius:99px;overflow:hidden;margin-top:8px}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--acc),var(--acc2))}

@media(max-width:960px){
  .shell{grid-template-columns:1fr}
  .sidebar{
    position:fixed;left:0;top:57px;width:262px;z-index:50;transform:translateX(-100%);
    transition:.2s;box-shadow:14px 0 40px rgba(0,0,0,.4)
  }
  .sidebar.open{transform:none}
  #navToggle{display:block}
  .content{padding:20px 16px 80px}
  .searchwrap{max-width:none}
  .brand small{display:none}
  .kv{grid-template-columns:1fr}
}

/* ---- phones ----
   Below ~560px the topbar has four things competing for one row: menu button, brand,
   search and the track filter. Everything shrinks until the brand wraps to two lines and
   the search collapses to a circle you cannot type in. Give search its own full-width row
   instead — the standard phone pattern, and it keeps the one control people actually use. */
@media(max-width:560px){
  .topbar{flex-wrap:wrap;gap:8px;padding:8px 12px}
  .brand{flex:0 1 auto;min-width:0}
  .brand strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topactions{margin-left:auto;flex:0 0 auto}
  .searchwrap{order:3;flex:1 0 100%;max-width:none;margin-left:0}
  #globalSearch{font-size:16px}   /* <16px makes iOS Safari zoom the whole page on focus */
  #trackFilter{max-width:130px;text-overflow:ellipsis}

  /* The topbar is two rows now, so the sticky sidebar and header offsets must follow it. */
  .sidebar{top:98px;height:calc(100vh - 98px);width:min(86vw,300px)}
}

/* Very narrow phones (iPhone SE / mini, 360px Androids). Below ~400px the brand text no
   longer fits alongside the menu button, track filter and theme toggle, so the row wraps to
   a THIRD line and the sidebar's top offset — pinned to a two-row header — lands underneath
   it. Drop the wordmark to the logo and the header stays exactly two rows. */
@media(max-width:400px){
  .brand strong,.brand small{display:none}
  .brand{gap:0}
  #trackFilter{max-width:150px;font-size:12.5px}
  .content{padding:14px 11px 68px}
  h1{font-size:22px}

  .content{padding:16px 13px 72px}
  h1{font-size:24px}
  h2{font-size:18px}
  .hero{padding:16px 15px}

  /* Wide content must scroll inside its own box, never push the page sideways. */
  table,pre,.term,.mathblock{max-width:100%;overflow-x:auto}
  .btnrow{flex-wrap:wrap}
  .btnrow .btn{flex:1 1 auto;text-align:center}
}

/* Touch targets. WCAG 2.5.8 asks for 24px minimum; 44px is the practical floor on a phone,
   and these controls were sized for a mouse.

   Keyed on BOTH a coarse pointer and a narrow viewport. Coarse alone is not enough: a phone
   paired with a stylus can report a fine pointer, and emulated mobile viewports report fine
   too — so the rule silently would not apply exactly where it is needed. Width alone is not
   enough either, since a narrow desktop window is still mouse-driven, but erring toward the
   bigger target there costs nothing. */
@media (pointer: coarse), (max-width:560px){
  .navlink{padding-top:11px;padding-bottom:11px}
  .btn,.iconbtn,.copybtn,#trackFilter{min-height:44px}
  .pill{padding:7px 11px}
  .navlabel{min-height:40px}
}
/* Vestibular disorders make transform/opacity animation genuinely unpleasant, and the OS
   already carries the user's answer. Honour it rather than making them find a setting here. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Print / save-as-PDF. This is a reference library, so pages get printed — a week of a
   plan, a tool's install block, a lineage chain to annotate. Defaults waste most of the
   page on chrome and drop every URL. */
@media print{
  .sidebar,.topbar,.toast,.searchresults,.copybtn,.btnrow,.skip{display:none !important}
  .content{max-width:none;padding:0}
  .shell{display:block}

  /* Print on white regardless of the on-screen theme — dark backgrounds either waste
     toner or get dropped by the browser, taking the light text with them. */
  html,body{background:#fff !important;color:#000 !important}
  .card,.note,.level,.hero{
    background:#fff !important;color:#000 !important;
    border:1px solid #bbb !important;box-shadow:none !important;
  }
  .term,pre,code,.mathblock{
    background:#f6f6f6 !important;color:#000 !important;border:1px solid #ccc !important;
  }
  .muted,small{color:#333 !important}

  /* A printed link is useless without its target. */
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px;color:#444;word-break:break-all}
  a[href^="#"]::after{content:""}          /* in-page routes would just be noise */

  /* Collapsed sections must print open — otherwise the page prints empty. */
  .level .level-body{display:block !important}
  .level,.card,.note{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  a{text-decoration:none;color:#000}
}

/* ---- charter & structure map ---- */
.charter-layer h3{display:flex;align-items:center;gap:10px;margin:0 0 6px}
.charter-layer .level-num{font-size:14px}
.charter-layer .pill{cursor:pointer;text-decoration:none;display:inline-block}
.charter-std{margin:10px 0}
.charter-std h3{margin:0 0 6px;font-size:15.5px}
.charter-std p{margin:6px 0}
/* The "what it caught" line is the evidence, so it gets a rule rather than being
   another indistinguishable paragraph. */
.charter-caught{
  border-left:3px solid var(--acc2);padding-left:10px;margin:8px 0 0;
  font-size:13.5px;color:var(--fg2)
}

/* ---- log viewer ---- */
/* Log lines are machine output: monospace, and never wrapped mid-token, or a stack
   frame becomes unreadable. The table scrolls rather than the page. */
.tablewrap{overflow-x:auto;border:1px solid var(--bd);border-radius:var(--radius);margin:10px 0}
.tablewrap table{margin:0;border:0;width:100%}
.nowrap{white-space:nowrap}
.mono,#logTable td:first-child{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
#logTable td{vertical-align:top;font-size:13px}
.logmeta{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  margin-top:3px;word-break:break-word;max-width:70ch
}
#logTable tr[hidden]{display:none}

/* ---- deep pillars ---- */
/* Each pillar is a small article, not a bullet. The left rule and the numbering
   keep a dozen of them scannable without collapsing into a wall of prose. */
.pillars-deep{counter-reset:pil;display:grid;gap:12px;margin:10px 0 16px}
.pillar{
  position:relative;border:1px solid var(--bd);border-left:3px solid var(--acc);
  border-radius:var(--radius);background:var(--panel);padding:14px 16px 14px 46px
}
.pillar::before{
  counter-increment:pil;content:counter(pil);
  position:absolute;left:14px;top:14px;
  width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--bd2);color:var(--acc);
  font-size:12px;font-weight:800
}
.pillar h5{margin:0 0 6px;font-size:14.5px;line-height:1.35}
.pillar p{margin:7px 0;font-size:13.5px;line-height:1.55}
.pil-what{color:var(--fg)}
.pil-why,.pil-model{color:var(--fg2)}
.pil-gotcha{
  border-left:2px solid var(--warn);padding-left:10px;color:var(--fg2)
}
.pillar .term{margin:9px 0}
@media (max-width:560px){
  .pillar{padding:12px 13px 12px 40px}
  .pillar::before{left:11px}
}

/* ---- search: correction notice ---- */
.sr-note{
  padding:8px 12px;font-size:12.5px;color:var(--fg3);
  border-bottom:1px solid var(--bd);background:var(--panel2)
}
.sr-note strong{color:var(--fg2)}
.sr-empty a{white-space:nowrap}

/* Keyboard-selected search result. Deliberately stronger than :hover — when both are
   visible at once (mouse resting over the list while you arrow through it) the keyboard
   selection is the one that Enter will actually open, so it must read as the winner. */
.sr-item.sel{
  background:color-mix(in srgb,var(--acc) 18%,var(--panel2));
  outline:1px solid color-mix(in srgb,var(--acc) 55%,transparent);outline-offset:-1px
}
.sr-item.sel .t{color:var(--fg)}

/* ---- cross-links ("Elsewhere in this library") ---- */
.rel-lede{margin:2px 0 8px;font-size:13px}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:8px 0 14px}
.rel-group{border:1px solid var(--bd);border-radius:var(--radius);background:var(--panel);padding:10px 12px}
.rel-kind{
  font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--fg3);
  margin-bottom:6px;font-weight:700
}
.rel-item{
  display:block;padding:5px 0;font-size:13px;line-height:1.4;
  border-top:1px solid var(--bd);color:var(--fg)
}
.rel-group .rel-item:first-of-type{border-top:0}
.rel-item span{display:block;font-size:11.5px;color:var(--fg3)}
.rel-item:hover{color:var(--acc);text-decoration:none}

/* ---- charter: the brain layer ---- */
.brainlist{display:grid;gap:8px;margin:8px 0 18px}
.brainitem{
  border:1px solid var(--bd);border-left:3px solid var(--acc2);border-radius:var(--radius);
  background:var(--panel);padding:10px 14px
}
.brainitem b{display:block;font-size:14px;margin-bottom:3px}
.brainitem p{margin:0;font-size:13.5px;line-height:1.55;color:var(--fg2)}
.charter-layer h3 .level-num,h2 .level-num{display:inline-grid;vertical-align:middle;margin-right:8px}

/* ---- orientation on long pages ---- */
/* #/transformers is ~23 screens with one section open. At that length the scrollbar thumb is
   a few pixels tall and conveys nothing, so these three give position, structure and a way
   back without taking layout space from the content. */
#scrollProg{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;background:transparent
}
#scrollProg i{display:block;height:100%;width:0;background:var(--acc);transition:width .08s linear}

#toTop{
  position:fixed;right:16px;bottom:16px;z-index:55;
  width:40px;height:40px;border-radius:50%;
  border:1px solid var(--bd2);background:var(--panel);color:var(--fg);
  font-size:17px;line-height:1;cursor:pointer;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .16s ease,transform .16s ease
}
#toTop.show{opacity:1;transform:none;pointer-events:auto}
#toTop:hover{border-color:var(--acc);color:var(--acc)}

#pageNav{
  position:fixed;right:16px;top:76px;z-index:50;width:210px;max-height:62vh;
  overflow-y:auto;border:1px solid var(--bd);border-radius:var(--radius);
  background:var(--panel);padding:10px 12px;font-size:12.5px
}
.pn-head{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg3);
  font-weight:700;margin-bottom:6px
}
.pn-list{list-style:none;margin:0;padding:0;counter-reset:pn}
.pn-list li{margin:0}
.pn-list a{
  display:block;padding:4px 0 4px 8px;color:var(--fg2);line-height:1.35;
  border-left:2px solid transparent
}
.pn-list a span{display:block;color:var(--fg3);font-size:11px}
.pn-list a:hover{color:var(--fg);text-decoration:none;border-left-color:var(--bd2)}
.pn-list a.here{color:var(--acc);border-left-color:var(--acc)}

/* The panel needs room the content does not have below ~1200px, and on a phone a floating
   sidebar is simply in the way. Back-to-top still works everywhere. */
@media (max-width:1200px){ #pageNav{display:none} }
@media (max-width:560px){ #toTop{right:12px;bottom:12px} }

/* ---- the journey ---- */
.nextstep{border-left:3px solid var(--acc);margin:14px 0}
.nextstep.done{border-left-color:var(--acc2)}
.ns-kind{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg3);font-weight:700}
.nextstep h3{margin:4px 0 6px;font-size:16px}
.ns-goal{color:var(--fg2)}
.ns-proof{border-left:2px solid var(--acc2);padding-left:10px;color:var(--fg2)}

.jprog{margin:12px 0 10px}
.jprog-txt{font-size:12.5px;color:var(--fg3);margin-top:5px}

.ladder{display:grid;gap:10px;margin:10px 0 18px}
.jlevel{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--bd);border-radius:var(--radius);background:var(--panel);padding:13px 15px
}
.jlevel.next{border-color:var(--acc);box-shadow:0 0 0 1px color-mix(in srgb,var(--acc) 30%,transparent)}
.jlevel.claimed{opacity:.82}
.jlevel.gap{border-left:3px solid var(--warn)}
.jl-mark{
  flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--bd2);color:var(--fg3);font-weight:800;font-size:13px
}
.jlevel.claimed .jl-mark{background:var(--acc2);border-color:var(--acc2);color:#04140d}
.jlevel.next .jl-mark{border-color:var(--acc);color:var(--acc)}
.jl-body{flex:1;min-width:0}
.jl-body h4{margin:0 0 5px;font-size:14.5px}
.jl-tag{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);
  border-radius:999px;padding:1px 7px;margin-left:6px;font-weight:700;vertical-align:middle
}
.jl-tag.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.jl-body p{margin:5px 0;font-size:13.5px;line-height:1.5}
.jl-goal{color:var(--fg2)}
.jl-proof{border-left:2px solid var(--acc2);padding-left:9px;color:var(--fg2)}
.jl-form{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.jl-form input{flex:1;min-width:190px}
.jl-claim{
  margin-top:9px;font-size:12.5px;color:var(--fg3);
  display:flex;gap:10px;align-items:center;flex-wrap:wrap
}
@media (max-width:560px){ .jlevel{padding:11px 12px;gap:9px} }