/* ============================================================
   KashSec Academy — design system
   Dark · amber · teal. Built for a premium, world-class feel.
   ============================================================ */

:root{
  /* Type. Every family carries a metric-compatible fallback chain: without
     one, a slow or blocked Google Fonts request dropped the brand, eyebrows
     and labels to the browser's default SERIF face rather than to a
     look-alike system font. */
  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-display:'Space Grotesk','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;
  /* Surfaces */
  --bg:#080A0F; --bg2:#0B0E15; --surface:#0F141E; --surface2:#141A26;
  --line:#212B3A; --line-soft:#1A2230;
  --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.13);

  /* Brand */
  --amber:#EFA43A; --amber-2:#FFC369; --amber-d:#C77F1E;
  /* Amber used as a text colour. Same as --amber on dark; on light, --amber
     itself stays bright for fills behind dark ink, so text gets a deeper
     shade that clears WCAG AA (4.5:1) on every light surface. */
  --amber-ink:var(--amber);
  --table-cover:var(--surface); --table-shadow:rgba(148,163,178,.28);
  --teal-ink:var(--teal);
  --teal:#3FB6A8; --teal-2:#5FE0CF; --crim:#E05548;

  /* Text */
  --text:#EAEFF5; --muted:#94A3B2; --muted2:#7A8B9A;

  /* Gradients & accents */
  --grad-brand:linear-gradient(115deg,var(--amber) 0%,var(--amber-2) 40%,var(--teal-2) 100%);
  --grad-amber:linear-gradient(180deg,#F5B152,#EA9C2C);
  --glow-amber:rgba(239,164,58,.5);
  --glow-teal:rgba(63,182,168,.45);

  /* Theme-sensitive overlays & surfaces (redefined under [data-theme="light"]) */
  --overlay-1:rgba(255,255,255,.02);
  --overlay-2:rgba(255,255,255,.035);
  --overlay-3:rgba(255,255,255,.04);
  --card-grad-to:#0d121b;
  --md-text:#c9d3dd;
  --md-quote-text:#d3e2df;
  --nav-bg:rgba(9,12,18,.6);
  --nav-bg-scrolled:rgba(9,12,18,.82);
  --nav-bg-mobile:rgba(11,14,21,.97);
  --scrollbar-track:transparent;
  --scrollbar-thumb:#242f40;
  --scrollbar-thumb-hover:#33445c;
  --scrollbar-color:#2a3547;
  --code-bg:#070A10;
  --code-text:#b9e6df;
  --diagram-bg:#141A26;
  --shadow-color:rgba(0,0,0,.75);
  --shadow-color-strong:rgba(0,0,0,.9);
  color-scheme:dark;

  /* Shape & motion */
  --r-sm:9px; --r:13px; --r-lg:17px; --r-xl:24px;
  --maxw:1140px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-spring:cubic-bezier(.34,1.4,.5,1);
  /* Motion scale. Durations were scattered literals from .12s to .6s; these
     three cover every UI transition on the site and sit inside the
     150-300ms band that reads as responsive rather than sluggish.
     --dur-reveal is the one exception: entrance animations get slightly
     longer because they travel further and only play once. */
  --dur-1:.15s;   /* instant feedback: hover, focus, icon tint   */
  --dur-2:.22s;   /* standard: cards, buttons, nav               */
  --dur-3:.3s;    /* deliberate: panels, overlays                */
  --dur-reveal:.42s;
  --stagger:55ms;
  --shadow-sm:0 2px 8px -3px rgba(0,0,0,.5);
  --shadow-md:0 14px 40px -18px var(--shadow-color);
  --shadow-glow:0 20px 60px -22px var(--glow-amber);
}

/* High-contrast mode — an independent toggle layered on top of either
   theme (see the Progress hub's Appearance section). Strengthens text
   and border contrast; doesn't change layout. */
:root.hc{
  --border:var(--border-strong);
  --muted:var(--text);
  --overlay-1:transparent; --overlay-2:transparent; --overlay-3:transparent;
}
:root[data-theme="dark"].hc{
  --text:#FFFFFF; --bg:#000000; --surface:#0A0A0A; --surface2:#141414;
  --border-strong:rgba(255,255,255,.35); --muted2:#C7CFD8;
}
:root[data-theme="light"].hc{
  --text:#000000; --bg:#FFFFFF; --surface:#FFFFFF; --surface2:#F4F4F4;
  --border-strong:rgba(0,0,0,.5); --muted2:#2B2F36;
}

:root[data-theme="light"]{
  --bg:#F6F7FA; --bg2:#EEF0F4; --surface:#FFFFFF; --surface2:#F2F4F8;
  --line:#E1E5EC; --line-soft:#E9EBF1;
  --border:rgba(15,20,30,.09); --border-strong:rgba(15,20,30,.16);

  --amber:#C97B0F; --amber-2:#E39A2E; --amber-d:#A8630A; --amber-ink:#9A5B05; --table-shadow:rgba(15,20,30,.16);
  --teal:#0E8377; --teal-2:#0B6F64; --crim:#C43C30; --teal-ink:#0C766A;

  --text:#12151C; --muted:#525B6A; --muted2:#636B79;

  --glow-amber:rgba(201,123,15,.32);
  --glow-teal:rgba(14,131,119,.28);

  --overlay-1:rgba(15,20,30,.025);
  --overlay-2:rgba(15,20,30,.04);
  --overlay-3:rgba(15,20,30,.045);
  --card-grad-to:#EDF0F5;
  --md-text:#333c49;
  --md-quote-text:#3a4451;
  --nav-bg:rgba(255,255,255,.72);
  --nav-bg-scrolled:rgba(255,255,255,.92);
  --nav-bg-mobile:rgba(255,255,255,.98);
  --scrollbar-thumb:#D7DCE5;
  --scrollbar-thumb-hover:#C2C9D6;
  --scrollbar-color:#D7DCE5;
  --shadow-color:rgba(20,25,40,.14);
  --shadow-color-strong:rgba(20,25,40,.22);
  color-scheme:light;
}

*{box-sizing:border-box}
/* Component display rules must not reveal controls before they are ready. */
[hidden]{display:none !important}
html{scroll-behavior:smooth;scroll-padding-top:78px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-sans);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;
}
main{flex:1;position:relative}
@keyframes pageFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
main.route-transition{animation:pageFadeIn .38s var(--ease)}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.12;letter-spacing:-.025em;margin:0;color:var(--text)}
h2{font-size:clamp(1.7rem,3.6vw,2.55rem);font-weight:700}
h3{font-size:1.1rem;font-weight:600}
a{color:inherit}
.amber{color:var(--amber-ink)}
::selection{background:var(--amber);color:#12100a}

/* Focus — visible, on-brand, never on mouse click */
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
:focus:not(:focus-visible){outline:none}

/* Skip link */
/* Visually hidden but read by screen readers — used for section headings
   that keep the heading outline in order where a visible one would be noise. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;top:-60px;left:12px;z-index:200;background:var(--amber);color:#160f02;
  padding:.6rem 1rem;border-radius:9px;font-weight:600;font-size:.9rem;text-decoration:none;transition:top .2s var(--ease)}
.skip:focus{top:12px}

/* Custom scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--scrollbar-color) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:20px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background-color:var(--scrollbar-thumb-hover);background-clip:content-box}

/* ---------- Buttons ---------- */
.btn-amber,.btn-ghost{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:inherit;font-weight:600;font-size:.94rem;line-height:1;
  padding:.8rem 1.25rem;border-radius:11px;cursor:pointer;
  text-decoration:none;border:1px solid transparent;white-space:nowrap;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.btn-amber{
  background:var(--grad-amber);color:#1a1204;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 10px 26px -10px var(--glow-amber);
}
.btn-amber:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 16px 34px -10px var(--glow-amber)}
.btn-amber:active{transform:translateY(0)}
.btn-ghost{color:var(--text);border-color:var(--border-strong);background:var(--overlay-1);font-weight:500}
.btn-ghost:hover{border-color:rgba(239,164,58,.55);background:rgba(239,164,58,.07);transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(0)}
/* Icon leading a button label (download, import, compass...). */
:is(.btn-amber,.btn-ghost) > .kico{width:1.05em;height:1.05em;flex-shrink:0}
.btn-amber.sm,.btn-ghost.sm{padding:.55rem .9rem;font-size:.85rem;border-radius:9px}

/* ---------- Nav ---------- */
.nav{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:.65rem;
  padding:.85rem clamp(1rem,4vw,3rem);
  background:var(--nav-bg);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.nav.scrolled{background:var(--nav-bg-scrolled);border-bottom-color:var(--border);box-shadow:0 10px 30px -20px var(--shadow-color-strong)}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:700;font-size:1.16rem;color:var(--text);text-decoration:none}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;
  background:var(--grad-amber);color:#160f02;box-shadow:0 6px 18px -8px var(--glow-amber);transition:transform .3s var(--ease-spring)}
.brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}
.brand-txt{letter-spacing:-.02em}
/* min-width:0 matters: without it a flex item refuses to shrink below its
   content width, so the link row pushed the whole bar past the viewport and
   .nav-cta — the Start button — was the part that fell off the end. The
   body has overflow-x:hidden, so it was clipped rather than scrollable:
   silently gone, on every width from 901px to 1365px. */
.nav-links{display:flex;gap:.35rem;min-width:0}
.nav-links .mobile-random{display:none}
/* nowrap because "My Progress" was breaking onto a second line, which grew
   the whole bar from 67px to 91px on every laptop-width screen. */
.nav-links a{color:var(--muted);font-size:.92rem;font-weight:500;text-decoration:none;padding:.45rem .7rem;border-radius:8px;position:relative;white-space:nowrap;transition:color .18s var(--ease),background .18s var(--ease)}
.nav-links a:hover{color:var(--text);background:var(--overlay-3)}
.nav-links a.active{color:var(--text)}
.nav-links a.active::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.15rem;height:2px;border-radius:2px;background:var(--grad-brand)}
/* flex-shrink:0 — the call to action is the one thing in this bar that must
   never be the part that gets sacrificed for space. */
.nav-cta{display:flex;align-items:center;gap:.4rem;flex-shrink:0}

/* The laptop range. The horizontal nav needs about 1366px to lay out at full
   size, so between the mobile breakpoint and that width everything was
   overflowing — by 392px at the narrow end. Tightening the link row buys
   back roughly 200px, and dropping the random-lesson button (still on the
   R key and in the command palette) buys the rest. */
@media(min-width:901px) and (max-width:1365px){
  .nav{padding-left:clamp(.75rem,2vw,1.5rem);padding-right:clamp(.75rem,2vw,1.5rem)}
  .nav-links{gap:.05rem}
  .nav-links a{font-size:.86rem;padding:.45rem .42rem}
  .nav-links a.active::after{left:.42rem;right:.42rem}
  .brand{font-size:1.04rem}
  #randomLessonBtn{display:none}
  .nav-cta{gap:.3rem}
}
/* The widths above assume Inter. With a wider fallback font (web fonts
   blocked, slow, or not yet loaded) the links ran under the action buttons
   at 901px and 1366px, so app.js measures the bar and steps through these
   densities until nothing overlaps. Each level adds to the one before. */
@media(min-width:901px){
  .nav.nav-tight{padding-left:clamp(.75rem,2vw,1.5rem);padding-right:clamp(.75rem,2vw,1.5rem)}
  .nav.nav-tight .nav-links{gap:.05rem}
  .nav.nav-tight .nav-links a{font-size:.86rem;padding:.45rem .42rem}
  .nav.nav-tight .nav-links a.active::after{left:.42rem;right:.42rem}
  .nav.nav-tight .brand{font-size:1.04rem}
  .nav.nav-tight #randomLessonBtn{display:none}
  .nav.nav-tight .nav-cta{gap:.3rem}
  .nav.nav-tighter .nav-links a{font-size:.82rem;padding:.45rem .3rem}
  .nav.nav-tighter .nav-links a.active::after{left:.3rem;right:.3rem}
  .nav.nav-tighter .brand-txt{display:none}
  .nav.nav-tightest .nav-links a{font-size:.78rem;padding:.45rem .22rem}
  .nav.nav-tightest .nav-links a.active::after{left:.22rem;right:.22rem}
}
/* Narrow phones. The brand may shrink (min-width:0) instead of pushing the
   hamburger off-screen when its webfont hasn't loaded and a wider system
   fallback is measuring the wordmark. */
.brand{min-width:0}
.brand-txt{white-space:nowrap;overflow:hidden}
@media(max-width:400px){
  .brand{gap:.45rem;font-size:1.04rem}
  .nav-cta{gap:.25rem}
}
.hamb{display:none;background:none;border:1px solid var(--border);border-radius:9px;color:var(--text);cursor:pointer;padding:7px;transition:border-color .2s var(--ease),background .2s var(--ease)}
.hamb:hover{border-color:var(--border-strong);background:var(--overlay-2)}
.state-recovery-notice{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.7rem 1rem;padding:.8rem 1.2rem;background:var(--surface);border-bottom:1px solid var(--border-strong);color:var(--text);font-size:.9rem;line-height:1.5}
.state-recovery-notice span{max-width:65ch}

/* Icon buttons: search, theme toggle, progress ring */
.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  background:none;border:1px solid var(--border);border-radius:9px;color:var(--muted);cursor:pointer;flex:none;
  transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease),transform .15s var(--ease)}
.icon-btn:hover{color:var(--text);border-color:var(--border-strong);background:var(--overlay-2);transform:translateY(-1px)}
.icon-btn svg{width:18px;height:18px}
.icon-btn .badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 3px;border-radius:99px;
  background:var(--amber);color:#160f02;font-family:var(--font-mono);font-size:.62rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;box-shadow:0 0 0 2px var(--bg)}

/* Theme toggle: sun/moon crossfade */
.theme-toggle .ico-sun{display:none}
.theme-toggle .ico-moon{display:block}
:root[data-theme="light"] .theme-toggle .ico-sun{display:block}
:root[data-theme="light"] .theme-toggle .ico-moon{display:none}

/* Progress ring button (nav-cta) */
.progress-ring-btn{padding:0}
.progress-ring-btn svg{width:34px;height:34px;transform:rotate(-90deg)}
.progress-ring-btn .ring-track{fill:none;stroke:var(--border);stroke-width:3}
.progress-ring-btn .ring-fill{fill:none;stroke:var(--amber);stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset .5s var(--ease)}
.progress-ring-btn .ring-txt{position:absolute;font-family:var(--font-mono);font-size:.56rem;font-weight:700;color:var(--text)}

/* ---------- Sections ---------- */
.sec{max-width:var(--maxw);margin:0 auto;padding:clamp(2.75rem,5vw,4.5rem) clamp(1rem,4vw,3rem);position:relative}
.sec-head{max-width:46rem;margin-bottom:2.4rem}
/* The section title is the page's <h1>. It used to be an <h2>, which left
   25 routes with no <h1> anywhere in the document — the heading a screen
   reader user jumps to first to answer "what is this page", and the
   strongest on-page signal a search engine has. Sizing is repeated from the
   global h2 rule so the change is invisible on screen. */
.sec-head h1{font-size:clamp(1.7rem,3.6vw,2.55rem);font-weight:700}
/* .sec-title has no size rule of its own — it was inheriting the global h2
   sizing, so promoting it to h1 would silently hand it the browser default
   instead. Pinned here to the size it has always rendered at. */
.sec-title{font-size:clamp(1.7rem,3.6vw,2.55rem);font-weight:700}
.quiz-head h1{font-size:clamp(1.7rem,3.6vw,2.55rem);font-weight:700}
.sec-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:1rem}
.sec-eyebrow::before{content:"";width:22px;height:1px;background:linear-gradient(90deg,var(--amber),transparent)}
.sec-lead{color:var(--muted);font-size:1.05rem;margin-top:.9rem;line-height:1.7}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(4rem,9vw,7rem) clamp(1rem,4vw,3rem) clamp(3rem,5vw,4.5rem);
  background:
    radial-gradient(1200px 520px at 78% -12%,rgba(63,182,168,.14),transparent 62%),
    radial-gradient(1000px 520px at 4% -4%,rgba(239,164,58,.15),transparent 58%);
}
/* faint grid, faded top→out */
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--overlay-3) 1px,transparent 1px),
                   linear-gradient(90deg,var(--overlay-3) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 75%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 30%,transparent 75%);
}
/* floating glow orb */
.hero::after{
  content:"";position:absolute;z-index:-1;width:520px;height:520px;top:-160px;right:-120px;border-radius:50%;
  background:radial-gradient(circle,rgba(63,182,168,.16),transparent 60%);
  filter:blur(20px);animation:floaty 14s var(--ease) infinite alternate;
}
.hero-inner{max-width:860px;margin:0 auto;text-align:center;position:relative}
/* Hero network illustration (heroArtSVG). Masked to the outer edges so the
   centred copy always sits on a clean field. */
.hero-art{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;
  animation:haDrift 12s var(--ease) infinite alternate;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 14%,transparent 33%,transparent 67%,#000 86%,#000 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 14%,transparent 33%,transparent 67%,#000 86%,#000 100%)}
.hero-art .ha-links line{stroke:var(--teal);stroke-width:1.2;opacity:.32}
.hero-art .ha-pkts line{stroke:var(--amber);stroke-width:2.6;stroke-linecap:round;fill:none;
  stroke-dasharray:5 95;stroke-dashoffset:100;animation:haPkt var(--d,4s) linear infinite;animation-delay:var(--dl,0s)}
.hero-art .ha-dot{fill:var(--surface);stroke:var(--teal);stroke-width:2}
.hero-art .ha-core{fill:var(--surface);stroke:var(--teal);stroke-width:1.6}
.hero-art .ha-glyph{fill:none;stroke:var(--amber);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hero-art .ha-orbit{fill:none;stroke:var(--teal);stroke-width:1;stroke-dasharray:2 6;opacity:.55;
  transform-box:fill-box;transform-origin:center;animation:spin 22s linear infinite}
.hero-art .ha-pulse{fill:none;stroke:var(--teal-2);stroke-width:1.5;opacity:0;
  transform-box:fill-box;transform-origin:center;animation:haPulse 3.6s var(--ease) infinite;animation-delay:var(--dl,0s)}
@keyframes haPkt{to{stroke-dashoffset:0}}
@keyframes haPulse{0%{opacity:.7;transform:scale(1)}80%,100%{opacity:0;transform:scale(2.3)}}
@keyframes haDrift{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@media(max-width:900px){.hero-art{opacity:.55}}
@media(max-width:640px){.hero-art{display:none}}
@media(prefers-reduced-motion:reduce){.hero-art,.hero-art *{animation:none!important}.hero-art .ha-pkts{display:none}}
@media print{.hero-art{display:none}}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-mono);font-size:.73rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--teal-2);
  border:1px solid var(--border-strong);background:rgba(63,182,168,.06);
  padding:.42rem .85rem;border-radius:99px;margin-bottom:1.5rem;
}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal-2);box-shadow:0 0 10px 1px var(--teal-2);animation:pulse 2.4s ease-in-out infinite}
.hero h1{font-size:clamp(2.3rem,6vw,4rem);font-weight:700;letter-spacing:-.035em;margin-bottom:1.25rem}
.hero h1 .amber{
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.hero-sub{color:var(--muted);font-size:clamp(1.02rem,1.6vw,1.18rem);max-width:44rem;margin:0 auto 2.1rem;line-height:1.7}
.hero-btns{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;margin-bottom:3rem}
.career-quiz-cta{max-width:100%;white-space:normal;text-align:center}
.hero-stats{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.hero-stats>div{
  min-width:118px;padding:1rem 1.2rem;border-radius:var(--r);
  background:linear-gradient(180deg,var(--overlay-2),var(--overlay-1));
  border:1px solid var(--border);backdrop-filter:blur(4px);
}
.hstat-n{font-family:var(--font-display);font-weight:700;font-size:1.7rem;letter-spacing:-.02em;color:var(--text)}
.hstat-l{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);margin-top:.15rem}

/* ---------- Generic card grids ---------- */
.paths,.careers,.features{display:grid;gap:1.1rem}
.paths{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
/* Closing card on the homepage roadmap; app.js sets how many columns it spans. */
.paths-cta{display:flex;flex-direction:column;gap:1rem;padding:1.5rem;border-radius:var(--r-lg);
  border:1px dashed var(--border-strong);background:linear-gradient(150deg,rgba(239,164,58,.07),transparent 60%),var(--overlay-1)}
.paths-cta-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:var(--amber-ink);
  background:var(--overlay-2);border:1px solid var(--border)}
.paths-cta-ico .kico{width:22px;height:22px}
.paths-cta h3{font-size:1.15rem;margin:0 0 .45rem}
.paths-cta p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.6}
.paths-cta-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto}
.paths-cta.is-wide{flex-direction:row;align-items:center;gap:1.4rem}
.paths-cta.is-wide .paths-cta-body{flex:1;min-width:0}
.paths-cta.is-wide .paths-cta-btns{margin-top:0;flex-shrink:0}
@media(max-width:700px){.paths-cta.is-wide{flex-direction:column;align-items:flex-start}}
.careers{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
.features{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

/* shared card surface + cursor spotlight */
.path-card,.career-card,.feature-card{
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,var(--surface),var(--card-grad-to));
  border:1px solid var(--border);border-radius:var(--r-lg);
  transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease);
}
.path-card::before,.career-card::before,.feature-card::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s var(--ease);
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(239,164,58,.12),transparent 42%);
}
.path-card:hover,.career-card:hover,.feature-card:hover{transform:translateY(-4px);border-color:rgba(239,164,58,.4);box-shadow:var(--shadow-md)}
.path-card:hover::before,.career-card:hover::before,.feature-card:hover::before{opacity:1}

