/* ============================================================
   html-docs - folha de estilo do padrão.
   Servida em https://html-docs.tiagofischer.com/doc.css e
   referenciada pelos documentos; a fonte fica em
   ~/Sync/Projects/html-docs/public/doc.css.

   Estiliza só elementos semânticos + as classes do padrão, para
   que #doc seja editável sem depender de marcação especial.

   Os nomes das variáveis de :root são contrato: o editor inline
   monta a sua UI com eles. Os valores são livres - um documento
   pode redefini-los num <style> próprio depois do <link>.

   Um documento estende o padrão com um <style> DEPOIS do <link>:
   regras fora de @layer vencem as de qualquer layer.
   ============================================================ */

/* ---------- fontes ---------- */

/* Fraunces 400 600 - latin-ext */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url(fonts/fraunces-400-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;
}
/* Fraunces 400 600 - latin */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url(fonts/fraunces-400-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;
}
/* IBM Plex Mono 400 - latin-ext */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/ibm-plex-mono-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;
}
/* IBM Plex Mono 400 - latin */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url(fonts/ibm-plex-mono-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;
}
/* IBM Plex Mono 500 - latin-ext */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/ibm-plex-mono-500-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;
}
/* IBM Plex Mono 500 - latin */
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url(fonts/ibm-plex-mono-500-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;
}
/* IBM Plex Sans 400 700 - latin-ext */
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(fonts/ibm-plex-sans-400-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;
}
/* IBM Plex Sans 400 700 - latin */
@font-face{
  font-family:'IBM Plex Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url(fonts/ibm-plex-sans-400-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;
}
:root{
  --bg:        #14171d;
  --bg-soft:   #1b1f27;
  --bg-code:   #191d24;
  --border:    #2c323d;
  --border-soft:#242932;
  --text:      #cfd4dc;   /* off-white calmo, sem halação */
  --text-bold: #e8ebf0;   /* negrito: distinção pelo peso, não pelo brilho */
  --text-dim:  #a6adba;
  --muted:     #7c8493;
  --heading:   #e9e6e0;
  --accent:    #d9a15f;
  --accent-2:  #e6ba81;
  --accent-soft: rgba(217,161,95,.11);
  --link:      #dfae72;
  --sel:       rgba(217,161,95,.20);
  --ok:        #85b98f;
  --ok-soft:   rgba(133,185,143,.10);
  --warn:      #d98a72;
  --warn-soft: rgba(217,138,114,.10);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* realce de sintaxe — usado na leitura e reusado pelo editor inline */
  --hl-comment:  #7c8493;
  --hl-keyword:  #dfae72;
  --hl-type:     #e6ba81;
  --hl-string:   #9dbd8d;
  --hl-number:   #cf9ba6;
  --hl-title:    #a3b8d8;
  --hl-variable: #cfd4dc;
  --hl-meta:     #7c8493;
  --hl-deletion: #cf8f8f;

  --measure: 96ch;
  --nav-w: 300px;

  color-scheme:dark;
}

*{ box-sizing:border-box; }
/* Não no editor: com o corpo editável, cada movimento de caret vira animação. */
html:not([data-ros-editing]){ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.72;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-image:
    radial-gradient(1200px 640px at 82% -10%, rgba(217,161,95,.035), transparent 62%);
  background-attachment:fixed;
}
::selection{ background:var(--sel); }

/* ---------- layout ---------- */
/* O <main> vem ANTES da .sidenav no DOM e o grid a reposiciona à esquerda: o documento começa no
   <h1>, tanto para a ordem de leitura quanto para o CTRL+Home e a tabulação. */
.layout{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:var(--nav-w) minmax(0,1fr);
  max-width:1440px;
  margin:0 auto;
}
.layout > main{ grid-area:1 / 2; }
.layout > .sidenav{ grid-area:1 / 1; }

