:root{
  --back:#1d1918;--panel:#24201f;--ink:#ece9e3;--muted:#b3aca4;--line:#514941;--wine:#721c34;
  --paper:#f8f6f1;--serif:"Playfair Display",Georgia,serif;--sans:"DM Sans",system-ui,sans-serif
}
*{box-sizing:border-box}
html{height:100%}
body{min-height:100%;min-height:100svh;margin:0;background:radial-gradient(ellipse at 50% 52%,#39312c 0%,#28221f 50%,#181615 100%);color:var(--ink);font-family:var(--sans);display:flex;flex-direction:column;-webkit-font-smoothing:antialiased}
button{font:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #dbaf9a;outline-offset:5px}
.skip-link{position:absolute;left:16px;top:-80px;z-index:60;background:white;color:#1b1b1b;padding:10px 14px}
.skip-link:focus{top:12px}
.reader-header{min-height:65px;display:grid;grid-template-columns:1fr auto 1fr;gap:15px;align-items:center;padding:13px clamp(18px,4vw,54px);border-bottom:1px solid #ffffff22;background:#1715149c}
.back-link{display:inline-flex;align-items:center;gap:5px;width:fit-content;color:#dcd5ce;font-size:12px;transition:color .2s}
.back-link:hover{color:white}
.back-link svg{width:19px;height:19px}
.reader-label{margin:0;font-size:10px;font-weight:700;letter-spacing:.16em;color:#e0dcd6;white-space:nowrap}
.reader-label span{margin:0 10px;color:#947c77}
.prototype-pill{justify-self:end;border:1px solid #766c63;color:#d4c5b9;padding:7px 10px;font-size:9px;font-weight:700;letter-spacing:.13em;border-radius:20px;white-space:nowrap}
.reader-main{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:16px 16px 14px}
.reader-wrap{width:min(1250px,100%);margin:0 auto}
.reader-intro{text-align:center;margin:0 auto 13px}
.reader-kicker{font-size:9px;letter-spacing:.22em;font-weight:700;color:#bfaea3}
.reader-intro h1{font:400 21px/1.3 var(--serif);margin:5px 0 0;letter-spacing:.01em;color:#f2ece5}
.flipbook-layout{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;align-items:center;gap:clamp(8px,2vw,30px);width:100%;max-width:1150px;margin:auto}
.page-control{display:grid;place-items:center;width:50px;height:50px;background:#1d1b1b70;border:1px solid #e4ded64d;color:white;border-radius:50%;cursor:pointer;transition:background .2s,transform .2s,opacity .2s}
.page-control svg{width:23px;height:23px}
.page-control:hover:not(:disabled){background:#80364b;transform:scale(1.06)}
.page-control:disabled{opacity:.24;cursor:default}
.book-stage{position:relative;width:100%;height:clamp(340px, min(67svh, 630px), 650px);display:flex;align-items:center;justify-content:center;min-width:0;filter:drop-shadow(10px 18px 25px #0004)}
.flipbook{width:100%;height:100%;position:relative}
.flipbook:not(.is-ready) .page:not(:first-child){display:none}
.flipbook:not(.is-ready) .page:first-child{height:100%;width:50%;max-width:445px;margin:auto}
.page{background:var(--paper);border:1px solid #dad5ca;overflow:hidden}
.page-blank{background:#f9f7f3}
.paper{position:relative;width:100%;height:100%;background:linear-gradient(90deg,#e7e2d94a 0%,#faf9f6 5%,#f8f6f0 88%,#e9e4db99 100%)}
.page:nth-child(odd) .paper{background:linear-gradient(90deg,#ece8dfb3 0%,#faf9f6 12%,#f8f6f0 100%)}
.folio{position:absolute;bottom:22px;right:23px;font:400 10px/1 var(--sans);color:#aaa39a;letter-spacing:.12em}
.page:nth-child(odd) .folio{right:auto;left:23px}
.page-cover{background:#7b1b35;border:1px solid #431023;color:#fff}
.page-cover-front{background:linear-gradient(115deg,#561023 0%,#831a38 15%,#861c3a 65%,#6a172f 100%)}
.cover-frame{position:relative;height:100%;padding:clamp(25px,4.5%,46px);display:flex;flex-direction:column;justify-content:space-between}
.cover-frame:before{content:"";position:absolute;left:18px;top:0;bottom:0;width:3px;border-left:1px solid #e5a6a335;box-shadow:3px 0 9px #19010c55}
.cover-top,.cover-bottom{display:flex;justify-content:space-between;gap:12px;font-weight:700;font-size:10px;letter-spacing:.15em;line-height:1.7}
.cover-bottom{font-size:8px;border-top:1px solid #f6d3d359;padding-top:17px}
.cover-center{margin-block:auto;padding-block:20px}
.cover-rule{display:block;width:37px;height:2px;background:#f0c2a2;margin-bottom:27px}
.cover-eyebrow{font-size:10px;letter-spacing:.2em;font-weight:600}
.cover-center h2{font:400 clamp(29px,3.8vw,50px)/1.17 var(--serif);letter-spacing:-.04em;margin:25px 0}
.cover-center h2 span{color:#f0c2a2}
.cover-center p{font-size:11px;color:#e5c9c6;margin:0}
.page-cover-back{background:linear-gradient(100deg,#66162c,#7c1a34 80%,#4c0d20)}
.back-cover-design{height:100%;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:17px}
.back-cover-design span:first-child{font-size:13px;letter-spacing:.27em;font-weight:600}
.back-rule{height:1px;width:45px;background:#d59a9a}
.book-shadow{position:absolute;z-index:-1;bottom:0;left:12%;width:76%;height:24px;background:#0008;filter:blur(20px);pointer-events:none}
.reader-status{max-width:1100px;margin:17px auto 0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;color:#c2b8af;font-size:11px}
.page-status{font-weight:700;color:#ece3da;letter-spacing:.08em;text-align:center}
.touch-hint{text-align:right}
kbd{display:inline-grid;place-items:center;width:24px;height:22px;border:1px solid #8e8278;border-radius:3px;margin-right:3px;font:12px var(--sans)}
.reader-error{text-align:center;color:#e6b3a7;font-size:12px;margin-top:14px}
.reader-footer{display:flex;justify-content:space-between;gap:15px;padding:15px clamp(18px,4vw,54px);border-top:1px solid #ffffff20;font-size:10px;color:#aaa199;letter-spacing:.025em}
@media(max-width:780px){
 .reader-header{grid-template-columns:1fr auto;min-height:57px}
 .reader-label{display:none}
 .reader-main{padding:16px 9px}
 .flipbook-layout{grid-template-columns:38px minmax(0,1fr) 38px;gap:4px}
 .page-control{width:36px;height:36px}
 .page-control svg{width:19px;height:19px}
 .book-stage{height:min(66svh,580px)}
 .cover-top,.cover-bottom{font-size:8px}
 .reader-intro{margin-bottom:14px}
 .reader-status{grid-template-columns:1fr auto;margin:14px 6px 0}
 .touch-hint{display:none}
 .reader-footer{font-size:9px}
}
@media(max-width:480px){
 .reader-main{padding:12px 4px}
 .reader-header{padding:12px 14px}
 .prototype-pill{font-size:8px}
 .reader-intro h1{font-size:18px}
 .flipbook-layout{grid-template-columns:34px minmax(0,1fr) 34px;gap:2px}
 .page-control{width:32px;height:32px}
 .book-stage{height:min(65svh,515px)}
 .cover-frame{padding:19px}
 .cover-frame:before{left:9px}
 .cover-top{font-size:7px}
 .cover-bottom{font-size:6px}
 .cover-center h2{font-size:clamp(27px,7vw,38px);margin:15px 0}
 .cover-center p{font-size:10px}
 .reader-status{font-size:9px;gap:3px}
 .reader-footer span:last-child{display:none}
}
@media(max-height:700px) and (min-width:781px){.reader-intro{margin-bottom:4px}.book-stage{height:min(65svh,520px)}.reader-status{margin-top:6px}.reader-footer{padding-top:10px;padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}