:root{color-scheme:dark;--bg:#121011;--text:#eee5d7;--muted:#b7aaa0;--line:#342b2b;--accent:#ba6260;--serif:Georgia,'Times New Roman',serif}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}body{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,main:focus-visible{outline:2px solid #e8bca5;outline-offset:5px}svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}[hidden]{display:none!important}
.reader{height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:radial-gradient(ellipse at 50% 30%,#272021 0,transparent 65%),var(--bg)}
.topbar{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(18px,4vw,64px);border-bottom:1px solid var(--line)}h1{font-family:var(--serif);font-size:24px;line-height:1.1;font-weight:400;margin:0;letter-spacing:.02em}h1 span{font-size:.8em}.edition{display:block;color:var(--muted);font-size:12px;letter-spacing:.05em;margin-top:7px}.tools{display:flex;align-items:center;gap:12px}.tool{border:0;background:transparent;display:flex;align-items:center;gap:9px;font-size:14px;padding:10px 12px;min-height:44px;border-radius:3px;color:var(--muted)}.tool:hover,.tool[aria-pressed=true]{color:var(--text);background:#302527}.tool[aria-pressed=true]{box-shadow:inset 0 -2px var(--accent)}
.stage{overflow:auto;overscroll-behavior:contain;scrollbar-color:#685050 #1b1718;padding:22px 16px;display:flex;align-items:flex-start;touch-action:pan-x pan-y pinch-zoom;position:relative}.page{margin:auto;line-height:0;flex:none;max-width:100%;box-shadow:0 12px 50px #0006}.page img{display:block;max-width:100%;width:auto;height:calc(100dvh - 218px);object-fit:contain;user-select:none;background:#171416}.stage.zoomed .page{max-width:none;margin:0 auto}.stage.zoomed img{height:auto;width:min(1100px,calc(100vw - 64px));max-width:none}.page.entering{animation:arrive .24s ease-out}.stage.busy{cursor:progress}.error{position:absolute;inset:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#191516eF;text-align:center;line-height:1.5}.error button{border:1px solid var(--line);background:#382426;padding:12px 22px;border-radius:3px}.error p{font-size:16px}
.navigation{position:relative;min-height:94px;padding:14px clamp(18px,4vw,64px) max(14px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;border-top:1px solid var(--line);background:#161213}.turn{display:inline-flex;gap:13px;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;border:1px solid transparent;background:transparent;font-size:14px;letter-spacing:.02em;border-radius:3px}.previous{justify-self:start;color:var(--muted)}.previous:hover:enabled{color:var(--text);border-color:var(--line)}.previous:disabled{opacity:.25}.next{justify-self:end;background:#6f3034;border-color:#a9575b;min-width:150px}.next:hover{background:#873e42}.position{min-width:92px;text-align:center;position:relative}.eyebrow{display:block;letter-spacing:.19em;font-size:12px;color:var(--muted);margin:0 0 5px}output{font-family:var(--serif);font-size:24px;line-height:1}output strong{font-weight:400}output span{font-size:17px;color:var(--muted)}.loading{font-size:12px;position:absolute;top:-19px;left:50%;transform:translateX(-50%);white-space:nowrap;color:var(--muted)}.progress{position:absolute;left:0;right:0;top:-1px;height:2px;background:#3b292a}.progress span{display:block;height:100%;width:5.5556%;background:var(--accent);transition:width .25s ease}
dialog{color:var(--text);border:1px solid #514041;border-radius:5px;background:#20191b;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);padding:28px;box-shadow:0 24px 100px #0009;overflow:auto}dialog::backdrop{background:#080608c9;backdrop-filter:blur(6px)}.dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:20px}h2{font:400 29px var(--serif);margin:7px 0 0}.close{background:transparent;border:0;min-width:44px;min-height:44px;display:grid;place-items:center;color:var(--muted)}.page-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.page-list button{min-height:57px;background:#291f22;border:1px solid #463337;border-radius:3px;font-size:14px;display:flex;justify-content:center;align-items:center;gap:9px}.page-list strong{font:400 23px var(--serif)}.page-list button:hover{background:#39282d}.page-list button[aria-current=page]{border-color:#d39487;background:#513035;color:#fff1df}.shortcut{font-size:13px;color:var(--muted);margin:24px 0 0;line-height:1.7}kbd{font:inherit;padding:2px 6px;border:1px solid #594146;border-radius:3px}.noscript,.noscript-links{position:fixed;background:#20191b;z-index:5;left:20px;right:20px;bottom:100px;padding:16px}.noscript-links{bottom:30px;display:flex;flex-wrap:wrap;gap:16px}.noscript-links a{color:var(--text)}
@keyframes arrive{from{opacity:.3;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){.topbar{min-height:72px;padding:11px 14px;gap:8px}h1{font-size:21px}h1 span{display:block;font-size:15px;margin-top:3px}.edition{display:none}.tools{gap:3px}.tool{padding:10px;gap:0}.tool span{display:none}.stage{padding:12px 0}.page{margin:0 auto;max-width:100%;box-shadow:none}.page img{width:100%;height:auto}.stage.zoomed .page{margin:0}.stage.zoomed img{width:170vw;max-width:none;height:auto}.navigation{min-height:83px;padding:12px 14px max(12px,env(safe-area-inset-bottom));gap:10px}.turn{padding:12px;min-width:48px;gap:8px}.previous span{display:none}.next{min-width:105px}.eyebrow{font-size:12px}.position{min-width:75px}output{font-size:22px}dialog{padding:22px}.page-list{gap:8px}.page-list button{gap:5px}}
@media(max-height:480px) and (min-width:641px){.topbar{min-height:60px;padding-block:8px}.edition{display:none}.navigation{min-height:70px;padding-block:8px}.stage{padding:12px}.page img{height:calc(100dvh - 154px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Atmospheric light follows the story; artwork retains its original colours. */
body{--light:154,113,66;--glow:84,53,37;--accent:#c69868;--line:#42352d;--button:#684332;--button-hover:#80543c;--button-edge:#a57752}
body[data-atmosphere=ash]{--light:113,102,98;--glow:88,34,28;--accent:#ba7770;--line:#443235;--button:#683a39;--button-hover:#814b46;--button-edge:#a56860}
body[data-atmosphere=frost]{--light:66,120,145;--glow:32,57,91;--accent:#87b4c8;--line:#2e4049;--button:#294e62;--button-hover:#35657c;--button-edge:#5f8fa7}
body[data-atmosphere=dusk]{--light:106,113,133;--glow:65,42,58;--accent:#b5999c;--line:#40353f;--button:#56404d;--button-hover:#705365;--button-edge:#977380}
body[data-atmosphere=blood]{--light:155,52,63;--glow:100,25,39;--accent:#d1797b;--line:#502b33;--button:#752d3c;--button-hover:#944052;--button-edge:#b95b6b}
.reader{isolation:isolate;position:relative;background:#100f12}
.reader::before,.reader::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1}
.reader::before{background:radial-gradient(ellipse at 9% 30%,rgba(var(--light),.25),transparent 42%),radial-gradient(ellipse at 92% 76%,rgba(var(--glow),.5),transparent 43%),radial-gradient(ellipse at 50% 12%,rgba(var(--light),.12),transparent 67%)}
.reader::after{background:linear-gradient(90deg,#09080b55,transparent 25%,transparent 75%,#09080b55),linear-gradient(0deg,#08070a99,transparent 25%,transparent 80%,#08070a66)}
.topbar{background:#100e1280;border-bottom-color:var(--line);position:relative}
.identity{border-left:2px solid var(--accent);padding-left:16px}
h1{font-size:27px;letter-spacing:.045em;color:#f1e4d3}
.edition{letter-spacing:.09em;color:#c4b6a8}
.page{box-shadow:0 24px 75px #000b,0 0 90px rgba(var(--light),.1);position:relative}
.page.entering{animation:turn-page .42s cubic-bezier(.2,.65,.3,1) both}
@keyframes turn-page{from{opacity:.25;transform:translateX(var(--turn-offset,10px))}to{opacity:1;transform:translateX(0)}}
.navigation{background:linear-gradient(90deg,#120f14f2,#1a1418eb,#120f14f2);border-top-color:var(--line)}
.next{background:var(--button);border-color:var(--button-edge);box-shadow:0 4px 24px rgba(var(--glow),.25);transition:background .2s,border-color .2s}
.next:hover{background:var(--button-hover)}
.progress{background:var(--line)}
.progress span{box-shadow:0 0 12px rgba(var(--light),.6)}
.position output strong{color:#f3e5d4}
dialog{background:radial-gradient(ellipse at top left,rgba(var(--glow),.35),transparent 65%),#1b171b;border-color:var(--button-edge)}
.page-list button[aria-current=page]{border-color:var(--accent);background:var(--button)}
@media(min-width:1100px){.topbar{padding-inline:5vw}.navigation{padding-inline:5vw}.stage{padding-block:26px}.page img{height:calc(100dvh - 226px)}.stage.zoomed img{height:auto}}
@media(max-width:640px){h1{font-size:22px}.identity{padding-left:11px}.page{box-shadow:0 8px 28px #0008}.stage{padding:12px 0}.topbar{background:#100e12c9}}
@media(max-height:480px) and (min-width:641px){.stage{padding:12px}.page img{height:calc(100dvh - 154px)}}
@media(prefers-reduced-motion:reduce){.page.entering{animation:none}.next{transition:none}}