/* Квест по ИБ — оформление на системе Classical: бумажный фон, Cormorant Garamond + Lora,
   волосяные линейки, цвет — штрихом. Часы инцидента — колонтитул-полоса над страницей. */
:root {
  --color-bg: #f3f2f2;
  --color-paper: #f8f6f5;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-muted: #605d5d;
  --color-accent: #b68235;
  --color-accent-100: #fff3e4;
  --color-accent-300: #facb8d;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);
  --color-divider-soft: color-mix(in srgb, #201f1d 9%, transparent);

  /* verdicts: muted, applied as stroke */
  --good: #3f6f4a;
  --partial: #8a5f12;
  --bad: #a3402b;

  --font-heading: "Cormorant Garamond", "PT Serif", Georgia, serif;
  --font-body: "Lora", "PT Serif", Georgia, serif;
  --font-code: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-heading-weight: 600;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;
  --space-12: 55.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 10%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 12%, transparent);

  --measure: 50rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0; background: var(--color-bg); color: var(--color-text);
  font: 400 16.5px/1.62 var(--font-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.1; letter-spacing: -0.012em; margin: 0; text-wrap: balance;
}
p { margin: 0; }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-600); }
button { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.mono { font-family: var(--font-body); font-size: 0.86rem; font-variant-numeric: tabular-nums lining-nums; }
.muted { color: var(--color-muted); }
.eyebrow {
  font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-muted); font-variant-numeric: tabular-nums;
}
.eyebrow-accent { color: var(--color-accent-700); }

.v-good { --v: var(--good); }
.v-partial { --v: var(--partial); }
.v-bad { --v: var(--bad); }

/* ── Top bar ── */
.topbar { border-bottom: 1px solid var(--color-divider); background: var(--color-bg); }
.topbar-in {
  max-width: calc(var(--measure) + 2 * var(--space-4)); margin: 0 auto; padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: var(--space-2); background: none; border: 0; padding: 2px 0; cursor: pointer; }
.brand-mark {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--color-accent); color: var(--color-accent-700);
  font: italic 500 1.2rem/1 var(--font-heading);
}
.brand-name { font: var(--font-heading-weight) 1.4rem/1 var(--font-heading); letter-spacing: -0.01em; }
.brand-tag {
  font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--color-accent-700); border: 1px solid var(--color-accent); border-radius: var(--radius-sm); padding: 2px 6px 1px;
}
.nav { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.nav button {
  background: none; border: 0; padding: 4px 0; cursor: pointer; color: var(--color-muted); font-size: 0.92rem;
  border-bottom: 1px solid transparent;
}
.nav button:hover { color: var(--color-text); }
.nav button[aria-current="page"] { color: var(--color-accent-700); border-bottom-color: var(--color-accent); }

/* ── Running head: incident clock ── */
.runhead {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-divider);
}
.runhead:empty { display: none; }
.clock {
  max-width: calc(var(--measure) + 2 * var(--space-4)); margin: 0 auto; padding: var(--space-3) var(--space-4) var(--space-2);
  display: grid; grid-template-columns: minmax(9rem, auto) minmax(0, 1fr); grid-template-areas: "head track" "rows rows";
  column-gap: var(--space-6); row-gap: var(--space-1); align-items: center;
}
.clock-head { grid-area: head; display: flex; flex-direction: column; gap: 0; }
.clock-head .eyebrow { font-size: 0.6rem; letter-spacing: 0.12em; line-height: 1.35; max-width: 14rem; }
.clock-t {
  font: 400 2rem/1 var(--font-heading); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.01em;
  white-space: nowrap; margin-top: 2px;
}
.clock-t-pre { color: var(--color-accent-700); font-style: italic; margin-right: 1px; }
.clock-track { grid-area: track; position: relative; height: 1px; background: var(--color-divider); margin: 22px 0 12px; }
.clock-fill { position: absolute; left: 0; top: -1px; height: 3px; background: var(--color-accent); transition: width 0.5s ease; }
.clock-now {
  position: absolute; top: 50%; width: 11px; height: 11px; margin-left: -5.5px;
  transform: translateY(-50%) rotate(45deg); background: var(--color-bg); border: 1.5px solid var(--color-accent-700);
  transition: left 0.5s ease;
}
.clock-mark { position: absolute; top: -7px; height: 15px; width: 1px; background: var(--color-text); }
.clock-mark.is-missed { background: var(--bad); }
.clock-mark-label {
  position: absolute; bottom: 17px; left: 50%; transform: translateX(-50%);
  font-size: 0.72rem; color: var(--color-muted); white-space: nowrap;
}
.clock-mark.is-missed .clock-mark-label { color: var(--bad); text-decoration: line-through; }
.clock-rows {
  grid-area: rows; list-style: none; margin: 0; padding: var(--space-1) 0 0; border-top: 1px solid var(--color-divider-soft);
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); font-size: 0.82rem;
}
.clock-rows li { display: flex; gap: var(--space-2); align-items: baseline; }
.clock-dl { color: var(--color-muted); }
.clock-rows li .mono { font-size: 0.82rem; font-style: italic; }
.clock-rows li.is-near .mono { color: var(--partial); font-style: normal; font-weight: 600; }
.clock-rows li.is-missed .mono { color: var(--bad); font-style: normal; font-weight: 600; }
@media (max-width: 600px) {
  .clock { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "track" "rows"; }
  .clock-head { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
  .clock-t { font-size: 1.6rem; }
  .clock-rows { flex-direction: column; }
}

/* ── Page ── */
.wrap { max-width: calc(var(--measure) + 2 * var(--space-4)); margin: 0 auto; padding: var(--space-12) var(--space-4) 88px; }
.stack { display: flex; flex-direction: column; gap: var(--space-6); }
.lede { display: flex; flex-direction: column; gap: var(--space-3); max-width: 40rem; padding-bottom: var(--space-4); }
.lede h1 { font-size: clamp(2.4rem, 6vw, 3.6rem); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em; }
.lede p { font-size: 1.06rem; color: var(--color-muted); text-align: justify; hyphens: auto; text-wrap: pretty; }
.section-h {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3);
  border-bottom: 1px solid var(--color-text); padding-bottom: var(--space-2); margin-top: var(--space-4);
}
.section-h h2 { font-size: 1.7rem; }
.notice {
  border: 1px solid var(--partial); color: var(--color-text); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); font-size: 0.95rem;
}
.foot-note {
  color: var(--color-muted); font-size: 0.8rem; font-style: italic; max-width: 40rem;
  border-top: 1px solid var(--color-divider); padding-top: var(--space-3); margin-top: var(--space-6);
}

