/* SynthCheck — shared stylesheet */
*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#fbfbfd; --surface:#fff; --surface-2:#f4f5f9; --border:#e4e6ef;
  --text:#12141c; --muted:#606478; --faint:#8b8fa3;
  /* Was indigo (#5b5bd6). Indigo-violet on a dark surface is the default
     palette of every interface a language model draws, and a reader recognises
     it before reading a word. A steel blue does the same job of marking a link
     without announcing where the design came from, and it stays out of the way
     of the verdict colours, which are the ones that carry meaning here. */
  --accent:#2b5c8a; --accent-soft:#ecf2f8; --accent-ink:#fff;
  --ai:#c2410c; --ai-bg:#fff4ed; --ai-br:#fed7aa;
  --cam:#15803d; --cam-bg:#f0fdf4; --cam-br:#bbf7d0;
  --warn:#a16207; --warn-bg:#fefce8; --warn-br:#fde68a;
  --bad:#b91c1c; --bad-bg:#fef2f2; --bad-br:#fecaca;
  --none:#5a6072; --none-bg:#f4f5f9; --none-br:#dfe2ec;
  --radius:14px; --shadow:0 1px 2px rgba(16,18,32,.05),0 8px 28px -12px rgba(16,18,32,.14);
}
html[data-theme=dark]{
  --bg:#0c0d13; --surface:#14161f; --surface-2:#1b1e29; --border:#282c3a;
  --text:#eceef5; --muted:#9ba0b5; --faint:#6f7488;
  --accent:#7fb2dd; --accent-soft:#151d26; --accent-ink:#0b1219;
  --ai:#fb923c; --ai-bg:#2a1a10; --ai-br:#7c3a12;
  --cam:#4ade80; --cam-bg:#0f2418; --cam-br:#1c5334;
  --warn:#facc15; --warn-bg:#26220d; --warn-br:#6b5a13;
  --bad:#f87171; --bad-bg:#2a1315; --bad-br:#7a2b2f;
  --none:#9ba0b5; --none-bg:#1b1e29; --none-br:#2f3444;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px -12px rgba(0,0,0,.6);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
/* One container, one left edge, everywhere.

   There used to be two, 940 and 720, both centred, so the text began in a
   different place depending on which page you were on: the home page at one
   margin, How it works at another 77px to the right, Guides at a third. While
   everything was centred nobody could see it. Left aligned, the whole page
   slides sideways as you navigate, which is the sort of thing a reader feels
   without being able to name.

   The narrow container keeps its job by capping the measure on its children
   instead of on itself, so prose is still 720px wide and still comfortable to
   read. It just starts where everything else starts. */
.wrap{max-width:940px;margin:0 auto;padding:0 20px}
.wrap-narrow{max-width:940px;margin:0 auto;padding:0 20px}
.wrap-narrow>*{max-width:720px}
/* The home page had the same problem in the other direction: the dropzone and
   the result card were the full 940 while everything under them stopped at
   720, so the card jutted 110px past the section below it. Same column all the
   way down. The card holds a prompt and a list of findings and reads better at
   this width anyway. */
body.home .dz-wrap,
body.home #results,
body.home .dz-example,
body.home .trustline{max-width:720px}
a{color:var(--accent)}
h1,h2,h3,h4{line-height:1.25;letter-spacing:-.021em;margin:0 0 .5em}
code,kbd{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:.86em}
kbd{background:var(--surface-2);border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 5px}
img{max-width:100%;height:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.hdr{display:flex;align-items:center;gap:14px;height:60px}
.logo{display:flex;align-items:center;gap:9px;font-weight:650;letter-spacing:-.02em;font-size:17px;text-decoration:none;color:var(--text)}
.logo svg{width:26px;height:26px;flex:none}
nav{margin-left:auto;display:flex;align-items:center;gap:2px}
nav a{color:var(--muted);text-decoration:none;font-size:14.5px;padding:7px 11px;border-radius:8px}
nav a:hover,nav a[aria-current=page]{color:var(--text);background:var(--surface-2)}
.icon-btn{background:none;border:1px solid var(--border);color:var(--muted);height:34px;min-width:34px;
  border-radius:9px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  gap:5px;margin-left:6px;font:inherit;font-size:13px;padding:0 9px}
.icon-btn:hover{color:var(--text);border-color:var(--faint)}
.langwrap{position:relative}
.langmenu{position:absolute;right:0;top:40px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;box-shadow:var(--shadow);padding:5px;min-width:132px;display:none}
.langmenu.open{display:block}
.langmenu a{display:block;padding:7px 11px;border-radius:7px;font-size:14px;color:var(--muted);text-decoration:none}
.langmenu a:hover{background:var(--surface-2);color:var(--text)}
.langmenu a[aria-current=true]{color:var(--accent);font-weight:600}

/* ---------- hero + dropzone ---------- */
/* Left-aligned. Everything used to sit on the centre line: eyebrow, headline,
   subhead, dropzone, the reassurance under it. Perfect vertical symmetry is
   what a generated landing page looks like, and it reads as a pitch. Text that
   starts where you start reading reads as a document. */
.hero{padding:clamp(52px,9vh,92px) 0 0;text-align:left}
.pill{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:var(--faint);
  padding:0;border:0;background:none;margin-bottom:26px;letter-spacing:.01em}
.pill svg{color:var(--cam);flex:none}
h1{font-size:clamp(32px,5.2vw,52px);font-weight:660;letter-spacing:-.032em;margin-bottom:18px;
  max-width:20ch;text-wrap:balance}
.sub{font-size:clamp(16px,1.9vw,17.5px);color:var(--muted);max-width:54ch;margin:0 0 40px;line-height:1.62}
.dz-wrap{position:relative}

#drop{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;
  padding:clamp(40px,6vw,64px) 24px;text-align:center;cursor:pointer;overflow:hidden;
  transition:border-color .2s ease,transform .2s ease,box-shadow .25s ease}
/* the accent lives in a soft wash, not a hard fill — reads calmer at this size */
#drop::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .25s ease;
  background:radial-gradient(120% 100% at 50% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 68%)}
