@font-face{font-family:Stationery;src:url('../../proposal/physical/fonts/CormorantGaramond.ttf') format('truetype');font-display:swap;font-weight:300 700}
/* The recipient gets an object, one hint, and an optional message. */
body[data-experience=object]{background-image:radial-gradient(ellipse at 50% 40%,var(--birthday-glow),transparent 75%);background-size:auto}
body[data-experience=object] .quiet-tools{padding:18px 26px}
body[data-experience=object] .brand span,
body[data-experience=object] #all-memories,
body[data-experience=object] .scene-heading .eyebrow,
body[data-experience=object] #scene-caption,
body[data-experience=object] #scene-progress,
body[data-experience=object] #gesture-hint,
body[data-experience=object] #scene-status{display:none}
body[data-experience=object] #physical-stage{padding:0 18px 20px;min-height:calc(100svh - 80px)}
body[data-experience=object] #physical-stage::before{opacity:.045}
body[data-experience=object] .scene-heading{min-height:0;padding:4px 0 0;border:0}
body[data-experience=object] .scene-heading h1{font-size:28px;font-style:italic;font-weight:400;margin:0;line-height:1.15;opacity:.7}
body[data-experience=object] #experience-layout,
body[data-experience=object][data-reading=true] #experience-layout{display:block;max-width:1300px}
body[data-experience=object] #scene-viewport,
body[data-experience=object][data-reading=true] #scene-viewport{height:clamp(380px,68svh,760px);margin:0;transition:none}
body[data-experience=object] #physical-canvas{cursor:grab}
body[data-experience=object] #physical-canvas:active{cursor:grabbing}
body[data-experience=object] .handling{margin:0 auto;min-height:55px}
body[data-experience=object] #handle-object{background:transparent;color:var(--ink);border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:10px 22px;font-size:23px}
body[data-experience=object] #parent-wish{font-size:clamp(25px,3vw,38px);line-height:1.1;margin:0 auto 8px;max-width:650px}
body[data-experience=object] #parent-wish:empty{display:none}
body[data-experience=object] #after-actions{gap:22px;margin:8px auto 0}
body[data-experience=object] #after-actions button{font-size:15px;min-height:38px}
body[data-experience=object] #reading-panel{position:absolute;z-index:4;bottom:20px;left:50%;transform:translateX(-50%);width:min(470px,90%);max-height:50svh;overflow:auto;padding:22px;box-shadow:0 12px 60px #30221030;rotate:0}
body[data-experience=object] #reading-panel h3{font-size:27px}
body[data-experience=object] #reading-panel p{font-size:21px}
body[data-experience=object] #wish-section{margin-top:35px}
body[data-experience=object] .page-footer{display:none}
@media(max-width:500px){body[data-experience=object] #physical-stage{padding-inline:4px}body[data-experience=object] .quiet-tools{padding:14px 18px}body[data-experience=object] #scene-viewport,body[data-experience=object][data-reading=true] #scene-viewport{height:64svh;min-height:350px}body[data-experience=object] #parent-wish{max-width:90%;font-size:28px}}
body[data-stationery-scene=tabletop]{background:#e5ddcc;color:#40392e}
body[data-stationery-scene=tabletop] #physical-stage::before{display:none}
body[data-stationery-scene=tabletop] #scene-viewport{border-radius:12px;box-shadow:0 16px 36px #49372118}
body[data-stationery-scene=tabletop] .scene-heading{padding-bottom:16px}
body[data-stationery-scene=tabletop] #experience-layout{max-width:1100px;margin:auto}
 #album-navigation{display:flex;justify-content:center;align-items:center;gap:24px;margin:10px auto}
 #album-navigation[hidden]{display:none}
 #album-navigation button{width:48px;height:44px;border:1px solid #88795f55;border-radius:50%;background:#fff8e966;color:#43594a;font-size:24px}
 #album-navigation button:disabled{opacity:.3;cursor:default}
 #album-position{font-size:15px;min-width:45px}
body[data-polaroid=true]{background:radial-gradient(ellipse at 50% 44%,#fff9ed 0%,#f4e4d3 55%,#e9cbb5 100%);color:#80624f}
body[data-polaroid=true] #physical-stage::before,body[data-polaroid=true] .scene-heading,body[data-polaroid=true] #read-wish{display:none}
body[data-polaroid=true] #scene-viewport{height:70svh;min-height:370px;box-shadow:none;border:0}
body[data-polaroid=true] #handle-object{font-size:20px;color:#80624f}
body[data-polaroid=true] #after-actions button{font-size:14px;color:#92765f}
body[data-explosion-box=true] #physical-stage::before,body[data-explosion-box=true] #physical-stage::after{display:none}
body[data-explosion-box=true] #scene-viewport{height:72svh;min-height:440px;max-height:820px;background:transparent}
body[data-explosion-box=true] #parent-wish{display:none}
@media(max-width:600px){body[data-explosion-box=true] #scene-viewport{height:65svh;min-height:420px}}

body[data-explosion-box=true] .scene-heading{display:none}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Loading: the wordmark rises letter by letter while a ribbon draws beneath it. */
#scene-loader{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:inherit;background-color:var(--surface);transition:opacity .45s ease,visibility .45s;animation:loader-give-up 0s 15s forwards}
#scene-loader[data-done]{opacity:0;visibility:hidden;pointer-events:none}
.loader-mark{display:grid;justify-items:center;gap:2px;color:var(--ink);opacity:0;animation:loader-in .35s .15s ease-out forwards}
.loader-word{display:flex;font-size:44px;font-weight:600;letter-spacing:-1.5px;line-height:1}
.loader-word span{display:inline-block;animation:loader-letter 1.8s cubic-bezier(.35,0,.25,1) infinite}
.loader-word span:nth-child(2){animation-delay:.08s}.loader-word span:nth-child(3){animation-delay:.16s}.loader-word span:nth-child(4){animation-delay:.24s}.loader-word span:nth-child(5){animation-delay:.32s}.loader-word span:nth-child(6){animation-delay:.4s}
.loader-ribbon{width:120px;height:14px;overflow:visible}
.loader-ribbon path{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:130;stroke-dashoffset:130;animation:loader-ribbon 1.8s ease-in-out infinite}
@keyframes loader-in{to{opacity:1}}
@keyframes loader-letter{0%,55%,100%{translate:0 0;opacity:1}22%{translate:0 -9px;opacity:.55}}
@keyframes loader-ribbon{0%{stroke-dashoffset:130}50%{stroke-dashoffset:0}100%{stroke-dashoffset:-130}}
@keyframes loader-give-up{to{opacity:0;visibility:hidden;pointer-events:none}}
body.reduced .loader-word span,body.reduced .loader-ribbon path{animation:none}body.reduced .loader-ribbon path{stroke-dashoffset:0}

/* A tapped photo or message comes forward to the middle of the screen. */
.focus-view{border:0;padding:0;background:transparent;max-width:min(560px,calc(100vw - 32px));width:100%;max-height:calc(100svh - 32px);overflow:visible;color:#44382e}
.focus-view::backdrop{background:#1d150fb3;backdrop-filter:blur(3px)}
.focus-view figure{margin:0;padding:14px 14px 18px;background:#fffaf0;box-shadow:0 22px 60px #0007;rotate:-.6deg}
.focus-frame{display:grid;place-items:center;background:#e9e1d2}
.focus-frame img,.focus-frame canvas{display:block;max-width:100%;max-height:calc(100svh - 190px);width:auto;height:auto}
.focus-view figcaption{margin-top:12px;text-align:center;font-size:20px;font-style:italic;color:#6d5a47}
.focus-view figcaption:empty{display:none}
.focus-letter{max-height:calc(100svh - 110px);overflow:auto;padding:40px 38px 34px;background:var(--paper);box-shadow:0 22px 60px #0007;text-align:center;overflow-wrap:anywhere}
.focus-letter .eyebrow{margin:0 0 10px;font-size:13px;letter-spacing:.14em;opacity:.7}
.focus-letter h2{margin:0 0 14px;font-size:clamp(30px,6vw,40px);font-weight:500;line-height:1.1}
.focus-letter .letter-copy{margin:0;font-size:20px;line-height:1.55;white-space:pre-line}
.focus-letter .signature{margin:22px 0 0;font-size:20px;font-style:italic;text-align:right}
.focus-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px;margin-top:14px}
.focus-actions button{min-height:44px;padding:8px 4px;border-bottom:1px solid #f4eadb55;border-radius:0;color:#f4eadb;font-size:16px}
.focus-actions button:hover,.focus-actions button:focus-visible{border-bottom-color:#ddad59;color:#fff7e8}
body[data-focusable=true][data-step=complete] #physical-canvas{cursor:pointer}

/* Wrapped in Love: a party backdrop in the box's own purple, pink, gold and mint. */
body[data-explosion-box=true],body[data-wall-scene=party]{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='5'%3E%3Cpath d='M28 64c10-14 22 8 32-6s22 6 30-4' stroke='%23f4a7c6'/%3E%3Cpath d='M226 300c10-14 22 8 32-6s22 6 30-4' stroke='%238fd3c8'/%3E%3Cpath d='M258 92c8 10-6 20 2 32s-6 22 2 30' stroke='%23c9a3f0'/%3E%3Cpath d='M84 228c8 10-6 20 2 32s-6 22 2 30' stroke='%23f6c85f'/%3E%3C/g%3E%3Cg%3E%3Crect x='152' y='40' width='14' height='8' rx='2' fill='%23f6c85f' transform='rotate(24 159 44)'/%3E%3Crect x='318' y='176' width='14' height='8' rx='2' fill='%23f48fb1' transform='rotate(-32 325 180)'/%3E%3Crect x='36' y='160' width='12' height='7' rx='2' fill='%239ad9cf' transform='rotate(58 42 163)'/%3E%3Crect x='182' y='204' width='12' height='7' rx='2' fill='%23b89ce8' transform='rotate(-14 188 207)'/%3E%3Crect x='118' y='318' width='13' height='7' rx='2' fill='%23f7a072' transform='rotate(40 124 321)'/%3E%3Ccircle cx='300' cy='40' r='5' fill='%23b89ce8'/%3E%3Ccircle cx='210' cy='130' r='4' fill='%23f48fb1'/%3E%3Ccircle cx='60' cy='300' r='5' fill='%23f6c85f'/%3E%3Ccircle cx='330' cy='330' r='4' fill='%239ad9cf'/%3E%3Ccircle cx='120' cy='110' r='3.5' fill='%23f7a072'/%3E%3Cpath d='M270 236l3.5 7.5 8 1-6 5.5 1.5 8-7-4-7 4 1.5-8-6-5.5 8-1z' fill='%23f6c85f'/%3E%3Cpath d='M96 20l2.6 5.4 6 .8-4.4 4 1.1 5.8-5.3-2.8-5.3 2.8 1.1-5.8-4.4-4 6-.8z' fill='%23c9a3f0'/%3E%3C/g%3E%3C/svg%3E") 0 0/360px 360px,radial-gradient(circle at 12% 18%,#f7d6ea 0,transparent 32%),radial-gradient(circle at 88% 14%,#e3d6fb 0,transparent 30%),radial-gradient(circle at 82% 86%,#d3f1ea 0,transparent 32%),radial-gradient(circle at 16% 84%,#fff0c9 0,transparent 30%),#fff8f4;background-attachment:fixed}
body[data-explosion-box=true] #scene-loader{background:#fff8f4}
/* Send a little love back: reactions and a private note on one small card. */
.reply-card{padding:30px 30px 24px;background:var(--paper);box-shadow:0 22px 60px #0007;color:#44382e}
.reply-card h2{margin:0 0 6px;font-size:clamp(26px,5.5vw,32px);font-weight:500;line-height:1.15;text-align:center}
.reply-card #reply-form{margin:0;padding:0;border:0}
.reply-card fieldset{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:12px 0 16px;margin:0}
.reply-card legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.reply-card .reaction{position:relative;margin:0;padding:8px 16px;border:1px solid #88725966;border-radius:999px;font-size:17px;cursor:pointer;transition:background-color .2s,border-color .2s}
.reply-card .reaction input{position:absolute;opacity:0;pointer-events:none}
.reply-card .reaction:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--paper)}
.reply-card .reaction:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.reply-card label[for=private-reply]{display:block;font-size:16px;margin-bottom:6px;opacity:.8}
.reply-card textarea{width:100%;padding:10px 12px;border:1px solid #88725955;border-radius:6px;background:#fffdf8;font-size:17px;resize:vertical}
.reply-card [type=submit]{display:block;width:100%;margin-top:14px;font-size:19px}
.reply-card #reply-status{margin:10px 0 0;text-align:center;font-size:16px}
.reply-card #reply-status:empty{display:none}
/* Shared "school wall" setting: a painted classroom wall with a chair rail and wainscoting. */
body[data-wall-scene=classroom]{background:repeating-linear-gradient(90deg,#0000 0 118px,#0000000a 118px 120px) bottom/100% 24svh no-repeat,linear-gradient(#0000 calc(100% - 24svh),#6f9f8d calc(100% - 24svh),#6f9f8d calc(100% - 24svh + 10px),#9cc7b5 calc(100% - 24svh + 10px)),radial-gradient(ellipse at 50% 30%,#fff7e6,#f6e3c1 70%);background-color:#f6e3c1;background-attachment:fixed}
body[data-wall-scene=classroom] #scene-viewport{height:clamp(420px,76svh,860px)}
body[data-wall-scene=classroom] #physical-stage::before,body[data-wall-scene=classroom] #physical-stage::after{display:none}
/* Gift-draw designs: opened gifts collect in a row of bright tokens under the machine or jar. */
#gift-tray{max-width:640px;margin:6px auto 0;text-align:center}
#gift-tray-title{margin:0 0 8px;font-size:16px;letter-spacing:.02em;opacity:.85}
#gift-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none}
#gift-list li{display:grid;place-items:center;min-width:44px;min-height:44px}
.gift-slot{width:44px;border:2px dashed color-mix(in srgb,var(--ink) 30%,transparent);border-radius:50%;font-size:18px;opacity:.55}
.gift-chip button{max-width:190px;min-height:40px;padding:6px 14px 6px 34px;border-radius:999px;background:hsl(var(--hue) 85% 86%);color:hsl(var(--hue) 45% 25%);font-size:15px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;box-shadow:0 3px 0 hsl(var(--hue) 45% 70%)}
.gift-chip button::before{content:'★';position:absolute;left:12px;top:50%;translate:0 -50%;font-size:14px}
.gift-chip{animation:gift-pop .45s cubic-bezier(.2,1.6,.4,1) both}
@keyframes gift-pop{from{scale:.3;opacity:0}}
.gift-card img{display:block;max-width:100%;max-height:40svh;margin:0 auto 16px;border:8px solid #fff;box-shadow:0 6px 18px #0002;rotate:-1.5deg}
body[data-wall-scene=party] #physical-stage::before,body[data-wall-scene=party] #physical-stage::after,body[data-wall-scene=kitchen] #physical-stage::before,body[data-wall-scene=kitchen] #physical-stage::after{display:none}
/* Little Things, Kept: a kitchen corner, dotted wallpaper over a tiled backsplash and a wooden counter. */
body[data-wall-scene=kitchen]{background:linear-gradient(#0000 calc(100% - 22svh),#b98553 calc(100% - 22svh),#a0703f calc(100% - 22svh + 14px),#c79765 calc(100% - 22svh + 14px),#b88453),repeating-linear-gradient(#0000 0 38px,#d9e4e6 38px 40px) 0 calc(100% - 22svh)/100% 30svh no-repeat,repeating-linear-gradient(90deg,#f7fbfb 0 78px,#d9e4e6 78px 80px) 0 calc(100% - 22svh)/100% 30svh no-repeat,radial-gradient(circle,#f3b7c3 0 3px,#0000 3.5px) 0 0/34px 34px,#fdf1e6;background-attachment:fixed}
body[data-wall-scene=party]{--surface:#fff8f4;--ink:#4a2f55;--accent:#c0577a;--paper:#fffaf3;--line:#4a2f5533;color:var(--ink)}
/* Our Little Mixtape: a dresser top against striped bedroom wallpaper, and the self-writing wish. */
body[data-wall-scene=bedroom]{--ink:#4b3228;--surface:#f7ecf0;color:var(--ink);background:linear-gradient(#0000 calc(100% - 20svh),#9a6547 calc(100% - 20svh),#7f4f36 calc(100% - 20svh + 12px),#b27a58 calc(100% - 20svh + 12px),#a36c4b),repeating-linear-gradient(90deg,#f7e3ea 0 36px,#fbeff3 36px 72px),#f7e3ea;background-attachment:fixed}
body[data-wall-scene=bedroom] #physical-stage::before,body[data-wall-scene=bedroom] #physical-stage::after{display:none}
.music-sheet{position:relative;max-width:560px;margin:-8px auto 6px;padding:18px 24px 14px;min-height:10.5em;background:#fffaf0;box-shadow:0 10px 26px #4b322822;rotate:-.8deg;font-family:WishHand,cursive;color:#5a3b2c;text-align:center;min-height:64px}
.music-sheet::before{content:'♪';position:absolute;left:12px;top:6px;font-size:22px;opacity:.5}
.music-sheet-words{margin:0;font-size:clamp(22px,5.2vw,28px);line-height:1.35}
.music-sheet-words .ink{animation:ink-in .5s ease-out both}
@keyframes ink-in{from{opacity:0;filter:blur(3px);translate:0 4px}}
.music-sheet-signature{margin:10px 0 0;font-size:24px;text-align:right}
.music-sheet-reply{margin-top:6px;border-bottom:1px solid #5a3b2c55;border-radius:0;font-family:Keepsake,Georgia,serif;font-size:16px}