.sst-demo { display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.38fr); gap:20px; width:100%; border:1px solid #e2e5eb; border-radius:28px; background:#fff; padding:20px; box-shadow:0 22px 65px #1622360c; text-align:left; }
.sst-demo [hidden] { display:none !important; }
.sst-demo__guide { padding:22px 18px; align-self:center; }
.sst-demo__eyebrow { margin:0; font-size:12px; line-height:1.5; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#bb4316; }
.sst-demo__heading { margin:12px 0; max-width:400px; font-size:clamp(25px,2.8vw,35px); font-weight:700; line-height:1.15; letter-spacing:-.035em; color:#18212c; }
.sst-demo__copy { margin:0; font-size:14px; line-height:1.75; color:#677180; }
.sst-demo__select-label { display:block; margin:25px 0 8px; font-size:13px; font-weight:700; color:#263342; }
.sst-demo__select { width:100%; border:1px solid #dce1e7; border-radius:12px; padding:12px 36px 12px 14px; color:#253244; background-color:#fff; font-size:14px; font-weight:600; }
.sst-demo__controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:18px; }
.sst-demo__button { min-height:44px; padding:11px 17px; border-radius:12px; border:1px solid transparent; font-size:13px; line-height:1.5; font-weight:750; cursor:pointer; }
.sst-demo__button--primary { color:#fff; background:#e74e1c; box-shadow:0 6px 16px #e74e1c20; }
.sst-demo__button--primary:hover { background:#c94014; }
.sst-demo__button--quiet { color:#536171; background:#f4f6f8; border-color:#e4e8ed; }
.sst-demo__button--quiet:hover { color:#243446; background:#e9edf1; }
.sst-demo button:focus-visible,.sst-demo select:focus-visible,.sst-demo a:focus-visible { outline:3px solid #fb8c5a; outline-offset:3px; }
.sst-demo__status { min-height:42px; margin:15px 0 0; color:#314155; font-size:13px; line-height:1.6; font-weight:600; }
.sst-demo__disclaimer,.sst-demo__reduced { margin:8px 0 0; color:#7a8390; font-size:12px; line-height:1.6; }
.sst-demo__experience { min-width:0; overflow:hidden; border:1px solid #dde2e7; border-radius:20px; background:#f7f7f6; }
.sst-demo__chrome { position:relative; z-index:2; padding:18px 20px 16px; color:#fff; background:#19232e; }
.sst-demo__chrome-copy { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; font-size:12px; line-height:1.5; }
.sst-demo__sample { color:#c2cad4; }
.sst-demo__selected { text-align:right; color:#ffe7d6; font-weight:700; }
.sst-demo__progress { overflow:hidden; height:5px; border-radius:99px; background:#ffffff20; }
.sst-demo__progress > span { display:block; width:100%; height:100%; transform:scaleX(0); transform-origin:left; border-radius:99px; background:linear-gradient(90deg,#f78d58,#ffe0a0); will-change:transform; }
.sst-demo__steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; padding:0; margin:15px 0 0; list-style:none; }
.sst-demo__steps li { display:flex; gap:7px; align-items:flex-start; color:#8e9aaa; font-size:12px; line-height:1.4; }
.sst-demo__steps li > span:first-child { display:grid; place-items:center; flex:0 0 19px; height:19px; margin-top:-1px; border:1px solid #ffffff24; border-radius:50%; font-size:11px; }
.sst-demo__steps li[aria-current] { color:#fff; font-weight:650; }
.sst-demo__steps li[aria-current] > span:first-child { border-color:#ffb083; background:#ffa365; color:#18212c; }
.sst-demo__steps li.is-done { color:#d0d6de; }
.sst-demo__viewport { display:grid; min-height:400px; align-items:center; padding:24px; background:radial-gradient(ellipse at 50% 25%,#fff 5%,#f2eee8 100%); }
.sst-demo__panel { width:100%; min-width:0; }
.sst-demo__email { border:1px solid #e4e0db; border-radius:18px; padding:24px; background:#fff; box-shadow:0 20px 36px #65513b0c; }
.sst-demo__email-header { display:flex; align-items:center; gap:10px; padding-bottom:17px; border-bottom:1px solid #efeeeb; color:#a54722; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.sst-demo__email-header svg { width:28px; height:28px; }
.sst-demo__email-from { margin:20px 0 9px; font-size:12px; font-weight:600; color:#7c8590; }
.sst-demo__email h3 { margin:0; font-size:23px; line-height:1.25; font-weight:650; letter-spacing:-.025em; color:#1f2a38; }
.sst-demo__body { margin:15px 0 0; font-size:14px; line-height:1.75; color:#637082; }
.sst-demo__mail-link { display:inline-flex; align-items:center; gap:14px; margin-top:20px; padding:11px 16px; border-radius:10px; background:#e95020; color:#fff; font-size:13px; font-weight:700; }
.sst-demo__email-footer { margin-top:20px; color:#9ba2ac; font-size:12px; }
.sst-demo__link { overflow:hidden; border:1px solid #e1ded8; border-radius:18px; background:#fff; box-shadow:0 20px 36px #65513b0c; }
.sst-demo__browser-address { display:flex; align-items:center; justify-content:center; gap:7px; padding:12px; background:#f6f6f5; border-bottom:1px solid #e9e8e4; color:#728091; font-size:12px; }
.sst-demo__browser-address svg { width:18px; height:18px; }
.sst-demo__link-body { padding:25px; text-align:center; }
.sst-demo__link-mark { display:grid; width:54px; height:54px; margin:0 auto 17px; place-items:center; border:1px solid #dfcba9; border-radius:50%; background:#fbf5e9; color:#a27437; font-size:29px; }
.sst-demo__link h3 { margin:11px 0 0; font-family:Georgia,serif; font-size:29px; line-height:1.2; font-weight:400; color:#2b3442; }
.sst-demo__next { margin:17px 0 0; color:#856442; font-size:12px; line-height:1.7; }
.sst-demo__opening [data-scene-controls] { display:none !important; }
.sst-demo__opening [data-sst-scene] { width:100%; }
.sst-demo__result { position:relative; isolation:isolate; overflow:hidden; min-height:325px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px; border:1px solid #decfad; border-radius:18px; text-align:center; color:#302d28; background:#fff9ec; box-shadow:0 17px 40px #71603c10; }
.sst-demo__result h3 { margin:13px 0 16px; font-family:Georgia,serif; font-size:clamp(26px,2.8vw,35px); line-height:1.12; font-weight:400; letter-spacing:-.025em; }
.sst-demo__message { margin:0; max-width:430px; font-size:14px; line-height:1.8; }
.sst-demo__detail { margin:22px 0 0; padding-top:16px; border-top:1px solid #bfa87850; font-size:12px; line-height:1.6; font-weight:700; letter-spacing:.025em; }
.sst-demo__result-decoration { position:absolute; z-index:-1; width:170px; height:170px; left:-65px; top:-65px; border:1px solid #be9b5860; border-radius:50%; box-shadow:0 0 0 20px #be9b5810,0 0 0 40px #be9b5808; }
.sst-demo__result--birthday { color:#342341; border-color:#e8be9d; background:radial-gradient(circle at 15% 15%,#ffdf9355,transparent 45%),#fff4e9; }
.sst-demo__result--birthday h3 { font-family:inherit; font-weight:800; }
.sst-demo__result--pregnancy,.sst-demo__result--birth_announcement { color:#3e5450; border-color:#cbdcd3; background:radial-gradient(circle at 90% 0,#e1ebdc 0,transparent 40%),#f5f6ed; }
.sst-demo__result--pregnancy .sst-demo__eyebrow,.sst-demo__result--birth_announcement .sst-demo__eyebrow { color:#5e8273; }
.sst-demo__result--gender_reveal { color:#583b4f; border-color:#e3c8d7; background:radial-gradient(circle at 50% 0,#f7dce8 0,transparent 60%),#fff4fa; }
.sst-demo__result--gender_reveal .sst-demo__eyebrow { color:#9c5f83; }
.sst-demo__result--trip { color:#253f4b; border-color:#b6d1da; background:repeating-linear-gradient(0deg,transparent 0,transparent 24px,#23607505 25px),#f1f8fa; }
.sst-demo__result--trip .sst-demo__eyebrow { color:#407d8c; }
.sst-demo__result--trip .sst-demo__detail { border-style:dashed; border-color:#7ea2b8; }
.sst-demo__result--love { color:#603e44; border-color:#dbc6ba; background:#f9eee6; }
.sst-demo__result--love h3 { font-style:italic; }
.sst-demo__result--award { color:#f9edcd; border-color:#a5894a; background:radial-gradient(ellipse at 50% 0,#a37d3b40,transparent 60%),#1e252b; box-shadow:inset 0 0 0 7px #d3b67609; }
.sst-demo__result--award .sst-demo__eyebrow { color:#d9b96e; }
.sst-demo__result--award .sst-demo__detail { border-color:#d3b67655; }
.sst-demo__result--capsule { color:#665039; border-color:#d4bf9c; background:repeating-linear-gradient(0deg,transparent 0,transparent 23px,#66503904 24px),#f7ecd8; }
.sst-demo__variant .sst-demo__result { background-color:var(--sst-demo-paper); color:var(--sst-demo-ink); border-color:var(--sst-demo-line); }
.sst-demo__variant .sst-demo__result .sst-demo__eyebrow { color:var(--sst-demo-accent); }
.sst-demo__variant .sst-demo__result .sst-demo__detail { border-color:var(--sst-demo-line); }
.sst-demo__outcome { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:17px 20px; border-top:1px solid #e2e4e5; background:#fff; }
.sst-demo__outcome p { margin:0; color:#73808d; font-size:12px; line-height:1.6; }
.sst-demo__outcome a { flex:0 0 auto; max-width:48%; color:#bd431c; font-size:12px; line-height:1.6; font-weight:700; text-decoration:none; }
.sst-demo__outcome a:hover { text-decoration:underline; }
.sst-demo.is-paused * { animation-play-state:paused !important; }
.sst-demo[data-state="running"] .sst-demo__panel:not([hidden]) { animation:sstDemoPanelIn .35s ease-out both; }
@keyframes sstDemoPanelIn { from { opacity:0; transform:translateY(7px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:850px) { .sst-demo { grid-template-columns:minmax(0,1fr); gap:18px; padding:16px; } .sst-demo__guide { padding:8px 6px; } .sst-demo__heading { max-width:none; } .sst-demo__select-label { margin-top:18px; } .sst-demo__status { min-height:0; } .sst-demo__viewport { min-height:380px; } }
@media (max-width:450px) { .sst-demo { padding:10px; border-radius:21px; } .sst-demo__guide { padding:10px 7px; } .sst-demo__heading { font-size:27px; } .sst-demo__chrome { padding:16px 12px; } .sst-demo__chrome-copy { align-items:flex-start; } .sst-demo__selected { max-width:52%; } .sst-demo__steps { gap:7px; } .sst-demo__steps li { flex-direction:column; gap:6px; } .sst-demo__viewport { padding:12px; min-height:395px; } .sst-demo__email { padding:18px; } .sst-demo__email h3 { font-size:22px; } .sst-demo__link-body { padding:22px 17px; } .sst-demo__result { padding:25px 17px; } .sst-demo__result h3 { font-size:29px; } .sst-demo__outcome { padding:15px 13px; align-items:flex-start; } }
@media (prefers-reduced-motion:reduce) { .sst-demo * { animation:none !important; transition:none !important; } }

/* Warm, grown-up playfulness; the scene itself keeps its selected mood palette. */
.sst-demo{--demo-ink:#243340;--demo-orange:#e95824;--demo-cream:#fffaf1;--demo-mint:#eaf3e9;--demo-lilac:#f0eafb;--demo-yellow:#fff0bc;gap:22px;border-color:#efd9c4;border-radius:30px;background:linear-gradient(125deg,#fffdf7 5%,#fff6e9 100%);box-shadow:0 22px 65px #b6602810;color:var(--demo-ink);font-family:Inter,"Segoe UI",Arial,sans-serif}
.sst-demo__eyebrow{color:#9f431f;font-weight:750;letter-spacing:.09em}
.sst-demo__heading{font-size:clamp(26px,2.8vw,36px);font-weight:750;line-height:1.18;color:var(--demo-ink)}
.sst-demo__copy,.sst-demo__body{color:#61707a}
.sst-demo__select-label{color:var(--demo-ink)}
.sst-demo__select{border-color:#e8cfb7;border-radius:15px;padding-top:13px;padding-bottom:13px;color:var(--demo-ink);background-color:#fffefa;box-shadow:0 3px 0 #e4bd8f15}
.sst-demo__controls{gap:9px}
.sst-demo__button{padding-left:18px;padding-right:18px;border-radius:999px;transition:background-color .18s,transform .18s}
.sst-demo__button--primary{background:#cf471c;box-shadow:0 6px 16px #e9582424}
.sst-demo__button--primary:hover{background:#b53c17;transform:translateY(-1px)}
.sst-demo__button--quiet{color:#63543f;background:#fff0d4;border-color:#efd5b4}
.sst-demo__button--quiet:hover{background:#ffe7bf;color:var(--demo-ink)}
.sst-demo button:focus-visible,.sst-demo select:focus-visible,.sst-demo a:focus-visible{outline-color:#e95824}
.sst-demo__status{margin-top:16px;color:#385e4b}
.sst-demo__disclaimer,.sst-demo__reduced{color:#69736f}
.sst-demo__experience{border-color:#ebc9a7;border-radius:24px;background:var(--demo-cream);box-shadow:0 8px 26px #a86e3110}
.sst-demo__chrome{padding-bottom:17px;color:var(--demo-ink);background:linear-gradient(112deg,#ffe9cf 0%,#fff1d4 65%,#fff4df 100%);border-bottom:1px solid #f0d5b7}
.sst-demo__sample{color:#775641;font-weight:600}
.sst-demo__selected{max-width:60%;color:#9f431f;font-weight:750}
.sst-demo__progress{height:6px;background:#edcdaa}
.sst-demo__progress>span{background:linear-gradient(90deg,#e95824,#f5a441)}
.sst-demo__steps li{color:#71624f;line-height:1.45}
.sst-demo__steps li>span:first-child{flex-basis:21px;height:21px;border-color:#dec4a7;border-radius:8px;background:#fff8ec;font-size:12px;font-weight:600}
.sst-demo__steps li[aria-current]{color:#9f431f;font-weight:750}
.sst-demo__steps li[aria-current]>span:first-child{border-color:#cf471c;background:#cf471c;color:#fff;box-shadow:0 2px 5px #e9582420}
.sst-demo__steps li.is-done{color:#42604d}
.sst-demo__steps li.is-done>span:first-child{border-color:#b9cdb4;background:var(--demo-mint);color:#42604d}
.sst-demo__viewport{background:radial-gradient(ellipse at 6% 10%,#fff0bc88,transparent 48%),radial-gradient(ellipse at 95% 85%,#f0eafb80,transparent 46%),var(--demo-cream)}
.sst-demo__email{position:relative;overflow:hidden;border-color:#eed9c5;border-radius:23px;background:#fffefa;box-shadow:0 12px 28px #b76b3b0e}
.sst-demo__email:after{content:"";position:absolute;right:-25px;top:-25px;width:90px;height:90px;border-radius:50%;border:18px solid #fff0bc;opacity:.6;pointer-events:none}
.sst-demo__email-header{position:relative;gap:12px;padding-bottom:16px;border-color:#f0dfcc;color:#9f431f;font-weight:750;letter-spacing:.075em}
.sst-demo__email-mark{display:grid;place-items:center;width:43px;height:43px;flex:0 0 43px;border:1px solid #f2c9a7;border-radius:14px;background:#ffead8;color:#c5471d;transform:rotate(-6deg);box-shadow:3px 3px 0 #fff0bc}
.sst-demo__email-mark svg{width:27px;height:27px}
.sst-demo__email-from,.sst-demo__email-footer{color:#69736f}
.sst-demo__email h3{position:relative;font-size:24px;line-height:1.27;font-weight:750;letter-spacing:-.03em;color:var(--demo-ink)}
.sst-demo__mail-link{gap:17px;padding:12px 18px;border-radius:999px;background:#cf471c;font-weight:750;box-shadow:0 4px 11px #e9582420}
.sst-demo__mail-link>span{font-size:17px;font-weight:500}
.sst-demo__link{border-color:#d4dfcd;border-radius:23px;background:#fffefa;box-shadow:0 12px 28px #6884550e}
.sst-demo__browser-address{position:relative;padding:13px 40px;background:var(--demo-mint);border-color:#d4dfcd;color:#536651}
.sst-demo__browser-address:before{content:"";position:absolute;left:16px;top:18px;width:5px;height:5px;border-radius:50%;background:#e99b75;box-shadow:8px 0 #e5c270,16px 0 #93b58b}
.sst-demo__browser-address svg{width:17px;height:17px;flex-shrink:0}
.sst-demo__link-body{position:relative;background:radial-gradient(ellipse at 90% 90%,#f0eafb55,transparent 55%)}
.sst-demo__link-mark{position:relative;width:56px;height:56px;border-color:#e2d0ef;border-radius:18px;background:var(--demo-lilac);color:#826199;font-size:27px;transform:rotate(6deg);box-shadow:-7px 6px 0 #fff0bc80}
.sst-demo__link-mark:after{content:"";position:absolute;width:5px;height:5px;right:-13px;top:9px;border-radius:50%;background:#e99b75;box-shadow:-70px 30px #a9c99a}
.sst-demo__link h3{font-family:inherit;font-size:29px;font-weight:750;letter-spacing:-.03em;color:var(--demo-ink)}
.sst-demo__next{display:inline-block;margin-top:18px;padding:8px 14px;border:1px dashed #e0c395;border-radius:999px;color:#73523a;background:#fff5de;font-size:12px;line-height:1.6}
.sst-demo__variant .sst-demo__result{padding:27px;border-radius:24px;background:var(--sst-demo-paper,#fffaf1);color:var(--sst-demo-ink,#243340);border-color:var(--sst-demo-line,#decfad);box-shadow:0 12px 28px #b76b3b10}
.sst-demo__result h3{margin:12px 0 15px;font-family:inherit;font-size:clamp(26px,2.8vw,34px);line-height:1.17;font-weight:750;letter-spacing:-.03em}
.sst-demo__result--love h3{font-style:normal}
.sst-demo__detail{display:inline-block;margin-top:20px;padding:12px 17px;border:1px solid var(--sst-demo-line,#ead7bd);border-radius:14px;font-weight:650;letter-spacing:.01em}
.sst-demo__result-decoration{inset:0;left:0;top:0;width:100%;height:100%;border:0;border-radius:0;box-shadow:none;pointer-events:none;background:radial-gradient(circle at 12% 14%,var(--sst-demo-line,#ead7bd) 0 3px,transparent 4px),radial-gradient(circle at 88% 20%,var(--sst-demo-accent,#e95824) 0 2px,transparent 3px),radial-gradient(circle at 7% 65%,var(--sst-demo-line,#ead7bd) 0 2px,transparent 3px),radial-gradient(circle at 92% 79%,var(--sst-demo-line,#ead7bd) 0 4px,transparent 5px);opacity:.65}
.sst-demo__result-decoration:before,.sst-demo__result-decoration:after{content:"";position:absolute;top:38px;right:33px;width:6px;height:17px;background:var(--sst-demo-accent,#e95824);border-radius:3px;transform:rotate(24deg);opacity:.3}
.sst-demo__result-decoration:after{top:auto;right:auto;bottom:45px;left:27px;width:14px;height:5px;transform:rotate(-18deg)}
.sst-demo__result-emblem{position:relative;display:grid;place-items:center;width:58px;height:58px;margin-bottom:11px;border:1px solid var(--sst-demo-line,#ead7bd);border-radius:19px;background:var(--sst-demo-paper,#fffaf1);color:var(--sst-demo-accent,#e95824);box-shadow:3px 4px 0 var(--sst-demo-line,#ead7bd);transform:rotate(-5deg)}
.sst-demo__result-emblem svg{width:34px;height:34px}
.sst-demo__result--birthday .sst-demo__result-emblem{transform:rotate(5deg)}
.sst-demo__result--pregnancy .sst-demo__result-emblem,.sst-demo__result--birth_announcement .sst-demo__result-emblem{border-radius:50% 50% 18px 18px;transform:rotate(-4deg)}
.sst-demo__variant .sst-demo__result--trip{border-style:dashed;border-radius:10px 24px 24px 10px}
.sst-demo__result--trip .sst-demo__detail{border-style:dashed}
.sst-demo__result--love .sst-demo__result-emblem{border-radius:50%;transform:rotate(-6deg)}
.sst-demo__variant .sst-demo__result--award{border-width:3px;border-style:double}
.sst-demo__result--award .sst-demo__result-emblem{border-radius:50%;transform:rotate(0deg)}
.sst-demo__result--capsule .sst-demo__detail{border-bottom-width:3px}
.sst-demo__variant .sst-demo__result .sst-demo__eyebrow{color:var(--sst-demo-ink,#243340)}
.sst-demo__variant[data-demo-mood=luxury] .sst-demo__result h3{font-weight:650;letter-spacing:-.015em}
.sst-demo__outcome{border-color:#eed6b9;background:#fff8e9}
.sst-demo__outcome p{color:#6b716e}
.sst-demo__outcome a{color:#a43e19;font-weight:750}
.sst-demo__outcome a:hover{text-underline-offset:3px}
.sst-demo[data-state=running] .sst-demo__email:not([hidden]) .sst-demo__email-mark,.sst-demo[data-state=running] .sst-demo__link:not([hidden]) .sst-demo__link-mark,.sst-demo[data-state=running] .sst-demo__result:not([hidden]) .sst-demo__result-emblem{animation:sstDemoSealIn .65s ease-out both}
@keyframes sstDemoSealIn{0%{opacity:0;transform:translateY(7px) rotate(-13deg)}70%{opacity:1;transform:translateY(-2px) rotate(3deg)}100%{opacity:1;transform:translateY(0) rotate(-5deg)}}
@media(max-width:850px){.sst-demo{gap:18px}}
@media(max-width:450px){.sst-demo{border-radius:24px}.sst-demo__heading{font-size:27px}.sst-demo__selected{max-width:52%}.sst-demo__email h3{font-size:22px}.sst-demo__email-header{letter-spacing:.035em}.sst-demo__browser-address{padding-right:20px;padding-left:40px;font-size:12px}.sst-demo__variant .sst-demo__result{padding:24px 17px}.sst-demo__result h3{font-size:28px}.sst-demo__result-emblem{width:52px;height:52px}.sst-demo__result-emblem svg{width:31px;height:31px}}
@media(prefers-reduced-motion:reduce){.sst-demo *{animation:none!important;transition:none!important}}