#drop:hover::before,#drop.on::before{opacity:1}
#drop:hover,#drop.on{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));
  box-shadow:0 18px 50px -24px color-mix(in srgb,var(--accent) 55%,transparent)}
#drop.on{transform:scale(1.004)}
#drop>*{position:relative}

.dz-example{margin:14px 0 0;font-size:14.5px;color:var(--faint)}
.linkbtn{background:none;border:0;padding:0 0 1px;margin-left:5px;font:inherit;font-weight:600;
  color:var(--accent);cursor:pointer;border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.linkbtn:hover{border-bottom-color:var(--accent)}

/* numbered prose instead of a grid of boxes — the same information, far less furniture */
.steps{margin:0;display:grid;gap:34px}
.steps div{display:grid;gap:7px}
.steps dt{display:flex;align-items:baseline;gap:12px;font-size:18px;font-weight:620;letter-spacing:-.015em}
.steps dt span{flex:none;width:26px;font-size:13px;font-weight:600;color:var(--accent);
  font-variant-numeric:tabular-nums}
.steps dd{margin:0 0 0 38px;color:var(--muted);font-size:15.5px;line-height:1.65;max-width:62ch}
@media(max-width:520px){.steps dd{margin-left:0}}
.dz-ico{width:40px;height:40px;margin:0 auto 20px;color:var(--accent);opacity:.75}
.dz-t{font-size:clamp(19px,2.4vw,23px);font-weight:600;letter-spacing:-.018em;margin-bottom:8px}
.dz-s{color:var(--faint);font-size:14px}
.btn{display:inline-block;margin-top:26px;background:var(--accent);color:var(--accent-ink);border:0;border-radius:12px;
  padding:13px 26px;font-size:15px;font-weight:560;cursor:pointer;font-family:inherit;text-decoration:none;
  transition:transform .15s ease,filter .15s ease}
.btn:hover{filter:brightness(1.09);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.trustline{color:var(--faint);font-size:13.5px;margin:20px 0 0;line-height:1.7;max-width:66ch}

/* ---------- result cards ---------- */
#results{margin:38px 0 0;display:flex;flex-direction:column;gap:20px}
/* Matched to the dropzone above it. Two radii four pixels apart on the same
   column is the kind of thing nobody notices and everybody feels. */
.card{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  box-shadow:var(--shadow);overflow:hidden}
.chead{display:flex;gap:16px;padding:18px;align-items:flex-start;border-bottom:1px solid var(--border)}
.thumb{width:80px;height:80px;flex:none;border-radius:10px;object-fit:cover;background:var(--surface-2);border:1px solid var(--border)}
.cmeta{min-width:0;flex:1}
.fname{font-weight:600;font-size:15.5px;word-break:break-all;margin-bottom:3px}
.fdet{color:var(--faint);font-size:13px;font-variant-numeric:tabular-nums}
.badge{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:650;padding:5px 12px;
  border-radius:999px;border:1px solid;margin-top:9px}
.badge svg{width:14px;height:14px}
.v-ai{color:var(--ai);background:var(--ai-bg);border-color:var(--ai-br)}
.v-likely-ai{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-br)}
.v-partial{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-br)}
.v-camera{color:var(--cam);background:var(--cam-bg);border-color:var(--cam-br)}
.v-conflict{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-br)}
.v-unknown{color:var(--none);background:var(--none-bg);border-color:var(--none-br)}
.blurb{padding:14px 18px;color:var(--muted);font-size:14.5px;background:var(--surface-2);border-bottom:1px solid var(--border)}

