@font-face { font-family: "Manrope"; src: url("/assets/fonts/font-b.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
  @font-face { font-family: "Kode Mono"; src: url("/assets/fonts/font-a.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

  /* Bonsai — dark ukiyo-e. Near-black pond, pale koi, Manrope, lime only as a rare accent. */
  :root {
    --bg:#070806; --bg2:#0a0c08; --panel:rgba(13,16,11,0.82); --panel2:rgba(16,20,13,0.9);
    --line:#191d14; --line2:#242a1b;
    --ink:#e7ebdd; --ink-2:#aab19a; --dim:#828a72; --faint:#5b6150; --mute:#68705d;
    --lime:#d5fd51; --lime-dim:#828a72; --lime-ink:#0a0c07; /* lime-dim is now a neutral: keep bright lime rare */
    --sea:#aab19a; --sea-deep:#e7ebdd; --moss:#8aa63a; --vermilion:#d5fd51; --hanko:#d5fd51;
    --border:#242a1b; --blossom:#d5fd51; --blossom-soft:#242a1b; --paper:#0a0c08; --panel-2:var(--panel2);
    --sans:"Manrope",system-ui,sans-serif; --disp:"Manrope",system-ui,sans-serif; --mono:"Kode Mono",ui-monospace,monospace;
  }
  * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; }
  body { margin:0; color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.65; background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; }
  /* koi pond canvas + scrim, injected by site.js, sit behind everything */
  #pond { position:fixed; inset:0; z-index:0; pointer-events:none; }
  #scrim { position:fixed; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(0deg, var(--bg) 3%, rgba(7,8,6,0.55) 30%, transparent 68%),
      radial-gradient(60% 46% at 82% 26%, rgba(70,84,46,0.10), transparent 62%); }
  #grain { display:none; }
  a { color:var(--ink); text-decoration:none; } a:hover { color:var(--lime); }
  img { display:block; max-width:100%; }
  .mono { font-family:var(--mono); }
  .site { position:relative; z-index:2; max-width:1120px; margin:0 auto; padding:0 24px 80px; }
  ::selection { background:var(--lime); color:var(--lime-ink); }
  :focus-visible { outline:2px solid var(--lime); outline-offset:2px; border-radius:4px; }

  /* ---------- top nav ---------- */
  .topnav { display:flex; align-items:center; gap:22px; padding:22px 0 12px; }
  .topnav.pagebar { margin-bottom:26px; border-bottom:1px solid var(--line); padding-bottom:18px; }
  .brandmark { display:inline-flex; align-items:center; gap:10px; }
  .brandmark img, .brandmark svg { width:30px; height:30px; display:block; border-radius:8px; }
  .brandmark .wm { font-family:var(--sans); font-weight:800; font-size:22px; letter-spacing:-0.005em; text-transform:uppercase; color:var(--ink); line-height:1; }
  .brandmark:hover { color:var(--ink); } .brandmark:hover .wm { color:var(--lime); }
  .navlinks { display:flex; align-items:center; gap:22px; margin-left:16px; }
  .navlinks a { font-size:14.5px; color:var(--ink-2); } .navlinks a:hover { color:var(--ink); }
  .navlinks a.on { color:var(--ink); box-shadow:inset 0 -2px 0 var(--lime); }
  .nav-right { margin-left:auto; display:flex; align-items:center; gap:16px; }
  .nav-ghost { font-family:var(--mono); font-size:12.5px; color:var(--ink-2); } .nav-ghost:hover { color:var(--ink); }
  .nav-cta { font-family:var(--mono); font-size:12.5px; color:var(--ink); background:transparent; border:1px solid var(--line2); border-radius:9px; padding:10px 16px; display:inline-flex; align-items:center; gap:8px; transition:border-color .15s ease, background .15s ease; }
  .nav-cta:hover { border-color:var(--ink-2); background:rgba(255,255,255,0.02); color:var(--ink); }

  /* ---------- integrated home hero (koi behind, text over scrim) ---------- */
  .hero { position:relative; }
  .hero-head { padding:80px 0 96px; max-width:640px; }
  .hero-head .kanji { font-family:var(--mono); font-size:12px; letter-spacing:0.3em; text-transform:uppercase; color:var(--mute); display:inline-flex; align-items:center; gap:11px; }
  .hero-head .kanji::before { content:""; width:22px; height:1px; background:var(--lime-dim); opacity:0.7; }
  .hero-head h1 { font-family:var(--disp); font-weight:800; font-size:clamp(48px,7vw,84px); line-height:0.94; letter-spacing:-0.043em; margin:20px 0 24px; color:var(--ink); text-wrap:balance; }
  .hero-head h1 .mark { background:linear-gradient(var(--lime),var(--lime)) left 92%/100% 3px no-repeat; padding-bottom:2px; }
  .hero-head .sub { font-size:18.5px; line-height:1.6; color:var(--ink-2); max-width:42ch; margin:0 0 32px; }
  .hero-cta { display:flex; gap:13px; flex-wrap:wrap; align-items:center; }
  .hero-live { margin-top:30px; font-family:var(--mono); font-size:13px; color:var(--mute); display:inline-flex; align-items:center; gap:10px; }
  .hero-live b { color:var(--ink-2); font-weight:400; font-variant-numeric:tabular-nums; }
  .hero-live .pulse { width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px var(--lime); animation:pulse 2.6s ease-out infinite; }
  @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(213,253,81,.4);}70%{box-shadow:0 0 0 9px rgba(213,253,81,0);}100%{box-shadow:0 0 0 0 rgba(213,253,81,0);} }

  /* ---------- buttons ---------- */
  .cta, .cta-row a { display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12.5px; color:var(--ink); background:rgba(255,255,255,0.02); border:1px solid var(--line2); border-radius:9px; padding:11px 18px; transition:border-color .15s ease, background .15s ease; }
  .cta:hover { border-color:var(--ink-2); background:rgba(255,255,255,0.04); color:var(--ink); }
  .cta.ghost { background:transparent; border-color:var(--line2); color:var(--ink-2); }
  .cta.ghost:hover { border-color:var(--ink-2); color:var(--ink); background:transparent; }
  .cta-row { display:flex; gap:12px; flex-wrap:wrap; margin-top:6px; }

  /* ---------- layout ---------- */
  .page { padding-top:6px; }
  .cols { display:grid; grid-template-columns:236px minmax(0,1fr); gap:28px; align-items:start; }
  .main { min-width:0; display:flex; flex-direction:column; gap:22px; }
  .side { min-width:0; display:flex; flex-direction:column; gap:22px; }

  /* ---------- cards ---------- */
  .box { position:relative; background:var(--panel); backdrop-filter:blur(4px); border:1px solid var(--line); border-radius:16px; padding:26px 22px 22px; }
  .box:hover { border-color:var(--line2); }
  .box > .tab { position:absolute; top:0; left:0; font-family:var(--mono); font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--mute); padding:10px 14px; }
  .box.vermilion-tab > .tab { color:var(--lime-dim); }
  .box h2 { margin:14px 0 10px; font-family:var(--disp); font-weight:700; font-size:23px; letter-spacing:-0.025em; color:var(--ink); }
  .box h3 { margin:0 0 6px; font-size:15.5px; color:var(--ink); font-weight:600; }
  .box p { margin:0 0 11px; color:var(--ink-2); font-size:15px; line-height:1.66; } .box p:last-child { margin-bottom:0; }

  .bare { position:relative; padding:2px; }
  .slabel { font-family:var(--mono); font-size:9.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--mute); display:inline-flex; align-items:center; gap:7px; margin:0 0 12px; }
  .slabel::before { content:""; width:15px; height:1px; background:var(--lime-dim); opacity:0.6; }
  .slabel.vm { color:var(--lime-dim); }
  .rule-ink { height:1px; border:0; margin:20px 0; background:linear-gradient(90deg, var(--line2), transparent); }
  .hanko { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex:none; color:var(--lime); border:1px solid rgba(213,253,81,0.3); border-radius:7px; }
  .hanko svg { width:12px; height:12px; }

  /* ---------- metrics strip ---------- */
  .metrics { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(7,8,6,0.5); backdrop-filter:blur(2px); }
  .metric { padding:22px 22px 22px 0; } .metric + .metric { padding-left:22px; border-left:1px solid var(--line); }
  .metric .k { font-family:var(--mono); font-size:9.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--mute); }
  .metric .v { font-family:var(--mono); font-size:clamp(24px,3vw,32px); color:var(--ink); margin-top:8px; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
  .metric .v small { font-size:14px; color:var(--mute); }

  /* ---------- pipeline ---------- */
  .pipeline { display:grid; grid-template-columns:repeat(5,1fr); }
  .pstep { padding:0 16px 0 0; } .pstep + .pstep { padding-left:18px; border-left:1px solid var(--line); }
  .pstep .pn { font-family:var(--mono); font-size:10px; letter-spacing:0.12em; color:var(--lime-dim); }
  .pstep h4 { font-family:var(--disp); font-weight:600; font-size:18px; margin:7px 0 5px; color:var(--ink); letter-spacing:-0.01em; }
  .pstep p { font-size:13px; color:var(--dim); margin:0; line-height:1.5; }

  /* ---------- stats / findings / feed ---------- */
  .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
  .scard { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:15px 16px; }
  .scard .k { font-family:var(--mono); font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--mute); }
  .scard .v { font-family:var(--mono); font-size:22px; color:var(--ink); margin-top:6px; } .scard .v small { color:var(--mute); }
  .two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .anom-item { display:flex; gap:12px; align-items:flex-start; padding:13px 0; border-top:1px solid var(--line); }
  .anom-item:first-child { border-top:0; }
  .anom-item .ai-body { flex:1; min-width:0; }
  .anom-item .top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
  .anom-item .title { font-weight:600; font-size:14.5px; color:var(--ink); }
  .anom-item .date { font-family:var(--mono); font-size:10px; color:var(--faint); flex:none; }
  .anom-item .loc { font-family:var(--mono); font-size:11px; color:var(--mute); margin:2px 0 5px; word-break:break-all; }
  .verified { font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--lime-dim); }
  .feed { font-family:var(--mono); font-size:11.5px; line-height:1.9; color:var(--dim); background:rgba(7,8,6,0.5); border:1px solid var(--line); border-radius:10px; padding:12px 14px; height:150px; overflow:hidden; }
  .feed .hit { color:var(--ink-2); } .feed .crash { color:var(--lime); }

  /* ---------- sidebar widgets ---------- */
  .status blockquote { margin:0; padding:12px 14px; background:rgba(213,253,81,0.03); border-left:2px solid var(--lime-dim); color:var(--ink-2); font-size:14px; font-style:italic; border-radius:0 8px 8px 0; }
  .nf-row { display:flex; gap:10px; align-items:center; }
  .nf-ic { width:42px; height:42px; flex:none; border:1px solid var(--line2); border-radius:8px; background:rgba(213,253,81,0.04); display:grid; place-items:center; font-family:var(--mono); font-size:9.5px; color:var(--lime-dim); }
  .nf-row .nm { font-weight:600; color:var(--ink); font-size:13.5px; } .nf-row .sub { color:var(--mute); font-size:11px; font-family:var(--mono); }
  .cov { margin-top:12px; } .cov .lab { display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; color:var(--dim); margin-bottom:5px; } .cov .lab b { color:var(--lime-dim); }
  .barwrap { height:8px; background:rgba(255,255,255,0.05); border:1px solid var(--line2); border-radius:5px; padding:2px; }
  .barwrap i { display:block; height:100%; border-radius:3px; background:var(--lime-dim); transition:width 0.8s ease; }
  .b31grid { display:flex; flex-wrap:wrap; gap:5px; }
  .b31 { width:88px; height:31px; border:1px solid var(--line2); display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--mono); font-size:8.5px; line-height:1.05; text-transform:uppercase; overflow:hidden; padding:2px; border-radius:5px; color:var(--dim); }
  .b31:hover { border-color:var(--lime-dim); color:var(--ink); }
  .b31.a { background:rgba(255,255,255,0.04); color:var(--ink-2); } .b31.c { color:var(--ink-2); } .b31.d { color:var(--ink-2); }
  .hotlink { font-size:12px; color:var(--dim); margin-bottom:8px; } .hotlink i { color:var(--lime-dim); font-style:italic; }
  .counter { display:flex; gap:3px; justify-content:flex-start; padding:2px 0; }
  .counter span { font-family:var(--mono); font-size:19px; color:var(--lime-dim); background:rgba(213,253,81,0.05); border:1px solid var(--line2); border-radius:4px; padding:3px 6px; }
  .counter-cap { font-family:var(--mono); font-size:9.5px; color:var(--faint); letter-spacing:0.12em; text-transform:uppercase; margin-top:8px; }
  .ring { display:flex; align-items:center; justify-content:space-between; gap:6px; font-family:var(--mono); font-size:11px; color:var(--dim); }
  .ring a { padding:3px 9px; border:1px solid var(--line2); border-radius:6px; }

  /* ---------- page intro ---------- */
  .page-intro { margin:2px 0; }
  .page-intro .kanji { font-family:var(--mono); font-size:11px; letter-spacing:0.3em; color:var(--lime-dim); text-transform:uppercase; }
  .page-intro h1 { font-family:var(--disp); font-size:44px; font-weight:800; letter-spacing:-0.035em; margin:14px 0 12px; color:var(--ink); }
  .page-intro p { color:var(--ink-2); font-size:17px; max-width:66ch; margin:0; line-height:1.65; }

  /* ---------- misc content (campaigns, philosophy, token, guestbook) ---------- */
  .split { display:flex; flex-direction:column; gap:10px; }
  .split-row { display:grid; grid-template-columns:44px 1fr auto; gap:12px; align-items:center; font-size:14px; color:var(--ink-2); }
  .split-pct { font-family:var(--mono); font-weight:650; color:var(--lime-dim); }
  .split-bar { height:8px; background:rgba(255,255,255,0.05); border:1px solid var(--line2); border-radius:5px; overflow:hidden; }
  .split-bar i { display:block; height:100%; background:var(--lime-dim); }
  .koan { display:flex; gap:12px; align-items:flex-start; padding:6px 0; }
  .koan .k-seal { flex:none; width:22px; height:22px; background:rgba(213,253,81,0.08); color:var(--lime); border:1px solid rgba(213,253,81,0.3); border-radius:6px; display:grid; place-items:center; font-family:var(--mono); font-size:10px; margin-top:3px; }
  .koan .k-text { font-size:15.5px; color:var(--ink); font-style:italic; line-height:1.5; } .koan .k-text small { display:block; font-style:normal; font-size:12.5px; color:var(--dim); margin-top:4px; }
  .koans { display:grid; gap:14px; }
  .spec-card { border:1px solid var(--line2); border-radius:12px; background:rgba(7,8,6,0.5); padding:12px; }
  .spec-card .id { font-family:var(--mono); font-size:10px; color:var(--lime-dim); } .spec-card .bug { font-weight:600; font-size:13px; margin:4px 0 2px; color:var(--ink); } .spec-card .loc { font-family:var(--mono); font-size:10.5px; color:var(--mute); word-break:break-all; }
  .changelog .ver { display:flex; justify-content:space-between; font-family:var(--mono); font-size:11px; color:var(--lime-dim); border-bottom:1px dashed var(--line2); padding-bottom:5px; margin:8px 0 6px; } .changelog .ver .d { color:var(--faint); }
  .changelog ul { margin:0; padding-left:16px; color:var(--dim); font-size:13px; } .changelog li { margin-bottom:4px; }
  .poll .q { font-weight:600; font-size:14px; margin-bottom:8px; color:var(--ink); }
  .poll label { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--dim); padding:3px 0; cursor:pointer; } .poll label:hover { color:var(--ink); }
  .poll .res { display:none; } .poll.voted .opts { display:none; } .poll.voted .res { display:block; }
  .poll .rrow { font-family:var(--mono); font-size:11px; margin-bottom:6px; color:var(--ink-2); }
  .poll .rbar { height:8px; background:rgba(255,255,255,0.05); border:1px solid var(--line2); border-radius:5px; margin-top:3px; } .poll .rbar i { display:block; height:100%; background:var(--lime-dim); }
  .poll .pbtn, .gb .gbtn { font-family:var(--mono); font-size:11px; color:var(--ink); background:rgba(213,253,81,0.06); border:1px solid rgba(213,253,81,0.3); border-radius:7px; padding:8px 15px; cursor:pointer; } .poll .pbtn:hover, .gb .gbtn:hover { background:rgba(213,253,81,0.1); } .poll .pbtn { margin-top:8px; }
  .gb form { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
  .gb input, .gb textarea { font-family:var(--sans); font-size:13.5px; background:rgba(255,255,255,0.03); border:1px solid var(--line2); border-radius:8px; color:var(--ink); padding:9px 11px; resize:vertical; }
  .gb input:focus, .gb textarea:focus { outline:1px solid var(--lime-dim); border-color:var(--lime-dim); } .gb .gbtn { align-self:flex-start; }
  .gb .status-line { font-family:var(--mono); font-size:10px; color:var(--faint); margin-bottom:8px; }
  .gb-entry { border:1px solid var(--line); border-left:2px solid var(--lime-dim); border-radius:0 8px 8px 0; background:rgba(7,8,6,0.4); padding:9px 12px; margin-bottom:8px; }
  .gb-entry .h { font-family:var(--mono); font-size:10.5px; color:var(--lime-dim); } .gb-entry .h .t { color:var(--faint); } .gb-entry .m { font-size:13.5px; color:var(--ink-2); margin-top:3px; white-space:pre-wrap; word-break:break-word; }

  /* ---------- lab-teaser / how-bonsai / trace ---------- */
  .lab-teaser h2 { max-width:22ch; }
  .trace::after { content:none; }
  .home-feature h2 { font-family:var(--disp); font-size:29px; font-weight:700; letter-spacing:-0.02em; color:var(--ink); margin:0 0 8px; }

  /* ---------- footer ---------- */
  .botbar { margin-top:56px; border-top:1px solid var(--line); padding:22px 0 0; display:flex; align-items:center; gap:16px; flex-wrap:wrap; font-family:var(--mono); font-size:11px; color:var(--faint); letter-spacing:0.04em; text-transform:uppercase; }
  .botbar a { color:var(--dim); } .botbar a:hover { color:var(--lime); }
  .botbar .garden { display:inline-flex; flex-wrap:wrap; gap:16px; }
  .botbar .sp { margin-left:auto; }

  /* ---------- responsive ---------- */
  @media (max-width:820px) {
    .cols, .two, .metrics, .stats { grid-template-columns:1fr; }
    .two, .stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .pipeline { grid-template-columns:1fr 1fr; gap:16px 0; } .pstep, .pstep + .pstep { border-left:0; padding-left:0; }
    .metrics { grid-template-columns:1fr 1fr; } .metric, .metric + .metric { border-left:0; padding-left:0; }
    .hero-head { padding:48px 0 64px; }
    .side { order:2; }
  }
  @media (prefers-reduced-motion:reduce) { .hero-live .pulse { animation:none; } .barwrap i { transition:none; } }