/* Layout: one narrow column of plain text. The top is a slab of black-and-white taped stripes in block characters; the signature at the bottom runs a four-line program. */
:root{
  --bg:#FAFAF7; --fg:#1C1C1A; --dim:#6A6A64; --rule:#E2E1DA; --mark:#B4651E; --ground:#F0EFE9;
  --slab-bg:#F4F3EE; --slab-fg:#141413;
  --f:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --blk:'DejaVu Sans Mono',Menlo,Consolas,'Courier New',monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0C0C0B;--fg:#E6E5DF;--dim:#9A998F;--rule:#26261F;--mark:#E0A15C;--ground:#171715;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0C0C0B;--fg:#E6E5DF;--dim:#9A998F;--rule:#26261F;--mark:#E0A15C;--ground:#171715;color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f);font-size:16px;line-height:1.7}
a{color:var(--fg);text-decoration-color:var(--rule);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--mark)}
:focus-visible{outline:2px solid var(--mark);outline-offset:2px}
main{max-width:640px;margin:0 auto;padding-block:72px 80px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:40px}
header{display:flex;flex-direction:column;gap:4px}
.art,.play{all:unset;display:block;cursor:pointer;max-width:100%}
.art{width:100%}
.art{margin-bottom:24px}
.art:focus-visible,.play:focus-visible{outline:2px solid var(--mark);outline-offset:4px}
#evh{margin:0;box-sizing:border-box;padding:0;border:0;font-family:var(--blk);font-size:calc((min(640px,100vw - 32px) - 22px) / 48.4);line-height:1;white-space:pre;overflow:hidden;user-select:none}
#evh span{display:block;background:#F4F3EE;color:#141413}
#evh.framed span{outline:1px solid #141413;outline-offset:-1px}
h1{margin:0;font-size:16px;font-weight:600}
h1 span{color:var(--mark)}
.sub{color:var(--dim)}
p{margin:0}
section{display:flex;flex-direction:column;gap:12px}
h2{margin:0;font-size:13px;font-weight:400;color:var(--dim)}
h2.px pre{margin:0;font-family:var(--blk);font-size:9.5px;line-height:1;color:var(--fg);white-space:pre}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
li{display:grid;grid-template-columns:minmax(0,13ch) minmax(0,1fr);gap:16px}
li span{color:var(--dim)}
.sig{display:flex;flex-direction:column;gap:8px;padding-top:24px;color:var(--dim)}
.sig pre{margin:0;font-family:var(--f)}
.sigrow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 32px}
#globe{font-size:12px;line-height:1.1;color:var(--fg)}
.who{display:flex;flex-direction:column;gap:2px;padding-bottom:6px}
.who span:first-child{color:var(--fg)}
@media (max-width:480px){li{grid-template-columns:1fr;gap:0}}

/* ---- blog and post pages ---- */
body.blog main{padding-block:40px 80px;gap:28px}
body.blog .rows,body.blog .ph,body.blog .body,body.blog .nf{font-size:15px}
.top{display:flex;justify-content:space-between;font-size:13px}
.top a{text-decoration:none}
.top span{display:flex;gap:16px;color:var(--dim)}
.top .on{text-decoration:underline;text-decoration-color:var(--fg)}
.px{margin:0}
.px pre{margin:0;font-family:var(--blk);font-size:9.5px;line-height:1;color:var(--fg);white-space:pre}
.pxt{margin:0;font-weight:400;font-size:inherit}
.pxh{margin:14px 0 2px}
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:7ch minmax(0,1fr);gap:16px;text-decoration:none;padding:2px 0}
.row .d{color:var(--dim);font-variant-numeric:tabular-nums}
.row:hover .tt{text-decoration:underline;text-decoration-color:var(--mark)}
.tape{margin:0;font-family:var(--blk);line-height:1;white-space:pre;overflow:hidden;background:var(--slab-bg);color:var(--slab-fg);user-select:none}
.tape.hero{font-size:8px;width:100%;box-sizing:border-box}
.ph{display:flex;flex-direction:column;gap:6px}
.ph h1{font-size:22px;line-height:1.3;text-wrap:balance}
.meta{color:var(--dim);font-size:13px}
.body{display:flex;flex-direction:column;gap:14px;min-width:0}
.body>*{margin:0}
.body h2{margin-top:10px;font-size:15px;font-weight:600;color:var(--fg)}
.body h3,.body h4{margin-top:6px;font-size:15px;font-weight:400;font-style:italic;color:var(--fg)}
.body ul,.body ol{display:block;padding-left:2.2ch}
.body ul{list-style:disc}
.body ul li,.body ol li{display:list-item;margin:2px 0}
.body li span{color:inherit}
.body li::marker{color:var(--dim)}
.body code{background:var(--ground);padding:1px 4px;font-size:.95em}
.body pre{background:var(--ground);padding:14px 16px;font-size:13px;line-height:1.55;overflow-x:auto;color:var(--fg)}
.body pre code{background:none;padding:0;font-size:inherit}
.body img{max-width:100%;height:auto}
.body table{border-collapse:collapse;display:block;overflow-x:auto}
.body th,.body td{border-bottom:1px solid var(--rule);padding:2px 12px 2px 0;text-align:left}
.body hr{border:0;border-top:1px solid var(--rule);width:100%}
blockquote{border-left:2px solid var(--fg);padding-left:16px;font-style:italic}
blockquote p{margin:0}
.body sup a,.body .footnote-reference a{text-decoration:none;color:var(--mark)}
.body .footnotes,.body .footnote-definition{font-size:12px;color:var(--dim)}
.body .footnotes-list{padding-left:2.2ch;font-size:12px;color:var(--dim)}
.body .footnotes-list p{display:inline;margin:0}
.body .footnotes-list li{margin:2px 0}
.body .footnote-definition{border-top:1px solid var(--rule);padding-top:10px;display:flex;gap:8px}
.body .footnote-definition p{margin:0}
.body .footnote-definition-label{color:var(--mark)}
.pf{font-size:13px}
.pf a{text-decoration:none}
.empty{color:var(--dim)}
.nf{display:flex;flex-direction:column;gap:6px}
/* syntax: restrained. bold keywords, orange strings, grey comments and numbers, italic types */
.z-code .z-keyword,.z-code .z-storage,.z-code .z-keyword.z-control{font-weight:600}
.z-code .z-entity.z-name.z-type,.z-code .z-support.z-type,.z-code .z-support.z-class,.z-code .z-entity.z-name.z-class,.z-code .z-entity.z-other.z-inherited-class{font-style:italic;font-weight:400}
.z-code .z-string,.z-code .z-string .z-punctuation{color:var(--mark)}
.z-code .z-comment,.z-code .z-comment .z-punctuation{color:var(--dim)}
.z-code .z-constant.z-numeric,.z-code .z-constant.z-language{color:var(--dim)}
.z-code .z-keyword.z-operator,.z-code .z-punctuation{font-weight:400}
@media (max-width:480px){.row{grid-template-columns:6ch minmax(0,1fr);gap:12px}.ph h1{font-size:20px}}