/* A book: a horizon plate, chapters with a lot of white, a back-of-book index,
   reading pages with hanging numbers and a margin column, a Vim status line underneath.
   Without JavaScript every chapter is open and the JS-only controls are hidden. */

/* ---------- fonts (self-hosted; "optional" = never swapped after first paint, so no layout shift) ---------- */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 600;font-display:optional;src:url(/fonts/newsreader-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 600;font-display:optional;src:url(/fonts/newsreader-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 600;font-display:optional;src:url(/fonts/newsreader-italic-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 600;font-display:optional;src:url(/fonts/newsreader-italic-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:optional;src:url(/fonts/jetbrains-mono.woff2) format("woff2")}
/* Only downloaded by pages that contain an equation. */
@font-face{font-family:"STIX Two Math";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/stix-two-math.woff2) format("woff2")}

/* ---------- themes ---------- */
/* Two themes: darkroom (default, also without JavaScript) and print. */
:root{
  --bg:#0f0d0c; --bg2:#181312; --ink:#d9d1ca; --muted:#958b84; --faint:#2c2422; --accent:#e5533c; --mark:rgba(229,83,60,.2);
  --add:#9fb58a; --del:#e5533c; --line:#ff5b3d;
  --sky0:#060404; --sky1:#120706; --glow:#7a140b; --glow2:#3a0a06; --ground0:#0c0908; --ground1:#050404; --limb:#ff5b3d; --plate-ink:#eadcd3;
  --stars:.55; --grain:.068; --pgrain:10;
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
:root[data-skin="print"]{
  --bg:#efefeb; --bg2:#e5e5e0; --ink:#17181a; --muted:#5d5f63; --faint:#d2d3ce; --accent:#2b4a78; --mark:rgba(43,74,120,.14);
  --add:#2f6b3a; --del:#a33a2a; --line:#2b4a78;
  --sky0:#d6d6d0; --sky1:#d9a679; --glow:#f6dcc0; --glow2:#f6dcc0; --ground0:#2e4968; --ground1:#1a2c44; --limb:#fff1de; --plate-ink:#fbfaf6;
  --stars:0; --grain:.048; --pgrain:13; color-scheme:light;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html.js:not(.nocur),html.js:not(.nocur) body{cursor:var(--cur-n,auto),default}
html.js:not(.nocur) :is(a,button,label,summary,[role="button"],#bar){cursor:var(--cur-l,pointer),pointer}
html.js:not(.nocur) :is(input,textarea){cursor:text}
html{background:var(--bg);-webkit-text-size-adjust:100%}
html.develop{animation:develop .85s cubic-bezier(.2,.6,.2,1)}
@keyframes develop{from{filter:contrast(.22) brightness(1.18) blur(.5px)}to{filter:none}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.6 var(--serif);font-optical-sizing:auto;
  font-variant-numeric:oldstyle-nums;-webkit-font-smoothing:antialiased;transition:background-color .3s,color .3s}
html.js body{padding-bottom:30px}
::selection{background:var(--mark)}
a{color:inherit}
:focus-visible{outline:1.5px solid var(--accent);outline-offset:3px;border-radius:2px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
code{font:.82em var(--mono)}
/* code-like views show characters as typed: no ligatures (<!-- would become an arrow) */
.srcv,#intro,#bar,#panel,code,pre{font-variant-ligatures:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--bg2);padding:6px 12px;font:12px var(--mono)}
.skip:focus{top:12px}
html:not(.js) .jsonly,html:not(.js) .seek,html:not(.js) .skins{display:none}
#grain{position:fixed;inset:0;pointer-events:none;z-index:90;opacity:var(--grain)}
html.nograin #grain{display:none}

/* ---------- plate ---------- */
.plate{position:relative;height:clamp(170px,26vw,250px);margin-top:24px;overflow:hidden;
  background:linear-gradient(var(--sky0),var(--sky0) 50%,var(--ground0) 50%)}
html.js .plate{background:var(--sky0)}
#plate{position:absolute;inset:0;width:100%;height:100%;display:block}
.name{position:absolute;left:0;right:0;top:56%;margin:0;text-align:center;font-weight:400;
  font-size:clamp(30px,5.2vw,50px);letter-spacing:-.012em;line-height:1.1;color:var(--plate-ink);font-variant-numeric:lining-nums}
.cap{margin:8px 0 0;font:11px/1.4 var(--mono);color:var(--muted);text-align:right}
html:not(.js) .cap{visibility:hidden}

/* ---------- contents ---------- */
.lede{font-size:clamp(21px,2.6vw,25px);line-height:1.38;max-width:31em;margin:48px 0 6px;text-wrap:balance;font-weight:350}
.who{color:var(--muted);margin:0;font-size:16px}
.tabs{display:flex;gap:26px;margin:56px 0 0;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.tabs a{color:var(--muted);text-decoration:none;padding-bottom:4px;border-bottom:1px solid transparent}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.seek{display:flex;align-items:baseline;gap:10px;border-bottom:1px solid var(--faint);padding:6px 0;margin-top:22px;font:13px var(--mono);color:var(--muted)}
.seek .sl{color:var(--accent)}
.seek input{flex:1;min-width:0;background:transparent;border:0;color:var(--ink);font:inherit;padding:2px 0;-webkit-appearance:none;appearance:none}
.seek input::-webkit-search-cancel-button{display:none}
.seek input::placeholder{color:var(--muted);opacity:.85}
.seek input:focus{outline:none}
.seek:focus-within{border-bottom-color:var(--ink)}
.count{white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}

.chaps{margin-top:18px}
.chap{border-bottom:1px solid var(--faint);transition:opacity .3s}
.chh-h{margin:0;font:inherit}
.chh{display:grid;grid-template-columns:5rem minmax(0,1fr) auto;align-items:baseline;width:100%;padding:30px 0 28px}
html:not(.js) .chh{cursor:default}
.chh .cn{font-size:46px;font-weight:300;line-height:1;font-variant-numeric:lining-nums;color:var(--muted);transition:color .3s}
.chh .ct{font-size:30px;line-height:1.1;letter-spacing:-.008em}
.chh .cm{font:12px var(--mono);color:var(--muted);white-space:nowrap}
.js .chh:hover .cn,.chap.open .cn{color:var(--accent)}
.chaps.focus .chap:not(.open){opacity:.22}
.chaps.focus .chap:not(.open):hover{opacity:.5}
.rows{list-style:none;margin:-8px 0 26px 5rem;padding:0}
.js .rows{display:none}
.js .chap.open .rows{display:block}
.none{color:var(--muted);font-style:italic;padding:4px 0 8px}
.row{display:grid;grid-template-columns:3rem minmax(0,1fr) auto;column-gap:14px;padding:9px 0;border-top:1px solid var(--faint);
  box-shadow:inset 0 0 0 var(--accent);transition:opacity .3s,box-shadow .25s;scroll-margin:30vh}
.row:first-child{border-top:0}
.chaps.efocus .row:not(.open){opacity:.28}
.num{font:13px/1.9 var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;transition:padding .25s,color .25s}
.ttl{text-decoration:none;font-size:19px;line-height:1.35}
.ttl:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--muted)}
.ttl mark{background:var(--mark);color:inherit;border-radius:2px;padding:0 1px}
.draft{font-style:italic;color:var(--muted);font-size:15px;margin-left:8px;font-weight:400;letter-spacing:0}
.meta{display:grid;justify-items:end;align-items:center;width:17.5rem;font:12px/1.9 var(--mono);color:var(--muted);white-space:nowrap}
.m1,.m2{grid-area:1/1;transition:opacity .28s ease,transform .28s ease}
.m1{display:flex;align-items:center;gap:12px}
.m2{position:relative;z-index:1;opacity:0;transform:translateY(3px);pointer-events:none;max-width:17.5rem;overflow:hidden;text-overflow:ellipsis;font:italic 15px/1.6 var(--serif);color:var(--muted)}
.m2 a{text-decoration:none}
.m2 a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.row:hover .m1,.row.open .m1,.row:focus-within .m1{opacity:0;pointer-events:none}
.row:hover .m2,.row.open .m2,.row:focus-within .m2{opacity:1;transform:none;pointer-events:auto}
.meta .ty{width:6.4rem;text-align:right}
.bar{width:60px;height:9px;position:relative}
.bar i{position:absolute;left:0;top:4px;height:1px;background:var(--muted)}
.bar i::after{content:"";position:absolute;right:0;top:-3px;height:7px;width:1px;background:var(--muted)}
.meta .mn{width:3.4rem;text-align:right;font-variant-numeric:tabular-nums lining-nums}
.row.open{box-shadow:inset 2px 0 0 var(--accent)}
.row.open .num{color:var(--accent);padding-left:8px}
.more{grid-column:2 / -1;padding:8px 0 6px;max-width:36em;display:none}
.row.open .more{display:block}
.more p{margin:0 0 8px;font-size:16.5px;line-height:1.5}
.more .k,.answer .k{font-variant-caps:all-small-caps;letter-spacing:.08em;color:var(--muted);margin-right:8px}
.more .go{font:12px/1.8 var(--mono)}
.more .go a{color:var(--accent);text-underline-offset:3px}
.empty{color:var(--muted);font-style:italic;padding:18px 0}
.row.flash{animation:flash 1.6s ease}
@keyframes flash{0%,30%{background:var(--mark)}100%{background:transparent}}

/* ---------- index ---------- */
.ix{display:grid;grid-template-columns:minmax(0,1fr) 21rem;gap:64px;margin-top:30px}
.nhint{font:12px var(--mono);color:var(--muted);margin:0 0 14px}
.ixcols{columns:2;column-gap:44px;list-style:none;margin:0;padding:0}
.lt{font:500 11px var(--mono);color:var(--muted);margin:16px 0 2px;letter-spacing:.1em;break-after:avoid}
.lt:first-child{margin-top:0}
.term{break-inside:avoid;scroll-margin:30vh}
.tb{display:flex;justify-content:space-between;align-items:baseline;gap:10px;width:100%;padding:2px 0;color:var(--muted);transition:color .25s}
.tb .tn{color:var(--ink);transition:color .25s}
.tb .rf{font:11px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;opacity:.7}
.ix.has .term:not(.cur) .tn{color:var(--muted)}
.tb:hover .tn,.term.cur .tn{color:var(--ink)}
.term.cur .rf{color:var(--accent);opacity:1}
.term.lock .tn{font-style:italic}
.term.lock .tn::before{content:"› ";color:var(--accent)}
.te{list-style:none;margin:0 0 8px;padding:0 0 0 1rem;font-size:15.5px}
.te a{text-decoration:none}
.te .n,.ixp li a .n{font:12px/1.9 var(--mono);color:var(--muted);margin-right:10px}
.js .te{display:none}
.js .term:target .tn{font-style:italic}
.ixp{position:sticky;top:28px;align-self:start;min-height:200px}
html:not(.js) .ixp{display:none}
html:not(.js) .ix{grid-template-columns:minmax(0,1fr)}
.ixp .pe{font:12px var(--mono);color:var(--muted);padding-top:2px}
.ixp .pc{animation:pcIn .38s cubic-bezier(.2,.6,.2,1)}
@keyframes pcIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.ixp h2{font-weight:400;font-size:27px;line-height:1.15;margin:0 0 4px;font-style:italic}
.ixp .pn2{font:11px var(--mono);color:var(--muted);margin:0 0 16px}
.ixp ol{list-style:none;margin:0;padding:0}
.ixp li{opacity:0;animation:liIn .32s ease forwards;animation-delay:calc(var(--i) * 28ms)}
@keyframes liIn{from{opacity:0;transform:translateX(-4px)}to{opacity:1;transform:none}}
.ixp li a{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:12px;padding:6px 0;border-top:1px solid var(--faint);text-decoration:none;font-size:16.5px;line-height:1.35}
.ixp li:first-child a{border-top:0}
.ixp li a .n{margin:0}
.ixp li a:hover .t{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--muted)}
.ixp li a:hover .n{color:var(--accent)}

/* ---------- footer ---------- */
footer{margin-top:80px;padding:14px 0 24px;border-top:1px solid var(--faint);font:12px/1.7 var(--mono);color:var(--muted);
  display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between}
footer p{margin:0}
.skins{display:flex;gap:12px;flex-wrap:wrap}
.links{display:flex;gap:16px;flex-wrap:wrap}
.links a{color:var(--muted);text-decoration:none}
.links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.skins button{color:var(--muted);text-underline-offset:3px}
.skins button:hover{color:var(--ink)}
.skins button[aria-pressed="true"]{color:var(--ink);text-decoration:underline}

/* ---------- reading ---------- */
.rtop{display:flex;justify-content:space-between;gap:12px;padding:22px 0;font:12px var(--mono);color:var(--muted)}
.rtop a{text-decoration:none}
.rtop a:hover{color:var(--ink)}
.ph1{font-weight:400;font-size:clamp(30px,4.4vw,40px);line-height:1.15;margin:44px 0 18px}
.read{margin:44px 0 0 4.5rem;max-width:36rem;position:relative}
.read h1{font-weight:400;font-size:clamp(32px,5vw,46px);line-height:1.12;letter-spacing:-.012em;margin:0 0 10px;position:relative;text-wrap:balance}
.hn{font:13px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:0;font-variant-caps:normal;font-weight:400}
.read .hn{position:absolute;right:100%;margin-right:1.1rem;top:.5em;white-space:nowrap}
.read h1 .hn{top:.95em}
.pm{font:12px var(--mono);color:var(--muted);margin:0 0 34px}
.read h2{font-weight:500;font-variant-caps:all-small-caps;letter-spacing:.08em;font-size:19px;margin:44px 0 10px;position:relative;scroll-margin-top:40px}
.read h3{font-weight:500;font-style:italic;font-size:18px;margin:28px 0 6px}
.read p,.read ul,.read ol{margin:0 0 16px;hyphens:auto}
.read li{margin:0 0 4px}
.read blockquote{margin:0 0 16px;padding-left:16px;border-left:1px solid var(--faint);color:var(--muted)}
.read img{max-width:100%;height:auto}
.read pre{font:13px/1.6 var(--mono);background:var(--bg2);padding:12px 14px;overflow-x:auto;margin:0 0 16px}
.read pre code{font-size:inherit}
.read .standfirst{font-size:21px;line-height:1.45;margin:0 0 20px;font-weight:350}
.answer{border-left:2px solid var(--accent);padding:2px 0 2px 16px;margin:0 0 8px}
.answer .k{display:block;font-size:16px}
.stub{font:12px var(--mono);color:var(--muted);margin-top:30px}
.toc{margin:0 0 30px}
.toc ol{list-style:none;margin:0;padding:0;font-size:15.5px;line-height:1.75}
.toc a{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:8px;color:var(--muted);text-decoration:none}
.toc a .n{font:12px/2.2 var(--mono);font-variant-numeric:tabular-nums}
.toc a:hover{color:var(--ink)}

/* margin notes: a block holding notes becomes a two-column grid that reaches into the right margin */
.np{display:grid;grid-template-columns:minmax(0,1fr) 14.5rem;column-gap:3.5rem;margin-right:-18rem;align-items:start}
.np>.sns{grid-column:2;grid-row:1}
.sn{display:block;font-size:14.5px;line-height:1.5;color:var(--muted);margin:4px 0 12px;font-variant-numeric:oldstyle-nums}
.snn,.snm{font:11px var(--mono);color:var(--accent)}
.snn{margin-right:6px}
.snm{line-height:0;margin-left:1px}
.snm a{text-decoration:none}
.sn:target{color:var(--ink)}

math{font-family:"STIX Two Math","Cambria Math",math;font-size:1.06em;font-variant-numeric:normal}
math[display="block"],math.tml-display{display:block math;margin:14px 0;overflow-x:auto;overflow-y:hidden;padding:2px 0}
.texerr{color:var(--del)}
.tbl{overflow-x:auto;margin:6px 0 20px}
table{border-collapse:collapse;width:100%;font-size:15.5px;line-height:1.45}
th{font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 10px 6px 0;border-bottom:1px solid var(--ink)}
td{padding:5px 10px 5px 0;border-bottom:1px solid var(--faint);vertical-align:baseline}
td.v,th.v{text-align:right;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;padding-right:0}
td.c,th.c{text-align:center}
.endm{margin-top:64px;padding-top:18px;border-top:1px solid var(--faint)}
.endm .ver{font:12px/1.8 var(--mono);color:var(--muted);margin:0 0 22px}
.endm .ver button{color:var(--ink);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px}
.mmd{margin:0;display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:10px 16px;font-size:15.5px;line-height:1.5}
.mmd dt{font:500 10.5px/2.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mmd dd{margin:0}
.mmd a{color:inherit;text-underline-offset:3px;text-decoration-color:var(--faint)}
.mmd a:hover{text-decoration-color:var(--ink)}
.xref,.mmd .xref{color:var(--accent);text-decoration:none;font-variant-numeric:lining-nums;border-bottom:1px dotted var(--accent)}
.xref.missing{color:var(--muted);border-bottom-color:var(--faint)}
.pn{display:flex;justify-content:space-between;gap:20px;margin:56px 0 0;font-size:16px}
.pn a{text-decoration:none;max-width:48%}
.pn a span{display:block;font:11px var(--mono);color:var(--muted)}
.pn a[rel="next"]{text-align:right;margin-left:auto}
.pn a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--muted)}
.read.tw>*{transition:opacity .35s}
.read.tw>*:not(.cur){opacity:.22}
#pop{position:absolute;z-index:30;width:min(320px,calc(100vw - 32px));background:var(--bg2);border:1px solid var(--faint);padding:10px 14px;
  font-size:15px;line-height:1.45;box-shadow:0 8px 28px rgba(0,0,0,.12);pointer-events:none}
#pop b{font-weight:500;display:block}
#pop small{display:block;font:11px var(--mono);color:var(--muted);margin-bottom:4px}
.cvdoc{display:block;width:100%;height:calc(100vh - 140px);min-height:480px;border:1px solid var(--faint);background:var(--bg2)}

/* ---------- source view ---------- */
.srcv{margin:44px 0 0 4.5rem;max-width:44rem;font:13px/1.8 var(--mono);color:var(--ink);animation:pcIn .3s ease}
.srcv .l{display:grid;grid-template-columns:3.2ch minmax(0,1fr);gap:16px;white-space:pre-wrap;word-break:break-word}
.srcv .l>span:first-child{color:var(--muted);opacity:.55;text-align:right;user-select:none}
.srcv .fm{color:var(--muted)}
.srcv .k{color:var(--accent)}
.srcv .h{color:var(--accent);font-weight:500}
.srcv .m{color:var(--add)}
.srcv .tl{color:var(--accent);opacity:.35}
.srcv .hint{font-size:11px;color:var(--muted);margin:0 0 14px}

/* ---------- status line ---------- */
#bar{position:fixed;left:0;right:0;bottom:0;z-index:40;height:26px;display:flex;align-items:center;gap:14px;padding:0 12px 0 0;
  background:var(--bg2);border-top:1px solid var(--faint);font:12px/26px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden}
#bar .mode{background:var(--accent);color:var(--bg);padding:0 10px;font-weight:500;letter-spacing:.04em}
#bar .file{color:var(--ink);overflow:hidden;text-overflow:ellipsis;min-width:0}
#bar .msg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
#bar .msg.err{color:var(--del)}
#bar .rt,#extra{display:flex;gap:14px;font-variant-numeric:tabular-nums lining-nums}
#bar .rt button{color:var(--ink);text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px}
#cmd{display:none;flex:1;align-items:center;padding-left:12px;color:var(--ink)}
#bar.cmd #cmd{display:flex}
#bar.cmd .mode,#bar.cmd .file,#bar.cmd .msg,#bar.cmd .rt{display:none}
#cmd input{flex:1;background:transparent;border:0;color:var(--ink);font:inherit;padding:0 0 0 1px;outline:none}

/* ---------- panels: help, log, diff, checkhealth ---------- */
#panel{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(0,0,0,.3);padding:16px 16px 42px}
#panel .pane{background:var(--bg);border:1px solid var(--faint);max-width:620px;width:100%;padding:18px 22px;font:13px/1.7 var(--mono);color:var(--ink);
  max-height:calc(100vh - 90px);overflow:auto}
