:root, [data-theme="dark"]{
    --bg: #050506;
    --bg-2:#0a0a0c;
    --panel:#0d0d10;
    --panel-2:#0a0a0d;
    --line: rgba(255,255,255,0.07);
    --line-2: rgba(255,255,255,0.12);
    --ink: #ededf0;
    --ink-dim:#9a9aa3;
    --ink-faint:#5e5e67;
    --accent:#2F74FF;
    --accent-glow: rgba(47,116,255,0.35);
    --accent-ink: #8ab4ff;
    --accent-tint: rgba(47,116,255,0.04);
    --accent-tint-2: rgba(47,116,255,0.08);
    --danger:#ff5c5c;
    --danger-ink:#ff8e8e;
    --danger-tint: rgba(255,92,92,0.08);
    --danger-border: rgba(255,92,92,0.2);
    --nav-bg: rgba(5,5,6,0.7);
    --code-bg: rgba(0,0,0,0.3);
    --track: rgba(255,255,255,0.06);
    --surface-soft: rgba(255,255,255,0.02);
    --surface-hover: rgba(255,255,255,0.015);
    --noise-dot: rgba(255,255,255,0.06);
    --scroll-thumb: rgba(255,255,255,0.08);
    --btn-primary-ink:#fff;
    --kbd-bg: rgba(255,255,255,0.02);
    --bars-neutral: var(--ink-dim);
    --logo-wordmark: var(--ink);
  }
  [data-theme="light"]{
    --bg: #fafaf7;
    --bg-2:#f2f2ee;
    --panel:#ffffff;
    --panel-2:#f8f8f4;
    --line: rgba(10,10,15,0.08);
    --line-2: rgba(10,10,15,0.14);
    --ink: #0b0b0f;
    --ink-dim:#52525b;
    --ink-faint:#8c8c96;
    --accent:#2F74FF;
    --accent-glow: rgba(47,116,255,0.22);
    --accent-ink: #1e4fcc;
    --accent-tint: rgba(47,116,255,0.06);
    --accent-tint-2: rgba(47,116,255,0.1);
    --danger:#d63b3b;
    --danger-ink:#b02828;
    --danger-tint: rgba(214,59,59,0.07);
    --danger-border: rgba(214,59,59,0.25);
    --nav-bg: rgba(250,250,247,0.75);
    --code-bg: #f5f5f1;
    --track: rgba(10,10,15,0.06);
    --surface-soft: rgba(10,10,15,0.02);
    --surface-hover: rgba(10,10,15,0.025);
    --noise-dot: rgba(10,10,15,0.05);
    --scroll-thumb: rgba(10,10,15,0.15);
    --btn-primary-ink:#fff;
    --kbd-bg: rgba(10,10,15,0.04);
    --bars-neutral: #c8c8c2;
    --logo-wordmark: var(--ink);
  }
  html,body{background:var(--bg); color:var(--ink);}
  body{
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-feature-settings: "ss01","cv11";
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
  }
  .font-display{font-family:'Space Grotesk', 'Inter', sans-serif; letter-spacing:-0.025em;}
  .font-mono{font-family:'JetBrains Mono', ui-monospace, monospace;}

  /* grid background */
  .bg-grid{
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: -1px -1px;
  }
  .bg-grid-fade{
    mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 40%, transparent 85%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 40%, transparent 85%);
  }

  /* Site-wide subtle grid — every page gets the checkered backdrop */
  body::before{
    content:'';
    position: fixed;
    inset: 0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: -1px -1px;
    mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, black 40%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 100% 80% at 50% 30%, black 40%, transparent 90%);
    pointer-events: none;
    z-index: 0;
    opacity: .55;
  }
  body > *{ position: relative; z-index: 1; }

  .hairline{border-color: var(--line);}
  .hairline-2{border-color: var(--line-2);}

  .chip{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.35rem .6rem;border:1px solid var(--line-2);
    border-radius:999px;background:var(--surface-soft);
    font-size:11.5px; color:var(--ink-dim);
    font-family:'JetBrains Mono', monospace;
    letter-spacing:.02em;
  }
  .chip .dot{width:6px;height:6px;border-radius:999px;background:var(--accent); box-shadow:0 0 12px var(--accent-glow);}

  .btn{
    display:inline-flex;align-items:center;gap:.55rem;
    padding:.7rem 1rem; font-weight:500; font-size:14px;
    border-radius:8px; transition: all .15s ease;
    border:1px solid transparent;
  }
  .btn-primary{
    background: var(--accent); color: var(--btn-primary-ink);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 8px 30px -10px var(--accent-glow);
  }
  .btn-primary:hover{filter:brightness(1.08); transform: translateY(-1px);}
  .btn-ghost{
    color:var(--ink); background:transparent; border-color:var(--line-2);
  }
  .btn-ghost:hover{background:var(--surface-hover); border-color: var(--line-2);}

  .kbd{font-family:'JetBrains Mono',monospace; font-size:10.5px; padding:2px 5px;border:1px solid var(--line-2); border-radius:4px; color:var(--ink-dim); background:var(--kbd-bg);}

  /* Signal pulses */
  @keyframes pulse-dot{
    0%,100%{opacity:1; transform:scale(1);}
    50%{opacity:.4; transform:scale(.85);}
  }
  .pulse-dot{animation: pulse-dot 1.8s ease-in-out infinite;}

  @keyframes flow-row{
    0%{transform: translateX(0); opacity:0;}
    10%{opacity:1;}
    85%{opacity:1;}
    100%{transform: translateX(var(--flow-dx, 340px)); opacity:0;}
  }

  @keyframes stream-line{
    0%{stroke-dashoffset: 100;}
    100%{stroke-dashoffset: 0;}
  }
  .stream{
    stroke-dasharray: 3 6;
    animation: stream-line 2.2s linear infinite;
  }

  @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
  .caret{display:inline-block; width:1px; height:1em; background:var(--accent); vertical-align:-2px; margin-left:2px; animation:blink 1s step-end infinite;}

  .hover-card{transition: border-color .2s ease, background .2s ease, transform .2s ease;}
  .hover-card:hover{border-color: var(--line-2); background: var(--surface-hover);}

  .accent-ink{color: var(--accent-ink);}
  .accent-bg{background: var(--accent);}
  .accent-border{border-color: var(--accent);}

  /* Noise overlay for hero */
  .noise{
    background-image: radial-gradient(circle at 1px 1px, var(--noise-dot) 1px, transparent 1px);
    background-size: 3px 3px;
  }

  /* Ticker row that flows toward the node */
  .lead-row{
    position:absolute; left:0; top:0;
    display:flex; align-items:center; gap:10px;
    font-family:'JetBrains Mono',monospace; font-size:11px;
    padding:6px 10px; border:1px solid var(--line);
    background: var(--surface-soft);
    border-radius:6px;
    white-space:nowrap;
    color: var(--ink-dim);
    animation: flow-row linear infinite;
  }
  .lead-row .score{color: var(--ink-faint);}
  .lead-row.reject{opacity:.35; text-decoration:line-through; text-decoration-color: var(--danger);}

  /* Custom scrollbar in draft panel */
  .scroll-soft::-webkit-scrollbar{width:6px;height:6px;}
  .scroll-soft::-webkit-scrollbar-thumb{background: var(--scroll-thumb); border-radius:4px;}

  /* section dividers */
  .section-label{
    font-family:'JetBrains Mono',monospace;
    font-size:11px; color:var(--ink-faint);
    text-transform:uppercase; letter-spacing:.12em;
  }

  details>summary{list-style:none; cursor:pointer;}
  details>summary::-webkit-details-marker{display:none;}

  /* Tweaks panel */
  .tweaks-panel{
    position:fixed; right:20px; bottom:20px; z-index:80;
    width:300px;
    background: var(--panel); border:1px solid var(--line-2);
    border-radius:12px; padding:14px;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.4);
    font-size:12.5px;
    display:none;
    color: var(--ink);
  }
  .tweaks-panel.open{display:block;}
  .swatch{width:22px;height:22px;border-radius:6px; border:1px solid var(--line-2); cursor:pointer; transition: transform .1s;}
  .swatch:hover{transform: scale(1.08);}
  .swatch.sel{outline:2px solid var(--ink); outline-offset:2px;}
  .seg{display:flex; border:1px solid var(--line-2); border-radius:7px; overflow:hidden;}
  .seg button{flex:1; padding:6px 8px; font-size:12px; color:var(--ink-dim); background:transparent; transition:all .12s;}
  .seg button.sel{background:var(--accent); color:var(--btn-primary-ink);}

  /* theme-aware hover: a.hover\:text-white should go to --ink */
  [data-theme="light"] a.hover\:text-white:hover{color: var(--ink) !important;}
  [data-theme="dark"] a.hover\:text-white:hover{color: #fff !important;}