*{box-sizing:border-box}body{margin:0;background:#eae9e4;color:#293332;font-family:Arial,sans-serif}button,a{font:inherit;-webkit-tap-highlight-color:transparent}button{cursor:pointer}main{max-width:430px;margin:auto;min-height:100svh;background:#f8f7f4;background-image:radial-gradient(#d9d9d0 0.6px,transparent .6px);background-size:15px 15px;display:flex;flex-direction:column;padding:24px 24px max(26px,env(safe-area-inset-bottom));position:relative}header{display:flex;justify-content:space-between;align-items:center;min-height:36px}header button{border:0;background:transparent;font-size:25px;color:#898d86;width:36px;height:36px}.count{font-size:11px;letter-spacing:2px;color:#91948c}.brand{width:62px;height:62px;object-fit:contain;margin:20px auto 4px;transform:rotate(-8deg)}h1{font-family:Georgia,serif;font-size:30px;line-height:1.12;letter-spacing:-.8px;margin:18px 0;text-align:center}p{color:#888b84;text-align:center;font-size:14px;line-height:1.5;margin:0 auto;max-width:310px}.body{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:330px}.actions{padding-top:28px;display:flex;flex-direction:column;align-items:center;gap:14px}.primary{border:0;background:#30332b;color:#f3e6b8;border-radius:99px;min-height:55px;padding:16px 32px;width:205px;font-size:15px;font-weight:700;text-align:center;text-decoration:none}.primary:disabled{opacity:.4;cursor:default}.secondary{border:0;background:none;color:#888b84;font-size:13px;padding:10px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.option{background:#fff;border:2px solid transparent;border-radius:20px;min-height:108px;padding:16px 8px;font-size:13px;font-weight:600;color:#30332b}.option[aria-pressed=true]{border-color:#30332b}.option span{display:block;font-size:29px;margin-bottom:10px}.hero{width:210px;height:240px;object-fit:contain;display:block;margin:12px auto;filter:drop-shadow(0 8px 8px #00000012);transform:rotate(-8deg)}.sticker{position:relative;margin:25px auto;width:260px}.sticker .hero{width:250px;height:280px}.sticker label{display:block;background:white;border-radius:8px;padding:6px 12px;width:max-content;max-width:100%;margin:-15px auto 0;position:relative;font-size:20px;font-weight:800;transform:rotate(-4deg)}.halo{background:radial-gradient(ellipse,#e8edb5 0%,transparent 68%)}.welcome .hero{height:290px;width:280px}.eyebrow{text-align:center;font-size:13px;color:#96998f;margin-top:20px}.camera{background:#292e29;background-image:none;color:#fff}.viewfinder{position:relative;border:1px solid #ffffff60;border-radius:26px;min-height:330px;margin:25px 0;display:grid;place-items:center;overflow:hidden}.viewfinder img{width:100%;height:330px;object-fit:contain}.viewfinder video{width:100%;height:330px;object-fit:cover}.camera p{color:#e3e5d9}.shutter{border:5px solid white;box-shadow:inset 0 0 0 4px #292e29;background:#fff;border-radius:50%;width:74px;height:74px}.result-actions{display:flex;justify-content:center;gap:26px;margin:35px 0}.result-actions button{width:62px;height:62px;background:white;border:0;border-radius:50%;font-size:25px;color:#909879}.result-actions button:nth-child(2){width:78px;height:78px;color:#a498d0}.note{font-size:11px;margin-top:14px}.preview-badge{font-size:10px;color:#999;text-align:center;letter-spacing:1px;margin-top:18px}button:focus-visible,a:focus-visible{outline:3px solid #9ca86f;outline-offset:4px}@media(max-height:700px){.hero,.welcome .hero{height:170px}.body{min-height:230px}.brand{width:45px;height:45px;margin-top:8px}.option{min-height:85px;padding:10px}.grid{gap:8px}h1{font-size:26px}}@media(prefers-reduced-motion:no-preference){.body{animation:enter .25s ease}@keyframes enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}
/* Viewport layout mirrors the reference's centered content and anchored pill CTA. */
[hidden] { display:none!important; }
html { height:100%; }
body { min-height:100%; }
main { width:100%; max-width:480px; min-height:100svh; min-height:100dvh; padding:calc(env(safe-area-inset-top,0px) + 12px) 20px calc(env(safe-area-inset-bottom,0px) + 22px); }
header { min-height:48px; flex-shrink:0; }
header button { width:48px; height:48px; font-size:32px; text-align:left; padding:8px; }
.count,.preview-badge { display:none; }
.body { min-height:0; padding:12px 0; }
h1 { font-size:clamp(29px,7.7vw,36px); line-height:1.12; margin:22px 0 18px; letter-spacing:-.6px; }
p { font-size:17px; line-height:1.4; max-width:340px; color:#777a76; }
.eyebrow { font-size:17px; }
.brand { width:68px; height:68px; margin:8px auto 0; }
.actions { flex-shrink:0; padding-top:22px; gap:12px; }
.primary { width:218px; min-height:58px; padding:19px 24px; font-size:17px; line-height:20px; border-radius:999px; }
.secondary { min-height:48px; padding:14px 12px; font-size:16px; }
.hero { height:clamp(160px,29svh,270px); width:min(65vw,260px); margin:14px auto; }
.welcome .hero { height:clamp(180px,32svh,300px); width:min(70vw,280px); }
.grid { gap:14px; margin-top:16px; }
.option { min-height:104px; padding:14px 8px; font-size:16px; line-height:1.25; border-radius:20px; }
.option span { font-size:30px; margin-bottom:9px; }
main[data-step="2"] .body,main[data-step="3"] .body { justify-content:flex-start; }
main[data-step="2"] h1,main[data-step="3"] h1 { margin:24px 0; font-size:29px; }
main[data-step="2"] .brand,main[data-step="3"] .brand { margin-top:0; }
main[data-step="4"] .hero { border-radius:26px; }
.sticker { max-width:90%; margin:20px auto; }
.sticker .hero { width:100%; height:clamp(180px,32svh,300px); }
.sticker label { font-size:24px; line-height:1.15; padding:5px 10px; }
.note { font-size:16px; }
.result-actions { align-items:center; margin:28px 0 6px; }
.result-actions button { width:64px; height:64px; font-size:28px; }
.result-actions button:nth-child(2) { width:80px; height:80px; }
/* Camera is a viewport-sized surface, including on wide screens. */
main.camera { position:fixed; inset:0; width:100%; height:100svh; height:100dvh; min-height:0; max-width:none; padding:0; overflow:hidden; background:#161916; isolation:isolate; }
.camera header { position:absolute; inset:0 0 auto; padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 12px; z-index:4; background:linear-gradient(#0008,transparent); }
.camera header button { border-radius:50%; color:#fff; background:#0005; text-align:center; }
.camera .body { position:absolute; inset:0; padding:0; display:block; }
.camera .viewfinder { position:absolute; inset:0; border:0; border-radius:0; margin:0; min-height:0; background:#161916; }
.camera .viewfinder video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.camera #camera-status { z-index:2; position:relative; max-width:300px; padding:24px; border-radius:24px; background:#0008; color:#fff; font-size:17px; }
.camera-guide { position:absolute; width:min(74vw,440px); height:48%; top:23%; left:50%; transform:translateX(-50%); pointer-events:none; }
.camera-guide i { position:absolute; width:34px; height:34px; border:3px solid #fff9; }
.camera-guide i:nth-child(1) { top:0; left:0; border-right:0; border-bottom:0; border-top-left-radius:18px; }
.camera-guide i:nth-child(2) { top:0; right:0; border-left:0; border-bottom:0; border-top-right-radius:18px; }
.camera-guide i:nth-child(3) { bottom:0; left:0; border-right:0; border-top:0; border-bottom-left-radius:18px; }
.camera-guide i:nth-child(4) { bottom:0; right:0; border-left:0; border-top:0; border-bottom-right-radius:18px; }
.camera-instruction { position:absolute; bottom:calc(env(safe-area-inset-bottom,0px) + 142px); left:20px; right:20px; color:white!important; text-shadow:0 1px 8px #000; background:#0004; padding:10px 16px; border-radius:99px; font-size:16px; }
.camera .actions { position:absolute; bottom:0; left:0; right:0; z-index:3; padding:24px 26px calc(env(safe-area-inset-bottom,0px) + 26px); display:grid; grid-template-columns:1fr 84px 1fr; justify-items:center; align-items:center; background:linear-gradient(transparent,#0009); }
.shutter { width:84px; height:84px; border:4px solid #fff; background:#fff; box-shadow:inset 0 0 0 5px #333; }
.shutter:disabled { opacity:.4; }
.gallery-button,.camera-retry { width:52px; height:52px; border-radius:50%; background:#ffffff22; border:1px solid #ffffff55; color:#fff; display:grid; place-items:center; font-size:28px; }
.gallery-button svg { width:26px; height:26px; }
@media(max-height:740px) { main { padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px); } .body{padding:0;} h1{margin:16px 0;} .hero,.welcome .hero{height:23svh;} .brand{width:52px;height:52px;} .option{min-height:88px;padding:10px 6px;} .option span{font-size:26px;margin-bottom:5px;} .grid{gap:10px;margin-top:8px;} main[data-step="2"] h1,main[data-step="3"] h1{font-size:27px;margin:16px 0;} .actions{padding-top:14px;gap:6px;} }
@media(orientation:landscape) and (max-height:500px) { main:not(.camera) { height:auto;min-height:100dvh; } .camera-guide{height:60%;top:16%;width:40vw;} .camera .actions{left:auto;width:140px;height:100%;grid-template-columns:1fr;grid-template-rows:1fr 84px 1fr;padding:14px;background:linear-gradient(90deg,transparent,#0008);} .camera-instruction{bottom:20px;right:155px;} }
.camera .body,main[data-step="2"] .body,main[data-step="3"] .body { animation:none; }
/* Capture -> soft focus while processing -> a crisp, lifted sticker. */
main[data-step="6"] .body { animation:none; }
.cutout-glow { position:absolute; inset:8%; border-radius:50%; background:radial-gradient(ellipse,#edf1c9 0%,#e4e7b94d 46%,transparent 72%); opacity:0; pointer-events:none; }
.sticker { isolation:isolate; }
.sticker .hero { position:relative; z-index:1; }
.sticker label { z-index:2; }
.is-processing .sticker .hero { animation:cutout-breathe 2.4s ease-in-out infinite; will-change:filter,transform; }
.is-processing .cutout-glow { opacity:1; animation:cutout-glow 2.4s ease-in-out infinite; }
.is-processing .sticker label { visibility:hidden; }
.is-processing .result-actions { visibility:hidden; }
.cutout-status { min-height:48px; }
.is-processing .cutout-status::before { content:''; display:block; width:24px; height:24px; margin:0 auto 16px; border:2px solid #dcded3; border-top-color:#727c57; border-radius:50%; animation:cutout-spin 1s linear infinite; }
.is-revealing .sticker .hero { animation:sticker-arrive 850ms cubic-bezier(.22,1,.36,1) both; }
.is-revealing .cutout-glow { animation:sticker-halo 1.2s ease-out both; }
.is-revealing .sticker label { animation:sticker-label 500ms 300ms cubic-bezier(.22,1,.36,1) both; }
.is-revealing .result-actions { animation:sticker-controls 400ms 550ms ease-out both; }
@keyframes cutout-breathe { 0%,100% { filter:blur(5px) saturate(.8); transform:rotate(-7deg) scale(.94); opacity:.72; } 50% { filter:blur(11px) saturate(.65); transform:rotate(-4deg) scale(.97); opacity:.55; } }
@keyframes cutout-glow { 0%,100% { transform:scale(.9); opacity:.5; } 50% { transform:scale(1.13); opacity:1; } }
@keyframes cutout-spin { to { transform:rotate(360deg); } }
@keyframes sticker-arrive { 0% { filter:blur(12px) drop-shadow(0 0 0 #0000); transform:rotate(-4deg) scale(.86); opacity:.4; } 65% { filter:blur(0) drop-shadow(0 14px 12px #26301820); transform:rotate(-9deg) scale(1.035); opacity:1; } 100% { filter:blur(0) drop-shadow(0 10px 12px #26301820); transform:rotate(-8deg) scale(1); opacity:1; } }
@keyframes sticker-halo { 0% { opacity:.9; transform:scale(.85); } 60% { opacity:1; transform:scale(1.15); } 100% { opacity:.4; transform:scale(1); } }
@keyframes sticker-label { from { opacity:0; transform:translateY(12px) rotate(2deg) scale(.9); } to { opacity:1; transform:translateY(0) rotate(-4deg) scale(1); } }
@keyframes sticker-controls { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) { .is-processing .sticker .hero { animation:none; filter:blur(5px); opacity:.7; } .is-processing .cutout-glow,.is-processing .cutout-status::before,.is-revealing .sticker .hero,.is-revealing .cutout-glow,.is-revealing .sticker label,.is-revealing .result-actions { animation:none; } .is-revealing .cutout-glow { opacity:.4; } }
/* Upright identity and consistent line icons. */
.brand { transform:none; border-radius:18px; }
header button svg,.camera-retry svg { width:26px; height:26px; display:block; margin:auto; }
.result-actions button { display:grid; place-items:center; flex-shrink:0; padding:18px; }
.result-actions button svg { width:28px; height:28px; }
.result-actions button:nth-child(2) svg { width:34px; height:34px; }
.option span { display:flex; justify-content:center; align-items:center; height:38px; }
.option span svg { width:30px; height:30px; }
.option span:has(.choice-garment) { height:72px; }
.choice-garment { width:82px; height:76px; object-fit:contain; filter:drop-shadow(0 3px 3px #0001); }
.welcome .body { position:relative; min-height:390px; }
.welcome-brand { position:relative; z-index:2; text-align:center; margin:auto; padding:24px 0; }
.welcome-brand .brand { width:82px; height:82px; display:block; margin:0 auto 20px; border-radius:22px; }
.welcome-brand h1 { font-size:46px; margin:5px 0 18px; }
.welcome-brand p { font-size:18px; }
.welcome-brand .eyebrow { margin:0; }
.welcome-collage { position:absolute; inset:-35px -20px -10px; pointer-events:none; overflow:hidden; }
.float-piece { position:absolute; width:150px; height:170px; object-fit:contain; filter:drop-shadow(0 8px 5px #312b211c); animation:wardrobe-float 6s ease-in-out infinite; }
.piece-blouse { top:0; left:-35px; --tilt:-18deg; }
.piece-bag { top:12px; right:-40px; --tilt:18deg; animation-delay:-2s; }
.piece-hoodie { bottom:-10px; left:-43px; --tilt:13deg; animation-delay:-3s; }
.piece-flats { bottom:-5px; right:-35px; --tilt:-18deg; animation-delay:-1s; }
@keyframes wardrobe-float { 0%,100%{transform:translateY(0) rotate(var(--tilt));}50%{transform:translateY(-12px) rotate(calc(var(--tilt) + 5deg));} }
.sticker-name { display:flex!important; align-items:center; justify-content:center; gap:6px; max-width:100%; background:white; transform:rotate(-4deg); }
.sticker-name input { font:800 22px/1.2 Arial,sans-serif; color:#253330; background:transparent; border:0; border-bottom:1px dashed #a5aea3; border-radius:0; width:190px; max-width:calc(100% - 24px); padding:4px 0; text-align:center; min-height:40px; }
.sticker-name svg { width:17px; height:17px; flex-shrink:0; color:#788375; }
.sticker-name input:focus { outline:0; border-color:#3e5140; }
.sticker-name:focus-within { box-shadow:0 0 0 3px #ccd9b6; }
.is-processing .sticker-name { visibility:hidden; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.is-revealing .sticker .hero { opacity:1; }
@media(max-height:740px) { .welcome .body{min-height:310px;} .float-piece{width:120px;height:130px;} .welcome-brand .brand{width:66px;height:66px;margin-bottom:12px;} .welcome-brand h1{font-size:40px;} .piece-hoodie,.piece-flats{bottom:0;} .option span:has(.choice-garment){height:58px;} .choice-garment{height:60px;} }
@media(prefers-reduced-motion:reduce) { .float-piece{animation:none;transform:rotate(var(--tilt));} }
/* Keep the decoded image on its own stable layer; animate the wrapper instead. */
.is-revealing .sticker .hero { animation:none; opacity:1; visibility:visible; filter:drop-shadow(0 10px 12px #26301820); will-change:auto; }
.is-revealing .sticker { animation:sticker-settle 850ms cubic-bezier(.22,1,.36,1); }
@keyframes sticker-settle { from { transform:translateY(12px) scale(.9); } 65% { transform:translateY(-3px) scale(1.025); } to { transform:none; } }
main:not(.is-processing) .sticker .hero { opacity:1; visibility:visible; will-change:auto; }
@media(prefers-reduced-motion:reduce) { .is-revealing .sticker { animation:none; } }
header .sound-toggle { width:48px; height:48px; padding:12px; color:#798074; display:grid; place-items:center; border-radius:50%; }
header .sound-toggle svg { width:22px; height:22px; }
.camera header .sound-toggle { color:white; }
.primary:active { transform:scale(.97); }
@media(prefers-reduced-motion:reduce) { .primary:active { transform:none; } }
/* A small, readable product demonstration inside an upright phone. */
main[data-step="1"] .body { justify-content:center; gap:0; }
main[data-step="1"] .brand { display:none; }
main[data-step="1"] h1 { margin:0 0 24px; font-size:32px; }
main[data-step="1"] p { margin-top:22px; font-size:16px; }
.phone-story { width:218px; height:360px; position:relative; margin:0 auto; flex-shrink:0; }
.phone-frame { position:absolute; inset:0; border:6px solid #30332e; border-radius:36px; background:#faf9f5; box-shadow:0 16px 30px #30332e18,inset 0 0 0 2px #e1e2d9; padding:38px 12px 16px; overflow:hidden; }
.phone-island { position:absolute; top:9px; left:50%; transform:translateX(-50%); width:68px; height:17px; background:#30332e; border-radius:20px; }
.phone-heading { font-size:15px; font-weight:700; display:flex; align-items:center; justify-content:space-between; padding:4px 2px 10px; color:#303a30; }
.phone-heading b { font-size:22px; line-height:1; font-weight:400; }
.phone-stage { height:180px; border-radius:18px; background:#edeee5; position:relative; overflow:hidden; }
.phone-stage img { position:absolute; width:100%; height:100%; object-fit:contain; inset:0; }
.phone-original { animation:phone-photo 7s ease-in-out infinite; }
.phone-cutout { animation:phone-sticker 7s ease-in-out infinite; filter:drop-shadow(0 6px 4px #0002); }
.phone-focus { position:absolute; inset:15px; border:1px solid #ffffffc0; border-radius:10px; z-index:1; animation:phone-photo 7s ease-in-out infinite; }
.phone-item-name { position:absolute; bottom:12px; left:50%; transform:translateX(-50%) rotate(-4deg); background:#fff; padding:4px 8px; font-weight:750; font-size:13px; color:#29382d; white-space:nowrap; border-radius:5px; animation:phone-label 7s ease-in-out infinite; }
.phone-collection { margin-top:12px; display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.phone-collection img { width:100%; height:62px; object-fit:contain; background:#f0efe7; border-radius:10px; }
.phone-home { position:absolute; height:4px; width:64px; border-radius:4px; background:#30332e; bottom:8px; left:50%; transform:translateX(-50%); }
.phone-flash { position:absolute; inset:0; background:radial-gradient(ellipse,#e4edb9aa,transparent 70%); opacity:0; animation:phone-flash 7s ease-in-out infinite; pointer-events:none; }
.phone-float-tag { position:absolute; right:-42px; bottom:83px; display:flex; align-items:center; gap:5px; background:#e6edcf; color:#49563b; box-shadow:0 5px 15px #30332e15; padding:10px 12px; border:3px solid #fff; border-radius:12px; transform:rotate(-6deg); font-size:14px; font-weight:650; animation:phone-label 7s ease-in-out infinite; }
.phone-float-tag svg { width:18px; height:18px; }
@keyframes phone-photo { 0%,20%{opacity:1;filter:blur(0);} 35%{opacity:.65;filter:blur(6px);} 47%,90%{opacity:0;filter:blur(9px);} 100%{opacity:1;filter:blur(0);} }
@keyframes phone-sticker { 0%,25%{opacity:0;transform:scale(.85);filter:blur(8px);} 48%,85%{opacity:1;transform:scale(.92) rotate(-7deg);filter:blur(0) drop-shadow(0 6px 4px #0002);} 100%{opacity:0;transform:scale(.85);filter:blur(6px);} }
@keyframes phone-label { 0%,35%{opacity:0;} 52%,85%{opacity:1;} 100%{opacity:0;} }
@keyframes phone-flash { 0%,25%,65%,100%{opacity:0;} 42%{opacity:1;} }
.choice-art { width:110px; height:76px; position:relative; }
.option span:has(.choice-art) { height:76px; }
.paired img { position:absolute; width:70px; height:76px; object-fit:contain; }
.paired img:first-child { left:0; transform:rotate(-10deg); }
.paired img:last-child { right:0; transform:rotate(10deg); }
.explore-wardrobe svg { width:100%!important; height:100%!important; }
.explore-wardrobe img { position:absolute; width:37px; height:48px; top:22px; object-fit:contain; }
.explore-wardrobe img:nth-child(2) { left:13px; }
.explore-wardrobe img:nth-child(3) { right:13px; }
@media(max-height:740px) { main[data-step="1"] h1{font-size:27px;margin-bottom:16px;} main[data-step="1"] p{margin-top:16px;} .phone-story{width:180px;height:294px;} .phone-frame{border-width:5px;border-radius:30px;padding:30px 10px 14px;} .phone-island{height:14px;width:58px;top:7px;} .phone-heading{font-size:13px;padding-bottom:6px;} .phone-stage{height:140px;} .phone-collection{margin-top:8px;} .phone-collection img{height:48px;} .phone-float-tag{right:-40px;bottom:67px;font-size:12px;padding:8px;} .choice-art{height:60px;width:96px;} .option span:has(.choice-art){height:60px;} .paired img{height:60px;width:63px;} .explore-wardrobe img{height:38px;width:30px;top:17px;} }
@media(prefers-reduced-motion:reduce) { .phone-original,.phone-focus,.phone-cutout,.phone-item-name,.phone-flash,.phone-float-tag{animation:none;} .phone-original,.phone-focus,.phone-flash{opacity:0;} .phone-cutout{opacity:1;transform:scale(.92) rotate(-7deg);} .phone-item-name,.phone-float-tag{opacity:1;} }
/* Device scene: one fixed physical ratio, with independently timed screen states. */
main[data-step="1"] .body { justify-content:center; padding:0; }
main[data-step="1"] h1 { font-size:clamp(27px,7.3vw,32px); line-height:1.12; letter-spacing:-.7px; margin:28px 0 12px; }
main[data-step="1"] p.intro-powered { margin:0; font-size:15px; color:#8b8b88; }
.intro-powered span { display:inline-block; background:linear-gradient(100deg,#c4b1ed,#efb9c0,#f3d68c); color:#fff; font-size:13px; font-weight:700; padding:2px 7px; border-radius:7px; }
.device-demo { --device-h:clamp(280px,49svh,440px); height:var(--device-h); width:calc(var(--device-h) * .46153846); position:relative; flex:none; margin:0 auto; }
.device-chassis { position:absolute; inset:0; padding:4px; border:1px solid #776e60; border-radius:calc(var(--device-h) * .091); background:linear-gradient(105deg,#e7dfca 0%,#4d4941 8%,#1c1b1a 20%,#292725 77%,#b2a78f 94%,#f5edda 100%); box-shadow:inset 0 0 0 1px #cec4ad,0 2px 3px #0003; }
.device-screen { position:absolute; inset:5px; border:2px solid #10100f; border-radius:calc(var(--device-h) * .078); overflow:hidden; isolation:isolate; background:#f8f7f4; }
.device-side { position:absolute; width:2px; background:linear-gradient(90deg,#e0d6bf,#61584a); border-radius:2px; }
.side-left { left:-1px; top:19%; height:12%; box-shadow:0 23px 0 #817967; }
.side-right { right:-1px; top:28%; height:14%; }
.device-island { position:absolute; z-index:7; top:2%; left:50%; transform:translateX(-50%); width:29%; height:4.1%; border-radius:30px; background:#080808; }
.device-island i { position:absolute; right:8%; top:31%; width:8%; aspect-ratio:1; background:radial-gradient(circle at 40% 40%,#233548,#080a0d 65%); border:1px solid #12151a; border-radius:50%; }
.device-status { position:absolute; top:2.7%; left:9%; right:8%; z-index:6; display:flex; align-items:center; justify-content:space-between; color:#141414; font:600 calc(var(--device-h) * .019)/1 Arial,sans-serif; }
.device-indicators { width:24%; }
.device-indicators svg { display:block; width:100%; }
.device-date { position:absolute; top:12%; left:7%; font:calc(var(--device-h) * .03)/1 Georgia,serif; color:#27332f; z-index:4; }
.device-home { position:absolute; z-index:8; width:34%; height:3px; background:#191919; bottom:1.2%; left:33%; border-radius:9px; }
.device-camera-scene { position:absolute; inset:0; background:#e5ded1; animation:device-camera 8s ease-in-out infinite; }
.device-camera-scene>img { width:100%; height:82%; object-fit:cover; object-position:50% 45%; display:block; }
.device-focus { position:absolute; width:46%; height:30%; border:1px solid #ccb34e; border-radius:5px; top:29%; left:27%; animation:device-focus 8s ease-in-out infinite; }
.device-camera-tray { position:absolute; bottom:0; left:0; right:0; height:24%; border-radius:22px 22px 0 0; background:#f8f7f4; display:flex; align-items:center; justify-content:center; }
.device-shutter { width:21%; aspect-ratio:1; border:2px solid #d7e89e; outline:3px solid #fff; outline-offset:2px; border-radius:50%; background:white; animation:device-shutter 8s ease-in-out infinite; }
.device-gallery { position:absolute; right:15%; width:12%; color:#b8b8b0; }
.device-gallery svg { width:100%; display:block; }
.device-result-scene { position:absolute; inset:0; background:#f8f7f4 radial-gradient(#d9d9d0 .5px,transparent .5px); background-size:8px 8px; animation:device-result 8s ease-in-out infinite; }
.device-result-item { position:absolute; width:66%; height:38%; left:17%; top:20%; object-fit:contain; animation:device-extract 8s cubic-bezier(.22,1,.36,1) infinite; filter:drop-shadow(0 4px 3px #3332); }
.device-aura { position:absolute; width:100%; height:55%; top:12%; background:radial-gradient(ellipse,#efefb7bb,transparent 68%); animation:device-aura 8s ease-in-out infinite; }
.device-result-name { position:absolute; top:53%; left:50%; transform:translateX(-50%) rotate(-4deg); font:bold calc(var(--device-h) * .028)/1.2 Arial,sans-serif; background:#fff; color:#26352d; white-space:nowrap; padding:2px 5px; border-radius:3px; animation:device-details 8s ease-in-out infinite; }
.device-result-buttons { position:absolute; top:65%; left:16%; right:16%; display:flex; gap:12%; align-items:center; justify-content:center; animation:device-details 8s ease-in-out infinite; }
.device-result-buttons i { display:grid; place-items:center; width:28%; aspect-ratio:1; background:#fff; border-radius:50%; color:#bbbdb6; }
.device-result-buttons i:nth-child(2) { width:35%; color:#b2a6d9; }
.device-result-buttons svg { width:48%; height:48%; }
.device-edit-note { position:absolute; left:8%; right:8%; top:82%; font:calc(var(--device-h) * .017)/1.2 Arial,sans-serif; color:#b1b1a8; display:flex; align-items:center; justify-content:center; gap:4px; animation:device-details 8s ease-in-out infinite; }
.device-edit-note svg { width:10px; }
.device-flash { position:absolute; inset:0; z-index:5; background:white; pointer-events:none; animation:device-flash 8s linear infinite; }
@keyframes device-camera { 0%,25%{opacity:1;filter:blur(0);} 37%{opacity:.9;filter:blur(9px);} 46%,92%{opacity:0;filter:blur(12px);} 100%{opacity:1;filter:blur(0);} }
@keyframes device-focus { 0%,8%{transform:scale(1.12);opacity:.3;} 15%,29%{transform:scale(1);opacity:1;} 40%,100%{opacity:0;} }
@keyframes device-shutter { 0%,24%,34%,100%{transform:scale(1);} 28%{transform:scale(.78);} }
@keyframes device-result { 0%,30%{opacity:0;} 46%,92%{opacity:1;} 100%{opacity:0;} }
@keyframes device-extract { 0%,33%{opacity:0;transform:translateY(25%) scale(1.4);filter:blur(8px);} 50%{opacity:1;transform:translateY(-3%) scale(1.06) rotate(-5deg);filter:blur(0) drop-shadow(0 4px 3px #3332);} 59%,90%{opacity:1;transform:translateY(0) scale(1) rotate(-5deg);filter:blur(0) drop-shadow(0 4px 3px #3332);} 100%{opacity:0;transform:scale(.95);} }
@keyframes device-details { 0%,45%{opacity:0;} 58%,90%{opacity:1;} 100%{opacity:0;} }
@keyframes device-aura { 0%,30%{opacity:0;transform:scale(.7);} 45%,65%{opacity:1;transform:scale(1.05);} 90%{opacity:.5;transform:scale(1);} 100%{opacity:0;} }
@keyframes device-flash { 0%,26%,33%,100%{opacity:0;} 28%{opacity:.95;} }
@media(max-height:740px) { .device-demo{--device-h:clamp(230px,46svh,340px);} main[data-step="1"] h1{font-size:27px;margin:20px 0 10px;} main[data-step="1"] p.intro-powered{font-size:14px;} }
@media(prefers-reduced-motion:reduce) { .device-demo *{animation:none!important;} .device-camera-scene,.device-flash{opacity:0;} .device-result-scene,.device-result-item,.device-result-name,.device-result-buttons,.device-edit-note{opacity:1;} .device-result-item{transform:rotate(-5deg);} }
/* Shorter device, and one shared phase clock keeps the sticker and its name together. */
.device-demo { --device-h:clamp(265px,44svh,380px); width:calc(var(--device-h) * .5); }
.device-demo * { animation:none!important; }
.device-camera-scene { opacity:1; filter:none; transition:opacity .55s ease,filter .65s ease; }
.device-photo-set { position:absolute; inset:0 0 21%; overflow:hidden; background:linear-gradient(90deg,#bfb3a137,#fff5 40%,#94857222),linear-gradient(#d5c7b6 0%,#e9dfd1 82%,#9c8064 82%,#c6a685 100%); }
.device-photo-set::before { content:''; position:absolute; width:80%; height:70%; left:9%; top:18%; background:radial-gradient(ellipse,#685c4b3d,transparent 68%); transform:rotate(-5deg); }
.device-photo-set img { position:absolute; top:18%; left:0; width:100%; height:82%; object-fit:contain; object-position:center; mix-blend-mode:multiply; filter:drop-shadow(3px 8px 5px #5b4c3c35); }
.room-rail { position:absolute; left:0; right:0; top:14%; height:3px; background:linear-gradient(#5e5143,#c5b49a,#78644f); box-shadow:0 2px 2px #0002; }
.room-hanger { position:absolute; width:65%; height:28%; top:13%; left:17.5%; }
.device-focus { opacity:0; transform:scale(1.14); transition:opacity .25s,transform .4s; }
.device-result-scene { opacity:0; transition:opacity .65s ease; }
.device-result-item { opacity:1!important; visibility:visible!important; width:76%; height:43%; left:12%; top:18%; filter:drop-shadow(0 7px 5px #38433440); transform:translateY(10px) scale(.92) rotate(-5deg); transition:transform .7s cubic-bezier(.22,1,.36,1); }
.device-result-name { top:57%; opacity:1; }
.device-result-buttons { top:68%; opacity:1; }
.device-edit-note { opacity:1; }
.device-aura { opacity:.7; }
.device-flash { opacity:0; transition:opacity .14s; }
.device-shutter { transform:scale(1); transition:transform .15s; }
.device-demo[data-phase="focus"] .device-focus { opacity:1; transform:scale(1); }
.device-demo[data-phase="flash"] .device-flash { opacity:1; }
.device-demo[data-phase="flash"] .device-shutter { transform:scale(.8); }
.device-demo[data-phase="extracting"] .device-camera-scene { filter:blur(10px); opacity:.35; }
.device-demo[data-phase="result"] .device-camera-scene { opacity:0; filter:blur(10px); }
.device-demo[data-phase="result"] .device-result-scene { opacity:1; }
.device-demo[data-phase="result"] .device-result-item { transform:translateY(0) scale(1) rotate(-5deg); }
.sticker .hero { filter:drop-shadow(0 8px 7px #27392c35); }
@media(max-height:740px) { .device-demo{--device-h:clamp(240px,43svh,320px);} }
@media(prefers-reduced-motion:reduce) { .device-demo *{transition:none!important;} }
/* Result details are one compact group; collection follows confirmation. */
main[data-step="6"] .body { justify-content:flex-start; padding-top:12px; }
main[data-step="6"] .eyebrow { margin:6px 0 0; text-align:left; font-family:Georgia,serif; font-size:28px; color:#293332; }
main[data-step="6"] .sticker { margin:22px auto 8px; width:min(260px,80vw); }
main[data-step="6"] .sticker .hero { height:clamp(170px,29svh,255px); margin:0 auto 0; }
main[data-step="6"] .sticker-name { margin:-8px auto 0; }
main[data-step="6"] .cutout-status { font-size:15px; min-height:0; margin:10px auto 0; max-width:290px; }
main[data-step="6"] .result-actions { margin:24px 0 0; gap:26px; }
main[data-step="6"] .actions { margin-top:auto; padding-top:18px; }
main[data-step="7"] .body { justify-content:flex-start; padding-top:8px; }
.collection-heading h1 { text-align:left; font-size:32px; font-weight:400; margin:0 0 6px; }
.collection-heading p { text-align:left; margin:0; font-size:16px; }
.sticker-collection { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:38px; }
.saved-sticker { border:0; background:none; padding:0; color:#243b41; display:flex; align-items:center; flex-direction:column; max-width:165px; }
.saved-sticker img { width:130px; height:150px; object-fit:contain; filter:drop-shadow(0 5px 5px #2c3b292a); transform:rotate(-5deg); }
.saved-sticker span { background:#fff; border-radius:10px; padding:4px 9px; font-size:21px; font-weight:800; line-height:1.15; margin-top:-9px; position:relative; box-shadow:0 4px 8px #29332810; transform:rotate(-4deg); overflow-wrap:anywhere; }
.collection-camera { width:76px; height:76px; display:grid; place-items:center; border:6px solid #fff; border-radius:50%; background:#e2e9cb; box-shadow:0 6px 15px #29332814; color:#647447; }
.collection-camera svg { width:33px; height:33px; }
.account-save { color:#697061; font-size:15px; text-align:center; }
main[data-step="8"] .body { justify-content:flex-start; padding-top:25px; }
.guest-home-heading { text-align:center; }
.guest-home-heading .brand { display:block; width:60px; height:60px; margin:0 auto 20px; }
.guest-home-heading h1 { font-size:32px; margin:0 0 12px; }
.guest-home-heading p { font-size:16px; }
.home-collection-card { width:100%; margin-top:36px; border:0; border-radius:28px; background:#dfe5ce; padding:24px; text-align:left; color:#2f3a2c; }
.home-collection-card strong { font:26px Georgia,serif; display:block; margin-bottom:6px; }
.home-collection-card>span { display:block; font-size:15px; }
.home-collection-card img { display:block; width:95px; height:120px; object-fit:contain; margin-top:15px; filter:drop-shadow(0 4px 4px #0002); }
@media(max-height:740px) { main[data-step="6"] .sticker{margin-top:16px;} main[data-step="6"] .sticker .hero{height:24svh;} main[data-step="6"] .result-actions{margin-top:18px;} .guest-home-heading .brand{width:48px;height:48px;margin-bottom:12px;} .home-collection-card{margin-top:20px;padding:20px;} }
/* Youthfin's olive and warm paper palette, including supporting accents. */
.intro-powered span { background:#e3e9d3; color:#586747; border:1px solid #d4ddbd; }
.result-action { display:flex; flex-direction:column; align-items:center; gap:10px; min-width:72px; }
.result-actions { align-items:flex-start; }
.result-action button { width:64px; height:64px; color:#8d9682; background:#fff; padding:18px; }
.result-action button svg { width:28px; height:28px; }
.result-action.confirm-action button { width:80px; height:80px; background:#30332b; color:#f3e6b8; box-shadow:0 5px 12px #30332b20; margin-top:-8px; margin-bottom:-8px; }
.result-action.confirm-action button svg { width:32px; height:32px; stroke-width:2.4; }
.action-caption { font-size:13px; line-height:1.3; color:#7c8275; }
.confirm-action .action-caption { color:#39432f; font-weight:650; }
.device-result-buttons i:nth-child(2) { color:#f3e6b8; background:#30332b; }
.collection-camera { position:relative; width:88px; height:88px; border:5px solid #fff; background:conic-gradient(from -35deg,#bdc99e,#e4e9d1,#d1c3a8,#b7c59c,#bdc99e); box-shadow:0 8px 16px #30332b20,inset 0 0 0 1px #aab99160; transform:rotate(-8deg); }
.camera-iris { display:grid; place-items:center; width:60px; height:60px; border:1px solid #ffffffb0; border-radius:50%; color:#566643; background:#f6f6e6c9; }
.collection-camera .camera-iris svg { width:48px; height:48px; }
.camera-add { position:absolute; right:-5px; top:-3px; width:26px; height:26px; background:#30332b; color:#f3e6b8; border:3px solid #fff; border-radius:50%; font-size:20px; line-height:20px; }
.collection-camera:active { transform:rotate(-8deg) scale(.95); }
@media(prefers-reduced-motion:reduce) { .collection-camera:active { transform:rotate(-8deg); } }
.device-photo-set { background:#d1c3b2; }
.device-photo-set::before { display:none; }
.device-photo-set img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; mix-blend-mode:normal; filter:none; }
.camera-caption { font-size:15px; color:#59654b; margin-top:2px; }
.collection-entry { position:relative; min-width:0; padding:6px 0 14px; }
.delete-sticker { position:absolute; top:0; right:0; width:36px; height:36px; display:grid; place-items:center; border:1px solid #e3e5da; border-radius:50%; background:#fff; color:#9a7d72; }
.delete-sticker svg { width:18px; height:18px; }
.sticker-collection { overflow:visible; padding-bottom:20px; }
main[data-step="7"] .body { flex:1; min-height:0; }
main[data-step="7"] { max-height:100dvh; }
main[data-step="7"] .sticker-collection { overflow-y:auto; flex:1; align-content:start; margin-top:24px; }
.home-thumbnails { display:flex; gap:6px; flex-wrap:wrap; }
.home-collection-card .home-thumbnails img { width:65px; height:86px; }
.collection-title-row { display:flex; align-items:center; gap:8px; }
.collection-title-row h1 { overflow-wrap:anywhere; min-width:0; }
.rename-collection { border:0; background:#eceee4; border-radius:50%; width:38px; height:38px; flex-shrink:0; padding:10px; color:#6d7a58; }
.rename-collection svg { width:18px; height:18px; }
.collection-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; }
.collection-tools button { background:#eeefe7; border:0; border-radius:99px; padding:9px 13px; font-size:14px; color:#52603f; min-height:40px; }
.collection-tools span { font-size:13px; color:#8a8f82; }
.collection-tools [data-bulk-delete] { color:#9a5a4b; }
.collection-tools button:disabled { opacity:.4; }
.saved-sticker { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.saved-sticker img { pointer-events:none; -webkit-user-drag:none; }
.saved-sticker.is-selected { background:#e6ecd8; border-radius:18px; outline:2px solid #6d8050; }
main[data-selecting="true"] .delete-sticker { display:none; }
.trash-drop { position:fixed; z-index:101; left:50%; bottom:24px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:190px; height:108px; border-radius:26px; border:2px dashed #ba8273; background:#fff8f3f5; color:#9a5b4d; box-shadow:0 8px 30px #30332b25; font-size:15px; }
.trash-drop span { font-size:32px; }
.trash-drop.is-over { background:#a56656; color:white; border-color:#a56656; }
.drag-ghost { position:fixed; z-index:102; transform:translate(-50%,-65%) rotate(-7deg) scale(1.1); pointer-events:none; opacity:.95; filter:drop-shadow(0 10px 12px #30332b30); }
.trash-drop span svg { display:block; width:32px; height:32px; }
main[data-step="7"] .body,main[data-step="8"] .body { animation:none; }