#panel .pane.wide{max-width:920px}
#panel .pane:focus{outline:none}
#panel .ph{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 12px}
#panel h3{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:16px 0 4px}
#panel h3:first-of-type{margin-top:0}
#panel dl{display:grid;grid-template-columns:11rem minmax(0,1fr);margin:0;gap:0 12px}
#panel dt{color:var(--accent)}
#panel dd{margin:0;color:var(--muted)}
#panel .x{margin:14px 0 0;color:var(--muted)}
.lg{padding:6px 0;border-bottom:1px solid var(--faint)}
.lg .h{color:var(--accent)}
.lg .d{color:var(--muted)}
.lg .m{display:block;padding-left:4ch;font-family:var(--serif);font-size:15.5px;white-space:pre-line}
.lg a{text-decoration:none}
.lg a:hover{text-decoration:underline}
.df div{white-space:pre-wrap;word-break:break-word;padding:0 8px;font-size:12.5px;line-height:1.75}
.df .a{color:var(--add);background:color-mix(in srgb,var(--add) 10%,transparent)}
.df .r{color:var(--del);background:color-mix(in srgb,var(--del) 10%,transparent)}
.df .c{color:var(--muted)}
.df .hd{color:var(--accent);margin-top:8px}
.hc div{padding:1px 0}
.hc .ok{color:var(--add)}
.hc .warn{color:var(--del)}
.hc .info{color:var(--muted)}

