/* Fail closed before auth.js runs: private page content never flashes while
   Supabase restores a session. The access gate and auth dialog remain usable. */
body[data-ui="verdigris"][data-page-kind] > :not(script):not(.access-gate):not(.auth-modal) {
  visibility: hidden !important;
}

html.access-granted body[data-ui="verdigris"][data-page-kind] > :not(script):not(.access-gate):not(.auth-modal) {
  visibility: visible !important;
}

@font-face {
  font-family: "STIX Two Text";
  src: url("fonts/STIXTwoText.ttf?v=2.13") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "STIX Two Text";
  src: url("fonts/STIXTwoText-Italic.ttf?v=2.13") format("truetype");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

@layer tokens, reset, base, layout, components, states, utilities, print;

/*
 * Verdigris production design system.
 *
 * Palette values are private primitives. Components consume only semantic
 * roles, which lets every theme keep the same DOM and geometry. This file is
 * deliberately standalone: the production pilot does not load the legacy,
 * override-heavy style.css cascade.
 */
@layer tokens {
  :root {
    color-scheme: light;

    --palette-v-950: #092c29;
    --palette-v-900: #103a36;
    --palette-v-850: #16443f;
    --palette-v-800: #1d514a;
    --palette-v-700: #2c665c;
    --palette-v-500: #668d7d;
    --palette-sage-300: #a9bba9;
    --palette-sage-200: #cbd6c7;
    --palette-sage-100: #e4eae0;
    --palette-paper-0: #fcfaf4;
    --palette-paper-100: #f5f1e7;
    --palette-paper-200: #eae3d5;
    --palette-ink: #152724;
    --palette-muted: #53615c;
    --palette-rule: #d6d0c3;
    --palette-gold: #cda967;
    --palette-gold-dark: #7d5d24;
    --palette-flag: #8f4535;
    --palette-success: #286654;
    --palette-white: #ffffff;
    --palette-black: #000000;

    --p1: #1d514a;
    --p2: #3f6f9f;
    --p3: #74659f;
    --p4: #36856f;
    --p5: #596f7f;

    --color-frame: var(--palette-v-950);
    --color-global-nav: var(--palette-v-950);
    --color-context-nav: var(--palette-v-900);
    --color-nav-text: #d9e5df;
    --color-nav-muted: #91afa4;
    --color-nav-hover: rgba(255, 255, 255, 0.075);
    --color-nav-on-hover: var(--color-nav-text);
    --color-nav-rule: rgba(255, 255, 255, 0.12);
    --color-nav-active: var(--palette-paper-100);
    --color-nav-on-active: var(--palette-v-950);
    --color-canvas: var(--palette-paper-100);
    --color-surface: var(--palette-paper-0);
    --color-surface-subtle: var(--palette-paper-200);
    --color-text: var(--palette-ink);
    --color-text-muted: var(--palette-muted);
    --color-rule: var(--palette-rule);
    --color-rule-strong: var(--palette-sage-300);
    --color-control-border: #838980;
    --color-nav-control-border: var(--palette-v-500);
    --color-action: var(--palette-v-800);
    --color-action-hover: var(--palette-v-700);
    --color-on-action: var(--palette-white);
    --color-hover: var(--palette-sage-100);
    --color-on-hover: var(--color-text);
    --color-selected: var(--palette-v-800);
    --color-on-selected: var(--palette-white);
    --color-focus-ring: var(--palette-v-950);
    --color-focus-halo: var(--palette-gold);
    --color-success: var(--palette-success);
    --color-flag: var(--palette-flag);
    --color-warning: var(--palette-flag);
    --color-warning-surface: #f4e4da;
    --color-result: var(--palette-v-850);
    --color-result-text: #eff4ee;
    --color-result-muted: #abc2b9;
    --color-result-accent: var(--palette-gold);
    --color-proof: var(--palette-paper-0);
    --color-proof-label: var(--palette-gold-dark);
    --color-definition-accent: var(--palette-sage-300);
    --color-definition-label: var(--palette-v-700);
    --color-overlay: rgba(5, 27, 25, 0.66);
    --color-timer-panel: var(--palette-v-950);
    --color-timer-text: var(--palette-white);
    --color-timer-muted: #aec3ba;
    --color-timer-control: var(--palette-paper-0);
    --color-on-timer-control: var(--palette-v-950);
    --color-timer-finish: var(--palette-gold);
    --color-on-timer-finish: var(--palette-v-950);
    --brand-mark-background: linear-gradient(180deg, var(--palette-gold), var(--palette-v-700));

    --font-reading: "STIX Two Text", "Iowan Old Style", Georgia, serif;
    --font-display: "STIX Two Text", "Iowan Old Style", Georgia, serif;
    --font-interface: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;

    --radius-control: 6px;
    --radius-card: 6px;
    --radius-shell: 10px;
    --radius-pill: 999px;
    --shadow-soft: 0 8px 22px rgba(4, 31, 28, 0.09), 0 1px 3px rgba(4, 31, 28, 0.07);
    --shadow-raised: 0 18px 42px rgba(4, 31, 28, 0.16), 0 2px 8px rgba(4, 31, 28, 0.09);
    --shadow-result: 0 11px 24px rgba(5, 38, 34, 0.16);

    --duration-fast: 120ms;
    --duration-standard: 200ms;
    --duration-view: 260ms;
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    --global-rail-width: 76px;
    --context-width: 292px;
    --topbar-height: 72px;
    --reading-measure: 860px;
    --control-size: 44px;

    --result-padding-block: 28px;
    --result-padding-inline: 32px;
    --result-border-width: 0px;
    --result-label-display: block;
    --result-name-display: block;
    --result-first-copy-display: block;
    --definition-padding: 25px 28px 24px;
    --definition-border-width: 1px;
  }

  html.lecture-mode {
    color-scheme: light;
    --color-frame: var(--palette-black);
    --color-global-nav: var(--palette-black);
    --color-context-nav: var(--palette-black);
    --color-nav-text: var(--palette-white);
    --color-nav-muted: var(--palette-white);
    --color-nav-hover: var(--palette-white);
    --color-nav-on-hover: var(--palette-black);
    --color-nav-rule: var(--palette-white);
    --color-nav-active: var(--palette-white);
    --color-nav-on-active: var(--palette-black);
    --color-canvas: var(--palette-white);
    --color-surface: var(--palette-white);
    --color-surface-subtle: var(--palette-white);
    --color-text: var(--palette-black);
    --color-text-muted: var(--palette-black);
    --color-rule: var(--palette-black);
    --color-rule-strong: var(--palette-black);
    --color-control-border: var(--palette-black);
    --color-nav-control-border: var(--palette-white);
    --color-action: var(--palette-black);
    --color-action-hover: var(--palette-black);
    --color-on-action: var(--palette-white);
    --color-hover: var(--palette-black);
    --color-on-hover: var(--palette-white);
    --color-selected: var(--palette-black);
    --color-on-selected: var(--palette-white);
    --color-focus-ring: var(--palette-black);
    --color-focus-halo: var(--palette-white);
    --color-success: var(--palette-black);
    --color-flag: var(--palette-black);
    --color-warning: var(--palette-black);
    --color-warning-surface: var(--palette-white);
    --color-result: var(--palette-black);
    --color-result-text: var(--palette-white);
    --color-result-muted: var(--palette-white);
    --color-result-accent: var(--palette-white);
    --color-proof: var(--palette-white);
    --color-proof-label: var(--palette-black);
    --color-definition-accent: var(--palette-black);
    --color-definition-label: var(--palette-black);
    --color-overlay: rgba(0, 0, 0, 0.72);
    --color-timer-panel: var(--palette-black);
    --color-timer-text: var(--palette-white);
    --color-timer-muted: var(--palette-white);
    --color-timer-control: var(--palette-white);
    --color-on-timer-control: var(--palette-black);
    --color-timer-finish: var(--palette-white);
    --color-on-timer-finish: var(--palette-black);
    --brand-mark-background: var(--palette-black);
    --shadow-soft: 0 8px 22px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-raised: 0 18px 42px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.12);
    --shadow-result: 0 11px 24px rgba(0, 0, 0, 0.18);
    --p1: #000000;
    --p2: #000000;
    --p3: #000000;
    --p4: #000000;
    --p5: #000000;
  }

  html.aurora-mode {
    color-scheme: light;
    --color-frame: #030522;
    --color-global-nav: #030522;
    --color-context-nav: #0c1647;
    --color-nav-text: #dbe5ff;
    --color-nav-muted: #9fb2e8;
    --color-nav-hover: rgba(126, 185, 255, 0.12);
    --color-nav-on-hover: #ffffff;
    --color-nav-rule: rgba(184, 205, 255, 0.22);
    --color-nav-active: #f4f7ff;
    --color-nav-on-active: #091341;
    --color-canvas: #eef3ff;
    --color-surface: #ffffff;
    --color-surface-subtle: #e2eaff;
    --color-text: #101b3f;
    --color-text-muted: #4a5d8a;
    --color-rule: #c6d2ef;
    --color-rule-strong: #86a9ff;
    --color-control-border: #6678a3;
    --color-nav-control-border: #6678a3;
    --color-action: #315fcf;
    --color-action-hover: #234ba9;
    --color-on-action: #ffffff;
    --color-hover: #dce7ff;
    --color-on-hover: #101b3f;
    --color-selected: #315fcf;
    --color-on-selected: #ffffff;
    --color-focus-ring: #112b71;
    --color-focus-halo: #ff70b6;
    --color-result: #172b68;
    --color-result-text: #f4f7ff;
    --color-result-muted: #b9cbff;
    --color-result-accent: #ff70b6;
    --color-proof: #ffffff;
    --color-proof-label: #8f2860;
    --color-definition-accent: #7eb9ff;
    --color-definition-label: #315fcf;
    --color-timer-panel: #091341;
    --color-timer-text: #ffffff;
    --color-timer-muted: #b9cbff;
    --color-timer-control: #f4f7ff;
    --color-on-timer-control: #091341;
    --color-timer-finish: #ff70b6;
    --color-on-timer-finish: #091341;
    --brand-mark-background: linear-gradient(180deg, #ff70b6, #315fcf);
    --p1: #315fcf;
    --p2: #168da6;
    --p3: #783df0;
    --p4: #9f3977;
    --p5: #4f6fc7;
  }

  html.lumina-mode {
    color-scheme: dark;
    --color-frame: #05070b;
    --color-global-nav: #05070b;
    --color-context-nav: #0f172a;
    --color-nav-text: #e5e7eb;
    --color-nav-muted: #94a3b8;
    --color-nav-hover: rgba(255, 255, 255, 0.08);
    --color-nav-on-hover: #ffffff;
    --color-nav-rule: rgba(255, 255, 255, 0.13);
    --color-nav-active: #f8fafc;
    --color-nav-on-active: #0f172a;
    --color-canvas: #131314;
    --color-surface: #1e293b;
    --color-surface-subtle: #111827;
    --color-text: #f8fafc;
    --color-text-muted: #c4c6cf;
    --color-rule: rgba(255, 255, 255, 0.14);
    --color-rule-strong: #60a5fa;
    --color-control-border: #64748b;
    --color-nav-control-border: #64748b;
    --color-action: #2563eb;
    --color-action-hover: #3b82f6;
    --color-on-action: #ffffff;
    --color-hover: rgba(59, 130, 246, 0.18);
    --color-on-hover: #f8fafc;
    --color-selected: #2563eb;
    --color-on-selected: #ffffff;
    --color-focus-ring: #93c5fd;
    --color-focus-halo: #10b981;
    --color-warning: #fca5a5;
    --color-warning-surface: #3f1d24;
    --color-result: #0f172a;
    --color-result-text: #f8fafc;
    --color-result-muted: #93c5fd;
    --color-result-accent: #10b981;
    --color-proof: #1e293b;
    --color-proof-label: #6ee7b7;
    --color-definition-accent: #60a5fa;
    --color-definition-label: #93c5fd;
    --color-overlay: rgba(0, 0, 0, 0.8);
    --color-timer-panel: #05070b;
    --color-timer-text: #f8fafc;
    --color-timer-muted: #c4c6cf;
    --color-timer-control: #f8fafc;
    --color-on-timer-control: #0f172a;
    --color-timer-finish: #10b981;
    --color-on-timer-finish: #07110e;
    --brand-mark-background: linear-gradient(180deg, #10b981, #2563eb);
    --p1: #60a5fa;
    --p2: #34d399;
    --p3: #c4b5fd;
    --p4: #fbbf24;
    --p5: #f87171;
  }

  body.v-context-collapsed {
    --context-width: 72px;
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

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

  body {
    min-height: 100%;
    margin: 0;
  }

  button,
  input,
  select,
  textarea {
    color: inherit;
    font: inherit;
  }

  button,
  select {
    cursor: pointer;
  }

  img,
  svg {
    display: block;
    max-width: 100%;
  }

  [hidden] {
    display: none;
  }
}

@layer base {
  body[data-ui="verdigris"] {
    color: var(--color-text);
    background: var(--color-frame);
    font: 400 17px/1.65 var(--font-reading);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection {
    color: var(--color-on-selected);
    background: var(--color-selected);
  }

  :focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--color-focus-halo);
  }

  a {
    color: var(--color-action);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
  }

  a:hover {
    color: var(--color-action-hover);
  }

  h1,
  h2,
  h3,
  h4 {
    color: var(--color-text);
    font-family: var(--font-display);
    text-wrap: balance;
  }

  h1 {
    margin: 0;
    font-size: clamp(42px, 5vw, 70px);
    font-weight: 500;
    line-height: 0.99;
    letter-spacing: -0.035em;
  }

  h2 {
    scroll-margin-top: calc(var(--topbar-height) + var(--space-6));
    margin: var(--space-16) 0 var(--space-6);
    font-size: clamp(28px, 3.4vw, 42px);
    font-weight: 550;
    line-height: 1.1;
    letter-spacing: -0.025em;
  }

  h3 {
    font-size: 22px;
    line-height: 1.22;
  }

  p,
  ul,
  ol {
    margin-block: 0.85em;
  }

  strong {
    font-weight: 650;
  }

  code,
  kbd {
    font-family: var(--font-mono);
  }

  mjx-container[display="true"],
  .display,
  table {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  mjx-container:not([display="true"]) {
    max-width: none;
    overflow: visible;
  }

  .v-inline-math-scroll {
    max-width: 100%;
    display: inline-block;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.18em 1px;
    vertical-align: middle;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--color-rule-strong) transparent;
    scrollbar-width: thin;
  }

  table {
    width: 100%;
    display: block;
  }
}

@layer layout {
  .skip-link {
    position: fixed;
    z-index: 300;
    top: var(--space-2);
    left: var(--space-3);
    min-height: var(--control-size);
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-4);
    color: var(--color-on-action);
    background: var(--color-action);
    border: 1px solid var(--color-focus-halo);
    border-radius: var(--radius-control);
    transform: translateY(-160%);
    transition: transform var(--duration-fast) var(--ease-out);
    font: 750 14px/1 var(--font-interface);
    text-decoration: none;
  }

  .skip-link:focus {
    transform: none;
  }

  .v-global-rail {
    position: fixed;
    z-index: 50;
    inset: 0 auto 0 0;
    width: var(--global-rail-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 10px 14px;
    color: var(--color-nav-text);
    background: var(--color-global-nav);
    border-right: 1px solid var(--color-nav-rule);
  }

  .v-rail-brand {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--color-nav-on-active);
    background: var(--color-nav-active);
    border: 1px solid var(--color-nav-rule);
    border-radius: 50%;
    text-decoration: none;
  }

  .v-rail-brand svg {
    width: 30px;
    height: 30px;
    display: block;
    overflow: visible;
  }

  .verdigris-mark-shape {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .verdigris-mark-point {
    fill: var(--palette-gold, #b58b3f);
  }

  .v-rail-nav {
    width: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2);
    margin: var(--space-6) 0;
  }

  .v-rail-link {
    position: relative;
    width: 100%;
    min-width: 52px;
    min-height: 52px;
    display: grid;
    place-items: center;
    color: var(--color-nav-muted);
    background: transparent;
    border: 0;
    border-radius: var(--radius-control);
    text-decoration: none;
    transition: color var(--duration-fast), background var(--duration-fast);
  }

  .v-rail-link svg {
    width: 21px;
    height: 21px;
  }

  .v-rail-link:hover {
    color: var(--color-nav-on-hover);
    background: var(--color-nav-hover);
  }

  .v-rail-link[aria-current="page"] {
    color: var(--color-nav-on-active);
    background: var(--color-nav-active);
  }

  .v-rail-link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: -10px;
    top: 14px;
    width: 3px;
    height: 24px;
    background: var(--color-result-accent);
    border-radius: 0 3px 3px 0;
  }

  .v-rail-label {
    position: absolute;
    z-index: 100;
    left: 62px;
    padding: 7px 10px;
    color: var(--color-nav-text);
    background: var(--color-context-nav);
    border: 1px solid var(--color-nav-rule);
    border-radius: var(--radius-control);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transform: translateX(-4px);
    transition: opacity var(--duration-fast), transform var(--duration-fast);
    font: 700 12px/1.2 var(--font-interface);
  }

  .v-rail-link:hover .v-rail-label,
  .v-rail-link:focus-visible .v-rail-label {
    opacity: 1;
    transform: none;
  }

  .v-rail-footer {
    min-height: 52px;
    display: grid;
    place-items: center;
    gap: var(--space-2);
  }

  .layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: var(--context-width) minmax(0, 1fr);
    margin-left: var(--global-rail-width);
    transition: grid-template-columns var(--duration-view) var(--ease-out), margin-left var(--duration-view) var(--ease-out);
  }

  .sidebar {
    position: sticky;
    z-index: 40;
    top: 0;
    height: 100vh;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 22px;
    color: var(--color-nav-text);
    background: var(--color-context-nav);
    border-right: 1px solid var(--color-nav-rule);
    transition: padding var(--duration-view) var(--ease-out);
    scrollbar-color: var(--color-nav-muted) transparent;
    scrollbar-width: thin;
  }

  .topbar {
    position: fixed;
    z-index: 30;
    top: 0;
    right: 0;
    left: calc(var(--global-rail-width) + var(--context-width));
    min-height: var(--topbar-height);
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(280px, 520px) minmax(120px, 1fr);
    align-items: center;
    gap: var(--space-5);
    padding: 11px 30px;
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-canvas) 96%, transparent);
    border-bottom: 1px solid var(--color-rule);
    backdrop-filter: blur(10px);
    transition: left var(--duration-view) var(--ease-out);
  }

  .topbar > * {
    min-width: 0;
  }

  .page {
    width: calc(100% - 24px);
    max-width: calc(var(--reading-measure) + 112px);
    min-width: 0;
    margin: 12px auto 32px;
    padding: calc(var(--topbar-height) + 58px) 56px var(--space-24);
    color: var(--color-text);
    background: var(--color-canvas);
    border: 1px solid color-mix(in srgb, var(--color-rule) 65%, transparent);
    border-radius: var(--radius-shell);
    box-shadow: var(--shadow-raised);
  }

  #nav-toggle {
    display: none;
  }

  #sidebar-backdrop {
    display: none;
  }
}