/* the pulled-out facts: origin, hardware, when, where */
.facts{margin:0;padding:16px 18px;border-bottom:1px solid var(--border);display:grid;gap:9px}
.facts>div{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:baseline}
.facts dt{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--faint)}
.facts dd{margin:0;font-size:14.5px;color:var(--text);font-variant-numeric:tabular-nums}
.fact-link{margin-left:10px;font-size:13px;font-weight:550;white-space:nowrap}
.fact-note{display:block;font-size:12px;color:var(--faint);margin-top:3px;font-variant-numeric:normal}
@media(max-width:560px){.facts>div{grid-template-columns:1fr;gap:2px}}

/* evidence graded by strength */
.tier{border-bottom:1px solid var(--border)}
.tier:last-of-type{border-bottom:0}
.tier-h{display:flex;align-items:baseline;gap:10px;padding:14px 18px 4px;flex-wrap:wrap}
.tier-name{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.tier-count{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.tier-what{font-size:12.5px;color:var(--faint);flex-basis:100%;margin-top:-1px}
/* Neutral, not orange. The top tier holds the strongest evidence whichever way
   it points — a verified camera signature lands here too, and tinting the block
   the colour of "AI" made good news look like a warning. Direction is carried
   by the dot on each item, which is where it belongs. */
.t-definitive .tier-name{color:var(--text)}
.t-supporting .tier-name{color:var(--accent)}
.t-contextual .tier-name{color:var(--faint)}
.t-definitive{background:var(--surface-2)}
.ev{list-style:none;margin:0;padding:4px 0 10px}
.ev li{display:flex;gap:12px;padding:9px 18px}
.dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:7px}
.d-ai{background:var(--ai)} .d-warn{background:var(--warn)} .d-camera{background:var(--cam)}
.d-info{background:var(--faint)} .d-none{background:var(--none)}
.ev-t{font-weight:580;font-size:14.5px;margin-bottom:2px}
.ev-d{color:var(--muted);font-size:13.5px}
.ev-s{color:var(--faint);font-size:12px;margin-top:4px;font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all}

/* next steps — open by default, because the visitor who most needs it is the
   one who just got "inconclusive" and is about to give up */
details.next{border-top:1px solid var(--border);background:var(--accent-soft)}
details.next>summary{padding:13px 18px;cursor:pointer;font-size:14px;font-weight:600;color:var(--accent);
  list-style:none;display:flex;align-items:center;gap:8px}
details.next>summary::-webkit-details-marker{display:none}
details.next>summary::before{content:"\203A";display:inline-block;transition:transform .15s;font-size:17px;line-height:1}
details.next[open]>summary::before{transform:rotate(90deg)}
details.next ul{margin:0;padding:0 18px 16px 40px;color:var(--muted);font-size:14.5px;line-height:1.6}
details.next li{margin-bottom:9px}
details.next li:last-child{margin-bottom:0}

details.raw{border-top:1px solid var(--border)}
details.raw>summary{padding:12px 18px;cursor:pointer;font-size:14px;font-weight:550;color:var(--muted);
  list-style:none;display:flex;align-items:center;gap:8px}
details.raw>summary::-webkit-details-marker{display:none}
details.raw>summary::before{content:"\203A";display:inline-block;transition:transform .15s;font-size:17px;line-height:1}
details.raw[open]>summary::before{transform:rotate(90deg)}
details.raw>summary:hover{color:var(--text);background:var(--surface-2)}
.rawbody{padding:0 18px 16px}
table.kv{width:100%;border-collapse:collapse;font-size:13px}
table.kv td{padding:5px 8px;border-bottom:1px solid var(--border);vertical-align:top}
table.kv td:first-child{color:var(--muted);width:38%;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px}
table.kv td:last-child{word-break:break-word;font-variant-numeric:tabular-nums}
pre.dump{background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:11px;
  overflow:auto;max-height:280px;font-size:11.5px;line-height:1.55;margin:0;white-space:pre-wrap;
  word-break:break-word;color:var(--muted)}
.acts{display:flex;flex-wrap:wrap;gap:8px;padding:14px 18px;border-top:1px solid var(--border);background:var(--surface-2)}
.act{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:8px;
  padding:7px 13px;font-size:13.5px;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-block}
.act:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- content sections ---------- */
section{padding:clamp(64px,9vw,104px) 0 0;margin-top:clamp(48px,7vw,80px);border-top:1px solid var(--border)}
section h2{font-size:clamp(25px,3.6vw,34px);font-weight:660;letter-spacing:-.026em;margin-bottom:14px}
.lede{color:var(--muted);max-width:62ch;margin-bottom:44px;font-size:16.5px;line-height:1.6}
.quiet{color:var(--muted);max-width:62ch;font-size:15.5px;line-height:1.7;margin:0 0 1.1em}

.sub-h{font-size:19px;font-weight:640;letter-spacing:-.018em;margin:56px 0 12px}
.quiet.small{font-size:14px}

/* the recognised-generator list, generated from engine.js at build time */
.chips{list-style:none;margin:18px 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:13.5px;color:var(--muted);background:var(--surface);border:1px solid var(--border);
  border-radius:8px;padding:6px 11px;font-variant-numeric:tabular-nums}

/* verdict legend */
.verdict-key{margin:22px 0 26px;display:grid;gap:16px}
.verdict-key>div{display:grid;grid-template-columns:210px 1fr;gap:16px;align-items:start}
.verdict-key dt{margin:0}
.verdict-key dt .badge{margin:0}
.verdict-key dd{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
@media(max-width:640px){.verdict-key>div{grid-template-columns:1fr;gap:6px}}

/* the one pull-quote on the page: our whole argument, so it gets the emphasis */
.rule{margin:44px 0 0;padding:26px 30px;border:0;border-left:2px solid var(--accent);
  background:linear-gradient(90deg,var(--accent-soft),transparent 70%);border-radius:0 14px 14px 0}
.rule h3{font-size:16px;font-weight:620;margin-bottom:10px;letter-spacing:-.012em}
.rule p{color:var(--muted);font-size:15.5px;line-height:1.65;margin:0 0 12px;max-width:62ch}
.rule p:last-child{margin:0}

.two{display:grid;gap:36px;grid-template-columns:1fr 1fr}
@media(max-width:640px){.two{grid-template-columns:1fr;gap:30px}}
.can,.cant{padding:0 0 0 16px;border-left:2px solid}
.can{border-color:color-mix(in srgb,var(--cam) 45%,transparent)}
.cant{border-color:color-mix(in srgb,var(--ai) 45%,transparent)}
.can h3,.cant h3{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.can h3{color:var(--cam)} .cant h3{color:var(--ai)}
.can ul,.cant ul{margin:0;padding:0;list-style:none;font-size:15px;color:var(--muted);line-height:1.6}
.can li,.cant li{margin-bottom:12px;padding-left:15px;position:relative}
.can li::before,.cant li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.35}
/* Each question is its own card rather than a row in a hairline table. Six
   collapsed rows read as an empty list; the first is left open so the section
   shows an actual answer instead of a stack of closed lids. */
.faqlist{display:grid;gap:10px;margin-top:26px}
details.faq{background:var(--surface);border:1px solid var(--border);border-radius:12px;
  transition:border-color .15s ease}
details.faq:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--border))}
details.faq[open]{border-color:color-mix(in srgb,var(--accent) 45%,var(--border));
  background:linear-gradient(180deg,var(--accent-soft),var(--surface) 60%)}