/* ---------- sidebar ---------- */
.sidenav{
  /* display explícito porque o fallback inline dos documentos esconde a sidebar: uma
     propriedade que esta folha não redeclare fica valendo a do fallback. */
  display:block;
  position:sticky; top:0; align-self:start;
  height:100dvh; overflow-y:auto; overscroll-behavior:contain;
  padding:34px 26px 40px 34px;
  border-right:1px solid var(--border-soft);
}
.sidenav .brand{ display:flex; align-items:baseline; gap:10px; margin:0 0 6px; }
.sidenav .brand .mark{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em;
  color:var(--accent); border:1px solid var(--border); border-radius:5px;
  padding:2px 7px; text-transform:uppercase;
}
.sidenav .brand .brand-title{
  font-family:var(--font-display); font-optical-sizing:auto;
  font-size:21px; font-weight:500; letter-spacing:-.01em; color:var(--text);
  line-height:1.25;
}
.sidenav .doc-meta{ color:var(--muted); font-size:12.5px; margin:0 0 22px; }

/* ---------- content ---------- */
main{ padding:0; }
/* Padding com teto: em vw puro a coluna encolhe conforme a tela cresce e --measure nunca vale.
   max-width e margin vêm declarados porque o fallback inline dos documentos os usa para montar
   a coluna de leitura sem esta folha: propriedade que não seja redeclarada aqui fica valendo a dele. */
.doc-wrap{ max-width:none; margin:0; padding:64px clamp(32px,5vw,72px) 120px; }
#doc{ max-width:var(--measure); }

/* headings — margens em rem (não em): o ritmo vertical não escala com o tamanho do título */
#doc h1,#doc h2,#doc h3,#doc h4{
  font-family:var(--font-display); font-optical-sizing:auto;
  color:var(--heading); font-weight:500; line-height:1.2; letter-spacing:-.012em;
  scroll-margin-top:28px; position:relative;
}
#doc h1{ font-size:clamp(2.4rem,4.5vw,3.35rem); font-weight:600; margin:0 0 .35em; letter-spacing:-.025em; }
#doc h1 + .lede{
  font-size:1.22rem; line-height:1.62; color:var(--text-dim); font-weight:400;
  /* Um pouco menor que --measure: o lede tem fonte maior e retrai de propósito, sem virar degrau. */
  max-width:74ch; margin:0 0 2.6rem;
}
#doc h2{
  font-size:1.72rem; margin:3.4rem 0 1rem; padding-top:1.25rem;
}
/* Régua da seção: uma linha só, que nasce âmbar e se dissolve à direita. */
#doc h2::before{
  content:""; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,var(--accent) 0 38px,var(--border-soft) 26%,transparent 96%);
}
#doc h3{ font-size:1.28rem; margin:2.4rem 0 .7rem; }
#doc h4{
  font-family:var(--font-body); font-weight:600; font-size:1.02rem;
  letter-spacing:0; text-transform:none; color:var(--accent-2);
  margin:1.9rem 0 .55rem;
}
/* h3 logo abaixo do h2: a folga de seção já veio do próprio h2 */
#doc h2 + h3{ margin-top:1.5rem; }

/* text */
#doc p{ margin:0 0 1.15em; }
#doc a{ color:var(--link); text-decoration:none; border-bottom:1px solid rgba(231,180,119,.3); transition:border-color .15s; }
#doc a:hover{ border-bottom-color:var(--link); }
#doc strong{ color:var(--text-bold); font-weight:600; }
#doc em{ color:var(--accent-2); font-style:italic; }
#doc hr{ border:0; height:1px; background:var(--border-soft); margin:3rem 0; }
#doc .mono{ font-family:var(--font-mono); font-size:.92em; }

/* lists */
#doc ul,#doc ol{ margin:0 0 1.2em; padding-left:1.5em; }
#doc li{ margin:.4em 0; padding-left:.2em; }
#doc li::marker{ color:var(--accent); }
#doc ul ul,#doc ol ol,#doc ul ol,#doc ol ul{ margin:.35em 0; }

/* definition lists — glossários, parâmetros, campos de um registro.
   dt/dd são blocos de texto do contrato de edição: termo e definição são
   editáveis inline, sem tabela e sem "strong + travessão". */
#doc dl{ margin:0 0 1.3em; }
#doc dt{
  font-family:var(--font-mono); font-size:.88em; font-weight:500;
  color:var(--accent-2); margin:1.25em 0 0;
}
#doc dt:first-child{ margin-top:0; }
/* Barra em vez de recuo: com vários dd por dt, o grupo continua visível como um só. */
#doc dd{
  margin:.3em 0 0; padding:0 0 0 1.1em;
  border-left:1px solid var(--border-soft); color:var(--text-dim);
}
#doc dd + dd{ margin-top:.2em; }
#doc dd > :last-child{ margin-bottom:0; }