/* ── Buttons & chips ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none; background: transparent; border: 1px solid transparent;
  font: var(--font-heading-weight) 1.02rem/1.2 var(--font-heading); letter-spacing: 0.01em; color: var(--color-text);
  padding: var(--space-2) calc(var(--space-3) * 1.4); border-radius: var(--radius-md);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent-700); border-color: var(--color-accent); }
.btn-primary:hover:not([disabled]) { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active:not([disabled]) { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-2); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.chip {
  font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  border-radius: var(--radius-sm); padding: 2px 7px 1px; border: 1px solid var(--color-divider); color: var(--color-muted);
}
.chip-ready { color: var(--good); border-color: var(--good); }
.chip-review { color: var(--partial); border-color: var(--partial); }
.chip-local { color: var(--color-accent-700); border-color: var(--color-accent); }

/* ── Catalog: a table of contents ── */
.entries { display: flex; flex-direction: column; }
.entry {
  display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-6) 0; border-bottom: 1px solid var(--color-divider);
}
.entry-num {
  font: italic 400 2.6rem/0.9 var(--font-heading); color: var(--color-accent);
  font-variant-numeric: tabular-nums; padding-top: 4px;
}
.entry-body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.entry h3 { font-size: clamp(1.55rem, 3.4vw, 2rem); font-weight: 500; }
.card-sum { color: var(--color-text); font-size: 0.98rem; text-align: justify; hyphens: auto; max-width: 40rem; }
.card-err { color: var(--bad); font-size: 0.88rem; font-style: italic; }
.entry .actions { margin-top: var(--space-2); }
.meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); margin: var(--space-1) 0 0; }
.meta div { display: flex; gap: var(--space-2); align-items: baseline; min-width: 0; }
.meta dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-muted); }
.meta dd { margin: 0; font-size: 0.88rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .entry { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .entry-num { font-size: 1.8rem; }
}

/* ── Rich text ── */
.rich { display: flex; flex-direction: column; gap: var(--space-3); max-width: 42rem; }
.rich p { text-align: justify; hyphens: auto; text-wrap: pretty; }
.rich ul { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--space-1); }
.rich li::marker { color: var(--color-accent); }
.rich strong { font-weight: 600; }

/* ── Play ── */
.play-head { display: flex; flex-direction: column; gap: var(--space-2); }
.play-title { font-size: clamp(2rem, 5vw, 2.8rem); font-weight: 400; letter-spacing: -0.02em; }
.link-back {
  align-self: flex-start; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--color-muted); font-size: 0.88rem; font-style: italic; margin-bottom: var(--space-2);
}
.link-back:hover { color: var(--color-accent-700); }

