/* Reading pages share Plots' system typography and neutral content palette. */
:root { color-scheme:dark; --bg:#000; --card:#1c1c1e; --ink:#f2f2f7; --muted:#aaaab0; --line:rgba(84,84,88,.6); --accent:#ffa056; --tint:#303032; }
:root[data-theme="light"] { color-scheme:light; --bg:#f2f2f7; --card:#faf9f6; --ink:#262628; --muted:#646468; --line:rgba(60,60,67,.12); --accent:#b84700; --tint:#e9e8e4; }
* { box-sizing:border-box; }
html { font:100%/1.6 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; -webkit-text-size-adjust:100%; scroll-padding-top:90px; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); text-underline-offset:.2em; overflow-wrap:anywhere; touch-action:manipulation; }
a:focus-visible { outline:2px solid var(--accent); outline-offset:4px; border-radius:3px; }
a:active { opacity:.65; }
::selection { background:var(--tint); color:var(--ink); }
.skip { position:fixed; top:-8rem; left:20px; padding:10px 16px; background:var(--card); z-index:5; }
.skip:focus { top:12px; }
.wrap { width:min(100% - 40px,640px); margin:auto; }
header { position:sticky; top:0; z-index:3; display:flex; align-items:center; justify-content:space-between; min-height:64px; padding:max(6px,env(safe-area-inset-top)) 0 8px; background:var(--bg); }
.back { display:inline-flex; align-items:center; gap:3px; min-height:44px; padding:6px 4px 6px 0; font-size:16px; line-height:1.2; font-weight:600; text-decoration:none; }
.back svg { width:20px; height:20px; flex:none; }
.brand { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:1.9375rem; line-height:1.15; font-weight:740; letter-spacing:-1.7px; color:var(--ink); text-decoration:none; }
.brand img { width:35px; height:35px; }
nav { display:flex; flex-wrap:wrap; gap:4px 20px; margin:6px 0 28px; border-bottom:1px solid var(--line); }
nav a { display:inline-flex; align-items:center; min-height:44px; padding:10px 0; font-size:14px; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; }
nav [aria-current="page"] { color:var(--ink); border-bottom-color:var(--ink); font-weight:600; }
main { margin:0 0 32px; overflow-wrap:anywhere; }
h1 { margin:0 0 10px; font-size:2.125rem; line-height:1.12; font-weight:700; letter-spacing:-.025em; text-wrap:balance; }
h2 { margin:32px 0 10px; font-size:1.25rem; line-height:1.3; font-weight:650; letter-spacing:-.015em; }
p { margin:14px 0; }
ul,ol { margin:14px 0; padding-left:1.3em; }
li { margin:10px 0; }
.updated,footer { color:var(--muted); font-size:.875rem; }
.summary { margin:24px 0; padding:18px 0; border-block:1px solid var(--line); }
.summary p { margin:0; }
.action { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; border-radius:12px; background:var(--tint); color:var(--ink); font-size:14px; font-weight:600; text-decoration:none; }
footer { padding:0 0 max(28px,env(safe-area-inset-bottom)); border-top:1px solid var(--line); }
footer a { display:inline-flex; align-items:center; min-height:44px; }
@media(prefers-contrast:more) { :root { --line:currentColor; } }

@media(max-width:480px) { .brand { font-size:1.6875rem; } .brand img { width:30px; height:30px; } }

/* Plain reading pages: one column, no panels competing with the text. */
.wrap{width:min(100% - 40px,660px)}
header{position:relative;padding-top:max(12px,env(safe-area-inset-top));min-height:76px}
nav{border:0;gap:6px 20px;margin-bottom:32px}
nav a{border:0}
nav [aria-current=page]{color:var(--accent)}
h1{font-size:clamp(32px,6vw,44px);letter-spacing:-.035em}
h2{font-size:19px;margin-top:32px}
p,li{font-size:16px;line-height:1.65}
.summary{border:0;padding:0;margin:22px 0;color:var(--ink)}
.updated{font-size:13px}
footer{border:0;padding-top:16px}