/* Perennis — site stylesheet
   Layout concept: an engineering document. A 1200px measure, a left-aligned reading column,
   and one "specimen" per page (the signature anatomy, the lab) that carries all the colour.
   Two layers, two colours everywhere: classical = ink, post-quantum = ultramarine. */

@import url("fonts.css");

:root{
  --bg:#f5f6fa; --surface:#ffffff; --ink:#0c1424; --ink-2:#384255; --muted:#5f6980;
  --line:#dce1eb; --line-strong:#c4cbdb; --tint:#eceff7;
  --accent:#2b3fd0; --accent-strong:#1f2fa8; --on-accent:#ffffff; --accent-tint:#e5e8fb;
  --ok:#11683f; --ok-bg:#e0f1e7; --bad:#ad2318; --bad-bg:#fbe5e2; --warn:#8a5a00; --warn-bg:#fbf0d9;
  --code-bg:#0c1424; --code-fg:#dfe4f2;
  --classical:var(--ink); --pq:var(--accent);
  --f-display:'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --f-body:'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-mono:'IBM Plex Mono', 'SFMono-Regular', Consolas, 'DejaVu Sans Mono', monospace;
  --measure:1200px; --read:68ch;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:112px;
  --radius:3px;
  --shadow:0 1px 0 rgba(12,20,36,.04), 0 12px 32px -18px rgba(12,20,36,.28);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#080c18; --surface:#0e1426; --ink:#e8ebf4; --ink-2:#c3c9d8; --muted:#8f98ae;
    --line:#222a42; --line-strong:#323c5a; --tint:#121a30;
    --accent:#8d9cff; --accent-strong:#b5beff; --on-accent:#0a0f20; --accent-tint:#1a2252;
    --ok:#74d6a4; --ok-bg:#0f2a1e; --bad:#ff8d82; --bad-bg:#2f1513; --warn:#f2c46b; --warn-bg:#2c220c;
    --code-bg:#050812; --code-fg:#dfe4f2;
    --shadow:0 1px 0 rgba(0,0,0,.3), 0 16px 40px -20px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#080c18; --surface:#0e1426; --ink:#e8ebf4; --ink-2:#c3c9d8; --muted:#8f98ae;
  --line:#222a42; --line-strong:#323c5a; --tint:#121a30;
  --accent:#8d9cff; --accent-strong:#b5beff; --on-accent:#0a0f20; --accent-tint:#1a2252;
  --ok:#74d6a4; --ok-bg:#0f2a1e; --bad:#ff8d82; --bad-bg:#2f1513; --warn:#f2c46b; --warn-bg:#2c220c;
  --code-bg:#050812; --code-fg:#dfe4f2;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 16px 40px -20px rgba(0,0,0,.8);
  color-scheme:dark;
}

@view-transition{ navigation:auto; }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.22s; }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:88px; }
body{
  margin:0; background:var(--bg); color:var(--ink-2);
  font:400 17px/1.62 var(--f-body); font-feature-settings:"locl" 0;
  text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; }
a{ color:var(--accent); text-underline-offset:.18em; text-decoration-thickness:1px; }
a:hover{ color:var(--accent-strong); }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }
::selection{ background:var(--accent); color:var(--on-accent); }
p{ margin:0 0 1em; }
h1,h2,h3,h4{ font-family:var(--f-display); color:var(--ink); font-weight:600; line-height:1.14; text-wrap:balance; margin:0; }
h1{ font-size:clamp(2.2rem,4.3vw,3.45rem); letter-spacing:-.02em; line-height:1.06; }
h2{ font-size:clamp(1.8rem,3.4vw,2.65rem); letter-spacing:-.015em; }
h3{ font-size:1.32rem; letter-spacing:-.005em; }
h4{ font-family:var(--f-body); font-size:1rem; font-weight:600; }
code,kbd,samp,.mono{ font-family:var(--f-mono); font-size:.88em; }
strong,b{ color:var(--ink); font-weight:600; }
small{ font-size:.86rem; }
ul,ol{ padding-left:1.25em; margin:0 0 1em; }
li{ margin:.3em 0; }
hr{ border:0; border-top:1px solid var(--line); margin:var(--s7) 0; }

