:root {
  --ivory:      #F6F1E9;
  --ivory-2:    #EDE8DF; 
  --ivory-3:    #E4DDCF;
  --ivory-4:    #D8D0C0;
  --ink:        #1A1814;
  --ink-2:      #4A4438;
  --ink-3:      #8A8278;
  --ink-4:      #B8B0A4;
  --gold:       #A07828;
  --gold-light: #C49A3C;
  --gold-bg:    rgba(160,120,40,0.08);
  --yellow:     #D4A017;
  --yellow-bg:  rgba(212,160,23,0.12);
  --red:        #B04040;
  --font:       'Plus Jakarta Sans', -apple-system, sans-serif;
  --mono:       'DM Mono', monospace;
  --sidebar-w:  268px;
  --top-h:      50px;
  --r:          3px;
  --ease:       0.18s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{height:100%;scroll-behavior:smooth}
body{
  height:100%;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--font);
  font-size:13.5px;
  line-height:1.65;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── Gate ────────────────────────────────────────────────────── */
#gate{
  position:fixed;inset:0;z-index:1000;
  background:var(--ivory);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
}
.gate-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(var(--ivory-3) 1px, transparent 1px),
    linear-gradient(90deg, var(--ivory-3) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:0.6;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
}
.gate-content{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  align-items:center;gap:48px;
  animation:rise 0.8s cubic-bezier(0.16,1,0.3,1) both;
}
.gate-id{
  display:flex;flex-direction:column;
  align-items:center;gap:12px;
}
.gate-rule{width:36px;height:1px;background:var(--ink-4)}
.gate-name{
  font-size:42px;font-weight:300;
  letter-spacing:0.04em;
  color:var(--ink);line-height:1;
  text-align:center;
}
.gate-name strong{font-weight:700}
.gate-sub{
  font-size:9px;font-weight:600;
  letter-spacing:0.38em;text-transform:uppercase;
  color:var(--ink-3);
}
.gate-form{
  display:flex;flex-direction:column;
  align-items:center;gap:18px;
  width:300px;
}
.gate-label{
  align-self:flex-start;
  font-size:9px;font-weight:700;
  letter-spacing:0.3em;text-transform:uppercase;
  color:var(--ink-3);
}
.gate-input{
  width:100%;
  background:var(--ivory-2);
  border:1px solid var(--ivory-4);
  border-radius:var(--r);
  padding:11px 14px;
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--ink);
  outline:none;
  letter-spacing:0.06em;
  transition:border-color var(--ease), box-shadow var(--ease);
}
.gate-input::placeholder{color:var(--ink-4)}
.gate-input:focus{
  border-color:var(--ink-3);
  box-shadow:0 0 0 3px rgba(26,24,20,0.06);
}
.gate-input.err{
  border-color:var(--red);
  animation:jolt 0.3s ease;
}
.gate-btn{
  width:100%;
  background:var(--ink);
  border:none;
  border-radius:var(--r);
  padding:12px 24px;
  font-family:var(--font);
  font-size:9.5px;font-weight:700;
  letter-spacing:0.26em;text-transform:uppercase;
  color:var(--ivory);
  cursor:pointer;
  transition:background var(--ease), transform var(--ease);
}
.gate-btn:hover{background:var(--ink-2)}
.gate-btn:active{transform:translateY(1px)}
.gate-err{
  font-size:10.5px;color:var(--red);
  min-height:14px;letter-spacing:0.03em;
}
.gate-note{
  font-size:9.5px;color:var(--ink-4);
  letter-spacing:0.1em;text-align:center;
  line-height:2;
}

/* ── Portal ──────────────────────────────────────────────────── */
#portal{display:none;height:100vh;flex-direction:column}
#portal.on{display:flex}

