*, *::before, *::after { box-sizing: border-box; }
:root {
    --theme: rgb(29, 30, 32);
    --entry: rgb(46, 46, 51);
    --primary: rgb(218, 218, 219);
    --secondary: rgb(155, 156, 157);
    --content: rgb(196, 196, 197);
    --border: rgba(155, 156, 157, 0.22);
    --accent: #9db3dd;
    --mono: 'SF Mono', 'Menlo', 'Consolas', ui-monospace, monospace;
}
html { color-scheme: dark; }
body {
    margin: 0;
    background: var(--theme);
    color: var(--content);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
                 Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    line-height: 1.6;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Same 20px logo + 700 wordmark as b.edti.me's header. */
header.top {
    display: flex; align-items: center; gap: 9px;
    max-width: 1180px; margin: 0 auto; padding: 22px 24px 18px;
}
header.top img { width: 20px; height: 20px; display: block; }
header.top .name { font-size: 22px; font-weight: 700; color: var(--primary); }
header.top .sep { color: var(--secondary); margin: 0 4px; }
header.top .where { color: var(--secondary); font-size: 15px; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px 80px; display: flex; gap: 40px; }
nav.side {
    position: sticky; top: 24px; align-self: flex-start;
    width: 210px; flex: none; max-height: calc(100vh - 48px); overflow-y: auto;
}
nav.side h3 {
    font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
    color: var(--secondary); margin: 0 0 10px;
}
nav.side a { display: block; padding: 5px 0; color: var(--content); font-size: 14px; }
nav.side a.on { color: var(--accent); }
main { flex: 1; min-width: 0; }

h1 { color: var(--primary); font-size: 30px; margin: 0 0 6px; }
h1 + .lede { color: var(--secondary); margin: 0 0 28px; }
h2 { color: var(--primary); font-size: 20px; margin: 34px 0 12px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.card {
    background: var(--entry); border: 1px solid var(--border); border-radius: 8px;
    padding: 16px 18px;
}
.card h3 { margin: 0 0 4px; font-size: 16px; }
.card p { margin: 0; color: var(--secondary); font-size: 14px; }
.card .n { color: var(--secondary); font-size: 12px; font-family: var(--mono); }

.fn { border-top: 1px solid var(--border); padding: 22px 0; }
.fn:first-of-type { border-top: none; }
.sig {
    font-family: var(--mono); font-size: 14px; line-height: 1.7;
    background: var(--entry); border: 1px solid var(--border); border-radius: 6px;
    padding: 12px 14px; margin: 0 0 12px; overflow-x: auto; white-space: pre;
}
.sig .nm { color: var(--primary); font-weight: 600; }
.sig .ty { color: var(--accent); }
.brief { margin: 0 0 12px; }
table.params { border-collapse: collapse; width: 100%; margin: 0 0 12px; font-size: 14px; }
table.params td { padding: 4px 12px 4px 0; vertical-align: top; border: none; }
table.params td.n { font-family: var(--mono); color: var(--primary); white-space: nowrap; }
table.params td.t { font-family: var(--mono); color: var(--accent); white-space: nowrap; }
.ret { font-size: 14px; margin: 0 0 12px; }
.ret b { color: var(--primary); font-weight: 600; }
pre.ex {
    font-family: var(--mono); font-size: 13px; line-height: 1.6;
    background: var(--entry); border: 1px solid var(--border); border-radius: 6px;
    padding: 12px 14px; overflow-x: auto; margin: 0 0 12px;
}
.tag { font-size: 14px; margin: 0 0 8px; padding-left: 12px; border-left: 2px solid var(--border); }
.tag.warn { border-left-color: #d1707a; }
.tag b { color: var(--primary); }

#q {
    width: 100%; margin-bottom: 18px; padding: 9px 12px;
    background: var(--entry); color: var(--primary);
    border: 1px solid var(--border); border-radius: 6px;
    font-family: var(--mono); font-size: 13px;
}
#q::placeholder { color: var(--secondary); }
.hidden { display: none; }
table.alltbl { border-collapse: collapse; width: 100%; font-size: 13.5px; }
table.alltbl td.s { font-family: var(--mono); padding: 5px 0; border-bottom: 1px solid var(--border); }
.undoc { font-family: inherit; font-size: 11px; color: var(--secondary); padding-left: 8px; }

footer {
    max-width: 1180px; margin: 0 auto; padding: 22px 24px 40px;
    border-top: 1px solid var(--border); color: var(--secondary); font-size: 13px;
}
@media (max-width: 820px) {
    .wrap { flex-direction: column; gap: 22px; }
    nav.side { position: static; width: auto; max-height: none; }
}