/* ============ BÒUND docs ============ */
.docs-wrap{display:grid;grid-template-columns:280px minmax(0,1fr);gap:48px;
  width:min(100% - 40px,1240px);margin:0 auto;padding:28px 0 90px;align-items:start}

/* ---------- sidebar ---------- */
.toc{position:sticky;top:96px;max-height:calc(100vh - 130px);overflow-y:auto;padding:22px;
  border-radius:26px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}
.toc::-webkit-scrollbar{width:6px}
.toc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:99px}
.toc h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  margin:20px 0 10px;font-weight:500}
.toc h4:first-child{margin-top:0}
.toc a{display:block;padding:8px 12px;border-radius:10px;font-size:13.5px;color:var(--ink-2);
  border-left:2px solid transparent;transition:color .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease)}
.toc a:hover{color:var(--ink);background:var(--glass)}
.toc a.on{color:var(--acc);background:rgba(182,242,127,.08);border-left-color:var(--acc)}

.toc-toggle{display:none;position:sticky;top:82px;z-index:40;width:100%;margin-bottom:16px;
  padding:13px 18px;border-radius:16px;border:1px solid var(--stroke);background:var(--glass);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:var(--ink);
  font-size:14px;cursor:pointer;text-align:left}

/* ---------- article ---------- */
.doc{max-width:820px}
.doc-hero{padding:44px 0 18px}
.doc-hero h1{font-size:clamp(38px,5vw,60px);margin:18px 0 16px}
.doc-hero p{font-size:18px;max-width:60ch}
.doc-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;font-size:12.5px;color:var(--ink-3)}
.doc-meta span{padding:7px 13px;border-radius:999px;border:1px solid var(--stroke);background:var(--glass)}

.doc section{scroll-margin-top:104px;padding:44px 0;border-top:1px solid var(--stroke)}
.doc section:first-of-type{border-top:0}
.doc h2{font-size:clamp(26px,3.2vw,34px);margin-bottom:8px;scroll-margin-top:104px}
.doc h2 .num{color:var(--acc);font-size:.55em;letter-spacing:.14em;display:block;margin-bottom:12px;
  font-weight:500}
.doc h3{font-size:20px;margin:30px 0 10px}
.doc h4{font-size:16px;margin:24px 0 8px;color:var(--ink)}
.doc p{margin:12px 0;font-size:15.5px;line-height:1.72}
.doc ul,.doc ol{margin:14px 0;padding-left:22px;color:var(--ink-2);font-size:15.5px;line-height:1.72}
.doc li{margin:8px 0}
.doc li::marker{color:var(--acc)}
.doc strong{color:var(--ink);font-weight:600}
.doc a:not(.btn){color:var(--acc);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(182,242,127,.35)}
.doc a:not(.btn):hover{text-decoration-color:var(--acc)}

.doc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;
  padding:2px 7px;border-radius:6px;background:rgba(255,255,255,.06);
  border:1px solid var(--stroke);color:var(--acc)}
.doc pre{margin:18px 0;padding:20px 22px;border-radius:18px;overflow-x:auto;
  background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.015));
  border:1px solid var(--stroke);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.doc pre code{background:0;border:0;padding:0;color:var(--ink-2);font-size:13px;line-height:1.7}
.doc pre .k{color:var(--acc)}
.doc pre .s{color:var(--acc-3)}
.doc pre .c{color:var(--ink-3)}

.doc table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14.5px;display:block;overflow-x:auto}
.doc th,.doc td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--stroke);white-space:nowrap}
.doc th{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.doc td{color:var(--ink-2)}
.doc td:first-child{color:var(--ink)}

.note{margin:22px 0;padding:20px 24px;border-radius:20px;border:1px solid rgba(182,242,127,.25);
  background:rgba(182,242,127,.06);font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.note b{color:var(--acc);display:block;margin-bottom:6px;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase}
.note.warn{border-color:rgba(255,180,120,.28);background:rgba(255,180,120,.06)}
.note.warn b{color:#ffbe86}

.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.doc-card{padding:22px;border-radius:20px;border:1px solid var(--stroke);background:var(--glass);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:border-color .3s,transform .35s var(--ease)}
.doc-card:hover{border-color:rgba(182,242,127,.3);transform:translateY(-3px)}
.doc-card h4{margin:0 0 8px;font-size:16px}
.doc-card p{margin:0;font-size:14px}

.doc-foot{display:flex;justify-content:space-between;gap:16px;margin-top:52px;
  padding-top:28px;border-top:1px solid var(--stroke);flex-wrap:wrap}

@media (max-width:900px){
  .docs-wrap{grid-template-columns:1fr;gap:0;padding-top:16px}
  .toc-toggle{display:block}
  .toc{position:static;max-height:none;margin-bottom:22px;display:none}
  .toc.open{display:block}
  .doc-grid{grid-template-columns:1fr}
  .doc-hero{padding:22px 0 6px}
}