/* WokML stylesheet. Scales standardized to Uber Base (baseweb).
   Spacing: 2,4,6,8,10,12,14,16,18,20,22,24,28,32,36,40,48,56,64,96,128
   Type (size/line-height): 12/16 14/20 16/24 18/28 20/28 24/32 28/36 32/40 */

:root{ --bg:#fbfaf9; --paper:#ffffff; --panel:#f5f3f1; --ink:#1a1a1a; --ink-2:#333; --muted:#6b6b6b; --faint:#9a9a9a; --border:#e6e3df; --border-2:#d8d4ce; --accent:#d61f26; --accent-deep:#a5141a; --accent-soft:rgba(214,31,38,.08); --chrome:#16120f; --chrome-line:#2a241f; --chrome-ink:#c4bdb6; --flame:linear-gradient(95deg,#d61f26 0%,#ef4444 45%,#f97316 100%); --s2:2px; --s4:4px; --s6:6px; --s8:8px; --s10:10px; --s12:12px; --s14:14px; --s16:16px; --s18:18px; --s20:20px; --s24:24px; --s28:28px; --s32:32px; --s36:36px; --s40:40px; --s48:48px; --s56:56px; --s64:64px; --t-12:12px; --lh-12:16px; --t-14:14px; --lh-14:20px; --t-16:16px; --lh-16:24px; --t-18:18px; --lh-18:28px; --t-20:20px; --lh-20:28px; --t-24:24px; --lh-24:32px; --t-32:32px; --lh-32:40px; --mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Code","JetBrains Mono",Menlo,Consolas,monospace; --r:6px; --r-lg:8px; --shell:74em; --sidebar:15.5em; --bar:56px; --ease:cubic-bezier(.22,.61,.36,1); }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--bar) + var(--s8)); }
body{ margin:0; font-family:"Manrope",system-ui,sans-serif; font-size:var(--t-16); line-height:var(--lh-16); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; letter-spacing:-.003em; }
a{ color:var(--accent); text-decoration:none; }
a:visited{ color:var(--accent-deep); }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }

/* ---- Top bar (dark chrome) ---- */
header.bar{ position:sticky; top:0; z-index:50; height:var(--bar); background:var(--chrome); border-bottom:1px solid var(--chrome-line); }
.bar-inner{ max-width:var(--shell); margin:0 auto; height:100%; padding:0 var(--s24); display:flex; align-items:center; gap:var(--s24); }
.brand{ font-weight:700; font-size:var(--t-18); line-height:var(--lh-18); letter-spacing:-.02em; color:#fff; }
.brand .ml{ background:var(--flame); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:700; }
.ver{ font-family:var(--mono); font-size:var(--t-12); line-height:var(--lh-12); color:#c9b8a8; border:1px solid var(--chrome-line); border-radius:999px; padding:var(--s2) var(--s8); letter-spacing:.02em; }
.bar nav{ margin-left:auto; display:flex; align-items:center; gap:var(--s20); }
.bar nav a{ color:var(--chrome-ink); font-size:var(--t-14); line-height:var(--lh-14); font-weight:500; }
.bar nav a:hover{ color:#fff; text-decoration:none; }
/* Source button: fills with the flame gradient on hover. The gradient sits
   in a pseudo so it can cross-fade in; the border + text stay crisp. */
.bar nav a.gh{ position:relative; z-index:0; overflow:hidden; color:#fff; border:1px solid var(--chrome-line); border-radius:var(--r); padding:var(--s4) var(--s12); transition:border-color .2s var(--ease); }
.bar nav a.gh::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--flame); opacity:0; transition:opacity .22s var(--ease);
}
.bar nav a.gh:hover{ border-color:var(--accent); text-decoration:none; }
.bar nav a.gh:hover::before{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .bar nav a.gh, .bar nav a.gh::before{ transition:none; }
}

@media (max-width:720px){ .bar nav a.hideable{ display:none; } }

/* ---- Shell ---- */
.shell{ max-width:var(--shell); margin:0 auto; padding:var(--s32) var(--s24) var(--s64); display:grid; grid-template-columns:var(--sidebar) minmax(0,1fr); gap:var(--s40); }
@media (max-width:820px){ .shell{ grid-template-columns:1fr; gap:var(--s24); } }

/* ---- Sidebar ---- */
aside{ align-self:start; position:sticky; top:calc(var(--bar) + var(--s16)); max-height:calc(100vh - var(--bar) - var(--s24)); overflow-y:auto; }
.nav-box{ background:var(--paper); border:1px solid var(--border); border-radius:var(--r-lg); padding:var(--s16); box-shadow:0 1px 2px rgba(0,0,0,.03); }
.nav-grp{ margin-top:var(--s16); }
.nav-grp:first-child{ margin-top:0; }
.nav-grp .lbl{ display:block; font-size:var(--t-12); line-height:var(--lh-12); font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink); padding:var(--s6) 0; border-top:1px solid var(--border); margin-top:var(--s4); }
.nav-grp:first-child .lbl{ border-top:none; margin-top:0; }
.nav-box ul{ list-style:none; margin:0; padding:0; }
.nav-box li a{ display:block; color:var(--ink-2); font-size:var(--t-14); line-height:var(--lh-14); padding:var(--s4) 0; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-box li a:hover{ color:var(--accent); text-decoration:none; }
.nav-box li a.current{ color:var(--accent); font-weight:600; }
.nav-box li a.todo{ color:var(--faint); font-weight:400; }
.nav-box li a.todo::after{ content:" ·"; color:var(--border-2); }

/* ---- Content ---- */
main{ min-width:0; }
.crumb{ font-size:var(--t-14); line-height:var(--lh-14); color:var(--muted); margin:0 0 var(--s16); }
.crumb a{ color:var(--muted); }
h1{ font-size:var(--t-32); line-height:var(--lh-32); font-weight:700; letter-spacing:-.025em; margin:0 0 var(--s8); }
.mark{ height:3px; width:56px; background:var(--flame); border-radius:2px; margin:var(--s8) 0 var(--s20); }
.tagline{ font-size:var(--t-18); line-height:var(--lh-18); color:var(--muted); font-weight:300; margin:0 0 var(--s24); max-width:60ch; }
.lead{ font-size:var(--t-16); line-height:var(--lh-16); color:var(--ink-2); margin:0 0 var(--s16); max-width:64ch; }
.lead b{ color:var(--ink); font-weight:600; }
h2{ font-size:var(--t-24); line-height:var(--lh-24); font-weight:700; letter-spacing:-.015em; margin:var(--s40) 0 var(--s8); padding-top:var(--s24); border-top:1px solid var(--border); }
h2 .hash{ color:var(--faint); font-weight:400; font-size:.8em; margin-left:var(--s6); opacity:0; text-decoration:none; }
h2:hover .hash{ opacity:1; }
h3{ font-size:var(--t-18); line-height:var(--lh-18); font-weight:600; margin:var(--s20) 0 var(--s8); }
p{ margin:var(--s8) 0; }

/* ---- Dense feature list ---- */
dl.features{ margin:var(--s8) 0 0; display:grid; grid-template-columns:1fr 1fr; gap:0 var(--s40); }
@media (max-width:560px){ dl.features{ grid-template-columns:1fr; } }
dl.features div{ padding:var(--s10) 0; border-bottom:1px solid var(--border); }
dl.features dt{ font-size:var(--t-16); line-height:var(--lh-16); font-weight:600; color:var(--ink); }
dl.features dt::before{ content:""; display:inline-block; width:6px; height:6px; border-radius:1px; background:var(--accent); margin-right:var(--s8); vertical-align:middle; }
dl.features dd{ margin:var(--s4) 0 0 var(--s16); color:var(--muted); font-size:var(--t-14); line-height:var(--lh-14); }

/* ---- Code ---- */
pre{ background:var(--paper); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--r); padding:var(--s14) var(--s16); margin:var(--s12) 0; overflow-x:auto; font-family:var(--mono); font-size:var(--t-14); line-height:22px; color:var(--ink-2); }
pre .kw{ color:var(--accent); }
pre .cm{ color:var(--faint); }
code.inline{ font-family:var(--mono); font-size:.85em; background:var(--accent-soft); color:var(--accent-deep); padding:1px var(--s6); border-radius:4px; }
.caption{ font-size:var(--t-12); line-height:var(--lh-12); color:var(--muted); margin:var(--s6) 0 0; }

/* ---- Install terminal ---- */
.term{ background:var(--chrome); border-radius:var(--r); font-family:var(--mono); font-size:var(--t-14); line-height:var(--lh-14); color:#eee; padding:var(--s12) var(--s16); margin:var(--s12) 0; max-width:46ch; }
.term .p{ color:#f97316; }
.term .c{ color:#8a827a; }

/* ---- Status note ---- */
.note{ background:var(--panel); border:1px solid var(--border); border-radius:var(--r); padding:var(--s14) var(--s16); margin:var(--s12) 0; font-size:var(--t-14); line-height:22px; color:var(--ink-2); max-width:66ch; }
.note .v{ font-family:var(--mono); color:var(--accent-deep); font-weight:600; }
.note b{ color:var(--ink); }
.seealso{ margin-top:var(--s40); padding-top:var(--s20); border-top:1px solid var(--border); font-size:var(--t-14); line-height:var(--lh-14); color:var(--muted); }
.seealso strong{ display:block; color:var(--ink); font-weight:600; margin-bottom:var(--s8); }
.seealso a{ margin-right:var(--s16); }

/* ---- Footer ---- */
footer{ border-top:1px solid var(--border); background:var(--paper); }
.foot-inner{ max-width:var(--shell); margin:0 auto; padding:var(--s24); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s8); font-size:var(--t-14); line-height:var(--lh-14); color:var(--muted); }
.foot-inner .ml{ background:var(--flame); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:600; }

/* ---- Restrained page-load fade ---- */
@keyframes fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.shell>main{ animation:fade .5s var(--ease) both; }
.shell>aside{ animation:fade .5s var(--ease) .08s both; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; } html{ scroll-behavior:auto; } }