/* 3v3.dev — the public site. Brand identity v1: green board, ENIG gold, copper,
   silkscreen. Chakra Petch for display, IBM Plex Sans to read, Plex Mono for
   specs. Self-hosted fonts, no third party, no tracker, no cookie. (Mia) */
@font-face{font-family:"Chakra Petch";font-weight:600;font-display:swap;src:url(/assets/fonts/chakra-petch-latin-600.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:100 700;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-var.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500.woff2) format("woff2")}

:root{
  --board:#0F2E1F; --mask-deep:#1D5236; --mask:#2F7A4F; --tint:#DFE8E1;
  --gold:#D8B25E; --copper:#C97B4B; --copper-bright:#e08e5a;
  --carbon:#0D0D0C; --carbon-2:#151513; --silk:#F4F3EE; --fr4:#CBBD8F; --paper:#F1F0EB; --ink:#121110;
  --silk-2:rgba(244,243,238,.76); --silk-3:rgba(244,243,238,.52);
  --line:rgba(223,232,225,.13); --line-2:rgba(223,232,225,.26);
  --display:"Chakra Petch",system-ui,sans-serif; --sans:"IBM Plex Sans",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --pad:clamp(18px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--carbon);color:var(--silk);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--gold);text-underline-offset:3px}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--ink);padding:8px 12px;border-radius:4px;z-index:50}
