/*
  Оболочка публикуемого комплекта: обложка и отрисованный DESIGN.md.
  Токены — копия brand/tokens.json, как и в брендбуке. Правятся там, затем здесь.
*/
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/inter-cyrillic-400-normal.woff2) format("woff2");
  unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/inter-latin-400-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/inter-cyrillic-500-normal.woff2) format("woff2");
  unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/inter-latin-500-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/inter-cyrillic-600-normal.woff2) format("woff2");
  unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/inter-latin-600-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/inter-cyrillic-700-normal.woff2) format("woff2");
  unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/inter-latin-700-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212}

:root{
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s7:28px;--s8:32px;
  --s9:36px;--s10:40px;--s12:56px;--s16:80px;--s20:120px;
  --t-cap:13px;--t-sm:14px;--t-base:16px;--t-lg:18px;--t-xl:22px;
  --t-2xl:30px;--t-3xl:42px;--t-4xl:56px;
  --radius-xs:9px;--radius-sm:11px;--radius:13px;--radius-md:16px;--radius-lg:20px;--radius-pill:999px;
  --ease:cubic-bezier(.22,1,.36,1);--dur:.2s;--dur-slow:.28s;
  --maxw:920px;
  font-family:var(--font-sans);
}
:root[data-theme="dark"]{
  --bg:
    radial-gradient(1100px 620px at 16% 8%,  #1FB58A 0%, transparent 56%),
    radial-gradient(1000px 720px at 90% 22%, #2563EB 0%, transparent 55%),
    radial-gradient(960px 820px at 66% 108%, #7C3AED 0%, transparent 52%),
    linear-gradient(135deg,#0A0F16,#0B201C);
  --solid-bg:#0B1118;
  --txt:#F4F7FA; --txt-2:rgba(244,247,250,.66); --txt-3:rgba(244,247,250,.47);
  --panel-bg:rgba(12,17,24,.40); --panel-border:rgba(255,255,255,.15);
  --spec:rgba(255,255,255,.18); --panel-top:rgba(255,255,255,.24);
  --lite-bg:rgba(255,255,255,.10); --lite-border:rgba(255,255,255,.20);
  --ctl-border:rgba(255,255,255,.32);
  --glass-blur:22px; --glass-sat:170%;
  --solid-panel:#121925;
  --hover:rgba(255,255,255,.06); --active:rgba(255,255,255,.14); --active-top:rgba(255,255,255,.25);
  --divider:rgba(255,255,255,.09); --th-border:rgba(255,255,255,.12);
  --tt-on:rgba(255,255,255,.14);
  --accent:#34D399; --accent-2:#6EE7B7;
  --mark-grad:linear-gradient(150deg,#6EE7B7,#10B981); --mark-tx:#04130D;
  --sb-thumb:linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,.08));
  --sb-thumb-h:linear-gradient(180deg,rgba(255,255,255,.42),rgba(255,255,255,.18));
  --shadow-panel:0 20px 50px rgba(0,0,0,.22);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:
    radial-gradient(1100px 620px at 16% 8%,  #99F6E4 0%, transparent 60%),
    radial-gradient(1000px 720px at 90% 22%, #BFDBFE 0%, transparent 60%),
    radial-gradient(960px 820px at 66% 108%, #DDD6FE 0%, transparent 58%),
    linear-gradient(135deg,#EEF2F6,#E8F4EF);
  --solid-bg:#EEF2F6;
  --txt:#13171E; --txt-2:rgba(19,23,30,.78); --txt-3:rgba(19,23,30,.60);
  --panel-bg:rgba(255,255,255,.40); --panel-border:rgba(255,255,255,.9);
  --spec:rgba(255,255,255,.75); --panel-top:rgba(255,255,255,1);
  --lite-bg:rgba(255,255,255,.40); --lite-border:rgba(255,255,255,.95);
  --ctl-border:rgba(19,23,30,.18);
  --glass-blur:26px; --glass-sat:185%;
  --solid-panel:#FFFFFF;
  --hover:rgba(19,23,30,.05); --active:rgba(255,255,255,.85); --active-top:rgba(255,255,255,1);
  --divider:rgba(19,23,30,.08); --th-border:rgba(19,23,30,.10);
  --tt-on:rgba(19,23,30,.06);
  --accent:#0C7E57; --accent-2:#10B981;
  --mark-grad:linear-gradient(150deg,#10C98C,#0BB078); --mark-tx:#04130D;
  --sb-thumb:linear-gradient(180deg,rgba(19,23,30,.32),rgba(19,23,30,.12));
  --sb-thumb-h:linear-gradient(180deg,rgba(19,23,30,.46),rgba(19,23,30,.24));
  --shadow-panel:0 20px 50px rgba(0,0,0,.10);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;color:var(--txt);background:var(--bg);
  background-attachment:fixed;font-size:var(--t-base);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;color:var(--txt);letter-spacing:-.02em;line-height:1.08;font-weight:700}
h1{font-size:var(--t-4xl)}
h2{font-size:var(--t-2xl)}
h3{font-size:var(--t-xl);font-weight:600}
h4{font-size:var(--t-base);font-weight:600;letter-spacing:-.01em}
p{margin:0}
a{color:var(--accent);text-underline-offset:2px}
code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.92em;
  color:var(--accent)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:var(--radius-pill);
  border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-h);background-clip:padding-box}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

.glass{position:relative;overflow:hidden;border-radius:var(--radius-lg);
  background:var(--panel-bg);border:1px solid var(--panel-border);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow:inset 0 1px 0 var(--panel-top),var(--shadow-panel)}
.glass::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(140% 70% at 86% -8%,var(--spec),transparent 50%)}

/* ── шапка ── */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s3) var(--s8);background:var(--panel-bg);
  border-bottom:1px solid var(--divider);
  backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat));
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(var(--glass-sat))}
.topbar-right{display:flex;align-items:center;gap:var(--s4)}
.brand-row{display:inline-flex;align-items:center;gap:var(--s3);
  color:var(--txt);text-decoration:none}
.brand-mark{position:relative;isolation:isolate;width:40px;height:40px;
  border-radius:12px;flex:none;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:18px;color:var(--mark-tx);background:var(--mark-grad);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 18px rgba(16,185,129,.5)}
.brand-mark::before{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;opacity:.6;
  background:linear-gradient(180deg,rgba(255,255,255,.34),transparent 48%)}
.brand-mark>span{position:relative;z-index:1;transform:translateY(1px)}
.brand-name{font-size:var(--t-lg);font-weight:700;letter-spacing:-.02em;line-height:1.05}
.brand-sub{display:block;font-size:var(--t-cap);color:var(--txt-2);margin-top:2px}
.topnav{display:flex;gap:var(--s1)}
.topnav a{display:inline-flex;align-items:center;height:38px;padding:0 var(--s4);
  border-radius:var(--radius-sm);color:var(--txt-2);font-size:var(--t-sm);
  font-weight:500;text-decoration:none;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.topnav a:hover{background:var(--hover);color:var(--txt)}
.topnav a.on{background:var(--active);color:var(--txt);font-weight:600;
  box-shadow:inset 0 1px 0 var(--active-top)}

.theme-toggle{position:relative;display:inline-flex;gap:var(--s1);height:42px;
  padding:var(--s1);border-radius:var(--radius);background:var(--lite-bg);
  border:1px solid var(--lite-border)}
.tt-thumb{position:absolute;top:var(--s1);left:var(--s1);width:38px;height:34px;
  border-radius:var(--radius-xs);background:var(--tt-on);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 2px 8px rgba(2,20,13,.14);
  pointer-events:none;z-index:0;transition:transform .3s var(--ease)}
:root[data-theme="light"] .tt-thumb{transform:translateX(0)}
:root[data-theme="dark"] .tt-thumb{transform:translateX(42px)}
.tt{position:relative;z-index:1;display:inline-flex;align-items:center;
  justify-content:center;width:38px;height:34px;border:none;background:none;
  border-radius:var(--radius-xs);color:var(--txt-3);cursor:pointer;
  transition:color var(--dur) var(--ease)}
.tt svg{width:18px;height:18px;transform:translateY(1px)}
.tt:hover{color:var(--txt-2)}
.tt.on{color:var(--accent)}

/* ── содержимое ── */
.wrap{max-width:var(--maxw);margin-inline:auto;padding:var(--s16) var(--s8) var(--s20)}
.cover{padding:var(--s12) var(--s10);display:flex;flex-direction:column;gap:var(--s5)}
.cover h1{max-width:16ch}
.cover .lead{font-size:var(--t-lg);color:var(--txt-2);max-width:58ch;line-height:1.55}
.cover-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s8);
  font-size:var(--t-sm);color:var(--txt-3)}
.cover-meta b{color:var(--txt-2);font-weight:500}

.sec-title{margin:var(--s16) 0 var(--s5)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--s4);grid-auto-rows:1fr}
.card{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s6);
  text-decoration:none;color:inherit;
  transition:transform var(--dur-slow) var(--ease),box-shadow var(--dur-slow) var(--ease)}
.card:hover{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 var(--panel-top),0 26px 60px rgba(0,0,0,.26)}
.card p{color:var(--txt-2);font-size:var(--t-sm);line-height:1.55}
.card-go{margin-top:auto;padding-top:var(--s2);color:var(--accent);
  font-size:var(--t-sm);font-weight:600}
.foot-note{margin-top:var(--s4);max-width:70ch;color:var(--txt-2);
  font-size:var(--t-sm);line-height:1.6;padding-left:var(--s4);
  border-left:1px solid var(--divider)}

/* ── отрисованный DESIGN.md ── */
.doc{max-width:74ch}
.doc h1{font-size:var(--t-3xl);margin-bottom:var(--s5)}
.doc h2{margin:var(--s16) 0 var(--s4);padding-bottom:var(--s3);
  border-bottom:1px solid var(--divider)}
.doc h3{margin:var(--s10) 0 var(--s3)}
.doc h4{margin:var(--s6) 0 var(--s2)}
.doc p{margin-bottom:var(--s4);color:var(--txt-2)}
.doc p b{color:var(--txt)}
.doc ul,.doc ol{margin:0 0 var(--s5);padding-left:var(--s6);
  display:flex;flex-direction:column;gap:var(--s2);color:var(--txt-2)}
