:root{color-scheme:light dark;--bg:#DEDEDE;--fg:#101010;--panel:#F2F2F2;--muted:#5C5C5C;--border:#D6D6D6;--frame:#5C5C5C;--link:#0741ff;--accent:#EEFF22;--on-accent:#101010;--sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;--mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace}
@media(prefers-color-scheme:dark){:root{--bg:#101010;--fg:#F4F4F4;--panel:#181818;--muted:#A8A8A8;--border:rgba(214,214,214,.15);--frame:#8A8A8A;--link:#E3FF14}}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--sans)}
body{max-width:860px;margin:0 auto;padding:40px 20px 64px}
h1{font-size:27px;line-height:1.15;margin:0 0 8px;letter-spacing:.2px}
h1 code{font:inherit}
p.lede{color:var(--muted);margin:0 0 28px;max-width:68ch}
h2{font:500 12px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:34px 0 10px;padding-bottom:6px;border-bottom:1px dashed var(--border)}
table{width:100%;border-collapse:collapse;margin:0 0 8px}
td{padding:7px 10px 7px 0;border-bottom:1px solid var(--border);vertical-align:baseline}
td.name{width:34%;font:14px var(--mono);white-space:nowrap}
td.desc{color:var(--muted);font-size:14px}
td.size{width:15%;text-align:right;color:var(--muted);font:12px var(--mono);white-space:nowrap}
tr.big td.size{color:var(--fg);font-weight:600}
tr.big td.size::after{content:' ⚠'}
a{color:var(--link);text-decoration:underline;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
a.parent{color:var(--muted)}
pre{background:var(--panel);border:1px solid var(--border);border-left:2px solid var(--frame);padding:13px 15px;font:13px/1.55 var(--mono);margin:0 0 10px;white-space:pre-wrap;overflow-wrap:anywhere}
pre.primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent);border-left-color:var(--on-accent)}
p.note{color:var(--muted);font-size:14px;border-left:2px solid var(--frame);padding-left:12px;margin:0 0 10px;max-width:68ch}
footer{color:var(--muted);font-size:13px;margin-top:34px;border-top:1px solid var(--border);padding-top:16px}
footer a{color:var(--muted)}
#pv{position:fixed;inset:0;background:var(--bg);display:none;flex-direction:column;padding:16px 20px}
#pv.on{display:flex}
#pv header{display:flex;gap:12px;align-items:center;margin-bottom:10px}
#pv h3{font:500 13px var(--mono);margin:0;flex:1;overflow-wrap:anywhere}
#pv button{font:12px var(--mono);background:var(--panel);color:var(--fg);border:1px solid var(--border);padding:5px 10px;cursor:pointer}
#pv button:hover{background:var(--fg);color:var(--bg)}
#pv pre{flex:1;overflow:auto;white-space:pre-wrap;margin:0}
:focus-visible{outline:2px solid var(--link);outline-offset:2px}
/* Narrow viewports: stack each row instead of squeezing three columns into
   ~390px, which overflowed the body horizontally and shredded the description
   into two-word lines. Purely a CSS concern — the markup is identical, which is
   the point of keeping the presentation layer out of the document. */
@media(max-width:640px){
table,tbody,tr,td{display:block;width:auto}
tr{padding:10px 0;border-bottom:1px solid var(--border)}
td{border-bottom:none;padding:0}
td.name{width:auto;white-space:normal;overflow-wrap:anywhere}
td.desc{margin-top:2px}
td.size{text-align:left;margin-top:2px}
}