/* Path cards */
.path-card{padding:1.5rem;text-decoration:none;color:var(--text);display:flex;flex-direction:column}
.path-num{font-family:var(--font-mono);font-size:.72rem;color:var(--teal-ink);letter-spacing:.1em;font-weight:500}
.path-title{font-family:var(--font-display);font-weight:600;font-size:1.14rem;margin:.5rem 0 .55rem;letter-spacing:-.01em}
.path-desc{color:var(--muted);font-size:.92rem;flex:1;margin-bottom:1.1rem;line-height:1.6}
.path-meta{font-family:var(--font-mono);font-size:.7rem;color:var(--muted2);
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}

/* Difficulty tiers. Colour carries the tier, but never alone — the chip
   always spells the level out, so this still works for colour-blind readers,
   in high-contrast mode, and in print. */
/* The tier hue is the chip's FILL, not its text. Colouring 10px uppercase
   text with the brand hues measured 2.91:1 for advanced and 3.10:1 for
   intermediate on the light theme — well under the 4.5:1 floor. Tinting the
   background instead keeps the colour coding while letting the label sit at
   full text contrast in both themes. */
.level-chip{font-family:var(--font-mono);font-size:.63rem;letter-spacing:.04em;
  text-transform:uppercase;padding:.22rem .5rem;border-radius:999px;
  line-height:1.4;white-space:nowrap;color:var(--text);
  background:var(--tier-fill,rgba(127,127,127,.14));
  border:1px solid var(--tier-line,rgba(127,127,127,.3))}
.level-chip[data-tier="start"]{--tier-fill:rgba(95,224,207,.16);--tier-line:rgba(95,224,207,.45)}
.level-chip[data-tier="beginner"]{--tier-fill:rgba(63,182,168,.16);--tier-line:rgba(63,182,168,.45)}
.level-chip[data-tier="intermediate"]{--tier-fill:rgba(239,164,58,.18);--tier-line:rgba(239,164,58,.5)}
.level-chip[data-tier="advanced"]{--tier-fill:rgba(224,115,79,.18);--tier-line:rgba(224,115,79,.5)}
.level-chip[data-tier="any"]{--tier-fill:rgba(140,150,165,.15);--tier-line:rgba(140,150,165,.4)}

/* A hairline on the card edge repeats the tier, so the grid reads as
   grouped-by-difficulty at a glance without needing to read any chip. */
.path-card[data-tier]::after{content:"";position:absolute;left:0;top:14px;bottom:14px;
  width:2px;border-radius:0 2px 2px 0;background:currentColor;opacity:.5;
  transition:opacity var(--dur-2) var(--ease),top var(--dur-2) var(--ease),bottom var(--dur-2) var(--ease)}
.path-card[data-tier="start"]::after{color:var(--teal-2)}
.path-card[data-tier="beginner"]::after{color:var(--teal-ink)}
.path-card[data-tier="intermediate"]::after{color:var(--amber-ink)}
.path-card[data-tier="advanced"]::after{color:#E0734F}
.path-card[data-tier="any"]::after{color:var(--muted2)}
.path-card:hover::after{opacity:1;top:8px;bottom:8px}
@media(prefers-reduced-motion:reduce){.path-card[data-tier]::after{transition:none}}

/* Mini progress bar (path cards, sublesson list, sidebar) */
.mini-progress{margin-top:.85rem}
.mini-progress-track{height:5px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.mini-progress-fill{height:100%;border-radius:99px;background:var(--grad-brand);transition:width .5s var(--ease)}
.mini-progress-label{font-family:var(--font-mono);font-size:.66rem;color:var(--muted2);margin-top:.4rem;display:flex;justify-content:space-between}
.path-card.is-complete{border-color:rgba(63,182,168,.4)}
.path-card .path-check{display:none;color:var(--teal-2);flex:none}
.path-card.is-complete .path-check{display:inline-flex}
.path-title-row{display:flex;align-items:center;gap:.4rem;justify-content:space-between}
/* Path glyph. Sits left of the PATH nn label; the label then takes the
   remaining width so the completion check stays pinned right. */
.path-title-row .path-num{flex:1}
.path-ico{width:34px;height:34px;flex:none;margin-right:.35rem;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--overlay-2);border:1px solid var(--border);color:var(--teal-ink);
  transition:color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),
             border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-spring)}
.path-ico .kico{width:18px;height:18px}
.path-card:hover .path-ico,.path-card:focus-visible .path-ico{color:var(--amber-ink);
  background:rgba(239,164,58,.12);border-color:rgba(239,164,58,.35);transform:rotate(-6deg) scale(1.06)}
.path-card.is-complete .path-ico{color:var(--teal-2)}
.path-tag-ico,.crumb-ico{display:inline-flex;vertical-align:-.2em}
.path-tag-ico .kico{width:15px;height:15px}
.crumb-ico .kico{width:14px;height:14px;margin-right:.4rem}
@media(prefers-reduced-motion:reduce){.path-ico{transition:none}.path-card:hover .path-ico{transform:none}}

/* Feature cards */
.feature-card{padding:1.6rem 1.5rem}
.feature-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;
  background:linear-gradient(180deg,rgba(239,164,58,.16),rgba(239,164,58,.05));border:1px solid rgba(239,164,58,.25);
  color:var(--amber-ink);margin-bottom:1.1rem}
.feature-ico svg{width:22px;height:22px}
.feature-card h3{font-family:var(--font-display);font-size:1.08rem;margin-bottom:.5rem}
.feature-card p{color:var(--muted);font-size:.92rem;margin:0;line-height:1.6}

/* Careers */
.career-card{padding:1.5rem}
.career-card h3{margin-bottom:.55rem;font-size:1.05rem}
.career-card p{color:var(--muted);font-size:.9rem;margin:0 0 1rem;line-height:1.6}
.career-follow{font-family:var(--font-mono);font-size:.72rem;color:var(--muted2);letter-spacing:.02em}
.career-follow span{color:var(--amber-ink)}
.career-follow{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem}
.follow-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .5rem;border-radius:99px;text-decoration:none;
  color:var(--text);background:var(--overlay-2);border:1px solid var(--border);font-family:var(--font-mono);font-size:.72rem;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.follow-chip .kico{width:12px;height:12px;color:var(--teal-ink)}
.follow-chip:hover,.follow-chip:focus-visible{border-color:var(--amber);color:var(--amber-ink)}
.career-follow .follow-arrow{color:var(--muted2)}
.career-follow > span:first-child{margin-right:.2rem}

.sec-cta{text-align:center;margin-top:1.8rem}

/* ---------- FAQ ---------- */
.faq{max-width:48rem;display:flex;flex-direction:column;gap:.7rem}
.faq-item{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface);transition:border-color .2s var(--ease),background .2s var(--ease)}
.faq-item:hover{border-color:var(--border-strong)}
.faq-item.open{border-color:rgba(239,164,58,.32);background:linear-gradient(180deg,rgba(239,164,58,.04),transparent)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;text-align:left;
  background:none;border:none;color:var(--text);font-family:var(--font-display);font-weight:600;font-size:1.02rem;
  padding:1.15rem 1.3rem;cursor:pointer}
.faq-a{max-height:0;overflow:hidden;transition:max-height .32s var(--ease)}
.faq-item.open .faq-a{max-height:520px}
.faq-a p{padding:0 1.3rem 1.2rem;color:var(--muted);font-size:.95rem;margin:0;line-height:1.7}
.faq-chev{transition:transform .3s var(--ease);color:var(--muted);flex:none}
.faq-item.open .faq-chev{transform:rotate(180deg);color:var(--amber-ink)}

/* ---------- Reader (lesson pages) ---------- */
.reader-wrap{max-width:1260px;margin:0 auto;padding:1.4rem clamp(.6rem,3vw,2rem) 3rem;display:grid;grid-template-columns:288px 1fr;gap:1.8rem;align-items:start}
.sidebar{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.1rem;overscroll-behavior:contain}
.sb-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:.9rem;padding:0 .3rem}
.sb-close{display:none}
.sb-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.1rem}
.sb-list a{display:flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.85rem;padding:.5rem .6rem;border-radius:8px;text-decoration:none;border-left:2px solid transparent}
.sb-list a:hover{background:var(--surface2);color:var(--text)}
.sb-list a.active{color:var(--amber-ink);background:rgba(239,164,58,.08);border-left-color:var(--amber)}
.sb-list .n{font-family:var(--font-mono);font-size:.7rem;color:var(--muted2);flex-shrink:0}
.sb-list a.active .n{color:var(--amber-ink)}

.reader{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,3rem);min-width:0}
.reader-nav-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.6rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line-soft);flex-wrap:wrap}
/* Lesson position track (lessonTrackHTML) */
.lesson-track{margin:-.4rem 0 1.6rem}
.lt-label{display:flex;justify-content:space-between;gap:1rem;font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted2);margin-bottom:.45rem}
.lt-done{color:var(--teal-ink)}
.lt-bar{display:flex;gap:3px;height:6px}
.lt-seg{flex:1;min-width:3px;border-radius:99px;background:var(--line-soft);
  transition:background var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.lt-seg.is-done{background:var(--teal)}
.lt-seg.is-current{background:var(--grad-brand);box-shadow:0 0 10px -1px var(--glow-amber)}
.lt-seg:hover{transform:scaleY(1.7)}
@media(prefers-reduced-motion:reduce){.lt-seg{transition:none}.lt-seg:hover{transform:none}}
@media print{.lesson-track{display:none}}
/* Mark-complete feedback: the check draws itself in and the button pops. */
.complete-btn.just-done{animation:donePop .45s var(--ease-spring)}
.complete-btn.just-done svg polyline{stroke-dasharray:24;stroke-dashoffset:24;animation:doneDraw .4s .08s var(--ease) forwards}
@keyframes donePop{0%{transform:scale(1)}40%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes doneDraw{to{stroke-dashoffset:0}}
.reader-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.lesson-load-notice{margin-bottom:1.5rem;padding:1.2rem;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface2)}
.lesson-load-actions{display:flex;flex-wrap:wrap;gap:.65rem}
.reader-actions .icon-btn.active{color:var(--amber-ink);border-color:rgba(239,164,58,.4);background:rgba(239,164,58,.08)}
.complete-btn{display:inline-flex;align-items:center;gap:.5rem;font-family:inherit;font-weight:600;font-size:.84rem;
  padding:.55rem .95rem;border-radius:9px;cursor:pointer;border:1px solid var(--border-strong);background:var(--overlay-1);color:var(--text);
  transition:all .2s var(--ease)}
.complete-btn svg{width:16px;height:16px;flex:none}
.complete-btn:hover{border-color:rgba(63,182,168,.5);background:rgba(63,182,168,.08)}
.complete-btn.done{background:rgba(63,182,168,.14);border-color:rgba(63,182,168,.5);color:var(--teal-2)}

/* Notes panel */
.notes-panel{margin-top:2rem;border:1px solid var(--border);border-radius:var(--r);background:var(--surface2);overflow:hidden}
.notes-panel summary{cursor:pointer;padding:.9rem 1.1rem;font-family:var(--font-display);font-weight:600;font-size:.92rem;
  display:flex;align-items:center;gap:.55rem;list-style:none;user-select:none}
.notes-panel summary::-webkit-details-marker{display:none}
.notes-panel summary::before{content:"▸";color:var(--amber-ink);transition:transform .2s var(--ease);flex:none}
.notes-panel[open] summary::before{transform:rotate(90deg)}
.notes-panel-body{padding:0 1.1rem 1.1rem}
.notes-panel textarea{width:100%;min-height:120px;resize:vertical;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:.8rem .9rem;color:var(--text);font-family:inherit;font-size:.92rem;line-height:1.6}
.notes-panel textarea:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.notes-status{font-family:var(--font-mono);font-size:.7rem;color:var(--muted2);margin-top:.5rem;min-height:1em}
.reader-crumb{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;color:var(--teal-ink);line-height:1.5}
/* The path link shares the crumb's colour, so a quiet underline is what marks
   it as a link (colour alone is not enough — WCAG 1.4.1). */
.reader-crumb a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:3px;transition:text-decoration-color .2s var(--ease)}
.reader-crumb a:hover,.reader-crumb a:focus-visible{text-decoration-color:currentColor}
.mobile-only{display:none}

/* ---------- Rendered markdown ---------- */
.md{max-width:74ch;overflow-wrap:break-word}
.md h1{font-size:clamp(1.75rem,3.6vw,2.35rem);font-weight:700;margin:0 0 1.1rem;letter-spacing:-.03em}
.md h2{font-size:1.55rem;font-weight:700;margin:2.4rem 0 .9rem;padding-bottom:.55rem;border-bottom:1px solid var(--line-soft);letter-spacing:-.02em}
/* A short brand-gradient rule over the hairline marks where each section starts. */
.md h2{position:relative}
.md h2::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:2px;border-radius:2px;background:var(--grad-brand)}
.md h3{font-size:1.24rem;font-weight:600;margin:2rem 0 .7rem}
.md h4{font-size:1.06rem;font-weight:600;margin:1.6rem 0 .6rem}
.md p{color:var(--md-text);font-size:1.02rem;margin:0 0 1.1rem;line-height:1.8}
.md ul,.md ol{color:var(--md-text);font-size:1.02rem;margin:0 0 1.2rem;padding-left:1.4rem;display:flex;flex-direction:column;gap:.55rem;line-height:1.7}
.md ul li::marker{color:var(--amber-ink)}
.md ol li::marker{color:var(--teal-ink);font-family:var(--font-mono)}
.md ul li,.md ol li{padding-left:.25rem;min-width:0}
.md a{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .18s var(--ease)}
.md a:hover{color:var(--amber-ink)}
.md strong{color:var(--text);font-weight:600}
.md em{color:var(--amber-ink);font-style:normal;font-weight:500}
.md code{font-family:var(--font-mono);font-size:.85em;background:rgba(63,182,168,.13);color:var(--teal-2);padding:.12rem .38rem;border-radius:6px;border:1px solid rgba(63,182,168,.14)}
.md pre{background:var(--code-bg);border:1px solid var(--border);border-radius:var(--r);padding:1.1rem 1.2rem;overflow-x:auto;margin:0 0 1.3rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)}
.md pre code{background:transparent;border:none;color:var(--code-text);padding:0;font-size:.85rem;line-height:1.75;white-space:pre}
.md blockquote{border-left:3px solid var(--amber);padding:.7rem 0 .7rem 1.1rem;margin:0 0 1.3rem;color:var(--md-quote-text);background:linear-gradient(90deg,rgba(239,164,58,.08),transparent);border-radius:0 8px 8px 0}
.md blockquote p{margin:0}
.md hr{border:none;border-top:1px solid var(--line-soft);margin:2.6rem 0}
.md .table-scroll{overflow-x:auto;margin:0 0 1.3rem;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--r);
  /* Scroll shadows: a wide table cut off at the card edge gave no hint that
     it scrolls. The two "local" covers travel with the content and hide the
     shadows at either end, so a shadow shows only where more table is
     hidden. Pure CSS — no scroll listener. */
  background:
    linear-gradient(90deg,var(--table-cover) 30%,transparent) left center/42px 100% no-repeat local,
    linear-gradient(270deg,var(--table-cover) 30%,transparent) right center/42px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,var(--table-shadow),transparent) left center/14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,var(--table-shadow),transparent) right center/14px 100% no-repeat scroll,
    var(--table-cover)}
