/* Masque docs + developers. Same house as the landing and the terminal: near-black, the blindfold gold as the
   only accent, Cormorant for headings, Manrope for reading, Geist Mono for addresses and code. Diagrams are
   inline SVG drawn with the same hairlines. */
:root{
  --bg:#060606; --bg-2:#0d0d0c; --bg-3:#151513;
  --tx:#f2ede5; --tx-2:#b9b3a9; --tx-3:#77716a;
  --line:rgba(242,237,229,.09); --line-2:rgba(242,237,229,.18);
  --gold:#d9a548; --gold-2:#ecc479; --green:#8fd3a3; --red:#ef8a78;
  --serif:"Cormorant Garamond",Georgia,serif;
  --f:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --m:"Geist Mono",ui-monospace,Consolas,monospace;
  --pad:max(28px,env(safe-area-inset-left,0px));
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--tx);font:400 16px/1.7 var(--f);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:radial-gradient(1000px 500px at 90% -10%,rgba(217,165,72,.06),transparent 60%),var(--bg)}
a{color:inherit}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--gold);color:#120d05;padding:8px 14px;z-index:30}
.skip:focus{left:12px}

header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:18px var(--pad);background:rgba(6,6,6,.92);border-bottom:1px solid var(--line)}
.hl{display:flex;align-items:center;gap:46px}
.mark{display:flex;align-items:center;gap:12px;font:500 1.4rem/1 var(--serif);letter-spacing:.16em;text-decoration:none}
.mark svg{width:24px;height:24px}
nav{display:flex;gap:30px;font:600 .72rem var(--f);letter-spacing:.14em;text-transform:uppercase;color:var(--tx-2)}
nav a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
nav a:hover,nav a[aria-current="page"]{color:var(--tx);border-color:var(--gold)}
.hr{display:flex;align-items:center;gap:10px}
.ic{display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line-2);border-radius:50%;color:var(--tx-2);transition:border-color .25s,color .25s}
.ic:hover{border-color:var(--gold);color:var(--tx)}
.ic svg{width:15px;height:15px;fill:currentColor}
.ic[hidden]{display:none}
.app{display:inline-flex;align-items:center;height:40px;margin-left:6px;padding:0 20px;background:var(--tx);color:#0b0907;font:700 .72rem var(--f);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background-color .25s}
.app:hover{background:var(--gold-2)}
@media (max-width:760px){.hl{gap:20px}nav{gap:16px}.ic{display:none}.mark{font-size:1.15rem}.app{padding:0 14px}}
@media (max-width:480px){.mark{font-size:0;gap:0}}

.doc{display:grid;grid-template-columns:220px minmax(0,760px);gap:72px;max-width:1120px;margin:0 auto;padding:64px var(--pad) 120px}
.toc{position:sticky;top:110px;align-self:start;display:flex;flex-direction:column;gap:2px;font-size:.9rem}
.toc p{font:600 .68rem var(--f);letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);margin-bottom:10px}
.toc a{text-decoration:none;color:var(--tx-2);padding:6px 0 6px 14px;border-left:1px solid var(--line);transition:color .2s,border-color .2s}
.toc a:hover{color:var(--tx)}
.toc a[data-on]{color:var(--tx);border-color:var(--gold)}
@media (max-width:900px){.doc{grid-template-columns:1fr;gap:0;padding-top:40px}.toc{display:none}}

h1{font:400 clamp(3rem,6vw,4.8rem)/.98 var(--serif);text-wrap:balance}
.lede{margin-top:22px;font-size:1.12rem;color:var(--tx-2);max-width:58ch}
section{margin-top:72px;padding-top:28px;border-top:1px solid var(--line)}
h2{font:400 clamp(2rem,3.6vw,2.7rem)/1.05 var(--serif);margin-bottom:16px}
h3{font:600 1rem var(--f);margin:28px 0 10px}
p{color:var(--tx-2);max-width:66ch;text-wrap:pretty}
p + p{margin-top:14px}
p b{color:var(--tx);font-weight:600}
.note{margin-top:18px;padding:14px 16px;border-left:2px solid var(--gold);background:rgba(217,165,72,.05);font-size:.94rem}
.fine{margin-top:24px;font-size:.84rem;color:var(--tx-3)}
.list{list-style:none;display:grid;gap:10px;color:var(--tx-2)}
.list li{padding-left:22px;position:relative}
.list li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:1px;background:var(--gold)}

.facts{border-top:1px solid var(--line-2);margin:6px 0 18px}
.facts div{display:flex;justify-content:space-between;gap:18px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.facts dt{color:var(--tx-3)}
.facts dd{text-align:right}

/* diagrams */
.fig{margin:26px 0 8px;padding:26px;border:1px solid var(--line);background:var(--bg-2)}
.fig svg{display:block;width:100%;height:auto;overflow:visible}
.fig text{font:500 13px var(--f);fill:var(--tx-2)}
.fig text.b{font:600 15px var(--f);fill:var(--tx)}
.fig text.s{font:400 12px var(--m);fill:var(--tx-3)}
.fig text.c{text-anchor:middle}
.fig .lane > text:first-child{font:500 11px var(--m);letter-spacing:.14em;fill:var(--green)}
.fig .lane.plan > text:first-child{fill:var(--gold)}
.fig rect{fill:none;stroke:var(--line-2);stroke-width:1}
.fig .lane.plan rect{stroke-dasharray:4 5}
.fig rect.hi{stroke:var(--gold);fill:rgba(217,165,72,.06)}
.fig path{fill:none;stroke:var(--gold);stroke-width:1.2;marker-end:none}
.fig path.cut{stroke-dasharray:3 6}
.fig .axis{stroke:var(--line-2)}
.fig .ref{fill:var(--tx)}
.fig .pool{fill:var(--gold)}
.fig .gapline{stroke:var(--gold);stroke-width:3}

/* developers: tables + code */
.tbl{width:100%;border-collapse:collapse;font-size:.88rem;margin-top:14px}
.tbl th{text-align:left;padding:0 12px 10px 0;font:500 .66rem var(--m);letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);border-bottom:1px solid var(--line-2)}
.tbl td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl code{font:400 .78rem var(--m);color:var(--tx-2);overflow-wrap:anywhere}
.tbl a{text-decoration-color:var(--line-2);text-underline-offset:3px}
.scroll{overflow-x:auto}
pre{margin-top:16px;padding:20px 22px;border:1px solid var(--line);background:var(--bg-2);overflow-x:auto;font:400 .82rem/1.65 var(--m);color:var(--tx-2)}
pre .k{color:var(--gold-2)} pre .c{color:var(--tx-3)} pre .s{color:var(--green)}
code.i{font:400 .86em var(--m);color:var(--tx);background:var(--bg-3);padding:1px 6px}
.copy{float:right;margin:-6px -8px 0 0;height:28px;padding:0 10px;border:1px solid var(--line-2);background:transparent;color:var(--tx-2);font:600 .64rem var(--f);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.copy:hover{border-color:var(--gold);color:var(--tx)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}