/* ---------- intro ---------- */
#intro{position:fixed;inset:0;z-index:60;background:var(--bg);overflow:hidden}
#intro .wrap{padding-top:clamp(28px,7vh,72px)}
#intro .ln{display:flex;gap:18px;font:13px/21px var(--mono);white-space:pre;opacity:0;animation:lnIn .1s ease forwards;animation-delay:calc(var(--i) * 24ms)}
@keyframes lnIn{to{opacity:1}}
#intro .no{width:2.2ch;text-align:right;color:var(--muted);opacity:.6;flex:none}
#intro .sy{color:var(--muted)}
#intro .ma{color:var(--accent)}
#intro .tl{font:13px/21px var(--mono);color:var(--accent);opacity:.35}
#intro .ist{position:absolute;left:0;right:0;bottom:22px;height:22px;display:flex;gap:14px;background:var(--bg2);font:12px/22px var(--mono);color:var(--muted);padding-right:12px}
#intro .ist .mode{background:var(--accent);color:var(--bg);padding:0 10px;font-weight:500}
#intro .ist .r{margin-left:auto}
#intro .icmd{position:absolute;left:12px;right:12px;bottom:0;height:22px;font:12px/22px var(--mono);color:var(--ink);overflow:hidden;white-space:nowrap}
#sweep{position:fixed;inset:0;z-index:61;pointer-events:none;overflow:visible}
#sweep path{fill:none;stroke:var(--line);stroke-width:1.25;filter:drop-shadow(0 0 3px var(--line))}

