/* ============================================================
   TraceErase — 1-bit
   Цвета нет вообще. Ни одного. Всё держится на контрасте,
   инверсии и типографике: продукт про стирание, а не про неон.
   Статус читается формой, а не оттенком — заодно работает
   для дальтоников и на чёрно-белой печати.
   ============================================================ */

@font-face {
  font-family: 'Monocraft';
  src: url('/font/monocraft.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Monocraft';
  src: url('/font/monocraft-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

:root {
  color-scheme: dark;
  --ink: #0a0a0b;
  --paper: #ffffff;
  --tx: #ededed;
  --dim: #8b8b8f;
  --faint: #56565c;
  --hair: rgba(255, 255, 255, .13);
  --hair-soft: rgba(255, 255, 255, .07);
  --trace-rgb: 255, 255, 255;

  /* Стекло без цвета: только белый на чёрном */
  --g-bg: linear-gradient(150deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .018) 55%, rgba(255, 255, 255, .04));
  --g-spec: inset 0 1px 0 rgba(255, 255, 255, .15), inset 0 -1px 0 rgba(255, 255, 255, .03);
  --g-drop: 0 24px 70px -22px rgba(0, 0, 0, .85);
  --g-blur: 20px;

  /* Пиксельный — для дисплея и цифр. Читаемый моно — для текста. */
  --pixel: 'Monocraft', ui-monospace, Menlo, Consolas, monospace;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --r: 4px;   /* почти без скруглений: пиксельная сетка не терпит круглого */

  --spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1 100%);
  --flow: cubic-bezier(.16, 1, .3, 1);
  --step: steps(8, end);   /* дискретная анимация — в тон пиксельной сетке */
}

html[data-theme="light"] {
  color-scheme: light;
  --ink: #f5f5f2;
  --paper: #101011;
  --tx: #19191b;
  --dim: #66666b;
  --faint: #929297;
  --hair: rgba(10, 10, 11, .17);
  --hair-soft: rgba(10, 10, 11, .075);
  --trace-rgb: 10, 10, 11;
  --g-bg: linear-gradient(150deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .32) 55%, rgba(10, 10, 11, .025));
  --g-spec: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(10, 10, 11, .045);
  --g-drop: 0 24px 70px -30px rgba(10, 10, 11, .24);
}

html { scroll-behavior: smooth; scroll-padding-top: 88px }
body {
  background: var(--ink); color: var(--tx);
  font: 15px/1.65 var(--mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; min-height: 100svh;
  transition: background-color .45s var(--flow), color .35s var(--flow);
}
::selection { background: var(--paper); color: var(--ink) }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0 }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px }
.defs { position: absolute; width: 0; height: 0; pointer-events: none }

/* Пиксельный шрифт без сглаживания — иначе он мыльный, а не пиксельный */
.px, h1, h2, h3, .kicker, .logo, nav .links a, button, .btn, .chip, .n, .v,
.counts b, .ring b, .tag, .step .i, .stats > div, .badge, .ribbon, .st, .ui-control {
  font-family: var(--pixel);
  -webkit-font-smoothing: none;
  font-smooth: never;
  letter-spacing: 0;
}

/* ---------- фон: свет, зерно, развёртка ---------- */
.aurora { position: fixed; inset: -20%; z-index: 0; pointer-events: none; filter: blur(100px); opacity: .16 }
.aurora i { position: absolute; display: block; border-radius: 50%; background: radial-gradient(circle, #fff, transparent 68%); will-change: transform }
.aurora i:nth-child(1) { width: 46vw; height: 46vw; left: 4%;  top: 2%;  animation: drift1 30s var(--flow) infinite alternate }
.aurora i:nth-child(2) { width: 38vw; height: 38vw; right: 2%; top: 20%; animation: drift2 37s var(--flow) infinite alternate; opacity: .8 }
.aurora i:nth-child(3) { width: 32vw; height: 32vw; left: 34%; bottom: 4%; animation: drift3 43s var(--flow) infinite alternate; opacity: .6 }
@keyframes drift1 { to { transform: translate3d(22vw, 28vh, 0) scale(1.25) } }
@keyframes drift2 { to { transform: translate3d(-26vw, 34vh, 0) scale(.8) } }
@keyframes drift3 { to { transform: translate3d(18vw, -30vh, 0) scale(1.3) } }

#trace { position: fixed; inset: 0; z-index: 1; pointer-events: none }
.grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Горизонтальная развёртка — CRT, но еле заметная */
.scan-lines {
  position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, .28) 2px 4px);
}

/* ---------- стекло ---------- */
.glass {
  position: relative;
  background: var(--g-bg);
  border: 1px solid var(--hair);
  border-radius: var(--r);
  box-shadow: var(--g-spec), var(--g-drop);
  backdrop-filter: blur(var(--g-blur)) saturate(0);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(0);
}
/* saturate(0) — гарантия монохрома: даже если под стекло попадёт цвет, он обесцветится */
@supports (backdrop-filter: url(#liquid)) {
  .glass { backdrop-filter: url(#liquid) blur(var(--g-blur)) saturate(0) }
}
.glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .09) 47%, transparent 58%);
  background-size: 280% 100%; background-position: 180% 0;
  opacity: 0; transition: opacity .5s var(--flow);
}
.glass:hover::after { opacity: 1; animation: sweep 1.1s var(--flow) }
@keyframes sweep { from { background-position: 180% 0 } to { background-position: -80% 0 } }

.spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(255, 255, 255, .09), transparent 62%);
  opacity: 0; transition: opacity .45s var(--flow);
}
.spot:hover::before { opacity: 1 }

/* ---------- каркас ---------- */
.wrap { position: relative; z-index: 3; max-width: 1100px; margin: 0 auto; padding: 0 24px }
section { position: relative; z-index: 3; padding: 130px 0 }
section + section::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1100px, 92vw); height: 1px;
  /* пунктир вместо градиента — честнее для 1-bit */
  background: repeating-linear-gradient(90deg, var(--hair) 0 4px, transparent 4px 10px);
}
h2 { font-size: clamp(24px, 3.6vw, 36px); letter-spacing: -.01em; line-height: 1.22; margin-bottom: 16px; font-weight: 700 }
h3 { font-size: 15px; font-weight: 700 }
.sub { color: var(--dim); max-width: 62ch; margin-bottom: 52px; font-size: 14px }
/* Без пилюли, без рамки, без мигающей точки — это штампы, а не дизайн.
   Работают число и межбуквенное расстояние. */
.kicker { color: var(--dim); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 24px }
.kicker b { color: var(--paper); font-weight: 700 }
.kicker i { display: inline-block; width: 1px; height: 9px; background: var(--hair); margin: 0 7px; vertical-align: middle }

/* ---------- nav ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  border-bottom: 1px solid transparent;
  transition: background .5s var(--flow), border-color .5s var(--flow);
}
nav.stuck {
  background: rgba(10, 10, 11, .62); border-bottom-color: var(--hair);
  backdrop-filter: blur(18px) saturate(0); -webkit-backdrop-filter: blur(18px) saturate(0);
}
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px }
.logo { font-weight: 700; color: var(--tx); text-decoration: none; font-size: 16px; letter-spacing: -.02em }
.logo b { color: var(--ink); background: var(--paper); padding: 2px 4px; margin-left: 1px }
nav .links { display: flex; align-items: center; gap: 22px }
nav .links a { color: var(--dim); text-decoration: none; font-size: 11px; transition: color .25s var(--flow); text-transform: uppercase; letter-spacing: .06em }
nav .links a:hover { color: var(--paper) }
nav .ghost {
  border: 1px solid var(--hair); padding: 9px 15px; color: var(--tx) !important;
  background: rgba(255, 255, 255, .04); border-radius: 2px;
  transition: background .3s var(--flow), color .3s var(--flow);
}
nav .ghost:hover { background: var(--paper); color: var(--ink) !important; border-color: var(--paper) }

/* Панель прибора: язык и инверсия «экран / бумага». */
.ui-controls { display: flex; align-items: center; gap: 5px; padding-left: 13px; border-left: 1px solid var(--hair) }
.ui-control {
  height: 32px; min-width: 36px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; color: var(--dim); border: 1px solid var(--hair); border-radius: 2px; box-shadow: none;
  font-size: 9px; line-height: 1; letter-spacing: .08em; transform: none; transition: color .25s var(--flow), border-color .25s var(--flow), background .25s var(--flow);
}
.ui-control:hover { color: var(--paper); border-color: var(--paper); background: transparent; box-shadow: none; transform: none }
.ui-control:active { background: rgba(127, 127, 127, .12) }
.language-control i { width: 1px; height: 10px; background: var(--hair); transform: rotate(18deg) }
.language-control span { opacity: .35; transition: opacity .25s var(--flow), color .25s var(--flow) }
html[lang="ru"] #lang-ru, html[lang="en"] #lang-en { color: var(--paper); opacity: 1 }
.theme-glyph { color: var(--paper); font-size: 13px; line-height: 1; transition: transform .45s var(--spring) }
html[data-theme="light"] .theme-glyph { transform: rotate(180deg) }
#theme-label { white-space: nowrap }
@media (max-width: 780px) {
  nav .links { gap: 7px }
  nav .links a:not(.ghost) { display: none }
  .ui-controls { gap: 4px; padding-left: 0; border-left: 0 }
  .ui-control { padding: 0 7px }
  .theme-control { width: 34px; min-width: 34px }
  #theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0) }
  nav .ghost { padding-left: 11px; padding-right: 11px }
}

@media (max-width: 380px) {
  nav .wrap { padding-left: 12px; padding-right: 12px }
  .logo { font-size: 14px }
  .language-control { min-width: 53px }
  nav .ghost { padding: 9px 8px; font-size: 9px }
}

/* ---------- hero ---------- */
header { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 110px 0 70px; position: relative; z-index: 3 }
h1 { font-size: clamp(30px, 5.6vw, 64px); line-height: 1.12; letter-spacing: -.018em; font-weight: 700 }
.hw span { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .16em; margin-bottom: -.16em }
.hw i { display: inline-block; font-style: normal; transform: translateY(115%); animation: word .8s var(--flow) forwards; animation-delay: calc(var(--i) * .07s + .1s) }
@keyframes word { to { transform: translateY(0) } }

/* Затирание: белая полоса проходит по словам «цифровой след».
   Только полоса — текст остаётся белым и читаемым.
   ВАЖНО: никакой animation на самом .go. У `.hw i` и `h1 .go` одинаковая
   специфичность, и шорткат здесь перебьёт выезд слова — оно навсегда
   останется под маской. Всё движение живёт в ::after. */
h1 .go { position: relative }
h1 .go::after {
  content: ""; position: absolute; left: -2px; right: -2px; top: 0; bottom: 0;
  background: var(--paper); transform: scaleX(0); transform-origin: left;
  animation: wipe 1.5s var(--flow) 1.1s forwards;
}
@keyframes wipe {
  0%   { transform: scaleX(0); transform-origin: left }
  46%  { transform: scaleX(1); transform-origin: left }
  47%  { transform: scaleX(1); transform-origin: right }
  100% { transform: scaleX(0); transform-origin: right }
}

.lead { color: var(--dim); font-size: clamp(14px, 1.6vw, 17px); margin: 26px 0 38px; max-width: 56ch; opacity: 0; animation: fadeUp .9s var(--flow) .62s forwards }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: none } }

.scrollhint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 3; opacity: 0; animation: fadeUp .8s var(--flow) 1.9s forwards }
.scrollhint i { display: block; width: 20px; height: 34px; border: 1px solid var(--hair); border-radius: 2px; position: relative }
.scrollhint i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 5px; background: var(--paper); margin-left: -1.5px; animation: wheel 2s var(--step) infinite }
@keyframes wheel { 0% { opacity: 0; transform: translateY(0) } 30% { opacity: 1 } 100% { opacity: 0; transform: translateY(15px) } }

/* ---------- бегущая строка источников ---------- */
.ticker {
  position: relative; z-index: 3; overflow: hidden; padding: 13px 0;
  border-top: 1px solid var(--hair-soft); border-bottom: 1px solid var(--hair-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  opacity: 0; animation: fadeUp .9s var(--flow) 1.1s forwards;
}
.ticker div { display: flex; width: max-content; animation: slide 46s linear infinite }
.ticker:hover div { animation-play-state: paused }
.ticker span { color: var(--faint); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; padding: 0 16px; font-family: var(--pixel) }
.ticker span::after { content: "·"; margin-left: 16px; opacity: .5 }
@keyframes slide { to { transform: translateX(-50%) } }

/* ---------- форма ---------- */
.scan-purpose {
  min-inline-size: 0; max-width: 640px; margin-bottom: 9px; border: 0; opacity: 0;
  animation: fadeUp .9s var(--flow) .7s forwards;
}
.scan-purpose-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 8px; color: var(--faint); font: 10px var(--pixel); letter-spacing: .11em; text-transform: uppercase;
}
.scan-purpose-head b { color: var(--dim); font-weight: 400 }
.intent-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px }
.intent-option {
  min-width: 0; padding: 10px 11px; display: flex; align-items: center; gap: 8px;
  background: transparent; color: var(--dim); border: 1px solid var(--hair); box-shadow: none;
  font: 700 10px var(--pixel); text-align: left; text-transform: uppercase; cursor: pointer; transform: none;
  transition: color .25s var(--flow), border-color .25s var(--flow), background .25s var(--flow);
}
.intent-option input { position: absolute; width: 1px; height: 1px; flex: none; padding: 0; margin: 0; border: 0; opacity: 0; pointer-events: none }
.intent-option span { color: var(--faint); font-weight: 400 }
.intent-option b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.intent-option:hover { color: var(--paper); border-color: var(--paper); box-shadow: none; transform: none }
.intent-option:focus-within { outline: 2px solid var(--paper); outline-offset: 3px }
.intent-option.is-active { background: var(--paper); border-color: var(--paper); color: var(--ink) }
.intent-option.is-active span { color: var(--ink); opacity: .55 }
.scan { display: flex; gap: 8px; flex-wrap: wrap; max-width: 640px; padding: 8px; scroll-margin-top: 110px; opacity: 0; animation: fadeUp .9s var(--flow) .74s forwards }
.scan:focus-within { border-color: var(--paper) }
input, textarea {
  background: rgba(0, 0, 0, .35); border: 1px solid var(--hair); color: var(--tx);
  font: 14px/1.5 var(--mono); padding: 15px 16px; border-radius: 2px; outline: 0;
  transition: border-color .3s var(--flow), background .3s var(--flow);
}
input { flex: 1 1 260px }
input::placeholder { color: var(--faint) }
input:focus, textarea:focus { border-color: var(--paper); background: rgba(0, 0, 0, .5) }

/* Кнопка — инверсия: белый блок, чёрный текст. Единственный «акцент» на сайте. */
button, .btn {
  position: relative; background: var(--paper); color: var(--ink); border: 1px solid var(--paper);
  text-decoration: none; display: inline-block;
  font: 700 13px var(--pixel); padding: 15px 24px; border-radius: 2px; cursor: pointer;
  text-transform: uppercase; letter-spacing: .04em;
  transform: translate3d(var(--mx, 0), var(--my, 0), 0);
  transition: transform .45s var(--flow), background .25s var(--flow), color .25s var(--flow), box-shadow .3s;
}
button:hover, .btn:hover { box-shadow: 0 0 0 3px rgba(255, 255, 255, .16) }
button:active, .btn:active { transition-duration: .08s; background: var(--tx) }
button:disabled { background: transparent; color: var(--faint); border-color: var(--hair); cursor: wait; box-shadow: none }
.btn.big { padding: 19px 38px; font-size: 14px }
.ghostbtn {
  background: transparent; border: 1px solid var(--hair); color: var(--tx); text-decoration: none;
  padding: 12px 18px; border-radius: 2px; font: 700 12px var(--pixel); display: inline-block; text-align: center;
  text-transform: uppercase; transition: background .25s, color .25s, border-color .25s;
}
.ghostbtn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: none }
.note { color: var(--dim); font-size: 12px; margin-top: 15px }
.note.err { color: var(--paper); border-left: 2px solid var(--paper); padding-left: 9px }
header .note { font-size: 13px; line-height: 1.55; opacity: 0; animation: fadeUp .9s var(--flow) .86s forwards }
.free-promise { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 11px; max-width: 640px; margin-top: 12px; color: var(--dim); font-size: 11px; line-height: 1.55; opacity: 0; animation: fadeUp .9s var(--flow) .91s forwards }
.free-promise b { padding: 2px 5px; background: var(--paper); color: var(--ink); font: 700 9px var(--pixel); letter-spacing: .08em; white-space: nowrap }
.demo {
  appearance: none; padding: 0; margin-top: 13px; border: 0; background: transparent; color: var(--dim);
  font: 12px var(--pixel); text-transform: uppercase; letter-spacing: .07em; box-shadow: none;
  opacity: 0; animation: fadeUp .9s var(--flow) .96s forwards;
}
.demo:hover { color: var(--paper); box-shadow: none }.demo span { display: inline-block; margin-left: 5px; transition: transform .25s var(--flow) }.demo:hover span { transform: translateX(4px) }
.hero-outcomes { display: flex; flex-wrap: wrap; gap: 9px 22px; margin-top: 38px; opacity: 0; animation: fadeUp .9s var(--flow) 1.06s forwards }
.hero-outcomes span { color: var(--dim); font: 10px var(--pixel); letter-spacing: .08em; text-transform: uppercase }
.hero-outcomes i { font-style: normal }
.hero-outcomes b { color: var(--paper); margin-right: 7px; font-weight: 400 }
.hero-outcomes span + span::before { content: "/"; color: var(--hair); margin-right: 22px }

/* Предметный образ вместо декоративной иллюстрации: источник → связь → след. */
.signal-board {
  position: absolute; top: 50%; right: 24px; width: 348px; padding: 14px;
  transform: translateY(-44%); overflow: hidden; opacity: 0;
  animation: signalIn 1s var(--flow) 1.05s forwards;
}
@keyframes signalIn { from { opacity: 0; transform: translateY(calc(-44% + 18px)) } to { opacity: 1; transform: translateY(-44%) } }
.signal-head, .signal-board figcaption { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 10px var(--pixel); letter-spacing: .1em; text-transform: uppercase }
.signal-head { color: var(--dim); padding: 1px 2px 13px }
.signal-head b { color: var(--paper); font-weight: 400; white-space: nowrap }
.signal-head i { display: inline-block; width: 5px; height: 5px; margin-right: 6px; background: var(--paper); vertical-align: middle; animation: signalBlink 1.8s var(--step) infinite }
@keyframes signalBlink { 0%, 58% { opacity: 1 } 59%, 100% { opacity: .22 } }
.redaction-stage {
  position: relative; min-height: 210px; overflow: hidden;
  border-top: 1px solid var(--hair-soft); border-bottom: 1px solid var(--hair-soft);
  background-image: linear-gradient(var(--hair-soft) 1px, transparent 1px), linear-gradient(90deg, var(--hair-soft) 1px, transparent 1px);
  background-size: 22px 22px; background-position: -1px -1px;
}
.redaction-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 58%, rgba(255,255,255,.09), transparent 38%); pointer-events: none }
.redaction-cross { position: absolute; left: 50%; top: 52%; width: 64px; height: 64px; border: 1px solid var(--hair); border-radius: 50%; transform: translate(-50%, -50%); opacity: .75; animation: targetSpin 18s linear infinite }
.redaction-cross::before, .redaction-cross::after { content: ""; position: absolute; background: var(--hair); left: 50%; top: -13px; width: 1px; height: 88px }
.redaction-cross::after { transform: rotate(90deg) }
@keyframes targetSpin { to { transform: translate(-50%, -50%) rotate(360deg) } }
.trace-fragment {
  position: absolute; z-index: 1; min-width: 108px; padding: 7px 8px 8px; border: 1px solid var(--hair); border-radius: 0;
  background: var(--g-bg); color: var(--tx); text-align: left; box-shadow: none; cursor: crosshair;
  font: 400 10px var(--pixel); letter-spacing: .03em; text-transform: none; transition: border-color .25s var(--flow), transform .28s var(--flow), opacity .3s var(--flow); will-change: transform;
}
.trace-fragment small, .trace-fragment b { position: relative; z-index: 1; display: block; transition: opacity .18s var(--flow) }
.trace-fragment small { color: var(--faint); font: 8px var(--pixel); letter-spacing: .08em }
.trace-fragment b { margin-top: 3px; color: var(--tx); font: 10px var(--pixel); font-weight: 400; white-space: nowrap }
.trace-fragment::after { content: ""; position: absolute; z-index: 2; inset: 7px 6px; background: var(--paper); transform: scaleX(0); transform-origin: left; transition: transform .34s var(--step); pointer-events: none }
.trace-fragment:hover { border-color: var(--paper); box-shadow: 0 0 0 2px rgba(255,255,255,.1); transform: translateY(-2px) }
.trace-fragment.is-redacted { cursor: default; pointer-events: none; border-color: var(--paper) }
.trace-fragment.is-redacted small, .trace-fragment.is-redacted b { opacity: 0 }
.trace-fragment.is-redacted::after { transform: scaleX(1) }
.trace-fragment.f1 { left: 13px; top: 20px }.trace-fragment.f2 { right: 13px; top: 46px }
.trace-fragment.f3 { left: 30px; bottom: 28px }.trace-fragment.f4 { right: 30px; bottom: 14px }
.redaction-target { position: absolute; z-index: 1; top: 50%; left: 50%; width: 104px; transform: translate(-50%, -50%); text-align: center; pointer-events: none }
.redaction-target span { display: block; color: var(--faint); font: 8px var(--pixel); letter-spacing: .09em; text-transform: uppercase }
.redaction-target b { display: block; max-width: 104px; margin-top: 5px; overflow: hidden; color: var(--paper); font: 10px var(--pixel); font-weight: 400; text-overflow: ellipsis; white-space: nowrap; transition: color .3s var(--flow) }
.signal-board figcaption { justify-content: flex-start; color: var(--faint); padding: 12px 2px 1px; font-size: 10px }
.signal-board figcaption span + span::before { content: "·"; color: var(--dim); margin: 0 9px }
.signal-board.is-armed { border-color: rgba(255, 255, 255, .42) }
.signal-board.is-armed .redaction-stage { border-color: rgba(255, 255, 255, .35) }
.signal-board.is-armed .redaction-cross { border-color: var(--paper); opacity: 1 }
.signal-board.is-armed .redaction-target b { color: var(--paper) }
.signal-board.is-armed #signal-state { overflow: hidden; max-width: 156px; text-overflow: ellipsis }

