/* The site's visual vocabulary. Component and book styles consume these roles. */
:root {
  color-scheme:light;
  font-synthesis-style:none;
  --ds-page:#f0f1f5; --ds-surface:#fff; --ds-ink:#202329; --ds-body:#4b5059;
  --ds-muted:#646a75; --ds-line:#e1e4eb; --ds-line-strong:#bec5d0;
  --ds-primary:#24272d; --ds-primary-hover:#40454e; --ds-on-primary:#fff;
  --ds-tint:#f0f1f5; --ds-hint:#47668b; --ds-focus:#416bb3; --ds-study:#456da4;
  --ds-green:#28775c; --ds-green-soft:#e8f6ef; --ds-cyan:#27697e; --ds-cyan-soft:#e7f5fb;
  --ds-purple:#8050a2; --ds-purple-soft:#f4ecfa; --ds-error:#b03240; --ds-edge:rgba(47,58,74,.035);
  --ds-shadow:0 4px 12px rgba(52,72,84,.035); --ds-rail:0px;
  --ds-font:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ds-mono:ui-monospace,'Cascadia Code',Consolas,monospace;
  --ds-radius:12px; --ds-gutter:24px; --ds-width:1280px;
  --ds-space-1:4px; --ds-space-2:8px; --ds-space-3:12px; --ds-space-4:16px;
  --ds-space-5:24px; --ds-space-6:32px; --ds-space-7:48px; --ds-space-8:64px;
  --ds-section:32px; --ds-header:88px; --frame-inset:16px;
  /* Type and rhythm for portfolio pages. Book reading sizes live in book.css. */
  --ds-text-xs:11px; --ds-text-sm:13px; --ds-text-md:15px; --ds-text-lg:16px;
  --ds-h1:40px; --ds-h1-page:36px; --ds-h2:26px; --ds-h3:17px;
  --ds-panel-pad:28px; --ds-gap:20px;
  /* Project artwork grounds: light pastels behind light screenshots. */
  --tile-portfolio:#e7f5fb; --tile-omnifood:#faeedf; --tile-modern-page:#dde8f8; --tile-pig-game:#ecdbe4;
  /* Compatibility roles keep preserved mathematical rendering independent. */
  --paper:var(--ds-page); --sheet:var(--ds-surface); --ink:var(--ds-ink);
  --ink-soft:var(--ds-body); --muted:var(--ds-muted); --muted-soft:var(--ds-muted);
  --line:var(--ds-line); --line-soft:var(--ds-line);
  --research:var(--ds-study); --frontend:var(--ds-cyan); --tutoring:var(--ds-purple);
  --research-soft:var(--ds-tint); --frontend-soft:var(--ds-tint); --tutoring-soft:var(--ds-tint);
  --research-tint:var(--ds-line-strong); --frontend-tint:var(--ds-line-strong); --tutoring-tint:var(--ds-line-strong);
  --pillar:var(--ds-primary); --pillar-soft:var(--ds-tint); --pillar-tint:var(--ds-line-strong);
  --sans:var(--ds-font); --serif:var(--ds-font); --mono:var(--ds-mono);
  --surface-page:var(--ds-page); --surface-raised:var(--ds-surface); --surface-sunken:var(--ds-page);
  --text-strong:var(--ds-ink); --text-body:var(--ds-body); --text-muted:var(--ds-muted);
  --text-faint:var(--ds-muted); --text-secondary:var(--ds-body); --text-chrome:var(--ds-muted);
  --text-on-primary:var(--ds-on-primary); --font-ui:var(--ds-font);
  --border:var(--ds-line); --border-strong:var(--ds-line-strong);
  --primary:var(--ds-primary); --primary-hover:var(--ds-primary-hover); --primary-strong:var(--ds-primary);
  --primary-tint:var(--ds-tint); --primary-line:var(--ds-line-strong);
  --accent:var(--ds-primary); --accent-strong:var(--ds-primary); --accent-tint:var(--ds-tint); --accent-line:var(--ds-line-strong);
  --blue:var(--ds-primary); --blue-deep:var(--ds-primary); --blue-tint:var(--ds-tint); --blue-line:var(--ds-line-strong); --mist:var(--ds-page);
  --violet:var(--ds-primary); --violet-tint:var(--ds-tint); --violet-line:var(--ds-line-strong);
  --sand-50:var(--ds-surface); --sand-100:var(--ds-page); --sand-200:var(--ds-page); --sand-300:var(--ds-line); --sand-400:var(--ds-line-strong);
  --brown-600:var(--ds-muted); --brown-700:var(--ds-body); --brown-800:var(--ds-body); --brown-900:var(--ds-ink);
  --green-50:var(--ds-tint); --green-100:var(--ds-line-strong); --green-600:var(--ds-primary); --green-700:var(--ds-primary); --green-800:var(--ds-primary-hover);
  --clay-50:var(--ds-tint); --clay-100:var(--ds-line-strong); --clay-600:var(--ds-primary); --clay-700:var(--ds-primary-hover);
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px;
}
/* Dark is a screen theme. Paper always prints with the light roles below. */
@media screen { :root[data-theme="dark"] {
  color-scheme:dark;
  --ds-page:#17191e; --ds-surface:#22252c; --ds-ink:#eef0f5; --ds-body:#c7cbd4;
  --ds-muted:#a3acbc; --ds-line:#363c48; --ds-line-strong:#586375;
  --ds-primary:#edf0f5; --ds-primary-hover:#d1d7e2; --ds-on-primary:#22252c;
  --ds-tint:#2b303a; --ds-hint:#a4bce0; --ds-focus:#9ebff5; --ds-study:#9cb9e4;
  --ds-green:#8bd7b8; --ds-green-soft:#253c33; --ds-cyan:#8bcee3; --ds-cyan-soft:#243944;
  --ds-purple:#d4b1ee; --ds-purple-soft:#3a2d46; --ds-error:#ffa1ab; --ds-edge:rgba(255,255,255,.04);
  --tile-portfolio:#223540; --tile-omnifood:#3b3128; --tile-modern-page:#27324a; --tile-pig-game:#3a2b34;
} }
@media print { :root {color-scheme:light; --ds-page:#fff; --ds-surface:#fff; --ds-ink:#000; --ds-body:#000; --ds-primary:#000; --ds-muted:#333;} }

@media (width >= 800px){:root{--ds-rail:80px;--ds-header:0px}}
@media (width >= 1200px){:root{--ds-rail:248px}}
/* Very wide windows: a wider page column, so the frame is not mostly empty bands. */
@media (width >= 1760px){:root{--ds-width:1440px}}
@media (width < 1000px){:root{--ds-h1:36px;--ds-h1-page:34px;--ds-h2:24px}}
@media (width < 600px){:root{--ds-h1:31px;--ds-h1-page:30px;--ds-h2:22px;--ds-h3:16px;--ds-panel-pad:20px;--ds-gap:16px}}