/* ---------- narrow screens ---------- */
@media (max-width:1100px){
  .np{display:block;margin-right:0}
  .sns{margin:-4px 0 16px;padding-left:12px;border-left:1px solid var(--faint)}
  .sn{margin:0 0 6px}
}
@media (max-width:900px){
  .ix{grid-template-columns:minmax(0,1fr);gap:28px}
  .ixp{order:-1;top:0;z-index:5;height:min(34vh,260px);min-height:0;overflow:auto;background:var(--bg);border-bottom:1px solid var(--faint);padding:10px 0 4px}
  .ixp h2{font-size:22px}
  .ixcols{columns:1}
  .read,.srcv{margin-left:0}
  .read .hn{position:static;margin:0 10px 0 0;display:inline}
  .read h1 .hn{display:block;margin-bottom:6px}
}
@media (max-width:600px){
  body{font-size:17px}
  .wrap{padding:0 16px}
  .chh{grid-template-columns:3.4rem minmax(0,1fr)}
  .chh .cn{font-size:36px}
  .chh .ct{font-size:25px}
  .chh .cm{grid-column:2;margin-top:6px}
  .rows{margin-left:0}
  .row{grid-template-columns:2.6rem minmax(0,1fr)}
  .meta{grid-column:2;width:auto;justify-items:start}
  .m2{max-width:100%}
  .meta .ty{width:auto;text-align:left}
  .meta .mn{width:auto}
  .more{grid-column:2}
  .mmd{grid-template-columns:minmax(0,1fr);gap:2px}
  .mmd dd{margin-bottom:10px}
  #bar .file{display:none}
  #panel dl{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}