:root { --midnight:#071638;--ink:#0a1b3e; --gold:#f2d493;--cream:#fff8e8;--muted:#bcc9e0;--border:rgba(238,226,191,.25);}
* { box-sizing:border-box; }
html { min-height:100%; background:var(--midnight); scroll-behavior:smooth; }
body { margin:0; color:var(--cream); font-family:Georgia,'Times New Roman',serif; background:radial-gradient(ellipse at 50% 8%,#1f4386 0%,#0b2452 38%,#061330 85%); min-height:100vh; overflow-x:hidden; }
button,select { font:inherit; } button { cursor:pointer; }
button:focus-visible,select:focus-visible,input:focus-visible {outline:2px solid var(--gold);outline-offset:4px}
.sky { position:fixed; inset:0; z-index:0;pointer-events:none; background-image:radial-gradient(1px 1px at 9% 6%,#fff1cb 95%,transparent),radial-gradient(1px 1px at 17% 23%,#cfddfa 95%,transparent),radial-gradient(2px 2px at 65% 10%,#fae7aa 95%,transparent),radial-gradient(1px 1px at 89% 28%,white 95%,transparent),radial-gradient(1px 1px at 78% 61%,#c4defc 95%,transparent),radial-gradient(1px 1px at 24% 84%,white 95%,transparent),radial-gradient(1px 1px at 91% 88%,white 95%,transparent); background-size:100% 100%;opacity:.7; }
.sky i {position:absolute;width:3px;height:3px;border-radius:100%;background:#fff0c2;box-shadow:0 0 12px 3px #e9cb8d;animation:twinkle 3s ease-in-out infinite alternate;}
.sky i:nth-child(1){left:6%;top:18%;animation-delay:-1s}.sky i:nth-child(2){left:20%;top:46%;animation-delay:-1.7s}.sky i:nth-child(3){left:72%;top:7%;animation-delay:-2.8s}.sky i:nth-child(4){left:91%;top:42%;animation-delay:-.3s}.sky i:nth-child(5){left:43%;top:75%;animation-delay:-2s}.sky i:nth-child(6){left:83%;top:90%;animation-delay:-1.1s}.sky i:nth-child(7){left:13%;top:97%;animation-delay:-.7s}.sky i:nth-child(8){left:50%;top:17%;animation-delay:-1.4s}
.reader{position:relative;z-index:1;max-width:1240px;padding:0 28px;margin:0 auto}
.topbar{height:82px;border-bottom:1px solid rgba(244,218,153,.23);display:flex;align-items:center;justify-content:space-between;gap:16px}
.identity{display:flex;align-items:center;gap:12px}.brandstar{font-size:33px;color:var(--gold);text-shadow:0 0 25px rgba(246,208,134,.75)}.brandtitle{font:700 12px/1.45 system-ui,Arial,sans-serif;letter-spacing:.18em}.brandtitle span{display:block;font:400 9px/1.4 system-ui,Arial,sans-serif;color:#c3d0e7;letter-spacing:.2em;margin-top:3px}.topright{font:12px/1.3 system-ui,sans-serif;color:#cbd2e2;letter-spacing:.05em}
.intro{text-align:center;padding:38px 10px 31px}.eyebrow{font:600 10px system-ui,sans-serif;color:#edd8a6;letter-spacing:.23em;margin-bottom:8px}.intro h1{font-size:clamp(36px,5.7vw,67px);letter-spacing:-.035em;margin:0;line-height:1.14;font-weight:400;text-shadow:0 4px 24px rgba(0,0,0,.2)}.intro h1 em{font-style:italic;color:#f4d7a0}.byline{font-size:17px;color:#ded9d2;margin:9px 0 18px}.intro-buttons{display:flex;align-items:center;justify-content:center;gap:19px;flex-wrap:wrap}.primary{border:1px solid #e5c580;color:#162344;background:linear-gradient(115deg,#f4dcab,#dec088);border-radius:32px;padding:13px 27px;font:600 13px system-ui,Arial,sans-serif;box-shadow:0 7px 20px rgba(0,0,0,.16);transition:transform .2s,filter .2s}.primary:hover{transform:translateY(-2px);filter:brightness(1.06)}.introhint{font:12px system-ui,Arial,sans-serif;color:#d8d9e5}
.reader-stage{max-width:1068px;margin:auto}.book-topline{display:flex;gap:20px;align-items:center;justify-content:center;font:11px system-ui,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#eee2c6;margin-bottom:16px}.book-ornament{font-size:24px;color:#dfc88e}
.book-shell{position:relative;width:100%;aspect-ratio:1170.8/594;margin:auto;filter:drop-shadow(0 16px 18px rgba(0,0,0,.38)); perspective:1800px; border-radius:2px; }
.spread{display:flex;width:100%;height:100%;position:relative;isolation:isolate;border-radius:3px;background:#fff7e6;overflow:hidden;box-shadow:0 26px 58px rgba(0,0,0,.36),0 0 0 6px rgba(243,222,178,.10);}
.spread::after{content:"";position:absolute;pointer-events:none;z-index:5;top:0;bottom:0;left:calc(50% - 9px);width:18px;background:linear-gradient(90deg,rgba(41,24,22,.08),rgba(22,16,19,.31) 45%,rgba(255,255,255,.2) 53%,transparent);opacity:.78}
.page{flex:0 0 50%;height:100%;position:relative;overflow:hidden;background:#fff9ee;user-select:none;transform:translateZ(0);}
.page>img,.leaf-side>img{display:block;width:100%;height:100%;object-fit:fill;position:absolute;top:0;left:0;pointer-events:none}.page-left {box-shadow:inset -8px 0 18px rgba(61,31,20,.15)}.page-right {box-shadow:inset 6px 0 17px rgba(61,31,20,.11)}.page-empty{width:100%;height:100%;background:linear-gradient(110deg,#fffaf1,#efe8db)}
.fx-star{position:absolute;z-index:2;width:17%;aspect-ratio:1;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:screen;background:radial-gradient(circle,rgba(255,249,185,.65) 0%,rgba(255,201,87,.21) 22%,rgba(255,220,97,.06) 44%,transparent 68%);filter:blur(4px);animation:starPulse 3.3s ease-in-out infinite alternate}.page .motion{position:absolute;inset:0;height:100%;width:100%;object-fit:fill;pointer-events:none;z-index:3}
.leaf{position:absolute;z-index:9;top:0;height:100%;width:50%;transform-style:preserve-3d;will-change:transform}.leaf.next{left:50%;transform-origin:left center;animation:flipNext .95s cubic-bezier(.35,.1,.58,1) forwards}.leaf.prev{left:0%;transform-origin:right center;animation:flipPrev .95s cubic-bezier(.35,.1,.58,1) forwards}.leaf-side{position:absolute;inset:0;overflow:hidden;background:#fff9f0;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 0 22px rgba(0,0,0,.25)}.leaf-back{transform:rotateY(180deg)}.leaf-side .fx-star{display:none}
@keyframes flipNext{0%{transform:rotateY(0)}100%{transform:rotateY(-180deg)}}@keyframes flipPrev{0%{transform:rotateY(0)}100%{transform:rotateY(180deg)}}
@keyframes twinkle{0%{opacity:.35;transform:scale(.65)}100%{opacity:1;transform:scale(1.3)}}@keyframes starPulse{0%{opacity:.25;transform:translate(-50%,-50%) scale(.7)}100%{opacity:.88;transform:translate(-50%,-50%) scale(1.28)}}
.book-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin:22px 0 16px}.nav-arrow{width:54px;height:54px;line-height:48px;font:40px Georgia,serif;color:#f7dfaa;border:1px solid var(--border);border-radius:50%;background:rgba(255,255,255,.075);transition:background .2s,transform .2s}.nav-arrow:hover:not(:disabled){background:rgba(255,255,255,.17);transform:scale(1.05)}button:disabled{opacity:.32;cursor:default}.action{border:1px solid var(--border);border-radius:35px;background:#f7efe0;color:#12234a;padding:15px 30px;display:flex;justify-content:center;align-items:center;gap:12px;min-width:215px;font:600 13px system-ui,Arial,sans-serif;transition:filter .2s}.action:hover{filter:brightness(1.05)}#playIcon{font-size:13px}
.settings{border:1px solid var(--border);border-radius:16px;background:rgba(2,11,34,.30);display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;padding:14px 20px;max-width:900px;margin:0 auto}.settings label,.settings select,.full-button{font:12px system-ui,Arial,sans-serif;color:#e4e7ed}.settings select{padding:9px 10px;color:#ebebf4;background:#142c56;border:1px solid rgba(243,219,158,.23);border-radius:8px;max-width:210px}.settings select option{background:#132753}.toggle{display:flex;align-items:center;gap:9px;cursor:pointer;margin-right:9px}.toggle input{position:absolute;opacity:0}.toggle-ui{height:20px;width:37px;border-radius:30px;border:1px solid #bcb3a4;background:#5c6271;position:relative;transition:background .2s}.toggle-ui::after{content:"";position:absolute;width:14px;height:14px;background:white;border-radius:50%;left:2px;top:2px;transition:transform .2s}.toggle input:checked+.toggle-ui{background:#dab46b}.toggle input:checked+.toggle-ui::after{transform:translateX(16px)}.voice-label,.speed-label{margin-left:7px}.full-button{border:1px solid var(--border);background:transparent;border-radius:8px;width:36px;height:36px;font-size:21px}
.spoken{max-width:850px;margin:22px auto 0;text-align:center;min-height:66px}.spoken-heading{font:600 9px system-ui,sans-serif;letter-spacing:.19em;color:#e8c894}.spoken p{font:italic 17px/1.5 Georgia,serif;color:#e6e3e0;margin:9px auto 0;max-width:800px}.device-note{margin:12px 0 32px;text-align:center;font:11px/1.5 system-ui,sans-serif;color:#b6c3db}.footer{border-top:1px solid var(--border);display:flex;gap:10px;justify-content:space-between;font:11px system-ui,Arial,sans-serif;color:#c9c6c5;padding:24px 0 35px}
@media(max-width:720px){.reader{padding:0 16px}.topbar{height:62px}.topright{display:none}.intro{padding:29px 6px 23px}.intro h1{font-size:clamp(38px,9.4vw,54px)}.introhint{flex-basis:100%;margin-top:-6px}.book-shell{width:min(100%,490px);aspect-ratio:585.4/594}.spread::after{display:none}.page-left{display:none}.page-right{flex:0 0 100%}.leaf{width:100%;left:0!important}.settings{gap:11px;justify-content:center;padding:14px 11px}.settings .toggle{flex-basis:100%;justify-content:center}.settings select{max-width:165px}.book-controls{gap:13px}.nav-arrow{height:48px;width:48px}.action{min-width:175px;padding:14px 18px}.spoken p{font-size:15px}.footer{font-size:10px;flex-direction:column;text-align:center}.eyebrow{font-size:9px}}
@media (prefers-reduced-motion:reduce){.sky i,.fx-star{animation:none}.leaf.next,.leaf.prev{animation-duration:.01s}}