*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{font-family:Inter,-apple-system,sans-serif;background:var(--color-bg);color:var(--color-text);display:flex;align-items:center;justify-content:center;padding:20px}.shell{width:100%;max-width:1040px;height:min(660px,calc(100vh - 40px));background:var(--color-panel);position:relative;border:1px solid var(--color-border);border-radius:20px;display:grid;grid-template-columns:1.15fr 1fr;overflow:hidden}.visual{padding:36px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(180deg,#08080d8c,#08080dd9),url(/images/login-bg.webp);background-size:cover;background-position:center bottom;border-right:1px solid var(--color-border)}.logo{display:flex;align-items:center;gap:10px}.logo-mobile{display:none}.logo img{height:30px;width:auto;display:block}.logo-text{font-weight:700;font-size:17px}.logo-text .accent{color:var(--color-primary)}.scene{position:relative;flex:1;display:flex;align-items:center;justify-content:center;margin:16px 0}.scene-inner{position:relative;width:100%;max-width:440px;height:340px;transition:opacity .4s ease}.win-main{position:absolute;left:0;top:40px;width:290px;height:235px;background:#14141dee;border:1px solid var(--color-border);border-radius:12px;box-shadow:0 20px 50px #00000080;opacity:0;transform:translateY(14px) scale(.97);animation:popIn .5s ease forwards;animation-delay:.1s;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.win-dots{display:flex;gap:5px;padding:10px 12px}.win-dots span{width:8px;height:8px;border-radius:50%;display:block}.win-dots .r{background:#ff5f56}.win-dots .y{background:#ffbd2e}.win-dots .g{background:#27c93f}.win-body{display:flex;gap:8px;padding:0 10px 10px;height:calc(100% - 30px)}.win-sidebar{display:flex;flex-direction:column;gap:5px}.side-icon{width:20px;height:20px;border-radius:5px;background:#ffffff0f;display:flex;align-items:center;justify-content:center;color:var(--color-text-dim);font-size:10px;opacity:0;transform:translate(-6px);animation:sideIn .32s ease forwards}.side-icon:nth-child(1){animation-delay:.5s}.side-icon:nth-child(2){animation-delay:.61s}.side-icon:nth-child(3){animation-delay:.72s}.side-icon:nth-child(4){animation-delay:.83s}.side-icon:nth-child(5){animation-delay:.94s}.side-icon:nth-child(6){animation-delay:1.05s}.side-icon:nth-child(7){animation-delay:1.16s}.win-canvas{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:6px}.cell{border-radius:6px;opacity:0;transform:translateY(8px) scale(.95);animation:popIn .4s ease forwards;overflow:hidden}.cell.add{border:1px dashed #3a3a48;display:flex;align-items:center;justify-content:center;color:var(--color-text-dim);font-size:16px;animation-delay:1.25s}.cell.img{animation-delay:1.4s}.cell.txt{animation-delay:1.55s}.cell.img img,.cell.txt img{width:100%;height:100%;object-fit:cover;display:block}.cell.card{background:#ffffff0d;animation-delay:1.7s;padding:8px}.cell.card .bar{height:6px;border-radius:3px;background:linear-gradient(90deg,var(--color-primary),var(--color-accent));width:65%;margin-bottom:6px}.cell.card .bar2{height:5px;border-radius:3px;background:#ffffff24;width:42%}.win-preview{position:absolute;right:0;top:85px;width:172px;height:208px;background:#14141dee;border:1px solid var(--color-border);border-radius:12px;box-shadow:0 20px 50px #00000080;opacity:0;transform:translateY(14px) scale(.97);animation:popIn .5s ease forwards;animation-delay:2.05s;padding:11px}.prev-topbar{display:flex;gap:4px;margin-bottom:10px}.prev-topbar span{width:6px;height:6px;border-radius:50%;background:#ffffff26}.prev-bar{height:6px;border-radius:3px;background:#ffffff26;width:55%;margin-bottom:10px}.swatches{display:flex;gap:5px;margin-bottom:10px}.swatch{width:21px;height:21px;border-radius:5px;opacity:0;transform:scale(.7);animation:swatchIn .35s ease forwards,swatchGlow 2.4s ease-in-out infinite}.swatch.s1{background:var(--kley-ember);animation-delay:2.3s,3.3s}.swatch.s2{background:#ffc94d;animation-delay:2.43s,3.45s}.swatch.s3{background:#e0518f;animation-delay:2.56s,3.6s}.swatch.s4{background:#4d6bff;animation-delay:2.69s,3.75s}.prev-row{display:flex;align-items:center;gap:6px;margin-bottom:8px;opacity:0;animation:popIn .35s ease forwards}.prev-row.r1{animation-delay:2.85s}.prev-row.r2{animation-delay:2.98s}.prev-dot{width:16px;height:16px;border-radius:4px;background:#ffffff14;flex-shrink:0}.prev-line{height:4px;border-radius:2px;background:#ffffff1f;flex:1}.prev-cta{position:relative;height:22px;border-radius:6px;margin-top:4px;background:linear-gradient(135deg,var(--color-primary),var(--kley-ember));opacity:0;transform:translateY(6px);animation:popIn .4s ease forwards,ctaPulse 1.6s ease-in-out infinite 3.4s,ctaPress .3s ease 6.35s;animation-delay:3.1s,3.4s,0s}.click-ripple{position:absolute;width:8px;height:8px;border-radius:50%;background:#ffb478e6;pointer-events:none;opacity:0;left:50%;top:68%;transform:translate(-50%,-50%);animation:clickBurst .5s ease-out 6.3s}.cursor{position:absolute;width:26px;height:26px;opacity:0;z-index:5;animation:cursorMove 4.5s ease forwards;animation-delay:2.5s;filter:drop-shadow(0 0 8px rgba(255,138,61,.7))}.cursor img{width:100%;height:100%;display:block}@keyframes popIn{to{opacity:1;transform:translateY(0) scale(1)}}@keyframes sideIn{to{opacity:1;transform:translate(0)}}@keyframes floatMove{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-7px) scale(1.03)}}@keyframes swatchIn{to{opacity:1;transform:scale(1)}}@keyframes swatchGlow{0%,80%,to{filter:brightness(1)}90%{filter:brightness(1.35)}}@keyframes ctaPulse{0%,to{box-shadow:0 0 #ff8a3d66}50%{box-shadow:0 0 0 7px #ff8a3d00}}@keyframes ctaPress{0%{transform:translateY(0) scale(1)}50%{transform:translateY(1px) scale(.94);filter:brightness(1.3)}to{transform:translateY(0) scale(1)}}@keyframes clickBurst{0%{opacity:.9;transform:translate(-50%,-50%) scale(.4)}to{opacity:0;transform:translate(-50%,-50%) scale(6)}}@keyframes cursorMove{0%{opacity:0;left:2%;top:2%}5%{opacity:1}78%{left:80%;top:66%}86%{transform:scale(.85)}90%{transform:scale(1.2)}to{opacity:1;left:80%;top:66%;transform:scale(1)}}.scene-inner.reset *{animation:none!important;opacity:0}.value-props{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;position:relative}.prop{position:relative;padding:14px;border:1px solid var(--color-border);border-radius:12px;background:#1010178c;opacity:0;transform:translateY(10px);animation:popIn .45s ease forwards;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);transition:transform .25s ease,border-color .25s ease,background .25s ease,box-shadow .25s ease;cursor:default}.prop:hover{transform:translateY(-4px);border-color:#ff8a3d80;background:#ff8a3d0f;box-shadow:0 10px 24px #ff8a3d26}.prop:hover .prop-icon img{filter:drop-shadow(0 0 9px rgba(255,138,61,.85))}.prop:nth-child(1){animation-delay:3.9s}.prop:nth-child(2){animation-delay:4.1s}.prop:nth-child(3){animation-delay:4.3s}.prop-icon{margin-bottom:8px}.prop-icon img{width:22px;height:auto;filter:drop-shadow(0 0 5px rgba(255,138,61,.5));transition:filter .25s ease}.prop-title{font-weight:600;font-size:13px;margin:0 0 2px}.prop-sub{font-size:11px;color:var(--color-text-dim);margin:0}.access{padding:32px 40px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow-y:auto;max-height:100%}h1{font-family:Sora,Inter,sans-serif;font-size:30px;margin:0 0 6px;font-weight:700;line-height:1.22;letter-spacing:-.4px;text-align:center;background:linear-gradient(100deg,#ffffff 0%,var(--color-primary) 25%,var(--kley-ember) 50%,var(--color-primary) 75%,#ffffff 100%);background-size:250% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:shimmer 5s linear infinite}@keyframes shimmer{0%{background-position:0% center}to{background-position:-250% center}}.sub{color:var(--color-text-dim);margin:0 0 24px;font-size:14px;text-align:center}.access-card{width:100%;max-width:340px;border:1px solid var(--color-border);border-radius:16px;padding:20px;background:#ffffff04}.legal{font-family:var(--font-body);font-weight:500;font-size:10px;letter-spacing:-.1px;color:var(--color-text-dim);text-align:center;margin-top:14px;line-height:1.5;white-space:nowrap}.legal a{color:var(--color-primary);text-decoration:underline}.footnote{margin-top:22px;text-align:center;font-size:12px;color:var(--color-text-dim);opacity:.7}.footnote b{color:var(--color-primary);font-weight:700}.step{display:none;width:100%}.step.show{display:block}@media (max-width: 860px){.shell{grid-template-columns:1fr;height:auto;max-height:none;min-height:100vh;border-radius:0}.visual{display:none}body{padding:0;height:100vh;overflow-y:auto}.access{padding:40px 24px;min-height:100vh}.logo-mobile{display:flex!important;justify-content:flex-start;align-items:center;position:absolute!important;top:24px;left:24px;z-index:10;margin-bottom:0}.access{padding-top:90px}.logo-mobile img{height:46px!important;width:auto!important;display:block!important}.logo-mobile .logo-text{font-size:22px!important}}@media (max-width: 420px){.access{padding:32px 18px}h1{font-size:25px}.legal{font-size:8.5px}}