details.faq summary{padding:16px 20px;cursor:pointer;font-weight:590;font-size:15.5px;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:hover{color:var(--accent)}
details.faq summary::after{content:"";flex:none;width:8px;height:8px;margin-right:2px;
  border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
details.faq[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
details.faq p{color:var(--muted);font-size:14.5px;margin:0;padding:0 20px 18px;max-width:78ch;line-height:1.65}

/* ---------- article / prose ---------- */
.page-head{padding:52px 0 8px}
.page-head h1{font-size:clamp(28px,4.6vw,42px);margin-bottom:12px}
.crumb{font-size:13.5px;color:var(--faint);margin-bottom:16px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.meta-line{color:var(--faint);font-size:13.5px;margin-bottom:8px}
.prose{font-size:16.5px;line-height:1.75;padding-bottom:20px}
.prose h2{font-size:24px;font-weight:640;margin:2em 0 .6em;padding-top:.2em}
.prose h3{font-size:18.5px;font-weight:620;margin:1.7em 0 .5em}
.prose p{margin:0 0 1.15em}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:24px}
.prose li{margin-bottom:.45em}
.prose blockquote{margin:1.4em 0;padding:14px 20px;border-left:3px solid var(--accent);
  background:var(--surface);border-radius:0 10px 10px 0;color:var(--muted)}
.prose blockquote p:last-child{margin:0}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:14.5px;display:block;overflow-x:auto}
.prose th,.prose td{padding:9px 12px;border:1px solid var(--border);text-align:left;vertical-align:top}
.prose th{background:var(--surface-2);font-weight:620}
.prose pre{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:14px;
  overflow-x:auto;font-size:13px;line-height:1.6;margin:1.3em 0}
.prose :not(pre)>code{background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 5px}
.prose hr{border:0;border-top:1px solid var(--border);margin:2.2em 0}
.prose img{border-radius:10px;border:1px solid var(--border)}
.toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin:0 0 32px}
.toc strong{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);display:block;margin-bottom:8px}
.toc ol{margin:0;padding-left:20px;font-size:14.5px}
.toc li{margin-bottom:4px}
.toc a{color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--accent)}

