:root{
  /* Light appearance: Apple style system colours (backgrounds, labels, separators, tints). */
  color-scheme:light;
  --bg:#f5f5f7;            /* grouped background */
  --card:#ffffff;          /* elevated surface */
  --card-2:#fbfbfd;
  --fill:#f2f2f7;          /* tertiary fill inside cards */
  --surface:#f5f5f7;
  --header-bg:rgba(245,245,247,.78);
  --text:#1d1d1f;          /* label */
  --muted:#6e6e73;         /* secondary label */
  --faint:#86868b;         /* tertiary label */
  --border:#d2d2d7;        /* separator */
  --border-light:#e5e5ea;
  --accent:#0066cc;        /* link and tint (AA contrast on white) */
  --accent-hover:#0051a3;
  --accent-soft:#e8f1fd;
  --accent-softer:#f4f8fe;
  --accent-line:#9cc3f0;
  --on-accent:#ffffff;
  --accent-fill:#0071e3; --accent-fill-hover:#0077ed; --accent-ring:rgba(0,113,227,.16);
  --ok-fill:#1d7d3a; --miss-fill:#c4281c; --glass:rgba(255,255,255,.7);
  --focus:rgba(0,113,227,.55);
  --ok:#1d7d3a; --ok-soft:#e8f6ec; --ok-line:#8fd3a6;
  --warn:#8a5300; --warn-soft:#fff6e0; --warn-soft-2:#ffe9a8; --warn-line:#e5a000; --warn-strong:#a14b00;
  --miss:#c4281c; --miss-soft:#fdecec; --miss-line:#f2a07a;
  --purple-soft:#f4efff; --purple:#6b3fd4;
  --viz-line:#8ea4c4; --viz-thin:#c9d6ea; --viz-fill:#f4f7fc; --viz-fill-2:#dbe8fb;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-hover:0 6px 18px rgba(0,0,0,.08);
  --radius:12px;
  --radius-lg:18px;
  --header-h:64px;
  --sticky-top:var(--header-h); /* height of the sticky site header, for other sticky bars */
  --seg-bg:#e8e8ed; --seg-active:#ffffff; --nav-current:rgba(0,0,0,.07);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  /* Type scale after Apple's text styles (rem, so browser text size settings still apply). */
  --fs-largetitle:2.125rem; --fs-title1:1.75rem; --fs-title2:1.375rem; --fs-title3:1.25rem;
  --fs-headline:1.0625rem; --fs-body:1.0625rem; --fs-callout:1rem; --fs-subhead:.9375rem; --fs-footnote:.8125rem; --fs-caption:.75rem;
}
/* Dark appearance: follows the device unless the person picked Light or Dark. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#000000; --card:#1c1c1e; --card-2:#232325; --fill:#2c2c2e; --surface:#1c1c1e; --header-bg:rgba(22,22,23,.78);
    --text:#f5f5f7; --muted:#a1a1a6; --faint:#8e8e93; --border:#3a3a3c; --border-light:#2e2e30;
    --accent:#2997ff; --accent-hover:#5cb0ff; --accent-soft:rgba(41,151,255,.18); --accent-softer:rgba(41,151,255,.09); --accent-line:#2f6db5; --focus:rgba(41,151,255,.65); --accent-fill:#0071e3; --accent-fill-hover:#0077ed; --accent-ring:rgba(41,151,255,.28); --ok-fill:#248a3d; --miss-fill:#d70015; --glass:rgba(255,255,255,.06); --seg-bg:#1c1c1e; --seg-active:#636366; --nav-current:rgba(255,255,255,.12);
    --ok:#30d158; --ok-soft:rgba(48,209,88,.14); --ok-line:#2a8a48;
    --warn:#ffb340; --warn-soft:rgba(255,159,10,.14); --warn-soft-2:rgba(255,159,10,.26); --warn-line:#ff9f0a; --warn-strong:#ffb340;
    --miss:#ff6961; --miss-soft:rgba(255,69,58,.16); --miss-line:#a33d33;
    --purple-soft:rgba(191,90,242,.16); --purple:#da8fff;
    --viz-line:#7189b0; --viz-thin:#3b4659; --viz-fill:#1b2230; --viz-fill-2:#1f3350;
    --shadow:0 1px 2px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);
    --shadow-hover:0 10px 28px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#000000; --card:#1c1c1e; --card-2:#232325; --fill:#2c2c2e; --surface:#1c1c1e; --header-bg:rgba(22,22,23,.78);
  --text:#f5f5f7; --muted:#a1a1a6; --faint:#8e8e93; --border:#3a3a3c; --border-light:#2e2e30;
  --accent:#2997ff; --accent-hover:#5cb0ff; --accent-soft:rgba(41,151,255,.18); --accent-softer:rgba(41,151,255,.09); --accent-line:#2f6db5; --focus:rgba(41,151,255,.65); --accent-fill:#0071e3; --accent-fill-hover:#0077ed; --accent-ring:rgba(41,151,255,.28); --ok-fill:#248a3d; --miss-fill:#d70015; --glass:rgba(255,255,255,.06); --seg-bg:#1c1c1e; --seg-active:#636366; --nav-current:rgba(255,255,255,.12);
  --ok:#30d158; --ok-soft:rgba(48,209,88,.14); --ok-line:#2a8a48;
  --warn:#ffb340; --warn-soft:rgba(255,159,10,.14); --warn-soft-2:rgba(255,159,10,.26); --warn-line:#ff9f0a; --warn-strong:#ffb340;
  --miss:#ff6961; --miss-soft:rgba(255,69,58,.16); --miss-line:#a33d33;
  --purple-soft:rgba(191,90,242,.16); --purple:#da8fff;
  --viz-line:#7189b0; --viz-thin:#3b4659; --viz-fill:#1b2230; --viz-fill-2:#1f3350;
  --shadow:0 1px 2px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04);
  --shadow-hover:0 10px 28px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--sticky-top) + 8px)}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--fs-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.47;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
h2,h3,h4{letter-spacing:-.2px}
[hidden]{display:none !important}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.tiny{font-size:.75rem}
.ok-text{color:var(--ok)}
kbd{
  font-family:inherit;font-size:.75rem;
  border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;
  padding:0 5px;background:var(--card);color:var(--muted);
}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
h2:focus{outline:none}

.container{max-width:880px;margin:0 auto;padding:40px 20px}

/* ---------- hero ---------- */
.hero{text-align:center;margin-bottom:28px}
.badge{
  display:inline-block;padding:6px 14px;border-radius:999px;
  background:var(--accent-soft);color:var(--accent);
  font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;margin-bottom:14px;
}
.hero h1{font-size:2.75rem;font-weight:700;letter-spacing:-.6px;margin:0 0 12px}
.subtitle{font-size:1.05rem;color:var(--muted);max-width:620px;margin:0 auto;line-height:1.6}
/* Compact hero once the questionnaire has started, so questions stay above the fold */
body:not([data-view="intro"]) .subtitle,
body:not([data-view="intro"]) .badge{display:none}
body:not([data-view="intro"]) .hero{margin-bottom:20px}
body:not([data-view="intro"]) .hero h1{font-size:1.75rem;margin-bottom:0}
.progress-wrap{max-width:560px;margin:24px auto 0}
.progress-bar{height:6px;background:var(--border-light);border-radius:3px;overflow:hidden}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--accent),#2b9bff);transition:width .35s ease}
.step-counter{color:var(--muted);font-size:13px;font-weight:500;margin:10px 0 0}

.progress-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:10px}
.progress-meta .step-counter{margin:0}
.restart-link{font-size:13px;color:var(--muted);white-space:nowrap}
.restart-link:hover{color:var(--accent)}

/* confirmation dialog */
.dialog{
  border:none;border-radius:var(--radius-lg);padding:0;max-width:420px;width:calc(100% - 32px);
  box-shadow:0 20px 60px rgba(0,0,0,.25);color:var(--text);
}
.dialog::backdrop{background:rgba(0,0,0,.35)}
.dialog form{padding:24px}
.dialog h2{font-size:1.2rem;margin:0 0 8px}
.dialog p{color:var(--muted);margin:0 0 14px;font-size:.95rem}
.dialog-check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;margin-bottom:18px;cursor:pointer}
.dialog-check input{margin-top:3px;width:16px;height:16px}
.dialog-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}

/* ---------- card & buttons ---------- */
.card{
  background:var(--card);border:1px solid var(--border-light);border-radius:var(--radius-lg);
  padding:32px;box-shadow:var(--shadow);margin-bottom:24px;
  animation:fadeIn .25s ease;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.button{
  padding:13px 22px;border-radius:12px;border:none;cursor:pointer;
  font:inherit;font-weight:600;font-size:15px;transition:background .15s ease,transform .1s ease;
}
.button:active{transform:scale(.98)}
.btn-primary{background:var(--accent-fill);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-fill-hover)}
.btn-primary:disabled{background:var(--faint);cursor:not-allowed;transform:none}
.btn-secondary{background:var(--fill);color:var(--text)}
.btn-secondary:hover{background:var(--border-light)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--text);background:var(--fill)}
.link-btn{
  background:none;border:none;padding:0;cursor:pointer;
  font:inherit;color:var(--accent);font-weight:500;text-align:left;
}
.link-btn:hover{text-decoration:underline}

.nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px}
.nav-start{justify-content:flex-start}
.nav .btn-primary{min-width:140px}

/* ---------- intro ---------- */
.intro h2{font-size:1.6rem;margin:0 0 10px}
.lead{color:var(--muted);font-size:1.02rem;margin:0 0 18px}
.intro-points{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:10px}
.intro-points li{
  padding:12px 14px 12px 40px;background:var(--surface);border-radius:var(--radius);position:relative;font-size:.95rem;
}
.intro-points li::before{
  content:"✓";position:absolute;left:14px;top:12px;color:var(--ok);font-weight:700;
}
.fine{color:var(--faint);font-size:.85rem;margin:0}

/* ---------- questions ---------- */
.question{font-size:1.35rem;font-weight:650;margin:0 0 6px;line-height:1.35}
.clarify{color:var(--muted);font-size:.95rem;margin:0 0 18px}
.multi-hint{
  display:inline-block;font-size:.75rem;font-weight:600;color:var(--accent);
  background:var(--accent-soft);padding:3px 10px;border-radius:999px;margin:-8px 0 14px;
}
.options{display:grid;gap:10px}
.options-grid{grid-template-columns:1fr 1fr}
.option{
  display:flex;align-items:center;gap:14px;width:100%;
  padding:14px 16px;border-radius:var(--radius);border:1.5px solid var(--border-light);
  background:var(--card);cursor:pointer;text-align:left;font:inherit;color:inherit;
  transition:border-color .12s ease,background .12s ease,box-shadow .12s ease;
}
.option:hover{border-color:var(--accent-line);background:var(--accent-softer)}
.option.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-ring)}
.option .dot,.option .box{
  width:20px;height:20px;flex-shrink:0;border:2px solid var(--border);background:var(--card);
  transition:all .12s ease;position:relative;
}
.option .dot{border-radius:50%}
.option .box{border-radius:6px}
.option.selected .dot{border-color:var(--accent);box-shadow:inset 0 0 0 4px var(--card);background:var(--accent)}
.option.selected .box{border-color:var(--accent);background:var(--accent)}
.option.selected .box::after{
  content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--card);border-width:0 2px 2px 0;transform:rotate(45deg);
}
.opt-body{display:flex;flex-direction:column;flex:1;min-width:0}
.opt-text{font-size:.95rem;font-weight:600}
.opt-desc{color:var(--muted);font-size:.82rem;margin-top:2px}
.opt-key{margin-left:auto;opacity:.7}
.kbd-hint{color:var(--faint);font-size:.78rem;text-align:center;margin:16px 0 0}

