:root{color-scheme:dark;--bg:#090d16;--panel:rgba(15,23,42,.72);--line:rgba(148,163,184,.2);--text:#f8fafc;--muted:#cbd5e1;--cyan:#22d3ee;--violet:#a855f7;--orange:#fb923c}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--text);background:radial-gradient(circle at top left,rgba(34,211,238,.18),transparent 30rem),radial-gradient(circle at 90% 0,rgba(168,85,247,.16),transparent 32rem),var(--bg);overflow-x:hidden}.orb{position:fixed;border-radius:999px;filter:blur(22px);opacity:.35;pointer-events:none}.orb-a{width:18rem;height:18rem;background:var(--cyan);left:-6rem;top:8rem}.orb-b{width:22rem;height:22rem;background:var(--violet);right:-8rem;bottom:4rem}.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem clamp(1rem,5vw,4rem);border-bottom:1px solid var(--line);background:rgba(9,13,22,.78);backdrop-filter:blur(18px)}.brand{display:flex;align-items:center;gap:.75rem;color:var(--text);text-decoration:none;font-weight:900;letter-spacing:.08em}.brand img{width:46px;height:46px;border-radius:14px}.topbar nav{display:flex;gap:1rem}.topbar a{color:var(--muted);text-decoration:none}.topbar a:hover{color:var(--cyan)}main{width:min(1180px,calc(100% - 2rem));margin:0 auto}.hero{text-align:center;padding:clamp(4rem,9vw,7rem) 0 2.5rem}.kicker{text-transform:uppercase;letter-spacing:.18em;color:var(--cyan);font-size:.78rem;font-weight:900}.hero h1{margin:.4rem auto 1rem;max-width:900px;font-size:clamp(2.4rem,7vw,5.5rem);line-height:.94;letter-spacing:-.065em}.hero p{max-width:760px;margin:0 auto;color:var(--muted);font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.75}.generator{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr);gap:1.25rem;align-items:start}.panel{border:1px solid var(--line);border-radius:30px;background:linear-gradient(145deg,rgba(15,23,42,.84),rgba(15,23,42,.48));box-shadow:0 26px 80px rgba(0,0,0,.28);padding:clamp(1.25rem,3vw,2rem)}form{display:grid;gap:1rem}label{display:grid;gap:.55rem;color:var(--muted);font-weight:750}select,textarea{width:100%;border:1px solid var(--line);border-radius:18px;background:#0f172a;color:var(--text);padding:.95rem 1rem;font:inherit}textarea{min-height:130px;resize:vertical;line-height:1.55}button,.actions a{border:0;border-radius:999px;padding:1rem 1.25rem;font-weight:900;cursor:pointer;text-decoration:none;text-align:center;color:#071018;background:linear-gradient(135deg,var(--cyan),#a7f3d0);box-shadow:0 16px 40px rgba(34,211,238,.18)}button:hover,.actions a:hover{transform:translateY(-1px)}.result h2{margin:.3rem 0 .75rem;font-size:clamp(1.8rem,4vw,3.3rem);letter-spacing:-.045em;line-height:1}.result p,.steps li{color:var(--muted);line-height:1.7}.steps{margin-top:1.5rem}.steps ul{display:grid;gap:.75rem;padding:0;list-style:none}.steps li{display:flex;gap:.65rem}.steps li:before{content:"✓";display:grid;place-items:center;flex:0 0 1.35rem;height:1.35rem;border-radius:50%;background:linear-gradient(135deg,var(--cyan),var(--violet));color:#071018;font-weight:900}.promptBox{margin-top:1.5rem}.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:.9rem}.actions button{background:linear-gradient(135deg,var(--violet),var(--orange));color:white}.examples{padding:clamp(3rem,7vw,5rem) 0}.examples h2{font-size:clamp(2rem,4vw,3.5rem);letter-spacing:-.05em}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.cards article{padding:1.4rem;border:1px solid var(--line);border-radius:24px;background:rgba(15,23,42,.55)}.cards span{color:var(--cyan);font-weight:900}.cards h3{margin:.6rem 0}.cards p{color:var(--muted);line-height:1.65}footer{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;width:min(1180px,calc(100% - 2rem));margin:0 auto;padding:2rem 0 3rem;color:var(--muted);border-top:1px solid var(--line)}footer a{color:var(--cyan);text-decoration:none}@media(max-width:850px){.generator,.cards{grid-template-columns:1fr}.topbar nav{display:none}}@media(max-width:520px){main{width:min(100% - 1rem,1180px)}.hero{text-align:left}.actions>*{width:100%}.panel{border-radius:24px}}