/* A fiction-specific TMV: the campaign's type, solar colors and signal motifs. */
:root{--reader-bg:#08070d;--reader-panel:#100d19;--reader-ink:#f8f5f0;--reader-dim:#bcb7c3;--reader-line:#353043;--reader-cyan:#43d9ff;--reader-pink:#ff4fd8;--reader-solar:#ff8a28;--reader-gold:#f4ca72}
html[data-theme=light]{--reader-bg:#f4eee7;--reader-panel:#fffaf4;--reader-ink:#241426;--reader-dim:#6f5a70;--reader-line:#d1bbc9;--reader-cyan:#006b89;--reader-pink:#a00080;--reader-solar:#ad4400;--reader-gold:#86601e}
body{background:var(--reader-bg);color:var(--reader-ink)}.cosmic-field{opacity:.45}html[data-theme=light] .cosmic-field{opacity:.06}.fiction-reader{max-width:1440px;margin:auto;padding:24px clamp(12px,3vw,48px) 42px}.book-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 24px}.eyebrow,.edition,.signal-label,.reader-note,.reading-note,.top-bezel,.bottom-bezel,.chapter-ticker,.visual-space>span{font-family:Inter,ui-sans-serif,system-ui,sans-serif}.eyebrow{text-decoration:none;text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--reader-cyan)}.book-header h1{font-family:Georgia,'Times New Roman',serif;font-weight:normal;font-size:clamp(36px,5vw,64px);line-height:1.05;margin:8px 0 0;max-width:none}.book-header em{font-weight:normal;color:var(--reader-pink)}.edition{font-size:12px;line-height:1.8;color:var(--reader-dim);text-align:right}.tmv{background:var(--reader-panel);border:1px solid var(--reader-line);box-shadow:0 22px 80px #0003;position:relative}.top-bezel{min-height:48px;border-bottom:1px solid var(--reader-line);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 16px;font-size:10px}.signal-label{letter-spacing:.1em;color:var(--reader-pink);white-space:nowrap}.chapter-picker{min-width:0;max-width:58%}.chapter-picker select{max-width:100%;text-overflow:ellipsis}.stage{display:grid;grid-template-columns:1fr;min-height:440px;height:min(58vh,660px);position:relative;overflow:hidden;background:radial-gradient(ellipse at 75% 30%,color-mix(in srgb,var(--reader-pink) 5%,transparent),transparent 60%)}.stage.has-visual{grid-template-columns:40% 60%}.reading-space{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;padding:clamp(22px,4vw,62px);position:relative}.passage{font:clamp(24px,2.5vw,38px)/1.5 Georgia,'Times New Roman',serif;margin:0;max-width:34ch;text-align:left;width:100%;text-wrap:pretty}.has-visual .passage{font-size:clamp(22px,2.1vw,31px)}.reading-note{position:absolute;bottom:18px;font-size:10px;color:var(--reader-dim);letter-spacing:.06em}.visual-space{position:relative;min-width:0;align-self:stretch;border-left:1px solid var(--reader-line);display:flex;align-items:center;justify-content:center;overflow:hidden}.visual-space[hidden],.share-panel[hidden]{display:none}.visual-space>canvas{width:100%;height:100%;object-fit:contain}.visual-space>span{position:absolute;bottom:12px;left:14px;font-size:10px;color:var(--reader-dim);max-width:70%}.device-link{position:absolute;right:10px;bottom:12px;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--reader-dim);font:9px system-ui;background:var(--reader-panel);padding:5px}.device-link canvas{width:68px;height:68px;image-rendering:pixelated}.bottom-bezel{padding:12px 16px;border-top:1px solid var(--reader-line);font-size:11px}.timeline{display:flex;align-items:center;gap:16px;margin-bottom:12px}.timeline input{width:100%;min-width:0;accent-color:var(--reader-pink)}output{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--reader-dim)}.controls{display:flex;justify-content:flex-end;align-items:center;gap:7px;flex-wrap:wrap}.controls #status{margin-right:auto;color:var(--reader-dim);font-size:10px;max-width:24ch}button,select,input{font:inherit}button,select{border:1px solid var(--reader-line);background:var(--reader-panel);color:var(--reader-ink);padding:8px 10px;border-radius:0;cursor:pointer}button:hover,select:hover{border-color:var(--reader-cyan)}button:disabled{opacity:.5;cursor:wait}.controls .play{border-color:var(--reader-pink);min-width:80px;color:var(--reader-pink)}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--reader-cyan);outline-offset:3px}.chapter-ticker{display:flex;border:1px solid var(--reader-line);border-top:0;font-size:11px;height:46px}.chapter-ticker>button{border:0;border-right:1px solid var(--reader-line);width:42px;flex-shrink:0}.ticker-window{overflow:hidden;display:flex;align-items:stretch;flex:1;mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}.ticker-track{display:flex;width:max-content;animation:chapters-travel var(--ticker-duration,400s) linear infinite}.ticker-track>div{display:flex;flex-shrink:0}.ticker-track button{border:0;background:transparent;white-space:nowrap;padding:8px 23px;color:var(--reader-dim);font-size:11px}.ticker-track button::before{content:'✦';color:var(--reader-pink);margin-right:22px}.ticker-track button[aria-current=true]{color:var(--reader-cyan)}.chapter-ticker:hover .ticker-track,.chapter-ticker:focus-within .ticker-track,.chapter-ticker.stopped .ticker-track{animation-play-state:paused}.reader-note{font-size:11px;color:var(--reader-dim);line-height:1.8;margin-top:16px}.reader-note a{color:var(--reader-cyan)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.share-panel{position:absolute;inset:0;background:var(--reader-panel);z-index:8;display:grid;place-items:center;padding:16px;overflow:auto}.share-panel>div{text-align:center;width:min(440px,100%)}.share-panel h2{font:36px Georgia;margin:8px 0 16px}.share-panel canvas{display:block;width:140px;height:140px;margin:12px auto}.share-panel label{display:block;font-size:11px;color:var(--reader-dim);margin:8px}.share-panel input{width:100%;background:var(--reader-bg);color:var(--reader-ink);padding:10px;border:1px solid var(--reader-line);font-size:12px}.share-actions{display:flex;justify-content:center;gap:10px;margin-top:16px}.share-panel p[role=status]{font-size:11px}.drawing-reader{max-width:1400px;margin:auto;padding:20px}.drawing-reader h1{font-size:26px;font-weight:normal;max-width:none}.drawing-reader canvas#grid{display:block;width:100%;height:calc(100svh - 245px);object-fit:contain;border:1px solid var(--reader-line);background:var(--reader-panel)}.drawing-controls{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:12px;margin:12px 0}.drawing-controls span{margin-right:auto;color:var(--reader-dim)}dialog{background:var(--reader-panel);color:var(--reader-ink);border:1px solid var(--reader-line);width:min(500px,92vw)}dialog::backdrop{background:#000a}dialog video{width:100%;max-height:300px}dialog input{width:100%;padding:10px;margin:10px 0}.scan-actions{display:flex;gap:10px}.drawing-note{font-size:11px;color:var(--reader-dim)}
.site-enclosure-footer{width:auto;max-width:none;margin:0;flex-direction:row;text-align:left;color:inherit}
@keyframes chapters-travel{to{transform:translateX(-50%)}}
#grid{image-rendering:pixelated;background:#08121c}
@media(max-width:760px){.fiction-reader{padding:16px 10px 30px}.book-header{margin-bottom:16px}.edition{font-size:10px}.top-bezel{padding:8px;gap:4px}.signal-label{max-width:38%;white-space:normal;font-size:9px}.chapter-picker{max-width:62%}.chapter-picker select{font-size:11px}.stage{min-height:390px;height:56svh;max-height:650px}.stage.has-visual{grid-template-columns:1fr;grid-template-rows:42% 58%}.reading-space{padding:20px 24px}.passage,.has-visual .passage{font-size:23px;line-height:1.42}.reading-note{bottom:5px;font-size:9px}.visual-space{border-left:0;border-top:1px solid var(--reader-line)}.device-link canvas{width:48px;height:48px}.device-link{font-size:8px;bottom:3px;right:4px}.bottom-bezel{padding:10px 8px}.controls{gap:5px}.controls button,.controls select{padding:8px;font-size:11px}.controls #status{flex-basis:100%;max-width:none}.timeline{gap:8px}output{font-size:9px}.reader-note{font-size:10px}.share-panel h2{font-size:28px}.share-panel canvas{width:110px;height:110px}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none;transform:none}.ticker-window{overflow-x:auto;mask-image:none}.cosmic-field *,.cosmic-field::before{animation:none!important}}
@media(max-width:760px){.stage{height:clamp(360px,calc(100svh - 430px),520px);min-height:360px}.has-visual .passage{font-size:21px}.reading-space{padding:16px 24px}.site-enclosure-footer{flex-direction:row;align-items:center}}
