:root{
  --ink:#111111;
  --paper:#f5f1e8;
  --yellow:#f4c542;
  --blue:#5b8def;
  --green:#78c091;
  --orange:#efa35c;
  --muted:#d8d5ce;
  --shadow:8px 8px 0 var(--ink);
  --radius:22px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    linear-gradient(rgba(17,17,17,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,.035) 1px, transparent 1px),
    var(--paper);
  background-size:28px 28px;
  color:var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a{color:inherit}
.wrap{width:min(1180px, calc(100% - 32px)); margin:0 auto}

/* topbar / nav — matches the main site header */
.topbar{
  position:sticky; top:0; z-index:20;
  padding:18px 0;
  backdrop-filter:blur(10px);
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border:3px solid var(--ink);
  background:rgba(245,241,232,.94);
  box-shadow:5px 5px 0 var(--ink);
  border-radius:18px;
  padding:10px 14px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:1000;
}
.brand a{display:flex; align-items:center; text-decoration:none; color:inherit}
.brand img{display:block; height:34px; width:auto}
.brand .brand-sep{opacity:.35; font-weight:900}
.brand .brand-name{font-size:16px; letter-spacing:.01em; text-decoration:none; color:inherit}

.nav-controls{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.tabgroup, .langgroup{
  display:flex;
  border:3px solid var(--ink);
  border-radius:12px;
  overflow:hidden;
  box-shadow:3px 3px 0 var(--ink);
  background:#fff;
}
.brutbtn{
  appearance:none; border:0;
  background:#fff; color:var(--ink);
  padding:9px 14px;
  font:inherit; font-size:12px; font-weight:1000;
  cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center;
  white-space:nowrap;
}
.tabgroup .brutbtn + .brutbtn, .langgroup .brutbtn + .brutbtn{border-left:3px solid var(--ink)}
.brutbtn[aria-pressed="true"]{background:var(--yellow)}
.brutbtn:hover{background:#f4f1ea}
.brutbtn[aria-pressed="true"]:hover{background:var(--yellow)}

/* main layout */
main{padding:40px 0 90px}
.doc-layout{display:grid; grid-template-columns:220px minmax(0,1fr); gap:36px; align-items:start}

nav.toc{position:sticky; top:96px}
nav.toc ol{list-style:none; margin:0; padding:0; border-left:3px solid var(--ink)}
nav.toc a{
  display:block; text-decoration:none; color:var(--ink);
  font-size:13px; font-weight:800;
  padding:7px 0 7px 16px;
  margin-left:-3px;
  border-left:3px solid transparent;
  opacity:.65;
}
nav.toc a:hover{opacity:1; border-color:var(--blue)}
nav.toc a .num{color:var(--blue); font-weight:1000; margin-right:6px}
.toc-mobile{display:none}

article.doc{
  background:#fff;
  border:4px solid var(--ink);
  border-radius:28px;
  box-shadow:10px 10px 0 var(--ink);
  padding:44px 46px 52px;
  min-width:0;
}
article.doc[hidden]{display:none}

.doc-kicker{
  display:inline-block;
  border:3px solid var(--ink);
  background:var(--yellow);
  border-radius:999px;
  padding:6px 14px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  box-shadow:3px 3px 0 var(--ink);
  margin:0 0 18px;
}
.doc-title{
  font-size:clamp(30px,4.4vw,52px);
  font-weight:1000;
  letter-spacing:-.03em;
  line-height:1;
  margin:0 0 14px;
}
.doc-meta{
  font-size:13px; font-weight:800; color:var(--ink); opacity:.65;
  margin:0 0 34px; padding-bottom:24px;
  border-bottom:3px solid var(--muted);
}
.doc-meta a{text-decoration:underline; opacity:1}
.doc-meta strong{opacity:1}

.doc section{margin-bottom:38px}
.doc section:last-of-type{margin-bottom:0}
.doc h2{
  display:flex; align-items:center; gap:12px;
  font-size:21px; font-weight:1000;
  margin:0 0 14px;
  scroll-margin-top:110px;
}
.doc h2 .n{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:30px;
  border:3px solid var(--ink);
  border-radius:9px;
  background:var(--paper);
  box-shadow:3px 3px 0 var(--ink);
  font-size:14px; font-weight:1000;
  flex:none;
}
.doc p{margin:0 0 14px; max-width:70ch; font-weight:600; font-size:16px; line-height:1.65}
.doc ul{margin:0 0 14px; padding-left:22px; max-width:66ch}
.doc li{margin-bottom:8px; font-weight:600; line-height:1.6}
.doc strong{font-weight:1000}

.kbd{
  display:inline-block;
  border:2px solid var(--ink);
  border-radius:7px;
  padding:1px 7px;
  font-weight:900;
  font-size:.92em;
  background:var(--paper);
}

.callout{
  border:3px solid var(--ink);
  border-radius:16px;
  padding:16px 20px;
  margin:0 0 18px;
  max-width:68ch;
  font-weight:700;
  background:var(--blue);
  box-shadow:5px 5px 0 var(--ink);
}
.callout p{margin:0}
.callout p + p{margin-top:10px}
.callout.ok{background:var(--green)}
.callout.warn{background:var(--orange)}

.data-table-wrap{
  overflow-x:auto;
  margin:0 0 18px;
  border:3px solid var(--ink);
  border-radius:16px;
}
table.data-table{width:100%; border-collapse:collapse; font-size:14px}
table.data-table th, table.data-table td{
  text-align:left; padding:12px 14px;
  border-bottom:2px solid var(--muted);
  vertical-align:top; font-weight:700;
}
table.data-table th{
  font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  background:var(--paper);
}
table.data-table tr:last-child td{border-bottom:0}

footer.page-footer{
  border-top:4px solid var(--ink);
  padding:24px 0 34px;
  font-weight:850;
  text-align:center;
  font-size:13px;
}
footer.page-footer a{text-decoration:underline}

@media (max-width:860px){
  .doc-layout{grid-template-columns:1fr; gap:18px}
  nav.toc.desktop{display:none}
  .toc-mobile{display:block; margin-bottom:4px}
  .toc-mobile summary{
    cursor:pointer; list-style:none;
    font-weight:1000; font-size:13px;
    padding:12px 16px;
    border:3px solid var(--ink);
    border-radius:14px;
    background:#fff;
    box-shadow:4px 4px 0 var(--ink);
  }
  .toc-mobile summary::-webkit-details-marker{display:none}
  .toc-mobile[open] summary{border-bottom-left-radius:0; border-bottom-right-radius:0; box-shadow:none}
  .toc-mobile ol{
    list-style:none; margin:0; padding:10px 14px;
    border:3px solid var(--ink); border-top:none;
    border-bottom-left-radius:14px; border-bottom-right-radius:14px;
    background:#fff;
  }
  .toc-mobile a{display:block; padding:8px 0; text-decoration:none; color:var(--ink); font-weight:800; font-size:13px}
  .toc-mobile a .num{color:var(--blue); font-weight:1000; margin-right:6px}
  article.doc{padding:28px 22px 34px; border-radius:22px}
}

@media (max-width:520px){
  .wrap{width:min(100% - 20px,1180px)}
  .doc-title{font-size:clamp(28px,8vw,40px)}
  .nav{padding:10px 12px}
}