:root{
    --paper:#eef2f4; --surface:#f8fafb; --surface-2:#e4eaed;
    --ink:#16283a; --ink-soft:#556775; --ink-faint:#87969f;
    --line:#d3dce1; --line-soft:#e2e8eb;
    --accent:#0e7ab0; --accent-press:#0b6291; --hl:#bfe1f0;
    --sand:#c2823a; --focus:#0e7ab0; --on-dark:#f2f7f9; --on-dark-dim:#9db3bf;
    --maxw:64rem;
    --font-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
    --font-body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
    --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --paper:#0d1620; --surface:#131f2b; --surface-2:#1b2836;
      --ink:#e7eef4; --ink-soft:#a6b5c1; --ink-faint:#71828f;
      --line:#26343f; --line-soft:#1d2a34;
      --accent:#3aa7dd; --accent-press:#5cb9e7; --hl:#1c4a5d; --sand:#d59a55; --focus:#3aa7dd;
    }
  }
  :root[data-theme="dark"]{
    --paper:#0d1620; --surface:#131f2b; --surface-2:#1b2836;
    --ink:#e7eef4; --ink-soft:#a6b5c1; --ink-faint:#71828f;
    --line:#26343f; --line-soft:#1d2a34;
    --accent:#3aa7dd; --accent-press:#5cb9e7; --hl:#1c4a5d; --sand:#d59a55; --focus:#3aa7dd;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *{animation:none!important;}}
  body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:1.02rem;line-height:1.6;-webkit-font-smoothing:antialiased;}
  a{color:inherit;}
  :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:clamp(1.15rem,4vw,2.5rem);}

  .site{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line-soft);}
  .site .wrap{display:flex;align-items:center;gap:1.2rem;height:4.25rem;}
  .brand{font-family:var(--font-display);font-weight:800;font-size:1.3rem;letter-spacing:-0.02em;text-decoration:none;color:var(--ink);cursor:pointer;}
  .brand i{color:var(--accent);font-style:normal;}
  .nav{display:flex;gap:1.3rem;margin-left:auto;font-size:0.93rem;}
  .nav a{text-decoration:none;color:var(--ink-soft);padding:.3rem 0;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;}
  .nav a:hover{color:var(--ink);border-bottom-color:var(--accent);}
  .nav a.active{color:var(--ink);border-bottom-color:var(--accent);}
  .btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-body);font-weight:600;font-size:0.95rem;padding:.6rem 1.05rem;border-radius:7px;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s;white-space:nowrap;}
  .btn-primary{background:var(--accent);color:#fff;}
  .btn-primary:hover{background:var(--accent-press);}
  .btn-ghost{border-color:var(--line);color:var(--ink);}
  .btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
  .site .btn{padding:.48rem .9rem;}
  @media (max-width:880px){.nav{display:none;}}

  .page{display:none;}
  .page.on{display:block;animation:fade .35s ease;}
  @keyframes fade{from{opacity:0;transform:translateY(8px);}}

  .phero{border-bottom:1px solid var(--line);}
  .phero .wrap{padding-block:clamp(2.5rem,6vw,4.25rem);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;}
  .crumb{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 1rem;}
  .crumb a{color:var(--accent);text-decoration:none;cursor:pointer;}
  h1{font-family:var(--font-display);font-weight:800;font-size:clamp(1.9rem,4.6vw,2.9rem);line-height:1.08;letter-spacing:-0.025em;margin:0 0 1rem;text-wrap:balance;}
  .phero .lede{font-size:1.1rem;color:var(--ink-soft);margin:0 0 1.4rem;text-wrap:pretty;}
  .cta-row{display:flex;flex-wrap:wrap;gap:.7rem;}
  .pglyph{width:100%;max-width:230px;color:var(--accent);justify-self:center;}
  .pglyph svg{width:100%;height:auto;display:block;}
  @media (max-width:820px){.phero .wrap{grid-template-columns:1fr;}.pglyph{display:none;}}

  .sec{padding-block:clamp(2.5rem,6vw,4rem);border-bottom:1px solid var(--line-soft);}
  .sec:last-of-type{border-bottom:1px solid var(--line);}
  .sec h2{font-family:var(--font-display);font-weight:700;font-size:clamp(1.45rem,3.2vw,1.95rem);line-height:1.15;letter-spacing:-0.02em;margin:0 0 .7rem;text-wrap:balance;}
  .sec .kick{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 .6rem;}
  .sec p{color:var(--ink-soft);margin:0 0 .9rem;max-width:42rem;}
  .sec p:last-child{margin-bottom:0;}
  .sec em{color:var(--ink);font-style:normal;font-weight:600;}

  .checks{list-style:none;margin:1.1rem 0 0;padding:1rem 0 0;border-top:1px solid var(--line-soft);display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.75rem;}
  .checks li{position:relative;padding-left:1.4rem;color:var(--ink-soft);font-size:0.96rem;}
  .checks li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:2px;background:var(--accent);}
  @media (max-width:620px){.checks{grid-template-columns:1fr;}}

  .chain{font-family:var(--font-mono);font-size:0.86rem;color:var(--ink-soft);background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem;line-height:1.9;margin:1.1rem 0 0;}
  .chain b{color:var(--accent);font-weight:500;}

  .related{padding-block:clamp(2rem,5vw,3rem);}
  .related .kick{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 1rem;}
  .rel-grid{display:flex;flex-wrap:wrap;gap:.6rem;}
  .rel-grid a{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:600;font-size:0.92rem;border:1px solid var(--line);border-radius:8px;padding:.5rem .85rem;background:var(--surface);cursor:pointer;}
  .rel-grid a:hover{border-color:var(--accent);color:var(--accent);}
  .rel-grid a.ext::after{content:"\2197";color:var(--ink-faint);font-weight:400;}

  .final{background:#122031;color:var(--on-dark);}
  .final .wrap{padding-block:clamp(2.75rem,6vw,4rem);text-align:center;}
  .final h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.7rem,4vw,2.5rem);letter-spacing:-0.025em;margin:0 0 .55rem;text-wrap:balance;}
  .final p{color:var(--on-dark-dim);margin:0 0 1.5rem;font-family:var(--font-mono);font-size:0.88rem;letter-spacing:.03em;}
  .final .cta-row{justify-content:center;}
  .final .btn-ghost{border-color:var(--on-dark-dim);color:var(--on-dark);}
  .final .btn-ghost:hover{border-color:var(--on-dark);color:var(--on-dark);}

  .eco{background:var(--paper);border-top:1px solid var(--line);}
  .eco .wrap{padding-block:2.25rem;}
  .eco .lead{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 1rem;}
  .eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;}
  .eco-card{border:1px solid var(--line);border-radius:10px;padding:1rem 1.1rem;background:var(--surface);}
  .eco-card.self{border-color:var(--accent);box-shadow:inset 0 2px 0 var(--accent);}
  .eco-card .v{font-family:var(--font-display);font-weight:800;font-size:1.02rem;margin:0;}
  .eco-card .b{font-family:var(--font-mono);font-size:0.76rem;color:var(--accent);margin:.15rem 0 .45rem;}
  .eco-card .d{margin:0;font-size:0.85rem;color:var(--ink-soft);}
  .eco-card .dom{display:block;margin-top:.45rem;font-family:var(--font-mono);font-size:0.7rem;color:var(--ink-faint);}
  .eco .fine{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--line-soft);font-family:var(--font-mono);font-size:0.72rem;color:var(--ink-faint);display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;}
  @media (max-width:720px){.eco-grid{grid-template-columns:1fr;}}