:root{
  /* Interrogation-room / carbon-paper palette. Page is LIGHT paper on
     purpose — subverts the default dark-hacker-tool look. Terminals keep
     their own carbon-dark surface. */
  --paper:#e9e3d5;
  --paper-2:#f0ebdf;
  --paper-edge:#d8d0bd;
  --ink:#17130d;
  --ink-2:#4a4335;
  --ink-3:#847b66;
  --rule:#c9bea6;

  --carbon:#171310;
  --carbon-2:#211b16;
  --carbon-line:#33291f;
  --carbon-ink:#d9cfbe;
  --carbon-dim:#8a7d68;

  --redline:#b0271f;
  --redline-soft:rgba(176,39,31,0.10);
  --stampblue:#2a3f66;
  --termgreen:#57c98a;
  --amber:#c98a2a;

  --serif:'Spectral', Georgia, 'Times New Roman', serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#100d0a;
    --paper-2:#16120d;
    --paper-edge:#241d15;
    --ink:#ece4d4;
    --ink-2:#b3a891;
    --ink-3:#7d7360;
    --rule:#2a2219;

    --carbon:#0a0806;
    --carbon-2:#141009;
    --carbon-line:#2c2318;
    --carbon-ink:#ded4c2;
    --carbon-dim:#867a64;

    --redline:#e0554d;
    --redline-soft:rgba(224,85,77,0.12);
    --stampblue:#7d97c8;
    color-scheme:dark;
  }
}

:root[data-theme="dark"]{
  --paper:#100d0a;
  --paper-2:#16120d;
  --paper-edge:#241d15;
  --ink:#ece4d4;
  --ink-2:#b3a891;
  --ink-3:#7d7360;
  --rule:#2a2219;

  --carbon:#0a0806;
  --carbon-2:#141009;
  --carbon-line:#2c2318;
  --carbon-ink:#ded4c2;
  --carbon-dim:#867a64;

  --redline:#e0554d;
  --redline-soft:rgba(224,85,77,0.12);
  --stampblue:#7d97c8;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:17px;line-height:1.66;
  -webkit-font-smoothing:antialiased;
  transition:background-color .25s ease,color .25s ease;
  /* faint fibrous paper tint */
  background-image:
    radial-gradient(circle at 20% 12%, rgba(0,0,0,0.018), transparent 45%),
    radial-gradient(circle at 82% 68%, rgba(0,0,0,0.02), transparent 42%);
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}
@media (max-width:640px){.wrap{padding:0 20px}}
::selection{background:var(--redline);color:var(--paper-2)}
:focus-visible{outline:2px solid var(--redline);outline-offset:3px}

/* ---------------- Header ---------------- */
header{
  position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);padding-top:env(safe-area-inset-top,0px);
}
nav.wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img{height:27px;width:auto}
.brand b{font-family:var(--serif);font-weight:700;font-size:20px;letter-spacing:-0.01em}
.nav-right{display:flex;align-items:center;gap:22px}
.nav-links{display:flex;gap:22px;font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.nav-links a{text-decoration:none}
.nav-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:780px){.nav-links{display:none}}
.icon-btn{
  width:34px;height:34px;border:1px solid var(--rule);background:transparent;border-radius:2px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);
}
.icon-btn:hover{color:var(--ink);border-color:var(--ink-3)}
.icon-btn svg{width:16px;height:16px;display:none}
.icon-btn.show-sun .i-sun{display:block}
.icon-btn.show-moon .i-moon{display:block}
.gh-link{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12.5px;
  text-decoration:none;border:1px solid var(--ink);padding:7px 13px;border-radius:2px;color:var(--ink);
}
.gh-link:hover{background:var(--ink);color:var(--paper-2)}

/* ---------------- Hero: the confession ---------------- */
.hero{padding:64px 0 40px}
.hero .wrap{display:grid;grid-template-columns:270px 1fr;gap:52px;align-items:start}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:34px}}

