#celebration-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.party-preferences{display:flex;flex-direction:column;gap:9px;margin-top:17px;padding-top:12px;border-top:1px solid #dceaf0}.party-preferences label{font-size:11px;color:#345f73;display:flex;align-items:center;gap:6px;cursor:pointer}.party-preferences input{accent-color:#2ba9a8;width:17px;height:17px;margin:0}.stage-top,.note-card,.view-hint,.stage-credit{z-index:3}
.chapter-transition{position:absolute;inset:0;background:radial-gradient(ellipse,#fffbe9,#e6f5fa);z-index:7;opacity:0;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;font:italic 24px Georgia;color:#8ba9b0}.chapter-transition>span{font:38px system-ui;color:#e7bb64;margin-bottom:15px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#253f58;background:radial-gradient(ellipse at 0 0,#fff9e9,#f1f7fc 45%,#eef1fa)}button,input,select{font:inherit}button{cursor:pointer;transition:transform .18s,box-shadow .18s,background .18s}button:hover{transform:translateY(-2px)}button:active{transform:translateY(2px)!important}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #ffbe48;outline-offset:4px}header{position:fixed;top:0;left:0;right:0;height:82px;padding:0 31px;display:flex;align-items:center;justify-content:space-between;z-index:10}.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:#1a6577;font-size:26px;font-weight:950;letter-spacing:-1px}.logo small{display:block;font-size:7px;letter-spacing:2px;line-height:1.2;font-weight:650;color:#91a6af}.mark{width:43px;height:43px;border-radius:15px;display:grid;place-items:center;font-size:23px;font-weight:950;color:white;background:linear-gradient(140deg,#ffb640,#f48a4d);box-shadow:0 4px 0 #d77736,0 8px 20px #e5a45233;transform:rotate(-8deg)}.edition{font-size:8px;font-weight:700;letter-spacing:1.5px;color:#8ca6b6}.circle-btn{height:35px;width:35px;border:1px solid white;border-radius:12px;color:#779aa9;background:linear-gradient(#fff,#e8f0f6);box-shadow:0 3px 0 #d5e0eb,0 7px 15px #8191a114;font-size:20px}
.heading{position:fixed;top:122px;left:32px;width:246px;z-index:4}.eyebrow{font-size:7px;letter-spacing:1.25px;font-weight:700;color:#9daaa3;margin-bottom:18px}h1{font:400 56px/.99 Georgia;letter-spacing:-2.5px;margin:0;color:#285d76;position:relative}h1 em{color:#ed9257;font-weight:400}h1 .spark{font:30px system-ui;position:absolute;color:#f1bd55;right:1px;top:10px;animation:spin 18s linear infinite}.recipient-line{font-size:11px;color:#93a3ad;line-height:1.9;margin:22px 0 20px}.recipient-line strong{font-size:19px;color:#df7c90;font-weight:750;letter-spacing:-.3px;overflow-wrap:anywhere}.recipient-line>span{color:#eaa5b0}.personalize{border:1px solid #fff;border-radius:19px;padding:14px;background:#ffffffb5;box-shadow:0 7px 27px #6483940d}.personalize summary{font-size:10px;letter-spacing:.1px;font-weight:700;color:#718fa2;cursor:pointer;list-style:none}.personalize summary:after{content:'−';float:right;color:#abbac3}.personalize:not([open]) summary:after{content:'+'}.personalize>label{display:block;margin-top:15px;font-size:6px;letter-spacing:1px;color:#a4b2b9}.personalize input[type=text]{width:100%;border:0;border-bottom:1px solid #e0e7ec;background:transparent;color:#4f778c;font-size:12px;padding:8px 0;border-radius:0}.personalize input::placeholder{color:#bec7cc;font-size:10px}.date-row{display:flex;gap:7px;align-items:end;margin-top:13px}.date-row label{flex:1;font-size:6px;letter-spacing:.8px;color:#a4b2b9;min-width:0}.date-row input{width:100%;margin-top:5px;border:0;border-radius:8px;font-size:9px;color:#72939f;background:#eff5f8;padding:6px;min-width:0}.date-row button{border:1px solid #fff;border-radius:8px;font-size:8px;background:#e9f5f0;color:#7ba693;padding:7px;white-space:nowrap;box-shadow:0 2px 0 #dce9e4}.personalize #today-label{font-size:7px;color:#b1bdbb;margin:9px 0 0}.show-info{display:flex;gap:9px;margin:22px 0 10px;color:#b0b8ba}.show-info>span{font-size:22px;color:#d6bc7b}.show-info b{font-size:6px;letter-spacing:.8px}.show-info p{font-size:9px;line-height:1.8;margin:4px 0}.chapter-list{display:flex;flex-direction:column;gap:9px;margin-left:29px;padding-left:12px;border-left:1px solid #dce5e8;font-size:8px;color:#bbc5c9}.chapter-list span.active{color:#d49c43;font-weight:700}
.showcase{position:fixed;left:312px;right:25px;top:89px;bottom:177px;border-radius:35px;border:2px solid #fff;overflow:hidden;background:radial-gradient(ellipse at 50% 30%,#edfbff,#d6eff8 55%,#b5d8e9);box-shadow:0 20px 65px #51819e16,inset 0 0 0 1px #fff8;isolation:isolate}#scene{position:absolute;inset:0}#scene canvas{display:block;width:100%;height:100%;touch-action:none}.stage-top{position:absolute;top:22px;left:25px;right:25px;display:flex;justify-content:space-between;align-items:center;gap:12px;pointer-events:none;font-size:8px;color:#96b9c4}.stage-badge{font-size:7px;font-weight:700;color:#6898a9;letter-spacing:1px;white-space:nowrap}.stage-top #scene-status{font-size:7px;color:#86acb8;letter-spacing:.5px;max-width:60%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-card{position:absolute;left:24px;top:76px;pointer-events:none;width:69px;padding:12px 13px;border-radius:16px;background:#ffffff8c;backdrop-filter:blur(10px);border:1px solid #ffffff99}.note-card>span{font-size:5px;letter-spacing:.4px;color:#a6bfcb;white-space:nowrap}.note-card>div:nth-child(2){display:flex;align-items:baseline;gap:1px}.note-card b{font:43px/1.2 Georgia;color:#699eb5}.note-card small{color:#a8c2cb;font-size:12px}.note-card>i{font-size:6px;letter-spacing:.6px;font-style:normal;color:#99b7c4}.bars{display:flex;gap:3px;align-items:center;height:21px}.bars i{width:2px;height:3px;background:#e9b263;border-radius:2px}.note-card #verse-label{font-size:5px;display:block;color:#9eb9c4;line-height:1.6;min-height:16px}.scene-options{position:absolute;right:20px;top:73px;display:flex;flex-direction:column;gap:12px;z-index:4}.scene-options button{display:flex;gap:7px;align-items:center;justify-content:center;border:1px solid #fff;border-radius:13px;background:linear-gradient(#ffffffed,#e5f0f7ec);color:#87a7b5;padding:9px 11px;font-size:8px;box-shadow:0 4px 0 #b8cfdc,0 8px 17px #6998af15}.scene-options button>span{font-size:14px}.scene-options button[aria-pressed=true]{background:linear-gradient(#ffe6a1,#ffd17b);border-color:#fff4ce;box-shadow:0 4px 0 #dcb269,0 8px 17px #bda26a22;color:#ac813a}.view-hint{position:absolute;bottom:19px;left:24px;font-size:7px;color:#83a7b8;pointer-events:none}.stage-credit{position:absolute;bottom:19px;right:24px;letter-spacing:1.3px;color:#86adbd;font-size:5px;pointer-events:none}#impact-flash{position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse,#fff3b5,#ffffef88 55%,transparent);opacity:0;mix-blend-mode:screen}.loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:8;border-radius:15px;background:#fff8eb;padding:16px 20px;font-size:11px;color:#9b927f}.loading[hidden]{display:none}.start-layer{position:absolute;left:0;right:0;bottom:46px;display:flex;justify-content:center;z-index:5;pointer-events:none}.start-layer.hidden{display:none}.start-layer button{pointer-events:auto;display:flex;align-items:center;gap:13px;padding:12px 18px;border:1px solid #fff4da;border-radius:17px;background:linear-gradient(160deg,#ffdb80,#ffb760);box-shadow:0 6px 0 #d7964d,0 12px 32px #b18a613d;color:#966335;text-align:left}.play-triangle{width:33px;height:33px;display:grid;place-items:center;padding-left:2px;border-radius:50%;background:#fff0c6;color:#c19040;font-size:11px;box-shadow:inset 0 -3px 0 #e7cf9f}.start-layer b{display:block;font-size:12px;font-weight:800}.start-layer small{display:block;font-size:7px;color:#bf9056;margin-top:3px}.cta-arrow{font-size:23px;color:#b77f3e}
.console{position:fixed;left:312px;right:25px;bottom:41px;z-index:6;min-height:110px;border-radius:23px;border:2px solid #fff;background:linear-gradient(140deg,#ffffffed,#f3f8fced);box-shadow:0 7px 0 #dbe5ef,0 18px 36px #6689a214;padding:19px 22px 30px;display:flex;align-items:center;gap:20px}.track{display:flex;align-items:center;gap:11px;flex:1;min-width:200px}.track-icon{width:39px;height:39px;border:1px solid white;border-radius:13px;background:linear-gradient(#e6f6f9,#cee8f0);box-shadow:0 3px 0 #bdd5e0;font:23px Georgia;color:#79a8b7;display:grid;place-items:center}.track b{display:block;font-size:10px;color:#5f879a}.track span{display:block;font-size:7px;color:#a2b5bf;margin-top:4px}.transport{display:flex;align-items:center;gap:12px}.transport-btn{border:0;background:transparent;color:#a6bfca;font-size:22px;padding:3px}.transport-btn.active{color:#4ea9aa}.play-btn{border:1px solid #b8f0e2;border-radius:16px;background:linear-gradient(145deg,#62d6be,#3cb5ad);width:46px;height:43px;box-shadow:0 5px 0 #2f969b,0 9px 18px #4caca832;color:white;font-size:15px}.settings{display:flex;gap:18px;align-items:center;justify-content:end;flex:1}.settings label{min-width:72px}.settings label>span{display:block;font-size:6px;letter-spacing:.8px;color:#a4b9c5}.settings b{float:right;font-weight:500}.settings select{border:0;background:transparent;color:#86a6b6;font-size:8px;padding:7px 0 0;max-width:130px}.settings input[type=range]{display:block;appearance:none;width:80px;height:3px;border-radius:3px;background:#d9e9ef;margin:12px 0 4px;cursor:pointer}.settings input[type=range]::-webkit-slider-thumb{appearance:none;width:10px;height:10px;border-radius:50%;background:linear-gradient(#ffd786,#efb557);box-shadow:0 2px 0 #d3a650}.timeline{position:absolute;bottom:11px;left:22px;right:22px;display:flex;align-items:center;gap:9px;font-size:6px;color:#9fb7c5;font-variant-numeric:tabular-nums}.progress{height:3px;background:#e3edf3;border-radius:3px;flex:1;position:relative;overflow:hidden}#progress-fill{height:100%;width:0;background:linear-gradient(90deg,#66cfbd,#ffc873);border-radius:3px}.progress>i{position:absolute;width:1px;background:white;top:0;bottom:0}footer{position:fixed;left:33px;right:27px;bottom:12px;font-size:7px;color:#aabcc5;display:flex;justify-content:space-between;letter-spacing:.7px}footer>span:first-child{font-size:6px}footer b{color:#8ba7b6;font-weight:700}body.playing .bars i{animation:equalizer .6s ease-in-out infinite alternate}body.playing .bars i:nth-child(2n){animation-delay:-.4s}body.playing .bars i:nth-child(3n){animation-delay:-.2s}@keyframes spin{to{transform:rotate(360deg)}}@keyframes equalizer{from{height:3px}to{height:18px}}
@media(max-width:1200px){.volume{display:none}.settings{gap:12px}.console{gap:12px}.track{min-width:180px}.settings label{min-width:66px}.settings input[type=range]{width:65px}}@media(max-width:950px){.heading{left:23px;width:212px}.heading h1{font-size:49px}.showcase,.console{left:261px;right:18px}.settings .tempo{display:none}.console{padding:17px 16px 30px}.track{min-width:0}.track b{font-size:8px}.track span{font-size:6px}.chapter-list{display:none}}
@media(max-width:700px){header{height:65px;padding:0 19px}.logo{font-size:22px;gap:9px}.logo small{font-size:6px;letter-spacing:1.6px}.mark{width:33px;height:33px;border-radius:12px;font-size:20px}.edition{font-size:5.5px;letter-spacing:.7px;max-width:130px;text-align:center;line-height:1.7}.circle-btn{width:29px;height:29px;border-radius:10px;font-size:17px}.heading{top:77px;left:20px;right:20px;width:auto;z-index:8;pointer-events:none}.eyebrow{font-size:5px;letter-spacing:1px;margin-bottom:6px}.heading h1{font:400 25px/1 Georgia;letter-spacing:-.7px}.heading h1 br{display:none}.heading h1 em{padding-left:5px}.heading h1 .spark{font-size:20px;right:2px;top:0}.recipient-line{font-size:8px;margin:7px 0;line-height:1.5}.recipient-line br{display:none}.recipient-line strong{font-size:12px;padding-left:4px}.personalize{pointer-events:auto;position:absolute;right:0;top:61px;width:100%;padding:10px 12px;border-radius:13px;background:#ffffffef;backdrop-filter:blur(16px);box-shadow:0 4px 0 #e0e9ef}.personalize summary{font-size:9px}.personalize[open]{display:grid;grid-template-columns:1fr 1fr;column-gap:12px}.personalize summary{grid-column:1/-1}.personalize>label{grid-column:1;font-size:5px;margin-top:10px}.personalize input[type=text]{grid-column:1;grid-row:3;font-size:11px;padding:5px 0}.personalize input::placeholder{font-size:9px}.date-row{grid-column:2;grid-row:2/4;margin-top:9px}.date-row label{font-size:5px;letter-spacing:.2px}.date-row input{font-size:8px;padding:5px}.date-row button{font-size:7px;padding:6px}.personalize #today-label{grid-column:1/-1;font-size:6px;margin-top:6px}.show-info,.chapter-list{display:none}.showcase{left:12px;right:12px;top:184px;bottom:204px;border-radius:25px}.stage-top{left:14px;right:14px;top:15px;gap:5px;font-size:6px}.stage-badge{font-size:5px;letter-spacing:.5px}.stage-top #scene-status{font-size:5px;max-width:55%;letter-spacing:0}.note-card{left:12px;top:48px;width:49px;padding:8px;border-radius:12px}.note-card>span{font-size:3.7px;letter-spacing:0}.note-card b{font-size:29px}.note-card small{font-size:9px}.note-card>i{font-size:5px}.note-card #verse-label{font-size:4px;min-height:12px}.bars{gap:2px;height:15px}.scene-options{right:12px;top:48px;gap:9px}.scene-options button{font-size:0;padding:7px;border-radius:11px;min-width:31px;min-height:30px;box-shadow:0 3px 0 #b8cfdc}.scene-options button>span{font-size:14px;line-height:1}.scene-options button[aria-pressed=true]{box-shadow:0 3px 0 #dcb269}.view-hint{font-size:5px;bottom:15px;left:14px}.stage-credit{font-size:4px;bottom:15px;right:14px;letter-spacing:.6px}.start-layer{bottom:37px}.start-layer button{padding:9px 13px;border-radius:14px;gap:10px;box-shadow:0 4px 0 #d7964d,0 9px 22px #b18a6122}.play-triangle{width:27px;height:27px;font-size:9px}.start-layer b{font-size:10px}.start-layer small{font-size:6px}.cta-arrow{font-size:20px}.console{left:12px;right:12px;bottom:38px;min-height:143px;padding:12px 14px 27px;flex-wrap:wrap;gap:11px;border-radius:20px;box-shadow:0 5px 0 #dbe5ef,0 12px 25px #6689a210}.track{flex:1}.track-icon{width:32px;height:32px;border-radius:11px;font-size:21px}.track b{font-size:9px}.track span{font-size:6px}.transport{gap:11px}.transport-btn{font-size:20px}.play-btn{width:37px;height:35px;border-radius:13px;font-size:12px;box-shadow:0 4px 0 #2f969b}.settings{flex-basis:100%;width:100%;justify-content:space-between;gap:12px;border-top:1px solid #e5edf4;padding-top:7px}.settings .tempo,.settings .volume{display:block}.settings label{min-width:60px;flex:1}.settings label>span{font-size:5px}.settings select{font-size:7px;max-width:125px}.settings input[type=range]{width:100%;max-width:85px;height:2px;margin-top:10px}.timeline{left:15px;right:15px;bottom:9px;font-size:5px;gap:7px}.progress{height:2px}footer{left:21px;right:21px;bottom:12px;font-size:6px}footer>span:first-child{font-size:5px}}
.scene-options button:active{box-shadow:0 1px 0 #b8cfdc}.play-btn:active{box-shadow:0 1px 0 #2f969b}.personalize>label,.date-row label{font-size:7px}.scene-options button{font-size:9px}.settings select{font-size:9px}
/* Crisp colours, readable editor, and the finished keepsake card. */
.heading{top:100px;bottom:35px;overflow-y:auto;padding:0 8px 20px 0;scrollbar-width:thin}.heading h1{font-size:43px}.eyebrow{color:#547c84}.recipient-line{margin:13px 0;color:#587b8c}.personalize{background:#fff}.personalize>label,.date-row label{color:#436578;font-size:9px;letter-spacing:.3px}.personalize summary{color:#2d6e80;font-size:12px}.personalize input[type=text]{font-size:13px;color:#244b68}.personalize textarea{font:12px/1.6 inherit;resize:vertical;width:100%;min-height:70px;max-height:150px;border:1px solid #c9e1e8;border-radius:10px;background:#f5fbff;padding:8px;color:#30546c;margin-top:6px}.personalize #today-label{color:#4e7a82;font-size:9px}.privacy-note{font-size:9px;color:#617e8a}.note-card{backdrop-filter:none;background:#fffffff2}.stage-top #scene-status{color:#356e83}.stage-badge{color:#31697d}.showcase{background:linear-gradient(155deg,#dcf7ff,#a7ddf5)}.gift-button{border:1px solid #fff4ce;border-radius:12px;padding:11px 14px;color:#77431b;font-weight:750;background:linear-gradient(#ffe59a,#ffbc62);box-shadow:0 4px 0 #cf9148}.personalize .gift-button{width:100%;font-size:11px;margin-top:10px}.gift-button.secondary{color:#215c64;background:linear-gradient(#b7f4e5,#74d7c9);box-shadow:0 4px 0 #4ba69e}.gift-button:disabled{opacity:.5;cursor:not-allowed}.gift-button:disabled:hover{transform:none}textarea:focus-visible{outline:3px solid #ffbe48;outline-offset:3px}
#gift-dialog{color:#31576a;border:2px solid white;border-radius:30px;background:radial-gradient(ellipse at top,#fff7d9,#fff 60%);width:min(540px,calc(100% - 28px));max-height:90dvh;overflow:auto;padding:30px;text-align:center;box-shadow:0 20px 100px #173f6b44}#gift-dialog::backdrop{background:#1235509c}.close-gift{position:absolute;right:15px;top:12px;border:0;background:#e7f3f5;color:#356777;border-radius:50%;width:34px;height:34px;font-size:23px}.gift-seal{font-size:48px}.gift-eyebrow{font-size:9px;letter-spacing:1.5px;color:#688d91}#gift-title{font:700 30px/1.2 Georgia;margin:14px 0;color:#d65078;overflow-wrap:anywhere}#gift-date{font-size:11px;color:#63828e}#gift-message{font-size:17px;line-height:1.8;margin:22px 0;white-space:pre-wrap;overflow-wrap:anywhere}.gift-signature{font-size:13px;overflow-wrap:anywhere}.gift-signature strong{color:#c25473}.share-area{margin-top:23px;border-top:1px dashed #b8d3db;padding-top:20px}.share-area>label{display:block;font-size:9px;letter-spacing:1px;color:#567c8e}#gift-link{margin-top:10px;width:100%;padding:10px;border:1px solid #b9d8e1;background:#f2faff;border-radius:9px;font-size:11px;color:#366279}.gift-actions{display:flex;gap:12px;margin-top:13px;justify-content:center}.gift-actions button{flex:1;font-size:12px}#share-status{font-size:11px;line-height:1.7;color:#5b7f8d}.replay-gift{border:0;background:transparent;color:#258b8b;margin-top:12px;font-weight:700;padding:12px}.recipient-mode .share-area{display:none}.recipient-mode .heading h1{color:#2b6979}
@media(max-width:700px){.heading{top:77px;bottom:auto;overflow:visible;padding:0}.heading h1{font-size:25px}.recipient-line{margin:7px 0}.personalize[open]{display:block;max-height:calc(100dvh - 200px);overflow:auto;backdrop-filter:none;background:white}.personalize input[type=text]{font-size:14px;padding:8px 0}.personalize>label{font-size:9px;margin-top:12px}.date-row label{font-size:9px}.date-row input{font-size:13px}.date-row button{font-size:11px}.personalize summary{font-size:11px}.personalize textarea{font-size:14px}.personalize #today-label{font-size:10px}.personalize .privacy-note{font-size:10px}#gift-dialog{padding:24px 20px;border-radius:24px}#gift-title{font-size:26px}.gift-actions button{font-size:11px;padding:11px 8px}#gift-message{font-size:16px}}
@media(max-width:700px){.note-card{top:auto;bottom:85px}.scene-options{top:auto;bottom:85px}.scene-options button{min-width:38px;min-height:38px;font-size:0}.play-btn{width:43px;height:40px}.personalize>label,.date-row label{font-size:6px}}
@media(max-height:740px) and (min-width:701px){.heading{top:100px}.heading h1{font-size:42px}.recipient-line{margin:13px 0}.show-info{margin-top:13px}.chapter-list{display:none}.showcase{bottom:151px}.console{bottom:31px;min-height:97px;padding-top:14px;padding-bottom:27px}}@media(max-height:700px) and (max-width:700px){.showcase{top:176px;bottom:180px}.console{bottom:30px;min-height:128px;gap:7px}.settings{padding-top:5px}.heading{top:72px}.personalize{top:58px}footer{bottom:8px}}@media(prefers-reduced-motion:reduce){h1 .spark,body.playing .bars i{animation:none}button{transition:none}}