/* Shared reading layout for guides, blog articles and privacy pages. See DESIGN.md. */
@font-face{font-family:VT323;src:url('/assets/fonts/VT323-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Silkscreen;src:url('/assets/fonts/Silkscreen-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
:root{color-scheme:dark;--page:#080b0b;--surface:#101515;--soft:#192020;--ink:#e9eee7;--muted:#a3afaa;--line:#28322f;--accent:#b6a5fa;--accent-hover:#cfc3ff;--font-ui:VT323,'Courier New',monospace;--font-mono:'Courier New',monospace;background:var(--page);color:var(--ink);font-family:var(--font-ui)}
*{box-sizing:border-box}html{scroll-padding-top:24px}body{margin:0;background:var(--page);font-size:22px;line-height:1.5}
header,main,footer{width:min(820px,calc(100% - 48px));margin-inline:auto}
header{min-height:88px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
header a{display:inline-flex;align-items:center;gap:12px;color:var(--ink);font:12px Silkscreen,monospace;letter-spacing:-.06em;text-decoration:none}
main{padding:56px 0 72px}h1,h2,h3{font-family:var(--font-ui);font-weight:400;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(40px,5vw,62px);line-height:1.05;letter-spacing:-.025em;margin:0 0 24px;max-width:26ch}
h2{font-size:34px;line-height:1.15;margin:48px 0 18px;padding-top:26px;border-top:1px solid var(--line)}
h3{font-size:27px;line-height:1.2;margin:28px 0 12px}p,li{color:var(--muted)}p{margin:18px 0}li{margin:10px 0;padding-left:5px}ul,ol{padding-left:26px}li::marker{color:var(--accent)}strong{color:var(--ink);font-weight:400}
a{color:var(--accent);text-underline-offset:4px;text-decoration-thickness:1px;overflow-wrap:anywhere}a:hover{color:var(--accent-hover)}a:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:2px}
.lead{font-size:26px;line-height:1.4;max-width:58ch;color:var(--ink);margin:0 0 22px}.lead+p{font-size:18px;color:var(--muted);margin-bottom:38px}
pre{padding:22px;background:var(--surface);color:#dcebdc;border:1px solid var(--line);border-radius:6px;overflow:auto;font:14px/1.25 var(--font-mono);white-space:pre;max-width:100%}
code{font-family:var(--font-mono);font-size:.72em;overflow-wrap:anywhere}pre code{font:inherit;overflow-wrap:normal;white-space:pre}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 20px;border:1px solid var(--accent);border-radius:5px;background:var(--accent);color:#111315;text-decoration:none;font:22px/1.2 var(--font-ui);margin:12px 0;transition:background .18s,border-color .18s}.button:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#111315}
.note,blockquote{padding:18px 22px;border-left:2px solid var(--accent);background:var(--surface);margin:26px 0}
table{border-collapse:collapse;width:100%;font-size:21px;table-layout:fixed;margin:24px 0}th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}th{background:var(--surface);color:var(--ink);font-weight:400}td{color:var(--muted)}
img{max-width:100%;height:auto;border-radius:6px}footer{border-top:1px solid var(--line);padding:24px 0 36px;font-size:18px;line-height:1.8;color:var(--muted)}footer a{display:inline-block}
@media(max-width:767px){header,main,footer{width:calc(100% - 36px)}header{min-height:76px}main{padding:36px 0 48px}body{font-size:21px}.lead{font-size:24px}h2{font-size:30px;margin-top:36px}h3{font-size:25px}th,td{padding:11px 9px}table{font-size:20px}pre{padding:16px}.button{max-width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Character typography remains, with a calmer measure for sustained reading. */
main > p, main > ul, main > ol { max-width: 68ch; line-height: 1.6; }
.guide-example { margin: 30px 0; padding: 20px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.guide-example img { display: block; width: 100%; max-height: 440px; object-fit: contain; background: #080b0b; }
.guide-example figcaption { font-size: 19px; line-height: 1.4; color: var(--muted); margin-top: 14px; }
.guide-example .example-context { font-size: 18px; color: var(--accent); margin: 0 0 12px; }
.guide-example .example-title { font: 27px/1.2 var(--font-ui); color: var(--ink); margin-top: 12px; }
.guide-example p { margin: 12px 0; }
.guide-recipe-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.guide-recipe-links a { min-height: 44px; display: inline-flex; align-items: center; }
.guide-copy-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.guide-copy-actions button { cursor: pointer; font: inherit; }
.guide-copy-actions [role="status"] { flex: 1 1 220px; font-size: 18px; color: var(--muted); }
.guide-copy-actions button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.guide-variant-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.guide-variant-grid .guide-example { min-width: 0; margin: 10px 0; }
.guide-variant-grid h3 { margin: 8px 0 14px; }
.guide-variant-grid .guide-example p:last-child { font-size: 19px; line-height: 1.45; }
.guide-variant-grid pre { font-size: 10px; padding: 10px; }
.guide-variant-grid details { margin-top: 12px; }
.guide-variant { max-width: 620px; }
@media(max-width:767px){.guide-variant-grid{grid-template-columns:1fr}.guide-variant-grid pre{font-size:12px}}
@media(max-width:767px){.guide-example{padding:12px}.guide-example img{max-height:360px}.guide-example figcaption{font-size:18px}}

/* One pixel type family for interface and reading copy; ASCII keeps its grid. */
main > p,main > ul,main > ol,.note,main table,.guide-example figcaption,.guide-example > p:not(.example-context):not(.example-title) {
  font-family:var(--font-ui); font-size:22px; line-height:1.5;
}
main > .lead { font-size:26px; line-height:1.4; }
header { justify-content:space-between; gap:16px; }
header .header-tool { font:20px/1.2 var(--font-ui); min-height:44px; color:var(--accent); letter-spacing:0; text-align:right; }
.guide-start { display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; margin:16px 0 24px; }
.guide-start > a { min-height:44px; display:inline-flex; align-items:center; }
.guide-start .button { margin:0; }
#example-preview { scroll-margin-top:24px; }
@media(max-width:767px){main{padding-top:26px}main>.lead{font-size:24px}main>p,main>ul,main>ol,.note,main table{font-size:21px}.note{padding:16px;margin-block:22px}header .header-tool{font-size:18px;max-width:100px}.guide-start{gap:8px 16px}}
@media(forced-colors:active){.button,pre,.note,blockquote,th{border:1px solid CanvasText}.button{color:ButtonText;background:ButtonFace}}