.arsenal{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  border:1px solid var(--stampblue);border-radius:2px;
  background:color-mix(in srgb,var(--stampblue) 8%, transparent);
  padding:6px 12px 6px 10px;margin:0 0 22px;
  transform:rotate(-1deg);transition:background .15s ease,transform .15s ease;
}
.arsenal:hover{background:color-mix(in srgb,var(--stampblue) 14%, transparent);transform:rotate(-1deg) translateY(-1px)}
.arsenal .a-mark{color:var(--stampblue);font-size:14px;line-height:1}
.arsenal .a-txt{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);letter-spacing:.02em}
.arsenal .a-txt b{color:var(--stampblue);font-weight:600}

.interrogator h1{
  font-family:var(--serif);font-weight:800;font-size:clamp(34px,4.4vw,50px);
  line-height:1.02;letter-spacing:-0.015em;margin:0 0 20px;
}
.interrogator .sub{font-size:16px;color:var(--ink-2);line-height:1.6;margin:0 0 28px;max-width:34ch}
.questions{margin:0 0 30px;padding:0;list-style:none;border-top:1px solid var(--rule)}
.questions li{
  font-family:var(--mono);font-size:12.5px;color:var(--ink-2);
  padding:11px 0 11px 22px;border-bottom:1px solid var(--rule);position:relative;line-height:1.45;
}
.questions li::before{content:"Q";position:absolute;left:0;top:11px;color:var(--redline);font-weight:700}
.hero-cta{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.btn{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:13px;
  padding:12px 20px;border-radius:2px;text-decoration:none;cursor:pointer;border:1.5px solid transparent;
}
.btn-solid{background:var(--redline);color:#fff;border-color:var(--redline)}
.btn-solid:hover{background:#8f1f18;border-color:#8f1f18}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper-2)}

/* The document */
.confession{
  position:relative;background:var(--paper-2);border:1px solid var(--paper-edge);
  border-radius:2px;padding:34px 38px 40px;
  box-shadow:
    0 1px 0 var(--paper-edge),
    0 26px 50px -30px rgba(0,0,0,0.35);
  overflow:hidden;
}
.confession::before{
  /* red margin rule like ruled legal paper */
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--redline);opacity:.55;
}
.doc-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:22px;flex-wrap:wrap;
}
.doc-head .t{font-family:var(--mono);font-size:12px;color:var(--ink-2);line-height:1.7}
.doc-head .t b{display:block;font-family:var(--serif);font-size:22px;color:var(--ink);font-weight:700;letter-spacing:-0.01em}
.doc-head .meta{font-family:var(--mono);font-size:11px;color:var(--ink-3);text-align:right;line-height:1.7}

.statement{font-family:var(--serif);font-size:17px;line-height:1.7;color:var(--ink);min-height:230px}
.statement .l{display:block;opacity:0;margin:0 0 9px}
.statement .l.show{opacity:1}
.statement .subj{color:var(--stampblue);font-style:italic}
.statement .adm{color:var(--redline);font-weight:600}
.statement .term{
  font-family:var(--mono);font-size:13px;background:var(--carbon);color:var(--carbon-ink);
  padding:2px 7px;border-radius:2px;
}
.statement .sig{
  margin-top:20px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
  border-top:1px dashed var(--rule);padding-top:12px;
}

.guilty{
  position:absolute;right:34px;top:120px;font-family:var(--serif);font-weight:800;
  font-size:58px;letter-spacing:0.04em;color:var(--redline);
  border:5px double var(--redline);padding:6px 20px;border-radius:4px;
  transform:rotate(-13deg) scale(1.4);opacity:0;
  text-transform:uppercase;pointer-events:none;mix-blend-mode:multiply;
}
:root[data-theme="dark"] .guilty{mix-blend-mode:screen}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .guilty{mix-blend-mode:screen}}
.guilty.stamped{animation:stamp .45s cubic-bezier(.2,1.4,.5,1) forwards}
@keyframes stamp{0%{opacity:0;transform:rotate(-13deg) scale(1.9)}60%{opacity:1}100%{opacity:.92;transform:rotate(-13deg) scale(1)}}
@media (prefers-reduced-motion:reduce){
  .statement .l{opacity:1}
  .guilty{opacity:.9;transform:rotate(-13deg) scale(1);animation:none}
}
@media (max-width:520px){
  .guilty{font-size:40px;right:22px;top:210px;padding:5px 14px}
}

