:root{--bg:#09090d;--panel:#111117;--panel2:#16161e;--line:#292933;--text:#f4f3f7;--muted:#90909d;--lime:#c8ff3d;--purple:#7652ff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;min-height:100vh;overflow-x:hidden}.ambient{position:fixed;border-radius:50%;filter:blur(120px);opacity:.13;pointer-events:none}.ambient-one{width:440px;height:440px;background:#6e36ff;top:-260px;left:25%}.ambient-two{width:340px;height:340px;background:#baff31;right:-220px;top:40%}.topbar{height:76px;border-bottom:1px solid #202027;display:flex;align-items:center;padding:0 5vw;position:relative;z-index:2;background:rgba(9,9,13,.8);backdrop-filter:blur(18px)}button{font:inherit;color:inherit;cursor:pointer}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:white;font-family:Manrope;font-weight:800;font-size:19px}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--lime);color:#090b08;transform:rotate(-4deg)}.brand em{font-style:normal;color:var(--lime);font-size:10px;vertical-align:top;margin-left:2px}.topbar nav{display:flex;margin-left:80px;height:100%;gap:32px}.nav-link{border:0;background:none;color:#777783;font-weight:600;position:relative}.nav-link.active{color:white}.nav-link.active:after{content:"";position:absolute;height:2px;background:var(--lime);left:0;right:0;bottom:0}.top-actions{margin-left:auto;display:flex;align-items:center;gap:18px}.credits{background:#1a1a21;border:1px solid #2b2b34;border-radius:20px;padding:9px 14px;font-size:13px}.credits span{color:var(--lime)}.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(145deg,#e39a62,#8d4a2e);border:2px solid #3a3a43;font-size:12px;font-weight:700}.intro{max-width:1400px;margin:0 auto;padding:54px 4vw 32px;display:flex;justify-content:space-between;align-items:flex-end}.eyebrow{font-size:11px;letter-spacing:2.2px;color:var(--lime);font-weight:700}.eyebrow i,.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime);margin-right:8px}.intro h1{font-family:Manrope;font-size:clamp(38px,5vw,66px);line-height:1.03;letter-spacing:-3px;margin:16px 0 14px}.intro h1 span{color:#74747e}.intro p{color:var(--muted);font-size:16px;margin:0}.idea-card{border:1px solid #282832;background:linear-gradient(130deg,#17171e,#121218);border-radius:14px;padding:16px 56px 16px 18px;position:relative;font-size:12px;color:#81818d;min-width:230px}.idea-card strong{display:block;color:#eee;font-size:13px;margin-top:4px}.idea-card button{position:absolute;right:12px;top:15px;border:0;background:var(--lime);color:#0b0b0d;border-radius:9px;width:34px;height:34px;font-size:18px}.workspace{max-width:1400px;margin:0 auto 60px;padding:0 4vw;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(330px,.72fr);gap:18px}.creator-panel,.preview-panel{border:1px solid #24242d;background:rgba(16,16,22,.92);border-radius:19px}.creator-panel{padding:30px}.steps{display:flex;align-items:center;border-bottom:1px solid #24242c;padding-bottom:25px;margin-bottom:28px}.step{display:flex;align-items:center;text-align:left;gap:10px;background:none;border:0;padding:0;color:#696975}.step b{width:29px;height:29px;border:1px solid #373741;border-radius:50%;display:grid;place-items:center;font-size:12px}.step span{font-weight:600;font-size:12px}.step small{display:block;font-size:8px;letter-spacing:1.5px;color:#60606c;margin-bottom:2px}.step.active{color:white}.step.active b{background:var(--lime);border-color:var(--lime);color:#0c0c0d}.step.active small{color:var(--lime)}.step-line{height:1px;background:#33333d;flex:1;margin:0 15px}.label-row,.option-head{display:flex;justify-content:space-between;align-items:center}.label-row label,.option-card>label{font-weight:600;font-size:13px}.label-row>span,.option-head span{font-size:10px;color:#696975}.prompt-wrap{position:relative;margin-top:10px}textarea{width:100%;height:118px;resize:none;background:#0c0c11;border:1px solid #30303a;color:#eee;border-radius:11px;padding:16px 145px 16px 16px;font:13px/1.55 'DM Sans';outline:none;transition:.2s}textarea:focus{border-color:#6c6c77;box-shadow:0 0 0 3px rgba(200,255,61,.05)}textarea::placeholder{color:#5e5e68}.enhance{position:absolute;right:10px;bottom:10px;border:1px solid #3b3b45;background:#1b1b23;border-radius:8px;padding:8px 11px;font-size:11px}.enhance span{color:var(--lime)}.chips{display:flex;gap:7px;margin-top:10px;flex-wrap:wrap}.chips button{border:1px solid #2d2d37;background:#17171e;color:#92929d;border-radius:17px;padding:6px 10px;font-size:10px}.chips button:hover{border-color:#676772;color:white}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:22px 0}.option-card{background:#14141b;border:1px solid #292932;border-radius:12px;padding:16px}.option-head label{font-size:12px;font-weight:600}.option-head span{color:var(--lime)}input[type=range]{accent-color:var(--lime);width:100%;margin-top:15px}.ticks{display:flex;justify-content:space-between;color:#666671;font-size:9px}.segment{display:flex;gap:4px;margin-top:13px}.segment button{flex:1;border:1px solid transparent;background:#1d1d25;color:#747480;border-radius:7px;padding:8px 2px;font-size:10px}.segment button.selected{border-color:var(--lime);color:white;background:#22251d}.segment i{display:inline-block;border:1px solid currentColor;vertical-align:-2px;margin-right:5px}.portrait{width:6px;height:10px}.square{width:8px;height:8px}.landscape{width:11px;height:7px}.subtle{border:0;background:none;color:#858590;font-size:10px}.styles{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:10px}.style{position:relative;text-align:left;background:#14141a;border:1px solid #292932;border-radius:10px;padding:5px 5px 9px}.style.active{border-color:var(--lime)}.style-image{display:block;height:70px;border-radius:6px;margin-bottom:8px;overflow:hidden;position:relative}.style-image:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgba(0,0,0,.3))}.cinematic{background:radial-gradient(circle at 70% 35%,#eac17d 0 3%,transparent 4%),linear-gradient(150deg,#604939,#151b24 46%,#914227)}.anime{background:radial-gradient(circle at 65% 35%,#ffdec9 0 8%,transparent 9%),linear-gradient(140deg,#7ccbf4,#e7a0c9 60%,#653c99)}.minimal{background:radial-gradient(circle at 35% 30%,#ff8b52 0 12%,transparent 13%),linear-gradient(145deg,#ebe6d8 0 55%,#232326 56%)}.retro{background:linear-gradient(170deg,#131630 35%,#ce4fae 37%,#ff9b55 59%,#232241 61%)}.style b,.style small{display:block;padding:0 4px}.style b{font-size:10px}.style small{font-size:8px;color:#696974;margin-top:2px}.style i{display:none;position:absolute;right:9px;top:9px;width:17px;height:17px;border-radius:50%;background:var(--lime);color:#101012;font-size:10px;text-align:center;line-height:17px}.style.active i{display:block}.generate-row{display:flex;align-items:center;justify-content:space-between;margin-top:27px;padding-top:21px;border-top:1px solid #26262e}.generate-row>div span,.generate-row>div strong{display:block}.generate-row>div span{font-size:9px;color:#6e6e79}.generate-row>div strong{font-size:12px;margin-top:3px}.generate{border:0;border-radius:10px;background:var(--lime);color:#0c0d0a;font-weight:700;padding:13px 17px;min-width:190px;box-shadow:0 8px 24px rgba(200,255,61,.12)}.generate:hover{filter:brightness(1.08);transform:translateY(-1px)}.generate b{float:right}.preview-panel{padding:19px}.preview-head{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.6px;margin-bottom:14px}.preview-head button{border:0;background:none;color:#777;font-weight:bold}.phone{height:500px;max-width:282px;margin:auto;border:1px solid #393943;border-radius:16px;background:#07080a;position:relative;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.35)}.screen-content{position:absolute;inset:0;background:linear-gradient(#070918 0%,#263552 48%,#dc7150 66%,#151013 100%);overflow:hidden}.sun{position:absolute;width:60px;height:60px;border-radius:50%;background:#ffd8a0;box-shadow:0 0 40px #ff9c67;right:37px;top:95px}.planet{position:absolute;width:360px;height:150px;border-radius:50%;background:linear-gradient(#b35840,#48231d);left:-30px;bottom:92px;transform:rotate(-8deg);box-shadow:inset 0 15px 30px #e89467}.horizon{position:absolute;left:-20%;right:-20%;height:120px;bottom:95px;background:linear-gradient(165deg,transparent 30%,#2b1820 31% 55%,#130e13 56%);filter:blur(1px)}.astronaut{position:absolute;bottom:115px;left:48%;color:#e3d9cb;font-size:20px;text-shadow:0 12px 0 #c8b8a9,0 22px 0 #7a675c}.caption{position:absolute;left:22px;bottom:55px;font-family:Manrope}.caption span,.caption strong{display:block}.caption span{font-size:10px;letter-spacing:4px;color:var(--lime)}.caption strong{font-size:25px;letter-spacing:-1px}.phone-controls{position:absolute;bottom:0;left:0;right:0;height:40px;background:rgba(4,4,8,.85);display:flex;align-items:center;padding:0 12px;gap:8px}.phone-controls button{border:0;background:none;font-size:10px;padding:4px}.phone-controls span{font-size:8px;color:#9c9ca7;flex:1}.preview-meta{display:flex;justify-content:space-between;align-items:center;padding:15px 2px}.preview-meta span,.preview-meta strong{display:block}.preview-meta span{font-size:8px;color:#686873}.preview-meta strong{font-size:11px;margin-top:3px}.preview-meta button{border:1px solid #33333d;background:#1b1b23;border-radius:7px;padding:8px 10px;font-size:9px}.preview-meta button:disabled{opacity:.35;cursor:not-allowed}.tip{display:flex;gap:11px;background:linear-gradient(120deg,rgba(111,79,255,.14),rgba(200,255,61,.04));border:1px solid #343041;border-radius:10px;padding:12px}.tip>span{color:var(--lime)}.tip p{font-size:9px;color:#858591;line-height:1.5;margin:0}.tip b{display:block;color:#d9d9df;font-size:10px}.generating{position:absolute;inset:0 0 40px;background:rgba(7,8,10,.91);backdrop-filter:blur(10px);z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}.generating.hidden{display:none}.spinner{font-size:35px;color:var(--lime);animation:spin 1.5s linear infinite;text-shadow:0 0 20px var(--lime)}.generating strong{font-size:13px}.generating span{color:#92929e;font-size:10px}.progress{width:70%;height:3px;background:#303039;border-radius:5px;overflow:hidden}.progress i{display:block;width:0;height:100%;background:var(--lime);transition:.5s}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);background:#efeff2;color:#111;padding:11px 18px;border-radius:9px;font-size:12px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:900px){.topbar nav{display:none}.intro{padding-top:35px}.idea-card{display:none}.workspace{grid-template-columns:1fr}.preview-panel{order:-1}.phone{height:450px}.styles{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.topbar{padding:0 18px}.credits{display:none}.intro,.workspace{padding-left:16px;padding-right:16px}.intro h1{letter-spacing:-2px}.creator-panel{padding:20px 16px}.steps .step span{display:none}.options-grid{grid-template-columns:1fr}.generate-row{align-items:flex-start;gap:12px}.generate{min-width:165px}.style-image{height:85px}}
/* Responsive layout overrides */
@media(max-width:1100px){.topbar{padding-inline:3vw}.topbar nav{margin-left:40px;gap:20px}.intro,.workspace{padding-left:3vw;padding-right:3vw}.workspace{grid-template-columns:minmax(0,1.4fr) minmax(300px,.8fr)}.creator-panel{padding:24px}.styles{grid-template-columns:repeat(2,1fr)}.style-image{height:88px}}
@media(max-width:820px){.topbar{height:68px;padding-inline:24px}.topbar nav{display:none}.intro{padding-top:34px;align-items:center}.intro h1{font-size:clamp(38px,8vw,58px)}.idea-card{display:none}.workspace{grid-template-columns:minmax(0,1fr);gap:16px}.preview-panel{order:0;display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);column-gap:22px;align-items:start}.preview-head{grid-column:1/-1}.phone{grid-row:2/6;width:100%;height:500px}.preview-meta,.saved-state,.tip{grid-column:2}.preview-meta{padding-top:8px}.saved-state{text-align:left;margin:0 0 12px}.tip{align-self:start}.creator-panel{padding:26px}.steps{overflow-x:auto;scrollbar-width:none}.steps::-webkit-scrollbar{display:none}.step{flex:0 0 auto}}
@media(max-width:600px){body{min-width:320px}.ambient{display:none}.topbar{height:60px;padding:0 16px;position:sticky;top:0}.brand{font-size:16px}.brand-mark{width:31px;height:31px}.credits{display:none}.top-actions{gap:8px}.intro{padding:26px 16px 22px}.intro h1{font-size:clamp(34px,12vw,48px);letter-spacing:-2px;margin-top:12px}.intro h1 br{display:none}.intro p{font-size:14px;line-height:1.5}.workspace{padding:0 12px;margin-bottom:30px}.creator-panel,.preview-panel{border-radius:15px}.creator-panel{padding:20px 14px}.steps{gap:0;padding-bottom:18px;margin-bottom:21px}.step-line{min-width:16px;margin:0 7px}.step span{display:none}.step b{width:32px;height:32px}textarea{height:132px;padding:14px 14px 48px}.enhance{left:10px;right:auto;min-height:36px}.chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px;scroll-snap-type:x proximity}.chips button{flex:0 0 auto;min-height:34px;scroll-snap-align:start}.options-grid{grid-template-columns:1fr}.option-card{padding:14px}.segment button{min-height:42px}.styles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.style{min-width:0}.style-image{height:92px}.generate-row{align-items:stretch;flex-direction:column;gap:14px}.cost-box{display:grid;grid-template-columns:1fr auto;align-items:center}.cost-box label,.cost-box .save-draft{grid-column:1/-1}.generate{width:100%;min-height:48px}.preview-panel{display:block;padding:14px}.phone{height:min(68vh,520px);width:min(100%,292px)}.preview-meta{padding:14px 2px}.saved-state{text-align:center;margin:-4px 0 10px}button,.segment button,.audio-actions button,.auth-actions button{touch-action:manipulation}.toast{width:calc(100% - 28px);text-align:center;bottom:max(16px,env(safe-area-inset-bottom))}}
@media(max-width:380px){.intro h1{font-size:34px}.creator-panel{padding-inline:11px}.styles{grid-template-columns:1fr 1fr}.style-image{height:76px}.preview-meta{gap:8px}.preview-meta button{white-space:nowrap}.phone{height:460px}}
@media(min-width:821px) and (max-width:900px){.workspace{grid-template-columns:minmax(0,1fr)}.preview-panel{order:0;display:grid;grid-template-columns:minmax(240px,300px) minmax(0,1fr);column-gap:22px;align-items:start}.preview-head{grid-column:1/-1}.phone{grid-row:2/6;width:100%;height:500px}.preview-meta,.saved-state,.tip{grid-column:2}.saved-state{text-align:left;margin:0 0 12px}}