*{box-sizing:border-box} :root{--bg:#07080d;--card:#11131b;--text:#f4f5fb;--muted:#9ba2b4;--line:rgba(255,255,255,.08);--accent:#b77cff;--accent2:#64e3ff}
html{scroll-behavior:smooth} body{margin:0;background:radial-gradient(circle at 20% -10%,rgba(131,85,255,.22),transparent 35%),radial-gradient(circle at 90% 20%,rgba(75,222,255,.12),transparent 30%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}
.shell{width:min(1120px,calc(100% - 40px));margin:auto}.nav{height:88px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:800;letter-spacing:-.03em;font-size:20px;display:flex;gap:10px;align-items:center}.orb{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 24px rgba(183,124,255,.8)}.badge{font-size:11px;letter-spacing:.18em;color:#cbd0dc;border:1px solid var(--line);padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.03)}
.hero{padding:84px 0 72px;text-align:center}.eyebrow,.kicker{font-size:12px;letter-spacing:.22em;color:#aab2c4;font-weight:700}.hero h1{font-size:clamp(52px,8vw,92px);line-height:.94;letter-spacing:-.07em;margin:20px auto 26px;max-width:900px}.hero h1 span{background:linear-gradient(90deg,#fff 10%,#b77cff 55%,#64e3ff);-webkit-background-clip:text;background-clip:text;color:transparent}.lead{max-width:720px;margin:0 auto;color:var(--muted);font-size:18px;line-height:1.7}
.composer{max-width:820px;margin:42px auto 0;border:1px solid rgba(255,255,255,.12);border-radius:24px;background:rgba(14,16,24,.82);box-shadow:0 28px 80px rgba(0,0,0,.36),inset 0 1px rgba(255,255,255,.03);overflow:hidden;backdrop-filter:blur(18px)}textarea{width:100%;height:150px;resize:none;background:transparent;border:0;outline:0;color:#fff;padding:24px;font:inherit;font-size:19px;line-height:1.55}textarea::placeholder{color:#666f82}.composer-bottom{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 16px 22px;border-top:1px solid var(--line)}#counter{font-size:12px;color:#737c8f}button{font:inherit;cursor:pointer}.composer button,.primary{border:0;color:#0b0c12;font-weight:800;background:linear-gradient(135deg,#d3b2ff,#7ee9ff);padding:14px 18px;border-radius:14px;box-shadow:0 8px 28px rgba(128,119,255,.23);transition:.2s}.composer button:hover,.primary:hover{transform:translateY(-1px);filter:brightness(1.08)}
.examples{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}.examples button,.secondary{color:#aab2c4;background:rgba(255,255,255,.035);border:1px solid var(--line);border-radius:999px;padding:10px 14px}.examples button:hover,.secondary:hover{color:#fff;border-color:rgba(255,255,255,.18)}
.result{padding:28px 0 90px;animation:rise .5s ease both}.hidden{display:none}.result-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:22px}.result h2{margin:8px 0 0;font-size:42px;letter-spacing:-.05em}.live{font-size:11px;letter-spacing:.12em;color:#93f3b2;border:1px solid rgba(103,255,153,.18);padding:8px 11px;border-radius:999px}.live i{display:inline-block;width:7px;height:7px;background:#72ee9b;border-radius:50%;margin-right:7px;box-shadow:0 0 14px #72ee9b}
.grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.card{min-height:200px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025));border:1px solid var(--line);border-radius:22px;padding:24px}.featured{background:radial-gradient(circle at 100% 0,rgba(183,124,255,.18),transparent 40%),linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025))}.icon{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.06);color:#d9c4ff}.card h3{font-size:14px;color:#c5cad6;margin:22px 0 10px}.card p,.card li{color:#9fa7ba;line-height:1.65}.card ul{padding-left:18px;margin-bottom:0}.cta-row{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.secondary,.primary{border-radius:12px;padding:12px 16px}.secondary{background:transparent}footer{text-align:center;color:#5f6677;border-top:1px solid var(--line);padding:28px 0 46px;font-size:13px}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media(max-width:760px){.nav{height:72px}.hero{padding-top:52px}.lead{font-size:16px}.grid{grid-template-columns:1fr}.result-head{align-items:flex-start;gap:16px;flex-direction:column}.hero h1{font-size:52px}.composer{border-radius:18px}}