/* ── Topbar ──────────────────────────────────────────────────── */
.topbar{
  height:var(--top-h);
  background:var(--ivory);
  border-bottom:1px solid var(--ivory-3);
  display:flex;align-items:center;
  padding:0 20px;
  flex-shrink:0;z-index:20;
}
.tb-logo{
  font-size:16px;font-weight:700;
  letter-spacing:0.06em;
  color:var(--ink);white-space:nowrap;
}
.tb-pipe{
  width:1px;height:15px;
  background:var(--ivory-4);margin:0 14px;
}
.tb-title{
  font-size:11.5px;font-weight:400;
  color:var(--ink-3);
  letter-spacing:0.03em;flex:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tb-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.tb-tag{
  font-size:8.5px;font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--gold);
  border:1px solid var(--gold-light);
  border-radius:2px;padding:2px 7px;
  background:var(--gold-bg);
}
.tb-lock{
  background:none;
  border:1px solid var(--ivory-4);
  border-radius:var(--r);
  padding:5px 12px;
  font-family:var(--font);
  font-size:9px;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--ink-3);cursor:pointer;
  transition:all var(--ease);
}
.tb-lock:hover{color:var(--ink);border-color:var(--ink-3)}

/* ── Layout ──────────────────────────────────────────────────── */
.layout{display:flex;flex:1;overflow:hidden}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar{
  width:var(--sidebar-w);
  background:var(--ivory-2);
  border-right:1px solid var(--ivory-3);
  display:flex;flex-direction:column;
  overflow:hidden;flex-shrink:0;
}
.sb-search-wrap{
  padding:12px;
  border-bottom:1px solid var(--ivory-3);
}
.sb-search{
  width:100%;
  background:var(--ivory);
  border:1px solid var(--ivory-4);
  border-radius:var(--r);
  padding:7px 11px 7px 30px;
  font-family:var(--font);
  font-size:11.5px;color:var(--ink);
  outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%238A8278' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:9px center;
  transition:border-color var(--ease);
}
.sb-search::placeholder{color:var(--ink-4)}
.sb-search:focus{border-color:var(--ink-3)}
.sb-body{flex:1;overflow-y:auto;padding:6px 0}
.sb-body::-webkit-scrollbar{width:2px}
.sb-body::-webkit-scrollbar-thumb{background:var(--ivory-4)}
.sb-group{padding:14px 0 2px}
.sb-group-title{
  font-size:8.5px;font-weight:700;
  letter-spacing:0.28em;text-transform:uppercase;
  color:var(--ink-4);
  padding:0 14px 5px;
}
.sb-item{
  display:flex;align-items:center;gap:9px;
  padding:6px 14px;
  font-size:12px;font-weight:400;
  color:var(--ink-2);
  cursor:pointer;
  border-left:2px solid transparent;
  transition:all var(--ease);
  user-select:none;
}
.sb-item:hover{color:var(--ink);background:var(--ivory-3)}
.sb-item.on{
  color:var(--ink);
  border-left-color:var(--ink);
  background:var(--ivory-3);
  font-weight:600;
}
.sb-icon{width:13px;height:13px;flex-shrink:0;opacity:0.4}
.sb-item.on .sb-icon{opacity:0.7}
.sb-badge{
  margin-left:auto;font-size:8.5px;font-weight:600;
  letter-spacing:0.08em;
  border:1px solid var(--ivory-4);
  border-radius:2px;padding:1px 5px;
  color:var(--ink-3);background:var(--ivory);
}
.sb-item.on .sb-badge{
  color:var(--ink);border-color:var(--ink-3);
  background:var(--ivory-2);
}
.sb-badge.soon{
  color:var(--yellow);
  border-color:var(--yellow);
  background:var(--yellow-bg);
  font-size:7.5px;letter-spacing:0.18em;text-transform:uppercase;
}

/* ── Main ────────────────────────────────────────────────────── */
.main{flex:1;overflow-y:auto;background:var(--ivory)}
.main::-webkit-scrollbar{width:3px}
.main::-webkit-scrollbar-thumb{background:var(--ivory-4)}

/* ── Pages ───────────────────────────────────────────────────── */
.page{display:none;min-height:100%}
.page.on{display:block;animation:fadeIn 0.22s ease both}

