@font-face{font-family:"Bitter";font-style:normal;font-weight:700;font-display:swap;src:url("../font/bitter-700-latin.woff2") format("woff2");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}
@font-face{font-family:"Bitter";font-style:normal;font-weight:700;font-display:swap;src:url("../font/bitter-700-latin-ext.woff2") format("woff2");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}
@font-face{font-family:"Bitter";font-style:normal;font-weight:700;font-display:swap;src:url("../font/bitter-700-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Bitter";font-style:normal;font-weight:700;font-display:swap;src:url("../font/bitter-700-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap;src:url("../font/onest-400-latin.woff2") format("woff2");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}
@font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap;src:url("../font/onest-400-latin-ext.woff2") format("woff2");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}
@font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap;src:url("../font/onest-400-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:400;font-display:swap;src:url("../font/onest-400-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;src:url("../font/onest-600-latin.woff2") format("woff2");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}
@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;src:url("../font/onest-600-latin-ext.woff2") format("woff2");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}
@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;src:url("../font/onest-600-cyrillic.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-style:normal;font-weight:600;font-display:swap;src:url("../font/onest-600-cyrillic-ext.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
:root{
  --ink:#15111a; --ink-2:#1d1824; --slab:#261f2f; --slab-2:#31283c;
  --line:rgba(214,190,235,.15); --line-2:rgba(214,190,235,.30); --text:#f2ecf7; --text-2:#b0a3c0;
  --gold:#f7c948; --rose:#ef5da8; --sky:#5ac8fa; --leaf:#6ddba0;
  --disp:"Bitter", Georgia, "Times New Roman", serif;
  --body:"Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r1:9px; --r2:16px; --r3:24px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--ink); color:var(--text); font-family:var(--body);
  font-size:17px; line-height:1.66}
body:before{content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(820px 460px at 6% -6%, rgba(247,201,72,.12), transparent 70%),
    radial-gradient(660px 420px at 96% 8%, rgba(239,93,168,.10), transparent 72%)}
.shell{width:min(1080px, calc(100% - 40px)); margin:0 auto; position:relative; z-index:1}
a{color:var(--gold); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px}
a:hover{color:var(--rose)}
img{max-width:100%; height:auto}
h1,h2,h3{font-family:var(--disp); font-weight:700; line-height:1.16; margin:0}
h1{font-size:clamp(30px, 3vw + 14px, 50px); letter-spacing:-.015em}
h2{font-size:clamp(22px, 1vw + 16px, 29px); letter-spacing:-.01em}
h3{font-size:19px}
p{margin:0 0 15px}
.jump{position:absolute; left:-9999px}
.jump:focus{left:16px; top:12px; z-index:40; background:var(--slab); color:#fff;
  padding:10px 16px; border-radius:var(--r1)}

/* ── шапка: одна строка, меню переносится, а не прокручивается ──────── */
.bar{position:sticky; top:0; z-index:20; background:rgba(21,17,26,.96);
  border-bottom:1px solid var(--line); backdrop-filter:saturate(140%) blur(6px)}
.bar__r{display:flex; align-items:center; gap:14px 18px; flex-wrap:wrap;
  padding:11px 0}
.sign{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;
  min-height:40px}
.sign svg{flex:none}
.sign b{font-family:var(--disp); font-size:18.5px; display:block; line-height:1.1}
/* только подпись под названием: правило `.sign span` цепляет и обёртку,
   и название сайта уезжает в капс */
.sign__t > span{display:block; font-size:12px; color:var(--text-2);
  letter-spacing:.07em; text-transform:uppercase}
.tabs{display:flex; flex-wrap:wrap; gap:8px; padding:0; margin:0 auto 0 0;
  list-style:none}
.tabs a{display:inline-flex; align-items:center; min-height:40px; padding:8px 15px;
  border-radius:99px; font-size:15.5px; color:var(--text-2); text-decoration:none}
.tabs a:hover{color:#fff; background:var(--slab)}
.tabs a[aria-current]{color:var(--ink); background:var(--gold); font-weight:600}
.swap{display:inline-flex; align-items:center; min-height:40px; padding:8px 15px;
  border-radius:99px; font-size:14.5px; text-decoration:none; color:var(--text-2);
  box-shadow:inset 0 0 0 1px var(--line-2)}
.swap:hover{color:#fff; background:var(--slab)}

/* ── первый экран: текст и табло ───────────────────────────────────── */
.lede{padding:38px 0 6px}
.lede__g{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:32px; align-items:start}
.over{display:inline-flex; align-items:center; gap:8px; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold)}
.over:before{content:""; width:22px; height:2px; background:var(--gold)}
.lede h1{margin:14px 0 0; max-width:18ch}
.intro{font-size:19px; color:var(--text-2); margin:14px 0 0; max-width:56ch}
.go{display:flex; flex-wrap:wrap; gap:11px; align-items:center; margin:22px 0 0}
.act{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:13px 25px; border-radius:99px; font-weight:600;
  font-size:16.5px; text-decoration:none; color:#2a1c05;
  background:linear-gradient(100deg, var(--gold), #ffd977);
  box-shadow:0 10px 26px rgba(247,201,72,.20)}
.act:hover{color:#2a1c05; filter:brightness(1.05);
  box-shadow:0 12px 30px rgba(247,201,72,.28)}
.act--ghost{background:none; color:var(--text); box-shadow:inset 0 0 0 1px var(--line-2)}
.act--ghost:hover{color:#fff; background:var(--slab)}
.act--sm{min-height:40px; padding:9px 17px; font-size:15px}
.memo{font-size:14.5px; color:var(--text-2); margin:14px 0 0}

/* табло: четыре плитки два на два, у каждой своя полоска сверху */
/* плитки тянутся на высоту левой колонки: иначе под табло на десктопе
   оставалось до 300 px пустоты */
.board{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;
  margin-top:6px; align-content:stretch; height:100%}
.board div{display:flex; flex-direction:column; justify-content:center}
.board div{background:var(--ink-2); border-radius:var(--r2); padding:16px 17px;
  box-shadow:inset 0 0 0 1px var(--line); position:relative; overflow:hidden}
.board div:before{content:""; position:absolute; inset:0 0 auto; height:3px;
  background:var(--gold)}
.board div:nth-child(2):before{background:var(--rose)}
.board div:nth-child(3):before{background:var(--sky)}
.board div:nth-child(4):before{background:var(--leaf)}
.board dt{font-size:12.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-2); margin:0 0 6px}
.board dd{margin:0; font-family:var(--disp); font-size:17px; line-height:1.3;
  word-break:break-word}

/* полоса разделов: неподвижная, читается как оглавление */
.rail{display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 0; padding:16px 0 0;
  border-top:1px solid var(--line); list-style:none}
.rail li{margin:0}
.rail a, .rail span{display:inline-flex; align-items:center; min-height:38px;
  padding:7px 14px; border-radius:var(--r1); font-size:14.5px; color:var(--text-2);
  text-decoration:none; box-shadow:inset 0 0 0 1px var(--line)}
.rail a:hover{color:#fff; background:var(--slab)}

/* ── раздел: закладка слева, правило вертикальной чертой ───────────── */
.unit{padding:32px 0 4px}
.unit__t{display:inline-flex; align-items:center; min-height:28px; padding:4px 12px;
  border-radius:var(--r1); font-size:12.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold); background:rgba(247,201,72,.10);
  box-shadow:inset 0 0 0 1px rgba(247,201,72,.28); margin:0 0 12px}
.unit__b{border-inline-start:2px solid var(--line); padding-inline-start:22px}
.unit p, .unit ul, .unit ol{max-width:64ch}
.unit ul, .unit ol{margin:0 0 15px; padding-inline-start:20px}
.unit li{margin:0 0 8px}
.unit li::marker{color:var(--rose)}
.unit h2{margin:0 0 10px}
.unit h3{margin:18px 0 8px}

/* ── карточки, шаги, таблицы, врезки ───────────────────────────────── */
.deck{display:grid; gap:13px; grid-template-columns:repeat(2, minmax(0,1fr));
  margin:6px 0 18px}
.deck__i{background:var(--ink-2); border-radius:var(--r2); padding:17px 18px;
  box-shadow:inset 0 0 0 1px var(--line)}
.deck__i b{display:block; font-family:var(--disp); font-size:17.5px; margin:0 0 6px}
.deck__i span{color:var(--text-2); font-size:15.5px; display:block; line-height:1.55}
/* значок, а не пустая плитка: цветной квадрат без рисунка читается как
   недоделанный блок */
.glyph{display:inline-flex; align-items:center; justify-content:center; width:38px;
  height:38px; border-radius:11px; margin:0 0 11px;
  background:linear-gradient(150deg, rgba(247,201,72,.16), rgba(239,93,168,.10));
  box-shadow:inset 0 0 0 1px var(--line-2)}
.path{counter-reset:s; margin:4px 0 18px; padding:0; list-style:none; max-width:none}
.path li{counter-increment:s; position:relative; padding:0 0 15px 46px; margin:0}
.path li:before{content:counter(s); position:absolute; inset-inline-start:0; top:0;
  width:30px; height:30px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-family:var(--disp); font-size:15px; color:var(--ink);
  background:var(--gold)}
.path b{display:block; font-size:17px}
.path span{color:var(--text-2); font-size:15.5px}
/* видно, что таблица прокручивается: край темнеет, пока есть что тянуть */
.tscroll{overflow-x:auto; margin:6px 0 18px; border-radius:var(--r2);
  box-shadow:inset 0 0 0 1px var(--line);
  background:
    linear-gradient(to right, var(--ink-2) 64%, rgba(29,24,36,0)),
    linear-gradient(to left, var(--ink-2) 64%, rgba(29,24,36,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.45), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.45), rgba(0,0,0,0)) 100% 0;
  background-repeat:no-repeat;
  background-size:44px 100%, 44px 100%, 15px 100%, 15px 100%;
  background-attachment:local, local, scroll, scroll}
table{border-collapse:collapse; width:100%; min-width:500px; font-size:15.5px}
caption{text-align:start; padding:14px 18px 0; color:var(--text-2); font-size:14.5px}
th,td{padding:13px 16px; text-align:start; border-bottom:1px solid var(--line);
  vertical-align:top}
th{font-family:var(--disp); font-weight:700; color:#fff; font-size:15px;
  background:var(--ink-2)}
tr:last-child td{border-bottom:0}
.pull{margin:8px 0 20px; padding:17px 20px; border-radius:var(--r2);
  background:var(--ink-2); color:var(--text-2); font-size:16.5px;
  box-shadow:inset 3px 0 0 var(--rose), inset 0 0 0 1px var(--line)}
.pull b{color:var(--text)}
.nudge{display:flex; flex-wrap:wrap; gap:14px; align-items:center;
  justify-content:space-between; margin:10px 0 20px; padding:15px 18px;
  border-radius:var(--r2); background:var(--slab);
  box-shadow:inset 0 0 0 1px var(--line-2)}
.nudge b{font-family:var(--disp); font-size:17px; display:block; color:var(--text)}
.nudge span{color:var(--text-2); font-size:15px}

/* рисунок и разбор рядом: одна колонка текста не держит широкий экран */
/* Схема во всю ширину, разбор под ней в две колонки. В половину полосы
   эти схемы не помещаются: широкая отрисовка даёт там подписи по 8 px,
   а узкая — столб картинки в 1100–1500 px рядом с четырьмя строками. */
.duo{margin:10px 0 24px}
.duo img{display:block; width:100%; border-radius:var(--r2);
  box-shadow:inset 0 0 0 1px var(--line-2)}
.duo h3{margin:18px 0 12px}
.duo ul{margin:0; padding:0; list-style:none; max-width:none;
  columns:2; column-gap:34px}
.duo li{position:relative; padding-inline-start:20px; margin:0 0 12px;
  break-inside:avoid; color:var(--text-2); font-size:16px; line-height:1.5}
.duo li:before{content:""; position:absolute; inset-inline-start:0; top:10px;
  width:8px; height:8px; border-radius:50%; background:var(--gold)}
.duo li b{color:var(--text)}

/* ── доказательный блок: галочки, а не две колонки ─────────────────── */
.check{margin:26px 0 8px; border-radius:var(--r3); background:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line-2); padding:22px 22px 18px}
.check h2{font-size:23px}
.check > p{color:var(--text-2); max-width:62ch}
.check ul{list-style:none; margin:16px 0 18px; padding:0}
.check li{position:relative; padding:12px 0 12px 38px; border-top:1px solid var(--line)}
.check li:first-child{border-top:0}
.check li:before{content:""; position:absolute; inset-inline-start:2px; top:17px;
  width:20px; height:20px; border-radius:50%; background:rgba(109,219,160,.16);
  box-shadow:inset 0 0 0 1px rgba(109,219,160,.5)}
.check li:after{content:""; position:absolute; inset-inline-start:8px; top:23px;
  width:7px; height:4px; border-inline-start:2px solid var(--leaf);
  border-bottom:2px solid var(--leaf); transform:rotate(-45deg)}
.check b{display:block; font-size:16.5px}
.check span{color:var(--text-2); font-size:15.5px}

/* ── вопросы, «дальше», финал, подвал ──────────────────────────────── */
.asks{margin:4px 0 16px; counter-reset:q}
details{border:1px solid var(--line); border-radius:var(--r2); background:var(--ink-2);
  margin:0 0 9px; counter-increment:q}
summary{cursor:pointer; padding:14px 46px 14px 18px; font-family:var(--disp);
  font-size:17px; min-height:44px; list-style:none; position:relative}
summary::-webkit-details-marker{display:none}
summary:after{content:"+"; position:absolute; inset-inline-end:18px; top:13px;
  color:var(--gold); font-size:21px; line-height:1; font-family:var(--body)}
details[open] summary:after{content:"–"}
details p{margin:0; padding:0 18px 15px; color:var(--text-2); max-width:64ch}
.next{list-style:none; margin:10px 0 6px; padding:0; counter-reset:n}
main > nav > h2{margin-top:34px}
main > nav:last-child{padding-bottom:44px}
.next li{counter-increment:n; border-top:1px solid var(--line)}
.next li:last-child{border-bottom:1px solid var(--line)}
.next a{display:flex; align-items:center; gap:16px; padding:15px 4px;
  text-decoration:none; color:inherit; min-height:44px}
/* заголовок и подпись — одна колонка: соседними элементами строки на 360 px
   они выдавливали «Открыть» за край */
.next a > div{min-width:0}
.next a:before{content:counter(n,decimal-leading-zero); font-family:var(--disp);
  font-size:14px; color:var(--rose); flex:none}
.next a:hover{background:var(--ink-2)}
.next b{display:block; font-family:var(--disp); font-size:17px}
.next span{color:var(--text-2); font-size:15px; display:block}
.next em{margin-inline-start:auto; color:var(--gold); font-style:normal; flex:none}
.close{margin:26px 0 40px; padding:26px 24px; border-radius:var(--r3);
  background:linear-gradient(135deg, var(--slab), var(--ink-2));
  box-shadow:inset 0 0 0 1px var(--line-2)}
.close h2{margin:0 0 8px}
.close p{color:var(--text-2); max-width:60ch}
.base{border-top:1px solid var(--line); padding:26px 0 40px; color:var(--text-2);
  font-size:15px; background:var(--ink-2)}
.base__g{display:grid; gap:20px; grid-template-columns:1.5fr 1fr 1fr}
.base h3{font-size:13.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-2); margin:0 0 9px; font-family:var(--body); font-weight:600}
.base ul{list-style:none; margin:0; padding:0}
.base a{color:var(--text-2); text-decoration:none; display:inline-block; padding:8px 0;
  min-height:40px}
.base a:hover{color:#fff; text-decoration:underline}
.base__l{margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--line);
  font-size:14px; line-height:1.6}
.adult{display:inline-flex; align-items:center; gap:7px; font-weight:600; color:var(--gold)}
.trail{font-size:14px; color:var(--text-2); padding:14px 0 0}
.trail a{color:var(--text-2); text-decoration:none}
.trail a:hover{color:#fff; text-decoration:underline}
/* .unit ul задаёт отступ списку; здесь это сдвигало весь ряд вправо */
.unit .lost{display:flex; flex-wrap:wrap; gap:10px; list-style:none;
  padding:0; margin:18px 0}
.lost a{display:inline-flex; align-items:center; min-height:44px; padding:10px 17px;
  border-radius:99px; text-decoration:none; color:var(--text-2);
  box-shadow:inset 0 0 0 1px var(--line-2)}
.lost a:hover{color:#fff; background:var(--slab)}
.ribbon{margin:22px 0; border-radius:var(--r2); overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line)}
.ribbon img{display:block; width:100%}
.fig{margin:18px 0 22px}
.fig img{display:block; width:100%; border-radius:var(--r2);
  box-shadow:inset 0 0 0 1px var(--line-2)}
.fig figcaption{margin-top:11px; font-size:15px; color:var(--text-2); max-width:66ch;
  display:flex; gap:10px}
.fig figcaption b{color:var(--rose); font-family:var(--disp); flex:none;
  font-size:14px; padding-top:2px; letter-spacing:.05em}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important}
}
@media (max-width:980px){
  .lede__g{grid-template-columns:minmax(0,1fr); gap:24px}
  .duo ul{columns:1}
}
@media (max-width:860px){
  .tabs{order:3; width:100%; margin:0}
  .swap{margin-inline-start:auto}
  /* три колонки в две дают ряд 2+1 — одинокая плитка. Описание сайта
     занимает всю ширину, под ним ровный ряд из двух списков */
  .base__g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .base__g > div:first-child{grid-column:1 / -1}
}
/* на телефоне таблица разворачивается в карточки: третья колонка иначе
   уходит за край, и читатель видит оборванную фразу */
@media (max-width:640px){
  .tscroll{overflow:visible; background:none}
  table{min-width:0; display:block}
  thead{display:none}
  tbody, tr, td{display:block; width:auto}
  tr{border-bottom:1px solid var(--line); padding:7px 0 13px}
  tr:last-child{border-bottom:0}
  td{padding:8px 18px 0; border:0}
  td:before{content:attr(data-label); display:block; font-size:12px;
    letter-spacing:.07em; text-transform:uppercase; color:var(--text-2);
    margin:0 0 3px}
  /* подпись у table{display:block} схлопывается в колонку по слову */
  caption{display:block; padding:14px 18px 3px}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .shell{width:calc(100% - 32px)}
  .deck{grid-template-columns:minmax(0,1fr)}
  .board{grid-template-columns:minmax(0,1fr)}
  .unit__b{padding-inline-start:16px}
  .base__g{grid-template-columns:minmax(0,1fr)}
}