/* ---------- источники ---------- */
.sources-main { position: relative; z-index: 3; padding: 150px 0 112px }
.sources-hero { max-width: 730px; margin-bottom: 56px }
.sources-hero h1 { margin-bottom: 22px; font-size: clamp(34px, 6vw, 64px); line-height: 1.05 }
.sources-hero h1 > span:last-child { color: var(--dim) }
.sources-hero p { max-width: 58ch; color: var(--dim); font-size: 15px }
.source-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px }
.sources-total { display: inline-flex; align-items: baseline; gap: 12px; padding: 13px 16px }
.sources-total b { color: var(--paper); font: 700 24px var(--pixel) }.sources-total span { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .1em }
.source-toolbar { display: grid; grid-template-columns: minmax(220px, 1fr) auto; align-items: end; gap: 18px; padding: 16px; margin-bottom: 10px }
.source-toolbar label > span { display: block; margin-bottom: 7px; color: var(--faint); font: 9px var(--pixel); letter-spacing: .1em; text-transform: uppercase }
.source-toolbar input { width: 100%; min-height: 42px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 0; outline: 0; background: transparent; color: var(--paper); font: 12px var(--mono) }
.source-toolbar input:focus { border-color: var(--paper) }
.source-modes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px }
.source-filters { display: flex; flex-wrap: wrap; gap: 7px; padding: 18px 0; border-top: 1px solid var(--hair-soft); border-bottom: 1px solid var(--hair-soft); margin-bottom: 14px }
.source-filter { padding: 9px 12px; background: transparent; border: 1px solid var(--hair); color: var(--dim); font: 10px var(--pixel); text-transform: uppercase; box-shadow: none }
.source-filter b { display: inline-block; margin-left: 7px; color: inherit; font-weight: 400 }.source-filter:hover { color: var(--paper); box-shadow: none }.source-filter.on { color: var(--ink); background: var(--paper); border-color: var(--paper) }
.source-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.source-item { position: relative; display: grid; grid-template-columns: 31px minmax(0, 1fr) auto 24px; gap: 9px; align-items: center; min-height: 64px; padding: 13px 14px; border: 1px solid var(--hair-soft); background: rgba(255, 255, 255, .025); transition: background .25s var(--flow), border-color .25s var(--flow), transform .25s var(--flow) }
.source-item:hover { background: rgba(255, 255, 255, .075); border-color: var(--hair); transform: translateX(3px) }.source-item > span { color: var(--faint); font: 10px var(--pixel) }
.source-item > div { min-width: 0 }.source-item b { display: block; overflow: hidden; color: var(--tx); font-size: 12px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap }.source-item small { display: block; margin-top: 3px; overflow: hidden; color: var(--faint); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; text-overflow: ellipsis; white-space: nowrap }
.source-item > a { display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid var(--hair); color: var(--dim); font-size: 11px; text-decoration: none }.source-item > a:hover { border-color: var(--paper); color: var(--paper) }
.source-mode { padding: 4px 6px; border: 1px solid var(--hair); color: var(--faint); font: normal 8px var(--pixel); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap }
.source-mode.auto { border-color: var(--paper); background: var(--paper); color: var(--ink) }.source-mode.manual { border-style: dashed }
.sources-note { max-width: 66ch; margin-top: 22px; color: var(--faint); font-size: 11px }
@media (max-width: 760px) { .sources-main { padding-top: 120px }.source-toolbar { grid-template-columns: 1fr }.source-modes { justify-content: flex-start }.source-grid { grid-template-columns: 1fr }.source-item { min-height: 58px }.source-filters { gap: 5px } }

/* ---------- отчёт ---------- */
#report { padding-top: 110px }
.rhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 32px }
#rtitle { word-break: normal; overflow-wrap: anywhere }
.ring { position: relative; width: 84px; height: 84px; flex: none }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg) }
.ring circle { fill: none; stroke: var(--hair); stroke-width: 5 }
.ring #arc { stroke: var(--paper); stroke-linecap: butt; stroke-dasharray: 276.5; stroke-dashoffset: 276.5; transition: stroke-dashoffset .45s var(--flow) }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; color: var(--paper) }

.counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 10px; margin-bottom: 26px }
.counts > div { padding: 18px }
.counts b { display: block; font-size: 26px; font-weight: 700; line-height: 1.25 }
.counts small { color: var(--dim); font-size: 11px; font-family: var(--mono) }
/* Плитка найденного инвертирована — она должна кричать без единого красного пикселя */
.counts > div:first-child { background: var(--paper); border-color: var(--paper) }
.counts > div:first-child b { color: var(--ink) }
.counts > div:first-child small { color: rgba(0, 0, 0, .62) }
.counts > div:first-child::after, .counts > div:first-child::before { display: none }
@keyframes bump { 0% { transform: none } 35% { transform: translateY(-4px) scale(1.12) } 100% { transform: none } }
.counts b.hit { animation: bump .5s var(--spring) }

/* Карта строится как инструмент: центральный идентификатор и только подтверждённые связи. */
.trace-graph { margin: 0 0 18px; padding: clamp(20px, 3vw, 28px); overflow: hidden }
.trace-graph[hidden] { display: none }
.report-progress { margin: -4px 0 14px; color: var(--faint); font-size: 11px; letter-spacing: .025em }
.trace-graph-head { display: flex; align-items: end; justify-content: space-between; gap: 16px }
.trace-graph-head .kicker { margin-bottom: 8px }.trace-graph-head h3 { font-size: clamp(16px, 2vw, 21px) }
#graph-count { color: var(--faint); font: 10px var(--pixel); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap }
#graph-note { min-height: 1.7em; margin: 8px 0 15px; color: var(--dim); font-size: 12px }
.trace-graph-viewport { overflow-x: auto; border: 1px solid var(--hair-soft); background-image: linear-gradient(var(--hair-soft) 1px, transparent 1px), linear-gradient(90deg, var(--hair-soft) 1px, transparent 1px); background-size: 20px 20px }
.trace-graph-svg { display: block; width: 100%; min-width: 760px; height: auto; min-height: 330px }
.trace-edge { stroke: var(--hair); stroke-width: 1.2; stroke-dasharray: 4 7; animation: graphEdgeIn .52s var(--flow) both }
.trace-edge.is-zone { stroke: var(--faint); stroke-dasharray: 2 8 }
.trace-edge.is-account { stroke: var(--dim); stroke-dasharray: 1 0; stroke-width: 1.35 }
.trace-node { cursor: default; transform-box: fill-box; transform-origin: center; animation: graphNodeIn .48s var(--spring) both }
.trace-node.is-link { cursor: pointer }.trace-node.is-link:hover .trace-node-dot { fill: var(--paper) }.trace-node.is-link:hover .trace-node-label { fill: var(--paper) }
.trace-node-dot { fill: var(--ink); stroke: var(--paper); stroke-width: 1.5; transition: fill .25s var(--flow), stroke .25s var(--flow) }
.trace-node-root .trace-node-dot { fill: var(--paper); stroke: var(--paper); stroke-width: 1 }
.trace-node-label { fill: var(--tx); font: 12px var(--pixel); letter-spacing: .02em; transition: fill .25s var(--flow) }
.trace-node-sub { fill: var(--faint); font: 10px var(--mono); letter-spacing: .05em; text-transform: uppercase }
.trace-node-root .trace-node-label { fill: var(--paper); font-weight: 700 }
.trace-group { transform-box: fill-box; transform-origin: center; animation: graphGroupIn .45s var(--spring) both }
.trace-group-dot { fill: var(--paper); stroke: var(--paper); stroke-width: 1 }
.trace-group-label { fill: var(--dim); font: 10px var(--pixel); letter-spacing: .08em; text-transform: uppercase }
.trace-graph-legend { margin-top: 12px; color: var(--faint); font-size: 10px; line-height: 1.55 }
@keyframes graphEdgeIn { from { stroke-dashoffset: 68; opacity: 0 } to { stroke-dashoffset: 0; opacity: 1 } }
@keyframes graphNodeIn { from { opacity: 0; transform: scale(.35) } to { opacity: 1; transform: scale(1) } }
@keyframes graphGroupIn { from { opacity: 0; transform: scale(.4) rotate(18deg) } to { opacity: 1; transform: scale(1) rotate(0) } }

