:root { color-scheme: light; --paper:#eae5dc; --ink:#484438; --muted:#746b5e; --red:#8d3936; --line:#b7ad9d; --serif:'Palatino Linotype','Book Antiqua',Palatino,Georgia,serif; }
* { box-sizing:border-box; }
html { scrollbar-gutter:stable; }
body { margin:0; min-height:100svh; display:grid; grid-template-rows:auto 1fr auto; background:var(--paper); color:var(--ink); font:16px/1.6 var(--serif); -webkit-font-smoothing:antialiased; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; z-index:-1; background:radial-gradient(ellipse at 50% 48%,#f6f2e966,transparent 65%),radial-gradient(ellipse at 10% 90%,#b4a78c20,transparent 70%); }
body::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:10; opacity:.13; mix-blend-mode:multiply; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
button,summary,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; cursor:pointer; }
button:disabled { cursor:default; }
button:focus-visible,summary:focus-visible,a:focus-visible { outline:2px solid var(--red); outline-offset:6px; }
[hidden] { display:none!important; }
.skip-link { position:absolute; left:20px; top:-80px; z-index:20; padding:14px; color:var(--ink); background:#f9f5ec; }
.skip-link:focus { top:20px; }
.site-header { padding:25px 4%; display:flex; justify-content:space-between; align-items:center; gap:18px; font-size:12px; }
.wordmark { color:var(--muted); font-style:italic; }
.name-control { border:0; background:none; padding:0 3px; font:inherit; color:inherit; cursor:pointer; display:inline-block; min-height:44px; }
.name-control:hover { color:var(--red); }
.name-hop { animation:name-hop .45s ease; }
.letter .name-control { min-height:0; }
.header-actions { display:flex; align-items:center; gap:25px; }
.sound-button { min-width:44px; min-height:44px; background:transparent; border:0; padding:9px 0 9px 9px; display:flex; align-items:center; gap:7px; font-size:11px; color:var(--muted); }
.sound-button svg { width:14px; height:14px; }
.sound-button:hover { color:var(--red); }
.sound-on,.sound-button[aria-pressed='true'] .sound-off { display:none; }
.sound-button[aria-pressed='true'] .sound-on { display:initial; }
.text-button { border:0; padding:9px 0; background:none; font-size:12px; color:var(--muted); }
.text-button:hover { color:var(--red); }
.stage { --scene-width:520px; position:relative; min-width:0; min-height:0; display:grid; align-items:start; justify-items:center; padding:35px 24px 45px; outline:none; overflow-anchor:none; }
.stage-3 { --scene-width:430px; }
.stage-4 { --scene-width:760px; }
.stage-7 { --scene-width:490px; }
.stage-8 { --scene-width:620px; }
.stage-9 { --scene-width:640px; }
.stage>.scene { max-width:min(100%,var(--scene-width)); margin-top:var(--scene-offset,0px); }
.scene { min-width:0; width:100%; max-width:800px; text-align:center; animation:arrive .7s ease both; }
.surprise-scene { max-width:620px; }
.bouquet-scene { max-width:520px; }
.birthday-bouquet { display:block; width:100%; height:100%; object-fit:contain; }
.bouquet-display { position:relative; width:min(290px,80%); height:350px; margin:20px auto 12px; }
.bouquet-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; max-width:350px; margin-inline:auto; }
.bouquet-option { min-height:44px; padding:8px 13px; background:#f8f3e833; border:1px solid #b9ad9b; border-radius:22px; font-size:12px; transition:background .2s,border-color .2s; }
.bouquet-option:hover { background:#f8f2e6; }
.bouquet-option[aria-pressed='true'] { border-color:var(--red); color:var(--red); background:#f5e9dd; }
.bouquet-caption { margin-top:10px; }
.watercolor { display:block; object-fit:contain; pointer-events:none; user-select:none; }
.scene-illustration { width:150px; height:150px; margin:0 auto 14px; }
.intro-flowers { width:90px; height:90px; margin:0 auto 22px; }
.candy-illustration { width:160px; height:135px; margin-bottom:24px; transform:rotate(-8deg); }
.dream-illustration { width:110px; height:110px; margin-bottom:22px; }
.letter-flowers { width:100px; height:100px; margin:0 auto 26px; }
.gift-illustration { width:165px; height:165px; margin-bottom:20px; }
.bubu-teacups { width:180px; height:150px; margin:12px auto 0; }
.bouquet-scene>.primary-button { max-width:100%; margin-top:24px; }
.bouquet-scene .subtitle { max-width:340px; }
.pocket-surprise { max-width:410px; margin:28px auto 20px; text-align:center; border-top:1px solid var(--line); }
.pocket-surprise>summary { text-align:left; font-size:14px; }
.pocket-surprise .paper-toy { border-top:0; margin-top:0; }
.pocket-surprise .paper-toy + .paper-toy { border-top:1px solid var(--line); }
h1 { font-weight:400; font-size:clamp(28px,3vw,34px); line-height:1.65; margin:0; letter-spacing:-.55px; }
.subtitle { color:var(--muted); font-size:15px; line-height:1.9; margin:17px auto 0; }
.eyebrow { font-size:11px; font-style:italic; color:var(--muted); margin:0 0 18px; }
.primary-button,.secondary-button { border:1px solid #716959; background:#ffffff08; border-radius:0; min-height:48px; padding:11px 27px; min-width:142px; font-size:15px; transition:background .2s,border-color .2s; }
.primary-button:hover { background:#f8f4ec80; border-color:var(--red); }
.primary-button:active { background:#ded4c2; }
.primary-button:disabled { color:#857b6d; border-color:#a99f90; background:none; }
.secondary-button { color:var(--muted); border-color:#a99f90; }
.micro-copy { color:var(--muted); font-size:12px; font-style:italic; line-height:1.7; margin:19px 0 0; }
.intro h1 { font-size:31px; }
.envelope-button { display:block; margin:33px auto 0; border:0; background:transparent; padding:12px; perspective:1000px; }
.envelope { width:320px; height:218px; position:relative; filter:drop-shadow(0 8px 14px #655b4020); }
.envelope-back { position:absolute; inset:0; background:#f2eee6; border:1px solid #f5f0e7; }
.envelope-letter { width:270px; height:168px; position:absolute; top:26px; left:25px; background:#fffaf1; padding:30px; font-size:21px; text-align:left; opacity:0; transition:transform .65s .15s,opacity .4s; }
.envelope-front { position:absolute; inset:0; background:linear-gradient(150deg,#f9f6ef,#e8e2d8); clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%); z-index:3; }
.envelope-front::after { content:''; position:absolute; inset:0; background:#f2eee7; clip-path:polygon(0 100%,50% 48%,100% 100%); }
.envelope-flap { position:absolute; inset:0; background:linear-gradient(#f7f3ec,#eee8dd); clip-path:polygon(0 0,100% 0,50% 53%); transform-origin:top; z-index:4; transition:transform .6s,z-index 0s .3s; }
.envelope-seal { position:absolute; left:calc(50% - 23px); top:calc(50% - 5px); z-index:5; width:46px; height:45px; display:grid; place-items:center; border-radius:48% 52% 46% 54%; background:var(--red); color:#f4e7d6; border:3px solid #8a3633; box-shadow:1px 3px 5px #4f25151a,inset 0 0 0 1px #af625d; font-size:14px; line-height:1; transition:transform .3s,opacity .3s; }
.envelope-button:hover .envelope-seal { transform:scale(1.08) rotate(-5deg); }
.opening .envelope-seal { opacity:0; transform:scale(1.3); }
.opening .envelope-flap { transform:rotateX(180deg); z-index:0; }
.opening .envelope-letter { transform:translateY(-55px); opacity:1; }
.intro-hint { margin-top:28px; }
.site-footer { padding:18px 4% 23px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px; color:var(--muted); font-size:10px; }
.footer-note { font-style:italic; }
.secret-button { justify-self:end; border:0; background:none; color:#85775e; padding:5px 12px; font-size:20px; min-width:44px; min-height:44px; }
.secret-button:hover { color:var(--red); transform:rotate(12deg); }
#progress { display:flex; align-items:center; justify-content:center; gap:12px; }
.progress-dot { width:3px; height:3px; background:#b5ac9b; border-radius:50%; }
.progress-dot.visited { background:#756957; }
.progress-dot[aria-current] { outline:1px solid #8d7c60; outline-offset:4px; margin-inline:4px; }
.final-progress { color:var(--muted); font-size:10px; font-style:italic; }
.choice-scene h1 { max-width:480px; margin-inline:auto; }
.choice-arena { display:flex; align-items:flex-end; justify-content:center; gap:200px; margin:65px auto 0; min-height:54px; }
.choice-arena #no:not(.runaway),.choice-arena:has(.runaway)::after { margin-bottom:72px; }
.choice-arena:has(.runaway)::after { content:''; flex:0 0 var(--runaway-width); height:48px; }
.choice-arena #yes { transform-origin:left center; }
.choice-scene .micro-copy { min-height:40px; margin-top:30px; }
.secondary-button.runaway { position:fixed; z-index:8; width:140px; min-width:140px; padding-inline:12px; display:grid; place-items:center; text-align:center; white-space:nowrap; background:#ece7dd; box-shadow:0 4px 16px #57462c10; transition:left .18s,top .18s; }
.captcha-scene { max-width:430px; }
.captcha-grid { display:grid; grid-template-columns:repeat(3,1fr); width:264px; max-width:100%; margin:27px auto 0; gap:7px; }
.captcha-tile { aspect-ratio:1; border:1px solid #b9ad9b; background:#f3eee529; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:5px; }
.captcha-tile>span:first-child { font-size:30px; line-height:1.2; }
.captcha-tile svg { width:36px; height:36px; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; display:block; margin-bottom:3px; }
.captcha-tile .tile-label { font-size:10px; color:var(--muted); }
.captcha-tile:hover { background:#f6f1e9; }
.captcha-tile.selected { border-color:#99564d; color:var(--red); background:#f1e5d8; }
.captcha-status { min-height:24px; margin:17px 0; }
.wiggle { animation:wiggle .35s ease; }
.wishes { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin:39px auto 32px; max-width:670px; }
.wish { text-align:center; border:1px solid #b9ad9b; border-radius:0; background:#faf6ee1f; min-height:228px; padding:19px 17px; display:flex; flex-direction:column; align-items:center; transition:background .3s; }
.wish:hover { background:#f5eee3; }
.wish-number { font-size:10px; color:var(--muted); align-self:flex-start; }
.wish-art { height:100px; width:100px; margin:12px 0 17px; }
.wish-art img { width:100%; height:100%; }
.wish-title { font-size:21px; }
.wish-hint { font-size:11px; color:var(--muted); font-style:italic; margin-top:9px; }
.wish-text { margin-top:12px; font-size:14px; color:var(--muted); line-height:1.8; }
.wish.opened { background:#f3ede1; }
.wish.opened .wish-art { width:80px; height:80px; margin:5px 0 10px; }
.forbidden { display:block; font-size:10px; margin:23px auto 0; font-style:italic; text-decoration:underline; text-underline-offset:4px; }
.candle-button { display:block; width:130px; height:215px; position:relative; margin:30px auto 0; background:none; border:0; border-radius:40%; }
.candle { position:absolute; bottom:25px; left:52px; width:26px; height:132px; background:linear-gradient(90deg,#d3c9b3,#f2ead8 36%,#e4d7bf 80%,#d4c5a9); border-radius:3px 3px 1px 1px; box-shadow:2px 4px 6px #73623e10; }
.candle::before { content:''; position:absolute; top:-3px; left:0; width:26px; height:7px; border-radius:50%; background:#efe6d1; }
.wick { width:2px; height:10px; background:#63543c; position:absolute; top:-9px; left:12px; }
.flame { width:16px; height:32px; position:absolute; top:-39px; left:5px; border-radius:80% 20% 55% 45%; transform:rotate(-20deg); background:radial-gradient(ellipse at 50% 80%,#fff4c0 0 20%,#eebc60 50%,#e5a04b 90%); box-shadow:0 0 25px 8px #e8bc652c; animation:flicker 1.6s ease-in-out infinite alternate; }
.blown .flame { display:none; }
.blown .candle::after { content:''; position:absolute; top:-46px; left:13px; width:15px; height:38px; border-left:1px solid #9c907c; border-radius:50%; animation:smoke 2s ease-out both; }
.candle-message { font-size:27px; margin:0 0 5px; }
.candle-hint { margin-top:0; }
.candle-feedback { display:grid; }
.candle-feedback>* { grid-area:1 / 1; }
.candle-feedback>[hidden] { display:block!important; visibility:hidden; }
#candle-result .micro-copy { margin:4px 0 25px; }
.letter-scene { max-width:490px; }
.letter { text-align:left; font-size:16px; line-height:1.95; }
.letter h1 { font-size:26px; line-height:1.6; margin-bottom:30px; }
.letter p { margin:0 0 23px; }
.letter .signature { margin-top:28px; font-style:italic; }
.letter-word { animation:word-in .5s var(--delay) both; }
.letter-scene > .primary-button { margin-top:10px; }
.gift-scene { max-width:640px; }
.gift-description { max-width:435px; }
.gift-photo { margin:28px auto 0; max-width:540px; }
.gift-photo img { display:block; width:100%; height:auto; border:5px solid #faf6ee; box-shadow:0 3px 12px #57462c18; transform:rotate(-1deg); }
.gift-guide,.gift-info { max-width:480px; margin:36px auto 28px; text-align:left; border-top:1px solid var(--line); }
.guide-caption { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:20px 0 12px; color:var(--muted); }
.gift-guide h2,.gift-info h2 { margin:0; color:var(--ink); font-size:19px; font-weight:400; line-height:1.5; }
.guide-status { flex-shrink:0; border:1px solid var(--line); padding:3px 9px; font-size:11px; font-style:italic; }
.guide-pending { margin:8px 0 0; padding:16px 20px; border-left:2px solid var(--line); background:#faf6ee40; color:var(--muted); font-size:14px; line-height:1.9; }
.guide-intro { margin:4px 0 12px; font-size:13px; line-height:1.8; color:var(--muted); }
.guide-body { padding:0 0 22px 32px; font-size:14px; line-height:1.8; color:var(--ink); overflow-wrap:anywhere; }
.guide-body ol { padding-left:20px; margin:0 0 16px; }
.guide-body li { padding-left:4px; margin-bottom:12px; }
.guide-body li::marker { color:var(--red); }
.guide-body .guide-route { margin:0 0 18px; padding:10px 12px; background:#faf6ee60; color:var(--ink); font-size:12px; }
.guide-route span { margin-inline:5px; color:var(--muted); }
.guide-links { display:flex; flex-direction:column; align-items:center; gap:8px; }
.guide-links a { display:inline-block; width:min(320px,90%); min-height:44px; padding:9px 13px; border:1px solid var(--line); color:var(--red); text-decoration:none; text-align:center; background:#faf6ee40; line-height:1.6; }
.guide-links a:hover { border-color:var(--red); background:#faf6ee; }
.guide-image { margin:20px 0 0; }
.guide-image a { display:block; width:100%; background:#fff; cursor:zoom-in; }
.guide-image img { display:block; width:100%; height:auto; border:1px solid var(--line); }
.guide-image img[src*='/amazon-sign-in'] { max-width:336px; height:440px; object-fit:cover; object-position:center top; margin:auto; }
.guide-image:has(img[src*='/amazon-sign-in']) { max-width:336px; margin-inline:auto; }
.guide-image figcaption { margin-top:8px; font-size:11px; line-height:1.7; color:var(--muted); }
.guide-body .guide-hint { margin:16px 0 0; font-size:12px; font-style:italic; }
.gift-guide summary>span:nth-child(2) { min-width:0; }
.gift-guide .section-number { flex-shrink:0; }
.gift-guide .details-plus { flex-shrink:0; }
@media(max-width:600px) {
 .gift-photo { max-width:440px; }
 .gift-photo img { border-width:4px; }
 .guide-caption { flex-wrap:wrap; gap:8px; }
 .guide-body { padding-left:12px; }
 .gift-guide summary { gap:12px; }
}
.gift-info { margin-top:32px; }
.gift-info h2 { padding:20px 0 10px; }
.gift-info details p { margin-left:0; }
.gift-return { max-width:410px; margin:32px auto 0; padding-top:22px; border-top:1px solid var(--line); }
.gift-return .return-note { margin:0 0 7px; }
details { border-bottom:1px solid #bcb19e; }
summary { display:flex; align-items:center; gap:17px; cursor:pointer; padding:18px 0; list-style:none; font-size:16px; }
summary::-webkit-details-marker { display:none; }
.section-number { color:var(--muted); font-size:11px; }
.details-plus { margin-left:auto; color:var(--muted); font-size:21px; transition:transform .2s; }
details[open]>summary .details-plus { transform:rotate(45deg); }
details p { margin:0 25px 23px 32px; color:var(--muted); font-size:14px; line-height:1.9; }
.return-note,.storage-note { color:var(--muted); font-size:12px; line-height:1.9; }
.replay { font-size:14px; text-decoration:underline; text-underline-offset:5px; }
.storage-note { max-width:430px; margin:15px auto; }
.sticker { display:block; object-fit:contain; user-select:none; pointer-events:none; }
.sticker--photo { border-radius:14px; }
.sticker-margin { position:absolute; top:0; bottom:0; width:calc((100% - var(--scene-width))/2 - 48px); pointer-events:none; opacity:.85; }
.sticker-margin--left { left:24px; }
.sticker-margin--right { right:24px; }
.margin-sticker { position:absolute; left:calc(50% + var(--nudge)); width:var(--size); height:var(--size); max-width:100%; transform:translateX(-50%) rotate(var(--tilt)); }
.margin-sticker.sticker--character { width:calc(var(--size)*1.1); height:calc(var(--size)*1.1); }
.sticker-group--bouquet { display:flex; position:absolute; left:-95px; right:-95px; bottom:18px; justify-content:space-between; align-items:flex-end; pointer-events:none; }
.sticker-group--bouquet .sticker { width:80px; height:95px; }
.sticker-group--letter { display:flex; justify-content:flex-end; align-items:center; gap:9px; margin:8px 0 18px; }
.sticker-group--letter .sticker { width:60px; height:65px; }
.sticker-group--letter .sticker:first-child { transform:rotate(-5deg); }
.sticker-group--letter .sticker:last-child { transform:translateY(-5px) rotate(4deg); }
.sticker-group--sleepy { float:right; margin:0 0 8px 16px; }
.sticker-group--sleepy .sticker { width:85px; height:85px; }
.toast { position:fixed; z-index:12; bottom:30px; left:50%; transform:translateX(-50%); width:max-content; max-width:min(440px,calc(100% - 40px)); background:#f6f0e4; padding:17px 24px; border:1px solid #b3a085; box-shadow:0 8px 26px #51452d16; color:var(--ink); font-size:14px; text-align:center; animation:arrive .3s both; }
#confetti { position:fixed; inset:0; z-index:11; pointer-events:none; overflow:hidden; }
#confetti i { position:absolute; top:-25px; left:var(--x); color:var(--color); font-size:25px; font-style:normal; animation:confetti 3s var(--delay) ease-in both; }
.noscript { text-align:center; padding:30px; }
@keyframes arrive { from { opacity:0; } to { opacity:1; } }
@keyframes name-hop { 35% { transform:translateY(-5px) rotate(-3deg); } 65% { transform:translateY(-2px) rotate(2deg); } }
@keyframes word-in { from { opacity:0; filter:blur(2px); } to { opacity:1; filter:none; } }
@keyframes flicker { from { transform:rotate(-24deg) scale(.95); } to { transform:rotate(-16deg) scale(1.05); } }
@keyframes smoke { to { opacity:0; transform:translateY(-40px) scale(1.7); } }
@keyframes confetti { to { transform:translate(25px,105vh) rotate(var(--rotation)); opacity:0; } }
@keyframes wiggle { 25%,75% { transform:rotate(-5deg); } 50% { transform:rotate(5deg); } }
@media(max-width:960px) {
 .sticker-margin { display:none; }
}
@media(max-width:1080px) {
 .stage-4 .sticker-margin { display:none; }
}
@media(max-width:600px) {
 .sticker-group--bouquet { left:-28px; right:-28px; bottom:15px; }
 .sticker-group--bouquet .sticker { width:58px; height:72px; }
 .site-header { padding:17px 24px; } .header-actions { gap:18px; }
 .stage { padding:27px 25px 40px; }
 h1 { font-size:27px; line-height:1.65; } .intro h1 { font-size:28px; }
 .envelope { width:280px; height:193px; } .envelope-letter { width:236px; height:144px; left:22px; }
 .envelope-button { margin-top:31px; padding:4px; } .subtitle { font-size:14px; }
 .bouquet-display { height:300px; margin-top:15px; }
 .bouquet-option { padding-inline:6px; font-size:11px; }
 .intro-flowers { width:75px; height:75px; margin-bottom:18px; }
 .candy-illustration { width:135px; height:110px; margin-bottom:18px; }
 .dream-illustration { width:90px; height:90px; }
 .gift-illustration { width:140px; height:140px; }
 .site-footer { padding:16px 24px 20px; grid-template-columns:1fr auto 1fr; gap:15px; }
 .footer-note { font-size:9px; max-width:90px; } #progress { gap:9px; }
 .choice-arena { flex-direction:column-reverse; align-items:center; gap:32px; margin-top:48px; }
 .choice-arena #no:not(.runaway),.choice-arena:has(.runaway)::after { margin-bottom:0; }
 .choice-arena:has(.runaway)::after { flex-basis:48px; width:var(--runaway-width); }
 .primary-button,.secondary-button { min-width:126px; padding-inline:19px; font-size:14px; }
 .wishes { grid-template-columns:1fr; gap:12px; margin:28px auto; }
 .wish { min-height:110px; display:grid; grid-template-columns:16px 65px 1fr; column-gap:10px; padding:14px; text-align:left; align-items:center; }
 .wish-number { align-self:center; } .wish-title { font-size:20px; }
 .wish .wish-art,.wish.opened .wish-art { width:65px; height:65px; margin:0; grid-row:1/3; grid-column:2; }
 .wish-hint { grid-column:3; margin:0; } .wish-text { grid-column:2/4; margin-top:12px; font-size:14px; }
 .letter { font-size:15px; } .letter h1 { font-size:25px; }
 .guide-caption { font-size:9px; } summary { font-size:15px; } .gift-scene h1 { font-size:26px; }
}
@media(max-width:360px) {
 .sticker-group--sleepy { margin-left:10px; }
 .sticker-group--sleepy .sticker { width:68px; height:68px; }
 .site-header { padding-inline:20px; } .sound-button>span { display:none; }
 .envelope { width:254px; height:178px; } .envelope-letter { width:214px; left:20px; }
 .primary-button,.secondary-button { min-width:116px; padding-inline:14px; }
 .secondary-button.runaway { width:140px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }