@font-face{font-family:'Onest';src:url('../assets/fonts/Onest-Variable.ttf') format('truetype');font-style:normal;font-weight:100 900;font-display:swap}
:root{--font-brand:'Onest';--black:var(--text-primary);--white:var(--bg-primary);--line:var(--border);--postcard-background-paper:var(--color-gray);--postcard-background-blush:#ffe6ee;--postcard-background-peach:#ffe6d5;--postcard-background-butter:#fff4c3;--postcard-background-sage:#e6ffdf;--postcard-background-sky:#def5ff;--postcard-background-lavender:#f0e5ff}
.support-arrow{display:inline-block;width:1em;height:1em;flex:none;object-fit:contain;filter:brightness(0);vertical-align:-.12em}.publish-button .support-arrow,html[data-style="night"] .final-actions a .support-arrow{filter:brightness(0) invert(1)}
body{font-family:var(--type-body-family);font-size:var(--type-body-size);font-weight:var(--type-body-weight);line-height:var(--type-body-leading);letter-spacing:var(--type-body-tracking)}
.hero.hero--static h1{font-family:var(--type-display-family);font-size:var(--type-display-size);font-weight:var(--type-display-weight);line-height:var(--type-display-leading);letter-spacing:var(--type-display-tracking)}
body h2,.panel__intro h1{font-family:var(--type-title-family);font-size:var(--type-title-size);font-weight:var(--type-title-weight);line-height:var(--type-title-leading);letter-spacing:var(--type-title-tracking)}
.hero__lead,.cta__content>p{font-size:var(--type-lead-size);font-weight:var(--type-lead-weight);line-height:var(--type-lead-leading);letter-spacing:var(--type-lead-tracking)}
:is(a,button,input,textarea,select):focus-visible,.music-option:has(input:focus-visible){outline:2px solid currentColor;outline-offset:4px}
/* Container-based card geometry stays identical in the editor and recipient view. */
html[data-style] .postcard-title{font-family:var(--type-display-family);font-weight:var(--type-display-weight);line-height:var(--type-display-leading);letter-spacing:var(--type-display-tracking)}
.postcard-instruction{font-family:var(--type-body-family);font-weight:var(--type-body-weight);line-height:var(--type-body-leading);letter-spacing:var(--type-body-tracking)}
.start-dialog{border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:0 12px 60px #0002;padding:28px;background:var(--bg-primary)}
.start-dialog h2{font-size:var(--type-title-size);text-transform:none}
.start-dialog__eyebrow{font-size:var(--type-ui-size);font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-muted)}
.start-dialog__description{font-size:var(--type-body-size);line-height:var(--type-body-leading)}
.start-dialog__permission{border:0;border-radius:var(--radius-m);background:var(--surface-subtle);font-size:var(--type-ui-size);line-height:1.5}
.start-dialog__permission span{background:var(--brand-accent);border:0;border-radius:50%}
.start-dialog__permission strong{font-weight:500}
.start-dialog__privacy{font-size:var(--type-ui-size);line-height:1.5;color:var(--text-muted)}
.start:hover:not(:disabled),.start-overlay.is-requesting .start-dialog{box-shadow:none;transform:none}
.start-dialog .start{font-size:var(--su-button-font-size,var(--type-ui-size));font-weight:var(--type-ui-weight);text-transform:none;border:0;border-radius:var(--radius-m)}
.music-toggle,.controls button,.final-actions button,.final-actions a{min-height:44px;border-radius:var(--radius-m);font-size:var(--su-button-font-size,var(--type-ui-size))}
.stage__status{border-radius:var(--radius-m);font-size:var(--type-ui-size)}
html[data-style="poster"] .experience .stage{width:min(100vw,80svh);height:auto;max-height:none;aspect-ratio:4/5}
html[data-style="poster"] .experience{align-items:center}
html[data-style="poster"] .postcard-title:not([data-length="medium"]):not([data-length="long"]){font-size:clamp(2.1rem,8.4cqw,5.8rem)}
.stage .postcard-cake{right:-4%;bottom:-4%;width:94%;height:68%}
.start-overlay{position:fixed;inset:0;z-index:20;padding:24px;overflow:auto;background:#0003;backdrop-filter:blur(6px)}
.start-dialog{width:min(100%,460px)}
.start-manual{width:100%;margin-top:10px}
.start-dialog::before{display:none}
html[data-style="poster"] .experience{background-image:none}
html[data-style="poster"] .experience::after{display:none}
html[data-style="poster"].is-wish-sent .postcard-visual{transform:scale(.8);transform-origin:50% 100%}
html[data-style].is-wish-sent .stage__copy{left:50%;width:82%;text-align:center;transform:translateX(-50%)}
html[data-style="poster"].is-wish-sent .postcard-copy{padding-bottom:12px}
.experience>.start-overlay{z-index:40}
html[data-style] .card-shell>.stage{width:100%;height:auto;max-height:none;aspect-ratio:4/5}
@media(max-width:600px){html[data-style="poster"] .postcard-copy,html[data-style].is-wish-sent .stage__copy{width:88%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}.scene,.postcard-stage,.postcard-copy,.postcard-visual,.postcard-cake{transition:none}}