@layer components {
  .sidebar-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-nav-rule);
  }

  .sidebar-brand {
    min-width: 0;
    min-height: var(--control-size);
    display: grid;
    color: var(--color-nav-text);
    text-decoration: none;
  }

  .v-context-kicker,
  .v-context-label,
  .year-selector-eyebrow,
  .theme-customiser-label,
  .module-settings-kicker {
    color: var(--color-nav-muted);
    font: 800 10px/1.3 var(--font-interface);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .v-context-title {
    margin-top: 5px;
    overflow: hidden;
    color: var(--color-nav-text);
    font: 600 20px/1.18 var(--font-display);
    text-overflow: ellipsis;
  }

  .sidebar-collapse,
  .module-settings-close,
  .auth-close,
  .v-dialog-close {
    width: var(--control-size);
    height: var(--control-size);
    min-width: var(--control-size);
    display: grid;
    place-items: center;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 1px solid var(--color-nav-control-border);
    border-radius: var(--radius-control);
  }

  .sidebar-collapse:hover,
  .v-dialog-close:hover {
    color: var(--color-nav-on-hover);
    background: var(--color-nav-hover);
  }

  .sidebar-collapse svg,
  .module-settings-close svg,
  .v-dialog-close svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .year-selector {
    position: relative;
    margin-top: var(--space-5);
    font-family: var(--font-interface);
  }

  .year-selector-toggle {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 9px 11px;
    color: var(--color-nav-text);
    background: color-mix(in srgb, var(--color-nav-text) 5%, transparent);
    border: 1px solid var(--color-nav-control-border);
    border-radius: var(--radius-control);
    text-align: left;
  }

  .year-selector-toggle:hover,
  .year-selector.open .year-selector-toggle {
    color: var(--color-nav-on-hover);
    background: var(--color-nav-hover);
  }

  .year-selector-toggle:hover .year-selector-eyebrow,
  .year-selector-toggle:hover .year-selector-current-stage,
  .year-selector-toggle:hover .year-selector-current-label,
  .year-selector-toggle:hover .year-selector-dot,
  .year-selector.open .year-selector-eyebrow,
  .year-selector.open .year-selector-current-stage,
  .year-selector.open .year-selector-current-label,
  .year-selector.open .year-selector-dot {
    color: var(--color-nav-on-hover);
  }

  .year-selector-summary,
  .year-selector-current {
    min-width: 0;
    display: grid;
  }

  .year-selector-current {
    grid-template-columns: auto 1fr;
    gap: 7px;
    align-items: baseline;
    margin-top: 4px;
  }

  .year-selector-current-stage {
    color: var(--color-nav-text);
    font: 750 13px/1.2 var(--font-interface);
  }

  .year-selector-current-label {
    overflow: hidden;
    color: var(--color-nav-muted);
    font: 600 11px/1.2 var(--font-interface);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .year-selector-mini {
    display: flex;
    gap: 3px;
  }

  .year-selector-dot {
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    color: var(--color-nav-muted);
    border: 1px solid var(--color-nav-rule);
    border-radius: 50%;
    font: 700 8px/1 var(--font-interface);
  }

  .year-selector-dot.active {
    color: var(--color-nav-on-active);
    background: var(--color-nav-active);
  }

  .year-selector-chevron {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    transition: transform var(--duration-fast);
  }

  .year-selector.open .year-selector-chevron {
    transform: rotate(180deg);
  }

  .year-selector-options {
    position: absolute;
    z-index: 100;
    top: calc(100% + 7px);
    left: 0;
    width: 100%;
    padding: 6px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-raised);
  }

  .year-option {
    width: 100%;
    min-height: var(--control-size);
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: center;
    gap: var(--space-2);
    padding: 7px 9px;
    color: var(--color-text);
    background: transparent;
    border: 0;
    border-radius: calc(var(--radius-control) - 2px);
    text-align: left;
  }

  .year-option:hover {
    color: var(--color-on-hover);
    background: var(--color-hover);
  }

  .year-option.active {
    color: var(--color-on-selected);
    background: var(--color-selected);
  }

  .year-option:hover .year-option-state,
  .year-option.active .year-option-state {
    color: inherit;
  }

  .year-option-stage,
  .year-option-state {
    font: 750 11px/1.2 var(--font-interface);
  }

  .year-option-label {
    font: 600 12px/1.3 var(--font-interface);
  }

  .year-option-state {
    color: var(--color-text-muted);
  }

  .sidebar > .v-year-selector-relocated {
    display: none;
  }

  .v-rail-year-selector {
    width: 44px;
    margin: 0;
  }

  .v-rail-year-selector .year-selector-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    min-height: 44px;
    display: grid;
    place-content: center;
    place-items: center;
    gap: 0;
    margin-inline: auto;
    padding: 0;
    color: var(--color-nav-text);
    background: transparent;
    border-color: var(--color-nav-control-border);
    border-radius: 50%;
  }

  .v-rail-year-selector .year-selector-toggle:hover,
  .v-rail-year-selector.open .year-selector-toggle {
    color: var(--color-nav-on-hover);
    background: var(--color-nav-hover);
  }

  .v-rail-year-mark {
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    color: var(--color-nav-on-active);
    background: var(--color-nav-active);
    border-radius: 50%;
    font: 800 11px/1 var(--font-interface);
    font-variant-numeric: tabular-nums;
  }

  .v-rail-year-selector .v-rail-label {
    left: 52px;
  }

  .v-rail-year-selector:not(.open):hover .v-rail-label,
  .v-rail-year-selector:not(.open) .year-selector-toggle:focus-visible .v-rail-label {
    opacity: 1;
    transform: none;
  }

  .v-rail-year-selector .year-selector-options {
    top: auto;
    right: auto;
    bottom: 0;
    left: calc(100% + 10px);
    width: 248px;
  }

  .module-sidebar-shortcut {
    width: 100%;
    min-height: var(--control-size);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-2);
    padding: 0 11px;
    color: var(--color-nav-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font: 650 12px/1 var(--font-interface);
  }

  .module-sidebar-shortcut:hover,
  .module-sidebar-shortcut.is-filtered {
    color: var(--color-nav-on-hover);
    background: var(--color-nav-hover);
    border-color: var(--color-nav-control-border);
  }

  .module-sidebar-count {
    font-variant-numeric: tabular-nums;
  }

  .v-context-primary,
  .v-context-sections {
    margin-top: var(--space-5);
  }

  .v-context-links {
    display: grid;
    gap: 2px;
    margin-top: var(--space-2);
  }

  .v-context-link,
  .nav-progress,
  .nav-link,
  .page-toc-link {
    min-height: var(--control-size);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    color: var(--color-nav-text);
    background: transparent;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    font: 600 13px/1.35 var(--font-interface);
    text-decoration: none;
  }

  .v-context-link:hover,
  .nav-link:hover,
  .page-toc-link:hover,
  .page-toc-link.active,
  .v-context-link[aria-current="page"] {
    color: var(--color-nav-on-hover);
    background: var(--color-nav-hover);
    border-left-color: var(--color-result-accent);
  }

  .v-context-link:hover .v-context-link-index,
  .v-context-link[aria-current="page"] .v-context-link-index {
    color: inherit;
  }

  .v-context-link-index,
  .ptag {
    width: 30px;
    flex: 0 0 auto;
    color: var(--color-nav-muted);
    font: 700 10px/1 var(--font-interface);
    font-variant-numeric: tabular-nums;
  }

  .page-toc {
    max-height: min(46vh, 470px);
    display: grid;
    gap: 1px;
    margin-top: var(--space-2);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--color-nav-muted) transparent;
    scrollbar-width: thin;
  }

  .page-toc.collapsed {
    display: none;
  }

  .page-toc-link {
    min-height: var(--control-size);
    padding-block: 6px;
    color: var(--color-nav-muted);
    font-size: 12px;
  }

  .page-toc-toggle,
  .nav-current-row {
    display: none;
  }

  .nav-section {
    margin-top: var(--space-5);
  }

  .nav-section-label {
    width: 100%;
    min-height: var(--control-size);
    padding: 0 10px;
    color: var(--color-nav-muted);
    background: transparent;
    border: 0;
    text-align: left;
    font: 800 10px/1.3 var(--font-interface);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .nav-section.collapsed .nav-section-body {
    display: none;
  }

  body.v-shell-ready .sidebar > .nav-progress,
  body.v-shell-ready .sidebar > .nav-flashcards,
  body.v-shell-ready .sidebar > .nav-section {
    display: none;
  }

  body[data-page-kind="paper"].v-shell-ready .sidebar > .module-sidebar-shortcut {
    display: none;
  }

  .v-context-progress {
    margin-top: auto;
    padding-top: var(--space-5);
    font-family: var(--font-interface);
  }

  .v-context-progress-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-nav-muted);
    font-size: 11px;
    font-weight: 650;
  }

  .v-context-track {
    height: 4px;
    margin-top: 9px;
    overflow: hidden;
    background: var(--color-nav-rule);
    border-radius: var(--radius-pill);
  }

  .v-context-track span {
    width: 0;
    height: 100%;
    display: block;
    background: var(--color-result-accent);
    transition: width var(--duration-standard) var(--ease-out);
  }

  .v-context-peek {
    display: none;
  }

  .sidebar-bottom {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-nav-rule);
    font-family: var(--font-interface);
  }

  #auth-pill {
    min-width: var(--control-size);
    min-height: var(--control-size);
    padding: 0 var(--space-4);
    color: var(--color-nav-text);
    background: transparent;
    border: 1px solid var(--color-nav-control-border);
    border-radius: var(--radius-control);
    font: 700 12px/1 var(--font-interface);
  }

  #auth-pill:hover {
    color: var(--color-nav-on-hover);
    background: var(--color-nav-hover);
  }

  .v-rail-footer #auth-pill {
    --account-icon-color: var(--color-nav-text);
    width: 44px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    border-radius: 50%;
  }

  .v-rail-footer #auth-pill::before {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    margin: auto;
    border: 1.8px solid var(--account-icon-color);
    border-radius: 50%;
    clip-path: polygon(0 0, 100% 0, 100% 54%, 77% 54%, 77% 100%, 23% 100%, 23% 54%, 0 54%);
  }

  .v-rail-footer #auth-pill:hover {
    --account-icon-color: var(--color-nav-on-hover);
  }

  .theme-customiser {
    display: grid;
    gap: 7px;
  }

  .theme-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .theme-choice {
    min-width: 0;
    min-height: var(--control-size);
    padding: 5px 7px;
    color: var(--color-nav-muted);
    background: transparent;
    border: 1px solid var(--color-nav-control-border);
    border-radius: var(--radius-control);
    font: 700 10px/1.1 var(--font-interface);
  }

  .theme-choice:hover {
    color: var(--color-nav-on-hover);
    background: var(--color-nav-hover);
  }

  .theme-choice.active {
    color: var(--color-nav-on-active);
    background: var(--color-nav-active);
    border-color: var(--color-nav-active);
  }

  .v-breadcrumbs {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow: hidden;
    color: var(--color-text-muted);
    font: 650 12px/1.4 var(--font-interface);
  }

  .v-breadcrumbs span,
  .v-breadcrumbs a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v-breadcrumbs a {
    min-height: var(--control-size);
    display: inline-flex;
    align-items: center;
    color: var(--color-text);
    text-decoration: none;
  }

  .v-breadcrumbs a:hover {
    text-decoration: underline;
  }

  .topbar .topbar-brand {
    justify-self: end;
    min-height: var(--control-size);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    overflow: hidden;
    color: var(--color-text);
    font: 600 14px/1 var(--font-display);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar .topbar-brand::before {
    content: "";
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    background: url("favicon.svg?v=20260907-03") center / contain no-repeat;
    border-radius: 50%;
  }

  .v-topbar-name {
    justify-self: end;
    min-width: 0;
    min-height: var(--control-size);
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    color: var(--color-text);
    font: 650 14px/1 var(--font-interface);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .v-topbar-name.is-signed-out {
    color: var(--color-text-muted);
    font-weight: 550;
  }

  .v-topbar-name.is-signed-out[role="button"] {
    cursor: pointer;
    border-radius: var(--radius-control);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 0.22em;
    transition:
      color var(--duration-fast) var(--ease-out),
      text-decoration-color var(--duration-fast) var(--ease-out);
  }

  .v-topbar-name.is-signed-out[role="button"]:hover {
    color: var(--color-action);
    text-decoration-color: currentColor;
  }

  .brand-dot {
    color: var(--color-definition-label);
  }

  .search-widget {
    position: fixed;
    z-index: 100;
    top: 12px;
    left: calc(var(--global-rail-width) + var(--context-width) + 50%);
    width: min(520px, calc(100vw - var(--global-rail-width) - var(--context-width) - 280px));
    transform: translateX(-50%);
    font-family: var(--font-interface);
  }

  .topbar > .search-widget {
    position: relative;
    inset: auto;
    width: 100%;
    transform: none;
  }

  .search-input-wrap {
    position: relative;
  }

  .search-input-wrap::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 17px;
    height: 17px;
    border: 1.8px solid var(--color-text-muted);
    border-radius: 50%;
    transform: translateY(-58%);
    pointer-events: none;
  }

  .search-input-wrap::after {
    content: "";
    position: absolute;
    left: 29px;
    top: 30px;
    width: 7px;
    height: 1.8px;
    background: var(--color-text-muted);
    transform: rotate(45deg);
    pointer-events: none;
  }

  .search-input {
    width: 100%;
    min-height: 46px;
    padding: 0 50px 0 42px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    font-size: 16px;
  }

  .search-input::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
  }

  .search-kbd {
    position: absolute;
    top: 11px;
    right: 10px;
    padding: 5px 7px;
    color: var(--color-text-muted);
    background: var(--color-surface-subtle);
    border: 0;
    border-radius: calc(var(--radius-control) - 2px);
    font: 700 10px/1 var(--font-interface);
  }

  .search-dropdown {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    right: 0;
    display: none;
    max-height: min(480px, 72vh);
    overflow: auto;
    padding: var(--space-2);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-raised);
  }

  .search-widget.open .search-dropdown {
    display: block;
  }

  .search-filters {
    display: flex;
    gap: var(--space-1);
    padding-bottom: var(--space-2);
    overflow-x: auto;
    border-bottom: 1px solid var(--color-rule);
  }

  .search-filter {
    min-height: var(--control-size);
    flex: 0 0 auto;
    padding: 0 10px;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font: 700 11px/1 var(--font-interface);
  }

  .search-filter:hover {
    color: var(--color-on-hover);
    background: var(--color-hover);
  }

  .search-filter.active {
    color: var(--color-on-selected);
    background: var(--color-selected);
  }

  .search-results {
    display: grid;
    gap: 2px;
    padding-top: 6px;
  }

  .search-result {
    min-height: 58px;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    align-items: center;
    padding: 9px 10px;
    color: var(--color-text);
    background: transparent;
    border-left: 2px solid transparent;
    border-radius: var(--radius-control);
    text-decoration: none;
  }

  .search-result:hover,
  .search-result.active {
    color: var(--color-on-hover);
    background: var(--color-hover);
    border-left-color: var(--color-action);
  }

  .search-result-kind {
    grid-row: 1 / span 2;
    align-self: center;
    padding: 5px 7px;
    color: var(--color-text-muted);
    border: 1px solid var(--color-rule);
    border-radius: calc(var(--radius-control) - 2px);
    font: 800 9px/1 var(--font-interface);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .search-result:hover .search-result-kind,
  .search-result:hover .search-result-context,
  .search-result.active .search-result-kind,
  .search-result.active .search-result-context {
    color: inherit;
    border-color: currentColor;
  }

  .search-result-name {
    overflow: hidden;
    font: 650 14px/1.25 var(--font-reading);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .search-result-context,
  .search-empty {
    color: var(--color-text-muted);
    font: 550 11px/1.35 var(--font-interface);
  }

  .search-empty {
    padding: var(--space-5);
    text-align: center;
  }

  .page-header {
    position: relative;
    min-height: 230px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(36px, 1fr) auto auto auto;
    column-gap: var(--space-8);
    padding: var(--space-4) 0 var(--space-10);
    margin-bottom: var(--space-10);
    border-bottom: 1px solid var(--color-rule);
  }

  .page-header .brand {
    position: static;
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    min-height: var(--control-size);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text-muted);
    font: 600 14px/1 var(--font-display);
    text-decoration: none;
  }

  .page-header .brand::before {
    content: "";
    width: 26px;
    height: 26px;
    background: url("favicon.svg?v=20260907-03") center / contain no-repeat;
    border-radius: 50%;
  }

  .eyebrow {
    position: relative;
    z-index: 1;
    margin: 0 0 10px;
    color: var(--color-definition-label);
    font: 800 11px/1.3 var(--font-interface);
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .page-header .eyebrow {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
  }

  .page-header h1 {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 4;
    max-width: 720px;
  }

  .page-header h1::after {
    content: "";
    width: 64px;
    height: 3px;
    display: block;
    margin-top: var(--space-5);
    background: var(--color-action);
  }

  .page-header .page-deck {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 5;
    max-width: 680px;
    margin: var(--space-4) 0 0;
    color: var(--color-text-muted);
    font: 600 15px/1.5 var(--font-interface);
  }

  .ghost-numeral {
    position: static;
    z-index: 0;
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: start;
    margin-top: 20px;
    color: color-mix(in srgb, var(--color-action) 12%, transparent);
    font: 600 112px/0.78 var(--font-display);
    letter-spacing: -0.07em;
    pointer-events: none;
    user-select: none;
  }

  body[data-page-kind="home"] .page {
    max-width: 1292px;
  }

  .home-hero {
    min-height: 310px;
    grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
    grid-template-rows: auto 1fr;
    column-gap: 58px;
    align-items: end;
  }

  .home-hero-copy {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
  }

  .home-hero .eyebrow {
    margin-bottom: 12px;
  }

  .home-hero h1 {
    max-width: 720px;
  }

  .home-lede {
    max-width: 650px;
    margin: var(--space-5) 0 0;
    color: var(--color-text-muted);
    font-size: 19px;
    line-height: 1.55;
  }

  .home-milestone {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    padding: 5px 0 7px var(--space-8);
    border-left: 1px solid var(--color-rule);
  }

  .home-milestone-label,
  .home-resume-label {
    margin: 0;
    color: var(--color-definition-label);
    font: 800 10px/1.3 var(--font-interface);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .home-milestone strong {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-text);
    font: 550 34px/1.08 var(--font-display);
    letter-spacing: -0.025em;
  }

  .home-milestone-meta {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font: 600 12px/1.45 var(--font-interface);
  }

  .home-resume-card {
    position: relative;
    min-height: 154px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
    overflow: hidden;
    padding: 26px 28px 26px 32px;
    margin: 0 0 var(--space-16);
    color: var(--color-result-text);
    background: var(--color-result);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-result);
  }

  .home-resume-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--color-result-accent);
  }

  .home-resume-copy {
    min-width: 0;
  }

  .home-resume-label {
    color: var(--color-result-accent);
  }

  .home-resume-card h2 {
    margin: 7px 0 3px;
    color: var(--color-result-text);
    font-size: clamp(25px, 3vw, 34px);
    font-weight: 550;
  }

  .home-resume-meta {
    margin: 0;
    color: var(--color-result-muted);
    font: 600 13px/1.5 var(--font-interface);
  }

  .home-resume-action {
    min-height: var(--control-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    color: var(--color-on-timer-control);
    background: var(--color-timer-control);
    border: 1px solid var(--color-timer-control);
    border-radius: var(--radius-control);
    font: 750 13px/1 var(--font-interface);
    text-decoration: none;
  }

  .home-resume-action:hover {
    color: var(--color-on-timer-control);
    background: color-mix(in srgb, var(--color-timer-control) 88%, transparent);
  }

  .home-resume-action svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .home-library-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
  }

  .home-library-head .eyebrow {
    margin-bottom: var(--space-2);
  }

  .home-library-head h2 {
    margin: 0;
  }

  .home-module-count {
    margin: 0 0 5px;
    color: var(--color-text-muted);
    font: 650 12px/1.4 var(--font-interface);
    white-space: nowrap;
  }

  #module-hub {
    scroll-margin-top: calc(var(--topbar-height) + var(--space-6));
  }

  .collection-title {
    margin: var(--space-10) 0 var(--space-5);
    font-size: 27px;
  }

  .module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
  }

  .module-grid + .module-grid {
    margin-top: var(--space-8);
  }

  .module-card {
    min-width: 0;
    min-height: 174px;
    display: flex;
    flex-direction: column;
    padding: 19px;
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-top: 3px solid var(--color-definition-accent);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-frame) 5%, transparent);
    transition: border-color var(--duration-fast) var(--ease-out),
      box-shadow var(--duration-fast) var(--ease-out);
  }

  .module-card:hover,
  .module-card:focus-within {
    border-color: var(--color-rule-strong);
    box-shadow: var(--shadow-soft);
  }

  .module-card h3,
  .module-card h4 {
    margin: 0;
    color: var(--color-text);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
  }

  .module-meta {
    margin: 7px 0 auto;
    color: var(--color-text-muted);
    font: 600 11px/1.45 var(--font-interface);
  }

  .module-links {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: var(--space-5);
  }

  .link-pill,
  .module-status-pill {
    min-height: var(--control-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border-radius: var(--radius-control);
    font: 750 12px/1 var(--font-interface);
  }

  .link-pill {
    color: var(--color-action);
    background: transparent;
    border: 1px solid transparent;
    text-decoration: none;
  }

  .link-pill:hover {
    color: var(--color-on-hover);
    background: var(--color-hover);
    border-color: var(--color-rule);
  }

  .link-pill.primary,
  .link-pill.primary:hover {
    color: var(--color-on-action);
    background: var(--color-action);
    border-color: var(--color-action);
  }

  .link-pill.primary:hover {
    background: var(--color-action-hover);
  }

  .module-status-pill {
    color: var(--color-text-muted);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-rule);
  }

  .module-card-empty {
    border-top-color: var(--color-rule);
  }

  .empty-year-state {
    padding: var(--space-10);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
  }

  .empty-year-state h2 {
    margin: 0 0 var(--space-3);
    font-size: 28px;
  }

  .empty-year-state p {
    margin: 0;
    color: var(--color-text-muted);
  }

  .empty-year-action {
    margin-top: var(--space-5);
  }

  body[data-page-kind="archive"] .page {
    max-width: 1292px;
  }

  .archive-hero {
    min-height: 310px;
    grid-template-columns: minmax(0, 1.35fr) minmax(250px, 0.65fr);
    grid-template-rows: auto 1fr;
    column-gap: 58px;
    align-items: end;
  }

  .archive-hero-copy {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
  }

  .archive-lede {
    max-width: 650px;
    margin: var(--space-5) 0 0;
    color: var(--color-text-muted);
    font-size: 19px;
    line-height: 1.55;
  }

  .archive-summary {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    padding: 5px 0 7px var(--space-8);
    border-left: 1px solid var(--color-rule);
  }

  .archive-summary-label {
    margin: 0;
    color: var(--color-definition-label);
    font: 800 10px/1.3 var(--font-interface);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .archive-summary strong {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-text);
    font: 550 34px/1.08 var(--font-display);
    letter-spacing: -0.025em;
  }

  .archive-summary span {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font: 600 12px/1.45 var(--font-interface);
  }

  .archive-library-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
  }

  .archive-library-head .eyebrow {
    margin-bottom: var(--space-2);
  }

  .archive-library-head h2 {
    margin: 0;
  }

  .archive-switch {
    display: flex;
    flex: 0 0 auto;
    gap: 3px;
    padding: 4px;
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-control);
  }

  .archive-switch button {
    min-height: var(--control-size);
    padding: 0 15px;
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: calc(var(--radius-control) - 2px);
    font: 750 12px/1 var(--font-interface);
  }

  .archive-switch button:hover {
    color: var(--color-on-hover);
    background: var(--color-hover);
  }

  .archive-switch button[aria-pressed="true"] {
    color: var(--color-on-selected);
    background: var(--color-selected);
    border-color: var(--color-selected);
    box-shadow: var(--shadow-soft);
  }

  #past-paper-hub {
    min-width: 0;
  }

  .archive-loading {
    min-height: 126px;
    display: grid;
    place-items: center;
    padding: var(--space-8);
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    font: 650 13px/1.4 var(--font-interface);
  }

  .archive-panel {
    min-width: 0;
    scroll-margin-top: calc(var(--topbar-height) + var(--space-5));
  }

  .archive-grid-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 7px;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--color-rule-strong) var(--color-surface-subtle);
    scrollbar-width: thin;
  }

  .archive-grid {
    min-width: var(--archive-min-width, 760px);
    display: grid;
    gap: var(--space-3);
  }

  .archive-year-row {
    min-width: var(--archive-min-width, 760px);
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: var(--space-2);
    align-items: stretch;
    padding: var(--space-3);
    scroll-margin-top: calc(var(--topbar-height) + var(--space-5));
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-frame) 5%, transparent);
  }

  .archive-year-label {
    position: sticky;
    z-index: 2;
    left: var(--space-3);
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 var(--space-3);
    background: var(--color-surface);
    border-right: 1px solid var(--color-rule);
  }

  .archive-year-label h4 {
    margin: 0;
    color: var(--color-text);
    font-size: 27px;
    font-weight: 550;
    line-height: 1;
    letter-spacing: -0.025em;
    white-space: nowrap;
  }

  .archive-year-label span {
    margin-top: 7px;
    color: var(--color-text-muted);
    font: 750 9px/1.2 var(--font-interface);
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .archive-paper-grid {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(var(--archive-columns, 5), minmax(96px, 1fr));
    gap: var(--space-2);
  }

  .archive-paper-cell {
    min-width: 0;
    min-height: 78px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 10px 12px;
    color: var(--color-text);
    background: var(--color-canvas);
    border: 1px solid var(--color-rule);
    border-radius: calc(var(--radius-control) - 2px);
    text-align: left;
    text-decoration: none;
    transition: color var(--duration-fast), background var(--duration-fast), border-color var(--duration-fast), box-shadow var(--duration-fast);
  }

  a.archive-paper-cell:hover,
  a.archive-paper-cell:focus-visible {
    color: var(--color-on-hover);
    background: var(--color-hover);
    border-color: var(--color-rule-strong);
    box-shadow: var(--shadow-soft);
  }

  .archive-paper-cell strong {
    overflow: hidden;
    max-width: 100%;
    font: 800 12px/1.15 var(--font-interface);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .archive-paper-cell > span:not(.visually-hidden) {
    max-width: 100%;
    margin-top: 6px;
    color: var(--color-text-muted);
    font: 650 10px/1.25 var(--font-interface);
    overflow-wrap: anywhere;
    white-space: normal;
  }

  a.archive-paper-cell:hover > span,
  a.archive-paper-cell:focus-visible > span {
    color: inherit;
  }

  .archive-paper-cell.is-missing {
    color: var(--color-text-muted);
    background: var(--color-surface-subtle);
    border-style: dashed;
  }

  .archive-note {
    max-width: 760px;
    margin: var(--space-6) 0 0;
    color: var(--color-text-muted);
    font: 600 12px/1.55 var(--font-interface);
  }

  body[data-page-kind="progress"] .page {
    max-width: 1200px;
  }

  .progress-header {
    min-height: 240px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: end;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }

  .progress-header-copy {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
  }

  .progress-lede {
    max-width: 670px;
    margin: var(--space-5) 0 0;
    color: var(--color-text-muted);
    font-size: 19px;
    line-height: 1.55;
  }

  .progress-header > .progress-summary {
    grid-column: 2;
    grid-row: 2;
    align-self: end;
    padding: 5px 0 7px var(--space-8);
    border-left: 1px solid var(--color-rule);
  }

  .progress-summary-label,
  .chart-card-kicker {
    margin: 0;
    color: var(--color-definition-label);
    font: 800 10px/1.3 var(--font-interface);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .progress-header > .progress-summary strong {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-text);
    font: 550 34px/1.08 var(--font-display);
    letter-spacing: -0.025em;
  }

  .progress-header > .progress-summary span {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font: 600 12px/1.45 var(--font-interface);
  }

  .progress-overview,
  .progress-leaderboard,
  .progress-breakdowns,
  .prog-timing-section,
  .prog-list-section {
    scroll-margin-top: calc(var(--topbar-height) + var(--space-5));
  }

  .progress-breakdowns,
  .progress-leaderboard,
  .prog-timing-section,
  .prog-list-section {
    margin-top: var(--space-16);
  }

  .progress-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
  }

  .progress-section-head .eyebrow {
    margin-bottom: var(--space-2);
  }

  .progress-section-head h2 {
    margin: 0;
  }

  .progress-section-head > p {
    max-width: 360px;
    margin: 0 0 5px;
    color: var(--color-text-muted);
    font: 600 12px/1.5 var(--font-interface);
    text-align: right;
  }

  .leaderboard-section-tools {
    display: grid;
    justify-items: end;
    gap: 7px;
  }

  .leaderboard-section-tools > p {
    max-width: 390px;
    margin: 0;
    color: var(--color-text-muted);
    font: 600 11px/1.4 var(--font-interface);
    text-align: right;
  }

  .leaderboard-collection-picker {
    min-height: 42px;
    display: inline-grid;
    grid-template-columns: auto minmax(112px, 1fr);
    align-items: center;
    gap: 9px;
    padding: 4px 4px 4px 11px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-soft);
  }

  .leaderboard-collection-picker > span {
    color: var(--color-text-muted);
    font: 800 9px/1 var(--font-interface);
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  .leaderboard-collection-picker select {
    min-width: 112px;
    height: 32px;
    padding: 0 28px 0 10px;
    color: var(--color-text);
    background-color: var(--color-canvas);
    border: 1px solid var(--color-rule-strong);
    border-radius: calc(var(--radius-control) - 2px);
    font: 750 12px/1 var(--font-interface);
  }

  .leaderboard-collection-picker select:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--color-focus-halo);
  }

  .leaderboard-collection-picker:has(select:disabled) {
    opacity: 0.68;
  }

  .prog-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
    gap: var(--space-3);
  }

  .prog-hero-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .prog-tile,
  .timer-stat {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-top: 3px solid var(--color-definition-accent);
    border-radius: var(--radius-card);
  }

  .prog-tile-num,
  .timer-stat-num {
    color: var(--color-text);
    font: 550 34px/1 var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.025em;
  }

  .prog-tile-label,
  .timer-stat-label {
    margin-top: 9px;
    color: var(--color-text-muted);
    font: 800 10px/1.3 var(--font-interface);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .prog-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .chart-card {
    min-width: 0;
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--color-frame) 5%, transparent);
  }

  .chart-card-wide {
    grid-column: 1 / -1;
  }

  .chart-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
  }

  .chart-card-head h3 {
    margin: 6px 0 0;
    font-size: 24px;
    font-weight: 600;
  }

  .chart-wrap {
    position: relative;
    height: 240px;
    min-width: 0;
  }

  .prog-hero-chart .chart-wrap {
    height: 270px;
  }

  .chart-wrap-module {
    height: 520px;
  }

  .chart-wrap canvas {
    max-width: 100%;
  }

  .chart-unavailable {
    min-height: 180px;
    display: grid;
    place-items: center;
    padding: var(--space-6);
    color: var(--color-text-muted);
    background: var(--color-surface-subtle);
    border: 1px dashed var(--color-rule-strong);
    border-radius: var(--radius-control);
    font: 650 12px/1.5 var(--font-interface);
    text-align: center;
  }

  .chart-data-details {
    margin-top: var(--space-4);
    background: var(--color-canvas);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-control);
    font-family: var(--font-interface);
  }

  .chart-data-details summary {
    min-height: var(--control-size);
    display: flex;
    align-items: center;
    padding: 0 var(--space-3);
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
  }

  .chart-data-table {
    max-height: 360px;
    overflow: auto;
    padding: 0 var(--space-3) var(--space-3);
  }

  .chart-data-table table {
    width: 100%;
    display: table;
    overflow: visible;
    border-collapse: collapse;
    color: var(--color-text);
    font: 600 11px/1.4 var(--font-interface);
  }

  .chart-data-table caption {
    padding: var(--space-3) 0;
    color: var(--color-text-muted);
    text-align: left;
    font-weight: 700;
  }

  .chart-data-table th,
  .chart-data-table td {
    padding: 8px 9px;
    border-bottom: 1px solid var(--color-rule);
    text-align: left;
  }

  .chart-data-table th:not(:first-child),
  .chart-data-table td:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .chart-data-table th {
    color: var(--color-text-muted);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .timer-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .timer-list {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-5);
  }

  .timer-row,
  .ql-row {
    min-width: 0;
    background: color-mix(in srgb, var(--paper-row-tint, transparent) 60%, var(--color-surface));
    border: 1px solid var(--color-rule);
    border-left: 3px solid var(--paper-color, var(--color-action));
    border-radius: var(--radius-control);
  }

  .timer-row {
    min-height: 74px;
    display: grid;
    grid-template-columns: 46px minmax(180px, 1fr) minmax(180px, auto) minmax(120px, auto);
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-3);
  }

  .ql-paper {
    min-width: 38px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    color: var(--paper-color, var(--color-action));
    background: var(--color-surface);
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font: 800 10px/1 var(--font-interface);
    white-space: nowrap;
  }

  .timer-link,
  .ql-link {
    min-width: 0;
    color: var(--color-text);
    text-decoration: none;
  }

  .timer-link {
    display: grid;
  }

  .timer-link:hover,
  .ql-link:hover {
    color: var(--color-action-hover);
  }

  .timer-label,
  .ql-label {
    font: 650 14px/1.35 var(--font-reading);
  }

  .timer-meta,
  .ql-meta,
  .timer-metrics,
  .ql-date {
    color: var(--color-text-muted);
    font: 600 11px/1.4 var(--font-interface);
  }

  .timer-meta {
    margin-top: 3px;
  }

  .timer-metrics {
    min-width: 0;
  }

  .timer-active-pill {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    margin-left: var(--space-2);
    padding: 0 8px;
    color: var(--color-on-selected);
    background: var(--color-selected);
    border-radius: var(--radius-pill);
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
  }

  .timer-attempt-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
  }

  .timer-attempt-list > span {
    min-height: var(--control-size);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding-left: 9px;
    color: var(--color-text-muted);
    background: var(--color-canvas);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-pill);
    font: 650 10px/1 var(--font-interface);
  }

  .timer-delete {
    width: var(--control-size);
    height: var(--control-size);
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: 50%;
  }

  .timer-delete:hover {
    color: var(--color-on-hover);
    background: var(--color-hover);
  }

  .timer-delete svg {
    width: 14px;
    height: 14px;
  }

  .timer-list-empty,
  .q-list-empty {
    padding: var(--space-8);
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px dashed var(--color-rule-strong);
    border-radius: var(--radius-card);
    font: 650 13px/1.5 var(--font-interface);
    text-align: center;
  }

  .progress-filters {
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
  }

  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .filter-pill,
  .filter-reset {
    min-height: var(--control-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-4);
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-pill);
    font: 750 12px/1 var(--font-interface);
  }

  .filter-pill:hover,
  .filter-reset:hover {
    color: var(--color-on-hover);
    background: var(--color-hover);
    border-color: var(--color-rule-strong);
  }

  .filter-reset:disabled {
    color: var(--color-text-muted);
    background: transparent;
    border-color: var(--color-rule);
    cursor: default;
    opacity: 0.55;
  }

  .filter-pill[aria-pressed="true"] {
    color: var(--color-on-selected);
    background: var(--color-selected);
    border-color: var(--color-selected);
  }

  .filter-bar-selects {
    align-items: end;
    margin-top: var(--space-3);
  }

  .filter-bar-selects label {
    min-width: 150px;
    display: grid;
    flex: 1;
    gap: 6px;
    color: var(--color-text-muted);
    font: 750 10px/1.2 var(--font-interface);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .filter-bar-selects select {
    width: 100%;
    min-height: var(--control-size);
    padding: 0 34px 0 11px;
    color: var(--color-text);
    background: var(--color-canvas);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    font: 650 12px/1 var(--font-interface);
    letter-spacing: normal;
    text-transform: none;
  }

  .filter-reset {
    flex: 0 0 auto;
    border-radius: var(--radius-control);
  }

  .filter-result-count {
    margin: var(--space-4) 0 var(--space-3);
    color: var(--color-text-muted);
    font: 650 12px/1.4 var(--font-interface);
  }

  .q-list {
    display: grid;
    gap: 6px;
  }

  .ql-row {
    min-height: 68px;
    display: grid;
    grid-template-columns: var(--control-size) var(--control-size) 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    padding: 10px var(--space-3);
  }

  .ql-act {
    width: var(--control-size);
    height: var(--control-size);
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--color-text-muted);
    background: var(--color-canvas);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
  }

  .ql-act:hover {
    color: var(--color-action-hover);
    background: var(--color-hover);
  }

  .ql-act[aria-pressed="true"].ql-done {
    color: var(--color-on-selected);
    background: var(--color-success);
    border-color: var(--color-success);
  }

  .ql-act[aria-pressed="true"].ql-flag {
    color: var(--color-on-selected);
    background: var(--color-flag);
    border-color: var(--color-flag);
  }

  .ql-link {
    min-height: var(--control-size);
    display: flex;
    align-items: center;
  }

  .ql-date {
    padding-left: var(--space-2);
    white-space: nowrap;
  }

  .prog-wall {
    display: grid;
    place-items: center;
    min-height: 420px;
  }

  .prog-wall-card {
    width: min(560px, 100%);
    padding: var(--space-10);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-top: 4px solid var(--color-definition-accent);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
    text-align: center;
  }

  .prog-wall-card h2 {
    margin: 0;
    font-size: 32px;
  }

  .prog-wall-card p {
    max-width: 440px;
    margin: var(--space-4) auto var(--space-6);
    color: var(--color-text-muted);
  }

  .prog-wall-btn {
    min-height: var(--control-size);
    padding: 0 var(--space-5);
    color: var(--color-on-action);
    background: var(--color-action);
    border: 1px solid var(--color-action);
    border-radius: var(--radius-control);
    font: 750 13px/1 var(--font-interface);
  }

  .prog-wall-btn:hover {
    background: var(--color-action-hover);
  }

  .progress-empty-state {
    margin-top: var(--space-8);
  }

  /* Progress: refined Verdigris prototype composition, backed by live data. */
  .prototype-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 34px 0 18px;
  }

  .prototype-stat-card {
    min-width: 0;
    padding: var(--space-5);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
  }

  .prototype-stat-label {
    margin: 0;
    color: var(--color-text-muted);
    font: 800 10px/1.2 var(--font-interface);
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .prototype-stat-value {
    display: block;
    margin-top: 11px;
    color: var(--color-text);
    font: 500 36px/1 var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  .prototype-stat-delta,
  .prototype-stat-summary {
    margin: 9px 0 0;
    color: var(--color-success);
    font: 700 11px/1.35 var(--font-interface);
  }

  .prototype-stat-card .prototype-stat-summary {
    position: static;
    width: auto;
    display: block;
    padding: 0;
    background: transparent;
    border: 0;
  }

  .prototype-stat-card .prototype-stat-summary strong {
    display: block;
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: normal;
  }

  .prototype-progress-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 18px;
  }

  .prototype-panel {
    min-width: 0;
    padding: var(--space-6);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
  }

  .prototype-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .prototype-panel-head h2 {
    margin: 0;
    color: var(--color-text);
    font-size: 22px;
    font-weight: 600;
  }

  .prototype-panel-head > span {
    color: var(--color-text-muted);
    font: 650 11px/1 var(--font-interface);
    white-space: nowrap;
  }

  .prototype-chart-wrap {
    height: 245px;
  }

  .prototype-data-details {
    margin-top: 18px;
  }

  .prototype-focus-list {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .prototype-focus-list li {
    border-bottom: 1px solid var(--color-rule);
  }

  .prototype-focus-list li:last-child {
    border-bottom: 0;
  }

  .prototype-focus-item {
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 7px 5px;
    color: var(--color-text);
    background: transparent;
    border: 0;
    border-radius: var(--radius-control);
    text-align: left;
  }

  .prototype-focus-item:hover {
    color: var(--color-on-hover);
    background: var(--color-hover);
  }

  .prototype-focus-item:hover .prototype-focus-copy small,
  .prototype-focus-item:hover .prototype-focus-count {
    color: inherit;
  }

  html.lecture-mode .prototype-focus-item:hover .prototype-focus-dot {
    background: var(--color-on-hover);
  }

  .prototype-focus-dot {
    width: 8px;
    height: 8px;
    background: var(--color-flag);
    border-radius: 50%;
  }

  .prototype-focus-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .prototype-focus-copy strong {
    overflow: hidden;
    font: 650 13px/1.3 var(--font-interface);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .prototype-focus-copy small,
  .prototype-focus-count {
    color: var(--color-text-muted);
    font: 650 10px/1.25 var(--font-interface);
  }

  .prototype-focus-count {
    white-space: nowrap;
  }

  .prototype-focus-empty {
    min-height: 220px;
    display: grid;
    place-items: center;
    padding: var(--space-6);
    color: var(--color-text-muted);
    border-bottom: 0;
    font: 650 12px/1.5 var(--font-interface);
    text-align: center;
  }

  .leaderboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(260px, 0.58fr);
    align-items: start;
    gap: 18px;
  }

  .leaderboard-board,
  .leaderboard-privacy {
    box-shadow: var(--shadow-soft);
  }

  .leaderboard-board-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
  }

  .leaderboard-kicker {
    margin: 0 0 5px;
    color: var(--color-definition-label);
    font: 800 10px/1.3 var(--font-interface);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .leaderboard-board-head h3,
  .leaderboard-privacy h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.015em;
  }

  .leaderboard-board-head > span {
    color: var(--color-text-muted);
    font: 650 11px/1.3 var(--font-interface);
    white-space: nowrap;
  }

  .leaderboard-you {
    min-height: 86px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3);
    color: var(--color-result-text);
    background: var(--color-result);
    border-left: 4px solid var(--color-result-accent);
    border-radius: var(--radius-control);
  }

  .leaderboard-you > div {
    min-width: 0;
    display: grid;
    gap: 5px;
  }

  .leaderboard-you > div:last-child {
    justify-items: end;
    text-align: right;
  }

  .leaderboard-you span {
    color: var(--color-result-muted);
    font: 700 9px/1.25 var(--font-interface);
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  .leaderboard-you strong {
    overflow: hidden;
    color: var(--color-result-text);
    font: 600 25px/1 var(--font-display);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .leaderboard-you > div:last-child strong {
    font-family: var(--font-interface);
    font-variant-numeric: tabular-nums;
  }

  .leaderboard-list {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .leaderboard-row {
    min-width: 0;
    min-height: 66px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) minmax(84px, auto);
    align-items: center;
    gap: var(--space-3);
    padding: 9px var(--space-2);
    color: var(--color-text);
    border-top: 1px solid var(--color-rule);
  }

  .leaderboard-row.is-current {
    background: var(--color-hover);
    box-shadow: inset 3px 0 0 var(--color-action);
  }

  html.lecture-mode .leaderboard-row.is-current {
    color: var(--color-text);
    background: var(--color-surface);
    box-shadow: inset 4px 0 0 var(--color-action);
  }

  .leaderboard-row.is-first {
    border-top-color: var(--color-result-accent);
  }

  .leaderboard-rank {
    color: var(--color-text-muted);
    font: 700 20px/1 var(--font-display);
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .leaderboard-row.is-first .leaderboard-rank {
    color: var(--color-definition-label);
  }

  .leaderboard-person {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .leaderboard-initials {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--color-text);
    background: var(--color-canvas);
    border: 1px solid var(--color-rule-strong);
    border-radius: 50%;
    font: 750 11px/1 var(--font-interface);
    letter-spacing: 0.04em;
  }

  .leaderboard-row.is-first .leaderboard-initials {
    border-color: var(--color-result-accent);
  }

  .leaderboard-person-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .leaderboard-person-copy > strong {
    overflow: hidden;
    font: 650 14px/1.25 var(--font-interface);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .leaderboard-row-meta {
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
  }

  .leaderboard-chip {
    padding: 4px 6px;
    color: var(--color-text-muted);
    background: var(--color-surface-subtle);
    border-radius: var(--radius-pill);
    font: 750 8px/1 var(--font-interface);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .leaderboard-score {
    display: grid;
    justify-items: end;
    gap: 4px;
    white-space: nowrap;
  }

  .leaderboard-score strong {
    font: 700 18px/1 var(--font-interface);
    font-variant-numeric: tabular-nums;
  }

  .leaderboard-score span {
    color: var(--color-text-muted);
    font: 700 8px/1 var(--font-interface);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .leaderboard-separator {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-2) var(--space-2);
    color: var(--color-text-muted);
    font: 750 9px/1 var(--font-interface);
    letter-spacing: 0.12em;
    list-style: none;
    text-transform: uppercase;
  }

  .leaderboard-separator::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--color-rule);
  }

  .leaderboard-status {
    min-height: 94px;
    display: grid;
    place-items: center;
    padding: var(--space-5);
    margin: 0;
    color: var(--color-text-muted);
    font: 650 12px/1.5 var(--font-interface);
    text-align: center;
  }

  .leaderboard-status.is-error {
    color: var(--color-warning);
  }

  .leaderboard-retry {
    min-height: var(--control-size);
    display: block;
    padding: 0 var(--space-5);
    margin: 0 auto;
    color: var(--color-on-action);
    background: var(--color-action);
    border: 1px solid var(--color-action);
    border-radius: var(--radius-control);
    font: 750 12px/1 var(--font-interface);
  }

  .leaderboard-retry:hover {
    background: var(--color-action-hover);
  }

  .leaderboard-privacy > p:not(.leaderboard-kicker, .leaderboard-privacy-detail, .leaderboard-privacy-status) {
    margin: var(--space-3) 0 var(--space-5);
    color: var(--color-text-muted);
    font: 600 13px/1.55 var(--font-interface);
  }

  .leaderboard-switch {
    position: relative;
    min-height: 68px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: 11px var(--space-3);
    color: var(--color-text);
    background: var(--color-canvas);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    cursor: pointer;
  }

  .leaderboard-switch-copy {
    min-width: 0;
    display: grid;
    gap: 4px;
  }

  .leaderboard-switch-copy strong {
    font: 700 12px/1.25 var(--font-interface);
  }

  .leaderboard-switch-copy small {
    color: var(--color-text-muted);
    font: 600 10px/1.35 var(--font-interface);
  }

  .leaderboard-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
  }

  .leaderboard-switch-track {
    width: 44px;
    height: 24px;
    display: block;
    padding: 2px;
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-pill);
    transition: background var(--duration-fast) var(--ease-out);
  }

  .leaderboard-switch-track > span {
    width: 18px;
    height: 18px;
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-rule-strong);
    border-radius: 50%;
    transition: transform var(--duration-fast) var(--ease-out);
  }

  .leaderboard-switch input:checked + .leaderboard-switch-track {
    background: var(--color-action);
    border-color: var(--color-action);
  }

  .leaderboard-switch input:checked + .leaderboard-switch-track > span {
    border-color: var(--color-on-action);
    transform: translateX(20px);
  }

  .leaderboard-switch input:focus-visible + .leaderboard-switch-track {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--color-focus-halo);
  }

  .leaderboard-switch:has(input:disabled) {
    cursor: wait;
    opacity: 0.68;
  }

  .leaderboard-privacy-detail,
  .leaderboard-privacy-status {
    margin: var(--space-3) 2px 0;
    color: var(--color-text-muted);
    font: 600 10px/1.45 var(--font-interface);
  }

  .leaderboard-privacy-status {
    min-height: 2.9em;
    color: var(--color-text);
  }

  .leaderboard-row.is-skeleton {
    pointer-events: none;
  }

  .leaderboard-row.is-skeleton > span {
    height: 13px;
    display: block;
    background: var(--color-surface-subtle);
    border-radius: var(--radius-pill);
  }

  .leaderboard-row.is-skeleton > span:first-child {
    width: 26px;
    justify-self: center;
  }

  .leaderboard-row.is-skeleton > span:last-child {
    width: 64px;
    justify-self: end;
  }

  .prog-timing-section.prototype-timing-panel {
    margin-top: 18px;
    scroll-margin-top: calc(var(--topbar-height) + var(--space-5));
  }

  .timing-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .timing-preview-card {
    min-width: 0;
    min-height: 76px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: 13px var(--space-4);
    color: var(--color-text);
    background: var(--color-canvas);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-control);
    text-decoration: none;
  }

  .timing-preview-card:hover {
    color: var(--color-on-hover);
    background: var(--color-hover);
    border-color: var(--color-rule-strong);
  }

  .timing-preview-card:hover .timing-preview-copy small,
  .timing-preview-card:hover .timing-preview-value {
    color: inherit;
  }

  .timing-preview-copy {
    min-width: 0;
    display: grid;
    gap: 5px;
  }

  .timing-preview-copy strong {
    overflow: hidden;
    font: 650 13px/1.25 var(--font-interface);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .timing-preview-copy small {
    overflow: hidden;
    color: var(--color-text-muted);
    font: 600 10px/1.3 var(--font-interface);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .timing-preview-value {
    color: var(--color-text);
    font: 650 21px/1 var(--font-interface);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  .timing-preview-empty {
    min-height: 76px;
    grid-column: 1 / -1;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    color: var(--color-text-muted);
    background: var(--color-canvas);
    border: 1px dashed var(--color-rule-strong);
    border-radius: var(--radius-control);
    font: 650 12px/1.4 var(--font-interface);
    text-align: center;
  }

  .timing-history-details {
    margin-top: 18px;
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-rule);
  }

  .timing-history-details > summary {
    min-height: var(--control-size);
    display: flex;
    align-items: center;
    width: max-content;
    max-width: 100%;
    padding: 0 var(--space-2);
    color: var(--color-text-muted);
    cursor: pointer;
    font: 750 12px/1 var(--font-interface);
  }

  .timing-history-details .timer-stat-grid {
    margin-top: var(--space-3);
  }

  .paper-source-panel {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-8);
    overflow: hidden;
    padding: 25px 27px 24px 30px;
    margin: 0 0 var(--space-12);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
  }

  .paper-source-panel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--color-result-accent);
  }

  .paper-source-copy {
    min-width: 0;
  }

  .paper-source-kicker {
    display: block;
    margin-bottom: 6px;
    color: var(--color-definition-label);
    font: 800 10px/1.2 var(--font-interface);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .paper-source-title,
  .paper-source-meta {
    margin: 0;
  }

  .paper-source-title {
    color: var(--color-text);
    font: 600 23px/1.2 var(--font-display);
    letter-spacing: -0.015em;
  }

  .paper-source-meta {
    margin-top: 4px;
    color: var(--color-text-muted);
    font: 600 13px/1.45 var(--font-interface);
  }

  .paper-source-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
  }

  .paper-source-action {
    min-height: var(--control-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    color: var(--color-action);
    background: var(--color-surface);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    font: 750 13px/1 var(--font-interface);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out),
      background var(--duration-fast) var(--ease-out),
      border-color var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
  }

  .paper-source-action:hover {
    color: var(--color-on-hover);
    background: var(--color-hover);
    border-color: var(--color-action);
    transform: translateY(-1px);
  }

  .paper-source-action-primary,
  .paper-source-action-primary:hover {
    color: var(--color-on-action);
    background: var(--color-action);
    border-color: var(--color-action);
  }

  .paper-source-action-primary:hover {
    background: var(--color-action-hover);
  }

  .paper-source-action svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .toc {
    padding: 26px 30px;
    margin: var(--space-10) 0 var(--space-12);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
  }

  body.v-shell-ready .toc {
    display: none;
  }

  .toc h3 {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
    font: 800 11px/1.3 var(--font-interface);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .toc ol {
    columns: 2;
    column-gap: var(--space-8);
    margin: 0;
    padding-left: var(--space-5);
  }

  .toc li {
    break-inside: avoid;
    margin: 5px 0;
  }

  .toc a {
    min-height: var(--control-size);
    display: inline-flex;
    align-items: center;
    color: var(--color-text);
  }

  .page > h2 {
    position: relative;
    padding-top: 19px;
  }

  .page > h2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--color-action) 0 38px, var(--color-rule) 38px 100%);
  }

  :where(.definition, .lemma, .corollary) {
    position: relative;
    padding: var(--definition-padding);
    margin: var(--space-6) 0;
    color: var(--color-text);
    background: var(--color-surface);
    border: var(--definition-border-width) solid var(--color-rule);
    border-left: calc(var(--definition-border-width) + 4px) solid var(--color-definition-accent);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
  }

  :where(.theorem, .definition, .lemma, .corollary) {
    scroll-margin-top: calc(var(--topbar-height) + var(--space-6));
  }

  .lemma {
    --color-definition-accent: var(--color-result-accent);
  }

  .corollary {
    --color-definition-accent: var(--color-action);
  }

  :where(.definition-label, .lemma-label, .corollary-label) {
    display: var(--result-label-display);
    margin: 0 0 var(--space-3);
    color: var(--color-definition-label);
    font: 800 10px/1.3 var(--font-interface);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  :where(.definition, .lemma, .corollary) > p:first-of-type {
    display: var(--result-first-copy-display);
  }

  :where(.definition, .lemma, .corollary) p,
  :where(.definition, .lemma, .corollary) li {
    font-size: 18px;
  }

  .theorem {
    position: relative;
    margin: 52px 0;
    padding: var(--result-padding-block) var(--result-padding-inline);
    overflow: visible;
    color: var(--color-result-text);
    background: var(--color-result);
    border: var(--result-border-width) solid var(--color-rule);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-result);
  }

  .theorem::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    right: 22px;
    width: 44px;
    height: 4px;
    display: block;
    background: var(--color-result-accent);
  }

  .theorem.has-result-layout {
    padding: 0;
  }

  .result-statement {
    padding: var(--result-padding-block) var(--result-padding-inline);
    color: var(--color-result-text);
    background: var(--color-result);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }

  .result-statement:last-child {
    border-radius: var(--radius-card);
  }

  .theorem-label {
    display: var(--result-label-display);
    margin: 0 0 var(--space-3);
    color: var(--color-result-muted);
    font: 800 10px/1.3 var(--font-interface);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .theorem-name {
    display: var(--result-name-display);
    margin: 0 0 10px;
    color: var(--color-result-text);
    font: 600 29px/1.12 var(--font-display);
    letter-spacing: -0.015em;
  }

  :where(.definition, .lemma, .corollary) > .theorem-name {
    color: var(--color-text);
  }

  .result-statement > p:first-of-type:not(.theorem-name) {
    display: var(--result-first-copy-display);
  }

  .result-statement > .theorem-name + p {
    display: var(--result-first-copy-display);
  }

  .theorem > p,
  .theorem > ul,
  .theorem > ol,
  .result-statement > p,
  .result-statement > ul,
  .result-statement > ol,
  .result-statement li {
    color: var(--color-result-text);
    font-size: 18px;
  }

  .theorem .proof {
    margin: var(--space-6) calc(0px - var(--result-padding-inline)) calc(0px - var(--result-padding-block));
  }

  .theorem.has-result-layout .proof {
    margin: 0;
  }

  .proof {
    position: relative;
    padding: 34px 48px 28px;
    color: var(--color-text);
    background: var(--color-proof);
    border-top: 1px solid var(--color-rule);
    font: 400 17px/1.65 var(--font-reading);
  }

  .proof:last-child {
    border-radius: 0 0 var(--radius-card) var(--radius-card);
  }

  .proof::before {
    content: "Proof";
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 19px;
    color: var(--color-proof-label);
    font-style: italic;
    font-weight: 600;
  }

  .proof::after {
    content: "";
    position: absolute;
    top: 47px;
    left: 96px;
    right: 48px;
    height: 1px;
    background: var(--color-rule);
  }

  .proof p,
  .proof li {
    color: var(--color-text);
  }

  .proof p:first-of-type {
    display: block;
  }

  .lemma .proof,
  .corollary .proof {
    margin: var(--space-5) 0 0;
    padding: 24px 0 0;
    background: transparent;
    border-radius: 0;
  }

  .lemma .proof::after,
  .corollary .proof::after {
    top: 37px;
    right: 0;
    left: 84px;
  }

  .qed {
    float: right;
    width: 10px;
    height: 10px;
    display: inline-block;
    margin: 9px 0 0 var(--space-2);
    color: transparent;
    border: 1.5px solid var(--color-text);
  }

  .qed::after {
    content: "";
  }

  .exam-hits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: var(--space-5) 0 0;
    padding-top: var(--space-4);
    color: var(--color-text);
    border-top: 1px solid var(--color-rule);
    font: 700 11px/1.2 var(--font-interface);
  }

  .theorem > .exam-hits {
    margin: var(--space-5) calc(0px - var(--result-padding-inline)) calc(0px - var(--result-padding-block));
    padding: var(--space-4) var(--result-padding-inline) var(--result-padding-block);
    background: var(--color-proof);
  }

  .theorem.has-result-layout > .exam-hits {
    margin: 0;
    padding: var(--space-4) 48px 26px;
  }

  .theorem.has-result-layout > .exam-hits + .exam-hits {
    padding-top: 0;
    border-top: 0;
  }

  .theorem > .exam-hits:last-child {
    border-radius: 0 0 var(--radius-card) var(--radius-card);
  }

  .exam-hits .label {
    margin-right: 3px;
    color: var(--color-text-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .exam-hits .hit {
    display: inline-flex;
    align-items: center;
    padding: 7px 9px;
    color: var(--color-action);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-rule);
    border-radius: calc(var(--radius-control) - 2px);
  }

  .exam-hits a.hit-link {
    min-height: var(--control-size);
    text-decoration: none;
  }

  .exam-hits a.hit-link:hover {
    color: var(--color-on-action);
    background: var(--color-action);
  }

  .source-warning {
    padding: var(--space-4);
    margin: var(--space-4) 0;
    color: var(--color-warning);
    background: var(--color-warning-surface);
    border: 1px solid var(--color-warning);
    border-left-width: 4px;
    border-radius: var(--radius-control);
    font: 600 14px/1.5 var(--font-interface);
  }

  .source-warning p {
    margin: var(--space-1) 0 0;
    color: inherit;
    font: inherit;
  }

  /* Question pages use the same paper language without borrowing the dark
     theorem-statement treatment. Controls are injected by sidebar.js. */
  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem {
    margin: var(--space-8) 0 var(--space-10);
    padding: 29px 32px 34px;
    overflow: visible;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem::after {
    top: 0;
    right: auto;
    left: 0;
    width: 4px;
    height: 64px;
    background: var(--color-result-accent);
    border-radius: var(--radius-card) 0 0;
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem .theorem-label {
    min-height: var(--control-size);
    display: flex;
    align-items: center;
    margin: 0;
    padding-right: 160px;
    color: var(--color-definition-label);
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem .theorem-label-link {
    min-height: var(--control-size);
    display: inline-flex;
    align-items: center;
    color: inherit;
    border-bottom: 1px dashed transparent;
    text-decoration: none;
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem .theorem-label-link:hover {
    border-bottom-color: currentColor;
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem .theorem-name {
    margin: 4px 0 var(--space-6);
    padding: 0 160px var(--space-5) 0;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-rule);
    font-size: 25px;
  }

  body[data-page-kind="paper"] .theorem .theorem-label {
    margin: 0 0 var(--space-6);
    padding: 0 160px var(--space-5) 0;
    border-bottom: 1px solid var(--color-rule);
    font-size: 13px;
    letter-spacing: 0.12em;
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem > p,
  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem > ul,
  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem > ol,
  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem > ul li,
  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem > ol li {
    color: var(--color-text);
    font-size: 18px;
  }

  /* Part A papers keep each tagged subpart addressable without turning the
     exam into a stack of nested cards. The wrappers stay visually quiet. */
  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem :is(.pp-question-preamble, .pp-question-part) {
    display: block;
    scroll-margin-top: calc(var(--topbar-height) + var(--space-5));
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem :is(.pp-question-preamble, .pp-question-part) + :is(.pp-question-preamble, .pp-question-part) {
    margin-top: var(--space-3);
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem :is(.pp-question-preamble, .pp-question-part) > :is(p, ul, ol),
  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem :is(.pp-question-preamble, .pp-question-part) :is(ul, ol) li {
    color: var(--color-text);
    font-size: 18px;
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem :is(.pp-question-preamble, .pp-question-part) > :first-child {
    margin-top: 0;
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem :is(.pp-question-preamble, .pp-question-part) > :last-child {
    margin-bottom: 0;
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem .pa-figure {
    width: auto;
    max-width: min(520px, 100%);
    height: auto;
    display: block;
    margin: var(--space-5) auto;
    background: var(--palette-white);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-control);
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem .pa-figure.pa-figure-wide {
    max-width: min(780px, 100%);
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem p.pa-figure-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: var(--space-4);
    margin: var(--space-5) 0;
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem p.pa-figure-row .pa-figure {
    flex: 1 1 260px;
    max-width: min(360px, 100%);
    margin: 0;
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem pre {
    max-width: 100%;
    overflow-x: auto;
    padding: var(--space-4);
    margin: var(--space-4) 0;
    color: var(--color-text);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-control);
    font: 500 13px/1.6 var(--font-mono);
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--color-rule-strong) transparent;
    scrollbar-width: thin;
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem pre code {
    color: inherit;
    font: inherit;
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem :not(pre) > code {
    padding: 1px 4px;
    color: var(--color-text);
    background: var(--color-surface-subtle);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 0.86em;
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem > .exam-hits {
    margin: var(--space-6) 0 0;
    padding: var(--space-4) 0 0;
    color: var(--color-text);
    background: transparent;
    border-top: 1px solid var(--color-rule);
    border-radius: 0;
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem .exam-hits .hit {
    color: var(--color-action);
    background: var(--color-surface-subtle);
    border-color: var(--color-rule);
  }

  .empty-note {
    padding: var(--space-4) 0 var(--space-8);
    color: var(--color-text-muted);
    font-style: italic;
  }

  .figure-note,
  .split-note {
    padding: 9px var(--space-3);
    margin: var(--space-3) 0;
    color: var(--color-text-muted);
    background: var(--color-surface-subtle);
    border-left: 3px solid var(--color-action);
    border-radius: calc(var(--radius-control) - 2px);
    font: 650 12px/1.5 var(--font-interface);
  }

  .split-note {
    border-left-color: var(--color-result-accent);
  }

  .split-note .label {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-definition-label);
    font: 800 10px/1.25 var(--font-interface);
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .exam-figure {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: var(--space-5) auto;
    background: var(--palette-white);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-control);
  }

  .exam-figure-caption {
    margin: calc(0px - var(--space-3)) 0 var(--space-6);
    color: var(--color-text-muted);
    font: italic 600 12px/1.45 var(--font-interface);
    text-align: center;
  }

  .exam-table-scroll {
    max-width: 100%;
    margin: var(--space-5) 0 var(--space-6);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--color-rule-strong) transparent;
    scrollbar-width: thin;
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem table {
    width: auto;
    max-width: none;
    display: table;
    overflow: visible;
    margin: 0 auto;
    color: var(--color-text);
    background: transparent;
    border: 0;
    border-top: 2px solid var(--color-text);
    border-bottom: 2px solid var(--color-text);
    border-collapse: collapse;
    font: 400 16px/1.45 var(--font-reading);
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem th,
  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem td {
    min-width: 0;
    padding: 8px 17px;
    color: var(--color-text);
    background: transparent;
    border: 0;
    text-align: center;
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem thead th {
    border-bottom: 1px solid var(--color-text);
    font-weight: 600;
    letter-spacing: 0;
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem > .exam-data-block {
    max-width: 100%;
    overflow-x: auto;
    padding: var(--space-3) var(--space-4);
    margin-left: 0;
    color: var(--color-text);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-control);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.65;
    white-space: nowrap;
  }

  .off-syllabus-banner {
    padding: var(--space-5) var(--space-6);
    margin: var(--space-8) 0 var(--space-6);
    color: var(--color-text);
    background: var(--color-warning-surface);
    border: 1px solid var(--color-warning);
    border-left-width: 4px;
    border-radius: var(--radius-card);
  }

  .off-syllabus-banner .label {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-warning);
    font: 800 10px/1.25 var(--font-interface);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .off-syllabus-banner p {
    margin: var(--space-1) 0;
    color: var(--color-text);
    font: 600 14px/1.55 var(--font-interface);
  }

  .theorem.off-syllabus::after {
    background: var(--color-warning);
  }

  .theorem.off-syllabus .theorem-label {
    color: var(--color-warning);
  }

  .revision-guide-card {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-6);
    margin: 28px 0 38px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-left: 4px solid var(--color-action);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-soft);
  }

  .revision-guide-mark {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    color: var(--color-action);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-rule-strong);
    border-radius: var(--radius-control);
  }

  .revision-guide-mark svg,
  .revision-guide-open svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .revision-guide-copy {
    min-width: 0;
  }

  .revision-guide-kicker {
    margin: 0 0 5px;
    color: var(--color-definition-label);
    font: 800 10px/1.25 var(--font-interface);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .revision-guide-title {
    margin: 0 0 var(--space-2);
    font-size: 27px;
    font-weight: 550;
  }

  .revision-guide-copy > p:not(.revision-guide-kicker) {
    max-width: 680px;
    margin: 0;
    color: var(--color-text-muted);
    font: 600 13px/1.55 var(--font-interface);
  }

  .revision-guide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
  }

  .revision-guide-meta span {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    color: var(--color-text-muted);
    background: var(--color-canvas);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-pill);
    font: 700 10px/1 var(--font-interface);
  }

  .revision-guide-open {
    min-height: var(--control-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    color: var(--color-on-action);
    background: var(--color-action);
    border: 1px solid var(--color-action);
    border-radius: var(--radius-control);
    font: 750 12px/1 var(--font-interface);
    text-decoration: none;
    white-space: nowrap;
  }

  .revision-guide-open:hover {
    color: var(--color-on-action);
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
  }

  .q-actions {
    position: absolute;
    z-index: 4;
    top: 20px;
    right: 20px;
    display: flex;
    gap: var(--space-2);
  }

  .q-action {
    width: var(--control-size);
    height: var(--control-size);
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: var(--color-text-muted);
    background: var(--color-surface-subtle);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    transition: color var(--duration-fast) var(--ease-out),
      background var(--duration-fast) var(--ease-out),
      border-color var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
    touch-action: manipulation;
  }

  .q-action:hover {
    color: var(--color-action);
    background: var(--color-surface);
    border-color: var(--color-action);
    transform: translateY(-1px);
  }

  .q-action svg,
  .q-timer-control svg,
  .q-timer-delete svg {
    width: 18px;
    height: 18px;
    color: inherit;
    stroke: currentColor;
  }

  .q-action.active.q-done {
    color: var(--color-on-action);
    background: var(--color-success);
    border-color: var(--color-success);
  }

  .q-action.active.q-flag {
    color: var(--color-on-action);
    background: var(--color-flag);
    border-color: var(--color-flag);
  }

  .q-action.q-timer-toggle.active,
  .q-action.q-timer-toggle.running {
    color: var(--color-on-action);
    background: var(--color-action);
    border-color: var(--color-action);
  }

  .q-action.q-timer-toggle.has-history:not(.active):not(.running) {
    color: var(--color-action);
    border-color: var(--color-action);
  }

  :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem > .q-timer-panel {
    margin: 0 0 var(--space-6);
    padding: 18px 20px 20px;
    color: var(--color-timer-text);
    background: var(--color-timer-panel);
    border: 0;
    border-top: 1px solid var(--color-nav-rule);
    border-radius: var(--radius-card);
  }

  .q-timer-panel[hidden] {
    display: none;
  }

  .q-timer-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
  }

  .q-timer-display {
    min-width: 96px;
    color: var(--color-timer-text);
    font: 650 29px/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  .q-timer-display.is-running {
    color: var(--color-timer-finish);
  }

  .q-timer-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
  }

  .q-timer-control {
    min-width: var(--control-size);
    min-height: var(--control-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 13px;
    color: var(--color-timer-text);
    background: transparent;
    border: 1px solid var(--color-nav-control-border);
    border-radius: var(--radius-control);
    font: 750 12px/1 var(--font-interface);
    transition: color var(--duration-fast) var(--ease-out),
      background var(--duration-fast) var(--ease-out),
      border-color var(--duration-fast) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
  }

  .q-timer-control:hover:not(:disabled) {
    color: var(--color-on-timer-control);
    background: var(--color-timer-control);
    border-color: var(--color-timer-muted);
    transform: translateY(-1px);
  }

  .q-timer-run {
    color: var(--color-on-timer-control);
    background: var(--color-timer-control);
    border-color: var(--color-timer-control);
  }

  .q-timer-run:hover:not(:disabled) {
    color: var(--color-on-timer-control);
    background: var(--color-timer-control);
  }

  .q-timer-finish {
    min-width: 154px;
    color: var(--color-on-timer-finish);
    background: var(--color-timer-finish);
    border-color: var(--color-timer-finish);
  }

  .q-timer-finish:hover:not(:disabled) {
    color: var(--color-on-timer-finish);
    background: var(--color-timer-finish);
    border-color: var(--color-timer-finish);
  }

  .q-timer-control:disabled,
  .q-timer-control.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
  }

  .q-timer-history {
    margin-top: var(--space-3);
    color: var(--color-timer-muted);
    font: 650 12px/1.45 var(--font-interface);
  }

  .q-timer-attempts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }

  .q-timer-attempts > span {
    min-height: var(--control-size);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding-left: 11px;
    color: var(--color-timer-text);
    background: transparent;
    border: 1px solid var(--color-nav-rule);
    border-radius: var(--radius-control);
    font: 650 12px/1 var(--font-mono);
  }

  .q-timer-delete {
    width: var(--control-size);
    height: var(--control-size);
    display: inline-grid;
    place-items: center;
    padding: 0;
    color: var(--color-timer-muted);
    background: transparent;
    border: 0;
    border-left: 1px solid var(--color-nav-rule);
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
  }

  .q-timer-delete:hover {
    color: var(--color-on-timer-control);
    background: var(--color-timer-control);
  }

  .resit-render {
    width: 100%;
    max-width: 100%;
    display: block;
    margin: var(--space-3) 0 var(--space-1);
    overflow-x: auto;
  }

  .resit-render-page {
    width: 100%;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto var(--space-4);
    object-fit: contain;
  }

  html.lumina-mode .resit-render-page,
  html.aurora-mode .resit-render-page {
    filter: invert(1) brightness(1.12) contrast(1.08);
  }

  html.lecture-mode .resit-render-page {
    filter: none;
  }

  .insight {
    padding: 26px 30px;
    margin: var(--space-8) 0;
    color: var(--color-result-text);
    background: var(--color-result);
    border-left: 4px solid var(--color-result-accent);
    border-radius: var(--radius-card);
  }

  .insight-label {
    color: var(--color-result-muted);
    font: 800 10px/1.3 var(--font-interface);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .insight p,
  .insight li {
    color: var(--color-result-text);
  }

  .auth-menu {
    position: fixed;
    z-index: 100;
    min-width: 190px;
    display: grid;
    padding: 6px;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-control);
    box-shadow: var(--shadow-raised);
    font-family: var(--font-interface);
  }

  .auth-menu-item {
    min-height: var(--control-size);
    padding: 0 11px;
    color: var(--color-text);
    background: transparent;
    border: 0;
    border-radius: calc(var(--radius-control) - 2px);
    text-align: left;
    font-size: 13px;
    font-weight: 650;
  }

  .auth-menu-item:hover {
    color: var(--color-on-hover);
    background: var(--color-hover);
  }

  .auth-menu-item.danger {
    color: var(--color-warning);
  }

  .auth-menu-item.danger:hover {
    color: var(--color-on-hover);
  }

  .auth-modal,
  .module-settings-modal {
    position: fixed;
    z-index: 200;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--space-5);
    overflow: auto;
    background: var(--color-overlay);
    font-family: var(--font-interface);
  }

  .auth-card,
  .module-settings-card {
    width: min(100%, 520px);
    max-height: min(760px, calc(100dvh - 40px));
    overflow: auto;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-shell);
    box-shadow: var(--shadow-raised);
  }

  .module-settings-card {
    width: min(100%, 680px);
  }

  .auth-head,
  .module-settings-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--color-rule);
  }

  .auth-tabs {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-1);
    background: var(--color-surface-subtle);
    border-radius: var(--radius-control);
  }

  .auth-tab {
    min-height: var(--control-size);
    padding: 0 var(--space-4);
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: calc(var(--radius-control) - 2px);
    font-size: 13px;
    font-weight: 750;
  }

  .auth-tab.active {
    color: var(--color-on-selected);
    background: var(--color-selected);
  }

  .auth-title,
  .module-settings-head h2 {
    margin: 0;
    font: 600 26px/1.15 var(--font-display);
  }

  .module-settings-head h2::before {
    display: none;
  }

  .module-settings-close,
  .auth-close {
    color: var(--color-text);
    border-color: var(--color-control-border);
  }

  .auth-benefits {
    margin: var(--space-6) var(--space-6) 0;
    padding: var(--space-4);
    color: var(--color-text-muted);
    background: var(--color-surface-subtle);
    border-left: 3px solid var(--color-action);
    border-radius: var(--radius-control);
    font-size: 13px;
  }

  .auth-benefits p {
    margin: 0;
  }

  .auth-form,
  .auth-message {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6);
  }

  .auth-field {
    display: grid;
    gap: 7px;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 750;
  }

  .auth-field input {
    width: 100%;
    min-height: 46px;
    padding: 0 12px;
    color: var(--color-text);
    background: var(--color-canvas);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    font-size: 16px;
  }

  .auth-submit,
  .module-settings-done {
    min-height: var(--control-size);
    padding: 0 var(--space-4);
    color: var(--color-on-action);
    background: var(--color-action);
    border: 1px solid var(--color-action);
    border-radius: var(--radius-control);
    font-size: 13px;
    font-weight: 750;
  }

  .auth-submit:hover,
  .module-settings-done:hover {
    background: var(--color-action-hover);
  }

  .auth-submit:disabled {
    cursor: wait;
    border-style: dashed;
  }

  .auth-link {
    min-height: var(--control-size);
    color: var(--color-action);
    background: transparent;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  .auth-error {
    padding: var(--space-3);
    color: var(--color-warning);
    background: var(--color-warning-surface);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-control);
    font-size: 13px;
  }

  .module-settings-toolbar,
  .module-settings-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-rule);
  }

  .module-settings-foot {
    justify-content: flex-end;
    border-top: 1px solid var(--color-rule);
    border-bottom: 0;
  }

  .module-settings-count,
  .module-settings-tool {
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 700;
  }

  .module-settings-tools {
    display: flex;
    gap: var(--space-2);
  }

  .module-settings-tool {
    min-height: var(--control-size);
    padding: 0 var(--space-3);
    background: transparent;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
  }

  .module-settings-tool:hover {
    color: var(--color-on-hover);
    background: var(--color-hover);
  }

  .module-settings-list {
    max-height: min(520px, 55vh);
    overflow: auto;
    padding: var(--space-4) var(--space-6);
  }

  .module-settings-group {
    padding: var(--space-4) 0;
  }

  .module-settings-group + .module-settings-group {
    border-top: 1px solid var(--color-rule);
  }

  .module-settings-group-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 750;
  }

  .module-settings-group-head .ptag {
    width: auto;
    padding: 5px 7px;
    color: var(--color-on-selected);
    background: var(--color-selected);
    border-radius: calc(var(--radius-control) - 2px);
  }

  .module-pref-row {
    min-height: 52px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--space-3);
    padding: 6px 8px;
    border-radius: var(--radius-control);
    cursor: pointer;
  }

  .module-pref-row:hover {
    color: var(--color-on-hover);
    background: var(--color-hover);
  }

  .module-pref-check {
    width: 19px;
    height: 19px;
    accent-color: var(--color-action);
  }

  .module-pref-switch {
    display: none;
  }

  .module-pref-title {
    font: 600 14px/1.3 var(--font-interface);
  }

  .v-context-dialog {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(88vw, 410px);
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0 auto 0 0;
    padding: 0;
    color: var(--color-nav-text);
    background: var(--color-context-nav);
    border: 0;
    border-right: 1px solid var(--color-nav-rule);
    font-family: var(--font-interface);
  }

  .v-context-dialog:not([open]) {
    display: none;
  }

  .v-context-dialog::backdrop {
    background: var(--color-overlay);
  }

  .v-dialog-inner {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--space-5);
  }

  .v-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-nav-rule);
  }

  .v-dialog-title {
    margin: 5px 0 0;
    color: var(--color-nav-text);
    font: 600 24px/1.16 var(--font-display);
  }

  .v-dialog-scroll {
    min-height: 0;
    flex: 1;
    overflow-y: auto;
  }

  .v-dialog-scroll .v-context-primary,
  .v-dialog-scroll .v-context-sections {
    margin-top: var(--space-6);
  }

  .v-dialog-utilities {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-nav-rule);
  }

  .v-dialog-account {
    min-height: var(--control-size);
    padding: 0 var(--space-4);
    color: var(--color-nav-text);
    background: transparent;
    border: 1px solid var(--color-nav-control-border);
    border-radius: var(--radius-control);
    font: 700 12px/1 var(--font-interface);
  }

  .v-dialog-account:hover {
    color: var(--color-nav-on-hover);
    background: var(--color-nav-hover);
  }

  /* Flashcards: one live deck workspace, followed by focused recall. */
  body[data-page-kind="flashcards"] .page {
    max-width: 1200px;
  }

  .flashcards-hero {
    min-height: 250px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: end;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
  }

  .flashcards-hero-copy {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
  }

  .flashcards-lede {
    max-width: 690px;
    margin: var(--space-5) 0 0;
    color: var(--color-text-muted);
    font-size: 19px;
    line-height: 1.55;
  }

  .fc-deck-workspace,
  .fc-study,
  .fc-browser-section {
    scroll-margin-top: calc(var(--topbar-height) + var(--space-5));
  }

  .fc-deck-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
    gap: 18px;
    margin-top: 34px;
  }

  .fc-deck-panel,
  .fc-stat,
  .fc-card,
  .fc-empty {
    min-width: 0;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
  }

  .fc-deck-panel {
    min-height: 272px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.68fr);
    grid-template-rows: 1fr auto;
    align-items: end;
    gap: var(--space-5) var(--space-8);
    padding: 28px;
    border-top: 3px solid var(--color-definition-accent);
  }

  .fc-deck-identity {
    min-width: 0;
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-5);
  }

  .fc-deck-mark {
    width: 68px;
    height: 68px;
    display: grid;
    place-items: center;
    padding: 6px;
    color: var(--color-action);
    background: var(--color-canvas);
    border: 1px solid currentColor;
    border-radius: 50%;
    font: 800 14px/1 var(--font-interface);
    letter-spacing: 0.02em;
    text-align: center;
  }

  .fc-deck-copy {
    min-width: 0;
  }

  .fc-kicker {
    margin: 0 0 7px;
    color: var(--color-definition-label);
    font: 800 10px/1.3 var(--font-interface);
    letter-spacing: 0.15em;
    text-transform: uppercase;
  }

  .fc-deck-copy h2,
  .fc-study-head h2,
  .fc-section-head h2 {
    margin: 0;
  }

  .fc-deck-copy h2 {
    overflow-wrap: anywhere;
    font-size: 30px;
    font-weight: 550;
  }

  .fc-deck-summary,
  .fc-count {
    margin: 9px 0 0;
    color: var(--color-text-muted);
    font: 650 12px/1.45 var(--font-interface);
    font-variant-numeric: tabular-nums;
  }

  .fc-deck-field,
  .fc-custom-deck-tools label,
  .fc-browser-controls label {
    min-width: 0;
    display: grid;
    gap: 7px;
    color: var(--color-text-muted);
    font: 800 10px/1.2 var(--font-interface);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .fc-deck-field select,
  .fc-custom-deck-tools input,
  .fc-browser-controls select,
  .fc-browser-controls input[type="search"] {
    width: 100%;
    min-height: var(--control-size);
    padding: 0 38px 0 12px;
    color: var(--color-text);
    background: var(--color-canvas);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    font: 650 13px/1 var(--font-interface);
    letter-spacing: normal;
    text-transform: none;
  }

  .fc-custom-deck-tools input,
  .fc-browser-controls input[type="search"] {
    padding-right: 12px;
    cursor: text;
  }

  .fc-custom-deck-disclosure {
    grid-column: 1 / -1;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-rule);
    font-family: var(--font-interface);
  }

  .fc-custom-deck-disclosure summary,
  .fc-maintenance-disclosure summary {
    min-height: var(--control-size);
    display: flex;
    align-items: center;
    width: max-content;
    padding: 0 var(--space-3);
    color: var(--color-text-muted);
    background: transparent;
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    cursor: pointer;
    font: 750 12px/1 var(--font-interface);
    list-style-position: inside;
  }

  .fc-custom-deck-disclosure summary:hover,
  .fc-maintenance-disclosure summary:hover {
    color: var(--color-on-hover);
    background: var(--color-hover);
  }

  .fc-custom-deck-tools {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) auto auto;
    align-items: end;
    gap: var(--space-2);
    padding-top: var(--space-4);
  }

  .fc-overview {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
  }

  .fc-stat {
    min-height: 129px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-5);
  }

  .fc-stat-due {
    border-top: 3px solid var(--color-action);
  }

  .fc-stat-label {
    order: 1;
    color: var(--color-text-muted);
    font: 800 10px/1.25 var(--font-interface);
    letter-spacing: 0.13em;
    text-transform: uppercase;
  }

  .fc-stat-num {
    order: 2;
    margin: 11px 0 0;
    color: var(--color-text);
    font: 500 36px/1 var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  .fc-study,
  .fc-browser-section {
    margin-top: var(--space-16);
  }

  .fc-study-head,
  .fc-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-8);
    margin-bottom: var(--space-6);
  }

  .fc-study-head > div:first-child,
  .fc-section-head > div:first-child {
    min-width: 0;
  }

  .fc-study-head h2,
  .fc-section-head h2 {
    font-size: clamp(28px, 3.4vw, 42px);
  }

  .fc-section-note {
    max-width: 560px;
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font: 600 13px/1.5 var(--font-interface);
  }

  .fc-study-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    font-family: var(--font-interface);
  }

  .fc-order-toggle {
    min-height: var(--control-size);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    background: var(--color-surface);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
  }

  .fc-order-btn {
    min-height: var(--control-size);
    padding: 0 var(--space-3);
    color: var(--color-text-muted);
    background: transparent;
    border: 0;
    border-radius: calc(var(--radius-control) - 2px);
    font: 800 10px/1 var(--font-interface);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .fc-order-btn:hover {
    color: var(--color-on-hover);
    background: var(--color-hover);
  }

  .fc-order-btn[aria-pressed="true"] {
    color: var(--color-on-selected);
    background: var(--color-selected);
  }

  .fc-maintenance-disclosure {
    position: relative;
  }

  .fc-maintenance-actions {
    position: absolute;
    z-index: 6;
    top: calc(100% + 7px);
    right: 0;
    min-width: 210px;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-raised);
  }

  .fc-primary-btn,
  .fc-secondary-btn,
  .fc-rate,
  .fc-row-deck-btn {
    min-height: var(--control-size);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    cursor: pointer;
    font: 750 12px/1 var(--font-interface);
  }

  .fc-primary-btn {
    color: var(--color-on-action);
    background: var(--color-action);
    border-color: var(--color-action);
  }

  .fc-primary-btn:hover {
    background: var(--color-action-hover);
    border-color: var(--color-action-hover);
  }

  .fc-secondary-btn,
  .fc-row-deck-btn {
    color: var(--color-text);
    background: var(--color-canvas);
  }

  .fc-secondary-btn:hover,
  .fc-row-deck-btn:hover {
    color: var(--color-on-hover);
    background: var(--color-hover);
    border-color: var(--color-rule-strong);
  }

  .fc-secondary-btn.danger:hover {
    color: var(--color-warning);
    background: var(--color-warning-surface);
    border-color: var(--color-warning);
  }

  .fc-secondary-btn:disabled {
    cursor: default;
    opacity: 0.48;
  }

  .fc-card {
    position: relative;
    min-height: 390px;
    padding: 32px;
    border-top: 3px solid var(--color-action);
    box-shadow: var(--shadow-soft);
  }

  .fc-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    color: var(--color-text-muted);
    font: 650 11px/1.25 var(--font-interface);
  }

  .fc-card-meta span:not(.ql-paper) {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    background: var(--color-canvas);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-pill);
  }

  .fc-card-meta .paper-M1,
  .fc-row.paper-M1 { --paper-color: var(--p1); }
  .fc-card-meta .paper-M2,
  .fc-row.paper-M2 { --paper-color: var(--p2); }
  .fc-card-meta .paper-M3,
  .fc-row.paper-M3 { --paper-color: var(--p3); }
  .fc-card-meta .paper-M4,
  .fc-row.paper-M4 { --paper-color: var(--p4); }
  .fc-card-meta .paper-M5,
  .fc-row.paper-M5 { --paper-color: var(--p5); }

  .fc-card-face {
    min-width: 0;
  }

  .fc-card-face + .fc-card-face {
    padding-top: var(--space-6);
    margin-top: var(--space-8);
    border-top: 1px solid var(--color-rule);
  }

  .fc-face-label {
    margin: 0 0 var(--space-3);
    color: var(--color-definition-label);
    font: 800 10px/1.2 var(--font-interface);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .fc-front {
    max-width: 920px;
    margin: 0;
    overflow-wrap: anywhere;
    font-size: clamp(30px, 4vw, 44px);
    font-weight: 520;
    line-height: 1.15;
    text-wrap: pretty;
  }

  .fc-back {
    max-width: 900px;
    color: var(--color-text);
    font: 400 18px/1.62 var(--font-reading);
  }

  .fc-back > :first-child {
    margin-top: 0;
  }

  .fc-back > :last-child {
    margin-bottom: 0;
  }

  .fc-back mjx-container[display="true"],
  .fc-front mjx-container[display="true"] {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .fc-source {
    margin-top: var(--space-6);
    color: var(--color-text-muted);
    font: 650 12px/1.45 var(--font-interface);
  }

  .fc-source a {
    color: var(--color-action);
    text-decoration: none;
  }

  .fc-source a:hover {
    text-decoration: underline;
  }

  .fc-show-row {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--space-8);
  }

  .fc-show-row .fc-primary-btn {
    min-width: 160px;
  }

  .fc-rating-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-8);
  }

  .fc-rate {
    position: relative;
    min-height: 72px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    gap: 2px var(--space-2);
    padding: 10px 12px;
    color: var(--color-text);
    background: var(--color-canvas);
    text-align: left;
  }

  .fc-rate kbd {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: 4px;
    font-size: 10px;
  }

  .fc-rate span {
    align-self: end;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .fc-rate small {
    align-self: start;
    color: var(--color-text-muted);
    font: 650 11px/1.2 var(--font-mono);
  }

  .fc-rate.again:hover {
    color: var(--color-warning);
    background: var(--color-warning-surface);
    border-color: var(--color-warning);
  }

  .fc-rate.hard:hover {
    background: color-mix(in srgb, var(--color-warning-surface) 55%, var(--color-canvas));
    border-color: var(--color-rule-strong);
  }

  .fc-rate.good:hover,
  .fc-rate.easy:hover {
    color: var(--color-on-hover);
    background: var(--color-hover);
    border-color: var(--color-rule-strong);
  }

  .fc-empty {
    min-height: 280px;
    display: grid;
    place-content: center;
    padding: var(--space-10);
    border-style: dashed;
    text-align: center;
  }

  .fc-empty h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 550;
  }

  .fc-empty p {
    max-width: 520px;
    margin: var(--space-3) auto 0;
    color: var(--color-text-muted);
    font: 600 13px/1.55 var(--font-interface);
  }

  .fc-count {
    flex: 0 0 auto;
    margin: 0 0 5px;
    white-space: nowrap;
  }

  .fc-filter-bar {
    margin-bottom: var(--space-3);
  }

  .fc-browser-controls {
    display: grid;
    grid-template-columns: minmax(150px, 0.6fr) minmax(150px, 0.6fr) minmax(240px, 1.2fr);
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-radius: var(--radius-card);
  }

  .fc-search-label {
    min-width: 0;
  }

  .fc-list {
    display: grid;
    gap: 6px;
    margin-top: var(--space-5);
  }

  .fc-row {
    --paper-color: var(--color-action);
    min-width: 0;
    min-height: 82px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: 12px var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-rule);
    border-left: 3px solid var(--paper-color);
    border-radius: var(--radius-control);
  }

  .fc-row-main {
    min-width: 0;
  }

  .fc-row-title {
    display: flex;
    min-height: var(--control-size);
    align-items: center;
    color: var(--color-text);
    font: 700 13px/1.4 var(--font-interface);
    overflow-wrap: anywhere;
    text-decoration: none;
  }

  .fc-row-title:hover {
    color: var(--color-action-hover);
    text-decoration: underline;
  }

  .fc-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px var(--space-3);
    margin-top: 5px;
    color: var(--color-text-muted);
    font: 600 11px/1.35 var(--font-interface);
  }

  .fc-row-tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
  }

  .fc-row-deck-btn {
    min-height: var(--control-size);
    padding-inline: 11px;
    border-radius: var(--radius-pill);
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }

  .fc-row-deck-btn[aria-pressed="true"] {
    color: var(--color-on-selected);
    background: var(--color-selected);
    border-color: var(--color-selected);
  }

  .fc-row .ql-act {
    width: auto;
    min-width: var(--control-size);
    min-height: var(--control-size);
    padding: 0 11px;
    color: var(--color-text-muted);
    background: var(--color-canvas);
    border: 1px solid var(--color-control-border);
    border-radius: var(--radius-control);
    font: 750 11px/1 var(--font-interface);
  }

  .fc-row .ql-act:hover {
    color: var(--color-on-hover);
    background: var(--color-hover);
  }

  .fc-row .fc-suspend[aria-pressed="true"] {
    color: var(--color-on-selected);
    background: var(--color-selected);
    border-color: var(--color-selected);
  }

  .fc-list-empty {
    min-height: 150px;
    display: grid;
    place-items: center;
    padding: var(--space-6);
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px dashed var(--color-rule-strong);
    border-radius: var(--radius-card);
    font: 650 13px/1.5 var(--font-interface);
    text-align: center;
  }
}

