@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600&family=DM+Sans:wght@400;500&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#cfcec8;background:#03070d;color-scheme:dark;font-synthesis:none;--paper:#ede9dd;--muted:#a5a69e}
*{box-sizing:border-box}
body{margin:0;overflow:hidden}
button{-webkit-tap-highlight-color:transparent;font:inherit;color:inherit;cursor:pointer;border:0;background:transparent;touch-action:manipulation}
button:disabled{opacity:.24;cursor:default}
button:focus-visible{outline:1px solid #e7e3d4;outline-offset:3px;border-radius:5px}
[hidden]{display:none!important}
.symbol-library{position:absolute;width:0;height:0;overflow:hidden}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;flex:none;pointer-events:none}
#scene{position:fixed;inset:0}
#scene canvas{display:block;width:100%;height:100%;touch-action:none}
/* Zoomed in, dragging moves around; the sky's own pointer cursor (over a star) still wins, as an inline style. */
#scene canvas.zoomed{cursor:grab}#scene canvas.zoomed:active{cursor:grabbing}
.book-note{position:fixed;top:max(30px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(480px,calc(100% - 40px));margin:0;text-align:center;font-size:12px;line-height:1.6;font-weight:400;color:#c5cdd6;text-shadow:0 1px 15px #000;pointer-events:none}
.book-note span{display:block;margin-top:5px;font-size:11px;color:#92a0b3;text-wrap:balance}
.book-note .book-disclaimer{margin-top:3px;font-size:10px;letter-spacing:.02em;color:#6f7d91}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;flex:none;transition:color .18s,background .18s}
.icon-button:hover:enabled{color:#fff;background:#ffffff09}
.book-controls,.reading-nav{position:fixed;bottom:max(28px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:5px 8px;background:#07111dc9;border:1px solid #ffffff0c;border-radius:32px;backdrop-filter:blur(20px);z-index:1}
.page-button{height:44px;display:flex;align-items:center;justify-content:center;gap:11px;padding:0 10px;min-width:112px;border-radius:4px;font-size:11px;letter-spacing:.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.page-button svg{width:12px;height:12px;opacity:.6}
.page-button:hover{color:#fff}
.page-button[aria-expanded=true]{color:#fff}
/* A turn in progress dims the arrows without disabling them, so keyboard focus stays put. */
.icon-button.busy{opacity:.24;cursor:default}
.separator{width:1px;height:14px;background:#ffffff16;margin:0 8px}
#loading{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px}
.loading-line{display:block;position:relative;height:1px;width:96px;background:#aaa2;overflow:hidden}
.loading-line:after{content:'';display:block;height:1px;width:20px;background:#e4e1d2}
/* Animations run only while shown: WebKit keeps ticking them under display:none. */
#loading:not([hidden]) .loading-line:after{animation:loading 1s infinite ease-in-out}
#loadingBar{position:absolute;left:0;top:0;height:1px;width:0;background:#e4e1d2;transition:width .2s}
#loading.determinate .loading-line:after{display:none}
.loading-text{font-size:12px;letter-spacing:.04em;color:#a5a69e}
@keyframes loading{from{transform:translateX(-24px)}to{transform:translateX(100px)}}
#error{position:fixed;top:45%;left:50%;transform:translate(-50%,-50%);background:#050b13;padding:24px;text-align:center;width:min(90vw,360px);font-size:13px}
#error button{padding:12px 16px;border:1px solid #ffffff20;margin:4px}
#pageIndex{position:fixed;inset:auto 0 96px;margin:0 auto;width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 144px);padding:46px 20px 20px;overflow:auto;border:1px solid #ffffff13;border-radius:14px;background:#07111df2;color:#d9d8ce;box-shadow:0 20px 80px #0004;backdrop-filter:blur(24px)}
#pageIndex::backdrop{background:#0002}
.index-close{position:absolute;top:4px;right:7px}
.index-close svg{width:16px;height:16px}
#thumbnails{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 12px}
.thumb{padding:5px;border-radius:3px;min-height:44px;text-align:left;border:1px solid transparent;opacity:.7}
.thumb[aria-current=page]{border-color:#c8c4aa70;opacity:1}
.thumb:hover{opacity:1;background:#ffffff05}
.thumb img{width:100%;aspect-ratio:1.42;object-fit:cover;display:block;background:#d9d4c5}
.thumb span{display:block;font-size:11px;margin-top:7px;font-variant-numeric:tabular-nums;letter-spacing:.06em}
/* The reader handles its own pinch; the dark bands around the page must not zoom the whole page instead. */
#reading{position:fixed;inset:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;padding:0;background:#050b13;color:#d9d8ce;touch-action:none}
#reading::backdrop{background:#050b13}
#readingViewport{position:absolute;inset:72px 0 90px;overflow:auto;padding:24px;touch-action:pan-x pan-y;display:flex;align-items:safe center;justify-content:safe center}
#readingImage{display:block;flex:none;max-width:none;height:auto;user-select:none;box-shadow:0 10px 44px #0003;cursor:zoom-in}
.reading-tools{position:absolute;top:18px;left:50%;transform:translateX(-50%);display:flex;gap:2px}
.reading-close{position:absolute;top:18px;right:22px}
.reading-nav{gap:8px;border:0;background:transparent}
#readingCount{min-width:68px;text-align:center;font-size:11px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.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}
@media(max-width:700px){.book-controls,.reading-nav{bottom:max(20px,env(safe-area-inset-bottom))}#pageIndex{bottom:86px;padding:44px 14px 16px}#thumbnails{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}.reading-tools{top:12px}.reading-close{top:12px;right:10px}#readingViewport{inset:64px 0 82px;padding:12px}}
/* A small pill, so the hint stays readable over anything behind it. */
.sky-hint{position:fixed;left:50%;bottom:calc(max(28px,env(safe-area-inset-bottom)) + 70px);transform:translateX(-50%);margin:0;padding:5px 12px 5px 10px;border:1px solid #ffffff10;border-radius:999px;background:#07111dc4;backdrop-filter:blur(12px);font-size:11px;letter-spacing:.04em;color:#c3cedc;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity 1.2s}
.sky-hint.visible{opacity:1}
.sky-hint:before{content:'✦';display:inline-block;margin-right:8px;color:#e5c6a6}
.sky-hint:not([hidden]):before{animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.35;transform:scale(.7) rotate(45deg)}}
/* The keyboard's (and a screen reader's) way to write in the sky. Taps and clicks reach the sky itself, so the button
   stays out of sight until it has focus, then shows where the sky hint sits. */
.sky-wish{position:fixed;left:50%;bottom:calc(max(28px,env(safe-area-inset-bottom)) + 70px);transform:translateX(-50%);z-index:2;display:flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 12px;border:1px solid #ffffff18;border-radius:999px;background:#07111de6;backdrop-filter:blur(12px);font-size:12px;letter-spacing:.04em;color:#dfe6ef;white-space:nowrap}
.sky-wish span{color:#e5c6a6}
.sky-wish:focus-visible{border-radius:999px;outline-offset:2px}
.sky-wish:not(:focus){width:1px;height:1px;min-height:0;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0}
.sky-tip{position:fixed;left:0;top:0;z-index:3;max-width:min(260px,calc(100vw - 32px));padding:10px 13px 11px;border:1px solid #ffffff14;border-radius:10px;background:#07111dd9;backdrop-filter:blur(16px);box-shadow:0 10px 40px #0006;font-size:11px;line-height:1.5;color:#b9c4d2;pointer-events:none;opacity:0;translate:0 4px;transition:opacity .18s,translate .18s}
.sky-tip.visible{opacity:1;translate:0 0}
.sky-tip strong{display:block;font-size:12px;font-weight:500;color:#f1eee3;overflow-wrap:anywhere}
.sky-tip span{display:block;margin-top:3px;font-family:Caveat,cursive;font-size:18px;line-height:1.15;color:#dfe6ef;overflow-wrap:anywhere}
.sky-tip em{display:block;margin-top:5px;font-style:normal;font-size:11px;letter-spacing:.05em;color:#8898ae}
@media(max-width:700px){.sky-hint,.sky-wish{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 66px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

#motionToggle svg{width:16px;height:16px;opacity:.7}
@media(max-width:380px){.book-controls{gap:0;padding:4px}.page-button{min-width:96px;padding:0 7px}.separator{margin:0 4px}}
/* The view controls sit bottom-left; on narrow portrait screens they move above the page controls. */
@media(max-width:780px) and (min-height:501px){:root{--view-bottom:calc(max(20px,env(safe-area-inset-bottom)) + 66px)}}
/* On narrow screens the view controls sit above the page controls, so the sky hint moves above both. */
@media(max-width:780px) and (min-height:501px){.sky-hint,.sky-wish{bottom:calc(max(20px,env(safe-area-inset-bottom)) + 142px)}}
/* Phones held sideways: the book fills the height, so everything moves to its edges. The headline sits top-right beside
   the mode switch, both control bars share the bottom row, the reader gets side rails and the index uses the height.
   There is no free sky for the hint there. */
@media(orientation:landscape) and (max-height:500px){
 html body:not(.live-body) .book-note{top:max(16px,env(safe-area-inset-top));left:auto;right:max(16px,env(safe-area-inset-right));transform:none;width:auto;max-width:calc(100% - 270px);text-align:right;line-height:1.45}
 .book-note span{display:none}
 :root{--view-bottom:max(12px,env(safe-area-inset-bottom))}
 .book-controls{left:auto;right:max(12px,env(safe-area-inset-right));transform:none;bottom:max(12px,env(safe-area-inset-bottom))}
 .sky-hint{display:none}
 .sky-wish{left:28px;bottom:calc(var(--view-bottom) + 56px);transform:none}
 #readingViewport{inset:0 64px;padding:8px}
 .reading-tools{top:50%;left:10px;transform:translateY(-50%);flex-direction:column}
 .reading-close{top:10px;right:10px}
 #reading .reading-nav{top:50%;bottom:auto;left:auto;right:10px;transform:translateY(-50%);flex-direction:column;padding:0;gap:4px}
 #readingCount{min-width:0}
 #pageIndex{inset:10px 0 auto;width:min(760px,calc(100vw - 32px));max-height:calc(100dvh - 20px);padding:40px 14px 14px}
 #thumbnails{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
}
/* The smallest of these phones share the bottom row between two pills; pinching still zooms, so the zoom buttons go. */
@media(orientation:landscape) and (max-height:500px) and (max-width:700px){#viewZoomOut,#viewZoomIn,.view-controls .view-sep{display:none}}
/* Touch screens: 44 px zoom buttons (the book's pill only; Sign together sizes its own) and no text under 12.5 px. */
@media(pointer:coarse){
 .view-controls .view-button{width:44px}
 .book-note span,.page-button,.thumb span,#readingCount,.sky-hint,.sky-wish,.sky-tip,.sky-tip em{font-size:12.5px}
 .sky-tip strong{font-size:13.5px}
 .sky-tip em,.book-note span{color:#a3b0c2}
}