:root{--bg:#0b0f19;--bg2:#111827;--tab:#1a2232;--line:#263247;--ink:#f3f4f6;--muted:#a3abb8;--accent:#facc15;--accent-ink:#0b0f19}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--bg);color:var(--ink);font:18px/1.7 Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.wrap{width:min(1120px,calc(100% - 40px));margin:0 auto}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px 22px;min-height:64px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.05rem;text-decoration:none}
.logo b{width:26px;height:26px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='3' y='6' width='26' height='20' rx='5' fill='%23facc15'/%3E%3Crect x='7' y='11' width='18' height='3' rx='1.5' fill='%230b0f19'/%3E%3Crect x='7' y='16' width='13' height='3' rx='1.5' fill='%230b0f19' opacity='.75'/%3E%3Crect x='7' y='21' width='9' height='3' rx='1.5' fill='%230b0f19' opacity='.5'/%3E%3C/svg%3E") center/contain no-repeat}
header.site nav{display:flex;align-items:center;flex-wrap:wrap;gap:6px 22px;font-size:.95rem;color:var(--muted)}
header.site nav a{text-decoration:none}
header.site nav a:hover{color:var(--ink)}
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink)!important;font:inherit;font-weight:800;padding:12px 20px;border:0;border-radius:6px;text-decoration:none;cursor:pointer}
.btn:hover{background:#fde047}
.btn.small{padding:7px 13px;font-size:.9rem}
.hero .wrap{width:min(820px,calc(100% - 40px));padding:72px 0 40px}
.crumbs{font-size:.9rem;color:var(--muted);margin-bottom:28px}
.crumbs a{color:var(--muted)}
h1{font-size:clamp(2.4rem,6.6vw,4.8rem);line-height:.98;letter-spacing:-.045em;font-weight:900;margin:0 0 24px}
.lede{font-size:1.22rem;color:#d1d5db;max-width:38rem;margin:0}
.strip{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:2px solid var(--accent)}
.strip .wrap{display:flex;align-items:flex-end;gap:14px;padding-top:12px}
.tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.tabs a{flex:0 1 200px;min-width:110px;display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:9px 9px 0 0;background:var(--tab);color:var(--muted);font-size:.88rem;text-decoration:none;transition:transform .45s cubic-bezier(.5,0,.2,1),opacity .35s,background .15s;transition-delay:calc(var(--i) * 45ms)}
.tabs a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tabs a i{width:10px;height:10px;border-radius:2px;background:var(--c);flex:none}
.tabs a:hover{background:#232d40;color:var(--ink)}
.tabs a.on{background:var(--accent);color:var(--accent-ink);font-weight:700}
.tabs a.on i{background:var(--accent-ink)}
.tabs.closing a{transform:translateY(46px);opacity:0}
.save{flex:none;margin-bottom:7px}
.group{display:none;align-items:center;flex-wrap:wrap;gap:4px 14px;flex:1;padding:0 0 12px;font-size:.95rem}
.group strong{color:var(--accent)}
.group button{background:none;border:0;padding:0;color:var(--ink);font:inherit;font-weight:700;text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;cursor:pointer}
.strip.saved .group{display:flex}
.strip.saved .tabs,.strip.saved .save{display:none}
.progress{position:absolute;left:0;bottom:-2px;height:2px;background:#fff;width:0}
main.prose{width:min(820px,calc(100% - 40px));margin:0 auto;padding:40px 0 0}
main.prose p,main.prose li{color:#d1d5db}
main.prose h2{font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.1;letter-spacing:-.03em;font-weight:900;margin:56px 0 14px}
main.prose section h2{margin-top:0}
main.prose section{margin-top:56px}
main.prose ul{padding-left:1.2em}
main.prose li::marker{color:var(--accent)}
main.prose ul.guides{list-style:none;padding:0;border-top:2px solid var(--accent)}
main.prose ul.guides li{border-bottom:1px solid var(--line)}
main.prose ul.guides a{display:block;padding:16px 0;font-weight:700;font-size:1.1rem;color:var(--ink);text-decoration:none}
main.prose ul.guides a:hover{color:var(--accent)}
code{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.88em;background:var(--tab);padding:1px 5px;border-radius:4px}
table{width:100%;border-collapse:collapse;margin:8px 0;font-size:1rem}
th{text-align:left;font-size:.85rem;color:var(--muted);font-weight:600;padding:0 0 10px;border-bottom:2px solid var(--accent)}
td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);vertical-align:top;color:#d1d5db}
td:first-child{width:30%;font-weight:800;color:var(--ink)}
td:first-child a{text-decoration:none}
tr.us td:first-child{color:var(--accent)}
main.prose>footer{margin:48px 0 0;color:var(--muted);font-size:.95rem}
.band{background:var(--accent);color:var(--accent-ink);margin-top:72px}
.band .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding:48px 0}
.band h2{margin:0;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.05;letter-spacing:-.035em;font-weight:900;max-width:18ch}
.band p{margin:8px 0 0;max-width:34rem}
.band .btn{background:var(--accent-ink);color:var(--accent)!important}
.band .btn:hover{background:#1f2937}
footer.site .wrap{display:flex;gap:10px 22px;flex-wrap:wrap;padding:26px 0 44px;color:var(--muted);font-size:.95rem}
footer.site span{color:var(--ink);font-weight:800;margin-right:auto}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--ink)}
@media (max-width:640px){.save{padding:6px 10px;font-size:.8rem}.tabs a{flex-basis:130px;min-width:96px}td:first-child{width:38%}table{display:block;overflow-x:auto}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}