.skip:focus{left:8px}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;letter-spacing:.005em}
h1{font-size:clamp(40px,6.2vw,74px);line-height:1.03}
h1 .nl{display:block;color:var(--gold)}
h2{font-size:clamp(28px,3.8vw,46px);line-height:1.1;max-width:24ch}
h3{font-size:20px;line-height:1.25}
p{margin:12px 0 0;color:var(--silk-2)}
.eyebrow{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.lede{font-size:clamp(18px,1.8vw,21px);color:var(--tint);max-width:44ch;margin-top:22px}
.fine{font:400 13px var(--mono);color:var(--silk-3);margin-top:18px}

/* the board texture: faint routed traces with vias */
.board-bg{position:relative;background:var(--board);overflow:hidden}
.board-bg::before{content:"";position:absolute;inset:0;opacity:.08;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%23DFE8E1' stroke-width='2'%3E%3Cpath d='M0 46H96l32 32v64l32 32h100'/%3E%3Cpath d='M0 214h64l22-22V98l22-22h152'/%3E%3Cpath d='M184 0v42l22 22h54'/%3E%3C/g%3E%3Cg fill='%23DFE8E1'%3E%3Ccircle cx='96' cy='46' r='6'/%3E%3Ccircle cx='160' cy='174' r='6'/%3E%3Ccircle cx='108' cy='76' r='6'/%3E%3Ccircle cx='206' cy='64' r='6'/%3E%3C/g%3E%3C/svg%3E")}
.board-bg > *{position:relative}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:8px;
  background:var(--gold);color:var(--ink);font:600 16px var(--sans);text-decoration:none;border:1px solid var(--gold);transition:transform .12s,background .15s}
.btn:hover{background:#e3c06e;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--silk);border-color:var(--line-2)}
.btn.ghost:hover{border-color:var(--silk)}
.btn.small{min-height:38px;padding:8px 14px;font-size:14px}

/* top bar */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:12px var(--pad);
  background:rgba(13,13,12,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .brand img{display:block;height:24px;width:auto}
.top nav{display:flex;gap:22px;margin-left:auto}
.top nav a{color:var(--silk-2);text-decoration:none;font-size:15px}
.top nav a:hover{color:var(--silk)}
@media (max-width:760px){.top nav{display:none}.top .btn{margin-left:auto}}

/* hero */
.hero{padding:clamp(48px,9vh,110px) 0 clamp(48px,8vh,90px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:center}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr}}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero-board{margin:0}
.hero-board svg{display:block;width:100%;height:auto;filter:drop-shadow(0 24px 48px rgba(0,0,0,.45))}
.hero-board figcaption{font:400 13px var(--mono);color:var(--silk-3);margin-top:12px}
.pcb{fill:#163d29;stroke:#3c8a5d;stroke-width:2}
.holes circle{fill:var(--carbon);stroke:var(--gold);stroke-width:4}
.silk{fill:none;stroke:var(--silk);stroke-width:1.6;opacity:.85}
.ref{font:600 13px var(--display);fill:var(--silk);text-anchor:middle}
.val{font:400 10px var(--mono);fill:var(--silk-3);text-anchor:middle}
.pads rect{fill:var(--gold)}
.t{fill:none;stroke:var(--copper-bright);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:600;stroke-dashoffset:600}
.t.back{stroke:#4f9bd1;opacity:.85}
.v{fill:var(--gold);stroke:var(--carbon);stroke-width:3;transform-box:fill-box;transform-origin:center;transform:scale(0)}
.drc rect{fill:var(--mask)}
.drc text{font:600 14px var(--mono);fill:var(--silk);text-anchor:middle}
.drc{opacity:0}
.part{opacity:0}
/* the routing plays once on load, in order */
.hero-board.play .part{animation:place .45s ease-out forwards}
.hero-board.play .p1{animation-delay:.1s}.hero-board.play .p2{animation-delay:.25s}.hero-board.play .p3{animation-delay:.4s}.hero-board.play .p4{animation-delay:.55s}.hero-board.play .p5{animation-delay:.7s}
.hero-board.play .t{animation:route .7s ease-in-out forwards}
.hero-board.play .t1{animation-delay:1.1s}.hero-board.play .t2{animation-delay:1.45s}.hero-board.play .t3{animation-delay:1.75s}.hero-board.play .t4{animation-delay:2.05s}
.hero-board.play .t5{animation-delay:2.4s}.hero-board.play .t8{animation-delay:2.7s}.hero-board.play .t6{animation-delay:3.0s}.hero-board.play .t6b{animation-delay:3.25s}.hero-board.play .t6c{animation-delay:3.6s}.hero-board.play .t7{animation-delay:3.4s}.hero-board.play .t7b{animation-delay:3.65s}.hero-board.play .t7c{animation-delay:4.0s}
.hero-board.play .v{animation:via .3s cubic-bezier(.3,1.6,.6,1) forwards}
.hero-board.play .v1{animation-delay:3.2s}.hero-board.play .v2{animation-delay:3.55s}.hero-board.play .v3{animation-delay:3.6s}.hero-board.play .v4{animation-delay:3.95s}
.hero-board.play .drc{animation:place .5s ease-out 4.5s forwards}
@keyframes place{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes route{to{stroke-dashoffset:0}}
@keyframes via{to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .part,.drc{opacity:1}.t{stroke-dashoffset:0}.v{transform:none}
  .hero-board.play *{animation:none!important}
}

/* placeholders: say what goes here, at what size */
.ph{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:220px;padding:16px;border-radius:12px;
  border:1px dashed var(--line-2);background:repeating-linear-gradient(135deg,rgba(244,243,238,.025) 0 12px,transparent 12px 24px),var(--carbon-2)}
.ph-tag{position:absolute;top:12px;left:14px;font:500 11px var(--mono);letter-spacing:.12em;color:var(--fr4)}
.ph-say{font:400 14px var(--sans);color:var(--silk-3);max-width:40ch}
.ph{max-width:100%;min-width:0}
/* an aspect ratio with a min-height would force the box wider than a phone */
.ph-photo{aspect-ratio:4/3;min-height:0}.ph-video{aspect-ratio:16/9;min-height:0}
.ph-number{justify-content:center;align-items:flex-start;border-style:solid;border-color:var(--line);background:var(--board)}
.ph-number .big{font:600 clamp(64px,8vw,96px)/1 var(--display);color:var(--gold)}

/* proofs */
.proofs{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));padding-top:clamp(56px,9vh,96px);padding-bottom:clamp(56px,9vh,96px)}
.proof h3{margin-top:18px}
.proof p{font-size:15.5px}

/* how: four steps on one trace */
.how{padding:clamp(56px,10vh,110px) 0}
.steps{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;position:relative}
.steps::before{content:"";position:absolute;left:17px;right:17px;top:17px;height:4px;border-radius:2px;background:var(--copper)}
.steps li{position:relative;padding-top:58px}
.via{position:absolute;top:0;left:0;width:38px;height:38px;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 11px var(--gold),inset 0 0 0 38px var(--board)}
.steps p{font-size:15.5px}
@media (max-width:860px){
  .steps{grid-template-columns:1fr;gap:6px}
  .steps::before{left:17px;right:auto;top:10px;bottom:10px;width:4px;height:auto}
  .steps li{padding:2px 0 22px 58px}
}

/* agents */
.agents{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,4vw,56px);align-items:center;padding-top:clamp(56px,10vh,110px);padding-bottom:clamp(56px,10vh,110px)}
@media (max-width:960px){.agents{grid-template-columns:1fr}}
.agents .btn{margin-top:26px}
.vias-list{list-style:none;margin:18px 0 0;padding:0}
.vias-list li{position:relative;padding-left:26px;margin:9px 0;color:var(--silk-2)}
.vias-list li::before{content:"";position:absolute;left:0;top:.42em;width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 3.5px var(--gold),inset 0 0 0 12px var(--carbon)}
.board-bg .vias-list li::before{box-shadow:inset 0 0 0 3.5px var(--gold),inset 0 0 0 12px var(--board)}
.term{border:1px solid var(--line-2);border-radius:12px;background:#0a0a09;overflow:hidden;max-width:100%;min-width:0}
/* grid children default to min-width:auto and grow to their widest line */
.agents > *,.hero-grid > *,.proofs > *{min-width:0}
.tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs button,.layer-tabs button{flex:0 0 auto;background:transparent;border:0;color:var(--silk-3);font:500 13px var(--mono);padding:12px 16px;cursor:pointer;min-height:44px}
.tabs button[aria-selected=true],.layer-tabs button[aria-selected=true]{color:var(--silk);box-shadow:inset 0 -2px 0 var(--gold)}
.term-body{margin:0;padding:20px;font:400 14px/1.7 var(--mono);color:var(--tint);overflow-x:auto;white-space:pre}
.term-body .c{color:var(--silk-3)}.term-body .p{color:var(--gold)}

/* layers */
.layers{padding:clamp(56px,10vh,110px) 0}
.layer-tabs{display:flex;gap:4px;margin-top:28px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.layer-view{margin-top:22px}
.ph-layer{aspect-ratio:16/10;min-height:0}
.ph-layer[hidden]{display:none}

/* pricing */
.pricing{padding-top:clamp(56px,10vh,110px);padding-bottom:clamp(56px,10vh,110px)}
.plans{display:grid;gap:16px;margin-top:34px;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.plan{border:1px solid var(--line-2);border-radius:14px;padding:24px;background:var(--carbon-2);display:flex;flex-direction:column}
.plan.hi{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.plan.founding{background:linear-gradient(rgba(216,178,94,.08),rgba(216,178,94,.02)),var(--carbon-2)}
.plan .k{font:500 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0}
.plan .price{font:600 46px/1 var(--display);color:var(--silk);margin-top:12px}
.plan .price small{font:400 15px var(--sans);color:var(--silk-3)}
.plan .alt{font:400 13px var(--mono);color:var(--silk-3);margin-top:8px}
.plan .btn{margin-top:auto;align-self:flex-start;margin-top:22px}
.guarantee{margin-top:26px;padding:16px 18px;border-left:4px solid var(--copper);background:rgba(201,123,75,.08);border-radius:0 8px 8px 0;color:var(--silk-2)}
.guarantee strong{color:var(--silk)}

/* trust */
.trust{padding:clamp(56px,10vh,100px) 0}
.trust-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 56px;align-items:start}
.trust-grid .btn{grid-column:2;justify-self:start}
@media (max-width:860px){.trust-grid{grid-template-columns:1fr}.trust-grid .btn{grid-column:1}}

/* footer */
.foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;padding-top:44px;padding-bottom:44px;border-top:1px solid var(--line)}
.foot-brand p{font-size:14px;color:var(--silk-3)}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 22px;align-content:flex-start}
.foot-links a{color:var(--silk-2);text-decoration:none;font-size:14.5px}
.foot-links a:hover{color:var(--silk)}
.company{grid-column:1/-1;font:400 12px var(--mono);color:var(--silk-3);margin:0}
.todo{color:var(--copper)}
@media (max-width:760px){.foot{grid-template-columns:1fr}}

/* the 404 */
.lost{min-height:100svh;display:grid;place-items:center;text-align:center;padding:40px var(--pad)}
.lost svg{width:min(420px,86vw);height:auto}
.lost h1{font-size:clamp(34px,5vw,56px);margin-top:20px}
.lost .btn{margin-top:24px}

/* the gallery (#1998 + #1999's /api/gallery) */
.gallery-wrap{padding-top:clamp(40px,7vh,72px);padding-bottom:clamp(56px,9vh,96px)}
.gallery{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.gallery:empty{display:none}
.gallery:not(:empty) + .gallery-empty{display:none}
.gcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--carbon-2);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.gcard:hover{border-color:var(--gold);transform:translateY(-2px)}
.gcard img{display:block;width:100%;aspect-ratio:1200/630;object-fit:cover;background:var(--board)}
.gcard .gbody{padding:14px 16px 16px}
.gcard h3{font-size:18px}
.gcard .gmeta{font:400 12px var(--mono);color:var(--silk-3);margin-top:6px}
.gcard .gtag{display:inline-block;margin-top:10px;font:500 10px var(--mono);letter-spacing:.1em;color:var(--fr4);border:1px solid var(--line-2);border-radius:3px;padding:2px 6px}

/* /agents: the five runs */
.tw-site{margin-top:22px;overflow-x:auto;border:1px solid var(--line);border-radius:10px;max-width:100%}
table.runs{width:100%;border-collapse:collapse;min-width:560px;font-size:15px}
.runs th{font:500 11px var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--gold);text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
.runs td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--silk-2)}
.runs tr:last-child td{border-bottom:0}
.runs .num{text-align:right;font-family:var(--mono)}
.runs tr.hi td{color:var(--silk);background:rgba(216,178,94,.07)}
ol.vias-list{counter-reset:none}

/* /press: the one quotable line */
.quote-line{margin:30px 0 8px;padding:22px 24px;border-left:4px solid var(--gold);background:rgba(216,178,94,.06);border-radius:0 10px 10px 0}
.quote-line p{margin:0;font:600 clamp(20px,2.4vw,27px)/1.3 var(--display);color:var(--silk)}
.quote-line cite{display:block;margin-top:12px;font:500 12px var(--mono);letter-spacing:.08em;color:var(--gold);font-style:normal}

/* the changelog (#1998): a day, then its changes; tools/changelog.py writes the page */
.log-wrap{padding-top:clamp(40px,7vh,72px);padding-bottom:clamp(56px,10vh,110px);max-width:820px}
.log-day+.log-day{margin-top:44px}
.log-day h2{max-width:none;font:500 13px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 6px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.log{list-style:none;margin:0;padding:0}
.log li{padding:18px 0;border-bottom:1px solid var(--line)}
.log h3{font:600 clamp(18px,2.2vw,21px)/1.3 var(--display);margin:0 0 6px;color:var(--silk)}
.log p{margin:0;color:var(--silk-2);line-height:1.6}
.log li:target{background:linear-gradient(90deg,rgba(201,163,75,.10),transparent 70%)}

/* the press kit's grid and file list (were inline styles, which the CSP blocks) */
.proofs.kit-proofs{padding:0;margin-top:26px}
.vias-list.kit-files{margin-top:28px}