:root{
  --sidebar:52px;
  --panel:50vw;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.2,.8,.2,1);
  --blue:#3A83F7;
  --text:#171717;
  --muted:#686868;
  --line:#e9e9e9;
  --card-border:#D2D5DD;
  --card-size:clamp(126px,min(11.6vw,16.2vh),176px);
  --content-left:30px;
  --content-right:72px;
  --avatar-shadow:rgba(78,82,90,.30);
  --avatar-halo:rgba(78,82,90,.18);
  --ai-dot-color:rgba(185,189,198,.42);
  --ai-core-opacity:.94;
  --ai-blur-opacity:.24;
  --avatar-fill-gradient:linear-gradient(145deg,#ffffff 8%,#fbfbfb 48%,#f0f0f0 78%,#e7e7e7 100%);
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;color:var(--text);background:#fff;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button{font:inherit;color:inherit}
button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.app{width:100vw;height:100vh;display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr) minmax(620px,var(--panel));background:#fff;transition:grid-template-columns .56s var(--ease)}
.sidebar{z-index:8;background:#fcfcfc;overflow:hidden}
.sidebar img{display:block;width:52px;height:100%;object-fit:cover;object-position:top}

.preview{position:relative;min-width:0;overflow:hidden;background:#F5F5F7;isolation:isolate}
.preview.step7-preview-active{overflow:visible}
.bg-layer{position:absolute;inset:-3%;z-index:0;background-size:cover;background-position:center;background-repeat:no-repeat;will-change:opacity,transform,filter;transition:background-color .45s var(--ease)}
.bg-current{opacity:1}
.bg-next{z-index:1;opacity:0;transform:scale(1.02);filter:blur(12px)}
.ai-field{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.ai-dots{position:absolute;inset:-3%;will-change:transform,opacity;transform:translate3d(0,0,0)}
.ai-dots::before,.ai-dots::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,var(--ai-dot-color) 0 .82px,transparent .98px);background-size:7.4px 7.4px;background-position:center;transform:translateZ(0)}
.ai-dots::before{opacity:var(--ai-core-opacity);-webkit-mask-image:radial-gradient(ellipse 61% 53% at 50% 48%,rgba(0,0,0,.98) 0%,#000 34%,rgba(0,0,0,.92) 46%,rgba(0,0,0,.68) 59%,rgba(0,0,0,.28) 73%,transparent 88%);mask-image:radial-gradient(ellipse 61% 53% at 50% 48%,rgba(0,0,0,.98) 0%,#000 34%,rgba(0,0,0,.92) 46%,rgba(0,0,0,.68) 59%,rgba(0,0,0,.28) 73%,transparent 88%)}
.ai-dots::after{opacity:var(--ai-blur-opacity);filter:blur(1.35px);-webkit-mask-image:radial-gradient(ellipse 72% 63% at 50% 52%,rgba(0,0,0,.08) 0%,rgba(0,0,0,.18) 32%,rgba(0,0,0,.42) 52%,rgba(0,0,0,.22) 72%,transparent 94%);mask-image:radial-gradient(ellipse 72% 63% at 50% 52%,rgba(0,0,0,.08) 0%,rgba(0,0,0,.18) 32%,rgba(0,0,0,.42) 52%,rgba(0,0,0,.22) 72%,transparent 94%)}

.stella-stage{position:absolute;left:50%;top:50%;width:min(43vw,470px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:3;display:grid;place-items:center;animation:stageFloat 7.4s ease-in-out infinite;will-change:transform}
.stella-halo{position:absolute;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--avatar-halo) 0%,var(--avatar-halo) 30%,transparent 74%);filter:blur(18px);opacity:1;transform:scale(1.02);transition:background .42s var(--ease),filter .42s var(--ease)}
.stella{position:relative;width:72%;aspect-ratio:1;transform-origin:center;animation:stellaBreathe 5.8s ease-in-out infinite;will-change:transform}
.avatar-fill{position:absolute;inset:0;background:linear-gradient(135deg,#fff 8%,#f6f6f6 60%,#e2e2e2 100%);-webkit-mask:url('../assets/avatar/AVATAR.svg') center/contain no-repeat;mask:url('../assets/avatar/AVATAR.svg') center/contain no-repeat;filter:drop-shadow(0 0 32px var(--avatar-shadow)) drop-shadow(0 0 14px var(--avatar-shadow)) drop-shadow(0 0 2px rgba(255,255,255,.42));transition:filter .48s var(--ease);will-change:opacity,transform}
.avatar-fill-current{opacity:1}
.avatar-fill-next{opacity:0}
.layer-host{position:absolute;inset:0;pointer-events:none;z-index:5}
.stella-layer-item{position:absolute;display:block;height:auto;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(31,23,44,.14));will-change:transform,opacity}
.stella-face-cover{border-radius:999px;background:var(--avatar-fill-gradient);filter:drop-shadow(0 3px 4px rgba(255,255,255,.35))}
.eye-look-host{z-index:6}.eyebrow-host{z-index:7}.eye-accessory-host{z-index:8}.accessory-host{z-index:9}
@keyframes stageFloat{0%,100%{transform:translate(-50%,-50%) translateY(0) rotate(-.18deg)}50%{transform:translate(-50%,-50%) translateY(-7px) rotate(.42deg)}}
@keyframes stellaBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.011)}}

.config{position:relative;z-index:7;background:#fff;border-left:1px solid #e8e8e8;display:grid;grid-template-rows:56px 1fr 72px;min-width:0;transition:transform .56s var(--ease),opacity .44s ease}
.config-header{display:flex;align-items:center;justify-content:space-between;padding:0 22px 0 24px;border-bottom:1px solid #eaeaea;color:#5e5e5e;font-size:18px}
.icon-btn{border:0;background:transparent;padding:10px;cursor:pointer;border-radius:10px;transition:background .18s ease,transform .18s ease}
.icon-btn:hover{background:#f5f5f5}.icon-btn:active{transform:scale(.94)}.icon-btn img{display:block;width:16px;height:16px}
.config-body{position:relative;overflow:hidden;isolation:isolate}
.step{position:absolute;inset:0;padding:clamp(42px,5.3vh,58px) var(--content-right) 42px var(--content-left);overflow:hidden;transform:translateZ(0);will-change:transform,opacity,filter}
.step h2{margin:0;font-size:clamp(24px,1.55vw,27px);line-height:1.16;letter-spacing:-.015em;font-weight:700}
.subtitle{margin:8px 0 clamp(20px,2.7vh,28px);font-size:clamp(16px,1.1vw,19px);line-height:1.35;font-weight:400;color:#4e4e52}
.stella-link{display:inline-block;color:#3A83F7;font-weight:700;text-decoration-style:dotted;text-decoration-thickness:1.35px;text-underline-offset:3px}
.separator{height:1px;background:var(--line);margin-bottom:clamp(28px,4vh,44px)}
.section-title{font-size:clamp(18px,1.25vw,21px);font-weight:600;margin:0 0 clamp(24px,3.2vh,34px)}

.grid{display:grid;grid-template-columns:repeat(3,var(--card-size));grid-auto-rows:var(--card-size);gap:clamp(18px,2.6vh,28px) 24px;align-content:start;justify-content:start}
.grid.two-row-compact{gap:18px 24px}
.card,.look-card{position:relative;width:var(--card-size);height:var(--card-size);border-radius:16px;border:4px solid var(--card-border);overflow:hidden;background:#f4f6f8;cursor:pointer;padding:0;box-shadow:0 1px 0 rgba(255,255,255,.6) inset;transition:transform .2s var(--ease-soft),box-shadow .2s ease,filter .2s ease,opacity .26s ease,border-color .2s ease}
.card:hover,.look-card:hover{filter:brightness(1.015);transform:translateY(-2px)}
.card:active,.look-card:active{transform:scale(.978)}
.card.selected,.look-card.selected{border-color:var(--blue);box-shadow:0 1px 0 rgba(255,255,255,.35) inset}
.selection-group.has-selection .selectable:not(.selected){opacity:.46;filter:saturate(.82)}
.selection-group.has-selection .selectable:not(.selected):hover{opacity:.72}
.card.disabled,.look-card.disabled{opacity:.30;pointer-events:none}
.card>img.full-bleed{width:100%;height:100%;object-fit:cover;display:block}

.none-card{position:absolute;inset:0;background:url('../assets/backgrounds/BACKGROUND07 NONE.png') center/cover no-repeat;display:grid;place-items:center}
.none-card:after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.08)}
.none-card img{position:relative;z-index:1;width:38%;height:38%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(255,255,255,.35))}

.swatches{display:grid;grid-template-columns:repeat(4,78px);gap:40px 56px;align-items:start}
.swatch{width:78px;height:78px;border-radius:50%;border:4px solid #D7D8DD;padding:0;cursor:pointer;position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);transition:transform .2s var(--ease-soft),border-color .18s ease,opacity .25s ease,box-shadow .18s ease}
.swatch:hover{transform:scale(1.045)}.swatch:active{transform:scale(.965)}
.swatch.selected{border-color:var(--blue);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.swatches.has-selection .swatch:not(.selected){opacity:.72}
.swatches.has-selection .swatch:not(.selected):hover{opacity:.9}

.thumb-scene{position:absolute;inset:0;overflow:hidden;background:#F3F4F6}
.thumb-bg{position:absolute;inset:-3%;background-image:var(--thumb-bg);background-size:cover;background-position:center;background-color:#F3F4F6}
.thumb-bg.is-neutral{background-image:none;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.92) 0%,rgba(247,247,248,.98) 55%,rgba(238,239,241,1) 100%)}
.thumb-avatar{position:absolute;width:88%;height:88%;left:6%;top:27%;background:var(--thumb-avatar);-webkit-mask:url('../assets/avatar/AVATAR.svg') center/contain no-repeat;mask:url('../assets/avatar/AVATAR.svg') center/contain no-repeat;filter:drop-shadow(0 0 12px var(--thumb-shadow,rgba(55,42,75,.24))) drop-shadow(0 0 5px rgba(35,25,50,.10))}
.thumb-layer{position:absolute;height:auto;object-fit:contain;filter:drop-shadow(0 4px 5px rgba(28,20,38,.18))}
.thumb-face-cover{position:absolute;border-radius:999px;background:var(--thumb-avatar);filter:drop-shadow(0 2px 4px rgba(255,255,255,.34))}

.dual{display:grid;gap:clamp(28px,3.7vh,38px)}
.dual-section{transition:opacity .34s var(--ease),transform .4s var(--ease),filter .34s ease}
.dual-section.muted{opacity:.34;filter:saturate(.45);transform:translateY(3px);pointer-events:none}
.dual-section .separator{margin-bottom:clamp(26px,3.4vh,38px)}
.look-row{display:grid;grid-template-columns:repeat(2,var(--card-size));gap:24px}
.look-card{background:#f5f6f7}
.eye-accessory-grid{display:grid;grid-template-columns:repeat(3,var(--card-size));gap:24px}

.progress{position:absolute;right:18px;top:38%;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:4}
.progress button{width:7px;height:7px;padding:0;border:0;border-radius:999px;background:#D9DADF;cursor:pointer;transition:height .38s var(--ease),width .3s var(--ease),background .24s ease,opacity .24s ease;opacity:.92}
.progress button:hover{background:#b7bac4;opacity:1}
.progress button.active{width:7px;height:106px;background:#141414;opacity:1}

.config-footer{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:0 20px 0 18px;border-top:1px solid #f1f1f1;background:rgba(255,255,255,.96);z-index:5}
.btn{border:0;cursor:pointer;border-radius:999px;transition:transform .17s var(--ease-soft),background .17s ease,opacity .17s ease,filter .17s ease}
.btn:active{transform:scale(.97)}
.secondary{background:#f0f0f0;padding:10px 15px}.secondary:hover{background:#e8e8e8}
.primary{background:#111;color:#fff;padding:10px 16px 10px 18px;display:flex;gap:12px;align-items:center}.primary:hover{background:#242424}.primary img{width:15px;filter:brightness(0) invert(1)}
.primary.disabled{opacity:.35;pointer-events:none}

.reopen{position:absolute;right:24px;top:20px;z-index:8;background:rgba(255,255,255,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(0,0,0,.08);border-radius:999px;padding:10px 15px;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.07);transition:opacity .35s,transform .35s}
.reopen.hidden{opacity:0;transform:translateY(-8px);pointer-events:none}
.app.panel-closed{grid-template-columns:var(--sidebar) minmax(0,1fr) 0px}.app.panel-closed .config{transform:translateX(100%);opacity:0;pointer-events:none}

.modal-backdrop{position:fixed;inset:0;z-index:20;display:grid;place-items:center;background:rgba(18,18,18,.27);opacity:1;transition:opacity .48s var(--ease);isolation:isolate;cursor:default}
.modal-backdrop::before{content:"";position:absolute;inset:0;z-index:-1;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.05) 18%,rgba(0,0,0,.42) 55%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.05) 18%,rgba(0,0,0,.42) 55%,#000 100%)}
.modal-backdrop::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.015) 46%,rgba(20,20,30,.07) 100%)}
.intro-modal{position:relative;width:clamp(480px,30.3vw,620px);border-radius:25px;overflow:hidden;background:#fff;box-shadow:0 32px 100px rgba(0,0,0,.24);transform-origin:center;animation:modalIn .64s var(--ease);will-change:transform,opacity,filter}
.modal-close{position:absolute;right:13px;top:13px;z-index:5;width:29px;height:29px;border-radius:999px;border:1px solid rgba(0,0,0,.05);display:grid;place-items:center;background:rgba(255,255,255,.20);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);cursor:pointer;transition:background .18s ease,transform .18s ease}
.modal-close:hover{background:rgba(255,255,255,.44)}.modal-close:active{transform:scale(.92)}.modal-close img{width:11px;height:11px;opacity:.68}
.modal-art{height:clamp(190px,12vw,245px);background:url('../assets/ui/BG MODALE DEBUT.png') center/cover no-repeat;display:grid;place-items:center;position:relative;overflow:hidden}
.mini-app-icon{z-index:1;width:78px;height:78px;border-radius:20px;border:1px solid rgba(255,255,255,.58);background:rgba(255,255,255,.14);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 7px 22px rgba(83,106,176,.08)}
.mini-app-icon img{width:47px;height:47px;filter:drop-shadow(0 2px 5px rgba(82,99,155,.10))}
.modal-content{padding:22px 30px 24px}.title-row{display:flex;align-items:center;gap:9px}.title-row h1{font-size:22px;letter-spacing:-.02em;margin:0;font-weight:700}.beta{font-size:11px;background:#eeeaff;color:#9b87ff;padding:4px 7px;border-radius:7px;white-space:nowrap}.modal-content p{font-size:13px;line-height:1.38;color:#737373;margin:13px 0 18px;max-width:94%;font-weight:400}
.modal-actions{display:grid;grid-template-columns:1fr 1.55fr;gap:14px}.modal-actions button{height:38px;border-radius:999px;border:0;cursor:pointer;transition:transform .17s var(--ease-soft),background .17s ease}.modal-actions button:active{transform:scale(.975)}.later{background:transparent}.later:hover{background:#f6f6f6}.create{background:#000;color:#fff}.create:hover{background:#202020}
.modal-backdrop.closing{opacity:0;pointer-events:none}.modal-backdrop.closing .intro-modal{animation:modalOut .48s var(--ease) forwards}
@keyframes modalIn{0%{opacity:0;transform:scale(.945) translateY(7px);filter:blur(7px)}62%{opacity:1;transform:scale(1.008) translateY(-1px);filter:blur(0)}100%{opacity:1;transform:scale(1);filter:none}}
@keyframes modalOut{0%{opacity:1;transform:scale(1);filter:blur(0)}100%{opacity:0;transform:scale(.955) translateY(6px);filter:blur(6px)}}

@media(max-width:1320px){:root{--content-right:58px;--card-size:clamp(122px,min(11.2vw,15.7vh),158px)}.app{grid-template-columns:var(--sidebar) minmax(0,1fr) minmax(585px,50vw)}.grid,.eye-accessory-grid{gap:18px}.swatches{gap:34px 48px}.stella-stage{width:min(45vw,440px)}}
@media(max-height:820px){:root{--card-size:clamp(116px,15vh,136px)}.step{padding-top:36px}.separator{margin-bottom:24px}.dual{gap:22px}.subtitle{margin-bottom:18px}.grid{gap:16px 20px}.look-row,.eye-accessory-grid{gap:20px}.progress button.active{height:84px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ===== STELLA — steps 7 → 10 ===== */
.hidden{display:none!important}
.preview-hidden{opacity:0!important;pointer-events:none!important}
.site-preview-shell{position:absolute;top:-10;left:-10px;width:min(51vw,500px);aspect-ratio:1661/2048;height:auto;z-index:4;overflow:hidden;background:#fff;border-radius:0 0 22px 0;box-shadow:0 12px 32px rgba(27,26,39,.10);transform-origin:top left}
.site-preview-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;display:block; left: -18px}
.site-launcher-anchor{position:absolute;right:18px;bottom:18px;z-index:6;display:flex;align-items:flex-end;justify-content:flex-end}

.launcher-step .separator{margin-bottom:56px}
.launcher-choice-group{display:flex;flex-direction:column;gap:28px;width:100%}
.launcher-choice{height:92px;border:0;border-radius:46px;background:#f1f1f1;color:#151515;font-size:24px;font-weight:400;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:14px;transition:background .32s var(--ease),color .32s var(--ease),transform .18s var(--ease)}
.launcher-choice:hover{transform:translateY(-1px)}
.launcher-choice:active{transform:scale(.992)}
.launcher-choice.selected{background:#090909;color:#fff}
.launcher-check{width:34px;height:34px;border:2.5px solid #9299a8;border-radius:50%;display:grid;place-items:center;flex:0 0 34px;box-sizing:border-box;transition:border-color .28s var(--ease),background .28s var(--ease)}
.launcher-check-dot{width:18px;height:18px;border-radius:50%;background:transparent;transform:scale(.62);opacity:0;transition:background .28s var(--ease),transform .28s var(--ease),opacity .22s ease}
.launcher-choice.selected .launcher-check{border-color:#fff}
.launcher-choice.selected .launcher-check-dot{background:#fff;transform:scale(1);opacity:1}
.launcher-choice-label{line-height:1;transform:translateY(-1px)}

.stella-launcher{position:relative;border:1px solid rgba(255,255,255,.46);padding:0;overflow:hidden;cursor:pointer;display:flex;align-items:center;justify-content:center;background-size:cover;background-position:center;backdrop-filter:blur(18px) saturate(1.22);-webkit-backdrop-filter:blur(18px) saturate(1.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.58),inset 0 -1px 0 rgba(255,255,255,.16),0 9px 26px rgba(31,28,48,.16);transition:width .39s var(--ease),height .39s var(--ease),border-radius .39s var(--ease),padding .39s var(--ease),box-shadow .3s ease}
.stella-launcher::before{content:"";position:absolute;inset:-25%;background:radial-gradient(circle at 22% 18%,rgba(255,255,255,.65),transparent 24%),linear-gradient(110deg,rgba(255,255,255,.30),transparent 35%,rgba(255,255,255,.13) 62%,transparent 76%);filter:blur(2px);opacity:.82;animation:launcherLiquid 8s ease-in-out infinite alternate;pointer-events:none}
.stella-launcher::after{content:"";position:absolute;inset:1px;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);pointer-events:none}
@keyframes launcherLiquid{0%{transform:translate3d(-2%,0,0) rotate(-2deg) scale(1.03)}100%{transform:translate3d(3%,1%,0) rotate(2deg) scale(1.06)}}
.launcher-glass{position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.01) 47%,rgba(255,255,255,.14));pointer-events:none}
.stella-launcher.is-bubble{width:92px;height:92px;border-radius:50%;padding:10px}
.stella-launcher.is-pill{width:236px;height:92px;border-radius:46px;padding:8px 26px 8px 12px;justify-content:flex-start;gap:10px}
.launcher-stella{position:relative;z-index:2;display:block;flex:0 0 auto;transition:width .39s var(--ease),height .39s var(--ease),transform .39s var(--ease)}
.is-bubble .launcher-stella{width:74px;height:74px}
.is-pill .launcher-stella{width:70px;height:70px}
.launcher-label{position:relative;z-index:2;color:var(--launcher-text);font-size:24px;font-weight:700;white-space:nowrap;max-width:0;opacity:0;transform:translateX(-8px);transition:max-width .39s var(--ease),opacity .25s ease .1s,transform .39s var(--ease),color .3s ease}
.is-pill .launcher-label{max-width:110px;opacity:1;transform:translateX(0)}

.compact-stella{position:relative;width:100%;height:100%}
.compact-avatar{position:absolute;inset:3%;-webkit-mask:url('../assets/avatar/AVATAR.svg') center/contain no-repeat;mask:url('../assets/avatar/AVATAR.svg') center/contain no-repeat;filter:drop-shadow(0 0 5px rgba(0,0,0,.16))}
.compact-layer{position:absolute;height:auto;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.12))}
.compact-face-cover{position:absolute;border-radius:999px}

.showcase{position:relative;grid-column:2/-1;grid-row:1;overflow:hidden;background:#786cd1;z-index:20}
.showcase-bg{position:absolute;inset:-2%;background:url('../assets/backgrounds/BACKGROUND01.png') center/cover no-repeat;filter:saturate(.86) brightness(.80);transform:scale(1.04)}
.showcase-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(34,44,75,.20),rgba(83,50,120,.16) 54%,rgba(19,45,72,.18));}
.showcase-content{position:absolute;inset:0;z-index:2;color:#fff}
.showcase-copy{position:absolute;left:12.2%;top:10.2%;width:80%}
.showcase-title{font-size:54px;line-height:1.08;font-weight:400;letter-spacing:-.035em;white-space:pre-wrap}
.showcase-subtitle{margin-top:16px;font-size:34px;line-height:1.18;font-weight:400;letter-spacing:-.02em;white-space:pre-wrap;max-width:96%}
.showcase-stella-word{font-weight:700;text-decoration-line:underline;text-decoration-style:dotted;text-decoration-thickness:2px;text-underline-offset:8px;white-space:nowrap}

.browser-stage{position:absolute;left:11.6%;top:33.0%;width:66.8%;aspect-ratio:2048/1335;transform-origin:center;transition:left .58s var(--ease),top .58s var(--ease),width .58s var(--ease),transform .58s var(--ease)}
.browser-frame{position:absolute;left:-110px;inset:0;width:100%;height:100%;object-fit:fill;display:block;z-index:1;filter:drop-shadow(0 22px 48px rgba(31,27,56,.12))}
.browser-inner{position:absolute;z-index:2;left:2.2%;right:2.15%;top:12.0%;bottom:3.0%;overflow:hidden;border-radius:0 0 12px 12px;pointer-events:none}
.browser-launcher-anchor{position:absolute;z-index:4;right:20px;bottom:20px;transition:right .55s var(--ease),bottom .55s var(--ease)}
.browser-launcher-anchor .stella-launcher.is-bubble{width:68px;height:68px;padding:7px}
.browser-launcher-anchor .stella-launcher.is-pill{width:176px;height:68px;border-radius:34px;padding:6px 17px 6px 8px;gap:6px}
.browser-launcher-anchor .is-bubble .launcher-stella{width:55px;height:55px}
.browser-launcher-anchor .is-pill .launcher-stella{width:52px;height:52px}
.browser-launcher-anchor .launcher-label{font-size:18px}

.showcase-progress{position:absolute;right:3.8%;top:34.5%;height:315px;z-index:5;display:flex;align-items:flex-start}
.showcase-track{position:relative;width:9px;height:315px;border-radius:999px;background:rgba(255,255,255,.17);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.showcase-thumb{position:absolute;left:0;top:0;width:9px;height:105px;border-radius:999px;background:rgba(255,255,255,.96);box-shadow:0 0 12px rgba(255,255,255,.18);transition:transform .42s var(--ease)}

.showcase[data-step="8"] .showcase-copy{left:12.4%;top:7.6%;width:82%}
.showcase[data-step="8"] .showcase-title{font-size:44px;max-width:78%;white-space:nowrap}
.showcase[data-step="8"] .showcase-subtitle{font-size:24px;max-width:88%;white-space:nowrap;margin-top:12px}
.browser-stage.step8{left:17.0%;top:24.2%;width:54.8%}
.browser-launcher-anchor.step8{right:50px;bottom:60px}

.showcase[data-step="9"] .showcase-copy{left:14.8%;top:59.2%;width:76%}
.showcase[data-step="9"] .showcase-title{font-size:44px;max-width:82%;white-space:nowrap}
.showcase[data-step="9"] .showcase-subtitle{font-size:24px;max-width:86%;line-height:1.22;white-space:pre-line;margin-top:12px}
.browser-stage.step9{left:4.6%;top:1.6%;width:52.0%}
.browser-launcher-anchor.step9{right:50px;bottom:60px}
.showcase-cursor{position:absolute;z-index:6;width:27px;height:auto;right:20px;bottom:40px;filter:drop-shadow(0 1px 1px rgba(255,255,255,.6))}

.showcase[data-step="10"] .showcase-copy{left:12.4%;top:7.8%;width:82%}
.showcase[data-step="10"] .showcase-title{font-size:44px;max-width:86%;line-height:1.14;text-wrap:balance}
.showcase[data-step="10"] .showcase-subtitle{display:none}
.browser-stage.step10{left:17.0%;top:23.0%;width:54.8%}
.browser-launcher-anchor.step10{right:140px;bottom:360px}
.browser-inner.chat-open{pointer-events:none}
.chat-pane{position:absolute;right:0;top:0;width:40.5%;height:100%;background:#fff;overflow:hidden}
.chat-pane>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.chat-launcher{position:absolute;left:50%;top:15.4%;transform:translate(-50%,-50%);z-index:3}.chat-launcher .stella-launcher{box-shadow:0 5px 16px rgba(0,0,0,.18)}.chat-launcher .stella-launcher.is-bubble{width:68px;height:68px;padding:7px}.chat-launcher .stella-launcher.is-pill{width:176px;height:68px;border-radius:34px;padding:6px 17px 6px 8px;gap:6px}.chat-launcher .is-bubble .launcher-stella{width:55px;height:55px}.chat-launcher .is-pill .launcher-stella{width:52px;height:52px}
.start-demo{position:absolute;left:31.2%;bottom:6.4%;width:35.4%;height:72px;border:0;border-radius:36px;background:#090909;color:#fff;font-size:24px;font-weight:400;cursor:pointer;transition:transform .18s var(--ease),background .18s ease}
.start-demo:hover{background:#181818;transform:translateY(-1px)}
.start-demo:active{transform:scale(.992)}

.app.showcase-mode{grid-template-columns:var(--sidebar) 1fr}
.app.showcase-mode>.preview,.app.showcase-mode>.config{display:none!important}
.app.showcase-mode>.showcase{display:block!important}

@media(max-width:1320px){
  .launcher-choice{height:76px;border-radius:38px;font-size:24px;gap:13px}
  .launcher-check{width:32px;height:32px;flex-basis:32px}
  .launcher-check-dot{width:17px;height:17px}
  .site-launcher-anchor{right:6%;bottom:6%}
  .showcase-progress{right:4.6%}
}