:root{--paper:#f5efe5;--ink:#42382f;--muted:#8f8172;--accent:#875a48;--line:#d8cbbb;--page-h:min(62vh,680px,calc((100vw - 100px)/1.44));font-family:Georgia,'Times New Roman',serif;color:var(--ink);background:#eee6da}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 70% 30%,#fff9ef 0,transparent 65%),#eee6da;min-height:100svh}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button:disabled{opacity:.3;cursor:default}button{touch-action:manipulation}[hidden]{display:none!important}.grain{position:fixed;inset:0;pointer-events:none;opacity:.045;z-index:10;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.5' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}.welcome{max-width:1300px;margin:auto;min-height:100svh;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:50px;padding:75px 70px 90px;position:relative}.eyebrow{font:10px/1.5 Arial,sans-serif;letter-spacing:3px;color:var(--muted)}.dedication{font-size:22px;font-style:italic;margin:44px 0 18px;color:var(--accent)}h1{font-size:clamp(38px,4.2vw,62px);line-height:1.13;font-weight:400;letter-spacing:-2px;margin:0 0 26px}h1 em{color:var(--accent);font-weight:400}.intro-copy{font:16px/1.8 Arial,sans-serif;color:#857669}.primary{border:0;background:var(--ink);color:#fff8ed;padding:19px 25px;border-radius:3px;margin-top:22px;font:14px Arial,sans-serif;box-shadow:0 8px 20px #42382f15}.primary span{margin-left:25px}.primary:hover{background:var(--accent)}.birthday{font-size:15px;font-style:italic;margin-top:32px}.birthday span,footer span,.wordmark span{color:var(--accent);margin-left:8px}.cover-wrap{display:flex;align-items:center;flex-direction:column;perspective:1400px}.cover{width:min(100%,360px);position:relative;transform:rotate(5deg) rotateY(-13deg);border-radius:3px 7px 7px 3px;box-shadow:18px 28px 45px #58443335,5px 3px 0 #d6c9b6,8px 5px 0 #f6f1e8,11px 7px 0 #c7b9a5;background:var(--paper)}.cover img{display:block;width:100%;border-radius:inherit}.cover-spine{position:absolute;inset:0 auto 0 0;width:18px;background:linear-gradient(90deg,#39271960,transparent 55%,#fff4)}.handwritten{font-size:17px;color:var(--accent);font-style:italic;margin-top:35px;transform:rotate(-4deg)}.intro-bottom{position:absolute;bottom:30px;left:70px;right:70px;display:flex;justify-content:space-between;font:9px Arial,sans-serif;letter-spacing:2px;color:var(--muted)}main{min-height:100svh;padding:0 32px 18px}.reader-header{display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:auto;padding:25px 0;border-bottom:1px solid var(--line)}.wordmark{background:none;border:0;font-size:23px}.header-note{font-size:14px;font-style:italic;color:var(--muted)}.text-button{border:0;background:none;font:12px Arial,sans-serif;padding:10px;color:var(--muted)}.text-button:hover{color:var(--accent)}.chapter{text-align:center;padding:18px 0 14px}.chapter .eyebrow{margin:0 0 6px;font-size:8px}h2{font-weight:400;margin:0;font-size:25px}.stage{display:flex;justify-content:center;align-items:center;padding:0 10px 12px;perspective:1800px}.book{height:var(--page-h);width:calc(var(--page-h)*1.44);position:relative;display:flex;transform-style:preserve-3d;border-radius:4px;box-shadow:0 26px 42px #5844332b,0 3px 0 #c0b09a,0 6px 0 #f9f2e7,0 9px 0 #b6a68d;background:#f7f0e5;touch-action:pan-y}.page{width:50%;height:100%;padding:10px 12px 20px;position:relative;background:#fcf7ef;border:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.page img{max-width:100%;max-height:100%;object-fit:contain;display:block;user-select:none;-webkit-user-drag:none}.page.left{border-radius:4px 0 0 4px;background:linear-gradient(90deg,#fbf6ed 85%,#e1d6c4)}.page.right{border-radius:0 4px 4px 0;background:linear-gradient(90deg,#ded2bd,#fcf7ef 12%)}.page.left:after,.page.right:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 92%,#56402b25)}.page.right:after{background:linear-gradient(90deg,#56402b25,transparent 8%)}.folio{position:absolute;bottom:5px;font:9px Arial,sans-serif;color:#958571}.page.blank{flex-direction:column;gap:18px;text-align:center}.blank .heart{font-size:48px;color:var(--accent)}.blank p{font-size:19px;line-height:1.6}.turn-zone{position:absolute;z-index:5;bottom:0;width:45px;height:65px;background:transparent;border:0}.turn-zone.next{right:0;border-radius:0 0 4px 0;background:linear-gradient(135deg,transparent 55%,#bfa78538)}.turn-zone.prev{left:0;background:linear-gradient(225deg,transparent 55%,#bfa78538)}.leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;z-index:8;pointer-events:none}.leaf .face{position:absolute;inset:0;width:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden}.leaf .back{transform:rotateY(180deg)}.leaf.forward{animation:forward .85s cubic-bezier(.3,.1,.2,1) forwards}.leaf.backward{animation:backward .85s cubic-bezier(.3,.1,.2,1) forwards}@keyframes forward{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}@keyframes backward{from{transform:rotateY(-180deg)}to{transform:rotateY(0)}}.controls{display:flex;justify-content:center;align-items:center;gap:28px;padding:20px 0 0}.arrow{border:1px solid #cbbca8;background:#f9f3e970;width:44px;height:44px;border-radius:50%;font-size:22px}.arrow:hover:enabled{background:var(--ink);color:#fff}.page-info{width:150px;text-align:center;font:11px Arial,sans-serif;color:var(--muted)}.progress{height:2px;background:var(--line);margin-top:12px}.progress span{height:100%;background:var(--accent);display:block;transition:width .4s}.hint{text-align:center;font:10px/1.6 Arial,sans-serif;color:var(--muted);margin:14px 0}.restart{display:block;margin:auto}footer{text-align:center;font-style:italic;font-size:12px;color:var(--muted);padding-top:5px}dialog{color:var(--ink);border:1px solid var(--line);background:var(--paper);border-radius:12px;box-shadow:0 20px 80px #0004}dialog::backdrop{background:#342c25bd;backdrop-filter:blur(5px)}.gallery{width:min(900px,92vw);max-height:85svh;padding:26px}.dialog-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.dialog-header h2{font-size:22px}.close{font-size:28px;border:0;background:transparent;width:44px;height:44px}.thumbnails{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.thumb{border:1px solid var(--line);padding:6px;background:#fff9f0}.thumb img{width:100%;aspect-ratio:0.72;object-fit:contain}.thumb span{font:10px Arial,sans-serif}.zoom{width:min(1050px,96vw);max-height:96svh;padding:12px}.zoom .close{position:sticky;top:0;float:right;background:var(--paper);border-radius:50%;z-index:2}.zoom-scroll{clear:both;overflow:auto;max-height:78svh}.zoom img{display:block;width:100%;height:auto}.zoom p{text-align:center;font:11px Arial,sans-serif;color:var(--muted)}@media(max-width:760px){:root{--page-h:min(65svh,650px)}.welcome{grid-template-columns:1fr;padding:35px 25px 65px;gap:40px;text-align:center}.dedication{margin:25px 0 15px}h1{font-size:39px;letter-spacing:-1.3px}.intro-copy{font-size:14px}.cover{width:240px}.intro-bottom{position:static;flex-direction:column;gap:12px}.intro-bottom span:first-child{display:none}.cover-wrap{grid-row:2}.intro-text .eyebrow{font-size:8px;letter-spacing:2px}.cover-wrap .handwritten{font-size:14px}.birthday{margin-bottom:0}main{padding:0 12px 20px}.reader-header{padding:17px 0}.wordmark{font-size:20px}.header-note{display:none}.chapter{padding:14px 0 12px}h2{font-size:21px}.book{width:calc(var(--page-h)*.72);max-width:92vw}.page{width:100%;padding:7px 8px 18px}.page.left{display:none}.page.right{background:linear-gradient(90deg,#e2d7c6,#fcf7ef 5%)}.leaf{left:0;width:100%}.leaf .page.left{display:flex}.leaf .back{background:#f3eadb}.controls{gap:20px;padding-top:16px}.hint{font-size:9px}.thumbnails{grid-template-columns:repeat(3,1fr);gap:10px}.gallery{padding:16px}.dialog-header h2{font-size:18px}footer{font-size:11px}}@media(prefers-reduced-motion:reduce){.leaf.forward,.leaf.backward{animation-duration:.01s}.progress span{transition:none}.cover{transform:none}}