/* A cover and five real, two-sided leaves sharing a spine. */
body{background:linear-gradient(135deg,#fff5e8 0%,#ffd4b8 50%,#ffcad4 100%);background-attachment:fixed;overflow-x:clip}
#app{padding:60px 32px 32px;min-height:calc(100svh - 135px);justify-content:center;perspective:none}
.signature{position:relative;z-index:2;display:flex;justify-content:center;text-align:center;padding:16px 24px 30px;margin-top:auto;color:#7f465b}
.signature p{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;line-height:1.45}
.signature-kicker{font-size:12px;text-transform:uppercase;letter-spacing:2.2px;color:#9a6b78}
.signature-date{position:relative;font-family:var(--serif);font-size:17px!important;color:#7f465b!important;padding:0 42px;margin-top:1px}
.signature-date:before,.signature-date:after{content:'';position:absolute;top:50%;width:28px;height:1px;background:#b98c97;opacity:.65}
.signature-date:before{right:100%}.signature-date:after{left:100%}
.signature em{font-family:var(--serif);font-size:20px;font-weight:500;color:#9f5269}
.back{display:grid;place-items:center;padding:0;line-height:1}
.back svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Geometrically centered SVG arrow for all forward buttons. */
.button-arrow{display:block;width:22px;height:22px;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.balloons{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.balloon{--color:#e8a5b7;position:absolute;left:4%;bottom:-360px;width:125px;height:154px;border-radius:49% 51% 48% 48% / 45% 45% 55% 55%;background:radial-gradient(ellipse at 28% 25%,#ffffffd9 0%,#ffffff65 12%,transparent 37%),radial-gradient(ellipse at 35% 30%,var(--color) 15%,var(--color) 55%,#98426288 100%);box-shadow:inset -10px -12px 24px #8f445224,inset 4px 4px 16px #fff6;animation:balloon-rise 22s linear infinite;opacity:.8}
.balloon:before{content:'';position:absolute;left:calc(50% - 7px);bottom:-8px;width:14px;height:14px;background:var(--color);clip-path:polygon(50% 0,100% 100%,0 100%);border-radius:2px}
.balloon:after{content:'';position:absolute;left:50%;top:calc(100% + 8px);width:26px;height:175px;border-left:1px solid #9d778170;border-radius:50%;transform:rotate(-5deg);transform-origin:top}
.balloon.rose{left:3%;animation-delay:-7s}.balloon.peach{--color:#f6b99c;left:85%;width:155px;height:188px;animation-duration:27s;animation-delay:-23s}.balloon.lilac{--color:#cfb4df;left:12%;width:98px;height:120px;animation-duration:25s;animation-delay:-19s}.balloon.gold{--color:#edce91;left:92%;width:105px;height:132px;animation-duration:24s;animation-delay:-4s}.balloon.blush{--color:#f0c0ca;left:72%;width:130px;height:158px;animation-duration:30s;animation-delay:-13s}.balloon.violet{--color:#c9abd6;left:-3%;width:145px;height:178px;animation-duration:29s;animation-delay:-29s}
@keyframes balloon-rise{0%{transform:translate(0,0) rotate(-8deg)}25%{transform:translate(24px,-35vh) rotate(7deg)}50%{transform:translate(-18px,-70vh) rotate(-5deg)}75%{transform:translate(20px,-105vh) rotate(6deg)}100%{transform:translate(0,calc(-100vh - 570px)) rotate(-8deg)}}
.book-stage{width:100%;display:flex;justify-content:center;perspective:2400px;position:relative;padding:15px 0 25px}
.book{--book-height:640px;width:min(1160px,calc(100vw - 80px));height:var(--book-height);position:relative;flex-shrink:0;transform-style:preserve-3d;transition:transform 1.3s cubic-bezier(.4,0,.2,1),width 1.3s cubic-bezier(.4,0,.2,1)}
.book.closed{transform:translateX(-25%)}
.leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.3s cubic-bezier(.4,0,.2,1);transform:rotateY(0deg)}
.leaf.turned{transform:rotateY(-180deg)}
.page-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fffaf5;border:1px solid #ddc1b9;box-shadow:none;cursor:pointer;border-radius:2px 7px 7px 2px;overflow:hidden;outline-offset:5px}
.page-face:focus-visible{outline:3px solid #b86b80}
.page-face:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#8b56521a,transparent 8%,transparent 93%,#a166580a);opacity:.65;transition:opacity .6s}
.page-back{transform:rotateY(180deg);border-radius:7px 2px 2px 7px;box-shadow:none}
.page-back:after{background:linear-gradient(270deg,#8b565233,transparent 10%)}
.leaf.turning .page-face:after{opacity:.15}
.page-content{height:100%;width:100%;box-sizing:border-box}
.book-cover{background:#fff5ed;border:1px solid #d6ada6;padding:28px}
.book-cover:before{content:'';position:absolute;inset:15px;border:1px solid #dcbdb280;border-radius:2px;pointer-events:none}
.cover-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}
.cover-inner h1{font:700 168px/1 var(--sans);font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;letter-spacing:-6px;white-space:nowrap;margin:0 0 2px;color:#9f3f60;position:relative;z-index:1}
.cover-gif{display:block;width:310px;height:365px;max-width:100%;object-fit:contain;animation:none;mix-blend-mode:multiply}
.book-hint{font-size:14px;letter-spacing:.3px;color:#915a65;text-align:center;margin:16px 0 0;min-height:25px}
.book .wish-art{padding:36px;background:#f9e3df;justify-content:center}
.book .wish-art h2{font-size:58px;line-height:1.2;margin-top:35px;overflow-wrap:break-word}
.book .wish-emoji{font-size:112px}
.book .wish-copy{padding:45px 48px;justify-content:center;background:#fffaf5}
.book .wish-copy .eyebrow{font-size:13px;line-height:1.7;letter-spacing:1.7px}
.book .wish-copy p{font-size:24px;line-height:1.65;margin:27px 0}
.book .wish-copy .note{font-size:29px;line-height:1.45;margin:0}
.interlude p{font-size:21px}.interlude .eyebrow,.roulette>.eyebrow{font-size:13px}.button{font-size:16px}.roulette>p{font-size:19px}.roulette{width:min(1160px,100%)}
.reel-window:after{background:none;box-shadow:inset 12px 0 20px -14px #a36772,inset -12px 0 20px -14px #a36772}
.prize{width:210px;flex-basis:210px;height:245px}.prize b{font-size:19px;line-height:1.35}.prize img{width:180px;height:155px}.special-prize{background:linear-gradient(140deg,#fbecc9,#e8d5b1)!important;border-color:#b28a46}.prize.special-prize b{color:#704520}.keep-together{white-space:nowrap;display:inline-block}.result h2{font-size:42px;line-height:1.3}.result p{font-size:18px}
/* Keep the newspaper's composition, only increase reading sizes on desktop. */
@media(min-width:851px){.news-shell{width:min(1120px,100%)}.news-masthead h1{font-size:36px}.news-article h2{font-size:36px}.news-article p{font-size:18px}.news-article .tag,.news-meta{font-size:12px}.news-masthead .eyebrow{font-size:12px}.news-bottom .packing-status{font-size:13px}.satire{font-size:13px}}
@media(max-width:1000px) and (min-width:601px){.book{--book-height:610px}.book .wish-copy{padding:30px}.book .wish-copy p{font-size:20px}.book .wish-copy .note{font-size:25px}.book .wish-art h2{font-size:43px}.book .wish-emoji{font-size:90px}}
@media(max-width:600px){#app{padding:25px 12px 15px;min-height:calc(100svh - 130px)}.signature{padding:14px 18px 22px}.signature-kicker{font-size:10px;letter-spacing:1.6px}.signature-date{font-size:15px!important;padding:0 34px}.signature-date:before,.signature-date:after{width:23px}.signature em{font-size:18px}.book-stage{padding:10px 0 20px;perspective:1800px}.book{width:calc(100vw - 28px);--book-height:640px}.book.closed{width:calc(200vw - 70px)}.book-cover{padding:20px}.cover-inner h1{font-size:142px}.cover-gif{width:270px;height:340px}.book .wish-art{padding:14px}.book .wish-art h2{font-size:28px;line-height:1.25;margin-top:25px}.book .wish-emoji{font-size:62px}.book .wish-copy{padding:20px 16px}.book .wish-copy .eyebrow{font-size:9px;letter-spacing:1px;line-height:1.65}.book .wish-copy p{font-size:15px;line-height:1.65;margin:20px 0}.book .wish-copy .note{font-size:19px;line-height:1.4}.book-hint{font-size:12px;margin-top:8px}.balloon{width:90px;height:112px;opacity:.65}.balloon.peach{left:83%;width:120px;height:146px}.balloon.blush{left:80%}.balloon.lilac{left:-12%}.balloon.rose{left:-13%}.interlude p{font-size:18px}.prize{width:158px;flex-basis:158px;height:205px}.prize img{width:130px;height:130px}.prize b{font-size:16px}.result h2{font-size:32px}.result p{font-size:16px}.roulette>p{font-size:17px}.button{font-size:14px}.interlude .eyebrow,.roulette>.eyebrow{font-size:11px}}
@media(max-width:360px){.book{--book-height:730px}.book .wish-copy{padding:20px 12px}.book .wish-copy p{font-size:14px}.book .wish-copy .note{font-size:18px}.book .wish-art h2{font-size:25px}.cover-inner h1{font-size:130px}}
@media(prefers-reduced-motion:reduce){.book,.leaf{transition:none}.balloon,.wish-emoji{animation:none}.balloon{bottom:20%}.cover-gif{visibility:hidden}.cover-inner:after{content:'🎂';font-size:150px;position:absolute;top:45%}}

/* One ground shadow, a connected paper backing and a shared spine. */
.book-shadow{position:absolute;inset:7px 0 -4px;pointer-events:none;border-radius:9px;box-shadow:0 24px 44px -15px rgba(100,48,59,.24);opacity:.85;transition:opacity .5s ease;transform:translateZ(-2px)}
.book.closed .book-shadow{left:50%}
.book.is-turning .book-shadow{opacity:.3}
.book-binding{position:absolute;top:1px;bottom:-2px;left:calc(50% - 5px);width:10px;pointer-events:none;background:#efded4;transform:translateZ(-1px);opacity:1;transition:opacity .4s ease}
.book.closed .book-binding,.book.is-turning .book-binding{opacity:0}
.book:after{content:'';position:absolute;top:1px;bottom:1px;left:calc(50% - 18px);width:36px;background:linear-gradient(90deg,transparent,rgba(115,73,67,.07) 36%,rgba(96,61,57,.19) 49%,rgba(255,249,240,.6) 52%,rgba(136,90,72,.06) 62%,transparent);pointer-events:none;z-index:22;opacity:1;transition:opacity .65s ease}
.book.closed:after,.book.is-turning:after{opacity:0}
.page-front{border-left-color:transparent;border-top-left-radius:0;border-bottom-left-radius:0}
.page-back{border-right-color:transparent;border-top-right-radius:0;border-bottom-right-radius:0}
.book-cover{border-left-color:#d6ada6}
.balloon:after{content:none}
.balloon-string{position:absolute;top:calc(100% + 7px);left:50%;width:48px;height:190px;overflow:visible;transform:translateX(-50%);color:#9d778170;pointer-events:none}
.balloon.apricot{--color:#efc9a5;left:94%;width:110px;height:136px;animation-duration:26s;animation-delay:-17s}
.question-screen>.eyebrow{display:inline-block;position:relative;top:22px}
@media(hover:hover) and (pointer:fine){
  .book.closed:not(.is-turning) .leaf[data-leaf="0"]{transition:transform .65s cubic-bezier(.2,.65,.3,1)}
  .book.closed:not(.is-turning):has(.book-cover:hover) .leaf[data-leaf="0"]{transform:rotateY(-12deg)}
}
@media(prefers-reduced-motion:reduce){.book-shadow,.book-binding,.book:after{transition:none}.book.closed:not(.is-turning):has(.book-cover:hover) .leaf[data-leaf="0"]{transform:none}}

/* Never cast a full-spread shadow before the left page exists. */
.book.cover-turn .book-shadow{visibility:hidden;opacity:0;transition:none}
.page-face,.page-content{opacity:1}