/* ── Overview ────────────────────────────────────────────────── */
.ov-hero{
  padding:68px 72px 52px;
  border-bottom:1px solid var(--ivory-3);
  background:var(--ivory-2);
  position:relative;overflow:hidden;
}
.ov-hero::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(var(--ivory-3) 1px, transparent 1px),
    linear-gradient(90deg, var(--ivory-3) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:0.6;
}
.ov-eyebrow{
  display:flex;align-items:center;gap:10px;
  margin-bottom:22px;position:relative;
}
.ov-eyebrow-line{width:22px;height:1px;background:var(--ink-4)}}
.ov-eyebrow-text{
  font-size:9px;font-weight:700;
  letter-spacing:0.32em;text-transform:uppercase;
  color:var(--gold);
}
.ov-heading{
  font-size:48px;font-weight:700;
  line-height:1.12;color:var(--ink);
  margin-bottom:20px;position:relative;
  max-width:640px;
}
.ov-heading strong{font-weight:700}
.ov-heading em{color:var(--ink);font-style:normal;font-weight:700}
.ov-sub{
  font-size:13.5px;color:var(--ink-2);
  max-width:520px;line-height:1.78;
  position:relative;font-weight:300;
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.stat{
  background:var(--ivory-2);
  border:1px solid var(--ivory-4);
  border-radius:var(--r);
  padding:24px 22px;
  position:relative;overflow:hidden;
  transition:border-color var(--ease),background var(--ease),transform var(--ease),box-shadow var(--ease);
}
.stat:hover{
  background:var(--ivory);
  border-color:var(--ink-4);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(26,24,20,0.08);
}
.stat-label{
  font-size:8.5px;font-weight:700;
  letter-spacing:0.22em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:12px;
}
.stat-val{
  font-size:21px;font-weight:300;
  color:var(--ink);line-height:1.2;
  margin-bottom:8px;
  overflow-wrap:break-word;word-break:break-word;
}
.stat-val strong{font-weight:700}
.stat-note{
  font-size:11px;color:var(--ink-3);
  line-height:1.55;font-weight:400;
}

/* Overview body */
.ov-body{padding:48px 72px 80px}
.ov-callout{
  border-left:2px solid var(--ink-4);
  padding:16px 22px;
  background:var(--ivory-2);
  margin-bottom:0;
}
.ov-callout-label{
  font-size:8px;font-weight:700;
  letter-spacing:0.28em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:5px;
}
.ov-callout p{
  font-size:12.5px;color:var(--ink-2);
  line-height:1.7;font-weight:400;
}

/* ── Document layout ─────────────────────────────────────────── */
.doc-layout{display:flex;min-height:100%}
.doc-toc{
  width:210px;flex-shrink:0;
  padding:28px 0;
  position:sticky;top:0;height:100vh;
  overflow-y:auto;
  border-right:1px solid var(--ivory-3);
  background:var(--ivory-2);
}
.doc-toc::-webkit-scrollbar{width:2px}
.doc-toc::-webkit-scrollbar-thumb{background:var(--ivory-4)}
.toc-hdr{
  font-size:8px;font-weight:700;
  letter-spacing:0.28em;text-transform:uppercase;
  color:var(--ink-4);padding:0 16px 10px;
}
.toc-link{
  display:block;
  padding:4px 16px;
  font-size:10.5px;font-weight:400;
  color:var(--ink-3);
  cursor:pointer;text-decoration:none;
  border-left:2px solid transparent;
  transition:all var(--ease);line-height:1.45;
}
.toc-link:hover{color:var(--ink);background:var(--ivory-3)}
.toc-link.active{color:var(--ink);border-left-color:var(--ink);font-weight:600}
.toc-link.l2{padding-left:24px;font-size:10px}
.toc-link.l3{padding-left:32px;font-size:9.5px}

.doc-body{
  flex:1;
  padding:52px 72px 96px;
  max-width:820px;
}

/* ── Document typography ─────────────────────────────────────── */
.doc-body h1{
  font-size:36px;font-weight:300;
  color:var(--ink);line-height:1.18;
  margin-bottom:10px;
}
.doc-meta{
  font-size:10.5px;color:var(--ink-3);
  letter-spacing:0.1em;
  margin-bottom:44px;
  padding-bottom:28px;
  border-bottom:1px solid var(--ivory-3);
  font-weight:500;
}
.doc-body h2{
  font-size:22px;font-weight:600;
  color:var(--ink);
  margin:52px 0 14px;
  padding-top:52px;
  border-top:1px solid var(--ivory-3);
}
.doc-body h2:first-of-type{border-top:none;padding-top:0;margin-top:0}
.doc-body h3{
  font-size:11.5px;font-weight:700;
  color:var(--ink);
  margin:26px 0 8px;
  letter-spacing:0.1em;text-transform:uppercase;
}
.doc-body p{
  font-size:13.5px;color:var(--ink-2);
  line-height:1.82;font-weight:300;
  margin-bottom:14px;
}
.doc-body strong{color:var(--ink);font-weight:600}
.doc-body em{font-style:italic}
.doc-body ul,.doc-body ol{
  margin:0 0 14px 18px;
  color:var(--ink-2);font-size:13.5px;
  line-height:1.8;font-weight:300;
}
.doc-body li{margin-bottom:3px}
.doc-body blockquote{
  border-left:3px solid var(--ink-4);
  margin:28px 0;padding:16px 24px;
  background:var(--ivory-2);
  font-size:16px;font-style:italic;
  color:var(--ink-2);line-height:1.65;
  font-weight:300;
}

/* Tables */
.doc-body table{
  width:100%;border-collapse:collapse;
  margin:22px 0;font-size:12px;
}
.doc-body th{
  background:var(--ivory-2);
  border:1px solid var(--ivory-4);
  padding:9px 13px;text-align:left;
  font-size:8.5px;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--ink-3);
}
.doc-body td{
  border:1px solid var(--ivory-3);
  padding:9px 13px;
  color:var(--ink-2);
  vertical-align:top;line-height:1.6;
  font-weight:300;
}
.doc-body tr:hover td{background:var(--ivory-2)}