.md table{width:100%;min-width:420px;border-collapse:collapse;font-size:.92rem}
.md thead{background:var(--surface2)}
.md th,.md td{padding:.65rem .9rem;text-align:left;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.md tbody tr:last-child td{border-bottom:none}
.md tbody tr{transition:background .15s var(--ease)}
.md tbody tr:hover{background:var(--overlay-1)}
.md th{color:var(--amber-ink);font-family:var(--font-mono);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase}
.md td{color:var(--md-text)}
.md .table-scroll:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
/* On phones, long cells wrap instead of stretching the table to several
   screen widths; headers and short values stay on one line. */
@media(max-width:600px){
  .md td{white-space:normal;overflow-wrap:break-word}
}
.md details{background:rgba(239,164,58,.06);border:1px solid rgba(239,164,58,.28);border-radius:var(--r);padding:.7rem 1.1rem;margin:0 0 1.3rem}
.md details summary{cursor:pointer;font-family:var(--font-mono);font-size:.78rem;color:var(--amber-ink);text-transform:uppercase;letter-spacing:.04em;padding:.3rem 0}
.md details[open] summary{margin-bottom:.5rem;border-bottom:1px solid rgba(239,164,58,.2)}
.md img{max-width:100%;border-radius:8px}

/* Reader nav bottom */
.lesson-rating{display:flex;align-items:center;gap:.7rem;margin-top:2.2rem;flex-wrap:wrap}
.lr-label{font-size:.85rem;color:var(--muted)}
.lr-btn{background:var(--surface);border:1px solid var(--border);border-radius:99px;width:2.2rem;height:2.2rem;font-size:1rem;cursor:pointer;transition:border-color .18s var(--ease),transform .18s var(--ease)}
.lr-btn:hover{transform:translateY(-2px);border-color:rgba(63,182,168,.4)}
.lr-btn.active{border-color:var(--amber);background:rgba(239,164,58,.1)}
.lr-thanks{font-size:.8rem;color:var(--teal-2)}
.reader-nav{display:flex;justify-content:space-between;gap:1rem;margin-top:2.6rem;padding-top:1.5rem;border-top:1px solid var(--line-soft);flex-wrap:wrap}
.reader-nav .btn-ghost,.reader-nav .btn-amber{max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pager-card{flex:1 1 16rem;max-width:calc(50% - .5rem);display:flex;flex-direction:column;gap:.35rem;padding:.95rem 1.1rem;
  border-radius:var(--r);border:1px solid var(--border);background:var(--surface);text-decoration:none;color:var(--text);
  transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.pager-card.next{text-align:right;margin-left:auto;border-color:rgba(239,164,58,.4);
  background:linear-gradient(135deg,rgba(239,164,58,.08),transparent 60%),var(--surface)}
.pager-card:hover,.pager-card:focus-visible{border-color:var(--amber);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.pc-dir{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
.pager-card.next .pc-dir{color:var(--amber-ink)}
.pc-title{font-family:var(--font-display);font-weight:600;font-size:1rem;line-height:1.35}
.pc-ico{display:inline-flex;vertical-align:-.15em;margin-right:.4rem;color:var(--teal-ink)}
.pc-ico .kico{width:16px;height:16px}
.sec-cta .btn-amber + .btn-ghost{margin-left:.6rem}
@media(max-width:640px){.pager-card{max-width:100%}}
@media(prefers-reduced-motion:reduce){.pager-card{transition:none}.pager-card:hover{transform:none}}

/* ---------- Two-level sidebar ---------- */
.sb-path{margin-bottom:.25rem}
.sb-path-head{width:100%;display:flex;align-items:center;gap:.55rem;background:none;border:none;color:var(--text);font-family:inherit;font-size:.88rem;font-weight:500;padding:.58rem .6rem;border-radius:8px;cursor:pointer;text-align:left;transition:background .18s var(--ease)}
.sb-path-head:hover{background:var(--surface2)}
.sb-path-head .n{font-family:var(--font-mono);font-size:.7rem;color:var(--muted2);flex-shrink:0}
.sb-path-head .name{flex:1;line-height:1.3}
.sb-path-head .chev{transition:transform .25s var(--ease);color:var(--muted);flex-shrink:0}
.sb-path.open .sb-path-head .chev{transform:rotate(90deg)}
.sb-path.active .sb-path-head{color:var(--amber-ink);background:rgba(239,164,58,.08)}
.sb-path.active .sb-path-head .n{color:var(--amber-ink)}
.sb-sublist{list-style:none;margin:.2rem 0 .5rem .9rem;padding:0 0 0 1.3rem;display:none;flex-direction:column;gap:.05rem;border-left:1px solid var(--line-soft)}
.sb-path.open .sb-sublist{display:flex;animation:fade .25s var(--ease)}
.sb-sublist a{display:block;color:var(--muted);font-size:.8rem;padding:.38rem .55rem;border-radius:6px;text-decoration:none;line-height:1.35;border-left:2px solid transparent;margin-left:-1px}
.sb-sublist a:hover{background:var(--surface2);color:var(--text)}
.sb-sublist a.active{color:var(--amber-ink);background:rgba(239,164,58,.08);border-left-color:var(--amber);font-weight:500}

/* ---------- Path overview page ---------- */
.path-overview{max-width:840px;margin:0 auto;position:relative}
/* Path emblem: the path's glyph, large, in a glowing tile with two slow
   orbit rings — the same mark its social card uses. Wide screens only,
   where the header copy is narrowed to leave it a clear column. */
.po-art{display:none}
@media(min-width:1000px){
  .path-overview > .path-tag,.path-overview > h1,.path-overview > .lead,.path-overview > .prereq-hint{max-width:calc(100% - 220px)}
  .po-art{display:block;position:absolute;top:-10px;right:0;width:190px;height:190px;pointer-events:none}
}
.po-tile{position:absolute;inset:35px;border-radius:30px;display:flex;align-items:center;justify-content:center;
  color:var(--teal-2);border:1px solid rgba(95,224,207,.35);
  background:linear-gradient(160deg,rgba(63,182,168,.16),rgba(239,164,58,.08)),var(--surface);
  box-shadow:0 24px 60px -24px var(--glow-teal);animation:poFloat 6s var(--ease) infinite alternate}
.po-tile .kico{width:58px;height:58px;stroke-width:1.5}
.po-ring{position:absolute;inset:0;border-radius:50%;border:1.5px dashed rgba(95,224,207,.28);animation:spin 40s linear infinite}
.po-ring-2{inset:16px;border:1px solid rgba(239,164,58,.18);animation-duration:14s;animation-direction:reverse}
.po-ring-2::after{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 12px 2px var(--glow-amber)}
@keyframes poFloat{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.po-tile,.po-ring{animation:none}}
@media print{.po-art{display:none!important}}
.path-overview h1{font-size:clamp(2rem,4vw,2.7rem);margin-bottom:.6rem;letter-spacing:-.03em}
.path-overview .path-tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-2);border:1px solid var(--border-strong);background:rgba(63,182,168,.06);padding:.35rem .8rem;border-radius:99px;margin-bottom:1.1rem}
.path-overview .lead{color:var(--muted);font-size:1.08rem;margin-bottom:1.5rem;line-height:1.7}
.sublesson-grid{display:grid;grid-template-columns:1fr;gap:.7rem;margin-top:1.8rem}
.sublesson-card{display:flex;align-items:center;gap:1.1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.05rem 1.25rem;text-decoration:none;color:var(--text);transition:border-color .22s var(--ease),transform .18s var(--ease),background .22s var(--ease)}
.sublesson-card:hover{border-color:rgba(239,164,58,.4);transform:translateX(5px);background:var(--surface2)}
.sublesson-card .sl-n{font-family:var(--font-mono);font-size:1.05rem;color:var(--amber-ink);font-weight:700;flex-shrink:0;min-width:2.6rem}
.sublesson-card .sl-body{flex:1;min-width:0}
.sublesson-card .sl-t{font-family:var(--font-display);font-weight:600;font-size:1.02rem;margin-bottom:.18rem}
.sublesson-card .sl-d{color:var(--muted);font-size:.86rem;line-height:1.45}
.sublesson-card .sl-arrow{color:var(--muted2);flex-shrink:0;transition:transform .22s var(--ease),color .22s var(--ease)}
.sublesson-card:hover .sl-arrow{color:var(--amber-ink);transform:translateX(3px)}
.sublesson-card.is-complete{border-color:rgba(63,182,168,.35);background:linear-gradient(90deg,rgba(63,182,168,.05),var(--surface))}
.sublesson-card.is-complete .sl-n{color:var(--teal-2)}
.sublesson-card .sl-bookmark{color:var(--amber-ink);flex-shrink:0}

/* ---------- Callout boxes ---------- */
.callout{display:flex;flex-wrap:wrap;gap:.55rem .8rem;padding:1rem 1.15rem;border-radius:var(--r);margin:0 0 1.3rem;font-size:.95rem;line-height:1.65}
.callout .ct-tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.06em;padding:.24rem .5rem;border-radius:6px;flex-shrink:0;max-width:100%;height:fit-content;margin-top:2px;font-weight:700;display:inline-flex;align-items:center;gap:.35rem;white-space:normal;overflow-wrap:break-word}
.callout .ct-ico{width:12px;height:12px;flex:none}
/* A coloured leading edge names the callout kind before the tag is read. */
.callout{border-left-width:3px!important}
.callout.tip{border-left-color:var(--teal)!important}
.callout.warn,.callout.challenge{border-left-color:var(--amber)!important}
.callout.danger{border-left-color:var(--crim)!important}
.callout.lab{border-left-color:var(--teal-2)!important}
.callout .ct-body{flex:1;min-width:min(100%,22rem)}
.callout .ct-body>*:first-child{margin-top:0}
.callout .ct-body>*:last-child{margin-bottom:0}
.callout.tip{background:rgba(63,182,168,.08);border:1px solid rgba(63,182,168,.24)}
.callout.tip .ct-tag{background:var(--teal);color:#04120f}
.callout.warn{background:rgba(239,164,58,.08);border:1px solid rgba(239,164,58,.26)}
.callout.warn .ct-tag{background:var(--amber);color:#160f02}
.callout.danger{background:rgba(224,85,72,.09);border:1px solid rgba(224,85,72,.26)}
.callout.danger .ct-tag{background:#BE3A2E;color:#fff}
.callout.lab{background:rgba(63,182,168,.06);border:1px solid rgba(63,182,168,.3)}
.callout.lab .ct-tag{background:var(--teal);color:#04120f}
/* Light --teal is mid-tone: dark ink on it measured 4.12:1. White on the
   deeper teal clears AA comfortably. */
:root[data-theme="light"] .callout.tip .ct-tag,:root[data-theme="light"] .callout.lab .ct-tag{background:var(--teal-2);color:#fff}
.callout.challenge{background:rgba(239,164,58,.06);border:1px solid rgba(239,164,58,.34)}
.callout.challenge .ct-tag{background:var(--amber);color:#160f02}
.callout.note{background:var(--surface2);border:1px solid var(--border)}
.callout.note .ct-tag{background:var(--muted);color:var(--bg)}

/* External reference links */
.md .ref-list{background:var(--surface2);border:1px solid var(--border);border-left:3px solid var(--teal);border-radius:var(--r);padding:1.1rem 1.3rem;margin:0 0 1.4rem}
.md .ref-list-title{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-ink);margin-bottom:.55rem;font-weight:700}
.md .ref-list-title .kico{width:14px;height:14px;vertical-align:-2px;margin-right:.45rem}
.md .ref-list ul{margin:0;padding-left:1.2rem;gap:.35rem}
.md .ref-list a{color:var(--teal-ink)}
.md .ref-list a:hover{color:var(--amber-ink)}

/* Mermaid diagrams */
.md .mermaid{background:var(--diagram-bg);border:1px solid var(--border);border-radius:var(--r);padding:1.3rem;margin:0 0 1.4rem;text-align:center;overflow-x:auto}
.md .mermaid svg{max-width:100%;height:auto}
/* Mermaid is CDN-hosted and optional. If it never loads, don't dump raw
   diagram source at the reader — collapse to a labelled placeholder that
   still lets a curious reader expand the source. */
.md .mermaid.mermaid-unavailable{text-align:left;font-family:var(--font-mono);font-size:.78rem;color:#94A3B2}
.md .mermaid.mermaid-unavailable>summary{cursor:pointer;color:#5FE0CF;font-family:var(--font-sans);font-size:.88rem;list-style:none}
.md .mermaid.mermaid-unavailable>summary::-webkit-details-marker{display:none}
.md .mermaid.mermaid-unavailable>summary::before{content:'◇ ';opacity:.8}
.md .mermaid.mermaid-unavailable>pre{margin:.9rem 0 0;white-space:pre-wrap;word-break:break-word;color:#94A3B2}

/* Inline SVG figures */
.md .svg-figure{background:var(--diagram-bg);border:1px solid var(--border);border-radius:var(--r);padding:1.6rem;margin:0 0 1.4rem;text-align:center}
.md .svg-figure svg{max-width:100%;height:auto;display:block;margin:0 auto}
.md .svg-figure figcaption,.md .svg-caption{font-family:var(--font-mono);font-size:.75rem;color:#94A3B2;margin-top:.8rem;letter-spacing:.03em}

/* Section anchors */
.md h2,.md h3{scroll-margin-top:88px}
.md h2 .anchor,.md h3 .anchor{opacity:0;transition:opacity .2s var(--ease);text-decoration:none;color:var(--amber-ink);margin-left:.4rem;font-weight:400}
.md h2:hover .anchor,.md h3:hover .anchor{opacity:1}

/* Progress bar in reader */
.reader-progress{position:fixed;top:0;left:0;height:3px;background:var(--grad-brand);z-index:100;transition:width .12s var(--ease);box-shadow:0 0 10px var(--glow-amber)}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--border);background:var(--bg2);margin-top:3rem;position:relative}
.footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(239,164,58,.35),transparent)}
.foot-top{max-width:var(--maxw);margin:0 auto;padding:clamp(2.6rem,5vw,3.6rem) clamp(1rem,4vw,3rem);display:grid;grid-template-columns:1fr 2fr;gap:2.6rem}
.foot-brand p{color:var(--muted);font-size:.92rem;max-width:25rem;margin:1.1rem 0 1.2rem;line-height:1.7}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem}
.foot-social{display:flex;gap:.5rem;margin-top:1.1rem}
.foot-social .icon-btn{color:var(--muted)}
.foot-social .icon-btn:hover,.foot-social .icon-btn:focus-visible{color:var(--amber-ink);border-color:rgba(239,164,58,.45)}
.foot-cols h2{font-size:.72rem;font-weight:700;line-height:1.4;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted2);margin:0 0 1rem}
.foot-cols a{display:block;color:var(--muted);font-size:.92rem;padding:.3rem 0;text-decoration:none;transition:color .18s var(--ease),transform .18s var(--ease)}
.foot-cols a:hover{color:var(--amber-ink);transform:translateX(3px)}
.foot-bottom{max-width:var(--maxw);margin:0 auto;padding:1.3rem clamp(1rem,4vw,3rem);display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--muted2);font-family:var(--font-mono);border-top:1px solid var(--line-soft);gap:1rem;flex-wrap:wrap}

.loading{text-align:center;padding:4.5rem 1rem;color:var(--muted);font-family:var(--font-mono);font-size:.9rem}
.loading::after{content:"";display:inline-block;width:14px;height:14px;margin-left:.5rem;border:2px solid var(--line);border-top-color:var(--amber);border-radius:50%;vertical-align:middle;animation:spin .7s linear infinite}

/* ---------- Scroll reveal ---------- */
/* Entrance reveal. Was 600ms, which is past the point where an entrance
   stops feeling like a reveal and starts feeling like a wait — the guidance
   is 300-450ms for a staggered list. Displacement stays small (10px) so it
   reads as a fade with direction rather than a slide.
   Only opacity and transform are animated, so this stays on the compositor
   and never triggers layout. */
.reveal-ready [data-reveal]{opacity:0;transform:translateY(10px);
  transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease);
  transition-delay:calc(var(--i,0) * var(--stagger))}
.reveal-ready [data-reveal].in{opacity:1;transform:none}

/* Grid stagger. The card grids (paths, tools, labs, careers) were the one
   place with no entrance at all — 26 to 42 cards appearing at once reads as
   a jump. Cards inherit their index from --i, capped so the last card in a
   long grid never waits on a 42-step chain. */
.reveal-ready [data-reveal-grid] > *{opacity:0;transform:translateY(8px) scale(.985);
  transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease-spring);
  transition-delay:calc(min(var(--i,0),8) * var(--stagger))}
.reveal-ready [data-reveal-grid].in > *{opacity:1;transform:none}

/* Lesson blocks (see animateLessonBlocks). Figures get a touch of scale so
   a diagram "lands" rather than slides; h2s draw their accent rule in. */
.md .blk-anim{opacity:0;transform:translateY(14px);
  transition:opacity .5s var(--ease),transform .55s var(--ease)}
.md figure.blk-anim,.md .mermaid.blk-anim{transform:translateY(14px) scale(.975)}
.md .blk-anim.blk-in{opacity:1;transform:none}
.md h2.blk-anim::after{transform:scaleX(0);transform-origin:left;transition:transform .7s .15s var(--ease)}
.md h2.blk-anim.blk-in::after{transform:scaleX(1)}
@media print{.md .blk-anim{opacity:1!important;transform:none!important}}
@media(prefers-reduced-motion:reduce){.md .blk-anim{opacity:1;transform:none;transition:none}}

/* ---------- Keyframes ---------- */
/* ---------- Toasts (achievement unlocks) ---------- */
.toast-host{position:fixed;top:80px;right:clamp(.8rem,3vw,1.6rem);z-index:300;display:flex;flex-direction:column;gap:.6rem;pointer-events:none;max-width:min(360px,calc(100vw - 1.6rem))}
.toast{display:flex;align-items:center;gap:.8rem;background:var(--surface);border:1px solid rgba(239,164,58,.35);
  border-radius:var(--r);padding:.85rem 1.1rem;box-shadow:var(--shadow-md);opacity:0;transform:translateX(24px) scale(.97);
  transition:opacity .35s var(--ease),transform .35s var(--ease-spring)}
.toast.in{opacity:1;transform:translateX(0) scale(1)}
.toast-ico{font-size:1.5rem;flex:none}
.toast-t{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:.15rem}
.toast-d{font-size:.86rem;color:var(--text);line-height:1.35}
.toast.toast-action{pointer-events:auto}
.toast-action .toast-btn{flex:none;margin-left:.3rem;background:var(--amber);color:#160f02;border:none;
  border-radius:8px;padding:.45rem .8rem;font-weight:600;font-size:.78rem;cursor:pointer;font-family:inherit}
.toast-action .toast-btn:hover{background:var(--amber-2)}
@media(max-width:560px){.toast-host{top:auto;bottom:1rem;left:.8rem;right:.8rem;max-width:none}}

/* ---------- PWA: offline badge ---------- */
/* ---------- Back to top ---------- */
.to-top{position:fixed;right:1.1rem;bottom:1.1rem;z-index:80;width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--text);background:var(--surface);
  border:1px solid var(--border-strong);box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),visibility var(--dur-2),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.to-top svg{width:18px;height:18px}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover,.to-top:focus-visible{border-color:var(--amber);color:var(--amber-ink)}
body:has(.pomodoro-widget:not([hidden])) .to-top{bottom:5.6rem}
@media print{.to-top{display:none}}

.offline-badge{position:fixed;bottom:1rem;left:1rem;z-index:300;display:flex;align-items:center;gap:.55rem;
  background:var(--surface);border:1px solid rgba(224,85,72,.4);color:var(--text);font-size:.78rem;
  padding:.5rem .85rem;border-radius:999px;box-shadow:var(--shadow-md)}
.offline-badge span{width:8px;height:8px;border-radius:50%;background:var(--crim);flex:none;box-shadow:0 0 8px 1px var(--crim)}
@media(max-width:560px){.offline-badge{left:.8rem;bottom:.8rem}}

@keyframes floaty{from{transform:translate(0,0)}to{transform:translate(-40px,30px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Responsive ---------- */
/* Collapse before laptop links collide. The measured fallback also handles
   larger fonts and long signed-in account names at wider viewports. */
@media(max-width:1100px){
  .nav-links{display:none}
  .hamb{display:inline-flex}
}
.nav.nav-collapsed .nav-links{display:none}
.nav.nav-collapsed .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--nav-bg-mobile);backdrop-filter:blur(14px);flex-direction:column;padding:.8rem clamp(1rem,4vw,3rem) 1.1rem;gap:.15rem;border-bottom:1px solid var(--border);box-shadow:var(--shadow-md);max-height:calc(100dvh - var(--nav-height,70px));overflow-y:auto;overscroll-behavior:contain}
.nav.nav-collapsed .nav-links.open a{padding:.7rem;min-height:44px;white-space:normal;overflow-wrap:anywhere;font-size:.95rem;flex-shrink:0}
.nav.nav-collapsed .nav-links.open .mobile-random{display:block;width:100%;min-height:44px;padding:.7rem;text-align:left;color:var(--muted);font-family:inherit;font-size:.95rem;font-weight:500;background:none;border:0;border-radius:8px;cursor:pointer;flex-shrink:0}
.nav.nav-collapsed .nav-links.open .mobile-random:hover,.nav.nav-collapsed .nav-links.open .mobile-random:focus-visible{color:var(--text);background:var(--overlay-3)}
.nav.nav-collapsed .nav-links a.active::after{display:none}
.nav.nav-collapsed .hamb{display:inline-flex;min-width:44px;min-height:44px;align-items:center;justify-content:center}
@media(max-width:900px){
  .reader-wrap{grid-template-columns:1fr}
  .sidebar{position:fixed;top:0;left:0;bottom:0;z-index:60;width:84%;max-width:330px;max-height:100vh;border-radius:0;transform:translateX(-100%);transition:transform .3s var(--ease);box-shadow:var(--shadow-md)}
  .sidebar.open{transform:translateX(0)}
  .sb-close{display:inline-flex;min-height:44px;letter-spacing:normal;text-transform:none}
  .mobile-only{display:inline-flex}
  .foot-top{grid-template-columns:1fr}
}
@media(max-width:560px){
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot-bottom{flex-direction:column;gap:.6rem;text-align:center}
  .reader-nav .btn-ghost,.reader-nav .btn-amber{max-width:100%}
  .hero-stats>div{min-width:calc(50% - .4rem)}
}
/* Below ~480px the nav can't fit search + theme + progress ring + Start +
   hamburger. Drop the two that are reachable another way (progress ring
   duplicates the "My Progress" nav link; Start duplicates the hero CTA).
   At the narrowest width, Random lesson remains in the mobile menu. */
@media(max-width:480px){
  .progress-ring-btn,#startBtn{display:none}
}
@media(max-width:350px){
  #randomLessonBtn{display:none}
}
/* ============================================================
   Quiz engine
   ============================================================ */
.quiz-wrap{max-width:44rem;margin:0 auto}
.quiz-head{margin-bottom:1.6rem}
.quiz-progress-dots{display:flex;gap:.35rem;margin:1rem 0 1.6rem;flex-wrap:wrap}
.quiz-dot{width:9px;height:9px;border-radius:50%;background:var(--line-soft);transition:background .2s var(--ease),transform .2s var(--ease)}
.quiz-dot.current{background:var(--amber);transform:scale(1.3)}
.quiz-dot.answered{background:var(--teal)}
.quiz-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.4rem,3vw,2.2rem)}
.quiz-qn{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-2);margin-bottom:.7rem}
.quiz-q{font-family:var(--font-display);font-size:1.25rem;font-weight:600;margin-bottom:1.4rem;letter-spacing:-.01em;line-height:1.4}
.quiz-options{display:flex;flex-direction:column;gap:.65rem}
.quiz-opt{display:flex;align-items:center;gap:.8rem;text-align:left;width:100%;padding:.9rem 1.05rem;border-radius:var(--r);
  border:1px solid var(--border);background:var(--overlay-1);color:var(--text);font-family:inherit;font-size:.95rem;cursor:pointer;
  transition:border-color .18s var(--ease),background .18s var(--ease),transform .12s var(--ease)}
.quiz-opt:hover:not(:disabled){border-color:rgba(239,164,58,.5);background:rgba(239,164,58,.06)}
.quiz-opt:active:not(:disabled){transform:scale(.99)}
.quiz-opt .opt-letter{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;
  background:var(--surface2);border:1px solid var(--border);font-family:var(--font-mono);font-size:.75rem;font-weight:700;color:var(--muted)}
.quiz-opt:disabled{cursor:default}
.quiz-opt.correct{border-color:rgba(63,182,168,.6);background:rgba(63,182,168,.12)}
.quiz-opt.correct .opt-letter{background:var(--teal);color:#04120f;border-color:transparent}
.quiz-opt.wrong{border-color:rgba(224,85,72,.6);background:rgba(224,85,72,.1)}
.quiz-opt.wrong .opt-letter{background:var(--crim);color:#fff;border-color:transparent}
.quiz-explain{margin-top:1.1rem;padding:.9rem 1.05rem;border-radius:var(--r);background:var(--surface2);border:1px solid var(--border);font-size:.9rem;color:var(--muted);line-height:1.6}
.quiz-explain strong{color:var(--text)}
.quiz-nav{display:flex;justify-content:flex-end;margin-top:1.4rem}
.quiz-result{text-align:center;max-width:34rem;margin:0 auto}
.quiz-result-ring{width:150px;height:150px;margin:1rem auto 1.5rem;position:relative}
.quiz-result-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.quiz-result-ring .ring-track{fill:none;stroke:var(--line-soft);stroke-width:8}
.quiz-result-ring .ring-fill{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1s var(--ease-spring)}
.quiz-result-ring .ring-fill.pass{stroke:var(--teal)}
.quiz-result-ring .ring-fill.fail{stroke:var(--amber)}
.quiz-result-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:2rem;font-weight:700}
.quiz-result-msg{font-size:1.1rem;font-weight:600;margin-bottom:.5rem}
.quiz-review{text-align:left;margin-top:2rem;display:flex;flex-direction:column;gap:.7rem}
.quiz-review-item{padding:.85rem 1rem;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface2);font-size:.87rem}
.quiz-review-item.wrong{border-color:rgba(224,85,72,.3)}
.quiz-review-item .qr-q{font-weight:600;margin-bottom:.3rem;color:var(--text)}
.quiz-review-item .qr-a{color:var(--muted)}
.quiz-review-item .qr-a.wrong-answer{color:var(--crim);text-decoration:line-through}
.quiz-review-item .qr-a.right-answer{color:var(--teal-2)}

/* ============================================================
   Certificate
   ============================================================ */
.cert-wrap{max-width:46rem;margin:0 auto;text-align:center}
.cert-title{font-size:clamp(1.9rem,4vw,2.6rem);margin:0 0 1.8rem}
.cert-locked{padding:3rem 1.5rem;border:1px dashed var(--border-strong);border-radius:var(--r-lg);background:var(--surface)}
.cert-locked .lock-ico{display:inline-grid;place-items:center;width:64px;height:64px;margin-bottom:1rem;border-radius:18px;
  color:var(--amber-ink);background:var(--overlay-2);border:1px solid var(--border)}
.cert-locked .lock-ico .kico{width:30px;height:30px}
.cert-locked-title{font-size:1.15rem;margin:0 0 .6rem;letter-spacing:-.01em;line-height:1.3}
/* OSINT lab findings: lock until discovered, then a teal check. */
.finding-ico{display:inline-flex;vertical-align:-.2em;margin-right:.5rem;color:var(--muted2)}
.finding-ico .kico{width:16px;height:16px}
.finding-ico.is-found{color:var(--teal-ink)}
.cert-form{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin:1.6rem 0}
.cert-form input{padding:.8rem 1.1rem;border-radius:11px;border:1px solid var(--border-strong);background:var(--surface);
  color:var(--text);font-family:inherit;font-size:.95rem;min-width:16rem}