.filters { display: flex; gap: 6px; margin-bottom: 12px }
.chip {
  background: transparent; border: 1px solid var(--hair); color: var(--dim);
  font: 700 11px var(--pixel); padding: 8px 14px; border-radius: 2px; text-transform: uppercase;
  transition: background .25s, color .25s, border-color .25s;
}
.chip:hover { color: var(--paper) }
.chip.on { background: var(--paper); color: var(--ink); border-color: var(--paper) }

.rows { overflow: hidden }
.rows:empty::after { content: attr(data-empty); display: block; padding: 42px; text-align: center; color: var(--faint); font-size: 12px }
.rows.onlyfound .row:not(.is-found) { display: none }
.row {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--hair-soft);
  animation: rowin .5s var(--flow) backwards; transition: background .3s var(--flow);
}
.row:last-child { border-bottom: 0 }
.row:hover { background: rgba(255, 255, 255, .04) }
@keyframes rowin { from { opacity: 0; transform: translateX(-14px) } to { opacity: 1; transform: none } }
.row .src { font-size: 13px; font-weight: 600 }
.row .src a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hair); transition: border-color .25s }
.row .src a:hover { border-color: var(--paper) }
.row .det { color: var(--dim); font-size: 11px; margin-top: 3px; word-break: break-word }
.row .cat { color: var(--faint); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-family: var(--pixel) }

/* Статус без цвета: заливка / контур / штриховка */
.st { font-size: 10px; padding: 5px 9px; border: 1px solid; white-space: nowrap; text-transform: uppercase; border-radius: 2px }
.st.found { background: var(--paper); color: var(--ink); border-color: var(--paper); font-weight: 700 }
.st.free { background: transparent; color: var(--faint); border-color: var(--hair) }
.st.unknown {
  color: var(--dim); border-color: var(--hair); border-style: dashed;
  background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(255, 255, 255, .07) 3px 6px);
}
.row .act {
  background: transparent; border: 1px solid var(--hair); color: var(--dim);
  font: 700 10px var(--pixel); padding: 7px 11px; text-transform: uppercase; box-shadow: none;
  transition: background .25s, color .25s, border-color .25s;
}
.row .act:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); box-shadow: none }
@media (max-width: 640px) { .row { grid-template-columns: 1fr auto } .row .cat { display: none } .row .act { grid-column: 1 / -1; justify-self: start } }

.rcta { margin-top: 22px; padding: 26px; border-color: var(--paper); display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; animation: fadeUp .7s var(--flow) backwards }
.rcta h3 b { background: var(--paper); color: var(--ink); padding: 1px 6px }
.rcta p { color: var(--dim); font-size: 12px; margin-top: 6px }
.report-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 12px }
.cardbtn { padding: 12px 18px; font-size: 12px }
.print-meta { display: none }
.manual-review { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr); gap: 22px 30px; align-items: end; margin-top: 12px; padding: clamp(22px, 4vw, 32px); border-style: dashed }
.manual-review[hidden] { display: none }.manual-review h3 { margin: 7px 0 8px; font-size: clamp(18px, 3vw, 27px) }.manual-review h3 b { display: inline-block; padding: 1px 6px; background: var(--paper); color: var(--ink); font-family: var(--pixel) }.manual-review p { max-width: 58ch; color: var(--dim); font-size: 11px }
.manual-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px }.manual-chip { padding: 8px 10px; border: 1px solid var(--hair); color: var(--tx); font: 10px var(--pixel); text-decoration: none; text-transform: uppercase }.manual-chip:hover { border-color: var(--paper); background: var(--paper); color: var(--ink) }
.manual-review > .source-link { grid-column: 1 / -1; margin-top: 0 }
@media (max-width: 720px) { .manual-review { grid-template-columns: 1fr }.manual-actions { justify-content: flex-start } }

/* Главный продуктовый артефакт: не абстрактный score, а собранное публичное досье. */
.stranger-view { margin: 0 0 26px; overflow: hidden; border-color: var(--paper); animation: dossierIn .8s var(--flow) backwards }
@keyframes dossierIn { from { opacity: 0; transform: translateY(18px); clip-path: inset(0 0 100% 0) } to { opacity: 1; transform: none; clip-path: inset(0) } }
.dossier-topline {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 9px 14px; background: var(--paper); color: var(--ink);
  font: 700 9px var(--pixel); letter-spacing: .13em; text-transform: uppercase;
}
.dossier-topline b { font-weight: 400; opacity: .62 }
.dossier-grid { display: grid; grid-template-columns: minmax(0, 1fr) 285px }
.dossier-story { min-width: 0; padding: clamp(25px, 4vw, 40px) }
.dossier-story .kicker { margin-bottom: 14px }
.dossier-story h3 { font-size: clamp(20px, 3vw, 29px); line-height: 1.25 }
.dossier-story h3 b { color: var(--paper); border-bottom: 1px solid var(--paper) }
.dossier-story > p { max-width: 60ch; min-height: 3.2em; margin-top: 16px; color: var(--dim); font-size: 13px }
.dossier-sources { margin-top: 28px }
.dossier-sources > span { display: block; margin-bottom: 9px; color: var(--faint); font: 10px var(--pixel); letter-spacing: .11em; text-transform: uppercase }
#dossier-sources { display: flex; flex-wrap: wrap; gap: 6px }
#dossier-sources span { padding: 6px 8px; border: 1px solid var(--hair); color: var(--tx); font: 10px var(--pixel); text-transform: uppercase }
#dossier-sources span:first-child { border-color: var(--paper); color: var(--paper) }
.dossier-score {
  padding: clamp(25px, 4vw, 36px); border-left: 1px solid var(--hair);
  background-image: linear-gradient(var(--hair-soft) 1px, transparent 1px), linear-gradient(90deg, var(--hair-soft) 1px, transparent 1px);
  background-size: 18px 18px;
}
.dossier-score > span { color: var(--faint); font: 10px var(--pixel); letter-spacing: .11em; text-transform: uppercase }
.dossier-score > div { display: flex; align-items: baseline; margin: 24px 0 4px; line-height: 1 }
.dossier-score b { color: var(--paper); font: 700 clamp(52px, 7vw, 74px)/.9 var(--pixel) }
.dossier-score i { color: var(--faint); font: 12px var(--pixel); font-style: normal }
.dossier-score strong { color: var(--tx); font: 400 10px var(--pixel); letter-spacing: .08em; text-transform: uppercase }
.dossier-score p { margin-top: 24px; color: var(--faint); font-size: 10px; line-height: 1.55 }
.dossier-facts { display: grid; grid-template-columns: 1.5fr .75fr .75fr; border-top: 1px solid var(--hair) }
.dossier-facts > div { min-width: 0; padding: 15px 18px }
.dossier-facts > div + div { border-left: 1px solid var(--hair) }
.dossier-facts span { display: block; margin-bottom: 4px; color: var(--faint); font: 9px var(--pixel); letter-spacing: .1em; text-transform: uppercase }
.dossier-facts b { display: block; overflow: hidden; color: var(--paper); font: 400 12px var(--pixel); text-overflow: ellipsis; white-space: nowrap }