/* blog index */
.postlist{display:grid;gap:14px;margin:28px 0 0}
.post{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 22px;text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.post:hover{border-color:var(--accent);transform:translateY(-1px)}
.post h3{font-size:17.5px;font-weight:620;margin-bottom:6px}
.post p{color:var(--muted);font-size:14.5px;margin:0 0 8px}
.post .meta-line{margin:0}

/* ---------- ads ---------- */
.ad{margin:34px 0;min-height:96px;display:grid;place-items:center;border:1px dashed var(--border);
  border-radius:var(--radius);color:var(--faint);font-size:12.5px;background:var(--surface-2)}

/* ---------- back to top ---------- */
.totop{position:fixed;right:24px;bottom:24px;z-index:120;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:var(--muted);
  background:color-mix(in srgb,var(--surface) 88%,transparent);border:1px solid var(--border);
  backdrop-filter:blur(10px);box-shadow:0 6px 22px -10px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s,color .15s,border-color .15s}
.totop.show{opacity:1;visibility:visible;transform:translateY(0)}
.totop:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,var(--border))}
.totop:active{transform:translateY(1px)}
@media(max-width:560px){.totop{right:16px;bottom:16px;width:42px;height:42px}}
@media(prefers-reduced-motion:reduce){.totop{transition:opacity .01s,visibility .01s}}
h1:focus,body:focus{outline:none}

/* ---------- consent ----------------------------------------------------
   A full-width bar rather than a floating card: it reads as part of the page
   furniture instead of an interruption, and there is room for three buttons
   without crowding. Reject is as prominent as Accept — required in the EU and
   simply fair everywhere else. */
#consent{position:fixed;left:0;right:0;bottom:0;z-index:200;display:none;
  background:color-mix(in srgb,var(--surface) 97%,transparent);backdrop-filter:blur(14px);
  border-top:1px solid var(--border);box-shadow:0 -8px 30px -14px rgba(0,0,0,.28)}
#consent.show{display:block}
.cbar{display:flex;align-items:center;gap:22px;padding-top:15px;padding-bottom:15px}
.cbar-text{flex:1 1 auto;min-width:0}
.cbar-text strong{display:block;font-size:14px;font-weight:640;margin-bottom:3px;letter-spacing:-.01em}
.cbar-text p{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted);max-width:96ch}
.cbar-actions{flex:0 0 auto;display:flex;gap:8px;flex-wrap:wrap}
.cbtn{border-radius:9px;padding:9px 15px;font:inherit;font-size:13px;font-weight:560;cursor:pointer;
  border:1px solid var(--border);background:var(--surface);color:var(--text);white-space:nowrap}
.cbtn:hover{border-color:var(--faint)}
.cbtn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.cbtn-primary:hover{filter:brightness(1.08)}
.cbtn-ghost{border-color:transparent;text-decoration:underline;text-underline-offset:3px}
.cbtn-ghost:hover{border-color:transparent;color:var(--accent)}
@media(max-width:820px){
  .cbar{flex-direction:column;align-items:stretch;gap:12px}
  .cbar-actions{justify-content:stretch}
  .cbar-actions .cbtn{flex:1 1 auto;text-align:center}
}

/* per-category panel */
.cprefs{position:fixed;inset:0;z-index:210;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(8,9,14,.55);backdrop-filter:blur(3px)}
.cprefs.show{display:flex}
.cprefs-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;
  width:100%;max-width:520px;max-height:86vh;overflow:auto;padding:20px 22px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
.cprefs-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px}
.cprefs-head h2{flex:1;font-size:18px;font-weight:640;margin:0;letter-spacing:-.018em}
.cprefs-x{background:none;border:0;color:var(--faint);cursor:pointer;padding:4px;border-radius:7px;line-height:0}
.cprefs-x:hover{color:var(--text);background:var(--surface-2)}
.cprefs-intro{font-size:13.5px;color:var(--muted);margin:0 0 18px;line-height:1.55}
.cprefs-row{display:flex;align-items:flex-start;gap:16px;padding:14px 0;border-top:1px solid var(--border)}
.cprefs-row h3{font-size:14.5px;font-weight:620;margin:0 0 4px}
.cprefs-row p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.55}
.cprefs-locked{flex:none;font-size:11.5px;font-weight:600;color:var(--cam);
  background:var(--cam-bg);border:1px solid var(--cam-br);border-radius:999px;padding:3px 10px;white-space:nowrap}
