/* Документация Wyrd. Токены бренда, тёмная система, серый вместо белого.
   Скриптов на страницах нет: документацию читают в том числе через Tor. */
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/oswald-700-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/oswald-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:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/manrope-400-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/manrope-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:'Manrope';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/manrope-800-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;
  src:url(fonts/manrope-800-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/plexmono-400-cyrillic.woff2) format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/plexmono-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}

:root{
  --void:#080D14; --carbon:#0E1826; --graphite:#132234; --hairline:#22384F;
  --blue:#4A9FDA; --mark-net:#3A7EBB; --mark-node:#A5D6F5;
  --green:#86B86A; --alert:#D64152;
  --fog:#D4DADE; --ash:#93A0AC; --steel:#5F6E7C; --iron:#33424E;
  --font-display:"Oswald",sans-serif;
  --font-text:"Manrope",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--void);color:var(--fog);font-family:var(--font-text);
  font-size:16px;line-height:1.65;-webkit-text-size-adjust:100%}

.top{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:18px 28px;border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.brand{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--fog);text-decoration:none;font-size:15px}
.langs{font-family:var(--font-mono);font-size:12px;display:flex;gap:14px}
.langs a{color:var(--steel);text-decoration:none}
.langs a:hover{color:var(--blue)}
.langs .on{color:var(--mark-node)}
/* На узком экране переключатель языка уезжает внутрь бургера. */
.in-menu{display:none}

.wrap{display:flex;gap:48px;max-width:1120px;margin:0 auto;padding:36px 28px 64px}
.side{flex:0 0 260px;position:sticky;top:24px;align-self:flex-start}
.menu-group{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);margin:22px 0 8px}
.menu-group:first-child{margin-top:0}
.menu ul{list-style:none;margin:0}
.menu li{margin-bottom:7px;line-height:1.4;padding-left:12px;
  border-left:1px solid var(--hairline)}
.menu a{color:var(--ash);text-decoration:none;font-size:14px}
.menu a:hover{color:var(--fog)}
.menu li.on{border-left-color:var(--mark-net)}
.menu li.on a{color:var(--mark-node)}

/* Бургер без единой строки кода: скрытый флажок и метка к нему. */
.nav-toggle{position:absolute;opacity:0;pointer-events:none}
.burger{display:none;color:var(--ash);cursor:pointer;padding:6px;margin-left:auto}
.burger:hover{color:var(--fog)}

.body{flex:1 1 auto;min-width:0;max-width:72ch}
.crumb{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--steel)}
h1{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.01em;line-height:1.1;font-size:34px;margin:6px 0 18px}
h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:20px;letter-spacing:.02em;margin:34px 0 12px}
h3{font-weight:800;font-size:17px;margin:24px 0 8px}
p{margin-bottom:16px}
a{color:var(--blue)}
b{font-weight:800;color:#E6EAEC}

.question{color:var(--ash);border-left:2px solid var(--mark-net);padding-left:14px;margin-bottom:22px}
.question span{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel);display:block}

ul,ol{margin:0 0 16px 22px}
li{margin-bottom:8px}
code{font-family:var(--font-mono);font-size:.9em;background:var(--carbon);
  border:1px solid var(--hairline);border-radius:3px;padding:1px 5px}
pre{background:var(--carbon);border:1px solid var(--hairline);border-left:2px solid var(--mark-net);
  border-radius:3px;padding:14px 16px;overflow-x:auto;margin-bottom:18px}
pre code{background:none;border:0;padding:0;font-size:13px;line-height:1.6}
.note{background:var(--graphite);border-left:2px solid var(--green);
  padding:14px 18px;margin-bottom:18px;color:var(--ash)}
img{max-width:100%;height:auto;border:1px solid var(--hairline);border-radius:3px}

table{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:15px}
th{text-align:left;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);border-bottom:1px solid var(--hairline);padding:0 12px 8px 0}
td{border-bottom:1px solid var(--hairline);padding:10px 12px 10px 0;vertical-align:top}

.route{list-style:none;margin:24px 0 0;counter-reset:r}
.route li{counter-increment:r;margin-bottom:14px;padding-left:38px;position:relative}
.route li::before{content:counter(r);position:absolute;left:0;top:-2px;
  font-family:var(--font-display);font-size:20px;color:var(--mark-net)}
.route a{font-weight:800;text-decoration:none}
.route .q{display:block;color:var(--steel);font-size:14px}

.steps{display:flex;justify-content:space-between;gap:20px;margin-top:44px;
  padding-top:18px;border-top:1px solid var(--hairline);font-size:14px}
.steps .next{margin-left:auto;text-align:right}
.steps a{text-decoration:none}

.foot{border-top:1px solid var(--hairline);padding:18px 28px;font-family:var(--font-mono);
  font-size:12px;color:var(--steel)}
.foot a{color:var(--steel);text-decoration:none}

@media (max-width:820px){
  .top{padding:14px 20px;gap:10px}
  .burger{display:block;margin-left:auto}
  .top > .langs{display:none}
  .in-menu{display:flex;gap:18px;margin-bottom:20px;padding-bottom:16px;
    border-bottom:1px solid var(--hairline)}
  .wrap{flex-direction:column;gap:0;padding:24px 20px 48px}
  .side{position:static;flex:none;max-height:0;overflow:hidden}
  /* Флажок стоит перед .wrap, поэтому его состояние доступно оглавлению. */
  .nav-toggle:checked ~ .wrap .side{max-height:none;overflow:visible;
    margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid var(--hairline)}
  h1{font-size:27px}
}