.cleanup { margin-top: 18px; padding: 25px; border-color: var(--hair); }
.cleanup-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; margin-bottom: 18px }
.cleanup .kicker { margin-bottom: 8px }.cleanup h3 { font-size: 17px }
.visibility { min-width: 154px; color: var(--dim); font-size: 10px; text-align: right; text-transform: uppercase; letter-spacing: .09em; font-family: var(--pixel) }
.visibility b { display: block; color: var(--paper); font-weight: 400; margin: 4px 0 8px }
.visibility > i { display: block; height: 4px; background: var(--hair); overflow: hidden }.visibility > i > i { display: block; width: 0; height: 100%; background: var(--paper); transition: width .7s var(--flow) }
.cleanup-progress { display: grid; grid-template-columns: 1fr auto; gap: 7px 16px; align-items: center; margin-bottom: 5px; color: var(--faint); font: 10px var(--pixel); letter-spacing: .09em; text-transform: uppercase }
.cleanup-progress b { color: var(--paper); font-weight: 400 }
.cleanup-progress > i { grid-column: 1 / -1; display: block; height: 2px; background: var(--hair); overflow: hidden }
.cleanup-progress > i > i { display: block; width: 0; height: 100%; background: var(--paper); transition: width .55s var(--flow) }
.cleanup ol { list-style: none }
.cleanup-task { display: flex; align-items: center; gap: 12px; min-height: 64px; border-top: 1px solid var(--hair-soft); color: var(--dim); font-size: 12px; transition: opacity .25s var(--flow) }
.cleanup-task label { min-width: 0; flex: 1; display: flex; align-items: center; gap: 13px; padding: 12px 0; cursor: pointer }
.cleanup-task input { appearance: none; position: absolute; width: 1px; height: 1px; flex: none; padding: 0; margin: 0; border: 0; opacity: 0; pointer-events: none }
.cleanup-check { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--hair); color: transparent; font: 700 11px var(--pixel); transition: background .25s, color .25s, border-color .25s }
.cleanup-task input:focus-visible + .cleanup-check { outline: 2px solid var(--paper); outline-offset: 3px }
.cleanup-task input:checked + .cleanup-check { background: var(--paper); border-color: var(--paper); color: var(--ink) }
.cleanup-copy { min-width: 0; display: block }
.cleanup-copy b { display: block; color: var(--tx); font-weight: 600 }
.cleanup-copy small { display: block; margin-top: 2px; color: var(--faint); font-size: 10px }
.cleanup-task.is-done .cleanup-copy { opacity: .42; text-decoration: line-through }
.task-link { flex: none; color: var(--dim); border: 1px solid var(--hair); padding: 5px 8px; text-decoration: none; font: 10px var(--pixel); transition: color .25s, border-color .25s, background .25s }
.task-link:hover { color: var(--ink); border-color: var(--paper); background: var(--paper) }

/* ---------- ценность и жизненные сценарии ---------- */
.value-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: clamp(52px, 9vw, 118px); align-items: start }
.value-layout h2 { margin: 0; font-size: clamp(27px, 4vw, 45px) }
.value-layout h2 > span:last-child, .mission-card h2 > span:last-child { color: var(--dim) }
.value-list { border-top: 1px solid var(--hair) }
.value-list article { display: grid; grid-template-columns: 105px 1fr; gap: 18px; padding: 21px 0; border-bottom: 1px solid var(--hair); align-items: baseline }
.value-list b { color: var(--paper); font: 700 13px var(--pixel); text-transform: uppercase }
.value-list p { color: var(--dim); font-size: 15px; line-height: 1.7 }

.moment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.moment-card { min-height: 252px; padding: 28px; display: flex; flex-direction: column; color: inherit; text-decoration: none; transition: transform .5s var(--flow), border-color .35s var(--flow) }
.moment-card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, .34) }
.moment-card > span { color: var(--faint); font: 9px var(--pixel); letter-spacing: .14em; text-transform: uppercase }
.moment-card h3 { margin-top: auto; padding-top: 54px; font-size: 17px }
.moment-card p { color: var(--dim); font-size: 12.5px; margin-top: 9px; max-width: 48ch }
.moment-card i { color: var(--paper); font: 9px var(--pixel); font-style: normal; letter-spacing: .07em; text-transform: uppercase; margin-top: 20px; opacity: .52; transition: opacity .3s var(--flow), transform .3s var(--flow) }
.moment-card:hover i { opacity: 1; transform: translateX(4px) }

/* ---------- карточки ---------- */
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)) }
.card { padding: 28px; transition: transform .6s var(--flow), border-color .4s var(--flow) }
.card:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, .3) }
.card .n { font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; line-height: 1.1; color: var(--paper) }
.card p { color: var(--dim); font-size: 13px; margin-top: 12px }

/* ---------- шаги ---------- */
.steps { padding: 0 26px }
.step { display: flex; gap: 20px; padding: 25px 0; border-bottom: 1px solid var(--hair-soft); align-items: flex-start }
.step:last-child { border: 0 }
.step .i {
  flex: none; width: 44px; height: 44px; border: 1px solid var(--hair); border-radius: 2px;
  display: grid; place-items: center; color: var(--paper); font-weight: 700; font-size: 12px;
  transition: background .3s var(--flow), color .3s var(--flow);
}
.step:hover .i { background: var(--paper); color: var(--ink) }
.step p { color: var(--dim); font-size: 13px; margin-top: 5px }
.step-state { margin-left: auto; padding: 5px 7px; border: 1px solid var(--hair-soft); color: var(--faint); font: 9px var(--pixel); letter-spacing: .12em; text-transform: uppercase }

/* ---------- до / после: ластик открывает очищенный слой ---------- */
.eraser { overflow: hidden; padding: 0; --erase: 0% }
.eraser-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--hair-soft); color: var(--faint); font: 10px var(--pixel); text-transform: uppercase; letter-spacing: .12em }
.eraser-top b { color: var(--paper); font-weight: 400; text-align: center }
.erase-stage { position: relative; min-height: 334px; overflow: hidden }
.eraser .pane { min-height: 334px; padding: 22px; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none }
.eraser .after { position: absolute; z-index: 2; inset: 0; clip-path: inset(0 calc(100% - var(--erase)) 0 0); background: linear-gradient(120deg, #151517, #09090a); border-right: 1px solid var(--paper); transition: clip-path .05s linear }
.erase-handle { position: absolute; z-index: 3; top: 50%; left: var(--erase); width: 26px; height: 38px; margin: -19px 0 0 -13px; background: var(--paper); color: var(--ink); pointer-events: none; transition: left .05s linear }
.erase-handle::before { content: "↔"; position: absolute; inset: 0; display: grid; place-items: center; font: 700 12px var(--pixel) }
.erase-range { position: absolute; z-index: 4; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize }
.pane { padding: 22px; min-height: 300px }
.tag { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper); margin-bottom: 16px }
.hit { border-bottom: 1px solid var(--hair-soft); padding: 10px 0; font-size: 11px; color: var(--dim) }
.hit b { display: block; color: var(--tx); font-weight: 400; font-size: 12px; margin-bottom: 2px }
.pane.after .hit b { color: var(--paper) }
.pane.after .hit { color: var(--dim) }
.clean { color: var(--paper); text-align: center; padding: 38px 0; font-size: 12px }
.stats { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 30px }
.stats > div { font-size: clamp(19px, 2.6vw, 26px); font-weight: 700; color: var(--paper) }
.stats small { display: block; color: var(--dim); font-size: 11px; font-weight: 400; font-family: var(--mono); margin-top: 3px }

/* ---------- покрытие ---------- */
.coverage-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .58fr); align-items: end; gap: 58px; margin-bottom: 48px }
.coverage-intro h2 { margin: 0 }
.coverage-intro p { color: var(--dim); font-size: 12px; max-width: 43ch; padding-bottom: 3px }
.coverage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px }
.coverage-card { position: relative; padding: 20px; min-height: 124px; border: 1px solid var(--hair); background: var(--g-bg); box-shadow: var(--g-spec); overflow: hidden }
.coverage-card::after { content: ""; position: absolute; right: -19px; bottom: -28px; width: 90px; height: 90px; border: 1px solid var(--hair); transform: rotate(45deg) }
.coverage-card b { position: relative; display: block; color: var(--paper); font: 700 30px/1 var(--pixel); margin-bottom: 12px }.coverage-card span { position: relative; color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .1em }
.coverage-card small { position: absolute; left: 20px; bottom: 16px; color: var(--faint); font: 8px var(--pixel); letter-spacing: .08em; text-transform: uppercase }
.source-link { display: inline-block; color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--hair); margin-top: 22px; padding-bottom: 3px; font: 10px var(--pixel); text-transform: uppercase; letter-spacing: .07em; transition: color .25s var(--flow), border-color .25s var(--flow) }
.source-link:hover { color: var(--paper); border-color: var(--paper) }.source-link span:last-child { margin-left: 5px }