.sheet {
  background: var(--color-paper); border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  padding: clamp(20px, 4vw, 40px); display: flex; flex-direction: column; gap: var(--space-4); box-shadow: var(--shadow-sm);
}
.company { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 var(--space-6); margin: 0; }
.company dt, .company dd { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-divider-soft); }
.company dt { color: var(--color-muted); font-size: 0.86rem; font-style: italic; }
.company dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .company { grid-template-columns: minmax(0, 1fr); }
  .company dt { border-bottom: 0; padding-bottom: 0; }
}
.role-line { font-size: 1rem; font-style: italic; }
.role-line b { font-style: normal; font-weight: 600; }

/* Step */
.step-meta {
  display: flex; gap: var(--space-4); flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.step-meta .when { font: italic 500 1.12rem/1.2 var(--font-heading); color: var(--color-accent-700); }
.step-meta .mono { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-muted); }
.step-title { font-size: clamp(1.7rem, 4vw, 2.25rem); font-weight: 500; }

.legal { display: flex; flex-direction: column; border-top: 1px solid var(--color-divider); padding-top: var(--space-3); }
.legal > .eyebrow { margin-bottom: var(--space-1); }
.legal-item {
  display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-2) 0; align-items: baseline;
}
.legal-item + .legal-item { border-top: 1px solid var(--color-divider-soft); }
.legal-norm { font-size: 0.8rem; color: var(--color-accent-700); font-variant-numeric: tabular-nums lining-nums; }
.legal-text { font-size: 0.92rem; }
@media (max-width: 560px) { .legal-item { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

.choices { display: flex; flex-direction: column; border-top: 1px solid var(--color-text); margin-top: var(--space-2); }
.choice {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: var(--space-3); align-items: baseline;
  text-align: left; background: transparent; border: 1px solid transparent; border-bottom-color: var(--color-divider);
  padding: var(--space-4) var(--space-3) var(--space-4) var(--space-2); cursor: pointer;
  transition: background 0.15s, opacity 0.2s, border-color 0.15s;
}
.choice:hover:not([disabled]) { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.choice:hover:not([disabled]) .choice-key { color: var(--color-accent-700); }
.choice:active:not([disabled]) { background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.choice[disabled] { cursor: default; }
.choice-key { font: italic 500 1.5rem/1 var(--font-heading); color: var(--color-accent); text-align: center; }
.choice-text { line-height: 1.55; text-wrap: pretty; }
.choice.is-dim { opacity: 0.42; }
.choice.is-picked { border-color: var(--v); border-radius: var(--radius-md); }
.choice.is-picked .choice-key { color: var(--v); }

.pill {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--v, var(--color-divider)); color: var(--v, var(--color-muted));
  border-radius: var(--radius-sm); padding: 2px 8px 1px;
}

.feedback {
  border: 1px solid var(--v); border-radius: var(--radius-md); padding: clamp(18px, 3vw, 28px);
  display: flex; flex-direction: column; gap: var(--space-3); scroll-margin-top: 150px;
  background: color-mix(in srgb, var(--v) 4%, transparent);
}
.fb-head { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.fb-glyph {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--v); color: var(--v); font: 500 1.05rem/1 var(--font-heading);
}
.fb-label { font: var(--font-heading-weight) 1.35rem/1.1 var(--font-heading); color: var(--v); }
.feedback .legal { border-top-color: color-mix(in srgb, var(--v) 35%, transparent); }

/* Ending & results */
.ending {
  display: flex; flex-direction: column; gap: var(--space-4);
  border-top: 3px double var(--v); border-bottom: 1px solid var(--color-divider); padding: var(--space-6) 0 var(--space-8);
}
.ending h2 { font-size: clamp(2.2rem, 6vw, 3.4rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; }
.ending .rich { font-size: 1.06rem; }
.ending .legal { border-top-color: var(--color-divider); }
.lessons { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; counter-reset: l; }
.lessons li {
  counter-increment: l; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: var(--space-2);
  padding: var(--space-2) 0; font-size: 1.02rem;
}
.lessons li + li { border-top: 1px solid var(--color-divider-soft); }
.lessons li::before { content: counter(l, upper-roman) "."; font: italic 500 1.1rem/1.5 var(--font-heading); color: var(--color-accent); }

.score { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
@media (max-width: 640px) { .score { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); } }
.score-big { display: flex; flex-direction: column; gap: var(--space-1); padding-right: var(--space-6); border-right: 1px solid var(--color-divider); }
@media (max-width: 640px) { .score-big { border-right: 0; padding-right: 0; } }
.score-num { font: 400 5.2rem/0.9 var(--font-heading); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.03em; }
.score-grade { font: var(--font-heading-weight) 1.3rem/1.2 var(--font-heading); color: var(--v); }
.score-big .muted { font-size: 0.82rem; font-style: italic; }
.bars { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding-top: var(--space-2); }
.bar-row { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) 3rem; gap: var(--space-3); align-items: center; font-size: 0.9rem; }
@media (max-width: 520px) { .bar-row { grid-template-columns: minmax(0, 1fr) 3rem; } .bar-row .bar { grid-column: 1 / -1; grid-row: 2; } }
.bar { position: relative; height: 3px; background: var(--color-divider-soft); }
.bar > span { display: block; height: 100%; }
.bar-val { text-align: right; }

.log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.log li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-3) 0; align-items: baseline; }
.log li + li { border-top: 1px solid var(--color-divider-soft); }
.log li > .mono:first-child { color: var(--color-accent-700); }
.log-step { font: italic 500 1.05rem/1.4 var(--font-heading); color: var(--color-text); }
@media (max-width: 520px) { .log li { grid-template-columns: minmax(0, 1fr) auto; } .log li .mono:first-child { grid-column: 1 / -1; } }

.copy-box {
  width: 100%; min-height: 10rem; font: 0.78rem/1.5 var(--font-code); border-radius: var(--radius-md);
  border: 1px solid var(--color-divider); background: var(--color-paper); color: var(--color-text); padding: var(--space-3);
}

/* ── Author mode ── */
.drop {
  border: 1px dashed var(--color-accent); border-radius: var(--radius-md); padding: var(--space-8) var(--space-4);
  text-align: center; display: flex; flex-direction: column; gap: var(--space-3); align-items: center;
  font-style: italic; color: var(--color-muted); transition: background 0.15s;
}
.drop.is-over { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
details.paste { border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); padding: var(--space-3) 0; }
details.paste summary { cursor: pointer; font: var(--font-heading-weight) 1.1rem/1.3 var(--font-heading); color: var(--color-accent-700); }
details.paste summary::marker { color: var(--color-accent); }
details.paste[open] { display: flex; flex-direction: column; gap: var(--space-3); }
textarea.code {
  width: 100%; min-height: 14rem; resize: vertical; font: 0.8rem/1.55 var(--font-code); caret-color: var(--color-accent);
  border-radius: var(--radius-md); border: 1px solid var(--color-divider); background: var(--color-paper); color: var(--color-text);
  padding: var(--space-3); margin-top: var(--space-2);
}
textarea.code:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.status-line { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; font: var(--font-heading-weight) 1.2rem/1.3 var(--font-heading); }
.status-line .muted { font: italic 400 0.9rem var(--font-body); }
.status-line.is-ok { color: var(--good); }
.status-line.is-bad { color: var(--bad); }
.issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.issues li { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-3); font-size: 0.92rem; padding: var(--space-2) 0; border-top: 1px solid var(--color-divider-soft); }
.issues .sev { font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px 1px; border-radius: var(--radius-sm); height: fit-content; margin-top: 3px; text-align: center; border: 1px solid; }
.issues .sev-err { color: var(--bad); }
.issues .sev-warn { color: var(--partial); }
.issues code { font: 0.76rem/1.5 var(--font-code); color: var(--color-muted); display: block; overflow-wrap: anywhere; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); margin: 0; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); }
.stats div { padding: var(--space-3) var(--space-3) var(--space-3) 0; }
.stats dt { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-muted); }
.stats dd { margin: 2px 0 0; font: 400 2rem/1.1 var(--font-heading); font-variant-numeric: tabular-nums lining-nums; }
.paths { overflow-x: auto; display: flex; flex-direction: column; gap: var(--space-2); }
.paths ol { margin: 0; padding-left: 1.8em; display: flex; flex-direction: column; gap: var(--space-2); font: 0.74rem/1.5 var(--font-code); }
.paths ol li::marker { color: var(--color-muted); }
.path { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tok { padding: 1px 6px; border-radius: var(--radius-sm); border: 1px solid var(--v, var(--color-divider)); color: var(--v, var(--color-text)); }
.tok-end { font-weight: 600; }
.arrow { color: var(--color-muted); }
pre.tpl {
  margin: 0; max-height: 26rem; overflow: auto; background: var(--color-paper); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); padding: var(--space-3); font: 0.78rem/1.55 var(--font-code); white-space: pre;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}
.sheet > .legal:first-child { border-top: 0; padding-top: 0; }