/* Acheron docs. Same skin as the home page: black, cream ink, Instrument Serif display, Geist body,
   tracked uppercase labels and double hairline rules. */
:root {
  --bg: #000; --bg-2: #0a0907;
  --ink: #ece4d2; --ink-2: rgba(236,228,210,.66); --ink-3: rgba(236,228,210,.46); --mute: rgba(236,228,210,.34);
  --rule: rgba(236,228,210,.16); --rule-2: rgba(236,228,210,.3); --rule-3: rgba(236,228,210,.6);
  --disp: "Instrument Serif", Georgia, serif; --body: "Geist", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
  --gut: 32px; --nav: 84px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav) + 20px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15.5px/1.7 var(--body); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
kbd { font: 500 10.5px var(--mono); padding: 2px 6px; border: 1px solid var(--rule-2); border-radius: 3px; color: var(--ink-3); }
.lbl { font: 500 10.5px/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }

/* ===== Header: identical to the home page ===== */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gut); background: rgba(0,0,0,.86); backdrop-filter: blur(14px); }
.logo { display: flex; align-items: center; gap: 10px; font: 400 25px/1 var(--disp); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.logo img { width: 22px; height: 22px; filter: grayscale(1) brightness(2.2); }
.links { display: flex; align-items: center; gap: 28px; }
.links a { font: 500 12px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); opacity: .7; padding: 6px 0; transition: opacity .15s; }
.links a:hover, .links a[aria-current] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.nav-right { display: flex; align-items: center; gap: 12px; justify-self: end; }
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn-pill { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 42px; padding: 0 18px; border-radius: 999px; background: #0b0a08; color: #f1e9d6; font: 500 13px var(--body); letter-spacing: .08em; white-space: nowrap; box-shadow: 0 10px 30px -12px rgba(214,180,120,.35), inset 0 1px 0 rgba(255,255,255,.06); transition: transform .2s, box-shadow .2s; }
.btn-pill::before { content: ""; position: absolute; inset: 0; z-index: -2; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--ang), #6b5536, #e9d7ae, #fff6e0, #b8945c, #4d3d27, #c9ab74, #6b5536); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: edge 7s linear infinite; }
.btn-pill::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(120% 140% at 50% -40%, rgba(233,215,174,.18), transparent 60%); opacity: .7; }
.btn-pill:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -12px rgba(214,180,120,.55), inset 0 1px 0 rgba(255,255,255,.08); }
@keyframes edge { to { --ang: 360deg; } }
.menu-btn { display: none; width: 40px; height: 40px; background: none; border: 1px solid var(--rule-2); color: var(--ink); cursor: pointer; }