.cprefs-foot{display:flex;gap:8px;justify-content:flex-end;padding-top:16px;border-top:1px solid var(--border)}
@media(max-width:480px){.cprefs-foot .cbtn{flex:1 1 auto}}

/* switch */
.cswitch{flex:none;position:relative;width:42px;height:24px;cursor:pointer}
.cswitch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.cswitch span{position:absolute;inset:0;border-radius:999px;background:var(--border);transition:background .18s}
.cswitch span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .18s}
.cswitch input:checked + span{background:var(--accent)}
.cswitch input:checked + span::after{transform:translateX(18px)}
.cswitch input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- footer ---------- */
/* ---------- footer -----------------------------------------------------
   A row of nine identical links treats the licence, the privacy policy and the
   source code as equally weighted. They are not: the source link is the one
   thing that lets a stranger verify the central claim instead of trusting it,
   so it gets a block of its own. */
footer{border-top:1px solid var(--border);padding:52px 0 40px;color:var(--faint);
  font-size:13.5px;margin-top:64px;background:var(--surface-2)}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--accent)}
.ftop{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr);gap:48px;
  padding-bottom:32px;border-bottom:1px solid var(--border)}
.fbrand .logo{font-size:16px;margin-bottom:12px}
.fbrand .logo svg{width:24px;height:24px}
.ftag{margin:0 0 18px;font-size:13.5px;line-height:1.6;color:var(--faint);max-width:38ch}

.fsource{display:inline-flex;align-items:center;gap:11px;padding:11px 15px;border-radius:11px;
  border:1px solid var(--border);background:var(--surface);transition:border-color .15s,transform .15s}
.fsource:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--border));transform:translateY(-1px)}
.fsource svg{width:20px;height:20px;flex:none;color:var(--text)}
.fsource span{display:grid;gap:1px;line-height:1.35}
.fsource strong{font-size:13.5px;font-weight:620;color:var(--text)}
.fsource em{font-style:normal;font-size:12px;color:var(--faint)}

.fcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.fcol h3{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin:0 0 12px}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fcol a{font-size:13.5px}

.fbot{padding-top:24px}
.fbot p{margin:0 0 8px;max-width:78ch;line-height:1.6}
@media(max-width:860px){
  .ftop{grid-template-columns:1fr;gap:32px}
}
@media(max-width:520px){
  .fcols{grid-template-columns:1fr 1fr;gap:24px}
}

/* "show all" fold under the headline generators */
details.more{margin:2px 0 0}
details.more>summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;
  font-size:14px;font-weight:600;color:var(--accent);padding:6px 0}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
details.more[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
details.more>summary:hover{filter:brightness(1.15)}
.more-b{display:none}
details.more[open] .more-a{display:none}
details.more[open] .more-b{display:inline}
details.more .chips{margin-top:10px}

/* the help link is the one piece of navigation someone may need urgently */
nav a.nav-help{color:var(--cam);font-weight:560}
nav a.nav-help:hover{background:var(--cam-bg);color:var(--cam)}


/* theme toggle shows the mode it will switch *to*, so the control reads as a
   verb rather than a label. Both icons ship; CSS picks one. */
#theme .ico-sun{display:none}
#theme.is-dark .ico-moon{display:none}
#theme.is-dark .ico-sun{display:inline}

/* ---------- header on narrow screens ----------------------------------
   Five controls do not fit across a phone. Rather than let them wrap — which
   broke "Get help" onto two lines and pushed the theme button off the edge —
   drop them in order of how badly they are needed. "Get help" never goes: it
   is the one link somebody may be looking for in a hurry. */
nav a{white-space:nowrap}
.hdr{min-width:0}
.logo{min-width:0;flex:0 1 auto}
.logo-word{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

@media(max-width:760px){
  .hdr{gap:8px}
  .logo{font-size:16px;gap:7px}
  .logo svg{width:24px;height:24px}
  nav{gap:0}
  nav a{padding:6px 8px;font-size:14px}
  .icon-btn{margin-left:4px;height:32px;min-width:32px;padding:0 7px;font-size:12px}
}
@media(max-width:560px){
  /* globe glyph is decoration next to a two-letter code — the code is enough */
  #langbtn svg{display:none}
  #langbtn{padding:0 8px}
}
@media(max-width:380px){
  .logo-word{display:none}
  nav a{padding:6px 6px}
}


/* ---------- mobile menu ------------------------------------------------
   Hiding navigation on small screens was the wrong trade: the links simply
   vanished. They move into a panel instead, so nothing is unreachable from a
   phone. "Get help" stays visible in the bar as well — it is the one link
   somebody may need in a hurry. */
#burger{display:none}
#burger .ico-x{display:none}
#burger[aria-expanded=true] .ico-bars{display:none}
#burger[aria-expanded=true] .ico-x{display:inline}

.mobilemenu{display:none;border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(12px)}
.mobilemenu.open{display:block}
.mobilemenu .wrap{display:flex;flex-direction:column;padding-top:6px;padding-bottom:12px}
.mobilemenu a{display:block;padding:13px 4px;color:var(--text);text-decoration:none;
  font-size:16px;font-weight:520;border-bottom:1px solid var(--border)}
.mobilemenu a:last-child{border-bottom:0}
.mobilemenu a:active{background:var(--surface-2)}
.mobilemenu a.mm-help{color:var(--cam);font-weight:600}

@media(max-width:860px){
  nav a.nav-item{display:none}
  #burger{display:inline-flex}
}
@media(min-width:861px){
  .mobilemenu{display:none !important}
}

/* shown when a content page has no translation yet — навигация localised,
   body still English, and the visitor is told why rather than left guessing */
.eo-note{margin:24px 0 -12px;padding:11px 14px;border-radius:10px;font-size:13.5px;
  color:var(--muted);background:var(--surface);border:1px solid var(--border)}

.copyright{margin-top:12px;font-size:12.5px;color:var(--faint)}

.badge.v-verified{color:var(--cam);background:var(--cam-bg);border-color:var(--cam-br)}
.badge.v-tampered{color:var(--bad);background:var(--bad-bg);border-color:var(--bad-br)}

/* the prompt is prose, not a data value — it needs to read like a sentence */
.fact-prompt{display:block;font-variant-numeric:normal;line-height:1.55;
  color:var(--text);max-width:62ch}

/* The legend is eight paragraphs; nobody reads eight paragraphs to learn what a
   badge means. The gist sits on its own line in full contrast, the explanation
   below it in muted text — scan the bold lines, stop when you have your answer. */
.vk-gist{display:block;color:var(--text);font-weight:600;font-size:14.5px;margin-bottom:5px}
.vk-more{display:block;color:var(--muted);font-size:14px;line-height:1.6}

/* Four situations, two by two. Cards rather than prose because the visitor is
   scanning for the one that is theirs, not reading the set. */
.whos{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 28px}
.who{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 22px}
.who h3{font-size:16px;font-weight:640;letter-spacing:-.015em;margin:0 0 8px}
.who p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
.why-close{max-width:64ch}
@media(max-width:760px){.whos{grid-template-columns:1fr;gap:12px}}

/* home page: the four passes as a list of headings, with the detail one click away */
.passlist{margin:20px 0 22px;padding:0 0 0 20px;color:var(--muted);font-size:15.5px;line-height:1.9}
.passlist li{padding-left:4px}
.more-link{font-weight:600;font-size:15px;text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.more-link:hover{border-bottom-color:var(--accent)}
.morelinks{display:flex;flex-wrap:wrap;gap:10px 26px;margin:34px 0 0}
.morelinks a{font-size:15px;font-weight:560;text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.morelinks a:hover{border-bottom-color:var(--accent)}

/* the pages the sections moved to */
.infobody section{padding-top:0;margin-top:0;border-top:0}
.infobody .sub-h:first-child{margin-top:0}
.backhome{margin:52px 0 0;font-size:15px}
.backhome a{text-decoration:none;font-weight:560}

/* ---------- result card, second pass -----------------------------------
   The card used to open with a paragraph that was the same for every file of
   that verdict. It now opens with the strongest thing found in *this* file,
   and the general caveat sits under it in smaller type where it belongs. */
.blurb{padding:15px 18px}
.reason{margin:0 0 6px;font-size:16px;font-weight:600;color:var(--text);line-height:1.45;letter-spacing:-.012em}
.caveat{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55;max-width:76ch}

/* One list instead of three tiers, each with its own heading, count and
   explanatory paragraph. Strength is a tag on the line, not a chapter. */
.evbox{border-bottom:1px solid var(--border)}
.ev-h{margin:0;padding:15px 18px 2px;font-size:12px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--faint)}
.ev-tag{margin-left:9px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;border:1px solid;vertical-align:1px;white-space:nowrap}
.tag-definitive{color:var(--ai);border-color:var(--ai-br);background:var(--ai-bg)}
.tag-supporting{color:var(--accent);border-color:var(--accent-soft);background:var(--accent-soft)}
.tag-contextual{color:var(--none);border-color:var(--none-br);background:var(--none-bg)}
@media(max-width:520px){.ev-tag{display:inline-block;margin:4px 0 0}}

/* Grouped by maker. The monogram is ours, not the company's: a trademark next
   to the word "recognised" would read as a partnership that does not exist. */
.families{list-style:none;margin:20px 0 18px;padding:0;display:grid;gap:10px}
.families li{display:flex;align-items:flex-start;gap:14px;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.fam-mark{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  font-weight:700;font-size:13px;letter-spacing:-.02em;color:var(--fam);
  background:color-mix(in srgb,var(--fam) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--fam) 38%,transparent)}
.fam-body{display:grid;gap:2px;min-width:0}
.fam-body b{font-size:15px;font-weight:640;letter-spacing:-.012em}
.fam-body span{color:var(--muted);font-size:14px;line-height:1.5;word-break:break-word}
.claude-note{margin-top:2px}
@media(max-width:520px){.families li{padding:12px 13px;gap:11px}.fam-mark{width:30px;height:30px;font-size:14px}}

/* was a style="" attribute; moved here so the CSP can forbid inline styles */
.chunkblock{margin-bottom:10px}
.chunkname{font-size:12px;color:var(--faint);margin-bottom:4px;font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---------- status page ---------- */
.statusbox{margin:26px 0 22px}
.st-head{display:grid;gap:3px;padding:16px 18px;border-radius:13px;border:1px solid var(--border);
  background:var(--surface);margin-bottom:26px}
.st-head strong{font-size:17px;font-weight:650;letter-spacing:-.016em}
.st-head span{font-size:13.5px;color:var(--faint)}
.st-ok{border-color:var(--cam-br);background:var(--cam-bg)}
.st-ok strong{color:var(--cam)}
.st-bad{border-color:var(--bad-br);background:var(--bad-bg)}
.st-bad strong{color:var(--bad)}
.st-g{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);margin:22px 0 10px}
.st-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.st-list li{display:flex;gap:12px;align-items:flex-start;background:var(--surface);
  border:1px solid var(--border);border-radius:11px;padding:12px 15px}
.st-mark{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;margin-top:1px}
.st-pass .st-mark{color:var(--cam);background:var(--cam-bg);border:1px solid var(--cam-br)}
.st-fail .st-mark{color:var(--bad);background:var(--bad-bg);border:1px solid var(--bad-br)}
.st-list b{display:block;font-size:14.5px;font-weight:560}
.st-list em{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:3px;word-break:break-word}

/* A quotation from somebody else's document, set apart so it cannot be read as
   our own words. The point of quoting a competitor verbatim is that the reader
   can check it, so it has to look like a quote, not like a claim. */
blockquote.cmp-q{margin:16px 0;padding:14px 18px;border-left:3px solid var(--accent);
  background:var(--surface);border-radius:0 10px 10px 0;color:var(--text);
  font-size:15.5px;line-height:1.55}

/* ---------- comparison table ---------- */
table.cmp{width:100%;border-collapse:collapse;margin:22px 0 8px;font-size:14.5px}
table.cmp th,table.cmp td{padding:12px 14px;border-bottom:1px solid var(--border);
  text-align:left;vertical-align:top}
table.cmp thead th{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);border-bottom:1px solid var(--border);padding-bottom:8px}
table.cmp tbody th{font-weight:600;width:29%;color:var(--text)}
table.cmp td{color:var(--muted)}
table.cmp td.cmp-us{color:var(--text);background:color-mix(in srgb,var(--accent) 6%,transparent)}
@media(max-width:700px){
  table.cmp,table.cmp tbody,table.cmp tr,table.cmp td,table.cmp th{display:block;width:auto}
  table.cmp thead{display:none}
  table.cmp tr{border:1px solid var(--border);border-radius:12px;margin-bottom:12px;padding:4px 0}
  table.cmp th,table.cmp td{border-bottom:0;padding:8px 14px}
  table.cmp tbody th{width:auto;padding-bottom:2px}
  table.cmp td::before{content:attr(data-l);display:block;font-size:11px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:3px}
}

/* the changelog list: dates as headings, changes as plain items */
ul.loglist{margin:0 0 26px;padding-left:20px;color:var(--muted);font-size:15.5px;line-height:1.65;max-width:64ch}
ul.loglist li{margin-bottom:9px}

.fam-openai{--fam:#10a37f}
.fam-google{--fam:#4285f4}
.fam-midjourney{--fam:#5b5bd6}
.fam-stability-ai{--fam:#a855f7}
.fam-adobe{--fam:#ff3b30}
.fam-xai{--fam:#8e8e93}
.fam-black-forest-labs{--fam:#0ea5e9}
.fam-meta{--fam:#0866ff}
.fam-microsoft{--fam:#00a4ef}