@font-face { font-family: Keepsake; src:url('../assets/fonts/playfair-display-400.woff2?v=latin1') format('woff2'); font-display:swap; }
@font-face { font-family: Keepsake; src:url('../assets/fonts/playfair-display-400-italic.woff2?v=latin1') format('woff2'); font-style:italic; font-display:swap; }
@font-face { font-family: Handwritten; src:url('../assets/fonts/dancing-script-400.woff2?v=latin1') format('woff2'); font-display:swap; }
:root { color-scheme:dark; --ink:#473144; --muted:#8c7366; --gold:#b49a6c; --paper:#fbf2df; --book-width:min(1040px,90vw,calc((100dvh - 250px)*1.65)); }
* { box-sizing:border-box; }
body { margin:0; background:#100b19; color:#f7ebd6; font-family:Keepsake,Georgia,serif; }
body.finale-active { overflow:hidden; }
button { font:inherit; cursor:pointer; }
button:focus-visible { outline:2px solid #e1bf80; outline-offset:5px; }
button:disabled { cursor:default; }
.chapter-return { position:fixed; top:max(14px,env(safe-area-inset-top)); left:14px; z-index:45; padding:9px 12px; min-height:36px; color:#c6aa80; background:#100b196b; border:1px solid #b696652e; border-radius:22px; font:10px Georgia,serif; transition:opacity .2s,background .2s,color .2s; }
.chapter-return span { margin-right:4px; }
.chapter-return:hover { color:#f9e7c8; background:#211825c9; }
.chapter-return:disabled { opacity:.4; pointer-events:none; }
[data-state="arriving"] .chapter-return { opacity:0; visibility:hidden; }
[data-state="leaving"] .chapter-return,[data-state="ending"] .chapter-return,[data-state="ended"] .chapter-return { visibility:hidden; }
[data-state="handoff"] .chapter-return,[data-state="finale"] .chapter-return { left:50%; transform:translateX(-50%); }
[hidden] { display:none !important; }
#keepsake { min-height:100dvh; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 0 30px; }
.ambient { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 51%,#64445148,transparent 61%),radial-gradient(ellipse at 12% 85%,#674b3620,transparent 50%),linear-gradient(130deg,#100c1c,#1a1020 65%,#100a16); }
.ambient::after { content:''; position:absolute; inset:0; opacity:.3; background-image:radial-gradient(circle,#e4c28e 0 .6px,transparent 1px); background-size:193px 167px; mask-image:linear-gradient(transparent,#0008,transparent); }
.chapter-heading { position:relative; text-align:center; margin:0 0 36px; }
.eyebrow { font-family:Georgia,serif; text-transform:uppercase; font-size:9px; letter-spacing:.24em; font-weight:400; line-height:1.8; color:var(--muted); margin:0 0 20px; }
.chapter-heading .eyebrow { color:#c6aa80; margin-bottom:7px; font-size:9px; }
.chapter-heading h1 { margin:0; font-size:22px; font-style:italic; font-weight:400; color:#e4d6c3; }
.headphone-note { position:absolute; top:100%; left:0; right:0; margin:8px 0 0; color:#c6aa80; font:11px Georgia,serif; letter-spacing:.06em; white-space:nowrap; opacity:0; transition:opacity .3s; }
[data-state="arriving"] .headphone-note,[data-state="cake-transition"] .headphone-note,[data-state="closed"] .headphone-note,[data-state="resetting"] .headphone-note { opacity:1; }
.chapter-dark { position:fixed; z-index:100; inset:0; background:#000; outline:none; opacity:0; }
.return-recovery { position:fixed; z-index:200; inset:0; display:grid; place-items:center; padding:24px; background:#100b19f5; text-align:center; }
.return-recovery p { margin:0 0 22px; color:#d0b999; font:15px/1.6 Georgia,serif; }
.return-recovery a { display:inline-block; padding:14px 24px; border:1px solid #b6966570; border-radius:28px; color:#f6e5c6; text-decoration:none; font:13px Georgia,serif; }
.return-recovery a:focus-visible { outline:2px solid #e1bf80; outline-offset:5px; }
.reading-room { width:100%; position:relative; display:flex; flex-direction:column; align-items:center; }
.book-status { max-width:min(90vw,480px); margin:14px 16px 0; color:#d0b999; text-align:center; font:12px/1.6 Georgia,serif; }
[data-ready="loading"] .chapter-heading,[data-ready="loading"] .reading-room,[data-ready="loading"] .colophon { opacity:0; }
.book-position { width:var(--book-width); aspect-ratio:1.65; position:relative; }
.book { width:100%; height:100%; position:relative; transform:translateX(-25%); perspective:9000px; }
.board { position:absolute; top:-7px; bottom:-10px; width:calc(50% + 8px); background:linear-gradient(130deg,#59354e,#2a182e 70%,#4e2e44); border:1px solid #c5a16a4d; box-shadow:0 20px 40px #0005,inset 0 0 0 4px #e0bb8010; }
.board-left { left:-8px; border-radius:12px 3px 3px 12px; opacity:0; }
.board-right { right:-8px; border-radius:3px 12px 12px 3px; }
.board::after { content:''; position:absolute; left:9px; right:8px; bottom:2px; height:5px; border-radius:0 0 5px 5px; background:repeating-linear-gradient(0deg,#c7b79c 0 1px,#e8d8ba 1px 2px); }
.spread { position:absolute; inset:0; display:grid; grid-template-columns:1fr 1fr; outline:none; }
.paper { position:relative; min-width:0; height:100%; color:var(--ink); background-color:var(--paper); overflow:hidden; }
.paper-left { border-radius:7px 0 0 7px; background-image:linear-gradient(90deg,#eedfc4,transparent 4%,transparent 90%,#b99e6e26); }
.paper-right { border-radius:0 7px 7px 0; background-image:linear-gradient(90deg,#aa8b5b22,transparent 8%,transparent 95%,#e8d6b766); }
.paper::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:.2; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.16' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.page-content { height:100%; padding:clamp(24px,3.4vw,50px); padding-bottom:45px; display:flex; flex-direction:column; align-items:center; justify-content:safe center; text-align:center; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#b4a184 transparent; }
.page-content > * { flex-shrink:0; }
.page-content h2 { margin:0; font-size:clamp(24px,3vw,40px); line-height:1.3; font-weight:400; letter-spacing:-.03em; }
.page-content h2 em { font-weight:400; }
.unwritten-paper .page-content h2 { color:#8c776c; font-size:clamp(20px,2.2vw,28px); font-style:italic; letter-spacing:0; }
.small-rule { width:40px; height:1px; background:#b7986566; display:block; margin:28px 0; }
.ornament { color:#b79a68; font-family:Georgia,serif; font-size:27px; line-height:1; margin:26px 0; }
.folio { position:absolute; bottom:18px; font-family:Georgia,serif; font-size:9px; letter-spacing:.1em; color:#aa9073; z-index:1; }
.paper-left .folio { left:28px; }
.paper-right .folio { right:28px; }
.photo-paper { padding:28px 25px 44px; }
.photograph { width:100%; height:100%; margin:0; display:flex; justify-content:center; align-items:center; }
.photograph img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; padding:7px; background:#fff9ed; border:1px solid #c9b388; box-shadow:0 7px 15px #51302e20,0 1px 2px #51302e20; }
.garba-paper { display:flex; flex-direction:column; align-items:center; }
.garba-paper .eyebrow { flex:none; text-align:center; margin:0 0 13px; }
.garba-paper .photograph { flex:1 1 0; min-height:0; height:auto; }
.garba-paper time { flex:none; font:10px/1.6 Georgia,serif; letter-spacing:.06em; color:#987e63; margin-top:13px; text-align:center; }
.garba-title { flex:none; margin:0 0 16px; font-size:clamp(22px,2.4vw,32px); font-weight:400; line-height:1.3; letter-spacing:-.025em; text-align:center; }
.dedication-paper time { font-family:Georgia,serif; color:#987e63; font-size:10px; letter-spacing:.1em; }
.dedication-paper .ornament { margin-top:35px; }
.dedication-paper h2 { font-size:clamp(22px,2.55vw,35px); }
.soft-copy { color:#8a736b; font-size:13px; line-height:1.85; max-width:220px; margin:0; font-style:italic; }
.reserved-memory { width:100%; max-width:270px; min-height:230px; border:1px solid #b99e723b; padding:25px; outline:1px solid #b99e721f; outline-offset:7px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.reserved-memory p { font-size:13px; color:#9b8473; line-height:1.8; font-style:italic; }
.reserved-line { width:35px; height:1px; background:#bba37955; margin:18px 0; }
.favorites-paper .page-content { align-items:flex-start; justify-content:flex-start; text-align:left; padding:clamp(22px,2.2vw,30px); padding-bottom:38px; }
.favorites-paper .eyebrow { margin-bottom:10px; }
.favorites-paper .page-content h2 { font-size:clamp(26px,2.1vw,30px); }
.favorites-list { list-style:none; width:100%; margin:16px 0 0; padding:0; }
.favorites-list li { position:relative; padding:0 0 7px 26px; margin-bottom:7px; border-bottom:1px solid #b49a6c24; }
.favorites-list li:last-child { padding-bottom:0; margin-bottom:0; border-bottom:0; }
.favorites-list li::before { content:counter(list-item,decimal-leading-zero); position:absolute; left:0; top:4px; color:#a58a68; font:10px Georgia,serif; letter-spacing:.08em; }
.favorites-list strong { display:block; color:var(--ink); font-size:14px; line-height:1.4; font-weight:400; }
.favorites-list p { margin:4px 0 0; color:#826b60; font:13px/1.55 Georgia,serif; }
.personal-note-paper .page-content { align-items:flex-start; justify-content:flex-start; text-align:left; padding:clamp(26px,2.5vw,38px); padding-bottom:42px; }
.personal-note-paper .eyebrow { margin-bottom:14px; }
.personal-note-paper .page-content h2 { font-size:clamp(28px,2.3vw,34px); margin-bottom:20px; }
.personal-note-copy { width:100%; font-size:14px; line-height:1.75; }
.personal-note-copy p { margin:0 0 16px; }
.personal-note-copy p:last-child { margin-bottom:0; }
.advice-paper .page-content { align-items:flex-start; text-align:left; padding:30px 34px 45px; }
.advice-paper .eyebrow { margin-bottom:10px; }
.advice-paper h2 { font-size:29px; }
.advice-copy { font-size:13px; line-height:1.85; margin:22px 0 0; }
blockquote { margin:0; font-size:16px; font-style:italic; line-height:2; }
.kindness-paper blockquote { font-size:15px; line-height:1.95; }
.kindness-paper .ornament { margin-top:0; margin-bottom:30px; }
.poem-paper blockquote { font-size:14px; line-height:2.15; }
.poem-title-paper h2 { font-size:36px; }
.spine { position:absolute; z-index:6; top:0; bottom:0; left:calc(50% - 11px); width:22px; pointer-events:none; opacity:0; background:linear-gradient(90deg,transparent,#5f42211c 45%,#61432622 49%,#fff4d780 52%,transparent); }
.cover { position:absolute; z-index:8; top:0; left:50%; width:50%; height:100%; transform-origin:left center; transform-style:preserve-3d; }
.cover-front,.cover-back { position:absolute; inset:0; backface-visibility:hidden; }
.cover-front { border-radius:3px 8px 8px 3px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:25px; color:#d5b77e; border:1px solid #bc935b66; background:repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#ffffff03 0 1px,transparent 1px 4px),radial-gradient(ellipse at 30% 20%,#69445555,transparent 70%),linear-gradient(105deg,#352033,#48293f 45%,#392136); box-shadow:inset 7px 0 8px #0004,inset -2px 0 3px #ffffff08,0 7px 18px #0003; }
.cover-front > :not(.cover-border) { flex-shrink:0; }
.cover-back { transform:rotateY(180deg); background:var(--paper); }
.cover-back .paper { border-radius:7px 0 0 7px; }
.cover-border { position:absolute; inset:18px 17px 18px 20px; border:1px solid #d6b77a66; border-radius:2px 4px 4px 2px; pointer-events:none; }
.cover-border::after { content:''; position:absolute; inset:5px; border:1px solid #d6b77a20; }
.cover-edition { font-family:Georgia,serif; font-size:8px; letter-spacing:.24em; text-transform:uppercase; margin:0 0 25px; }
.cover-lotus { width:27%; max-height:95px; stroke:#d1b178; stroke-width:1.1; filter:drop-shadow(0 1px 1px #0006); margin-bottom:20px; }
.cover-front h2 { font-family:Handwritten,cursive; font-size:clamp(36px,5vw,68px); font-weight:400; margin:0; line-height:1.2; text-shadow:0 1px 0 #e9d3a066,0 3px 6px #0006; }
.cover-rule { width:45px; height:1px; background:#b38c5066; margin:20px 0; }
.cover-subtitle { font-size:11px; line-height:1.8; font-style:italic; margin:0; color:#c4a67e; }
.cover-year { margin-top:25px; font-family:Georgia,serif; font-size:10px; letter-spacing:.3em; }
#turn-layer { position:absolute; inset:0; perspective:9000px; pointer-events:none; z-index:5; }
.turning-leaf { position:absolute; top:0; width:50%; height:100%; transform-style:preserve-3d; }
.leaf-front,.leaf-back { position:absolute; inset:0; backface-visibility:hidden; }
.leaf-back { transform:rotateY(180deg); }
.leaf-shade { position:absolute; inset:0; background:linear-gradient(90deg,#5434194d,transparent 45%,#6b4b2430); opacity:0; pointer-events:none; }
.cast-shadow { position:absolute; top:0; bottom:0; width:50%; opacity:0; pointer-events:none; }
.shadow-right { left:50%; transform-origin:left center; background:linear-gradient(90deg,#3c271750,#3c271716 24%,transparent 75%); }
.shadow-left { left:0; transform-origin:right center; background:linear-gradient(270deg,#3c271750,#3c271716 24%,transparent 75%); }
.opening-controls { height:91px; display:flex; flex-direction:column; align-items:center; padding-top:26px; }
[data-state="opening"] .opening-controls { position:absolute; bottom:0; padding-top:26px; pointer-events:none; }
.primary-button { border:1px solid #a68a6166; background:#ae8c4810; color:#e5d1ac; border-radius:30px; padding:12px 25px; font-size:11px; letter-spacing:.04em; transition:background .25s,transform .25s; }
.primary-button:hover { background:#ae8c4824; transform:translateY(-2px); }
.primary-button span { margin-left:15px; }
.opening-controls p { font-size:10px; font-style:italic; color:#ad998b; margin:12px 0 0; }
.book-navigation { width:var(--book-width); height:91px; padding-top:27px; display:flex; align-items:flex-start; justify-content:space-between; }
.book-navigation button,.finale-actions button { min-height:38px; border:1px solid #b696652e; background:#dcc08608; color:#d0b999; font-size:11px; border-radius:25px; padding:9px 17px; transition:background .25s,color .25s; }
.book-navigation button:hover,.finale-actions button:hover { color:#f9e7c8; background:#dcc08618; }
.book-navigation button:disabled { opacity:.35; }
.navigation-middle { display:flex; flex-direction:column; align-items:center; gap:9px; padding-top:4px; }
#page-count { font-size:11px; font-family:Georgia,serif; letter-spacing:.2em; color:#b89e7c; }
.keyboard-hint { font-size:9px; font-style:italic; color:#927c72; }
.colophon { position:relative; margin:0; text-transform:uppercase; letter-spacing:.22em; font:8px Georgia,serif; color:#a68b7180; }
.colophon span { margin:0 10px; }
.portrait-scene { position:fixed; inset:0; z-index:25; background:#0b0610; outline:none; }
.portrait-scene iframe { width:100%; height:100%; border:0; display:block; background:#0b0610; pointer-events:none; }
.portrait-scene.portrait-planting { z-index:31; background:transparent; pointer-events:none; }
.portrait-scene.portrait-planting iframe { background:transparent; }
.portrait-actions { position:absolute; bottom:max(28px,calc(env(safe-area-inset-bottom) + 16px)); left:20px; right:20px; display:flex; justify-content:center; }
.portrait-actions button { min-height:43px; border:1px solid #dc9cc348; border-radius:999px; background:#e9a7d007; color:#e6bfd8; font-size:11px; padding:11px 21px; }
.portrait-actions button:hover { background:#e9a7d015; border-color:#efb6d878; }
.finale { position:fixed; inset:0; z-index:30; background:#100b19; will-change:opacity; }
.finale iframe { width:100%; height:100%; border:0; display:block; background:#100b19; }
.finale-actions { position:absolute; bottom:max(24px,env(safe-area-inset-bottom)); left:20px; right:20px; display:flex; flex-wrap:wrap; gap:8px 12px; justify-content:center; }
.finale-status { position:absolute; bottom:max(88px,calc(env(safe-area-inset-bottom) + 72px)); left:20px; right:20px; width:min(560px,calc(100% - 40px)); margin:0 auto; padding:12px 18px; color:#f6e5c6; border:1px solid #b6966540; border-radius:12px; background:#100b19ed; font:13px/1.6 Georgia,serif; text-align:center; pointer-events:none; }
.finale-actions button { background:#211825dc; color:#f6e5c6; border-color:#ac8b5870; }
.build-history { width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; overflow:auto; overscroll-behavior:contain; color:#bcc8bd; border:0; border-radius:0; background:#070a09; box-shadow:none; font:12px/1.6 Consolas,'Courier New',monospace; }
.build-history::backdrop { background:#000; }
.build-history::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:3; background:repeating-linear-gradient(0deg,transparent 0 3px,#adc6b506 3px 4px); }
.build-history[open] { animation:history-fault .65s steps(1,end); }
.build-history[open]::after { content:''; position:fixed; left:0; right:0; top:24%; height:9px; pointer-events:none; z-index:4; background:#b3c2bc12; box-shadow:0 160px 0 #afb9cb0d; opacity:0; animation:history-tear .65s steps(1,end); }
.history-header { position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 28px; background:#160b0f; border-bottom:1px solid #814a4b59; }
.history-path { margin:0 0 8px; color:#aa9292; font-size:10px; overflow-wrap:anywhere; }
.history-header h2 { margin:0; color:#eda6a4; font:20px/1.3 Consolas,'Courier New',monospace; }
.history-tools { display:flex; align-items:center; gap:20px; }
.history-error-code { font-size:10px; color:#c38c8c; white-space:nowrap; }
.history-header form { margin:0; }
.history-close { min-height:38px; padding:7px 12px; color:#c7b6b6; background:transparent; border:1px solid #775053; border-radius:0; white-space:nowrap; font:11px Consolas,'Courier New',monospace; }
.history-close:hover { background:#77505325; }
.history-close span { margin-left:10px; font-size:18px; vertical-align:-1px; }
.history-error { width:min(1080px,100%); margin:0 auto; padding:22px 28px 16px; color:#859589; font-size:11px; overflow-wrap:anywhere; }
.history-error p { margin:0 0 5px; white-space:pre-wrap; }
.history-error .history-error-message { color:#dda29d; margin-bottom:10px; }
.history-error .history-recovery { color:#a5bca5; margin-top:18px; }
.history-error .history-trace-muted { color:#859185; }
.history-error .history-log-warning { color:#c8b087; }
.build-history[open] .history-log { animation:history-log .12s linear var(--log-delay) backwards; }
.history-snapshot { margin-top:20px; padding:14px 0 8px; border-top:1px dotted #55645165; }
.build-history[open] .history-snapshot { animation:history-data .15s ease-out 2.1s both; }
.history-meta,.history-content,.history-footer { width:min(1080px,100%); margin:0 auto; }
.build-history[open] .history-meta,.build-history[open] .history-content,.build-history[open] .history-footer { animation:history-data .3s ease-out 2.3s both; }
.history-meta { display:flex; flex-wrap:wrap; gap:12px 30px; padding:6px 28px 0; color:#829184; font-size:10px; }
.history-meta strong { margin-left:8px; color:#b8c6b9; font-weight:400; }
.history-content { display:grid; grid-template-columns:.9fr 1.1fr; gap:50px; padding:24px 28px 28px; }
.history-cost,.history-time { min-width:0; border:0; border-radius:0; background:none; padding:0; }
.history-cost { display:flex; flex-direction:column; }
.history-content h3 { margin:0 0 20px; font-size:13px; font-weight:400; color:#b4cbb1; overflow-wrap:anywhere; }
.history-costs { margin:0; }
.history-costs > div { padding:20px 0; border-top:1px dashed #55645165; }
.history-costs dt { font-size:11px; line-height:1.5; color:#98a797; overflow-wrap:anywhere; }
.history-costs dd { display:flex; flex-wrap:wrap; gap:9px; align-items:baseline; margin:9px 0 0; }
.history-costs strong { font:23px/1.1 Consolas,'Courier New',monospace; color:#d6c598; letter-spacing:-.025em; }
.history-costs dd > span { font-size:11px; color:#96a593; }
.history-paid strong { font-size:27px; color:#e1d6b2; }
.history-yearly strong { font-size:23px; color:#c0bc9e; }
.history-costs p { flex-basis:100%; margin:3px 0 0; font-size:11px; color:#899d89; line-height:1.8; }
.history-note { margin:auto 0 0; padding-top:20px; font-size:10px; line-height:1.8; color:#8b9b8b; }
.history-hours { width:100%; border-collapse:collapse; font-size:12px; }
.history-hours thead th { padding:0 0 10px; color:#8b9d8b; font:9px/1.5 Consolas,'Courier New',monospace; text-transform:uppercase; letter-spacing:.1em; text-align:left; }
.history-hours tbody th,.history-hours td { border-top:1px solid #40503d65; padding:8px 0; line-height:1.35; }
.history-hours tbody th { font-weight:400; color:#b9c7b7; text-align:left; white-space:nowrap; }
.history-hours th:last-child,.history-hours td { text-align:right; }
.history-hours td { color:#8b9d8b; font-family:Consolas,'Courier New',monospace; }
.history-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 16px; padding:16px 28px 24px; border-top:1px dashed #55645165; color:#8a9b89; font-size:10px; line-height:1.5; }
.history-footer > span:first-child { font:9px/1.5 Consolas,'Courier New',monospace; letter-spacing:.08em; }
.history-footer-warning { flex-basis:100%; color:#bca17e; overflow-wrap:anywhere; }
@keyframes history-fault { 0% { opacity:0; transform:none; } 8% { opacity:1; transform:translateX(-3px); } 22% { transform:translateX(4px); } 36% { transform:translateX(-1px); } 54%,100% { opacity:1; transform:none; } }
@keyframes history-tear { 0%,16%,40%,100% { opacity:0; } 8% { opacity:1; transform:translateX(7px); } 30% { opacity:.65; transform:translateX(-5px); } }
@keyframes history-data { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
@keyframes history-log { from { opacity:0; } to { opacity:1; } }
@media (max-width:600px) {
 .history-header { padding:16px; gap:10px; }
 .history-path { font-size:8px; letter-spacing:0; }
 .history-header h2 { font-size:16px; }
 .history-tools { gap:8px; }
 .history-error-code { display:none; }
 .history-error { padding:18px 16px; font-size:10px; }
 .history-meta { padding:14px 16px 0; gap:5px 18px; }
 .history-content { grid-template-columns:1fr; gap:16px; padding:16px; }
 .history-note { margin:0; }
 .history-footer { padding:14px 16px; }
 .finale-actions { left:12px; right:12px; gap:8px; }
 .finale-actions button { font-size:10px; padding:9px 12px; }
}
@media (prefers-reduced-motion:reduce) { .build-history[open],.build-history[open]::after,.build-history[open] .history-meta,.build-history[open] .history-content,.build-history[open] .history-footer,.build-history[open] .history-log,.build-history[open] .history-snapshot { animation:none; } }
.noscript-message { position:fixed; bottom:10px; width:100%; text-align:center; }
[data-state="closed"] .spread > .paper-left,[data-state="cake-transition"] .spread > .paper-left { visibility:hidden; }
[data-state="arriving"] .spread > .paper-left,[data-state="resetting"] .spread > .paper-left { visibility:hidden; }
[data-state="portrait"] .reading-room,[data-state="portrait"] .chapter-heading,[data-state="portrait"] .colophon,[data-state="handoff"] .reading-room,[data-state="handoff"] .chapter-heading,[data-state="handoff"] .colophon,[data-state="finale"] .reading-room,[data-state="finale"] .chapter-heading,[data-state="finale"] .colophon { visibility:hidden; }
@media (min-height:850px) { .advice-copy { font-size:15px; } .advice-paper .page-content { padding:45px 40px; } .poem-paper blockquote { font-size:16px; } }
@media (max-width:700px) {
 :root { --book-width:88vw; }
 #keepsake { justify-content:flex-start; padding-top:25px; }
 .chapter-heading { margin-bottom:36px; }
 .book-position { aspect-ratio:auto; height:min(65dvh,620px); }
 .book { transform:none; }
 .board-right,.cover { left:0; width:100%; }
 .board-right { left:-7px; right:-7px; width:auto; }
 .board-left,.spine { display:none; }
 .spread { display:block; }
 .spread .paper { width:100%; height:100%; border-radius:5px; }
 .spread .paper:not(.mobile-visible) { display:none; }
 .cover-front h2 { font-size:62px; }
 .cover-lotus { max-height:85px; }
 .page-content { padding:26px 30px 45px; }
 .advice-copy { font-size:14px; }
 .advice-paper .page-content { padding:24px 28px 42px; }
 .poem-paper blockquote { font-size:15px; }
 .opening-controls,.book-navigation { height:95px; }
 .keyboard-hint { display:none; }
}
@media (max-height:650px) and (min-width:701px) {
 :root { --book-width:min(82vw,660px); }
 #keepsake { justify-content:flex-start; overflow-y:auto; }
 .chapter-heading { margin-bottom:32px; }
 .book-position { aspect-ratio:1.65; }
 .cover-lotus { max-height:55px; margin-bottom:10px; }
 .cover-edition { margin-bottom:15px; }
 .cover-front h2 { font-size:clamp(36px,4.5vw,54px); white-space:nowrap; }
 .cover-rule { margin:14px 0; }
 .cover-year { margin-top:15px; }
 .cover-subtitle { display:none; }
}
@media (max-width:700px) and (max-height:600px) {
 :root { --book-width:min(88vw,350px); }
 .book-position { height:clamp(280px,calc(100dvh - 250px),420px); }
 .cover-front { padding:20px; }
 .cover-edition { margin-bottom:12px; }
 .cover-lotus { max-height:55px; margin-bottom:10px; }
 .cover-front h2 { font-size:46px; }
 .cover-rule { margin:12px 0; }
 .cover-subtitle { font-size:10px; line-height:1.7; }
 .cover-year { margin-top:14px; }
}
@media (max-width:360px) { .chapter-return { width:36px; padding:8px; font-size:0; } .chapter-return span { font-size:14px; margin:0; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; } }