
*{box-sizing:border-box}body{margin:0;background:#10171d;color:#dfe5e7;font-family:Inter,Arial,sans-serif}button,select,input{font:inherit}button,select{cursor:pointer}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #cce4d9;outline-offset:3px}button:disabled{opacity:.35;cursor:default}button{color:inherit}button[aria-pressed=true]{font-weight:600}button{touch-action:manipulation}.studio-header{min-height:74px;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #2c353d}.identity{display:flex;gap:18px;align-items:center}.identity strong{font-family:Georgia,serif;font-size:23px;letter-spacing:.2em;font-weight:400}.identity span{font-size:12px;color:#a8b4bc}.outer-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.mode-switch{display:flex;padding:3px;border:1px solid #45505b;border-radius:6px}.mode-switch button{border:0;background:transparent;color:#b8c2ca;border-radius:3px;padding:7px 13px;font-size:12px}.mode-switch button[aria-pressed=true]{background:#e2e8df;color:#1e3028}.font-control{display:flex;gap:7px;align-items:center;color:#b8c2ca;font-size:12px}.font-control select,.mobile-design select{background:#19242d;color:#e4e9ea;border:1px solid #46525e;border-radius:4px;padding:7px;max-width:175px}.type-size{display:flex;align-items:center;gap:9px}.type-size button{border:1px solid #46525e;border-radius:4px;background:#19242d;width:29px;height:30px;font-size:14px}.type-size output{font-size:11px;min-width:32px;text-align:center;color:#b8c2ca}.workspace-outer{display:grid;grid-template-columns:180px minmax(0,1fr);gap:0;min-height:calc(100svh - 74px)}.design-rail{border-right:1px solid #2c353d;padding:22px 12px}.rail-label{font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#9baab5;margin:0 12px 18px}.design-choice{display:flex;width:100%;align-items:flex-start;gap:10px;text-align:left;padding:13px 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:#c5cdd3;margin-bottom:5px}.choice-number{font-family:'Spline Sans Mono',monospace;color:#758894;font-size:10px;padding-top:3px}.design-choice strong{font-size:12px;font-weight:500;display:block;line-height:1.4}.design-choice small{display:block;font-size:10px;color:#9aaab4;margin-top:5px;line-height:1.4}.design-choice:hover{background:#1b2730}.design-choice[aria-pressed=true]{background:#24332f;border-color:#466051;color:#edf4e9}.design-choice[aria-pressed=true] .choice-number{color:#b1d4b7}.rail-foot{font-size:10px;color:#93a4ae;line-height:1.7;margin:22px 12px 0}.viewer{padding:16px 16px 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.stage{position:relative;aspect-ratio:1672/941;width:min(100%,calc((100svh - 150px)*1.77683));isolation:isolate}.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.scene[hidden]{display:none}.study-caption{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;max-width:1220px;min-height:56px;padding:9px 3px;font-size:11px;line-height:1.7;color:#a9b8bf}.study-caption strong{font-size:12px;font-weight:500;color:#e2e7e6}.study-caption span{display:block}.caption-right{text-align:right}.mobile-design{display:none}
/* Every reading surface lives inside the illustrated lightfield. */
.display{position:absolute;left:4.7%;top:4%;width:75.9%;height:72.1%;overflow:hidden;border-radius:4px;background:var(--surface);color:var(--ink);display:grid;grid-template-rows:41px minmax(0,1fr) 29px;--progress:0%;font-family:var(--body-font),monospace;container-type:inline-size}.display button{border:1px solid var(--line);background:transparent;border-radius:4px;padding:5px 8px;color:var(--ink);font-size:11px;line-height:1.4}.display button:hover{background:var(--panel)}.display button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.display button[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.display-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 14px;border-bottom:1px solid var(--line);font-family:'Spline Sans Mono',monospace;font-size:10px;min-width:0}.window-title{display:flex;align-items:center;gap:8px;white-space:nowrap}.status-dot{width:6px;height:6px;background:var(--accent);border-radius:50%}.display-actions{display:flex;gap:6px;align-items:center}.display-actions button{font-size:10px}.display-actions kbd{font-size:9px;color:var(--muted);margin-left:6px}.inner-workspace{display:grid;grid-template-columns:126px minmax(0,1fr);min-height:0}.inside-sidebar{padding:18px 9px;border-right:1px solid var(--line);min-width:0;overflow:auto;font-family:'Spline Sans Mono',monospace;scrollbar-width:thin;scrollbar-color:var(--line) transparent}.pane-heading{font:10px 'Spline Sans Mono',monospace;letter-spacing:.04em;color:var(--muted);margin:0 6px 12px}.contents{display:flex;flex-direction:column;gap:6px}.contents button{display:flex;align-items:baseline;gap:7px;text-align:left;font-size:10px;line-height:1.6;border:0;padding:7px 5px}.section-number{color:var(--accent);font-family:'Spline Sans Mono',monospace;font-size:10px}.contents button[aria-current=true]{background:var(--panel);color:var(--accent)}.contents button[aria-current=true] .section-number{font-weight:600}.side-note{margin:18px 5px 0;padding-top:12px;border-top:1px solid var(--line);font-size:10px;line-height:1.7;color:var(--muted)}.side-note strong{color:var(--accent);font-size:12px;font-weight:500}.mini-meter{height:4px;background:var(--line);margin-top:9px}.mini-meter::after{content:'';display:block;width:var(--progress);height:100%;background:var(--accent)}.reading-pane{overflow:auto;overscroll-behavior:contain;min-width:0;scrollbar-width:thin;scrollbar-color:var(--line) transparent;padding:25px 27px 38px;outline-offset:-3px;line-height:1.7;font-size:var(--body-size);font-family:var(--body-font),monospace}.reading-pane:focus-visible{outline:1px solid var(--accent)}.reading-pane article{max-width:58ch;margin:0 auto}.reading-pane .eyebrow{font:10px 'Spline Sans Mono',monospace;letter-spacing:.08em;color:var(--accent);margin:0 0 15px;text-transform:uppercase}.reading-pane h1{font-family:var(--heading-font),monospace;font-size:clamp(25px,4cqw,39px);line-height:1.2;font-weight:500;letter-spacing:-.035em;margin:0 0 17px;text-wrap:balance}.reading-pane h2{font-family:var(--heading-font),monospace;font-size:1.23em;font-weight:500;line-height:1.4;margin:1.8em 0 .8em;color:var(--accent)}.reading-pane p{margin:0 0 1.2em}.reading-pane .intro{font-size:1.04em}.reading-pane section{scroll-margin-top:24px}.reading-pane .byline{font:10px 'Spline Sans Mono',monospace;color:var(--muted);padding:12px 0;margin:0 0 21px;border-block:1px solid var(--line)}.reading-pane .end-note{font:11px 'Spline Sans Mono',monospace;color:var(--muted);border-top:1px solid var(--line);padding-top:18px;margin-top:30px}.display-footer{display:flex;gap:12px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding:0 13px;font:10px 'Spline Sans Mono',monospace;color:var(--muted)}.display-footer button{padding:2px 0;border:0;color:var(--accent);font-size:10px}.display-footer progress{width:55px;height:4px;accent-color:var(--accent);border:0}.progress-group{display:flex;align-items:center;gap:8px}.reading-focus .inner-workspace{grid-template-columns:minmax(0,1fr)!important}.reading-focus .inside-sidebar{display:none!important}.reading-focus .reading-pane{margin-inline:10px!important}.reading-focus .reading-pane article{max-width:60ch}.terminal-prefix{display:none}
/* btop: real bordered panes with labels that sit in their borders. */
[data-design=btop] .inner-workspace{grid-template-columns:minmax(0,1fr) 136px;padding:15px 10px 10px;gap:10px}[data-design=btop] .inside-sidebar{order:2;border:1px solid var(--line);border-radius:7px;padding:13px 8px;position:relative;background:var(--panel)}[data-design=btop] .pane-heading{color:var(--accent)}[data-design=btop] .reading-pane{border:1px solid var(--line);border-radius:7px;padding:20px;background:var(--surface)}[data-design=btop] .contents button:nth-child(2){color:#7cafd1}[data-design=btop][data-mode=light] .contents button:nth-child(2){color:#22658e}[data-design=btop] .contents button:nth-child(3){color:#dba4d7}[data-design=btop][data-mode=light] .contents button:nth-child(3){color:#8c4988}[data-design=btop] .display-header{border:0;padding-top:4px}[data-design=btop] .reading-pane h1{font-size:clamp(24px,3.5cqw,32px);letter-spacing:-.055em}[data-design=btop] .reading-pane .byline{border-style:dashed}
/* Solarized: colour is reserved for navigation and editorial hierarchy. */
[data-design=solarized] .reading-pane h1{font-weight:400;letter-spacing:-.06em}[data-design=solarized] .inside-sidebar{background:var(--panel)}[data-design=solarized] .contents button:nth-child(2) .section-number{color:#268bd2}[data-design=solarized] .contents button:nth-child(3) .section-number{color:#b45b93}[data-design=solarized] .contents button:nth-child(4) .section-number{color:#9c8422}[data-design=solarized] .reading-pane .eyebrow{color:var(--muted)}[data-design=solarized] .display-header{border-bottom:3px solid var(--panel)}
/* Paper terminal: one unboxed, carefully typeset page, no internal glow. */
[data-design=paper] .inner-workspace{grid-template-columns:1fr}[data-design=paper] .inside-sidebar{display:none}[data-design=paper] .reading-pane{padding:27px 42px}[data-design=paper] .reading-pane article{max-width:57ch}[data-design=paper] .reading-pane h1{font-size:clamp(29px,4.4cqw,40px);font-weight:700;letter-spacing:-.05em}[data-design=paper] .display-header,[data-design=paper] .display-footer{font-family:'Courier Prime',monospace}[data-design=paper] .display button{border-radius:0}[data-design=paper] .byline{border-block-style:dashed}[data-design=paper] .status-dot{border:1px solid var(--ink);background:transparent;border-radius:0}
/* Cassette: inverse video chrome; paragraphs remain sentence case. */
[data-design=cassette] .display-header{background:var(--accent);color:var(--surface);font-weight:600;letter-spacing:.07em;text-transform:uppercase}[data-design=cassette] .display-header button{color:var(--surface);border-color:var(--surface);border-radius:0;text-transform:uppercase;font-weight:600}[data-design=cassette] .display-header kbd{color:var(--surface)}[data-design=cassette] .status-dot{background:var(--surface);border-radius:0}[data-design=cassette] .inside-sidebar{background:var(--panel);padding:16px 7px}[data-design=cassette] .pane-heading{text-transform:uppercase;color:var(--accent);font-weight:600;border-bottom:2px solid var(--line);padding-bottom:8px}[data-design=cassette] .contents button{text-transform:uppercase;border-bottom:1px dotted var(--line);border-radius:0;font-weight:500}[data-design=cassette] .reading-pane h1{text-transform:uppercase;font-weight:600;letter-spacing:.03em;font-size:clamp(23px,3.4cqw,32px)}[data-design=cassette] .byline{border-block:2px solid var(--line);text-transform:uppercase}[data-design=cassette] .display-footer{background:var(--panel);text-transform:uppercase}
/* Amber phosphor: spare one-colour terminal with horizontal top navigation. */
[data-design=amber] .inner-workspace{grid-template-columns:1fr;grid-template-rows:38px minmax(0,1fr)}[data-design=amber] .inside-sidebar{border:0;border-bottom:1px solid var(--line);padding:3px 16px;overflow:hidden}[data-design=amber] .pane-heading,[data-design=amber] .side-note{display:none}[data-design=amber] .contents{flex-direction:row;justify-content:space-between;gap:3px}[data-design=amber] .contents button{padding:6px 5px;font-size:9px}[data-design=amber] .contents button span:last-child{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-design=amber] .reading-pane{padding:22px 35px}[data-design=amber] .reading-pane h1{font-size:clamp(25px,3.8cqw,36px);letter-spacing:-.05em}[data-design=amber] .display button{border-radius:0}[data-design=amber] .reading-pane .eyebrow::before{content:'> ';font-weight:700}[data-design=amber] .display-footer{border-top-style:dashed}
/* CRT: the raster character lives in headings and trim, never over paragraphs. */
[data-design=crt] .inner-workspace{grid-template-columns:1fr;padding:10px}[data-design=crt] .inside-sidebar{display:none}[data-design=crt] .reading-pane{border:1px solid var(--line);padding:21px 30px}[data-design=crt] .reading-pane h1{font-size:clamp(36px,6cqw,53px);letter-spacing:.015em;line-height:1;font-weight:400;color:var(--accent)}[data-design=crt] .reading-pane h2{font-size:1.8em;font-weight:400;letter-spacing:.02em}[data-design=crt] .display-header{font-family:'VT323',monospace;font-size:19px;border-bottom:3px double var(--line)}[data-design=crt] .display-footer{border-top:3px double var(--line)}[data-design=crt] .window-title{text-transform:uppercase}[data-design=crt] .status-dot{border-radius:0;width:8px;height:8px}[data-design=crt] .reading-pane .eyebrow::before{content:'[ CHUN / TEXT MODE ] ';display:block;margin-bottom:8px}
/* Railway: violet console, fine borders, and a single soft status light. */
[data-design=railway] .inside-sidebar{background:var(--panel)}[data-design=railway] .inner-workspace{grid-template-columns:132px minmax(0,1fr)}[data-design=railway] .reading-pane{margin:11px;border:1px solid var(--line);border-radius:8px;padding:22px;background:var(--surface)}[data-design=railway] .status-dot{box-shadow:0 0 8px var(--accent)}[data-design=railway] .display-header{background:var(--panel)}[data-design=railway] .reading-pane h1{font-weight:600;letter-spacing:-.04em}[data-design=railway] .contents button[aria-current=true]{box-shadow:inset 2px 0 var(--accent);background:var(--surface)}[data-design=railway] .reading-pane .eyebrow{font-size:9px}[data-design=railway] .byline{border-top:0}
/* Terminal: file index and shell prompt, without dashboard decoration. */
[data-design=terminal] .display button{border:0;border-radius:0}[data-design=terminal] .inner-workspace{grid-template-columns:128px minmax(0,1fr)}[data-design=terminal] .inside-sidebar{border-right:1px dashed var(--line)}[data-design=terminal] .pane-heading::before{content:'~/ ';color:var(--accent)}[data-design=terminal] .contents button{border-radius:0;padding:7px 3px}[data-design=terminal] .contents button span:last-child{font-family:'JetBrains Mono',monospace;font-size:10px}[data-design=terminal] .contents button[aria-current=true]::after{content:'*';color:var(--accent)}[data-design=terminal] .reading-pane h1{font-weight:500;font-size:clamp(24px,3.7cqw,34px);letter-spacing:-.055em}[data-design=terminal] .terminal-prefix{display:inline;color:var(--accent)}[data-design=terminal] .reading-pane h2::before{content:'## ';color:var(--muted)}[data-design=terminal] .display-footer{background:var(--panel);color:var(--accent)}
dialog{border:1px solid #697a74;border-radius:10px;padding:22px;background:#17251f;color:#edf2e8;width:min(460px,90vw);box-shadow:0 18px 80px #0008;font-family:Inter,sans-serif}dialog::backdrop{background:#09110dcc;backdrop-filter:blur(6px)}.dialog-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.dialog-title h2{font-size:18px;margin:0;font-weight:500}.dialog-title button{background:transparent;border:1px solid #63756a;color:#e3ebe0;border-radius:4px;padding:5px 9px}dialog input{background:#0c1912;color:#edf2e8;border:1px solid #63756a;border-radius:5px;padding:12px;width:100%}#section-results{display:grid;gap:8px;margin-top:16px}#section-results button{display:flex;gap:14px;text-align:left;background:transparent;color:#e6eee2;border:1px solid #415b4a;border-radius:4px;padding:13px}#section-results button[hidden]{display:none}
@media(max-width:1150px){.workspace-outer{grid-template-columns:146px minmax(0,1fr)}.design-rail{padding:18px 7px}.design-choice{padding:11px 8px;gap:7px}.design-choice small{font-size:9px}.viewer{padding:12px 10px 0}.identity span{display:none}.font-control select{max-width:135px}.display-header{padding-inline:10px}.display-actions kbd{display:none}.inner-workspace,[data-design=railway] .inner-workspace,[data-design=terminal] .inner-workspace{grid-template-columns:105px minmax(0,1fr)}[data-design=btop] .inner-workspace{grid-template-columns:minmax(0,1fr) 115px}.reading-pane{padding:20px}.reading-pane .byline{font-size:9px}}
@media(max-width:850px){.studio-header{padding:12px 16px;flex-wrap:wrap}.identity{gap:12px}.outer-controls{gap:9px}.workspace-outer{display:block}.design-rail{display:none}.mobile-design{display:flex;align-items:center;gap:7px;font-size:12px}.mobile-design select{max-width:160px}.viewer{padding:10px 8px}.stage{width:100%}.inner-workspace,[data-design=railway] .inner-workspace,[data-design=terminal] .inner-workspace,[data-design=btop] .inner-workspace{grid-template-columns:1fr}.inside-sidebar{display:none!important}.display-header{font-size:9px}.display-actions button{font-size:9px}.study-caption{font-size:10px}.display-footer{font-size:9px}.display-footer progress{width:35px}[data-design=amber] .inner-workspace{grid-template-rows:1fr}}
@media(max-width:580px){.stage{aspect-ratio:auto;min-height:calc(100svh - 196px);width:100%}.scene{object-fit:cover;object-position:58% center}.display{left:3%;top:3%;width:94%;height:90%;border:1px solid #fce7b8;box-shadow:0 0 7px #fce7b866}.studio-header{gap:12px}.identity strong{font-size:19px}.outer-controls{width:100%;justify-content:space-between}.mode-switch button{padding:6px 10px}.font-control{gap:5px}.font-control select{max-width:117px;font-size:11px}.type-size{gap:5px}.type-size button{width:25px}.reading-pane,[data-design] .reading-pane{padding:20px 19px}.reading-pane h1,[data-design] .reading-pane h1{font-size:28px}[data-design=crt] .reading-pane h1{font-size:40px}.reading-pane .eyebrow{font-size:9px}.caption-right{display:none}.study-caption{padding-inline:8px;min-height:50px}.display-header{padding:0 9px;gap:4px}.display-actions{gap:3px}.display-actions button{padding:5px}.window-title{gap:4px}.display-header .status-dot{display:none}.display-footer{padding-inline:8px;gap:6px}.display-footer progress{display:none}}
.design-rail{padding-top:16px;padding-bottom:14px}.design-choice{padding-block:9px}.design-choice small{margin-top:3px}.rail-foot{margin-top:15px}[data-design=btop] .reading-pane .byline{border-inline:0;border-block-style:dashed}
.reading-focus [data-design=amber] .inner-workspace{grid-template-rows:minmax(0,1fr)}
[data-design=solarized][data-mode=light] .contents button:nth-child(2) .section-number{color:#12658f}[data-design=solarized][data-mode=light] .contents button:nth-child(3) .section-number{color:#934578}[data-design=solarized][data-mode=light] .contents button:nth-child(4) .section-number{color:#756019}
[data-design=solarized][data-mode=dark] .contents button:nth-child(2) .section-number{color:#6db1db}[data-design=solarized][data-mode=dark] .contents button:nth-child(3) .section-number{color:#d488b5}[data-design=solarized][data-mode=dark] .contents button:nth-child(4) .section-number{color:#d3b45b}
[data-design=cassette] .display-header button:hover,[data-design=cassette] .display-header button[aria-pressed=true]{background:var(--surface);color:var(--accent)}
/* Transistor reference: ornamental perimeter, editorial hierarchy, quiet prose. */
.subject-identity{display:none}
[data-design=transistor]{border:1px solid var(--accent);border-radius:2px;box-shadow:inset 0 0 0 4px var(--surface),inset 0 0 0 5px var(--line)}
[data-design=transistor][data-mode=dark]{box-shadow:inset 0 0 0 4px var(--surface),inset 0 0 0 5px var(--line),0 0 12px #84e6b430}
[data-design=transistor]::after{content:'';position:absolute;inset:7px;pointer-events:none;border:1px solid var(--line);clip-path:polygon(0 0,28px 0,28px 2px,2px 2px,2px 28px,0 28px,0 0,100% 0,100% 28px,calc(100% - 2px) 28px,calc(100% - 2px) 2px,calc(100% - 28px) 2px,calc(100% - 28px) 0,100% 0,100% 100%,calc(100% - 28px) 100%,calc(100% - 28px) calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) calc(100% - 28px),100% calc(100% - 28px),100% 100%,0 100%,0 calc(100% - 28px),2px calc(100% - 28px),2px calc(100% - 2px),28px calc(100% - 2px),28px 100%,0 100%)}
[data-design=transistor] .display-header{margin:0 10px;padding:0 8px;border-bottom:1px solid var(--accent);color:var(--accent)}
[data-design=transistor] .display-actions button{border-radius:0;border-color:transparent}
[data-design=transistor] .status-dot{border-radius:0;transform:rotate(45deg);width:7px;height:7px}
[data-design=transistor] .inner-workspace{grid-template-columns:154px minmax(0,1fr);padding:10px 10px 0}
[data-design=transistor] .inside-sidebar{padding:14px 10px;border-right:1px solid var(--line);background:linear-gradient(180deg,var(--panel),var(--surface));position:relative}
[data-design=transistor] .subject-identity{display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;margin:0 0 20px;color:var(--accent)}
.subject-identity svg{width:65px;height:65px;stroke:currentColor;fill:none;stroke-width:1}
.subject-identity strong{font:400 18px Inter,sans-serif;letter-spacing:.25em;padding-left:.25em}
.subject-identity small{font:9px 'Spline Sans Mono',monospace;letter-spacing:.1em;color:var(--muted)}
[data-design=transistor] .pane-heading{font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:var(--accent)}
[data-design=transistor] .contents button{border-radius:0;font-family:Inter,sans-serif;font-size:11px;padding:8px 6px}
[data-design=transistor] .contents button[aria-current=true]{box-shadow:inset 2px 0 var(--accent);background:var(--panel)}
[data-design=transistor] .reading-pane{padding:21px 29px 35px;background:var(--surface);line-height:1.7}
[data-design=transistor] .reading-pane h1{font-weight:400;letter-spacing:-.045em;font-size:clamp(28px,4.7cqw,45px);line-height:1.15;color:var(--ink)}
[data-design=transistor] .reading-pane h2{font:400 1.3em Inter,sans-serif;letter-spacing:.02em;color:var(--accent)}
[data-design=transistor] .reading-pane .eyebrow{font-size:9px;letter-spacing:.12em;margin-bottom:14px}
[data-design=transistor] .reading-pane .byline{border-top:0;border-bottom:1px solid var(--line);padding-top:0;font-size:9px}
[data-design=transistor] .display-footer{margin:0 10px;border-top-color:var(--accent);padding:0 8px}
.design-choice{padding-block:7px}.rail-label{margin-bottom:12px}.rail-foot{margin-top:10px}
@media(max-width:1150px){[data-design=transistor] .inner-workspace{grid-template-columns:120px minmax(0,1fr)}[data-design=transistor] .reading-pane{padding:19px 22px}.subject-identity svg{width:48px;height:48px}}
@media(max-width:850px){[data-design=transistor] .inner-workspace{grid-template-columns:1fr}}
@media(max-width:580px){[data-design=transistor] .reading-pane{padding:17px 15px}[data-design=transistor] .reading-pane h1{font-size:30px}}
/* Transistor: local screen controls, city information and emitter light. */
.transistor-only{display:none!important}
[data-design=transistor] .transistor-only{display:flex!important}
[data-design=transistor]{grid-template-rows:41px 31px minmax(0,1fr) 29px}
[data-design=transistor] #screen-mode{align-items:center;gap:5px;border:1px solid var(--line);padding-inline:10px;color:var(--accent)}
.city-status{align-items:center;gap:15px;margin:0 18px;border-bottom:1px solid var(--line);font:10px 'Spline Sans Mono',monospace;color:var(--muted);white-space:nowrap}
.city-name{color:var(--accent);letter-spacing:.13em}.city-status time{font-variant-numeric:tabular-nums}
.city-status a{margin-left:auto;color:var(--ink);text-decoration:none}.city-status a:hover{text-decoration:underline}.city-status a:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
[data-design=transistor] .reading-pane{container-type:inline-size}
[data-design=transistor] .reading-pane h1{white-space:nowrap;text-wrap:nowrap;font-size:clamp(16px,6.4cqw,38px);letter-spacing:-.045em;line-height:1.2}
.projector-shimmer{display:none;position:absolute;left:4.7%;top:75%;width:75.9%;height:15%;pointer-events:none;overflow:hidden;mix-blend-mode:screen;--light-rgb:255 213 140}
.transistor-active .projector-shimmer{display:block}.transistor-active .stage{overflow:hidden}[data-design=transistor]{z-index:1}
.projector-shimmer::before,.projector-shimmer::after,.projector-ribbon{content:'';position:absolute;inset:0;clip-path:polygon(0 0,100% 0,80% 92%,23% 92%);mask-image:linear-gradient(transparent 0%,#0009 12%,#000 70%,transparent 98%)}
.projector-shimmer::before{background:linear-gradient(0deg,rgb(var(--light-rgb) / .58),rgb(var(--light-rgb) / .08)),radial-gradient(ellipse at 50% 90%,rgb(var(--light-rgb) / .65),transparent 70%);filter:blur(3px);animation:projector-field 4.2s ease-in-out -1s infinite alternate}
.projector-shimmer::after{background:repeating-conic-gradient(from 251deg at 50% 115%,transparent 0deg 5deg,rgb(var(--light-rgb) / .55) 6deg,transparent 8deg 14deg);background-size:125% 140%;filter:blur(1.5px);animation:projector-rays 6.4s ease-in-out -3s infinite alternate}
.projector-ribbon{background:repeating-linear-gradient(110deg,transparent 0% 12%,rgb(var(--light-rgb) / .65) 17%,transparent 22% 38%);background-size:190% 100%;filter:blur(5px);animation:projector-flow 7s linear -2s infinite}
.projector-emitter{position:absolute;left:23.4%;top:84%;width:56.1%;height:11%;border-radius:50%;background:linear-gradient(90deg,rgb(var(--light-rgb) / .3),#fffce6,rgb(var(--light-rgb) / .6),#fffce6,rgb(var(--light-rgb) / .3));background-size:200% 100%;box-shadow:0 0 13px 3px rgb(var(--light-rgb) / .65);filter:blur(1px);animation:projector-emission 3.8s ease-in-out -1s infinite alternate}
@keyframes projector-field{0%{opacity:.25}100%{opacity:.72}}
@keyframes projector-rays{0%{background-position:0% 0%;opacity:.45}100%{background-position:100% 40%;opacity:.85}}
@keyframes projector-flow{0%{background-position:190% 0;opacity:.5}50%{opacity:.8}100%{background-position:0% 0;opacity:.5}}
@keyframes projector-emission{0%{background-position:0% 0;opacity:.4}100%{background-position:100% 0;opacity:.95}}
[data-design=transistor] #find-section,[data-design=transistor] #bookmark,[data-design=transistor] #focus-toggle,[data-design=transistor] .side-note{display:none}
@media(max-width:850px){.city-status{gap:10px;font-size:9px}}
@media(max-width:580px){[data-design=transistor]{grid-template-rows:41px 49px minmax(0,1fr) 29px}[data-design=transistor] .city-status{display:grid!important;grid-template-columns:auto 1fr auto;gap:3px 8px;padding:5px 0;margin-inline:16px}.city-status a{grid-column:2 / 4;grid-row:2;margin-left:0}.city-name{grid-row:1 / 3}.transistor-active .projector-shimmer{display:block!important}[data-design=transistor]{height:78%}[data-design=transistor] .display-header .window-title{font-size:8px}[data-design=transistor] #screen-mode{padding-inline:5px}}
@media(prefers-reduced-motion:reduce){.projector-shimmer::before,.projector-shimmer::after,.projector-shimmer span{animation:none;opacity:0}}
.projector-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.86}
.projector-canvas canvas{display:block;width:100%;height:100%}
.digital-ready::before,.digital-ready::after,.digital-ready .projector-ribbon,.digital-ready .projector-emitter{display:none;animation:none}
.projector-shimmer:not(.digital-ready)::before{display:none}
.projector-shimmer:not(.digital-ready)::after{background:repeating-linear-gradient(90deg,transparent 0 13px,#fff0a88c 13px 14px,transparent 14px 27px);filter:none;animation:projector-flow 8s linear infinite}
.projector-shimmer:not(.digital-ready) .projector-ribbon{background:repeating-linear-gradient(0deg,transparent 0 7px,#fff0a888 7px 10px,transparent 10px 19px);mask-image:repeating-linear-gradient(90deg,transparent 0 12px,#000 12px 18px,transparent 18px 27px);filter:none;background-size:100% 200%;animation:projector-packets 5s linear infinite}
@keyframes projector-packets{from{background-position:0 100%}to{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.projector-canvas{display:none}}
/* An opaque reading surface; projection detail stays on the frame. */
[data-design=transistor]{background:var(--surface);backdrop-filter:none}
[data-design=transistor] .reading-pane{background:transparent}
.screen-signal{display:none;position:absolute;inset:0;pointer-events:none;z-index:3}
[data-design=transistor] .screen-signal{display:block}
.screen-signal::before,.screen-signal::after{content:'';position:absolute;left:10px;right:10px;height:2px;background:linear-gradient(90deg,transparent 5%,var(--accent) 24%,transparent 26% 61%,var(--accent) 66%,transparent 88%);opacity:0;animation:projection-contact 19s linear -7s infinite}
.screen-signal::before{top:3px}
.screen-signal::after{bottom:3px;animation-duration:23s;animation-delay:-14s;background:linear-gradient(90deg,transparent 12%,var(--accent) 43%,transparent 46% 74%,var(--accent) 77%,transparent 92%)}
@keyframes projection-contact{0%,88%,89.1%,90%,100%{opacity:0;transform:translateX(0)}88.15%,88.5%{opacity:.30;transform:translateX(2px)}88.65%,88.9%{opacity:.12;transform:translateX(-1px)}89.3%,89.65%{opacity:.24;transform:translateX(1px)}}
@media(prefers-reduced-motion:reduce){.screen-signal{display:none!important}}

/* Published reader: the room fills the view; all controls belong to the display. */
body{background:#17130e}.stage{width:min(100vw,177.68331562svh);margin:auto;aspect-ratio:1672/941}.room-page{min-height:100svh;display:grid;place-items:center}.display{--heading-font:'Inter';--body-font:'Atkinson Hyperlegible';--body-size:18px;--surface:#0b1513;--ink:#dbe3dc;--muted:#a0b5a8;--accent:#84e6b4;--panel:#11211c;--line:#355d4d}.display a{color:var(--accent);text-underline-offset:4px}.display .home-link{font:10px 'Spline Sans Mono',monospace;text-decoration:none;border:1px solid var(--line);padding:5px 8px}.display a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.work-links{display:flex;flex-wrap:wrap;gap:10px 22px;padding:0 0 20px;margin-bottom:20px;border-bottom:1px solid var(--line);font:14px 'Inter',sans-serif}.work-links a{display:inline-block;padding-block:7px}.reading-pane{scrollbar-gutter:stable}.display .inside-sidebar>a{display:block;font:11px 'Spline Sans Mono',monospace;margin:16px 6px}.display .inside-sidebar>a:first-of-type{margin-top:25px}.display-header a,.display-header button{min-height:30px;display:inline-flex;align-items:center}.display-header .window-title{min-width:0}.display-header .status-dot{flex-shrink:0}@media(max-width:580px){.stage{width:100%;height:100svh;min-height:600px;aspect-ratio:auto}.display{left:3%;width:94%;top:3%}[data-design=transistor] .reading-pane h1{font-size:clamp(15px,6.4cqw,30px)}.display-header .window-title{font-size:8px}.display .home-link{font-size:9px;padding:5px}.work-links{gap:10px 18px}}@media(max-height:480px) and (min-width:581px){.stage{width:100%;height:100svh;aspect-ratio:auto}.scene{object-fit:cover}.display{left:3%;width:85%;top:3%;height:94%}.projector-shimmer{display:none!important}}
/* The room fits intact; the reader is sized independently of the painting. */
.room-page{position:relative;isolation:isolate;overflow:hidden;min-width:0;background:#241a12}
.room-page::before{display:none}
.room-page .stage{width:100%;height:100svh;min-height:0;max-width:none;aspect-ratio:auto;margin:0;background:linear-gradient(0deg,#583b23 0%,#583b23 8%,#352519 8.1%,#201810 22%,#241a12 70%)}
.room-page .scene{object-fit:contain;object-position:right bottom}
.room-page .display{left:var(--reader-left,3vw);top:clamp(12px,3svh,40px);width:min(70vw,1400px);height:76svh;max-width:calc(100% - 24px)}
.room-painting{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.room-painted .scene{visibility:hidden}
.room-page .projector-shimmer{display:block!important}
@media(max-width:1000px){.room-page .display{width:82vw}}
@media(max-width:580px){.room-page .display{left:12px;top:12px;width:calc(100% - 24px);height:76svh}}
@media(max-height:480px){
 .room-page .display{top:8px;height:75svh;grid-template-rows:32px 25px minmax(0,1fr) 25px}
 .room-page .inside-sidebar{display:none!important}
 .room-page .inner-workspace{grid-template-columns:1fr;padding-top:3px}
 .room-page .reading-pane{padding:10px 16px}
 .room-page .city-status{font-size:8px;gap:8px}
}

/* Slightly larger city metadata without reducing article space. */
.room-page .city-status{font-size:12px;gap:14px}
.projector-canvas{opacity:.96}
@media(max-width:850px){.room-page .city-status{font-size:11px;gap:8px}}
@media(max-width:580px){.room-page .city-status{font-size:10px;gap:3px 8px}}
@media(max-height:480px){.room-page .city-status{font-size:10px}}

.window-motion{position:absolute;z-index:1;pointer-events:none}
.window-motion[hidden]{display:none}

/* Comfortable production reading sizes in both palettes. */
.room-page .display{--body-size:20px;grid-template-rows:44px 36px minmax(0,1fr) 32px}
.room-page .display-header,.room-page .display-actions button,.room-page .display .home-link{font-size:12px}
.room-page .display .contents button,.room-page .display .inside-sidebar>a{font-size:13px}
.room-page .subject-identity small,.room-page .display .pane-heading,.room-page .section-number{font-size:11px}
.room-page .display .reading-pane .eyebrow,.room-page .display .reading-pane .byline{font-size:11px}
.room-page .display-footer,.room-page .display-footer button,.room-page .reading-pane .end-note{font-size:12px}
.room-page .work-links{font-size:16px}
.room-page .city-status{font-size:13px}
@media(max-width:1000px){.room-page .city-status{font-size:11px;gap:8px}}
@media(max-width:580px){
 .room-page .display{--body-size:19px;grid-template-rows:44px 52px minmax(0,1fr) 32px}
 .room-page .display-header .window-title{font-size:9px}
 .room-page .display-actions button,.room-page .display .home-link{font-size:11px}
 .room-page .city-status{font-size:11px;gap:3px 8px}
 .room-page .display .reading-pane .eyebrow{font-size:10px;letter-spacing:.03em}
}
@media(max-height:480px){.room-page .display{grid-template-rows:36px 30px minmax(0,1fr) 28px}.room-page .city-status{font-size:11px}}