/* ---------- манифест ---------- */
.trust-board { padding: clamp(28px, 5vw, 56px); overflow: hidden }
.trust-intro { display: grid; grid-template-columns: 165px minmax(0, 1.3fr) minmax(240px, .7fr); gap: clamp(24px, 5vw, 66px); align-items: start }
.trust-intro .kicker { margin: 7px 0 0 }
.trust-intro h2 { margin: 0; font-size: clamp(25px, 3.5vw, 38px) }
.trust-intro h2 span:last-child { color: var(--dim) }
.trust-intro p { color: var(--dim); font-size: 12px; padding-top: 5px }
.control-handoff { display: grid; grid-template-columns: 1fr 90px 1fr; align-items: stretch; margin-top: clamp(42px, 7vw, 72px); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair) }
.control-side { padding: 25px 2px }
.control-side > span { color: var(--paper); font: 700 10px var(--pixel); letter-spacing: .12em }
.control-side ol { list-style: none; counter-reset: trust; margin-top: 17px }
.control-side li { counter-increment: trust; display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 8px 0; color: var(--dim); font-size: 12px }
.control-side li::before { content: "0" counter(trust); color: var(--faint); font: 9px var(--pixel) }
.control-side.is-user > span { display: inline-block; background: var(--paper); color: var(--ink); padding: 3px 7px }
.control-side.is-user li { color: var(--tx) }
.handoff-mark { position: relative; display: grid; place-items: center }
.handoff-mark i { position: absolute; left: 8px; right: 8px; height: 1px; background: repeating-linear-gradient(90deg, var(--hair) 0 4px, transparent 4px 8px) }
.handoff-mark b { position: relative; padding: 6px 8px; background: var(--ink); color: var(--paper); font: 16px var(--pixel) }
.trust-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px 16px; padding-top: 20px; color: var(--faint); font: 9px var(--pixel); letter-spacing: .1em; text-transform: uppercase }
.trust-foot i { width: 1px; height: 10px; background: var(--hair) }

.mission-card { padding: clamp(30px, 6vw, 72px); display: grid; grid-template-columns: 190px 1fr; gap: clamp(34px, 7vw, 92px); align-items: center; overflow: hidden }
.mission-card h2 { font-size: clamp(28px, 4.5vw, 50px); line-height: 1.18; margin-bottom: 26px }
.mission-card p { color: var(--dim); max-width: 62ch; font-size: 13px }
.mission-mark { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid var(--hair); background-image: linear-gradient(var(--hair-soft) 1px, transparent 1px), linear-gradient(90deg, var(--hair-soft) 1px, transparent 1px); background-size: 20px 20px }
.mission-mark::before, .mission-mark::after { content: ""; position: absolute; inset: 19%; border: 1px solid var(--dim); transform: rotate(45deg) }
.mission-mark::after { inset: 31%; border-color: var(--paper); animation: markPulse 2.8s var(--step) infinite }
.mission-mark span { position: relative; z-index: 2; background: var(--paper); color: var(--ink); font: 700 18px var(--pixel); padding: 8px }
.mission-mark i { position: absolute; z-index: 3; left: 0; right: 0; height: 1px; background: var(--paper); box-shadow: 0 0 12px rgba(255,255,255,.6); animation: markScan 4s var(--step) infinite }
@keyframes markScan { 0% { top: 8%; opacity: 0 } 8% { opacity: 1 } 76% { top: 92%; opacity: 1 } 77%, 100% { top: 92%; opacity: 0 } }
@keyframes markPulse { 50% { opacity: .28 } }

/* ---------- финал ---------- */
.final { text-align: center; padding-bottom: 140px }
.final h2 { font-size: clamp(23px, 4.4vw, 44px); line-height: 1.25; margin-bottom: 36px }
footer { position: relative; z-index: 3; border-top: 1px solid var(--hair-soft); padding: 38px 0; color: var(--faint); font-size: 11px; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap }

/* ---------- светлая тема: интерфейс становится печатным досье ---------- */
html[data-theme="light"] .aurora { opacity: .055 }
html[data-theme="light"] .aurora i { background: radial-gradient(circle, #101011, transparent 68%) }
html[data-theme="light"] .grain { opacity: .025; mix-blend-mode: multiply }
html[data-theme="light"] .scan-lines { opacity: .13 }
html[data-theme="light"] .glass::after { background: linear-gradient(105deg, transparent 38%, rgba(10, 10, 11, .055) 47%, transparent 58%) }
html[data-theme="light"] .spot::before { background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(10, 10, 11, .065), transparent 62%) }
html[data-theme="light"] nav.stuck { background: rgba(245, 245, 242, .72) }
html[data-theme="light"] nav .ghost { background: rgba(10, 10, 11, .025) }
html[data-theme="light"] input, html[data-theme="light"] textarea { background: rgba(255, 255, 255, .58) }
html[data-theme="light"] input:focus, html[data-theme="light"] textarea:focus { background: rgba(255, 255, 255, .9) }
html[data-theme="light"] button:hover, html[data-theme="light"] .btn:hover { box-shadow: 0 0 0 3px rgba(10, 10, 11, .11) }
html[data-theme="light"] .ui-control:hover, html[data-theme="light"] .demo:hover, html[data-theme="light"] .ghostbtn:hover { box-shadow: none }
html[data-theme="light"] .signal-board.is-armed { border-color: rgba(10, 10, 11, .42) }
html[data-theme="light"] .signal-board.is-armed .redaction-stage { border-color: rgba(10, 10, 11, .35) }
html[data-theme="light"] .signal-board.is-armed .redaction-cross { border-color: var(--paper) }
html[data-theme="light"] .source-item { background: rgba(10, 10, 11, .018) }
html[data-theme="light"] .source-item:hover, html[data-theme="light"] .row:hover { background: rgba(10, 10, 11, .055) }
html[data-theme="light"] .st.unknown { background: repeating-linear-gradient(45deg, transparent 0 3px, rgba(10, 10, 11, .055) 3px 6px) }
html[data-theme="light"] .counts > div:first-child small { color: rgba(245, 245, 242, .68) }
html[data-theme="light"] .moment-card:hover, html[data-theme="light"] .card:hover { border-color: rgba(10, 10, 11, .34) }
html[data-theme="light"] .eraser .after { background: linear-gradient(120deg, #eeeeea, #fafaf7) }
html[data-theme="light"] .mission-mark i { box-shadow: 0 0 12px rgba(10, 10, 11, .25) }
html[data-theme="light"] dialog::backdrop { background: rgba(245, 245, 242, .76) }

/* ---------- диалог ---------- */
dialog {
  color: var(--tx); padding: 28px; max-width: 640px; width: calc(100% - 32px); margin: auto;
  opacity: 0; transform: translateY(12px) scale(.98);
  transition: opacity .35s var(--flow), transform .35s var(--flow), overlay .35s allow-discrete, display .35s allow-discrete;
}
dialog[open] { opacity: 1; transform: none }
@starting-style { dialog[open] { opacity: 0; transform: translateY(12px) scale(.98) } }
dialog::backdrop { background: rgba(10, 10, 11, .72); backdrop-filter: blur(5px) saturate(0); opacity: 0; transition: opacity .35s var(--flow), overlay .35s allow-discrete, display .35s allow-discrete }
dialog[open]::backdrop { opacity: 1 }
@starting-style { dialog[open]::backdrop { opacity: 0 } }
dialog textarea { width: 100%; margin: 16px 0; resize: vertical; font-size: 12px; line-height: 1.6 }
.lrow { display: flex; gap: 8px; flex-wrap: wrap }

/* ---------- появление ----------
   Всё скрытое живёт под .js: нет скрипта — нет и пряток, контент виден сразу. */
.js .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--flow), transform .9s var(--flow) }
.js .rv.vis { opacity: 1; transform: none }
.js .stg > * { opacity: 0; transform: translateY(28px); transition: opacity .85s var(--flow), transform .85s var(--flow); transition-delay: calc(var(--i, 0) * .08s + .1s) }
.js .rv.vis .stg > *, .js .stg.vis > * { opacity: 1; transform: none }
.js #report .stg > * { transition-delay: calc(var(--i, 0) * .07s) }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important }
  html { scroll-behavior: auto }
  .js .rv, .js .stg > *, .lead, .scan-purpose, .scan, header .note, .free-promise, .demo, .hero-outcomes, .signal-board, .scrollhint, .ticker { opacity: 1 !important; transform: none !important }
  .hw i { transform: none !important }
  h1 .go { color: var(--faint) }
  h1 .go::after { display: none }
  .ticker div { animation: none }
}

@media (min-width: 1021px) {
  header .wrap { padding-right: 390px }
}
@media (max-width: 1020px) {
  .signal-board { display: none }
}

@media (max-width: 860px) {
  section { padding: 104px 0 }
  .value-layout, .coverage-intro { grid-template-columns: 1fr; gap: 38px }
  .coverage-intro { margin-bottom: 38px }
  .moment-grid { grid-template-columns: 1fr }
  .moment-card { min-height: 220px }
  .mission-card { grid-template-columns: 130px 1fr }
  .trust-intro { grid-template-columns: 1fr 1fr }
  .trust-intro .kicker { grid-column: 1 / -1 }
}

@media (max-width: 620px) {
  .wrap { padding-left: 18px; padding-right: 18px }
  header { justify-content: flex-start; min-height: auto; padding-top: 132px; padding-bottom: 86px }
  header .kicker { line-height: 1.8 }
  h1 { font-size: clamp(31px, 11vw, 48px) }
  .lead { margin: 22px 0 28px }
  .scan { display: grid; grid-template-columns: 1fr; padding: 7px }
  .scan input, .scan button { width: 100% }
  .intent-options { grid-template-columns: 1fr 1fr }
  .hero-outcomes { gap: 9px 16px; margin-top: 32px }
  .hero-outcomes span + span::before { margin-right: 16px }
  .scrollhint { display: none }
  .value-list article { grid-template-columns: 82px 1fr; gap: 12px }
  .moment-card { min-height: 235px; padding: 24px }
  .steps { padding: 0 18px }
  .step { gap: 14px }
  .step-state { display: none }
  .eraser-top { padding: 13px 14px; font-size: 9px; letter-spacing: .07em }
  .eraser-top b { max-width: 150px }
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px }
  .mission-card { grid-template-columns: 1fr; padding: 28px }
  .mission-mark { width: 112px }
  .final { padding-bottom: 104px }
}

@media (max-width: 760px) {
  .coverage-grid { grid-template-columns: repeat(2, 1fr) }
  .cleanup-head { align-items: stretch; flex-direction: column }
  .visibility { text-align: left }
  .dossier-grid { grid-template-columns: 1fr }
  .dossier-score { border-top: 1px solid var(--hair); border-left: 0 }
  .dossier-facts { grid-template-columns: 1fr 1fr }
  .dossier-facts > div:first-child { grid-column: 1 / -1 }
  .dossier-facts > div:nth-child(2) { border-left: 0; border-top: 1px solid var(--hair) }
  .dossier-facts > div:nth-child(3) { border-top: 1px solid var(--hair) }
  .trust-intro { grid-template-columns: 1fr }
  .trust-intro .kicker { grid-column: auto }
  .control-handoff { grid-template-columns: 1fr }
  .handoff-mark { min-height: 54px }
  .handoff-mark i { left: 0; right: 0 }
  .handoff-mark b { transform: rotate(90deg) }
}

@media (max-width: 380px) {
  .intent-options { grid-template-columns: 1fr }
  .report-actions > * { width: 100% }
}

@media print {
  @page { size: A4; margin: 12mm }
  *, *::before, *::after { animation: none !important; transition: none !important; print-color-adjust: exact; -webkit-print-color-adjust: exact }
  body { background: #fff; color: #000; font-family: ui-monospace, monospace }
  .aurora, #trace, .grain, .scan-lines { display: none !important }
  nav, header, .ticker, #value, #coverage, #problem, #how, #result, #trust, #mission, .final, footer, .report-actions, .rcta, .filters, .manual-review { display: none !important }
  #report { display: block !important; padding: 0 }.wrap { max-width: none; padding: 0 }.glass, .rows, .cleanup, .stranger-view { color: #000; background: #fff; border-color: #000; box-shadow: none }
  #report[hidden] { display: none !important }
  .print-meta { display: grid; gap: 4px; margin: 0 0 12mm; padding: 4mm; border: 1px solid #000; color: #000 }
  .print-meta b { font: 700 12pt ui-monospace, monospace; text-transform: uppercase }.print-meta span, .print-meta small { color: #222; font-size: 8pt; line-height: 1.45 }
  .rows { overflow: visible }.rows.onlyfound .row, .rows.onlyfound .row:not(.is-found) { display: grid }.row[data-state="free"] { display: none !important }
  .row, .counts > div, .stranger-view, .cleanup-task { break-inside: avoid; page-break-inside: avoid }
  .counts > div:first-child { background: #000; color: #fff }.counts > div:first-child b, .counts > div:first-child small { color: #fff }.note, .row .det, .cleanup li, .visibility { color: #333 }
  .dossier-topline { background: #000; color: #fff }.dossier-score, .dossier-facts, .dossier-facts > div { border-color: #000 }.dossier-score b, .dossier-story h3 b, .dossier-facts b { color: #000 }
  .row .src a { color: #000; text-decoration: underline }.row .act { display: none }.st.found { background: #000; color: #fff; border-color: #000 }.st.unknown { color: #000; background: none; border-color: #000 }
}