@layer states {
  body.v-context-collapsed .sidebar {
    align-items: center;
    padding: 18px 12px;
    overflow: hidden;
  }

  body.v-context-collapsed .sidebar-top {
    width: 100%;
    justify-content: center;
    padding-bottom: var(--space-4);
  }

  body.v-context-collapsed .sidebar-collapse svg {
    transform: rotate(180deg);
  }

  body.v-context-collapsed .sidebar-brand,
  body.v-context-collapsed .sidebar > .year-selector,
  body.v-context-collapsed .sidebar > .module-sidebar-shortcut,
  body.v-context-collapsed .sidebar > .v-context-primary,
  body.v-context-collapsed .sidebar > .v-context-sections,
  body.v-context-collapsed .sidebar > .v-context-progress,
  body.v-context-collapsed .sidebar > .sidebar-bottom {
    display: none;
  }

  body.v-context-collapsed .v-context-peek {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-5);
    color: var(--color-nav-muted);
    font: 800 10px/1 var(--font-interface);
    letter-spacing: 0.15em;
    writing-mode: vertical-rl;
    text-transform: uppercase;
  }

  body.v-context-collapsed .v-context-peek::after {
    content: "";
    width: 2px;
    height: var(--v-scroll-progress, 0%);
    max-height: 180px;
    background: var(--color-result-accent);
  }

  .flash-highlight {
    animation: v-card-flash 1.15s var(--ease-out);
  }

  .flash-section {
    animation: v-section-flash 1.15s var(--ease-out);
  }

  .flash-part-box {
    position: relative;
    scroll-margin-top: calc(var(--topbar-height) + var(--space-6));
  }

  .flash-part-box::before {
    content: "";
    position: absolute;
    inset: -8px -12px;
    opacity: 0;
    background: color-mix(in srgb, var(--color-action) 8%, transparent);
    border: 1px solid var(--color-action);
    border-radius: var(--radius-control);
    pointer-events: none;
  }

  .flash-part-box.flash-part-active::before {
    animation: v-part-flash 1.15s var(--ease-out);
  }

  html.lecture-mode .flash-part-box::before {
    background: transparent;
    border-color: #000;
    border-radius: 0;
  }

  @keyframes v-card-flash {
    0%, 100% { box-shadow: var(--shadow-result); }
    28% { box-shadow: 0 0 0 4px var(--color-focus-halo), var(--shadow-result); }
  }

  @keyframes v-section-flash {
    0%, 100% { background: transparent; }
    28% { background: var(--color-hover); }
  }

  @keyframes v-part-flash {
    0%, 100% { opacity: 0; }
    28%, 62% { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-fast: 0ms;
      --duration-standard: 0ms;
      --duration-view: 0ms;
    }

    html {
      scroll-behavior: auto;
    }

    .flash-highlight,
    .flash-section,
    .flash-part-box.flash-part-active::before {
      animation: none;
    }

    .flash-part-box.flash-part-active::before {
      opacity: 1;
    }

    .q-action:hover,
    .q-timer-control:hover {
      transform: none;
    }
  }
}

