/* golos-text-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Golos Text Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/site/fonts/golos-text-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* golos-text-cyrillic-wght-normal */
@font-face {
  font-family: 'Golos Text Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/site/fonts/golos-text-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* golos-text-latin-ext-wght-normal */
@font-face {
  font-family: 'Golos Text Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/site/fonts/golos-text-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* golos-text-latin-wght-normal */
@font-face {
  font-family: 'Golos Text Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(/site/fonts/golos-text-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* literata-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Literata Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/site/fonts/literata-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* literata-cyrillic-wght-normal */
@font-face {
  font-family: 'Literata Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/site/fonts/literata-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* literata-greek-ext-wght-normal */
@font-face {
  font-family: 'Literata Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/site/fonts/literata-greek-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* literata-greek-wght-normal */
@font-face {
  font-family: 'Literata Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/site/fonts/literata-greek-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* literata-vietnamese-wght-normal */
@font-face {
  font-family: 'Literata Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/site/fonts/literata-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* literata-latin-ext-wght-normal */
@font-face {
  font-family: 'Literata Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/site/fonts/literata-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* literata-latin-wght-normal */
@font-face {
  font-family: 'Literata Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  src: url(/site/fonts/literata-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* Сайт arcula (web/site/README.md), прототип — brand/landing-min. Тема одна — «Ночь» ЛК (src/styles/tokens.css),
   шрифты — те же, свои файлы (@font-face выше); моноширинный — системный. */
:root {
  color-scheme: dark;
  --bg: #0f1113; --surface: #171a1d; --hover: #1e2226; --sunk: #14171a;
  --ink: #e9ebee; --ink-2: #b7bdc5; --muted: #8b929b; --line: #262b30; --line-2: #363c43;
  --amber: #e2a64a;
  --ui: "Golos Text Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Literata Variable", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 48px);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.55 var(--ui); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--ink-2); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--amber); color: var(--bg); }
.lnk { color: var(--ink); border-bottom: 1px solid var(--line-2); transition: border-color .15s; }
.lnk:hover { border-bottom-color: var(--amber); }

.page { min-height: 100svh; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); }

/* ---------- Шапка и подвал ---------- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px var(--gutter); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand svg { flex: none; }
.brand span { font: 400 22px/1 var(--serif); letter-spacing: -.01em; }
.brand small { font: 400 13px/1 var(--ui); color: var(--muted); padding-left: 12px; margin-left: 2px; border-left: 1px solid var(--line-2); white-space: nowrap; }
.mark-light { fill: var(--amber); }
.links { display: flex; align-items: center; gap: 22px; font-size: 14px; color: var(--ink-2); }
.links a { white-space: nowrap; }
.links a:hover, .links a[aria-current] { color: var(--ink); }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding: 18px var(--gutter) 22px; font: 400 12px/1.4 var(--mono); color: var(--muted); }
.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.foot a:hover { color: var(--ink); }
@media (max-width: 640px) {
  .brand small { display: none; }
  .links { gap: 16px; }
}

/* ---------- Лендинг: один экран, ларец знаками, вопрос и действие ---------- */
.stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 3.2vh, 34px); padding: 0 var(--gutter); min-width: 0; }
.art { width: min(100%, 980px); display: flex; justify-content: center; overflow: hidden; }
.say { width: min(100%, 720px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.say h1 { margin: 0; font: 300 clamp(26px, 3.4vw, 40px)/1.12 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.say h1 em { font-style: normal; color: var(--amber); }
.lead { color: var(--ink-2); max-width: 520px; text-wrap: pretty; }
.act { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 10px; font: 500 15px/1 var(--ui); background: var(--ink); color: var(--bg); transition: transform .15s, background .15s; }
.btn:hover { background: #fff; } .btn:active { transform: scale(.98); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.ghost:hover { background: var(--hover); }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.why { font-size: 12.5px; color: var(--muted); }
.why a { color: var(--ink-2); border-bottom: 1px solid var(--line-2); }
.why a:hover { color: var(--ink); }
@media (max-width: 640px) {
  .act { width: 100%; } .act .btn { flex: 1; justify-content: center; padding: 0 12px; font-size: 14px; white-space: nowrap; }
}

/* ASCII-ларец (src/components/AsciiArt.tsx): 150 знаков в ширину, 44 строки; кегль — по ширине и по доле высоты окна */
.ascii {
  margin: 0; white-space: pre; user-select: none;
  font: 400 min(11px, calc((min(100vw, 1076px) - 2 * var(--gutter)) / 91), calc(46svh / 45)) / 1.02 var(--mono);
  color: color-mix(in srgb, var(--muted) 85%, transparent);
}
.ascii { animation: rise 1.4s cubic-bezier(.2,.6,.2,1) .1s both; }
.say { animation: rise 1s cubic-bezier(.2,.6,.2,1) .5s both; }
.ascii .ln { display: block; transition: transform .14s linear; }
.ascii .m { color: var(--ink-2); }
.ascii .h { color: var(--ink); }
.ascii .a { color: var(--amber); text-shadow: 0 0 .5em color-mix(in srgb, var(--amber) 70%, transparent), 0 0 1.2em color-mix(in srgb, var(--amber) 30%, transparent); animation: glow 3.2s ease-in-out infinite; }
.ascii .a.w { opacity: .7; animation-duration: 2.1s; }
.ascii .d1 { animation-delay: -.1s; } .ascii .d2 { animation-delay: -.2s; } .ascii .d3 { animation-delay: -.3s; }
.ascii .d4 { animation-delay: -.4s; } .ascii .d5 { animation-delay: -.5s; } .ascii .d6 { animation-delay: -.6s; }
.ascii .d7 { animation-delay: -.7s; } .ascii .d8 { animation-delay: -.8s; }
@media (max-width: 640px) {
  .ascii { font-size: min(11px, calc((100vw - 2 * var(--gutter)) / 91), calc(32svh / 45)); }
}
@keyframes glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- Документация: разделы слева, статья, оглавление справа ---------- */
.docs { display: grid; grid-template-columns: 240px minmax(0, 720px) 200px; justify-content: center; gap: 48px; padding: 12px var(--gutter) 48px; }
.side { position: sticky; top: 16px; align-self: start; max-height: calc(100svh - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 14px; scrollbar-width: thin; }
.side [hidden] { display: none !important; }
.find { -webkit-appearance: none; appearance: none; width: 100%; height: 38px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink); font: 400 14px/1 var(--ui); outline: none; }
.find:focus { box-shadow: inset 0 0 0 1px var(--ink-2); }
html:not(.js) .find { display: none; }
.toggle > summary { display: none; }
/* группы по задачам: заголовок со счётчиком, статьи — под направляющей линией; раскрыта группа текущей статьи */
.list { display: flex; flex-direction: column; gap: 2px; }
.grp > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 -10px; border-radius: 8px; cursor: pointer; font: 500 14px/1.2 var(--ui); color: var(--ink-2); user-select: none; }
.grp > summary::-webkit-details-marker { display: none; }
.grp > summary::before { content: ""; width: 6px; height: 6px; flex: none; margin-right: 2px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .2s; }
.grp[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.grp > summary span { margin-left: auto; font: 400 11.5px/1 var(--mono); color: var(--muted); }
.grp > summary:hover { background: var(--surface); color: var(--ink); }
.grp[open] > summary { color: var(--ink); }
.items { display: flex; flex-direction: column; margin: 2px 0 10px 13px; padding-left: 12px; border-left: 1px solid var(--line); }
.items a { position: relative; padding: 6px 10px; border-radius: 7px; font-size: 13.5px; line-height: 1.3; color: var(--muted); }
.items a:hover { color: var(--ink); background: var(--surface); }
.items a[aria-current] { color: var(--ink); background: var(--surface); }
.items a[aria-current]::before { content: ""; position: absolute; left: -13px; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--amber); }

.doc { min-width: 0; }
.crumb { margin: 0 0 14px; font: 400 12px/1 var(--mono); color: var(--muted); letter-spacing: .04em; }
.doc h1 { margin: 0 0 22px; font: 300 clamp(30px, 3.4vw, 40px)/1.12 var(--serif); letter-spacing: -.02em; text-wrap: balance; }
.toc { position: sticky; top: 16px; align-self: start; font-size: 13px; }
.toc h2 { margin: 0 0 12px; font: 400 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.toc a { color: var(--muted); line-height: 1.35; }
.toc a:hover { color: var(--ink); }

.md { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md .md-table { margin: 0 0 14px; }
.md h2 { margin: 40px 0 12px; font: 400 23px/1.25 var(--serif); letter-spacing: -.01em; color: var(--ink); scroll-margin-top: 20px; text-wrap: balance; }
.md h3 { margin: 26px 0 8px; font: 500 16px/1.35 var(--ui); color: var(--ink); scroll-margin-top: 20px; }
.md strong, .md b { color: var(--ink); font-weight: 500; }
.md ul, .md ol { padding-left: 22px; }
.md li { margin: 4px 0; }
.md li::marker { color: var(--muted); }
.md code { font: 400 .88em/1 var(--mono); color: var(--ink); background: var(--surface); padding: .15em .4em; border-radius: 5px; overflow-wrap: anywhere; }
.md pre { position: relative; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--line); border-radius: 10px; padding: 14px 16px; overflow-x: auto; }
.md pre code { background: none; padding: 0; font-size: 13px; line-height: 1.6; color: var(--ink-2); overflow-wrap: normal; }
.md pre .copy { position: absolute; top: 8px; right: 8px; background: var(--surface); border: 0; color: var(--muted); font: 400 12px/1 var(--mono); padding: 6px 8px; border-radius: 6px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.md pre:hover .copy, .md pre .copy:focus-visible { opacity: 1; }
.md pre .copy:hover { color: var(--ink); }
.md blockquote { border-left: 2px solid var(--amber); padding: 2px 0 2px 16px; margin-left: 0; }
.md .md-table { overflow-x: auto; }
.md table { border-collapse: collapse; width: 100%; font-size: 14px; }
.md th, .md td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line); }
.md th { font-weight: 500; color: var(--ink); white-space: nowrap; }

.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.pn a { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.pn a:hover { background: var(--surface); }
.pn a small { font-size: 12px; color: var(--muted); }
.pn .nx { grid-column: 2; text-align: right; }
.same { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

.nf { display: grid; gap: 32px; align-content: center; max-width: 720px; margin: 0 auto; padding: 40px var(--gutter); }
.nf h1 { margin: 0 0 8px; font: 300 34px/1.12 var(--serif); letter-spacing: -.02em; }
.nf .lead { margin-bottom: 8px; }

@media (max-width: 1180px) { .docs { grid-template-columns: 220px minmax(0, 720px); } .toc { display: none; } }
/* телефон: разделы — над статьёй, свёрнуты */
@media (max-width: 900px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 0; }
  .side { position: static; max-height: none; overflow: visible; }
  .toggle > summary { display: block; cursor: pointer; color: var(--ink-2); font-size: 14px; padding: 4px 0; }
  .toggle[open] > summary { margin-bottom: 12px; }
  .pn { grid-template-columns: 1fr; }
  .pn .nx { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ascii, .ascii .a, .say { animation: none; }
}