/* inline code + kbd */
#doc code{
  font-family:var(--font-mono); font-size:.85em;
  background:var(--bg-code); border:1px solid var(--border);
  color:var(--accent-2); padding:.09em .42em; border-radius:5px;
  white-space:nowrap; word-break:keep-all;
}
#doc kbd{
  font-family:var(--font-mono); font-size:.78em;
  background:var(--bg-soft); border:1px solid var(--border);
  border-bottom-width:2px; border-radius:6px;
  color:var(--text); padding:.12em .5em;
}

/* anotações e revisão — semântica inline nativa, sem classe nenhuma.
   Cada uma diz algo que strong/em não dizem: o que foi destacado, o que
   entrou, o que saiu, o que a sigla significa, quando algo aconteceu. */
#doc mark{ background:var(--sel); color:var(--text-bold); border-radius:3px; padding:.02em .22em; }
/* ins sem sublinhado do UA: a cor e a linha inferior já marcam a inclusão,
   e o sublinhado cheio se confundiria com link. */
#doc ins{ text-decoration:none; color:var(--ok); border-bottom:1px solid rgba(133,185,143,.5); }
#doc del{ color:var(--muted); text-decoration-color:var(--warn); text-decoration-thickness:1px; }
#doc abbr[title]{
  text-decoration:underline dotted var(--muted); text-underline-offset:.22em; cursor:help;
}
#doc time{ font-variant-numeric:tabular-nums; color:var(--text-dim); }

/* notas de rodapé — <sup> no texto e <ol class="footnotes"> ao fim do
   artigo, ligados por âncoras escritas no arquivo (nada é gerado).
   line-height:0 no sup para a chamada não abrir a entrelinha do parágrafo. */
#doc sup{ line-height:0; font-size:.72em; }
#doc sup[id]{ scroll-margin-top:110px; }
#doc sup a{
  border-bottom:0; padding:0 .15em; font-family:var(--font-mono); color:var(--accent);
}
#doc sup a:hover{ color:var(--accent-2); }
#doc .footnotes{
  margin:2.8rem 0 0; padding:1.3rem 0 0 1.5em; border-top:1px solid var(--border-soft);
  font-size:14.5px; color:var(--text-dim);
}
#doc .footnotes li{ margin:.55em 0; scroll-margin-top:110px; }
/* Realce ao chegar pela chamada: o padding acompanha o fundo, sem deslocar o texto. */
#doc .footnotes li:target{
  background:var(--accent-soft); border-radius:6px;
  margin-inline:-.5em; padding:.1em .5em;
}
#doc .footnotes .backref{ border-bottom:0; color:var(--muted); margin-left:.4em; }
#doc .footnotes .backref:hover{ color:var(--accent-2); }

/* code blocks — <div class="code"><pre><code class="language-x">…
   O script renderiza realce e botão copiar num shadow root do .code;
   a fonte permanece intacta no HTML. A regra de <pre> abaixo veste
   tanto o bloco cru quanto a fonte do diagrama Mermaid. */
#doc pre{
  background:var(--bg-code); border:1px solid var(--border); border-radius:11px;
  padding:18px 20px; overflow-x:auto; margin:1.4em 0; line-height:1.6;
}
#doc pre code{
  background:none; border:0; padding:0; color:var(--text-dim);
  font-size:.86em; white-space:pre;
}
#doc .code{ margin:1.4em 0; }
#doc .code pre{ margin:0; }

/* blockquote / callouts — padrão (nota), .warn (atenção), .ok (resolvido) */
#doc blockquote{
  margin:1.5em 0; padding:.85em 1.25em; border-left:3px solid var(--accent);
  background:var(--accent-soft); border-radius:0 9px 9px 0; color:var(--text-dim);
}
#doc blockquote p:last-child{ margin-bottom:0; }
#doc blockquote strong{ color:var(--accent-2); }
#doc blockquote.warn{ border-left-color:var(--warn); background:var(--warn-soft); }
#doc blockquote.warn strong{ color:#e8a894; }
#doc blockquote.ok{ border-left-color:var(--ok); background:var(--ok-soft); }
#doc blockquote.ok strong{ color:#a3cfac; }