@layer utilities {
  [hidden] {
    display: none;
  }

  .visually-hidden,
  .q-action-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }
}

@media (max-width: 1200px) and (min-width: 961px) {
  @layer tokens {
    :root {
      --global-rail-width: 72px;
      --context-width: 260px;
    }

    body.v-context-collapsed {
      --context-width: 68px;
    }
  }

  @layer layout {
    .page {
      width: calc(100% - 20px);
      margin-top: 10px;
      padding-inline: 44px;
    }

    .topbar {
      padding-inline: var(--space-5);
      grid-template-columns: minmax(120px, 0.8fr) minmax(260px, 1.4fr) minmax(90px, 0.8fr);
    }
  }

  @layer components {
    .home-hero {
      grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
      column-gap: var(--space-8);
    }

    .progress-header {
      grid-template-columns: minmax(0, 1fr);
      column-gap: 0;
    }

    .progress-header > .progress-summary {
      padding-left: var(--space-5);
    }

    .prog-hero,
    .prog-charts {
      grid-template-columns: minmax(0, 1fr);
    }

    .prototype-stats-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .prototype-progress-layout {
      grid-template-columns: minmax(0, 1fr);
    }

    .leaderboard-layout {
      grid-template-columns: minmax(0, 1fr);
    }

    .chart-card-wide {
      grid-column: 1;
    }

    .timer-row {
      grid-template-columns: 46px minmax(0, 1fr) minmax(160px, auto);
      align-items: start;
    }

    .timer-row > .ql-paper {
      grid-column: 1;
      grid-row: 1;
    }

    .timer-link {
      grid-column: 2;
      grid-row: 1;
    }

    .timer-metrics {
      grid-column: 3;
      grid-row: 1;
    }

    .timer-attempt-list {
      grid-column: 2 / -1;
      grid-row: 2;
      justify-content: flex-start;
    }

    .archive-hero {
      grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
      column-gap: var(--space-8);
    }

    .module-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

@media (max-width: 1400px) {
  @layer components {
    .fc-deck-workspace {
      grid-template-columns: minmax(0, 1fr);
    }

    .fc-overview {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .fc-study-head,
    .fc-section-head {
      align-items: flex-start;
      flex-direction: column;
      gap: var(--space-4);
    }

    .fc-study-actions {
      justify-content: flex-start;
    }

    .fc-browser-controls {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fc-browser-controls .fc-search-label {
      grid-column: 1 / -1;
    }
  }
}

@media (max-width: 960px) {
  @layer tokens {
    :root {
      --global-rail-width: 0px;
      --context-width: 0px;
      --topbar-height: 64px;
    }
  }

  @layer layout {
    body[data-ui="verdigris"] {
      padding-bottom: calc(70px + env(safe-area-inset-bottom));
      background: var(--color-canvas);
    }

    .v-global-rail {
      z-index: 80;
      inset: auto 0 0;
      width: 100%;
      height: calc(66px + env(safe-area-inset-bottom));
      min-height: 0;
      display: block;
      padding: 0 6px env(safe-area-inset-bottom);
      border-top: 1px solid var(--color-nav-rule);
      border-right: 0;
    }

    .v-rail-brand,
    .v-rail-footer {
      display: none;
    }

    .v-rail-nav {
      height: 66px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 2px;
      margin: 0;
    }

    .v-rail-link {
      min-width: 0;
      min-height: 58px;
      align-content: center;
      gap: 4px;
      padding: 5px 2px;
      border-radius: var(--radius-control);
    }

    .v-rail-link svg {
      width: 19px;
      height: 19px;
    }

    .v-rail-link[aria-current="page"]::after {
      inset: 0 20% auto;
      width: auto;
      height: 3px;
      border-radius: 0 0 3px 3px;
    }

    .v-rail-label {
      position: static;
      padding: 0;
      color: inherit;
      background: transparent;
      border: 0;
      opacity: 1;
      transform: none;
      font-size: 10px;
    }

    .layout {
      display: block;
      margin-left: 0;
    }

    .sidebar {
      display: none;
    }

    .topbar {
      left: 0;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--space-3);
      padding: 9px 16px 9px 68px;
    }

    .topbar .v-breadcrumbs {
      display: none;
    }

    .topbar > .search-widget {
      grid-column: 1;
    }

    .topbar .topbar-brand {
      grid-column: 2;
    }

    .v-topbar-name {
      grid-column: 2;
    }

    .search-widget {
      top: 9px;
      left: 68px;
      width: calc(100vw - 146px);
      transform: none;
    }

    #nav-toggle {
      position: fixed;
      z-index: 80;
      top: calc((var(--topbar-height) - var(--control-size)) / 2);
      left: 12px;
      width: var(--control-size);
      height: var(--control-size);
      display: grid;
      place-items: center;
      padding: 0;
      color: var(--color-text);
      background: var(--color-surface);
      border: 1px solid var(--color-control-border);
      border-radius: var(--radius-control);
      font-size: 0;
    }

    #nav-toggle > svg {
      width: 22px;
      height: 22px;
      flex: none;
      overflow: visible;
    }

    #nav-toggle::before,
    #nav-toggle::after {
      content: "";
      width: 20px;
      height: 2px;
      background: currentColor;
      border-radius: 999px;
      box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
      transform: none;
    }

    #nav-toggle::after {
      display: none;
    }

    #nav-toggle.v-nav-toggle::before {
      display: none;
      box-shadow: none;
    }

    .page {
      width: 100%;
      max-width: none;
      margin: 0;
      padding-top: calc(var(--topbar-height) + 52px);
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
  }

  @layer components {
    .home-hero {
      grid-template-columns: minmax(0, 1fr) minmax(220px, 0.7fr);
      column-gap: var(--space-8);
    }

    .module-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .search-kbd {
      display: none;
    }

    .search-input {
      padding-right: 12px;
    }

    .v-context-dialog {
      display: block;
    }

    .leaderboard-layout {
      grid-template-columns: minmax(0, 1fr);
    }
  }
}

@media (min-width: 961px) {
  @layer components {
    .v-context-dialog {
      display: none;
    }
  }
}

@media (max-width: 720px) {
  @layer layout {
    .topbar .topbar-brand {
      display: none;
    }

    .topbar {
      grid-template-columns: minmax(0, 1fr) auto;
      padding-right: 14px;
    }

    .v-topbar-name {
      max-width: clamp(88px, 24vw, 120px);
    }

    .search-widget {
      width: calc(100vw - 82px);
    }

    .page {
      padding: calc(var(--topbar-height) + 44px) 28px 100px;
    }
  }

  @layer components {
    .home-hero {
      min-height: 0;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto auto;
      gap: var(--space-6);
    }

    .home-hero .brand {
      grid-column: 1;
      grid-row: 1;
    }

    .home-hero-copy {
      grid-column: 1;
      grid-row: 2;
    }

    .home-milestone {
      grid-column: 1;
      grid-row: 3;
      padding: var(--space-5) 0 0;
      border-top: 1px solid var(--color-rule);
      border-left: 0;
    }

    body.v-shell-ready .home-hero {
      grid-template-rows: auto auto;
    }

    body.v-shell-ready .home-hero-copy {
      grid-row: 1;
    }

    body.v-shell-ready .home-milestone {
      grid-row: 2;
    }

    .archive-hero {
      min-height: 0;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto auto;
      gap: var(--space-6);
    }

    .archive-hero .brand {
      grid-column: 1;
      grid-row: 1;
    }

    .archive-hero-copy {
      grid-column: 1;
      grid-row: 2;
    }

    .archive-summary {
      grid-column: 1;
      grid-row: 3;
      padding: var(--space-5) 0 0;
      border-top: 1px solid var(--color-rule);
      border-left: 0;
    }

    body.v-shell-ready .archive-hero {
      grid-template-rows: auto auto;
    }

    body.v-shell-ready .archive-hero-copy {
      grid-row: 1;
    }

    body.v-shell-ready .archive-summary {
      grid-row: 2;
    }

    .progress-header {
      min-height: 0;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto;
      align-items: start;
      gap: var(--space-6);
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: 0;
    }

    .progress-header .brand {
      grid-column: 1;
      grid-row: 1;
    }

    .progress-header-copy {
      grid-column: 1;
      grid-row: 2;
    }

    .progress-header > .progress-summary {
      grid-column: 1;
      grid-row: 3;
      width: 100%;
      padding: var(--space-5) 0 0;
      border-top: 1px solid var(--color-rule);
      border-left: 0;
    }

    body.v-shell-ready .progress-header {
      grid-template-rows: auto;
    }

    body.v-shell-ready .progress-header-copy {
      grid-row: 1;
    }

    body.v-shell-ready .progress-header > .progress-summary {
      grid-row: 2;
    }

    .progress-breakdowns,
    .progress-leaderboard,
    .prog-timing-section,
    .prog-list-section {
      margin-top: var(--space-12);
    }

    .flashcards-hero {
      min-height: 0;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto;
      align-items: start;
      gap: var(--space-6);
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: 0;
    }

    .flashcards-hero .brand {
      grid-column: 1;
      grid-row: 1;
    }

    .flashcards-hero-copy {
      grid-column: 1;
      grid-row: 2;
    }

    body.v-shell-ready .flashcards-hero {
      grid-template-rows: auto;
    }

    body.v-shell-ready .flashcards-hero-copy {
      grid-row: 1;
    }

    .fc-deck-workspace {
      grid-template-columns: minmax(0, 1fr);
    }

    .fc-study,
    .fc-browser-section {
      margin-top: var(--space-12);
    }

    .fc-study-head,
    .fc-section-head {
      align-items: flex-start;
      flex-direction: column;
      gap: var(--space-4);
    }

    .fc-study-actions {
      justify-content: flex-start;
    }

    .fc-browser-controls .fc-search-label {
      grid-column: 1 / -1;
    }

    .progress-section-head {
      align-items: flex-start;
      flex-direction: column;
      gap: var(--space-3);
    }

    .progress-section-head > p {
      max-width: none;
      margin: 0;
      text-align: left;
    }

    .leaderboard-section-tools {
      width: 100%;
      justify-items: start;
    }

    .leaderboard-section-tools > p {
      max-width: none;
      text-align: left;
    }

    .prog-hero,
    .prog-charts {
      grid-template-columns: minmax(0, 1fr);
    }

    .prototype-stats-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .prototype-progress-layout,
    .timing-preview-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .prog-timing-section.prototype-timing-panel {
      margin-top: 18px;
    }

    .chart-card-wide {
      grid-column: 1;
    }

    .chart-data-details,
    .chart-data-table {
      min-width: 0;
      max-width: 100%;
    }

    .chart-data-table {
      overflow-x: auto;
      overscroll-behavior-inline: contain;
    }

    .chart-wrap-module {
      height: 420px;
    }

    .timer-stat-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .timer-row {
      grid-template-columns: 46px minmax(0, 1fr);
      align-items: start;
    }

    .timer-row > .ql-paper {
      grid-column: 1;
      grid-row: 1;
    }

    .timer-link {
      min-height: var(--control-size);
      grid-column: 2;
      grid-row: 1;
      align-content: center;
    }

    .timer-metrics {
      grid-column: 2;
      grid-row: 2;
    }

    .timer-attempt-list {
      grid-column: 1 / -1;
      grid-row: 3;
      justify-content: flex-start;
    }

    .filter-bar:not(.filter-bar-selects) {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .filter-pill {
      width: 100%;
      min-height: 44px;
      padding-inline: var(--space-2);
    }

    .filter-bar-selects {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-bar-selects label {
      min-width: 0;
    }

    .filter-bar-selects select,
    .filter-reset {
      min-height: 44px;
    }

    .filter-reset {
      width: 100%;
    }

    .ql-row {
      grid-template-columns: var(--control-size) var(--control-size) 46px minmax(0, 1fr);
      align-items: center;
    }

    .ql-row > .ql-done {
      grid-column: 1;
      grid-row: 1;
    }

    .ql-row > .ql-flag {
      grid-column: 2;
      grid-row: 1;
    }

    .ql-row > .ql-paper {
      grid-column: 3;
      grid-row: 1;
      justify-self: start;
    }

    .ql-row > .ql-link {
      grid-column: 4;
      grid-row: 1;
    }

    .ql-row > .ql-date {
      grid-column: 4;
      grid-row: 2;
      justify-self: start;
      padding-left: 0;
      white-space: normal;
    }

    .prog-wall {
      min-height: 320px;
    }

    .prog-wall-card {
      padding: var(--space-8);
    }

    .home-resume-card {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-5);
      padding: 25px 24px;
    }

    .home-resume-action {
      justify-self: start;
    }

    .home-library-head {
      align-items: flex-start;
      flex-direction: column;
      gap: var(--space-3);
    }

    .archive-library-head {
      align-items: flex-start;
      flex-direction: column;
      gap: var(--space-4);
    }

    .archive-switch {
      width: 100%;
    }

    .archive-switch button {
      flex: 1;
    }

    .module-grid {
      grid-template-columns: minmax(0, 1fr);
    }

    .page-header {
      min-height: 190px;
      grid-template-columns: minmax(0, 1fr);
      padding-right: 0;
    }

    .ghost-numeral {
      display: none;
    }

    .toc ol {
      columns: 1;
    }

    .result-statement {
      padding: 24px;
    }

    .theorem:not(.has-result-layout) {
      padding: 24px;
    }

    .proof {
      padding: 30px 28px 25px;
    }

    .proof::after {
      right: 28px;
    }

    .theorem.has-result-layout > .exam-hits {
      padding-inline: 28px;
    }

    :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem {
      padding: 82px 24px 28px;
    }

    :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem .theorem-label,
    :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem .theorem-name {
      padding-right: 0;
    }

    :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem > .q-timer-panel {
      margin-bottom: var(--space-6);
    }

    .paper-source-panel {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-5);
      padding: 24px;
    }

    .paper-source-actions {
      justify-content: flex-start;
    }

    .revision-guide-card {
      grid-template-columns: auto minmax(0, 1fr);
      align-items: start;
      padding: 22px;
    }

    .revision-guide-open {
      grid-column: 2;
      justify-self: start;
    }

    .q-actions {
      top: 18px;
      right: 18px;
    }

    .q-timer-main {
      align-items: flex-start;
      flex-direction: column;
    }

    .q-timer-controls {
      width: 100%;
      justify-content: flex-start;
    }

    .search-dropdown {
      position: fixed;
      top: var(--topbar-height);
      left: 8px;
      right: 8px;
      max-height: calc(100dvh - var(--topbar-height) - 78px - env(safe-area-inset-bottom));
    }
  }
}