.callout{
  border-radius:var(--radius);padding:12px 16px;margin:0 0 18px;font-size:.9rem;
  background:var(--accent-soft);border-left:4px solid var(--accent);
}
.callout ul{margin:6px 0 0;padding-left:18px}
.callout-info{background:var(--accent-softer);border-color:#5b6bd6}
.callout-warn{background:var(--warn-soft);border-color:var(--warn-line)}
.callout-ok{background:var(--ok-soft);border-color:var(--ok)}

/* ---------- review ---------- */
.review-list{list-style:none;margin:0;padding:0}
.review-list li{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--border-light);
}
.review-list li > div{display:flex;flex-direction:column;min-width:0}
.review-q{color:var(--muted);font-size:.82rem}
.review-a{font-weight:600;font-size:.95rem}

/* ---------- results ---------- */
.view-result{padding:0;overflow:clip}
.view-result > section{padding:28px 32px;border-bottom:1px solid var(--border-light)}
.view-result h3{font-size:1.1rem;margin:0 0 6px}
.view-result h4{font-size:.95rem;margin:20px 0 8px}

.result-hero{background:linear-gradient(160deg,var(--accent-softer) 0%,var(--purple-soft) 100%)}
.eyebrow{
  font-size:.75rem;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);margin:0 0 6px;
}
.result-hero h2{font-size:2rem;margin:0}
.tagline{color:var(--muted);font-size:1.05rem;margin:4px 0 20px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.stat{background:var(--card);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.stat-num{font-size:1.5rem;font-weight:700;letter-spacing:-.3px}
.stat-label{color:var(--muted);font-size:.8rem}
.reasons{margin:6px 0 0;padding:0;list-style:none;display:grid;gap:6px}
.reasons li{padding-left:24px;position:relative;font-size:.95rem}
.reasons li::before{content:"✓";position:absolute;left:2px;color:var(--ok);font-weight:700}
.motivation{
  margin:18px 0 0;padding:12px 16px;background:var(--glass);border-radius:var(--radius);font-size:.92rem;
}

.meter{display:inline-block;height:8px;border-radius:4px;background:var(--border-light);overflow:hidden;flex:1;min-width:60px;vertical-align:middle}
.meter > span{display:block;height:100%;background:var(--accent);border-radius:4px;transition:width .3s ease}
.meter.have > span{background:var(--warn-line)}
.meter.progress > span{background:linear-gradient(90deg,var(--accent),var(--ok))}
.pct{font-size:.8rem;font-weight:600;color:var(--muted);min-width:56px;text-align:right}

.match-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.match{
  display:flex;flex-direction:column;gap:4px;text-align:left;font:inherit;color:inherit;cursor:pointer;
  background:var(--card);border:1.5px solid var(--border-light);border-radius:var(--radius);padding:14px;
  transition:border-color .12s ease,box-shadow .12s ease;
}
.match:hover{border-color:var(--accent-line);box-shadow:var(--shadow-hover)}
.match.active{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.match-rank{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--accent)}
.match-title{font-weight:700;font-size:1rem}
.match-tag{color:var(--muted);font-size:.8rem;flex:1}
.match-meter{display:flex;align-items:center;gap:8px;margin-top:6px}
.match-meta{font-size:.75rem;color:var(--faint)}

.all-roles{margin-top:14px}
.all-roles summary{cursor:pointer;color:var(--accent);font-weight:500;font-size:.9rem}
.all-roles ul{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px}
.all-roles li{display:grid;grid-template-columns:minmax(0,240px) 1fr auto;align-items:center;gap:10px;font-size:.9rem}

.profile-cols,.detail-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.9rem}
.ticks li{padding-left:22px;position:relative}
.ticks li::before{content:"★";position:absolute;left:0;color:var(--warn-line)}
.quiz-results{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.9rem}
.quiz-results li{padding:8px 12px;border-radius:10px;background:var(--surface);border-left:3px solid var(--border)}
.quiz-results li.ok{border-color:var(--ok)}
.quiz-results li.miss{border-color:var(--miss)}
.profile .callout{margin:18px 0 0}

.detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.detail-head h2{margin:0;font-size:1.5rem}
.fit-pill{background:var(--accent-soft);color:var(--accent);font-weight:600;font-size:.8rem;padding:5px 12px;border-radius:999px}
.why{color:var(--muted);margin:10px 0 16px}
.role-detail .callout{margin:12px 0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--surface);border:1px solid var(--border-light);padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:500}
.chip-key{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent)}

.gaps{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.gaps li{background:var(--surface);border-radius:var(--radius);padding:12px 14px}
.gaps p{margin:4px 0 0}
.gap-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.gap-meter{display:flex;align-items:center;gap:8px;flex:1;min-width:200px}

.roadmap{list-style:none;margin:0 0 12px;padding:0;position:relative}
.roadmap::before{content:"";position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:var(--border-light)}
.step{display:flex;gap:14px;margin-bottom:12px;position:relative}
.step-check{position:relative;flex-shrink:0;cursor:pointer;width:36px;height:36px}
.step-check input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.step-num{
  display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  background:var(--card);border:2px solid var(--accent);color:var(--accent);font-weight:700;font-size:.9rem;
  transition:all .15s ease;
}
.step-check:hover .step-num{background:var(--accent-soft)}
.step-check input:focus-visible + .step-num{outline:3px solid var(--focus);outline-offset:2px}
.step.done .step-num{background:var(--ok-fill);border-color:var(--ok-fill);color:transparent}
.step.done .step-num::after{content:"✓";color:var(--on-accent);position:absolute;font-size:1rem}
.step.fast:not(.done) .step-num{border-style:dashed;border-color:var(--faint);color:var(--muted)}
.step details{
  flex:1;min-width:0;background:var(--card);border:1px solid var(--border-light);border-radius:var(--radius);
  transition:box-shadow .15s ease;
}
.step details[open]{box-shadow:var(--shadow)}
.step.done details{opacity:.7}
.step summary{
  list-style:none;cursor:pointer;padding:8px 14px;min-height:36px;
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"title badges plus";
  align-items:center;column-gap:10px;row-gap:4px;
}
.step summary::-webkit-details-marker{display:none}
.step summary::after{grid-area:plus;content:"+";color:var(--faint);font-size:1.2rem;transition:transform .15s ease}
.step details[open] summary::after{transform:rotate(45deg)}
.step-title{grid-area:title;font-weight:650}
.step.done .step-title{text-decoration:line-through;text-decoration-color:var(--faint)}
.step-badges{grid-area:badges;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.badge-time,.badge-fast{font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.badge-time{background:var(--accent-soft);color:var(--accent)}
.badge-fast{background:var(--ok-soft);color:var(--ok)}
.step-body{padding:0 14px 14px;font-size:.92rem}
.step-body p{margin:6px 0}
.step-why{background:var(--surface);border-left:3px solid var(--accent);padding:8px 12px;border-radius:6px}
.step-lists{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.step-lists ul{margin:4px 0 0;padding-left:16px;font-size:.82rem;color:var(--muted)}
.step-lists .must ul{color:var(--text);font-weight:500}
.step-label{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--faint)}
.projects{margin-top:12px;display:grid;gap:8px}
.project{background:var(--surface);border-radius:10px;padding:10px 12px;font-size:.88rem}
.project a{display:inline-block;margin-top:4px;font-weight:600;text-decoration:none}

/* sticky in-page nav for the result sections */
.result-nav{
  position:sticky;top:var(--sticky-top);z-index:5;display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  padding:8px 20px;background:var(--header-bg);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border-light);
}
.result-nav::-webkit-scrollbar{display:none}
.result-nav a{
  white-space:nowrap;text-decoration:none;color:var(--muted);font-size:.85rem;font-weight:600;
  padding:6px 12px;border-radius:999px;
}
.result-nav a:hover{background:var(--surface);color:var(--text)}
.nav-restart{
  margin-left:auto;white-space:nowrap;border:1px solid var(--border-light);background:var(--card);cursor:pointer;
  font:inherit;font-size:.82rem;font-weight:600;color:var(--muted);padding:5px 12px;border-radius:999px;
}
.nav-restart:hover{color:var(--accent);border-color:var(--accent-line)}
.result-nav .nav-learn{color:var(--accent)}
.step-learn{margin:8px 0 !important}
.step-learn a{font-weight:600;text-decoration:none}
.step-learn a:hover{text-decoration:underline}
/* keep "Start over" pinned and visible while the section links scroll underneath on small screens */
.nav-restart{position:sticky;right:0;flex-shrink:0;box-shadow:-14px 0 12px -4px var(--bg)}
.view-result > section{scroll-margin-top:52px}
.hero-cta{display:inline-block;margin-top:18px;text-decoration:none}
.hero-cta:hover{color:var(--on-accent)}
.market{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0 0 8px;font-size:.88rem}
.market dt{font-weight:600}
.market dd{margin:0}
.guide-link{margin:16px 0 0}

/* roadmap planner */
.roadmap-section{background:linear-gradient(180deg,var(--accent-softer),var(--card))}
.rm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.rm-head h3{font-size:1.3rem;margin:0 0 2px}
.rm-head p{margin:0}
.pace{display:flex;align-items:center;gap:4px;background:var(--surface);padding:4px;border-radius:999px;flex-wrap:wrap}
.pace-label{font-size:.75rem;font-weight:600;color:var(--muted);padding:0 8px}
.pace-btn{
  border:none;background:transparent;font:inherit;font-size:.8rem;font-weight:600;color:var(--muted);
  padding:6px 10px;border-radius:999px;cursor:pointer;
}
.pace-btn:hover{color:var(--text)}
.pace-btn.active{background:var(--card);color:var(--accent);box-shadow:var(--shadow)}
.rm-timeline{margin:16px 0 18px}
.rm-bar{display:flex;gap:3px;height:34px}
.seg{
  min-width:22px;border:none;border-radius:8px;cursor:pointer;font:inherit;font-size:.75rem;font-weight:700;
  background:var(--viz-fill-2);color:var(--accent);transition:transform .12s ease,filter .12s ease;
}
.seg:hover{filter:brightness(.95);transform:translateY(-1px)}
.seg.fast{background:var(--ok-soft);color:var(--ok)}
.seg.next{background:var(--accent-fill);color:var(--on-accent);box-shadow:0 2px 8px var(--accent-ring)}
.seg.done{background:var(--ok-fill);color:var(--on-accent)}
.rm-axis{position:relative;display:flex;justify-content:space-between;font-size:.72rem;color:var(--faint);margin-top:6px;height:16px}
.rm-axis .tick{position:absolute;transform:translateX(-50%)}
.rm-legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px}
.lg{display:inline-block;width:10px;height:10px;border-radius:3px;margin-left:8px}
.lg:first-child{margin-left:0}
.lg-todo{background:var(--viz-fill-2)}.lg-next{background:var(--accent)}.lg-fast{background:var(--ok-soft);border:1px solid var(--ok)}.lg-done{background:var(--ok)}
.up-next{
  border:1.5px solid var(--accent);border-radius:var(--radius);padding:16px 18px;margin-bottom:18px;
  background:var(--card);box-shadow:0 4px 16px rgba(0,102,214,.08);
}
.up-next h4{margin:2px 0 6px;font-size:1.1rem}
.up-next p{margin:4px 0}
.up-next.complete{border-color:var(--ok);background:var(--ok-soft);box-shadow:none}
.up-next.complete .eyebrow{color:var(--ok)}
.up-next-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.up-next-actions .button{padding:10px 16px;font-size:.88rem}
.up-next-actions a.button{text-decoration:none;display:inline-flex;align-items:center}
.rm-toolbar{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:10px 14px;background:var(--surface);border-radius:10px;flex-wrap:wrap}
.rm-toolbar .meter{min-width:100px}
.rm-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.rm-actions .muted{flex:1;min-width:220px}
.badge-next{font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--accent-fill);color:var(--on-accent)}
.step.next .step-num{background:var(--accent-fill);color:var(--on-accent)}
.step.next details{border-color:var(--accent-line)}
.step-when{font-size:.8rem;font-weight:600;color:var(--accent);margin:0 0 6px}
.step.flash details{animation:flash 1.2s ease}
@keyframes flash{0%,40%{box-shadow:0 0 0 4px rgba(0,102,214,.3)}100%{box-shadow:none}}