/* spans customizados — trechos inline com semântica própria, cada um
   uma classe estilizada aqui (ver seção "Spans" no corpo). Um documento
   pode definir os seus além destes. */

/* .tag — badge de status, variantes .ok / .warn */
#doc .tag{
  display:inline-block; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; line-height:1.7;
  color:var(--accent-2); border:1px solid rgba(217,161,95,.45);
  background:var(--accent-soft); border-radius:999px; padding:.05em .65em;
  vertical-align:.08em;
}
#doc .tag.ok{ color:var(--ok); border-color:rgba(133,185,143,.45); background:var(--ok-soft); }
#doc .tag.warn{ color:var(--warn); border-color:rgba(217,138,114,.45); background:var(--warn-soft); }

/* .path — caminho de arquivo ou diretório; mono discreto, sem a caixa
   de <code> (que fica reservada a identificadores e trechos de código) */
#doc .path{
  font-family:var(--font-mono); font-size:.86em; color:var(--text-dim);
  border-bottom:1px dotted rgba(217,161,95,.4); overflow-wrap:anywhere;
}

/* tables — sempre dentro de <div class="tbl"> (rolagem horizontal) */
.tbl{ overflow-x:auto; margin:1.6em 0; border:1px solid var(--border); border-radius:11px; }
#doc table{ border-collapse:collapse; width:100%; font-size:14.5px; }
#doc thead th{
  background:var(--bg-soft); text-align:left; font-weight:600; color:var(--accent-2);
  font-family:var(--font-body); letter-spacing:.01em;
  padding:11px 15px; border-bottom:1px solid var(--border);
}
#doc tbody td{ padding:10px 15px; border-bottom:1px solid var(--border-soft); vertical-align:top; color:var(--text-dim); }
#doc tbody tr:last-child td{ border-bottom:0; }
#doc tbody tr:nth-child(even){ background:rgba(255,255,255,.015); }

/* details / summary — a barra clicável ocupa a largura do cartão (a margem negativa cancela o
   padding lateral); o marcador é pseudo-elemento próprio, porque o ::marker nativo não gira. */
#doc details{
  border:1px solid var(--border); border-radius:11px;
  background:var(--bg-soft); padding:0 1.3em; margin:1.5em 0;
}
#doc summary{
  cursor:pointer; font-weight:600; color:var(--text-bold);
  position:relative; list-style:none;
  margin:0 -1.3em; padding:.75em 1.3em .75em 2.5em; border-radius:10px;
  transition:background .15s, color .15s;
}
#doc summary::-webkit-details-marker{ display:none; }
#doc summary::before{
  content:""; position:absolute; left:1.3em; top:calc(.75em + .86em - 4.5px);
  width:0; height:0; border-left:6px solid var(--accent);
  border-top:4.5px solid transparent; border-bottom:4.5px solid transparent;
  transform-origin:3px 4.5px; transition:transform .18s ease;
}
#doc summary:hover{ background:var(--accent-soft); color:var(--accent-2); }
#doc summary:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
#doc details[open]{ padding-bottom:1.15em; }
#doc details[open] > summary{
  margin-bottom:1.05em; border-radius:10px 10px 0 0;
  border-bottom:1px solid var(--border-soft);
}
#doc details[open] > summary::before{ transform:rotate(90deg); }
#doc details :last-child{ margin-bottom:0; }

/* figures / imagens */
#doc img{ max-width:100%; border-radius:11px; }
#doc figure{ margin:1.6em 0; }
#doc figcaption{ color:var(--muted); font-size:13.5px; margin-top:.6em; }

/* diagramas — fonte Mermaid no HTML; SVG renderizado em shadow root.
   Sem rede/JS, a fonte textual fica visível (fallback proposital). */
#doc .mermaid-host{ margin:1.6em 0; }
#doc .mermaid-host .mermaid-src{
  margin:0; font-family:var(--font-mono); font-size:.8em; color:var(--muted);
}

