@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Kalam:wght@400;700&family=Libre+Caslon+Display&display=swap');
:root{--blue:#294bd2;--ink:#202954;--red:#aa2947;--pink:#ffc5d8;--paper:#fffefa;--line:#dce3f2}*{box-sizing:border-box}body{margin:0;background-color:#eef4ff;background-image:linear-gradient(90deg,#426bd00c 50%,transparent 50%),linear-gradient(#426bd00c 50%,transparent 50%);background-size:38px 38px;color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.45}button:focus-visible,a:focus-visible{outline:3px solid #ef5289;outline-offset:5px}.top{max-width:1480px;margin:auto;padding:28px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #294bd225}.top a{text-decoration:none;color:var(--blue);font-size:27px;font-weight:700;letter-spacing:-1px}.top a span{display:block;font-family:'Kalam',cursive;font-size:14px;font-weight:400;letter-spacing:0;color:var(--ink)}.edition{font-size:12px;letter-spacing:2px}.sound{border:1px solid #294bd250;border-radius:30px;padding:10px 17px;background:#ffffffb0;font-size:14px}main{max-width:1340px;margin:0 auto;padding:30px 95px 18px 40px}.above{display:flex;justify-content:space-between;align-items:center;padding:0 7px 20px;font-size:12px;letter-spacing:1.8px}.hand{font-family:'Kalam',cursive;font-size:21px;letter-spacing:0}.book-wrap{position:relative}.book{position:relative;display:grid;grid-template-columns:1fr 1fr;min-height:660px;border:10px solid var(--blue);border-radius:12px;box-shadow:0 6px 0 #153082,0 12px 0 #fff,0 15px 0 #9eaccb,0 26px 50px #22396a30;background:var(--paper);isolation:isolate}.paper{position:relative;padding:36px;min-width:0;min-height:640px;background:var(--paper);overflow:hidden}.left{border-radius:3px 0 0 3px;background-image:linear-gradient(90deg,transparent 95%,#12215a0e);border-right:1px solid #bbc4dc}.right{background-image:linear-gradient(90deg,#12215a0c,transparent 6%)}.binding{position:absolute;left:calc(50% - 9px);top:8%;bottom:8%;width:18px;z-index:8;pointer-events:none;background:repeating-linear-gradient(180deg,transparent 0 46px,#a6acbc 47px,#f7f8ff 50px,#8d96af 52px,transparent 54px 82px)}.tabs{position:absolute;top:42px;left:100%;display:flex;flex-direction:column;gap:13px;z-index:0}.tabs button{width:47px;min-height:94px;writing-mode:vertical-rl;display:flex;justify-content:center;align-items:center;gap:9px;border:0;border-radius:0 11px 11px 0;background:#a9bffb;font-size:14px;font-weight:700;transition:width .2s}.tabs button:nth-child(2){background:#ffc3d7}.tabs button:nth-child(3){background:#fbe08c}.tabs button:nth-child(4){background:#c4b9ee}.tabs button:nth-child(5){background:#f6a38e}.tabs button[aria-current=true]{width:57px;color:#fff;background:var(--blue)}.tabs button span{font-size:18px}.book-footer{display:flex;justify-content:space-between;align-items:center;margin:30px 10px 0}.book-footer button{background:none;border:0;font-family:'Kalam',cursive;font-size:21px}.book-footer #page-count{font-size:12px;letter-spacing:1.5px;text-transform:uppercase}.under{text-align:center;font-family:'Kalam',cursive;font-size:17px;color:#5c6783;margin:18px 0 0}.under span{color:var(--red)}.eyebrow{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;margin:0 0 20px}.cover-title{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;font-size:clamp(64px,6.6vw,100px);line-height:.9;letter-spacing:-3px;margin:30px 0 18px}.cover-title em{font-family:'Kalam',cursive;font-size:.82em;color:var(--blue);font-weight:400;letter-spacing:-4px}.cover-sub{max-width:280px;line-height:1.7;font-size:16px}.badge{display:inline-block;background:var(--pink);padding:9px 18px;border:1px dashed var(--red);transform:rotate(-7deg);font-family:'Kalam',cursive;font-size:23px;color:#802b45;box-shadow:3px 3px 0 #e49aac;margin-top:9px}.primary{border:0;border-radius:6px;background:var(--blue);color:#fff;padding:13px 20px;font-weight:600;box-shadow:3px 3px 0 #182d91;min-height:46px}.cover-start{display:block;margin-top:35px}.signature{font-family:'Kalam',cursive;font-size:24px;transform:rotate(-3deg);margin-top:30px}.cover-left .star{position:absolute;right:30px;top:92px;font-size:48px;color:#e1a52b;transform:rotate(12deg)}.cover-right{padding:0;background-color:#fffefa;background-image:radial-gradient(#91a8dc66 .8px,transparent .8px);background-size:17px 17px}.collage{height:640px;position:relative}.print{padding:8px 8px 25px;background:white;box-shadow:0 4px 10px #26365435;border:1px solid #d5d7df;position:absolute;cursor:pointer;transition:transform .2s;display:block}.print img{width:100%;height:100%;object-fit:cover;display:block}.print:hover{z-index:10;transform:rotate(0) scale(1.05)!important}.print::before{content:'';position:absolute;width:62px;height:20px;background:#f0c18499;top:-9px;left:calc(50% - 31px);transform:rotate(-5deg);z-index:1}.p1{width:46%;height:235px;left:7%;top:51px;transform:rotate(-10deg);z-index:3}.p2{width:38%;height:210px;right:3%;top:18px;transform:rotate(9deg);z-index:2}.p3{width:38%;height:200px;left:2%;top:299px;transform:rotate(-9deg);z-index:4}.p4{width:41%;height:215px;right:8%;top:239px;transform:rotate(11deg);z-index:5}.p5{width:34%;height:173px;left:19%;bottom:15px;transform:rotate(7deg);z-index:6}.p6{width:34%;height:181px;right:0;bottom:17px;transform:rotate(-8deg);z-index:7}.collage-caption{position:absolute;top:235px;left:51%;font-family:'Kalam',cursive;color:var(--red);font-size:22px;transform:rotate(-5deg);z-index:7}.chapter-title{font-family:'Libre Caslon Display',Georgia,serif;font-size:65px;font-weight:400;line-height:1.03;letter-spacing:-1px;margin:18px 0}.chapter-title em{color:var(--blue)}.body-copy{line-height:1.8;max-width:340px}.index-links{display:grid;gap:14px;margin-top:28px}.index-links button{border:0;border-bottom:1px dashed #a6b4d5;background:transparent;display:flex;justify-content:space-between;text-align:left;padding:12px 0;font-size:18px;gap:15px}.index-links small{font-size:13px;display:block;color:#63708d;margin-top:4px}.index-links .check{color:var(--blue);font-weight:700}.progress{display:flex;gap:9px;margin:25px 0}.progress span{width:42px;height:8px;background:#dce1ed;border-radius:8px}.progress span.done{background:var(--blue)}.scrap-note{padding:25px;background:#fff0ab;box-shadow:3px 5px 0 #e1cc7650;transform:rotate(-3deg);font-family:'Kalam',cursive;font-size:22px;line-height:1.5;margin:35px 0;border:0;text-align:left;width:90%}.photo-page{height:480px;padding:12px 12px 40px;background:white;box-shadow:0 3px 12px #1b2e5530;transform:rotate(2deg);position:relative}.photo-page img{width:100%;height:100%;object-fit:contain;background:#f0f0f0}.photo-page small{font-family:'Kalam',cursive;position:absolute;bottom:10px;left:17px;font-size:18px}.photo-counter{font-family:'Kalam',cursive;font-size:23px;margin-top:28px}.game-title{font-family:'Kalam',cursive;font-size:30px;margin:0 0 10px}.game-hint{font-size:14px;line-height:1.6;margin-bottom:20px;color:#65718d}.quiz-options{display:grid;gap:10px}.quiz-options button{background:#fff;border:1px solid #bac7e9;border-radius:8px;text-align:left;padding:14px;min-height:48px}.quiz-options button.correct{background:#d7edda;border-color:#598867}.quiz-options button.wrong{background:#ffe2e5;border-color:#b73555}.feedback{min-height:46px;line-height:1.5;font-size:15px;margin:14px 0}.puzzle{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;max-width:360px;aspect-ratio:1;margin:15px auto}.tile{border:0;background-image:url('photos/1.jpg');background-size:300% 300%;border-radius:3px;min-width:0}.tile.selected{outline:4px solid #f08aaa;outline-offset:-4px;filter:brightness(1.1)}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.card{aspect-ratio:.78;border:0;border-radius:6px;background:var(--blue);color:#fff;font-family:'Kalam',cursive;font-size:31px;padding:4px;overflow:hidden}.card img{height:100%;width:100%;object-fit:cover;border-radius:3px}.card.matched{background:#e596b4;opacity:.8}.small-button{border:1px solid #bcc7df;background:white;border-radius:6px;padding:10px 14px;margin:5px 5px 5px 0;font-size:14px;min-height:42px}.cake-layout{display:flex;gap:14px;align-items:flex-start;justify-content:center}.cake-board{width: min(100%,220px);height:auto;background:#fff6fc;border:3px solid #b55f83;border-radius:5px;touch-action:none}.cake-side{font-size:14px;max-width:120px}.cake-side strong{display:block;font-family:'Kalam',cursive;font-size:33px}.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px}.controls button{border:1px solid #aebce2;background:#fff;min-width:45px;min-height:43px;border-radius:6px;font-size:18px}.moon{background:#19284b!important;color:#f9f0dd}.moon .chapter-title em{color:#f5c9da}.moon .eyebrow{color:#bcbfe0}.moon .body-copy{color:#d2d8eb}.moon.right{background:#223258!important}.moon-symbol{font-family:Georgia,serif;font-size:120px;color:#ffe7af;text-align:center;margin:10px 0}.letter-pocket{border:1px solid #929ac3;background:#ffffff0c;color:#fff4e3;padding:24px;margin:16px 0;width:100%;text-align:left;font-family:'Kalam',cursive;font-size:24px;border-radius:3px}.letter-pocket span{display:block;font-family:'DM Sans',sans-serif;font-size:13px;color:#c4cee4;margin-top:10px}.gift-lock{text-align:center;border:2px dashed #d397b1;padding:34px 15px;background:#fff0f6;margin-top:35px}.gift-lock .big{font-family:'Libre Caslon Display',serif;font-size:74px;color:var(--red)}.gift-list{list-style:none;padding:0;line-height:2.5}.gift-list span{float:right;color:var(--blue)}.page-enter{animation:pageIn .42s ease-out}@keyframes pageIn{from{opacity:.2;transform:perspective(1400px) rotateY(-9deg)}to{opacity:1;transform:none}}dialog{border:0;border-radius:5px;padding:40px;background:#fffdf4;color:var(--ink);width:min(90vw,550px);box-shadow:0 25px 90px #10182e66}dialog::backdrop{background:#10182e9c;backdrop-filter:blur(4px)}dialog h2{font-family:'Kalam',cursive;font-size:30px}dialog p{line-height:1.8}dialog img{max-width:100%;max-height:70vh;object-fit:contain;display:block;margin:auto}.close{position:absolute;right:12px;top:8px;border:0;background:none;font-size:30px}.image-modal{padding:25px}.image-modal .close{background:white;border-radius:100%;z-index:1}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:15px 25px;border-radius:8px;z-index:30;display:none;max-width:90vw;text-align:center}.win{background:#e2edff;border:1px dashed var(--blue);padding:18px;margin:15px 0}.win strong{font-family:'Kalam',cursive;font-size:24px}.muted{color:#69738c;font-size:14px;line-height:1.7}
@media(min-width:1450px){main{padding-top:42px}.paper,.collage{min-height:690px}.collage{height:690px}}
@media(max-width:1050px){main{padding-left:20px;padding-right:75px}.paper{padding:25px}.cover-title{font-size:75px}.edition{display:none}.photo-page{height:430px}.cake-layout{gap:8px}.cake-board{width:180px}.chapter-title{font-size:55px}}
@media(max-width:720px){.top{padding:18px 20px}.top a{font-size:24px}.sound{font-size:13px;padding:8px 12px}main{padding:22px 49px 20px 12px}.above{padding-bottom:12px}.above>span:first-child{font-size:10px;letter-spacing:.8px;max-width:175px}.above .hand{font-size:15px}.book{display:block;border-width:6px;min-height:0}.binding{display:none}.paper{min-height:0;padding:24px;border-right:0}.paper.left{border-bottom:1px dashed #c6cfe3}.cover-left{min-height:360px!important}.cover-title{font-size:74px;margin:16px 0 10px;line-height:.87}.cover-title br:first-of-type{display:none}.cover-sub{max-width:210px;font-size:14px;line-height:1.6}.cover-left .eyebrow{margin-bottom:10px;font-size:10px}.badge{position:absolute;right:17px;bottom:84px;font-size:17px;padding:7px}.cover-start{margin-top:15px}.signature{font-size:19px;margin:22px 0 0}.cover-left .star{font-size:35px;right:20px;top:70px}.cover-right{padding:0}.collage{height:490px}.p1{height:185px;top:30px}.p2{height:165px}.p3{height:163px;top:229px}.p4{height:173px;top:180px}.p5{height:140px;bottom:12px}.p6{height:140px;bottom:5px}.collage-caption{top:172px;font-size:18px}.tabs{top:24px;gap:10px}.tabs button{width:34px;min-height:85px;font-size:12px;border-radius:0 8px 8px 0}.tabs button[aria-current=true]{width:40px}.tabs button span{font-size:15px}.book-footer{margin:25px 0 0}.book-footer button{font-size:16px;padding:7px 0}.book-footer #page-count{font-size:10px;letter-spacing:.3px}.under{font-size:14px}.chapter-title{font-size:49px;margin:10px 0}.body-copy{font-size:15px;line-height:1.6}.scrap-note{font-size:20px;margin:22px 0}.photo-page{height:380px}.memory-grid{gap:6px}.card{font-size:24px}.moon-symbol{font-size:60px;margin:0}.cake-board{width:190px}.cake-side{max-width:80px}.cake-side strong{font-size:27px}.index-links{margin-top:15px}.progress{margin:15px 0}.game-title{font-size:27px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* A closed kraft-paper cover, with cut-paper typography and a moonlit setting. */
body{background-color:#15213c;background-image:conic-gradient(#4a2437 25%,#15213c 0 50%,#4a2437 0 75%,#15213c 0);background-size:112px 112px;background-attachment:fixed}
.top{border-color:#ddc58c2b}.top a{color:#e9cd83}.top a span{color:#e7dcd3}.edition{color:#e2d6db}.sound{background:#17223ed9;border-color:#b5a4bb66;color:#fff0d7}.above{color:#e9d9bd}.under{color:#e2c9d3}.under span{color:#e8ba75}.book-footer{color:#f3e8d4}.book{border-color:#876342;box-shadow:0 6px 0 #4a3221,0 12px 0 #e6d9be,0 15px 0 #6d5036,0 28px 55px #0008}.tabs button[aria-current=true]{background:#722f49}.tabs button:nth-child(1){background:#c69c6c}.tabs button:nth-child(2){background:#d6a6b6}.tabs button:nth-child(3){background:#e4be70}.tabs button:nth-child(4){background:#283b66;color:#fff2d8}.tabs button:nth-child(5){background:#93445d;color:#fff2d8}.tabs button[aria-current=true]{background:#722f49;color:white}
.closed-book main{max-width:900px;padding-right:65px;padding-left:35px}.closed-book .above{max-width:700px;margin:auto}.closed-book .book-wrap{max-width:700px;margin:0 auto}.closed-book .book{display:block;min-height:0;border:1px solid #725031;border-left:23px solid #62442b;border-radius:5px 12px 12px 5px;background:#b58b59;box-shadow:4px 2px 0 #211b18,8px 4px 0 #9a825f,12px 5px 0 #322923,16px 8px 0 #bb9364,18px 12px 0 #68462c,0 30px 60px #0008;transform:rotate(-1deg)}
.closed-book .binding{left:-31px;top:32px;bottom:35px;width:29px;background:repeating-linear-gradient(180deg,transparent 0 17px,#181a1f 18px,#c2bfb2 21px,#37373c 24px,transparent 27px 62px);border-radius:5px}
.closed-book .cover-left{padding:32px 35px 24px;min-height:0!important;border:0;border-radius:0 10px 10px 0;background-color:#bd9766;background-image:repeating-linear-gradient(5deg,#ffffff04 0px,#ffffff04 1px,transparent 1px,transparent 4px),repeating-linear-gradient(91deg,#51331906 0px,#51331906 1px,transparent 1px,transparent 3px),linear-gradient(100deg,#6c4a3338,transparent 10%,#fff0b510 70%,#61462820);box-shadow:inset 0 0 0 1px #d4b487,inset 8px 0 17px #6e4e3018;overflow:visible}
.closed-book .cover-right{display:none}.closed-book .tabs{top:80px;left:calc(100% + 8px);gap:17px}.closed-book .tabs button{width:32px;min-height:86px;font-size:12px}.closed-book .tabs button[aria-current=true]{width:39px}.closed-book .book-footer{display:none}.closed-book .under{margin-top:38px}.cover-top{position:relative;padding-bottom:5px}.cover-top .eyebrow{font-size:11px;color:#46311e;letter-spacing:2px;margin-bottom:24px}.cutout-title{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:10px;max-width:100%;font-size:48px;line-height:1.04;letter-spacing:0;font-weight:700}.cutout-word{display:flex;align-items:center;gap:4px;max-width:100%;isolation:isolate;white-space:nowrap}.paper-letter{display:inline-block;position:relative;padding:0 6px 2px;box-shadow:2px 3px 2px #3e291c30;text-align:center;min-width:.58em;font-family:Georgia,serif;color:#202c40;background:#f3e7bf;transform:rotate(-5deg)}
.letter-0{background:#e5d2a2;color:#22403e;font-style:italic;transform:rotate(-8deg)}.letter-1{background:#8caba7;color:#fff3d3;font-family:'DM Sans',sans-serif;transform:rotate(5deg);clip-path:polygon(0 4%,100% 0,95% 100%,3% 93%)}.letter-2{background:#efc454;color:#8b2548;font-style:italic;transform:rotate(-4deg);font-family:Georgia,serif}.letter-3{background:#eaded6;color:#202327;font-family:'Courier New',monospace;transform:rotate(6deg)}.letter-4{background:#d5a0ad;color:#592d3a;font-family:Georgia,serif;transform:rotate(-3deg);clip-path:polygon(3% 0,100% 6%,97% 94%,0 100%)}.letter-5{background:#263b5b;color:#f6e8bc;font-family:'DM Sans',sans-serif;transform:rotate(5deg)}.letter-6{background:#d38b68;color:#70243f;font-style:italic;transform:rotate(-6deg)}.letter-7{background:#eee6d1;color:#284557;font-family:Georgia,serif;transform:rotate(3deg)}.word-0{font-size:1.2em;padding-left:15px}.word-1{font-size:.95em}.word-2{font-size:1.3em;padding-left:38px}
.birthday-postit{position:absolute;right:3px;bottom:-22px;z-index:15;transform:rotate(9deg);width:150px;min-height:139px;padding:22px 10px 10px;text-align:center;font-family:'Kalam',cursive;font-size:25px;line-height:1.15;background:linear-gradient(#e5c877 0 24px,#f3db8e 24px);color:#593723;box-shadow:3px 6px 6px #3d271940;border:0}.birthday-postit span{display:block;font-size:29px;margin-top:8px;color:#81334d}.cover-cascade{height:460px;margin-top:20px}.cover-cascade .p1{width:37%;height:220px;left:4%;top:18px;transform:rotate(-10deg)}.cover-cascade .p2{width:32%;height:205px;right:27%;top:10px;transform:rotate(7deg)}.cover-cascade .p3{width:30%;height:190px;left:auto;right:0;top:66px;transform:rotate(10deg)}.cover-cascade .p4{width:34%;height:211px;left:0;right:auto;top:235px;transform:rotate(-7deg)}.cover-cascade .p5{width:34%;height:202px;left:31%;bottom:5px;transform:rotate(6deg)}.cover-cascade .p6{width:32%;height:202px;right:0;bottom:0;transform:rotate(-8deg)}.cover-cascade .print{padding-bottom:20px}.cover-cascade .print::before{background:#ddbd7aad}.cover-bottom{display:flex;flex-direction:column;align-items:center;padding-top:15px;gap:14px}.cover-bottom .signature{color:#fce6a1;font-size:28px;text-shadow:0 1px 1px #5f391f,1px 1px 0 #714a28;margin:10px 0;transform:rotate(-3deg);font-weight:700}.cover-bottom .cover-start{margin:0;background:#26324d;border:1px solid #d5b67b;box-shadow:2px 3px 0 #50341f;color:#f8e5ba;font-family:'Kalam',cursive;font-size:19px;padding:10px 22px}.opening{animation:openScrapbook .65s ease-out;transform-origin:left center}@keyframes openScrapbook{from{opacity:.4;transform:perspective(1500px) rotateY(-12deg) scale(.94)}to{opacity:1;transform:perspective(1500px) rotateY(0) scale(1)}}
@media(max-width:720px){body{background-size:80px 80px}.closed-book main{padding:20px 42px 20px 18px}.closed-book .book{border-left-width:15px;box-shadow:3px 2px 0 #211b18,6px 4px 0 #9a825f,9px 6px 0 #322923,11px 9px 0 #bb9364,0 24px 40px #0008}.closed-book .cover-left{padding:23px 16px 22px}.closed-book .binding{left:-22px;width:24px;background-size:auto 54px}.closed-book .tabs{left:calc(100% + 6px);top:65px;gap:12px}.closed-book .tabs button{width:25px;min-height:80px;font-size:11px;gap:5px}.closed-book .tabs button[aria-current=true]{width:29px}.closed-book .tabs button span{font-size:14px}.cover-top .eyebrow{font-size:9px;letter-spacing:1px;margin-bottom:20px}.cutout-title{font-size:clamp(20px,5.2vw,36px);gap:9px}.cutout-word{gap:2px}.paper-letter{padding:0 3px 2px}.word-0{padding-left:5px}.word-2{padding-left:15px}.birthday-postit{right:-4px;bottom:-39px;width:93px;min-height:92px;font-size:18px;padding:16px 5px 5px;background:linear-gradient(#e5c877 0 16px,#f3db8e 16px)}.birthday-postit span{font-size:21px;margin-top:4px}.cover-cascade{height:340px;margin-top:43px}.cover-cascade .p1{width:42%;height:163px;left:0;top:0}.cover-cascade .p2{width:38%;height:151px;right:23%;top:3px}.cover-cascade .p3{width:36%;height:145px;right:-3%;top:55px}.cover-cascade .p4{width:40%;height:151px;left:-3%;top:175px}.cover-cascade .p5{width:39%;height:141px;left:30%;bottom:0}.cover-cascade .p6{width:36%;height:145px;right:-4%;bottom:-8px}.cover-cascade .print{padding:5px 5px 16px}.cover-cascade .print::before{width:42px;left:calc(50% - 21px);height:15px;top:-6px}.cover-bottom{gap:8px;padding-top:22px}.cover-bottom .signature{font-size:22px;margin:8px 0}.cover-bottom .cover-start{font-size:17px;padding:10px 12px}.closed-book .under{font-size:13px}.closed-book .above>span:first-child{max-width:150px;font-size:9px}.closed-book .above .hand{font-size:14px}}
@media(prefers-reduced-motion:reduce){.opening{animation:none}}
/* Landscape scrapbook and brighter blue gingham. */
body{background-color:#b6d8f3;background-image:conic-gradient(#19345b 25%,#b6d8f3 0 50%,#19345b 0 75%,#b6d8f3 0);background-size:44px 44px}
.top{position:relative;isolation:isolate;overflow:hidden;max-width:none;min-height:130px;background:linear-gradient(110deg,#090f28,#152348 65%,#0d1632);border-bottom:2px solid #d4bd8166;box-shadow:0 7px 25px #08132b40;padding:28px max(5%,calc((100vw - 1370px)/2));padding-right:max(140px,calc((100vw - 1170px)/2))}.top>a,.top>.edition,.top>button{position:relative;z-index:2}.top .sound{background:#15213fe8}.top .edition{color:#f1dfb5}.banner-moon{position:absolute;right:34px;top:2px;line-height:1;font-family:Georgia,serif;font-size:115px;color:#ffeab2;text-shadow:0 0 28px #eec98250;transform:rotate(-18deg);pointer-events:none}.banner-stars{position:absolute;inset:0;pointer-events:none;z-index:0;color:#f6deb1}.banner-stars i{position:absolute;font-style:normal;font-size:21px}.banner-stars i:nth-child(1){left:24%;top:12px}.banner-stars i:nth-child(2){left:37%;bottom:15px;font-size:28px}.banner-stars i:nth-child(3){left:60%;top:12px}.banner-stars i:nth-child(4){left:76%;bottom:15px}.banner-stars i:nth-child(5){right:13px;bottom:12px;font-size:17px}.banner-stars i:nth-child(6){left:11%;bottom:5px;font-size:20px}.above{color:#fff6e9;text-shadow:0 1px 4px #092342,0 1px 10px #092342}.under{color:#fff5e7;text-shadow:0 1px 4px #092342,0 1px 10px #092342}.book-footer{background:#152348ed;border-radius:8px;padding:8px 14px}
.tabs button,.tabs button:nth-child(n),.tabs button[aria-current=true]{background:#ffc3d7;color:#562d47}.tabs button[aria-current=true]{box-shadow:inset 0 0 0 2px #ae627d;font-weight:700}.tabs button:hover{background:#ffd3e2}
.closed-book main{max-width:1370px;padding:26px 88px 25px 38px}.closed-book .above{max-width:1180px}.closed-book .book-wrap{max-width:1180px;container-type:inline-size}.closed-book .book{transform:rotate(-.45deg);border-left-width:19px}.closed-book .cover-left{height:65cqw;min-height:0!important;padding:2.2cqw 3cqw 1.7cqw;display:flex;flex-direction:column;overflow:hidden}.closed-book .cover-top{height:12.8cqw;flex:none;padding:0}.closed-book .cover-top .eyebrow{font-size:clamp(9px,1cqw,12px);margin:0 0 1.8cqw;letter-spacing:1.5px}.closed-book .cutout-title{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:1.7cqw;font-size:3.55cqw;max-width:85%;padding-top:.5cqw}.closed-book .cutout-word{gap:.25cqw;padding:0;font-size:1em}.closed-book .paper-letter{padding:0 .36cqw .2cqw;min-width:.5em}.closed-book .word-0{font-size:1.1em}.closed-book .word-1{font-size:1em}.closed-book .word-2{font-size:1.14em}.closed-book .birthday-postit{right:-.5cqw;top:2cqw;bottom:auto;width:11.5cqw;min-height:11.8cqw;padding:2cqw .5cqw .7cqw;font-size:2cqw;background:linear-gradient(#e5c877 0 2cqw,#f3db8e 2cqw)}.closed-book .birthday-postit span{font-size:2.3cqw;margin-top:.5cqw}.closed-book .cover-cascade{height:40cqw;flex:none;margin:0;position:relative}.closed-book .cover-cascade .print{padding:.6cqw .6cqw 1.9cqw;box-shadow:0 .4cqw 1cqw #3b261d50}.closed-book .cover-cascade .print::before{width:5.2cqw;left:calc(50% - 2.6cqw);height:1.6cqw;top:-.6cqw}
.closed-book .cover-cascade .p1{width:18%;height:23cqw;left:1%;right:auto;top:0;bottom:auto;transform:rotate(-9deg);z-index:3}.closed-book .cover-cascade .p2{width:17%;height:21cqw;left:19%;right:auto;top:1cqw;bottom:auto;transform:rotate(7deg);z-index:2}.closed-book .cover-cascade .p3{width:17%;height:21cqw;left:auto;right:18%;top:1cqw;bottom:auto;transform:rotate(-7deg);z-index:2}.closed-book .cover-cascade .p4{width:18%;height:23cqw;left:auto;right:0;top:0;bottom:auto;transform:rotate(8deg);z-index:3}.closed-book .cover-cascade .p5{width:17%;height:20cqw;left:0;right:auto;top:auto;bottom:0;transform:rotate(7deg);z-index:4}.closed-book .cover-cascade .p6{width:17%;height:20cqw;left:auto;right:0;top:auto;bottom:0;transform:rotate(-6deg);z-index:4}.closed-book .cover-cascade .p7{width:28%;height:39cqw;left:36%;right:auto;top:.2cqw;bottom:auto;transform:rotate(0);z-index:9;padding:.35cqw;background:#e5e5da}.closed-book .cover-cascade .p7 img{object-fit:contain}.closed-book .cover-cascade .p8{width:19%;height:21cqw;left:17%;right:auto;top:auto;bottom:0;transform:rotate(-7deg);z-index:5}.closed-book .cover-cascade .p9{width:19%;height:21cqw;left:auto;right:17%;top:auto;bottom:0;transform:rotate(7deg);z-index:5}.closed-book .cover-cascade .print:hover{z-index:12}.closed-book .cover-bottom{height:8cqw;flex:none;flex-direction:row;justify-content:space-between;padding:1.2cqw 1cqw 0;gap:14px}.closed-book .cover-bottom .signature{font-size:clamp(16px,2.5cqw,30px);margin:0}.closed-book .cover-bottom .cover-start{font-size:clamp(14px,1.7cqw,20px);padding:10px 16px;margin:0;min-height:44px}.closed-book .tabs{top:6cqw;gap:1.2cqw}.closed-book .tabs button{min-height:8cqw;width:36px;font-size:13px}.closed-book .tabs button[aria-current=true]{width:43px}
@media(max-width:720px){body{background-size:32px 32px}.top{padding:18px 78px 18px 18px;min-height:110px;gap:14px}.top a{font-size:22px}.top a span{font-size:12px}.top .sound{font-size:12px;padding:9px;max-width:104px}.banner-moon{right:8px;top:18px;font-size:75px}.banner-stars i{font-size:16px}.banner-stars i:nth-child(3){left:58%;top:9px}.closed-book main{padding:22px 43px 25px 15px}.closed-book .book{border-left-width:10px}.closed-book .cover-left{height:69cqw;padding:2.5cqw 2.5cqw 1cqw;overflow:visible}.closed-book .cover-top{height:12cqw}.closed-book .cover-top .eyebrow{display:none}.closed-book .cutout-title{padding-top:2cqw;font-size:3.5cqw;gap:1.2cqw}.closed-book .birthday-postit{top:-1cqw;width:12cqw;min-height:12cqw;font-size:2.3cqw}.closed-book .cover-cascade{height:40cqw}.closed-book .cover-bottom{height:12cqw;padding-top:2cqw;gap:6px}.closed-book .cover-bottom .signature{font-size:clamp(12px,3.7cqw,18px);max-width:47%;line-height:1.15}.closed-book .cover-bottom .cover-start{font-family:'DM Sans',sans-serif;font-size:12px;padding:7px;min-height:44px;max-width:53%}.closed-book .tabs{top:3cqw;gap:1cqw}.closed-book .tabs button{min-height:11.7cqw;width:26px;font-size:10px;gap:3px}.closed-book .tabs button[aria-current=true]{width:30px}.closed-book .tabs button span{display:none}.closed-book .binding{left:-19px;width:20px;top:12px;bottom:12px}.closed-book .under{margin-top:28px}.closed-book .above .hand{font-size:14px}.closed-book .above>span:first-child{font-size:9px}.book-footer{padding:7px}.book-footer button{font-size:15px}}
/* A quiet midnight backdrop and a collage sized to the actual cover. */
body{background:#101b34;background-image:none}.above,.under{color:#e9dccc;text-shadow:none}.top{background:linear-gradient(110deg,#070d21,#142346 65%,#0b142d)}
.tabs button,.tabs button:nth-child(n),.tabs button[aria-current=true],.closed-book .tabs button{background:#ffc3d7;color:#5c392f;border:2px solid #795039;border-left:1px solid #795039;box-shadow:2px 2px 0 #39271f35}.tabs button[aria-current=true],.closed-book .tabs button[aria-current=true]{background:#ffc3d7;box-shadow:inset 0 0 0 1px #795039,2px 2px 0 #39271f35}.tabs button:hover{background:#ffd6e4}
.closed-book .cover-left{height:auto;min-height:0!important;padding:2.2cqw 3cqw 2cqw;overflow:visible}.closed-book .cover-top{height:11.5cqw;min-height:0;flex:none}.closed-book .cover-cascade{height:34cqw;min-height:0!important;max-height:none;flex:none;margin:0;overflow:visible}.closed-book .cover-bottom{height:7cqw;min-height:58px;padding:1cqw 1cqw 0;flex:none}.closed-book .birthday-postit{font-family:'Caveat','Kalam',cursive;font-weight:600;font-size:2.65cqw;line-height:.96;top:1.3cqw;right:.1cqw;min-height:10.8cqw;padding:2cqw .6cqw .6cqw;width:12cqw}.closed-book .birthday-postit span{font-size:2.1cqw;margin-top:.7cqw}
.closed-book .cover-cascade .print{padding:.55cqw .55cqw 1.5cqw;min-height:0;margin:0;border:1px solid #cfc6b6}.closed-book .cover-cascade .print img{object-position:center}.closed-book .cover-cascade .p1{width:17%;height:20cqw;left:1.5%;right:auto;top:1cqw;bottom:auto;transform:rotate(-8deg)}.closed-book .cover-cascade .p2{width:16%;height:18cqw;left:21%;right:auto;top:0;bottom:auto;transform:rotate(6deg)}.closed-book .cover-cascade .p2 img{object-fit:contain;background:#eee4d7}.closed-book .cover-cascade .p3{width:16%;height:18cqw;left:auto;right:21%;top:0;bottom:auto;transform:rotate(-6deg)}.closed-book .cover-cascade .p3 img{object-fit:contain;background:#eee4d7}.closed-book .cover-cascade .p4{width:17%;height:20cqw;left:auto;right:1.5%;top:1cqw;bottom:auto;transform:rotate(8deg)}.closed-book .cover-cascade .p4 img{object-fit:contain;background:#d3dcec}.closed-book .cover-cascade .p5{width:15%;height:13.5cqw;left:4%;right:auto;top:auto;bottom:.8cqw;transform:rotate(5deg);border-radius:4px}.closed-book .cover-cascade .p5 img{object-position:50% 42%}.closed-book .cover-cascade .p6{width:15%;height:13.5cqw;left:auto;right:4%;top:auto;bottom:.8cqw;transform:rotate(-5deg);border-radius:4px}.closed-book .cover-cascade .p6 img{object-position:50% 34%}.closed-book .cover-cascade .p7{width:22%;height:29cqw;left:39%;right:auto;top:2.5cqw;bottom:auto;transform:rotate(-1deg);padding:.35cqw;z-index:7}.closed-book .cover-cascade .p7 img{object-fit:contain}.closed-book .cover-cascade .p8{width:15%;height:14.5cqw;left:22%;right:auto;top:auto;bottom:.5cqw;transform:rotate(-5deg);border-radius:50%;padding:.6cqw;background:#f3d6df}.closed-book .cover-cascade .p8 img{border-radius:50%;object-position:50% 65%}.closed-book .cover-cascade .p9{width:15%;height:14.5cqw;left:auto;right:22%;top:auto;bottom:.5cqw;transform:rotate(5deg);border-radius:48% 48% 8px 8px;padding:.6cqw;background:#edf0db}.closed-book .cover-cascade .p9 img{border-radius:48% 48% 4px 4px;object-position:50% 38%}.closed-book .cover-cascade .p8::before,.closed-book .cover-cascade .p9::before{display:none}.closed-book .cover-cascade .print:hover{transform:rotate(0) scale(1.04)!important}
@media(max-width:720px){body{background:#101b34;background-image:none}.closed-book .cover-left{height:auto;min-height:0!important;padding:2.5cqw 2.5cqw 1.5cqw}.closed-book .cover-top{height:11cqw;min-height:0}.closed-book .cover-cascade{height:34cqw;min-height:0!important}.closed-book .cover-bottom{height:auto;min-height:52px;padding-top:2cqw;gap:6px}.closed-book .birthday-postit{font-size:2.8cqw;top:-1cqw;line-height:1;min-height:11.8cqw}.closed-book .birthday-postit span{font-size:2.3cqw}.closed-book .tabs{top:2cqw;gap:.7cqw}.closed-book .tabs button{min-height:9.8cqw;height:auto;font-size:10px;width:26px}.closed-book .tabs button[aria-current=true]{width:30px}.closed-book .cover-bottom .signature{font-size:clamp(12px,3.7cqw,18px)}.closed-book .cover-cascade .print{border-width:.5px}}
/* Cover copy and material refinements. */
.closed-book .cover-left{
  background-color:#b88d58;
  background-image:
    radial-gradient(circle at 18% 22%,#5d3e2017 0 1px,transparent 1.5px),
    radial-gradient(circle at 72% 68%,#fff4cf18 0 1px,transparent 1.6px),
    repeating-linear-gradient(2deg,transparent 0 3px,#5b3d2112 4px,#f6d69d0d 5px,transparent 7px),
    repeating-linear-gradient(91deg,transparent 0 5px,#4f351b0d 6px,transparent 8px),
    linear-gradient(103deg,#76502c3d 0,#b88d58 9%,#c49b64 54%,#a87945 100%);
  background-size:11px 11px,13px 13px,auto,auto,auto;
  box-shadow:inset 0 0 0 2px #d7b47d,inset 13px 0 24px #5d3c242e,inset -7px 0 16px #6f492527;
}
.closed-book .cover-left::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:20;border-radius:0 10px 10px 0;
  background:repeating-linear-gradient(176deg,transparent 0 8px,#fff7df0a 9px,transparent 10px 15px);
  mix-blend-mode:soft-light;opacity:.85
}
.closed-book .birthday-postit{
  background:linear-gradient(#9ecbea 0 2cqw,#bee2f7 2cqw);
  color:#17395c;font-family:'Allura','Caveat','Brush Script MT',cursive;font-weight:400;
  font-size:3.1cqw;line-height:.82;letter-spacing:.01em;box-shadow:3px 6px 6px #3d271940;
}
.closed-book .birthday-postit span{color:#284f70;font-family:'Caveat',cursive}
.closed-book .cover-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%}
.closed-book .cover-bottom::before{content:"";display:block}
.closed-book .cover-bottom .signature{grid-column:2;text-align:center;justify-self:center;white-space:nowrap}
.closed-book .cover-bottom .cover-start{grid-column:3;justify-self:end}
.closed-book .tabs button{background:#ffc3d7;border:2px solid #795039;color:#5c392f}
@media(max-width:720px){
  .closed-book .birthday-postit{font-size:3.2cqw;line-height:.82;background:linear-gradient(#9ecbea 0 2cqw,#bee2f7 2cqw)}
  .closed-book .cover-bottom{grid-template-columns:1fr;justify-items:center;min-height:72px;padding-top:1.4cqw}
  .closed-book .cover-bottom::before{display:none}
  .closed-book .cover-bottom .signature,.closed-book .cover-bottom .cover-start{grid-column:1;justify-self:center;max-width:none}
  .closed-book .cover-bottom .signature{white-space:normal;text-align:center;margin:0}
}
/* Personal banner and cover finishing touches. */
.top a#brand{font-family:'Allura','Caveat','Brush Script MT',cursive;font-size:43px;font-weight:400;line-height:.75;letter-spacing:.01em;color:#f3d99b;text-shadow:0 2px 12px #f2d48a24}
.top a#brand span{margin-top:10px;font-family:'Caveat','Kalam',cursive;font-size:17px;font-weight:500;letter-spacing:.02em;color:#f5e4d0}
.under{font-family:'Caveat','Kalam',cursive;font-size:22px;letter-spacing:.01em}
.closed-book .birthday-postit{right:-.8cqw;width:15cqw;padding-left:1cqw;padding-right:1cqw}
@media(max-width:720px){
 .top a#brand{font-size:33px;line-height:.78}
 .top a#brand span{font-size:14px;margin-top:8px}
 .under{font-size:18px}
 .closed-book .birthday-postit{right:-1cqw;width:15.5cqw}
}

/* The first year together, arranged as a hand-pasted photo archive. */
.memory-collage{position:relative;height:568px;margin:-6px;overflow:hidden;background-image:radial-gradient(#8290ad38 .8px,transparent .8px);background-size:16px 16px}
.memory-piece{position:absolute;display:block;margin:0;padding:9px 9px 31px;border:1px solid #d3c9bb;background:#fffdf8;box-shadow:2px 5px 13px #26365432;overflow:visible;transition:transform .2s,box-shadow .2s;z-index:2}
button.memory-piece{cursor:zoom-in}
.memory-piece:hover{z-index:8!important;transform:rotate(0deg) scale(1.025)!important;box-shadow:3px 8px 20px #26365442}
.memory-piece img,.memory-piece video{display:block;width:100%;height:100%;object-fit:contain;background:#e7e0d5}
.memory-piece small,.memory-piece figcaption{position:absolute;left:13px;right:10px;bottom:7px;margin:0;text-align:left;color:#493c49;font-family:'Caveat','Kalam',cursive;font-size:17px;line-height:1}
.memory-piece small{text-align:right;color:#8d536d}
.memory-tape{position:absolute;z-index:4;top:-8px;left:50%;width:68px;height:20px;transform:translateX(-50%) rotate(-3deg);background:#e7c891b8;box-shadow:0 1px 1px #725a3930}
.video-piece{padding-bottom:34px}
.video-piece video{object-fit:contain;background:#101b34}
.memory-love{position:absolute;right:15px;bottom:12px;margin:0;padding:2px 9px 0;background:#fffdf2e8;border-radius:2px;font-family:'Caveat','Kalam',cursive;font-size:24px;font-weight:700;line-height:1.15;color:#854765;transform:rotate(-2deg);z-index:12;box-shadow:1px 2px 0 #7a52602b}
.memory-total{display:inline-block;margin:0;padding:7px 13px;background:#ffc3d7;border:1px dashed #8b5267;font-family:'Caveat','Kalam',cursive;font-size:20px;transform:rotate(2deg)}
.spread-label{position:absolute;left:15px;bottom:12px;margin:0;padding:3px 10px 1px;background:#fffdf2e8;border-radius:2px;font-family:'Caveat','Kalam',cursive;font-size:24px;font-weight:700;line-height:1.15;color:#7f4560;transform:rotate(-2deg);z-index:12;box-shadow:1px 2px 0 #7a52602b}
.spread-label span{color:#b23d66}.spread-number{position:absolute;right:14px;bottom:17px;margin:0;padding:3px 7px;background:#fffdf2e8;font-size:10px;font-weight:700;letter-spacing:1.5px;color:#6f7689;z-index:12}
.intro-collage .piece-1{width:54%;height:330px;left:3%;top:17px;transform:rotate(-5deg)}
.intro-collage .piece-2{width:46%;height:256px;right:1%;top:3px;transform:rotate(6deg)}
.intro-collage .piece-3{width:48%;height:253px;right:8%;bottom:31px;transform:rotate(-3deg);z-index:3}
.left-collage .piece-1{width:78%;height:465px;left:10%;top:34px;transform:rotate(-3deg)}
.right-collage .piece-2{width:58%;height:325px;left:2%;top:15px;transform:rotate(-5deg)}
.right-collage .piece-3{width:54%;height:302px;right:1%;bottom:34px;transform:rotate(5deg);z-index:3}
.layout-1.left-collage .piece-1{width:72%;height:485px;left:15%;top:18px;transform:rotate(4deg)}
.layout-1.right-collage .piece-2{width:53%;height:290px;left:4%;top:35px;transform:rotate(5deg)}
.layout-1.right-collage .piece-3{width:58%;height:320px;right:2%;bottom:24px;transform:rotate(-5deg)}
.layout-2.left-collage .piece-1{width:82%;height:430px;left:8%;top:50px;transform:rotate(-5deg);border-radius:3px}
.layout-2.right-collage .piece-2{width:48%;height:360px;left:2%;top:24px;transform:rotate(-3deg)}
.layout-2.right-collage .piece-3{width:49%;height:350px;right:1%;top:112px;bottom:auto;transform:rotate(4deg)}
.memory-collage.layout-2 .memory-love{bottom:12px}
@media(max-width:1050px){.memory-collage{height:585px}.memory-piece{padding:7px 7px 28px}.left-collage .piece-1{width:84%;left:7%}.spread-label{font-size:30px}}
@media(max-width:720px){
 .memory-collage{height:440px;margin:0;background-size:14px 14px}
 .memory-piece{padding:6px 6px 24px}.memory-piece small,.memory-piece figcaption{font-size:14px;left:9px;bottom:5px}.memory-tape{width:50px;height:15px;top:-6px}
 .intro-collage .piece-1{height:260px}.intro-collage .piece-2{height:205px}.intro-collage .piece-3{height:195px;bottom:25px}
 .left-collage .piece-1,.layout-1.left-collage .piece-1,.layout-2.left-collage .piece-1{height:335px;top:24px;width:78%;left:11%}
 .right-collage .piece-2,.layout-1.right-collage .piece-2{height:250px}.right-collage .piece-3,.layout-1.right-collage .piece-3{height:235px;bottom:28px}
 .layout-2.right-collage .piece-2{height:280px}.layout-2.right-collage .piece-3{height:270px;top:94px}
 .memory-love{font-size:20px;right:8px;bottom:8px}.spread-label{font-size:20px;left:8px;bottom:8px}.spread-number{right:8px;bottom:11px;font-size:9px}
}
.arcade-note{font-size:28px;line-height:1.65;margin-top:45px}
.arcade-note span{display:block;margin-top:24px;font-family:'Caveat','Kalam',cursive;font-size:.92em;color:#81425b}
.primary.arcade-start{background:#ffc3d7;color:#5c392f;border:2px solid #795039;box-shadow:3px 3px 0 #795039;font-family:'Caveat','Kalam',cursive;font-size:21px}
.primary.arcade-start:hover{background:#ffd6e4}
@media(max-width:720px){.arcade-note{font-size:22px;margin-top:24px}}
.quiz-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.quiz-head span{flex:none;padding:6px 10px;background:#ffc3d7;border:1px solid #795039;border-radius:20px;font-size:12px;font-weight:700}.quiz-meter{display:flex;gap:5px;margin:13px 0 22px}.quiz-meter i{height:7px;flex:1;border-radius:7px;background:#e5dce2}.quiz-meter i.passed{background:#8e5d73}.quiz-meter i.current{background:#ffc3d7;box-shadow:inset 0 0 0 1px #8e5d73}.quiz-card{position:relative;padding:27px 23px 21px;background:#fff9e9;border:1px solid #dfcfaf;box-shadow:4px 5px 0 #e2cfab;transform:rotate(-.5deg)}.quiz-card h3{margin:0 45px 20px 0;font-family:'Kalam',cursive;font-size:25px;line-height:1.3;color:#263358}.quiz-icon{position:absolute;right:18px;top:15px;font-size:34px;transform:rotate(8deg)}.quiz-options{display:grid;gap:9px}.quiz-options button{display:flex;gap:9px;align-items:center;background:#fff;border:1px solid #c7b5bd;border-radius:8px;text-align:left;padding:11px 13px;min-height:45px;box-shadow:2px 2px 0 #e5d3d9;transition:transform .15s,background .15s}.quiz-options button:hover:not(:disabled){transform:translateY(-1px);background:#fff1f6}.quiz-options button span{font-weight:800;color:#9b4d6b}.quiz-options button.correct,.quiz-options button.correct:disabled{background:#dcefdc;border-color:#578765;opacity:1}.quiz-options button.wrong{background:#ffe0e5;border-color:#b73555;animation:quizShake .28s}.quiz-card .feedback{margin:14px 0 0;min-height:26px}.quiz-card .feedback strong{font-family:'Kalam',cursive;font-size:19px;margin-right:6px}.quiz-next{display:block;margin-top:13px;background:#ffc3d7;border-color:#795039!important}.quiz-card label{display:block;margin:18px 0 7px;font-family:'Kalam',cursive;font-size:19px;font-weight:700}.quiz-card textarea{display:block;width:100%;padding:11px;border:1px dashed #9a6378;border-radius:6px;background:#fffdf8;color:#263358;font:16px 'DM Sans',sans-serif;resize:vertical}.bonus-submit{background:#ffc3d7;border-color:#795039!important}.quiz-win{text-align:center;margin-top:45px;padding:38px 25px;background:#fff0ab;border:2px dashed #9c6f55;box-shadow:4px 6px 0 #d7bc6c;transform:rotate(-1deg)}.quiz-win>span{font-size:62px}.quiz-win h2{margin:8px 0;font-family:'Kalam',cursive;font-size:35px}.quiz-win p{line-height:1.7}.quiz-win .primary{margin-top:12px}@keyframes quizShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(max-width:720px){.quiz-card{padding:22px 16px 18px}.quiz-card h3{font-size:22px}.quiz-icon{font-size:29px}.quiz-options button{padding:10px;min-height:43px}.quiz-win{margin-top:20px;padding:28px 18px}}
.quiz-roast{text-align:center;margin-top:45px;padding:42px 24px;background:#ffc3d7;border:3px solid #795039;box-shadow:7px 8px 0 #795039;transform:rotate(1deg)}.quiz-roast>span{display:block;font-size:36px;letter-spacing:5px}.quiz-roast h2{margin:12px 0;font-family:'Kalam',cursive;font-size:45px;line-height:1.05;color:#702b48;text-transform:uppercase}.quiz-roast p{margin:20px auto;max-width:340px;line-height:1.65}.quiz-roast .primary{margin-top:6px}
@media(max-width:720px){.quiz-roast{margin-top:20px;padding:30px 17px}.quiz-roast h2{font-size:36px}}
.cake-machine{position:relative;padding:29px 8px 8px;background:#f3d4df;border:3px solid #795039;border-radius:9px;box-shadow:5px 6px 0 #795039}.cake-machine::after{content:"";position:absolute;left:18%;right:18%;bottom:-10px;height:10px;background:#795039;border-radius:0 0 8px 8px}.cake-machine-label{position:absolute;left:0;right:0;top:7px;text-align:center;font-size:9px;font-weight:800;letter-spacing:1.4px;color:#65394b}.cake-machine .cake-board{display:block;border:2px solid #9b5870;border-radius:3px}.cake-side{padding-top:4px}.cake-side>span{display:block;margin-top:10px;font-size:9px;font-weight:800;letter-spacing:1.5px;color:#7e5063}.cake-side>span:first-child{margin-top:0}.cake-side strong{color:#753c56}.cake-side .small-button{display:block;width:100%;margin:7px 0;padding:8px 7px;min-height:38px}.cake-side .cake-main-button{background:#ffc3d7;border:2px solid #795039;font-weight:700}.cake-feedback{min-height:58px;padding:10px 12px;background:#fff8e8;border-left:4px solid #ffc3d7}.cake-feedback strong{font-family:'Kalam',cursive;font-size:17px}.cake-win{display:grid;gap:4px}.cake-win strong{font-size:19px}.cake-win span{font-size:14px}.cake-win button{justify-self:start;margin-top:5px}.controls button:last-child{padding-left:14px;padding-right:14px;background:#ffc3d7;border-color:#795039;font-family:'Kalam',cursive;font-size:15px;font-weight:700}
@media(max-width:720px){.cake-machine{padding:27px 6px 6px}.cake-side{max-width:92px}.cake-side .small-button{font-size:12px}.cake-feedback{font-size:13px}.controls{margin-top:16px}}
.puzzle{grid-template-rows:repeat(3,1fr);max-width:420px;aspect-ratio:4/3}.tile{background-image:url('games/photo-puzzle.jpg')}
.space-hud{display:flex;justify-content:space-between;gap:15px;margin:8px 0 10px;padding:8px 11px;background:#17264b;color:#f8e8c7;border:2px solid #795039;font-size:9px;letter-spacing:1.2px}.space-hud strong{margin-left:4px;color:#ffc3d7;font-size:13px}.space-machine{position:relative;width:min(100%,360px);margin:auto;border:5px solid #795039;border-radius:8px;background:#09132e;box-shadow:5px 6px 0 #e6b7c7;overflow:hidden}.space-machine canvas{display:block;width:100%;height:auto}.space-screen{position:absolute;inset:0;display:none;place-content:center;text-align:center;padding:25px;background:#09132ed9;color:#fff0d2}.space-screen.show{display:grid}.space-screen strong{font-family:'Kalam',cursive;font-size:28px;color:#ffc3d7}.space-screen span{font-size:13px;line-height:1.6}.space-controls{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:7px;width:min(100%,360px);margin:10px auto 7px}.space-controls button{min-height:43px;border:2px solid #795039;border-radius:6px;background:#fff9e9;font-size:19px;font-weight:700}.space-controls button:nth-child(2){background:#ffc3d7;font-family:'Kalam',cursive;font-size:16px}.space-actions{display:flex;justify-content:center;gap:5px}.space-actions .small-button{margin:0;padding:8px 11px;min-height:37px}.space-actions .cake-main-button{background:#ffc3d7;border:2px solid #795039}.space-feedback{margin:8px auto 0;width:min(100%,360px);min-height:34px;text-align:center;font-size:13px;color:#5f5265}.space-feedback strong{font-family:'Kalam',cursive;font-size:16px}
@media(max-width:720px){.space-machine,.space-controls,.space-feedback{max-width:330px}.space-actions .small-button{font-size:12px}.space-hud{font-size:8px}}

/* Handwritten lettering throughout the open scrapbook */
body:not(.closed-book) .book,
body:not(.closed-book) .book button,
body:not(.closed-book) .book textarea {
  font-family: 'Kalam', cursive;
}
body:not(.closed-book) .chapter-title,
body:not(.closed-book) .game-title,
body:not(.closed-book) .quiz-card h3 {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  letter-spacing: 0;
}
body:not(.closed-book) .chapter-title {
  font-size: clamp(42px, 5vw, 66px);
}
body:not(.closed-book) .body-copy,
body:not(.closed-book) .game-hint {
  font-size: 18px;
  line-height: 1.65;
}
/* Cream notebook paper on the left */
body:not(.closed-book) .paper.left:not(.moon) {
  background-color: #fff3d9;
  background-image:
    linear-gradient(90deg, transparent 25px, #d98d9866 25px 27px, transparent 27px),
    repeating-linear-gradient(transparent 0 31px, #a7b9c744 31px 32px);
}
/* Soft pink dotted paper on the right */
body:not(.closed-book) .paper.right:not(.moon) {
  background-color: #fff0ed;
  background-image:
    radial-gradient(#bb8f8540 1px, transparent 1px),
    linear-gradient(90deg, #76513b12, transparent 8%);
  background-size: 16px 16px, 100% 100%;
}
/* Game list: little paper labels */
.index-links { gap: 15px; }
.index-links button {
  padding: 12px 16px;
  background: #ffd0df;
  border: 2px solid #795039;
  border-radius: 5px 10px 4px 8px;
  box-shadow: 3px 4px 0 #79503933;
  font-family: 'Caveat', cursive;
  font-size: 27px;
  font-weight: 700;
}
.index-links button:nth-child(odd) { transform: rotate(-1deg); }
.index-links button:nth-child(even) { transform: rotate(1deg); }
.index-links button:hover {
  background: #ffe0ea;
  transform: rotate(0);
}
.index-links small {
  font-family: 'Kalam', cursive;
  font-size: 14px;
  font-weight: 400;
  color: #71545b;
}
/* Taped-on yellow notes */
.scrap-note {
  position: relative;
  background: #ffe9a0;
  border: 1px solid #caa65d;
  border-radius: 2px 5px 3px 7px;
  box-shadow: 4px 5px 0 #79503925;
}
.scrap-note::before {
  content: '';
  position: absolute;
  top: -10px;
  left: calc(50% - 35px);
  width: 70px;
  height: 23px;
  background: #b9d9edb8;
  transform: rotate(5deg);
}
/* Softer quiz lettering */
.quiz-options button {
  font-family: 'Kalam', cursive;
  font-size: 17px;
  border-radius: 4px 9px 5px 8px;
}
@media (max-width: 720px) {
  .index-links button { font-size: 24px; }
}

/* Keep the arcade inside the standard scrapbook spread. */
body:not(.closed-book) .book {
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.games-open .paper {
  min-width: 0;
  overflow: auto;
  overflow-wrap: anywhere;
}
.games-open .index-links { gap: 10px; margin-top: 18px; }
.games-open .index-links button {
  min-width: 0;
  padding: 8px 12px;
  font-size: 24px;
  line-height: 1.15;
}
.games-open .index-links button > span:first-child { min-width: 0; }
.games-open .index-links small { line-height: 1.35; }
.games-open #game-progress .progress { margin: 16px 0 10px; }
.games-open #game-progress .muted { margin: 0; }
.games-open .cake-layout { min-width: 0; }
.games-open .cake-machine { min-width: 0; flex-shrink: 1; }
.games-open .cake-machine .cake-board { max-width: 100%; height: auto; }
.games-open .cake-side { flex-shrink: 0; }
@media (min-width: 721px) {
  .games-open .book { height: 660px; min-height: 0; }
  .games-open .paper { height: 640px; min-height: 0; padding: 24px; }
  body.games-open .chapter-title { font-size: 48px; margin: 12px 0; }
  body.games-open .body-copy { font-size: 16px; line-height: 1.5; margin: 12px 0; }
  .games-open .eyebrow { margin-bottom: 14px; }
  .games-open .arcade-note { font-size: 24px; line-height: 1.5; }
}
@media (min-width: 1450px) {
  .games-open .book { height: 710px; }
  .games-open .paper { height: 690px; }
}
@media (max-width: 720px) {
  .games-open .paper { max-height: 690px; }
}

/* Moonlight: layered keepsakes, midnight paper, and little gold stars. */
.paper.moon {
  background-color: #182443 !important;
  background-image: radial-gradient(#f8e2aa33 .8px, transparent 1px),
    repeating-linear-gradient(12deg, #ffffff03 0 1px, transparent 1px 4px) !important;
  background-size: 47px 53px, 100% 100% !important;
}
.paper.moon.right {
  background-color: #243052 !important;
  border-left: 1px solid #f3d49b25;
}
.moon .chapter-title,.moon .body-copy,.moon .eyebrow { position: relative; z-index: 1; }
.moon .body-copy {
  padding: 20px 23px;
  max-width: 370px;
  color: #28304a;
  background: #f4e7cf;
  border: 1px solid #d8bd92;
  box-shadow: 4px 5px 0 #080f2855;
  transform: rotate(-2deg);
}
.moon-scatter { position: absolute; inset: 18px; pointer-events: none; color: #ecd193; }
.moon-scatter span { position: absolute; font-size: 29px; }
.moon-scatter span:nth-child(1) { right: 12px; top: 12px; }
.moon-scatter span:nth-child(2) { left: 3px; top: 39%; }
.moon-scatter span:nth-child(3) { right: 6px; bottom: 15%; font-size: 38px; }
.moon-scatter span:nth-child(4) { left: 15%; bottom: 5%; }
.moon-keepsake {
  position: relative; display: grid; justify-items: center;
  width: min(75%, 265px); margin: 33px auto 15px; padding: 12px 12px 18px;
  background: #101c39; border: 9px solid #eadcc8;
  box-shadow: 5px 6px 0 #080f2855; transform: rotate(4deg);
}
.moon-keepsake::before,.moon .letter-pocket::before {
  content: ''; position: absolute; width: 66px; height: 21px;
  top: -15px; left: calc(50% - 33px); background: #aebed1b8;
  transform: rotate(-7deg); pointer-events: none;
}
.moon-keepsake .moon-symbol { display: block; font-size: 100px; line-height: 1.2; margin: 0; }
.moon-caption { color: #f4dfb6; font-family: 'Caveat', cursive; font-size: 22px; text-align: center; }
.moon-signature { text-align: center; color: #efd49b; font-family: 'Caveat', cursive; }
.moon-pockets { display: grid; gap: 22px; margin-top: 28px; }
.moon .letter-pocket {
  position: relative; margin: 0; padding: 17px 20px;
  color: #4c3444; background: #efd0db; border: 1px solid #a77b84;
  box-shadow: 4px 5px 0 #080f284d; transform: rotate(-1.5deg);
  border-radius: 3px 7px 3px 5px;
}
.moon .letter-pocket:nth-child(even) { transform: rotate(1.5deg); background: #e7dded; }
.moon .letter-pocket:hover { transform: rotate(0); background: #f7e0e9; }
.moon .letter-pocket strong { font-family: 'Caveat', cursive; font-size: 29px; font-weight: 600; }
.moon .letter-pocket i { float: right; font-style: normal; color: #805f58; }
.moon .letter-pocket span { font-family: 'Kalam', cursive; color: #6d5061; font-size: 14px; margin-top: 5px; }
.moon .last-pocket { border: 2px dashed #a57a64; background: #f2e3c6; }
.moon-footer { text-align: center; font-size: 29px; letter-spacing: 7px; color: #e9ce97; margin: 26px 0 0; }
.moon-letter { font-family: 'Kalam', cursive; }
.moon-letter > span { color: #8b6a40; font-size: 32px; }
.moon-letter h2 { font-family: 'Caveat', cursive; font-size: 34px; }
.blank-letter { min-height: 150px; background: repeating-linear-gradient(transparent 0 31px,#b8a48c55 31px 32px); }
@media (max-width: 720px) {
 .moon-keepsake { width: 210px; margin-top: 27px; }
 .moon-keepsake .moon-symbol { font-size: 76px; }
 .moon .letter-pocket strong { font-size: 26px; }
}

/* A persistent soundtrack with controls on every Moonlight spread. */
.moon-player { position: relative; margin: 18px auto 4px; padding: 14px 16px; max-width: 370px; background: #f0d7e2; color: #493b51; border: 1px solid #cba6b6; border-radius: 4px 9px 4px 6px; box-shadow: 3px 4px 0 #080f2855; }
.moon-track { display: flex; align-items: center; gap: 12px; font-size: 20px; line-height: 1.2; }
.moon-track > span:first-child { font-size: 30px; }
.moon-track small { display: block; font-size: 14px; margin-top: 3px; }
.moon-track button { margin-left: auto; flex-shrink: 0; background: #253152; color: #fff3d9; border: 1px solid #4f4560; border-radius: 6px; min-height: 44px; padding: 7px 12px; font-size: 16px; }
.moon-player input { display: block; width: 100%; margin: 12px 0 5px; accent-color: #7c4e6d; cursor: pointer; min-height: 24px; }
.moon-player-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px; font-size: 14px; }
#moon-time { font-variant-numeric: tabular-nums; }
#moon-audio-status { font-size: 14px; margin: 6px 0 0; }
#moon-audio-status:empty { display: none; }
.moon-keepsake { margin-top: 25px; margin-bottom: 10px; }
.moon-keepsake .moon-symbol { font-size: 72px; }
.moon-signature { margin-top: 15px; margin-bottom: 10px; }

/* A roomy, label-free music strip and a doodled sticky note. */
.moon-player {
  width: 100%; max-width: none; margin: 27px 0 8px;
  padding: 18px 20px; display: grid;
  grid-template-columns: auto minmax(0, 1fr); gap: 4px 18px;
}
.moon-track { grid-row: 1 / 3; }
.moon-track button { margin: 0; min-width: 84px; min-height: 48px; }
.moon-player input { margin: 0; min-height: 30px; align-self: end; }
.moon-player-bottom { grid-column: 2; justify-content: flex-end; }
#moon-audio-status { grid-column: 1 / -1; }
.moon.left .body-copy {
  position: relative; width: 94%; max-width: 390px;
  padding: 35px 26px 43px; margin: 25px auto 22px;
  background: linear-gradient(180deg, #edcf7f 0 23px, #f9e6a2 23px, #fff0ba 100%);
  border: 0; border-radius: 1px 2px 14px 2px;
  box-shadow: 3px 9px 12px #080f2850;
  transform: rotate(-2deg); color: #453b43;
  font-family: 'Kalam', cursive;
}
.moon-note-message { display: block; }
.moon-note-doodle { position: absolute; color: #80604b; font-family: 'Caveat', cursive; font-size: 28px; line-height: 1; pointer-events: none; }
.top-doodle { top: 2px; right: 16px; transform: rotate(9deg); }
.bottom-doodle { bottom: 10px; right: 21px; letter-spacing: 6px; transform: rotate(-6deg); }
@media (max-width: 400px) {
 .moon-player { padding: 14px 12px; column-gap: 10px; }
 .moon-track button { min-width: 68px; padding: 7px; }
}

/* Match Moonlight to the established open-book frame. */
.moonlight-open .paper {
  min-width: 0;
  overflow: auto;
  overflow-wrap: anywhere;
}
.moonlight-open .paper.right { border-left: 0; }
.moonlight-open .moon-player input { min-width: 0; }
@media (min-width: 721px) {
  .moonlight-open .book { height: 660px; min-height: 0; }
  .moonlight-open .paper { height: 640px; min-height: 0; padding: 24px; }
  body.moonlight-open .chapter-title { font-size: 48px; margin: 12px 0; }
  .moonlight-open .eyebrow { margin-bottom: 14px; }
  body.moonlight-open .moon.left .body-copy {
    font-size: 16px; line-height: 1.5;
    padding: 30px 22px 35px; margin: 18px auto;
  }
  .moonlight-open .moon-keepsake {
    margin: 20px auto 12px; padding: 6px 10px 10px;
  }
  .moonlight-open .moon-keepsake .moon-symbol { font-size: 56px; }
  .moonlight-open .moon-player { margin: 18px 0 4px; padding: 14px 18px; }
}
@media (min-width: 1450px) {
  .moonlight-open .book { height: 710px; }
  .moonlight-open .paper { height: 690px; }
}
@media (max-width: 720px) {
  .moonlight-open .paper { max-height: 690px; }
}

/* Fine paper fibers and softly worn edges, without changing page geometry. */
body:not(.closed-book) .paper::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23paper)' d='M0 0h240v240H0z'/%3E%3C/svg%3E"),
    repeating-linear-gradient(7deg, #ffffff12 0 1px, transparent 1px 6px);
  background-size: 240px 240px, 100% 100%;
  opacity: .22;
  mix-blend-mode: multiply;
}
body:not(.closed-book) .paper.left {
  box-shadow: inset -13px 0 20px -13px #49351c55,
    inset 0 0 30px #755c2510;
}
body:not(.closed-book) .paper.right {
  box-shadow: inset 13px 0 20px -13px #49351c55,
    inset 0 0 30px #755c2510;
}
body:not(.closed-book) .paper.moon::after {
  mix-blend-mode: soft-light;
  opacity: .42;
}
body:not(.closed-book) .paper.moon.left {
  box-shadow: inset -16px 0 25px -12px #060b1cb3,
    inset 0 0 40px #03091b40;
}
body:not(.closed-book) .paper.moon.right {
  box-shadow: inset 16px 0 25px -12px #060b1cb3,
    inset 0 0 40px #03091b40;
}

/* The soundtrack sits beneath the book and keeps playing between chapters. */
.global-player {
  width: min(88%, 520px);
  margin: 14px 0 8px;
  padding: 5px 10px;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 0;
  background: #efd6e1;
  border: 2px solid #795039;
  border-radius: 5px;
  box-shadow: 4px 5px 0 #0a112b70;
}
.global-player .moon-track button {
  background: #243052;
  min-width: 64px;
  min-height: 32px;
  padding: 3px 8px;
  font-size: 14px;
}
.global-player input {
  min-height: 16px;
  height: 16px;
}
.global-player .moon-player-bottom {
  font-size: 11px;
  line-height: 1;
}
.global-player #moon-audio-status {
  margin: 0;
}
@media (max-width: 720px) {
  .global-player { width: min(92%, 440px); margin-top: 12px; }
}
.audio-dock {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Long-form stationery for the birthday letter. */
dialog.letter-modal {
  width: min(92vw, 760px);
  max-height: 88vh;
  padding: 32px clamp(20px, 5vw, 56px);
  overflow-y: auto;
  background-color: #fff4da;
  background-image:
    linear-gradient(90deg, transparent 27px, #d98d9855 27px 29px, transparent 29px),
    repeating-linear-gradient(transparent 0 34px, #9eb3c733 34px 35px);
  border: 2px solid #8a6749;
  box-shadow: 0 25px 90px #080f28aa, inset 0 0 35px #8c683317;
}
.birthday-letter {
  max-width: 620px;
  margin: 0 auto;
  color: #40344a;
}
.birthday-letter > span {
  display: block;
  text-align: center;
  letter-spacing: 8px;
}
.birthday-letter h2 {
  margin: 4px 0 28px;
  text-align: center;
  font-size: clamp(34px, 7vw, 48px);
  color: #7c405d;
}
.birthday-letter .letter-copy {
  font-size: 18px;
  line-height: 1.85;
}
.birthday-letter .letter-copy p {
  margin: 0 0 22px;
}
.birthday-letter .letter-copy p:last-child {
  margin-top: 35px;
  font-family: 'Caveat', cursive;
  font-size: 27px;
  line-height: 1.45;
  color: #75445d;
}
@media (max-width: 720px) {
  dialog.letter-modal { padding: 28px 20px; }
  .birthday-letter .letter-copy { font-size: 16px; line-height: 1.75; }
}

.poem-letter { text-align: center; color: #40344a; }
.poem-letter h2 { color: #7c405d; margin: 12px 0 32px; }
.poem-copy { font-size: clamp(18px, 3.5vw, 22px); }
.poem-copy p { margin: 0 0 28px; line-height: 1.75; }
.poem-copy p:last-child { margin-bottom: 12px; }
.aura-note { padding: 38px 4px; text-align: center; }
.aura-note strong { display: block; font-family: 'Kalam', cursive; font-size: clamp(32px, 7vw, 52px); line-height: 1.3; color: #75445d; overflow-wrap: anywhere; }