:root { --accent: #E6A435; --accent-soft: rgba(230,164,53,0.55); }

  /* ---- Theme tokens. Default (no attr) = dark. ---- */
  :root, :root[data-theme="dark"] {
    --bg: #000000; --bg-alt: #0a0a0a; --surface: #0d0d0d; --surface-2: #161616;
    --fg: #ffffff; --fg-2: #cfcfcf; --fg-3: #9a9a9a; --fg-4: #7a7a7a; --fg-5: #5f5f5f;
    --rule: #2a2a2a; --rule-soft: #1a1a1a;
    --inv-bg: #0e0e0e; --inv-bg-2: #161616; --inv-fg: #ffffff; --inv-fg-2: #cccccc; --inv-fg-3: #8a8a8a;
    --inv-rule: #2e2e2e; --inv-rule-2: #222222;
    --nav-bg: rgba(8,8,8,0.9); --grid-line: #141414;
  }
  :root[data-theme="light"] {
    --bg: #eeedeb; --bg-alt: #e5e4e1; --surface: #fcfcfb; --surface-2: #f3f2f0;
    --fg: #000000; --fg-2: #444444; --fg-3: #666666; --fg-4: #888888; --fg-5: #aaaaaa;
    --rule: #c2c1be; --rule-soft: #dad9d6;
    --inv-bg: #e4e3e0; --inv-bg-2: #dbdad7; --inv-fg: #111111; --inv-fg-2: #444444; --inv-fg-3: #666666;
    --inv-rule: #cfcecb; --inv-rule-2: #d9d8d5;
    --nav-bg: rgba(238,237,235,0.92); --grid-line: #e3e2df;
  }

  html { scroll-behavior: smooth; }
  html, body { margin: 0; background: var(--bg); color: var(--fg);
    font-family: 'Space Mono', ui-monospace, Menlo, Consolas, monospace;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    transition: background 240ms cubic-bezier(0.2,0,0,1), color 240ms cubic-bezier(0.2,0,0,1); }
  *, *::before, *::after { box-sizing: border-box; }
  ::selection { background: var(--accent); color: #000; }
  @keyframes th-blink { 50% { opacity: 0; } }
  @keyframes th-in { from { transform: translateY(12px); } to { transform: none; } }
  @media (prefers-reduced-motion: no-preference) {
    .th-in { animation: th-in 560ms cubic-bezier(0.2,0,0,1); }
  }
  input::placeholder, textarea::placeholder { color: var(--inv-fg-3); }
  @media (max-width: 900px) {
    section > div, header > div, footer > div,
    nav > div { grid-template-columns: 1fr !important; }
  }