.cert-form input:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.cert-canvas-wrap{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem;margin:1.6rem 0}
.cert-canvas-wrap canvas{max-width:100%;height:auto;border-radius:8px;box-shadow:var(--shadow-md)}
.cert-actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.2rem}
#certPrintArea{display:none}
@media print{
  body *{visibility:hidden}
  #certPrintArea,#certPrintArea *{visibility:visible}
  #certPrintArea{display:block;position:fixed;inset:0;background:#fff}
  #certPrintArea canvas{width:100%;height:auto}
}

/* Printable lesson view — hides all app chrome (nav, sidebar, footer,
   ads, notes, TOC mini-map, reader controls) and leaves just the
   article content, readable in black-on-white. Only kicks in when
   the reader (.reader-wrap) is actually on the page. */
@media print{
  body:has(.reader-wrap) .nav,
  body:has(.reader-wrap) .footer,
  body:has(.reader-wrap) .skip,
  body:has(.reader-wrap) .offline-badge,
  body:has(.reader-wrap) .sidebar,
  body:has(.reader-wrap) .reader-progress,
  body:has(.reader-wrap) .reader-nav-top,
  body:has(.reader-wrap) .pomodoro-widget,
  body:has(.reader-wrap) .reader-nav,
  body:has(.reader-wrap) .reader-foot,
  body:has(.reader-wrap) .lesson-rating,
  body:has(.reader-wrap) .micro-check,
  body:has(.reader-wrap) .updated-banner,
  body:has(.reader-wrap) .notes-panel,
  body:has(.reader-wrap) .ad-slot,
  body:has(.reader-wrap) .toc-float{display:none !important}
  body:has(.reader-wrap) .reader-wrap{display:block}
  body:has(.reader-wrap) .reader{max-width:100%;color:#000}
  body:has(.reader-wrap) .md{color:#000}
  body:has(.reader-wrap) .md a{color:#000;text-decoration:underline}
  body:has(.reader-wrap) .md pre{white-space:pre-wrap;word-break:break-word;border:1px solid #ccc}
}

/* ============================================================
   Skill tree
   ============================================================ */
.skilltree{display:flex;flex-direction:column;gap:2rem;max-width:64rem;margin:0 auto}
.st-tier-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.st-tier-head h3{font-family:var(--font-display);font-size:1.2rem;margin:0}
.st-nodes{display:grid;grid-template-columns:repeat(auto-fill,minmax(13rem,1fr));gap:.9rem}
.st-node{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.1rem;
  text-decoration:none;color:var(--text);transition:border-color .18s var(--ease),transform .18s var(--ease)}
.st-node:hover{border-color:rgba(63,182,168,.5);transform:translateY(-2px)}
.st-node.active{border-color:rgba(239,164,58,.4)}
.st-node.done{border-color:rgba(63,182,168,.5);background:rgba(63,182,168,.06)}
.st-node-n{font-family:var(--font-mono);font-size:.7rem;color:var(--muted2);margin-bottom:.3rem}
.st-node-t{font-family:var(--font-display);font-weight:600;font-size:.95rem;margin-bottom:.4rem}
.st-node-pct{font-family:var(--font-mono);font-size:.72rem;color:var(--teal-2)}

/* ============================================================
   Roadmap
   ============================================================ */
.roadmap-wrap{max-width:56rem;margin:0 auto;position:relative}
.roadmap-line{position:absolute;left:27px;top:0;bottom:0;width:2px;background:linear-gradient(var(--line-soft),var(--line-soft));z-index:0}
.roadmap-node{position:relative;z-index:1;display:flex;gap:1.2rem;margin-bottom:1rem;text-decoration:none;color:var(--text)}
.roadmap-dot{flex:none;width:56px;height:56px;border-radius:50%;background:var(--surface);border:2px solid var(--border-strong);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:700;font-size:.95rem;color:var(--muted);
  transition:all .25s var(--ease)}
.roadmap-node.done .roadmap-dot{background:rgba(63,182,168,.15);border-color:var(--teal);color:var(--teal-2)}
.roadmap-node.active .roadmap-dot{background:rgba(239,164,58,.15);border-color:var(--amber);color:var(--amber-ink);box-shadow:0 0 0 4px rgba(239,164,58,.14)}
.roadmap-card{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.1rem 1.3rem;
  transition:border-color .2s var(--ease),transform .2s var(--ease)}
.roadmap-node:hover .roadmap-card{border-color:rgba(239,164,58,.4);transform:translateX(4px)}
.roadmap-card-title{font-family:var(--font-display);font-weight:600;font-size:1.02rem;margin-bottom:.25rem}
.roadmap-card-desc{color:var(--muted);font-size:.85rem;margin-bottom:.5rem}
.roadmap-eta{font-family:var(--font-mono);font-size:.7rem;color:var(--teal-2);margin-top:.4rem}

/* ============================================================
   Onboarding tour
   ============================================================ */
.tour-overlay{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:900;backdrop-filter:blur(1px)}
.tour-card{position:fixed;width:min(21rem,calc(100vw - 2rem));background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--r-lg);padding:1.2rem 1.3rem;box-shadow:var(--shadow-md);z-index:902}
.tour-step-count{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:.4rem}
.tour-card h3{font-family:var(--font-display);font-size:1.05rem;margin:0 0 .45rem}
.tour-card p{color:var(--muted);font-size:.88rem;line-height:1.55;margin:0 0 1rem}
.tour-actions{display:flex;gap:.6rem;justify-content:flex-end}
.tour-highlight{position:relative;z-index:901;box-shadow:0 0 0 3px var(--amber),0 0 0 9px rgba(239,164,58,.28);border-radius:10px}

/* Test-out prompt on a perfect path-quiz score */
.testout-box{max-width:34rem;margin:1.6rem auto 0;background:var(--surface2);border:1px solid rgba(239,164,58,.35);border-radius:var(--r);padding:1.2rem 1.3rem;text-align:left}
.testout-t{font-family:var(--font-display);font-weight:600;margin-bottom:.5rem}
.testout-box p{color:var(--muted);font-size:.87rem;line-height:1.55;margin:0 0 1rem}

/* End-of-lesson micro-check */
.micro-check{margin-top:2.4rem;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:1.3rem}
.mc-eyebrow{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:.5rem}
.mc-q{font-family:var(--font-display);font-weight:600;font-size:1.02rem;margin-bottom:.9rem}
.mc-options{display:flex;flex-direction:column;gap:.5rem}
.mc-note{font-size:.75rem;color:var(--muted2);margin-top:.9rem}

/* Lessons-per-week trend chart */
.trend-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.1rem}
.trend-svg{width:100%;height:auto;display:block}
.trend-axis{stroke:var(--border-strong);stroke-width:1}
.trend-tick{fill:var(--muted2);font-family:var(--font-mono);font-size:10px}
.trend-area{fill:rgba(239,164,58,.14);stroke:none}
.trend-line{fill:none;stroke:var(--amber);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.trend-dot{fill:var(--amber)}
.trend-legend{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.6rem;font-size:.78rem;color:var(--muted)}

/* Prerequisite heads-up on a path overview */
.prereq-hint{display:flex;gap:.7rem;align-items:flex-start;max-width:42rem;margin:0 0 1.4rem;padding:.85rem 1.1rem;
  background:var(--surface2);border:1px solid rgba(239,164,58,.3);border-left:3px solid var(--amber);border-radius:var(--r);
  font-size:.87rem;line-height:1.55;color:var(--muted)}
.prereq-hint b{color:var(--text)}
.prereq-hint a{color:var(--teal-2)}
.prereq-ico{flex:none}

/* "Updated since you read it" banner */
.updated-banner{display:flex;gap:.7rem;align-items:center;margin:0 0 1.4rem;padding:.8rem 1.05rem;
  background:var(--surface2);border:1px solid rgba(63,182,168,.35);border-left:3px solid var(--teal);
  border-radius:var(--r);font-size:.87rem;color:var(--muted);flex-wrap:wrap}
.updated-banner b{color:var(--text)}
.updated-banner>div{flex:1;min-width:12rem}

/* ============================================================
   Transcript
   ============================================================ */
.transcript-doc{max-width:48rem;margin:0 auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:2rem}
.tr-head{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:flex-start;
  padding-bottom:1.1rem;margin-bottom:1.4rem;border-bottom:2px solid var(--amber)}
.tr-brand{font-family:var(--font-display);font-weight:700;font-size:1.4rem}
.tr-sub{color:var(--muted);font-size:.88rem}
.tr-meta{font-size:.82rem;color:var(--muted);text-align:right}
.tr-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:1rem;margin-bottom:1.4rem}
.tr-summary>div{display:flex;flex-direction:column;gap:.15rem}
.tr-n{font-family:var(--font-mono);font-weight:700;font-size:1.25rem;color:var(--amber-ink)}
.tr-l{font-size:.75rem;color:var(--muted)}
.tr-final{padding:.75rem 1rem;border-radius:var(--r);background:rgba(63,182,168,.12);border:1px solid rgba(63,182,168,.4);margin-bottom:1.6rem;font-weight:600}
.tr-final-pending{background:var(--surface2);border-color:var(--border);color:var(--muted);font-weight:400}
.tr-h{font-family:var(--font-display);font-size:1.05rem;margin:1.6rem 0 .7rem}
.tr-table{width:100%;border-collapse:collapse;font-size:.85rem}
.tr-table th,.tr-table td{border:1px solid var(--border);padding:.45rem .6rem;text-align:left}
.tr-table th{background:var(--surface2);font-weight:600}
.tr-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:.4rem;font-size:.85rem}
.tr-empty{color:var(--muted);font-size:.87rem}
.tr-foot{margin-top:2rem;padding-top:1rem;border-top:1px solid var(--border);font-size:.75rem;color:var(--muted2);line-height:1.55}

@media print{
  body:has(.transcript-doc) .nav,
  body:has(.transcript-doc) .footer,
  body:has(.transcript-doc) .skip,
  body:has(.transcript-doc) .offline-badge,
  body:has(.transcript-doc) .no-print,
  body:has(.transcript-doc) .ad-slot{display:none !important}
  body:has(.transcript-doc) .transcript-doc{border:none;border-radius:0;padding:0;max-width:100%;background:#fff;color:#000}
  body:has(.transcript-doc) .tr-brand,
  body:has(.transcript-doc) .tr-table td,
  body:has(.transcript-doc) .tr-list{color:#000}
  body:has(.transcript-doc) .tr-table th{background:#f2f2f2;color:#000}
  body:has(.transcript-doc) .tr-table th,
  body:has(.transcript-doc) .tr-table td{border-color:#ccc}
}

/* Zen / focus reading mode — hides everything but the lesson body and
   the reader's own controls (so the toggle to exit stays reachable).
   Scoped with :has() so the class only ever does anything on a lesson
   page, even if it's left set in STATE while browsing elsewhere. */
body.zen-mode:has(.reader-wrap) .nav,
body.zen-mode:has(.reader-wrap) .footer,
body.zen-mode:has(.reader-wrap) .sidebar,
body.zen-mode:has(.reader-wrap) .ad-slot,
body.zen-mode:has(.reader-wrap) .toc-float,
body.zen-mode:has(.reader-wrap) .skip{display:none !important}
body.zen-mode:has(.reader-wrap) .reader-wrap{grid-template-columns:1fr;padding-top:2.5rem}
body.zen-mode:has(.reader-wrap) .reader{max-width:44rem;margin:0 auto}

/* ============================================================
   Progress hub
   ============================================================ */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.9rem;margin-bottom:2.2rem}
.hub-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.2rem}
.hub-stat-n{font-family:var(--font-display);font-weight:700;font-size:1.8rem}
/* A rank name ("Newcomer", "Practitioner") is a word, not a number: at the
   numeric size it overflowed its card. */
.hub-stat-n.is-word{font-size:1.3rem;line-height:1.25;overflow-wrap:anywhere}
.hub-stat-l{font-family:var(--font-mono);font-size:.68rem;color:var(--muted2);text-transform:uppercase;letter-spacing:.04em;margin-top:.2rem}
.hub-section{margin-bottom:2.6rem}
.hub-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem}
.hub-h{font-family:var(--font-display);font-size:1.15rem;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.hub-h.sm{font-size:1.05rem}
.hub-h{display:flex;align-items:center;gap:.6rem}
.hub-h-ico{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;flex-shrink:0;
  color:var(--amber-ink);background:linear-gradient(145deg,var(--overlay-2),var(--overlay-1));border:1px solid var(--border)}
.hub-h-ico .kico{width:17px;height:17px}
.hub-h.sm .hub-h-ico{width:28px;height:28px;border-radius:9px}
.hub-h.sm .hub-h-ico .kico{width:15px;height:15px}
/* Lab stage marker: a numbered ring that turns into a check when done. */
.stage-n{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;flex-shrink:0;
  font-family:var(--font-mono);font-size:.8rem;font-weight:700;color:var(--amber-ink);border:1.5px solid currentColor}
.stage-n.done{color:var(--teal-ink);border-color:transparent}
.stage-n.done .kico{width:28px;height:28px}
.hub-path-row{display:flex;align-items:center;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line-soft)}
.hub-path-row:last-child{border-bottom:none}
.hub-path-row .hpr-name{flex:0 0 12rem;font-weight:600;font-size:.9rem}
.hub-path-row .mini-progress{flex:1;margin-top:0}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem}
.badge-card{padding:1.1rem;border-radius:var(--r);border:1px solid var(--border);background:var(--surface);text-align:center;
  transition:transform .2s var(--ease),border-color .2s var(--ease)}
/* Locked badges dim the artwork, not the words: the title and how to earn
   it stay readable (WCAG AA), and the dashed border marks the state. */
.badge-card.locked{border-style:dashed;background:var(--overlay-1)}
.badge-card.locked .badge-ico{opacity:.35;filter:grayscale(1)}
.badge-card.locked .badge-t{color:var(--muted)}
.badge-card.locked .badge-d,.badge-card.locked .badge-tier{color:var(--muted2)}
.badge-card.locked .badge-tier{border-color:var(--border);background:none}
.badge-card:not(.locked):hover{transform:translateY(-3px);border-color:rgba(239,164,58,.4)}
.badge-ico{font-size:1.8rem;margin-bottom:.5rem}
.badge-t{font-weight:600;font-size:.86rem;margin-bottom:.2rem}
.badge-d{font-size:.76rem;color:var(--muted)}
.badge-tier{display:inline-block;margin-top:.5rem;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.15rem .5rem;border-radius:99px;border:1px solid var(--border)}
.badge-tier-common{color:var(--muted2)}
.badge-tier-uncommon{color:var(--teal-2);border-color:rgba(63,182,168,.35)}
.badge-tier-rare{color:var(--amber-ink);border-color:rgba(239,164,58,.4)}
.badge-tier-legendary{color:#160f02;background:var(--grad-amber);border-color:transparent}
.hub-empty{color:var(--muted);font-size:.9rem;padding:1.5rem;text-align:center;border:1px dashed var(--border);border-radius:var(--r)}
.leaderboard-list{display:flex;flex-direction:column;gap:.4rem}
.leaderboard-row{display:flex;align-items:center;gap:.9rem;padding:.6rem .9rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
.leaderboard-row .lb-rank{flex:none;width:1.6rem;text-align:center;font-family:var(--font-mono);font-weight:700;color:var(--amber-ink)}
.leaderboard-row .lb-name{flex:1;font-weight:600}
.leaderboard-row .lb-count{flex:none;font-family:var(--font-mono);font-size:.8rem;color:var(--muted2)}
.hub-list-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:.55rem;text-decoration:none;color:var(--text)}
.hub-list-item:hover{border-color:rgba(239,164,58,.4)}
.hub-list-item>div:first-child{min-width:0;flex:1}
.hub-list-item .hli-t{font-weight:600;font-size:.9rem;overflow-wrap:break-word}
.hub-list-item .hli-d{color:var(--muted2);font-size:.76rem;margin-top:.15rem;overflow-wrap:break-word}
.hub-list-item>.btn-amber,.hub-list-item>.btn-ghost,.hub-list-item>svg{flex:none}

/* ============================================================
   Global search (Ctrl+K)
   ============================================================ */
.search-overlay{position:fixed;inset:0;z-index:400;background:rgba(5,7,11,.6);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:10vh 1rem 1rem;opacity:0;pointer-events:none;transition:opacity .2s var(--ease)}
.search-overlay.open{opacity:1;pointer-events:auto}
.search-modal{width:100%;max-width:640px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-lg);
  box-shadow:var(--shadow-md);overflow:hidden;transform:translateY(-12px);transition:transform .2s var(--ease)}
.search-overlay.open .search-modal{transform:translateY(0)}
.search-input-row{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--line-soft)}
.search-input-row svg{color:var(--muted2);flex:none}
.search-input-row input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:1.02rem;font-family:inherit}
.search-input-row kbd{font-family:var(--font-mono);font-size:.7rem;color:var(--muted2);border:1px solid var(--border);border-radius:5px;padding:.15rem .4rem}
.search-results{max-height:60vh;overflow-y:auto;padding:.5rem}
.search-result{display:block;padding:.75rem .9rem;border-radius:9px;text-decoration:none;color:var(--text);cursor:pointer}
.search-result.active,.search-result:hover{background:var(--overlay-3)}
.search-result .sr-path{font-family:var(--font-mono);font-size:.66rem;color:var(--teal-2);text-transform:uppercase;letter-spacing:.04em}
.search-result .sr-title{font-weight:600;font-size:.92rem;margin:.15rem 0}
.search-result .sr-desc{color:var(--muted);font-size:.8rem}
.search-empty{padding:2rem 1rem;text-align:center;color:var(--muted);font-size:.9rem}
mark{background:rgba(239,164,58,.35);color:var(--text);border-radius:3px;padding:0 1px}

/* ============================================================
   Auth modal (optional Supabase sign-in)
   ============================================================ */
.auth-modal{padding:1.6rem clamp(1.3rem,4vw,2.2rem) 2rem}
.auth-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem}
.auth-title{font-family:var(--font-display);font-size:1.35rem;font-weight:700;margin:.4rem 0 .7rem;letter-spacing:-.01em}
.auth-sub{color:var(--muted);font-size:.9rem;line-height:1.6;margin-bottom:1.4rem}
.auth-form{display:flex;gap:.6rem;flex-wrap:wrap}
.auth-form input{flex:1;min-width:12rem;padding:.75rem 1rem;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface2);color:var(--text);font-family:inherit;font-size:.92rem}
.auth-form input:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.auth-divider{display:flex;align-items:center;gap:.8rem;color:var(--muted2);font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;margin:1.3rem 0}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.auth-google{width:100%;justify-content:center}
.auth-status{min-height:1.2em;margin-top:.9rem;font-size:.85rem;color:var(--crim)}
.account-nav-link{font-weight:600!important;color:var(--amber-ink)!important}

@media(max-width:640px){
  .quiz-result-ring{width:120px;height:120px}
  .hub-path-row{flex-wrap:wrap}
  .hub-path-row .hpr-name{flex:1 1 100%}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal-ready [data-reveal],
  .reveal-ready [data-reveal-grid] > *{opacity:1;transform:none;transition:none}
  .lab-card:hover .lab-ico{transform:none}
  .path-card:hover,.career-card:hover,.feature-card:hover,.sublesson-card:hover{transform:none}
}

/* ---------- Reading time ---------- */
.read-time{color:var(--muted);font-size:.78rem;white-space:nowrap}

/* ---------- Lab / tool type-to-filter ---------- */
.card-filter{display:flex;align-items:center;gap:1rem;margin:0 0 1.4rem;flex-wrap:wrap}
.card-filter .glossary-search{flex:1;min-width:min(100%,18rem);max-width:32rem}
.card-filter-count{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted2)}
.lab-card.is-filtered{display:none}

/* ---------- Course level filter ---------- */
.tier-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.4rem}
.tier-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.48rem .9rem;border-radius:99px;cursor:pointer;
  font:inherit;font-size:.86rem;font-weight:500;color:var(--muted);background:var(--surface);border:1px solid var(--border);
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.tier-chip span{font-family:var(--font-mono);font-size:.7rem;color:var(--muted2)}
.tier-chip:hover{color:var(--text);border-color:var(--border-strong)}
.tier-chip[aria-pressed="true"]{color:var(--text);border-color:rgba(239,164,58,.55);background:rgba(239,164,58,.1)}
.tier-chip[aria-pressed="true"] span{color:var(--amber-ink)}
.path-card.is-filtered{display:none}