.skip{ position:absolute; left:-9999px; top:8px; z-index:100; background:var(--ink); color:var(--bg); padding:10px 14px; }
.skip:focus{ left:max(16px,env(safe-area-inset-left,0px)); }
.nw{ white-space:nowrap; }
.anatomy figcaption .chip{ white-space:normal; }
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- frame ---------- */
.wrap{
  max-width:calc(var(--measure) + 2 * 32px); margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px));
}
@media (min-width:720px){ .wrap{ padding-left:max(32px,env(safe-area-inset-left,0px)); padding-right:max(32px,env(safe-area-inset-right,0px)); } }
.section{ padding-block:var(--s9); }
.section.tight{ padding-block:var(--s8); }
.section.alt{ background:var(--surface); border-block:1px solid var(--line); }
.section.ink{ background:var(--code-bg); color:var(--code-fg); }
.section.ink h2,.section.ink h3{ color:#fff; }
.read{ max-width:var(--read); }
.lede{ font-size:clamp(1.12rem,1.6vw,1.28rem); line-height:1.55; color:var(--ink); max-width:60ch; }
.muted{ color:var(--muted); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font:500 .74rem/1.2 var(--f-mono); letter-spacing:.09em; text-transform:uppercase; color:var(--accent);
  margin-bottom:var(--s4);
}
.eyebrow::before{ content:""; width:18px; height:1px; background:currentColor; }
.section-head{ display:grid; gap:var(--s4); margin-bottom:var(--s7); max-width:780px; }
.section-head p{ margin:0; }

/* ---------- header ---------- */
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--bg); }
.site-header{
  position:sticky; top:env(safe-area-inset-top,0px); z-index:50;
  background:color-mix(in srgb, var(--bg) 95%, transparent);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.site-header.scrolled{ border-bottom-color:var(--line); }
.bar{ display:flex; align-items:center; gap:var(--s5); min-height:68px; }
.brand{ display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font:600 1.22rem/1 var(--f-display); letter-spacing:-.01em; }
.brand svg{ width:28px; height:28px; flex:none; }
.brand .stem{ fill:var(--classical); }
.brand .bowl{ stroke:var(--pq); }
.nav{ margin-left:auto; display:flex; align-items:center; gap:var(--s5); }
.nav ul{ display:flex; gap:var(--s5); list-style:none; margin:0; padding:0; }
.nav li{ margin:0; }
.nav a:not(.btn){ color:var(--ink-2); text-decoration:none; font-size:.95rem; padding:6px 0; border-bottom:1.5px solid transparent; }
.nav a:not(.btn):hover{ color:var(--ink); }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--accent); }
.lang{ font:500 .78rem/1 var(--f-mono); letter-spacing:.06em; display:flex; gap:2px; }
.lang a,.lang span{ padding:6px 7px; text-decoration:none; color:var(--muted); border:1px solid transparent; }
.lang span[aria-current]{ color:var(--ink); border-color:var(--line-strong); }
.menu-btn{ display:none; margin-left:auto; background:none; border:1px solid var(--line-strong); color:var(--ink); padding:8px 12px; font:500 .85rem/1 var(--f-body); border-radius:var(--radius); cursor:pointer; }
@media (max-width:980px){
  .menu-btn{ display:inline-flex; gap:8px; align-items:center; }
  .nav{ display:none; position:absolute; left:0; right:0; top:100%; background:var(--surface); border-bottom:1px solid var(--line); box-shadow:var(--shadow);
        flex-direction:column; align-items:stretch; gap:0; padding:var(--s3) max(16px,env(safe-area-inset-right,0px)) var(--s5) max(16px,env(safe-area-inset-left,0px)); }
  .nav.open{ display:flex; }
  .nav ul{ flex-direction:column; gap:0; }
  .nav ul a:not(.btn){ display:block; padding:14px 2px; border-bottom:1px solid var(--line); font-size:1.05rem; }
  .nav a[aria-current="page"]{ border-bottom-color:var(--line); color:var(--accent); }
  .nav .lang{ padding:var(--s4) 0; }
  .nav .btn{ justify-content:center; }
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:0 20px;
  font:500 .98rem/1 var(--f-body); text-decoration:none; border-radius:var(--radius);
  border:1.5px solid var(--ink); color:var(--ink); background:transparent; cursor:pointer;
  transition:background .16s, color .16s, border-color .16s, transform .16s;
}
.btn:hover{ background:var(--ink); color:var(--bg); }
.btn.primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.btn.primary:hover{ background:var(--accent-strong); border-color:var(--accent-strong); color:var(--on-accent); }
.btn.small{ min-height:38px; padding:0 14px; font-size:.9rem; }
.btn .arrow{ transition:transform .18s; }
.btn:hover .arrow{ transform:translateX(3px); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; }
.textlink{ font-weight:500; text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px; }

/* ---------- hero ---------- */
.hero{ padding-block:var(--s8) var(--s9); }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:var(--s8); align-items:center; }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero .lede{ margin:var(--s5) 0 var(--s6); }
.hero-meta{ margin-top:var(--s6); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); font:500 .78rem/1.4 var(--f-mono); color:var(--muted); letter-spacing:.02em; }
.hero-meta span::before{ content:"▸ "; color:var(--accent); }
@media (max-width:980px){ .hero-grid{ grid-template-columns:minmax(0,1fr); gap:var(--s7); } .hero{ padding-block:var(--s6) var(--s8); } }

/* ---------- anatomy specimen ---------- */
.anatomy{ margin:0; position:relative; font-family:var(--f-mono); font-size:.76rem; color:var(--ink-2); }
.anatomy .file{
  position:relative; background:var(--surface); border:1px solid var(--line-strong); box-shadow:var(--shadow);
  padding:18px 112px 18px 18px; border-radius:var(--radius);
}
.anatomy .fhead{ display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:12px; }
.anatomy .seg{ position:relative; padding:8px 10px; border:1px solid var(--line); background:var(--bg); }
.anatomy .seg + .seg{ margin-top:8px; }
.anatomy .seg-label{ display:block; color:var(--ink); font-weight:500; font-size:.7rem; letter-spacing:.05em; margin-bottom:4px; }
.anatomy .hex{ display:block; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:clip; line-height:1.55; font-size:.68rem; }
.anatomy .contents{
  background:repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--line) 70%, transparent) 7px 8px), var(--bg);
}
.anatomy .contents .seg-label .not{ color:var(--muted); font-weight:400; }
.anatomy .box{ position:relative; margin-top:8px; padding:9px 11px; background:var(--surface); border:1.5px solid var(--classical); }
.anatomy .box b{ display:block; color:var(--ink); font-weight:600; font-size:.74rem; }
.anatomy .box span{ display:block; color:var(--muted); font-size:.66rem; margin-top:2px; }
.anatomy .ua{ margin-top:8px; padding:8px 9px 9px; border:1.5px dashed var(--line-strong); background:transparent; }
.anatomy .ua > .seg-label{ color:var(--muted); font-weight:400; }
.anatomy .pqbox{ border-color:var(--pq); background:var(--accent-tint); }
.anatomy .pqbox b{ color:var(--pq); }
.anatomy .bind{ margin-top:6px; padding-top:6px; border-top:1px dashed color-mix(in srgb, var(--pq) 45%, transparent); color:var(--pq) !important; }
.anatomy .seg[data-rail]::before,.anatomy .seg[data-rail]::after{ content:""; position:absolute; top:-9px; bottom:0; width:3px; transform-origin:top; }
.anatomy .seg.s1::before,.anatomy .seg.s1::after{ top:0; }
.anatomy .seg[data-rail]::before{ right:-58px; background:var(--classical); }
.anatomy .seg[data-rail]::after{ right:-84px; background:var(--pq); }
.anatomy .seg[data-rail="skip"]::before{ width:1.5px; right:-57px; background:repeating-linear-gradient(to bottom, var(--classical) 0 3px, transparent 3px 8px); }
.anatomy .seg[data-rail="skip"]::after{ width:1.5px; right:-83px; background:repeating-linear-gradient(to bottom, var(--pq) 0 3px, transparent 3px 8px); }
.anatomy .rl{ position:absolute; top:50%; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl; font:600 .6rem/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.anatomy .rl.c{ right:-77px; color:var(--classical); }
.anatomy .rl.q{ right:-103px; color:var(--pq); }
.anatomy figcaption{ margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; font-family:var(--f-mono); font-size:.72rem; }
.anatomy .scan{ position:absolute; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--pq), transparent); opacity:0; pointer-events:none; }
@media (max-width:520px){
  .anatomy .file{ padding-right:18px; }
  .anatomy .seg[data-rail]::before,.anatomy .seg[data-rail]::after,.anatomy .rl{ display:none; }
  .anatomy .hex{ font-size:.62rem; }
}

/* load sequence: everything ends visible; only plays when motion is allowed */
@media (prefers-reduced-motion:no-preference){
  .play .anatomy .hex{ animation:typein .5s steps(16) both; }
  .play .anatomy .hex:nth-child(3){ animation-delay:.08s } .play .anatomy .hex:nth-child(4){ animation-delay:.16s }
  .play .anatomy .scan{ animation:scan 1.1s .55s ease-in-out both; }
  .play .anatomy .seg[data-rail]::before{ animation:grow .5s .7s ease-out both; }
  .play .anatomy .seg[data-rail="skip"]::before{ animation-delay:.95s; }
  .play .anatomy .seg.s3::before{ animation-delay:1.15s; }
  .play .anatomy .seg[data-rail]::after{ animation:grow .5s 1.0s ease-out both; }
  .play .anatomy .seg[data-rail="skip"]::after{ animation-delay:1.25s; }
  .play .anatomy .seg.s3::after{ animation-delay:1.45s; }
  .play .anatomy .box.cl{ animation:pop .45s 1.15s cubic-bezier(.2,.8,.2,1.2) both; }
  .play .anatomy .ua{ animation:fade .4s 1.45s both; }
  .play .anatomy .pqbox{ animation:slot .6s 1.6s cubic-bezier(.2,.8,.2,1) both; }
  .play .anatomy .bind{ animation:fade .4s 2.1s both; }
  .play .anatomy figcaption .chip{ animation:pop .4s 2.35s both; }
  .play .anatomy figcaption .chip + .chip{ animation-delay:2.5s; }
}
@keyframes typein{ from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }
@keyframes scan{ 0%{ top:52px; opacity:0 } 10%{ opacity:1 } 90%{ opacity:1 } 100%{ top:calc(100% - 20px); opacity:0 } }
@keyframes grow{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }
@keyframes pop{ from{ opacity:0; transform:scale(.96) } to{ opacity:1; transform:none } }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes slot{ from{ opacity:0; transform:translateX(26px) } to{ opacity:1; transform:none } }

/* ---------- chips & verdicts ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 9px; font:500 .72rem/1 var(--f-mono); letter-spacing:.03em; border:1px solid var(--line-strong); color:var(--ink-2); background:var(--surface); border-radius:var(--radius); white-space:nowrap; }
.chip.ok{ color:var(--ok); background:var(--ok-bg); border-color:transparent; }
.chip.bad{ color:var(--bad); background:var(--bad-bg); border-color:transparent; }
.chip.pq{ color:var(--pq); background:var(--accent-tint); border-color:transparent; }
.chip.idle{ color:var(--muted); }
.chip .dot{ width:7px; height:7px; border-radius:50%; background:currentColor; }

/* ---------- facts strip ---------- */
.facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1.5px solid var(--ink); }
.fact{ padding:var(--s5) var(--s5) var(--s4) 0; min-width:0; }
.fact + .fact{ padding-left:var(--s5); border-left:1px solid var(--line); }
.fact .src{ font:500 .7rem/1.3 var(--f-mono); color:var(--accent); letter-spacing:.06em; text-transform:uppercase; }
.fact p{ margin:.55em 0 0; color:var(--ink); font-size:1.02rem; line-height:1.45; }
.fact q{ font-family:var(--f-display); font-size:1.12rem; quotes:"“" "”"; }
@media (max-width:860px){ .facts{ grid-template-columns:minmax(0,1fr); } .fact + .fact{ padding-left:0; border-left:0; border-top:1px solid var(--line); } }

