:root{color-scheme:dark;--bg:#0c1419;--ink:#f5f1e9;--muted:#9aa5a7;--gold:#d7b778;--orange:#c75923}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}.hidden{display:none!important}.grain{position:fixed;inset:0;pointer-events:none;opacity:.12;z-index:20;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='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.2' filter='url(%23n)'/%3E%3C/svg%3E")}.site-head,.site-foot{max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:24px 5.4%;position:relative;z-index:5}.site-head{border-bottom:1px solid #ffffff17}.brand{font-family:Manrope,sans-serif;font-weight:800;font-size:13px;letter-spacing:.19em;display:flex;align-items:center;gap:12px}.brand-mark{color:var(--gold);font-size:25px}.brand-divider{height:17px;width:1px;background:#ffffff3b}.brand small{font-size:9px;letter-spacing:.2em;color:var(--muted);font-weight:600}.head-note{font-size:9px;letter-spacing:.22em;color:var(--muted)}h1,h2,p{margin:0}h1,h2{font-family:Manrope,sans-serif;letter-spacing:-.065em;font-weight:500}h1{font-size:clamp(46px,5.4vw,84px);line-height:1.08}h1 em,h2 em{font-style:normal;color:#d0b47d}.eyebrow{font-size:10px;letter-spacing:.23em;font-weight:700;color:var(--gold);display:flex;align-items:center;gap:10px}.eyebrow .line{width:25px;height:1px;background:var(--gold)}.home{overflow:hidden}.hero-copy{position:relative;z-index:2}.hero-copy .eyebrow{margin-bottom:25px}.hero-intro{color:#b4bdbe;font-size:16px;line-height:1.8;max-width:450px;margin:28px 0 34px}.hero-actions{display:flex;align-items:center;gap:22px}.action{border:0;display:inline-flex;align-items:center;justify-content:space-between;gap:30px;min-height:53px;padding:0 24px;font-size:12px;font-weight:700;letter-spacing:.045em;transition:transform .2s,background .2s}.action:hover{transform:translateY(-2px)}.action.primary{background:#d5b77d;color:#172026}.action.primary:hover{background:#edcb8c}.action.outline{border:1px solid #8b9899;color:var(--ink);background:transparent}.action-sub{color:#859294;font-size:9px;letter-spacing:.16em;font-weight:700}.hero-showcase{position:relative;min-height:550px;display:grid;place-items:center;background:radial-gradient(ellipse at 55% 51%,#6a623d26,transparent 53%),radial-gradient(ellipse at 50% 90%,#7d985513,transparent 50%)}.orbit{position:absolute;border:1px solid #d7b77826;border-radius:50%;width:470px;height:470px;transform:rotate(-28deg) scaleY(.78);pointer-events:none}.orbit-two{width:590px;height:590px;border-color:#d7b77813}.showcase-label,.showcase-caption{position:absolute;color:#b5b5aa;font-size:9px;letter-spacing:.18em}.showcase-label{top:33px;left:8%}.showcase-caption{bottom:22px;left:8%;right:8%;display:flex;justify-content:space-between}.studio{border-top:1px solid #ffffff1e;background:#111a1e;padding:100px max(5.4%,calc((100vw - 1270px)/2)) 120px}.section-heading{margin:0 0 48px}.section-heading h2{font-size:clamp(44px,5vw,64px);margin:13px 0}.section-heading p{font-size:15px;color:#a8b0b1}.studio-grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,550px);justify-content:space-between;gap:8vw}.controls{padding-top:6px}.step-label{display:flex;align-items:center;gap:17px;margin:0 0 21px}.step-label>span{font-size:13px;color:var(--gold);border:1px solid #d7b77873;border-radius:50%;width:35px;height:35px;display:grid;place-items:center}.step-label strong{display:block;font-size:16px;font-weight:600}.step-label small{display:block;font-size:11px;color:#8d999a;margin-top:5px}.skin-list{display:grid;gap:10px}.skin-option{display:flex;align-items:center;width:100%;text-align:left;background:#182328;border:1px solid #354144;color:#f2efe8;padding:11px 15px;gap:16px;min-height:72px;transition:border .2s,background .2s}.skin-option:hover,.skin-option.active{border-color:#d5b77d;background:#222b2c}.skin-option>span{flex:1;font-weight:600;font-size:13px}.skin-option small{display:block;font-size:10px;color:#a9b1ac;font-weight:400;margin-top:5px}.skin-option b{font-size:15px;color:var(--gold);font-weight:400}.swatch{width:44px;height:44px;display:grid;place-items:center;font-size:22px;font-style:normal}.swatch-black{background:#111312;color:#d8ba76}.swatch-white{background:#f8f3e9;color:#c65a27}.swatch-blue{background:#78b9d4;color:#fff}.message-step{margin-top:37px}.input-label,.share-box label{font-size:10px;color:#9fa9aa;letter-spacing:.15em;font-weight:700;display:block;margin-bottom:11px}textarea{width:100%;resize:vertical;min-height:125px;background:#182328;border:1px solid #3a4849;border-radius:0;color:white;outline:none;padding:17px;line-height:1.6;font-size:13px}textarea:focus{border-color:var(--gold)}textarea.needs-note{border-color:#ec8a65}textarea::placeholder{color:#778387}.field-foot{display:flex;justify-content:space-between;color:#829092;font-size:10px;margin:9px 0 24px}.make-button{width:100%}.privacy-note{font-size:10px;line-height:1.6;color:#839092;margin-top:14px}.preview-area{display:flex;align-items:center;flex-direction:column;background:radial-gradient(ellipse at center,#6d80551a,transparent 65%);padding:0 0 20px}.preview-head{width:100%;display:flex;justify-content:space-between;font-size:10px;color:#96a2a2;letter-spacing:.13em;margin-bottom:28px}.preview-led{color:var(--gold)}.flip-hint{border:0;background:transparent;color:#c7b78e;font-size:11px;letter-spacing:.09em;margin-top:25px;padding:12px}.closing{text-align:center;padding:85px 15px 100px;background:#0c1419}.closing-star{font-size:28px;color:#d3b575}.closing p{font:400 28px Manrope,sans-serif;letter-spacing:-.05em;margin:10px}.closing small{font-size:9px;color:#8b9797;letter-spacing:.17em}.site-foot{border-top:1px solid #ffffff19;color:#819092;font-size:9px;letter-spacing:.13em;padding-top:28px;padding-bottom:28px}.site-foot span:first-child{color:var(--gold)}
/* The physical object */
.collectible{--card:#101315;--accent:#dec282;--faint:#bba66e;--hair:#dec28255;--shine:#fff6d255;position:relative;width:min(100%,380px);aspect-ratio: .72;max-height:530px;color:var(--accent);background:var(--card);box-shadow:0 28px 58px #0009,0 0 0 1px var(--accent),0 0 0 5px var(--card),0 0 0 6px var(--hair);transform-style:preserve-3d;transition:transform .8s cubic-bezier(.2,.7,.18,1),box-shadow .4s;isolation:isolate}.skin-black{--card:#101313;--accent:#dec282;--faint:#baaa83;--hair:#e2bf7255;--shine:#e2c57930}.skin-white{--card:#f6f2e8;--accent:#b94b21;--faint:#a76347;--hair:#ba512455;--shine:#efb88755}.skin-blue{--card:#69aeca;--accent:#fffaf0;--faint:#f1fbff;--hair:#ffffff80;--shine:#e6ffff77}.collectible::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(112deg,transparent 13%,var(--shine) 32%,transparent 40%,transparent 65%,var(--shine) 93%,transparent);opacity:.45;mix-blend-mode:screen}.collectible::before{content:"";position:absolute;inset:11px;border:1px solid var(--hair);z-index:3;pointer-events:none}.collectible .card-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:radial-gradient(circle at 50% 39%,var(--shine),transparent 53%),repeating-linear-gradient(112deg,transparent 0px,transparent 2px,#ffffff09 3px,transparent 4px),var(--card);display:flex;flex-direction:column;justify-content:space-between;padding:27px 27px 24px}.collectible .card-face::before{content:"✧";position:absolute;font-size:330px;line-height:1;left:50%;top:48%;transform:translate(-50%,-50%);opacity:.08;font-weight:100;pointer-events:none}.card-top,.card-bottom,.back-top,.back-bottom{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.16em;font-weight:700;position:relative;z-index:1}.card-top .sigil{font-size:27px;line-height:1}.tiny-star{font-size:17px}.card-bottom{border-top:1px solid var(--hair);padding-top:14px}.sunburst{font-size:19px}.card-core{text-align:center;position:relative;z-index:1}.number{font-family:Manrope,sans-serif;font-weight:500;font-size:clamp(100px,13vw,142px);line-height:.94;letter-spacing:-.09em;margin-left:-.1em;font-variant-numeric:tabular-nums;text-shadow:0 2px 22px var(--shine)}.number-rule{display:flex;align-items:center;justify-content:center;gap:10px;font-size:9px;letter-spacing:.14em;margin:15px 0 31px;font-weight:800}.number-rule span{width:21px;height:1px;background:var(--hair)}.card-message{font-family:Manrope,sans-serif;letter-spacing:-.035em;font-size:22px;line-height:1.28;font-weight:400}.card-message strong{font-weight:800}.card-face.back{transform:rotateY(180deg)}.back-center{position:relative;z-index:1;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;max-height:77%;overflow:auto}.quote-mark{font-family:Georgia,serif;font-size:75px;line-height:.7;opacity:.55}.quote-mark.end{align-self:flex-end}.note-preview{font:500 clamp(16px,2vw,22px)/1.44 Manrope,sans-serif;letter-spacing:-.035em;white-space:pre-wrap;overflow-wrap:anywhere;padding:22px 0;max-height:280px;overflow-y:auto;scrollbar-width:thin}.back-bottom{border-top:1px solid var(--hair);padding-top:14px}.interactive{cursor:pointer;perspective:1000px}.interactive:focus-visible{outline:3px solid white;outline-offset:10px}.interactive.flipped{transform:rotateY(180deg)}.hero-card{width:330px;transform:rotate(-9deg);animation:floatCard 5s ease-in-out infinite}.hero-card .number{font-size:127px}.hero-card .card-message{font-size:20px}@keyframes floatCard{50%{transform:rotate(-6deg) translateY(-12px)}}
.recipient,.done{min-height:calc(100vh - 135px);padding:52px 20px 90px;background:radial-gradient(circle at 50% 48%,#716d3c28,transparent 45%),#0c1419}.recipient-shell,.done-shell{text-align:center;margin:auto;max-width:800px}.recipient .eyebrow,.done .eyebrow{justify-content:center;margin-bottom:18px}.recipient h1,.done h1{font-size:clamp(42px,5.5vw,67px)}.recipient-shell>p,.done-shell>p{font-size:14px;color:#a8b3b5;line-height:1.7;max-width:500px;margin:18px auto 38px}.received{margin:0 auto;width:min(100%,330px)}.received .number{font-size:122px}.received .card-message{font-size:20px}.receive-action{margin:38px auto 0;width:220px}.received-end{margin-top:42px;border-top:1px solid #ffffff22;padding-top:28px}.received-end p{font-size:12px;color:#aab6b7;margin-bottom:22px}.miniature{width:230px;margin:5px auto 35px}.miniature .card-face{padding:18px}.miniature .number{font-size:85px}.miniature .number-rule{font-size:7px;margin:9px 0 18px;gap:4px}.miniature .number-rule span{width:8px}.miniature .card-message{font-size:14px}.miniature .card-top,.miniature .card-bottom{font-size:6px}.miniature .card-top .sigil{font-size:16px}.miniature .card-bottom{padding-top:7px}.share-box{text-align:left;margin:0 auto;max-width:650px;padding:20px;border:1px solid #44504d;background:#142024}.link-row{display:flex;border:1px solid #465455}.link-row input{flex:1;min-width:0;background:transparent;border:0;color:#d9e0dc;padding:14px;font-size:12px;outline:0}.link-row button{border:0;background:#d2b780;color:#142026;font-size:11px;font-weight:800;padding:0 20px}.share-actions{display:flex;gap:10px;margin-top:18px}.share-actions .action{flex:1}.again{border:0;background:none;color:#cdbb94;font-size:11px;margin:27px auto;padding:10px}.done .privacy-note{margin:15px auto 0}
@media(min-width:900px){.hero-copy{padding:0}.hero-row>.hero-copy,.hero-row>.hero-showcase{width:50%}.hero-row{display:flex;align-items:center;min-height:690px;max-width:1440px;margin:auto}.hero-row>.hero-copy{padding-left:5.4%;padding-bottom:60px}.hero-row>.hero-showcase{height:690px}.studio{padding-left:max(5.4%,calc((100vw - 1270px)/2));padding-right:max(5.4%,calc((100vw - 1270px)/2))}}
@media(max-width:899px){.site-head{padding:19px 23px}.head-note{display:none}.hero-row>.hero-copy{padding:64px 25px 0}.hero-intro{margin:22px 0 26px}.hero-actions{align-items:flex-start;flex-direction:column;gap:14px}.hero-showcase{min-height:500px}.hero-card{width:min(67vw,280px)}.hero-card .number{font-size:105px}.hero-card .card-message{font-size:18px}.showcase-label{top:18px}.studio{padding:70px 25px 90px}.studio-grid{grid-template-columns:1fr;gap:54px}.preview-area{max-width:540px}.site-foot{padding:25px;gap:16px}.site-foot span:nth-child(2){display:none}}
@media(max-width:480px){h1{font-size:48px}.hero-copy .eyebrow{font-size:8px}.hero-intro{font-size:14px}.hero-showcase{min-height:460px}.orbit{width:350px;height:350px}.orbit-two{width:440px;height:440px}.hero-card{width:min(66vw,270px)}.collectible:not(.miniature) .card-face{padding:20px 19px}.collectible:not(.miniature) .card-top,.collectible:not(.miniature) .card-bottom{font-size:7px}.collectible:not(.miniature) .number{font-size:clamp(84px,28vw,112px)}.collectible:not(.miniature) .number-rule{font-size:7px;margin:11px 0 22px}.collectible:not(.miniature) .card-message{font-size:17px}.collectible:not(.miniature) .note-preview{font-size:17px}.section-heading h2{font-size:46px}.studio{padding:66px 23px 80px}.studio .preview-area .collectible{width:min(80vw,330px)}.recipient,.done{padding-top:48px}.received{width:min(74vw,300px)}.share-actions{flex-direction:column}.share-actions .action{width:100%}.site-foot{font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.collectible,.action{transition:none}.hero-card{animation:none}}

.font-heading{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:18px 0 13px}.font-heading strong{font-size:12px}.font-heading span{font-size:10px;color:#98a4a5}.font-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:25px}.font-choice{background:#192429;border:1px solid #405052;color:#e8e2d7;min-width:0;height:54px;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.font-choice.active{border-color:#ddbd7b;background:#30362e;color:#f6dca0}.font-choice:hover{border-color:#b7aa8d}.receive-controls{display:flex;align-items:center;justify-content:center;gap:15px}.receive-action{margin:38px 0 0}.music-toggle{margin-top:38px;padding:14px;background:transparent;border:1px solid #5f6c6a;color:#d1c29b;font-size:11px;min-height:53px}.music-toggle[aria-pressed=true]{border-color:#d7b778;background:#d7b77817}@media(max-width:480px){.font-picker{grid-template-columns:repeat(2,1fr)}.receive-controls{flex-direction:column;gap:7px}.music-toggle{margin-top:0}.receive-action{margin-top:35px}}
/* Swap the printed face at the halfway turn. Keeping both faces in the same rotating plane makes the front read backwards on some mobile GPUs. */
.collectible.interactive .card-face.back{transform:none;visibility:hidden}
.collectible.interactive.flipped .card-face.front{visibility:hidden}
.collectible.interactive.flipped .card-face.back{visibility:visible}
.collectible.interactive.flipped{transform:none;animation:faceTurn .8s cubic-bezier(.27,.65,.21,1)}
@keyframes faceTurn{0%{transform:rotateY(0)}49%{transform:rotateY(88deg)}51%{transform:rotateY(-88deg)}100%{transform:rotateY(0)}}
@media(prefers-reduced-motion:reduce){.collectible.interactive.flipped{animation:none}}

@media(min-width:900px){.hero-row{overflow:hidden}}
.collectible .note-preview{font-size:clamp(19px,2vw,24px);line-height:1.5}.collectible .note-preview[style*="Sacramento"],.collectible .note-preview[style*="Great Vibes"],.collectible .note-preview[style*="Parisienne"]{font-size:clamp(25px,3vw,32px);line-height:1.32}
@media(max-width:480px){.collectible:not(.miniature) .note-preview{font-size:21px}.collectible:not(.miniature) .note-preview[style*="Sacramento"],.collectible:not(.miniature) .note-preview[style*="Great Vibes"],.collectible:not(.miniature) .note-preview[style*="Parisienne"]{font-size:27px}}

.collectible .back-center{width:100%;height:75%;max-height:75%;justify-content:center;overflow:hidden}.collectible .back-center .note-preview{width:100%;max-height:70%;font-size:19px;line-height:1.35;padding:8px 0;overflow:auto}.collectible .back-center .quote-mark{font-size:55px;flex:0 0 auto}.collectible .back-center .quote-mark.end{margin-top:2px}.collectible .note-preview[style*="Sacramento"],.collectible .note-preview[style*="Great Vibes"],.collectible .note-preview[style*="Parisienne"]{font-size:24px;line-height:1.25}@media(max-width:480px){.collectible:not(.miniature) .back-center .note-preview{font-size:18px;line-height:1.3}.collectible:not(.miniature) .back-center .note-preview[style*="Sacramento"],.collectible:not(.miniature) .back-center .note-preview[style*="Great Vibes"],.collectible:not(.miniature) .back-center .note-preview[style*="Parisienne"]{font-size:23px;line-height:1.22}}

/* Preserve readable lettering on longer inscriptions and make the full note scrollable. */
.collectible .back-center .note-preview.long-note{font-size:18px;line-height:1.3;max-height:72%;padding:8px 0;overflow-y:auto}
.collectible .back-center .note-preview.long-note[style*="Sacramento"],.collectible .back-center .note-preview.long-note[style*="Great Vibes"],.collectible .back-center .note-preview.long-note[style*="Parisienne"]{font-size:23px;line-height:1.22}
.note-scroll-hint{font-size:11px;color:#aeb9b8;margin:14px auto -20px}
.blue-active .note-scroll-hint{color:#675b4d}
.skin-blue{box-shadow:0 28px 58px #65544255,0 0 0 1px var(--accent),0 0 0 5px var(--card),0 0 0 6px var(--hair)}
/* Blue Hour is sky, porcelain and coffee, not a blue object in a black frame. */
body.blue-active{--bg:#f2f2e8;--ink:#493e32;--muted:#756a5e;--gold:#7b6550;color:#493e32;background:#f2f2e8}
body.blue-active .site-head,body.blue-active .site-foot{background:#f2f2e8;border-color:#b5ad9f80}
body.blue-active .brand-divider{background:#9d9385}
body.blue-active .studio,body.blue-active .recipient,body.blue-active .done{background:radial-gradient(circle at 60% 30%,#d7edf2,transparent 60%),#f2f2e8;border-color:#d2cbc1}
body.blue-active .preview-area{background:radial-gradient(ellipse at center,#b7d7df77,transparent 65%)}
body.blue-active .section-heading p,body.blue-active .step-label small,body.blue-active .recipient-shell>p,body.blue-active .done-shell>p,body.blue-active .preview-head,body.blue-active .field-foot,body.blue-active .privacy-note{color:#655c51}
body.blue-active .skin-option{background:#fffdf6;color:#44382c;border-color:#c3b9a8}
body.blue-active .skin-option.active{background:#d8edf3;border-color:#719bb0}
body.blue-active .skin-option small,body.blue-active .input-label{color:#62574b}
body.blue-active textarea{background:#fffdf7;color:#40372e;border:1px solid #b7ac9e}
body.blue-active .font-choice{background:#fffdf6;color:#504437;border-color:#b7ac9e}
body.blue-active .font-choice.active{background:#d8edf3;border-color:#719bb0;color:#44382c}
body.blue-active .action.primary{background:#d4aa7a;color:#392d21}
body.blue-active .action.outline,body.blue-active .music-toggle{color:#4d4031;border-color:#8f806e}
body.blue-active .music-toggle[aria-pressed=true]{background:#d8edf3;border-color:#719bb0}
body.blue-active .flip-hint{color:#6d5944}
body.blue-active .eyebrow,body.blue-active .step-label>span{color:#7b6550;border-color:#a49483}
body.blue-active .eyebrow .line{background:#7b6550}
body.blue-active h1 em,body.blue-active h2 em{color:#987456}
body.blue-active .note-preview{scrollbar-color:#ffffffa0 transparent}
.music-step{margin:36px 0 18px}.track-picker{display:grid;gap:9px}.track-choice{background:#192429;border:1px solid #405052;color:#f1ede4;min-height:65px;text-align:left;padding:10px 17px;display:flex;flex-direction:column;justify-content:center;gap:5px}.track-choice span{font-size:12px;font-weight:700;letter-spacing:.06em}.track-choice small{color:#9eaca9;font-size:10px}.track-choice.active{border-color:#d7b778;background:#30362e}.track-preview{margin:13px 0 0;border:0;background:transparent;color:#d9c18d;padding:9px 2px;font-size:11px;letter-spacing:.06em}.sound-note{font-size:10px;color:#92a0a0;line-height:1.5;margin:4px 0 22px}body.blue-active .track-choice{background:#fffdf6;color:#504437;border-color:#b7ac9e}body.blue-active .track-choice.active{background:#d8edf3;border-color:#719bb0}body.blue-active .track-choice small,body.blue-active .sound-note{color:#655c51}body.blue-active .track-preview{color:#735b43}
/* The recipient's first gesture opens the package and starts their chosen sound. */
.recipient{position:relative;overflow:hidden}.recipient.sealed{min-height:calc(100svh - 70px);padding:0;background:#10171a}.recipient.sealed .recipient-shell{opacity:0;visibility:hidden;height:0;overflow:hidden}.recipient.opened .recipient-shell{animation:revealPage .9s ease both}.recipient.opened .unbox{animation:clearBox .8s ease .6s both;pointer-events:none;position:absolute;inset:0;z-index:5}.unbox{min-height:calc(100svh - 70px);display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#86745320,transparent 42%),#111a1e;color:#f5f1e9;padding:46px 22px}.unbox-stage{text-align:center;width:100%;max-width:430px}.unbox-kicker{font-size:9px;letter-spacing:.25em;color:#d6bd86;font-weight:700;margin-bottom:32px}.unbox-object{height:min(53vh,405px);width:min(73vw,300px);margin:0 auto 32px;position:relative;perspective:900px;filter:drop-shadow(0 27px 28px #0009)}.box-base{position:absolute;inset:5% 2% 0;background:#e6d7b8;box-shadow:inset 0 0 0 9px #ccba99,inset 0 0 0 11px #9a8667;display:grid;place-items:center}.box-glimpse{font-size:10px;letter-spacing:.08em;color:#8e775b;max-width:80%;overflow-wrap:anywhere;line-height:1.4}.box-lid{position:absolute;inset:0;z-index:2;background:radial-gradient(circle at 50% 45%,#d5bb8035,transparent 46%),#202226;border:1px solid #c4aa74;box-shadow:inset 0 0 0 9px #222428,inset 0 0 0 10px #c4aa7480,0 12px 16px #0008;display:flex;align-items:center;justify-content:center;flex-direction:column;color:#e4ca8c}.box-mark{font-size:69px;font-weight:100;line-height:1}.box-wordmark{font-family:Manrope,sans-serif;font-size:13px;letter-spacing:.32em;font-weight:800;margin-top:11px}.box-edition{font-size:8px;letter-spacing:.16em;margin-top:22px;color:#a99164}.unbox-line{font-family:Manrope,sans-serif;font-size:clamp(21px,4vw,28px);letter-spacing:-.04em;margin:0 0 23px}.unbox-button{border:0;background:#d7b778;color:#27241e;min-width:225px;min-height:57px;padding:0 19px;display:inline-flex;align-items:center;justify-content:space-between;font-weight:700;font-size:12px;letter-spacing:.05em}.unbox-button:focus-visible{outline:3px solid #fff;outline-offset:4px}.unbox-sound{font-size:10px;letter-spacing:.04em;color:#aeb4b1;margin-top:18px}.recipient.opened .box-lid{animation:liftLid 1.1s cubic-bezier(.2,.7,.15,1) both}.recipient.opened .box-base{animation:cardRise 1.1s ease both}@keyframes liftLid{0%{transform:translateY(0) rotateX(0);opacity:1}65%{transform:translateY(-55%) rotateX(23deg);opacity:1}100%{transform:translateY(-93%) rotateX(32deg);opacity:0}}@keyframes cardRise{0%{transform:translateY(0) scale(.9)}100%{transform:translateY(-12%) scale(1.07)}}@keyframes clearBox{0%,55%{opacity:1}100%{opacity:0;visibility:hidden}}@keyframes revealPage{0%{opacity:0;transform:translateY(42px)}100%{opacity:1;transform:translateY(0)}}
body.blue-active .recipient.sealed,body.blue-active .unbox{background:radial-gradient(circle at 50% 36%,#cde7eb,transparent 49%),#f1eee5;color:#473d32}body.blue-active .box-lid{background:radial-gradient(circle at 50% 45%,#ecffff8a,transparent 45%),#78bcd2;color:#fff;border-color:#fff;box-shadow:inset 0 0 0 9px #78bcd2,inset 0 0 0 10px #fffe,0 12px 16px #8f7c6455}body.blue-active .box-edition{color:#fff}body.blue-active .unbox-kicker{color:#755e4a}body.blue-active .unbox-sound{color:#675d52}body.blue-active .unbox-button{background:#d4aa7a;color:#3b3025}
@media(max-width:480px){.unbox-object{height:min(46svh,380px);width:min(73vw,300px)}.unbox{padding:24px 22px}.unbox-kicker{margin-bottom:25px}.unbox-line{font-size:22px}.recipient.sealed{min-height:calc(100svh - 64px)}}
@media(prefers-reduced-motion:reduce){.recipient.opened .box-lid,.recipient.opened .box-base,.recipient.opened .unbox,.recipient.opened .recipient-shell{animation-duration:.01ms}}
.auth-gate{border:1px solid #586362;background:#1b292c;padding:22px;margin:0 0 39px}.auth-gate input,.controls #recipientName{width:100%;background:#172226;color:#f3eee4;border:1px solid #53605f;min-height:48px;padding:10px 13px;margin:0 0 15px;outline:0}.auth-gate input:focus,.controls #recipientName:focus{border-color:#d7b778}.auth-gate .action{width:100%;margin:3px 0 0}.auth-gate #authStatus{font-size:11px;line-height:1.5;color:#d9be87;margin:12px 0 0}.auth-gate #authReady{display:flex;justify-content:space-between;gap:15px;align-items:center;font-size:12px}.auth-gate #signOut{border:0;background:none;color:#d9be87;font-size:11px}.optional{font-size:9px;color:#97a4a5}.upload-choice{border-top:1px solid #65727180;padding-top:21px;margin:20px 0 26px}.upload-choice input{display:block;width:100%;color:#d7d0c3;font-size:11px}.upload-choice p{color:#96a2a2;font-size:10px;line-height:1.5;margin-top:10px}.upload-choice .track-preview{margin-top:9px}body.blue-active .auth-gate{background:#fffdf6;border-color:#b7ac9e}body.blue-active .auth-gate input,body.blue-active .controls #recipientName{background:#fffdf7;color:#44382c;border-color:#b7ac9e}body.blue-active .upload-choice{border-color:#b7ac9e}body.blue-active .upload-choice input,body.blue-active .upload-choice p{color:#615649}
/* The song shelf is a small record store, not a search form. */
.music-shelf{margin:18px 0 28px;border-top:1px solid #65727180;padding-top:22px}.shelf-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}.shelf-heading span{font-size:10px;font-weight:800;letter-spacing:.15em;color:#edd9af}.shelf-heading small{font-size:10px;color:#95a4a1}.shelf-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:310px;overflow:auto;padding-right:3px}.shelf-track{display:flex;flex-direction:column;gap:4px;text-align:left;background:#1d2b2f;border:1px solid #465855;padding:13px;color:#f7ecda;min-width:0;cursor:pointer}.shelf-track strong{font-size:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.shelf-track small{font-size:10px;color:#b3bdb9;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.shelf-track span{font-size:8px;letter-spacing:.1em;color:#d9ba82}.shelf-track.active{background:#3b392c;border-color:#e4c488;box-shadow:inset 0 0 0 1px #e4c488}.shelf-loading,#musicStatus{font-size:11px;color:#aebbb5;line-height:1.5}#musicStatus{min-height:22px;margin:12px 0 0}body.blue-active .shelf-track{background:#fffdf5;color:#524436;border-color:#b9b1a3}body.blue-active .shelf-track.active{background:#dceef2;border-color:#719bb0}body.blue-active .shelf-track small,body.blue-active #musicStatus{color:#695f55}
/* Sound belongs to the artifact. */
.received{position:relative}.received .card-sound{position:absolute;z-index:8;right:15px;bottom:15px;margin:0;padding:0;width:32px;height:32px;min-height:0;border-radius:50%;font-size:18px;line-height:32px;display:grid;place-items:center;color:inherit;border:1px solid currentColor;background:#181e1c99;backdrop-filter:blur(8px)}.received.skin-white .card-sound,.received.skin-blue .card-sound{background:#fefbf3bd}.received .card-sound[aria-pressed=true]{box-shadow:0 0 0 3px #d8b97655}.music-credit{max-width:390px;margin:16px auto 0;color:#aeb5b0;font-size:10px;line-height:1.55;letter-spacing:.02em}.music-credit a{color:#e5c98d;text-decoration:underline;text-underline-offset:3px}.music-credit.hidden{display:none}body.blue-active .music-credit{color:#64584b}body.blue-active .music-credit a{color:#70593b}
/* On the ready screen, the collectible is the lead; the controls follow. */
.done{padding-top:25px}.done-shell{max-width:860px}.done .eyebrow{margin-bottom:10px}.done .miniature{width:min(70vw,390px);margin:0 auto 28px}.done .miniature .card-face{padding:25px}.done .miniature .number{font-size:clamp(104px,24vw,157px)}.done .miniature .number-rule{font-size:9px;margin:12px 0 22px;gap:7px}.done .miniature .number-rule span{width:15px}.done .miniature .card-message{font-size:clamp(16px,3.5vw,23px)}.done .miniature .card-top,.done .miniature .card-bottom{font-size:8px}.done .share-box{max-width:580px}.done .privacy-note{font-size:10px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@media(max-width:480px){.shelf-list{grid-template-columns:1fr;max-height:320px}.shelf-track{padding:11px}.done .miniature{width:min(76vw,340px);margin-bottom:23px}.done{padding:24px 17px 50px}.done .share-box{padding:16px}.received .card-sound{right:12px;bottom:12px}}
/* Float the sound control in the quiet space below the card's top edition line. */
.received .card-sound{top:61px;bottom:auto}
@media(max-width:480px){.received .card-sound{top:50px;bottom:auto}}
.received .card-sound{top:45%;bottom:auto}
@media(max-width:480px){.received .card-sound{top:45%;bottom:auto}}
/* Keep the signed note unobstructed when the card is turned. */
.received.flipped .card-sound{top:12px;right:50%;transform:translateX(50%);width:25px;height:25px;font-size:14px;line-height:25px}
@media(max-width:480px){.received.flipped .card-sound{top:10px;right:50%}}
.received.flipped .card-sound{top:auto;bottom:11px;right:50%}
@media(max-width:480px){.received.flipped .card-sound{top:auto;bottom:9px;right:50%}}
/* The control remains part of the card presentation without covering either face. */
.recipient-shell{position:relative}.recipient-shell>.card-sound{position:absolute;z-index:8;left:50%;top:auto;right:auto;bottom:auto;margin:0 0 0 190px;transform:translate(-50%,-450%);width:32px;height:32px;min-height:0;border-radius:50%;font-size:18px;line-height:32px;display:grid;place-items:center;color:#dfc88e;border:1px solid currentColor;background:#172021;cursor:pointer}.recipient-shell>.card-sound[aria-pressed=true]{box-shadow:0 0 0 3px #d8b97655}body.blue-active .recipient-shell>.card-sound{color:#765f48;background:#faf6eb}
@media(max-width:480px){.recipient-shell>.card-sound{left:50%;margin-left:min(41vw,170px);transform:translate(-50%,-450%)}}
.recipient-shell>.card-sound{position:relative;left:auto;bottom:auto;top:auto;right:auto;margin:-28px auto 0;transform:none;width:36px;height:36px;line-height:36px}
@media(max-width:480px){.recipient-shell>.card-sound{left:auto;margin:-26px auto 0;transform:none}}

/* The control lives on the card front only; never cover the private handwriting on its back. */
.received.flipped .card-sound{visibility:hidden;pointer-events:none}
/* Final override: do not render a clickable control over the handwritten back. */
.received.flipped .card-sound{display:none}

/* The URL may be opened inside iOS Safari chrome or installed full-screen. Keep the ceremony inside the visible viewport. */
@supports (height: 100dvh){.recipient.sealed,.unbox{min-height:calc(100dvh - 70px)}}
.recipient,.done{min-height:calc(100dvh - 135px)}
.site-head{padding-top:max(19px,env(safe-area-inset-top));padding-left:max(23px,env(safe-area-inset-left));padding-right:max(23px,env(safe-area-inset-right))}
.site-foot{padding-bottom:max(25px,env(safe-area-inset-bottom))}
.recipient,.done{padding-bottom:max(90px,calc(50px + env(safe-area-inset-bottom)))}
.unbox{padding-bottom:max(24px,calc(14px + env(safe-area-inset-bottom)))}
.unbox-stage{min-width:0}
.unbox-line,#recipientGreeting{overflow-wrap:anywhere}
@media(max-width:480px){.unbox-object{height:min(42dvh,350px)}.unbox-kicker{margin-bottom:18px}.unbox-object{margin-bottom:20px}.unbox-line{margin-bottom:18px}.recipient-shell>p{margin-bottom:26px}}
@media(max-width:375px){.unbox-object{height:min(38dvh,305px);width:min(68vw,270px)}.unbox-kicker{margin-bottom:12px}.unbox{padding-top:14px}.unbox-sound{margin-top:12px}.recipient .card-top span:nth-child(2){font-size:6px;letter-spacing:.05em}.recipient .back-top{font-size:6px;letter-spacing:.04em}}

/* Names of up to 70 characters are stored in full, but the printed card's edition line cannot sprawl over the star. */
#recipientCardAddress,#recipientBackAddress{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%}
#recipientBackAddress{max-width:50%}
/* Recipient is the object, not a landing page: phone card fills the available width. */
@media(max-width:480px){
 .recipient.sealed{padding:0;min-height:0}
 .recipient .unbox{display:block;min-height:0;padding:12px 13px 26px}
 .recipient .unbox-stage{max-width:430px;margin:auto}
 .recipient .unbox-kicker{font-size:8px;margin:0 0 12px;letter-spacing:.18em}
 .recipient .unbox-object{width:min(calc(100vw - 26px),410px);height:auto;aspect-ratio:.72;margin:0 auto 18px}
 .recipient .unbox-line{font-size:clamp(17px,4.5vw,22px);margin:0 0 12px}
 .recipient .unbox-button{min-height:46px}
 .recipient .unbox-sound{font-size:9px;margin:9px 0 0}
 .recipient.opened{padding:13px 13px 50px}
 .recipient .eyebrow{font-size:8px;letter-spacing:.12em;margin:0 0 7px}
 .recipient h1{font-size:clamp(22px,6vw,30px);line-height:1.15}
 .recipient-shell>p#recipientIntro{font-size:11px;line-height:1.35;margin:5px auto 13px}
 .recipient .received{width:min(calc(100vw - 26px),410px);max-height:none}
 .recipient .receive-action{margin-top:21px}
 .recipient .received-end{margin-top:26px}
 .recipient .received .number{font-size:clamp(90px,31vw,130px)}
 .recipient .received .card-message{font-size:clamp(17px,5vw,22px)}
 .recipient .received .card-face{padding:clamp(18px,5vw,26px)}
 .recipient .received .back-center .note-preview{max-height:55dvh}
}
/* Short phone viewports: keep the whole object in the initial frame, without clipping the note. */
@media(max-width:480px) and (max-height:650px){
 .recipient .unbox-object{width:min(calc(100vw - 26px),410px,calc((100dvh - 160px)*.72))}
 .recipient .unbox-kicker{margin-bottom:8px}
 .recipient .unbox-line{margin-bottom:7px}
 .recipient .unbox-button{min-height:42px}
 .recipient.opened{padding-top:9px}
 .recipient.opened .eyebrow,.recipient.opened #recipientIntro{display:none}
 .recipient.opened h1{font-size:21px;margin-bottom:11px}
 .recipient.opened .received{width:min(calc(100vw - 26px),410px,calc((100dvh - 150px)*.72))}
}
/* A recipient opens and turns the object itself. Hints remain real keyboard controls, not CTAs. */
.recipient.sealed .unbox-object{cursor:pointer;touch-action:manipulation}
.recipient.sealed .unbox-object:focus-visible{outline:2px solid #e3c987;outline-offset:8px}
@media(max-width:480px){
 .recipient #unboxButton,.recipient #receiveFlip{appearance:none;border:0;box-shadow:none;background:transparent;color:#d9c490;min-width:0;min-height:36px;width:auto;max-width:100%;padding:4px 10px;margin:2px auto 0;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:none}
 .recipient #unboxButton span,.recipient #receiveFlip span{font-size:15px}
 .recipient #unboxButton:focus-visible,.recipient #receiveFlip:focus-visible{outline:2px solid currentColor;outline-offset:3px}
 .recipient .receive-controls{margin:6px auto 0}
 .recipient .recipient-make{background:transparent;border:0;color:#b8aaa0;font-size:11px;padding:5px 8px;min-height:34px}
 .recipient .received-end{margin-top:13px;padding-top:14px}
 .recipient .received-end p{margin-bottom:7px}
}
body.blue-active .recipient #unboxButton,body.blue-active .recipient #receiveFlip{color:#70593b}
/* The object is the control on desktop too. Never revive the old gold CTA. */
.recipient #unboxButton,.recipient #receiveFlip{appearance:none;border:0;box-shadow:none;background:transparent;color:#d9c490;min-width:0;min-height:36px;width:auto;max-width:100%;padding:4px 10px;margin:2px auto 0;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:none}
.recipient #unboxButton span,.recipient #receiveFlip span{font-size:15px}
.recipient #unboxButton:focus-visible,.recipient #receiveFlip:focus-visible{outline:2px solid currentColor;outline-offset:3px}