/* ===== Layout ===== */
.layout { display: grid; grid-template-columns: 250px minmax(0, 740px) 210px; gap: 64px; justify-content: center; padding: 0 var(--gut); max-width: 1400px; margin: 0 auto; }
.side { position: sticky; top: var(--nav); height: calc(100vh - var(--nav)); display: flex; flex-direction: column; padding: 34px 0 24px; }
.search { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink-3); font: 400 13.5px var(--body); cursor: pointer; transition: border-color .15s, color .15s; margin-bottom: 30px; }
.search:hover { border-color: var(--rule-3); color: var(--ink); }
.search span { margin-right: auto; white-space: nowrap; }
.tree { flex: 1; overflow-y: auto; display: grid; align-content: start; gap: 1px; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
.tree .group { margin: 22px 0 8px; font: 500 10.5px var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.tree .group:first-child { margin-top: 0; }
.tree a { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 6px 0 6px 14px; font-size: 14px; color: var(--ink-2); transition: color .15s; }
.tree a::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--ink); opacity: 0; transition: opacity .15s; }
.tree a:hover { color: var(--ink); }
.tree a[aria-current] { color: var(--ink); }
.tree a[aria-current]::before { opacity: 1; }
.tree a svg { opacity: .4; }
.tree .sub { margin-left: 14px; padding-left: 14px; border-left: 1px solid var(--rule); font-size: 13.5px; }
.tree .sub::before { display: none; }
.side-foot { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
.side-foot a:hover { color: var(--ink); }

/* ===== Page ===== */
.page { padding: 40px 0 120px; min-width: 0; }
.crumb-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.crumb { font: 500 10.5px var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3); }
.copy { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border: 1px solid var(--rule-2); background: none; color: var(--ink-2); font: 500 11px var(--body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, color .15s; }
.copy:hover { border-color: var(--rule-3); color: var(--ink); }
#doc h1 { font: 400 clamp(42px, 5vw, 60px)/1 var(--disp); letter-spacing: -.02em; margin: 0 0 26px; }
#doc h1 em { font-style: italic; color: var(--ink-2); }
#doc h2 { position: relative; font: 400 32px/1.15 var(--disp); letter-spacing: -.01em; margin: 60px 0 18px; padding-top: 22px; border-top: 1px solid var(--rule); }
#doc h2::before { content: ""; position: absolute; left: 0; top: 3px; width: 64px; border-top: 1px solid var(--rule-2); }
#doc h3 { font: 600 16px/1.4 var(--body); letter-spacing: .01em; margin: 36px 0 10px; }
#doc p { margin: 0 0 18px; color: var(--ink-2); }
#doc p b, #doc li b { color: var(--ink); font-weight: 600; }
#doc ul, #doc ol { padding-left: 22px; margin: 0 0 22px; color: var(--ink-2); }
#doc li { margin-bottom: 8px; padding-left: 4px; }
#doc li::marker { color: var(--ink-3); font: 500 12px var(--mono); }
#doc a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-3); text-underline-offset: 3px; }
#doc a:hover { text-decoration-color: var(--ink); }
#doc code { font: 400 13px var(--mono); padding: 2px 6px; background: rgba(236,228,210,.07); color: var(--ink); }
#doc pre { position: relative; margin: 0 0 26px; padding: 18px 20px; background: var(--bg-2); border: 1px solid var(--rule-2); outline: 1px solid var(--rule); outline-offset: 4px; overflow-x: auto; }
#doc pre code { background: none; padding: 0; font-size: 13px; line-height: 1.75; color: var(--ink-2); }
#doc figure { margin: 0 0 40px; }
#doc figure.banner { margin: 6px 0 44px; }
#doc figure img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border: 1px solid var(--rule-2); outline: 1px solid var(--rule); outline-offset: 4px; background: #000; }
#doc figure.banner img { aspect-ratio: 2.4 / 1; -webkit-mask-image: linear-gradient(#000 70%, rgba(0,0,0,.35)); mask-image: linear-gradient(#000 70%, rgba(0,0,0,.35)); }
#doc figcaption { margin-top: 12px; font: 500 10.5px var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
#doc blockquote { margin: 0 0 26px; padding: 16px 20px; border: 1px solid var(--rule-2); outline: 1px solid var(--rule); outline-offset: 4px; color: var(--ink-2); background: rgba(236,228,210,.025); }
#doc blockquote p:last-child { margin-bottom: 0; }
#doc .hint { display: flex; gap: 14px; padding: 16px 18px; margin: 0 0 26px; border: 1px solid var(--rule-2); outline: 1px solid var(--rule); outline-offset: 4px; background: rgba(236,228,210,.025); }
#doc .hint p { margin: 0; }
#doc .hint svg { flex: none; color: var(--ink); margin-top: 3px; }
#doc .hint.warn { border-color: rgba(214,160,90,.6); outline-color: rgba(214,160,90,.2); background: rgba(214,160,90,.05); }
#doc .hint.warn svg { color: #d6a05a; }
#doc table { width: 100%; border-collapse: collapse; margin: 0 0 28px; font-size: 14.5px; }
#doc th, #doc td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
#doc th { font: 500 10.5px var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); border-bottom-color: var(--rule-2); }
#doc td { color: var(--ink-2); }
#doc td:first-child { color: var(--ink); }
#doc .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 30px; }
#doc .cards a { display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--rule-2); outline: 1px solid transparent; outline-offset: 4px; text-decoration: none; color: inherit; transition: border-color .15s, outline-color .15s, background .15s; }
#doc .cards a:hover { border-color: var(--rule-3); outline-color: var(--rule); background: rgba(236,228,210,.03); }
#doc .cards b { font: 400 20px/1.2 var(--disp); color: var(--ink); }
#doc .cards span { color: var(--ink-3); font-size: 13.5px; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 64px; }
.pager a { display: grid; gap: 6px; padding: 18px 20px; border: 1px solid var(--rule-2); outline: 1px solid transparent; outline-offset: 4px; transition: border-color .15s, outline-color .15s; }
.pager a:hover { border-color: var(--rule-3); outline-color: var(--rule); }
.pager a.next { text-align: right; grid-column: 2; }
.pager small { font: 500 10.5px var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); }
.pager b { font: 400 19px/1.2 var(--disp); }

.toc { position: sticky; top: var(--nav); height: calc(100vh - var(--nav)); overflow-y: auto; padding: 40px 0 20px; }
.toc-head { display: flex; align-items: center; gap: 8px; font: 500 10.5px var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--mute); margin-bottom: 16px; }
#toc a { display: block; padding: 5px 0 5px 12px; border-left: 1px solid var(--rule); font-size: 13px; line-height: 1.45; color: var(--ink-3); transition: color .15s, border-color .15s; }
#toc a.h3 { padding-left: 24px; font-size: 12.5px; }
#toc a:hover { color: var(--ink); }
#toc a.on { color: var(--ink); border-left-color: var(--ink); }

/* ===== Footer ===== */
.foot { border-top: 1px solid var(--rule); padding: 26px var(--gut); display: flex; align-items: center; gap: 22px; font-size: 12.5px; color: var(--ink-3); }
.foot .right { margin-left: auto; display: flex; gap: 18px; }
.foot a:hover { color: var(--ink); }

/* ===== Search dialog ===== */
.sdlg { width: min(640px, 92vw); padding: 0; border: 1px solid var(--rule-3); outline: 1px solid var(--rule); outline-offset: 4px; background: #000; color: var(--ink); }
.sdlg::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(3px); }
.sbox { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--rule); color: var(--ink-3); }
.sbox input { flex: 1; background: none; border: 0; outline: 0; color: var(--ink); font: 400 20px var(--disp); }
.sbox input::placeholder { color: var(--mute); }
#sres { list-style: none; margin: 0; padding: 8px; max-height: 50vh; overflow-y: auto; }
#sres a { display: grid; gap: 2px; padding: 10px 12px; }
#sres a:hover, #sres a.sel { background: rgba(236,228,210,.06); }
#sres b { font: 400 17px var(--disp); }
#sres span { font-size: 13px; color: var(--ink-3); }
#sres .empty { padding: 18px; color: var(--ink-3); font-size: 14px; }

