:root{
  --bg:#0c0921;
  --panel:#191430;
  --panel-2:#241d49;
  --text:#faf9ff;
  --muted:#aaa5c4;
  --accent:#8c70ff;
  --accent-2:#54e3ff;
  --pink:#ff63ba;
  --green:#65ebb0;
  --line:rgba(255,255,255,.09);
  --shadow:0 24px 70px rgba(0,0,0,.28);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:radial-gradient(circle at top,#2d2166 0,#100c2a 38%,#08071a 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100%}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:2px solid rgba(84,227,255,.8);outline-offset:3px}
.page-shell{width:min(1120px,calc(100% - 28px));margin:28px auto 42px}
.card-panel{background:linear-gradient(145deg,rgba(36,29,73,.97),rgba(16,13,38,.97));border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);backdrop-filter:blur(12px)}
.hero{position:relative;overflow:hidden;min-height:315px;padding:38px 42px;display:flex;align-items:center;gap:20px}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:linear-gradient(90deg,transparent,rgba(84,227,255,.5),transparent)}
.hero-art{position:absolute;inset:0;pointer-events:none}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,13,40,.96) 0%,rgba(16,13,40,.76) 47%,rgba(16,13,40,.22) 100%)}
.hero-orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:.7}
.orb-a{width:280px;height:280px;right:5%;top:-85px;background:radial-gradient(circle,#7f62ff 0%,rgba(127,98,255,0) 70%)}
.orb-b{width:280px;height:280px;right:18%;bottom:-150px;background:radial-gradient(circle,#40d7ff 0%,rgba(64,215,255,0) 72%)}
.spark{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 20px 5px rgba(84,227,255,.7);animation:float 3.8s ease-in-out infinite}
.spark-a{right:32%;top:25%}.spark-b{right:12%;top:57%;width:5px;height:5px;animation-delay:-1.5s}
.hero-character{position:absolute;right:2%;bottom:-24px;width:min(390px,39vw);max-width:390px;filter:drop-shadow(0 30px 30px rgba(0,0,0,.36));animation:heroFloat 5.5s ease-in-out infinite;transform-origin:center bottom}
.hero-copy{position:relative;z-index:2;max-width:660px}
.brand-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.brand-gem{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 7px 15px rgba(120,255,128,.28))}
.brand-pill{font-weight:900;letter-spacing:.12em;font-size:13px;color:#d7d1ff;background:rgba(143,108,255,.16);border:1px solid rgba(143,108,255,.35);padding:7px 11px;border-radius:999px}
.live-chip{font-size:11px;font-weight:800;color:#c3f9e4;border:1px solid rgba(101,235,176,.22);background:rgba(101,235,176,.08);padding:7px 9px;border-radius:999px}.live-chip i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:5px;box-shadow:0 0 0 4px rgba(101,235,176,.08)}
h1{font-size:clamp(42px,5vw,64px);line-height:.98;margin:0 0 15px;letter-spacing:-.045em}
.hero-copy p{margin:0;color:#d1cce7;font-size:17px;line-height:1.65;max-width:650px}
.trust-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.trust-row span{font-size:12px;color:#d8d3ee;background:rgba(255,255,255,.055);border:1px solid var(--line);padding:8px 10px;border-radius:999px}
.generator-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:18px;margin-top:18px}
.generator-panel{padding:28px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:15px}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.16em;color:#a89fff}.section-heading h2{margin:5px 0 0;font-size:30px;letter-spacing:-.03em}
.status-dot{display:flex;align-items:center;gap:7px;color:#aaa4c7;font-size:12px}.status-dot span{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 5px rgba(101,235,176,.08);animation:pulseDot 1.9s ease-in-out infinite}
.progress-track{height:5px;background:rgba(255,255,255,.07);border-radius:999px;overflow:hidden}.progress-track span{display:block;height:100%;width:33%;background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:999px;transition:width .45s ease;box-shadow:0 0 18px rgba(84,227,255,.25)}
.stepper{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:13px 0 23px}.step-chip{display:flex;align-items:center;gap:8px;color:#817a9d;font-size:11px;font-weight:800}.step-chip b{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:11px;transition:.25s ease}.step-chip.current{color:#e9e6f7}.step-chip.current b,.step-chip.done b{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff;box-shadow:0 7px 18px rgba(84,227,255,.15)}
.step{animation:fade .27s ease}.step.active{min-height:350px}
.pack-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.pack{position:relative;overflow:hidden;border:1px solid var(--line);background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.022));border-radius:20px;padding:18px 12px;text-align:center;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;min-height:152px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text)}
.pack:hover{transform:translateY(-3px);border-color:rgba(143,108,255,.55);box-shadow:0 16px 30px rgba(0,0,0,.16)}.pack.selected{transform:translateY(-2px);border-color:rgba(84,227,255,.9);box-shadow:0 0 0 2px rgba(84,227,255,.12),0 18px 40px rgba(0,0,0,.18);background:linear-gradient(160deg,rgba(84,227,255,.13),rgba(143,108,255,.08))}.pack-glow{position:absolute;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(139,255,91,.24),transparent 70%);top:-18px;right:-18px}.pack img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 9px 13px rgba(99,255,91,.15))}.pack strong{font-size:24px}.pack small{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.pack-check{position:absolute;right:9px;top:9px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));opacity:0;transform:scale(.65);transition:.2s ease}.pack.selected .pack-check{opacity:1;transform:scale(1)}
.primary-btn,.ghost-btn{position:relative;overflow:hidden;width:100%;border-radius:16px;padding:15px 18px;border:1px solid transparent;font-weight:900;margin-top:18px;transition:transform .16s ease,filter .18s ease,box-shadow .18s ease,background .18s ease}.primary-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.24) 45%,transparent 60%);transform:translateX(-120%);transition:transform .55s ease}.primary-btn:hover:not(:disabled)::after{transform:translateX(120%)}.primary-btn{background:linear-gradient(135deg,var(--accent),#6e5fff 55%,var(--accent-2));color:#fff;box-shadow:0 14px 28px rgba(104,90,255,.24)}.primary-btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.05)}.primary-btn.ready{box-shadow:0 15px 30px rgba(84,227,255,.18)}.primary-btn:disabled{opacity:.42;cursor:not-allowed}.ghost-btn{background:rgba(255,255,255,.045);color:#d7d2eb;border-color:var(--line)}.ghost-btn:hover{background:rgba(255,255,255,.07);transform:translateY(-1px)}.interactive-btn.is-pressed{transform:scale(.985)!important;filter:brightness(.95)}
.micro-copy,.field-hint{font-size:12px;line-height:1.55;color:var(--muted);text-align:center;margin:11px 0 0}.field-label{display:block;font-size:13px;font-weight:900;color:#d9d4ee;margin-bottom:8px}.input-shell{position:relative;isolation:isolate}.input-shell::before{content:"#";position:absolute;left:15px;top:50%;transform:translateY(-50%);display:block!important;width:18px;height:22px;color:#54e3ff!important;font-size:20px!important;font-weight:900;line-height:22px;opacity:1!important;visibility:visible!important;pointer-events:none;z-index:3;text-shadow:none}.input-icon{display:none!important}.text-input{position:relative;z-index:1;width:100%;padding:16px 15px 16px 42px;border-radius:15px;border:1px solid var(--line);outline:none;background:#0f0c25;color:#fff;transition:.18s ease}.text-input::placeholder{color:#6f6987}.text-input:focus{border-color:rgba(84,227,255,.7);box-shadow:0 0 0 4px rgba(84,227,255,.08);transform:translateY(-1px)}
.selected-summary{display:flex;align-items:center;gap:13px;padding:14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line);margin-top:18px}.selected-summary img{width:48px;height:48px;object-fit:contain}.selected-summary span{display:block;color:var(--muted);font-size:12px}.selected-summary strong{display:block;margin-top:2px;font-size:18px}.summary-arrow{margin-left:auto;font-size:22px;color:#9188bb}
.error-copy{color:#ff8abf;font-size:12px;margin-top:10px}
.result-card{position:relative;overflow:hidden;padding:18px;border-radius:20px;background:radial-gradient(circle at 15% 20%,rgba(84,227,255,.18),transparent 34%),radial-gradient(circle at 90% 85%,rgba(255,99,186,.12),transparent 28%),#100c2a;border:1px solid rgba(143,108,255,.22)}
.result-card::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent,rgba(255,255,255,.04),transparent);transform:translateX(-130%);animation:shine 4.8s linear infinite}.result-topline{display:flex;justify-content:space-between;align-items:center;color:#bdb6d8;font-size:12px;font-weight:800;position:relative;z-index:1}.live-badge{color:#73f1bd;background:rgba(101,235,176,.08);border:1px solid rgba(101,235,176,.2);padding:4px 7px;border-radius:999px;font-size:10px;letter-spacing:.1em}
.masked-code{min-height:49px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:clamp(23px,4vw,34px);letter-spacing:.08em;text-align:center;margin:22px 0 15px;font-weight:900;display:flex;justify-content:center;align-items:center;gap:1px;position:relative;z-index:1}.code-char{display:inline-block;opacity:0;transform:translateY(8px) scale(.86);animation:charIn .26s cubic-bezier(.2,.75,.25,1) var(--delay) forwards;min-width:.72em;text-align:center}.code-char.masked{color:#777192;text-shadow:0 0 8px rgba(119,113,146,.15)}.code-char-revealing{filter:blur(.15px)}
.code-progress{height:5px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;margin:0 4px 16px}.code-progress span{display:block;width:0;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .12s ease;box-shadow:0 0 16px rgba(84,227,255,.28)}
.result-meta{display:flex;justify-content:space-between;gap:8px;color:#aaa4c7;font-size:12px;position:relative;z-index:1}.task-box{display:flex;gap:13px;padding:16px;border-radius:18px;background:linear-gradient(145deg,rgba(84,227,255,.055),rgba(143,108,255,.055));border:1px solid rgba(84,227,255,.13);margin-top:16px;transform:translateY(8px);opacity:0}.task-icon{flex:0 0 36px;width:36px;height:36px;border-radius:12px;background:rgba(101,235,176,.12);color:var(--green);display:grid;place-items:center;font-weight:900}.task-copy strong{display:block;font-size:15px}.task-copy p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.5}.task-btn-wrap{transform:translateY(8px);opacity:0;margin-top:0}.reveal-up{animation:revealUp .34s ease forwards}.task-btn{margin-top:12px}.task-hint{display:block;text-align:center;color:#877f9e;font-size:11px;margin-top:8px}.task-hint i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:4px}
.side-panel{display:flex;flex-direction:column;gap:18px}.mini-card{padding:18px;display:flex;align-items:center;gap:13px}.mini-icon-wrap{width:48px;height:48px;border-radius:16px;background:rgba(143,108,255,.1);display:grid;place-items:center;flex:0 0 48px}.mini-icon-wrap img{width:36px;height:36px;object-fit:contain}.mini-card strong{display:block}.mini-card span{display:block;margin-top:4px;font-size:12px;line-height:1.45;color:var(--muted)}.notice-card{padding:18px;border-radius:24px;border:1px solid rgba(255,99,186,.18);background:linear-gradient(150deg,rgba(255,99,186,.08),rgba(143,108,255,.06));color:#ddd6ee;display:flex;gap:12px}.notice-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.05);color:#d9ceff;flex:0 0 32px}.notice-card strong{display:block;font-size:13px;margin-bottom:7px}.notice-card p{margin:0;font-size:12px;line-height:1.55;color:#bcb5d2}
.chat-demo{margin-top:18px;padding:22px}.chat-header{display:flex;justify-content:space-between;align-items:flex-end;gap:15px}.chat-header h3{margin:5px 0 0;font-size:22px}.chat-live{font-size:11px;color:#b9b2cf}.chat-live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:5px}.chat-messages{display:grid;gap:10px;margin-top:18px}.msg{display:flex;gap:10px;align-items:flex-start;opacity:0;transform:translateY(5px);animation:msgIn .3s ease var(--msg-delay) forwards}.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:900;color:white;background:linear-gradient(135deg,#7f69ff,#48d9ff);flex:0 0 32px}.bubble{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.045);border:1px solid var(--line);max-width:90%}.bubble-head{display:flex;align-items:center;gap:7px}.bubble-head strong{font-size:12px}.bubble-head span{font-size:9px;color:#817a9d;text-transform:uppercase;letter-spacing:.08em}.bubble p{margin:4px 0 0;color:#c0b9d5;font-size:12px;line-height:1.45}
.footer-note{text-align:center;color:#746c95;font-size:10px;margin-top:16px;line-height:1.5}
#page-loader{position:fixed;inset:0;display:grid;place-items:center;background:#0b0920;z-index:9999;transition:opacity .35s ease,visibility .35s ease}#page-loader.hide{opacity:0;visibility:hidden}.loader-dot{width:45px;height:45px;border:4px solid rgba(255,255,255,.12);border-top-color:#7e6cff;border-right-color:#54d8ff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes charIn{to{opacity:1;transform:none}}@keyframes codeLoad{0%{transform:translateX(-120%)}50%{transform:translateX(140%)}100%{transform:translateX(280%)}}@keyframes revealUp{to{opacity:1;transform:none}}@keyframes shine{to{transform:translateX(130%)}}@keyframes float{0%,100%{transform:translateY(0);opacity:.65}50%{transform:translateY(-12px);opacity:1}}@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-7px) rotate(1deg)}}@keyframes pulseDot{0%,100%{box-shadow:0 0 0 4px rgba(101,235,176,.06)}50%{box-shadow:0 0 0 7px rgba(101,235,176,.02)}}@keyframes msgIn{to{opacity:1;transform:none}}
@media(max-width:920px){.generator-layout{grid-template-columns:1fr}.hero-character{right:-3%;width:300px;opacity:.78}.hero{padding-right:290px}}
@media(max-width:680px){.page-shell{width:min(100% - 18px,1120px);margin-top:10px}.hero{min-height:360px;padding:23px 20px;align-items:flex-start}.hero::before{background:linear-gradient(180deg,rgba(18,14,46,.88) 5%,rgba(18,14,46,.78) 55%,rgba(18,14,46,.55) 100%)}.hero-character{width:245px;right:-9px;bottom:-10px;opacity:.72}.hero-copy{max-width:100%}.hero-copy p{font-size:14px;max-width:96%}h1{font-size:43px}.generator-panel{padding:20px}.pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stepper{gap:5px}.step-chip span{font-size:10px}.masked-code{font-size:22px}.result-meta{font-size:11px}.chat-demo{padding:18px}}


/* V3 interaction polish */
.interactive-btn,.pack{position:relative;overflow:hidden}
.interactive-btn::after,.pack::after{content:"";position:absolute;inset:-40% auto -40% -25%;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);transform:skewX(-18deg) translateX(-260%);transition:transform .55s ease;pointer-events:none}
.interactive-btn:hover::after,.pack:hover::after{transform:skewX(-18deg) translateX(520%)}
.pack.selected{animation:selectedPulse 1.8s ease-in-out infinite}
@keyframes selectedPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}