/* ---------- mobile ---------- */
.nav-toggle{ display:none; }
@media (max-width:960px){
  .layout{ grid-template-columns:minmax(0,1fr); }
  .layout > main{ grid-area:auto; }
  .sidenav{
    position:fixed; top:0; left:0; z-index:40; width:min(86vw,320px);
    background:var(--bg); border-right:1px solid var(--border);
    transform:translateX(-102%); transition:transform .28s ease;
    box-shadow:0 0 60px rgba(0,0,0,.6);
  }
  .nav-open .sidenav{ transform:translateX(0); }
  .doc-wrap{ padding:80px 26px 90px; }
  .nav-toggle{
    display:inline-flex; align-items:center; gap:8px; position:fixed; top:16px; left:16px; z-index:50;
    background:var(--bg-soft); color:var(--text); border:1px solid var(--border);
    border-radius:9px; padding:9px 14px; font-family:var(--font-mono); font-size:12px;
    letter-spacing:.05em; cursor:pointer;
  }
  .nav-scrim{ position:fixed; inset:0; z-index:35; background:rgba(0,0,0,.5); opacity:0; pointer-events:none; transition:opacity .28s; }
  .nav-open .nav-scrim{ opacity:1; pointer-events:auto; }
}
@media (max-width:520px){
  .doc-wrap{ padding:76px 20px 80px; }
  #doc h2{ margin-top:2.6rem; }
  #doc h3{ margin-top:2rem; }
}
@media (max-width:960px){
  /* código inline pode quebrar linha em telas estreitas (evita overflow) */
  #doc code{ white-space:normal; overflow-wrap:anywhere; word-break:normal; }
  #doc pre code{ white-space:pre; }
}

/* ---------- índice opcional ---------- */
/* Exibir o sumário é propriedade do documento (<meta name="doc-toc">), lida aqui via :has() para o
   layout já nascer certo — sem flash e sem depender do script. Navegador sem :has() ignora o bloco
   e mostra o sumário: degrada para o layout completo, nunca para um layout quebrado. */
html:has(meta[name="doc-toc"][content="off"]) .sidenav,
html:has(meta[name="doc-toc"][content="off"]) .nav-toggle,
html:has(meta[name="doc-toc"][content="off"]) .nav-scrim{ display:none; }
html:has(meta[name="doc-toc"][content="off"]) .layout{ grid-template-columns:minmax(0,1fr); }
html:has(meta[name="doc-toc"][content="off"]) .layout > main{ grid-area:auto; }
/* #doc tem max-width própria: sem a coluna da sidebar ele ficaria colado à esquerda. */
html:has(meta[name="doc-toc"][content="off"]) #doc{ margin-inline:auto; }

/* ---------- print ---------- */
@media print{
  :root{
    --bg:#fff; --bg-soft:#f4f3f0; --bg-code:#f6f5f2;
    --border:#c9c5bd; --border-soft:#dedad2;
    --text:#26292e; --text-bold:#000; --text-dim:#3a3e45; --muted:#6a6f78;
    --heading:#1a1c20; --accent:#8a6230; --accent-2:#7a5628;
    --accent-soft:rgba(138,98,48,.08); --link:#7a5628;
    --ok:#3f7a4c; --ok-soft:rgba(63,122,76,.08);
    --warn:#a4502f; --warn-soft:rgba(164,80,47,.08);
  }
  body{ background:#fff; }
  /* Fundos de pseudo-elemento não saem na impressão (só bordas): a régua do h2 vira border-top. */
  #doc h2{ border-top:1px solid var(--border-soft); }
  #doc h2::before{ display:none; }
  /* Mesmo motivo: sem o fundo, o mark ficaria invisível — vira sublinhado. */
  #doc mark{ background:none; border-bottom:2px solid var(--accent); }
  .sidenav,.nav-toggle,.nav-scrim{ display:none !important; }
  .layout{ display:block; max-width:none; }
  .doc-wrap{ padding:0; }
}

/* scrollbar */
.sidenav::-webkit-scrollbar,#doc pre::-webkit-scrollbar,.tbl::-webkit-scrollbar{ height:9px; width:9px; }
.sidenav::-webkit-scrollbar-thumb,#doc pre::-webkit-scrollbar-thumb,.tbl::-webkit-scrollbar-thumb{ background:var(--border); border-radius:20px; }