.stay-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.stay-card{background:var(--surface);border-radius:var(--radius);padding:14px 16px}
.stay-card h4{margin:0 0 6px}
.stay-card ul{margin:0;padding-left:16px;font-size:.9rem;display:grid;gap:4px}

.actions{display:flex;flex-wrap:wrap;gap:10px;padding:20px 32px;background:var(--surface)}

/* ---------- FAQ & footer ---------- */
.faq-section h2{font-size:1.25rem;margin:40px 0 14px}
.faq-item{background:var(--card);border:1px solid var(--border-light);border-radius:var(--radius);margin-bottom:10px}
.faq-item summary{cursor:pointer;padding:14px 16px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--faint);font-size:1.2rem;line-height:1}
.faq-item[open] summary::after{content:"−"}
.faq-item p{margin:0;padding:0 16px 14px;color:var(--muted);font-size:.93rem}
.footer{margin:40px 0 20px;text-align:center;color:var(--faint);font-size:.85rem}

/* ---------- static content: quick answer, paths table, role guide pages ---------- */
.answer-box{
  background:var(--card);border:1px solid var(--border-light);border-left:4px solid var(--accent);
  border-radius:var(--radius);padding:18px 20px;margin:28px 0;
}
.answer-box h2,.article .answer-box h2{font-size:1.15rem;margin:0 0 8px}
.answer-box p{margin:0;font-size:.95rem;line-height:1.65}
.paths h2{font-size:1.25rem;margin:40px 0 6px}
.paths > p{margin:0 0 14px;font-size:.92rem}
.table-wrap{overflow-x:auto;border:1px solid var(--border-light);border-radius:var(--radius);background:var(--card)}
.paths-table,.facts{width:100%;border-collapse:collapse;font-size:.88rem}
.paths-table th,.paths-table td,.facts th,.facts td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-light)}
.paths-table thead th{background:var(--surface);font-size:.78rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);white-space:nowrap}
.paths-table tbody th a{font-weight:650;text-decoration:none}
.paths-table tr:last-child th,.paths-table tr:last-child td{border-bottom:none}
.paths-table td:nth-child(5){white-space:nowrap}

.site-header{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  max-width:1040px;margin:0 auto;padding:16px 20px;
}
.brand{font-weight:700;color:var(--text);text-decoration:none;font-size:1.05rem}
.brand::before{content:"◆ ";color:var(--accent)}
.btn-small{padding:9px 16px;font-size:.88rem;text-decoration:none;display:inline-block}
.btn-primary:is(a):hover{color:var(--on-accent)}
.article{padding-top:8px;max-width:760px}
.crumbs{font-size:.82rem;color:var(--faint);margin-bottom:18px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.article h1{font-size:2.2rem;line-height:1.15;letter-spacing:-.5px;margin:4px 0 8px}
.article h2{font-size:1.3rem;margin:36px 0 10px}
.article h3{font-size:1.02rem;margin:18px 0 6px}
.article section > p{line-height:1.65}
.facts{background:var(--card);border:1px solid var(--border-light);border-radius:var(--radius);overflow:hidden}
.facts th{width:34%;color:var(--muted);font-weight:600}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:none}
.chips.plain{list-style:none;padding:0;margin:0}
.static-roadmap{list-style:none;padding:0;margin:16px 0 0;counter-reset:none}
.static-roadmap li{
  background:var(--card);border:1px solid var(--border-light);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:12px;scroll-margin-top:16px;
}
.static-roadmap h3{margin:0 0 8px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
.static-roadmap p{margin:6px 0;font-size:.93rem}
.cta-box{
  margin-top:36px;padding:24px;border-radius:var(--radius-lg);text-align:center;
  background:linear-gradient(160deg,var(--accent-softer) 0%,var(--purple-soft) 100%);
}
.article .cta-box h2{margin-top:0}
.cta-box p{max-width:520px;margin:0 auto 16px}
.cta-box .button{text-decoration:none;display:inline-block}
.related{padding-left:18px;display:grid;gap:6px}
.footer p{margin:6px 0}
.footer a{color:var(--faint)}

/* ---------- site nav, footer links, homepage sections ---------- */
.site-nav{display:flex;gap:4px;flex:1;justify-content:center;flex-wrap:wrap}
.site-nav a{color:var(--muted);text-decoration:none;font-size:.86rem;font-weight:600;padding:6px 8px;border-radius:999px;white-space:nowrap}
.site-nav a:hover{background:var(--card);color:var(--text)}
.footer-links{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:left;
  max-width:880px;margin:0 auto 24px;padding:24px 0;border-top:1px solid var(--border-light);
}
.footer-links h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 8px}
.footer-links ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.footer-links a{color:var(--muted);text-decoration:none;font-size:.85rem}
.footer-links a:hover{color:var(--accent);text-decoration:underline}
.how h2,.backgrounds h2{font-size:1.25rem;margin:40px 0 8px}
.how-steps{list-style:none;counter-reset:how;padding:0;margin:12px 0 8px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.how-steps li{
  counter-increment:how;background:var(--card);border:1px solid var(--border-light);border-radius:var(--radius);
  padding:16px;display:flex;flex-direction:column;gap:6px;font-size:.9rem;
}
.how-steps li::before{
  content:counter(how);width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  font-weight:700;display:flex;align-items:center;justify-content:center;
}
.how-steps span{color:var(--muted)}
.backgrounds > p{margin:0 0 12px;font-size:.92rem}
.bg-grid{list-style:none;padding:0;margin:0 0 12px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bg-grid a{
  display:flex;flex-direction:column;gap:4px;height:100%;padding:14px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--border-light);text-decoration:none;color:var(--text);
  transition:border-color .12s ease,box-shadow .12s ease;
}
.bg-grid a:hover{border-color:var(--accent-line);box-shadow:var(--shadow-hover)}
.bg-name{font-weight:650;font-size:.92rem}
.bg-role{font-size:.8rem;color:var(--accent)}
.rec-list{padding-left:20px}
.rec-list > li{margin-bottom:14px}
.rec-list h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 4px}
.rec-list p{margin:0 0 6px}
.toc{background:var(--card);border:1px solid var(--border-light);border-radius:var(--radius);padding:14px 18px;margin:24px 0;font-size:.92rem}
.toc ol{margin:6px 0 0;padding-left:20px}
.signals > li{margin-bottom:14px}
.signals ul{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:4px;font-size:.88rem}
.sig{display:inline-block;min-width:30px;text-align:center;font-weight:700;font-size:.75rem;border-radius:6px;padding:1px 6px;margin-right:6px}
.sig-up{background:var(--ok-soft);color:var(--ok)}
.sig-down{background:var(--miss-soft);color:var(--miss)}
.article ul,.article ol{line-height:1.6}

/* ---------- Learn section ---------- */
.learn-container{max-width:1080px}
.learn-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:8px 0 20px}
.learn-hero h1{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--accent);margin:8px 0 0}
.learn-hero h1 span{color:var(--muted);font-weight:600}
.learn-bar h2{font-size:2rem;letter-spacing:-.4px;margin:2px 0 6px}
.learn-bar p{margin:0}
.learn-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.course-stats{display:flex;align-items:center;gap:10px;max-width:360px}
.lang-toggle{display:inline-flex;background:var(--card);border:1px solid var(--border-light);border-radius:999px;padding:3px}
.lang-toggle button{
  border:none;background:transparent;font:inherit;font-size:.85rem;font-weight:600;color:var(--muted);
  padding:6px 14px;border-radius:999px;cursor:pointer;
}
.lang-toggle button.active{background:var(--accent-fill);color:var(--on-accent)}
.course-grid{list-style:none;padding:0;margin:0 0 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.course-card{
  width:100%;height:100%;display:flex;flex-direction:column;gap:6px;text-align:left;cursor:pointer;
  font:inherit;color:inherit;background:var(--card);border:1.5px solid var(--border-light);border-radius:var(--radius);padding:16px;
  transition:border-color .12s ease,box-shadow .12s ease;
}
.course-card:hover{border-color:var(--accent-line);box-shadow:var(--shadow-hover)}
.course-card.recommended{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.course-card .badge-next{align-self:flex-start}
.course-title{font-weight:700;font-size:1.02rem}
.course-tag{color:var(--muted);font-size:.85rem;flex:1}
.course-meta{font-size:.8rem;color:var(--faint)}
.course-progress{display:flex;align-items:center;gap:8px}
.course-cta{color:var(--accent);font-weight:600;font-size:.88rem}
.outline-toggle{display:none}
.learn-grid{display:grid;grid-template-columns:290px minmax(0,1fr);gap:24px;align-items:start}
.outline{
  position:sticky;top:calc(var(--sticky-top) + 12px);max-height:calc(100vh - var(--sticky-top) - 24px);overflow-y:auto;
  background:var(--card);border:1px solid var(--border-light);border-radius:var(--radius);padding:12px;
}
.ol-step{margin-bottom:10px}
.ol-step-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.78rem;font-weight:700;color:var(--muted);margin:6px 4px}
.ol-num{
  width:22px;height:22px;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;flex-shrink:0;
}
.ol-step-head .badge-fast{font-size:.65rem;padding:2px 7px}
.ol-step ol{list-style:none;padding:0;margin:0}
.ol-lesson{
  display:flex;gap:8px;align-items:flex-start;padding:7px 8px;border-radius:8px;
  color:var(--text);text-decoration:none;font-size:.86rem;line-height:1.35;
}
.ol-lesson:hover{background:var(--surface)}
.ol-lesson.current{background:var(--accent-soft);color:var(--accent);font-weight:600}
.ol-check{
  width:16px;height:16px;flex-shrink:0;margin-top:1px;border-radius:50%;border:1.5px solid var(--border);
  font-size:.65rem;display:inline-flex;align-items:center;justify-content:center;color:var(--on-accent);
}
.ol-lesson.done .ol-check{background:var(--ok-fill);border-color:var(--ok-fill)}
.lesson{
  background:var(--card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:28px 32px;
  box-shadow:var(--shadow);scroll-margin-top:12px;animation:fadeIn .2s ease;
}
.lesson-meta{font-size:.8rem;color:var(--muted);margin:0 0 6px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.lesson-title{font-size:1.6rem;line-height:1.25;letter-spacing:-.3px;margin:0 0 18px;display:flex;gap:10px;align-items:flex-start}
.lesson-icon{font-size:1.6rem;line-height:1.2}
.ls{border-radius:var(--radius);padding:14px 16px;margin-bottom:12px;background:var(--surface)}
.ls h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 6px}
.ls p{margin:0;line-height:1.65}
.ls-analogy{background:var(--warn-soft);border-left:4px solid var(--warn-line)}
.ls-explain{background:var(--accent-softer);border-left:4px solid var(--accent)}
.ls-remember{background:var(--ok-soft);border-left:4px solid var(--ok)}
.ls-remember p{font-weight:600}
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0}
.terms div{background:var(--card);border:1px solid var(--border-light);border-radius:10px;padding:10px 12px}
.terms dt{font-weight:700;font-size:.9rem;margin-bottom:2px}
.terms dd{margin:0;font-size:.85rem;color:var(--muted);line-height:1.5}
.code-wrap{position:relative;margin:4px 0 8px}
.code-wrap pre{
  margin:0;background:#1d1f24;color:#e6e6e6;border-radius:10px;padding:34px 14px 14px;overflow-x:auto;
  font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.code-lang{position:absolute;top:8px;left:12px;font-size:.7rem;color:#9aa0a6;text-transform:uppercase;letter-spacing:.5px}
.copy-btn{
  position:absolute;top:6px;right:8px;border:1px solid #3a3d44;background:#2a2d33;color:#d0d0d0;
  font:inherit;font-size:.72rem;padding:3px 10px;border-radius:6px;cursor:pointer;
}
.copy-btn:hover{background:#353941}
.quiz-q{font-weight:600;margin-bottom:10px !important}
.quiz-opts{display:grid;gap:8px}
.quiz-opt{
  display:flex;align-items:center;gap:10px;text-align:left;width:100%;cursor:pointer;
  font:inherit;font-size:.92rem;color:var(--text);background:var(--card);border:1.5px solid var(--border-light);
  border-radius:10px;padding:10px 12px;transition:border-color .12s ease;
}
.quiz-opt:hover:not(:disabled){border-color:var(--accent-line)}
.quiz-opt:disabled{cursor:default}
.quiz-letter{
  width:24px;height:24px;flex-shrink:0;border-radius:50%;background:var(--surface);
  display:inline-flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--muted);
}
.quiz-opt.right{border-color:var(--ok);background:var(--ok-soft)}
.quiz-opt.right .quiz-letter{background:var(--ok-fill);color:var(--on-accent)}
.quiz-opt.wrong{border-color:var(--miss);background:var(--miss-soft)}
.quiz-opt.wrong .quiz-letter{background:var(--miss-fill);color:var(--on-accent)}
.quiz-opt.dim{opacity:.55}
.quiz-feedback{margin-top:10px;padding:10px 12px;border-radius:10px;font-size:.92rem;line-height:1.55}
.quiz-feedback.ok{background:var(--ok-soft)}
.quiz-feedback.miss{background:var(--miss-soft)}
.step-callout{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:6px}
.lesson-nav{display:flex;justify-content:space-between;gap:12px;margin-top:20px;flex-wrap:wrap}
.lesson-nav-center{justify-content:center}
.lesson-nav .button{text-decoration:none}
.course-complete{text-align:center;padding:20px 0}
.complete-emoji{font-size:3rem;margin:0}
.course-complete h2{margin:6px 0}
.course-complete p{max-width:480px;margin:0 auto}
.catalog{margin-top:48px}
.catalog h2{font-size:1.25rem;margin:0 0 6px}
.catalog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:14px}
.catalog-grid h3{font-size:.95rem;margin:0 0 6px}
.catalog-grid ol{margin:0;padding-left:18px;font-size:.85rem;display:grid;gap:3px}
.catalog-grid a{color:var(--muted);text-decoration:none}
.catalog-grid a:hover{color:var(--accent);text-decoration:underline}
/* static lesson pages */
.lesson-page .ls{margin-bottom:14px}
.article .ls h2{font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 6px}
.lesson-page .ls-quiz ol{margin:0;padding-left:22px;display:grid;gap:4px}
.lang-switch{display:inline-flex;gap:6px;align-items:center;font-size:.85rem;margin:0 0 14px}
.lang-switch a,.lang-switch span{padding:4px 12px;border-radius:999px;border:1px solid var(--border-light);text-decoration:none;color:var(--muted);background:var(--card)}
.lang-switch span{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.answer-reveal summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:.9rem;margin-top:8px}
.lesson-pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:20px 0}
.lesson-pager a{text-decoration:none;font-weight:600}

/* ---------- animated lesson diagrams (content/visuals.js) ---------- */
.ls-visual{background:var(--card);border:1px solid var(--border-light)}
.viz{margin:4px 0 6px}
.viz svg{width:100%;height:auto;display:block;overflow:visible}
.viz text{font:600 13px var(--font);fill:var(--text)}
.viz .ts{font-size:11.5px}
.viz .tm{fill:var(--muted);font-weight:500}
.viz .tb{font-weight:700}
.viz .big{font-size:22px;font-weight:700}
.viz .ok{fill:var(--ok)}
.viz .warn{fill:var(--warn-strong)}
.viz .hl-t{fill:var(--accent)}
.viz .b{fill:var(--card);stroke:var(--viz-thin);stroke-width:1.5}
.viz .ba{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.5}
.viz .bo{fill:var(--ok-soft);stroke:var(--ok);stroke-width:1.5}
.viz .bw{fill:var(--warn-soft);stroke:var(--warn-line);stroke-width:1.5}
.viz .bm{fill:var(--accent-softer);stroke:none}
.viz .f1{fill:var(--viz-fill);stroke:var(--viz-thin);stroke-width:1.5}
.viz .f2{fill:var(--viz-fill-2);stroke:var(--accent-line);stroke-width:1.5}
.viz .f3{fill:var(--ok-soft);stroke:var(--ok-line);stroke-width:1.5}
.viz .f4{fill:var(--warn-soft);stroke:var(--warn-line);stroke-width:1.5}
.viz .fw{fill:var(--warn-line)}
.viz .ln{stroke:var(--viz-line);stroke-width:2;fill:none}
.viz .la{stroke:var(--accent)}
.viz .ln-thin{stroke:var(--viz-thin);stroke-width:1}
.viz .lane{stroke:var(--viz-thin);stroke-width:1.5;stroke-dasharray:4 5}
.viz .ah{fill:var(--viz-line)}
.viz .ring{fill:none;stroke:var(--viz-line);stroke-width:2}
.viz .ring-thin{fill:none;stroke:var(--accent-line);stroke-width:1.5}
.viz .hl{fill:rgba(0,102,214,.18)}
.viz .hl-box{fill:none;stroke:var(--accent);stroke-width:3;stroke-dasharray:7 5}
.viz .c-main{fill:var(--accent)}
.viz .c-br{fill:#7c4dff}
.viz .c-ok{fill:var(--ok)}
.viz .c-warn{fill:var(--warn-line)}
.viz .mk-ok{stroke:var(--ok);stroke-width:2.5;stroke-dasharray:5 4}
.viz .mk-warn{stroke:var(--warn-line);stroke-width:2.5;stroke-dasharray:5 4;fill:none}
.viz .curve{fill:none;stroke:var(--viz-line);stroke-width:3}
.viz .ball{fill:var(--warn-line);stroke:var(--warn-strong);stroke-width:2}
.viz .node{fill:var(--card);stroke:var(--viz-line);stroke-width:2}
.viz .glow{fill:var(--accent);opacity:.15}
.viz .att{fill:none;stroke:var(--accent)}
.viz .a1{stroke-width:1.5;opacity:.35}
.viz .a2{stroke-width:3.5;opacity:.6}
.viz .a3{stroke-width:7;opacity:.9}
.viz .dot{fill:var(--warn-line);stroke:var(--card);stroke-width:2}
.viz .cursor{fill:var(--accent)}
.viz .series{fill:none;stroke:var(--accent);stroke-width:3;stroke-linejoin:round}
/* timing: one 8 s cycle, elements appear in sequence (.s1 … .s8) and the cycle repeats */
.viz .s1{animation:vs1 8s infinite}.viz .s2{animation:vs2 8s infinite}.viz .s3{animation:vs3 8s infinite}.viz .s4{animation:vs4 8s infinite}
.viz .s5{animation:vs5 8s infinite}.viz .s6{animation:vs6 8s infinite}.viz .s7{animation:vs7 8s infinite}.viz .s8{animation:vs8 8s infinite}
@keyframes vs1{0%{opacity:0}4%,92%{opacity:1}100%{opacity:0}}
@keyframes vs2{0%,10%{opacity:0}14%,92%{opacity:1}100%{opacity:0}}
@keyframes vs3{0%,20%{opacity:0}24%,92%{opacity:1}100%{opacity:0}}
@keyframes vs4{0%,30%{opacity:0}34%,92%{opacity:1}100%{opacity:0}}
@keyframes vs5{0%,40%{opacity:0}44%,92%{opacity:1}100%{opacity:0}}
@keyframes vs6{0%,50%{opacity:0}54%,92%{opacity:1}100%{opacity:0}}
@keyframes vs7{0%,60%{opacity:0}64%,92%{opacity:1}100%{opacity:0}}
@keyframes vs8{0%,70%{opacity:0}74%,92%{opacity:1}100%{opacity:0}}
.viz .fl{stroke:var(--accent);stroke-width:2.5;fill:none;stroke-dasharray:6 7;animation:vflow .9s linear infinite}
@keyframes vflow{to{stroke-dashoffset:-13}}
.viz .pulse,.viz .spin,.viz .ball,.viz .drop,.viz .mean{transform-box:fill-box;transform-origin:center}
.viz .pulse{animation:vpulse 1.6s ease-in-out infinite}
@keyframes vpulse{50%{transform:scale(1.15)}}
.viz .pulse-stroke{animation:vpstroke 1.6s ease-in-out infinite}
@keyframes vpstroke{50%{opacity:.45}}
.viz .spin{display:inline-block;animation:vspin 3s linear infinite}
@keyframes vspin{to{transform:rotate(360deg)}}
.viz .alt1{animation:valt1 8s infinite}
.viz .alt2{opacity:0;animation:valt2 8s infinite}
@keyframes valt1{0%,45%{opacity:1}50%,95%{opacity:0}100%{opacity:1}}
@keyframes valt2{0%,45%{opacity:0}50%,95%{opacity:1}100%{opacity:0}}
.viz .grow{transform-box:fill-box;transform-origin:left center;animation:vgrow 8s infinite}
@keyframes vgrow{0%,8%{transform:scaleX(0)}28%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.viz .draw{stroke-dasharray:900;animation:vdraw 8s infinite}
@keyframes vdraw{0%{stroke-dashoffset:900}50%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:900}}
.viz .glow.g1{animation:vglow 2.4s infinite}.viz .glow.g2{animation:vglow 2.4s .6s infinite}.viz .glow.g3{animation:vglow 2.4s 1.2s infinite}
@keyframes vglow{0%,100%{opacity:.12}20%{opacity:.95}45%{opacity:.12}}
.viz .ball{animation:vball 8s ease-in-out infinite}
@keyframes vball{0%{transform:translate(-260px,-150px)}12%{transform:translate(-218px,-106px)}24%{transform:translate(-130px,-38px)}36%{transform:translate(-62px,-9px)}48%{transform:translate(-21px,-1px)}58%,92%{transform:translate(0,0)}100%{transform:translate(-260px,-150px)}}
.viz .drop{animation:vdrop 8s infinite}
@keyframes vdrop{0%,25%{opacity:0;transform:translateY(-50px)}35%,92%{opacity:1;transform:translateY(0)}100%{opacity:0}}
.viz .mean{animation:vmean 8s infinite}
@keyframes vmean{0%,30%{transform:translateX(-54px)}42%,92%{transform:translateX(0)}100%{transform:translateX(-54px)}}
.viz .crash{opacity:0;animation:vcrash 8s infinite}
@keyframes vcrash{0%,45%{opacity:0}50%,68%{opacity:1}74%,100%{opacity:0}}
.viz .cursor{animation:vblink 1s steps(1) infinite}
@keyframes vblink{50%{opacity:0}}
.viz-caption{margin:6px 0 0 !important;font-size:.88rem;color:var(--muted);line-height:1.5 !important}

/* ---------- Learn: overview, practice tasks, what's next ---------- */
.path-list{margin:0;padding-left:20px;display:grid;gap:6px;line-height:1.5}
.course-complete.compact{padding:6px 0 16px;border-bottom:1px solid var(--border-light);margin-bottom:16px}
.task-card{border:1px solid var(--border-light);border-radius:var(--radius);padding:16px 18px;margin:12px 0;background:var(--card)}
.task-card.done{border-color:var(--ok);background:var(--ok-soft)}
.task-card h3{margin:6px 0 4px;font-size:1.08rem}
.task-card p{margin:0 0 8px}
.task-card details{margin:6px 0 12px}
.task-card summary{cursor:pointer;color:var(--accent);font-weight:600;font-size:.9rem}
.task-card h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:14px 0 4px}
.task-card ol{margin:0;padding-left:20px;display:grid;gap:4px}
.task-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.task-level{font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.4px}
.lvl-0{background:var(--ok-soft);color:var(--ok)}
.lvl-1{background:var(--accent-soft);color:var(--accent)}
.lvl-2{background:var(--purple-soft);color:var(--purple)}
.next-up{margin-top:20px}
.next-up h3{font-size:1rem;margin:0 0 10px}
.next-up-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.next-card{
  display:flex;flex-direction:column;gap:4px;padding:16px;border-radius:var(--radius);text-decoration:none;color:var(--text);
  background:linear-gradient(160deg,var(--accent-softer) 0%,var(--purple-soft) 100%);border:1px solid var(--border-light);
}
.next-card:hover{border-color:var(--accent-line);box-shadow:var(--shadow-hover)}
.next-icon{font-size:1.5rem}

/* ---------- Interview practice ---------- */
.iv-progress{display:flex;align-items:center;gap:10px;min-width:260px;margin-top:6px}
.iv-q .lesson-title{font-size:1.3rem}
.iv-text{
  width:100%;font:inherit;font-size:.95rem;line-height:1.5;border:1.5px solid var(--border-light);border-radius:10px;
  padding:10px 12px;margin:6px 0 4px;resize:vertical;background:var(--card);color:var(--text);
}
.iv-text:focus{outline:none;border-color:var(--accent)}
.iv-check{background:var(--surface);border-radius:var(--radius);padding:12px 14px;margin:10px 0}
.iv-check p{margin:0 0 6px}
.iv-point{display:flex;gap:10px;align-items:flex-start;padding:6px 0;font-size:.92rem;cursor:pointer}
.iv-point input{margin-top:3px;width:16px;height:16px;flex-shrink:0}
.iv-model{background:var(--accent-softer);border-left:4px solid var(--accent);border-radius:8px;padding:10px 14px;margin:10px 0}
.iv-model summary{cursor:pointer;font-weight:600;color:var(--accent)}
.iv-model p{margin:8px 0 0;line-height:1.6}
.score-strip{display:flex;gap:18px;padding:10px 14px;background:var(--surface);border-radius:10px;margin-bottom:12px;font-size:.9rem}
.iv-score{display:flex;gap:20px;align-items:center;padding:16px;border-radius:var(--radius);margin-bottom:18px;flex-wrap:wrap}
.iv-score.ok{background:var(--ok-soft)}
.iv-score.warn{background:var(--warn-soft)}
.iv-score.miss{background:var(--miss-soft)}
.iv-score h3{margin:2px 0 4px;font-size:1.3rem}
.iv-score p{margin:0 0 4px}
.iv-ring{
  --p:0;width:110px;height:110px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  background:conic-gradient(var(--accent) calc(var(--p) * 1%), var(--border-light) 0);
}
.iv-ring span{width:84px;height:84px;border-radius:50%;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800}
.iv-areas{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:8px}
.iv-areas li{display:grid;grid-template-columns:minmax(0,200px) 1fr 48px;gap:10px;align-items:center;font-size:.9rem}
.iv-areas strong{text-align:right}
.gap-card-iv{background:var(--warn-soft);border-left:4px solid var(--warn-line);border-radius:8px;padding:10px 14px;margin:8px 0}
.gap-card-iv p{margin:2px 0}
.mistake{border:1px solid var(--border-light);border-radius:10px;padding:12px 14px;margin:10px 0}
.mistake p{margin:4px 0}
.tag-wrong,.tag-right{display:inline-block;font-size:.7rem;font-weight:700;padding:1px 8px;border-radius:999px;margin-right:6px}
.tag-wrong{background:var(--miss-soft);color:var(--miss)}
.tag-right{background:var(--ok-soft);color:var(--ok)}
.iv-list{padding-left:20px}
.iv-static{margin-bottom:18px}
.iv-static ol{margin:4px 0;font-size:.92rem}

/* ---------- Sample resumes ---------- */
.resume-container{max-width:1120px}
.resume-intro h1{font-size:2rem;margin:4px 0 8px;letter-spacing:-.4px}
.resume-intro .lead{margin:0 0 12px}
.resume-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start;margin-top:12px}
.resume-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;position:sticky;top:var(--sticky-top);z-index:2;background:var(--bg);padding:6px 0}
.resume-sheet{
  background:#fff;color:#111;border:1px solid var(--border-light);box-shadow:var(--shadow);border-radius:6px;
  padding:44px 52px;font-family:Calibri,"Segoe UI",Arial,sans-serif;font-size:14px;line-height:1.4;max-width:820px;
}
.resume-sheet.editing{outline:3px dashed var(--accent-ring);outline-offset:4px;cursor:text}
.rs-head{border-bottom:2px solid #222;padding-bottom:8px;margin-bottom:6px}
.rs-name{font-size:26px;margin:0;letter-spacing:-.2px}
.rs-title{font-weight:700;margin:2px 0;font-size:15px}
.rs-contact{margin:0;font-size:12.5px;color:#333}
.resume-sheet h3{font-size:13px;text-transform:uppercase;letter-spacing:.8px;border-bottom:1px solid #999;padding-bottom:2px;margin:14px 0 6px}
.resume-sheet p{margin:0 0 4px}
.resume-sheet ul{margin:2px 0 6px;padding-left:18px}
.resume-sheet li{margin-bottom:2px}
.rs-skills{list-style:none;padding-left:0 !important}
.rs-entry{margin-bottom:6px}
.rs-entry-head{margin:6px 0 2px !important;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.rs-dates{color:#333;white-space:nowrap}
.resume-side{display:grid;gap:12px;position:sticky;top:calc(var(--sticky-top) + 12px)}
.side-card{background:var(--card);border:1px solid var(--border-light);border-radius:var(--radius);padding:14px 16px}
.side-card h2{font-size:.95rem;margin:0 0 6px;display:flex;justify-content:space-between;gap:8px;align-items:center}
.side-card ul{margin:0;padding-left:18px;display:grid;gap:4px}
.kw-count{font-size:.8rem;background:var(--ok-soft);color:var(--ok);padding:2px 8px;border-radius:999px}
.kw-list{list-style:none;padding:0 !important;display:flex !important;flex-wrap:wrap;gap:6px !important}
.kw-list li{font-size:.78rem;padding:3px 9px;border-radius:999px;background:var(--miss-soft);color:var(--miss)}
.kw-list li.found{background:var(--ok-soft);color:var(--ok)}
.resume-others{margin-top:32px}
.resume-others h2{font-size:1.1rem}
.resume-grid{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.resume-card{display:flex;flex-direction:column;gap:4px;height:100%;padding:14px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border-light);text-decoration:none;color:var(--text)}
.resume-card:hover{border-color:var(--accent-line);box-shadow:var(--shadow-hover)}

/* ---------- Homepage learn hub ---------- */
.learnhub h2{font-size:1.25rem;margin:40px 0 6px}
.learnhub > p{margin:0 0 12px;font-size:.92rem}
.hub-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.hub-tabs button{
  font:inherit;font-size:.84rem;font-weight:600;padding:7px 12px;border-radius:999px;cursor:pointer;
  background:var(--card);border:1px solid var(--border-light);color:var(--muted);
}
.hub-tabs button:hover{color:var(--text);border-color:var(--accent-line)}
.hub-tabs button[aria-selected="true"]{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)}
.hub-panel{background:var(--card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:20px 22px;margin-bottom:12px;box-shadow:var(--shadow)}
.hub-panel h3{margin:0 0 10px;font-size:1.15rem}
.hub-panel h3 .muted{font-weight:500;font-size:.95rem}
.hub-cols{display:grid;grid-template-columns:1.3fr 1fr;gap:24px}
.hub-cols h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:0 0 4px}
.hub-cols p{margin:0 0 12px;font-size:.92rem;line-height:1.6}
.hub-includes{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:6px;font-size:.9rem}
.hub-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hub-actions .button{text-decoration:none}

@media print{
  .resume-page .site-header,.resume-page .crumbs,.resume-page .resume-intro,.resume-page .resume-toolbar,
  .resume-page .resume-side,.resume-page .resume-others,.resume-page .footer{display:none !important}
  .resume-page .resume-layout{display:block;margin:0}
  .resume-page .resume-sheet{border:none;box-shadow:none;padding:0;max-width:none;outline:none}
  @page{margin:1.6cm 1.8cm}
}

/* ---------- Listen (read aloud) ---------- */
.listen-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-6px 0 16px}
.listen-btn,.listen-stop{
  font:inherit;font-size:.86rem;font-weight:600;cursor:pointer;border-radius:999px;padding:7px 14px;
  border:1.5px solid var(--accent);background:var(--card);color:var(--accent);
}
.listen-btn:hover{background:var(--accent-soft)}
.listen-bar.is-reading .listen-btn{background:var(--accent-fill);color:var(--on-accent)}
.listen-btn:disabled{opacity:.5;cursor:not-allowed}
.listen-stop{border-color:var(--border);color:var(--muted)}
.listen-rate select{font:inherit;font-size:.82rem;border:1px solid var(--border-light);border-radius:8px;padding:5px 6px;background:var(--card);color:var(--text)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[data-read].reading{box-shadow:0 0 0 3px var(--accent-ring);border-radius:10px;transition:box-shadow .2s ease}
.lang-switch + .listen-bar{margin-top:0}

/* ---------- responsive ---------- */
@media (max-width:700px){
  .container{padding:24px 16px}
  .hero h1{font-size:2rem}
  .subtitle{font-size:.98rem}
  .card{padding:22px 18px}
  .view-result{padding:0}
  .view-result > section{padding:22px 18px}
  .actions{padding:16px 18px}
  .options-grid,.match-grid,.stats,.profile-cols,.detail-cols,.stay-grid,.step-lists{grid-template-columns:1fr}
  .stats{gap:8px}
  .stat{flex-direction:row;align-items:baseline;gap:10px}
  .stat-num{font-size:1.2rem}
  .result-hero h2{font-size:1.6rem}
  .all-roles li{grid-template-columns:1fr auto;}
  .all-roles li .meter{grid-column:1 / -1;grid-row:2}
  .result-nav{padding:8px 12px}
  .rm-head{align-items:flex-start}
  .pace{width:100%;justify-content:space-between}
  .pace-label{display:none}
  .rm-axis .tick{display:none}
  .step summary{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"title plus" "badges badges"}
  .rm-toolbar .meter{order:5;flex-basis:100%}
  .rm-toolbar > .small:first-child{margin-right:auto}
  .opt-key,.kbd-hint{display:none}
  .site-header{flex-wrap:wrap;padding:12px 16px}
  .site-nav{order:3;flex-basis:100%;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -6px}
  .site-nav::-webkit-scrollbar{display:none}
  .site-nav a{white-space:nowrap;padding:6px 8px}
  .footer-links,.how-steps,.bg-grid{grid-template-columns:1fr}
  .footer-links{gap:16px;padding:20px 4px}
  .learn-bar h2{font-size:1.6rem}
  .course-grid,.terms,.catalog-grid{grid-template-columns:1fr}
  .learn-grid{grid-template-columns:minmax(0,1fr)}
  .outline-toggle{
    display:block;width:100%;text-align:left;margin-bottom:12px;cursor:pointer;font:inherit;font-weight:600;font-size:.9rem;
    background:var(--card);border:1px solid var(--border-light);border-radius:var(--radius);padding:12px 14px;color:var(--text);
  }
  .outline{display:none;position:static;max-height:none}
  .learn-grid.outline-open .outline{display:block}
  .lesson{padding:20px 16px}
  .lesson-title{font-size:1.3rem}
  .lesson-nav .button{flex:1}
  .next-up-grid,.resume-layout,.hub-cols,.resume-grid{grid-template-columns:1fr}
  .resume-side{position:static}
  .resume-sheet{padding:22px 18px;font-size:13px}
  .iv-areas li{grid-template-columns:1fr 44px}
  .iv-areas li .meter{grid-column:1 / -1;grid-row:2}
  .iv-progress{min-width:0;width:100%}
  .viz{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -6px;padding:0 6px 4px}
  .viz svg{min-width:560px}
  .article h1{font-size:1.7rem}
  .facts th{width:40%}
  .paths-table{min-width:640px}
  .nav .button{flex:1}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  html{scroll-behavior:auto !important}
  .viz .dot{display:none}
}

@media print{
  body{background:var(--card)}
  .hero,.site-header,.how,.backgrounds,.listen-bar,.outline,.outline-toggle,.lang-toggle,.lesson-nav,.copy-btn,.kbd-hint,.faq-section,.footer,.actions,.all-roles,.step-check input,.kbd-hint,.result-nav,.pace,.rm-actions,.up-next-actions,.rm-toolbar .link-btn,.hero-cta,.paths,.answer-box{display:none !important}
  .card{border:none;box-shadow:none;padding:0}
  .view-result > section{padding:16px 0}
  .stay{display:none}
  .match,.step details,.stat{break-inside:avoid}
  a{color:inherit}
}

/* ---------- Interview prep guide ---------- */
.prep-bar{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;justify-content:space-between;margin:14px 0 6px}
.prep-stage{margin-top:22px}
.prep-stage h3{margin:0 0 4px}
.prep-list{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px}
.prep-q{border:1px solid var(--border-light);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow)}
.prep-q.prepared{border-color:var(--ok-line);background:var(--ok-soft)}
.prep-q summary{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:12px 14px;font-weight:600;list-style:none}
.prep-q summary::-webkit-details-marker{display:none}
.prep-q summary::after{content:"+";margin-left:auto;color:var(--muted);font-weight:400;font-size:1.2rem;line-height:1}
.prep-q details[open] summary::after{content:"–"}
.prep-n{flex:none;display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.8rem}
.prep-body{padding:0 16px 14px 50px}
.prep-body p{margin:0 0 8px}
.prep-body ul{margin:0 0 10px;padding-left:20px}
.prep-label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-top:6px !important}
.prep-check{background:var(--warn-soft);border-radius:8px;padding:8px 10px;font-size:.9rem}
.rounds-box{background:var(--accent-soft);border-radius:var(--radius);padding:14px 18px;margin:16px 0}
.rounds-box h2{margin-top:0;font-size:1.1rem}
.sources ul{padding-left:18px}

/* ---------- Resume builder ---------- */
.rb-steps{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:12px 0 16px}
.rb-step{font:inherit;font-size:.86rem;display:flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:999px;padding:6px 12px;cursor:pointer}
.rb-step.current{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill)}
.rb-step:disabled{opacity:.45;cursor:not-allowed}
.rb-num{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.08);font-size:.75rem;font-weight:700}
.rb-step.current .rb-num{background:rgba(255,255,255,.25)}
.rb-private{background:var(--ok-soft);border-radius:8px;padding:8px 12px}
.rb-start{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0}
.rb-card{border:1px solid var(--border-light);border-radius:var(--radius);background:var(--card);padding:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;box-shadow:var(--shadow)}
.rb-card h3{margin:0;font-size:1rem}
.rb-card p{margin:0}
.rb-icon{font-size:1.6rem}
.rb-upload{border-style:dashed;border-width:2px;border-color:var(--accent)}
.rb-upload.over{background:var(--accent-soft)}
.rb-file{cursor:pointer}
.rb-select,.rb-input{font:inherit;font-size:.92rem;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--text);max-width:100%}
.rb-card .rb-select{display:block;margin-top:4px;width:100%}
.rb-paste{margin:6px 0 12px}
.rb-paste summary{cursor:pointer;font-weight:600}
.rb-role{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.rb-match{display:flex;gap:14px;align-items:center;margin:8px 0}
.rb-miss{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 10px}
.rb-inline{display:flex;gap:8px;margin:12px 0 4px;flex-wrap:wrap}
.rb-inline .rb-input{flex:1;min-width:180px}
.rb-idea{margin:12px 0;background:var(--surface);border-radius:8px;padding:8px 12px}
.rb-idea summary{cursor:pointer;font-weight:600}
.rb-templates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0}
.rb-tpl{font:inherit;text-align:left;display:flex;flex-direction:column;gap:4px;border:2px solid var(--border-light);border-radius:var(--radius);background:var(--card);color:var(--text);padding:10px;cursor:pointer}
.rb-tpl.current{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.rb-thumb{display:block;height:230px;overflow:hidden;border-radius:6px;border:1px solid var(--border-light);background:#fff;position:relative}
.rb-edit{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:20px;align-items:start}
.rb-form h3{margin-top:0}
.rb-field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;font-size:.88rem;font-weight:600}
.rb-field .rb-input,.rb-field textarea{font-weight:400;width:100%;box-sizing:border-box}
.rb-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;line-height:1.45}
.rb-sec-head{display:flex;gap:8px;align-items:center}
.rb-sec-title{flex:1;font-weight:700 !important}
.rb-tone{background:var(--surface);border-radius:8px;padding:10px 14px;margin-top:10px}
.rb-tone h4{margin:0 0 2px}
.rb-tone ul{padding-left:18px;margin:6px 0 0}
.rb-preview{position:sticky;top:calc(var(--sticky-top) + 8px)}
.rb-preview .resume-toolbar{position:static;padding:0}
.rb-quiz{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:1px solid var(--border-light);border-radius:var(--radius);padding:10px 14px;margin-top:12px;background:var(--card)}
.rb-quiz p{margin:0;flex:1;min-width:200px}
@media (max-width:860px){
  .rb-start,.rb-templates{grid-template-columns:1fr}
  .rb-edit{grid-template-columns:minmax(0,1fr)}
  .rb-preview{position:static}
  .rb-thumb{height:200px}
  .prep-body{padding:0 14px 14px 14px}
}

/* ---------- Deeper lesson sections ---------- */
.ls-steps .deep-steps{counter-reset:st;list-style:none;padding:0;margin:0;display:grid;gap:8px}
.ls-steps .deep-steps li{counter-increment:st;position:relative;padding:8px 10px 8px 42px;background:var(--card);border:1px solid var(--border-light);border-radius:8px}
.ls-steps .deep-steps li::before{content:counter(st);position:absolute;left:10px;top:8px;width:22px;height:22px;border-radius:50%;background:var(--accent-fill);color:var(--on-accent);font-size:.78rem;font-weight:700;display:grid;place-items:center}
.ls-mistakes{background:var(--warn-soft)}
.ls-mistakes ul{margin:0;padding-left:20px}
.ls-mistakes li{margin-bottom:6px}
.deep-faq{border-top:1px solid var(--border-light);padding:8px 0}
.deep-faq:first-of-type{border-top:none}
.deep-faq summary{cursor:pointer;font-weight:600}
.deep-faq p{margin:6px 0 0}

/* ---------- AI for Kids ---------- */
[data-l="hi"]{display:none}
html.kids-hi [data-l="en"]{display:none}
html.kids-hi [data-l="hi"]{display:inline}
.kids-page{background:linear-gradient(180deg,var(--warn-soft) 0,var(--accent-softer) 520px,var(--fill) 1100px)}
.kids-page h1,.kids-page h2,.kids-page h3,.kids-page .kid-prompt,.kids-page .kid-choice,.kids-page .kid-level strong,.kids-page .kids-sub{font-family:"Baloo 2",var(--font)}
.kids-main{max-width:920px}
.kids-hero{display:flex;gap:20px;align-items:center;margin:10px 0 18px}
.kids-hero h1{font-size:clamp(2rem,6vw,3rem);line-height:1.05;margin:4px 0}
.kids-sub{font-size:1.2rem;margin:0 0 10px;color:var(--text)}
.kids-robo{font-size:clamp(4rem,14vw,6.5rem);line-height:1;flex:none;animation:robo-bob 2.6s ease-in-out infinite;filter:drop-shadow(0 8px 10px rgba(0,0,0,.12))}
@keyframes robo-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10px) rotate(3deg)}}
.kids-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.kids-story{background:var(--card);border-radius:22px;padding:18px 20px;box-shadow:var(--shadow);border:3px solid color-mix(in srgb,var(--c,#ff8a3d) 35%,var(--card));font-size:1.12rem;line-height:1.6;margin-bottom:22px}
.kids-story .listen-bar{margin:0 0 10px}
.kids-story p{margin:0 0 10px}
.kids-bubble{display:flex;gap:12px;align-items:flex-start}
.kids-bubble-robo{font-size:2.2rem;flex:none}
.kids-fact{background:var(--warn-soft);border-radius:14px;padding:10px 14px;font-size:1rem;margin:8px 0 0 !important}
.kid-map{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.kid-level{display:flex;flex-direction:column;gap:4px;align-items:flex-start;text-decoration:none;color:var(--text);background:var(--card);border-radius:20px;padding:16px;border:3px solid color-mix(in srgb,var(--c) 40%,var(--card));box-shadow:0 4px 0 color-mix(in srgb,var(--c) 55%,var(--card));transition:transform .15s}
.kid-level:hover{transform:translateY(-3px);color:var(--text)}
.kid-level.done{background:color-mix(in srgb,var(--c) 10%,var(--card))}
.kid-level-num{font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--c)}
.kid-level-icon{font-size:2.6rem;line-height:1.1}
.kid-level strong{font-size:1.2rem;line-height:1.2}
.kid-level-go{margin-top:auto;font-weight:700;color:var(--c)}
.kid-stars{display:inline-flex;gap:2px;font-size:1.4rem;color:var(--border);line-height:1}
.kid-stars .on{color:#ffb800;text-shadow:0 1px 0 #c98f00}
.kid-score{display:flex;gap:18px;flex-wrap:wrap;font-size:1.1rem;margin:4px 0 12px}
.kid-badges,.kid-cert-box,.kids-why,.kids-parents{background:#fff;border-radius:20px;padding:16px 20px;margin-top:20px;box-shadow:var(--shadow)}
.kid-badges ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.kid-badges li{display:flex;gap:8px;align-items:center;background:var(--warn-soft);border-radius:999px;padding:6px 14px 6px 8px;font-weight:700}
.kid-badges li span{font-size:1.5rem}
.kid-badges li.champ{background:var(--warn-soft-2)}
.kids-why ul,.kids-parents ul{padding-left:20px;font-size:1.05rem}
.kids-why li,.kids-parents li{margin-bottom:6px}
.kid-cert{border:6px double #ffb800;border-radius:18px;padding:26px 20px;text-align:center;background:#fffdf5;margin:12px 0;font-family:"Baloo 2",var(--font)}
.kid-cert-top{font-size:1.4rem;font-weight:800;color:#b07800;margin:0}
.kid-cert-name{font-size:2.2rem;font-weight:800;margin:8px 0;border-bottom:2px solid #e6d9a8;display:inline-block;min-width:60%}
.kid-cert-badges{font-size:2rem;letter-spacing:6px}
/* game */
.kids-game-wrap{background:var(--card);border-radius:24px;padding:18px;box-shadow:0 6px 24px rgba(0,0,0,.07);margin-bottom:18px}
.kids-game-wrap h2{margin:0 0 8px}
.kid-game-head{border-radius:16px;background:color-mix(in srgb,var(--c) 12%,var(--card));padding:12px 14px;margin-bottom:14px}
.kid-prompt{font-size:1.3rem;font-weight:700;margin:0;line-height:1.3}
.kid-hear{font:inherit;font-size:1.1rem;border:none;background:var(--card);border-radius:50%;width:38px;height:38px;cursor:pointer;box-shadow:var(--shadow);vertical-align:middle}
.kid-dots{display:flex;gap:6px;margin-top:10px}
.kid-dots span{width:22px;height:8px;border-radius:999px;background:var(--border-light)}
.kid-dots span.past{background:var(--c)}
.kid-dots span.now{background:color-mix(in srgb,var(--c) 50%,var(--card))}
.kid-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:10px}
.kid-emoji{font-size:5rem;line-height:1;animation:pop .35s ease-out}
@keyframes pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.kid-card-text{font-size:1.35rem;font-weight:700;margin:0;font-family:"Baloo 2",var(--font)}
.kid-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.kid-choices.three{grid-template-columns:repeat(3,1fr)}
.kid-choices.stack{grid-template-columns:1fr}
.kid-choice{font:inherit;font-size:1.25rem;font-weight:700;padding:16px 12px;border-radius:18px;border:3px solid var(--border-light);background:var(--card);cursor:pointer;box-shadow:0 4px 0 var(--border);transition:transform .1s}
.kid-choice:active{transform:translateY(3px);box-shadow:0 1px 0 var(--border)}
.kid-choice.yes{border-color:var(--ok-line);box-shadow:0 4px 0 var(--ok-line)}
.kid-choice.no{border-color:var(--miss-line);box-shadow:0 4px 0 var(--miss-line)}
.kid-choice.big{font-size:2.6rem;padding:10px}
.kid-choice.prompt{text-align:left;font-size:1.1rem;font-weight:600}
.kid-choice.picked{outline:4px solid var(--accent)}
.kid-choice.right{background:var(--ok-soft);border-color:var(--ok)}
.kid-choice.wrongpick{background:var(--miss-soft);border-color:var(--miss-line)}
.kid-choice:disabled{cursor:default}
.kid-feedback{border-radius:16px;padding:12px 14px;font-size:1.1rem;margin:6px 0 12px;animation:pop .3s ease-out}
.kid-feedback.ok{background:var(--ok-soft)}
.kid-feedback.miss{background:var(--warn-soft)}
.kid-next{display:block;margin:0 auto;font-size:1.1rem;padding:12px 26px}
.kid-robo-say{font-size:1.1rem;background:var(--accent-softer);border-radius:14px;padding:10px 12px;min-height:1.6em}
.kid-robo-say:empty{display:none}
.kid-taught{display:flex;flex-wrap:wrap;gap:8px;font-size:1.4rem}
.kid-taught span{background:var(--fill);border-radius:12px;padding:2px 8px}
.kid-seq{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;font-size:2.4rem;margin:8px 0}
.kid-seq span{background:var(--fill);border-radius:14px;min-width:58px;text-align:center;padding:4px}
.kid-seq .q{background:var(--warn-soft);outline:3px dashed #ffb800}
.kid-match{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:12px}
.kid-match ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.kid-pill{font:inherit;width:100%;text-align:left;font-size:1.02rem;font-weight:700;border:3px solid var(--border-light);background:var(--card);border-radius:16px;padding:10px 12px;cursor:pointer}
.kid-pill.job{font-weight:600}
.kid-pill.picked{border-color:var(--accent);background:var(--accent-soft)}
.kid-pill.matched{border-color:var(--ok);background:var(--ok-soft);cursor:default}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.kid-result{font-size:3rem;text-align:center;letter-spacing:4px;animation:pop .4s ease-out}
.kid-end{text-align:center;padding:10px}
.kid-end h2{font-size:2rem;margin:0}
.kid-end-emoji{font-size:4.5rem;margin:0;animation:pop .5s ease-out}
.kid-end .kid-stars{font-size:3rem}
.kid-badge-won{display:inline-flex;gap:10px;align-items:center;background:var(--warn-soft);border-radius:999px;padding:8px 18px 8px 10px;margin:10px 0;text-align:left}
.kid-badge-won>span:first-child{font-size:2.4rem}
.kid-badge-won small{display:block;color:var(--muted)}
.kid-remember{font-size:1.1rem;background:var(--accent-softer);border-radius:14px;padding:10px;margin:10px auto;max-width:560px}
.kid-end-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.kids-remember-static{font-size:1.05rem;text-align:center;margin:0 0 14px}
.kid-confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
.kid-confetti span{position:absolute;top:-40px;font-size:1.8rem;animation:fall 2.2s ease-in forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
.hub-kids{margin:16px 0 0;background:var(--warn-soft);border-radius:12px;padding:10px 14px}
@media (max-width:760px){
  .kid-map{grid-template-columns:1fr 1fr}
  .kids-hero{gap:12px}
  .kid-match{gap:8px}
  .kid-pill{font-size:.88rem;padding:8px}
  .kid-choice{font-size:1.1rem}
  .kid-emoji{font-size:4rem}
}
@media (max-width:420px){.kid-map{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.kids-robo,.kid-emoji,.kid-feedback,.kid-result,.kid-end-emoji{animation:none}}
.learn-hero:has(.page-lang){display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.prep-en{background:var(--accent-soft);border-radius:8px;padding:6px 10px;margin:0 0 10px}
.prep-en summary{cursor:pointer;font-weight:600;font-size:.9rem}
.prep-en p{margin:6px 0 0}

/* ---------- Resume templates (builder preview, PDF and sample pages) ----------
   Single column, standard headings, real text: safe for applicant tracking systems.
   Sizes in pt so the preview, the PDF and Word match (Harvard spec: 10.5pt body, 16pt name,
   11.5pt headings, 0.75in margins). */
.rb-paper{position:relative;overflow:hidden;border-radius:4px}
.rb-paper .rb-sheet{width:794px;max-width:none;box-sizing:border-box;padding:0.7in 0.75in;transform-origin:top left;position:absolute;top:0;left:0;border-radius:2px;
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 8px 30px rgba(0,0,0,.10);border:none;max-height:none;overflow:visible}
.rb-break{position:absolute;left:0;right:0;border-top:2px dashed #c7cdd8;font:600 10px/1.2 var(--font);color:#8a93a5;text-align:center;padding-top:3px;pointer-events:none}
.rb-sheet a{color:inherit;text-decoration:none}
.rb-sheet .rs-tech{font-style:italic;color:#5b6170;font-size:9.5pt;margin:0 0 2pt !important}
.rb-sheet .rs-entry-head{margin:7pt 0 1pt !important;display:flex;justify-content:space-between;gap:10px}
.rb-sheet ul{margin:2pt 0 5pt;padding-left:14pt}
.rb-sheet li{margin-bottom:1.5pt}
.rb-sheet .rs-skills{padding-left:0}
.rb-sheet .rs-skills li{margin-bottom:1pt}
.rb-sheet .rs-dates{white-space:nowrap}
.rb-sheet section{break-inside:auto}
.rb-sheet h3{break-after:avoid}
/* Harvard Classic */
.tpl-harvard,.tpl-classic{font-family:Carlito,Calibri,"Segoe UI",Arial,sans-serif;font-size:10.5pt;line-height:1.28;color:#111}
.tpl-harvard .rs-head,.tpl-classic .rs-head{text-align:center;border-bottom:none;padding-bottom:2pt;margin-bottom:2pt}
.tpl-harvard .rs-name,.tpl-classic .rs-name{font-size:16pt;font-weight:700;letter-spacing:.2pt}
.tpl-harvard .rs-title,.tpl-classic .rs-title{font-size:11pt;font-weight:400;margin:1pt 0}
.tpl-harvard .rs-contact,.tpl-classic .rs-contact{font-size:9.5pt;color:#222}
.tpl-harvard h3,.tpl-classic h3{font-size:11.5pt;font-weight:700;text-transform:uppercase;letter-spacing:.4pt;border-bottom:1px solid #111;padding-bottom:1pt;margin:10pt 0 4pt;color:#111}
/* Executive Serif */
.tpl-executive{font-family:"Source Serif 4",Cambria,Georgia,serif;font-size:10.5pt;line-height:1.36;color:#1b1f2a}
.tpl-executive .rs-head{text-align:center;border-bottom:3px double #1f2a44;padding-bottom:7pt;margin-bottom:4pt}
.tpl-executive .rs-name{font-size:23pt;font-weight:600;letter-spacing:2.5pt;color:#1f2a44;text-transform:uppercase}
.tpl-executive .rs-title{font-size:10pt;font-weight:600;letter-spacing:2.2pt;text-transform:uppercase;color:#4a5670;margin:4pt 0 3pt}
.tpl-executive .rs-contact{font-size:9pt;color:#3c4558;letter-spacing:.3pt}
.tpl-executive h3{font-size:10pt;font-weight:700;letter-spacing:2.4pt;text-transform:uppercase;color:#1f2a44;border-bottom:1px solid #b9c0ce;padding-bottom:2pt;margin:13pt 0 5pt}
.tpl-executive .rs-entry-head strong{color:#1f2a44}
.tpl-executive .rs-dates{font-style:italic;color:#4a5670}
/* Modern Minimal */
.tpl-modern{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:9.6pt;line-height:1.42;color:#1e293b}
.tpl-modern .rs-head{text-align:left;border-bottom:none;padding-bottom:4pt;margin-bottom:2pt}
.tpl-modern .rs-name{font-size:22pt;font-weight:700;letter-spacing:-.4pt;color:#0f172a}
.tpl-modern .rs-title{font-size:11pt;font-weight:600;color:#2a5db0;margin:1pt 0 3pt}
.tpl-modern .rs-contact{font-size:8.8pt;color:#475569}
.tpl-modern h3{font-size:8.6pt;font-weight:700;letter-spacing:1.6pt;text-transform:uppercase;color:#2a5db0;border-bottom:1px solid #dbe3ee;padding-bottom:3pt;margin:13pt 0 5pt}
.tpl-modern .rs-dates{color:#64748b;font-size:8.8pt}
.tpl-modern li::marker{color:#2a5db0}
/* Impact */
.tpl-impact{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:9.6pt;line-height:1.42;color:#1e293b}
.tpl-impact .rs-head{text-align:left;border-bottom:none;padding-bottom:3pt}
.tpl-impact .rs-name{font-size:22pt;font-weight:700;letter-spacing:-.4pt;color:#0f172a}
.tpl-impact .rs-title{font-size:11pt;font-weight:600;color:#0f766e;margin:1pt 0 3pt}
.tpl-impact .rs-contact{font-size:8.8pt;color:#475569}
.tpl-impact h3{font-size:8.6pt;font-weight:700;letter-spacing:1.6pt;text-transform:uppercase;color:#0f766e;border-bottom:1px solid #cfe9e4;padding-bottom:3pt;margin:13pt 0 5pt}
.tpl-impact .rs-dates{color:#64748b;font-size:8.8pt}
.tpl-impact li::marker{color:#0f766e}
.tpl-impact .rs-impact h3{border-bottom:none;margin-bottom:4pt}
.tpl-impact .rs-impact ul{list-style:none;padding:0;margin:0;display:flex;gap:8pt}
.tpl-impact .rs-impact li{flex:1;background:#f0faf8;border-left:3pt solid #0f766e;border-radius:3pt;padding:6pt 8pt;font-weight:600;font-size:9pt;line-height:1.3;color:#0f3d39}
/* Compact */
.tpl-compact{font-family:Carlito,Calibri,Arial,sans-serif;font-size:9.6pt;line-height:1.18;color:#111}
.tpl-compact .rs-head{text-align:left;border-bottom:1.5pt solid #111;padding-bottom:3pt;margin-bottom:2pt}
.tpl-compact .rs-name{font-size:15pt;font-weight:700}
.tpl-compact .rs-title{font-size:10pt;font-weight:700;margin:0}
.tpl-compact .rs-contact{font-size:8.8pt}
.tpl-compact h3{font-size:9.8pt;font-weight:700;text-transform:uppercase;border-bottom:1px solid #888;padding-bottom:1pt;margin:7pt 0 2pt}
.rb-paper .rb-sheet.tpl-compact{padding:0.55in 0.6in}
.tpl-compact .rs-entry-head{margin:4pt 0 0 !important}
/* Impact strip in other templates: a plain list */
.rs-impact ul{margin-bottom:2pt}
/* template thumbnails */
.rb-thumb .rb-sheet{position:absolute;top:0;left:0;width:794px;box-sizing:border-box;padding:0.7in 0.75in;transform:scale(.3);transform-origin:top left;box-shadow:none;border:none;border-radius:0;pointer-events:none}
/* score + coach */
.rb-score{border:1px solid var(--border-light);border-radius:var(--radius);background:var(--card);padding:10px 14px;margin:0 0 12px}
.rb-score summary{display:flex;gap:12px;align-items:center;cursor:pointer;list-style:none}
.rb-score summary::-webkit-details-marker{display:none}
.iv-ring.small{width:52px;height:52px;flex:none}
.iv-ring.small span{font-size:.95rem}
.rb-score-rows{list-style:none;padding:0;margin:10px 0 6px;display:grid;gap:5px}
.rb-score-rows li{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 44px;gap:8px;align-items:center;font-size:.84rem}
.rb-score-rows strong{text-align:right}
.rb-coach{background:var(--warn-soft);border-radius:10px;padding:8px 12px;margin:4px 0 12px}
.rb-coach p{margin:4px 0}
.rb-coach .chip{display:inline-block;margin:2px 2px 0 0}
.rb-templates{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.rb-templates{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.rb-templates{grid-template-columns:1fr 1fr}.rb-score-rows li{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 40px}}

/* ---------- AI dictionary ---------- */
html.lang-hi [data-l="en"]{display:none}
html.lang-hi [data-l="hi"]{display:inline}
.gl-hero{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}
.gl-tools{position:sticky;top:var(--sticky-top);z-index:3;background:var(--bg);padding:10px 0 6px;margin-bottom:6px;border-bottom:1px solid var(--border-light)}
.lesson .gl-tools{background:var(--card)}
.gl-search input{width:100%;box-sizing:border-box;font:inherit;font-size:1rem;padding:10px 14px;border:1px solid var(--border);border-radius:999px;background:var(--card);color:var(--text)}
.gl-cats{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.gl-cat{font:inherit;font-size:.8rem;cursor:pointer;border:1px solid var(--border-light);background:var(--card)}
.gl-cat.active{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill)}
.gl-az{display:flex;flex-wrap:wrap;gap:2px;font-weight:700;font-size:.85rem}
.gl-az a,.gl-az span{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:6px;text-decoration:none}
.gl-az a{color:var(--accent)}
.gl-az a:hover{background:var(--accent-soft)}
.gl-az span{color:var(--faint)}
.gl-meta{margin:6px 0 0}
.gl-letter{scroll-margin-top:240px}
.gl-letter-head{font-size:1.5rem;color:var(--accent);margin:18px 0 6px;border-bottom:2px solid var(--accent-soft);padding-bottom:2px}
.gl-term{border:1px solid var(--border-light);border-radius:var(--radius);background:var(--card);margin:0 0 8px;scroll-margin-top:240px}
.gl-term summary{cursor:pointer;list-style:none;padding:10px 14px;display:flex;flex-direction:column;gap:2px}
.gl-term summary::-webkit-details-marker{display:none}
.gl-name{font-weight:700;font-size:1.05rem}
.gl-short{color:var(--muted);font-size:.93rem}
.gl-term[open]{box-shadow:var(--shadow)}
.gl-term[open] .gl-name{color:var(--accent)}
.gl-body{padding:0 14px 12px}
.gl-body p{margin:0 0 8px}
.gl-tags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gl-tags .gl-hear{margin-left:auto}
.gl-detail{line-height:1.6}
.gl-example{background:var(--warn-soft);border-radius:8px;padding:8px 10px}
@media (max-width:700px){.gl-letter,.gl-term{scroll-margin-top:16px}.gl-tools{position:static}}

/* ---------- Apple style chrome: translucent header, appearance switch, current page ---------- */
.site-header{
  position:sticky;top:0;z-index:50;max-width:none;margin:0;min-height:var(--header-h);
  padding:10px max(20px,calc((100% - 1000px) / 2));
  background:var(--header-bg);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--border-light);
}
.brand{flex-shrink:0}
.site-nav a{transition:background .15s ease,color .15s ease}
.site-nav a:hover{background:var(--fill);color:var(--text)}
.site-nav a[aria-current="page"]{background:var(--nav-current);color:var(--text)}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.theme-toggle{
  position:relative;width:36px;height:36px;padding:0;flex-shrink:0;cursor:pointer;
  display:inline-grid;place-items:center;border-radius:50%;
  border:1px solid var(--border-light);background:var(--card);color:var(--text);
  font:inherit;font-size:1.05rem;line-height:1;transition:background .15s ease;
}
.theme-toggle::after{content:"";position:absolute;inset:-4px;border-radius:50%} /* 44pt hit area */
.theme-toggle:hover{background:var(--fill)}
.theme-toggle .ti{display:none}
.theme-toggle:not([data-mode]) .ti-auto,
.theme-toggle[data-mode="auto"] .ti-auto,
.theme-toggle[data-mode="light"] .ti-light,
.theme-toggle[data-mode="dark"] .ti-dark{display:block}

/* Segmented control (language switches), as in iOS and macOS */
.lang-toggle{background:var(--seg-bg);border:none;border-radius:9px;padding:2px;gap:2px}
.lang-toggle button{border-radius:7px;color:var(--text);font-weight:500;transition:background .15s ease}
.lang-toggle button.active{background:var(--seg-active);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}

/* Homepage toolkit: every tool in one place */
.toolkit{margin:40px 0}
.toolkit h2{font-size:var(--fs-title2);margin:0 0 4px}
.toolkit > p{margin:0 0 16px}
.tk-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tk-grid a{
  display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-areas:"ico name" "ico desc";column-gap:12px;row-gap:2px;
  height:100%;padding:16px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border-light);
  box-shadow:var(--shadow);text-decoration:none;color:var(--text);transition:box-shadow .15s ease,transform .15s ease;
}
.tk-grid a:hover{box-shadow:var(--shadow-hover);transform:translateY(-1px);color:var(--text)}
.tk-ico{grid-area:ico;width:44px;height:44px;border-radius:10px;background:var(--accent-soft);display:grid;place-items:center;font-size:1.35rem}
.tk-name{grid-area:name;font-weight:600;font-size:var(--fs-headline);align-self:end}
.tk-desc{grid-area:desc;color:var(--muted);font-size:var(--fs-subhead);line-height:1.4}

/* Mobile: header scrolls away so the reading area stays large */
@media (max-width:700px){
  :root{--sticky-top:0px}
  .site-header{position:relative;padding:10px 16px}
  .site-header .btn-small{padding:8px 12px}
  .tk-grid{grid-template-columns:1fr}
}
@media (min-width:701px) and (max-width:900px){.tk-grid{grid-template-columns:1fr 1fr}}

/* Touch screens: 44pt minimum targets */
@media (pointer:coarse){
  .button,.lang-toggle button,.hub-tabs button,.gl-cat,.nav-restart,.listen-btn,.copy-btn,.outline-toggle{min-height:44px}
  .site-nav a,.result-nav a{display:inline-flex;align-items:center;min-height:44px}
  .theme-toggle{width:44px;height:44px}
  .theme-toggle::after{inset:0}
  .rb-select,.rb-input,.rb-field textarea,.iv-text,.gl-search,input[type="text"],input[type="search"],input[type="email"],textarea{font-size:16px} /* stops iOS zooming into fields */
}

/* Increase contrast (accessibility setting) */
@media (prefers-contrast:more){
  :root{--border:#8e8e93;--border-light:#aeaeb2;--muted:#4a4a4f;--faint:#5e5e63}
  :root[data-theme="dark"]{--border:#8e8e93;--border-light:#636366;--muted:#d1d1d6;--faint:#aeaeb2}
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--border:#8e8e93;--border-light:#636366;--muted:#d1d1d6;--faint:#aeaeb2}
}

/* Printing always uses the light palette, and never the dark page background */
@media print{
  :root:root:root{
    color-scheme:light;--bg:#fff;--card:#fff;--card-2:#fff;--fill:#f2f2f7;--surface:#f5f5f7;--text:#1d1d1f;--muted:#6e6e73;--faint:#86868b;
    --border:#d2d2d7;--border-light:#e5e5ea;--accent:#0066cc;--accent-soft:#e8f1fd;--accent-softer:#f4f8fe;--accent-line:#9cc3f0;
    --ok:#1d7d3a;--ok-soft:#e8f6ec;--warn:#8a5300;--warn-soft:#fff6e0;--miss:#c4281c;--miss-soft:#fdecec;--purple-soft:#f4efff;--purple:#6b3fd4
  }
  .site-header{position:static;background:none;border:none;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- AI dictionary: everyday comparison and one page per term ---------- */
.gl-simple{background:var(--accent-softer);border-left:3px solid var(--accent);border-radius:8px;padding:8px 12px;line-height:1.55}
.term-page .term-answer{margin:8px 0 20px}
.term-lead{margin:0;font-size:var(--fs-title3);line-height:1.45}
.term-lead .gl-hear{vertical-align:middle;margin-left:6px}
.term-sec{margin:22px 0}
.term-sec h2{font-size:var(--fs-title3);margin:0 0 8px}
.term-sec p{margin:0;line-height:1.6}
.term-links{margin:0;padding-left:18px;display:grid;gap:4px}
.term-related{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.term-related a{display:grid;gap:2px;height:100%;padding:12px 14px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border-light);text-decoration:none;color:var(--text)}
.term-related a:hover{box-shadow:var(--shadow-hover);color:var(--text)}
.term-related span{color:var(--muted);font-size:var(--fs-subhead);line-height:1.4}
@media (max-width:700px){.term-related{grid-template-columns:1fr}}