/* ---------------- Section frame ---------------- */
section{padding:74px 0}
.sec-rule{border:none;border-top:1px solid var(--rule);margin:0}
.sec-head{max-width:60ch;margin-bottom:40px}
.sec-head .idx{font-family:var(--mono);font-size:12px;color:var(--redline);display:block;margin-bottom:10px}
.sec-head h2{font-family:var(--serif);font-weight:700;font-size:clamp(26px,3.2vw,34px);letter-spacing:-0.012em;margin:0 0 12px;line-height:1.15}
.sec-head p{color:var(--ink-2);font-size:16px;margin:0;line-height:1.65}

/* Charges (features) as an interrogation dossier */
.charge{display:grid;grid-template-columns:1fr 1.08fr;gap:48px;align-items:center}
.charge + .charge{margin-top:70px}
.charge.flip .c-copy{order:2}
.charge.flip .c-term{order:1}
@media (max-width:880px){
  .charge,.charge.flip{grid-template-columns:1fr;gap:26px}
  .charge.flip .c-copy,.charge.flip .c-term{order:0}
}
.c-copy .tag{
  font-family:var(--mono);font-size:11.5px;color:var(--stampblue);border:1px solid var(--stampblue);
  padding:3px 9px;border-radius:2px;display:inline-block;margin-bottom:16px;
}
.c-copy h3{font-family:var(--serif);font-weight:700;font-size:25px;margin:0 0 13px;letter-spacing:-0.01em}
.c-copy p{color:var(--ink-2);font-size:15.5px;line-height:1.7;margin:0 0 14px}
.c-copy code{font-family:var(--mono);font-size:.9em;color:var(--ink)}
.c-list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.c-list li{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);padding-left:19px;position:relative;line-height:1.5}
.c-list li::before{content:"\2192";position:absolute;left:0;color:var(--redline)}