@media (max-width: 600px) {
  @layer components {
    .fc-deck-panel {
      min-height: 0;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto auto;
      align-items: stretch;
    }

    .fc-custom-deck-disclosure {
      grid-column: 1;
    }

    .fc-custom-deck-tools,
    .fc-browser-controls {
      grid-template-columns: minmax(0, 1fr);
    }

    .fc-browser-controls .fc-search-label {
      grid-column: 1;
    }

    .fc-overview,
    .fc-rating-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
}

@media (max-width: 480px) {
  @layer base {
    body[data-ui="verdigris"] {
      font-size: 16px;
    }

    h1 {
      font-size: clamp(38px, 12vw, 50px);
    }

    h2 {
      font-size: 29px;
    }
  }

  @layer layout {
    .page {
      padding-inline: 22px;
    }
  }

  @layer components {
    .page-header {
      min-height: 180px;
      padding-right: 0;
      padding-bottom: var(--space-8);
    }

    .prototype-panel.leaderboard-board,
    .prototype-panel.leaderboard-privacy {
      padding: 16px;
    }

    .leaderboard-board-head {
      align-items: flex-start;
    }

    .leaderboard-board-head h3,
    .leaderboard-privacy h3 {
      font-size: 22px;
    }

    .leaderboard-you {
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
      padding: 16px;
    }

    .leaderboard-you > div:last-child {
      justify-items: start;
      text-align: left;
    }

    .leaderboard-row {
      grid-template-columns: 38px minmax(0, 1fr) auto;
      gap: 8px;
      padding: 8px 4px;
    }

    .leaderboard-initials {
      width: 32px;
      height: 32px;
    }

    .leaderboard-person {
      gap: 9px;
    }

    .leaderboard-person-copy {
      align-items: flex-start;
      flex-direction: column;
      gap: 4px;
    }

    .leaderboard-score {
      min-width: 48px;
    }

    .leaderboard-score strong {
      font-size: 16px;
    }

    .revision-guide-card {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-4);
      padding: 20px;
    }

    .revision-guide-mark {
      width: 48px;
      height: 48px;
    }

    .revision-guide-title {
      font-size: 24px;
    }

    .revision-guide-open {
      width: 100%;
      grid-column: 1;
    }

    :where(.definition, .lemma, .corollary) {
      padding: 20px;
    }

    :where(.definition, .lemma, .corollary) p,
    :where(.definition, .lemma, .corollary) li,
    .theorem > p,
    .theorem > ul,
    .theorem > ol,
    .result-statement > p,
    .result-statement > ul,
    .result-statement > ol,
    .result-statement li {
      font-size: 17px;
    }

    .result-statement,
    .theorem:not(.has-result-layout) {
      padding: 21px 20px;
    }

    .theorem-name {
      font-size: 25px;
    }

    .proof {
      padding: 27px 22px 23px;
    }

    .proof::after {
      left: 82px;
      right: 22px;
      top: 41px;
    }

    .theorem.has-result-layout > .exam-hits {
      padding-inline: 22px;
    }

    :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem {
      padding: 80px 20px 26px;
    }

    :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem .theorem-name {
      font-size: 23px;
    }

    :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem > p,
    :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem > ul,
    :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem > ol,
    :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem > ul li,
    :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem > ol li {
      font-size: 17px;
    }

    :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem :is(.pp-question-preamble, .pp-question-part) > :is(p, ul, ol),
    :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem :is(.pp-question-preamble, .pp-question-part) :is(ul, ol) li {
      font-size: 17px;
    }

    :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem pre {
      padding: var(--space-3);
      font-size: 12px;
    }

    :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem > .q-timer-panel {
      margin-bottom: var(--space-6);
      padding-inline: 16px;
    }

    .q-timer-controls {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .q-timer-control {
      width: 100%;
    }

    .q-timer-finish {
      grid-column: 1 / -1;
      grid-row: 1;
    }

    .q-timer-run {
      grid-column: 1;
      grid-row: 2;
    }

    .q-timer-reset {
      grid-column: 2;
      grid-row: 2;
    }

    .exam-hits .label {
      width: 100%;
    }

    .search-result {
      grid-template-columns: 1fr;
    }

    .search-result-kind {
      width: max-content;
      grid-row: auto;
    }

    .auth-modal,
    .module-settings-modal {
      padding: 0;
    }

    .auth-card,
    .module-settings-card {
      min-height: 100dvh;
      max-height: 100dvh;
      border: 0;
      border-radius: 0;
    }

    .module-settings-toolbar {
      align-items: flex-start;
      flex-direction: column;
    }

    .home-milestone strong {
      font-size: 30px;
    }

    .archive-summary strong {
      font-size: 30px;
    }

    .progress-header {
      min-height: 0;
      gap: var(--space-5);
      padding-bottom: 0;
      margin-bottom: 0;
      border-bottom: 0;
    }

    .progress-lede {
      font-size: 17px;
    }

    .prototype-stats-grid {
      gap: var(--space-2);
      margin-top: 28px;
    }

    .prototype-stat-card {
      min-height: 118px;
      padding: var(--space-4);
    }

    .prototype-stat-value {
      font-size: 29px;
    }

    .prototype-stat-delta,
    .prototype-stat-summary {
      font-size: 10px;
    }

    .prototype-panel,
    .prog-timing-section.prototype-timing-panel {
      padding: 19px;
    }

    .prototype-panel-head {
      align-items: flex-start;
      margin-bottom: var(--space-5);
    }

    .prototype-panel-head h2 {
      font-size: 21px;
    }

    .prototype-focus-empty {
      min-height: 150px;
    }

    .progress-header > .progress-summary strong {
      font-size: 30px;
    }

    .prog-hero-stats,
    .timer-stat-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-2);
    }

    .prog-tile,
    .timer-stat {
      min-height: 100px;
      padding: var(--space-4);
    }

    .prog-tile-num,
    .timer-stat-num {
      font-size: 28px;
    }

    .chart-card {
      padding: var(--space-4);
    }

    .chart-card-head {
      margin-bottom: var(--space-4);
    }

    .chart-card-head h3 {
      font-size: 22px;
    }

    .chart-wrap {
      height: 220px;
    }

    .prog-hero-chart .chart-wrap {
      height: 240px;
    }

    .chart-wrap-module {
      height: 340px;
    }

    .progress-filters {
      padding: var(--space-3);
    }

    .filter-bar:not(.filter-bar-selects) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-bar-selects {
      grid-template-columns: minmax(0, 1fr);
    }

    .ql-row > .ql-link {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    .ql-row > .ql-date {
      grid-column: 4;
      grid-row: 1;
      justify-self: end;
      text-align: right;
    }

    .prog-wall-card {
      padding: var(--space-6);
    }

    .prog-wall-card h2 {
      font-size: 28px;
    }

    .prog-wall-btn {
      width: 100%;
    }

    .home-resume-action {
      width: 100%;
    }

    .flashcards-lede {
      font-size: 17px;
    }

    .fc-deck-workspace {
      gap: var(--space-3);
      margin-top: 28px;
    }

    .fc-deck-panel {
      min-height: 0;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto auto;
      align-items: stretch;
      gap: var(--space-5);
      padding: var(--space-5);
    }

    .fc-deck-identity {
      grid-template-columns: 56px minmax(0, 1fr);
      gap: var(--space-4);
    }

    .fc-deck-mark {
      width: 56px;
      height: 56px;
      font-size: 12px;
    }

    .fc-deck-copy h2 {
      font-size: 26px;
    }

    .fc-custom-deck-disclosure {
      grid-column: 1;
    }

    .fc-custom-deck-disclosure summary,
    .fc-maintenance-disclosure,
    .fc-maintenance-disclosure summary {
      width: 100%;
    }

    .fc-custom-deck-tools {
      grid-template-columns: minmax(0, 1fr);
    }

    .fc-custom-deck-tools .fc-secondary-btn {
      width: 100%;
    }

    .fc-stat {
      min-height: 104px;
      padding: var(--space-4);
    }

    .fc-stat-num {
      font-size: 30px;
    }

    .fc-study-head h2,
    .fc-section-head h2 {
      font-size: 29px;
    }

    .fc-study-actions {
      width: 100%;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
    }

    .fc-order-toggle {
      width: 100%;
    }

    .fc-order-btn {
      min-height: var(--control-size);
      flex: 1;
    }

    .fc-maintenance-actions {
      position: static;
      width: 100%;
      min-width: 0;
      margin-top: var(--space-2);
      box-shadow: none;
    }

    .fc-card {
      min-height: 330px;
      padding: 20px;
    }

    .fc-card-meta {
      margin-bottom: var(--space-5);
    }

    .fc-front {
      font-size: 28px;
    }

    .fc-back {
      font-size: 17px;
    }

    .fc-show-row .fc-primary-btn {
      width: 100%;
    }

    .fc-rating-row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-2);
    }

    .fc-browser-controls {
      grid-template-columns: minmax(0, 1fr);
      padding: var(--space-3);
    }

    .fc-browser-controls .fc-search-label {
      grid-column: 1;
    }

    .fc-row {
      grid-template-columns: 46px minmax(0, 1fr) auto auto;
      align-items: center;
      gap: var(--space-2);
      padding: 12px;
    }

    .fc-row > .ql-paper {
      grid-column: 1;
      grid-row: 1;
      justify-self: start;
    }

    .fc-row > .fc-suspend {
      grid-column: 3;
      grid-row: 1;
    }

    .fc-row > .fc-reset-card {
      grid-column: 4;
      grid-row: 1;
    }

    .fc-row-main {
      grid-column: 1 / -1;
      grid-row: 2;
    }

    .fc-row .ql-act {
      padding-inline: 9px;
    }
  }
}