.doc li::marker{color:var(--txt-3)}
.doc li b{color:var(--txt)}
.doc a{font-weight:500}
.doc .rule{border:none;height:1px;background:var(--divider);margin:var(--s10) 0}
.doc h1+.rule,.doc .rule+h2{margin-top:var(--s8)}

.table-wrap{overflow-x:auto;margin-bottom:var(--s6)}
table.info{width:100%;border-collapse:collapse;font-size:var(--t-sm);
  color:var(--txt-2);min-width:460px}
table.info th{text-align:left;font-size:var(--t-cap);font-weight:600;
  color:var(--txt-3);letter-spacing:.03em;text-transform:uppercase;
  padding:0 var(--s4) var(--s3) 0;border-bottom:1px solid var(--th-border);
  vertical-align:bottom}
table.info td{padding:var(--s3) var(--s4) var(--s3) 0;
  border-bottom:1px solid var(--divider);vertical-align:top}
table.info tr:last-child td{border-bottom:none}
table.info td:first-child{color:var(--txt);font-weight:500}

@media (max-width:720px){
  .topbar{padding:var(--s3) var(--s4)}
  .topbar-right{width:100%;justify-content:space-between}
  .wrap{padding:var(--s10) var(--s4) var(--s16)}
  .cover{padding:var(--s8) var(--s5)}
  h1{font-size:var(--t-3xl)}
  .doc h1{font-size:var(--t-2xl)}
  .sec-title{margin-top:var(--s12)}
}
@media (prefers-reduced-transparency:reduce){
  body{background:var(--solid-bg)}
  .glass,.topbar{backdrop-filter:none;-webkit-backdrop-filter:none;
    background:var(--solid-panel)}
  .glass::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}