/* Stellar design tokens, copied exactly from the chosen front page (rework-centered-quiet, 2026-10-21).
   Every page of the restyled site uses these. See ~/Desktop/Stellar/DESIGN-PRINCIPLES.md. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
:root{
  color-scheme:light;
  --ink:#121614;
  --text:#47504c;
  --muted:#5f6864;
  --line:#e7eae8;
  --line-2:#d8ddda;
  --canvas:#ffffff;
  --soft:#f7f8f7;
  --soft-2:#f0f2f1;
  --green:#13863f;
  --green-d:#0e7339;
  --green-dd:#0b5a2d;
  --green-50:#e9f6ee;
  --green-100:#d3eedd;
  --sky:#2479c4;
  --sky-50:#e8f3fc;
  --coral:#c23e27;
  --coral-50:#fdeeea;
  --amber:#a15f00;
  --amber-50:#fdf3e1;
  --teal:#0d7a73;
  --teal-50:#e2f5f3;
  --rose:#c23a5b;
  --rose-50:#fcebef;
  --navy:#121614;
  --navy-2:#2b3330;
  --r-sm:12px;
  --r:18px;
  --r-lg:24px;
  --r-xl:32px;
  --shadow-sm:0 1px 2px rgba(18,22,20,.04);
  --shadow:0 1px 2px rgba(18,22,20,.04);
  --shadow-lg:0 1px 3px rgba(18,22,20,.05);
  --font-h:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1200px;
  --btn:#121614;
  --btn-h:#2b322f;
}

/* ===== Corners, shadows and motion (polish wave, 2026-10-22). Appended; the tokens above are unchanged.
   Rules in DESIGN-PRINCIPLES.md, section "Corners, shadows and motion". ===== */