@media print {
  @layer print {
    :root {
      --color-canvas: #fff;
      --color-surface: #fff;
      --color-surface-subtle: #fff;
      --color-text: #000;
      --color-text-muted: #000;
      --color-rule: #000;
      --color-rule-strong: #000;
      --color-action: #000;
      --color-action-hover: #000;
      --color-definition-accent: #000;
      --color-definition-label: #000;
      --color-result: #fff;
      --color-result-text: #000;
      --color-result-muted: #000;
      --color-result-accent: transparent;
      --color-proof: #fff;
      --color-proof-label: #000;
      --shadow-soft: none;
      --shadow-raised: none;
      --shadow-result: none;
      --radius-card: 0;
      --radius-shell: 0;
    }

    .v-global-rail,
    .sidebar,
    .topbar,
    .search-widget,
    .skip-link,
    #nav-toggle,
    #sidebar-backdrop,
    .toc,
    .auth-modal,
    .module-settings-modal,
    .v-context-dialog,
    .paper-source-panel,
    .revision-guide-card,
    .home-milestone,
    .home-resume-card,
    .archive-summary,
    .archive-switch,
    .archive-note,
    .exam-hits,
    .q-actions,
    .q-timer-panel,
    .progress-leaderboard {
      display: none;
    }

    body[data-ui="verdigris"] {
      padding: 0;
      color: #000;
      background: #fff;
      font-size: 11pt;
    }

    .layout {
      display: block;
      margin: 0;
    }

    .page {
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 0;
      border: 0;
      box-shadow: none;
    }

    .page-header {
      min-height: 0;
      padding: 0 0 18pt;
      margin-bottom: 24pt;
    }

    .page-header .brand,
    .ghost-numeral {
      display: none;
    }

    .page-header h1 {
      font-size: 28pt;
    }

    .home-hero,
    .home-hero-copy,
    .home-library-head,
    .archive-hero,
    .archive-hero-copy,
    .archive-library-head {
      display: block;
    }

    .home-lede,
    .archive-lede {
      margin-top: 8pt;
      color: #000;
      font-size: 11pt;
    }

    .home-module-count {
      margin-top: 6pt;
      color: #000;
    }

    .module-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10pt;
    }

    .module-card {
      min-height: 0;
      break-inside: avoid;
      padding: 12pt;
      border: 1px solid #000;
      box-shadow: none;
    }

    .archive-grid-scroll {
      overflow: visible;
      padding: 0;
    }

    .archive-grid,
    .archive-year-row {
      min-width: 0;
    }

    .archive-grid {
      gap: 7pt;
    }

    .archive-year-row {
      grid-template-columns: 74pt minmax(0, 1fr);
      gap: 5pt;
      break-inside: avoid;
      padding: 6pt;
      border: 1px solid #000;
      box-shadow: none;
    }

    .archive-year-label {
      position: static;
      padding: 0 6pt;
      color: #000;
      background: #fff;
      border-color: #000;
    }

    .archive-year-label h4 {
      color: #000;
      font-size: 17pt;
    }

    .archive-year-label span,
    .archive-paper-cell > span:not(.visually-hidden) {
      color: #000;
    }

    .archive-paper-grid {
      grid-template-columns: repeat(var(--archive-columns, 5), minmax(0, 1fr));
      gap: 4pt;
    }

    .archive-paper-cell,
    .archive-paper-cell.is-missing {
      min-height: 34pt;
      padding: 5pt;
      color: #000;
      background: #fff;
      border-color: #000;
      box-shadow: none;
    }

    .progress-filters,
    .chart-wrap,
    body[data-page-kind="progress"] canvas,
    .chart-data-details > summary,
    .ql-act,
    .timer-delete,
    .prog-wall-btn,
    .progress-empty-state .empty-year-action {
      display: none;
    }

    .progress-header,
    .progress-header-copy,
    .progress-header > .progress-summary,
    .progress-section-head {
      display: block;
    }

    .progress-summary[hidden] {
      display: none;
    }

    .progress-header {
      padding-bottom: 14pt;
      margin-bottom: 22pt;
    }

    .progress-lede {
      max-width: none;
      margin-top: 7pt;
      color: #000;
      font-size: 11pt;
    }

    .progress-header > .progress-summary {
      padding: 8pt 0 0;
      margin-top: 10pt;
      border-top: 1px solid #000;
      border-left: 0;
    }

    .progress-header > .progress-summary strong {
      margin-top: 3pt;
      color: #000;
      font-size: 19pt;
    }

    .progress-header > .progress-summary span,
    .progress-section-head > p,
    .filter-result-count {
      color: #000;
    }

    .progress-overview,
    .progress-breakdowns,
    .prog-timing-section,
    .prog-list-section {
      margin-top: 22pt;
      scroll-margin-top: 0;
    }

    .progress-overview {
      margin-top: 0;
    }

    .progress-section-head {
      margin-bottom: 10pt;
    }

    .progress-section-head > p {
      max-width: none;
      margin: 4pt 0 0;
      text-align: left;
    }

    .prototype-stats-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6pt;
      margin: 0 0 10pt;
    }

    .prototype-stat-card,
    .prototype-panel,
    .timing-preview-card {
      min-height: 0;
      break-inside: avoid;
      padding: 8pt;
      color: #000;
      background: #fff;
      border: 1px solid #000;
      box-shadow: none;
    }

    .prototype-stat-label,
    .prototype-stat-value,
    .prototype-stat-delta,
    .prototype-stat-summary,
    .prototype-stat-card .prototype-stat-summary strong,
    .prototype-panel-head h2,
    .prototype-panel-head > span,
    .prototype-focus-item,
    .prototype-focus-copy small,
    .prototype-focus-count,
    .timing-preview-copy small,
    .timing-preview-value {
      color: #000;
    }

    .prototype-stat-value {
      font-size: 18pt;
    }

    .prototype-progress-layout {
      grid-template-columns: minmax(0, 1fr);
      gap: 9pt;
    }

    .prototype-panel-head {
      break-after: avoid;
      margin-bottom: 5pt;
    }

    .prototype-panel-head h2 {
      font-size: 15pt;
    }

    .prototype-focus-list li {
      border-color: #000;
    }

    .prototype-focus-item {
      min-height: 0;
      padding: 5pt 2pt;
      border: 0;
    }

    .prototype-focus-dot {
      background: #000;
    }

    .prog-timing-section.prototype-timing-panel {
      margin-top: 9pt;
    }

    .timing-preview-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6pt;
    }

    .timing-history-details,
    .timing-history-details:not([open]),
    .timing-history-details:not([open]) > :not(summary) {
      display: block;
    }

    .timing-history-details > summary {
      display: none;
    }

    .prog-hero {
      display: block;
    }

    .prog-hero-stats,
    .timer-stat-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 6pt;
      margin-top: 8pt;
    }

    .prog-tile,
    .timer-stat {
      min-height: 0;
      break-inside: avoid;
      padding: 8pt;
      color: #000;
      background: #fff;
      border: 1px solid #000;
      border-top: 1px solid #000;
      box-shadow: none;
    }

    .prog-tile-num,
    .timer-stat-num,
    .prog-tile-label,
    .timer-stat-label {
      color: #000;
    }

    .prog-tile-num,
    .timer-stat-num {
      font-size: 18pt;
    }

    .prog-charts {
      grid-template-columns: minmax(0, 1fr);
      gap: 9pt;
    }

    .chart-card,
    .chart-card-wide {
      min-width: 0;
      grid-column: 1;
      padding: 9pt;
      color: #000;
      background: #fff;
      border: 1px solid #000;
      box-shadow: none;
    }

    .chart-card-head {
      break-after: avoid;
      margin-bottom: 4pt;
    }

    .chart-card-head h3 {
      color: #000;
      font-size: 15pt;
    }

    .chart-card-kicker,
    .progress-summary-label {
      color: #000;
    }

    .chart-data-details,
    .chart-data-details:not([open]) {
      display: block;
      margin-top: 0;
      background: #fff;
      border: 0;
    }

    .chart-data-details > .chart-data-table,
    .chart-data-details:not([open]) > .chart-data-table {
      max-height: none;
      display: block;
      overflow: visible;
      padding: 0;
    }

    .chart-data-table table {
      color: #000;
      font-size: 8.5pt;
    }

    .chart-data-table caption,
    .chart-data-table th {
      color: #000;
    }

    .chart-data-table th,
    .chart-data-table td {
      padding: 4pt 5pt;
      border-color: #000;
    }

    .chart-data-table tr,
    .timer-row,
    .ql-row {
      break-inside: avoid;
    }

    .timer-list,
    .q-list {
      gap: 4pt;
      margin-top: 8pt;
    }

    .timer-row,
    .ql-row {
      min-height: 0;
      padding: 6pt;
      color: #000;
      background: #fff;
      border: 1px solid #000;
      border-left: 1px solid #000;
      box-shadow: none;
    }

    .timer-row {
      grid-template-columns: 36pt minmax(0, 1fr) auto;
      align-items: start;
    }

    .timer-row > .ql-paper {
      grid-column: 1;
      grid-row: 1;
    }

    .timer-link {
      min-height: 0;
      grid-column: 2;
      grid-row: 1;
    }

    .timer-metrics {
      grid-column: 3;
      grid-row: 1;
    }

    .timer-attempt-list {
      grid-column: 2 / -1;
      grid-row: 2;
      justify-content: flex-start;
    }

    .timer-attempt-list > span {
      min-height: 0;
      padding: 3pt 5pt;
      color: #000;
      background: #fff;
      border-color: #000;
    }

    .timer-active-pill {
      min-height: 0;
      padding: 2pt 4pt;
      color: #000;
      background: #fff;
      border: 1px solid #000;
    }

    .ql-row {
      grid-template-columns: 36pt minmax(0, 1fr) auto;
    }

    .ql-row > .ql-paper {
      grid-column: 1;
      grid-row: 1;
    }

    .ql-row > .ql-link {
      min-height: 0;
      grid-column: 2;
      grid-row: 1;
    }

    .ql-row > .ql-date {
      grid-column: 3;
      grid-row: 1;
      padding-left: 5pt;
      color: #000;
      white-space: nowrap;
    }

    .ql-paper {
      min-height: 0;
      padding: 3pt 4pt;
      color: #000;
      background: #fff;
      border-color: #000;
    }

    .timer-label,
    .ql-label,
    .timer-meta,
    .ql-meta,
    .timer-metrics {
      color: #000;
    }

    .timer-list-empty,
    .q-list-empty,
    .prog-wall-card {
      color: #000;
      background: #fff;
      border-color: #000;
      box-shadow: none;
    }

    .link-pill,
    .link-pill.primary,
    .link-pill.primary:hover {
      color: #000;
      background: #fff;
      border-color: #000;
    }

    .page > h2 {
      break-after: avoid;
      font-size: 20pt;
    }

    :where(.definition, .lemma, .corollary),
    .theorem,
    .theorem.has-result-layout,
    .result-statement {
      padding: 0;
      margin: 16pt 0;
      color: #000;
      background: #fff;
      border: 0;
      box-shadow: none;
    }

    .theorem::after {
      display: none;
    }

    :where(.definition-label, .lemma-label, .corollary-label),
    .theorem-label,
    .theorem-name {
      display: inline;
      margin-right: 4pt;
      color: #000;
      font-size: 11pt;
      letter-spacing: 0;
      text-transform: none;
    }

    .theorem-name {
      font-style: italic;
      font-weight: 400;
    }

    :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem .theorem-label,
    :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem .theorem-name {
      min-height: 0;
      padding: 0;
      border: 0;
    }

    body[data-page-kind="paper"] .theorem .theorem-label {
      display: block;
      margin: 0 0 4pt;
      break-after: avoid;
    }

    body[data-page-kind="paper"] .theorem > p:first-of-type {
      break-before: avoid;
    }

    body[data-page-kind="paper"] .theorem > .exam-data-block {
      max-width: 100%;
      overflow: visible;
      padding: 5pt;
      color: #000;
      background: #fff;
      border-color: #000;
      border-radius: 0;
      font-size: 8.5pt;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    body[data-page-kind="paper"] .theorem pre {
      max-width: 100%;
      overflow: visible;
      padding: 5pt;
      color: #000;
      background: #fff;
      border: 1px solid #000;
      border-radius: 0;
      font-size: 8.5pt;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .exam-figure {
      break-inside: avoid;
      break-after: avoid;
      border-color: #000;
      border-radius: 0;
    }

    .theorem .pa-figure,
    .theorem p.pa-figure-row {
      break-inside: avoid;
      page-break-inside: avoid;
    }

    .exam-figure-caption {
      break-before: avoid;
      color: #000;
    }

    .resit-render-page {
      break-inside: avoid;
      page-break-inside: avoid;
    }

    .exam-table-scroll {
      break-inside: avoid;
      overflow: visible;
      margin: 12pt 0;
    }

    :is(body[data-page-kind="questions"], body[data-page-kind="paper"]) .theorem table {
      width: auto;
      max-width: 100%;
      margin: 0 auto;
      font-size: 10pt;
    }

    .theorem-label-link {
      min-height: 0;
      display: inline;
      border: 0;
    }

    .proof,
    .theorem.has-result-layout .proof {
      padding: 8pt 0 0;
      margin: 0;
      color: #000;
      background: #fff;
      border: 0;
    }

    .proof::before {
      content: "Proof.";
      display: inline;
      margin-right: 4pt;
      color: #000;
      font-weight: 400;
    }

    .proof::after {
      display: none;
    }

    .proof p:first-of-type {
      display: inline;
    }

    a {
      color: #000;
      text-decoration: none;
    }

    table,
    mjx-container {
      max-width: 100%;
      overflow: visible;
    }

    mjx-container[display="true"] {
      font-size: 82% !important;
    }

    .v-inline-math-scroll {
      max-width: none;
      display: inline;
      overflow: visible;
      padding: 0;
    }

    .v-inline-math-scroll > mjx-container {
      font-size: 82% !important;
    }

    table {
      display: table;
      width: 100%;
    }

    body[data-page-kind="flashcards"] .flashcards-hero,
    body[data-page-kind="flashcards"] .fc-deck-workspace,
    body[data-page-kind="flashcards"] .fc-study-head,
    body[data-page-kind="flashcards"] .fc-browser-section,
    body[data-page-kind="flashcards"] .fc-show-row,
    body[data-page-kind="flashcards"] .fc-rating-row {
      display: none;
    }

    body[data-page-kind="flashcards"] .fc-study {
      display: block;
      margin: 0;
    }

    body[data-page-kind="flashcards"] .fc-card:not([hidden]) {
      min-height: 0;
      display: block;
      padding: 16pt;
      color: #000;
      background: #fff;
      border: 1px solid #000;
      box-shadow: none;
      break-inside: avoid;
    }

    body[data-page-kind="flashcards"] .fc-answer[hidden] {
      display: block;
    }

    body[data-page-kind="flashcards"] .fc-card-meta,
    body[data-page-kind="flashcards"] .fc-face-label,
    body[data-page-kind="flashcards"] .fc-front,
    body[data-page-kind="flashcards"] .fc-back,
    body[data-page-kind="flashcards"] .fc-source,
    body[data-page-kind="flashcards"] .fc-source a {
      color: #000;
    }

    body[data-page-kind="flashcards"] .fc-front {
      font-size: 22pt;
    }

    body[data-page-kind="flashcards"] .fc-back {
      font-size: 11pt;
    }

    body[data-page-kind="flashcards"] .fc-card-face + .fc-card-face {
      border-color: #000;
    }

    @page {
      margin: 18mm 16mm;
    }
  }
}

