/* Собрано tools/scope_css.py из style.css - руками не править.
   Каждое правило подшито под .article-html: так статья не задевает
   оболочку приложения. */
@font-face{
  font-family: 'Carlito';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/carlito-400-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'Carlito';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/carlito-400-italic-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: 'Carlito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/carlito-400-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/carlito-400-normal-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: 'Carlito';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/carlito-700-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'Carlito';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/carlito-700-italic-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: 'Carlito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/carlito-700-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'Carlito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/carlito-700-normal-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: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/literata-400-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/literata-400-normal-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: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/literata-400-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'Literata';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/literata-400-italic-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: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/literata-700-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/literata-700-normal-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: 'Literata';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/literata-700-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'Literata';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/literata-700-italic-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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-400-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-400-normal-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: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-400-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/inter-400-italic-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: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-700-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-700-normal-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: 'Inter';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-700-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'Inter';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/inter-700-italic-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-400-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-400-normal-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: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-400-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/jetbrains-mono-400-italic-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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrains-mono-700-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrains-mono-700-normal-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: 'JetBrains Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrains-mono-700-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/jetbrains-mono-700-italic-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: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/pt-serif-400-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/pt-serif-400-normal-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: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/pt-serif-400-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/pt-serif-400-italic-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: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/pt-serif-700-normal-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/pt-serif-700-normal-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: 'PT Serif';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/pt-serif-700-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/pt-serif-700-italic-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 Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-normal-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 Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-normal-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 Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-italic-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 Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-400-italic-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 Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-700-normal-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 Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-700-normal-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 Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-700-italic-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 Sans';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/ibm-plex-sans-700-italic-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;
}
.article-html{
  
  --bg:        #141414;
  --bg-rail:   #171717;
  --surface:   #1c1c1c;
  --surface-2: #222222;
  --surface-3: #282828;

  
  --line:      #292929;
  --line-2:    #3a3a3a;
  --line-3:    #4a4a4a;

  
  --text:      #dadada;
  --text-hi:   #f0f0f0;
  --text-dim:  #9c9c9c;
  --text-mute: #757575;

  
  --accent:    #ececec;
  --accent-dm: #9e9e9e;
  --warn:      #cba450;
  --danger:    #cd7b74;
  --ok:        #86ab86;
  --violet:    #a892c4;

  
  --code-bg:   #1b1d27;
  --code-line: #272a38;
  --code-fg:   #c6cee8;
  --nf-purple: #af8ff5;
  --nf-blue:   #82aaff;
  --nf-cyan:   #89ddff;
  --nf-green:  #a3d99b;
  --nf-orange: #ff9e64;
  --nf-gold:   #ffcb6b;
  --nf-grey:   #8a86b8;

  --radius: 2px;
  --fast: 90ms;
  --fast-2: 130ms;

  --font: Calibri, Carlito, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", Consolas, "DejaVu Sans Mono", Menlo, monospace;
}
.article-html *{ box-sizing:border-box; }
.article-html{ scroll-behavior:smooth; scroll-padding-top:64px; }
.article-html{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.article-html a{ color:var(--accent); text-decoration:none; transition:color var(--fast) ease; }
.article-html a:hover{ color:#a3c6e4; }
.article-html ::selection{ background:#38506180; color:var(--text-hi); }
.article-html ::-webkit-scrollbar{ width:9px; height:9px; }
.article-html ::-webkit-scrollbar-track{ background:var(--bg); }
.article-html ::-webkit-scrollbar-thumb{ background:#333; border:2px solid var(--bg); border-radius:5px; }
.article-html ::-webkit-scrollbar-thumb:hover{ background:#454545; }
.article-html .topbar{
  position:fixed; top:0; left:0; right:0; height:42px; z-index:60;
  display:flex; align-items:center; gap:14px;
  padding:0 16px;
  background:#161616; border-bottom:1px solid var(--line);
}
.article-html .topbar .home{
  font-size:13px; color:var(--text-dim); letter-spacing:.02em;
  padding:3px 8px; border:1px solid var(--line-2); border-radius:var(--radius);
  transition:background var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease;
  white-space:nowrap;
}
.article-html .topbar .home:hover{ background:var(--surface-2); color:var(--text-hi); border-color:var(--line-3); }
.article-html .topbar .crumb{
  font-size:13.5px; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.article-html .topbar .crumb b{ color:var(--text); font-weight:600; }
.article-html .topbar .spacer{ flex:1; }
.article-html .topbar .nav-pair{ display:flex; gap:6px; }
.article-html .topbar .nav-pair a{
  font-size:12.5px; color:var(--text-dim);
  padding:3px 9px; border:1px solid var(--line-2); border-radius:var(--radius);
  transition:background var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease;
  white-space:nowrap;
}
.article-html .topbar .nav-pair a:hover{ background:var(--surface-2); color:var(--text-hi); border-color:var(--line-3); }
.article-html .topbar .nav-pair a.off{ opacity:.32; pointer-events:none; }
.article-html #readbar{
  position:fixed; top:42px; left:0; height:2px; width:0;
  background:var(--accent-dm); z-index:61;
  transition:width 60ms linear;
}
.article-html .shell{ display:flex; align-items:flex-start; padding-top:42px; }
.article-html .rail{
  position:sticky; top:42px;
  width:262px; flex:0 0 262px;
  height:calc(100vh - 42px);
  overflow-y:auto;
  background:var(--bg-rail);
  border-right:1px solid var(--line);
  padding:16px 0 40px;
}
.article-html .rail-title{
  font-size:11px; text-transform:uppercase; letter-spacing:.12em;
  color:var(--text-mute); padding:0 16px 8px;
}
.article-html .rail a{
  display:block; padding:5px 16px 5px 16px;
  font-size:13.5px; color:var(--text-dim); line-height:1.4;
  border-left:2px solid transparent;
  transition:color var(--fast) ease, background var(--fast) ease, border-color var(--fast) ease;
}
.article-html .rail a:hover{ color:var(--text-hi); background:#1d1d1d; }
.article-html .rail a.active{ color:var(--text-hi); border-left-color:var(--accent); background:#1e1e1e; }
.article-html .rail a .rn{ color:var(--text-mute); margin-right:6px; font-variant-numeric:tabular-nums; }
.article-html .rail a.active .rn{ color:var(--accent-dm); }
.article-html .rail-sep{ height:1px; background:var(--line); margin:14px 16px; }
.article-html .main{ flex:1 1 auto; min-width:0; padding:34px 46px 120px; }
.article-html .wrap{ max-width:880px; margin:0 auto; }
.article-html .page-kicker{
  font-size:.72em; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-mute); margin-bottom:6px;
}
.article-html h1{
  font-size:1.94em; font-weight:600; letter-spacing:-.01em;
  margin:0 0 12px; color:var(--text-hi); line-height:1.2;
}
.article-html .page-lead{
  font-size:1.03em; color:var(--text-dim); margin:0 0 8px; max-width:74ch;
}
.article-html h2{
  font-size:1.41em; font-weight:600; color:var(--text-hi);
  margin:56px 0 4px; padding-top:14px; letter-spacing:-.005em;
  border-top:1px solid var(--line);
}
.article-html h2 .h2n{ color:var(--accent-dm); font-weight:600; margin-right:8px; font-variant-numeric:tabular-nums; }
.article-html .chapter-lead{ color:var(--text-dim); font-size:.97em; margin:6px 0 22px; max-width:74ch; }
.article-html h3{
  font-size:1.06em; font-weight:600; color:var(--text-hi);
  margin:30px 0 8px; letter-spacing:0;
}
.article-html h4{
  font-size:.875em; font-weight:600; color:var(--text);
  margin:20px 0 6px; letter-spacing:.01em;
}
.article-html p{ margin:0 0 12px; max-width:78ch; }
.article-html strong{ color:var(--text-hi); font-weight:600; }
.article-html em{ color:var(--text); font-style:italic; }
.article-html ul,.article-html ol{ margin:0 0 14px; padding-left:22px; max-width:78ch; }
.article-html li{ margin:0 0 5px; }
.article-html li::marker{ color:var(--text-mute); }
.article-html ul ul,.article-html ol ol,.article-html ul ol,.article-html ol ul{ margin-top:5px; margin-bottom:2px; }
.article-html hr{ border:0; border-top:1px solid var(--line); margin:26px 0; }
.article-html code{
  font-family:var(--mono); font-size:.855em;
  background:#22252f; color:#b9c3e0;
  padding:1px 5px; border-radius:var(--radius);
  border:1px solid #2c3040;
  white-space:nowrap;
}
.article-html pre{
  margin:0 0 16px; padding:13px 15px;
  background:var(--code-bg); border:1px solid var(--code-line);
  border-radius:var(--radius);
  overflow-x:auto; line-height:1.58;
}
.article-html pre code{
  background:none; border:0; padding:0; white-space:pre;
  font-size:.82em; color:var(--code-fg); display:block;
  font-family:var(--mono);
}
.article-html pre .c{ color:var(--nf-grey);   font-style:italic; }
.article-html pre .s{ color:var(--nf-green);  }
.article-html pre .n{ color:var(--nf-orange); }
.article-html pre .k{ color:var(--nf-purple); font-style:italic; }
.article-html pre .l{ color:var(--nf-purple); font-style:italic; }
.article-html pre .b{ color:var(--nf-cyan);   }
.article-html pre .t{ color:var(--nf-blue);   }
.article-html pre .ty{ color:var(--nf-blue);   }
.article-html pre .fn{ color:var(--nf-blue);   }
.article-html pre .pkg{ color:var(--nf-cyan);   }
.article-html pre .cst{ color:var(--nf-blue);   font-style:italic; }
.article-html pre .fld{ color:var(--nf-gold);   }
.article-html pre .p{ color:var(--nf-gold);   }
.article-html pre .o{ color:var(--nf-cyan);   }
.article-html .bad{  background:#2c1e22; display:block; margin:0 -15px; padding:0 15px; box-shadow:inset 2px 0 0 var(--danger); }
.article-html .good{ background:#1c2a24; display:block; margin:0 -15px; padding:0 15px; box-shadow:inset 2px 0 0 var(--ok); }
.article-html .note{
  border-left:2px solid var(--line-3);
  background:var(--surface);
  padding:11px 14px 11px 14px;
  margin:0 0 16px; max-width:78ch;
  border-radius:0 var(--radius) var(--radius) 0;
}
.article-html .note > :last-child{ margin-bottom:0; }
.article-html .note-h{
  font-size:.69em; letter-spacing:.13em; text-transform:uppercase;
  font-weight:600; margin:0 0 5px; display:block;
}
.article-html .note.imp{ border-left-color:var(--warn); background:#1f1c15; }
.article-html .note.imp  .note-h{ color:var(--warn); }
.article-html .note.trap{ border-left-color:var(--danger); background:#201717; }
.article-html .note.trap .note-h{ color:var(--danger); }
.article-html .note.info{ border-left-color:var(--accent-dm); background:#161b20; }
.article-html .note.info .note-h{ color:var(--accent); }
.article-html .note.rule{ border-left-color:var(--ok); background:#171d17; }
.article-html .note.rule .note-h{ color:var(--ok); }
.article-html .note.deep{ border-left-color:var(--violet); background:#1c1922; }
.article-html .note.deep .note-h{ color:var(--violet); }
.article-html .tw{ overflow-x:auto; margin:0 0 18px; }
.article-html table{
  border-collapse:collapse; width:100%; font-size:.875em;
  background:var(--surface); border:1px solid var(--line);
}
.article-html th,.article-html td{
  border:1px solid var(--line); padding:7px 10px; text-align:left;
  vertical-align:top; line-height:1.5;
}
.article-html th{
  background:var(--surface-3); color:var(--text-hi);
  font-weight:600; font-size:.93em; letter-spacing:.01em; white-space:nowrap;
}
.article-html td code{ white-space:nowrap; }
.article-html tbody tr:hover{ background:#1f1f1f; }
.article-html .tw table.tight td,.article-html .tw table.tight th{ padding:5px 9px; font-size:.94em; }
.article-html .fig{
  margin:0 0 20px; padding:14px 14px 10px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius);
}
.article-html .fig svg{ display:block; width:100%; height:auto; }
.article-html .fig figcaption{
  font-size:.78em; color:var(--text-mute); margin-top:9px;
  padding-top:8px; border-top:1px solid var(--line); line-height:1.5;
}
.article-html .fig figcaption b{ color:var(--text-dim); font-weight:600; }
.article-html svg .bx{ fill:var(--surface-3); stroke:var(--line-3); stroke-width:1; }
.article-html svg .bx-a{ fill:#1e2833; stroke:var(--accent-dm); stroke-width:1; }
.article-html svg .bx-w{ fill:#2a2418; stroke:var(--warn); stroke-width:1; }
.article-html svg .bx-d{ fill:#2a1d1d; stroke:var(--danger); stroke-width:1; }
.article-html svg .bx-g{ fill:#1b2a1e; stroke:var(--ok); stroke-width:1; }
.article-html svg .bx-v{ fill:#241f2c; stroke:var(--violet); stroke-width:1; }
.article-html svg .bx-e{ fill:none; stroke:var(--line-2); stroke-width:1; stroke-dasharray:3 3; }
.article-html svg .ln{ stroke:var(--line-3); stroke-width:1; fill:none; }
.article-html svg .ln-a{ stroke:var(--accent-dm); stroke-width:1.2; fill:none; }
.article-html svg .ln-w{ stroke:var(--warn); stroke-width:1.2; fill:none; }
.article-html svg .ln-d{ stroke:var(--danger); stroke-width:1.2; fill:none; }
.article-html svg .ln-g{ stroke:var(--ok); stroke-width:1.2; fill:none; }
.article-html svg .dash{ stroke-dasharray:4 3; }
.article-html svg text{ font-family:var(--font); fill:var(--text); font-size:12px; }
.article-html svg .tt{ font-family:var(--mono); font-size:11px; fill:#c8d6c9; }
.article-html svg .sm{ font-size:10.5px; fill:var(--text-mute); }
.article-html svg .sm-a{ font-size:10.5px; fill:var(--accent); }
.article-html svg .sm-w{ font-size:10.5px; fill:var(--warn); }
.article-html svg .sm-d{ font-size:10.5px; fill:var(--danger); }
.article-html svg .sm-g{ font-size:10.5px; fill:var(--ok); }
.article-html svg .bd{ font-weight:600; fill:var(--text-hi); }
.article-html svg .mid{ text-anchor:middle; }
.article-html svg .end{ text-anchor:end; }
.article-html svg .mk{ fill:var(--line-3); }
.article-html svg .mk-a{ fill:var(--accent-dm); }
.article-html svg .mk-w{ fill:var(--warn); }
.article-html svg .mk-d{ fill:var(--danger); }
.article-html svg .mk-g{ fill:var(--ok); }
.article-html .qz{ margin:34px 0 0; }
.article-html .qz-head{
  display:flex; align-items:center; gap:10px;
  margin:0 0 12px; padding-bottom:7px; border-bottom:1px solid var(--line);
}
.article-html .qz-head h3{ margin:0; font-size:.875em; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim); }
.article-html .qz-head .cnt{ font-size:.75em; color:var(--text-mute); font-variant-numeric:tabular-nums; }
.article-html .qz-head .spacer{ flex:1; }
.article-html .btn{
  font-family:var(--font); font-size:.75em; line-height:1.1;
  color:var(--text-dim); background:transparent;
  border:1px solid var(--line-2); border-radius:var(--radius);
  padding:4px 9px; cursor:pointer;
  transition:background var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease;
}
.article-html .btn:hover{ background:var(--surface-2); color:var(--text-hi); border-color:var(--line-3); }
.article-html .btn:active{ background:var(--surface-3); }
.article-html .q{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); margin:0 0 7px;
  transition:border-color var(--fast) ease;
}
.article-html .q:hover{ border-color:var(--line-2); }
.article-html .q.open{ border-color:var(--line-2); background:#1d1d1d; }
.article-html .q-head{
  display:flex; align-items:baseline; gap:10px; width:100%;
  padding:9px 12px; margin:0; cursor:pointer; text-align:left;
  background:none; border:0; color:inherit;
  font-family:var(--font); font-size:.97em; line-height:1.5;
  transition:background var(--fast) ease;
}
.article-html .q-head:hover{ background:#202020; }
.article-html .q-num{
  flex:0 0 auto; font-family:var(--mono); font-size:.71em;
  color:var(--text-mute); padding-top:3px; min-width:22px;
  font-variant-numeric:tabular-nums;
  transition:color var(--fast) ease;
}
.article-html .q.open .q-num{ color:var(--accent-dm); }
.article-html .q-text{ flex:1 1 auto; color:var(--text); }
.article-html .q.open .q-text{ color:var(--text-hi); }
.article-html .q-text code{ font-size:.82em; }
.article-html .q-tog{
  flex:0 0 auto; font-size:.71em; color:var(--text-mute);
  border:1px solid var(--line-2); border-radius:var(--radius);
  padding:2px 7px; white-space:nowrap;
  transition:color var(--fast) ease, border-color var(--fast) ease;
}
.article-html .q-head:hover .q-tog{ color:var(--text-dim); border-color:var(--line-3); }
.article-html .q.open .q-tog{ color:var(--accent-dm); border-color:var(--accent-dm); }
.article-html .q.open .q-tog::before{ content:"−  "; }
.article-html .q:not(.open) .q-tog::before{ content:"+  "; }
.article-html .q-body{ display:none; padding:2px 14px 14px 44px; }
.article-html .q.open > .q-body{ display:block; animation:rv var(--fast-2) ease both; }
@keyframes rv{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } }
.article-html .q-body > :last-child{ margin-bottom:0; }
.article-html .q-body p{ margin:0 0 10px; }
.article-html .q-body pre{ margin:8px 0 12px; }
.article-html .q-body ul,.article-html .q-body ol{ margin:0 0 10px; }
.article-html .q-body h4{ margin:14px 0 5px; font-size:.845em; color:var(--accent); letter-spacing:.03em; }
.article-html .q-body h4:first-child{ margin-top:2px; }
.article-html .q-body .note{ margin:10px 0; }
.article-html .q-body .fig{ margin:10px 0 14px; }
.article-html .q-body .tw{ margin:8px 0 12px; }
.article-html .tldr{
  border-left:2px solid var(--accent-dm); background:#181d22;
  padding:8px 12px; margin:0 0 12px; font-size:.94em;
}
.article-html .tldr b{ color:var(--accent); }
.article-html .home-wrap{ max-width:1080px; margin:0 auto; padding:56px 40px 100px; }
.article-html .home-hero h1{ font-size:38px; margin-bottom:14px; }
.article-html .home-hero p{ font-size:17px; color:var(--text-dim); max-width:74ch; }
.article-html .home-meta{
  display:flex; gap:26px; flex-wrap:wrap; margin:26px 0 8px;
  padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.article-html .home-meta div{ font-size:13px; color:var(--text-mute); }
.article-html .home-meta b{ display:block; font-size:22px; color:var(--text-hi); font-weight:600; line-height:1.2; }
.article-html .sec-h{
  font-size:11.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--text-mute); margin:44px 0 14px;
}
.article-html .sec-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:18px; }
.article-html .sec-tab{
  font:inherit; font-size:13.5px; padding:8px 16px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--line-3); border-radius:var(--radius);
  color:var(--text-dim); transition:background var(--fast) ease, color var(--fast) ease;
}
.article-html .sec-tab:hover{ color:var(--text-hi); }
.article-html .sec-tab[aria-selected="true"]{ background:var(--text-hi); color:var(--bg); border-color:var(--text-hi); }
.article-html .sec-lead{ font-size:13.5px; color:var(--text-dim); margin:0 0 14px; max-width:74ch; }
.article-html .sec-soon{ font-size:13.5px; color:var(--text-mute); }
.article-html .cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:10px; }
.article-html .card{
  display:block; padding:14px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  transition:background var(--fast) ease, border-color var(--fast) ease, transform var(--fast) ease;
}
.article-html .card:hover{ background:var(--surface-2); border-color:var(--line-3); transform:translateY(-1px); }
.article-html .card .cn{
  font-family:var(--mono); font-size:11px; color:var(--accent-dm);
  letter-spacing:.05em; display:block; margin-bottom:3px;
}
.article-html .card .ct{ font-size:17px; color:var(--text-hi); font-weight:600; display:block; margin-bottom:5px; line-height:1.3; }
.article-html .card .cd{ font-size:13.5px; color:var(--text-dim); line-height:1.5; }
.article-html .card .cs{
  margin-top:9px; padding-top:8px; border-top:1px solid var(--line);
  font-size:11.5px; color:var(--text-mute); font-family:var(--mono);
  display:flex; gap:12px; flex-wrap:wrap;
}
.article-html .prio{ counter-reset:p; margin:0; padding:0; list-style:none; }
.article-html .prio li{
  display:flex; gap:12px; align-items:baseline;
  padding:8px 0; border-bottom:1px solid var(--line); font-size:15px;
}
.article-html .prio li::before{
  counter-increment:p; content:counter(p);
  font-family:var(--mono); font-size:11.5px; color:var(--text-mute);
  min-width:18px; text-align:right;
}
.article-html .prio li b{ color:var(--text-hi); }
.article-html .prio li span{ color:var(--text-dim); }
.article-html .srcs{ font-size:13.5px; color:var(--text-mute); }
.article-html .srcs li{ margin-bottom:4px; }
.article-html .tag{
  display:inline-block; font-size:11px; font-family:var(--mono);
  color:var(--text-mute); border:1px solid var(--line-2);
  padding:1px 6px; border-radius:var(--radius); margin-right:5px;
  letter-spacing:.02em;
}
.article-html .tag.w{ color:var(--warn); border-color:#4a4028; }
.article-html .tag.a{ color:var(--accent); border-color:#2f4356; }
.article-html .tag.d{ color:var(--danger); border-color:#4d3130; }
.article-html .tag.g{ color:var(--ok); border-color:#324232; }
.article-html .two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin:0 0 16px; }
.article-html .two > *{ margin-bottom:0 !important; }
.article-html .two pre{ height:100%; }
.article-html .footnav{
  display:flex; justify-content:space-between; gap:14px;
  margin:64px 0 0; padding-top:18px; border-top:1px solid var(--line);
}
.article-html .footnav a{
  font-size:13.5px; color:var(--text-dim); padding:7px 12px;
  border:1px solid var(--line-2); border-radius:var(--radius); max-width:46%;
  transition:background var(--fast) ease, color var(--fast) ease, border-color var(--fast) ease;
}
.article-html .footnav a:hover{ background:var(--surface-2); color:var(--text-hi); border-color:var(--line-3); }
.article-html .footnav a small{ display:block; font-size:11px; color:var(--text-mute); letter-spacing:.08em; text-transform:uppercase; }
.article-html .footnav .r{ text-align:right; margin-left:auto; }
.article-html .totop{
  position:fixed; right:18px; bottom:18px; z-index:50;
  width:30px; height:30px; display:none; align-items:center; justify-content:center;
  background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--radius);
  color:var(--text-dim); cursor:pointer; font-size:13px;
  transition:background var(--fast) ease, color var(--fast) ease;
}
.article-html .totop:hover{ background:var(--surface-3); color:var(--text-hi); }
.article-html .totop.on{ display:flex; }
@media (max-width:1180px){.article-html .main{ padding:30px 30px 100px; }}
@media (max-width:960px){.article-html .rail{ display:none; }
.article-html .main{ padding:26px 20px 90px; }
.article-html .home-wrap{ padding:40px 20px 80px; }
.article-html .two{ grid-template-columns:1fr; }
.article-html h1{ font-size:26px; }
.article-html h2{ font-size:20px; margin-top:44px; }
.article-html{ font-size:15.5px; }
.article-html .q-body{ padding-left:14px; }}
.article-html .sbox{ position:relative; flex:0 1 300px; min-width:120px; }
.article-html .sbox input{
  width:100%; font-family:var(--font); font-size:13px; line-height:1.2;
  color:var(--text); background:var(--surface); caret-color:var(--accent);
  border:1px solid var(--line-2); border-radius:var(--radius);
  padding:4px 26px 4px 9px;
  transition:border-color var(--fast) ease, background var(--fast) ease;
}
.article-html .sbox input::placeholder{ color:var(--text-mute); }
.article-html .sbox input:focus{ outline:none; border-color:var(--accent-dm); background:var(--surface-2); }
.article-html .sbox .skey{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:10px; color:var(--text-mute);
  border:1px solid var(--line-2); border-radius:var(--radius); padding:0 4px;
  pointer-events:none; transition:opacity var(--fast) ease;
}
.article-html .sbox input:focus ~ .skey{ opacity:0; }
.article-html .sres{
  position:absolute; top:calc(100% + 5px); right:0; width:min(620px, 88vw);
  max-height:min(70vh, 560px); overflow-y:auto; z-index:80;
  background:#191919; border:1px solid var(--line-2); border-radius:var(--radius);
  box-shadow:0 10px 34px rgba(0,0,0,.55);
  display:none; animation:rv var(--fast-2) ease both;
}
.article-html .sres.on{ display:block; }
.article-html .sres .shead{
  padding:7px 12px; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-mute); border-bottom:1px solid var(--line); position:sticky; top:0;
  background:#191919;
}
.article-html .sres a{
  display:block; padding:8px 12px; border-bottom:1px solid var(--line);
  color:var(--text); line-height:1.4;
  transition:background var(--fast) ease;
}
.article-html .sres a:last-child{ border-bottom:0; }
.article-html .sres a:hover,.article-html .sres a.sel{ background:#232323; }
.article-html .sres a.sel{ box-shadow:inset 2px 0 0 var(--accent); }
.article-html .sres .sk{
  display:block; font-size:11px; color:var(--text-mute);
  font-family:var(--mono); margin-bottom:2px;
}
.article-html .sres .st{ font-size:14.5px; color:var(--text-hi); }
.article-html .sres .st b{ color:var(--accent); font-weight:600; }
.article-html .sres .sq{ font-size:14px; color:var(--text-dim); }
.article-html .sres .sq b{ color:var(--accent); font-weight:600; }
.article-html .sres .snone{ padding:16px 12px; font-size:14px; color:var(--text-mute); }
.article-html .sres .stip{
  padding:8px 12px; font-size:11.5px; color:var(--text-mute);
  border-top:1px solid var(--line); position:sticky; bottom:0; background:#191919;
}
.article-html .q.flash{ animation:flash 1.6s ease both; }
@keyframes flash{
  0%,55%{ box-shadow:inset 3px 0 0 var(--accent), 0 0 0 1px var(--accent-dm); }
  100%{ box-shadow:none; }
}
@media (max-width:760px){.article-html .topbar .crumb{ display:none; }
.article-html .sbox{ flex:1 1 auto; }
.article-html .sbox .skey{ display:none; }}
.article-html .home-sbox{ flex:none; width:100%; max-width:640px; margin:26px 0 0; }
.article-html .home-sbox input{ font-size:15px; padding:9px 34px 9px 13px; }
.article-html .home-sbox .skey{ right:10px; font-size:11px; padding:1px 6px; }
.article-html .home-sbox .sres{ left:0; right:auto; width:min(640px, 92vw); }
.article-html .self-check .exercise{
  margin: 24px 0;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.article-html .self-check .exercise-kind{
  margin: 0 0 6px;
  color: var(--text-dim);
  font-size: 0.85em;
}
.article-html .self-check .exercise h4{
  margin-top: 0;
}
.article-html .self-check summary{
  cursor: pointer;
  padding: 8px 0;
}
.article-html .self-check summary:focus-visible{
  outline: 1px solid currentColor;
  outline-offset: 3px;
}