@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Caveat:wght@500;600&display=swap');
@import url('story-rich.css');
@import url('story-xmas.css');
.story-scene{--scene-ink:#482832;position:relative;isolation:isolate;width:100%;min-height:640px;color:var(--scene-ink);overflow:hidden;font-family:'DM Sans',sans-serif;animation:scene-arrive .65s cubic-bezier(.2,.8,.2,1);container-type:inline-size}.theme-cream{background:#f4e9d7}.theme-rose{background:#bc405b;color:#fff1da;--scene-ink:#fff1da}.theme-ink{background:#201c24;color:#f8e8d0;--scene-ink:#f8e8d0}.theme-butter{background:#f2d583}.theme-peach{background:#efbba4}.theme-forest{background:#325b50;color:#f8e8d0;--scene-ink:#f8e8d0}.scene-grain{position:absolute;inset:0;z-index:-1;opacity:.12;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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}.scene-inner{padding:65px 34px 46px;min-height:640px;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:20px}.scene-kicker{font-size:9px!important;letter-spacing:1.6px;font-weight:700;line-height:1.6;margin:0!important}.scene-title{font-family:'Barlow Condensed',Impact,sans-serif!important;text-transform:uppercase;font-size:42px!important;font-weight:800!important;line-height:.98!important;letter-spacing:-.5px!important;margin:0!important;max-width:100%;overflow-wrap:anywhere;animation:type-reveal .7s both}.scene-title.oversized{font-size:64px!important}.scene-copy{font-size:13px!important;line-height:1.7!important;max-width:340px;margin:0!important;white-space:pre-line}.scene-footnote{font-size:9px!important;opacity:.65;line-height:1.6}.scene-edition{position:absolute;bottom:15px;left:24px;letter-spacing:1.5px;font-size:8px;opacity:.6}/* Keep the existing story lettering priority inside its own scenes and portal. */:where(.story-scene,.portal-letter) .handwritten{font-family:'Caveat',cursive;font-size:27px!important;line-height:1.25}.cover-type{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;font-size:118px;line-height:.78;text-align:left;align-self:flex-start}.cover-type em{font-style:normal;color:#f4c29d}.kind-cover .scene-inner{justify-content:flex-start;align-items:flex-start;padding-top:80px}.kind-cover .scene-kicker{margin-bottom:12px!important}.vinyl{width:265px;height:265px;align-self:flex-end;margin-top:-45px;border-radius:50%;background:repeating-radial-gradient(circle,#16141a 0 2px,#242029 3px 4px);box-shadow:0 17px 40px #30162655;position:relative;animation:record-turn 18s linear infinite}.vinyl:after{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(transparent,#fff2,transparent,#fff1,transparent);pointer-events:none}.vinyl-label{position:absolute;inset:80px;border-radius:50%;overflow:hidden;background:#e9bda9}.vinyl-label img{width:100%;height:100%;object-fit:cover}.vinyl-label span{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:38px;text-shadow:0 2px 7px #000}.name-ribbon{background:#f9e8d0;color:#432532;transform:rotate(-7deg);width:140%;margin-left:-15%;padding:12px 0;font-family:'Barlow Condensed',sans-serif;font-size:29px;font-weight:800;white-space:nowrap;text-align:center;overflow:hidden;margin-top:-5px;z-index:2}.kind-cover .scene-copy{text-align:left;padding-top:13px;max-width:230px}.counter-orbit{width:220px;height:220px;position:relative;display:grid;place-items:center;margin:10px}.counter-orbit>span{width:100px;height:100px;border-radius:50%;background:#f7e7cf;display:grid;place-items:center;color:#b8405a;font-size:73px;box-shadow:0 0 55px #b8405a44;animation:heart-beat 2s infinite}.counter-orbit i{position:absolute;top:50%;left:50%;width:2px;height:var(--h);background:#dda497;transform:rotate(calc(var(--i)*6deg)) translateY(-110px);transform-origin:0 0;animation:orbit-pulse 2s ease-in-out infinite;animation-delay:calc(var(--i)*-.07s)}.big-stat{font-family:'Barlow Condensed',sans-serif;font-size:108px;font-weight:800;line-height:.85;color:#e19a9b;letter-spacing:-3px}.season-art{font-size:150px;line-height:1;filter:drop-shadow(0 8px 0 #43253222);animation:season-sway 5s ease-in-out infinite}.chapter-number{font-family:'Barlow Condensed',sans-serif;font-size:150px;line-height:.8;-webkit-text-stroke:1px #f2ccaf;color:transparent;align-self:flex-end}.film-strip{display:flex;width:115%;padding:13px 0;border-block:10px dotted #f7e4d0;background:#231d23;transform:rotate(-8deg);box-shadow:0 10px 20px #30132333;gap:5px;margin-top:-50px}.film-strip img{width:50%;height:145px;object-fit:cover}.polaroid{background:#f7efdf;color:#4d2d33;padding:10px 10px 27px;transform:rotate(var(--tilt));box-shadow:7px 15px 25px #25121c33;width:min(280px,100%);animation:photo-land .8s both}.polaroid img{width:100%;height:280px;object-fit:cover;display:block}.polaroid>span{display:block;font-family:'Caveat',cursive;font-size:19px;line-height:1.2;margin-top:10px}.film-photo{background:#271f27;border-block:10px dotted #f7e4d0;color:#f4d0ad}.film-photo img{height:290px}.kind-photo .scene-title,.kind-camera .scene-title,.kind-timeline .scene-title{font-size:36px!important}.story-letter{width:100%;padding:32px 25px;text-align:left;background:repeating-linear-gradient(#f9f1e4 0 29px,#e4d4c4 30px 31px);box-shadow:4px 12px 24px #45233222;position:relative;transform:rotate(-2deg)}.story-letter>p{font-family:'Caveat',cursive;font-size:24px;line-height:1.3;white-space:pre-wrap;overflow-wrap:anywhere;margin:24px 0}.letter-stamp{float:right;border:1px dashed #b87475;padding:8px;color:#aa526a;font-size:30px;transform:rotate(9deg)}.orbit-art{width:100%;max-width:380px;animation:sky-drift 70s linear infinite}.kind-sky .scene-title{font-size:35px!important}.kind-secret .letter-boxes{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:15px 0}.kind-secret .letter-boxes span{height:45px;width:32px;border:2px solid #624438;border-radius:6px;display:grid;place-items:center;font-size:25px}.secret-entry{display:block;font-size:11px;width:100%;max-width:300px}.secret-entry input{display:block;width:100%;border:1px solid #a08558;background:#fff8e7;color:#503834;border-radius:4px;padding:14px;margin-top:10px;font-size:16px}.scene-button{border:0;border-radius:50px;background:#f8e7cc;color:#492b32;font-size:12px;font-weight:700;padding:14px 24px;cursor:pointer;min-height:44px}.scene-button:disabled{opacity:.65;cursor:wait}.scene-button:hover{transform:translateY(-2px)}.travel-route{width:100%;height:80px;position:relative;color:#df7b8f}.travel-route>span{position:absolute;left:47%;top:0;font-size:32px;animation:heart-beat 2s infinite}.travel-route svg{width:100%;height:100%}.boarding-ticket{background:#f8ecd8;color:#482832;padding:18px 20px;width:100%;max-width:340px;text-align:left;position:relative;box-shadow:0 15px 40px #0005;border-radius:4px}.boarding-ticket:before,.boarding-ticket:after{content:'';width:24px;height:24px;border-radius:50%;background:#201c24;position:absolute;bottom:40px}.boarding-ticket:before{left:-12px}.boarding-ticket:after{right:-12px}.boarding-ticket>small{font-size:8px;letter-spacing:1px}.boarding-ticket>img{width:100%;height:210px;object-fit:cover;display:block;margin:14px 0}.boarding-ticket .scene-title{font-size:35px!important;margin-bottom:12px!important}.boarding-ticket .scene-copy{font-family:'Caveat',cursive;font-size:22px!important;line-height:1.25!important}.ticket-bottom{display:flex;justify-content:space-between;gap:10px;border-top:1px dashed #a27f78;margin-top:20px;padding-top:14px;font-size:8px}.cinema-wheel-wrap{position:relative;margin:10px 0}.wheel-pointer{position:absolute;z-index:3;top:-18px;left:calc(50% - 15px);font-size:32px;color:#f7e7d0;filter:drop-shadow(0 3px 1px #482832)}.cinema-wheel{width:285px;height:285px;border:8px dotted #f5dcbe;border-radius:50%;position:relative;box-shadow:0 0 0 7px #852e46,0 15px 30px #63233c55;transition:transform 2.6s cubic-bezier(.15,.8,.2,1)}.cinema-wheel>span{position:absolute;width:100px;left:calc(50% - 50px);top:calc(50% - 7px);transform:rotate(var(--angle)) translateY(-91px) rotate(90deg);font-size:10px;line-height:1.3;font-weight:700;text-align:center}.cinema-wheel>b{position:absolute;inset:calc(50% - 29px);width:58px;height:58px;border-radius:50%;background:#201c24;color:#f7dfbf;font-size:43px;display:grid;place-items:center}.christmas-tree{position:relative;text-align:center;font-size:35px;color:#eccc8e;height:220px;width:190px}.christmas-tree span{display:block;position:absolute;left:50%;transform:translateX(-50%);width:0;height:0;border-left:65px solid transparent;border-right:65px solid transparent;border-bottom:100px solid #76967d;top:40px;filter:drop-shadow(0 5px 5px #12352b)}.christmas-tree span:nth-of-type(2){top:85px;border-left-width:82px;border-right-width:82px}.christmas-tree span:nth-of-type(3){top:130px;border-left-width:100px;border-right-width:100px}.anniversary-board{border:1px solid #59464d;padding:27px 20px;border-radius:10px;background:linear-gradient(120deg,#312932,#1b1920);box-shadow:0 10px 40px #0003;width:100%;max-width:340px}.anniversary-board>small,.anniversary-board>span{font-size:9px;letter-spacing:3px}.anniversary-board h3{font-family:'Barlow Condensed',sans-serif;font-size:29px;margin:15px 0}.flip-digits{display:flex;gap:6px;justify-content:center;margin:20px 0 10px}.flip-digits b{font-family:'Barlow Condensed',sans-serif;font-size:55px;background:linear-gradient(#4b303c 49%,#19141c 50%,#3b2833 51%);color:#f2b9a5;min-width:45px;box-shadow:0 4px 0 #17141b;border-radius:3px;padding:3px}.anniversary-board>p{font-size:16px;margin:20px 0}.anniversary-board>i{font-size:9px;padding:7px;background:#d1cba1;color:#342936;transform:rotate(-4deg);display:inline-block}.forever-card{width:min(310px,100%);background:#201c24;color:#f6e7d1;border-radius:10px;padding:20px;transform:rotate(-4deg);position:relative;box-shadow:12px 17px 30px #753d4433}.forever-card .checker{height:25px;background:repeating-conic-gradient(#f6e7d1 0% 25%,#201c24 0% 50%) 0/20px 20px}.forever-card>img{width:100%;height:290px;object-fit:cover;border:5px solid #f6e7d1;margin:13px 0}.forever-label{position:absolute;top:95px;left:-18px;writing-mode:vertical-rl;font-family:'Barlow Condensed',sans-serif;font-size:44px;font-weight:800;color:#b93f5b}.forever-card h2{font-family:'Barlow Condensed',sans-serif;font-size:34px;line-height:1;overflow-wrap:anywhere;margin:10px 0}.forever-card p{font-size:12px;line-height:1.6;margin:14px 0}.forever-card small{font-size:7px;letter-spacing:1px}.cinema-toolbar{position:absolute;top:20px;left:24px;right:24px;z-index:5;display:flex;align-items:center;gap:8px;color:#f9e8d0;mix-blend-mode:normal}.cinema-brand{font-size:9px;letter-spacing:1px;font-weight:700;margin-right:auto;text-shadow:0 1px 4px #0008}.cinema-toolbar button,.cinema-toolbar label{border:1px solid #fff4;background:#201c2466;color:#fff6e7;border-radius:50%;height:34px;width:34px;display:grid;place-items:center;font-size:15px;cursor:pointer}.cinema-toolbar button:focus-visible,.scene-button:focus-visible{outline:3px solid #eec7a6;outline-offset:3px}.cinema-progress{display:flex;gap:3px;position:absolute;top:8px;left:12px;right:12px;z-index:6}.cinema-progress i{height:2px;flex:1;background:#fff4}.cinema-progress i.done{background:#fff0df}.cinema-progress i.current{background:#eeadad}.cinema-progress i.current:after{content:'';display:block;background:#fff;height:100%;width:0;animation:story-time 9s linear forwards}.cinema-paused .cinema-progress i.current:after{animation-play-state:paused}.cinema-paused .story-scene *{animation-play-state:paused!important}.cinema-note{position:absolute;bottom:15px;right:20px;z-index:3;max-width:180px;font-size:8px;color:#d9b4b4;text-align:right}.cinema-shell{position:relative;max-width:430px;width:100%;background:#201c24;border-radius:8px;overflow:hidden;box-shadow:0 25px 80px #0005}.cinema-navigation{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:#201c24;color:#f6e7d1;font-size:10px;letter-spacing:2px}.cinema-navigation button{background:transparent;border:1px solid #fff4;width:36px;height:36px;border-radius:50%;color:#fff6e7;font-size:20px}.cinema-navigation button:disabled{opacity:.3}.story-page{margin:0;background:#ede0d6;font-family:'DM Sans',sans-serif;color:#482832;min-height:100dvh}.story-page-main{min-height:100dvh;display:grid;grid-template-columns:1fr 430px;align-items:center;gap:80px;max-width:1070px;margin:auto;padding:30px}.story-page-copy>small{font-size:10px;letter-spacing:2px}.story-page-copy>h1{font-family:'Playfair Display',serif;font-size:62px;line-height:1.06;letter-spacing:-2px;font-weight:500;margin:25px 0}.story-page-copy>h1 em{color:#b7415b}.story-page-copy>p{font-size:14px;line-height:1.9;max-width:380px}.story-page-copy>a{display:inline-block;color:#fff1df;background:#a53b54;border-radius:50px;padding:16px 24px;text-decoration:none;font-size:12px;margin-top:25px}.story-page-copy .demo-disclosure{font-size:10px;color:#826763;margin-top:24px}.story-page [hidden]{display:none!important}.story-page *{box-sizing:border-box}.story-page button,.story-page input{font:inherit}.story-page #secret-result{min-height:32px}.story-page .unwrap-gifts{display:flex;gap:10px}.story-page .unwrap-gifts button{background:#bd4c62;border:1px solid #e8cbb1;border-radius:7px;color:#fff1dc;padding:12px;cursor:pointer}.story-page .unwrapped-card{padding:20px;background:#f4e6d0;color:#472d36;border-radius:4px;font-size:16px}.story-page .unwrapped-card img{width:100%;max-height:150px;object-fit:cover}.story-page .unwrapped-card p{font-family:'Caveat',cursive;font-size:25px}.story-page .unwrapped-card h4{margin:0 0 10px}.story-page .unwrapped-card p{margin:0}.cinematic-preview#wizard-preview{padding:0!important;width:min(430px,100vw)!important;max-height:96dvh;border:0;background:#201c24;border-radius:9px;overflow:auto}.cinematic-preview>.close{position:absolute;z-index:20;right:16px;top:20px;color:#f9e5d0;background:#201c2455;border-radius:50%;width:34px;height:34px;font-size:20px}.cinematic-preview>.viewer-label,.cinematic-preview>.preview-note{display:none}.cinematic-preview .cinema-toolbar{right:60px}.cinematic-preview .preview-nav{background:#201c24;color:#f6e7d1;margin:0;padding:12px 20px}.cinematic-preview .preview-nav button{color:#f6e7d1;border-color:#fff5;background:transparent}.cinematic-preview #preview-content{position:relative}.cinematic-preview #preview-content .story-scene{min-height:640px}.cinematic-preview #preview-content .scene-inner{min-height:640px}.cinematic-preview .story-scene .unwrapped-card{max-height:220px;overflow:auto}.cinematic-preview::backdrop{background:#1c121cdd;backdrop-filter:blur(8px)}
@keyframes scene-arrive{from{opacity:0;transform:translateY(25px) scale(1.025)}to{opacity:1;transform:none}}@keyframes type-reveal{from{opacity:0;transform:translateY(20px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}@keyframes photo-land{from{opacity:0;translate:0 30px;rotate:-7deg}to{opacity:1;translate:0 0;rotate:0deg}}@keyframes record-turn{to{transform:rotate(360deg)}}@keyframes sky-drift{to{transform:rotate(360deg)}}@keyframes season-sway{50%{transform:rotate(9deg) translateY(-7px)}}@keyframes heart-beat{50%{transform:scale(1.07)}}@keyframes orbit-pulse{50%{opacity:.45}}@keyframes story-time{to{width:100%}}
@media(max-width:760px){.story-page-main{display:flex;flex-direction:column;gap:25px;padding:20px 12px}.story-page-copy{text-align:center;max-width:430px}.story-page-copy>h1{font-size:37px;margin:15px 0}.story-page-copy>p{display:none}.story-page-copy>a{margin:0;padding:10px 20px}.story-page-copy .demo-disclosure{margin:14px 0}.cinema-shell{max-width:430px}.story-scene,.scene-inner{min-height:630px}.cinematic-preview#wizard-preview{max-height:100dvh;border-radius:0}.cinematic-preview .scene-inner{padding-inline:25px}.scene-title.oversized{font-size:57px!important}.cover-type{font-size:110px}.kind-cover .vinyl{width:250px;height:250px}.kind-cover .vinyl-label{inset:74px}.cinema-wheel{width:270px;height:270px}}
@media(prefers-reduced-motion:reduce){.story-scene,.story-scene *,.cinema-progress i:after{animation:none!important;transition:none!important}.cinema-progress i.current:after{width:100%}}