/* ---------- gap scene ---------- */
.gap-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--s8); align-items:start; }
@media (max-width:980px){ .gap-grid{ grid-template-columns:minmax(0,1fr); gap:var(--s6); } }
.scene{ background:var(--surface); border:1px solid var(--line-strong); box-shadow:var(--shadow); border-radius:var(--radius); }
.scene-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line); }
.scene-head .t{ font:500 .72rem/1.2 var(--f-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.seg-ctl{ display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden; }
.seg-ctl button{ appearance:none; border:0; background:transparent; color:var(--ink-2); font:500 .8rem/1 var(--f-body); padding:9px 12px; cursor:pointer; }
.seg-ctl button + button{ border-left:1px solid var(--line-strong); }
.seg-ctl button[aria-pressed="true"]{ background:var(--ink); color:var(--bg); }
.scene-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.scene-doc{ padding:18px; border-right:1px solid var(--line); font-family:var(--f-mono); font-size:.72rem; }
.scene-doc .blk{ padding:8px 10px; border:1.5px solid var(--classical); margin-bottom:8px; background:var(--surface); color:var(--ink); transition:opacity .45s, transform .45s, filter .45s; }
.scene-doc .blk small{ display:block; color:var(--muted); font-size:.66rem; }
.scene-doc .blk.q{ border-color:var(--pq); background:var(--accent-tint); color:var(--pq); }
.scene-doc .blk.byte{ border-style:dashed; border-color:var(--line-strong); color:var(--muted); }
.scene[data-state="stripped"] .blk.q{ opacity:0; transform:translateX(30px); filter:blur(3px); }
.scene[data-state="stripped"] .ghost{ opacity:1; }
.scene .ghost{ border:1.5px dashed var(--bad); color:var(--bad); padding:8px 10px; margin-bottom:8px; opacity:0; transition:opacity .4s .25s; font-size:.68rem; }
.scene-doc .stack{ position:relative; }
.scene-doc .stack .ghost{ position:absolute; inset:0; margin:0; display:flex; align-items:center; }
.verdicts{ padding:18px; display:grid; gap:12px; align-content:start; }
.vrow{ display:grid; gap:6px; padding:12px 14px; border:1px solid var(--line); background:var(--bg); }
.vrow .who{ font-size:.86rem; color:var(--ink); font-weight:600; }
.vrow .why{ font-size:.8rem; color:var(--muted); line-height:1.45; }
.vrow .chip{ justify-self:start; transition:background .3s, color .3s; }
.scene-foot{ padding:12px 18px; border-top:1px solid var(--line); font-size:.78rem; color:var(--muted); }
@media (max-width:560px){ .scene-body{ grid-template-columns:minmax(0,1fr); } .scene-doc{ border-right:0; border-bottom:1px solid var(--line); } }

/* ---------- steps ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; counter-reset:step; border-top:1.5px solid var(--ink); }
.step{ padding:var(--s5) var(--s5) var(--s3) 0; min-width:0; }
.step + .step{ padding-left:var(--s5); border-left:1px solid var(--line); }
.step .n{ font:500 .74rem/1 var(--f-mono); color:var(--accent); letter-spacing:.08em; }
.step h3{ margin:.6em 0 .45em; }
.step p{ margin:0; font-size:.98rem; }
@media (max-width:860px){ .steps{ grid-template-columns:minmax(0,1fr); } .step + .step{ padding-left:0; border-left:0; border-top:1px solid var(--line); } }

/* ---------- evidence table ---------- */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.report{ background:var(--surface); border:1px solid var(--line-strong); box-shadow:var(--shadow); border-radius:var(--radius); overflow:hidden; }
.report-head{ background:var(--code-bg); color:var(--code-fg); padding:14px 18px; display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; font:500 .74rem/1.3 var(--f-mono); letter-spacing:.04em; }
.report-head b{ color:#fff; font-weight:600; }
table.data{ border-collapse:collapse; width:100%; min-width:560px; font-size:.95rem; font-variant-numeric:tabular-nums; }
table.data th{ text-align:left; font:600 .7rem/1.2 var(--f-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); padding:12px 16px; border-bottom:1px solid var(--line-strong); background:var(--surface); }
table.data td{ padding:13px 16px; border-bottom:1px solid var(--line); vertical-align:middle; color:var(--ink); }
table.data tr:last-child td{ border-bottom:0; }
table.data td.c, table.data th.c{ text-align:center; }
.report-foot{ padding:14px 18px; border-top:1px solid var(--line); font-size:.84rem; color:var(--muted); display:grid; gap:6px; }
.report-foot p{ margin:0; }

/* ---------- cards / audiences ---------- */
.grid-3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); }
.grid-2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s5); }
@media (max-width:980px){ .grid-3{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:760px){ .grid-2{ grid-template-columns:minmax(0,1fr); } }
.aud{ display:flex; flex-direction:column; gap:var(--s3); padding:var(--s6) var(--s5) var(--s5); background:var(--surface); border:1px solid var(--line); text-decoration:none; color:inherit; position:relative; transition:border-color .2s, transform .2s, box-shadow .2s; min-width:0; }
.aud:hover{ border-color:var(--ink); transform:translateY(-2px); box-shadow:var(--shadow); color:inherit; }
.aud .k{ font:500 .7rem/1.2 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.aud.primary .k{ color:var(--accent); }
.aud h3{ font-size:1.38rem; }
.aud p{ margin:0; font-size:.97rem; }
.aud .go{ margin-top:auto; padding-top:var(--s3); font-weight:500; color:var(--accent); }
.aud.primary{ border-top:3px solid var(--accent); }

/* running today */
.running{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.running div{ padding:var(--s5) var(--s4); border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-width:0; background:var(--surface); }
.running .tag{ font:500 .68rem/1.2 var(--f-mono); color:var(--accent); letter-spacing:.06em; text-transform:uppercase; }
.running b{ display:block; margin:.45em 0 .25em; font-size:1rem; }
.running p{ margin:0; font-size:.88rem; color:var(--muted); line-height:1.45; }
@media (max-width:980px){ .running{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .running{ grid-template-columns:minmax(0,1fr); } }

/* boundaries */
.bounds{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:0; border:1px solid var(--line-strong); background:var(--surface); }
.bounds > div{ padding:var(--s6); min-width:0; }
.bounds > div + div{ border-left:1px solid var(--line-strong); background:var(--bg); }
.bounds h3{ font-size:1.15rem; margin-bottom:var(--s4); }
.bounds ul{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.bounds li{ margin:0; padding-left:26px; position:relative; font-size:.97rem; }
.bounds li::before{ position:absolute; left:0; top:.05em; font:600 .9rem/1.4 var(--f-mono); }
.bounds .is li::before{ content:"✓"; color:var(--ok); }
.bounds .not li::before{ content:"—"; color:var(--muted); }
@media (max-width:760px){ .bounds{ grid-template-columns:minmax(0,1fr); } .bounds > div + div{ border-left:0; border-top:1px solid var(--line-strong); } }

/* ---------- CTA band ---------- */
.cta-band{ background:var(--code-bg); color:var(--code-fg); }
.cta-band .inner{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:var(--s7); align-items:end; padding-block:var(--s8); }
.cta-band h2{ color:#fff; }
.cta-band p{ color:#b9c1d6; }
.cta-band .eyebrow{ color:#9fabff; }
.cta-band .btn{ border-color:#fff; color:#fff; }
.cta-band .btn:hover{ background:#fff; color:#0c1424; }
.cta-band .btn.primary{ background:#4b5cf0; border-color:#4b5cf0; color:#fff; }
.cta-band .btn.primary:hover{ background:#6474ff; border-color:#6474ff; }
.cta-band .agenda{ list-style:none; padding:0; margin:0; display:grid; gap:10px; font-size:.95rem; }
.cta-band .agenda li{ margin:0; display:grid; grid-template-columns:72px 1fr; gap:10px; color:#d5dbea; }
.cta-band .agenda .t{ font:500 .76rem/1.6 var(--f-mono); color:#9fabff; }
@media (max-width:860px){ .cta-band .inner{ grid-template-columns:minmax(0,1fr); } }

/* ---------- page header (inner pages) ---------- */
.page-head{ padding-block:var(--s8) var(--s7); border-bottom:1px solid var(--line); }
.page-head .lede{ margin-top:var(--s4); }
.crumbs{ font:500 .74rem/1 var(--f-mono); color:var(--muted); letter-spacing:.04em; margin-bottom:var(--s5); display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; }
.crumbs li{ margin:0; } .crumbs li + li::before{ content:"/"; margin-right:8px; color:var(--line-strong); }
.crumbs a{ color:var(--muted); text-decoration:none; } .crumbs a:hover{ color:var(--accent); }

/* ---------- prose ---------- */
.prose{ max-width:var(--read); }
.prose h2{ font-size:clamp(1.55rem,2.6vw,2rem); margin:var(--s7) 0 var(--s4); }
.prose h3{ margin:var(--s6) 0 var(--s3); }
.prose > :first-child{ margin-top:0; }
.prose blockquote{ margin:var(--s5) 0; padding:var(--s4) var(--s5); border-left:3px solid var(--accent); background:var(--surface); font-family:var(--f-display); font-size:1.12rem; color:var(--ink); }
.prose blockquote cite{ display:block; margin-top:var(--s3); font:500 .74rem/1.3 var(--f-mono); color:var(--muted); font-style:normal; letter-spacing:.03em; }
.two-col{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--s8); align-items:start; }
.aside{ position:sticky; top:96px; display:grid; gap:var(--s4); padding:var(--s5); background:var(--surface); border:1px solid var(--line); font-size:.92rem; }
.aside h4{ font:600 .72rem/1.2 var(--f-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); }
.aside ul{ list-style:none; padding:0; margin:0; }
.aside li{ margin:.4em 0; }
@media (max-width:980px){ .two-col{ grid-template-columns:minmax(0,1fr); } .aside{ position:static; } }

.spec{ width:100%; border-collapse:collapse; font-size:.93rem; min-width:520px; }
.spec th,.spec td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.spec th{ font:600 .7rem/1.2 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border-bottom:1.5px solid var(--ink); }
.spec td:first-child{ color:var(--ink); font-weight:500; white-space:nowrap; }
.spec code{ color:var(--accent); }

.callout{ padding:var(--s5); background:var(--accent-tint); border-left:3px solid var(--accent); color:var(--ink); }
.callout p:last-child{ margin:0; }
.cite-card{ display:grid; grid-template-columns:auto 1fr; gap:var(--s5); align-items:start; padding:var(--s6); background:var(--surface); border:1px solid var(--line-strong); }
.cite-card .jr{ font:600 .7rem/1.3 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); writing-mode:vertical-rl; transform:rotate(180deg); border-left:1px solid var(--line); padding-left:12px; }
.cite-card h3{ font-size:1.3rem; margin-bottom:.5em; }
.cite-card p{ margin:.3em 0; font-size:.95rem; }
@media (max-width:600px){ .cite-card{ grid-template-columns:minmax(0,1fr); } .cite-card .jr{ writing-mode:horizontal-tb; transform:none; border-left:0; padding-left:0; } }

.faq details{ border-top:1px solid var(--line); padding:var(--s4) 0; }
.faq details:last-child{ border-bottom:1px solid var(--line); }
.faq summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:var(--s4); font-weight:600; color:var(--ink); font-size:1.05rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font:400 1.4rem/1 var(--f-mono); color:var(--accent); transition:transform .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq details p{ margin:var(--s3) 0 0; max-width:var(--read); }

.contact-card{ display:grid; gap:var(--s4); padding:var(--s6); background:var(--surface); border:1px solid var(--line-strong); box-shadow:var(--shadow); }
.contact-line{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:var(--s3) 0; border-bottom:1px solid var(--line); }
.contact-line .k{ font:500 .7rem/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); width:84px; }
.contact-line .v{ font:500 1.02rem/1.3 var(--f-mono); color:var(--ink); user-select:all; word-break:break-all; }
.copy{ appearance:none; border:1px solid var(--line-strong); background:transparent; color:var(--ink-2); font:500 .74rem/1 var(--f-mono); padding:6px 9px; border-radius:var(--radius); cursor:pointer; }
.copy:hover{ border-color:var(--ink); color:var(--ink); }

/* ---------- footer ---------- */
.site-footer{ padding-block:var(--s8) var(--s6); border-top:1px solid var(--line); font-size:.92rem; }
.foot-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:var(--s6); }
.foot-grid h2{ font:600 .7rem/1.2 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s3); }
.foot-grid ul{ list-style:none; padding:0; margin:0; }
.foot-grid li{ margin:.45em 0; }
.foot-grid a{ color:var(--ink-2); text-decoration:none; } .foot-grid a:hover{ color:var(--accent); }
.foot-base{ margin-top:var(--s7); padding-top:var(--s4); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:var(--s3) var(--s6); justify-content:space-between; color:var(--muted); font-size:.82rem; }
@media (max-width:860px){ .foot-grid{ grid-template-columns:1fr 1fr; } .foot-grid > :first-child{ grid-column:1 / -1; } }

/* mobile sticky CTA */
.mcta{ display:none; }
@media (max-width:760px){
  .mcta{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40; gap:8px;
    padding:10px max(12px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));
    background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:blur(10px); border-top:1px solid var(--line);
    transform:translateY(110%); transition:transform .25s; }
  .mcta.show{ transform:none; }
  .mcta .btn{ flex:1; justify-content:center; min-height:44px; padding:0 10px; font-size:.92rem; }
  body.has-mcta .site-footer{ padding-bottom:96px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
@media print{ .site-header,.mcta,.cta-band .btn-row{ display:none; } body{ background:#fff; } }

/* lab teaser stats */
.labstats{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; border-top:1px solid #2a3350; border-left:1px solid #2a3350; }
.labstats div{ padding:22px 20px; border-right:1px solid #2a3350; border-bottom:1px solid #2a3350; min-width:0; }
.labstats dt{ font:500 .7rem/1.3 var(--f-mono); letter-spacing:.07em; text-transform:uppercase; color:#8f99b5; }
.labstats dd{ margin:8px 0 0; font:600 clamp(1.6rem,3vw,2.3rem)/1 var(--f-mono); color:#fff; font-variant-numeric:tabular-nums; }
.labstats div:nth-child(2) dd,.labstats div:nth-child(1) dd{ color:#9fabff; }
.section.ink .gap-grid{ align-items:center; }

/* =================== LAB =================== */
.lab-head{ padding-bottom:var(--s6); }
.lab-facts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--s5); }
.lab-section{ padding-block:var(--s6) var(--s9); }
.lab{ display:grid; grid-template-columns:minmax(0,400px) minmax(0,1fr); gap:var(--s5); align-items:start; }
.lab-col{ display:grid; gap:var(--s5); min-width:0; }
@media (max-width:1060px){ .lab{ grid-template-columns:minmax(0,1fr); } }
.panel{ background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); padding:var(--s5); min-width:0; }
.panel-h{ display:flex; align-items:center; gap:10px; margin-bottom:var(--s4); }
.panel-h h2{ font:600 1.02rem/1.2 var(--f-body); color:var(--ink); letter-spacing:0; }
.panel-h .n{ display:inline-grid; place-items:center; width:24px; height:24px; border:1.5px solid var(--ink); border-radius:50%; font:600 .74rem/1 var(--f-mono); color:var(--ink); flex:none; }
.panel-h .meta{ margin-left:auto; font:500 .7rem/1.2 var(--f-mono); color:var(--muted); letter-spacing:.03em; text-align:right; }
.doc{ border:1px solid var(--line); background:var(--bg); }
.doc-name{ padding:8px 12px; border-bottom:1px solid var(--line); font:500 .74rem/1.3 var(--f-mono); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-preview{ margin:0; padding:12px; font:400 .72rem/1.5 var(--f-mono); color:var(--ink-2); white-space:pre-wrap; word-break:break-word; max-height:190px; overflow:auto; }
.doc-preview.hexview{ color:var(--muted); letter-spacing:.02em; }
.doc-preview mark{ background:var(--bad); color:#fff; padding:0 1px; border-radius:2px; animation:markin .6s ease-out; }
@keyframes markin{ 0%{ box-shadow:0 0 0 0 var(--bad); } 100%{ box-shadow:0 0 0 8px transparent; } }
.drop{ margin-top:var(--s3); padding:var(--s4); border:1.5px dashed var(--line-strong); display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; transition:border-color .15s, background .15s; }
.drop.over{ border-color:var(--accent); background:var(--accent-tint); }
.drop p{ margin:0; flex-basis:100%; font-size:.82rem; color:var(--muted); }
.drop label.btn{ cursor:pointer; }
input[type=file].sr-only:focus-visible + .linkbtn,
.drop:focus-within{ outline:0; }
.drop:has(input:focus-visible) label{ outline:2px solid var(--accent); outline-offset:3px; }
.linkbtn{ appearance:none; background:none; border:0; padding:4px 0; color:var(--accent); font:500 .9rem/1.2 var(--f-body); cursor:pointer; text-decoration:underline; text-underline-offset:.2em; }
.linkbtn:disabled{ color:var(--muted); cursor:not-allowed; text-decoration:none; }
.btn.block{ width:100%; justify-content:center; margin-top:var(--s4); }

.pipeline{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.pipeline li{ display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:10px; padding:9px 0; margin:0; border-bottom:1px solid var(--line); font-size:.9rem; }
.pipeline li:last-child{ border-bottom:0; }
.pipeline b{ font-weight:500; color:var(--ink-2); }
.pipeline .d{ grid-column:2; font:400 .72rem/1.45 var(--f-mono); color:var(--muted); overflow-wrap:anywhere; }
.pipeline .d:empty{ display:none; }
.pipeline .s{ grid-row:span 2; width:16px; height:16px; margin-top:2px; border-radius:50%; border:1.5px solid var(--line-strong); position:relative; }
.pipeline li[data-state="run"] .s{ border-color:var(--accent); border-top-color:transparent; animation:spin .8s linear infinite; }
.pipeline li[data-state="run"] b{ color:var(--ink); }
.pipeline li[data-state="ok"] .s{ background:var(--ok); border-color:var(--ok); }
.pipeline li[data-state="ok"] .s::after{ content:""; position:absolute; left:4.5px; top:1.5px; width:4px; height:8px; border:solid var(--surface); border-width:0 2px 2px 0; transform:rotate(45deg); }
.pipeline li[data-state="ok"] b{ color:var(--ink); }
.pipeline li[data-step="mldsa"][data-state="ok"] .s,.pipeline li[data-step="bind"][data-state="ok"] .s{ background:var(--pq); border-color:var(--pq); }
@keyframes spin{ to{ transform:rotate(360deg); } }

.attacks{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
@media (max-width:560px){ .attacks{ grid-template-columns:minmax(0,1fr); } }
.lab[data-phase="signed"] .hint{ visibility:hidden; }
.attacks button{ appearance:none; text-align:left; display:grid; gap:3px; padding:11px 14px; background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--radius); cursor:pointer; color:var(--ink); font:inherit; transition:border-color .15s, background .15s, transform .15s; }
.attacks button b{ font-weight:600; font-size:.92rem; }
.attacks button small{ color:var(--muted); font-size:.8rem; }
.attacks button:hover:not(:disabled){ border-color:var(--ink); transform:translateX(2px); }
.attacks button[aria-pressed="true"]{ border-color:var(--bad); background:var(--bad-bg); }
.attacks button[aria-pressed="true"] b{ color:var(--bad); }
.attacks button:disabled{ opacity:.5; cursor:not-allowed; }
.attacks + .linkbtn{ margin-top:var(--s3); }

.map{ position:relative; display:grid; gap:var(--s4); min-height:180px; }
.mapblk{ position:relative; min-width:0; }
.maph{ display:flex; justify-content:space-between; gap:12px; font:500 .7rem/1.3 var(--f-mono); letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.mapblk.ec .maph span:first-child{ color:var(--classical); }
.mapblk.pq .maph span:first-child{ color:var(--pq); }
.cells{ display:grid; grid-template-columns:repeat(auto-fill,minmax(10px,1fr)); gap:2px; min-height:12px; }
.cells i{ display:block; aspect-ratio:1; border-radius:1px; }
.ec .cells i{ background:color-mix(in srgb, var(--classical) calc(var(--v) * 100%), transparent); }
.pq .cells i{ background:color-mix(in srgb, var(--pq) calc(var(--v) * 100%), transparent); transition:transform .5s cubic-bezier(.5,0,.75,0), opacity .5s; transition-delay:calc(var(--i) * .7ms); }
.ec .cells{ grid-template-columns:repeat(auto-fill,minmax(10px,1fr)); max-width:120px; }
.cells i.hit{ background:var(--bad) !important; animation:hit 1.2s ease-out 2; position:relative; z-index:1; }
@keyframes hit{ 0%{ transform:scale(2.6); box-shadow:0 0 0 0 var(--bad); } 60%{ transform:scale(1.4); box-shadow:0 0 0 6px transparent; } 100%{ transform:scale(1.4); } }
@media (prefers-reduced-motion:no-preference){
  .cells i.in{ animation:cellin .35s calc(var(--i) * 1.6ms) both cubic-bezier(.2,.8,.2,1); }
  .cells i.swap{ animation:cellswap .45s calc(var(--i) * .8ms) both cubic-bezier(.2,.8,.2,1); }
}
@keyframes cellin{ from{ opacity:0; transform:scale(.2); } to{ opacity:1; transform:none; } }
@keyframes cellswap{ from{ opacity:0; transform:translateX(18px); } to{ opacity:1; transform:none; } }
.map[data-state="stripped"] .pq .cells i{ opacity:0; transform:translateY(26px) rotate(25deg); }
.map[data-state="grafting"] .pq .cells i{ opacity:0; transform:translateX(-24px); transition-duration:.3s; }
.stripped-msg{ position:absolute; inset:24px 0 0; display:grid; place-items:center; font:600 .78rem/1.2 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--bad); border:1.5px dashed var(--bad); opacity:0; pointer-events:none; transition:opacity .3s .35s; }
.map[data-state="stripped"] .stripped-msg{ opacity:1; }
.map-empty{ position:absolute; inset:0; display:grid; place-items:center; font-size:.9rem; color:var(--muted); background:repeating-linear-gradient(135deg, transparent 0 9px, color-mix(in srgb, var(--line) 60%, transparent) 9px 10px); border:1px dashed var(--line-strong); }
.map:not([data-state="empty"]) .map-empty{ display:none; }

.validators{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s5); position:relative; }
@media (max-width:640px){ .validators{ grid-template-columns:minmax(0,1fr); } }
.vpanel{ background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius); padding:var(--s5); min-width:0; border-top:3px solid var(--classical); }
.vpanel.pqv{ border-top-color:var(--pq); }
.vh{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.vh h3{ font:600 1.02rem/1.2 var(--f-body); }
.verdict{ font:600 .82rem/1 var(--f-mono); letter-spacing:.06em; padding:8px 11px; border-radius:var(--radius); transition:background .3s, color .3s; }
.verdict.idle{ color:var(--muted); background:var(--tint); }
.verdict.ok{ color:var(--ok); background:var(--ok-bg); }
.verdict.bad{ color:var(--bad); background:var(--bad-bg); }
.vpanel .sub{ font-size:.84rem; color:var(--muted); margin:10px 0 12px; }
.checks{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.checks li{ position:relative; margin:0; padding:6px 0 6px 28px; font-size:.86rem; color:var(--ink-2); border-top:1px solid var(--line); }
.checks li::before{ content:"·"; position:absolute; left:4px; top:5px; width:18px; text-align:center; font:600 .9rem/1.3 var(--f-mono); color:var(--muted); }
.checks li[data-state="ok"]::before{ content:"✓"; color:var(--ok); }
.checks li[data-state="bad"]::before{ content:"✗"; color:var(--bad); }
.checks li[data-state="bad"]{ color:var(--bad); font-weight:500; }
.checks li[data-state="skip"]::before{ content:"–"; }
.checks li[data-state="skip"]{ color:var(--muted); }
.vpanel .why{ margin:12px 0 0; font-size:.86rem; color:var(--ink); min-height:2.6em; }
@media (prefers-reduced-motion:no-preference){ .vpanel.flash{ animation:vflash .7s ease-out; } }
@keyframes vflash{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100%{ box-shadow:0 0 0 14px transparent; } }
.vbar{ display:flex; align-items:center; gap:10px; padding:12px 16px; border:1px solid var(--line-strong); background:var(--surface); font:600 .78rem/1.3 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--muted); border-radius:var(--radius); }
.vbar span{ display:none; }
.vbar .idle{ display:inline; }
.lab[data-verdict] .vbar .idle{ display:none; }
.lab[data-verdict="split"] .vbar{ background:var(--bad-bg); border-color:transparent; color:var(--bad); }
.lab[data-verdict="split"] .vbar .split,.lab[data-verdict="both"] .vbar .both,.lab[data-verdict="none"] .vbar .none{ display:inline; }
.lab[data-verdict="both"] .vbar{ background:var(--ok-bg); border-color:transparent; color:var(--ok); }
.lab[data-verdict="none"] .vbar{ color:var(--ink); }
@media (prefers-reduced-motion:no-preference){ .lab[data-verdict="split"] .vbar{ animation:pop .35s both; } }
.lab[data-verdict="split"] #v-perennis{ border-color:var(--bad); border-top-color:var(--bad); }

.logp{ padding-bottom:var(--s4); }
.log{ list-style:none; margin:0; padding:10px 12px; background:var(--code-bg); color:var(--code-fg); font:400 .72rem/1.6 var(--f-mono); max-height:180px; overflow:auto; border-radius:var(--radius); }
.log li{ margin:0; display:grid; grid-template-columns:62px minmax(0,1fr); gap:8px; word-break:break-all; }
.log .ts{ color:#7f8bb0; }
.log li.ok span:last-child{ color:#8fe0b5; }
.log li.bad span:last-child{ color:#ff9d93; }
.log li.atk span:last-child{ color:#ffd38a; }
.lab[data-disabled] { opacity:.45; pointer-events:none; }
html[lang="bg"] h1{ font-size:clamp(2.05rem,3.9vw,3.1rem); }