/* Keep this reset final, unlayered, and important: MathJax injects its own
   unlayered CHTML rules after page CSS, while older rules made inline
   formulae scroll containers. Inline glyph overhangs must remain paintable. */
mjx-container:not([display="true"]),
mjx-container:not([display="true"]) > mjx-math {
  max-width: none !important;
  overflow: visible !important;
  contain: none !important;
  clip: auto !important;
  clip-path: none !important;
}

/* === Private access gate === */
.access-gate {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  overflow: auto;
  padding: clamp(24px, 5vw, 72px);
  visibility: visible !important;
  color: #f7f2e8;
  background:
    radial-gradient(circle at 76% 18%, rgba(206, 166, 80, .16), transparent 28rem),
    linear-gradient(145deg, #092c29, #103a36 58%, #16443f);
}

/* Auth dialogs must sit above the full-page gate. Without this explicit
   relationship the form is present and focusable but visually concealed. */
.auth-modal {
  z-index: 9100 !important;
}

.auth-modal.auth-inline {
  position: static;
  inset: auto;
  z-index: auto !important;
  display: block;
  padding: 0;
  overflow: visible;
  background: transparent;
  animation: none;
}

.auth-inline .auth-card {
  width: 100%;
  max-height: none;
  overflow: visible;
  color: #18332f;
  background: #f1ecdf;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.auth-inline .auth-benefits {
  display: none;
}

.access-gate[hidden] {
  display: none !important;
}

.access-gate-card {
  width: min(100%, 650px);
  padding: clamp(30px, 6vw, 64px);
  border: 1px solid rgba(247, 242, 232, .25);
  border-top: 4px solid #d1a84f;
  border-radius: 4px;
  background: rgba(9, 44, 41, .72);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .28);
  backdrop-filter: blur(12px);
}

.access-gate-card.access-gate-login {
  width: min(100%, 1080px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(380px, .92fr);
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #103733;
  box-shadow: 0 32px 90px rgba(0, 19, 17, .32);
  backdrop-filter: none;
}

.access-gate-intro {
  align-self: center;
  padding: clamp(40px, 6vw, 72px);
}

.access-gate-auth {
  min-width: 0;
  display: grid;
  align-items: center;
  padding: clamp(26px, 4vw, 44px);
  color: #18332f;
  background: #f1ecdf;
}

.access-gate-auth .auth-card,
.access-gate-auth .auth-head,
.access-gate-auth .auth-tabs,
.access-gate-auth .auth-form,
.access-gate-auth .auth-message {
  background: #f1ecdf !important;
}

.access-gate-auth .auth-head {
  padding: 0 0 30px;
  border: 0;
}

.access-gate-auth .auth-tabs {
  width: 100%;
  gap: 26px;
  padding: 0;
  background: transparent;
  border-bottom: 1px solid rgba(24, 51, 47, .18);
  border-radius: 0;
}

.access-gate-auth .auth-tab {
  min-height: 46px;
  flex: 0 0 auto;
  padding: 0 2px 12px;
  color: #6c756e;
  background: transparent;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  font-size: 14px;
}

.access-gate-auth .auth-tab.active {
  color: #174d47;
  background: transparent;
  border-bottom-color: #b38b39;
}

.access-gate-auth .auth-form,
.access-gate-auth .auth-message {
  padding: 24px 0 0;
}

.access-gate-auth .auth-title {
  color: #17312e;
  font-size: 28px;
}

.access-gate-auth .auth-field {
  color: #49605d;
}

.access-gate-auth .auth-field input {
  color: #17312e;
  background: #e8e1d3;
  border: 0;
  border-bottom: 2px solid #b8b5aa;
  border-radius: 2px;
  box-shadow: none;
}

.access-gate-auth .auth-field input:focus {
  border-bottom-color: #b38b39;
  outline: 3px solid rgba(179, 139, 57, .24);
  outline-offset: 2px;
}

.access-gate-auth .auth-submit {
  min-height: 48px;
  border: 0;
  border-radius: 2px;
  color: #fffdf8;
  background: #1e5a53;
}

.access-gate-auth .auth-submit:hover {
  background: #174d47;
}

.access-gate-auth .auth-link {
  color: #315d57;
}

.access-gate-details {
  display: grid;
  gap: 12px;
  max-width: 52ch;
  margin: 34px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(247, 242, 232, .18);
  color: rgba(247, 242, 232, .72);
  font: 500 13px/1.5 system-ui, sans-serif;
  list-style: none;
}

.access-gate-details li {
  position: relative;
  padding-left: 20px;
}

.access-gate-details li::before {
  content: "";
  position: absolute;
  top: .55em;
  left: 0;
  width: 7px;
  height: 7px;
  border: 1px solid #d1a84f;
  transform: rotate(45deg);
}

.access-gate-details strong {
  color: #f7f2e8;
}

.access-gate-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin-bottom: 32px;
  border: 1px solid rgba(247, 242, 232, .5);
  border-radius: 50%;
  color: #f7f2e8;
}

.access-gate-mark .verdigris-mark {
  width: 36px;
  height: 36px;
  display: block;
}

.access-gate-eyebrow {
  margin: 0 0 16px;
  color: #d8bb78;
  font: 700 12px/1.35 system-ui, sans-serif;
  letter-spacing: .18em;
}

.access-gate h1 {
  max-width: 14ch;
  margin: 0;
  color: #f7f2e8;
  font: 600 clamp(38px, 7vw, 66px)/.98 "STIX Two Text", Georgia, serif;
  letter-spacing: -.035em;
}

.access-gate-copy {
  max-width: 52ch;
  margin: 24px 0 0;
  color: rgba(247, 242, 232, .8);
  font: 400 17px/1.65 system-ui, sans-serif;
}

.access-gate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.access-gate-btn,
.access-gate-link {
  min-height: 46px;
  padding: 0 20px;
  border-radius: 3px;
  font: 700 14px/1 system-ui, sans-serif;
  cursor: pointer;
}

.access-gate-btn {
  border: 1px solid #f7f2e8;
  color: #103a36;
  background: #f7f2e8;
}

.access-gate-link {
  border: 1px solid rgba(247, 242, 232, .45);
  color: #f7f2e8;
  background: transparent;
}

.access-gate-btn:hover,
.access-gate-link:hover {
  transform: translateY(-1px);
}

.access-gate-btn:focus-visible,
.access-gate-link:focus-visible {
  outline: 3px solid #d1a84f;
  outline-offset: 3px;
}

.access-gate-btn:disabled {
  cursor: wait;
  opacity: .65;
}

.access-gate-note {
  margin: 30px 0 0;
  padding-top: 22px;
  border-top: 1px solid rgba(247, 242, 232, .18);
  color: rgba(247, 242, 232, .58);
  font: 500 12px/1.5 system-ui, sans-serif;
}

html.lecture-mode .access-gate {
  color: #000 !important;
  background: #fff;
}

html.lecture-mode .access-gate-card {
  border: 1px solid #000;
  border-top-width: 4px;
  background: #fff;
  box-shadow: none;
}

html.lecture-mode .access-gate-mark,
html.lecture-mode .access-gate-eyebrow,
html.lecture-mode .access-gate h1,
html.lecture-mode .access-gate-copy,
html.lecture-mode .access-gate-note,
html.lecture-mode .access-gate-link {
  color: #000 !important;
  border-color: #000;
}

html.lecture-mode .verdigris-mark-point {
  fill: currentColor;
}

html.lecture-mode .access-gate-btn {
  color: #fff !important;
  border-color: #000;
  background: #000;
}

@media (max-width: 480px) {
  .access-gate { padding: 16px; }
  .access-gate-card { padding: 28px 22px; }
  .access-gate-card.access-gate-login { padding: 0; }
  .access-gate-intro { padding: 30px 24px; }
  .access-gate-intro .access-gate-mark { margin-bottom: 24px; }
  .access-gate-intro h1 { font-size: 38px; }
  .access-gate-auth { padding: 24px; }
  .auth-inline .auth-card { min-height: 0; max-height: none; }
  .access-gate-actions { display: grid; }
  .access-gate-btn, .access-gate-link { width: 100%; }
}

@media (max-width: 820px) {
  .access-gate-card.access-gate-login {
    grid-template-columns: 1fr;
  }

  .access-gate-intro {
    padding-bottom: 34px;
  }

  .access-gate-details {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .access-gate-btn,
  .access-gate-link { transition: none; }
  .access-gate-btn:hover,
  .access-gate-link:hover { transform: none; }
}

/* === Access approval administration === */
.admin-access-page {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(36px, 6vw, 80px) 0 72px;
  color: var(--color-text);
}

.admin-access-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--color-rule);
}

.admin-access-head,
.admin-access-head h1 {
  color: #f7f2e8;
}

.admin-access-head .eyebrow {
  color: #d8bb78;
}

.admin-access-head h1 {
  margin: 8px 0 12px;
  font: 600 clamp(42px, 6vw, 72px)/1 var(--font-display);
  letter-spacing: -.035em;
}

.admin-access-head p:last-child {
  max-width: 62ch;
  margin: 0;
  color: rgba(247, 242, 232, .72);
  font: 400 16px/1.65 var(--font-interface);
}

.admin-access-head-actions {
  flex: none;
  display: grid;
  justify-items: end;
  gap: 10px;
  font: 700 12px/1.4 var(--font-interface);
}

.admin-access-head-actions span { color: rgba(247, 242, 232, .66); }
.admin-access-head-actions a {
  color: #f7f2e8;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.admin-access-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 34px 0;
  overflow: hidden;
  background: var(--color-rule);
  border-radius: var(--radius-card);
}

.admin-access-summary article {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-height: 128px;
  padding: 24px;
  color: var(--color-text-muted);
  background: var(--color-surface);
  font: 700 12px/1.4 var(--font-interface);
}

.admin-access-summary strong {
  color: var(--color-text);
  font: 600 42px/1 var(--font-display);
}

.admin-access-panel {
  padding: clamp(24px, 4vw, 42px);
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-soft);
}

.admin-access-panel > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 24px;
}

.admin-access-panel h2 {
  margin: 5px 0 0;
  font: 600 34px/1.1 var(--font-display);
}

.admin-access-tools {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  font: 700 11px/1.2 var(--font-interface);
}

.admin-access-tools label {
  display: grid;
  gap: 6px;
  color: var(--color-text-muted);
}

.admin-access-tools select,
.admin-access-tools button {
  min-height: 44px;
  padding: 0 14px;
  color: var(--color-text);
  background: var(--color-canvas);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-control);
  font: 700 13px/1 var(--font-interface);
}

.admin-access-tools button {
  color: var(--color-on-action);
  background: var(--color-action);
  border-color: var(--color-action);
}

.admin-access-status {
  margin: 0;
  padding: 14px 0;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-rule);
  font: 600 12px/1.4 var(--font-interface);
}

.admin-access-list { display: grid; }

.admin-access-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(190px, .8fr) auto;
  align-items: center;
  gap: 24px;
  padding: 20px 0;
  border-top: 1px solid var(--color-rule);
}

.admin-access-person {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-access-initial {
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #f7f2e8;
  background: #1e5a53;
  border-radius: 50%;
  font: 600 18px/1 var(--font-display);
}

.admin-access-person h3,
.admin-access-person p {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-access-person h3 { font: 600 17px/1.3 var(--font-interface); }
.admin-access-person p,
.admin-access-meta small {
  color: var(--color-text-muted);
  font: 500 12px/1.5 var(--font-interface);
}

.admin-access-meta {
  display: grid;
  justify-items: start;
  gap: 6px;
}

.admin-access-badge {
  padding: 5px 9px;
  color: #73591f;
  background: #f4ead0;
  border-radius: 999px;
  font: 800 10px/1 var(--font-interface);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.admin-access-row[data-state="approved"] .admin-access-badge {
  color: #174d47;
  background: #dbe9e4;
}

.admin-access-row[data-state="rejected"] .admin-access-badge {
  color: #8a3424;
  background: #f4ded8;
}

.admin-access-actions { display: flex; gap: 8px; }
.admin-access-actions button {
  min-height: 42px;
  padding: 0 14px;
  border-radius: var(--radius-control);
  font: 750 12px/1 var(--font-interface);
}

.admin-review-approve {
  color: #fff;
  background: #1e5a53;
  border: 1px solid #1e5a53;
}

.admin-review-reject {
  color: var(--color-warning);
  background: transparent;
  border: 1px solid var(--color-control-border);
}

.admin-access-actions button:disabled {
  cursor: not-allowed;
  opacity: .4;
}

@media (max-width: 760px) {
  .admin-access-page { width: min(100% - 28px, 1180px); }
  .admin-access-head,
  .admin-access-panel > header { align-items: stretch; flex-direction: column; }
  .admin-access-head-actions { justify-items: start; }
  .admin-access-summary { grid-template-columns: 1fr; }
  .admin-access-summary article { min-height: 90px; }
  .admin-access-tools { align-items: stretch; flex-direction: column; }
  .admin-access-row { grid-template-columns: 1fr; gap: 14px; }
  .admin-access-actions button { flex: 1; }
}