:root{
  /* corners: square for structure, 6 / 10 / 16 for objects, pill for actions */
  --radius-0:0;          /* full-bleed bands, tables, section rules, the footer */
  --radius-s:6px;        /* small controls inside product UI: answer keys, kbd, menu rows, checkboxes */
  --radius-m:10px;       /* inputs, menus, popovers, tooltips, toasts, dialogs, images inside cards */
  --radius-l:16px;       /* cards, product mock-ups ("sheets"), feature panels */
  --radius-pill:999px;   /* buttons, product-UI chips, avatars */
  /* paper: warm off-white canvas, crisp white sheets on it */
  --paper:#f8f8f6;
  --sheet:#ffffff;
  --rule-dash:#d3d8d5;
  --grid-line:rgba(18,22,20,.045);
  /* shadows: neutral ink, never coloured, never hard-offset */
  --shadow-rest:0 1px 2px rgba(18,22,20,.05);
  --shadow-raised:0 1px 2px rgba(18,22,20,.06),0 12px 32px -12px rgba(18,22,20,.22);
  --shadow-float:0 2px 4px rgba(18,22,20,.05),0 24px 56px -20px rgba(18,22,20,.30);
  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);         /* ease-out: quick start, soft landing */
  --ease-io:cubic-bezier(.4,0,.2,1);       /* open/close of menus and accordions */
  --dur-1:160ms;   /* hover colour, press */
  --dur-2:240ms;   /* hover lift, menus, popups, tab underline */
  --dur-3:600ms;   /* scroll reveal */
  --lift:-2px;     /* hover lift for cards and sheets */
  --lift-btn:-1px; /* hover lift for buttons */
  --rise:16px;     /* scroll reveal distance */
  --stagger:70ms;  /* delay between siblings in a reveal group */
  /* footer (dark in both themes) */
  --foot-bg:#0f1713;
  --foot-text:#c9d2cd;
  --foot-muted:#8c9a93;
  --foot-line:rgba(255,255,255,.10);
  --foot-dot-1:#2c5a40;
  --foot-dot-2:#1f4330;
}
@media (prefers-reduced-motion:reduce){
  :root:root{--dur-1:0ms;--dur-2:0ms;--dur-3:0ms;--lift:0px;--lift-btn:0px;--rise:0px;--stagger:0ms}
}
/* dark theme: calm charcoal surfaces (never pure black), off-white text, slightly lighter hairlines, the same green */
html.dark{
  --ink:#eef1ef;
  --text:#c3cbc7;
  --muted:#97a19c;
  --line:#2a312e;
  --line-2:#3a423e;
  --canvas:#141816;
  --soft:#1a1f1d;
  --soft-2:#212724;
  --green:#3fb26b;      /* the Stellar green, lifted for 4.5:1 on charcoal */
  --green-d:#4cc27a;
  --green-dd:#6fd394;
  --green-50:#16271d;
  --green-100:#1d3a28;
  --sky:#828d88; --coral:#f06f58; --amber:#e59934; --teal:#3cc0b6; --rose:#ec6a88;
  --sky-50:#252928; --coral-50:#2c1a17; --amber-50:#2a2213; --teal-50:#132624; --rose-50:#2b1820;
  --navy:#252928; --navy-2:#2f3532;
  --btn:#eef1ef;
  --btn-h:#d6dcd9;
  --btn-text:#121614;
  --paper:#121614;
  --sheet:#1a1f1d;
  --rule-dash:#3a423e;
  --grid-line:rgba(255,255,255,.035);
  --shadow-sm:0 1px 2px rgba(0,0,0,.30);
  --shadow:0 1px 2px rgba(0,0,0,.30);
  --shadow-lg:0 1px 3px rgba(0,0,0,.35);
  --shadow-rest:0 1px 2px rgba(0,0,0,.30);
  --shadow-raised:0 1px 2px rgba(0,0,0,.35),0 12px 32px -12px rgba(0,0,0,.60);
  --shadow-float:0 2px 4px rgba(0,0,0,.35),0 24px 56px -20px rgba(0,0,0,.70);
  --foot-bg:#0c120f;
  color-scheme:dark;
}
:root{--btn-text:#ffffff}

/* ===== Current system (2026-10-22 evening). Appended; nothing above changes. Measured from the live home page
   (pages/_home/rework.css + sections.css) after the owner's rulings of 20:07 and 20:40. Rules in DESIGN-PRINCIPLES.md,
   section "Current system (2026-10-22 evening)". Classes that use these: _style/system.css (notes/prop-system.md). ===== */
:root{
  /* section bands: neutral paper shades only, never green or mint */
  --band-white:#ffffff;
  --band-paper:#f8f8f6;    /* = --paper */
  --band-shade:#f2f2ef;
  /* feature panels behind mock-ups, one step darker than the band they sit on */
  --panel:#f1f1ee;
  --panel-on-white:#f2f2ef;
  --panel-on-paper:#efefeb;
  --panel-on-shade:#e9e9e5;
  /* faint textures: half strength, fading to transparent toward all four edges */
  --tex-dot:rgba(18,22,20,.13);     /* 1px-radius dots on a 14px pitch, on shade bands */
  --tex-grid:rgba(18,22,20,.06);    /* 1px graph-paper lines on a 32px pitch, on paper bands */
  --tex-opacity:.5;
  --tex-fade:radial-gradient(ellipse at center,#000 35%,transparent 92%);
  /* white "pop out" sheets (product mock-ups) */
  --sheet-edge:rgba(18,22,20,.06);
  /* the corner scale: --radius-0 / -s 6 / -m 10 / -l 16 (above), plus the big inner corner of a bleed panel */
  --radius-bleed:36px;
  /* spacing */
  --sec-y:96px;            /* section padding top and bottom */
  --sec-y-tight:56px;      /* a stats band */
  --bleed-pad:48px;        /* padding inside a bleed panel */
  --wrap-pad:32px;         /* side padding of .wrap */
  /* unboxed stats */
  --stat-num:34px;
  --stat-pad:28px;
  /* comparison table */
  --cmp-cell-y:7px;
  --cmp-cell-x:16px;
  --cmp-hi:var(--green-50);  /* the Stellar column: green because it means "this is us / included" */
}
@media (max-width:1024px){:root{--radius-bleed:32px;--bleed-pad:32px}}
@media (max-width:720px){:root{--radius-bleed:28px;--bleed-pad:20px;--sec-y:64px;--wrap-pad:20px;--stat-num:28px;--stat-pad:8px;--cmp-cell-y:8px}}
html.dark{
  --band-white:#171a19;
  --band-paper:#121614;
  --band-shade:#1b1e1d;
  --panel:#171c1a;
  --panel-on-white:#202423;
  --panel-on-paper:#1e2221;
  --panel-on-shade:#252928;
  --tex-dot:rgba(255,255,255,.07);
  --tex-grid:rgba(255,255,255,.045);
  --sheet-edge:#2a312e;
}
/* swarm R15 site-shared: the owner ruled out blue/sky accents ("Remove leftovers of the old app look: blue/sky/indigo
   accents"), but --sky was still #2479c4 and --sky-50 a pale blue (navy in dark). They still feed selected-answer
   rings, app text that was purple, and the help/note chips in other files. Both now point at neutral ink shades, so
   anything that reaches for "sky" draws in the site's greys instead of blue. White text on --sky stays at 4.5:1 or
   more in both themes, and dark --sky as text on charcoal keeps the old blue's 3.9:1. */
html:root:root{--muted:#5f6864;--coral:#c23e27;--sky:#4f5955;--sky-50:var(--soft-2);--navy:#121614;--navy-2:#2b3330}
html.dark:root:root{--muted:#97a19c;--sky:#828d88;--sky-50:#252928;--coral:#f06f58;--amber:#e59934;--teal:#3cc0b6;--rose:#ec6a88;--navy:#252928;--navy-2:#2f3532;--shadow-sm:0 1px 2px rgba(0,0,0,.30);--shadow:0 1px 2px rgba(0,0,0,.30);--shadow-lg:0 1px 3px rgba(0,0,0,.35);--shadow-rest:0 1px 2px rgba(0,0,0,.30);--shadow-raised:0 1px 2px rgba(0,0,0,.35),0 12px 32px -12px rgba(0,0,0,.60);--shadow-float:0 2px 4px rgba(0,0,0,.35),0 24px 56px -20px rgba(0,0,0,.70)}
/* swarm R30 site-shared theme (inventory #49): public pages get their light/dark button from marketing-theme.js on
   DOMContentLoaded (or rework.js, deferred), so the header could paint a frame without it and then the Launch App and
   menu buttons jumped 48px when it arrived. Until the button is there, its first slot in .nav-cta holds a twin of it:
   the same 40px box and 19px moon (sun in dark), drawn from html.dark, which is set in <head>. The child-only :has()
   only looks at .nav-cta's few children. */
.nav-cta:not(:has(>.sx-theme))::before{content:"";flex:none;align-self:center;width:40px;height:40px;background:var(--text);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M20.5 13a8.5 8.5 0 0 1-9.5-9.5A8.5 8.5 0 1 0 20.5 13Z'/%3E%3C/svg%3E") center/19px 19px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Cpath d='M20.5 13a8.5 8.5 0 0 1-9.5-9.5A8.5 8.5 0 1 0 20.5 13Z'/%3E%3C/svg%3E") center/19px 19px no-repeat}
html.dark .nav-cta:not(:has(>.sx-theme))::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2m0 16v2M2 12h2m16 0h2M5 5l1.5 1.5m11 11L19 19M5 19l1.5-1.5m11-11L19 5'/%3E%3C/svg%3E")}
/* swarm R32 site-shared theme: on phones and tablets a tap leaves the light/dark button in :hover, so after switching it
   stayed a filled grey box (in the new theme's --soft-2) until the next tap elsewhere. Touch screens keep the resting
   look and get the grey only while the finger is down. Specificity beats rework.css and base.css's #sx-nav rules. */
@media (hover:none){
  html .sx-theme:hover,html #sx-nav .sx-theme:hover{background:none;color:var(--text)}
  html .sx-theme:active,html #sx-nav .sx-theme:active{background:var(--soft-2);color:var(--ink)}
}
html .sx-theme:active svg,html #sx-nav .sx-theme:active svg{transform:rotate(-20deg) scale(.92)}
/* swarm R34 site-shared theme: (1) Scout R32 item 17 expands the light/dark toggle tap target to 44x44px on touch
   and mobile screens via an invisible pseudo-element overlay without changing visible 40px dimensions or desktop
   mouse hitboxes. Below 340px, where the button is 36px wide, the pseudo-element expands horizontally to maintain
   the full 44x44px target. (2) Below 340px, size the initial unhydrated theme placeholder to 36px so the header
   buttons do not shift 4px when the client script mounts .sx-theme.
   swarm R36 site-shared theme: extended 44x44px tap target coverage to tablets and landscape touch screens up to 1024px. */
@media (pointer:coarse),(max-width:1024px){
  html .sx-theme,html #sx-nav .sx-theme{position:relative}
  html .sx-theme::after,html #sx-nav .sx-theme::after{content:"";position:absolute;inset:-2px}
}
@media (min-width:900px){
  .nav-cta:not(:has(>.sx-theme))::before{width:44px;height:44px}
}
@media (max-width:339px){
  .nav-cta:not(:has(>.sx-theme))::before{width:36px}
  html .sx-theme::after,html #sx-nav .sx-theme::after{inset:-2px -4px}
}
/* swarm R41 site-shared theme: with "reduce motion" on, the icon's transition is off, so the press rotation above
   jumped the moon/sun 20 degrees in one frame and back on release. Those visitors keep only the small press shrink. */
@media (prefers-reduced-motion:reduce){
  html .sx-theme:active svg,html #sx-nav .sx-theme:active svg{transform:scale(.92)}
}

/* swarm R42 site-shared buttons: standard button tokens for primary and secondary pill buttons (inventory rows 86 and 87) */
:is(.btn-primary,button.btn-primary){background:var(--btn);color:var(--btn-text);border:1px solid transparent;border-radius:var(--radius-pill);transition:transform var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),color var(--dur-1) var(--ease)}
:is(.btn-primary,button.btn-primary):not(:disabled):hover{background:var(--btn-h);transform:translateY(var(--lift-btn));box-shadow:var(--shadow-raised)}
:is(.btn-primary,button.btn-primary):not(:disabled):active{transform:translateY(0) scale(.98);transition-duration:80ms}

:is(.btn-secondary,button.btn-secondary){background:var(--paper);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--radius-pill);transition:transform var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),color var(--dur-1) var(--ease)}
:is(.btn-secondary,button.btn-secondary):not(:disabled):hover{background:var(--soft);border-color:var(--line-2);transform:translateY(var(--lift-btn));box-shadow:var(--shadow-rest)}
:is(.btn-secondary,button.btn-secondary):not(:disabled):active{transform:translateY(0) scale(.98);transition-duration:80ms}

@media (prefers-reduced-motion:reduce){
  :is(.btn-primary,.btn-secondary,button.btn-primary,button.btn-secondary):is(:hover,:active){transform:none!important}
}


/* swarm R52 site-shared (idle 1027-0238 speed-jank item 4): until Inter arrives from Google Fonts (0.3 to 0.6 s), text
   was drawn in the system font, which is wider, so on every load the header menu slid about 7px and lines re-wrapped
   when Inter swapped in. A metric-matched Arial stand-in (the standard Inter-on-Arial overrides) keeps the first frame
   the same width as the final one. Latin only, so translated pages keep their own script fallbacks. html:root (0,1,1)
   wins over rework.css's :root, which sets the same two tokens and loads after this file on some pages, but still loses
   to the later html:is(:lang(ar),:lang(fa),:lang(ur)) Noto Naskh stack of those locale pages. */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica"),local("Liberation Sans");size-adjust:107.12%;ascent-override:90.44%;descent-override:22.52%;line-gap-override:0%;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
html:root{
  --font-h:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font:"Inter","Inter Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* swarm R52 site-shared (idle 1027-0350 links-forms item 8): on phones iOS zooms the whole page when a field under 16px
   gets focus. /courses/, /blog/, the category pages and the locale footer used 13.5 to 15px, while why-stellar,
   get-involved and competitive-math were already 16px. One rule for every public field below 768px (the app keeps its
   own sizes, app-pages owns those). */
@media (max-width:767px){
  html:not([data-route^="app"]) :is(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=reset],[type=image],[type=hidden]),select,textarea){font-size:16px}
  /* iOS zooms by the field's own size, not the placeholder's, so the hint keeps one size step less and the short phone
     hints of /courses/ and /blog/ still fit their field at 320 and 375 */
  html:not([data-route^="app"]) :is(input,textarea)::placeholder{font-size:15px}
}

/* swarm R57 site-shared (owner 1940: "whenever I click a dropdown or anything like a pop up ... the scrollbar
   disappears. I dont like that."): public pages do not load base.css, so its fix (scrollbar room always kept) never
   reached them. Opening the course search, the "?" help or the phone menu set html overflow:hidden, the scrollbar
   vanished and the whole page, header included, jumped 7.5px sideways at 1440. The overflow half of base.css's rule, limited to mouse
   screens (phones have overlay scrollbars and keep the scroll lock). site-keys.js and the menus stop the wheel from
   scrolling the page behind an open pop-up instead. No scrollbar-gutter: overflow-y:scroll already keeps a classic
   scrollbar, and the gutter alone left an empty 15px strip where scrollbars are hidden (headless screenshots). */
@media (hover:hover) and (pointer:fine){
  html{overflow-y:scroll!important}
}