/* ---------- Glossary A–Z jump bar ---------- */
.glossary-jump{position:sticky;top:68px;z-index:15;display:flex;flex-wrap:wrap;gap:.25rem;
  margin:0 0 1.2rem;padding:.5rem .55rem;border-radius:var(--r);border:1px solid var(--border);
  background:var(--nav-bg-scrolled);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.glossary-jump:empty{display:none}
.glossary-jump a{min-width:1.9rem;height:1.9rem;display:inline-flex;align-items:center;justify-content:center;padding:0 .35rem;
  border-radius:7px;font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--muted);text-decoration:none;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.glossary-jump a:hover,.glossary-jump a:focus-visible{background:var(--overlay-3);color:var(--amber-ink)}
.glossary-letter{scroll-margin-top:130px}
.gi-term code,.gi-def code{font-family:var(--font-mono);font-size:.86em;padding:.05rem .3rem;border-radius:5px;
  background:rgba(63,182,168,.12);color:var(--teal-2)}
@media(max-width:640px){.glossary-jump{top:60px}.glossary-letter{scroll-margin-top:170px}}

/* ---------- Key terms cards (enhanceKeyTerms) ---------- */
.md ul.key-terms{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.7rem;padding:0;list-style:none}
.md ul.key-terms li{padding:.85rem 1rem;border-radius:var(--r);background:var(--surface2);border:1px solid var(--border);
  border-top:2px solid var(--teal);font-size:.92rem;line-height:1.55;
  transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.md ul.key-terms li::marker{content:none}
.md ul.key-terms li:hover{border-color:var(--border-strong);border-top-color:var(--amber);transform:translateY(-2px)}
.md ul.key-terms .kt-term{display:block;font-family:var(--font-display);font-size:.98rem;color:var(--text);margin-bottom:.25rem}
.md ul.key-terms .kt-def{color:var(--muted)}
.md .kt-cta{margin:-.4rem 0 1.4rem;font-size:.88rem}
.md .kt-cta a{color:var(--teal-2);text-decoration:none;font-weight:600}
.md .kt-cta a:hover{text-decoration:underline}
@media(prefers-reduced-motion:reduce){.md ul.key-terms li{transition:none}.md ul.key-terms li:hover{transform:none}}
@media print{.md ul.key-terms{display:block}.md ul.key-terms li{border:none;padding:0 0 .3rem}.md .kt-cta{display:none}}

/* ---------- In-page TOC ---------- */
.toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.2rem;margin:0 0 1.6rem}
.toc-title{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:.55rem}
/* The TOC sits inside .md, whose list rule (display:flex; column; gap)
   silently beat the two-column layout here — so a 13-section lesson opened
   with a single tall column that filled the whole first screen. The .md
   prefix restores the intended compact, numbered two-column list. */
.md .toc ul,.toc ul{list-style:none;margin:0;padding:0;display:block;columns:2;column-gap:2rem;
  counter-reset:toc;font-size:.88rem;line-height:1.45}
.md .toc li,.toc li{margin:0;padding:0;break-inside:avoid;counter-increment:toc}
.md .toc li::marker{content:none}
.toc a{display:flex;gap:.6rem;align-items:baseline;padding:.3rem .45rem;margin:0 -.45rem;border-radius:7px;
  color:var(--text);text-decoration:none;opacity:.85;
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.toc a::before{content:counter(toc,decimal-leading-zero);flex:none;font-family:var(--font-mono);font-size:.7rem;color:var(--muted2);
  transition:color var(--dur-1) var(--ease)}
.toc a:hover,.toc a:focus-visible{color:var(--teal-2);opacity:1;background:var(--overlay-2)}
.toc a:hover::before{color:var(--amber-ink)}
@media(max-width:640px){.md .toc ul,.toc ul{columns:1}}

/* Floating scroll-spy mini-map — desktop only (>1200px), pinned to the
   right edge of the viewport, mirrors the in-content TOC above. */
.toc-float{position:fixed;top:50%;right:1.1rem;transform:translateY(-50%);z-index:20;max-width:11rem;
  transition:opacity var(--dur-3) var(--ease),visibility var(--dur-3)}
.toc-float.toc-float-out{opacity:0;visibility:hidden}
.toc-float ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3rem;align-items:flex-end}
/* The label is absolutely positioned rather than laid out inline. Inline, it
   still occupied width while hidden at opacity:0 — and because the rows are
   right-aligned, every row was a different width, so the dots landed at
   different x positions. What should read as a clean vertical spine of dots
   was a ragged scatter, and the widest label pushed its dot off the edge.
   Taking the label out of flow makes every anchor exactly one dot wide. */
.toc-float a{position:relative;display:flex;align-items:center;justify-content:flex-end;
  text-decoration:none;color:var(--muted2);font-size:.72rem;line-height:1.2;padding:.2rem 0;
  min-height:14px}
.toc-float .tocf-dot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--border-strong);
  transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.toc-float .tocf-label{position:absolute;right:14px;top:50%;
  max-width:9.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:.16rem .5rem;border-radius:7px;
  background:var(--surface2);border:1px solid var(--border);box-shadow:var(--shadow-sm);
  opacity:0;transform:translateY(-50%) translateX(4px);pointer-events:none;
  transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.toc-float a:hover .tocf-label,.toc-float a.active .tocf-label,.toc-float a:focus-visible .tocf-label{opacity:1;transform:translateY(-50%)}
.toc-float a:hover .tocf-dot,.toc-float a.active .tocf-dot{background:var(--amber);transform:scale(1.3)}
.toc-float a.active{color:var(--text)}
@media(max-width:1200px){.toc-float{display:none}}

/* ---------- Code copy button + highlighting ---------- */
.md pre{position:relative}
/* Code window (enhanceCodeBlocks): title bar + the existing pre. */
.md .code-win{margin:0 0 1.3rem;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  background:var(--code-bg);box-shadow:var(--shadow-sm)}
.md .code-win > pre{margin:0;border:none;border-radius:0;box-shadow:none}
.code-bar{display:flex;align-items:center;gap:.7rem;padding:.42rem .6rem .42rem .85rem;
  border-bottom:1px solid var(--border);background:rgba(255,255,255,.025)}
.code-dots{display:inline-flex;gap:6px}
.code-dots i{width:9px;height:9px;border-radius:50%;background:#E05548;opacity:.85}
.code-dots i:nth-child(2){background:#EFA43A}.code-dots i:nth-child(3){background:#3FB6A8}
.code-lang{flex:1;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#7d8b99}
.code-copy{background:transparent;color:#9aa8b6;border:1px solid rgba(255,255,255,.12);border-radius:7px;
  padding:.22rem .6rem;font-size:.68rem;font-family:var(--font-mono);cursor:pointer;
  transition:color .18s var(--ease),border-color .18s var(--ease),background .18s var(--ease)}
.code-copy:hover,.code-copy:focus-visible{color:#EAEFF5;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.05)}
.code-copy.copied{color:#5FE0CF;border-color:rgba(63,182,168,.5)}
@media print{.code-bar{display:none}.md .code-win{border:none;box-shadow:none}}
.hljs-comment,.hljs-quote{color:var(--muted);font-style:italic}
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-section{color:var(--amber-2)}
.hljs-string,.hljs-attr,.hljs-template-tag,.hljs-regexp{color:var(--teal-2)}
.hljs-number,.hljs-symbol,.hljs-bullet,.hljs-meta{color:#C792EA}
.hljs-title,.hljs-name,.hljs-built_in,.hljs-type{color:#82AAFF}
.hljs-variable,.hljs-template-variable,.hljs-subst{color:var(--code-text)}
.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}
:root[data-theme="light"] .hljs-number,:root[data-theme="light"] .hljs-symbol,:root[data-theme="light"] .hljs-bullet,:root[data-theme="light"] .hljs-meta{color:#8331B2}
:root[data-theme="light"] .hljs-title,:root[data-theme="light"] .hljs-name,:root[data-theme="light"] .hljs-built_in,:root[data-theme="light"] .hljs-type{color:#1A56C4}

/* ---------- Streak badge ---------- */
.streak-badge[hidden]{display:none}
.streak-badge{display:inline-flex;align-items:center;gap:.28rem;font-family:var(--font-mono);font-size:.78rem;
  color:var(--text);background:var(--surface);border:1px solid rgba(239,164,58,.35);border-radius:999px;
  padding:.3rem .65rem;white-space:nowrap}
.streak-badge b{color:var(--amber-ink)}
@media(max-width:760px){.streak-badge{display:none}}

/* ---------- Glossary ---------- */
.glossary-tools{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-bottom:1.6rem}
.glossary-search{flex:1;min-width:230px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  color:var(--text);padding:.75rem 1rem;font-size:.95rem;font-family:inherit}
.glossary-search:focus{outline:2px solid var(--amber);outline-offset:2px}
.glossary-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:.8rem}
.glossary-letter{grid-column:1/-1;font-family:var(--font-display);font-size:1.3rem;font-weight:700;color:var(--amber-ink);
  border-bottom:1px solid var(--border);padding:.9rem 0 .35rem}
.glossary-item{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:.9rem 1rem;text-decoration:none;color:var(--text);transition:border-color .18s var(--ease),transform .18s var(--ease)}
.glossary-item:hover{border-color:rgba(63,182,168,.45);transform:translateY(-2px)}
.gi-term{font-weight:600;margin-bottom:.3rem}
.gi-def{font-size:.85rem;color:var(--muted);line-height:1.55;margin-bottom:.45rem}
.gi-src{font-family:var(--font-mono);font-size:.66rem;color:var(--teal-2)}

/* ---------- Flashcards ---------- */
.fc-tools{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-bottom:1.6rem}
.fc-select{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);color:var(--text);
  padding:.65rem .9rem;font-size:.88rem;font-family:inherit;max-width:100%}
.fc-progress{font-family:var(--font-mono);font-size:.78rem;color:var(--muted)}
.fc-card{position:relative;max-width:640px;margin:0 auto;min-height:280px;cursor:pointer;perspective:1200px}
.fc-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg,18px);padding:2rem;
  backface-visibility:hidden;transition:transform .5s var(--ease);text-align:center}
.fc-front{transform:rotateY(0)}
.fc-back{transform:rotateY(180deg)}
.fc-card.flipped .fc-front{transform:rotateY(-180deg)}
.fc-card.flipped .fc-back{transform:rotateY(0)}
.fc-term{font-family:var(--font-display);font-size:clamp(1.3rem,3.5vw,1.9rem);font-weight:700}
.fc-def{font-size:1rem;line-height:1.7;color:var(--text)}
.fc-hint{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fc-src{font-family:var(--font-mono);font-size:.7rem;color:var(--teal-2);text-decoration:none}
.fc-src:hover{text-decoration:underline}
.fc-actions{display:flex;gap:.8rem;justify-content:center;margin-top:1.4rem}
.fc-actions.hidden-until-flip{visibility:hidden}
@media(prefers-reduced-motion:reduce){.fc-face{transition:none}}

/* ---------- Keyboard shortcuts overlay ---------- */
.kbd-overlay{position:fixed;inset:0;z-index:400;background:rgba(4,6,10,.6);backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:1rem}
.kbd-overlay.open{display:flex}
.kbd-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.4rem 1.6rem;
  min-width:min(340px,90vw);box-shadow:var(--shadow-md)}
.kbd-title{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin-bottom:1rem}
.kbd-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.kbd-row{display:flex;justify-content:space-between;gap:2rem;padding:.4rem 0;font-size:.88rem;color:var(--muted)}
.kbd-row kbd{font-family:var(--font-mono);font-size:.72rem;background:var(--surface2);border:1px solid var(--border);
  border-bottom-width:2px;border-radius:6px;padding:.14rem .45rem;color:var(--text)}

/* ---------- Daily lesson banner ---------- */
.daily-lesson{margin-top:1rem;display:inline-flex;align-items:center;gap:.75rem;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.55rem 1rem}
.daily-tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink)}
.daily-tag .kico{width:13px;height:13px;vertical-align:-2px;margin-right:.4rem}
.daily-link{color:var(--text);text-decoration:none;font-weight:600}
.daily-link:hover{color:var(--teal-2)}
.daily-src{font-size:.78rem;color:var(--muted)}

/* ---------- Flashcards: SR extras ---------- */
.fc-mode-toggle{display:flex;gap:.4rem;flex-wrap:wrap}
.fc-mode{background:var(--surface);border:1px solid var(--border);border-radius:999px;color:var(--muted);
  padding:.4rem .85rem;font-size:.78rem;cursor:pointer;font-family:inherit}
.fc-mode.active{background:var(--surface2);color:var(--amber-ink);border-color:rgba(239,164,58,.5)}
.fc-mode:hover:not(.active){color:var(--text)}
.fc-stats{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin:0 0 1.4rem;color:var(--muted);font-size:.82rem}
.fc-stat b{color:var(--text);font-family:var(--font-mono);margin-right:.25rem}
.fc-stat.session{color:var(--teal-2)}
.fc-page .fc-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}
.fc-page .fc-tools label{display:flex;flex-direction:column;gap:.45rem;min-width:0;font-size:.8rem;color:var(--muted)}
.fc-page .fc-select{width:100%;min-width:0;min-height:44px}
.fc-page .fc-mode-toggle{grid-column:1/-1}
.fc-page .fc-tools>.btn-ghost{grid-column:1/-1;justify-self:start;white-space:normal;min-height:44px}
.fc-page .fc-mode{min-height:44px;padding:.55rem 1rem}
.fc-scope,.fc-scope-notice,.fc-help,.fc-save-status{font-size:.85rem;color:var(--muted);line-height:1.8}
.fc-scope-notice:empty,.fc-save-status:empty{display:none}
.fc-scope a{color:var(--teal-ink);display:inline-block;min-height:44px;align-content:center}
.fc-save-status{color:var(--teal-ink);min-height:1.5rem}
.fc-page .fc-progress{text-align:center;line-height:1.8;margin:1.5rem 0 1rem}
.fc-study-card{max-width:640px;min-height:250px;margin:0 auto;padding:2rem;border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--surface);text-align:center;overflow-wrap:anywhere}
.fc-study-card .fc-term{margin:1.2rem 0;line-height:1.5}
.fc-study-card button{min-height:44px}
.fc-study-card .fc-def{margin:1.5rem 0 1rem}
.fc-study-card .fc-src{display:inline-block;min-height:44px;align-content:center;line-height:1.8;color:var(--teal-ink)}
.fc-page .fc-actions{flex-wrap:wrap}
.fc-page .fc-actions button{min-height:55px;white-space:normal}
.fc-page .fc-empty p,.fc-maintenance p{font-size:.88rem;color:var(--muted);line-height:1.8}
.fc-page .fc-empty button{white-space:normal;min-height:44px;margin:.35rem}
.fc-maintenance{margin-top:2rem;font-size:.85rem;color:var(--muted)}
.fc-maintenance summary{min-height:44px;align-content:center;cursor:pointer;color:var(--text)}
.fc-help{max-width:640px;margin:1.5rem auto}
.fc-page .fc-tools .fc-studied{grid-column:1/-1;flex-direction:row;align-items:center;min-height:44px;gap:.7rem;color:var(--text);cursor:pointer}
.fc-studied input{width:20px;height:20px;flex-shrink:0;accent-color:var(--teal-ink)}
.study-reviews{margin:2.5rem 0;padding:1.6rem;border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--surface)}
.study-reviews>h2{font-family:var(--font-display);font-size:1.5rem;margin:.5rem 0 .8rem}
.study-reviews>p{color:var(--muted);font-size:.9rem;line-height:1.8;max-width:65ch}
.study-reviews>.btn-ghost{min-height:44px;white-space:normal}
#studyReviewSummary{font-size:.95rem;color:var(--text);line-height:1.8;margin:1.2rem 0}
.sr-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.sr-filter{font:inherit;font-size:.85rem;min-height:44px;padding:.6rem 1rem;color:var(--muted);border:1px solid var(--border);border-radius:999px;background:var(--bg);cursor:pointer}
.sr-filter[aria-pressed="true"]{color:var(--teal-ink);border-color:var(--teal-ink);background:var(--surface2)}
.sr-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;list-style:none;margin:1.3rem 0;padding:0}
.sr-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);padding:1.2rem}
.sr-card h3{font-family:var(--font-display);font-size:1.1rem;line-height:1.6;margin:.6rem 0}
.sr-card p,.sr-empty p{font-size:.85rem;line-height:1.8;color:var(--muted)}
.sr-card-actions{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;margin-top:auto;padding-top:.6rem}
.sr-card-actions .btn-amber{min-height:44px;white-space:normal}
.sr-text-link{display:inline-flex;align-items:center;min-height:44px;color:var(--teal-ink);font-size:.85rem;line-height:1.7}
.sr-empty{padding:1rem 0}
@media(max-width:700px){.study-reviews{padding:1rem}.sr-list{grid-template-columns:1fr}}
@media(max-width:700px){.fc-page .fc-tools{grid-template-columns:1fr}.fc-study-card{padding:1.3rem}.fc-page .fc-empty{padding:1.2rem}}
.fc-actions .btn-amber small,.fc-actions .btn-ghost small{display:block;font-weight:400;font-size:.66rem;opacity:.75;margin-top:.15rem;font-family:var(--font-mono)}
.fc-empty{text-align:center;max-width:520px;margin:2rem auto;padding:2rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r)}
.fc-empty-ico{font-size:3rem;margin-bottom:.6rem}
.fc-empty-t{font-size:1.15rem;font-weight:600;margin-bottom:.4rem}
.fc-empty-d{color:var(--muted);margin-bottom:1.2rem}

/* ---------- Tracks ---------- */
.tracks-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
/* Column flex so the progress block sits at the same height in every card
   of a row, whatever the description length. */
.track-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:1.2rem 1.3rem;text-decoration:none;color:var(--text);transition:border-color .18s var(--ease),transform .18s var(--ease)}
.track-card:hover{border-color:rgba(239,164,58,.5);transform:translateY(-2px)}
.track-head{display:flex;align-items:center;gap:.55rem;margin-bottom:.55rem}
.track-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border-radius:10px;
  background:var(--overlay-2);border:1px solid var(--border);color:var(--teal-ink)}
