/* ===========================================================================
   The look, as the design drew it.

   This is the design's own stylesheet with its `:root` removed: the tokens come
   from `tokens.css`, lifted out of `src/styles/tokens.css`, so the page and the
   program cannot drift apart and the dark face is the app's rather than an
   approximation of it.

   The rules at the foot are its `style-hover` and `style-active` attributes,
   which a prototype writes inline because the medium has nowhere else to put
   them. Six hovers and four presses, each now said once.
   =========================================================================== */
:root[data-theme="dark"]{
  --bg:#14171b; --surface:#1b1f24; --surface-alt:#20252b; --surface-raised:#242a31;
  --border:#2c323a; --border-soft:#262c33; --text:#e7e7e4;
  --accent:#7ca7d1; --accent-hover:#94b9dd; --accent-soft:#22344a; --accent-contrast:#0e1620;
  --math-accent:#6fbfa9; --math-soft:#1c332e; --ok:#79c396; --warn:#d9b271;
  --paper:#1e2329; --paper-shadow:0 1px 2px rgba(0,0,0,0.4), 0 18px 40px -12px rgba(0,0,0,0.6);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.3); --shadow-md:0 8px 24px rgba(0,0,0,0.4);
  --selection:color-mix(in srgb, #7ea6d4 30%, transparent);
}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;transition:background-color var(--dur-slow) var(--ease-out)}
/* A link is drawn the way the app draws one (`.doc-link`): the accent, and a
   thin underline held back to 45% until the pointer arrives. Bare `color` left
   the download links looking like unstyled HTML — the underline is the loudest
   thing about a default link, and it was untouched. */
/* The bar's and the footer's links are chrome, not prose: they carry their own
   hover and must not be underlined. */
header a, footer a, [data-tbh] a { text-decoration: none; }
::selection{background:var(--selection)}
:root[data-theming] body *{transition:background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out)}
@keyframes caret-blink{50%{background:transparent}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes icon-turn{from{opacity:0;transform:rotate(-120deg) scale(0.5)}to{opacity:1;transform:none}}
@keyframes completion-dot{0%,70%,100%{transform:none;opacity:0.45}35%{transform:translateY(-3px);opacity:1}}
@keyframes math-ask-dot{0%,60%,100%{opacity:0.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@keyframes math-ask-breathe{0%,100%{border-color:var(--border)}50%{border-color:color-mix(in srgb, var(--accent) 55%, var(--border))}}
[data-ask-dots] i{width:3px;height:3px;border-radius:50%;background:var(--accent);animation:math-ask-dot 1.1s ease-in-out infinite}
[data-ask-dots] i:nth-child(2){animation-delay:0.14s}
[data-ask-dots] i:nth-child(3){animation-delay:0.28s}
[data-ask-box][data-working="1"]{animation:math-ask-breathe 1.8s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){[data-ask-box][data-working="1"],[data-ask-dots] i{animation:none}}
[data-tbh]{box-sizing:border-box}
@media (max-width: 1080px){[data-pillar-grid]{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width: 560px){[data-pillar-grid]{grid-template-columns:minmax(0,1fr) !important}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;scroll-behavior:auto !important}}