@media (max-width: 1240px) { .layout { grid-template-columns: 230px minmax(0, 1fr); gap: 44px; } .toc { display: none; } }
@media (max-width: 900px) {
  :root { --gut: 18px; --nav: 64px; }
  .nav { grid-template-columns: auto 1fr auto; }
  .links { display: none; }
  .logo { font-size: 21px; }
  .btn-pill { height: 38px; padding: 0 14px; font-size: 12px; }
  .menu-btn { display: grid; place-items: center; }
  .layout { grid-template-columns: 1fr; padding: 0 var(--gut); }
  .side { position: fixed; inset: var(--nav) 0 0 0; z-index: 40; background: #000; padding: 20px var(--gut); transform: translateX(-100%); transition: transform .25s; height: auto; }
  .side.open { transform: none; }
  #doc h1 { font-size: 38px; } #doc h2 { font-size: 27px; }
  #doc .cards, .pager { grid-template-columns: 1fr; }
  .pager a.next { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) { .btn-pill::before { animation-duration: 30s; } }

/* ===== Match the rest of the site (swap, perps, pools) ===== */
:root { --surf: rgba(236,228,210,.045); --surf-2: rgba(236,228,210,.08); }
/* header: logo left, links + button right, no rule, no underline */
.nav { grid-template-columns: auto 1fr auto; gap: 40px; background: rgba(0,0,0,.72); }
.links { justify-self: end; }
.links a:hover, .links a[aria-current] { text-decoration: none; opacity: 1; }
.links a[aria-current] { color: #fff; }
.btn-pill { height: 38px; padding: 0 18px; border-radius: 10px; overflow: visible; isolation: auto;
  background: linear-gradient(180deg, #34302a 0%, #221f1a 100%); color: #f3ecdc; font: 500 13px var(--body); letter-spacing: 0; text-transform: none;
  box-shadow: inset 0 1px 0 rgba(255,244,220,.12), inset 0 -1px 0 rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -10px rgba(0,0,0,.8); }
.btn-pill::before, .btn-pill::after { content: none; display: none; animation: none; }
.btn-pill:hover { transform: none; background: linear-gradient(180deg, #403a32 0%, #2a2620 100%); color: #fff; }
.menu-btn { border: 0; border-radius: 6px; background: var(--surf); }

/* sidebar: filled search, active page as a soft chip (no dot), no hairlines */
.search { border: 0; border-radius: 6px; background: var(--surf); }
.search:hover { background: var(--surf-2); }
kbd { border: 0; border-radius: 4px; background: rgba(236,228,210,.08); }
.tree a { padding: 7px 10px; border-radius: 6px; transition: color .15s, background .15s; }
.tree a::before { display: none; }
.tree a:hover { background: rgba(236,228,210,.035); }
.tree a[aria-current] { background: linear-gradient(180deg, #2c2924, #211f1a); box-shadow: inset 0 1px 0 rgba(255,244,220,.08); }
.tree .group { padding-left: 10px; }
.tree .sub { margin-left: 10px; padding-left: 10px; border-left: 0; }
.side-foot { border-top: 0; padding-left: 10px; }

/* page furniture: single soft surfaces instead of double outlines */
.copy { border: 0; border-radius: 6px; background: var(--surf); letter-spacing: .02em; text-transform: none; font-size: 12.5px; }
.copy:hover { background: var(--surf-2); }
#doc h2 { border-top: 0; padding-top: 0; margin-top: 56px; }
#doc h2::before { display: none; }
#doc pre, #doc blockquote, #doc .hint, #doc .cards a, .pager a { border: 0 !important; outline: 0 !important; border-radius: 8px; background: var(--surf); }
#doc .hint.warn { background: rgba(214,160,90,.08); }
#doc .cards a:hover, .pager a:hover { background: var(--surf-2); }
#doc figure img { border: 0; outline: 0; border-radius: 8px; }
#doc table { border-radius: 8px; overflow: hidden; background: rgba(236,228,210,.02); }
#doc th { border-bottom-color: var(--rule); }
#doc tr:last-child td { border-bottom: 0; }
#toc a { border-left: 0; padding-left: 10px; border-radius: 5px; }
#toc a.on { background: var(--surf); }
.foot { border-top: 0; }
.sdlg { border: 0; outline: 0; border-radius: 10px; background: #12110e; box-shadow: 0 40px 100px rgba(0,0,0,.8); }
.sdlg::backdrop { background: rgba(0,0,0,.66); backdrop-filter: blur(6px); }

/* scrollbars like the rest of the site */
* { scrollbar-width: thin; scrollbar-color: rgba(236,228,210,.22) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(236,228,210,.18); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }