:root { --ink:#1c1c1e; --muted:#6e6e73; --line:#00000018; --soft:#f5f5f7; --accent:#4b3fd4; --code:#f0f0f4; }
@media (prefers-color-scheme: dark) {
  :root { --ink:#f2f2f4; --muted:#98989e; --line:#ffffff1e; --soft:#1c1c20; --accent:#8f86ff; --code:#26262c; }
  body { background:#141416; }
}
* { box-sizing:border-box }
body { margin:0; font:15px/1.65 -apple-system, "SF Pro Text", Helvetica, sans-serif; color:var(--ink); }
.bar { position:sticky; top:0; display:flex; gap:16px; align-items:center; padding:10px 20px; border-bottom:1px solid var(--line); background:var(--soft); z-index:5 }
.bar .home { font-weight:700; color:var(--ink); text-decoration:none; white-space:nowrap }
.bar .mark { width:26px; height:26px; vertical-align:-7px; margin-right:4px }
#search { flex:1; padding:7px 12px; border:1px solid var(--line); border-radius:9px; font-size:14px; background:transparent; color:var(--ink) }
#results { position:fixed; top:52px; left:50%; transform:translateX(-50%); width:min(720px, 94vw); max-height:60vh; overflow:auto; background:var(--soft); border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.25); z-index:9; padding:6px }
#results a { display:block; padding:8px 12px; border-radius:8px; color:var(--ink); text-decoration:none }
#results a:hover, #results a.hot { background:var(--accent); color:#fff }
#results a .kind { float:right; font-size:11px; opacity:.6 }
main { max-width:52em; margin:0 auto; padding:28px 22px 60px }
h1 { font-size:30px; letter-spacing:-.01em; margin:10px 0 6px }
h2 { margin-top:34px }
.lede { font-size:17px; color:var(--muted) }
.sub { color:var(--muted) } .sub.ok { color:#2e7d32 }
.crumb { font-size:13px; color:var(--muted) } .crumb a { color:var(--accent); text-decoration:none }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; margin:14px 0 }
.card { display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line); border-radius:12px; padding:14px 16px; text-decoration:none; color:var(--ink); background:var(--soft); transition:transform .12s ease, border-color .12s ease }
.card:hover { transform:translateY(-2px) }
.card p { margin:6px 0 0; font-size:13px; color:var(--muted) }
.tile { flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent) }
.tile.big { width:52px; height:52px; border-radius:13px }
.pagehead { display:flex; gap:14px; align-items:center; margin-top:8px }
.pagehead h1 { margin:0 }
.kindIcon { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:6px; vertical-align:-4px; margin-right:2px }
.kindIcon.method { background:color-mix(in srgb, #e8862c 16%, transparent); color:#c56a10 }
.kindIcon.prop { background:color-mix(in srgb, #2e9e6b 16%, transparent); color:#1f7d51 }
@media (prefers-color-scheme: dark) { .kindIcon.method { color:#f0a052 } .kindIcon.prop { color:#4fc08b } }
.kindPill { font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:2px 8px; vertical-align:3px; margin-left:6px }
summary .icon { vertical-align:-2px; margin-right:2px }
.kindIcon.object { background:color-mix(in srgb, #4b7bec 16%, transparent); color:#3867d6 }
@media (prefers-color-scheme: dark) { .kindIcon.object { color:#7ea2f5 } }
.events { font-size:13px; color:var(--muted) }
.badge { display:inline-flex; align-items:center; gap:4px; margin-left:8px; padding:2px 9px; border-radius:999px; font:600 11px/1.6 -apple-system, sans-serif; vertical-align:2px }
.badge .icon { flex:none }
.badge.wire.light { background:color-mix(in srgb, #2e9e6b 14%, transparent); color:#1f7d51 }
.badge.wire.heavy { background:color-mix(in srgb, #d84a3f 14%, transparent); color:#b8382e }
.badge.speed { background:color-mix(in srgb, #4b7bec 13%, transparent); color:#3867d6 }
@media (prefers-color-scheme: dark) {
  .badge.wire.light { color:#4fc08b } .badge.wire.heavy { color:#f07a70 } .badge.speed { color:#7ea2f5 }
}
.tip { display:flex; gap:10px; align-items:flex-start; margin:10px 0 4px; padding:10px 14px; border-radius:10px; background:color-mix(in srgb, #e8b col 0%, transparent); background:color-mix(in srgb, #eba434 10%, transparent); border:1px solid color-mix(in srgb, #eba434 30%, transparent); font-size:13.5px }
.tip .icon { flex:none; color:#c98a10; margin-top:1px }
@media (prefers-color-scheme: dark) { .tip .icon { color:#f0b542 } }
.tip div b:first-child { color:inherit }
figure.shot { margin:22px 0 } 
figure.shot img { width:100%; height:auto; border-radius:12px; border:1px solid var(--line); box-shadow:0 14px 44px rgba(0,0,0,.16) }
figure.shot figcaption { margin-top:8px; font-size:13px; color:var(--muted); text-align:center }
.card .meta { display:block; margin-top:8px; font-size:12px; color:var(--muted) }
.card .soon { display:inline-block; margin-top:8px; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent) }
.card:hover { border-color:var(--accent) }
code { font:13px/1.5 ui-monospace, "SF Mono", Menlo, monospace; background:var(--code); padding:1px 5px; border-radius:5px }
pre { background:var(--code); border:1px solid var(--line); border-radius:10px; padding:14px 16px; overflow-x:auto }
pre code { background:none; padding:0 }
table.load { border-collapse:collapse; margin:14px 0 }
table.load th, table.load td { padding:6px 18px 6px 0; border-bottom:1px solid var(--line); text-align:left; font-variant-numeric:tabular-nums }
table.load th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted) }
.command { border-top:1px solid var(--line); padding:18px 0 8px; margin-top:14px }
.command h3 { margin:0 0 2px; font-size:19px } .command h3 a { color:var(--ink); text-decoration:none }
.command h3 a:hover { color:var(--accent) }
.signature { margin:2px 0 8px } .signature code { font-size:14px }
details { margin:10px 0 4px } summary { cursor:pointer; font-weight:600; color:var(--accent) }
.outline li { margin:6px 0 }
footer { max-width:52em; margin:0 auto; padding:18px 22px 40px; color:var(--muted); font-size:12px; border-top:1px solid var(--line) }
:target { scroll-margin-top:70px }
:target h3 a { color:var(--accent) }