/* Self-hosted: fonts.googleapis.com is blocked in mainland China. Latin subset. */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/barlow-300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/barlow-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/barlow-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/barlow-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/barlow-condensed-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/barlow-condensed-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter, variable 400–900, Latin subset (Functor theme, 19 Oct 2026). Self-hosted for the same reason as Barlow. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fonts/inter-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ══════════════════════════════════════════════════════════════════════════
   GEODESIC
   Design language after xtxmarkets.com — black ground, a single accent,
   Barlow 300 body / 700 uppercase headings, chamfered clip-path corners,
   prose indented from flush-left headings, dashed accent underlines.
   Dark only. That is the look, not an oversight.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --bg:       #000000;
    --fg:       #ffffff;
    --fg-dim:   #ffffffd1;
    --fg-faint: #ffffffb3;
    --rule:     #ffffff26;

    /* One accent. Signal amber. */
    --acc:      #E2A33C;
    --acc-dim:  #E2A33C99;
    --acc-lo:   #E2A33C33;

    --font: 'Barlow', 'Bahnschrift', arial, helvetica, sans-serif;
    --cond: 'Barlow Condensed', 'Barlow', arial, sans-serif;

    /* Chamfered corners — the structural motif */
    --clip-14: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
    --clip-24: polygon(0 24px, 24px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%);

    --indent: 100px;
    --measure: 800px;
    --wide: 1300px;

    word-wrap: break-word;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    font-weight: 400;
    font-size: 19px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100%;
    overflow-x: hidden;
}

/* Canvas sits behind everything */
#paths {
    position: fixed;
    inset: -34px -40px;                 /* inflated so pointer parallax never shows an edge */
    width: calc(100% + 80px);
    height: calc(100% + 68px);
    z-index: 0; pointer-events: none;
}

header, .page-content, footer, .mobile-nav {
    width: 100%; max-width: var(--wide);
    margin: 0 auto; padding: 0 30px;
    position: relative; z-index: 2;
}

.page-content { margin-top: 120px; flex: 1 0 auto; }

#skiptocontent a { position: absolute; top: -100px; left: 0; z-index: 9; background: var(--acc); color: #000; padding: 8px 14px; }
#skiptocontent a:focus { top: 0; }

/* ── Type ──────────────────────────────────────────────────────── */
h1, h2 {
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.005em;
    margin: 0 0 .5em;
    max-width: var(--measure);
}
h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.8rem); margin-top: 0; }

h3 {
    text-transform: uppercase;
    font-weight: 600;
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    letter-spacing: .04em;
    margin: 0 0 .6em;
}

p, ul, ol { max-width: var(--measure); }
p { margin: 0 0 1.15em; }

/* Prose indents; headings stay flush left. XTX's strongest structural move. */
.page-content p,
.page-content ul,
.page-content ol,
.page-content .table,
.page-content .facts,
.page-content details,
footer .links, footer p {
    margin-left: var(--indent);
}
.page-content .table, .page-content .facts { max-width: var(--measure); }

a {
    color: currentColor;
    text-decoration: none;
    border-bottom: 1px dashed var(--acc);
    transition: color .15s, border-color .15s;
}
a:hover { color: var(--acc); }

em { font-style: normal; color: var(--acc); }
b  { font-weight: 600; }

hr {
    margin: 90px 0 20px;
    max-width: 300px; width: 100%;
    border: none; border-top: 1px solid var(--acc);
    align-self: flex-start;
    position: relative; z-index: 2;
}

ul { list-style-type: square; padding-left: 1.1em; }
li { margin-bottom: .55em; }
li::marker { color: var(--acc); }

.cta {
    display: inline-block;
    text-transform: uppercase;
    font-weight: 400; font-size: .8rem; letter-spacing: .1em;
    border: 1px solid var(--acc-dim);
    border-radius: 3px;
    padding: 9px 16px 7px;
    transition: border-color .15s, background .15s, color .15s;
}
.cta:hover { border-color: var(--fg); color: var(--fg); background: #ffffff0d; }
.cta.ghost { border-color: var(--rule); }

/* ── Header ────────────────────────────────────────────────────── */
header {
    position: fixed; top: 0; left: 50%; translate: -50% 0;
    height: 84px; z-index: 20;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    background: #000000cc;
    backdrop-filter: blur(6px);
    transition: height .18s ease-out, background .18s;
    border-bottom: 1px solid transparent;
}
header.collapsed { height: 52px; border-bottom-color: var(--rule); }

header .logo { text-align: center; }
header .logo a { border: none; display: inline-flex; align-items: center; gap: 11px; }
header .logo svg { transition: width .2s, height .2s; flex: none; }
header.collapsed .logo svg { width: 24px; height: 24px; }

.wordmark {
    font-family: var(--cond);
    text-transform: uppercase;
    font-weight: 600; font-size: 1.5rem;
    letter-spacing: .22em; padding-left: .22em;
    transition: font-size .2s;
    white-space: nowrap;
}
header.collapsed .wordmark { font-size: 1.15rem; }

.nav { display: flex; gap: 19px; }
.nav.right { justify-content: flex-end; }
.nav a {
    text-transform: uppercase;
    font-size: .78rem; letter-spacing: .12em; font-weight: 400;
    border-bottom: none; color: var(--fg-dim);
    padding-bottom: 2px;
}
.nav a:hover { color: var(--acc); }
.nav a.cta { color: var(--fg); }

.menu-btn {
    display: none; background: none; border: 1px solid var(--rule);
    color: var(--fg); font-family: var(--font); text-transform: uppercase;
    font-size: .75rem; letter-spacing: .12em; padding: 7px 13px;
    border-radius: 3px; cursor: pointer; justify-self: end;
}

.mobile-nav {
    position: fixed; top: 52px; left: 50%; translate: -50% 0;
    z-index: 19; background: #000000f2; backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--rule);
    display: none; flex-direction: column; padding-block: 18px 26px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
    border: none; text-transform: uppercase; letter-spacing: .12em;
    font-size: 1.05rem; padding: 11px 0; color: var(--fg-dim);
}
.mobile-nav a:hover { color: var(--acc); }

/* ── Hero ──────────────────────────────────────────────────────── */
.hero { padding-top: 4vh; }
.hero-h1 { margin-bottom: .38em; line-height: 1.04; }   /* the word-rise spans clip if the lines are tighter */
.hero-h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .04em; }
.hero-h1 .w > i {
    display: inline-block; font-style: normal;
    transform: translateY(105%);
    transition: transform .85s cubic-bezier(.19,1,.22,1);
}
.hero-h1.in .w > i { transform: none; }

.hero-sub {
    font-size: clamp(1.02rem, 1.6vw, 1.2rem); font-weight: 300;
    color: var(--fg-dim);
    border-left: 1px solid var(--acc);
    padding-left: 22px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 2em; }

/* ── Sections ──────────────────────────────────────────────────── */
.section { padding: 40px 0 0; }
.aside { color: var(--fg-dim); font-size: .93rem; margin-top: 2.2em; }

.record-list { list-style: none; padding-left: 0; }
.record-list li {
    padding: 11px 0 11px 26px;
    border-top: 1px solid var(--rule);
    position: relative; color: var(--fg-dim); font-size: .97rem;
}
.record-list li:last-child { border-bottom: 1px solid var(--rule); }
.record-list li::before {
    content: ''; position: absolute; left: 0; top: 1.05em;
    width: 7px; height: 7px; background: var(--acc);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.record-list b { color: var(--fg); font-weight: 600; }

/* ── Offer blocks ──────────────────────────────────────────────── */
.block {
    margin: 54px 0 0 var(--indent);
    max-width: var(--measure);
    border: 1px solid var(--rule);
    clip-path: var(--clip-24);
    padding: 30px 30px 12px;
    background: #ffffff05;
    transition: border-color .25s, background .25s;
}
.block:hover { border-color: var(--acc-lo); background: #ffffff0a; }
/* The block is already indented; its contents must not indent again. */
.page-content .block p,
.page-content .block .table { margin-left: 0; }

.block h3 { display: flex; align-items: center; gap: 13px; }
.ix {
    flex: none;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--acc); color: var(--acc);
    font-size: .78rem; font-weight: 400; letter-spacing: 0;
    clip-path: polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
}
.block-for { color: var(--fg-faint); font-size: .93rem; max-width: 62ch; }

.table { margin-top: 22px; }
.row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 26px; padding: 17px 0;
    border-top: 1px solid var(--rule);
}
.row.marked { position: relative; }
.row.marked::before {
    content: ''; position: absolute; left: -30px; top: 17px; bottom: 17px;
    width: 2px; background: var(--acc);
}
.row-main b { display: block; font-size: 1rem; margin-bottom: .25em; }
.row-main span { display: block; color: var(--fg-faint); font-size: .87rem; line-height: 1.45; }
.row-fig {
    font-family: var(--cond);
    font-size: 1.75rem; font-weight: 400;
    white-space: nowrap; letter-spacing: .01em;
    color: var(--acc);
}
.row-fig i { font-style: normal; }
.row-fig em { font-size: .5em; color: var(--fg-faint); }

/* ── Steps ─────────────────────────────────────────────────────── */
.steps { list-style: none; padding-left: 0; counter-reset: s; }
.steps li {
    counter-increment: s;
    padding: 18px 0 18px 62px;
    border-top: 1px solid var(--rule);
    position: relative;
}
.steps li:last-child { border-bottom: 1px solid var(--rule); }
.steps li::before {
    content: '0' counter(s);
    position: absolute; left: 0; top: 18px;
    font-family: var(--cond); font-size: 1.1rem;
    color: var(--acc); letter-spacing: .1em;
}
.steps b { display: block; text-transform: uppercase; letter-spacing: .06em; font-size: .95rem; margin-bottom: .3em; }
.steps span { color: var(--fg-dim); font-size: .93rem; }

/* ── About ─────────────────────────────────────────────────────── */
.sig { margin-top: 2.4em; display: flex; flex-direction: column; gap: 3px; }
.sig b { font-family: var(--cond); text-transform: uppercase; letter-spacing: .18em; font-size: 1.2rem; }
.sig span { color: var(--fg-faint); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 46px; }
.facts .fact {
    border: 1px solid var(--rule); clip-path: var(--clip-14);
    padding: 20px 20px 18px; background: #ffffff05;
    transition: border-color .25s;
}
.facts .fact:hover { border-color: var(--acc-lo); }
.facts b { display: block; text-transform: uppercase; font-size: .78rem; letter-spacing: .12em; color: var(--acc); margin-bottom: .55em; }
.facts span { font-size: .87rem; color: var(--fg-dim); line-height: 1.45; }

/* ── Disclosure ────────────────────────────────────────────────── */
details.collapse {
    border-top: 1px solid var(--rule);
    max-width: var(--measure);
}
details.collapse:last-of-type { border-bottom: 1px solid var(--rule); }
details.collapse[open] { background: #ffffff08; }
details.collapse summary {
    padding: 17px 10px 17px 0; cursor: pointer;
    font-weight: 400; font-size: 1rem; list-style-type: '＋';
    transition: color .15s;
}
details.collapse[open] summary { list-style-type: '－'; color: var(--acc); }
details.collapse summary:hover { color: var(--acc); }
details.collapse summary::marker { color: var(--acc); font-weight: 400; }
.page-content details.collapse p {
    margin-left: 0; padding: 0 40px 20px 26px;
    color: var(--fg-dim); font-size: .93rem;
}

/* ── Footer ────────────────────────────────────────────────────── */
footer { padding-block: 60px 40px; border-top: 1px solid var(--rule); margin-top: 90px; }
footer .links { display: flex; flex-wrap: wrap; gap: 24px; margin-bottom: 22px; }
footer .links a {
    border: none; text-transform: uppercase;
    font-size: .76rem; letter-spacing: .12em; color: var(--fg-dim);
}
footer .links a:hover { color: var(--acc); }
.fine { color: var(--fg-faint); font-size: .76rem; letter-spacing: .04em; line-height: 1.8; }

/* ── Reveal ────────────────────────────────────────────────────── */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.19,1,.22,1); }
.rv.in { opacity: 1; transform: none; }

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 1000px) {
    :root { --indent: 46px; }
    .facts { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    :root { --indent: 0px; }
    body { font-size: 17px; }
    header { height: 62px; grid-template-columns: 1fr auto; }
    header.collapsed { height: 52px; }
    .nav { display: none; }
    .menu-btn { display: block; }
    header .logo { text-align: left; }
    .page-content { margin-top: 88px; }
    .block { margin-left: 0; padding: 24px 20px 10px; }
    .row { flex-direction: column; gap: 8px; }
    .row.marked::before { left: -20px; }
    .row-fig { font-size: 1.5rem; }
    hr { margin: 64px 0 16px; }
    footer { margin-top: 64px; }
}

/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    .rv { opacity: 1; transform: none; }
    .hero-h1 .w > i { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   MULTI-PAGE COMPONENTS
   ══════════════════════════════════════════════════════════════════════════ */

/* Current page in nav */
.nav a[data-here] { color: var(--acc); }
.nav a[data-here].cta { color: var(--fg); border-color: var(--acc); }
.mobile-nav a[data-here] { color: var(--acc); }

/* Short hero on interior pages */
.hero.short { padding-top: 2vh; min-height: 0; }
.hero.short .hero-h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); }
.crumb {
    text-transform: uppercase; letter-spacing: .14em; font-size: .74rem;
    color: var(--fg-faint); margin-bottom: 1.4em;
}
.crumb a { border-bottom-color: var(--acc-dim); }

/* Card grid (segment teasers) */
.cards {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    margin-left: var(--indent); max-width: var(--measure);
}
.card {
    border: 1px solid var(--rule); clip-path: var(--clip-24);
    padding: 26px 24px 22px; background: #ffffff05;
    display: flex; flex-direction: column; gap: 10px;
    border-bottom: 1px solid var(--rule);
    transition: border-color .25s, background .25s, transform .25s;
}
.card:hover { border-color: var(--acc-lo); background: #ffffff0c; transform: translateY(-3px); color: var(--fg); }
.card h3 { margin: 0; font-size: 1.05rem; }
.card p { margin: 0; font-size: .88rem; color: var(--fg-faint); flex: 1; }
.card .ix { margin-bottom: 4px; }
.card-from { font-family: var(--cond); font-size: 1.15rem; color: var(--acc); }
.card-go { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-faint); }
.card:hover .card-go { color: var(--acc); }

/* Total row inside a programme table */
.row.total { border-top: 1px solid var(--acc-lo); }
.row.total .row-main b { color: var(--acc); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; }

/* Steps — expanded variant on /method */
.steps.big li { padding-block: 26px; }
.steps.big span { font-size: .96rem; }

/* Geography strip */
.geo {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-left: var(--indent); max-width: var(--measure);
}
.geo span, .geo a {
    border: 1px solid var(--rule); padding: 6px 13px;
    font-size: .8rem; color: var(--fg-dim); letter-spacing: .04em;
    clip-path: polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
    transition: border-color .25s, color .25s;
}
.geo span:hover, .geo a:hover { border-color: var(--acc); color: var(--acc); }

/* ── Testimonials ──────────────────────────────────────────────── */
.tm-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
    margin-left: var(--indent); max-width: var(--measure);
}
.tm {
    border: 1px solid var(--rule); clip-path: var(--clip-24);
    padding: 26px 24px 22px; background: #ffffff05; margin: 0;
    display: flex; flex-direction: column; gap: 14px;
    transition: border-color .25s, background .25s;
}
.tm:hover { border-color: var(--acc-lo); background: #ffffff0a; }
.tm-flag {
    font-family: var(--cond); font-size: .78rem; letter-spacing: .18em;
    color: var(--acc); border: 1px solid var(--acc-lo);
    width: fit-content; padding: 3px 9px 1px;
}
.tm blockquote { margin: 0; flex: 1; }
.tm blockquote p {
    margin: 0; font-size: .95rem; color: var(--fg-dim); line-height: 1.55;
    max-width: none;
}
.tm blockquote p::before { content: '“'; color: var(--acc); }
.tm blockquote p::after  { content: '”'; color: var(--acc); }
.tm figcaption { display: flex; flex-direction: column; gap: 3px; border-top: 1px solid var(--rule); padding-top: 14px; }
.tm figcaption b { font-size: .92rem; }
.tm figcaption span { font-size: .78rem; color: var(--fg-faint); }
.tm-empty { opacity: .55; }
.tm-empty blockquote p { font-style: italic; }

/* ── Payment ───────────────────────────────────────────────────── */
.pk-list { margin-top: 20px; }
.pk {
    display: grid; grid-template-columns: 1fr auto auto;
    gap: 22px; align-items: center;
    padding: 18px 0; border-top: 1px solid var(--rule);
}
.pk-main b { display: block; font-size: 1rem; margin-bottom: .25em; }
.pk-main span { display: block; font-size: .85rem; color: var(--fg-faint); line-height: 1.45; }
.pk-fig { text-align: right; white-space: nowrap; }
.pk-total { font-family: var(--cond); font-size: 1.5rem; color: var(--acc); }
.pk-dep { font-size: .74rem; color: var(--fg-faint); text-transform: uppercase; letter-spacing: .08em; }
.pk .cta { white-space: nowrap; }
.pk .cta[data-unset] { opacity: .4; border-style: dashed; cursor: not-allowed; }

.notice {
    margin: 34px 0 0 var(--indent); max-width: var(--measure);
    border: 1px dashed var(--acc-dim); clip-path: var(--clip-14);
    padding: 20px 22px; background: #E2A33C0d;
}
.notice b { display: block; color: var(--acc); margin-bottom: .4em; font-size: .95rem; }
.notice p { margin: 0; font-size: .88rem; color: var(--fg-dim); }

/* ── Enquiry form ──────────────────────────────────────────────── */
.enq { margin-left: var(--indent); max-width: 620px; display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-dim); }
.field input[type=text], .field input[type=email], .field select, .field textarea {
    background: #ffffff08; border: 1px solid var(--rule); color: var(--fg);
    font-family: var(--font); font-size: .95rem; font-weight: 400;
    padding: 11px 13px; border-radius: 2px;
    transition: border-color .2s, background .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--acc); background: #ffffff0d;
}
.field textarea { resize: vertical; line-height: 1.5; }
.field select { appearance: none; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--acc) 50%), linear-gradient(135deg, var(--acc) 50%, transparent 50%);
    background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field select option { background: #111; color: var(--fg); }
.hint { font-size: .8rem; color: var(--fg-faint); margin: 2px 0 0; max-width: none; }
.field.consent label { display: flex; gap: 11px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: .85rem; line-height: 1.5; color: var(--fg-faint); }
.field.consent input { margin-top: 3px; accent-color: var(--acc); flex: none; }
.enq button { align-self: flex-start; cursor: pointer; font-family: var(--font); background: none; }

/* ── Footer (multi-column) ─────────────────────────────────────── */
.foot-grid {
    display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px;
    padding-bottom: 34px; border-bottom: 1px solid var(--rule);
}
.foot-col { display: flex; flex-direction: column; gap: 9px; }
.foot-col b { text-transform: uppercase; font-size: .74rem; letter-spacing: .14em; color: var(--acc); margin-bottom: 3px; }
.foot-col a { border: none; font-size: .86rem; color: var(--fg-dim); }
.foot-col a:hover { color: var(--acc); }
.foot-mark { font-family: var(--cond); text-transform: uppercase; letter-spacing: .22em; font-size: 1.15rem; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 22px; }
.foot-legal p { margin: 0; }
.foot-legal a { border: none; color: var(--fg-faint); }
.foot-legal a:hover { color: var(--acc); }

@media (max-width: 1000px) {
    .cards, .tm-grid { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
    .cards, .tm-grid, .geo, .enq, .notice { margin-left: 0; }
    .pk { grid-template-columns: 1fr; gap: 12px; }
    .pk-fig { text-align: left; }
    .foot-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Currency selector on /pay ─────────────────────────────────── */
.cur-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    margin: 0 0 30px var(--indent); max-width: var(--measure);
}
.cur-row label {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-dim);
}
.cur-row select {
    background: #ffffff08; border: 1px solid var(--rule); color: var(--fg);
    font-family: var(--font); font-size: .88rem; font-weight: 400;
    padding: 8px 34px 8px 12px; border-radius: 2px; cursor: pointer; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--acc) 50%),
                      linear-gradient(135deg, var(--acc) 50%, transparent 50%);
    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
    transition: border-color .2s;
}
.cur-row select:focus { outline: none; border-color: var(--acc); }
.cur-row select option { background: #111; color: var(--fg); }
.cur-note { font-size: .78rem; color: var(--fg-faint); }

/* Pay button is a <button>, so reset UA styling to match .cta anchors */
button.cta {
    background: none; font-family: var(--font); cursor: pointer;
    color: var(--fg); line-height: normal;
}
button.cta:disabled { opacity: .5; cursor: wait; border-style: dashed; }

@media (max-width: 760px) { .cur-row { margin-left: 0; } }

/* ── Long-form article ─────────────────────────────────────────── */
.article h2 {
    font-size: clamp(1.2rem, 2.2vw, 1.6rem);
    margin: 2.4em 0 .9em var(--indent);
    max-width: var(--measure);
    text-transform: uppercase; letter-spacing: .01em;
}
.article h2::before {
    content: ''; display: block; width: 46px; height: 1px;
    background: var(--acc); margin-bottom: .8em;
}
.article p { font-size: 1.02rem; line-height: 1.62; }
.article p i { color: var(--fg); font-style: italic; }
.article p b { color: var(--fg); }
.article .hero-cta { margin-top: 3em; }
@media (max-width: 760px) { .article h2 { margin-left: 0; } }

.notice.alt { border-style: solid; border-color: var(--rule); background: #ffffff06; }
.notice.alt b { color: var(--fg); }
.notice.firm { border: 1px solid var(--acc); background: #E2A33C14; padding: 22px 26px; }
.notice.firm > b { font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; margin-bottom: .8em; }
.notice.firm p { font-size: .93rem; color: var(--fg); line-height: 1.6; }
.notice.firm p + p { margin-top: .7em; }
.notice.firm p b { display: inline; color: var(--acc); font-size: inherit; margin: 0; }
.notice.firm .firm-t { font-size: .82rem; color: var(--fg-faint); }
.notice.firm .firm-t a { color: var(--acc); }
.pay-note { margin: 10px 0 0 !important; font-size: .78rem !important; color: var(--fg-faint) !important; letter-spacing: .02em; }
.pay-note a { color: var(--fg-faint); text-decoration: underline; text-underline-offset: 2px; }
.hero-hour .pay-note { margin-top: 8px !important; }
.hero > .pay-note, .section > .pay-note { margin-left: var(--indent) !important; }
.hour-strip .pay-note, .hero-hour .pay-note { margin-left: 0 !important; }
@media (max-width: 760px) { .hero > .pay-note, .section > .pay-note { margin-left: 0 !important; } }

.pk-cta { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.pk-test {
    font-size: .58rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--acc); border: 1px solid var(--acc-lo); padding: 2px 7px;
    white-space: nowrap;
}
@media (max-width: 760px) { .pk-cta { align-items: flex-start; } }

/* ── Share row ─────────────────────────────────────────────────── */
.share {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    max-width: var(--measure); margin: 3.5rem 0 0 var(--indent);
    padding-top: 22px; border-top: 1px solid var(--rule);
}
.share-label {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--acc); margin-right: 4px;
}
.share a, .share-copy {
    font-family: var(--font); font-size: .78rem; font-weight: 400;
    letter-spacing: .04em; color: var(--fg-dim);
    border: 1px solid var(--rule); background: none; cursor: pointer;
    padding: 6px 12px; border-bottom: 1px solid var(--rule);
    clip-path: polygon(0 5px, 5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%);
    transition: border-color .2s, color .2s;
}
.share a:hover, .share-copy:hover { border-color: var(--acc); color: var(--acc); }
.share-copy.done { color: var(--acc); border-color: var(--acc); }
@media (max-width: 760px) { .share { margin-left: 0; } }

/* ── Verse ─────────────────────────────────────────────────────── */
.poem {
    margin-left: var(--indent); max-width: var(--measure);
    border-left: 1px solid var(--acc-lo); padding-left: 28px;
}
.page-content .poem p {
    /* the .poem block is already indented; cancel the global prose indent */
    margin-left: 0;
    font-size: 1rem; line-height: 1.85; color: var(--fg-dim);
    margin-bottom: 2.2em; max-width: none;
}
.poem p i { color: var(--acc); font-style: italic; }
.poem-page h2 { margin-top: 3em; }
@media (max-width: 760px) {
    .poem { margin-left: 0; padding-left: 16px; }
    .poem p { font-size: .92rem; line-height: 1.75; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AI assistant panel
   ══════════════════════════════════════════════════════════════════════════ */
.ai-open { cursor: pointer; font-family: var(--font); background: none; }

.ai-panel {
    position: fixed; right: 22px; bottom: 22px; z-index: 60;
    width: min(430px, calc(100vw - 32px));
    height: min(620px, calc(100vh - 110px));
    display: flex; flex-direction: column;
    background: #0a0a0a; border: 1px solid var(--rule);
    clip-path: var(--clip-24);
    box-shadow: 0 24px 70px #000000cc;
}
.ai-panel[hidden] { display: none; }
.ai-panel.in { animation: aiIn .28s cubic-bezier(.19,1,.22,1); }
@keyframes aiIn { from { opacity: 0; transform: translateY(14px); } }

.ai-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 12px; padding: 20px 20px 14px; border-bottom: 1px solid var(--rule);
}
.ai-head b { display: block; font-size: .95rem; color: var(--fg); }
.ai-head span { display: block; font-size: .72rem; color: var(--fg-faint); margin-top: 4px; line-height: 1.45; }
.ai-close {
    background: none; border: 0; color: var(--fg-faint); cursor: pointer;
    font-size: 1rem; padding: 2px 4px; flex: none;
}
.ai-close:hover { color: var(--acc); }

.ai-model {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px; border-bottom: 1px solid var(--rule);
}
.ai-model label {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--fg-faint);
}
.ai-model select {
    flex: 1; background: #ffffff08; border: 1px solid var(--rule); color: var(--fg);
    font-family: var(--font); font-size: .8rem; font-weight: 400;
    padding: 6px 28px 6px 10px; border-radius: 2px; cursor: pointer; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--acc) 50%),
                      linear-gradient(135deg, var(--acc) 50%, transparent 50%);
    background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.ai-model select:focus { outline: none; border-color: var(--acc); }
.ai-model select option { background: #111; }

.ai-log { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.ai-msg p { margin: 0 0 .7em; font-size: .87rem; line-height: 1.55; max-width: none; }
.ai-msg p:last-child { margin-bottom: 0; }
.ai-msg.bot p { color: var(--fg-dim); }
.ai-msg.you {
    align-self: flex-end; max-width: 85%;
    border: 1px solid var(--acc-lo); background: #E2A33C0d;
    padding: 10px 13px; clip-path: var(--clip-14);
}
.ai-msg.you p { color: var(--fg); }
.ai-msg.err p { color: var(--acc); }
.ai-cursor::after {
    content: '▌'; color: var(--acc); animation: aiBlink 1s steps(2) infinite;
}
@keyframes aiBlink { 50% { opacity: 0; } }

.ai-form { display: flex; gap: 9px; padding: 14px 20px 18px; border-top: 1px solid var(--rule); }
.ai-form textarea {
    flex: 1; resize: none; background: #ffffff08; border: 1px solid var(--rule);
    color: var(--fg); font-family: var(--font); font-size: .87rem; font-weight: 400;
    padding: 9px 11px; border-radius: 2px; line-height: 1.45;
}
.ai-form textarea:focus { outline: none; border-color: var(--acc); }
.ai-form .cta { align-self: flex-end; cursor: pointer; font-family: var(--font); background: none; }
.ai-form .cta:disabled { opacity: .45; cursor: wait; }

@media (max-width: 680px) {
    .ai-panel { right: 8px; left: 8px; bottom: 8px; width: auto; height: min(78vh, 560px); }
}
@media (prefers-reduced-motion: reduce) { .ai-panel.in { animation: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   Institution logos
   Real crests and wordmarks are heterogeneous — full colour, different aspect
   ratios, some light-on-dark. A pale chip behind each one lets them sit
   together on a black page without recolouring anything.
   ══════════════════════════════════════════════════════════════════════════ */
.creds {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    margin: 0 0 0 var(--indent); max-width: var(--measure);
}
.cred {
    border: 1px solid var(--rule); clip-path: var(--clip-24);
    padding: 24px 20px 20px; background: #ffffff05;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
    transition: border-color .3s var(--ease), background .3s;
}
.cred:hover { border-color: var(--acc-lo); background: #ffffff0a; }
.cred-logo {
    display: flex; align-items: center; justify-content: center;
    width: 84px; height: 84px; margin-bottom: 12px;
    background: #f4f1ea; border-radius: 50%; padding: 12px;
}
.cred-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cred b { display: block; font-size: .92rem; color: var(--fg); font-weight: 600; line-height: 1.3; }
.cred > span { display: block; font-size: .8rem; color: var(--fg-faint); line-height: 1.45; }
.cred .cred-note {
    margin-top: 8px; font-size: .6rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--acc); border: 1px solid var(--acc-lo); padding: 4px 9px;
}

/* Destinations row */
.dest-head {
    margin-left: var(--indent); font-size: .74rem; letter-spacing: .16em;
    color: var(--fg-faint); margin-top: 2.4em; margin-bottom: 1.1em;
}
.dest {
    display: flex; flex-wrap: wrap; gap: 12px;
    margin-left: var(--indent); max-width: var(--measure);
}
.dest-logo {
    width: 74px; height: 74px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: #f4f1ea; border-radius: 3px; padding: 10px;
    filter: saturate(.85);
    transition: transform .25s var(--ease), filter .25s;
}
.dest-logo:hover { transform: translateY(-3px); filter: none; }
.dest-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* The interviewer credential, given its own weight */
.interviewer {
    margin: 46px 0 0 var(--indent); max-width: var(--measure);
    border: 1px solid var(--acc-lo); clip-path: var(--clip-24);
    background: linear-gradient(180deg, #E2A33C0e, transparent 70%);
    padding: 28px 30px; display: flex; gap: 22px; align-items: flex-start;
}
.interviewer .cred-logo {
    width: 64px; height: 64px; min-width: 64px; flex: none;
    margin: 0; padding: 9px;   /* flex was stretching it into an ellipse */
}
.interviewer b { display: block; font-size: 1.05rem; color: var(--fg); margin-bottom: .5em; }
.interviewer p { margin: 0; font-size: .93rem; color: var(--fg-dim); max-width: none; }

@media (max-width: 900px) { .creds { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .creds, .interviewer, .dest, .dest-head { margin-left: 0; }
    .interviewer { flex-direction: column; gap: 14px; }
    .dest-logo { width: 62px; height: 62px; }
}

/* Published work */
.research {
    margin: 0 0 0 var(--indent); max-width: var(--measure);
    border-left: 2px solid var(--acc); padding: 2px 0 2px 26px;
}
.research b {
    display: block; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .14em; color: var(--acc); margin-bottom: 1em;
}
.research p { color: var(--fg-dim); }
.page-content .research p { margin-left: 0; }
@media (max-width: 760px) { .research { margin-left: 0; padding-left: 16px; } }

/* ── Rendered mathematics ──────────────────────────────────────── */
.maths {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
    margin-left: var(--indent); max-width: var(--measure);
}
.eq {
    margin: 0; border: 1px solid var(--rule); clip-path: var(--clip-24);
    background: #ffffff05; padding: 20px 22px 18px;
    transition: border-color .3s var(--ease);
}
.eq:hover { border-color: var(--acc-lo); }
.eq figcaption {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .12em;
    color: var(--acc); margin-bottom: 16px;
}
.eq math {
    /* `display: block` (plain) discards MathML's internal layout and the browser
       stacks every <mi>/<mo> as a generic box. `block math` keeps the math
       formatting context while still making the element block-level. */
    display: block math; overflow-x: auto; overflow-y: hidden;
    color: var(--fg); font-size: 1.02rem; padding: 6px 0 14px;
    text-align: center;
}
.page-content .eq p {
    margin: 0; margin-left: 0; padding-top: 14px;
    border-top: 1px solid var(--rule);
    font-size: .84rem; color: var(--fg-faint); line-height: 1.5; max-width: none;
}
@media (max-width: 900px) { .maths { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .maths { margin-left: 0; } .eq math { font-size: .92rem; } }

/* ── Assistant: sources, escalation, inline subscribe ──────────── */
.ai-src { font-size: .72rem !important; color: var(--fg-faint) !important; margin-top: .8em !important; }
.ai-src a { border-bottom-color: var(--acc-dim); }

.ai-esc, .ai-sub { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ai-esc input[type=email], .ai-sub input[type=email] {
    background: #ffffff0d; border: 1px solid var(--rule); color: var(--fg);
    font-family: var(--font); font-size: .85rem; font-weight: 400;
    padding: 9px 11px; border-radius: 2px;
}
.ai-esc input:focus, .ai-sub input:focus { outline: none; border-color: var(--acc); }
.ai-sub label {
    display: flex; align-items: center; gap: 9px;
    font-size: .82rem; color: var(--fg-dim); cursor: pointer;
}
.ai-sub input[type=checkbox] { accent-color: var(--acc); flex: none; }
.ai-esc .cta, .ai-sub .cta {
    align-self: flex-start; cursor: pointer; font-family: var(--font); background: none;
}
.ai-esc .cta:disabled, .ai-sub .cta:disabled { opacity: .5; cursor: wait; }
.ai-model { border-top: 1px solid var(--rule); border-bottom: none; }

/* ── Blog subscribe ────────────────────────────────────────────── */
.sub { margin-left: var(--indent); max-width: var(--measure); }
.sub-topics { border: 0; padding: 0; margin: 0 0 24px; }
.sub-topics legend {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
    color: var(--acc); padding: 0; margin-bottom: 16px;
}
.sub-topic {
    display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
    padding: 14px 16px; border: 1px solid var(--rule); margin-bottom: 9px;
    clip-path: var(--clip-14); background: #ffffff04;
    transition: border-color .2s, background .2s;
}
.sub-topic:hover { border-color: var(--acc-lo); background: #ffffff09; }
.sub-topic input { accent-color: var(--acc); margin-top: 4px; flex: none; }
.sub-topic b { display: block; color: var(--fg); font-size: .92rem; margin-bottom: 3px; font-weight: 600; }
.sub-topic span { font-size: .84rem; color: var(--fg-faint); line-height: 1.5; }
.sub-topic input:checked + span b { color: var(--acc); }

.sub-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sub-row input[type=email] {
    flex: 1; min-width: 220px;
    background: #ffffff08; border: 1px solid var(--rule); color: var(--fg);
    font-family: var(--font); font-size: .92rem; font-weight: 400;
    padding: 11px 13px; border-radius: 2px;
}
.sub-row input:focus { outline: none; border-color: var(--acc); }
.sub-row .cta { cursor: pointer; font-family: var(--font); background: none; }
.sub-row .cta:disabled { opacity: .5; cursor: wait; }
.page-content .sub-note { margin: 16px 0 0; font-size: .8rem; color: var(--fg-faint); max-width: none; }
.sub-note.err { color: var(--acc); }
.sub-note.ok  { color: var(--acc); }
@media (max-width: 760px) { .sub { margin-left: 0; } }

.lang-note { margin-left: var(--indent); max-width: var(--measure); padding-bottom: 2rem; }
@media (max-width: 760px) { .lang-note { margin-left: 0; } }

.byline {
    font-family: var(--cond);
    font-size: .95rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fg-dim);
    margin-top: 1.2rem;
}

/* Data tables inside articles */
.page-content table.data {
    margin: 1.6em 0 1.6em var(--indent);
    max-width: var(--measure); width: calc(100% - var(--indent));
    border-collapse: collapse; font-size: .95rem;
}
table.data th, table.data td {
    text-align: left; padding: .55em .9em .55em 0;
    border-bottom: 1px solid var(--rule); vertical-align: top;
}
table.data th {
    font-family: var(--cond); font-weight: 600; text-transform: uppercase;
    letter-spacing: .08em; font-size: .82rem; color: var(--fg-dim);
}
table.data td:first-child { color: var(--fg); white-space: nowrap; }
table.data caption {
    caption-side: bottom; text-align: left; padding-top: .7em;
    color: var(--fg-faint); font-size: .85rem;
}
.article ol { max-width: var(--measure); }
.article ol li, .article ul li { line-height: 1.55; }
@media (max-width: 760px) {
    .page-content table.data { margin-left: 0; width: 100%; font-size: .88rem; }
    table.data td:first-child { white-space: normal; }
}

/* ── Slide deck (blog comparison) ─────────────────────────────────────────
   CSS scroll-snap does the work, so it swipes on touch and scrolls with a
   trackpad with no script at all; script.js only adds buttons, arrow keys and
   the counter. */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.deck {
    margin: 2.6em 0 1em var(--indent);
    max-width: 980px;
    position: relative;
    min-width: 0;
}
.deck-track {
    /* inline-size containment: the track's width comes from its container, never
       from its content, so a wide table inside a slide cannot widen the page */
    contain: inline-size;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    outline: none;
}
.deck-track::-webkit-scrollbar { display: none; }
.deck-track:focus-visible { box-shadow: 0 0 0 1px var(--acc); }

.slide {
    flex: 0 0 100%;
    min-width: 0;
    position: relative;     /* anchors the .sr-only chart table inside its own slide */
    scroll-snap-align: start;
    min-height: 440px;
    padding: 38px 42px 34px;
    border: 1px solid var(--rule);
    clip-path: var(--clip-24);
    background: #ffffff05;
    display: flex; flex-direction: column;
}
.page-content .slide p,
.page-content .slide ul { margin-left: 0; }

.slide-k {
    font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
    font-size: .72rem; color: var(--acc); margin: 0 0 .7em;
}
.slide-h {
    font-size: clamp(1.3rem, 2.6vw, 1.9rem);
    text-transform: uppercase; font-weight: 700; letter-spacing: .01em;
    margin: 0 0 1.1em;
}
.slide-grid { display: grid; gap: 34px; flex: 1; }
.slide-grid.two   { grid-template-columns: 1.25fr 1fr; }
.slide-grid.three { grid-template-columns: repeat(3, 1fr); }
.slide-col { display: flex; flex-direction: column; gap: .55em; }
.slide-col b { font-size: 1.02rem; }
.slide-col > span { color: var(--fg-dim); font-size: .92rem; line-height: 1.5; }
.slide-foot { color: var(--fg-faint); font-size: .85rem; margin: 1.6em 0 0; }

.slide-col.here {
    border-left: 1px solid var(--acc);
    padding-left: 26px;
}
.here-k {
    font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em;
    font-size: .68rem; color: var(--acc); margin: 0;
}
.slide-cta { align-self: flex-start; margin-top: 1em; }

/* Horizontal bar chart — one series, so one hue and no legend; the title
   names it. Thin marks, 4px rounded data-end, 2px gap, direct labels. */
.chart-t { font-size: .82rem; color: var(--fg-dim); margin: 0 0 1em; }
.chart-s { font-size: .82rem; color: var(--fg-faint); margin: 1.1em 0 0; line-height: 1.5; }
.bars { display: flex; flex-direction: column; gap: 2px; }
.bar {
    display: grid; grid-template-columns: 9.5em 1fr;
    align-items: center; column-gap: 12px;
    padding: 6px 0; position: relative; cursor: default;
}
.bar-l { font-size: .78rem; color: var(--fg-dim); }
.bar-m {
    height: 16px; width: var(--v);
    background: var(--acc);
    border-radius: 0 4px 4px 0;
    grid-column: 2; grid-row: 1;
    transition: opacity .15s;
}
.bar-v {
    grid-column: 2; grid-row: 1; justify-self: start;
    margin-left: calc(var(--v) + 8px);
    font-size: .78rem; color: var(--fg);
    font-variant-numeric: tabular-nums;
}
.bar:last-child .bar-v { margin-left: 0; justify-self: end; padding-right: 8px; color: #000; font-weight: 600; }
.bars:hover .bar-m { opacity: .45; }
.bars .bar:hover .bar-m { opacity: 1; }
.bar::after {
    content: attr(data-tip);
    position: absolute; left: 9.5em; top: -24px; margin-left: 12px;
    background: #111; border: 1px solid var(--rule); color: var(--fg);
    font-size: .72rem; padding: 3px 8px; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 2;
}
.bar:hover::after { opacity: 1; }

.ledger { list-style: none; padding: 0; margin: 0; }
.ledger li {
    display: flex; justify-content: space-between; gap: 16px;
    padding: 9px 0; border-bottom: 1px solid var(--rule);
    font-size: .88rem; margin: 0;
}
.ledger li::marker { content: none; }
.ledger span { color: var(--fg-dim); }
.ledger i { font-style: normal; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }

.matrix-wrap { overflow-x: auto; flex: 1; }
.matrix { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 620px; }
.matrix th, .matrix td {
    text-align: left; vertical-align: top;
    padding: 10px 12px; border-bottom: 1px solid var(--rule);
}
.matrix thead th {
    font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;
    font-size: .68rem; color: var(--fg-faint); font-weight: 600;
}
.matrix tbody th { color: var(--fg-dim); font-weight: 600; width: 16%; }
.matrix td.me { width: 42%; }
.matrix td { color: var(--fg-dim); }
.matrix .me { color: var(--fg); background: var(--acc-lo); border-left: 1px solid var(--acc); }
.matrix thead .me { color: var(--acc); }

.deck-nav {
    display: flex; align-items: center; justify-content: flex-end; gap: 14px;
    margin-top: 14px;
}
.deck-btn {
    background: none; color: var(--fg);
    border: 1px solid var(--rule); width: 42px; height: 34px;
    font: inherit; cursor: pointer;
    clip-path: polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
    transition: border-color .15s, color .15s;
}
.deck-btn:hover { border-color: var(--acc); color: var(--acc); }
.deck-btn:disabled { opacity: .3; cursor: default; border-color: var(--rule); color: var(--fg); }
.deck-count {
    font-family: var(--cond); letter-spacing: .12em; font-size: .78rem;
    color: var(--fg-faint); min-width: 3.4em; text-align: center;
    font-variant-numeric: tabular-nums;
}
.sources { font-size: .82rem; color: var(--fg-faint); }
.sources li { margin-bottom: .7em; }

@media (max-width: 860px) {
    .slide-grid.two, .slide-grid.three { grid-template-columns: 1fr; gap: 24px; }
    .slide-col.here { border-left: none; border-top: 1px solid var(--acc); padding: 20px 0 0; }
}
@media (max-width: 760px) {
    .deck { margin-left: 0; }
    .slide { padding: 26px 20px 24px; min-height: 0; }
    .bar { grid-template-columns: 7.6em 1fr; }
    .bar::after { left: 7.6em; }
}
@media (prefers-reduced-motion: reduce) { .deck-track { scroll-behavior: auto; } }

/* ── Language switcher ───────────────────────────────────────────────────
   <details> so it opens without script; script.js only closes it on an
   outside click. Flags are inline SVG (see FLAGS in build.py). */
.lang { position: relative; align-self: center; }
.lang summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .72rem; letter-spacing: .1em; color: var(--fg-dim);
    padding: 6px 9px; border: 1px solid var(--rule); border-radius: 3px;
    white-space: nowrap;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary::after { content: '▾'; font-size: .6rem; opacity: .7; }
.lang[open] summary, .lang summary:hover { color: var(--acc); border-color: var(--acc-dim); }
.flag { width: 21px; height: 14px; flex: none; display: block; outline: 1px solid #ffffff33; }
.lang-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
    min-width: 170px; padding: 6px 0;
    background: #0b0b0b; border: 1px solid var(--rule);
    clip-path: var(--clip-14);
    display: flex; flex-direction: column;
}
.nav .lang-menu a, .lang-menu a {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 16px; border: none;
    text-transform: none; letter-spacing: .02em; font-size: .92rem;
    color: var(--fg-dim);
}
.lang-menu a:hover { color: var(--acc); background: #ffffff08; }
.lang-menu a[aria-current] { color: var(--fg); }
.lang-menu a[aria-current]::after { content: '•'; color: var(--acc); margin-left: auto; }
.head-m { display: none; align-items: center; gap: 10px; justify-self: end; }
/* Booking one tap away on phones, beside Menu: the visitors who click Book mostly arrive on a phone. */
.head-book {
    border: 1px solid var(--acc); color: var(--acc); font-family: var(--font); text-transform: uppercase;
    font-size: .72rem; letter-spacing: .1em; padding: 7px 11px; border-radius: 3px; white-space: nowrap; text-decoration: none;
}
.head-book:hover, .head-book:focus-visible { background: var(--acc); color: #000; }
@media (max-width: 760px) {
    .head-m { gap: 6px; }
    .menu-btn { padding: 7px 10px; white-space: nowrap; }
}
@media (max-width: 420px) {
    .wordmark { font-size: 1.12rem; letter-spacing: .14em; padding-left: .14em; }
}
.lang-m { display: none; }
@media (max-width: 760px) {
    .head-m { display: flex; }
    .lang-m { display: block; }
    .lang-m summary span { display: none; }   /* flag alone on phones */
}

/* ── Drifting equations ──────────────────────────────────────────────────
   Itô calculus in a soft teal, deliberately not the white/amber of the
   path canvas, and slower than it. Purely decorative: aria-hidden, no pointer
   events, and switched off for reduced motion. */
.eqs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.eq-f {
    position: absolute; left: 0; top: var(--y);
    white-space: nowrap;
    font-family: 'STIX Two Text', 'Cambria Math', 'Latin Modern Math', 'Times New Roman', Georgia, serif;
    font-style: italic; font-weight: 400;
    font-size: clamp(1.05rem, 1.7vw, 1.55rem);
    color: #74D4C4; opacity: .27;
    text-shadow: 0 0 16px rgba(116,212,196,.35);
    animation: eqdrift var(--d) linear var(--delay) infinite;
    will-change: transform;
}
.eq-f.rev { animation-name: eqdrift-rev; }
.eq-f sub, .eq-f sup { font-size: .62em; }
@keyframes eqdrift {
    from { transform: translate(-45vw, 0)      rotate(var(--r)); }
    to   { transform: translate(110vw, -5vh)   rotate(var(--r)); }
}
@keyframes eqdrift-rev {
    from { transform: translate(110vw, 0)      rotate(var(--r)); }
    to   { transform: translate(-45vw, 4vh)    rotate(var(--r)); }
}
@media (max-width: 760px) {
    .eq-f { font-size: .95rem; opacity: .21; }
    .eq-f:nth-child(n+5) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .eqs { display: none; } }

/* ── Slide deck, stage 2: its own panel, stands off the page ───────────── */
.deck {
    padding: 18px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(226,163,60,.10), transparent 55%),
        linear-gradient(165deg, #17181d 0%, #0d0e11 70%);
    border: 1px solid rgba(226,163,60,.38);
    clip-path: var(--clip-24);
}
.slide {
    background: linear-gradient(180deg, #1b1c22 0%, #121317 100%);
    border: 1px solid rgba(255,255,255,.10);
    position: relative;
}
.slide::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg, var(--acc), rgba(226,163,60,0) 70%);
}
.slide-h { font-size: clamp(1.45rem, 2.9vw, 2.15rem); }
.slide-col > span { color: #ffffffd0; }
.slide-col.here {
    background: rgba(226,163,60,.07);
    border-left: 2px solid var(--acc);
    padding: 18px 22px;
}
.ledger li { border-bottom-color: rgba(255,255,255,.12); }
.matrix .me { background: rgba(226,163,60,.16); }
.deck-nav { justify-content: space-between; margin-top: 16px; }
.deck-dots { display: flex; gap: 8px; align-items: center; }
.deck-dot {
    width: 26px; height: 4px; padding: 0; border: none; cursor: pointer;
    background: rgba(255,255,255,.22); transition: background .2s, width .2s;
}
.deck-dot[aria-current="true"] { background: var(--acc); width: 42px; }
.deck-ctrl { display: flex; align-items: center; gap: 14px; }
.deck-progress { height: 2px; background: rgba(255,255,255,.08); margin-top: 12px; overflow: hidden; }
.deck-progress i { display: block; height: 100%; width: 0; background: var(--acc-dim); }
.deck-progress i.run { animation: deckfill var(--deck-t, 9s) linear forwards; }
.deck.paused .deck-progress i.run { animation-play-state: paused; }
@keyframes deckfill { to { width: 100%; } }
@media (max-width: 760px) {
    .deck { padding: 10px; }
    .deck-dot { width: 16px; }
    .deck-dot[aria-current="true"] { width: 28px; }
}
@media (prefers-reduced-motion: reduce) { .deck-progress { display: none; } }

.nav a { white-space: nowrap; }
.nav .cta { white-space: nowrap; }
/* Flag switcher + three right-hand links no longer fit beside the logo below
   ~1100px, so the compact Menu header takes over there. */
@media (max-width: 1300px) {
    header { grid-template-columns: 1fr auto; }
    .nav { display: none; }
    .menu-btn { display: block; }
    header .logo { text-align: left; }
    .head-m { display: flex; }
    .lang-m { display: block; }
}

/* Linked city chips: same chip as the spans, with a hint of the accent */
.geo a { color: var(--fg); border-color: var(--acc-lo); }

/* ── Quant question bank ─────────────────────────────────────────────────
   KaTeX output is pre-rendered by tools/qbank/render.mjs. */
[hidden] { display: none !important; }
.qmeta { margin-left: var(--indent); color: var(--fg-dim); font-size: .85rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.qbank { display: grid; gap: 14px; }
.qcard {
    margin-left: var(--indent); max-width: 880px;
    padding: 20px 24px 16px;
    background: linear-gradient(180deg, #16171c, #111216);
    border: 1px solid rgba(255,255,255,.09);
    clip-path: var(--clip-14);
}
.page-content .qcard p, .page-content .qcard ol { margin-left: 0; }
.qhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.qnum {
    font-family: var(--cond); font-weight: 600; color: var(--acc);
    min-width: 30px; font-size: .95rem; letter-spacing: .05em;
}
.qdiff { font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; padding: 3px 8px; border: 1px solid; }
.qdiff-E { color: #7fd6a6; border-color: #7fd6a655; }
.qdiff-M { color: #e9c46a; border-color: #e9c46a55; }
.qdiff-H { color: #f08a7a; border-color: #f08a7a55; }
/* Status badges. Sections ship in stages; say plainly which stage a thing is at
   rather than letting a visitor discover it half-built. */
.stat-badge {
    display: inline-block; vertical-align: 3px; margin-left: 10px;
    padding: 2px 8px 1px; font-size: .58rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%);
}
.stat-badge.early  { color: #0b0f2e; background: var(--acc); }
.stat-badge.dev    { color: #cfcfcf; background: #2a2a2a; border: 1px solid #3d3d3d; }
.stat-badge.soon   { color: #9ba8b6; background: transparent; border: 1px solid #39414a; }
h1 .stat-badge, h2 .stat-badge, h3 .stat-badge { vertical-align: middle; }
.qp-door .stat-badge { margin-left: 8px; }
@media (max-width: 560px) { .stat-badge { margin-left: 6px; font-size: .54rem; } }

.qfirms-lab {
    font-size: .56rem; letter-spacing: .12em; text-transform: uppercase;
    color: #6f6f6f; align-self: center; margin-right: 2px;
}
.qfirm.has-logo { display: inline-flex; align-items: center; padding: 2px 6px; }
/* The marks are wordmarks of differing widths, so fix the height and let width follow.
   They are supplied as black artwork; inverting puts them on the dark ground at one
   visual weight, so no brand shouts louder than another. */
.qfirm-logo {
    height: 13px; width: auto; max-width: 104px; display: block;
    filter: invert(1) grayscale(1); opacity: .72;
    transition: opacity .2s var(--ease);
}
.qfirm.has-logo:hover .qfirm-logo { opacity: 1; }
.qfirm.has-logo .qfirm-name {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;   /* the mark already says the name */
}

.qfirms { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; }
.qfirm {
    font-size: .68rem; letter-spacing: .03em; color: #cfd6e6;
    background: rgba(143,180,216,.10); border: 1px solid rgba(143,180,216,.22);
    padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.qtext { font-size: 1.02rem; line-height: 1.6; }
.qopts { margin: 12px 0 4px 1.2em !important; list-style: upper-alpha; color: var(--fg-dim); font-size: .95rem; }
.qopts li { margin-bottom: .3em; }
.qreveal { margin-top: 12px; }
.qreveal summary {
    display: inline-block; cursor: pointer; list-style: none;
    font-size: .74rem; text-transform: uppercase; letter-spacing: .12em;
    padding: 7px 14px; border: 1px solid var(--acc-dim); color: var(--acc);
    border-radius: 3px; transition: background .15s;
}
.qreveal summary::-webkit-details-marker { display: none; }
.qreveal summary:hover { background: rgba(226,163,60,.10); }
.qreveal[open] summary { color: var(--fg-dim); border-color: var(--rule); }
.qans { margin-top: 12px; font-size: 1rem; }
.qsol { margin-top: 6px; color: #ffffffcc; font-size: .95rem; line-height: 1.6; border-left: 2px solid var(--acc-lo); padding-left: 14px; }
.katex { font-size: 1.06em; }
.qtext .katex-display, .qsol .katex-display { margin: .6em 0; overflow-x: auto; overflow-y: hidden; }
@media (max-width: 760px) {
    .qcard { margin-left: 0; padding: 16px 16px 12px; }
    .qfirms { margin-left: 0; width: 100%; }
    .qmeta { margin-left: 0; }
}

/* ── Timed quiz: its own indigo stage, deliberately not the black site ── */
.qz {
    --qz-bg1: #151a3d; --qz-bg2: #0c1030; --qz-ink: #eef1ff; --qz-dim: #b7bee6;
    --qz-line: rgba(183,190,230,.20); --qz-good: #5fd39a; --qz-bad: #ff7a70;
    margin-left: var(--indent); max-width: 920px;
    padding: 30px 32px 34px;
    color: var(--qz-ink);
    background:
        radial-gradient(90% 70% at 100% 0%, rgba(116,212,196,.16), transparent 60%),
        radial-gradient(70% 60% at 0% 100%, rgba(226,163,60,.12), transparent 60%),
        linear-gradient(160deg, var(--qz-bg1), var(--qz-bg2));
    border: 1px solid rgba(183,190,230,.28);
    clip-path: var(--clip-24);
    position: relative;
}
.page-content .qz p, .page-content .qz ol { margin-left: 0; }
.qz-k { font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em; font-size: .75rem; color: #74D4C4; margin: 0 0 14px; }
.qz-banks { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.qz-bank {
    text-align: left; cursor: pointer; font: inherit; color: var(--qz-ink);
    background: rgba(255,255,255,.05); border: 1px solid var(--qz-line);
    padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
    clip-path: var(--clip-14); transition: transform .15s, border-color .15s, background .15s;
}
.qz-bank:hover { transform: translateY(-2px); border-color: #74D4C4; background: rgba(116,212,196,.10); }
.qz-bank b { font-size: 1.02rem; }
.qz-bank span { font-size: .8rem; color: var(--qz-dim); }
.qz-best { font-style: normal; font-size: .74rem; color: var(--acc); min-height: 1em; }
.qz-mixed { border-color: rgba(226,163,60,.45); }
.qz-note { font-size: .82rem; color: var(--qz-dim); margin-top: 16px; }
.qz-note code { background: rgba(255,255,255,.08); padding: 1px 5px; border-radius: 3px; }

.qz-top { display: flex; align-items: center; gap: 14px; font-size: .85rem; color: var(--qz-dim); }
.qz-streak { color: var(--acc); font-weight: 600; }
.qz-ring { width: 44px; height: 44px; margin-left: auto; transform: rotate(-90deg); }
.qz-ring circle { fill: none; stroke-width: 3.5; }
.qz-ring circle:first-child { stroke: rgba(255,255,255,.12); }
.qz-ring-fg { stroke: #74D4C4; stroke-linecap: round; transition: stroke .3s; }
.qz-hurry .qz-ring-fg { stroke: var(--qz-bad); }
.qz-time { min-width: 2.4em; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--qz-ink); }
.qz-bar { height: 3px; background: rgba(255,255,255,.10); margin: 14px 0 22px; }
.qz-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #74D4C4, var(--acc)); transition: width .3s; }
.qz-q { font-size: 1.22rem; line-height: 1.6; min-height: 3.2em; }
.qz-form { margin-top: 20px; }
.qz-opts { display: grid; gap: 10px; }
.qz-opt {
    display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
    font: inherit; color: var(--qz-ink); padding: 12px 16px;
    background: rgba(255,255,255,.05); border: 1px solid var(--qz-line); border-radius: 4px;
    transition: border-color .15s, background .15s;
}
.qz-opt:hover:not(:disabled) { border-color: #74D4C4; background: rgba(116,212,196,.10); }
.qz-letter { font-family: var(--cond); font-weight: 600; color: #74D4C4; width: 1.2em; }
.qz-opt.ok { border-color: var(--qz-good); background: rgba(95,211,154,.14); }
.qz-opt.no { border-color: var(--qz-bad); background: rgba(255,122,112,.14); }
.qz-numrow { display: flex; gap: 10px; }
.qz-input {
    flex: 1; font: inherit; font-size: 1.15rem; color: var(--qz-ink);
    background: rgba(255,255,255,.07); border: 1px solid var(--qz-line); border-radius: 4px;
    padding: 12px 14px; outline: none;
}
.qz-input:focus { border-color: #74D4C4; box-shadow: 0 0 0 3px rgba(116,212,196,.18); }
.qz .cta { color: var(--qz-ink); }
.qz-flash { min-height: 1.6em; margin-top: 14px; font-weight: 600; letter-spacing: .02em; }
.qz-flash.ok { color: var(--qz-good); } .qz-flash.no { color: var(--qz-bad); } .qz-flash.warn { color: var(--acc); }

.qz-score { display: flex; align-items: baseline; gap: 10px; }
.qz-score b { font-size: 4rem; line-height: 1; font-weight: 700; }
.qz-score span { font-size: 1.4rem; color: var(--qz-dim); }
.qz-score em { font-style: normal; margin-left: 14px; font-size: 1.4rem; color: #74D4C4; }
.qz-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.qz-stats span { font-size: .8rem; padding: 4px 10px; border: 1px solid var(--qz-line); border-radius: 999px; color: var(--qz-dim); }
.qz-stats .qz-pb { color: #0c1030; background: var(--acc); border-color: var(--acc); font-weight: 600; }
.qz-rh { margin: 28px 0 12px; font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; }
.qz-review { list-style: none; padding: 0; display: grid; gap: 10px; }
.qz-review li { margin: 0; padding: 14px 16px; background: rgba(255,255,255,.04); border-left: 3px solid var(--qz-good); }
.qz-review li.no { border-left-color: var(--qz-bad); }
.qz-review li::marker { content: none; }
.qz-rq { font-size: .98rem; }
.qz-ra { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 8px; font-size: .86rem; color: var(--qz-dim); }
.qz-review details { margin-top: 8px; font-size: .9rem; }
.qz-review summary { cursor: pointer; color: #74D4C4; }
@media (max-width: 760px) {
    .qz { margin-left: 0; padding: 20px 16px 24px; }
    .qz-q { font-size: 1.08rem; }
    .qz-score b { font-size: 3rem; }
}

/* ─── Quant prep (/quant-prep, home band, nav) ─────────────────── */
.qp-hero, .qp-band, .qp-close {
    --qp-bg1: #171d47; --qp-bg2: #0b0f2e; --qp-ink: #eef1ff; --qp-dim: #b7bee6;
    --qp-line: rgba(183,190,230,.22); --qp-teal: #74D4C4;
}
.qp-hero {
    position: relative; margin-top: 3vh;
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center;
    padding: 56px 56px 60px;
    color: var(--qp-ink);
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(116,212,196,.20), transparent 60%),
        radial-gradient(55% 70% at 0% 100%, rgba(226,163,60,.16), transparent 62%),
        linear-gradient(155deg, var(--qp-bg1), var(--qp-bg2));
    border: 1px solid rgba(183,190,230,.28);
    clip-path: var(--clip-24);
    overflow: hidden;
}
.qp-hero::before {   /* faint grid, like graph paper */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(183,190,230,.06) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(183,190,230,.06) 1px, transparent 1px);
    background-size: 36px 36px;
    mask-image: linear-gradient(90deg, #000 0%, transparent 75%);
}
.qp-hero > * { position: relative; }
.page-content .qp-hero p, .page-content .qp-band p, .page-content .qp-close p { margin-left: 0; }
.qp-eyebrow { font-family: var(--cond); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--qp-teal); margin: 0 0 18px; }
.qp-h1 { font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: .95; margin: 0 0 22px; text-transform: uppercase; font-weight: 700; color: #fff; }
.qp-sub { font-size: 1.12rem; line-height: 1.6; color: var(--qp-dim); max-width: 34em; margin: 0 0 30px; }
.qp-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.qp-btn {
    display: inline-block; border: 1px solid var(--acc); background: var(--acc); color: #111 !important;
    font-family: var(--font); text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700;
    padding: 15px 24px; clip-path: var(--clip-14); border-bottom: 1px solid var(--acc);
    transition: transform .15s, background .15s;
}
.qp-btn:hover { transform: translateY(-2px); background: #f0b654; }
.qp-btn.ghost { background: transparent; color: var(--qp-ink) !important; border-color: rgba(238,241,255,.45); }
.qp-btn.ghost:hover { border-color: var(--qp-teal); background: rgba(116,212,196,.10); }
.qp-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 34px; margin: 38px 0 0; padding-top: 24px; border-top: 1px solid var(--qp-line); }
.qp-stats div { margin: 0; }
.qp-stats dt { font-size: 2.1rem; font-weight: 700; color: #fff; line-height: 1; }
.qp-stats dd { margin: 6px 0 0; font-size: .78rem; color: var(--qp-dim); text-transform: uppercase; letter-spacing: .1em; }

/* Interactive sample question */
.qp-demo {
    background: rgba(9,12,36,.72); border: 1px solid rgba(116,212,196,.35);
    padding: 24px 26px 20px; clip-path: var(--clip-24);
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    transform: rotate(-1.2deg);
    transition: transform .4s cubic-bezier(.19,1,.22,1);
}
.qp-demo:hover, .qp-demo.done { transform: none; }
.qp-demo-top { display: flex; align-items: center; gap: 12px; font-size: .78rem; color: var(--qp-dim); }
.qp-demo-count { flex: 1; }
.qp-demo-streak { color: var(--acc); font-weight: 700; }
.qp-ring { width: 34px; height: 34px; transform: rotate(-90deg); }
.qp-ring circle { fill: none; stroke: var(--qp-line); stroke-width: 4; }
.qp-ring .qp-ring-fg { stroke: var(--qp-teal); stroke-dasharray: 119.4; stroke-dashoffset: 0; animation: qp-count 75s linear infinite; }
.qp-demo.done .qp-ring-fg { animation-play-state: paused; }
@keyframes qp-count { to { stroke-dashoffset: 119.4; } }
.qp-demo-bar { height: 3px; background: var(--qp-line); margin: 14px 0 18px; }
.qp-demo-bar i { display: block; height: 100%; width: 20%; background: linear-gradient(90deg, var(--qp-teal), var(--acc)); }
.qp-demo-q { font-size: 1.15rem; color: #fff; margin-bottom: 16px; }
.qp-demo-opts { display: grid; gap: 8px; }
.qp-demo-opts button {
    display: flex; align-items: center; gap: 14px; text-align: left; cursor: pointer;
    font: inherit; color: var(--qp-ink); padding: 11px 14px;
    background: rgba(255,255,255,.05); border: 1px solid var(--qp-line);
    transition: border-color .15s, background .15s;
}
.qp-demo-opts button:hover:not(:disabled) { border-color: var(--qp-teal); background: rgba(116,212,196,.08); }
.qp-demo-opts .qp-l { font-family: var(--cond); font-weight: 700; color: var(--qp-teal); width: 1em; }
.qp-demo-opts button.ok { border-color: #5fd39a; background: rgba(95,211,154,.14); }
.qp-demo-opts button.no { border-color: #ff7a70; background: rgba(255,122,112,.12); }
.qp-demo-opts button:disabled { cursor: default; }
.qp-demo-sol { margin-top: 14px; font-size: .92rem; line-height: 1.55; color: var(--qp-dim); border-left: 2px solid var(--qp-teal); padding-left: 12px; }
.qp-demo-sol b { color: #fff; }
.qp-demo-hint { margin: 14px 0 0; font-size: .78rem; color: var(--qp-dim); opacity: .8; }

/* Topic tiles */
.qp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.qp-tile {
    display: flex; flex-direction: column; color: #eef1ff;
    background: linear-gradient(165deg, #161b42, #0d1133);
    border: 1px solid rgba(183,190,230,.20); clip-path: var(--clip-24);
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.qp-tile:hover { transform: translateY(-4px); border-color: rgba(116,212,196,.6); box-shadow: 0 18px 40px rgba(0,0,0,.4); }
.qp-tile-main { display: flex; flex-direction: column; gap: 10px; padding: 26px 26px 18px; border-bottom: none; color: inherit; flex: 1; }
.qp-glyph { width: 52px; height: 52px; fill: none; stroke: #74D4C4; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.qp-glyph .f { fill: #74D4C4; stroke: none; }
.qp-glyph .acc { stroke: var(--acc); }
.qp-glyph rect.acc { fill: rgba(226,163,60,.25); }
.qp-glyph rect:not(.acc):not([rx]) { fill: rgba(116,212,196,.18); }
.qp-glyph .dim { stroke: rgba(183,190,230,.35); }
.qp-tile h3 { font-size: 1.25rem; margin: 0; color: #fff; text-transform: none; letter-spacing: 0; }
.qp-tile p { font-size: .93rem; line-height: 1.5; color: #b7bee6; margin: 0; }
.page-content .qp-tile p { margin-left: 0; max-width: none; }
.qp-diff { display: flex; height: 5px; margin-top: 8px; background: rgba(255,255,255,.06); }
.qp-diff i { display: block; height: 100%; }
.qp-diff .e { background: #74D4C4; } .qp-diff .m { background: var(--acc); } .qp-diff .h { background: #ff7a70; }
.qp-diff-k { font-size: .75rem; color: #b7bee6; }
.qp-firms { font-size: .75rem; color: rgba(238,241,255,.55); letter-spacing: .02em; }
.qp-tile-go { display: flex; border-top: 1px solid rgba(183,190,230,.18); }
.qp-tile-go a { flex: 1; padding: 14px 18px; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: #eef1ff; border-bottom: none; }
.qp-tile-go a:hover { background: rgba(116,212,196,.10); color: #fff; }
.qp-tile-go .qp-timed { border-left: 1px solid rgba(183,190,230,.18); color: #74D4C4; text-align: right; }
.qp-mixed {
    display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 16px;
    padding: 20px 26px; color: #eef1ff; border: 1px solid rgba(226,163,60,.5); border-bottom: 1px solid rgba(226,163,60,.5);
    background: linear-gradient(90deg, rgba(226,163,60,.14), rgba(116,212,196,.06)); clip-path: var(--clip-14);
}
.qp-mixed b { color: var(--acc); margin-right: 10px; text-transform: uppercase; letter-spacing: .1em; font-size: .85rem; }
.qp-mixed:hover { background: linear-gradient(90deg, rgba(226,163,60,.24), rgba(116,212,196,.1)); }
.qp-mixed-go { font-weight: 700; color: var(--acc); white-space: nowrap; }

/* Steps */
.qp-steps { list-style: none; counter-reset: s; padding: 0; margin: 26px 0 0 var(--indent); display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; max-width: 1000px; }
.qp-steps li { counter-increment: s; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--rule); padding-top: 18px; }
.qp-steps li::before { content: "0" counter(s); font-family: var(--cond); font-size: 2.4rem; font-weight: 700; color: var(--acc); line-height: 1; }
.qp-steps b { font-size: 1.05rem; color: var(--fg); }
.qp-steps span { font-size: .93rem; color: var(--fg-dim); line-height: 1.55; }

/* Closing band */
.qp-close {
    display: grid; grid-template-columns: 1.4fr auto; gap: 40px; align-items: center;
    padding: 40px 44px; margin-top: 30px; color: var(--qp-ink);
    background: linear-gradient(155deg, var(--qp-bg1), var(--qp-bg2)); border: 1px solid rgba(183,190,230,.25); clip-path: var(--clip-24);
}
.qp-close h2 { margin: 0 0 10px; color: #fff; }
.qp-close p { color: var(--qp-dim); margin: 0; max-width: 38em; line-height: 1.6; }

/* Home / quant-page band */
.qp-band {
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center;
    padding: 44px 48px; color: var(--qp-ink);
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(116,212,196,.18), transparent 60%),
        linear-gradient(155deg, var(--qp-bg1), var(--qp-bg2));
    border: 1px solid rgba(183,190,230,.28); clip-path: var(--clip-24);
}
.qp-band h2 { margin: 0 0 14px; color: #fff; }
.qp-band .qp-sub { font-size: 1.02rem; margin-bottom: 24px; }
.qp-band-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.qp-band-grid a {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 14px;
    background: rgba(255,255,255,.04); border: 1px solid var(--qp-line); border-bottom: 1px solid var(--qp-line);
    color: var(--qp-ink); font-size: .82rem; clip-path: var(--clip-14); transition: border-color .15s, background .15s, transform .15s;
}
.qp-band-grid a:hover { border-color: var(--qp-teal); background: rgba(116,212,196,.10); transform: translateY(-2px); }
.qp-band-grid .qp-glyph { width: 34px; height: 34px; margin: 0; }
.qp-band-grid span { color: var(--qp-dim); font-size: .72rem; }

/* Nav: the Quant prep link carries a small "free" tag */
.nav a.nav-hot { color: var(--fg); }
.nav a.nav-hot::after {
    content: attr(data-tag); margin-left: 6px; padding: 1px 5px 0; font-size: .6rem; letter-spacing: .1em;
    color: #0b0f2e; background: #74D4C4; vertical-align: 2px;
}

@media (max-width: 1000px) {
    .qp-hero, .qp-band { grid-template-columns: 1fr; padding: 40px 32px; gap: 36px; }
    .qp-tiles { grid-template-columns: repeat(2, 1fr); }
    .qp-close { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .qp-hero, .qp-band, .qp-close { padding: 30px 20px; }
    .qp-stats { grid-template-columns: repeat(2, auto); gap: 20px 34px; }
    .qp-tiles, .qp-steps { grid-template-columns: 1fr; }
    .qp-steps { margin-left: 0; }
    .qp-demo { transform: none; padding: 20px 18px; }
    .qp-mixed { flex-direction: column; align-items: flex-start; }
    .qp-band-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Practice banks: figures, tables, GRE comparison, GMAT data sufficiency ─── */
.qstem { margin: 0; }
.qfig { margin: 2px 0 16px; padding: 14px 16px 10px; background: rgba(255,255,255,.025); border: 1px solid rgba(255,255,255,.09); }
.qfig figcaption { font-size: .82rem; letter-spacing: .02em; color: #c9cfe3; margin: 0 0 8px; font-weight: 700; }
.qchart { display: block; width: 100%; height: auto; max-width: 640px; }
.qchart text { font-family: var(--font); font-size: 12px; fill: #a9b0c9; }
.qchart .cl { font-size: 11.5px; letter-spacing: .04em; }
.qchart .cv { fill: #eef1ff; font-size: 11px; font-weight: 700; }
.qchart .cs { font-size: 10px; font-weight: 400; fill: #c9cfe3; }
.qchart .cd { fill: #0b0f2e; font-size: 12px; }
.qchart .cb { fill: #e6e9f5; font-size: 13px; }
.qchart .cg { stroke: rgba(255,255,255,.07); }
.qchart .ca { stroke: rgba(255,255,255,.32); }
.qchart polyline { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.qchart .c0 { fill: #74D4C4; } .qchart .c1 { fill: #E2A33C; } .qchart .c2 { fill: #ff8a7a; }
.qchart .c3 { fill: #a99cff; } .qchart .c4 { fill: #6fb3ff; } .qchart .c5 { fill: #e6d27a; }
.qchart .k0 { stroke: #74D4C4; } .qchart .k1 { stroke: #E2A33C; } .qchart .k2 { stroke: #ff8a7a; }
.qtable-wrap { overflow-x: auto; }
.qtable { border-collapse: collapse; width: 100%; font-size: .9rem; font-variant-numeric: tabular-nums; }
.qtable th, .qtable td { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.08); text-align: right; white-space: nowrap; }
.qtable th { color: var(--acc); font-weight: 700; font-size: .8rem; letter-spacing: .02em; }
.qtable th:first-child, .qtable td:first-child { text-align: left; }
.qtable tbody tr:hover { background: rgba(255,255,255,.03); }
.qcmp { margin: 14px 0 6px; }
.qc-given { text-align: center; font-style: italic; color: #c9cfe3; margin: 0 0 10px !important; max-width: none !important; }
.qc-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid rgba(255,255,255,.14); }
.qc-grid > div { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 12px 16px; text-align: center; }
.qc-grid > div + div { border-left: 1px solid rgba(255,255,255,.14); }
.qc-grid > div > span { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); }
.qc-grid b { font-weight: 400; font-size: 1.05rem; }
.qds { list-style: none; padding: 0; margin: 12px 0 4px !important; display: grid; gap: 6px; }
.qds li { display: flex; gap: 12px; padding: 8px 12px; background: rgba(255,255,255,.03); border-left: 2px solid var(--acc); }
.qds .qds-n { color: var(--acc); font-weight: 700; flex: none; }
.qds .qds-t { flex: 1; }
.qlvl { font-size: .72rem; letter-spacing: .03em; padding: 2px 9px; border-radius: 999px; color: #9fe3d7; border: 1px solid rgba(116,212,196,.4); background: rgba(116,212,196,.08); white-space: nowrap; }
.qlvl-p { margin-left: auto; }
.qp-scale { margin: 18px 0 0 var(--indent); max-width: 720px; height: 34px; position: relative;
    background: linear-gradient(90deg, #74D4C4, #E2A33C 70%, #ff7a70); clip-path: var(--clip-14); }
.qp-scale span { position: absolute; left: calc((var(--p) - 50) * 2%); top: 50%; transform: translate(-50%, -50%); font-size: .74rem; font-weight: 700; color: #0b0f2e; }
.qp-scale span:first-child { transform: translate(0, -50%); }
.qp-scale span:last-child { transform: translate(-100%, -50%); }
.qp-band + .qp-band { margin-top: 18px; }
.qp-stack { display: grid; gap: 0; }
.qp-band-all .qp-band-grid { grid-template-columns: repeat(2, 1fr); }
.qz-otext { flex: 1; }
.qz-rl { display: inline-block; margin-bottom: 6px; font-size: .72rem; color: #9fe3d7; }
.qz-next { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: 22px 0 6px; padding: 16px 20px;
    border: 1px solid rgba(226,163,60,.45); background: rgba(226,163,60,.08); clip-path: var(--clip-14); }
.qz-next p { margin: 0 !important; flex: 1; min-width: 220px; color: var(--qz-ink); }
.qz .qfig { background: rgba(0,0,0,.18); }
@media (max-width: 760px) {
    .qc-grid { grid-template-columns: 1fr; }
    .qc-grid > div + div { border-left: none; border-top: 1px solid rgba(255,255,255,.14); }
    .qp-scale { margin-left: 0; }
    .qlvl-p { margin-left: 0; }
}

/* ─── Exit prompt ────────────────────────────────────────────────── */
.xi { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
    background: rgba(3,4,12,.62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .25s ease; }
.xi.on { opacity: 1; }
.xi-card { position: relative; width: min(540px, 100%); padding: 38px 38px 30px; color: #eef1ff;
    background:
        radial-gradient(70% 80% at 100% 0%, rgba(116,212,196,.20), transparent 60%),
        radial-gradient(60% 70% at 0% 100%, rgba(226,163,60,.16), transparent 62%),
        linear-gradient(155deg, #171d47, #0b0f2e);
    border: 1px solid rgba(183,190,230,.3); clip-path: var(--clip-24);
    box-shadow: 0 40px 100px rgba(0,0,0,.6);
    transform: translateY(12px) scale(.98); transition: transform .35s cubic-bezier(.19,1,.22,1); }
.xi.on .xi-card { transform: none; }
.xi-k { font-family: var(--cond); text-transform: uppercase; letter-spacing: .18em; font-size: .74rem; color: #74D4C4; margin: 0 0 12px; }
.xi-card h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.5rem, 3.6vw, 2rem); line-height: 1.1; }
.xi-card p.xi-p { color: #b7bee6; line-height: 1.6; margin: 0 0 24px; }
.xi-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.xi-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; background: none; border: none; color: #b7bee6; font-size: 1.5rem; cursor: pointer; line-height: 1; }
.xi-x:hover { color: #fff; }
.xi-no { display: inline-block; margin-top: 18px; background: none; border: none; padding: 0; font: inherit; font-size: .82rem; color: #8d94bd; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.xi-no:hover { color: #eef1ff; }
@media (prefers-reduced-motion: reduce) { .xi, .xi-card { transition: none; } }
@media (max-width: 760px) { .xi-card { padding: 32px 22px 24px; } }
.qbank > .qcard { min-width: 0; }   /* grid items must be allowed to shrink below a wide table */

/* ═══ Exam window (quiz.js): white test screen modelled on real test interfaces ═══ */
html.xm-lock, html.xm-lock body { overflow: hidden; }
.xm {
    position: fixed; inset: 0; z-index: 960; display: flex; flex-direction: column;
    background: #fff; color: #1b1b1b; font: 16px/1.6 Arial, Helvetica, sans-serif; letter-spacing: 0;
    --xm-bar: #0c2b4b; --xm-bar-ink: #fff; --xm-accent: #0f5ea8;
}
.xm * { box-sizing: border-box; }
.xm button { font: inherit; cursor: pointer; }
.xm button:disabled { opacity: .45; cursor: default; }
.xm .katex { font-size: 1.07em; color: inherit; }
.xm-top { flex: none; display: flex; align-items: center; gap: 16px; min-height: 54px; padding: 8px 20px; background: var(--xm-bar); color: var(--xm-bar-ink); }
.xm-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xm-title span { font-weight: 400; opacity: .8; }
.xm-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.xm-count { font-size: 14px; white-space: pre; }
.xm-body { flex: 1; overflow: auto; background: #fff; }
.xm-page { max-width: 860px; margin: 0 auto; padding: 34px 28px 60px; }
.xm-foot { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 20px; }
.xm-foot-l, .xm-foot-r { display: flex; gap: 10px; flex-wrap: wrap; }
.xm-dir { font-size: 14px; color: #3b3b3b; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid #dcdcdc; }
.xm-q { font-size: 16.5px; }
.xm-q p { margin: 0 0 12px; }
.xm-h { font: 700 22px/1.3 Arial, Helvetica, sans-serif; margin: 0 0 12px; color: #1b1b1b; text-transform: none; letter-spacing: 0; }
.xm-edits { margin-top: 18px; font-size: 14px; color: #8a4b00; }

/* answer choices */
.xm-opts { display: grid; gap: 6px; margin: 22px 0 0; }
.xm-opt { display: flex; align-items: center; gap: 14px; padding: 9px 12px; border-radius: 3px; cursor: pointer; border: 1px solid transparent; }
.xm-opt:hover { background: #f2f5f9; }
.xm-opt.on { background: #e8f0fa; border-color: #b9cfe8; }
.xm-opt.off { cursor: not-allowed; opacity: .65; }
.xm-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.xm-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #4a4a4a; background: #fff; position: relative; }
.xm-opt.on .xm-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #1b1b1b; }
.xm-opt input:focus-visible + .xm-dot { outline: 2px solid var(--xm-accent); outline-offset: 2px; }
/* Select one or more: square boxes, as on the GRE, so the format is visible before the directions are read. */
.xm-opts.xm-ms .xm-dot { border-radius: 2px; }
.xm-opts.xm-ms .xm-opt.on .xm-dot::after { content: "✓"; inset: 0; border-radius: 0; background: none; color: #1b1b1b; font-size: 15px; font-weight: 700; line-height: 18px; text-align: center; }
.qms { margin: 10px 0 0; font-size: .82rem; font-style: italic; color: var(--fg-dim); }
.xm-let { flex: none; font-weight: 700; width: 1.2em; color: #333; }

/* Option elimination — the strike-out the official GMAT and GRE software provide.
   The row wraps the label so the cross sits outside the clickable answer. */
/* ── Course syllabus ────────────────────────────────────────────────
   One view of the whole course. Modules are numbered so the order reads as
   deliberate; every row is a link, because a syllabus nobody can click is a
   picture of a course rather than a course. */
/* Available to screen readers and to the document outline, invisible on screen.
   Used where a section needs a heading for structure but the design already
   carries the label some other way. */
.h-quiet { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.cx-lede { margin-left: var(--indent); max-width: var(--measure); color: var(--fg-dim); }
.cx-syl { list-style: none; margin: 30px 0 0 var(--indent); padding: 0; max-width: var(--measure); }
.cx-syl-mod { margin-bottom: 26px; border: 1px solid var(--rule); clip-path: var(--clip-24); background: #ffffff04; }
.cx-syl-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; padding: 20px 22px 16px; border-bottom: 1px solid var(--rule); }
.cx-syl-num { font-size: .72rem; font-weight: 700; letter-spacing: .14em; color: var(--acc); padding-top: 4px; }
.cx-syl-head h3 { margin: 0 0 6px; font-size: 1.02rem; }
.cx-syl-head h3 a { color: var(--fg); text-decoration: none; }
.cx-syl-head h3 a:hover { color: var(--acc); }
.cx-syl-head p { margin: 0; font-size: .86rem; color: var(--fg-dim); }
.cx-syl-mins { font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #6f6f6f; white-space: nowrap; padding-top: 5px; }
.cx-syl-items { list-style: none; margin: 0; padding: 6px 0; }
.cx-syl-item a { display: grid; grid-template-columns: 74px 1fr auto auto; gap: 12px; align-items: center;
    padding: 9px 22px; text-decoration: none; color: var(--fg); transition: background .15s; }
.cx-syl-item a:hover { background: #ffffff08; }
.cx-syl-kind { font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: #6f6f6f; }
.cx-is-problem .cx-syl-kind { color: var(--acc); }
.cx-syl-title { font-size: .9rem; }
.cx-syl-item a:hover .cx-syl-title { color: var(--acc); }
.cx-syl-diff { font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; padding: 1px 7px; border: 1px solid var(--rule); border-radius: 2px; color: #9a9a9a; }
.cx-d-E { color: #8fbf9a; border-color: #2f4a35; }
.cx-d-M { color: #d9ae62; border-color: #4a3c22; }
.cx-d-H { color: #d18a80; border-color: #4a2c28; }
.cx-syl-time { font-size: .68rem; color: #6f6f6f; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
    .cx-syl, .cx-lede { margin-left: 0; }
    .cx-syl-item a { grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 16px; }
    .cx-syl-kind { grid-column: 1 / -1; }
    .cx-syl-head { padding: 16px; gap: 10px; }
}

.xm-orow { display: flex; align-items: center; gap: 6px; }
.xm-orow .xm-opt { flex: 1 1 auto; }
.xm-strike {
    flex: none; width: 26px; height: 26px; line-height: 1; border-radius: 3px;
    border: 1px solid transparent; background: none; color: #97a3b4;
    font-size: .8rem; cursor: pointer; opacity: 0;
    transition: opacity .15s, color .15s, border-color .15s;
}
.xm-orow:hover .xm-strike, .xm-strike:focus-visible { opacity: 1; }
.xm-strike:hover { color: #1b1b1b; border-color: #b9cfe8; }
.xm-orow.struck .xm-strike { opacity: 1; color: #6c7a8a; }
.xm-orow.struck .xm-opt { opacity: .45; }
.xm-orow.struck .xm-otext { text-decoration: line-through; text-decoration-thickness: 1px; }
.xm-orow.struck .xm-let { text-decoration: line-through; }

/* The exam's key legend — quiet, under the answers, out of the way of the question. */
.xm-keys {
    margin-top: 40px;
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: #9aa7b6;
}
.xm-keys b { font-weight: 700; color: #7b8896; letter-spacing: .12em; }
.xm-keys kbd {
    font: inherit; text-transform: none; padding: 1px 5px; border-radius: 3px;
    border: 1px solid #ccd5df; background: #fff; color: #44505e;
}
@media (max-width: 860px) { .xm-keys { display: none; } }

/* Pacing against the exam's own per-question budget, shown in the review. */
.qz-pace { font-variant-numeric: tabular-nums; }
.qz-pace.slow { color: var(--acc); }
.qz-pace.fast { color: #7ea88f; }

.xm-otext { flex: 1; }
.xm-numwrap { margin-top: 22px; }
.xm-num { width: 200px; height: 42px; padding: 0 12px; border: 1px solid #5a5a5a; border-radius: 2px; font: 17px Arial, Helvetica, sans-serif; color: #111; background: #fff; }
.xm-num:focus { outline: 2px solid var(--xm-accent); outline-offset: 1px; }

/* stimulus: GMAT split screen, stacked elsewhere */
.xm-page.xm-split { max-width: none; height: 100%; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.xm-stim, .xm-qpane { overflow: auto; padding: 28px 28px 50px; }
.xm-stim { border-right: 3px solid #cfd6de; background: #fbfbfc; }
.xm-stim-top { margin-bottom: 18px; }

/* charts, tables, comparison and sufficiency layouts on the white screen */
.xm .qfig { background: #fff; border: 1px solid #cfcfcf; padding: 14px 16px 10px; margin: 0 0 12px; }
.xm .qfig figcaption { color: #111; font: 700 14px Arial, Helvetica, sans-serif; letter-spacing: 0; }
.xm .qchart text { fill: #333; font-family: Arial, Helvetica, sans-serif; }
.xm .qchart .cv { fill: #111; }
.xm .qchart .cs { fill: #333; }
.xm .qchart .cb { fill: #111; }
.xm .qchart .cd { fill: #fff; }
.xm .qchart .cg { stroke: #e7e7e7; }
.xm .qchart .ca { stroke: #6b6b6b; }
.xm .qchart .c0 { fill: #2f6db5; } .xm .qchart .c1 { fill: #e39b2d; } .xm .qchart .c2 { fill: #c2453c; }
.xm .qchart .c3 { fill: #7a5cc4; } .xm .qchart .c4 { fill: #3a9d9d; } .xm .qchart .c5 { fill: #9aa23b; }
.xm .qchart .k0 { stroke: #2f6db5; } .xm .qchart .k1 { stroke: #e39b2d; } .xm .qchart .k2 { stroke: #c2453c; }
.xm .qtable { color: #111; font-family: Arial, Helvetica, sans-serif; }
.xm .qtable th { color: #111; background: #eef1f5; border-bottom: 1px solid #b9c2cc; }
.xm .qtable td { border-bottom: 1px solid #e1e1e1; }
.xm .qtable tbody tr:hover { background: #f7f9fb; }
.xm .qc-given { color: #111; font-style: normal; }
.xm .qc-grid { border: 1px solid #8c8c8c; }
.xm .qc-grid > div + div { border-left: 1px solid #8c8c8c; }
.xm .qc-grid > div > span { color: #111; font: 700 15px Arial, Helvetica, sans-serif; letter-spacing: 0; text-transform: none; }
.xm .qc-grid b { font-weight: 400; font-size: 17px; }
.xm .qds li { background: none; border-left: none; padding: 5px 0; }
.xm .qds .qds-n { color: #111; }

/* review and navigator */
.xm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 8px; }
.xm-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; background: #fff; border: 1px solid #b7c1cc; border-radius: 3px; color: #1b1b1b; }
.xm-cell b { font-size: 18px; }
.xm-cell span { font-size: 11.5px; color: #555; }
.xm-cell:hover { border-color: var(--xm-accent); background: #f2f7fd; }
.xm-cell.mk { background: #fff6dd; border-color: #d9a520; }
.xm-cell.ch { background: #e8f3ea; border-color: #5a9a66; }
.xm-rev { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; }
.xm-rev th { text-align: left; background: #e6e9ed; padding: 8px 12px; border: 1px solid #c9ced4; }
.xm-rev td { padding: 7px 12px; border: 1px solid #dcdfe3; cursor: pointer; }
.xm-rev tr.na td:nth-child(2) { color: #a13c2f; }
.xm-rev tbody tr:hover td { background: #f3f6f9; }
.xm-rev tr.sel td { background: #cfe0f4 !important; }
.xm-rev-go { margin-top: 16px; }

/* modal, toast */
.xm-modal { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(0,0,0,.35); padding: 16px; }
.xm-modal[hidden] { display: none; }
.xm-modal-box { width: min(460px, 100%); background: #fff; border: 1px solid #8a8a8a; box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.xm-modal-h { padding: 10px 16px; background: var(--xm-bar); color: var(--xm-bar-ink); font-weight: 700; }
.xm-modal-t { padding: 18px 16px 8px; font-size: 15px; }
.xm-modal-b { display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px 16px; }
.xm-mb { padding: 8px 18px; background: #f3f3f3; border: 1px solid #8a8a8a; border-radius: 3px; color: #1b1b1b; }
.xm-mb.p { background: var(--xm-accent); border-color: var(--xm-accent); color: #fff; font-weight: 700; }
.xm-toast { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 6; padding: 10px 18px; background: #fff4d6; border: 1px solid #d9a520; color: #5a3d00; font-size: 14px; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.xm-toast[hidden] { display: none; }

/* calculator */
.xm-calc { position: fixed; top: 72px; right: 24px; z-index: 4; width: 250px; background: #e4e6e9; border: 1px solid #7d848c; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding-bottom: 10px; }
.xm-calc[hidden] { display: none; }
.xm-calc-h { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: #4b5561; color: #fff; font-size: 13px; font-weight: 700; cursor: move; user-select: none; }
.xm-calc-h button { background: none; border: none; color: #fff; font-size: 18px; line-height: 1; }
.xm-calc-d { display: block; width: calc(100% - 20px); margin: 10px; height: 38px; text-align: right; padding: 0 10px; font: 20px Arial, Helvetica, sans-serif; border: 1px solid #8a9199; background: #fff; color: #111; }
.xm-calc-k { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 0 10px; }
.xm-calc-k button { height: 34px; background: linear-gradient(#fdfdfd, #e2e4e7); border: 1px solid #9aa1a9; border-radius: 3px; color: #1b1b1b; font-size: 14px; }
.xm-calc-k button:active { background: #d0d4d8; }
.xm-calc-t { display: block; width: calc(100% - 20px); margin: 8px 10px 0; height: 32px; background: linear-gradient(#fdfdfd, #e2e4e7); border: 1px solid #9aa1a9; border-radius: 3px; font-size: 13px; }

/* ── GMAT Focus look ── */
.xm-gmat, .xm-ea { --xm-bar: #0e2d4f; --xm-accent: #1565c0; }
.xm-gmat .xm-foot, .xm-ea .xm-foot { background: #0e2d4f; }
.xm-b, .xm-time-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: transparent; border: 1px solid rgba(255,255,255,.55); border-radius: 3px; color: #fff; font-size: 13px; }
.xm-b svg, .xm-time-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.xm-time-btn { border-color: transparent; font-size: 15px; font-variant-numeric: tabular-nums; min-width: 96px; }
.xm-b.on { background: #ffd24d; border-color: #ffd24d; color: #1b1b1b; }
.xm-b.on svg { fill: #1b1b1b; stroke: #1b1b1b; }
.xm-n { padding: 9px 28px; background: #fff; color: #0e2d4f; border: none; border-radius: 3px; font-weight: 700; font-size: 15px; }
.xm-n:hover { background: #e8eef6; }
.xm-gmat.xm-low .xm-time-btn, .xm-ea.xm-low .xm-time-btn { color: #ffd24d; }

/* ── GRE look ── */
.xm-gre { --xm-bar: #2d2d2d; --xm-accent: #1f5fa0; }
.xm-g { padding: 6px 14px; background: linear-gradient(#fafafa, #d9d9d9); border: 1px solid #7a7a7a; border-radius: 4px; color: #1b1b1b; font-size: 13px; font-weight: 700; }
.xm-g:hover:not(:disabled) { background: linear-gradient(#ffffff, #e6e6e6); }
.xm-g.on { background: linear-gradient(#fff3c4, #f0d36b); border-color: #9a7d1e; }
.xm-g-next { min-width: 64px; }
.xm-sub { flex: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 20px; background: #dedede; border-bottom: 1px solid #b9b9b9; font-size: 13.5px; color: #111; white-space: pre; }
.xm-sub-t { display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
.xm-link { background: none; border: none; padding: 0; color: #1f4f86; text-decoration: underline; font-size: 13px; }
.xm-gre .xm-dot { width: 30px; height: 18px; }          /* GRE answer ovals */
.xm-gre .xm-opt.on .xm-dot::after { inset: 3px 5px; }
.xm-gre.xm-low .xm-sub-t [data-time] { color: #a13c2f; font-weight: 700; }

/* ── computer-based admissions test look (MAT, TMUA, STEP) ── */
.xm-cbt { --xm-bar: #00467f; --xm-accent: #00467f; }
.xm-cbt .xm-foot { background: #eef2f6; border-top: 1px solid #c5ced8; }
.xm-tl { font-size: 13px; opacity: .85; }
.xm-timebox { padding: 4px 10px; background: rgba(255,255,255,.14); border-radius: 3px; font-variant-numeric: tabular-nums; font-weight: 700; min-width: 78px; text-align: center; }
.xm-c { padding: 8px 16px; background: #fff; border: 1px solid #7f93ad; border-radius: 3px; color: #00365f; font-size: 14px; }
.xm-c:hover:not(:disabled) { background: #f0f5fa; }
.xm-c.on { background: #fff1c7; border-color: #c49a1b; }
.xm-c-next { background: #00467f; border-color: #00467f; color: #fff; font-weight: 700; min-width: 90px; }
.xm-c-next:hover:not(:disabled) { background: #0a5795; }
.xm-c-end { color: #7a1f1f; }
.xm-cbt.xm-low .xm-timebox { background: #b3261e; }

/* ── online assessment look (quant) ── */
.xm-oa { --xm-bar: #ffffff; --xm-bar-ink: #1b1b1b; --xm-accent: #1d63d8; }
.xm-oa .xm-top { border-bottom: 1px solid #e3e6ea; }
.xm-oa .xm-timebox { background: #f1f4f8; color: #1b1b1b; }
.xm-prog { flex: none; height: 4px; background: #e9edf2; }
.xm-prog i { display: block; height: 100%; width: 0; background: #1d63d8; transition: width .3s; }
.xm-oa .xm-foot { border-top: 1px solid #e3e6ea; }
.xm-o { padding: 10px 22px; border-radius: 6px; border: 1px solid #cfd6de; background: #fff; color: #333; font-size: 15px; }
.xm-o-next { background: #1d63d8; border-color: #1d63d8; color: #fff; font-weight: 700; min-width: 120px; }
.xm-o-next:hover { background: #1853b8; }
.xm-oa .xm-modal-h { background: #1d63d8; color: #fff; }

@media (max-width: 760px) {
    .xm-top { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
    .xm-title { flex-basis: 100%; font-size: 13px; }
    .xm-tools { justify-content: flex-start; gap: 6px; }
    .xm-g, .xm-b, .xm-c { padding: 6px 9px; font-size: 12px; }
    .xm-page { padding: 22px 16px 40px; }
    .xm-page.xm-split { display: block; height: auto; }
    .xm-stim { border-right: none; border-bottom: 3px solid #cfd6de; }
    .xm-stim, .xm-qpane { overflow: visible; padding: 18px 16px; }
    .xm-foot { padding: 8px 12px; }
    .xm-calc { right: 8px; top: 110px; }
}

/* results: accuracy by level, extra review bits */
.qz-levels { margin: 22px 0 6px; display: grid; gap: 8px; max-width: 560px; }
.qz-lv { display: grid; grid-template-columns: 170px 1fr 56px; align-items: center; gap: 12px; font-size: .86rem; color: var(--qz-dim); }
.qz-lv i { height: 8px; background: rgba(255,255,255,.08); display: block; }
.qz-lv i b { display: block; height: 100%; background: linear-gradient(90deg, #74D4C4, #E2A33C); }
.qz-lv em { font-style: normal; text-align: right; color: var(--qz-ink); }
.qz-warn { border-color: rgba(255,122,112,.6) !important; color: #ffb0a8 !important; }
.qz-rs { margin: 6px 0 8px; }
.qz-rs summary { cursor: pointer; font-size: .8rem; color: #9fe3d7; }

/* browse pages: answer choices as lettered circles */
.qopts { list-style: none !important; margin: 14px 0 4px !important; padding: 0 !important; counter-reset: opt; display: grid; gap: 6px; }
.qopts li { counter-increment: opt; display: flex; align-items: baseline; gap: 12px; margin: 0 !important; color: var(--fg); }
.qopts li::before { content: counter(opt, upper-alpha); flex: none; width: 24px; height: 24px; line-height: 22px; text-align: center; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; font-size: .74rem; font-weight: 700; color: var(--fg-dim); transform: translateY(-1px); }
@media (max-width: 760px) {
    .xm .qc-grid { grid-template-columns: 1fr 1fr; }
    .xm .qc-grid > div + div { border-top: none; border-left: 1px solid #8c8c8c; }
    .xm-gmat .xm-mark span, .xm-ea .xm-mark span { display: none; }
    .xm-gmat .xm-time-btn, .xm-ea .xm-time-btn { min-width: 0; padding: 6px 4px; }
}

/* exam window: brand mark in the bar, watermark behind the questions */
.xm-brand { display: flex; align-items: center; gap: 8px; flex: none; padding-right: 14px; border-right: 1px solid rgba(255,255,255,.28); font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.xm-logo { width: 22px; height: 22px; flex: none; }
.xm-oa .xm-brand { border-right-color: #dfe3e8; }
.xm-quit { opacity: .85; }
.xm-wm { position: fixed; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; opacity: .055; color: #0e2d4f; }
.xm-wm .xm-logo { width: 250px; height: 250px; }
.xm-wm span { font: 700 20px/1 Arial, Helvetica, sans-serif; letter-spacing: .34em; text-transform: uppercase; }
.xm-page, .xm-foot, .xm-sub { position: relative; z-index: 1; }
@media (max-width: 760px) {
    .xm-brand { border-right: none; padding-right: 0; }
    .xm-brand b { display: none; }
    .xm-wm .xm-logo { width: 150px; height: 150px; }
    .xm-wm span { font-size: 13px; }
}
/* the top bar must never let its controls collide: the title truncates first */
.xm-tools { flex: 0 1 auto; min-width: 0; row-gap: 6px; }
.xm-b, .xm-g, .xm-c, .xm-o, .xm-time-btn, .xm-count, .xm-timebox, .xm-tl { flex: none; }
.xm-title { flex: 1 1 60px; }

/* practice landing: the four doors */
.qp-doors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 26px; }
.qp-door {
    --qp-bg1: #171d47; --qp-bg2: #0b0f2e; --qp-dim: #b7bee6;
    display: flex; flex-direction: column; gap: 12px; padding: 30px 30px 26px; color: #eef1ff;
    background: radial-gradient(70% 90% at 100% 0%, rgba(116,212,196,.16), transparent 60%), linear-gradient(155deg, #171d47, #0b0f2e);
    border: 1px solid rgba(183,190,230,.25); clip-path: var(--clip-24);
    transition: transform .2s, border-color .2s;
}
.qp-door:hover { transform: translateY(-3px); border-color: rgba(116,212,196,.5); }
.qp-door h3 { margin: 0; font-size: 1.5rem; color: #fff; text-transform: none; letter-spacing: 0; }
.page-content .qp-door p { margin: 0; color: #b7bee6; line-height: 1.6; max-width: none; }
.qp-door .qp-glyph { width: 46px; height: 46px; }
.qp-door-go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto !important; padding-top: 8px; }
.qp-door-link { color: #74D4C4; font-size: .84rem; letter-spacing: .06em; text-transform: uppercase; border-bottom: none; }
.qp-door-link:hover { color: #fff; }
.qp-stats-dark { margin-left: var(--indent); }
@media (max-width: 860px) { .qp-doors { grid-template-columns: 1fr; } .qp-stats-dark { margin-left: 0; } }

/* ═══ Coding track ═══════════════════════════════════════════════════ */
.cx-diff { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.cx-diff-easy { color: #7ad6a8; border: 1px solid rgba(122,214,168,.4); background: rgba(122,214,168,.10); }
.cx-diff-medium { color: #E2A33C; border: 1px solid rgba(226,163,60,.4); background: rgba(226,163,60,.10); }
.cx-diff-hard { color: #ff8a7a; border: 1px solid rgba(255,138,122,.4); background: rgba(255,138,122,.10); }
.cx-mins, .cx-num { font-size: .75rem; color: var(--fg-faint); letter-spacing: .08em; text-transform: uppercase; }

/* code blocks with language tabs */
.cx-code { margin: 18px 0 8px var(--indent); max-width: 920px; border: 1px solid var(--rule); background: #0e0f13; }
.cx-tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 6px 0; background: #14161b; border-bottom: 1px solid var(--rule); }
.cx-tab { background: none; border: none; color: var(--fg-dim); font: 600 .78rem var(--font); letter-spacing: .06em; padding: 8px 14px; cursor: pointer; border-bottom: 2px solid transparent; }
.cx-tab:hover { color: var(--fg); }
.cx-tab.on { color: var(--acc); border-bottom-color: var(--acc); }
.cx-copy { margin-left: auto; background: none; border: 1px solid var(--rule); color: var(--fg-dim); font: 600 .72rem var(--font); letter-spacing: .08em; text-transform: uppercase; padding: 5px 12px; margin-bottom: 6px; cursor: pointer; }
.cx-copy:hover { color: var(--acc); border-color: var(--acc); }
.cx-pre { margin: 0; padding: 18px 20px; overflow-x: auto; font: .88rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; background: none !important; }
.cx-pre code { font: inherit; background: none; }
.page-content .cx-pre { margin-left: 0; }

/* problem page */
.cx-problem { max-width: none; }
.cx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 26px; margin-left: var(--indent); }
.cx-statement h2, .cx-statement h3 { margin-top: 1.2em; }
.page-content .cx-statement p, .page-content .cx-statement ul { margin-left: 0; max-width: none; }
.cx-ex { border-collapse: collapse; width: 100%; font-size: .9rem; margin: 10px 0 4px; }
.cx-ex th { text-align: left; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); padding: 6px 10px; border-bottom: 1px solid var(--rule); }
.cx-ex td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: top; color: var(--fg-dim); }
.cx-ex code, .cx-list code, .cx-idea code { font: .85em ui-monospace, Menlo, monospace; background: rgba(255,255,255,.06); padding: 1px 5px; }
.cx-list { list-style: none; padding: 0; margin: 10px 0 0; }
.cx-list li { position: relative; padding-left: 18px; margin-bottom: .5em; color: var(--fg-dim); }
.cx-list li::before { content: "·"; position: absolute; left: 4px; color: var(--acc); }
.cx-hints { display: grid; gap: 6px; margin-top: 10px; }
.cx-hint summary { cursor: pointer; font-size: .85rem; color: var(--acc); padding: 8px 12px; border: 1px solid rgba(226,163,60,.3); background: rgba(226,163,60,.05); list-style: none; }
.cx-hint summary::-webkit-details-marker { display: none; }
.cx-hint[open] summary { border-bottom: none; }
.cx-hint p { margin: 0 !important; padding: 10px 12px 12px; border: 1px solid rgba(226,163,60,.3); border-top: none; font-size: .9rem; color: var(--fg-dim); }

/* the editor */
.cx-ide { border: 1px solid var(--rule); background: #0e0f13; display: flex; flex-direction: column; min-width: 0; }
.cx-ide-bar, .cx-ide-foot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #14161b; flex-wrap: wrap; }
.cx-ide-bar { border-bottom: 1px solid var(--rule); }
.cx-ide-foot { border-top: 1px solid var(--rule); }
.cx-ide-lang { font: 700 .74rem var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.cx-ide-note { font-size: .78rem; color: var(--fg-faint); font-family: ui-monospace, Menlo, monospace; }
.cx-ide-note b { color: var(--fg-dim); font-weight: 400; }
.cx-btn { background: none; border: 1px solid var(--rule); color: var(--fg); font: 600 .76rem var(--font); letter-spacing: .08em; text-transform: uppercase; padding: 9px 16px; cursor: pointer; }
.cx-btn:hover { border-color: var(--acc); color: var(--acc); }
.cx-btn.cx-primary { background: var(--acc); border-color: var(--acc); color: #111; }
.cx-btn.cx-primary:hover { background: #f0b654; color: #111; }
.cx-btn:disabled { opacity: .45; cursor: default; }
.cx-start { margin-left: auto; }
.cx-timer { font: 700 1rem ui-monospace, Menlo, monospace; color: var(--acc); font-variant-numeric: tabular-nums; }
.cx-timer.cx-low { color: #ff8a7a; }
.cx-attempts { font-size: .76rem; color: var(--fg-faint); margin-left: auto; }
.cx-editor { position: relative; min-height: 340px; }
/* CodeMirror mount. When it comes up, the Prism-over-textarea fallback stands down. */
.cx-cm { height: 100%; min-height: 340px; display: none; }
.cx-cm-on .cx-cm { display: block; }
.cx-cm-on .cx-hl, .cx-cm-on .cx-ta { display: none; }
.cx-cm .cm-editor { height: 100%; min-height: 340px; }
.cx-cm .cm-editor.cm-focused { outline: none; }
.cx-cm .cm-scroller { font-variant-ligatures: none; }
.cx-locked .cx-cm .cm-editor { opacity: .6; }
@media (max-width: 760px) { .cx-cm, .cx-cm .cm-editor { min-height: 260px; } }
.cx-hl, .cx-ta {
    margin: 0; padding: 16px 18px; border: 0; width: 100%; min-height: 340px; max-height: 60vh;
    font: .88rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; tab-size: 2; white-space: pre; overflow: auto;
}
.cx-hl { position: absolute; inset: 0; pointer-events: none; background: none !important; }
.cx-ta { position: relative; background: transparent; color: transparent; caret-color: #fff; resize: vertical; display: block; }
.cx-ta::selection { background: rgba(226,163,60,.3); }
.cx-ta:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(226,163,60,.5); }
.cx-locked .cx-ta { caret-color: transparent; }
.cx-out { padding: 0 12px 12px; }
.cx-res { padding: 10px 14px; margin-top: 12px; font-size: .88rem; border-left: 3px solid var(--rule); background: rgba(255,255,255,.03); }
.cx-res-ok { border-left-color: #5fd39a; background: rgba(95,211,154,.08); }
.cx-res-no { border-left-color: #ff8a7a; background: rgba(255,138,122,.08); }
.cx-res-err { border-left-color: #E2A33C; background: rgba(226,163,60,.08); }
.cx-tests { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: .8rem; }
.cx-tests th { text-align: left; color: var(--fg-faint); font-weight: 400; padding: 4px 8px; border-bottom: 1px solid var(--rule); }
.cx-tests td { padding: 5px 8px; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--fg-dim); vertical-align: top; }
.cx-tests tr.ok td:first-child { color: #5fd39a; } .cx-tests tr.no td:first-child { color: #ff8a7a; }
.cx-tests code { font-size: .95em; background: none; padding: 0; }
.cx-cplx { margin-left: var(--indent) !important; color: var(--fg-dim); }
.cx-idea { margin-left: var(--indent); max-width: var(--measure); }
.page-content .cx-idea p { margin-left: 0; }
.cx-idea ul, .cx-idea ol { margin-left: 0; max-width: var(--measure); color: var(--fg-dim); }

/* cards */
.cx-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 22px; }
.cx-card { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border: 1px solid var(--rule); border-bottom: 1px solid var(--rule); background: linear-gradient(180deg, #16171c, #111216); clip-path: var(--clip-14); transition: transform .18s, border-color .18s; }
.cx-card:hover { transform: translateY(-3px); border-color: var(--acc); }
.cx-card h3 { margin: 0; font-size: 1.1rem; text-transform: none; letter-spacing: 0; }
.cx-card p { margin: 0; font-size: .88rem; color: var(--fg-dim); line-height: 1.5; }
.page-content .cx-card p { margin-left: 0; max-width: none; }
.cx-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cx-card-go { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); margin-top: auto; }
.cx-card.cx-done h3::after { content: " ✓"; color: #5fd39a; }
.cx-hero-code .cx-code { margin: 0; max-width: none; background: rgba(9,12,36,.6); border-color: rgba(183,190,230,.25); }
.cx-hero-code .cx-tabs { background: rgba(255,255,255,.04); border-color: rgba(183,190,230,.2); }

/* interview mode */
.cx-iv { margin-left: var(--indent); }
.cx-iv-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin: 18px 0 26px; }
.cx-set { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 16px 18px; background: rgba(255,255,255,.03); border: 1px solid var(--rule); color: var(--fg); cursor: pointer; clip-path: var(--clip-14); }
.cx-set:hover { border-color: var(--acc); }
.cx-set b { font-size: 1rem; } .cx-set span { font-size: .8rem; color: var(--fg-dim); }
.cx-rules { border-left: 2px solid var(--acc); padding-left: 18px; }
.cx-iv-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--rule); }
.cx-iv-step { font: 700 .8rem var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.cx-iv .cx-grid { margin-left: 0; }
.cx-score { display: flex; align-items: baseline; gap: 12px; margin: 14px 0 22px; }
.cx-score b { font-size: 3.4rem; line-height: 1; color: var(--fg); }
.cx-score span { font-size: 1.3rem; color: var(--fg-dim); }
.cx-score em { font-style: normal; font-size: .9rem; color: var(--fg-faint); }
.cx-report { width: 100%; border-collapse: collapse; font-size: .86rem; }
.cx-report th { text-align: left; color: var(--acc); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--rule); }
.cx-report td { padding: 9px 10px; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--fg-dim); }
.cx-report td.ok { color: #5fd39a; } .cx-report td.no { color: #ff8a7a; }
.cx-verdict { margin-top: 18px !important; color: var(--fg); border-left: 2px solid var(--acc); padding-left: 16px; }

@media (max-width: 1000px) { .cx-grid { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .cx-grid, .cx-iv, .cx-code, .cx-idea, .cx-cplx { margin-left: 0 !important; }
    .cx-editor, .cx-hl, .cx-ta { min-height: 260px; }
    .cx-start, .cx-attempts { margin-left: 0; }
}

/* coding: panelled problem page, language dropdown, console, dry-run frames */
.cx-panel { border: 1px solid var(--rule); background: #101115; min-width: 0; display: flex; flex-direction: column; }
.cx-panel-tabs { display: flex; gap: 2px; padding: 6px 6px 0; background: #14161b; border-bottom: 1px solid var(--rule); }
.cx-ptab { background: none; border: none; color: var(--fg-dim); font: 600 .78rem var(--font); letter-spacing: .06em; padding: 9px 14px; cursor: pointer; border-bottom: 2px solid transparent; }
.cx-ptab:hover { color: var(--fg); }
.cx-ptab.on { color: var(--acc); border-bottom-color: var(--acc); }
.cx-pane { padding: 22px 24px 26px; overflow-y: auto; max-height: 78vh; }
.cx-pane h3:first-child { margin-top: 0; }
.cx-note, .cx-dry-intro { font-size: .86rem; color: var(--fg-faint); }
.cx-lang-wrap { display: inline-flex; align-items: center; }
.cx-lang { appearance: none; background: #0e0f13 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23E2A33C'/%3E%3C/svg%3E") right 10px center/9px no-repeat;
    border: 1px solid var(--rule); color: var(--fg); font: 700 .76rem var(--font); letter-spacing: .08em; text-transform: uppercase; padding: 8px 28px 8px 12px; cursor: pointer; }
.cx-lang:hover, .cx-lang:focus { border-color: var(--acc); outline: none; }
.cx-console { border-top: 1px solid var(--rule); }
.cx-console-bar { display: flex; justify-content: space-between; align-items: center; padding: 7px 14px; background: #14161b; font: 600 .7rem var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); }
.cx-console-hint { text-transform: none; letter-spacing: 0; font-weight: 400; }
.cx-console-idle { margin: 0 !important; padding: 14px; font-size: .85rem; color: var(--fg-faint); }
.cx-out { padding: 0 14px 14px; max-height: 320px; overflow-y: auto; }

/* dry-run frames */
.cx-dry-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cx-dry-pos { font: 700 .78rem var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--acc); min-width: 110px; }
.cx-frames { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.cx-frame { display: grid; grid-template-columns: 78px 1fr; gap: 14px; padding: 16px; border: 1px solid var(--rule); background: rgba(255,255,255,.02); }
.cx-frame-done { border-color: rgba(95,211,154,.45); background: rgba(95,211,154,.05); }
.cx-frame-n { font: 700 .74rem var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
.cx-frame-n span { color: var(--fg-faint); }
.cx-frame-note { margin: 12px 0 0 !important; font-size: .9rem; color: var(--fg-dim); line-height: 1.55; max-width: none !important; }
.cx-arr { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.cx-arr-label { font: .8rem ui-monospace, Menlo, monospace; color: var(--fg-faint); padding-top: 10px; }
.cx-cells { display: flex; gap: 4px; flex-wrap: wrap; }
.cx-cell { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 34px; padding: 6px 6px 4px; border: 1px solid var(--rule); background: #0e0f13; }
.cx-cell b { font: .95rem ui-monospace, Menlo, monospace; color: var(--fg); }
.cx-cell i { font-style: normal; font-size: .62rem; color: var(--fg-faint); }
.cx-cell u { position: absolute; bottom: -17px; text-decoration: none; font: 700 .62rem var(--font); letter-spacing: .06em; color: var(--acc); text-transform: uppercase; }
.cx-cell.win { background: rgba(116,212,196,.10); border-color: rgba(116,212,196,.35); }
.cx-cell.hi { background: rgba(226,163,60,.16); border-color: var(--acc); }
.cx-cell.hi b { color: var(--acc); }
.cx-cell.gone { opacity: .35; }
.cx-cell.ptr { border-color: var(--acc); }
.cx-cells:has(.cx-cell u) { margin-bottom: 16px; }
.cx-vars { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cx-vars span { font: .78rem ui-monospace, Menlo, monospace; color: var(--fg-dim); border: 1px solid var(--rule); padding: 3px 9px; }
.cx-vars em { font-style: normal; color: var(--fg-faint); margin-right: 6px; }
.cx-range { flex: 1; min-width: 220px; }
.cx-range-bar { display: block; position: relative; height: 8px; background: linear-gradient(90deg, rgba(255,138,122,.35), rgba(95,211,154,.35)); }
.cx-range-bar i { position: absolute; top: -4px; width: 3px; height: 16px; background: var(--acc); }
.cx-range-bar i.ok { background: #5fd39a; } .cx-range-bar i.no { background: #ff8a7a; }
.cx-range-ends { display: flex; justify-content: space-between; font: .72rem ui-monospace, Menlo, monospace; color: var(--fg-faint); margin-top: 6px; }
.cx-range-ends b { color: var(--acc); }
@media (max-width: 760px) { .cx-frame { grid-template-columns: 1fr; gap: 6px; } .cx-pane { padding: 16px; max-height: none; } }

/* coding: diagrams and the pattern flowchart */
.cx-dia-wrap { margin: 0 0 22px var(--indent); max-width: 560px; }
.cx-dia { width: 100%; height: auto; color: var(--acc); }
.cx-dia .d-cell { fill: #14161b; stroke: rgba(255,255,255,.18); }
.cx-dia .d-cell.d-win { fill: rgba(116,212,196,.14); stroke: rgba(116,212,196,.5); }
.cx-dia .d-cell.d-hi { fill: rgba(226,163,60,.16); stroke: var(--acc); }
.cx-dia .d-val { fill: #e9ecf5; font: 600 14px ui-monospace, Menlo, monospace; }
.cx-dia .d-arrow { stroke: var(--acc); stroke-width: 1.6; fill: none; }
.cx-dia .d-arrow.d-dim { stroke: rgba(255,255,255,.35); }
.cx-dia .d-lab { fill: var(--acc); font: 700 12px var(--font); letter-spacing: .08em; text-transform: uppercase; }
.cx-dia .d-lab.d-small { fill: #a9b0c9; font-size: 11px; letter-spacing: .04em; text-transform: none; font-weight: 400; }
.cx-dia .d-lab.d-note { fill: #6f7690; font-size: 11.5px; letter-spacing: .02em; text-transform: none; font-weight: 400; }
.cx-dia .d-lab.d-in { fill: #0e0f13; font-size: 11px; }
.cx-dia .d-frame { fill: none; stroke: rgba(116,212,196,.7); stroke-dasharray: 4 3; }
.cx-dia .d-bar { stroke: rgba(255,255,255,.2); }
.cx-dia .d-bar.d-ok { fill: rgba(95,211,154,.55); }
.cx-dia .d-bar.d-no { fill: rgba(255,138,122,.4); }
.cx-dia .d-tick { stroke: var(--acc); stroke-width: 2; }
.cx-card-dia { margin: 4px 0 2px; opacity: .95; }
.cx-card-dia .cx-dia { max-height: 120px; }
.cx-flow-wrap { margin-left: var(--indent); max-width: 940px; padding: 24px; border: 1px solid var(--rule); background: linear-gradient(160deg, #14161d, #0e0f13); clip-path: var(--clip-24); }
.cx-flow { width: 100%; height: auto; color: var(--acc); }
.cx-flow .d-node rect { fill: #171a21; stroke: rgba(255,255,255,.22); }
.cx-flow .d-node.d-start rect { fill: rgba(226,163,60,.14); stroke: var(--acc); }
.cx-flow .d-node.d-leaf rect { fill: rgba(116,212,196,.12); stroke: rgba(116,212,196,.55); }
.cx-flow .d-node.d-soft rect { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.25); }
.cx-flow .d-nodetext { font: 13px/1.3 var(--font); color: #e9ecf5; text-align: center; display: flex; align-items: center; justify-content: center; height: 100%; }
.cx-flow .d-edge { stroke: rgba(255,255,255,.35); stroke-width: 1.4; fill: none; }
.cx-flow .d-edge-lab { fill: #8d94ad; font: 11px var(--font); }
.cx-flow .d-flow-note { fill: #6f7690; font: 12.5px var(--font); }
.cx-flow-steps { margin-left: var(--indent); }
.cx-iv-hidden { font-size: .75rem; color: var(--fg-faint); letter-spacing: .04em; }
@media (max-width: 760px) { .cx-dia-wrap, .cx-flow-wrap, .cx-flow-steps { margin-left: 0; } .cx-flow-wrap { padding: 12px; } }

/* Graph chapter: figures, step-by-step graph frames, algorithm boxes (tools/code/gdraw.mjs) */
.cx-fig { margin: 26px 0; padding: 18px 18px 10px; border: 1px solid var(--rule); background: rgba(255,255,255,.015); }
.cx-fig figcaption { margin: 10px 0 0; font-size: .82rem; color: var(--fg-faint); text-align: center; }
.g-svg { display: block; width: 100%; height: auto; max-height: 340px; margin: 0 auto; overflow: visible; }
.g-svg text { font-family: var(--font); }
.g-e { stroke: rgba(255,255,255,.38); stroke-width: 1.6; fill: none; }
.g-ah { fill: rgba(255,255,255,.5); }
.g-e.tree, .g-e.flow { stroke: var(--acc); stroke-width: 2.4; } .g-ah.tree, .g-ah.flow { fill: var(--acc); }
.g-e.hot { stroke: #ffc65c; stroke-width: 3.4; } .g-ah.hot { fill: #ffc65c; }
.g-e.dim { stroke: rgba(255,255,255,.14); } .g-ah.dim { fill: rgba(255,255,255,.18); }
.g-e.back, .g-e.cut { stroke: #ff8a7a; stroke-width: 2.4; } .g-e.back { stroke-dasharray: 5 4; } .g-ah.back, .g-ah.cut { fill: #ff8a7a; }
.g-e.ok { stroke: #5fd39a; stroke-width: 2.6; } .g-ah.ok { fill: #5fd39a; }
.g-wbg { fill: #0b0c10; }
.g-w { fill: #c9cfdf; font: 600 11.5px ui-monospace, Menlo, monospace; }
.g-w.tree, .g-w.hot, .g-w.flow { fill: var(--acc); } .g-w.cut, .g-w.back { fill: #ff8a7a; } .g-w.ok { fill: #5fd39a; }
.g-n { fill: #14161b; stroke: rgba(255,255,255,.55); stroke-width: 1.6; }
.g-nl { fill: #e9ecf5; font: 700 14px var(--font); }
.g-n.cur { fill: var(--acc); stroke: #ffc65c; stroke-width: 2.4; } .g-nl.cur { fill: #0e0f13; }
.g-n.vis { fill: rgba(226,163,60,.2); stroke: var(--acc); stroke-width: 2; }
.g-n.q { fill: #14161b; stroke: var(--acc); stroke-width: 2; stroke-dasharray: 4 3; }
.g-n.done, .g-n.ok { fill: rgba(95,211,154,.2); stroke: #5fd39a; stroke-width: 2; }
.g-n.src { stroke: #ffc65c; stroke-width: 3.2; }
.g-n.dim { stroke: rgba(255,255,255,.18); } .g-nl.dim { fill: rgba(255,255,255,.3); }
.g-n.bad { fill: rgba(255,138,122,.18); stroke: #ff8a7a; stroke-width: 2.2; }
.g-n.a { fill: rgba(226,163,60,.85); stroke: var(--acc); } .g-nl.a { fill: #0e0f13; }
.g-n.b { fill: rgba(116,212,196,.85); stroke: rgb(116,212,196); } .g-nl.b { fill: #0e0f13; }
.g-tag { fill: var(--acc); font: 700 11.5px ui-monospace, Menlo, monospace; }
.g-tag.no { fill: #ff8a7a; }
.g-txt { fill: #8a91a8; font-size: 12px; } .g-txt.h { fill: var(--acc); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 11px; }
.g-ix { fill: #6f7690; font: 600 11px ui-monospace, Menlo, monospace; }
.g-c { fill: #14161b; stroke: rgba(255,255,255,.16); }
.g-c.on { fill: #191c23; stroke: rgba(255,255,255,.3); }
.g-c.head { fill: rgba(226,163,60,.14); stroke: var(--acc-dim); }
.g-c.land { fill: #3b3424; stroke: rgba(226,163,60,.35); } .g-c.water { fill: #10161f; }
.g-c.wall { fill: #2a2d36; stroke: rgba(255,255,255,.25); }
.g-c.cur { fill: var(--acc); stroke: #ffc65c; } .g-cv.cur { fill: #0e0f13; }
.g-c.vis { fill: rgba(226,163,60,.3); stroke: var(--acc); }
.g-c.q { stroke: var(--acc); stroke-width: 2; stroke-dasharray: 4 3; }
.g-c.done, .g-c.path { fill: rgba(95,211,154,.25); stroke: #5fd39a; }
.g-c.src { fill: rgba(226,163,60,.55); stroke: #ffc65c; stroke-width: 2; }
.g-c.bad { fill: rgba(255,138,122,.22); stroke: #ff8a7a; }
.g-c.b { fill: rgba(116,212,196,.3); stroke: rgb(116,212,196); }
.g-c.dim { opacity: .45; }
.g-cv { fill: #e9ecf5; font: 600 13px ui-monospace, Menlo, monospace; } .g-cv.off { fill: #4b5063; }
.g-pair { display: flex; align-items: center; gap: 14px; }
.g-pair > svg { flex: 1 1 0; min-width: 0; }
.g-pair-mid { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; font-size: .75rem; color: var(--fg-faint); max-width: 110px; text-align: center; }
.g-pair-mid i { font-style: normal; font-size: 1.6rem; color: var(--acc); }
.g-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0 !important; font-size: .78rem; color: var(--fg-faint); justify-content: center; max-width: none !important; }
.g-legend span { display: inline-flex; align-items: center; gap: 6px; }
.g-key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.6px solid rgba(255,255,255,.55); background: #14161b; }
.g-key.cur { background: var(--acc); border-color: #ffc65c; } .g-key.vis { background: rgba(226,163,60,.25); border-color: var(--acc); }
.g-key.q { border: 1.6px dashed var(--acc); } .g-key.done { background: rgba(95,211,154,.25); border-color: #5fd39a; }
.g-key.bad { background: rgba(255,138,122,.25); border-color: #ff8a7a; }
.g-key.a { background: rgba(226,163,60,.85); border-color: var(--acc); } .g-key.b { background: rgba(116,212,196,.85); border-color: rgb(116,212,196); }
.g-key.hot { border-radius: 0; height: 4px; border: 0; background: #ffc65c; } .g-key.flow { border-radius: 0; height: 3px; border: 0; background: var(--acc); }
.g-key.tree { border-radius: 0; height: 3px; border: 0; background: var(--acc); } .g-key.back { border-radius: 0; height: 0; border: 0; border-top: 2px dashed #ff8a7a; background: none; }
.cx-frame-fig { margin: 0 0 12px; }
.cx-frame-fig .g-svg { max-height: 300px; }
.bs-stack { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.bs-stack > svg { width: 100%; }
.cx-frame-fig > svg, .cx-frame-fig > .bs-stack, .bs-stack > svg { min-width: 0; max-width: 100%; }
.cx-algo { margin: 24px 0; padding: 18px 22px; background: #0f1116; border-left: 3px solid var(--acc); }
.cx-algo-h { margin: 0 0 8px !important; font: 700 .74rem var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.cx-algo-sig { margin: 12px 0 4px !important; } .cx-algo-sig code { color: #e9ecf5; font-weight: 600; }
.cx-algo ol { margin: 4px 0 0; padding-left: 22px; } .cx-algo li { margin: 4px 0; color: var(--fg-dim); font-size: .92rem; }
.cx-algo ol ol { margin-top: 2px; list-style: lower-alpha; }
.cx-cplx-box { display: flex; flex-wrap: wrap; gap: 0; margin: 20px 0; border: 1px solid var(--rule); }
.cx-cplx-box > div { flex: 1 1 160px; padding: 14px 18px; border-right: 1px solid var(--rule); }
.cx-cplx-box > div:last-of-type { border-right: 0; }
.cx-cplx-box em { display: block; font: 700 .7rem var(--font); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); }
.cx-cplx-box b { font: 600 1.05rem ui-monospace, Menlo, monospace; color: var(--acc); }
.cx-cplx-box p { flex: 1 1 100%; margin: 0 !important; padding: 12px 18px; border-top: 1px solid var(--rule); font-size: .88rem; color: var(--fg-dim); max-width: none !important; }
.cx-index-mod { margin: 10px 10px 2px 12px !important; font: 600 .74rem var(--font); color: var(--acc-dim); letter-spacing: .02em; }
.cx-lesson-code { margin: 18px 0; } .cx-lesson-code .cx-pre { font-size: .8rem; line-height: 1.55; overflow-x: auto; }
@media (max-width: 760px) { .g-pair { flex-direction: column; } .g-pair-mid i { transform: rotate(90deg); } .cx-fig { padding: 12px 8px 8px; } }
.cx-compiler { margin: 10px 0 0; padding: 10px 12px; background: rgba(255,138,122,.07); border-left: 3px solid #ff8a7a; font: .78rem/1.5 ui-monospace, Menlo, monospace; color: #ffb3a8; white-space: pre-wrap; overflow-x: auto; }
.cx-compiler-note { margin: 8px 0 0 !important; font-size: .72rem; color: var(--fg-faint); }

/* ── the coding course: sidebar index, lessons, pager ── */
.cx-course { display: grid; grid-template-columns: 274px minmax(0, 1fr); gap: 30px; align-items: start; }
.cx-course-main { min-width: 0; }
.page-content .cx-course .hero.short { padding-top: 0; }
.cx-index { position: sticky; top: 92px; max-height: calc(100vh - 120px); display: flex; flex-direction: column;
    border: 1px solid var(--rule); background: #0f1014; }
.cx-index-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 14px 16px 8px;
    font: 700 .72rem var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); }
.cx-index-pct { color: var(--acc); letter-spacing: .04em; }
.cx-index-bar { height: 3px; background: rgba(255,255,255,.08); margin: 0 16px 10px; }
.cx-index-bar i { display: block; height: 100%; background: var(--acc); transition: width .3s; }
.cx-index-nav { overflow-y: auto; padding: 0 6px 14px; }
.cx-index-ch-name { margin: 12px 10px 4px !important; font: 700 .7rem var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); }
.cx-index-nav ul { list-style: none; margin: 0; padding: 0; }
.cx-index-nav li a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: none;
    font-size: .84rem; color: var(--fg-dim); line-height: 1.3; }
.cx-index-nav li a:hover { background: rgba(255,255,255,.04); color: var(--fg); }
.cx-index-nav li.on a { background: rgba(226,163,60,.10); color: var(--fg); box-shadow: inset 2px 0 0 var(--acc); }
.cx-index-title { flex: 1; min-width: 0; }
.cx-index-min { font-size: .7rem; color: var(--fg-faint); }
.cx-tick { flex: none; width: 13px; height: 13px; border: 1px solid var(--rule); border-radius: 50%; position: relative; }
.cx-tick.done { border-color: #5fd39a; background: #5fd39a; }
.cx-tick.done::after { content: "✓"; position: absolute; inset: 0; font-size: 9px; color: #0b0b0d; display: grid; place-items: center; }
.cx-lesson-sec { padding-top: 26px; }
.cx-prose { margin-left: var(--indent); max-width: var(--measure); }
.page-content .cx-prose p { margin-left: 0; }
.cx-prose .cx-pre { margin-left: 0; border: 1px solid var(--rule); background: #0e0f13; }
.cx-callout { border-left: 2px solid var(--acc); padding: 10px 0 10px 16px; color: var(--fg) !important; background: rgba(226,163,60,.05); }
.cx-table-wrap { overflow-x: auto; margin: 16px 0; }
.cx-tbl { border-collapse: collapse; width: 100%; font-size: .9rem; }
.cx-tbl th { text-align: left; color: var(--acc); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: 8px 12px; border-bottom: 1px solid var(--rule); }
.cx-tbl td { padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.06); color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.cx-course .cx-dry { margin-left: var(--indent); max-width: 760px; }
.cx-pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-left: var(--indent);
    padding-top: 22px; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.cx-pager a { display: flex; flex-direction: column; gap: 2px; border-bottom: none; max-width: 44%; }
.cx-pager-next { text-align: right; margin-left: auto; }
.cx-pager span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); }
.cx-pager b { font-weight: 400; color: var(--fg); font-size: .92rem; }
.cx-pager a:hover b { color: var(--acc); }
.cx-done-btn { background: none; border: 1px solid var(--rule); color: var(--fg-dim); font: 600 .72rem var(--font);
    letter-spacing: .1em; text-transform: uppercase; padding: 9px 16px; cursor: pointer; }
.cx-done-btn:hover { border-color: #5fd39a; color: #5fd39a; }
.cx-done-btn.done { border-color: #5fd39a; color: #5fd39a; background: rgba(95,211,154,.08); }
@media (max-width: 1100px) {
    .cx-course { grid-template-columns: 1fr; }
    .cx-index { position: static; max-height: none; margin-bottom: 20px; }
    .cx-index-nav { max-height: 320px; }
}
@media (max-width: 760px) { .cx-prose, .cx-pager, .cx-course .cx-dry { margin-left: 0; } }

/* the strategy hour: one clear strip, once per page */
.hour-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 36px; align-items: center;
    margin-left: 0; max-width: none; padding: 22px 28px;
    background: linear-gradient(150deg, rgba(226,163,60,.12), rgba(226,163,60,.03));
    border: 1px solid rgba(226,163,60,.45); clip-path: var(--clip-24); }
.hour-k { font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; color: var(--acc); margin: 0 0 6px !important; }
.hour-strip h2 { margin: 0 0 6px; font-size: clamp(1.25rem, 2.2vw, 1.55rem); }
.page-content .hour-strip p { margin: 0; max-width: 60ch; color: var(--fg-dim); font-size: .9rem; line-height: 1.55; }
.hour-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; max-width: 470px; }
.hour-cta .qp-btn { padding: 12px 18px; font-size: .74rem; }
.hour-more { flex-basis: 100%; text-align: right; font-size: .8rem; color: var(--acc); letter-spacing: .04em; border-bottom: none; }
.hour-more:hover { color: var(--fg); }
@media (max-width: 860px) { .hour-strip { grid-template-columns: 1fr; margin-left: 0; padding: 20px 18px; gap: 14px; }
    .hour-cta { justify-content: flex-start; } .hour-more { text-align: left; } }

/* ── Mental maths tests (/mental-math-test, src/drill.js) ─────────────── */
.dr { max-width: var(--wide); margin: 0 auto; }
.dr-k { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--acc); margin: 30px 0 12px; }
.dr-k:first-child { margin-top: 0; }
.dr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.dr-card {
    text-align: left; font: inherit; color: var(--fg); cursor: pointer;
    background: rgba(255,255,255,.04); border: 1px solid var(--rule); clip-path: var(--clip-14);
    padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 8px;
    transition: border-color .15s, background .15s, transform .15s;
}
.dr-card:hover, .dr-card:focus-visible { border-color: var(--acc); background: rgba(226,163,60,.07); transform: translateY(-2px); outline: none; }
.dr-card b { font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.dr-card span { font-size: .9rem; line-height: 1.5; color: var(--fg-dim); }
.dr-card .dr-fmt { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg); }
.dr-card.dr-focus { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
.dr-hist { font-style: normal; font-size: .78rem; color: var(--acc); min-height: 1.1em; display: flex; align-items: center; gap: 8px; }
.dr-spark { overflow: visible; }
.dr-spark polyline { fill: none; stroke: var(--acc); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.dr-note { font-size: .86rem; color: var(--fg-dim); margin-top: 22px; line-height: 1.7; }
.dr-note kbd, .dr-note code { font: .8rem/1 ui-monospace, Menlo, monospace; border: 1px solid var(--rule); padding: 2px 6px; border-radius: 3px; color: var(--fg); background: rgba(255,255,255,.05); }

.dr-run { border: 1px solid var(--rule); clip-path: var(--clip-24); background: rgba(255,255,255,.025); }
.dr-top { display: flex; align-items: center; gap: 18px; padding: 14px 20px; border-bottom: 1px solid var(--rule); font-size: .82rem; letter-spacing: .06em; }
.dr-name { text-transform: uppercase; font-weight: 700; }
.dr-pos { color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.dr-score { margin-left: auto; display: flex; align-items: baseline; gap: 6px; color: var(--fg-dim); }
.dr-score b { color: var(--fg); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.dr-time { font: 700 1.4rem/1 var(--font); font-variant-numeric: tabular-nums; min-width: 4.2ch; text-align: right; }
.dr-low .dr-time { color: var(--acc); animation: dr-pulse 1s ease-in-out infinite; }
@keyframes dr-pulse { 50% { opacity: .45; } }
.dr-quit { font: inherit; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-dim); background: none; border: 1px solid var(--rule); padding: 6px 12px; cursor: pointer; }
.dr-quit:hover { color: var(--fg); border-color: var(--fg-dim); }
.dr-bar { height: 3px; background: var(--rule); }
.dr-bar i { display: block; height: 100%; width: 0; background: var(--acc); }
.dr-stage { position: relative; min-height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px 56px; gap: 34px; }
.dr-q { font: 300 clamp(2rem, 5.2vw, 3.6rem)/1.15 var(--font); text-align: center; font-variant-numeric: tabular-nums; letter-spacing: .01em; margin: 0; max-width: 22ch; }
.dr-run[data-mode="rapid"] .dr-q, .dr-run[data-mode="seq"] .dr-q { font-size: clamp(1.4rem, 3.4vw, 2.4rem); max-width: 30ch; }
.dr-count { color: var(--acc); font-weight: 700; font-size: clamp(3rem, 8vw, 5rem); }
.dr-opts { display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); gap: 12px; width: min(760px, 100%); }
.dr-opt {
    font: 400 1.35rem/1 var(--font); font-variant-numeric: tabular-nums; color: var(--fg); cursor: pointer;
    background: rgba(255,255,255,.05); border: 1px solid var(--rule); clip-path: var(--clip-14);
    padding: 22px 12px; position: relative; transition: border-color .1s, background .1s;
}
.dr-opt span { position: absolute; top: 7px; left: 10px; font-size: .68rem; color: var(--fg-faint); }
.dr-opt:hover, .dr-opt:focus-visible { border-color: var(--acc); background: rgba(226,163,60,.10); outline: none; }
.dr-in { display: flex; gap: 10px; align-items: stretch; justify-content: center; flex-wrap: wrap; }
.dr-input {
    font: 400 1.9rem/1 var(--font); font-variant-numeric: tabular-nums; text-align: center; color: var(--fg);
    background: rgba(255,255,255,.06); border: 1px solid var(--rule); border-bottom: 2px solid var(--acc);
    width: min(320px, 70vw); padding: 14px 16px; outline: none;
}
.dr-input:focus { background: rgba(255,255,255,.09); }
.dr-go, .dr-skip { font: inherit; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; padding: 0 20px; border: 1px solid var(--acc); color: var(--acc); background: none; }
.dr-skip { border-color: var(--rule); color: var(--fg-dim); }
.dr-go:hover { background: var(--acc-lo); }
.dr-tol { font-size: .8rem; color: var(--fg-dim); margin: 10px 0 0; text-align: center; }
.dr-fb { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.dr-fb.on { animation: dr-flash .35s ease-out; }
.dr-fb.ok { background: radial-gradient(circle at 50% 45%, rgba(226,163,60,.16), transparent 60%); }
.dr-fb.no { background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.10), transparent 60%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.dr-fb.sk, .dr-fb.nt { background: rgba(255,255,255,.035); }
@keyframes dr-flash { from { opacity: 1; } to { opacity: 0; } }

.dr-done { padding-top: 6px; }
.dr-r-head { display: grid; grid-template-columns: minmax(220px, auto) 1fr; gap: 28px; align-items: end; border-bottom: 1px solid var(--rule); padding-bottom: 24px; }
.dr-r-score { margin: 0; display: grid; gap: 4px; }
.dr-r-score b { font: 700 clamp(3.4rem, 8vw, 5.4rem)/0.9 var(--font); color: var(--acc); font-variant-numeric: tabular-nums; }
.dr-r-score span { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; }
.dr-r-score em { font-style: normal; color: var(--fg-dim); font-size: .9rem; }
.dr-r-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0; }
.dr-r-stats div { border-left: 1px solid var(--rule); padding-left: 14px; }
.dr-r-stats dt { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.dr-r-stats dd { margin: 2px 0 0; font-size: .78rem; color: var(--fg-dim); }
.dr-r-note { color: var(--fg-dim); font-size: .92rem; margin: 18px 0 0; }
.dr-r-note b { color: var(--fg); }
.dr-r-trend svg { display: block; width: 100%; height: 48px; margin-top: 8px; }
.dr-r-cats { display: grid; gap: 8px; }
.dr-cat { display: grid; grid-template-columns: minmax(130px, 200px) 1fr 110px; gap: 14px; align-items: center; font-size: .88rem; }
.dr-cat i { height: 6px; background: var(--rule); display: block; }
.dr-cat i b { display: block; height: 100%; background: var(--acc); }
.dr-cat em { font-style: normal; color: var(--fg-dim); font-variant-numeric: tabular-nums; text-align: right; }
.dr-r-wrong h3, .dr-r-slow h3 { font-size: 1rem; margin: 34px 0 10px; }
.dr-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.dr-list li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 60px; gap: 6px 16px; padding: 11px 0; border-bottom: 1px solid var(--rule); font-size: .92rem; align-items: baseline; }
.dr-rq { font-variant-numeric: tabular-nums; }
.dr-ra { color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.dr-ra b { color: var(--acc); font-weight: 400; }
.dr-rt { color: var(--fg-faint); text-align: right; font-variant-numeric: tabular-nums; }
.dr-rh { grid-column: 1 / -1; font-size: .82rem; color: var(--fg-dim); }
.dr-done .hero-cta { margin-top: 34px; }

@media (max-width: 760px) {
    .dr-top { flex-wrap: wrap; gap: 8px 14px; padding: 12px 14px; }
    .dr-score { margin-left: 0; order: 5; width: 100%; }
    .dr-time { margin-left: auto; }
    .dr-stage { min-height: 320px; padding: 34px 14px 40px; gap: 26px; }
    .dr-opts { grid-template-columns: repeat(2, 1fr); }
    .dr-opt { padding: 20px 8px; font-size: 1.25rem; }
    .dr-input { font-size: 1.6rem; width: 100%; }
    .dr-r-head { grid-template-columns: 1fr; }
    .dr-r-stats { grid-template-columns: repeat(2, 1fr); }
    .dr-cat { grid-template-columns: 1fr 90px; }
    .dr-cat i { grid-column: 1 / -1; order: 3; }
    .dr-list li { grid-template-columns: 1fr 50px; }
    .dr-ra { grid-column: 1 / -1; }
}

/* Interview papers on the quant quiz page */
.qz-papers { margin-bottom: 8px; }
.qz-paper { border-color: rgba(226,163,60,.40); }
.qz-paper:hover { border-color: var(--acc); background: rgba(226,163,60,.08); }
.qz-bank .qz-pblurb { font-size: .84rem; line-height: 1.5; color: var(--qz-dim); margin-top: 2px; }
.qz-start .qz-k + .qz-banks { margin-bottom: 26px; }

/* Quant prep hub: timed tests and coding */
.qp-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 18px; }
.qp-more-card {
    display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 18px; text-decoration: none; color: var(--fg);
    border: 1px solid var(--rule); background: rgba(255,255,255,.035); clip-path: var(--clip-14);
    transition: border-color .15s, background .15s, transform .15s;
}
.qp-more-card:hover { border-color: var(--acc); background: rgba(226,163,60,.07); transform: translateY(-2px); }
.qp-more-card b { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .03em; }
.qp-more-card span { font-size: .9rem; line-height: 1.55; color: var(--fg-dim); }
.qp-more-card em { font-style: normal; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); margin-top: auto; }
.dr .dr-list, .dr .dr-list li { margin-left: 0; max-width: none; }
.dr-r-wrong h3, .dr-r-slow h3, .dr-r-note, .dr-r-cats { margin-left: 0; max-width: none; }
.dr-ans { width: 100%; display: flex; flex-direction: column; align-items: center; }
.dr-opts { width: min(820px, 100%); }
.dr-opt { min-height: 76px; }
@media (max-width: 760px) { .dr-opt { min-height: 68px; } }

/* Firm interview pages (tools/firms/build_firms.py) */
.fi-steps { padding-left: 1.2em; display: grid; gap: 12px; }
.fi-steps li { line-height: 1.6; }
.fi-src { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); margin-left: 6px; white-space: nowrap; }
.fi-note { color: var(--fg-dim); font-size: .92rem; }
.fi-probs { padding-left: 1.2em; display: grid; gap: 22px; margin-top: 18px; }
.fi-p { line-height: 1.6; }
.fi-q { margin: 0 0 8px; }
.fi-sol summary { cursor: pointer; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.fi-sol[open] summary { color: var(--fg-dim); margin-bottom: 8px; }
.fi-sol p { color: var(--fg-dim); }
.fi-a b { color: var(--fg); }
.fi-more { line-height: 2; }
.fi-cta { border-left: 2px solid var(--acc); padding-left: 16px; margin-top: 26px; }
/* the list itself carries the prose indent; its paragraphs must not add another */
.fi-probs, .fi-steps { margin-left: var(--indent); max-width: var(--measure); }
.fi-probs p, .fi-probs details, .fi-steps p { margin-left: 0; max-width: none; }

/* ── Data Insights / Integrated Reasoning formats ───────────────────────── */
/* practice pages (dark theme) */
.qblank { display: inline-block; min-width: 3.2em; border-bottom: 1px solid var(--acc); color: var(--acc); text-align: center; font-weight: 700; margin: 0 2px; }
.qgi-opts { margin: 10px 0 4px; display: grid; gap: 6px; font-size: .92rem; }
.qgi-opts p { margin: 0; }
.qgi-opts b { color: var(--acc); margin-right: 6px; }
.qsep { color: var(--fg-faint); margin: 0 4px; }
.qta { border-collapse: collapse; width: 100%; margin: 12px 0 4px; font-size: .92rem; }
.qta th { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); text-align: center; padding: 6px 8px; border-bottom: 1px solid var(--rule); width: 4.5em; }
.qta th:last-child { text-align: left; width: auto; }
.qta td { padding: 8px; border-bottom: 1px solid rgba(255,255,255,.07); }
.qta td:not(:last-child) { width: 4.5em; }
.qta td:not(:last-child)::after { content: "○"; display: block; text-align: center; color: var(--fg-faint); }
.msr-static { display: grid; gap: 12px; margin-bottom: 14px; }
.msr-sec { border: 1px solid rgba(255,255,255,.09); padding: 12px 14px; background: rgba(255,255,255,.02); }
.msr-name { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); margin: 0 0 8px; }
.msr-text p { margin: 0 0 8px; }
.rc-passage { border: 1px solid rgba(255,255,255,.09); padding: 14px 16px; background: rgba(255,255,255,.02); margin-bottom: 14px; }
.rc-passage .msr-text p { margin: 0 0 10px; line-height: 1.6; }
.rc-ref { font-size: .86rem; color: var(--fg-faint); font-style: italic; margin: 0 0 8px; }
.xm .rc-passage { border: 0; background: none; padding: 0; }
.qz-parts { margin: 8px 0 0; padding-left: 1.3em; font-size: .92rem; }

/* exam window (light theme, like the test software) */
.xm .xm-sel { font: 15px Arial, Helvetica, sans-serif; padding: 3px 6px; margin: 0 3px; border: 1px solid #7a8591; border-radius: 3px; background: #fff; color: #111; max-width: 100%; }
.xm .xm-sel:focus { outline: 2px solid #1a73e8; outline-offset: 1px; }
.xm-ta { border-collapse: collapse; width: 100%; margin: 20px 0 0; font: 15px/1.45 Arial, Helvetica, sans-serif; color: #111; }
.xm-ta th { background: #eef1f5; border: 1px solid #c8cfd7; padding: 8px 6px; font-size: 13px; text-align: center; width: 5.5em; }
.xm-ta th.xm-ta-s { text-align: left; width: auto; }
.xm-ta td { border: 1px solid #d6dbe1; padding: 9px 8px; vertical-align: middle; }
.xm-ta td:not(.xm-ta-s) { text-align: center; width: 5.5em; }
.xm-rb { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 4px; }
.xm-rb input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.xm-rb .xm-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #5f6b76; display: inline-block; box-sizing: border-box; }
.xm-rb input:checked + .xm-dot { border-color: #1a73e8; box-shadow: inset 0 0 0 4px #fff; background: #1a73e8; }
.xm-rb input:focus-visible + .xm-dot { outline: 2px solid #1a73e8; outline-offset: 2px; }
.xm-ta tbody tr:hover { background: #f6f8fa; }
.xm .msr-tabs { display: flex; gap: 4px; border-bottom: 2px solid #b9c2cc; margin-bottom: 12px; flex-wrap: wrap; }
.xm .msr-tab { font: 700 13px Arial, Helvetica, sans-serif; padding: 8px 14px; border: 1px solid #b9c2cc; border-bottom: none; background: #eef1f5; color: #333; cursor: pointer; border-radius: 3px 3px 0 0; }
.xm .msr-tab.on { background: #fff; color: #111; position: relative; top: 2px; border-bottom: 2px solid #fff; }
.xm .msr-text { font: 15px/1.55 Arial, Helvetica, sans-serif; color: #111; }
.xm table[data-sortable] th { cursor: pointer; user-select: none; }
.xm table[data-sortable] th::after { content: "⇅"; margin-left: 4px; opacity: .45; font-size: 11px; }
.xm table[data-sortable] th[data-dir="asc"]::after { content: "▲"; opacity: .9; }
.xm table[data-sortable] th[data-dir="desc"]::after { content: "▼"; opacity: .9; }
.xm .qblank { color: #1a73e8; border-bottom-color: #1a73e8; }
.xm-n-back { background: #fff; color: #1a3d6d; border: 1px solid #1a3d6d; }
/* exam tables must fit the half-width source pane: wrap the headings, tighten the cells */
.xm .xm-stim .qtable th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.xm .xm-stim .qtable th, .xm .xm-stim .qtable td { padding: 7px 8px; font-size: 14px; }
.xm .xm-stim .qtable td { white-space: nowrap; }

/* The Quant Careers Report — product band: amber panel with the cover, dark warm text panel */
.rp-band {
    display: grid; grid-template-columns: 320px 1fr; align-items: stretch;
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(226,163,60,.14), transparent 60%),
        linear-gradient(135deg, #1b150b, #0d0b08 65%);
    border: 1px solid rgba(226,163,60,.6); clip-path: var(--clip-24);
}
.rp-band > div { padding: 44px 52px; }
.rp-band a.rp-cover {
    display: flex; align-items: center; justify-content: center; padding: 40px 30px;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,.28), transparent 45%),
        linear-gradient(150deg, #f2bd5e, #e2a33c 50%, #b47a1e);
    border-bottom: 0;
}
/* Flat cover with a cast shadow. A 3D tilt (perspective + rotateY) inside a clip-path parent is flattened
   or blurred by Firefox, so the covers use 2D transforms only. */
.rp-cover img {
    display: block; width: 184px; height: auto;
    box-shadow: 14px 18px 34px rgba(40,22,0,.55), 0 0 0 1px rgba(0,0,0,.25);
    transition: transform .3s ease, box-shadow .3s ease;
}
.rp-band:hover .rp-cover img { transform: translateY(-4px); box-shadow: 16px 24px 40px rgba(40,22,0,.6), 0 0 0 1px rgba(0,0,0,.25); }
.rp-eyebrow { font-family: var(--cond); text-transform: uppercase; letter-spacing: .18em; font-size: .78rem; color: var(--acc); margin: 0 0 14px; }
.rp-band h2 { margin: 0 0 14px; color: #fff; }
.rp-sub { font-size: 1.04rem; line-height: 1.6; color: #d8cfc0; max-width: 36em; margin: 0 0 26px; }
.page-content .rp-band p { margin-left: 0; }
.rp-band .qp-btn.ghost { color: #fff !important; border-color: rgba(255,255,255,.45); }
@media (max-width: 760px) {
    .rp-band { grid-template-columns: 1fr; }
    .rp-band a.rp-cover { padding: 30px 20px; }
    .rp-cover img { width: 136px; }
    .rp-band > div { padding: 30px 24px 32px; }
}
.hour-btn { margin: 0 0 0 var(--indent); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.page-content .hour-btn { margin-left: var(--indent); }
.hour-btn .hour-more { flex-basis: auto; text-align: left; }
@media (max-width: 760px) { .hour-btn, .page-content .hour-btn { margin-left: 0; } }

/* Strategy-hour card beside the hero text */
.hero-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px 56px; align-items: start; }
.hero-main > :first-child { margin-top: 0; }
.hero-hour {
    padding: 22px 24px 20px; margin-top: 4px;
    background: linear-gradient(150deg, rgba(226,163,60,.16), rgba(226,163,60,.04));
    border: 1px solid rgba(226,163,60,.55); clip-path: var(--clip-14);
    display: flex; flex-direction: column; align-items: flex-start;
}
.page-content .hero-hour p { margin: 0; }
.hh-k { font-family: var(--cond); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; color: var(--acc); }
.page-content .hero-hour .hh-t { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 1.2rem; color: #fff; margin: 6px 0 8px; }
.page-content .hero-hour .hh-d { font-size: .88rem; line-height: 1.5; color: var(--fg-dim); margin-bottom: 16px; }
.hero-hour .qp-btn { padding: 12px 18px; font-size: .74rem; }
.hh-l { margin-top: 10px; font-size: .8rem; color: var(--acc); border-bottom: none; }
.hh-l:hover { color: var(--fg); }
@media (max-width: 1000px) { .hero-split { grid-template-columns: 1fr; } .hero-hour { max-width: 420px; } }

/* Premium: locked question cards, the note above them, Ask AI bubble */
.qlocked .qlock { position: relative; height: 52px; margin-top: 10px; border: 1px dashed rgba(226,163,60,.45);
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 10px, transparent 10px 20px); }
.qlocked .qlock::after { content: "Answer and solution \00B7  Premium"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--cond); text-transform: uppercase; letter-spacing: .2em; font-size: .78rem; color: var(--acc); }
.qprem, .qz-prem { border: 1px solid rgba(226,163,60,.6); background: linear-gradient(150deg, rgba(226,163,60,.14), rgba(226,163,60,.03));
    padding: 18px 22px; margin: 0 0 18px; clip-path: var(--clip-14); }
.page-content .qprem p, .page-content .qz-prem p { margin: 0 0 10px; max-width: none; color: var(--fg); font-size: .95rem; }
.qprem p:last-child, .qz-prem p:last-child { margin-bottom: 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.qprem-in, .qz-prem-in { font-size: .85rem; color: var(--acc); border-bottom: 0; }
.qz-locked .qz-bank { opacity: .75; }
.qz-locked .qz-bank::after { content: "Premium"; display: inline-block; margin-top: 6px; font-family: var(--cond); text-transform: uppercase;
    letter-spacing: .16em; font-size: .66rem; color: var(--acc); }
.askai { position: absolute; z-index: 60; max-width: 330px; background: #121212; border: 1px solid var(--acc); padding: 10px 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.6); font-size: .88rem; line-height: 1.5; color: var(--fg); }
.askai p { margin: 0 0 8px; } .askai p:last-child { margin: 0; }
.askai-go { background: var(--acc); color: #111; border: 0; font: 700 .72rem var(--font); text-transform: uppercase; letter-spacing: .1em; padding: 8px 12px; cursor: pointer; }
.askai-a { max-height: 320px; overflow: auto; } .askai-f { font-size: .74rem; color: var(--fg-faint); margin-top: 8px !important; }
.askai .cta { font-size: .72rem; padding: 8px 12px; }

/* Pricing */
.pl-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px var(--indent); }
.pl-tabs a { border: 1px solid var(--rule); padding: 9px 16px; font: 700 .74rem var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); }
.pl-tabs a:hover { border-color: var(--acc); color: var(--acc); }
.pl-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0 var(--indent) !important; padding: 0; }
.pl-trust li { color: var(--fg-dim); font-size: .9rem; padding-left: 18px; position: relative; }
.pl-trust li::before { content: "✓"; position: absolute; left: 0; color: var(--acc); }
.pl-group { padding-top: 34px; scroll-margin-top: 90px; }
.pl-pitch { max-width: var(--measure); }
.pls { display: grid; gap: 22px; margin-left: var(--indent); }
.pl { border: 1px solid rgba(226,163,60,.45); padding: 24px 26px; clip-path: var(--clip-24); background: linear-gradient(150deg, rgba(226,163,60,.08), transparent 60%); scroll-margin-top: 90px; }
.pl h3 { margin: 0 0 4px; }
.page-content .pl-for { margin: 0 0 12px; color: var(--fg-dim); font-size: .92rem; max-width: none; }
.pl-inc { margin: 0 0 18px; padding-left: 18px; color: var(--fg); font-size: .95rem; }
.pl-inc li { margin-bottom: 5px; }
.pl-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pl-opt { display: flex; flex-direction: column; gap: 3px; padding: 14px 14px 12px; border: 1px solid rgba(255,255,255,.22); color: var(--fg); position: relative; }
a.pl-opt:hover { border-color: var(--acc); background: rgba(226,163,60,.08); }
.pl-best { border-color: var(--acc); background: rgba(226,163,60,.10); }
.pl-per { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; color: var(--acc); }
.pl-per i { font-style: normal; background: var(--acc); color: #0b0b0d; padding: 2px 6px; letter-spacing: .08em; font-size: .62rem; }
.pl-opt b { font-size: 1.55rem; line-height: 1.2; margin-top: 4px; } .pl-opt b small { font-size: .78rem; font-weight: 400; color: var(--fg-dim); }
.pl-bill { font-size: .8rem; color: var(--fg-dim); }
.pl-was { font-size: .74rem; color: var(--fg-faint); } .pl-was s { color: var(--fg-dim); }
.pl-save { align-self: flex-start; font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: #5fd39a; border: 1px solid rgba(95,211,154,.5); padding: 1px 6px; margin-top: 2px; }
.pl-day { font-size: .74rem; color: var(--fg-faint); }
.pl-go { margin-top: 8px; font: 700 .7rem var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.pl-soon { opacity: .65; } .pl-soon em { font-style: normal; font-size: .72rem; color: var(--fg-faint); }
.pl-more { margin: 18px 0 0 var(--indent); max-width: var(--measure); border-left: 2px solid var(--acc); padding: 4px 0 4px 16px; }
.page-content .pl-more p { margin: 0 0 8px; font-size: .93rem; }
@media (max-width: 900px) { .pl-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pl { padding: 20px 16px; } .pls, .pl-tabs, .pl-more, .pl-trust { margin-left: 0 !important; } }
.acct-form { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 0 var(--indent); }
.acct-form input { flex: 1 1 260px; max-width: 380px; background: #0f0f10; border: 1px solid rgba(255,255,255,.3); color: var(--fg); padding: 12px 14px; font: 400 1rem var(--font); }
@media (max-width: 760px) { .acct-form { margin-left: 0; } }
.cx-locked { min-height: 64px; margin: 10px 0; border: 1px dashed rgba(226,163,60,.45); position: relative;
    background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 10px, transparent 10px 20px); }
.cx-locked::after { content: "Premium"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--cond); text-transform: uppercase; letter-spacing: .2em; font-size: .78rem; color: var(--acc); }
.qlock, .cx-locked { cursor: pointer; transition: border-color .15s, background-color .15s; }
.qlock:hover, .cx-locked:hover { border-color: var(--acc); background-color: rgba(226,163,60,.06); }
.qlock.open, .cx-locked.open { height: auto; min-height: 74px; cursor: default; }
.qlock.open::after, .cx-locked.open::after { content: none; }
.qoffer { padding: 14px 16px; }
.page-content .qoffer p { margin: 0 0 10px; max-width: none; font-size: .92rem; color: var(--fg); }
.qoffer p:last-child { margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.qoffer .cta { font-size: .72rem; padding: 9px 14px; }
.askbar { margin-top: 12px; }
.askbtn { background: var(--acc); color: #111; border: 0; font: 700 .7rem var(--font); text-transform: uppercase; letter-spacing: .12em;
    padding: 7px 12px; cursor: pointer; clip-path: var(--clip-14, none); }
.askbtn:hover { background: #f0b654; }
.askbtn::before { content: "✦ "; }
.askbox { margin-top: 10px; border: 1px solid rgba(226,163,60,.5); padding: 12px; background: #101010; }
.askform { display: flex; gap: 8px; flex-wrap: wrap; }
.askform input { flex: 1 1 240px; background: #0b0b0b; border: 1px solid rgba(255,255,255,.3); color: var(--fg); padding: 9px 11px; font: 400 .92rem var(--font); }
.askform .cta { font-size: .72rem; padding: 9px 14px; }
.askout { margin-top: 10px; font-size: .92rem; line-height: 1.55; }
.page-content .askout p, .page-content .askai p { margin: 0 0 8px; max-width: none; }
.askout { max-height: 460px; overflow: auto; }
.askq { margin: 10px 0 6px !important; padding: 6px 10px; background: rgba(226,163,60,.10); border-left: 2px solid var(--acc); color: var(--fg); font-size: .9rem; }
.askai-a { font-size: .93rem; line-height: 1.6; color: var(--fg); }
.askai-a p { margin: 0 0 8px; } .askai-a ul { margin: 0 0 8px 18px; padding: 0; } .askai-a li { margin: 2px 0; }
.askai-a .askh { display: block; font-weight: 600; margin: 10px 0 4px; font-family: var(--cond); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--acc); }
.askai-a .katex-display { margin: 8px 0; overflow-x: auto; overflow-y: hidden; }
.askai-a code { font-family: ui-monospace, Menlo, monospace; font-size: .85em; background: rgba(255,255,255,.07); padding: 1px 4px; }
.askcode { background: #0b0b0b; border-left: 3px solid var(--acc); padding: 10px 12px; overflow-x: auto; margin: 6px 0 10px; }
.askcode code { background: none; padding: 0; font-size: .82rem; line-height: 1.5; white-space: pre; }
.askai-f { display: flex; gap: 10px; align-items: center; font-size: .74rem; color: var(--fg-faint); margin: 2px 0 10px !important; }
.asklisten, .askmic { background: transparent; border: 1px solid rgba(226,163,60,.7); color: var(--acc); font: 600 .68rem var(--font); text-transform: uppercase; letter-spacing: .1em; padding: 5px 9px; cursor: pointer; }
.askmic.rec { background: #b3261e; border-color: #b3261e; color: #fff; }
.askform { margin-top: 8px; }

/* ML coding track: hub chapters and inline maths */
.ml-chs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-left: var(--indent); }
.ml-ch { border: 1px solid var(--rule); background: #0f1014; clip-path: var(--clip-14); }
.ml-ch-head { display: flex; gap: 14px; padding: 16px 18px 12px; border-bottom: 1px solid var(--rule); }
.ml-ch-head .ix { font: 700 1.3rem var(--font); color: var(--acc); line-height: 1; }
.ml-ch-head b { display: block; color: var(--fg); font-weight: 700; font-size: .98rem; }
.ml-ch-head em { display: block; font-style: normal; color: var(--fg-dim); font-size: .84rem; margin-top: 4px; line-height: 1.45; }
.ml-ch-head:hover b { color: var(--acc); }
.ml-ch-list { list-style: none; margin: 0; padding: 8px 10px 12px; }
.ml-ch-list a { display: flex; gap: 10px; align-items: center; padding: 6px 8px; color: var(--fg-dim); font-size: .9rem; border-bottom: none; }
.ml-ch-list a:hover { color: var(--fg); background: rgba(255,255,255,.04); }
.cx-math { margin-left: var(--indent); padding: 10px 16px; border-left: 2px solid rgba(226,163,60,.5); background: rgba(255,255,255,.025);
    font-family: "STIX Two Math", "Cambria Math", Georgia, serif; font-size: 1.04rem; color: var(--fg) !important; overflow-x: auto; }
.cx-statement .cx-math, .cx-idea .cx-math { margin-left: 0; }
.cx-cx { color: var(--fg-dim); font-size: .9rem; }
@media (max-width: 900px) { .ml-chs { grid-template-columns: 1fr; margin-left: 0; } .cx-math { margin-left: 0; } }

/* Problem pages inside a course: the sidebar already offsets the content, so the grid takes the full width,
   and headings inside the narrow statement panel are sized for a panel, not a page. */
.cx-course .cx-grid { margin-left: 0; }
.page-content .cx-panel h2 { font-size: 1.05rem; letter-spacing: .12em; margin: 1.6em 0 .7em; color: var(--acc); }
.page-content .cx-panel .cx-statement > p:first-child { margin-top: 0; }
.page-content .ml-ch-list { margin-left: 0; padding-left: 10px; }
.ml-exs { display: grid; gap: 12px; }
.ml-ex { border: 1px solid var(--rule); background: rgba(255,255,255,.02); padding: 12px 14px; }
.page-content .ml-ex p { margin: 0 0 6px; font-size: .9rem; max-width: none; }
.ml-ex code { white-space: pre-wrap; word-break: break-word; }
.ml-ex-k { display: inline-block; min-width: 58px; font: 700 .66rem var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); }
.page-content .ml-ex .ml-ex-why { color: var(--fg-dim); margin: 4px 0 0; }
.cx-lesson .cx-pre { margin-left: var(--indent); max-width: var(--measure); padding: 14px 16px; border: 1px solid var(--rule); background: #0e0f13; overflow-x: auto; font-size: .86rem; }
@media (max-width: 760px) { .cx-lesson .cx-pre { margin-left: 0; } }
.page-content .pl-inc { margin-left: 0; padding-left: 18px; }
@media (max-width: 760px) { .pl-opt b { font-size: 1.35rem; } .pl-opt b small { display: block; } }

/* Nav: the Courses dropdown, a <details> like the language switcher, so it opens without script. */
.nav-drop { position: relative; align-self: center; }
.nav-drop summary { list-style: none; cursor: pointer; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg); white-space: nowrap; }
.nav-drop summary::-webkit-details-marker { display: none; }
.nav-drop summary::after { content: attr(data-tag); margin-left: 6px; padding: 1px 5px 0; font-size: .6rem; letter-spacing: .1em; color: #0b0f2e; background: #74D4C4; vertical-align: 2px; }
.nav-caret { font-size: .6rem; opacity: .7; letter-spacing: 0; }
.nav-drop[open] summary, .nav-drop summary:hover { color: var(--acc); }
.nav-drop-menu { position: absolute; left: -12px; top: calc(100% + 12px); z-index: 30; min-width: 230px; padding: 6px 0;
    background: #0b0b0b; border: 1px solid var(--rule); clip-path: var(--clip-14); display: flex; flex-direction: column; }
.nav .nav-drop-menu a { display: block; padding: 10px 16px; border: none; text-transform: none; letter-spacing: .02em; font-size: .92rem; color: var(--fg-dim); }
.nav .nav-drop-menu a:hover { color: var(--acc); background: #ffffff08; }

/* Report shelf: the three reports side by side (home, products) */
.shelf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-left: var(--indent); }
.shelf-item { border: 1px solid rgba(226,163,60,.45); background: linear-gradient(160deg, rgba(226,163,60,.10), rgba(226,163,60,.02) 60%);
    clip-path: var(--clip-14); padding: 20px 20px 18px; display: flex; flex-direction: column; }
.shelf-cover { display: block; border: none; margin: 0 0 14px; }
.shelf-cover img { width: 112px; height: auto; display: block; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.shelf-item h3 { margin: 4px 0 8px; font-size: 1.02rem; } .shelf-item h3 a { color: var(--fg); border: none; }
.shelf-item h3 a:hover { color: var(--acc); }
.page-content .shelf-item p { margin: 0 0 12px; font-size: .9rem; max-width: none; color: var(--fg-dim); }
.page-content .shelf-item .rp-eyebrow { margin: 0; font-size: .7rem; color: var(--acc); }
.page-content .shelf-cta { margin-top: auto !important; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.shelf-more { font-size: .85rem; }
@media (max-width: 900px) { .shelf { grid-template-columns: 1fr; margin-left: 0; } .shelf-item { flex-direction: column; } }

/* Between the compact header and wide screens the left nav has seven items: tighten it so it clears the logo. */
@media (min-width: 1301px) and (max-width: 1480px) { .nav.left { gap: 14px; } .nav.left a, .nav-drop summary { letter-spacing: .07em; } }

/* Dry run inside the narrow problem panel: no page indent, the step label above the frame, cells in one row. */
.cx-course .cx-panel .cx-dry, .page-content .cx-panel .cx-dry-intro { margin-left: 0; max-width: none; }
.cx-panel .cx-frame { grid-template-columns: 1fr; gap: 6px; }
.cx-panel .cx-arr { flex-wrap: nowrap; }
.cx-panel .cx-arr > :last-child { display: flex; flex-wrap: wrap; gap: 4px; }
.page-content .cx-panel .cx-pane h2 code { font-size: .8em; word-break: break-all; }
.cx-panel .cx-dry ol, .cx-panel .cx-dry .cx-frames { padding-left: 0; margin-left: 0; list-style: none; }

/* Report "Look inside" */
.look-strip { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; margin-left: var(--indent); scroll-snap-type: x mandatory; }
.look-thumb { flex: none; width: 168px; padding: 0; border: 1px solid var(--rule); background: #fff; cursor: zoom-in; scroll-snap-align: start;
    box-shadow: 0 10px 24px rgba(0,0,0,.45); transition: transform .2s, border-color .2s; }
.look-thumb:hover { transform: translateY(-3px); border-color: var(--acc); }
.look-thumb img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.look-box { position: fixed; inset: 0; z-index: 200; background: rgba(5,5,7,.94); display: flex; align-items: center; justify-content: center; }
.look-box[hidden] { display: none; }
.look-box img { max-height: 92vh; max-width: min(92vw, 760px); background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.6); user-select: none; -webkit-user-drag: none; }
.look-box button { position: absolute; background: none; border: 1px solid var(--rule); color: var(--fg); font-size: 1.6rem; width: 46px; height: 46px; cursor: pointer; }
.look-box button:hover { border-color: var(--acc); color: var(--acc); }
.look-x { top: 18px; right: 18px; } .look-prev { left: 18px; top: calc(50% - 23px); } .look-next { right: 18px; top: calc(50% - 23px); }
.look-count { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; margin: 0 !important; color: var(--fg-dim); font-size: .85rem; }
body.look-open { overflow: hidden; }
@media (max-width: 760px) { .look-strip { margin-left: 0; } .look-thumb { width: 132px; } .look-prev { left: 6px; } .look-next { right: 6px; } }

/* ── Quant developer course (tools/code/render-hft.mjs) ─────────────────── */
svg.hf { display: block; width: 100%; max-width: 680px; height: auto; margin: 0 auto; font-family: var(--font); }
svg.hf text { font-size: 12.5px; fill: rgba(255,255,255,.86); }
svg.hf .hf-in { font: 600 12.5px ui-monospace, SFMono-Regular, Menlo, monospace; fill: #fff; }
svg.hf .hf-sub { font-size: 10.5px; fill: rgba(255,255,255,.62); }
svg.hf .hf-t { font: 700 10.5px var(--font); letter-spacing: .12em; text-transform: uppercase; fill: rgba(255,255,255,.62); }
svg.hf .hf-lab { font-size: 11.5px; fill: rgba(255,255,255,.75); }
svg.hf .hf-lab.bad { fill: #ff8a7a; } svg.hf .hf-lab.acc { fill: var(--acc); } svg.hf .hf-lab.ok { fill: #5fd39a; }
.hf-box { fill: #14161b; stroke: rgba(255,255,255,.42); stroke-width: 1.3; }
.hf-box.acc { fill: rgba(226,163,60,.16); stroke: var(--acc); }
.hf-box.hot { fill: var(--acc); stroke: #ffc65c; } svg.hf .hf-in.hot, svg.hf .hf-sub.hot { fill: #0e0f13; }
.hf-box.ok { fill: rgba(95,211,154,.15); stroke: #5fd39a; }
.hf-box.bad { fill: rgba(255,138,122,.15); stroke: #ff8a7a; }
.hf-box.b { fill: rgba(116,212,196,.14); stroke: rgb(116,212,196); }
.hf-box.dim { fill: #0e0f13; stroke: rgba(255,255,255,.16); }
.hf-ln { stroke: rgba(255,255,255,.5); stroke-width: 1.5; } .hf-ah { fill: rgba(255,255,255,.6); }
.hf-ln.acc { stroke: var(--acc); } .hf-ah.acc { fill: var(--acc); }
.hf-ln.ok { stroke: #5fd39a; } .hf-ah.ok { fill: #5fd39a; }
.hf-ln.bad { stroke: #ff8a7a; stroke-dasharray: 5 4; } .hf-ah.bad { fill: #ff8a7a; }
.hf-br { fill: none; stroke: rgba(255,255,255,.45); stroke-width: 1.2; } .hf-br.acc { stroke: var(--acc); } .hf-br.bad { stroke: #ff8a7a; }
.hf-lane { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.hf-axis { stroke: rgba(255,255,255,.3); }
.hf-mark { stroke: rgba(255,255,255,.45); stroke-dasharray: 4 4; } .hf-mark.bad { stroke: #ff8a7a; }
.hf-bar { fill: rgba(255,255,255,.28); } .hf-bar.acc { fill: var(--acc); } .hf-bar.bad { fill: #ff8a7a; } .hf-bar.ok { fill: #5fd39a; }
.hf-bar.ask { fill: rgba(255,138,122,.55); } .hf-bar.bid { fill: rgba(95,211,154,.55); } .hf-bar.hot { fill: var(--acc); }

/* the question that opens each lesson */
.hf-ask { margin-left: var(--indent); max-width: var(--measure); padding: 20px 24px 18px; clip-path: var(--clip-14);
    border-left: 3px solid var(--acc); background: linear-gradient(120deg, rgba(226,163,60,.13), rgba(226,163,60,.02) 70%); }
.hf-ask p { margin: 0; font-size: 1.12rem; line-height: 1.5; color: var(--fg); }
.page-content .hf-ask .hf-ask-h, .hf-ask .hf-ask-h { margin: 0 0 8px; font: 700 .7rem var(--font); letter-spacing: .18em; text-transform: uppercase; color: var(--acc); }
.hf-drill .hf-ask { margin-left: 0; }
.cx-prose h3, .hf-drill h3 { margin: 28px 0 10px; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); }
.hf-pre { font-size: .84rem !important; line-height: 1.6; }
.hf-tbl { overflow-x: auto; margin: 18px 0; }
.hf-tbl table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.hf-tbl th { text-align: left; font: 700 .72rem var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--acc); border-bottom: 1px solid var(--acc-dim); padding: 8px 12px 8px 0; }
.hf-tbl td { border-bottom: 1px solid var(--rule); padding: 9px 12px 9px 0; vertical-align: top; color: var(--fg-dim); }

/* check yourself */
.hf-checks > h2 + .hf-q { margin-top: 6px; }
.hf-q { margin: 0 0 22px var(--indent); max-width: var(--measure); padding: 20px 22px; border: 1px solid var(--rule); background: #ffffff04; clip-path: var(--clip-14); }
.hf-inline .hf-q { margin-left: 0; }
.page-content .hf-q p { max-width: none; }
.hf-q .hf-q-n { margin: 0 0 6px; font: 700 .68rem var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint); }
.hf-q .hf-q-t { margin: 0 0 14px; font-size: 1.02rem; color: var(--fg); }
.hf-opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hf-opts li { margin: 0; }
.hf-opts button { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 11px 14px; cursor: pointer;
    background: #0e0f13; color: var(--fg-dim); border: 1px solid rgba(255,255,255,.14); border-radius: 2px; font: inherit; font-size: .93rem; line-height: 1.45;
    transition: border-color .15s, background .15s; }
.hf-opts button b { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); font-size: .72rem; color: var(--fg-faint); }
.hf-opts button:hover { border-color: var(--acc-dim); }
.hf-opts button.sel { border-color: var(--acc); background: rgba(226,163,60,.08); color: var(--fg); }
.hf-opts button.sel b { background: var(--acc); border-color: var(--acc); color: #0e0f13; }
.hf-opts button.right { border-color: #5fd39a; background: rgba(95,211,154,.08); }
.hf-opts button.right b { background: #5fd39a; border-color: #5fd39a; color: #0e0f13; }
.hf-opts button.wrong { border-color: #ff8a7a; background: rgba(255,138,122,.07); }
.hf-opts button.wrong b { background: #ff8a7a; border-color: #ff8a7a; color: #0e0f13; }
.hf-opts button.missed { border-style: dashed; border-color: #5fd39a; }
.hf-q.done .hf-opts button { cursor: default; }
.hf-q-act { margin: 14px 0 0 !important; display: flex; gap: 14px; align-items: center; }
.hf-q-act .hf-q-res { font: 700 .74rem var(--font); letter-spacing: .14em; text-transform: uppercase; }
.hf-q-res.ok { color: #5fd39a; } .hf-q-res.no { color: #ff8a7a; }
.hf-q-why { margin-top: 14px; padding: 12px 0 0 14px; border-left: 2px solid var(--acc); }
.hf-q-why p { margin: 0; font-size: .93rem; color: var(--fg-dim); }

/* in the interview: model answers */
.hf-room-lead { margin-left: var(--indent); color: var(--fg-faint); font-size: .92rem; }
.hf-say { margin: 0 0 10px var(--indent); max-width: var(--measure); border: 1px solid var(--rule); background: #ffffff03; }
.hf-say summary { cursor: pointer; padding: 14px 18px 14px 44px; position: relative; color: var(--fg); font-size: 1rem; list-style: none; }
.hf-say summary::-webkit-details-marker { display: none; }
.hf-say summary::before { content: "Q"; position: absolute; left: 14px; top: 13px; font: 700 .78rem var(--font); color: var(--acc); }
.hf-say summary::after { content: "+"; position: absolute; right: 16px; top: 11px; color: var(--fg-faint); font-size: 1.1rem; }
.hf-say[open] summary::after { content: "–"; }
.hf-say[open] { border-color: var(--acc-lo); }
.hf-say > p { margin: 0 !important; padding: 0 18px 16px 44px; color: var(--fg-dim); font-size: .95rem; position: relative; max-width: none !important; }

/* drills */
.hf-weak { list-style: none; padding: 0; }
.hf-weak li { padding: 10px 14px; border-left: 2px solid #ff8a7a; background: rgba(255,138,122,.05); margin-bottom: 8px; color: var(--fg-dim); font-size: .93rem; }
.hf-weak q { display: block; color: var(--fg); font-style: italic; margin-bottom: 3px; }
.hf-strong { margin: 0; padding: 16px 20px; border-left: 2px solid #5fd39a; background: rgba(95,211,154,.05); }
.hf-strong p { margin: 0 0 10px; color: var(--fg); font-size: .97rem; } .hf-strong p:last-child { margin: 0; }
.hf-drill .cx-prose, .hf-drill > .hf-ask, .hf-drill > h3, .hf-drill > ul, .hf-drill > blockquote, .hf-drill > .hf-inline { margin-left: var(--indent); max-width: var(--measure); }

/* the Premium lock in a lesson */
.hf-lockcard { margin: 0 0 0 var(--indent); max-width: var(--measure); padding: 24px 26px 22px; clip-path: var(--clip-24); position: relative;
    border: 1px solid rgba(226,163,60,.55); background: linear-gradient(160deg, rgba(226,163,60,.13), rgba(226,163,60,.02) 60%), repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 10px, transparent 10px 20px); }
.page-content .hf-lockcard p { max-width: none; }
.hf-lockcard .hf-locked-h { margin: 0 0 14px; display: flex; gap: 12px; align-items: center; font: 700 .74rem var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--fg); }
.hf-lockcard .hf-locked-h span { padding: 5px 9px; background: var(--acc); color: #0e0f13; letter-spacing: .14em; font-size: .66rem; }
.hf-lockcard ul { margin: 0 0 18px; padding-left: 1.1em; columns: 2 260px; column-gap: 28px; }
.hf-lockcard li { color: var(--fg-dim); font-size: .92rem; break-inside: avoid; }
.hf-lockcard .hf-locked-go { margin: 0; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hf-free { font: 700 .62rem var(--font); letter-spacing: .12em; text-transform: uppercase; color: #5fd39a; border: 1px solid rgba(95,211,154,.5); padding: 2px 6px; font-style: normal; }
.hf-tag { font: 700 .62rem var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--acc); border: 1px solid var(--acc-dim); padding: 2px 6px; font-style: normal; }
.cx-index-ch-name a { color: inherit; border: 0; }

/* hub */
.hf-hero .hero-sub { max-width: 760px; }
.hf-stats { display: flex; flex-wrap: wrap; gap: 0; margin: 28px 0 26px var(--indent); max-width: var(--measure); border: 1px solid var(--rule); clip-path: var(--clip-14); }
.hf-stats div { flex: 1 1 110px; padding: 16px 18px; border-right: 1px solid var(--rule); }
.hf-stats div:last-child { border-right: 0; }
.hf-stats b { display: block; font: 300 2.2rem/1 var(--cond); color: var(--acc); }
.hf-stats span { font: 700 .66rem var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-faint); }
.hf-hero .hero-cta { margin-left: var(--indent); display: flex; gap: 14px; flex-wrap: wrap; }
.hf-anatomy { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0 0 20px var(--indent); max-width: var(--measure); }
.hf-anatomy div { padding: 18px 20px; border: 1px solid var(--rule); border-top: 2px solid var(--acc); background: #ffffff04; }
.hf-anatomy b { font: 700 .78rem var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }
.page-content .hf-anatomy p, .hf-anatomy p { margin: 8px 0 0; font-size: .9rem; color: var(--fg-faint); }
.hf-mods { margin-left: var(--indent); max-width: 960px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hf-mod { border: 1px solid var(--rule); background: #ffffff04; clip-path: var(--clip-24); padding: 22px 22px 14px; scroll-margin-top: 100px; }
.hf-mod:target { border-color: var(--acc); }
.hf-mod-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.hf-mod-n { font: 300 2.4rem/0.9 var(--cond); color: var(--acc); }
.hf-mod h3 { margin: 2px 0 6px; font-size: 1rem; }
.page-content .hf-mod-head p, .hf-mod-head p { margin: 0; font-size: .85rem; color: var(--fg-faint); }
.hf-mod-list { margin: 0; padding: 0; list-style: none; counter-reset: l; }
.hf-mod-list li { margin: 0; counter-increment: l; }
.hf-mod-list a { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.06); font-size: .9rem; color: var(--fg-dim); }
.hf-mod-list a::before { content: counter(l, decimal-leading-zero); font: .72rem ui-monospace, Menlo, monospace; color: var(--fg-faint); }
.hf-mod-list a span { flex: 1; }
.hf-mod-list a:hover { color: var(--fg); }
@media (max-width: 900px) { .hf-mods { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
    .hf-ask, .hf-q, .hf-say, .hf-lockcard, .hf-stats, .hf-anatomy, .hf-mods, .hf-room-lead, .hf-hero .hero-cta,
    .hf-drill .cx-prose, .hf-drill > .hf-ask, .hf-drill > h3, .hf-drill > ul, .hf-drill > blockquote, .hf-drill > .hf-inline { margin-left: 0; }
    .hf-anatomy { grid-template-columns: 1fr; }
    .hf-ask p { font-size: 1.02rem; }
}
.hf-lockcard .hf-locked-note { margin: 12px 0 0; font-size: .84rem; color: var(--fg-faint); }
.cta.hf-buy { background: var(--acc); color: #0e0f13; border-color: var(--acc); font-weight: 700; }
.cta.hf-buy:hover { background: #ffc65c; color: #0e0f13; border-color: #ffc65c; }
/* lessons: lists sit on the prose line; figures, code and tables use the full column */
.hf-course .cx-prose ul, .hf-course .cx-prose ol { margin-left: 0; padding-left: 1.3em; max-width: none; }
.hf-course .hf-opts { margin-left: 0; padding-left: 0; max-width: none; }
.hf-course .cx-prose > .cx-fig, .hf-course .cx-prose > .hf-pre, .hf-course .cx-prose > .hf-tbl { margin-left: calc(-1 * var(--indent)); }
.hf-course .cx-prose > .cx-fig { padding: 22px 18px 12px; }
svg.hf text { font-size: 13.5px; } svg.hf .hf-in { font-size: 13px; } svg.hf .hf-sub { font-size: 11.5px; } svg.hf .hf-lab { font-size: 12.5px; }
.hf-course .cx-course-main { padding-right: 22px; }
/* lesson locks in the coding and ML courses reuse the course lock card */
.cx-locked.cx-lesson-lock { border: 0; min-height: 0; margin: 30px 0 10px; background: none; cursor: default; }
.cx-locked.cx-lesson-lock::after { content: none; }
.cx-locked.cx-lesson-lock:hover { background: none; }

/* ══ Course reader layout ═══════════════════════════════════════════════════════════════════════
   Every course page (lesson, drill, problem) gets body.course-app from build.py: a full-height index
   flush left, and one calm reading column. Reading pages (.cx-read) use a 780px column; problem pages
   keep their full-width panels. Brand colours stay; marketing furniture (giant uppercase headings,
   prose indent, floating formulas) is switched off here. */
body.course-app { --rd-bg: #0c0d10; --rd-side: #08090b; --rd-line: #22252c; --rd-card: #111318; --rd-text: #e6e7ea;
    --rd-muted: #9c9fa7; --rd-head: 84px; --rd-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--rd-bg); }
body.course-app #paths, body.course-app .eqs { display: none; }
body.course-app header { left: 0; translate: none; max-width: none; padding: 0 28px; background: rgba(8,9,11,.96); border-bottom: 1px solid var(--rd-line); }
body.course-app .page-content { max-width: none; padding: 0; margin-top: var(--rd-head); }
body.course-app footer { border-top: 1px solid var(--rd-line); padding-top: 30px; }

/* grid: index | column */
body.course-app .cx-course { grid-template-columns: 300px minmax(0, 1fr); gap: 0; align-items: stretch; min-height: calc(100vh - var(--rd-head)); }
body.course-app .cx-course-main { padding: 34px 56px 90px; min-width: 0; }
body.course-app .cx-read .cx-course-main > * { max-width: 780px; margin-left: auto; margin-right: auto; }

/* ── the index ── */
body.course-app .cx-index { position: sticky; top: var(--rd-head); height: calc(100vh - var(--rd-head)); max-height: none; margin: 0;
    border: 0; border-right: 1px solid var(--rd-line); background: var(--rd-side); clip-path: none; border-radius: 0; }
body.course-app .cx-index-head { padding: 22px 22px 6px; flex-direction: column; align-items: flex-start; gap: 6px; border: 0; }
body.course-app .cx-index-head > span:first-child { font: 700 1.05rem var(--rd-sans); letter-spacing: 0; text-transform: none; color: #fff; }
body.course-app .cx-index-pct { font: 500 .78rem var(--rd-sans); letter-spacing: 0; color: var(--rd-muted); text-transform: none; }
body.course-app .cx-index-bar { margin: 4px 22px 14px; height: 4px; border-radius: 2px; overflow: hidden; background: #1b1d23; }
body.course-app .cx-index-nav { padding: 0 10px 40px; scrollbar-width: thin; scrollbar-color: #2a2d35 transparent; }
body.course-app .cx-index-ch { border-top: 1px solid #16181d; }
body.course-app .cx-index-ch-name { margin: 0 !important; padding: 13px 34px 13px 12px; position: relative; cursor: pointer; user-select: none;
    font: 650 .9rem/1.35 var(--rd-sans); letter-spacing: 0; text-transform: none; color: #eceef1; }
body.course-app .cx-index-ch-name a { color: inherit; pointer-events: none; }
body.course-app .cx-index-ch-name::after { content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
    border-right: 1.6px solid var(--rd-muted); border-bottom: 1.6px solid var(--rd-muted); transform: rotate(45deg); transition: transform .15s; }
body.course-app .cx-index-ch.collapsed .cx-index-ch-name::after { transform: rotate(-45deg); margin-top: -3px; }
body.course-app .cx-index-ch.collapsed > ul { display: none; }
body.course-app .cx-index-ch-name:hover { color: #fff; }
body.course-app .cx-index-nav ul { margin: 0 0 10px; padding: 0; position: relative; }
body.course-app .cx-index-nav ul::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 1px; background: #23262d; }
body.course-app .cx-index-nav li { margin: 0; }
body.course-app .cx-index-nav li a { position: relative; padding: 8px 10px 8px 12px; gap: 11px; border-radius: 6px; font: 400 .86rem/1.4 var(--rd-sans);
    color: #b9bcc4; align-items: flex-start; box-shadow: none; }
body.course-app .cx-index-nav li a:hover { background: #12141a; color: #fff; }
body.course-app .cx-index-nav li.on a { background: rgba(226,163,60,.12); color: #fff; box-shadow: inset 3px 0 0 var(--acc); }
body.course-app .cx-tick { width: 15px; height: 15px; margin-top: 2px; background: var(--rd-side); border: 1.5px solid #3a3e47; z-index: 1; }
body.course-app li.on .cx-tick { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(226,163,60,.18); }
body.course-app .cx-index-min { font: .72rem var(--rd-sans); color: #6f737c; margin-top: 2px; }
body.course-app .cx-index-mod-li { margin: 10px 0 2px !important; }
body.course-app .cx-index-mod { margin: 0 0 0 34px !important; font: 600 .7rem var(--rd-sans); letter-spacing: .06em; text-transform: uppercase; color: #8a6d3a; }
body.course-app .cx-index .hf-free, body.course-app .cx-index .cx-diff { margin-top: 2px; }

/* ── the reading column ── */
body.course-app .cx-read { font-family: var(--rd-sans); color: var(--rd-text); }
body.course-app .cx-read .hero.short { padding: 0 0 18px; margin-bottom: 8px; border-bottom: 1px solid var(--rd-line); }
body.course-app .cx-read .crumb { margin: 0 0 14px; font: 500 .82rem var(--rd-sans); letter-spacing: 0; text-transform: none; color: var(--rd-muted); }
body.course-app .cx-read .crumb a { color: var(--rd-muted); border-bottom: 0; }
body.course-app .cx-read .crumb a:hover { color: var(--acc); }
body.course-app .cx-read h1, body.course-app .cx-read .hero-h1 { font: 750 2.35rem/1.15 var(--rd-sans); letter-spacing: -.02em; text-transform: none;
    margin: 0 0 12px; max-width: none; color: #fff; }
body.course-app .cx-read .hero-h1 .w > i { transform: none !important; }
body.course-app .cx-read .qmeta { margin: 0 !important; font: 500 .85rem var(--rd-sans); color: var(--rd-muted); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
body.course-app .cx-read .hero-sub { font: 400 1.05rem/1.65 var(--rd-sans); color: #c9cbd1; margin: 0; border: 0; padding: 0; max-width: none; }
body.course-app .cx-read hr { display: none; }
body.course-app .cx-read .section, body.course-app .cx-read .cx-lesson-sec { padding: 0; margin-top: 0; }
body.course-app .cx-read h2 { font: 700 1.55rem/1.3 var(--rd-sans); letter-spacing: -.01em; text-transform: none; color: #fff;
    margin: 46px 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--rd-line); max-width: none; }
body.course-app .cx-read h3 { font: 650 1.15rem/1.35 var(--rd-sans); letter-spacing: 0; text-transform: none; color: #f2f3f5; margin: 30px 0 10px; }
body.course-app .cx-read p, body.course-app .cx-read li { font: 400 1.04rem/1.75 var(--rd-sans); color: var(--rd-text); }
body.course-app .cx-read .cx-prose, body.course-app .cx-read p, body.course-app .cx-read ul, body.course-app .cx-read ol,
body.course-app .cx-read details, body.course-app .cx-read .cx-dry, body.course-app .cx-read .cx-pager, body.course-app .cx-read .cards,
body.course-app .cx-read .cx-cards, body.course-app .cx-read .cx-lesson-code, body.course-app .cx-read .cx-pre { margin-left: 0; max-width: none; }
body.course-app .cx-read .cx-prose ul, body.course-app .cx-read .cx-prose ol { padding-left: 1.4em; margin: 0 0 1.2em; }
body.course-app .cx-read .cx-prose li { margin-bottom: .45em; }
body.course-app .cx-read b, body.course-app .cx-read strong { color: #fff; font-weight: 650; }
body.course-app .cx-read a { color: var(--acc); border-bottom-color: rgba(226,163,60,.35); }
body.course-app .cx-read :not(pre) > code { font: .86em ui-monospace, SFMono-Regular, Menlo, monospace; background: #1a1c22; border: 1px solid #2a2d35;
    border-radius: 5px; padding: .08em .38em; color: #f3c987; }
body.course-app .cx-read pre, body.course-app .cx-read .cx-pre { position: relative; background: #08090c !important; border: 1px solid #262931;
    border-radius: 10px; padding: 18px 20px; font: .86rem/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; margin: 18px 0 22px; overflow-x: auto; }
body.course-app .cx-read pre code { background: none; border: 0; padding: 0; color: #e8e8ea; font: inherit; }
body.course-app .rd-copy { position: absolute; top: 8px; right: 8px; font: 500 .72rem var(--rd-sans); color: var(--rd-muted); background: #15171d;
    border: 1px solid #2a2d35; border-radius: 6px; padding: 4px 9px; cursor: pointer; opacity: 0; transition: opacity .15s; }
body.course-app pre:hover .rd-copy, body.course-app .rd-copy:focus { opacity: 1; }
body.course-app .cx-read .cx-fig { margin: 26px 0; padding: 22px 20px 14px; background: #08090c; border: 1px solid #262931; border-radius: 12px; }
body.course-app .cx-read .cx-fig figcaption { font: 400 .86rem/1.55 var(--rd-sans); color: var(--rd-muted); margin-top: 12px; }
body.course-app .cx-read .cx-callout { background: rgba(226,163,60,.07); border-left: 3px solid var(--acc); border-radius: 0 8px 8px 0; padding: 14px 18px; }
body.course-app .cx-read table { font-family: var(--rd-sans); }
body.course-app .cx-read .hf-tbl, body.course-app .cx-read .cx-table-wrap { border: 1px solid #262931; border-radius: 10px; overflow-x: auto; margin: 20px 0; }
body.course-app .cx-read .hf-tbl table, body.course-app .cx-read .cx-tbl { width: 100%; border-collapse: collapse; margin: 0; }
body.course-app .cx-read .hf-tbl th, body.course-app .cx-read .cx-tbl th { background: #12141a; color: #fff; font: 650 .8rem var(--rd-sans);
    letter-spacing: 0; text-transform: none; padding: 11px 14px; border-bottom: 1px solid #262931; text-align: left; }
body.course-app .cx-read .hf-tbl td, body.course-app .cx-read .cx-tbl td { padding: 10px 14px; border-bottom: 1px solid #1c1f25; font-size: .92rem; color: #d3d5da; }
body.course-app .cx-read .hf-tbl tr:last-child td { border-bottom: 0; }
/* the HFT figures, the question box, checks, answers, locks: plain cards, no indents */
body.course-app .hf-course .cx-prose > .cx-fig, body.course-app .hf-course .cx-prose > .hf-pre, body.course-app .hf-course .cx-prose > .hf-tbl { margin-left: 0; }
body.course-app .cx-read .hf-ask { margin: 22px 0 6px; clip-path: none; border-radius: 0 10px 10px 0; padding: 18px 22px; }
body.course-app .cx-read .hf-ask p { font: 500 1.1rem/1.6 var(--rd-sans); color: #fff; }
body.course-app .cx-read .hf-ask .hf-ask-h { font: 700 .72rem var(--rd-sans); letter-spacing: .1em; }
body.course-app .cx-read .hf-q { margin: 0 0 18px; clip-path: none; border-radius: 12px; background: var(--rd-card); border-color: #262931; padding: 20px 22px; }
body.course-app .cx-read .hf-q .hf-q-n { font: 600 .74rem var(--rd-sans); letter-spacing: .04em; }
body.course-app .cx-read .hf-q .hf-q-t { font: 500 1.02rem/1.6 var(--rd-sans); }
body.course-app .cx-read .hf-opts button { border-radius: 8px; font: 400 .95rem/1.5 var(--rd-sans); background: #0b0c10; }
body.course-app .cx-read .hf-opts button b { border-radius: 50%; font: 600 .72rem var(--rd-sans); }
body.course-app .cx-read .hf-q-go { border-radius: 8px; text-transform: none; letter-spacing: 0; font: 600 .88rem var(--rd-sans); padding: 8px 18px;
    background: var(--acc); color: #0c0d10; border-color: var(--acc); }
body.course-app .cx-read .hf-room-lead { margin: 0 0 14px; color: var(--rd-muted); font-size: .95rem; }
body.course-app .cx-read .hf-say { margin: 0 0 10px; border-radius: 10px; background: var(--rd-card); border-color: #262931; overflow: hidden; }
body.course-app .cx-read .hf-say summary { font: 500 1rem/1.5 var(--rd-sans); padding: 15px 44px 15px 46px; }
body.course-app .cx-read .hf-say > p { padding: 0 22px 18px 46px; color: #d0d2d8; font-size: .98rem; }
body.course-app .cx-read .hf-weak li { border-radius: 0 8px 8px 0; font-size: .96rem; }
body.course-app .cx-read .hf-strong { border-radius: 0 10px 10px 0; }
body.course-app .cx-read .hf-drill > .hf-ask, body.course-app .cx-read .hf-drill > h3, body.course-app .cx-read .hf-drill > ul,
body.course-app .cx-read .hf-drill > blockquote, body.course-app .cx-read .hf-drill > .hf-inline, body.course-app .cx-read .hf-drill .cx-prose { margin-left: 0; max-width: none; }
body.course-app .hf-lockcard { margin: 34px 0 0; clip-path: none; border-radius: 14px; padding: 26px 28px 24px; }
body.course-app .hf-lockcard .hf-locked-h { font: 650 .95rem var(--rd-sans); letter-spacing: 0; text-transform: none; }
body.course-app .hf-lockcard .hf-locked-h span { border-radius: 5px; font: 700 .68rem var(--rd-sans); letter-spacing: .06em; }
body.course-app .hf-lockcard li { font: 400 .95rem/1.6 var(--rd-sans); }
body.course-app .cta { border-radius: 8px; font-family: var(--rd-sans); letter-spacing: .02em; text-transform: none; font-weight: 600; font-size: .88rem; padding: 9px 18px; }
body.course-app .hf-free, body.course-app .hf-tag { border-radius: 4px; font-family: var(--rd-sans); letter-spacing: .04em; }

/* the pager: two cards and the completion button */
body.course-app .cx-pager { margin: 54px 0 0; padding-top: 22px; border-top: 1px solid var(--rd-line); gap: 14px; align-items: stretch; flex-wrap: wrap; }
body.course-app .cx-pager a { flex: 1 1 220px; max-width: none; padding: 14px 18px; border: 1px solid #262931; border-radius: 10px; background: var(--rd-card); }
body.course-app .cx-pager a:hover { border-color: var(--acc-dim); }
body.course-app .cx-pager span { font: 600 .72rem var(--rd-sans); letter-spacing: .04em; }
body.course-app .cx-pager b { font: 550 .96rem/1.4 var(--rd-sans); margin-top: 3px; }
body.course-app .cx-done-btn { order: 3; flex: 1 1 100%; border-radius: 10px; padding: 12px; font: 600 .9rem var(--rd-sans); letter-spacing: 0; text-transform: none; }

/* hub pages of each course keep the site look but lose the floating formulas */
body.course-app .cx-course .cx-diff { border-radius: 4px; }

/* ── phones and tablets: the index becomes a drawer ── */
.rd-toc-btn { display: none; }
@media (max-width: 980px) {
    body.course-app { --rd-head: 62px; }
    body.course-app .cx-course { grid-template-columns: 1fr; }
    body.course-app .cx-course-main { padding: 22px 18px 80px; }
    body.course-app .cx-index { position: fixed; top: var(--rd-head); left: 0; bottom: 0; width: min(86vw, 340px); height: auto; z-index: 40;
        transform: translateX(-102%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.6); }
    body.course-app.rd-toc-open .cx-index { transform: none; }
    body.course-app .cx-index-nav { max-height: none; }
    body.course-app .rd-toc-btn { display: flex; align-items: center; gap: 8px; position: fixed; left: 14px; bottom: 16px; z-index: 41;
        padding: 10px 16px; border-radius: 22px; border: 1px solid #343843; background: #15171d; color: #fff; font: 600 .86rem var(--rd-sans);
        box-shadow: 0 6px 24px rgba(0,0,0,.5); cursor: pointer; }
    body.course-app.rd-toc-open .rd-toc-btn { background: var(--acc); color: #0c0d10; border-color: var(--acc); }
    body.course-app .cx-read h1, body.course-app .cx-read .hero-h1 { font-size: 1.85rem; }
    body.course-app .cx-read h2 { font-size: 1.3rem; margin-top: 36px; }
    body.course-app .cx-read p, body.course-app .cx-read li { font-size: 1rem; }
    body.course-app .cx-read pre { font-size: .8rem; padding: 14px; }
}
/* module names in the index are headings, not links */
body.course-app .cx-index-ch-name, body.course-app .cx-index-ch-name a { color: #eceef1 !important; border: 0; }
body.course-app .cx-index-ch:not(.collapsed) .cx-index-ch-name { color: #fff !important; }
body.course-app .cx-index-ch:not(.collapsed) .cx-index-ch-name a { color: var(--acc) !important; }
/* the lesson bar: previous, mark completed, next, pinned to the bottom of the reading column */
body.course-app .cx-read .cx-pager { position: sticky; bottom: 0; z-index: 5; margin: 56px auto 0; padding: 12px 0 14px; border-top: 1px solid var(--rd-line);
    background: linear-gradient(to bottom, rgba(12,13,16,.92), var(--rd-bg) 30%); flex-wrap: nowrap; align-items: center; gap: 12px; }
body.course-app .cx-read .cx-pager a { flex: 1 1 0; min-width: 0; padding: 10px 14px; }
body.course-app .cx-read .cx-pager b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.course-app .cx-read .cx-pager-prev span::before { content: "← "; }
body.course-app .cx-read .cx-pager-next { border-color: var(--acc) !important; background: rgba(226,163,60,.10) !important; text-align: right; }
body.course-app .cx-read .cx-pager-next span { color: var(--acc); }
body.course-app .cx-read .cx-pager-next span::after { content: " →"; }
body.course-app .cx-read .cx-pager-next:hover { background: rgba(226,163,60,.18) !important; }
body.course-app .cx-read .cx-done-btn { order: 0; flex: 0 0 auto; padding: 12px 18px; white-space: nowrap; }
body.course-app .cx-read .cx-pager > span:empty { flex: 1 1 0; }
@media (max-width: 980px) {
    body.course-app .cx-read .cx-pager { flex-wrap: wrap; padding-bottom: 70px; position: static; }
    body.course-app .cx-read .cx-done-btn { order: -1; flex: 1 1 100%; }
}
body.course-app .cx-read .cx-course-main > section:has(> .cx-pager) { display: contents; }
body.course-app .cx-read .cx-pager { max-width: 780px; margin-left: auto; margin-right: auto; }
/* index text never takes the reading column's paragraph style */
body.course-app .cx-index p.cx-index-ch-name { font: 650 .9rem/1.35 var(--rd-sans) !important; letter-spacing: 0 !important; text-transform: none !important; margin: 0 !important; }
body.course-app .cx-index p.cx-index-mod { font: 600 .7rem var(--rd-sans) !important; letter-spacing: .06em !important; }
/* problem pages: the same header as lessons, full-width panels below */
body.course-app .cx-course-main > .hero.short, body.course-app .cx-course-main > section.hero.short { padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--rd-line); }
body.course-app .cx-course-main .crumb { margin: 0 0 12px !important; font: 500 .82rem var(--rd-sans); letter-spacing: 0; text-transform: none; color: var(--rd-muted); }
body.course-app .cx-course-main .crumb a { color: var(--rd-muted); border-bottom: 0; }
body.course-app .cx-course-main .hero-h1 { font: 750 2.1rem/1.18 var(--rd-sans) !important; letter-spacing: -.02em; text-transform: none; margin: 0 0 12px; max-width: none; color: #fff; }
body.course-app .cx-course-main .qmeta { margin-left: 0 !important; font-family: var(--rd-sans); }
body.course-app .cx-course-main .cx-firms { margin-left: auto; }
body.course-app .cx-course-main .hero.short p { margin-left: 0; }
body.course-app .cx-course-main .cx-problem { margin-left: 0; }
/* dry runs: one frame, arrows underneath */
body.course-app .cx-dry { margin: 22px 0 26px; padding: 18px 20px 14px; background: #08090c; border: 1px solid #262931; border-radius: 12px; outline: none; }
body.course-app .cx-dry:focus-visible { border-color: var(--acc-dim); }
body.course-app .cx-dry-intro { margin: 0 0 12px !important; font: 500 .92rem/1.55 var(--rd-sans); color: #c9cbd1; }
body.course-app .cx-frames { display: block; }
body.course-app .cx-frame { display: block; padding: 0; border: 0; background: none; }
body.course-app .cx-frame-done { background: none; }
body.course-app .cx-frame-n { display: none; }
body.course-app .cx-frame-fig { display: flex; justify-content: center; margin: 0 0 10px; min-height: 120px; }
body.course-app .cx-frame-fig svg { max-height: 340px; }
body.course-app .cx-frame-note { font: 400 .95rem/1.6 var(--rd-sans) !important; color: var(--rd-text) !important; text-align: center; margin: 8px auto 0 !important; max-width: 640px !important; }
body.course-app .cx-frame .cx-vars { justify-content: center; }
body.course-app .cx-dry-bar { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #1c1f25; position: relative; }
body.course-app .cx-dry-bar .cx-btn { width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; font: 400 1.5rem/1 var(--rd-sans);
    background: #15171d; border: 1px solid #343843; color: #fff; cursor: pointer; }
body.course-app .cx-dry-bar .cx-btn:hover:not(:disabled) { border-color: var(--acc); color: var(--acc); }
body.course-app .cx-dry-bar .cx-btn:disabled { opacity: .3; cursor: default; }
body.course-app .cx-dry-pos { min-width: 110px; text-align: center; font: 600 .82rem var(--rd-sans); letter-spacing: 0; text-transform: none; color: #fff; }
body.course-app .cx-dry-track { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: transparent; }
body.course-app .cx-dry-track i { display: block; height: 100%; width: 0; background: var(--acc); transition: width .2s; }
/* wider reading column: the lesson uses the room to the right of the index */
body.course-app .cx-read .cx-course-main > *, body.course-app .cx-read .cx-pager { max-width: 940px; }
body.course-app .cx-course-main { padding-left: 48px; padding-right: 48px; }
@media (min-width: 1700px) { body.course-app .cx-read .cx-course-main > *, body.course-app .cx-read .cx-pager { max-width: 1040px; } }
body.course-app .cx-read .g-legend { margin: -12px 0 22px !important; justify-content: center; font: 400 .88rem var(--rd-sans); color: var(--rd-muted); }
body.course-app .cx-read .hf-say summary::before { top: 50%; transform: translateY(-50%); font: 700 .8rem var(--rd-sans); }
body.course-app .cx-read .hf-say summary::after { top: 50%; transform: translateY(-50%); }
/* anything hidden stays hidden, whatever display a component sets */
body.course-app [hidden] { display: none !important; }
/* module headings inside a chapter fold like the chapters */
body.course-app .cx-index-mod-li { cursor: pointer; position: relative; border-radius: 6px; padding: 4px 26px 4px 0; }
body.course-app .cx-index-mod-li:hover { background: #12141a; }
body.course-app .cx-index-mod-li::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -2px;
    border-right: 1.4px solid #8a6d3a; border-bottom: 1.4px solid #8a6d3a; transform: rotate(-45deg); transition: transform .15s; }
body.course-app .cx-index-mod-li.mod-open::after { transform: rotate(45deg); margin-top: -5px; }
body.course-app .cx-index-mod-li.mod-open .cx-index-mod { color: var(--acc) !important; }
/* code tabs sit on the column like every other block */
body.course-app .cx-code { margin-left: 0 !important; max-width: none; border-radius: 10px; overflow: hidden; border-color: #262931; background: #08090c; }
body.course-app .cx-code .cx-tabs { background: #0d0f13; border-bottom: 1px solid #1f2228; }
body.course-app .cx-code .cx-tab { font: 600 .8rem var(--rd-sans); letter-spacing: 0; text-transform: none; }
body.course-app .cx-code .cx-pre { border: 0 !important; border-radius: 0; margin: 0 !important; }
body.course-app .cx-lesson-code { margin: 18px 0 22px; }
/* problem pages: headings and hints in the reader style */
body.course-app .cx-course-main > .section > h2, body.course-app .cx-course-main > section > h2 { font: 700 1.45rem/1.3 var(--rd-sans); text-transform: none; letter-spacing: -.01em; margin: 40px 0 16px; }
body.course-app .cx-course-main hr { border: 0; border-top: 1px solid var(--rd-line); width: 100%; margin: 36px 0 0; }
body.course-app .cx-panel details, body.course-app .cx-panel .cx-hint, body.course-app .cx-course-main .cards, body.course-app .cx-course-main .cx-cards { margin-left: 0 !important; max-width: none; }
body.course-app .cx-course-main > .section > p, body.course-app .cx-course-main > p { margin-left: 0; }
svg.hf .hf-lab, svg.hf .hf-sub { paint-order: stroke; stroke: #08090c; stroke-width: 3px; stroke-linejoin: round; }

/* ── course start pages ── */
body.course-app .cs-head { padding: 6px 0 26px; border-bottom: 1px solid var(--rd-line); margin-bottom: 8px; }
body.course-app .cs-head .hero-h1 { font-size: 2.6rem; margin-bottom: 14px; }
body.course-app .cs-lead { font: 400 1.12rem/1.65 var(--rd-sans) !important; color: #d2d4da !important; max-width: 780px; margin: 0 0 18px !important; }
body.course-app .cs-chips { list-style: none; padding: 0 !important; margin: 0 0 22px !important; display: flex; flex-wrap: wrap; gap: 8px; }
body.course-app .cs-chips li { margin: 0; padding: 6px 12px; border: 1px solid #2a2d35; border-radius: 999px; background: #111318; font: 500 .85rem var(--rd-sans) !important; color: #c9cbd1 !important; }
body.course-app .cs-chips b { color: var(--acc); font-weight: 700; }
body.course-app .cs-progress { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
body.course-app .cs-bar { flex: 0 1 380px; height: 6px; border-radius: 3px; background: #1b1d23; overflow: hidden; }
body.course-app .cs-bar i { display: block; height: 100%; width: 0; background: var(--acc); border-radius: 3px; transition: width .3s; }
body.course-app .cs-pct { font: 500 .85rem var(--rd-sans); color: var(--rd-muted); }
body.course-app .cs-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; }
body.course-app .cs-go { background: var(--acc); color: #0c0d10 !important; border-color: var(--acc); font-weight: 700; padding: 11px 22px; }
body.course-app .cs-go:hover { background: #ffc65c; border-color: #ffc65c; color: #0c0d10 !important; }
/* outline cards (coding, ML, HFT share the behaviour) */
body.course-app .cx-syl, body.course-app .ml-chs, body.course-app .hf-mods { display: grid !important; grid-template-columns: 1fr !important; gap: 10px; margin: 18px 0 0 !important; padding: 0; list-style: none; max-width: none !important; }
body.course-app .cx-syl-mod, body.course-app .ml-ch, body.course-app .hf-mod { margin: 0; border: 1px solid #262931 !important; border-radius: 12px !important; background: var(--rd-card) !important; clip-path: none !important; padding: 0 !important; overflow: hidden; }
body.course-app .cs-open { border-color: rgba(226,163,60,.55) !important; }
body.course-app .cx-syl-head, body.course-app .ml-ch-head, body.course-app .hf-mod-head { display: flex !important; align-items: center; gap: 16px; padding: 16px 20px !important; margin: 0 !important; cursor: pointer; position: relative; border: 0 !important; }
body.course-app .cx-syl-head:hover, body.course-app .ml-ch-head:hover, body.course-app .hf-mod-head:hover { background: #15171d; }
body.course-app .cx-syl-head h3, body.course-app .hf-mod h3 { font: 650 1.05rem/1.35 var(--rd-sans) !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 0 3px !important; }
body.course-app .cx-syl-head h3 a { color: #fff; border: 0; }
body.course-app .cx-syl-head p, body.course-app .hf-mod-head p, body.course-app .ml-ch-head em { font: 400 .9rem/1.5 var(--rd-sans) !important; color: var(--rd-muted) !important; margin: 0 !important; font-style: normal; display: block; }
body.course-app .ml-ch-head b { display: block; font: 650 1.05rem var(--rd-sans); color: #fff; margin-bottom: 3px; }
body.course-app .cx-syl-num, body.course-app .hf-mod-n, body.course-app .ml-ch-head .ix { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    font: 700 .9rem var(--rd-sans) !important; color: var(--acc) !important; background: rgba(226,163,60,.1); border: 1px solid rgba(226,163,60,.35); }
body.course-app .cs-count { margin-left: auto; flex: none; font: 600 .78rem var(--rd-sans); color: var(--rd-muted); padding-right: 22px; }
body.course-app .cx-syl-mins { display: none; }
body.course-app .cx-syl-head::after, body.course-app .ml-ch-head::after, body.course-app .hf-mod-head::after { content: ""; position: absolute; right: 20px; top: 50%; width: 7px; height: 7px; margin-top: -6px;
    border-right: 1.6px solid var(--rd-muted); border-bottom: 1.6px solid var(--rd-muted); transform: rotate(45deg); transition: transform .15s; }
body.course-app .cx-syl-mod:not(.cs-open) .cx-syl-head::after, body.course-app .ml-ch:not(.cs-open) .ml-ch-head::after, body.course-app .hf-mod:not(.cs-open) .hf-mod-head::after { transform: rotate(-45deg); margin-top: -3px; }
body.course-app .cx-syl-mod:not(.cs-open) .cx-syl-items, body.course-app .ml-ch:not(.cs-open) .ml-ch-list, body.course-app .hf-mod:not(.cs-open) .hf-mod-list { display: none !important; }
body.course-app .cx-syl-items, body.course-app .ml-ch-list, body.course-app .hf-mod-list { margin: 0 !important; padding: 4px 12px 12px !important; border-top: 1px solid #1f2228; list-style: none; }
body.course-app .cx-syl-items li, body.course-app .ml-ch-list li, body.course-app .hf-mod-list li { margin: 0; }
body.course-app .cx-syl-items a, body.course-app .ml-ch-list a, body.course-app .hf-mod-list a { display: flex !important; align-items: center; gap: 12px; padding: 10px 10px !important; border-radius: 8px; border: 0 !important;
    font: 400 .95rem/1.4 var(--rd-sans) !important; color: #d3d5da !important; }
body.course-app .cx-syl-items a:hover, body.course-app .ml-ch-list a:hover, body.course-app .hf-mod-list a:hover { background: #171a20; color: #fff !important; }
body.course-app a.cs-done::before { content: "✓"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #5fd39a; color: #0b0b0d; font: 700 .7rem/18px var(--rd-sans); text-align: center; }
body.course-app .cx-syl-kind { flex: none; width: 66px; font: 600 .72rem var(--rd-sans); letter-spacing: .02em; color: var(--rd-muted); text-transform: none; }
body.course-app .cx-syl-title { flex: 1; }
body.course-app .cx-syl-time { flex: none; font: .78rem var(--rd-sans); color: #6f737c; }
body.course-app .hf-mod-list a::before { content: none; }
body.course-app .ml-lesson-tag { color: var(--acc) !important; border-color: var(--acc-dim) !important; }
@media (max-width: 980px) { body.course-app .cs-head .hero-h1 { font-size: 1.9rem; } body.course-app .cx-syl-kind { display: none; } }
body.course-app .cx-syl-items a.cs-done::before, body.course-app .ml-ch-list a.cs-done::before, body.course-app .hf-mod-list a.cs-done::before { content: "✓" !important; }
@media (max-width: 980px) { body.course-app .cx-syl-num, body.course-app .hf-mod-n, body.course-app .ml-ch-head .ix { display: none !important; } body.course-app .cs-progress { flex-wrap: wrap; gap: 8px; } body.course-app .cs-bar { flex: 1 1 100%; } body.course-app .cs-count { padding-right: 18px; } }
.hf-lockcard .hf-locked-qs-h { margin: 6px 0 8px !important; font: 600 .82rem var(--rd-sans, inherit); color: #fff; }
.hf-lockcard .hf-locked-qs { margin: 0 0 18px; padding-left: 1.3em; }
.hf-lockcard .hf-locked-qs li { color: #c9cbd1; font-size: .93rem; margin-bottom: 6px; }
body.course-app .cx-read .cx-lesson-sub { margin: 10px 0 0 !important; font: 400 1.05rem/1.6 var(--rd-sans) !important; color: #c9cbd1 !important; }
svg.hf .hf-in.hot, svg.hf .hf-sub.hot { stroke: none; }

/* ── /practice: one card per exam or course ───────────────────────────────────
   Black ground, thin rules, one amber accent, chamfered corners: the site's own language,
   not the navy bands used elsewhere. Every topic is a link; each card has one way in and one timed option. */
.px h2 { margin-bottom: 8px; }
.px-label {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 34px 0 14px;
    font-family: var(--cond); text-transform: uppercase; letter-spacing: .14em; font-size: .9rem; color: var(--acc);
}
.px-label span { font-family: var(--font); text-transform: none; letter-spacing: 0; font-size: .88rem; color: var(--fg-faint); }
.px-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.px-card {
    position: relative; display: flex; flex-direction: column; gap: 12px;
    border: 1px solid var(--rule); background: #ffffff05; clip-path: var(--clip-24);
    padding: 24px 24px 22px; transition: border-color .2s, background .2s;
}
.px-card:hover { border-color: var(--acc-dim); background: #ffffff0a; }
.px-top { display: flex; align-items: center; gap: 12px; }
.px-glyph { width: 34px; height: 34px; flex: none; fill: none; stroke: var(--acc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.px-glyph .f { fill: var(--acc); stroke: none; }
.px-glyph .dim { stroke: #ffffff4d; }
.px-glyph rect:not([rx]) { fill: var(--acc-lo); }
.px-eyebrow { margin: 0; flex: 1; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); line-height: 1.3; }
.px-count { margin: 0; text-align: right; font-size: .72rem; color: var(--fg-faint); white-space: nowrap; line-height: 1.1; }
.px-count b { display: block; font-family: var(--cond); font-size: 1.7rem; font-weight: 600; color: var(--fg); letter-spacing: .02em; }
.px-card h3 { margin: 2px 0 0; font-size: 1.25rem; text-transform: none; letter-spacing: 0; }
.px-card h3 a { color: var(--fg); text-decoration: none; }
.px-card h3 a:hover { color: var(--acc); }
.px-desc { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--fg-dim); }
.px-topics { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.px-topics a {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid var(--rule); border-radius: 2px;
    font-size: .8rem; color: var(--fg-dim); text-decoration: none; transition: border-color .15s, color .15s;
}
.px-topics a span { font-size: .72rem; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.px-topics a:hover, .px-topics a:focus-visible { border-color: var(--acc); color: var(--acc); }
.px-go { margin: auto 0 0; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; }
.px-go .cta { margin: 0; }
@media (max-width: 760px) {
    .px-grid { grid-template-columns: 1fr; gap: 14px; }
    .px-card { padding: 20px 18px 18px; }
    .px-label { margin-top: 26px; }
}
/* The site indents prose by 100px; the practice cards are a grid, so their text sits flush inside each card. */
.page-content .px-card p, .page-content .px-card ul, .page-content .px-label { margin-left: 0; max-width: none; }
.px-topics li { margin: 0; }
.px-topics li::marker { content: none; }
/* One way in, clearly first: the main action is solid amber, the timed option stays an outline. */
.px-go .cta:first-child { background: var(--acc); border-color: var(--acc); color: #000; font-weight: 600; }
.px-go .cta:first-child:hover, .px-go .cta:first-child:focus-visible { background: #f0b654; border-color: #f0b654; color: #000; }
/* Practice-page icons sit in a small amber tile with the chamfered corner, so they read as one set. */
.px-icon {
    flex: none; width: 48px; height: 48px; display: grid; place-items: center;
    border: 1px solid var(--acc-dim); background: linear-gradient(145deg, #e2a33c26, #e2a33c08);
    clip-path: polygon(0 9px, 9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}
.px-icon .px-glyph { width: 32px; height: 32px; stroke-width: 1.7; }
.px-icon .px-glyph .f { fill: var(--acc); stroke: var(--acc); }
.px-icon .px-glyph .acc2 { stroke: #ffffffd9; }
.px-icon .px-glyph rect:not(.f) { fill: none; }
.px-card:hover .px-icon { border-color: var(--acc); background: linear-gradient(145deg, #e2a33c40, #e2a33c10); }

/* A displayed formula inside an article: set apart like an equation in a paper. */
.page-content p.formula {
    font-family: var(--cond); font-size: 1.15rem; letter-spacing: .02em; color: var(--fg);
    border-left: 2px solid var(--acc); padding: 6px 0 6px 16px; margin-top: .4em; margin-bottom: 1.4em;
}

/* Each exam or course has its own icon colour (principal, 19 Oct 2026); amber stays for the buttons only. */
.px-card .px-icon {
    border-color: color-mix(in srgb, var(--ic) 55%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--ic) 20%, transparent), color-mix(in srgb, var(--ic) 4%, transparent));
}
.px-card .px-glyph { stroke: var(--ic); }
.px-card .px-icon .px-glyph .f { fill: var(--ic); stroke: var(--ic); }
.px-card:hover { border-color: color-mix(in srgb, var(--ic) 60%, transparent); }
.px-card:hover .px-icon { border-color: var(--ic); background: linear-gradient(145deg, color-mix(in srgb, var(--ic) 32%, transparent), color-mix(in srgb, var(--ic) 8%, transparent)); }

/* ══════════════════════════════════════════════════════════════════════════════
   FUNCTOR THEME (principal, 19 Oct 2026: "full Functor style", after functorfund.com/quantum).
   One layer over everything above: near-black ground lit with cyan and violet, Inter set heavy and tight,
   pill buttons with a cyan→green primary, rounded glass panels, cyan labels and links, gold for numbers,
   and the six Functor accents on the drifting paths and formulas. Delete this block to return to the XTX look.
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
    --bg: #05050a;
    --fg: #f6f2ea;
    --fg-dim: #f6f2eadb;
    --fg-faint: #aaa39a;
    --rule: rgba(246,242,234,.14);
    --cyan: #45f7ff; --blue: #3657ff; --violet: #9d63ff; --pink: #ff4fcf; --green: #55ff9a; --gold: #ffd166;
    --acc: #45f7ff;
    --acc-dim: rgba(69,247,255,.55);
    --acc-lo: rgba(69,247,255,.16);
    --grad: linear-gradient(135deg, var(--cyan), var(--green));
    --glass: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.03));
    --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cond: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --clip-14: inset(0 round 14px);
    --clip-24: inset(0 round 22px);
}
body {
    background:
        radial-gradient(circle at 18% 4%, rgba(69,247,255,.13), transparent 34%),
        radial-gradient(circle at 86% 14%, rgba(157,99,255,.17), transparent 34%),
        radial-gradient(circle at 70% 96%, rgba(255,79,207,.08), transparent 38%),
        radial-gradient(circle at 6% 70%, rgba(85,255,154,.05), transparent 30%),
        #05050a;
    background-attachment: fixed;
    font-size: 18px;
}
::selection { background: rgba(69,247,255,.32); color: #fff; }

/* type: heavy, tight, sentence case */
h1, h2 { text-transform: none; font-weight: 900; letter-spacing: -.045em; line-height: .98; }
h1 { font-size: clamp(2.6rem, 6.2vw, 4.9rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.9rem); }
h3 { text-transform: none; font-weight: 800; letter-spacing: -.02em; }
.hero-h1 { line-height: 1.0; }
b, strong { font-weight: 700; }

/* header: blurred glass */
header { background: rgba(5,5,10,.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--rule); }
header.collapsed { border-bottom-color: var(--rule); }
.nav a, .nav summary { font-weight: 700; letter-spacing: .1em; }
.wordmark { font-weight: 900; letter-spacing: .16em; }

/* buttons: pills; the main action glows cyan→green */
.cta, .qp-btn, .head-book, .menu-btn {
    border-radius: 999px !important;
    font-weight: 800; font-size: .74rem; letter-spacing: .11em; text-transform: uppercase;
}
.cta, .qp-btn { padding: 12px 18px; }
a.cta:not(.ghost), button.cta:not(.ghost), .qp-btn:not(.ghost), .px-go .cta:first-child {
    background: var(--grad) !important; border: 1px solid transparent !important; color: #02030a !important;
    box-shadow: 0 0 34px rgba(69,247,255,.22);
}
a.cta:not(.ghost):hover, button.cta:not(.ghost):hover, .qp-btn:not(.ghost):hover, .px-go .cta:first-child:hover {
    box-shadow: 0 0 46px rgba(69,247,255,.38); filter: brightness(1.06); transform: translateY(-1px);
}
.cta.ghost, .qp-btn.ghost, .nav .cta, .ai-open {
    background: rgba(255,255,255,.04) !important; border: 1px solid var(--rule) !important; color: var(--fg) !important; box-shadow: none !important;
}
.cta.ghost:hover, .qp-btn.ghost:hover, .nav .cta:hover { border-color: var(--cyan) !important; color: var(--cyan) !important; }
.nav a.cta[href*="cal.com"], .nav a.cta[href*="go.geodesic"] { background: var(--grad) !important; color: #02030a !important; border-color: transparent !important; box-shadow: 0 0 28px rgba(69,247,255,.22) !important; }
.head-book { border-color: var(--cyan); color: var(--cyan); }
.head-book:hover { background: var(--grad); color: #02030a; }

/* panels: rounded glass */
.card, .px-card, .qcard, .qp-door, .qp-more-card, .qp-demo, .qp-mixed, .qp-tile, .shelf-item, .tm, .notice, .hero-hour, .hour-strip,
.interviewer, .cred, .facts .fact, .cx-card, .hf-mod, .hf-q, .hf-ask, .hf-lockcard, .ml-ch, .dr-card, .sub-topic, .ai-panel, .lang-menu, .nav-drop-menu, .xi-card, .pl, .block {
    border-radius: 22px;
}
.card, .px-card, .qcard, .qp-door, .qp-more-card, .shelf-item, .tm, .hero-hour, .interviewer, .facts .fact, .dr-card, .sub-topic, .xi-card, .pl {
    background: var(--glass); border-color: var(--rule);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 70px rgba(0,0,0,.34);
}
.card:hover, .qp-more-card:hover, .shelf-item:hover { border-color: rgba(69,247,255,.45); background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04)); }

/* the navy practice bands and the amber report band, recoloured */
.qp-hero, .qp-band, .qp-close {
    --qp-bg1: #120f2a; --qp-bg2: #07070f; --qp-ink: #f6f2ea; --qp-dim: #aaa39a;
    --qp-line: rgba(246,242,234,.14); --qp-teal: #45f7ff;
}
.qp-band, .qp-hero, .qp-close {
    background:
        radial-gradient(60% 90% at 100% 0%, rgba(157,99,255,.26), transparent 60%),
        radial-gradient(50% 80% at 0% 100%, rgba(69,247,255,.14), transparent 60%),
        linear-gradient(155deg, var(--qp-bg1), var(--qp-bg2)) !important;
    border: 1px solid var(--rule) !important; border-radius: 26px;
}
.qp-band-grid a { border-radius: 14px; }
.qp-glyph { stroke: var(--cyan); }
.qp-glyph .f { fill: var(--cyan); }
.rp-band {
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(255,79,207,.20), transparent 60%),
        radial-gradient(60% 100% at 0% 100%, rgba(157,99,255,.22), transparent 60%),
        linear-gradient(135deg, #140c22, #07060c 65%) !important;
    border: 1px solid rgba(157,99,255,.45) !important; border-radius: 26px; overflow: hidden;
}
.rp-band a.rp-cover { background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 45%), linear-gradient(150deg, #9d63ff, #3657ff 55%, #1b1d6e) !important; }
.rp-eyebrow { color: var(--pink) !important; }

/* labels, links, numbers */
.crumb, .crumb a, .qp-eyebrow, .px-eyebrow, .eyebrow, .kicker { color: var(--cyan); }
.px-label { color: var(--cyan); }
.page-content p a, .page-content li a, .article a { color: var(--cyan); border-bottom-color: rgba(69,247,255,.45); }
.page-content p a:hover, .page-content li a:hover { color: #fff; border-bottom-color: var(--cyan); }
.qp-stats dt, .px-count b, .stat-n, .hf-stats b, .cs-chips b { color: var(--gold); }
hr { border-color: var(--rule); }
.page-content p.formula { border-left-color: var(--violet); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; color: #e8fbff; background: rgba(0,0,0,.3); border-radius: 0 14px 14px 0; padding: 12px 16px; }
.collapse summary::marker, details > summary { color: var(--fg); }
li::marker { color: var(--cyan); }

/* drifting formulas in the six accents */
.eq-f { color: var(--cyan); text-shadow: 0 0 18px rgba(69,247,255,.35); opacity: .3; }
.eq-f:nth-child(6n+2) { color: var(--violet); text-shadow: 0 0 18px rgba(157,99,255,.4); }
.eq-f:nth-child(6n+3) { color: var(--pink); text-shadow: 0 0 18px rgba(255,79,207,.35); }
.eq-f:nth-child(6n+4) { color: var(--green); text-shadow: 0 0 18px rgba(85,255,154,.3); }
.eq-f:nth-child(6n+5) { color: var(--gold); text-shadow: 0 0 18px rgba(255,209,102,.3); }
.eq-f:nth-child(6n+6) { color: #7b93ff; text-shadow: 0 0 18px rgba(54,87,255,.4); }
/* theme fixes: the header's Ask button is secondary to Book; topic chips stay neutral until hovered */
header .nav button.cta.ai-open, header .nav .cta.ai-open { background: rgba(255,255,255,.04) !important; border: 1px solid var(--rule) !important; color: var(--fg) !important; box-shadow: none !important; }
header .nav button.cta.ai-open:hover { border-color: var(--cyan) !important; color: var(--cyan) !important; }
.page-content .px-topics a { color: var(--fg-dim); border-bottom: 1px solid var(--rule); }
.page-content .px-topics a:hover { color: var(--cyan); border-color: var(--cyan); }
/* Bug fix (19 Oct 2026): the site-header rules above target every <header>, so each question card's
   <header class="qhead"> was fixed to the top of the screen and hidden under the real header; its number,
   difficulty and firm chips were never visible. Return it to the card's normal flow. */
header.qhead {
    position: static; translate: none; left: auto; top: auto; z-index: auto;
    width: auto; max-width: none; height: auto; padding: 0; margin: 0 0 12px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0;
}
.qnum { color: var(--gold); font-weight: 800; }
.qdiff { border-radius: 999px; }
/* articles keep their own heading rule; bring it into the theme */
.article h2, .article h3 { text-transform: none; letter-spacing: -.035em; }
.page-content .qcard details { margin-left: 0; }

/* ── Home page, Functor style (19 Oct 2026) ─────────────────────────────────────────── */
.kicker {
    display: inline-flex; margin: 0 0 22px; padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px;
    color: var(--cyan); background: rgba(255,255,255,.04); font-size: .72rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase;
}
.page-content .hero .kicker { margin-left: 0; }
.cred-pills { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.page-content .hero .cred-pills { margin-left: var(--indent); }
.cred-pills li {
    margin: 0; padding: 7px 13px; border: 1px solid var(--rule); border-radius: 999px; background: rgba(255,255,255,.035);
    font-size: .8rem; color: var(--fg-dim);
}
.cred-pills li::marker { content: none; }
.cred-pills b { color: var(--gold); font-weight: 800; margin-right: 4px; }

/* the three areas: large coloured tiles */
.cards.areas { gap: 18px; }
.card.area { position: relative; overflow: hidden; padding: 28px 26px 24px; gap: 12px; border-color: color-mix(in srgb, var(--ic) 30%, transparent); }
.card.area::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 140px; pointer-events: none;
    background: radial-gradient(80% 100% at 20% 0%, color-mix(in srgb, var(--ic) 22%, transparent), transparent 70%);
}
.card.area > * { position: relative; }
.card.area h3 { font-size: 1.35rem; }
.card.area .card-from { color: var(--ic); font-size: .8rem; letter-spacing: .04em; }
.card.area .card-go { color: var(--fg); }
.card.area:hover { border-color: var(--ic); box-shadow: 0 0 50px color-mix(in srgb, var(--ic) 22%, transparent), 0 24px 70px rgba(0,0,0,.34); }
.card.area .px-icon {
    border-color: color-mix(in srgb, var(--ic) 55%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--ic) 22%, transparent), color-mix(in srgb, var(--ic) 4%, transparent));
}
.card.area .px-glyph { stroke: var(--ic); width: 32px; height: 32px; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card.area .px-glyph .f { fill: var(--ic); stroke: var(--ic); }
.card.area .px-glyph .dim { stroke: #ffffff4d; }
.card.area .px-glyph rect:not(.f) { fill: none; }

/* credentials as tiles */
.record-list.fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 900px; }
.record-list.fact-grid li {
    margin: 0; padding: 16px 18px 16px 18px; border: 1px solid var(--rule); border-radius: 18px;
    background: var(--glass); font-size: .9rem; line-height: 1.5;
}
.record-list.fact-grid li::before { display: none; }
.record-list.fact-grid li:last-child { border-bottom: 1px solid var(--rule); grid-column: 1 / -1; }
.record-list.fact-grid b { display: block; color: var(--fg); font-weight: 800; font-size: 1rem; margin-bottom: 2px; }

.interviewer {
    border: 1px solid rgba(157,99,255,.45) !important; border-radius: 24px;
    background: radial-gradient(90% 140% at 0% 0%, rgba(157,99,255,.22), transparent 60%), var(--glass) !important;
    box-shadow: 0 0 60px rgba(157,99,255,.14);
}
.interviewer b { color: #d8c2ff; }

/* method as numbered glass steps */
.steps { display: grid; gap: 12px; }
.steps li {
    padding: 18px 20px 18px 74px; border: 1px solid var(--rule) !important; border-radius: 18px; background: var(--glass); margin: 0;
}
.steps li::before {
    left: 18px; top: 16px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    content: counter(s); font-family: var(--font); font-weight: 900; font-size: 1rem; letter-spacing: 0;
    color: #02030a; background: var(--grad); box-shadow: 0 0 24px rgba(69,247,255,.25);
}
.steps b { text-transform: none; letter-spacing: -.01em; font-size: 1.05rem; font-weight: 800; }

/* destinations as pills */
.geo span, .geo a { clip-path: none; border-radius: 999px; background: rgba(255,255,255,.035); }
.dest-head { color: var(--cyan); }

@media (max-width: 760px) {
    .record-list.fact-grid { grid-template-columns: 1fr; }
    .page-content .hero .cred-pills { margin-left: 0; }
    .steps li { padding-left: 66px; }
}
/* card grids use the full width, as on functorfund.com; prose keeps its reading measure */
.page-content .cards { margin-left: 0; max-width: none; }
.record-list.fact-grid b { display: inline; font-size: .95rem; }
.record-list.fact-grid b:first-child { display: block; font-size: 1rem; }
@media (max-width: 980px) { .page-content .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .page-content .cards { grid-template-columns: 1fr; } }

/* ── Practice hubs, Functor style (19 Oct 2026): glass tiles, one colour per topic ──────── */
.qp-h1 { text-transform: none; font-weight: 900; letter-spacing: -.05em; line-height: .95; }
.qp-tile {
    background: var(--glass) !important; border: 1px solid color-mix(in srgb, var(--ic, #45f7ff) 28%, transparent) !important;
    border-radius: 22px; clip-path: none !important; overflow: hidden;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: relative;
}
.qp-tile::before {
    content: ''; position: absolute; inset: 0 0 auto 0; height: 130px; pointer-events: none;
    background: radial-gradient(80% 100% at 15% 0%, color-mix(in srgb, var(--ic, #45f7ff) 18%, transparent), transparent 70%);
}
.qp-tile > * { position: relative; }
.qp-tile:hover { border-color: var(--ic, #45f7ff) !important; box-shadow: 0 0 46px color-mix(in srgb, var(--ic, #45f7ff) 20%, transparent), 0 20px 50px rgba(0,0,0,.4); }
.qp-tile .qp-glyph { stroke: var(--ic, #45f7ff); width: 40px; height: 40px; }
.qp-tile .qp-glyph .f { fill: var(--ic, #45f7ff); }
.qp-tile .qp-glyph rect:not([rx]), .qp-tile .qp-glyph rect:not(.acc) { fill: color-mix(in srgb, var(--ic, #45f7ff) 18%, transparent); }
.qp-tile .qp-glyph .acc { stroke: var(--ic, #45f7ff); }
.qp-tile h3 { color: var(--fg); font-weight: 800; letter-spacing: -.02em; }
.qp-tile p { color: var(--fg-dim); }
.qp-diff { border-radius: 999px; overflow: hidden; }
.qp-diff .e { background: var(--green); } .qp-diff .m { background: var(--gold); } .qp-diff .h { background: var(--pink); }
.qp-diff-k, .qp-firms { color: var(--fg-faint); }
.qp-tile-go { border-top-color: var(--rule); }
.qp-tile-go a { color: var(--fg); font-weight: 700; font-size: .72rem; }
.qp-tile-go .qp-timed { border-left-color: var(--rule); color: var(--ic, #45f7ff); }
.qp-tile-go a:hover { background: color-mix(in srgb, var(--ic, #45f7ff) 10%, transparent); }
.qp-mixed { border-radius: 999px !important; clip-path: none !important; background: linear-gradient(90deg, rgba(69,247,255,.14), rgba(157,99,255,.14)) !important; border: 1px solid var(--rule) !important; }
.qp-mixed b, .qp-mixed-go { color: var(--cyan); }
.qp-more-card { border-radius: 20px; clip-path: none; background: var(--glass); }
.qp-demo { border-radius: 22px; }
/* home practice band: the drawn suite icons in their colours */
.qp-band-grid a .px-icon { width: 40px; height: 40px; margin-bottom: 6px;
    border: 1px solid color-mix(in srgb, var(--ic) 55%, transparent);
    background: linear-gradient(145deg, color-mix(in srgb, var(--ic) 22%, transparent), color-mix(in srgb, var(--ic) 4%, transparent));
    clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%); display: grid; place-items: center; }
.qp-band-grid a .px-glyph { width: 26px; height: 26px; fill: none; stroke: var(--ic); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qp-band-grid a .px-glyph .f { fill: var(--ic); stroke: var(--ic); }
.qp-band-grid a .px-glyph .dim { stroke: #ffffff4d; }
.qp-band-grid a .px-glyph rect:not(.f) { fill: none; }
.qp-band-grid a:hover { border-color: var(--ic); }

/* drifting education symbols (src/script.js builds them) */
.edu { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.edu-s {
    position: absolute; left: var(--x); top: var(--y); color: var(--c); opacity: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs); white-space: nowrap;
    text-shadow: 0 0 14px color-mix(in srgb, var(--c) 55%, transparent);
    animation: edu-drift var(--d) ease-in-out var(--delay) infinite; will-change: transform, opacity;
}
.edu-i svg { width: calc(var(--fs) * 1.9); height: calc(var(--fs) * 1.9); fill: none; stroke: var(--c); stroke-width: 1.6;
    stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 50%, transparent)); }
@keyframes edu-drift {
    0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    18%  { opacity: var(--o); }
    50%  { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
    82%  { opacity: var(--o); }
    100% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
}
.edu-quiet .edu-s { --o: .12 !important; }
@media (prefers-reduced-motion: reduce) { .edu { display: none; } }
.enq .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.enq-err { color: var(--pink); margin-top: 12px; }