:root { color-scheme:dark; --ink:#f4f1e9; --muted:#aaa69f; --surface:#181817; --ttt-page-ratio:.7845; --ttt-spread-ratio:1.569; }
* { box-sizing:border-box; }
html,body { height:100%; }
body { margin:0; overflow:hidden; color:var(--ink); background:radial-gradient(circle at 50% 44%,#3a3936 0,#292826 36%,#171716 74%),var(--surface); font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,input { font:inherit; } button,a { -webkit-tap-highlight-color:transparent; }
.toolbar { position:fixed; z-index:20; inset:0 0 auto; height:82px; display:flex; align-items:center; justify-content:space-between; padding:14px clamp(18px,3.4vw,54px); border-bottom:1px solid rgba(255,255,255,.1); background:rgba(18,18,17,.78); backdrop-filter:blur(18px); }
.identity { display:flex; align-items:center; gap:15px; min-width:0; }
.back-to-issue { display:inline-flex; align-items:center; gap:6px; color:var(--muted); text-decoration:none; font-size:12px; font-weight:600; white-space:nowrap; }
.back-to-issue:hover { color:var(--ink); }
.back-to-issue + .wordmark { margin-left:5px; }
.wordmark { color:var(--ink); font:800 30px/1 Georgia,serif; letter-spacing:-.06em; text-decoration:none; }
.eyebrow { color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.13em; }
h1 { margin:3px 0 0; font-size:17px; line-height:1.1; font-weight:600; }
.actions { display:flex; align-items:center; gap:9px; }
.text-button,.icon-button,.round-button { color:var(--ink); border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.07); text-decoration:none; cursor:pointer; transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.text-button:hover,.icon-button:hover,.round-button:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); }
.text-button:active,.icon-button:active,.round-button:active { transform:scale(.96); }
.text-button { padding:10px 15px; border-radius:999px; font-size:13px; font-weight:600; }
.icon-button,.round-button { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; }
svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.reader { height:100%; padding:82px 0 78px; display:grid; place-items:center; }
.stage { position:relative; width:100%; height:100%; display:grid; place-items:center; }
.book-shell { width:min(92vw,1264px,calc(76vh * 1.569)); aspect-ratio:var(--ttt-spread-ratio); display:grid; place-items:center; filter:drop-shadow(0 24px 34px rgba(0,0,0,.38)); }
#book { width:100%; height:100%; }
.flip-page { width:100%; height:100%; overflow:hidden; background:#f6f2e8; }
.flip-page img { display:block; width:100%; height:100%; object-fit:contain; image-rendering:auto; user-select:none; -webkit-user-drag:none; background:#f6f2e8; }
.loading { position:absolute; z-index:4; left:50%; top:50%; transform:translate(-50%,-50%); padding:10px 15px; border-radius:999px; color:#ddd8cf; background:rgba(0,0,0,.7); font-size:12px; }
.loading.is-hidden { display:none; }
.controls { position:fixed; z-index:20; left:50%; bottom:max(18px,env(safe-area-inset-bottom)); transform:translateX(-50%); display:flex; align-items:center; gap:12px; }
.round-button:disabled { opacity:.28; cursor:default; }
.position { min-width:190px; height:44px; display:flex; align-items:center; justify-content:center; gap:7px; padding:0 15px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(18,18,17,.78); backdrop-filter:blur(15px); color:var(--muted); font-size:13px; }
#pageInput { width:31px; padding:3px 2px; border:0; border-bottom:1px solid rgba(255,255,255,.2); outline:0; color:var(--ink); background:transparent; text-align:center; }
#pageInput:focus { border-bottom-color:var(--ink); }
.spread-label { margin-left:7px; padding-left:12px; border-left:1px solid rgba(255,255,255,.18); color:var(--ink); white-space:nowrap; }
.hint { position:fixed; z-index:30; left:50%; bottom:83px; transform:translate(-50%,12px); width:max-content; max-width:calc(100vw - 34px); padding:9px 14px; border-radius:999px; color:#e6e1d8; background:rgba(0,0,0,.7); font-size:12px; text-align:center; opacity:0; pointer-events:none; animation:hint 5.2s 1s ease both; }
@keyframes hint { 0%,100% { opacity:0; transform:translate(-50%,10px); } 15%,75% { opacity:1; transform:translate(-50%,0); } }
.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) {
  .toolbar { height:70px; padding:10px 16px; } .eyebrow { display:none; } h1 { margin:0; font-size:15px; } .wordmark { font-size:27px; } .identity { gap:10px; } .back-to-issue span:last-child { display:none; } .back-to-issue { width:32px; height:32px; justify-content:center; border:1px solid rgba(255,255,255,.18); border-radius:50%; font-size:16px; } .back-to-issue + .wordmark { margin-left:0; }
  .text-button { padding:9px 12px; font-size:12px; } .icon-button { width:37px; height:37px; } .reader { padding-top:70px; }
  .book-shell { width:min(calc(100vw - 28px),calc(72vh * .7845)); aspect-ratio:var(--ttt-page-ratio); }
  .controls { bottom:max(14px,env(safe-area-inset-bottom)); } .position { min-width:154px; padding:0 11px; } .spread-label { display:none; } .hint { bottom:72px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }