*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{--ink:#0a0909;--chalk:#f2efe9;--ox:#8b1a2b;--rose:#e05a72;--pink:#f3c1cb}
html,body{background:radial-gradient(ellipse at 50% 20%,#1d1113,#060606 70%);color:var(--chalk);font-family:Manrope,system-ui,sans-serif;min-height:100%}
#frame{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px 0}
#app{position:relative;width:390px;height:844px;border-radius:48px;overflow:hidden;background:var(--ink);box-shadow:0 0 0 10px #1b1a19,0 0 0 11px #5a554e,0 50px 90px rgba(0,0,0,.7)}
.side{font-size:11px;letter-spacing:.5px;opacity:.5;text-align:center;line-height:1.6}
@media(max-width:500px){#frame{padding:0;gap:0}#app{width:100vw;height:100dvh;border-radius:0;box-shadow:none}.side{display:none}}
#view{position:absolute;inset:0;overflow-y:auto;padding:54px 20px 120px;scrollbar-width:none}#view::-webkit-scrollbar{display:none}
#view.full{padding:0}
.fade{animation:f .35s ease}@keyframes f{from{opacity:0;transform:translateY(8px)}}
h1,h2,.serif{font-family:'Bodoni Moda',serif;font-weight:500}
h1{font-size:30px;letter-spacing:-.3px}h2{font-size:22px}
.it{font-style:italic}
.mono{font:700 9.5px Manrope;letter-spacing:2.4px;text-transform:uppercase}
.dim{opacity:.55}.s{font-size:12.5px}.ox{color:var(--rose)}
.wm{font-family:'Archivo Black';letter-spacing:6px}
.row{display:flex;align-items:center;gap:10px}.sp{justify-content:space-between}
.top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;min-height:42px}
.top .t{text-align:center;flex:1}
.rb{width:42px;height:42px;border-radius:21px;background:rgba(12,12,12,.55);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;color:var(--chalk);font-size:18px;cursor:pointer;flex:none;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.rb.on{color:var(--rose)}
.rb.ghost{visibility:hidden}
.btn{height:50px;border-radius:25px;display:flex;align-items:center;justify-content:center;gap:8px;font:600 14px Manrope;letter-spacing:.4px;border:0;cursor:pointer;width:100%}
.btn.w{background:linear-gradient(180deg,#f7f3ec,#e4ddd1);color:#0a0909}
.btn.o{background:transparent;border:1px solid rgba(242,239,233,.3);color:var(--chalk)}
.tag{display:inline-flex;gap:5px;align-items:center;font:700 9px Manrope;letter-spacing:1.6px;color:var(--pink);border:1px solid rgba(224,90,114,.5);background:rgba(139,26,43,.25);padding:4px 9px;border-radius:20px}
.glass{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:20px}
.aicard{display:flex;gap:12px;align-items:center;padding:14px;border-radius:20px;background:linear-gradient(120deg,rgba(139,26,43,.35),rgba(255,255,255,.04));border:1px solid rgba(224,90,114,.3);cursor:pointer;font-size:13px}
.hero{position:relative;height:330px;border-radius:24px;overflow:hidden;cursor:pointer}.hero img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.hero .cap{position:absolute;left:18px;right:18px;bottom:16px}.shade{position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.85))}
.pill{display:inline-block;font:700 9px Manrope;letter-spacing:1.6px;padding:5px 10px;border-radius:20px;background:var(--ox)}
.hs{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:0 20px}
.card{cursor:pointer}.card img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 15%;border-radius:20px;background:#ddd;display:block}
.hs .card{flex:none;width:140px}
.ct{font:500 12.5px Manrope;margin-top:7px;line-height:1.3}.cp{font:600 13px Manrope;margin-top:2px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px}
.chips{display:flex;gap:8px;overflow-x:auto;margin-bottom:16px;scrollbar-width:none}
.chip{flex:none;padding:8px 14px;border-radius:20px;border:1px solid rgba(255,255,255,.14);font:500 12px Manrope;cursor:pointer;color:var(--chalk);background:none}.chip.on{background:var(--chalk);color:#0a0909}
.sec{margin:26px 0 12px}
#tabs{position:absolute;left:12px;right:12px;bottom:16px;height:70px;border-radius:35px;background:rgba(20,20,20,.9);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-around;align-items:center;z-index:20}
.tab{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;opacity:.5;cursor:pointer;background:none;border:0;color:var(--chalk);font-family:Manrope;width:60px}.tab.on{opacity:1}
.tab svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tab.ai{opacity:1;margin-top:-30px}.orb{width:58px;height:58px;border-radius:29px;background:radial-gradient(circle at 35% 30%,#ff8fa3,#8b1a2b 55%,#3a0a12);display:flex;align-items:center;justify-content:center;box-shadow:0 0 28px rgba(194,58,82,.6),0 0 0 4px #0a0909;font-size:22px}
/* product */
.pimg{position:relative;height:480px}.pimg img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.pimg .top{position:absolute;top:54px;left:20px;right:20px}
.sheet{position:relative;margin-top:-28px;background:var(--ink);border-radius:28px 28px 0 0;padding:22px 20px 130px}
.sizes{display:flex;gap:7px;margin:16px 0}.sizes button{flex:1;height:44px;border-radius:14px;border:1px solid rgba(255,255,255,.15);background:none;color:var(--chalk);font:500 13px Manrope;cursor:pointer}.sizes .on{background:var(--chalk);color:#000;font-weight:700}
.thumbs{display:flex;gap:8px;position:absolute;bottom:40px;left:20px}.thumbs img{width:44px;height:54px;border-radius:10px;object-fit:cover;border:2px solid transparent;cursor:pointer}.thumbs img.on{border-color:var(--chalk)}
/* bag */
.li{display:flex;gap:12px;align-items:center;padding:10px;margin-bottom:10px}.li img{width:64px;height:76px;border-radius:12px;object-fit:cover}
.qty{display:flex;gap:10px;align-items:center}.qty button{width:26px;height:26px;border-radius:13px;border:1px solid rgba(255,255,255,.2);background:none;color:var(--chalk);cursor:pointer}
.sum div{display:flex;justify-content:space-between;padding:6px 0;font-size:14px}
.apple{background:#fff;color:#000;font:600 20px -apple-system,Manrope}
/* chat */
.msgs{display:flex;flex-direction:column;gap:10px;padding-bottom:10px}
.m{max-width:84%;padding:12px 14px;border-radius:20px;font-size:13.5px;line-height:1.45;animation:f .3s}
.m.me{align-self:flex-end;background:var(--chalk);color:#0a0909;border-bottom-right-radius:6px}
.m.ai{background:rgba(255,255,255,.06);border:1px solid rgba(224,90,114,.25);border-bottom-left-radius:6px}
.m .pc{display:flex;gap:8px;margin-top:10px}.m .pc .card{width:100px}.m .pc img{border-radius:12px}
.sugs{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}.sugs button{font:500 11.5px Manrope;padding:7px 11px;border-radius:16px;border:1px solid rgba(224,90,114,.4);color:var(--pink);background:none;cursor:pointer}
.inbar{position:absolute;left:12px;right:12px;bottom:96px;display:flex;gap:8px;z-index:15}
.inbar input{flex:1;height:50px;border-radius:25px;border:1px solid rgba(255,255,255,.12);background:rgba(25,25,25,.95);color:var(--chalk);padding:0 18px;font:14px Manrope;outline:none}
.inbar button{width:50px;height:50px;border-radius:25px;border:0;background:var(--chalk);color:#000;font-size:18px;cursor:pointer}
.typing{opacity:.6;font-size:12px}
/* voice */
.vwrap{position:absolute;inset:0;background:radial-gradient(circle at 50% 36%,#3a0f19,#120708 45%,#070707 80%);padding:54px 22px 0}
.vorb{position:relative;width:240px;height:240px;margin:30px auto 10px}.vorb i{position:absolute;border-radius:50%;border:1px solid rgba(224,90,114,.4)}
.vorb i:nth-child(1){inset:0;opacity:.35}.vorb i:nth-child(2){inset:24px;opacity:.6}
.core{position:absolute;inset:66px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd1da,#e05a72 30%,#8b1a2b 60%,#2a0710);box-shadow:0 0 80px rgba(224,90,114,.7)}

@keyframes pulse{to{transform:scale(1.1);opacity:.85}}
.wave{display:flex;justify-content:center;align-items:center;gap:4px;height:60px}.wave i{width:4px;height:56px;border-radius:2px;background:linear-gradient(#f3c1cb,#8b1a2b);transform:scaleY(.15);transition:transform .12s;will-change:transform}
.vtx{min-height:110px;margin-top:10px}.vtx .txt{font:400 19px 'Bodoni Moda';line-height:1.4;margin-top:6px}
.vbar{position:absolute;left:0;right:0;bottom:110px;display:flex;justify-content:center;align-items:center;gap:26px}
.vmic{width:76px;height:76px;border-radius:38px;background:var(--chalk);border:0;font-size:26px;cursor:pointer}.vmic.on{box-shadow:0 0 0 8px rgba(224,90,114,.3),0 0 40px rgba(224,90,114,.6)}
.vbar .rb{width:52px;height:52px;border-radius:26px}
.vtype{position:absolute;left:22px;right:22px;bottom:200px;display:none;gap:8px}.vtype.show{display:flex}
.vtype input{flex:1;height:46px;border-radius:23px;border:1px solid rgba(255,255,255,.15);background:rgba(0,0,0,.5);color:var(--chalk);padding:0 16px;font:14px Manrope;outline:none}
.vtype button{width:46px;border-radius:23px;border:0;background:var(--chalk);cursor:pointer}
/* tryon */
.tryimg{position:relative;height:500px;border-radius:24px;overflow:hidden;touch-action:none;background:#222}
.tryimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%}
.tryimg .before{filter:grayscale(1) brightness(.75) contrast(1.1);clip-path:inset(0 50% 0 0)}
.split{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--chalk)}
.split b{position:absolute;top:60%;left:-22px;width:46px;height:46px;border-radius:23px;background:var(--chalk);color:#000;display:flex;align-items:center;justify-content:center}
.sw{width:36px;height:36px;border-radius:18px;border:2px solid rgba(255,255,255,.15);cursor:pointer}.sw.on{box-shadow:0 0 0 3px var(--rose)}
/* club */
.mcard{position:relative;height:220px;border-radius:24px;padding:20px;background:linear-gradient(135deg,#1a1a1a,#2a0d14 50%,#0b0b0b);border:1px solid rgba(255,255,255,.12);display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;box-shadow:0 30px 50px rgba(0,0,0,.6);transition:transform .6s;transform-style:preserve-3d;cursor:pointer}
.mcard::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.1) 48%,transparent 60%)}
.mcard.flip{transform:rotateY(180deg)}.mcard .back{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:#111;border-radius:24px}
.qr{width:110px;height:110px;background:repeating-conic-gradient(#f2efe9 0 25%,#111 0 50%) 0 0/22px 22px;border:8px solid #f2efe9;border-radius:8px}
.bar{height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden}.bar i{display:block;height:100%;background:linear-gradient(90deg,#8b1a2b,#e05a72)}
.wheel{width:240px;height:240px;margin:10px auto;border-radius:50%;background:conic-gradient(#141414 0 45deg,#5a1a24 0 90deg,#1f1f1f 0 135deg,#d9d4cb 0 180deg,#141414 0 225deg,#5a1a24 0 270deg,#1f1f1f 0 315deg,#d9d4cb 0);transition:transform 3s cubic-bezier(.2,.8,.2,1);border:3px solid #2a2a2a}
.ptr{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:20px solid var(--chalk);margin:0 auto -14px;position:relative;z-index:2}
#toast{position:absolute;left:50%;top:60px;transform:translate(-50%,-20px);opacity:0;background:var(--chalk);color:#000;padding:10px 16px;border-radius:20px;font:600 12.5px Manrope;transition:.3s;z-index:50;white-space:nowrap}
#toast.show{opacity:1;transform:translate(-50%,0)}
.foot{font-size:10px;opacity:.4;text-align:center;margin-top:28px;line-height:1.5}
.big{font:500 64px 'Bodoni Moda';line-height:1}
.splash{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 42%,#2a0d14,#0a0909 60%);z-index:60;transition:opacity .6s}

/* voice states */
.core{transition:transform .08s linear;will-change:transform}
.vorb{cursor:pointer}
.vorb::after{content:'';position:absolute;inset:40px;border-radius:50%;background:radial-gradient(circle,rgba(224,90,114,.55),transparent 70%);opacity:0;transition:opacity .3s}
[data-s=listening] .vorb::after{opacity:1;animation:glow 1.2s ease-in-out infinite alternate}
[data-s=thinking] .core{animation:pulse .6s ease-in-out infinite alternate}
[data-s=speaking] .vorb i{animation:ring 1.4s ease-out infinite}
@keyframes glow{from{transform:scale(.9);opacity:.6}to{transform:scale(1.25);opacity:1}}
@keyframes ring{from{transform:scale(.9);opacity:.8}to{transform:scale(1.15);opacity:0}}
.vstate{display:flex;justify-content:center;align-items:center;gap:8px;font:600 15px Manrope;margin-top:-4px}
.dot{width:10px;height:10px;border-radius:5px;background:#555}
[data-s=listening] .dot{background:#ff3048;animation:blink 1s infinite}[data-s=thinking] .dot{background:#f3c1cb}[data-s=speaking] .dot{background:#e05a72}
@keyframes blink{50%{opacity:.2}}
.vtx{text-align:center;min-height:120px}.vtx .txt{font-size:18px}
.vbar{flex-direction:column;gap:12px;bottom:48px}
.vmic{width:84px;height:84px;border-radius:42px;font-size:28px;color:#0a0909}
[data-s=listening] .vmic{background:#ff3048;color:#fff;box-shadow:0 0 0 8px rgba(255,48,72,.25)}
[data-s=speaking] .vmic{background:#2a2a2a;color:#f2efe9}
#vbtnl{letter-spacing:3px}
.conv{font:500 12px Manrope;opacity:.75;display:flex;gap:6px;align-items:center}
.conv input{accent-color:#e05a72}
.vwrap .vorb{margin:14px auto 6px;width:220px;height:220px}.vwrap .core{inset:60px}
.vtype{bottom:200px}
/* perf: mobile */
@media (max-width:500px),(pointer:coarse){
 *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 #tabs{background:#141414}.pl,.tray{background:rgba(10,10,10,.92)}
 .rb{background:rgba(12,12,12,.7);box-shadow:none}
 .mcard,.btn.w,.wheel{box-shadow:none}
 .orb{box-shadow:0 0 0 4px #0a0909}
 .core{box-shadow:0 0 40px rgba(224,90,114,.5)}
 .mcard::after{display:none}
 .wheel{filter:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}