:root{--ink:#242323;--muted:#747378;--red:#f04438;--red-dark:#c93227;--blush:#fff4f1;--line:#eeebe8;--soft:#faf8f6;--font:'Plus Jakarta Sans',sans-serif;--font-display:'Fraunces',Georgia,serif}
*{box-sizing:border-box}html{scroll-padding-top:112px}body{margin:0;background:#fff;color:var(--ink);font:15px/1.5 var(--font);-webkit-font-smoothing:antialiased}button,input,textarea,select{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}button,a,input,textarea,select,summary{touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #ed756b;outline-offset:4px}button{border:0}a{color:inherit}p,h1,h2,h3{margin:0}[hidden]{display:none!important}
.sr-only,.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link:focus{position:fixed;z-index:100;background:#fff;padding:12px}
.studio-shell{max-width:640px;margin:auto;padding:0 28px}.studio-header{position:sticky;top:0;z-index:20;padding:22px 0 13px;background:rgba(255,255,255,.97);backdrop-filter:blur(16px)}.header-row{display:flex;align-items:center;gap:18px}.icon-button{width:40px;height:40px;flex:none;display:grid;place-items:center;background:transparent;border-radius:50%;margin-left:-10px;transition:background .15s}.icon-button:hover{background:var(--soft)}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.progress-track{position:relative;flex:1;height:8px;border-radius:999px;background:#f0ece9;overflow:hidden}#progress-fill{height:100%;width:0;background:linear-gradient(90deg,#f04438,#ff6b57);border-radius:999px;transition:width .4s cubic-bezier(.22,1,.36,1)}.progress-dividers{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/12 - 2px),#fff calc(100%/12 - 2px),#fff calc(100%/12 + 2px))}
.phone-row{display:flex;gap:10px}.phone-row select{width:92px;flex:none;padding:15px 10px}.phone-row input{flex:1}
.upsell-grid{display:grid;gap:12px}.upsell-grid--duo{grid-template-columns:1fr 1fr;max-width:320px}.upsell-card{min-height:64px;justify-content:space-between;padding:16px 18px}.step-count{font-size:12px;font-weight:700;color:#7c7775;white-space:nowrap;font-variant-numeric:tabular-nums}.chapter-row{display:flex;justify-content:space-between;margin:8px 0 0 48px;font-size:11px;font-weight:650;color:#aaa3a0;letter-spacing:.01em}.chapter-row .active{color:var(--red);font-weight:750}.chapter-row .done{color:#6e7970}
#studio-form{padding-bottom:125px;min-height:calc(100dvh - 105px)}#step-content{padding:28px 0 12px}.step-enter{animation:step-in .28s ease both}@keyframes step-in{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.question-heading{margin-bottom:27px}.eyebrow{display:flex;align-items:center;gap:7px;color:#b84b40;font-size:10px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;margin-bottom:11px}.eyebrow:before{content:'';height:5px;width:5px;border-radius:50%;background:var(--red)}h1{font-family:var(--font-display),var(--font);font-size:40px;font-weight:650;line-height:1.1;letter-spacing:-.04em;max-width:540px;text-wrap:balance;font-optical-sizing:auto}h1 em{font-style:normal;color:var(--red)}h1:focus{outline:0}.question-heading>p{color:var(--muted);font-size:14px;line-height:1.65;margin-top:13px;max-width:480px}
.recipient-grid{display:grid;grid-template-columns:1fr;gap:12px}.recipient-card{position:relative;display:flex;flex-direction:column;text-align:left;overflow:hidden;padding:0;border:1.5px solid var(--line);border-radius:20px;background:#fff;transition:border-color .18s,background .18s,transform .18s,box-shadow .18s}.recipient-card:hover{border-color:#eeb0a9;transform:translateY(-2px)}.recipient-art{height:118px;background:linear-gradient(#fffaf8,#fff);width:100%;overflow:hidden}.recipient-art img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 42%}.recipient-copy{padding:11px 14px 13px;display:grid;gap:3px}.recipient-copy strong{font-size:15px;font-weight:750;letter-spacing:-.3px}.recipient-copy small{color:var(--muted);font-size:10px;line-height:1.4}.selection-mark{width:20px;height:20px;display:grid;place-items:center;border:1.5px solid #ded9d5;border-radius:50%;background:#fff;color:transparent;flex:none}.selection-mark svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.recipient-card .selection-mark{position:absolute;right:11px;top:11px;box-shadow:0 2px 8px #00000008}[aria-pressed=true].recipient-card,[aria-pressed=true].choice-card{border-color:var(--red);background:#fff8f6;box-shadow:0 0 0 1px var(--red)}[aria-pressed=true] .selection-mark{border-color:var(--red);background:var(--red);color:#fff}[aria-pressed=true] .choice-icon{background:#ffece6;color:#b54a3a}.other-recipient{justify-content:center;align-items:center;text-align:center;background:#faf8f6;min-height:170px;gap:9px}.other-recipient .other-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff3ec;color:#be6c5a}.other-recipient .other-icon .choice-svg{width:22px;height:22px}.other-recipient strong{font-size:14px}.other-recipient small{font-size:10px;color:var(--muted)}
.reveal-panel{padding:18px 0 0}.reveal-label,.field-label{display:block;font-size:12px;font-weight:700;margin-bottom:10px}.chip-group{display:flex;flex-wrap:wrap;gap:8px}.chip{background:#fff;border:1px solid #e6e1dd;border-radius:100px;padding:10px 14px;font-size:12px;font-weight:600;min-height:42px;transition:background .15s,border-color .15s}.chip:hover{border-color:#e7a095}.chip[aria-pressed=true]{border-color:var(--red);background:var(--blush);color:#bc3026}.chip[aria-pressed=true]:before{content:'✓';margin-right:6px}.field{margin-top:22px}.field-label .optional{color:#a19a96;font-size:10px;font-weight:500;margin-left:5px}
input,textarea,select{width:100%;border:1.5px solid #e6e1dd;background:#fff;border-radius:14px;padding:15px 16px;outline:none;font-size:16px;transition:box-shadow .15s,border-color .15s}input:focus,textarea:focus,select:focus{border-color:var(--red);box-shadow:0 0 0 3px #f0443810}input::placeholder,textarea::placeholder{color:#aca5a0;opacity:1}input[aria-invalid=true]{border-color:#c1362c}.name-input{font-family:'Fraunces',var(--font);font-size:28px;padding:18px 20px;font-weight:500;letter-spacing:-.5px}.hint{font-size:11px;color:#918a85;margin-top:9px;line-height:1.6}.error{font-size:12px;color:#b92c22;margin-top:8px}.error:empty{display:none}
.personal-note{display:flex;align-items:center;gap:17px;padding:23px 20px;border:1px solid #f1e2dc;border-radius:19px;background:var(--blush);margin-top:28px}.note-art{width:50px;height:58px;border-radius:8px;background:#fff;box-shadow:0 4px 10px #a4492810;transform:rotate(-7deg);display:grid;place-items:center;color:var(--red);flex:none}.note-art .choice-svg{width:24px;height:24px}.personal-note span{font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.1em;color:#ac7769}.personal-note p{font:500 18px/1.35 'Fraunces';margin-top:5px}.personal-note strong{font-weight:600}
.choice-grid{display:grid;grid-template-columns:1fr;gap:12px}.choice-card{position:relative;display:flex;gap:12px;align-items:center;min-height:82px;background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:14px 14px 14px 12px;text-align:left;transition:border-color .18s,background .18s,transform .18s,box-shadow .18s}.choice-card:hover{border-color:#e7a095;box-shadow:0 8px 22px rgba(52,35,31,.05)}.choice-card:active{transform:scale(.985)}.choice-card .selection-mark{margin-left:auto;width:18px;height:18px}.choice-icon{color:#be6c5a;background:#fff3ec;border-radius:14px;width:42px;height:42px;display:grid;place-items:center;flex:none;transition:background .18s,color .18s}.choice-svg{width:21px;height:21px}.choice-copy{min-width:0;padding-right:2px}.choice-copy strong{display:block;font-size:14px;font-weight:750;letter-spacing:-.02em;line-height:1.25}.choice-copy small{display:block;font-size:11px;color:#7a726c;margin-top:4px;line-height:1.4}.section-label{font-size:12px;font-weight:750;margin:24px 0 12px}.section-label:first-child{margin-top:0}.genre-grid .choice-card{min-height:84px}.occasion-grid .choice-card{min-height:86px}
.sample-player{display:flex;align-items:center;gap:12px;margin-top:18px;padding:15px 16px;background:linear-gradient(180deg,#fffaf7,#faf4ef);border:1px solid #eee5de;border-radius:18px}.play-button{width:44px;height:44px;display:grid;place-items:center;background:#fff;border:1px solid #eaded5;border-radius:50%;flex:none;color:#b84b40;box-shadow:0 4px 12px rgba(164,73,40,.08);transition:transform .15s,background .15s}.play-button:hover{background:#fff8f4;transform:scale(1.04)}.play-glyph{width:16px;height:16px;fill:currentColor;stroke:none}.play-glyph--pause{display:none;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}.sample-player.playing .play-glyph--play{display:none}.sample-player.playing .play-glyph--pause{display:block}.sample-player strong{display:block;font-size:13px;font-weight:700}.sample-player small{font-size:11px;color:#7d746c}.sample-waves{display:flex;align-items:center;gap:3px;margin-left:auto;height:24px}.sample-waves i{display:block;width:3px;height:var(--h);background:#d5b8a7;border-radius:2px}.sample-player.playing .sample-waves i{animation:wave .7s ease-in-out infinite alternate;animation-delay:var(--d)}@keyframes wave{to{transform:scaleY(.35)}}
.voice-group{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.voice-group .chip{border-radius:12px;padding:12px 6px;font-size:12px}.advanced{margin-top:20px;border-top:1px solid var(--line);padding-top:16px}.advanced summary{display:flex;justify-content:space-between;cursor:pointer;font-size:12px;font-weight:600;list-style:none}.advanced summary::-webkit-details-marker{display:none}.advanced summary:after{content:'+';color:var(--muted)}.advanced[open] summary:after{content:'−'}.advanced .field{margin-top:14px}
.story-textarea{display:block;min-height:155px;resize:vertical;line-height:1.65;font-size:15px}.story-prompts{margin:0 0 14px;display:flex;gap:7px;flex-wrap:wrap}.prompt{font-size:10px;border:1px solid #ede5df;border-radius:99px;background:#faf8f6;padding:8px 11px;color:#8f7365;min-height:34px}.writing-meta{display:flex;justify-content:space-between;gap:12px;font-size:10px;color:#918a85;margin-top:10px}.story-example{margin-top:23px;border-left:2px solid #f1d1c5;padding:0 0 0 14px}.story-example span{font-size:9px;text-transform:uppercase;letter-spacing:.09em;font-weight:700;color:#b88470}.story-example p{font-size:13px;line-height:1.7;color:#8b7b72;margin-top:6px}.selection-feedback{font-size:11px;color:#ab5b4a;min-height:18px;margin-top:13px}
.action-dock{position:fixed;bottom:0;left:0;right:0;z-index:30;background:rgba(255,255,255,.97);border-top:1px solid #f0ece8;backdrop-filter:blur(16px);padding:14px 28px calc(14px + env(safe-area-inset-bottom));box-shadow:0 -8px 25px #5f302004}.action-inner{max-width:584px;margin:auto;display:flex;flex-direction:column;gap:10px}.primary-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:56px;padding:16px 24px;border-radius:999px;background:var(--red);color:#fff;font-size:16px;font-weight:800;letter-spacing:-.01em;box-shadow:none;transition:background .15s,transform .15s}.primary-button:hover:enabled{background:var(--red-dark);transform:translateY(-1px)}.primary-button:active:enabled{transform:translateY(0)}.primary-button:disabled{background:#eeeae6;color:#ada5a0;transform:none}.primary-button svg{width:18px;height:18px;stroke-width:2.2}.skip-button{align-self:center;order:2;padding:3px 12px;background:none;color:#92847a;font-size:12px;min-height:28px}.skip-button:hover{text-decoration:underline}
.album-preview{position:relative;display:flex;gap:20px;align-items:center;padding:24px;border:1px solid #f2e1d7;border-radius:21px;background:linear-gradient(120deg,#fff4ec,#f9e3d6);margin-bottom:20px;overflow:hidden}.album-sleeve{position:relative;width:86px;height:100px;border-radius:9px;background:#e26650;color:#fff5e8;display:grid;place-items:center;flex:none;box-shadow:4px 5px 0 #c8564220;transform:rotate(-5deg);font:52px 'Fraunces'}.album-sleeve:after{content:'YOUR STORY, IN SONG';position:absolute;bottom:9px;left:0;right:0;text-align:center;font:5px var(--font);letter-spacing:1px}.album-preview .album-label{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#b78370;font-weight:700}.album-preview h2{font:600 25px/1.1 'Fraunces';letter-spacing:-.6px;margin:7px 0}.album-preview p{font-size:11px;color:#a47766}
.review-card{border:1px solid var(--line);border-radius:18px;padding:0 20px;margin-bottom:17px}.review-row{display:flex;justify-content:space-between;gap:16px;padding:17px 0}.review-row+.review-row{border-top:1px solid #f2eeeb}.review-label{font-size:10px;color:#a1958d;display:block;margin-bottom:5px}.review-value{font-size:13px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere}.edit-button{align-self:flex-start;flex:none;border:0;background:none;color:#bf5b47;padding:3px 0;font-size:11px;font-weight:600;min-height:28px}.contact-field{padding:5px 0 0}.contact-field .field-label{margin-bottom:8px}.contact-field .hint{margin-top:7px}.save-note{font-size:10px;line-height:1.65;color:#a0968e;text-align:center;margin-top:20px}
.completion{padding:45px 0;text-align:center}.completion-check{width:65px;height:65px;display:grid;place-items:center;border-radius:50%;background:#fff0e9;color:var(--red);font-size:26px;margin:0 auto 23px}.completion h1{font-size:37px;margin:auto}.completion>p{font-size:14px;color:var(--muted);margin:15px auto 25px;max-width:400px;line-height:1.7}.completion .album-preview{text-align:left;margin:28px 0}.secondary-button{display:block;min-height:48px;padding:14px 20px;border:1px solid #e9e2dc;border-radius:15px;background:#fff;font-size:13px;font-weight:600;width:100%;margin-top:13px}.completion-link{display:inline-block;font-size:11px;color:#a08676;margin-top:23px}
@media(max-width:480px){.studio-shell{padding:0 22px}.studio-header{padding-top:14px}.header-row{gap:12px}.chapter-row{margin-left:42px;font-size:10px}.progress-track{height:7px}.step-count{font-size:11px}#step-content{padding-top:24px}h1{font-size:35px;letter-spacing:-1.15px}.question-heading{margin-bottom:23px}.question-heading>p{font-size:14px}.recipient-grid{gap:10px}.recipient-art{height:105px}.recipient-copy{padding:10px 12px 12px}.recipient-copy strong{font-size:14px}.recipient-copy small{font-size:10px}.other-recipient{min-height:154px}.choice-grid{gap:11px}.choice-card{padding:13px 12px;gap:11px;min-height:88px;border-radius:17px}.choice-icon{width:40px;height:40px;border-radius:13px}.choice-svg{width:20px;height:20px}.choice-copy strong{font-size:13px}.choice-copy small{font-size:11px}.choice-card .selection-mark{width:17px;height:17px}.choice-card .selection-mark svg{width:10px;height:10px}.action-dock{padding:12px 22px calc(14px + env(safe-area-inset-bottom))}.primary-button{min-height:54px;font-size:15px}.album-preview{padding:20px;gap:17px}.album-preview h2{font-size:23px}.chip{min-height:44px;font-size:12px}}
@media(max-width:350px){.studio-shell{padding:0 16px}h1{font-size:30px}.choice-card{padding:11px 10px;gap:9px;min-height:84px}.choice-icon{width:36px;height:36px}.choice-copy strong{font-size:12px;line-height:1.3}.action-dock{padding-left:16px;padding-right:16px}.recipient-art{height:90px}.other-recipient{min-height:134px}.voice-group .chip{font-size:11px}}
@media(min-width:900px){.studio-shell{padding-top:18px}.studio-header{padding-top:20px}#step-content{padding-top:42px}.recipient-art{height:126px}.recipient-grid{gap:14px}.question-heading{margin-bottom:30px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* Keep secondary copy legible on real phone screens. */
h1,.album-preview h2{overflow-wrap:anywhere}
.studio-shell .question-heading h1,.studio-shell .question-heading p,.studio-shell .chip,.studio-shell .choice-copy strong,.studio-shell .choice-copy small,.studio-shell .recipient-copy strong,.studio-shell .recipient-copy small,.studio-shell .field-label,.studio-shell .section-label,.studio-shell .hint,.studio-shell .error,.studio-shell .personal-note span,.studio-shell .personal-note p,.studio-shell .primary-button,.studio-shell .skip-button,.studio-shell .edit-button,.studio-shell .review-label,.studio-shell .review-value,.studio-shell .album-preview .album-label,.studio-shell .album-preview h2,.studio-shell .album-preview p,.studio-shell .sample-player strong,.studio-shell .sample-player small,.studio-shell .selection-feedback,.studio-shell .reveal-label,.studio-shell .other-recipient strong,.studio-shell .other-recipient small,.studio-shell .advanced summary,.studio-shell .completion h1,.studio-shell .completion p,.studio-shell .save-note,.studio-shell .secondary-button,.studio-shell .completion-link,.studio-shell .chapter-row,.studio-shell .step-count{text-transform:lowercase}
.album-preview>div:last-child{min-width:0}
.chapter-row{font-size:10px;color:#7f7873}
.chapter-row .active{color:#b73e32}
.recipient-copy small,.other-recipient small,.choice-copy small{font-size:11px;color:#79716b}
.hint,.writing-meta,.save-note,.review-label,.sample-player small{color:#7d746c}
.prompt{font-size:11px;color:#80634f;min-height:38px}
.primary-button{background:#f04438}
.album-preview .album-label{color:#90624f}
.album-preview p{color:#8a5e4c}
.selection-feedback,.story-example span{color:#9c5b44}
.skip-button{color:#7f6e61}
.field-label .optional{color:#81766e}