:root{
  --ink:#1b241f; --ink-soft:#4a564e;
  --paper:#f1ede1; --surface:#fbfaf5; --surface-raised:#ffffff;
  --line:rgba(27,36,31,0.15); --line-strong:rgba(27,36,31,0.28);
  --accent:#2f5d56; --accent-soft:rgba(47,93,86,0.1); --accent-ink:#f1ede1;
  --accent-rgb:47,93,86;
  --brass:#a4711b; --brass-soft:rgba(164,113,27,0.12); --brass-rgb:164,113,27;
  --shadow: 0 1px 2px rgba(27,36,31,0.06), 0 8px 24px -14px rgba(27,36,31,0.2);
  --shadow-lift: 0 4px 10px rgba(27,36,31,0.08), 0 22px 44px -20px rgba(27,36,31,0.32);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#e9e6d9; --ink-soft:#b6c0b4;
    --paper:#141b17; --surface:#1a2320; --surface-raised:#202b26;
    --line:rgba(233,230,217,0.14); --line-strong:rgba(233,230,217,0.26);
    --accent:#7fb6ac; --accent-soft:rgba(127,182,172,0.14); --accent-ink:#122320;
    --accent-rgb:127,182,172;
    --brass:#d8b95a; --brass-soft:rgba(216,185,90,0.14); --brass-rgb:216,185,90;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.6);
    --shadow-lift: 0 6px 14px rgba(0,0,0,0.35), 0 28px 54px -20px rgba(0,0,0,0.7);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --ink:#e9e6d9; --ink-soft:#b6c0b4;
  --paper:#141b17; --surface:#1a2320; --surface-raised:#202b26;
  --line:rgba(233,230,217,0.14); --line-strong:rgba(233,230,217,0.26);
  --accent:#7fb6ac; --accent-soft:rgba(127,182,172,0.14); --accent-ink:#122320;
  --accent-rgb:127,182,172;
  --brass:#d8b95a; --brass-soft:rgba(216,185,90,0.14); --brass-rgb:216,185,90;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.6);
  --shadow-lift: 0 6px 14px rgba(0,0,0,0.35), 0 28px 54px -20px rgba(0,0,0,0.7);
  color-scheme: dark;
}
*{box-sizing:border-box;}
#node-canvas{ position:fixed; inset:0; width:100vw; height:100vh; z-index:-1; opacity:.5; pointer-events:none; }
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:'IBM Plex Sans', system-ui, sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:'Fraunces', Georgia, serif; font-weight:600; letter-spacing:-0.01em; text-wrap:balance; margin:0;}
a{ color:inherit; }
.wrap{ max-width:1120px; margin:0 auto; padding-inline:24px; }
.eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:12.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:8px; }
.eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--brass); display:inline-block; box-shadow:0 0 0 4px var(--brass-soft); }

header{ position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); transition:box-shadow .3s ease; }
header.scrolled{ box-shadow:0 8px 24px -18px rgba(0,0,0,0.35); }
.nav{ display:flex; align-items:center; justify-content:space-between; padding-block:16px; position:relative; }
.brand{ display:flex; align-items:center; gap:12px; font-family:'Fraunces', serif; font-weight:600; font-size:19px; text-decoration:none; }
.brand img{ width:40px; height:40px; }
.brand small{ display:block; font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:9.5px; letter-spacing:0.14em; color:var(--ink-soft); text-transform:uppercase; }
nav.links{ display:flex; align-items:center; gap:28px; font-size:14.5px; font-weight:500; }
nav.links a{ text-decoration:none; color:var(--ink-soft); position:relative; padding-block:2px; transition:color .2s ease; }
nav.links a::after{ content:""; position:absolute; left:0; right:100%; bottom:-2px; height:1.5px; background:var(--accent); transition:right .25s ease; }
nav.links a:hover{ color:var(--ink); }
nav.links a:hover::after{ right:0; }
.nav-right{ display:flex; align-items:center; gap:18px; }
.cta-btn{ background:var(--accent); color:var(--accent-ink); border:none; border-radius:8px; padding:10px 18px; font-family:'IBM Plex Sans'; font-weight:600; font-size:14px; text-decoration:none; display:inline-block; box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease, filter .2s ease; cursor:pointer; }
.cta-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lift); filter:brightness(1.06); }
.btn-ghost{ border:1.5px solid var(--line-strong); border-radius:8px; padding:10px 18px; font-weight:600; font-size:14px; text-decoration:none; color:var(--ink); display:inline-block; transition:border-color .2s ease, background .2s ease, transform .2s ease; }
.btn-ghost:hover{ border-color:var(--accent); background:var(--accent-soft); transform:translateY(-2px); }