.callout{
  border-left:2px solid var(--ink-4);
  padding:14px 20px;margin:20px 0;
  background:var(--ivory-2);
  font-size:12.5px;color:var(--ink-2);
  line-height:1.7;
}
.callout-lbl{
  font-size:8px;font-weight:700;
  letter-spacing:0.28em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:4px;
}
.code-ref{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ivory-2);
  border:1px solid var(--ivory-4);
  border-radius:var(--r);
  padding:7px 13px;
  font-family:var(--mono);
  font-size:10.5px;color:var(--ink-2);
  text-decoration:none;
  transition:all var(--ease);margin:10px 0;
}
.code-ref:hover{border-color:var(--ink-3);color:var(--ink)}

/* ── Soon / Coming ───────────────────────────────────────────── */
.soon-page{
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  min-height:60vh;gap:14px;
}
.soon-icon{font-size:32px;opacity:0.2}
.soon-h{
  font-size:26px;font-weight:300;
  color:var(--ink-2);
}
.soon-p{
  font-size:9.5px;font-weight:700;
  letter-spacing:0.28em;text-transform:uppercase;
  color:var(--ink-4);
}
.soon-badge{
  display:inline-block;
  font-size:9px;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--yellow);
  border:1px solid var(--yellow);
  border-radius:2px;padding:3px 9px;
  background:var(--yellow-bg);
}

/* ── Animations ──────────────────────────────────────────────── */
@keyframes rise{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes jolt{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)}
  75%{transform:translateX(6px)}
}

/* ── Scrollbars ──────────────────────────────────────────────── */
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--ivory-4)}

/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:900px){
  .sidebar{display:none}
  .doc-toc{display:none}
  .doc-body{padding:32px 24px 64px}
  .ov-hero{padding:44px 24px 36px}
  .ov-heading{font-size:34px}
  .ov-body{padding:32px 24px 64px}
  .stats-grid{grid-template-columns:1fr 1fr}
  .stat{padding:22px}
  .stat-val{font-size:24px}
}

@media print{body{display:none !important}}

.sb-body{overflow-y:auto !important}
.sb-body::-webkit-scrollbar{width:2px}
.sb-body::-webkit-scrollbar-thumb{background:var(--ivory-4)}
.doc-toc{overflow-y:auto !important}
.doc-toc::-webkit-scrollbar{width:2px}
.doc-toc::-webkit-scrollbar-thumb{background:var(--ivory-4)}
.main{overflow-y:auto !important}
#main-content{overflow-y:auto !important}
.sidebar {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.sb-body {
  flex: 1;
  overflow-y: scroll !important;
  min-height: 0;
}
.sb-body::-webkit-scrollbar {
  width: 4px;
  display: block !important;
}
.sb-body::-webkit-scrollbar-thumb {
  background: var(--ivory-4);
  border-radius: 2px;
}
.sb-body::-we