/* ---------------- Terminal (carbon) ---------------- */
.term{
  background:var(--carbon);border:1px solid var(--carbon-line);border-radius:4px;overflow:hidden;
  box-shadow:0 20px 44px -26px rgba(0,0,0,0.6);
}
.term-bar{display:flex;align-items:center;gap:9px;padding:10px 14px;background:var(--carbon-2);border-bottom:1px solid var(--carbon-line)}
.term-bar i{width:11px;height:11px;border-radius:50%;display:block}
.term-bar i:nth-child(1){background:#d1544d}.term-bar i:nth-child(2){background:#cf9a3f}.term-bar i:nth-child(3){background:#4faa6d}
.term-bar span{flex:1;text-align:center;margin-right:44px;font-family:var(--mono);font-size:11.5px;color:var(--carbon-dim)}
.term-body{
  font-family:var(--mono);font-size:13px;line-height:1.85;padding:20px;min-height:250px;
  color:var(--carbon-ink);white-space:pre-wrap;word-break:break-word;
  box-shadow:inset 0 0 60px rgba(0,0,0,0.25);
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,0.015) 0 1px,transparent 1px 3px);
}
.term-body .ln{opacity:0;animation:fade .3s ease forwards;margin:0 0 2px}
@keyframes fade{to{opacity:1}}
.term-body .c{color:var(--termgreen)}
.term-body .c::before{content:"you> ";color:var(--carbon-dim)}
.term-body .ok{color:var(--termgreen)}
.term-body .warn{color:#e07a72}
.term-body .dim{color:var(--carbon-dim)}
.term-body .out{color:var(--carbon-ink);opacity:.82}
.term-body .hd{color:#b79be0}
.cur{display:inline-block;width:7px;height:14px;background:var(--termgreen);vertical-align:-2px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.term-body .ln{opacity:1;animation:none}.cur{animation:none}}

/* ---------------- Attack graph ---------------- */
.evidence{margin-top:22px}
.evidence .cap{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:0 0 14px}
.graph{background:var(--carbon);border:1px solid var(--carbon-line);border-radius:4px;overflow:hidden;box-shadow:0 20px 44px -26px rgba(0,0,0,0.6)}
.graph-bar{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;background:var(--carbon-2);border-bottom:1px solid var(--carbon-line);font-family:var(--mono);font-size:11.5px}
.graph-bar .lt{color:var(--termgreen);display:flex;align-items:center;gap:8px}
.graph-bar .lt i{width:8px;height:8px;border:1.5px solid var(--termgreen);border-radius:50%}
.graph-bar .rt{color:#e07a72;display:flex;align-items:center;gap:6px;border:1px solid rgba(224,122,114,0.4);padding:3px 9px;border-radius:2px}
.graph-bar .rt i{width:6px;height:6px;border-radius:50%;background:#e07a72;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.graph svg{display:block;width:100%;height:auto;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,0.012) 0 1px,transparent 1px 3px)}
.graph .edge path.ln{fill:none;stroke:var(--carbon-dim);stroke-width:1.6}
.graph .el{opacity:0;transition:opacity .4s ease}.graph .el.in{opacity:1}
.graph .el rect{fill:var(--carbon-2)}
.graph .el text{fill:var(--carbon-dim);font-family:var(--mono);font-size:11px}
.graph .nd{opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease}
.graph .nd.in{opacity:1;transform:translateY(0)}
.graph .nd circle.core{stroke-width:2.5}
.graph .nd.orange circle.core{fill:url(#gO);stroke:var(--amber)}
.graph .nd.red circle.core{fill:url(#gR);stroke:#e0554d}
.graph .nd.green circle.core{fill:url(#gG);stroke:var(--termgreen)}
.graph .nd.white circle.core{fill:#eef1f4;stroke:#e0554d}
.graph .nd.red.pz circle.core{animation:glow 2.2s ease-in-out infinite}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 0 rgba(224,85,77,0))}50%{filter:drop-shadow(0 0 9px rgba(224,85,77,0.6))}}
.graph .nd text.lt{font-family:var(--mono);font-weight:700;font-size:19px;fill:#0a0806;text-anchor:middle;dominant-baseline:central}
.graph .nd text.nm{font-family:var(--mono);font-size:12px;fill:var(--carbon-ink);text-anchor:middle;opacity:.9}
.graph .nd text.sb{font-family:var(--mono);font-size:10px;fill:var(--carbon-dim);text-anchor:middle}
@media (prefers-reduced-motion:reduce){.graph .nd,.graph .el{opacity:1;transition:none;transform:none}.graph .nd.red.pz circle.core{animation:none}.graph-bar .rt i{animation:none}}

/* ---------------- Ledger ---------------- */
.ledger{border-top:1px solid var(--ink)}
.lrow{display:grid;grid-template-columns:220px 1fr;gap:26px;padding:22px 0;border-bottom:1px solid var(--rule);align-items:baseline}
@media (max-width:600px){.lrow{grid-template-columns:1fr;gap:6px}}
.lrow code{font-family:var(--mono);font-size:13px;color:var(--redline);white-space:nowrap}
.lrow p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.6}

/* ---------------- Quickstart ---------------- */
.install{max-width:760px}
.install .term-bar{justify-content:space-between}
.install .copy{font-family:var(--mono);font-size:11.5px;color:var(--carbon-dim);background:transparent;border:1px solid var(--carbon-line);border-radius:2px;padding:5px 10px;cursor:pointer;display:inline-flex;gap:6px;align-items:center}
.install .copy:hover{color:var(--carbon-ink);border-color:var(--carbon-dim)}
.install pre{margin:0;padding:22px;overflow-x:auto;font-family:var(--mono);font-size:13px;line-height:2;color:var(--carbon-ink);background-image:repeating-linear-gradient(0deg,rgba(255,255,255,0.015) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 60px rgba(0,0,0,0.25)}
.install pre .c1{color:var(--carbon-dim)}.install pre .c2{color:var(--termgreen)}
.note{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin-top:16px;line-height:1.7;max-width:70ch}
.note code{color:var(--ink-2)}.note a{color:var(--ink-2)}

/* ---------------- Contribute ---------------- */
.contribute{
  display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:center;
  border:1px solid var(--paper-edge);border-radius:2px;background:var(--paper-2);
  padding:36px 40px;position:relative;overflow:hidden;
}
.contribute::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--stampblue);opacity:.6}
@media (max-width:820px){.contribute{grid-template-columns:1fr;gap:24px;padding:30px 26px}}
.contribute h3{font-family:var(--serif);font-weight:700;font-size:24px;margin:0 0 12px;letter-spacing:-0.01em}
.contribute p{color:var(--ink-2);font-size:15.5px;line-height:1.7;margin:0}
.contribute .side{border-left:1px solid var(--rule);padding-left:32px}
@media (max-width:820px){.contribute .side{border-left:none;padding-left:0;border-top:1px solid var(--rule);padding-top:24px}}
.contribute .side h4{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin:0 0 14px;font-weight:500}
.contribute .side ul{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:9px}
.contribute .side li{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);padding-left:19px;position:relative;line-height:1.5}
.contribute .side li::before{content:"+";position:absolute;left:0;color:var(--stampblue);font-weight:700}
.contribute .side li a{color:var(--stampblue);text-decoration:underline;text-underline-offset:2px}
.contribute .side li a:hover{color:var(--ink)}

/* ---------------- Lab callout ---------------- */
.lab{
  display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:center;
  border:1px solid var(--paper-edge);border-radius:2px;background:var(--paper-2);
  padding:34px 40px;position:relative;overflow:hidden;
}
.lab::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--redline);opacity:.55}
@media (max-width:820px){.lab{grid-template-columns:1fr;gap:22px;padding:28px 26px}}
.lab h3{font-family:var(--serif);font-weight:700;font-size:23px;margin:0 0 11px;letter-spacing:-0.01em}
.lab p{color:var(--ink-2);font-size:15.5px;line-height:1.7;margin:0}
.lab-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.lab-cta .lab-host{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}

/* ---------------- Verdict strip ---------------- */
.verdict{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;text-align:center;
  border:2px solid var(--ink);border-radius:2px;padding:22px 26px;background:var(--paper-2);
}
.verdict .stamp{font-family:var(--mono);font-size:11.5px;color:var(--stampblue);border:1px solid var(--stampblue);padding:3px 10px;border-radius:2px}
.verdict p{margin:0;font-size:15px;color:var(--ink-2)}
.verdict b{color:var(--ink)}

/* ---------------- Footer ---------------- */
footer{border-top:1px solid var(--rule);padding:48px 0 40px}
.foot{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.foot .fb{display:flex;align-items:center;gap:10px}
.foot .fb img{height:22px}.foot .fb b{font-family:var(--serif);font-size:17px;font-weight:700}
.foot p{color:var(--ink-3);font-size:13.5px;max-width:32ch;margin:12px 0 0;line-height:1.6;font-family:var(--mono)}
.fcols{display:flex;gap:52px;flex-wrap:wrap}
.fcol h4{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);margin:0 0 13px;font-weight:500}
.fcol a{display:block;font-family:var(--mono);font-size:13px;color:var(--ink-2);text-decoration:none;margin-bottom:9px}
.fcol a:hover{color:var(--ink)}
.fbottom{margin-top:44px;padding-top:22px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.fbottom a{color:var(--ink-3);text-decoration:none}.fbottom a:hover{color:var(--ink-2)}