.menu-btn{ display:none; width:38px; height:38px; border-radius:9px; border:1.5px solid var(--line-strong); background:var(--surface-raised); align-items:center; justify-content:center; cursor:pointer; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after{ content:""; display:block; width:16px; height:1.6px; background:var(--ink); position:relative; transition:transform .25s ease, opacity .25s ease; }
.menu-btn span::before{ content:""; position:absolute; top:-5px; width:16px; height:1.6px; background:var(--ink); }
.menu-btn span::after{ content:""; position:absolute; top:5px; width:16px; height:1.6px; background:var(--ink); }
.menu-btn[aria-expanded="true"] span{ background:transparent; }
.menu-btn[aria-expanded="true"] span::before{ transform:translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after{ transform:translateY(-5px) rotate(-45deg); }

.mobile-panel{ display:none; position:absolute; top:100%; left:0; right:0; background:var(--surface-raised); border-bottom:1px solid var(--line); box-shadow:var(--shadow-lift); padding:18px 24px 22px; flex-direction:column; gap:4px; }
.mobile-panel.open{ display:flex; }
.mobile-panel a{ text-decoration:none; color:var(--ink); font-size:15.5px; padding:11px 4px; border-bottom:1px solid var(--line); }
.mobile-panel a:last-child{ border-bottom:none; }

@media (max-width:860px){ nav.links{ display:none; } .menu-btn{ display:flex; } }
@media (max-width:520px){
  .nav-right .cta-btn{ display:none; }
  .mobile-panel a.mobile-cta{ background:var(--accent); color:var(--accent-ink); border-radius:8px; text-align:center; font-weight:600; border-bottom:none; margin-top:8px; }
}

.article{ padding-block:56px 80px; max-width:760px; }
.meta{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-soft); display:flex; gap:10px; align-items:center; margin-bottom:18px; }
.meta .badge{ background:var(--brass-soft); color:var(--brass); padding:3px 9px; border-radius:999px; font-weight:600; }
.article h1{ font-size:clamp(28px,4vw,40px); line-height:1.12; }
.dek{ font-size:17.5px; color:var(--ink-soft); margin-top:16px; max-width:60ch; }
.body{ margin-top:32px; font-size:16.5px; }
.body p{ margin:0 0 20px; max-width:66ch; }
.body strong{ color:var(--ink); }
.tech-note{ background:var(--accent-soft); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:10px; padding:20px 22px; margin:28px 0; max-width:66ch; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease; }
.tech-note:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.tech-note-label{ font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px; }
.tech-note p{ margin:0; font-size:15px; }
.tech-note a{ color:var(--accent); font-weight:600; text-decoration:underline; }
.share-row{ margin-top:40px; border-top:1px solid var(--line); padding-top:28px; }

footer{ border-top:1px solid var(--line); padding-block:36px; }
.footer-grid{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; }
.footer-links{ display:flex; gap:22px; font-size:13.5px; color:var(--ink-soft); flex-wrap:wrap; }
.footer-links a{ text-decoration:none; transition:color .2s ease; }
.footer-links a:hover{ color:var(--accent); }
.footer-legal{ font-size:12px; color:var(--ink-soft); margin-top:18px; }