.track-ico .kico{width:18px;height:18px}
.track-eyebrow-ico{display:inline-flex;vertical-align:-.2em;margin-right:.45rem}
.track-eyebrow-ico .kico{width:15px;height:15px}
.track-title{font-family:var(--font-display);font-weight:700;font-size:1.05rem}
.track-desc{color:var(--muted);font-size:.9rem;line-height:1.55;min-height:2.6em;margin-bottom:1rem}
.track-progress{margin-bottom:.6rem;margin-top:auto}
.track-next .kico{width:14px;height:14px;vertical-align:-2px}
.track-bar{height:6px;background:var(--surface2);border-radius:3px;overflow:hidden}
.track-bar-fill{height:100%;background:linear-gradient(90deg,var(--amber),var(--teal-2));border-radius:3px;transition:width .5s var(--ease)}
.track-meta{font-family:var(--font-mono);font-size:.7rem;color:var(--muted);margin-top:.35rem}
.track-next{font-size:.82rem;color:var(--teal-2);border-top:1px dashed var(--border);padding-top:.6rem;margin-top:.4rem}
.track-hero{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:1.3rem 1.4rem;margin-bottom:1.6rem}
.track-hero-stat .hstat-n{font-family:var(--font-display);font-size:1.6rem;font-weight:700;color:var(--amber-ink)}
.track-hero-stat .hstat-l{font-size:.72rem;font-family:var(--font-mono);color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.track-lessons{display:flex;flex-direction:column;gap:.4rem}
.track-lesson{display:flex;align-items:center;gap:.9rem;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:.75rem 1rem;text-decoration:none;color:var(--text);transition:border-color .18s var(--ease)}
.track-lesson:hover{border-color:rgba(63,182,168,.4)}
.track-lesson.done{opacity:.6}
.track-lesson.done .tl-check{background:var(--teal);color:#0a1210}
.track-lesson.next{border-color:rgba(239,164,58,.5)}
.track-lesson.next .tl-check{background:var(--amber);color:#160f02}
.tl-check{width:28px;height:28px;border-radius:50%;background:var(--surface2);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:.85rem;font-weight:700;flex:none}
.tl-body{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1}
.tl-title{font-weight:600;font-size:.92rem}
.tl-src{color:var(--muted);font-size:.72rem}
.back-link{display:inline-block;color:var(--teal-2);text-decoration:none;font-size:.82rem;margin-bottom:.6rem}
.back-link:hover{text-decoration:underline}

/* ---------- Labs ---------- */
.labs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
/* Column flex: the description grows, so the meta lines (and the status
   select on the cert roadmap) line up along the bottom of every card in a
   row instead of floating at the end of each description. */
.lab-card{display:flex;flex-direction:column;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:1.3rem;text-decoration:none;color:var(--text);transition:border-color .18s var(--ease),transform .18s var(--ease)}
.lab-card:hover{border-color:rgba(63,182,168,.5);transform:translateY(-3px)}
/* Card icons. Was font-size:2.2rem because these used to be emoji; they're
   now inline SVG, so the box is explicit and the glyph inherits currentColor
   — which is what lets one icon set work in both themes and high-contrast. */
.lab-ico{width:42px;height:42px;margin-bottom:.7rem;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:var(--overlay-1);border:1px solid var(--border);
  color:var(--teal-2);
  transition:color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),
             border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease-spring)}
.lab-ico .kico{width:21px;height:21px}
.cert-ico[data-tier="start"]{color:var(--teal-2);border-color:rgba(95,224,207,.4)}
.cert-ico[data-tier="beginner"]{color:var(--teal-ink);border-color:rgba(63,182,168,.4)}
.cert-ico[data-tier="intermediate"]{color:var(--amber-ink);border-color:rgba(239,164,58,.45)}
.cert-ico[data-tier="advanced"]{color:#E0734F;border-color:rgba(224,115,79,.45)}
.lab-card:hover .lab-ico,.lab-card:focus-visible .lab-ico{
  color:var(--amber-ink);background:var(--glow-amber-soft,rgba(239,164,58,.12));
  border-color:rgba(239,164,58,.35);transform:scale(1.06)}
.tool-head-ico{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;margin-right:.6rem;vertical-align:-.55rem;
  background:var(--overlay-1);border:1px solid var(--border);color:var(--teal-2)}
.tool-head-ico .kico{width:18px;height:18px}
/* Heading glyph for tool and lab pages: sized to the h1 and centred on it.
   It was a 34px chip on -.55rem baseline offset, which sat below the
   title's midline at h1 size. */
.sec-head h1:has(> .tool-head-ico){display:flex;align-items:center;gap:.75rem}
.sec-head h1 > .tool-head-ico{width:48px;height:48px;margin:0;flex:none;border-radius:13px;vertical-align:middle;
  background:linear-gradient(160deg,rgba(63,182,168,.14),rgba(239,164,58,.06)),var(--surface);border-color:rgba(95,224,207,.3)}
.sec-head h1 > .tool-head-ico .kico{width:24px;height:24px}
@media(max-width:640px){.sec-head h1 > .tool-head-ico{width:40px;height:40px}.sec-head h1 > .tool-head-ico .kico{width:20px;height:20px}}
.lab-card h3{font-family:var(--font-display);font-size:1.1rem;margin:0 0 .5rem}
.lab-card p{color:var(--muted);font-size:.87rem;line-height:1.55;margin:0 0 .8rem;flex-grow:1}
.lab-related{font-family:var(--font-mono);font-size:.68rem;color:var(--teal-2)}
.lab-card.is-complete{border-color:rgba(63,182,168,.5);background:rgba(63,182,168,.06)}
.lab-done-badge{font-size:.8rem}
.cert-track-card.active{border-color:rgba(239,164,58,.4)}
.cert-track-card.done{border-color:rgba(63,182,168,.5);background:rgba(63,182,168,.06)}
.lab-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.4rem;margin-bottom:1.6rem}
.lab-panel h3{font-family:var(--font-display);margin:0 0 .5rem}
.lab-hint{margin:.6rem 0 1rem;background:var(--surface2);border-left:3px solid var(--amber);padding:.6rem .9rem;border-radius:6px}
.lab-hint summary{cursor:pointer;color:var(--amber-ink);font-size:.85rem;font-weight:600}
.lab-hint p,.lab-hint ul{margin:.5rem 0 0;color:var(--muted);font-size:.85rem}
.lab-form{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0}
.lab-form input{flex:1;min-width:160px;background:var(--surface2);border:1px solid var(--border);border-radius:8px;
  color:var(--text);padding:.55rem .8rem;font-family:var(--font-mono);font-size:.85rem}
.lab-form input:focus{outline:2px solid var(--amber);outline-offset:2px}
.lab-frame-wrap{border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#fff;margin-top:.5rem}
.lab-frame-wrap iframe{width:100%;height:180px;border:none;display:block}
.lab-hit{margin-top:.8rem;padding:.85rem 1rem;border-radius:8px;background:rgba(239,164,58,.12);border:1px solid rgba(239,164,58,.4);color:var(--text);font-size:.9rem}
.lab-hit.ok{background:rgba(63,182,168,.14);border-color:rgba(63,182,168,.45)}
.lab-hit.fail{background:rgba(224,85,72,.12);border-color:rgba(224,85,72,.4)}
.lab-hit a{color:var(--teal-2)}
.lab-query{background:var(--code-bg);border:1px solid var(--border);border-radius:8px;padding:.75rem 1rem;
  font-family:var(--font-mono);font-size:.8rem;color:var(--muted);overflow-x:auto;margin:.6rem 0 0;white-space:pre-wrap;word-break:break-all}

/* ---------- Terminal simulator ---------- */
.term-wrap{background:#050810;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;font-family:var(--font-mono);font-size:.85rem;line-height:1.5}
.term-out{padding:1rem 1.15rem;color:#d5dde7;height:420px;max-height:60vh;overflow-y:auto;white-space:pre-wrap;word-break:break-all}
.term-out .tp-user{color:#5FE0CF}
.term-out .tp-path{color:#EFA43A}
.term-out .tp-dir{color:#82AAFF;font-weight:700}
.term-out .tp-cmd{color:#fff}
.term-input{display:flex;align-items:center;border-top:1px solid #1a2130;padding:.6rem 1.15rem;background:#08101c}
.term-prefix{color:#d5dde7;white-space:nowrap}
.term-input input{flex:1;background:transparent;border:none;outline:none;color:#fff;font-family:inherit;font-size:inherit;caret-color:#EFA43A}

/* ---------- PCAP viewer ---------- */
.pcap-tools{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.pcap-tools input{flex:1;min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  color:var(--text);padding:.6rem .9rem;font-size:.9rem;font-family:var(--font-mono)}
.pcap-wrap{display:grid;grid-template-columns:2fr 1fr;gap:1rem;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:.8rem}
@media(max-width:900px){.pcap-wrap{grid-template-columns:1fr}}
/* PCAP viewer keeps a dark aesthetic in both themes (like the terminal),
   so colors here are hard-coded rather than using theme vars — otherwise
   light-mode text (dark) would land invisible on the dark code-bg. */
.pcap-list{display:flex;flex-direction:column;max-height:520px;overflow-y:auto;background:#070A10;border-radius:8px;color:#EAEFF5}
.pcap-row{display:grid;grid-template-columns:36px 62px 130px 130px 60px 1fr;gap:.5rem;
  align-items:center;padding:.4rem .6rem;font-family:var(--font-mono);font-size:.78rem;color:#EAEFF5;
  background:transparent;border:none;text-align:left;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.04)}
.pcap-row:hover{background:rgba(63,182,168,.09)}
.pcap-row.sel{background:rgba(239,164,58,.16)}
.pcap-row.pcap-head{color:#94A3B2;cursor:default;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;position:sticky;top:0;background:#070A10;z-index:1}
.pcap-proto{padding:.08rem .4rem;border-radius:4px;background:#141A26;font-size:.7rem;text-align:center;color:#EAEFF5}
.pcap-http .pcap-proto{background:rgba(239,164,58,.22);color:#EFA43A}
.pcap-dns  .pcap-proto{background:rgba(63,182,168,.22);color:#5FE0CF}
.pcap-tcp  .pcap-proto{color:#94A3B2}
.pcap-arp  .pcap-proto{background:rgba(200,150,200,.22);color:#C792EA}
.pcap-detail{background:#070A10;border-radius:8px;padding:.9rem 1rem;font-size:.82rem;overflow-y:auto;max-height:520px;color:#EAEFF5}
.pcap-detail-head{font-family:var(--font-mono);color:#EFA43A;margin-bottom:.6rem;font-size:.8rem}
.pcap-kv{display:flex;justify-content:space-between;gap:1rem;padding:.25rem 0;border-bottom:1px dashed rgba(255,255,255,.06)}
.pcap-kv b{color:#94A3B2;font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.pcap-kv span{font-family:var(--font-mono);font-size:.8rem;color:#EAEFF5;text-align:right;word-break:break-all}
.pcap-payload-title{margin:.8rem 0 .3rem;font-family:var(--font-mono);color:#EFA43A;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.pcap-payload{background:rgba(0,0,0,.35);padding:.7rem .8rem;border-radius:6px;font-family:var(--font-mono);font-size:.75rem;
  color:var(--code-text);overflow-x:auto;white-space:pre-wrap;word-break:break-all;margin:0}
.pcap-detail-hint{color:var(--muted);font-style:italic;margin-top:.5rem}

/* ============ Activity heatmap (progress hub) ============ */
.heatmap-wrap{overflow-x:auto;padding-top:.2rem}
.hm-months{display:flex;gap:3px;margin-left:0;margin-bottom:3px}
.hm-months .hm-month{width:13px;font-size:.6rem;color:var(--muted2);font-family:var(--font-mono);flex:none;text-align:left}
.hm-grid{display:flex;gap:3px}
.hm-col{display:flex;flex-direction:column;gap:3px}
.hm-cell{width:13px;height:13px;border-radius:3px;background:var(--surface2);border:1px solid var(--border)}
.hm-cell.hm-on{background:var(--amber);border-color:var(--amber)}
.hm-cell.hm-future{visibility:hidden}
.hm-legend{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.7rem;font-size:.72rem;color:var(--muted);flex-wrap:wrap}
.hm-key{display:inline-flex;align-items:center;gap:4px}
.hm-key i{width:11px;height:11px;border-radius:3px;display:inline-block;background:var(--surface2);border:1px solid var(--border)}
.hm-key i.hm-on{background:var(--amber);border-color:var(--amber)}

/* ============ Toggle switch ============ */
.switch{position:relative;display:inline-flex;flex:none;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-track{width:44px;height:25px;border-radius:999px;background:var(--surface2);border:1px solid var(--border-strong);transition:background .18s var(--ease)}
.switch-track::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:var(--muted);transition:transform .18s var(--ease),background .18s var(--ease)}
.switch input:checked + .switch-track{background:var(--amber)}
.switch input:checked + .switch-track::after{transform:translateX(19px);background:#160f02}
.switch input:focus-visible + .switch-track{outline:2px solid var(--amber);outline-offset:2px}

/* ============ Suggest-an-edit footer ============ */
.reader-foot{margin-top:2rem;padding-top:1.2rem;border-top:1px solid var(--border);display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center}
.suggest-edit{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-size:.84rem;text-decoration:none}
.suggest-edit:hover{color:var(--teal-2)}
.suggest-edit svg{flex:none}
.report-mistake-btn{background:none;border:none;padding:0;cursor:pointer;font-family:inherit}
.report-mistake-form{margin-top:.8rem;padding:1rem;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r)}
.report-mistake-form textarea{width:100%;min-height:4.5rem;resize:vertical;background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:.6rem .7rem;color:var(--text);font-family:inherit;font-size:.85rem}
.report-mistake-form textarea:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.report-mistake-actions{display:flex;gap:.6rem;margin-top:.7rem}

/* ============ Reading preferences ============ */
:root[data-reading-size="large"] .md p, :root[data-reading-size="large"] .md li{font-size:1.14rem}
:root[data-reading-size="xlarge"] .md p, :root[data-reading-size="xlarge"] .md li{font-size:1.28rem;line-height:1.85}
:root[data-reading-width="wide"] .md{max-width:96ch}
:root[data-legible="true"] .md{font-family:Verdana,Tahoma,'Segoe UI',sans-serif;letter-spacing:.01em;word-spacing:.06em}
:root[data-legible="true"] .md p, :root[data-legible="true"] .md li{line-height:2.05}

/* ============ Tools ============ */
.sec-lead .tool-privacy{display:inline-flex;align-items:center;gap:.35rem;margin-left:.4rem;font-size:.82rem;color:var(--teal-ink)}
.tool-privacy .kico{width:14px;height:14px}
.tool-controls{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:1rem}
.tool-controls label{display:flex;flex-direction:column;gap:.35rem;font-size:.8rem;color:var(--muted);font-family:var(--font-mono)}
.tool-field{display:flex;flex-direction:column;gap:.4rem;font-size:.8rem;color:var(--muted);font-family:var(--font-mono);margin-bottom:1rem}
.tool-input,.tool-textarea{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);color:var(--text);
  padding:.7rem .9rem;font-size:.95rem;font-family:var(--font-mono);width:100%}
.tool-textarea{min-height:110px;resize:vertical;line-height:1.5}
.tool-input:focus,.tool-textarea:focus{outline:2px solid var(--amber);outline-offset:1px}
.tool-btnrow{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.tool-note{font-size:.78rem;color:var(--muted);line-height:1.6;margin:.6rem 0 0}
label.tool-note{display:block}
.tool-warn{background:rgba(224,85,72,.1);border:1px solid rgba(224,85,72,.3);color:var(--text);padding:.7rem .9rem;border-radius:var(--r);font-size:.88rem}
.tool-out-list{display:flex;flex-direction:column;gap:.5rem}
.hash-row{display:flex;gap:.8rem;align-items:baseline;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:.6rem .8rem}
.hash-algo{font-family:var(--font-mono);font-size:.72rem;color:var(--teal-2);flex:none;min-width:120px;font-weight:600}
.hash-val{font-family:var(--font-mono);font-size:.82rem;color:var(--text);word-break:break-all;flex:1;min-width:0}
@media(max-width:560px){.hash-row{flex-direction:column;gap:.3rem}.hash-algo{min-width:0}}
.jwt-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:.9rem 1rem;margin-bottom:.7rem}
.jwt-block pre{margin:.4rem 0 0;overflow-x:auto;font-size:.82rem;color:var(--code-text)}
.jwt-lbl{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.jwt-h .jwt-lbl{color:#82AAFF}.jwt-p .jwt-lbl{color:var(--teal-2)}.jwt-s .jwt-lbl{color:var(--amber-ink)}
.jwt-claim{font-size:.84rem;color:var(--muted);margin-top:.35rem}
.cvss-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;margin-bottom:1.4rem}
.cvss-version-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:0 0 1rem}
.cvss-version-tabs button{background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);padding:.6rem 1rem;cursor:pointer;font:inherit}
.cvss-version-tabs button[aria-selected="true"]{background:var(--amber);color:#160f02;border-color:var(--amber);font-weight:700}
.cvss-group{margin:1.5rem 0 2rem}
.cvss-group h2{font-size:1.15rem;margin:0 0 .7rem}
.cvss-group h3{font-size:.9rem;color:var(--muted);margin:.9rem 0}
.cvss-output{position:sticky;top:72px;z-index:3;background:var(--bg);border-bottom:1px solid var(--border);padding:.45rem 0 .75rem}
.cvss-output #cvssVector{font-family:var(--font-mono);font-size:.76rem;color:var(--teal-2);overflow-wrap:anywhere;margin-bottom:.55rem}
.cvss-metric{min-width:0}
.cvss-metric legend{float:none;width:100%}
.cvss-opt:focus-visible,.cvss-version-tabs button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media(max-width:640px){.cvss-output{position:static}.cvss-grid{grid-template-columns:1fr}}
.cvss-metric{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:.8rem .9rem}
.cvss-mlabel{font-size:.82rem;font-weight:600;margin-bottom:.5rem;display:flex;justify-content:space-between;align-items:center}
.cvss-key{font-family:var(--font-mono);font-size:.66rem;color:var(--muted2)}
.cvss-opts{display:flex;gap:.3rem;flex-wrap:wrap}
.cvss-opt{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:.35rem .6rem;font-size:.78rem;color:var(--muted);cursor:pointer;font-family:inherit}
.cvss-opt.on{background:var(--amber);border-color:var(--amber);color:#160f02;font-weight:600}
.cvss-result{margin:1rem 0}
.cvss-score{display:inline-flex;align-items:center;gap:.8rem;padding:.7rem 1.3rem;border-radius:var(--r);border:1px solid}
.cvss-num{font-family:var(--font-display);font-size:2rem;font-weight:800;line-height:1}
.cvss-sev{font-family:var(--font-mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .5rem;border-radius:6px}
.sev-none{color:#8496A6}.sev-low{color:#5FE0CF}.sev-med{color:#EFA43A}.sev-high{color:#FF8A5B}.sev-crit{color:#E05548}
/* The severity hues above are tuned for the dark surface; on light they fall
   to 1.5–3:1, so light mode uses deeper shades of the same five colours. */
:root[data-theme="light"] .sev-none{color:#5A6472}:root[data-theme="light"] .sev-low{color:#0B6F64}:root[data-theme="light"] .sev-med{color:#9A5B05}:root[data-theme="light"] .sev-high{color:#A84A17}:root[data-theme="light"] .sev-crit{color:#B8372C}
.cvss-score.sev-none{border-color:#8496A6}.cvss-score.sev-low{border-color:#5FE0CF}.cvss-score.sev-med{border-color:#EFA43A}.cvss-score.sev-high{border-color:#FF8A5B}.cvss-score.sev-crit{border-color:#E05548}
.cvss-sev.sev-none{background:rgba(132,150,166,.16)}.cvss-sev.sev-low{background:rgba(95,224,207,.16)}.cvss-sev.sev-med{background:rgba(239,164,58,.16)}.cvss-sev.sev-high{background:rgba(255,138,91,.16)}.cvss-sev.sev-crit{background:rgba(224,85,72,.16)}
.cvss-vector code{font-family:var(--font-mono);font-size:.82rem;color:var(--teal-2);word-break:break-all}
.pw-meter{height:10px;background:var(--surface2);border-radius:999px;overflow:hidden;margin:.4rem 0 .8rem;border:1px solid var(--border)}
.pw-meter-fill{height:100%;border-radius:999px;transition:width .25s var(--ease)}
.pw-meter-fill.sev-crit{background:#E05548}.pw-meter-fill.sev-high{background:#FF8A5B}.pw-meter-fill.sev-med{background:#EFA43A}.pw-meter-fill.sev-low{background:#5FE0CF}.pw-meter-fill.sev-none{background:#3FB6A8}
.pw-stats{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.9rem;margin-bottom:.5rem}
.pw-crack{font-size:.9rem;color:var(--muted)}

/* ============ Changelog ============ */
.changelog{display:flex;flex-direction:column;gap:1.6rem;max-width:760px}
.cl-entry{display:grid;grid-template-columns:110px 1fr;gap:1.2rem}
.cl-date{font-family:var(--font-mono);font-size:.78rem;color:var(--teal-2);padding-top:.2rem}
.cl-body{border-left:2px solid var(--border);padding-left:1.2rem}
.cl-body h3{font-family:var(--font-display);font-size:1.1rem;margin:0 0 .6rem}
.cl-body ul{margin:0;padding-left:1.1rem;color:var(--muted);font-size:.92rem;line-height:1.7}
.cl-body li{margin-bottom:.35rem}
@media(max-width:560px){.cl-entry{grid-template-columns:1fr;gap:.4rem}.cl-body{border-left:none;padding-left:0}}

/* ============ Interview bank ============ */
.iv-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:.6rem;overflow:hidden}
.iv-item summary{cursor:pointer;padding:.9rem 1.1rem;font-weight:600;font-size:.95rem;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.iv-item summary::-webkit-details-marker{display:none}
.iv-item summary::after{content:"＋";color:var(--amber-ink);font-family:var(--font-mono);flex:none}
.iv-item[open] summary::after{content:"−"}
.iv-answer{padding:0 1.1rem 1rem;color:var(--muted);font-size:.9rem;line-height:1.7}

/* ============ Command palette rows ============ */
.search-hint{padding:.7rem 1rem;font-size:.78rem;color:var(--muted);border-bottom:1px solid var(--border)}
.search-result.cmd-row{display:flex;align-items:center;gap:.8rem}
.cmd-ico{flex:none;width:1.6rem;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.cmd-ico .kico{width:16px;height:16px}
.cmd-row .sr-path{margin-top:.1rem}

/* ============ Share card ============ */
.share-card-wrap{overflow-x:auto;border-radius:var(--r);border:1px solid var(--border);background:var(--surface2)}
#shareCard{display:block;width:100%;max-width:600px;height:auto;margin:0 auto}

/* ============ SQLi lab ============ */
.sqli-wrap{max-width:680px}
.sqli-form{display:flex;flex-direction:column;gap:.9rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.3rem;margin-bottom:1.2rem}
.sqli-query{margin-bottom:1rem}
.sqli-query pre{background:var(--code-bg);border:1px solid var(--border);border-radius:var(--r);padding:1rem;overflow-x:auto;color:var(--code-text);font-size:.86rem;white-space:pre-wrap;word-break:break-word}
.sqli-ok{background:rgba(63,182,168,.12);border:1px solid rgba(63,182,168,.4);color:var(--text);padding:.9rem 1.1rem;border-radius:var(--r);margin-bottom:1rem}
.sqli-bad{background:rgba(224,85,72,.1);border:1px solid rgba(224,85,72,.3);color:var(--text);padding:.9rem 1.1rem;border-radius:var(--r);margin-bottom:1rem}
.sqli-hint summary{cursor:pointer;color:var(--teal-2);font-size:.9rem}
.idor-wrap{max-width:680px}
.idor-mine{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.idor-form{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.3rem;margin-bottom:1.2rem}
.idor-form .tool-field{flex:1;min-width:12rem}
.osint-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem}
.vr-grid{display:grid;gap:0 1.2rem;grid-template-columns:1fr 1fr}
.vr-grid label:nth-child(4),.vr-grid label:nth-child(5),.vr-grid label:nth-child(6){grid-column:1/-1}
@media(max-width:640px){.vr-grid{grid-template-columns:1fr}}
.vr-preview{margin-top:1.2rem}
.vr-preview-pre{background:var(--code-bg);border:1px solid var(--border);border-radius:var(--r);padding:1rem;overflow-x:auto;color:var(--code-text);font-size:.82rem;white-space:pre-wrap;word-break:break-word;max-height:24rem;overflow-y:auto}
.vr-print-area{display:none}
.mock-wrap{max-width:680px}
.mock-timer{font-family:var(--font-mono);font-size:.85rem;color:var(--amber-ink);margin-bottom:.6rem}
.mock-q{font-family:var(--font-display);font-size:1.2rem;font-weight:600;margin-bottom:1rem}
/* Focus timer. This used to be a block above #content, which put a utility
   widget above the lesson's <h1> — the title stopped being the first thing
   on the page, and starting the timer pushed the whole lesson down.
   A timer you glance at belongs out of the reading flow, so it's a pinned
   pill that stays put while you read. */
.pomodoro-widget{position:fixed;right:1.1rem;bottom:1.1rem;z-index:90;
  display:flex;align-items:center;gap:.6rem;
  background:var(--surface2);border:1px solid var(--border-strong);
  border-radius:999px;padding:.5rem .8rem;box-shadow:var(--shadow-md);
  animation:pomodoroIn var(--dur-3) var(--ease-spring)}
.pomodoro-widget[hidden]{display:none}
@keyframes pomodoroIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.pomodoro-time{font-family:var(--font-mono);font-weight:700;font-size:1.05rem;min-width:3.2rem;
  font-variant-numeric:tabular-nums}
.pomodoro-count{font-size:.78rem;color:var(--muted)}
.ub-ico{width:17px;height:17px;flex:none;color:var(--amber-ink)}
.lr-btn svg{display:block}
@media(max-width:560px){
  .pomodoro-widget{right:.6rem;bottom:.6rem;padding:.42rem .6rem;gap:.45rem}
  .pomodoro-time{font-size:.95rem;min-width:2.9rem}
}
@media(prefers-reduced-motion:reduce){.pomodoro-widget{animation:none}}
@media print{
  body:has(.vr-print-area) *{visibility:hidden}
  .vr-print-area,.vr-print-area *{visibility:visible}
  .vr-print-area{display:block;position:fixed;inset:0;padding:2rem;background:#fff;color:#000}
  .vr-print-area pre{white-space:pre-wrap;word-break:break-word;font-family:var(--font-mono)}
}

/* ============ Phishing lab ============ */
.ph-progress{font-family:var(--font-mono);font-size:.78rem;color:var(--muted);margin-bottom:.8rem}
.ph-email{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.2rem;margin-bottom:1.1rem;max-width:640px}
.ph-hdr{font-size:.9rem;margin-bottom:.5rem;color:var(--text)}
.ph-lbl{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted2);margin-right:.5rem}
.ph-body{margin-top:.8rem;padding-top:.8rem;border-top:1px solid var(--border);color:var(--md-text);line-height:1.7;font-size:.95rem}
.ph-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1rem}
.ph-verdict{padding:.8rem 1rem;border-radius:var(--r);margin-bottom:.8rem;font-size:.95rem}
.ph-verdict.ph-right{background:rgba(63,182,168,.12);border:1px solid rgba(63,182,168,.4)}
.ph-verdict.ph-wrong{background:rgba(224,85,72,.1);border:1px solid rgba(224,85,72,.3)}
.ph-flags ul{margin:.4rem 0 1rem;padding-left:1.2rem;color:var(--muted);font-size:.9rem;line-height:1.7}
.ph-done{text-align:center;padding:1.5rem 0}
.ph-done .cvss-score{margin:0 auto}

/* ============ Regex / headers tools ============ */
.regex-row{display:flex;align-items:center;gap:.3rem}
.regex-slash{color:var(--muted2);font-family:var(--font-mono);font-size:1.1rem}
.regex-highlight{background:var(--code-bg);border:1px solid var(--border);border-radius:var(--r);padding:1rem;white-space:pre-wrap;word-break:break-word;font-family:var(--font-mono);font-size:.9rem;line-height:1.7;color:var(--code-text);min-height:3rem}
.regex-highlight mark,.md-body mark{background:var(--amber);color:#160f02;border-radius:3px;padding:0 2px}
.hdr-row{display:flex;gap:.8rem;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:.7rem .9rem}
.hdr-row.hdr-ok{border-color:rgba(63,182,168,.35)}
.hdr-row.hdr-miss{border-color:rgba(224,85,72,.3)}
.hdr-row.hdr-warn{border-color:rgba(239,164,58,.4)}
.hdr-ico{flex:none;font-size:1rem}
.hdr-name{font-weight:600;font-size:.9rem;margin-bottom:.2rem}
.hdr-desc{font-size:.82rem;color:var(--muted);line-height:1.55}
.hdr-desc code{font-size:.76rem}

/* ============ Ad slots ============ */
/* Reserved min-height matches the placement's typical rendered size so ads
   don't cause layout shift once they load in. Dashed border + label keep
   it visually distinct from real content, for reader trust. */
.ad-slot{margin:1.2rem 0;padding:.7rem;border:1px dashed var(--border);border-radius:var(--r);
  background:var(--surface2);text-align:center;overflow:hidden}
.ad-slot .ad-label{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted2);margin-bottom:.5rem}
.sidebar .ad-slot{min-height:250px;display:flex;flex-direction:column}
.sidebar .ad-slot ins{flex:1}
.reader-foot + .ad-slot{min-height:100px}

/* ---------- Timed mock exam ----------
   Deliberately more austere than the path quizzes. A quiz is a friendly
   teaching surface; an exam should feel like sitting one, so the clock is
   the loudest element on the page and nothing hints at correctness. */
.exam-sec{padding-top:1rem}
.exam-bar{position:sticky;top:64px;z-index:30;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:.7rem 1rem;margin-bottom:1.4rem;box-shadow:var(--shadow-sm)}
.exam-bar-l{display:flex;align-items:baseline;gap:.85rem;flex-wrap:wrap}
.exam-clock{font-family:var(--font-mono);font-weight:700;font-size:1.5rem;font-variant-numeric:tabular-nums;
  color:var(--text);transition:color var(--dur-2) var(--ease)}
/* Under five minutes the clock turns amber and pulses once a second. It is
   the only animation on the page, so it cannot be missed or mistaken. */
.exam-clock.low{color:var(--amber-ink);animation:examTick 1s steps(2,end) infinite}
@keyframes examTick{0%,100%{opacity:1}50%{opacity:.55}}
.exam-meta{font-size:.8rem;color:var(--muted)}

.exam-preset{display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.1rem 1.2rem;
  color:var(--text);font:inherit;
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.exam-preset:hover{transform:translateY(-3px);border-color:rgba(239,164,58,.45);box-shadow:var(--shadow-md)}
.exam-preset-h{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin-bottom:.2rem}
.exam-preset-n{font-family:var(--font-mono);font-size:.7rem;color:var(--teal-2);margin-bottom:.55rem}
.exam-preset p{color:var(--muted);font-size:.88rem;margin:0 0 .7rem}
.exam-preset-go{color:var(--amber-ink);font-weight:600;font-size:.85rem}

.exam-qactions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.exam-nav{display:flex;gap:.7rem;justify-content:space-between;margin:1.2rem 0;flex-wrap:wrap}
.quiz-opt.chosen{border-color:var(--amber);background:rgba(239,164,58,.1)}

/* Question navigator. State is never colour-only: answered cells are
   filled, flagged cells carry a corner wedge, the current cell is ringed. */
.exam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:.4rem;margin-top:1.4rem}
.exam-cell{position:relative;min-height:38px;border-radius:9px;cursor:pointer;font:600 .78rem/1 'JetBrains Mono';
  background:var(--surface2);color:var(--muted);border:1px solid var(--border);
  transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.exam-cell:hover{color:var(--text);border-color:var(--border-strong)}
.exam-cell.done{background:var(--overlay-1);color:var(--text);border-color:var(--teal)}
.exam-cell.current{outline:2px solid var(--amber);outline-offset:1px;color:var(--text)}
.exam-cell.flag::after{content:"";position:absolute;top:0;right:0;border-width:0 8px 8px 0;
  border-style:solid;border-color:transparent var(--amber) transparent transparent;border-radius:0 8px 0 0}

.exam-score{margin:1.4rem 0 2rem}
.exam-score-bar{position:relative;height:14px;border-radius:999px;background:var(--surface2);
  border:1px solid var(--border);overflow:visible}
.exam-score-fill{height:100%;border-radius:999px;background:var(--grad-brand)}
.exam-score.fail .exam-score-fill{background:linear-gradient(90deg,#C4603F,#E0734F)}
.exam-score-mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--text);opacity:.65}
.exam-score-legend{display:flex;justify-content:space-between;font-family:var(--font-mono);
  font-size:.68rem;color:var(--muted2);margin-top:.4rem}

.exam-h3{font-family:var(--font-display);font-size:1.05rem;margin:2rem 0 .8rem}
.exam-history{overflow-x:auto}
.exam-table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:420px}
.exam-table th{text-align:left;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted2);padding:.5rem .6rem;border-bottom:1px solid var(--border)}
.exam-table td{padding:.55rem .6rem;border-bottom:1px solid var(--line-soft)}
.exam-table a{color:var(--teal-2);text-decoration:none}
.exam-table a:hover{text-decoration:underline}
.muted-inline{color:var(--muted2);font-size:.82rem}
.exam-rate{font-family:var(--font-mono);font-weight:700}
.exam-rate.ok{color:var(--teal-2)}
.exam-rate.low{color:#E0734F}
.exam-verdict{font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;
  padding:.18rem .45rem;border-radius:999px;color:var(--text)}
.exam-verdict.pass{background:rgba(63,182,168,.18);border:1px solid rgba(63,182,168,.45)}
.exam-verdict.fail{background:rgba(224,115,79,.18);border:1px solid rgba(224,115,79,.45)}
.exam-best{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);
  padding:.8rem 1rem;margin-top:1.4rem;font-size:.9rem;color:var(--muted)}

.exam-missed-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:.7rem 1rem;margin-bottom:.6rem}
.exam-missed-item>summary{cursor:pointer;font-weight:600;font-size:.92rem}
.exam-missed-body{padding-top:.7rem;font-size:.9rem;color:var(--muted)}
.exam-ans{padding:.35rem 0;font-size:.88rem}
.exam-ans.wrong b{color:#E0734F}
.exam-ans.right b{color:var(--teal-2)}
.exam-missed-body a{color:var(--teal-2);text-decoration:none;font-weight:600}

@media(max-width:640px){
  .exam-bar{top:56px;padding:.6rem .75rem}
  .exam-clock{font-size:1.25rem}
  .exam-grid{grid-template-columns:repeat(auto-fill,minmax(34px,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .exam-clock.low{animation:none}
  .exam-preset:hover{transform:none}
}

/* ---------- Search results page (#/search?q=) ---------- */
.searchpage-form{display:flex;gap:.6rem;margin:1.2rem 0 1rem;flex-wrap:wrap}
.searchpage-input{flex:1;min-width:min(340px,100%);background:var(--surface2);color:var(--text);
  border:1px solid var(--border-strong);border-radius:var(--r);padding:.7rem 1rem;font:inherit;font-size:1rem;
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.searchpage-input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(239,164,58,.18)}
.searchpage-results{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.searchpage-hit{display:block;text-decoration:none;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:.85rem 1.1rem;color:var(--text);
  transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.searchpage-hit:hover{border-color:rgba(239,164,58,.45);transform:translateX(3px)}
.searchpage-hit .sr-path{font-family:var(--font-mono);font-size:.68rem;color:var(--muted2);margin-bottom:.25rem}
.searchpage-hit .sr-title{font-weight:600;font-size:1rem;margin-bottom:.22rem}
.searchpage-hit .sr-desc{color:var(--muted);font-size:.87rem;line-height:1.5}
@media(prefers-reduced-motion:reduce){.searchpage-hit:hover{transform:none}}

/* ---------- Practice tasks ---------- */
.task-list{display:flex;flex-direction:column;gap:.9rem;margin-top:1.4rem}
.task-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:1.1rem 1.25rem;transition:border-color var(--dur-2) var(--ease)}
.task-card.is-solved{border-color:rgba(63,182,168,.45)}
.task-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.task-n{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amber-ink)}
.task-pts{font-family:var(--font-mono);font-size:.68rem;color:var(--muted2);
  border:1px solid var(--border);border-radius:999px;padding:.1rem .45rem}
.task-tick{margin-left:auto;color:var(--teal-2);display:flex}
.task-q{font-size:.97rem;line-height:1.6;margin-bottom:.9rem;white-space:normal}
.task-form{display:flex;gap:.5rem;flex-wrap:wrap}
.task-input{flex:1;min-width:min(240px,100%);background:var(--surface2);color:var(--text);
  border:1px solid var(--border-strong);border-radius:9px;padding:.55rem .8rem;
  font-family:var(--font-mono);font-size:.9rem;
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.task-input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(239,164,58,.18)}
.task-input:disabled{opacity:.6}
.task-feedback{min-height:1.2rem;font-size:.85rem;margin-top:.5rem;color:var(--muted)}
.task-feedback.ok{color:var(--teal-2);font-weight:600}
.task-feedback.bad{color:#E0734F}
.task-hint{margin-top:.5rem;font-size:.85rem;color:var(--muted)}
.task-hint>summary{cursor:pointer;color:var(--teal-2);font-weight:600}
.task-hint p{margin:.45rem 0 0}
/* The explanation only exists once decrypted, so it is genuinely absent
   from the DOM until the answer is right — not merely hidden with CSS. */
.task-explain{margin-top:.8rem;padding:.75rem .9rem;border-radius:10px;
  background:var(--overlay-1);border:1px solid rgba(63,182,168,.28);
  font-size:.88rem;line-height:1.6;color:var(--muted);white-space:pre-wrap}
.task-explain[hidden]{display:none}

.task-pathnav{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
.task-pathchip{text-decoration:none;font-size:.8rem;color:var(--muted);
  background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:.35rem .7rem;
  transition:border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.task-pathchip:hover{color:var(--text);border-color:var(--border-strong)}
.task-pathchip b{font-family:var(--font-mono);font-size:.72rem;color:var(--amber-ink);margin-left:.3rem}
.task-pathchip.done{border-color:rgba(63,182,168,.5)}
.task-pathchip.done b{color:var(--teal-2)}

/* ---------- Rank ---------- */
.rank-bar{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1rem 1.2rem;margin:1.2rem 0}
.rank-l{min-width:11rem}
.rank-name{font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--amber-ink)}
.rank-score{font-size:.8rem;color:var(--muted)}
.rank-r{flex:1;min-width:min(220px,100%)}
.rank-track{height:8px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);overflow:hidden}
.rank-fill{height:100%;background:var(--grad-brand);transition:width var(--dur-3) var(--ease)}
.rank-next{font-family:var(--font-mono);font-size:.7rem;color:var(--muted2);margin-top:.35rem}
@media(prefers-reduced-motion:reduce){.rank-fill{transition:none}}

/* ---- About / Contact / Privacy / Terms ----
   Long-form prose pages. Measure is capped at 68ch because these are read
   in full, unlike the card grids everywhere else — past about 75 characters
   the eye loses the line start on the return sweep. */
.legal-body{max-width:68ch;margin-top:2rem}
.legal-body h2{font-family:var(--font-display);font-size:1.15rem;
  margin:2.2rem 0 .6rem;color:var(--text);line-height:1.3;letter-spacing:-.01em}
.legal-body h2:first-child{margin-top:0}
.legal-body p{color:var(--text-2,var(--muted));line-height:1.75;margin:0 0 .9rem}
.legal-body a{color:var(--teal-2,var(--teal));text-decoration:underline;
  text-underline-offset:2px}
.legal-body a:hover{color:var(--amber-ink)}
.legal-body code{font-family:var(--font-mono);font-size:.88em;
  background:var(--surface-2,rgba(127,127,127,.12));padding:.12em .4em;border-radius:4px}

/* ---------- Personal study planner ---------- */
.study-entry{display:flex;align-items:center;gap:1.1rem;padding:1.3rem 1.5rem;margin:0 0 2rem;
  background:linear-gradient(110deg,rgba(63,182,168,.08),transparent 75%),var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--r-lg)}
.study-entry-icon{flex:none;color:var(--teal-ink);width:2.6rem;height:2.6rem;display:grid;place-items:center}
.study-entry-icon svg{width:1.8rem;height:1.8rem}
.study-entry>div{flex:1;min-width:0}
.study-entry h2{font-size:1.05rem;line-height:1.4;margin:0 0 .25rem}
.study-entry p{color:var(--muted);font-size:.9rem;margin:0}
.study-entry .btn-ghost{flex:none;min-height:44px}
.study-layout{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);gap:1.5rem;align-items:start}
.study-settings,.study-overview,.study-next,.study-week-section{padding:clamp(1.2rem,2.5vw,2rem);border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);min-width:0}
.study-planner h2{font-family:var(--font-display);font-size:1.3rem;line-height:1.35;letter-spacing:-.02em;margin:0 0 .8rem}
.study-settings form{display:flex;flex-direction:column;margin:1.5rem 0 1rem}
.study-settings label{font-size:.9rem;font-weight:600;margin:0 0 .5rem}
.study-settings input,.study-settings select{min-height:48px;width:100%;min-width:0;padding:.7rem .8rem;border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--bg);color:var(--text);font:inherit;font-size:1rem}
.study-settings select{margin-bottom:1.3rem}
.study-settings button{min-height:48px;margin-top:1rem;justify-content:center}
.study-hint{font-size:.88rem;line-height:1.65;color:var(--muted);margin:.65rem 0}
#studyPlanStatus{min-height:1.5em;margin-bottom:0;color:var(--teal-ink)}
.study-progress-link{display:inline-flex;align-items:center;min-height:44px;font-size:.9rem;color:var(--teal-ink)}
.study-content{display:grid;gap:1.5rem;min-width:0}
.study-overview{background:linear-gradient(130deg,rgba(63,182,168,.09),transparent 70%),var(--surface)}
.study-today-count{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin:.5rem 0 1rem}
.study-today-count strong{font-family:var(--font-display);font-size:clamp(3rem,6vw,4.5rem);line-height:1.05;letter-spacing:-.06em}
.study-today-count span{color:var(--muted);font-size:1rem}
.study-progress{display:block;width:100%;height:8px;border:0;border-radius:99px;overflow:hidden;background:var(--surface2);accent-color:var(--teal)}
.study-progress::-webkit-progress-bar{background:var(--surface2);border-radius:99px}
.study-progress::-webkit-progress-value{background:var(--teal);border-radius:99px}
.study-progress::-moz-progress-bar{background:var(--teal);border-radius:99px}
.study-goal-reached{color:var(--teal-ink)}
.study-queue{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.6rem}
.study-lesson{display:grid;grid-template-columns:2.2rem minmax(0,1fr) auto;align-items:center;gap:.9rem;min-height:76px;padding:1rem;
  border:1px solid var(--border);border-radius:var(--r);color:var(--text);text-decoration:none;background:var(--bg);transition:border-color .18s var(--ease)}
.study-lesson:hover{border-color:var(--teal)}
.study-step{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--surface2);color:var(--teal-ink);font-family:var(--font-mono);font-size:.85rem}
.study-lesson-meta{display:block;color:var(--muted);font-size:.75rem;margin-bottom:.25rem}
.study-lesson strong{display:block;font-size:.95rem;line-height:1.5;overflow-wrap:anywhere}
.study-empty{border-top:1px solid var(--border);padding-top:.8rem;margin-top:1rem}
.study-week-section{margin-top:1.5rem}
.study-week-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.study-week{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:.65rem;padding:0;margin:0}
.study-day{display:flex;flex-direction:column;gap:.8rem;border:1px solid var(--border);border-radius:var(--r);padding:1rem;background:var(--bg)}
.study-day.is-today{border-color:var(--teal);background:var(--surface2)}
.study-day time{font-size:.85rem;font-weight:600}
.study-day strong{font-family:var(--font-display);font-size:1.8rem;line-height:1}
.study-day>span{color:var(--muted);font-size:.75rem}
.study-return{margin:1.5rem 0 0}
@media(max-width:850px){
  .study-layout{grid-template-columns:1fr}
  .study-week{grid-template-columns:repeat(4,minmax(0,1fr))}
  .study-entry{flex-wrap:wrap}
  .study-entry .btn-ghost{margin-left:3.7rem}
}
@media(max-width:400px){
  .study-week{grid-template-columns:repeat(2,minmax(0,1fr))}
  .study-entry{padding:1.1rem;gap:.7rem}
  .study-entry-icon{display:none}
  .study-entry .btn-ghost{margin-left:0}
  .study-lesson{padding:.8rem;gap:.6rem;grid-template-columns:1.8rem minmax(0,1fr) auto}
  .study-step{width:1.8rem;height:1.8rem}
}

/* ---------- Incident Workbench ---------- */
.iw-entry{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.7rem;margin:0 0 2rem;
  background:linear-gradient(120deg,rgba(63,182,168,.1),rgba(239,164,58,.04)),var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-lg)}
.iw-entry h2{font-family:var(--font-display);font-size:1.35rem;line-height:1.3;margin:.4rem 0}
.iw-entry p{color:var(--muted);font-size:.93rem;margin:0;max-width:48ch}
.iw-entry .btn-amber{flex:none;min-height:48px}
.iw-hub-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,310px);gap:3rem;align-items:start;margin-bottom:2.5rem}
.iw-hub-hero .sec-head{margin:0}
.iw-training{font-size:.87rem;line-height:1.7;color:var(--muted);margin:1rem 0}
.iw-board{padding:1.6rem;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-lg)}
.iw-board>strong{display:block;font-family:var(--font-display);font-size:4rem;line-height:1.15;margin-top:1.3rem;letter-spacing:-.06em}
.iw-board>strong span{font-size:1.25rem;color:var(--muted);letter-spacing:0}
.iw-board>p{color:var(--muted);margin:.3rem 0 1.5rem}
.iw-board-foot{display:grid;gap:.6rem;border-top:1px solid var(--border);padding-top:1rem;font-size:.85rem;color:var(--muted)}
.iw-board-foot a{color:var(--teal-ink);display:inline-flex;align-items:center;min-height:36px}
.iw-index-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.iw-index-head h2{font-family:var(--font-display);font-size:1.5rem;margin:0;letter-spacing:-.03em}
.iw-filter-label{display:flex;gap:.75rem;align-items:center;font-size:.85rem;color:var(--muted)}
.iw-filter-label select{font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:.6rem;min-height:44px}
.iw-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-bottom:1.5rem}
.iw-card{display:flex;flex-direction:column;min-width:0;padding:1.6rem;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.iw-card-top{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.iw-case-number{font:500 .7rem var(--font-mono);letter-spacing:.12em;color:var(--muted)}
.iw-category{font-size:.73rem;padding:.3rem .65rem;border:1px solid var(--border-strong);border-radius:99px;color:var(--teal-ink)}
.iw-card-icon{color:var(--teal-ink);margin:2rem 0 1rem}
.iw-card-icon svg{width:2rem;height:2rem}
.iw-card h3{font-family:var(--font-display);font-size:1.4rem;line-height:1.3;letter-spacing:-.02em;margin:0 0 .9rem}
.iw-card>p{font-size:.91rem;line-height:1.75;color:var(--muted);flex:1;margin:0 0 1.5rem}
.iw-card-meta{font-size:.75rem;color:var(--muted);line-height:1.6;margin-bottom:1rem}
.iw-card-bottom{display:flex;flex-direction:column;gap:.5rem;padding-top:1rem;border-top:1px solid var(--border)}
.iw-card-bottom span{font-size:.75rem;color:var(--muted)}
.iw-card-bottom a{display:flex;align-items:center;min-height:44px;font-weight:600;font-size:.88rem;color:var(--teal-ink)}
.iw-back{display:inline-flex;align-items:center;min-height:44px;margin-bottom:1rem;color:var(--muted);font-size:.9rem}
.iw-case .sec-head{margin-bottom:1.5rem}
.iw-case-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin:1.4rem 0 0}
.iw-case-chips span{font-size:.75rem;color:var(--muted);background:var(--surface);border:1px solid var(--border);padding:.4rem .7rem;border-radius:99px}
.iw-brief{padding:1.2rem 1.5rem;border-left:3px solid var(--teal);border-radius:0 var(--r) var(--r) 0;background:var(--surface);margin-bottom:1.5rem}
.iw-brief strong{font-size:.85rem;color:var(--teal-ink)}
.iw-brief p{font-size:.95rem;line-height:1.7;margin:.4rem 0 0}
.iw-workspace{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.5rem;align-items:start}
.iw-evidence,.iw-decisions{min-width:0;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:1.5rem}
.iw-panel-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-bottom:1rem}
.iw-panel-head h2{font-family:var(--font-display);font-size:1.25rem;line-height:1.3;margin:0}
.iw-panel-head>span{font-family:var(--font-mono);font-size:.7rem;color:var(--muted)}
.iw-find{width:100%;min-width:0;min-height:44px;padding:.7rem .85rem;color:var(--text);background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--r-sm);font:inherit;font-size:.9rem}
.iw-find-results{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.iw-find-results button{font:inherit;color:var(--teal-ink);background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:.5rem .65rem;min-height:40px;cursor:pointer}
.iw-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin:1rem 0 .8rem}
.iw-tabs button{min-height:44px;padding:.5rem .7rem;border:1px solid var(--border);border-radius:var(--r-sm);font:inherit;font-size:.77rem;color:var(--muted);background:var(--bg);cursor:pointer}
.iw-tabs button[aria-selected="true"]{border-color:var(--teal);color:var(--teal-ink);background:var(--surface2)}
.iw-evidence-panel{border:1px solid var(--border);background:var(--bg);border-radius:var(--r);min-width:0;overflow:hidden;margin-bottom:1rem}
.iw-file-kind{font:500 .69rem var(--font-mono);color:var(--muted);padding:.8rem 1rem;border-bottom:1px solid var(--border);letter-spacing:.04em}
.iw-evidence-panel pre{font:.79rem/1.9 var(--font-mono);padding:1.2rem;margin:0;white-space:pre;overflow:auto;max-height:600px;color:var(--text);tab-size:2}
.iw-evidence-panel mark{color:var(--bg);background:var(--amber);border-radius:2px}
.iw-notes{border-top:1px solid var(--border);margin-top:1.7rem;padding-top:1.5rem}
.iw-notes h3{font-family:var(--font-display);font-size:1.05rem;margin:0 0 .7rem}
.iw-notes label{display:block;font-size:.86rem;color:var(--muted);margin-bottom:.7rem;line-height:1.6}
.iw-notes textarea{width:100%;min-width:0;resize:vertical;min-height:170px;background:var(--bg);color:var(--text);padding:.85rem;border:1px solid var(--border-strong);border-radius:var(--r-sm);font:inherit;font-size:.95rem;line-height:1.7}
.iw-note-status{min-height:1.5em;font-size:.78rem;color:var(--muted);margin:.5rem 0}
.iw-question{margin:1.7rem 0;padding:0;border:0;min-width:0}
.iw-question legend{font-size:.95rem;font-weight:600;line-height:1.7;margin-bottom:.8rem;padding:0;max-width:100%}
.iw-question legend>span{display:block;font:500 .67rem var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--teal-ink);margin-bottom:.4rem}
.iw-option{display:flex;gap:.7rem;align-items:flex-start;padding:.9rem;margin-bottom:.5rem;min-height:48px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);font-size:.86rem;line-height:1.65;cursor:pointer}
.iw-option:has(input:checked){border-color:var(--teal);background:var(--surface2)}
.iw-option:has(input:disabled){cursor:default}
.iw-option input{flex:none;accent-color:var(--teal);width:17px;height:17px;margin-top:.22rem}
.iw-option span{min-width:0;overflow-wrap:anywhere}
#iwSubmit{width:100%;min-height:48px;justify-content:center}
.iw-result-heading{padding:1.3rem;background:var(--surface2);border:1px solid var(--border-strong);border-radius:var(--r);margin:1.5rem 0}
.iw-result-heading h2{font-family:var(--font-display);font-size:1.4rem;line-height:1.4;margin:.5rem 0}
.iw-result-heading p{font-size:.8rem;color:var(--muted);margin:0}
.iw-feedback{border-left:3px solid var(--amber);padding:.3rem 0 .3rem 1rem;margin:1.5rem 0}
.iw-feedback.is-correct{border-color:var(--teal)}
.iw-feedback h3,.iw-conclusion h3{font-size:.95rem;margin:.3rem 0 .6rem}
.iw-feedback p,.iw-conclusion p{font-size:.85rem;line-height:1.8;color:var(--muted);margin:.6rem 0}
.iw-feedback strong{color:var(--text)}
.iw-references,.iw-result-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
.iw-references .btn-ghost{min-height:40px}
.iw-conclusion{border-top:1px solid var(--border);padding-top:1.2rem}
.iw-conclusion h3{margin-top:1.3rem}
.iw-conclusion a{display:block;font-size:.85rem;min-height:40px;padding:.5rem 0;line-height:1.6;color:var(--teal-ink);overflow-wrap:anywhere}
.iw-result-actions button{min-height:48px}
@media(min-width:1200px){.iw-case{max-width:1320px}}
@media(max-width:1000px){.iw-workspace{grid-template-columns:1fr}.iw-cases{grid-template-columns:1fr}.iw-card-icon{margin:1.2rem 0}.iw-card>p{max-width:65ch}}
@media(max-width:700px){
  .iw-hub-hero{grid-template-columns:1fr;gap:1.3rem}
  .iw-board>strong{font-size:3rem;margin-top:.5rem}
  .iw-board>p{margin-bottom:.8rem}
  .iw-entry{align-items:flex-start;flex-direction:column;padding:1.25rem}
  .iw-evidence,.iw-decisions,.iw-card{padding:1.1rem}
  .iw-evidence-panel pre{padding:1rem;font-size:.75rem;max-height:450px}
  .iw-case-chips span{font-size:.7rem}
  .iw-tabs button{flex:1}
  .iw-result-actions{flex-direction:column}
}
@media print{.iw-tabs,.iw-find,.iw-find-results,#iwDownloadEvidence,.iw-result-actions,#iwSubmit{display:none}.iw-workspace{display:block}.iw-evidence-panel pre{white-space:pre-wrap;max-height:none;overflow:visible}}

/* ---------- Beginner Learning Playground ---------- */
.pg-home-link{color:var(--muted);font-size:.9rem;line-height:1.7;margin:1rem 0}
.pg-home-link a,.pg-course-link a,.pg-link{color:var(--teal-ink);text-underline-offset:3px}
.pg-course-link{padding:1rem 1.2rem;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);margin:0 0 1.5rem;color:var(--muted);font-size:.9rem;line-height:1.8}
.pg-link{display:inline-flex;align-items:center;min-height:44px;font-size:.9rem;margin-bottom:1rem}
.pg-welcome,.pg-assignment,.pg-next{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1.6rem;border:1px solid var(--border-strong);border-radius:var(--r-lg);background:linear-gradient(120deg,rgba(63,182,168,.08),transparent),var(--surface);margin-bottom:1.5rem}
.pg-welcome h2,.pg-next h2{font-family:var(--font-display);font-size:1.2rem;margin:0 0 .5rem}
.pg-welcome p,.pg-next p{font-size:.93rem;color:var(--muted);line-height:1.8;margin:0;max-width:65ch}
.pg-welcome .pg-total{flex:none;color:var(--teal-ink);font-family:var(--font-mono);font-size:.8rem}
.pg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.3rem;margin:2rem 0}
.pg-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:1.7rem;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.pg-card .sec-eyebrow{font-size:.65rem;line-height:1.7}
.pg-card-icon{color:var(--teal-ink);margin:1.5rem 0 1rem}
.pg-card-icon svg{width:2rem;height:2rem}
.pg-card h2{font-family:var(--font-display);font-size:1.4rem;line-height:1.3;letter-spacing:-.02em;margin:0 0 1rem}
.pg-card p{flex:1;font-size:.92rem;line-height:1.8;color:var(--muted);margin:0 0 1.5rem}
.pg-card-state{font-size:.77rem;color:var(--muted);margin-bottom:1rem}
.pg-card .btn-ghost{min-height:44px}
.pg-hint{font-size:.86rem;line-height:1.8;color:var(--muted);margin:.75rem 0 1.3rem}
.pg-exercise{max-width:980px}
.pg-exercise .sec-head{margin-top:.5rem}
.pg-assignment{display:block;border-left:3px solid var(--teal)}
.pg-assignment strong{color:var(--teal-ink);font-size:.85rem}
.pg-assignment p{font-size:.95rem;line-height:1.8;margin:.4rem 0 0}
.pg-assignment .pg-complete{color:var(--teal-ink);font-size:.85rem;margin-top:1rem}
.pg-lab{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(1.2rem,3vw,2rem);min-width:0}
.pg-lab label:not(.pg-check){display:block;font-size:.94rem;font-weight:600;line-height:1.6;margin:.5rem 0 .65rem}
.pg-lab select,.pg-lab textarea{display:block;min-width:0;width:100%;min-height:48px;font:inherit;font-size:1rem;color:var(--text);background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:.8rem;margin:.5rem 0 1.2rem}
.pg-lab textarea{resize:vertical;line-height:1.7}
.pg-lab button{min-height:48px}
.pg-network-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.5rem 0}
.pg-network-map>div{display:flex;align-items:center;flex-direction:column;gap:.6rem;padding:1rem;border:1px solid var(--border);border-radius:var(--r);background:var(--bg);text-align:center}
.pg-network-map>div:first-child{grid-column:1/-1}
.pg-network-map>div.is-active{border-color:var(--teal);background:var(--surface2)}
.pg-network-map svg{width:1.7rem;height:1.7rem;color:var(--teal-ink)}
.pg-network-map strong{font-size:.95rem}
.pg-network-map span{font-size:.75rem;color:var(--muted);line-height:1.6}
.pg-network-map .pg-map-connection{color:var(--teal-ink);font-family:var(--font-mono);font-size:.7rem}
.pg-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.55rem;list-style:none;padding:0;margin:1.5rem 0}
.pg-stages li{padding:.8rem;border:1px solid var(--border);border-radius:var(--r-sm);font-size:.8rem;line-height:1.6;color:var(--muted)}
.pg-stages li>span{display:block;color:var(--muted);font:500 .7rem var(--font-mono);margin-bottom:.3rem}
.pg-stages li[aria-current]{border-color:var(--teal);background:var(--surface2);color:var(--text)}
.pg-stages li.is-visited>span{color:var(--teal-ink)}
.pg-feedback{padding:1.4rem;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--bg);margin:1.5rem 0;min-width:0;overflow-wrap:anywhere}
.pg-feedback h2{font-family:var(--font-display);font-size:1.25rem;line-height:1.4;margin:.5rem 0 .8rem}
.pg-feedback p{font-size:.95rem;line-height:1.9;margin:0;color:var(--muted);white-space:pre-wrap}
.pg-feedback code{display:block;font:500 .8rem/1.8 var(--font-mono);color:var(--teal-ink);margin-top:1rem;overflow-wrap:anywhere}
.pg-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
.pg-goals{list-style:none;padding:1.2rem 0 0;margin:1.4rem 0 0;border-top:1px solid var(--border);display:grid;gap:.8rem}
.pg-goals li{display:flex;align-items:baseline;gap:.7rem;font-size:.9rem;line-height:1.7;color:var(--muted)}
.pg-goals li>span:first-child{flex:none;min-width:1rem}
.pg-goals li.is-done{color:var(--teal-ink)}
.pg-reference{font-size:.85rem;line-height:1.8;color:var(--muted);margin:1.5rem 0 0}
.pg-reference summary{cursor:pointer;min-height:44px;padding:.6rem 0;color:var(--text)}
.pg-reference p{margin:.6rem 0}
.pg-reference a{color:var(--teal-ink)}
.pg-next{margin-top:2rem}
.pg-next .btn-amber{flex:none;min-height:48px}
.pg-byte-head{display:flex;align-items:baseline;gap:.8rem;justify-content:space-between;flex-wrap:wrap;margin:1.3rem 0 .8rem}
.pg-byte-head h2{font-family:var(--font-display);font-size:1.1rem;margin:0}
.pg-byte-head span{font:500 .75rem var(--font-mono);color:var(--muted)}
.pg-bytes{display:flex;gap:.45rem;flex-wrap:wrap;padding:1rem;border:1px solid var(--border);border-radius:var(--r);min-height:65px;background:var(--bg)}
.pg-bytes code{font:500 .85rem var(--font-mono);color:var(--teal-ink);padding:.5rem;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface2)}
#pgBase64{font-family:var(--font-mono);font-size:.9rem;overflow-wrap:anywhere}
#pgEncode{margin-bottom:1.3rem}
.pg-access-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.pg-check{display:flex;align-items:flex-start;gap:.8rem;min-height:48px;padding:.8rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);margin:.7rem 0;font-size:.93rem;line-height:1.7;cursor:pointer}
.pg-check input{flex:none;width:19px;height:19px;accent-color:var(--teal);margin-top:.2rem}
.pg-mode{font-size:.85rem;color:var(--muted);line-height:1.8;margin:1.2rem 0}
#pgResetAccess{margin:.5rem 0 .5rem .5rem}
.iw-guide,.iw-terms,.iw-hint{border:1px solid var(--border);border-radius:var(--r);background:var(--bg);padding:.3rem 1rem;margin:1rem 0;font-size:.85rem;line-height:1.8;color:var(--muted)}
.iw-guide summary,.iw-terms summary,.iw-hint summary{min-height:44px;cursor:pointer;color:var(--teal-ink);padding:.5rem 0;font-weight:500}
.iw-guide ol{padding-left:1.3rem;margin:.5rem 0 1rem;display:grid;gap:.7rem}
.iw-guide strong,.iw-terms dt{color:var(--text);font-weight:600}
.iw-guide a{display:inline-flex;align-items:center;min-height:44px;color:var(--teal-ink)}
.iw-terms dl{margin:.5rem 0 1rem}
.iw-terms dd{margin:0 0 .8rem}
.iw-hint p{margin:.5rem 0 1rem}
.iw-hint button{min-height:44px;margin-bottom:.8rem;white-space:normal}
@media(max-width:1000px){.pg-grid{grid-template-columns:1fr}.pg-card p{max-width:65ch}.pg-welcome,.pg-next{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){
  .pg-stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-access-controls{grid-template-columns:1fr;gap:0}
  .pg-card,.pg-welcome,.pg-assignment,.pg-next{padding:1.2rem}
  .pg-actions{flex-direction:column}
  .pg-network-map{gap:.6rem}
  .pg-network-map>div{padding:.8rem}
  #pgResetAccess{margin:.7rem 0 0}
  .pg-next .btn-amber{width:100%;white-space:normal;text-align:center;justify-content:center}
}

/* ---------- Start-here learning routes ---------- */
.sg-layout{display:grid;grid-template-columns:minmax(290px,.8fr) minmax(0,1.2fr);gap:1.5rem;align-items:start}
.sg-choices,.sg-result{min-width:0;padding:clamp(1.2rem,2.7vw,2rem);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.sg-choices h2,.sg-result-head h2{font-family:var(--font-display);font-size:1.5rem;line-height:1.35;letter-spacing:-.02em;margin:0 0 .8rem}
.sg-choices fieldset{border:0;padding:0;margin:1.6rem 0;min-width:0}
.sg-choices legend{font-size:.95rem;line-height:1.5;font-weight:600;padding:0;margin-bottom:.8rem}
.sg-choices legend>span{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--surface2);color:var(--teal-ink);font:500 .75rem var(--font-mono);margin-right:.4rem}
.sg-option{display:flex;gap:.7rem;align-items:flex-start;padding:1rem;margin:.6rem 0;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);cursor:pointer;min-height:48px}
.sg-option:has(input:checked){border-color:var(--teal);background:var(--surface2)}
.sg-option input{flex:none;width:17px;height:17px;margin-top:.2rem;accent-color:var(--teal)}
.sg-option>span{min-width:0}
.sg-option strong{display:block;font-size:.9rem;line-height:1.6}
.sg-option>span>span{display:block;font-size:.8rem;color:var(--muted);line-height:1.8;margin-top:.25rem}
.sg-form-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.sg-form-actions button{min-height:48px}
.sg-result{scroll-margin-top:calc(var(--nav-height,64px) + 1rem)}
.sg-result-head h2{margin:.5rem 0}
.sg-context{color:var(--teal-ink);font-size:.85rem;margin:0 0 1rem}
.sg-result-head>p:not(.sg-context){font-size:.93rem;line-height:1.8;color:var(--muted);margin:0 0 1.5rem}
.sg-progress-label{display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin-bottom:.6rem}
.sg-progress-label strong{color:var(--text);font-weight:500}
.sg-next{border:1px solid var(--border-strong);border-radius:var(--r);padding:1.3rem;margin:1.6rem 0;background:linear-gradient(130deg,rgba(63,182,168,.1),transparent),var(--bg)}
.sg-next h3{font-family:var(--font-display);font-size:1.2rem;line-height:1.5;margin:.6rem 0 1rem;overflow-wrap:anywhere}
.sg-next .btn-amber{min-height:48px}
.sg-next p{font-size:.9rem;line-height:1.8;color:var(--muted)}
.sg-steps{list-style:none;padding:0;margin:1.5rem 0;display:grid;gap:1rem}
.sg-steps>li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.9rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
.sg-step-number{display:grid;place-items:center;width:2rem;height:2rem;border:1px solid var(--border-strong);border-radius:50%;font:500 .75rem var(--font-mono);color:var(--muted)}
.sg-steps .is-done .sg-step-number{border-color:var(--teal);color:var(--teal-ink)}
.sg-step-kind{font-size:.72rem;line-height:1.7;color:var(--teal-ink)}
.sg-steps h3{font-size:1rem;line-height:1.6;margin:.35rem 0 .4rem}
.sg-steps p{font-size:.86rem;line-height:1.8;color:var(--muted);margin:0 0 .3rem}
.sg-steps a{display:inline-flex;align-items:center;min-height:44px;color:var(--teal-ink);font-size:.86rem}
.sg-planner{padding:1.3rem;border:1px solid var(--border);border-radius:var(--r);background:var(--bg)}
.sg-planner h3{font-family:var(--font-display);font-size:1.1rem;margin:0 0 .8rem}
.sg-planner>p{font-size:.86rem;color:var(--muted);line-height:1.8}
.sg-planner button{min-height:48px;white-space:normal}
.sg-planner .pg-link{margin:0}
.sg-footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1.5rem}
.sg-case-back{margin-left:1.3rem}
/* A short bridge between reading and hands-on learning. */
.lp-shortcut{margin:.8rem 0 1.5rem}
.lp-shortcut button{white-space:normal;min-height:44px}
.lesson-practice{margin:2.5rem 0;padding:1.4rem;border:1px solid var(--border-strong);border-radius:var(--r-lg);background:var(--surface);scroll-margin-top:100px}
.lp-heading h2{font-family:var(--font-display);font-size:1.4rem;margin:.5rem 0}
.lp-heading>p,.lp-foot{font-size:.85rem;color:var(--muted);line-height:1.8}
.lp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:1rem;margin-top:1.3rem}
.lp-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:1.2rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--r)}
.lp-icon{display:block;color:var(--teal-ink);margin-bottom:.8rem}
.lp-icon svg{width:25px;height:25px}
.lp-card h3{font-size:1.05rem;line-height:1.5;margin:.6rem 0}
.lp-card>p,.lp-card details{font-size:.85rem;line-height:1.8;color:var(--muted);margin:0 0 1rem}
.lp-card details{width:100%;border-top:1px solid var(--border);padding-top:.5rem}
.lp-card summary{cursor:pointer;color:var(--text);min-height:44px;display:list-item;align-content:center;list-style-position:inside}
.lp-card details p{margin:.5rem 0;line-height:1.8}
.lp-status{font-size:.77rem;line-height:1.7;color:var(--teal-ink);margin-top:auto;padding-bottom:.8rem}
.lp-card .btn-ghost{min-height:44px;white-space:normal}
.lp-foot{margin:1.2rem 0 0}
.practice-return{margin:1.4rem 0;padding:1.2rem;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface)}
.practice-return>a{display:block;width:fit-content;min-height:44px;align-content:center;color:var(--teal-ink);line-height:1.7;font-weight:600}
.practice-return p{font-size:.85rem;line-height:1.8;color:var(--muted);margin:.4rem 0 0}
@media(max-width:450px){.lesson-practice{padding:1rem}.lp-card{padding:1rem}}
@media print{.lesson-practice,.lp-shortcut,.practice-return{display:none!important}}
@media(max-width:850px){.sg-layout{grid-template-columns:1fr}}
@media(max-width:450px){
  .sg-form-actions{flex-direction:column}
  .sg-next .btn-amber{white-space:normal;text-align:center;justify-content:center;width:100%}
  .sg-case-back{margin-left:0}
  .sg-steps>li{gap:.6rem;grid-template-columns:1.7rem minmax(0,1fr)}
  .sg-step-number{width:1.7rem;height:1.7rem}
}