@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");:root{color-scheme:dark;--bg:#070a10;--panel:#101722;--line:#253446;--muted:#91a2b7;--cyan:#65dcff;--white:#edf6ff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 60% -20%,#12314b 0,transparent 45%),var(--bg);color:var(--white);font:14px/1.5 Inter,system-ui,sans-serif}button,textarea{font:inherit}button{cursor:pointer}.shell{max-width:1200px;margin:auto;padding:22px}.top{justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px}.brand,.top{display:flex;align-items:center}.brand{gap:12px}.mark{font-size:24px;font-weight:900;color:var(--cyan);border:1px solid #356b88;padding:5px 10px;border-radius:12px}.brand h1{margin:0;font-size:16px;letter-spacing:1px}.brand h1 span,.eyebrow{color:var(--cyan)}.eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase}.status{font-size:11px;color:#9ae9be}.status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#69e5a6;margin-right:6px}.hero{display:grid;grid-template-columns:1fr 320px;grid-gap:25px;gap:25px;align-items:center;padding:32px 0}.hero h2{font-size:clamp(36px,5vw,58px);line-height:1.04;letter-spacing:-2.5px;margin:10px 0}.hero h2 span{color:var(--cyan)}.hero p{max-width:600px;color:#b2c3d5;font-size:15px}.hero-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.hero-tags span,.pill{font-size:10px;border:1px solid var(--line);border-radius:9px;padding:7px 9px;color:#b8d8eb}.device{height:250px;border:1px solid #5687a7;border-radius:24px;padding:15px;background:linear-gradient(145deg,#12314b,#080e16 60%,#143b56);box-shadow:0 20px 65px #0008;flex-direction:column;align-items:center}.device,.devicebar{display:flex;justify-content:space-between}.devicebar{width:100%;font-size:9px;color:#b3d6e9}.glow{width:100px;height:100px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 30% 30%,#e3fcff,#39b8f5 25%,#0d4179 65%,#08111d);box-shadow:0 0 35px #24a7ff66;font-size:30px;font-weight:900}.device strong{font-size:18px}.device small{color:#9bb5c8}.device-line{height:3px;width:60px;background:#7294aa;border-radius:8px}.workspace{display:grid;grid-template-columns:1.08fr .92fr;grid-gap:15px;gap:15px}.panel,.results{border:1px solid var(--line);background:linear-gradient(150deg,#111a26,#0b111a);border-radius:17px;padding:19px}.panel-head,.result-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.panel h3,.results h3{margin:3px 0 14px;font-size:20px;letter-spacing:-.5px}.composer label{display:block;color:#c5d6e5;font-size:12px;margin:12px 0 7px}.composer textarea{width:100%;min-height:140px;resize:vertical;background:#080e16;border:1px solid #2a3d50;border-radius:12px;padding:13px;color:#fff;outline:none}.composer textarea:focus{border-color:var(--cyan)}.input-actions{display:flex;gap:8px;margin-top:10px}.primary,.secondary{padding:10px 13px;border-radius:10px;border:1px solid var(--line);font-weight:700;font-size:12px}.primary{background:linear-gradient(120deg,#38bde9,#287aff);color:#04111b;border:0}.primary:disabled,.secondary:disabled{opacity:.4;cursor:not-allowed}.secondary{background:#111c2a;color:var(--white)}.listening{border-color:#f77;color:#faa}.samples{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:16px}.samples span{font-size:9px;letter-spacing:1px;color:var(--muted);margin-right:4px}.samples button{background:transparent;border:1px solid #26384b;border-radius:8px;color:#bdd3e4;padding:6px 8px;font-size:10px}.statusline{font-size:11px;color:var(--cyan);min-height:16px;margin:14px 0 0}.modes{display:flex;gap:6px;margin-bottom:12px}.mode{flex:1 1;border:1px solid var(--line);background:#0a111a;color:#a9bdcf;padding:8px;border-radius:9px;font-size:11px}.mode.active{border-color:var(--cyan);color:#fff;background:#10283a}.mock{height:270px;border:1px solid #547a95;border-radius:17px;padding:13px;background:linear-gradient(145deg,#12334b,#070d17 70%);flex-direction:column;overflow:hidden}.mock,.mock-top{display:flex;justify-content:space-between}.mock-top{font-size:9px;color:#a8c9dd}.mock-orb{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;align-self:center;background:radial-gradient(circle at 30% 30%,#d9fbff,#43bffb 20%,#1264aa 55%,#071326);box-shadow:0 0 25px #24a7ff66;font-size:25px;font-weight:900}.mock>div:nth-child(3){display:flex;flex-direction:column;gap:3px}.mock small{display:block;color:#9cb8cb;font-size:10px}.mock-button{background:#153d56;border:1px solid #2b6a8c;padding:8px;border-radius:8px;text-align:center;color:#c8f3ff;font-size:10px;margin-top:8px}.split-panels{display:grid;grid-template-columns:1fr 1fr;grid-gap:8px;gap:8px;flex:1 1;padding-top:10px}.split-panels>div{border:1px solid #25445a;background:#0b1724;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:12px}.canvas-toolbar,.split-panels b{font-size:9px;color:var(--cyan)}.canvas-toolbar{display:flex;justify-content:space-around;padding:8px;border:1px solid #284256;border-radius:8px}.canvas-card{align-self:center;width:75%;border:1px solid #35566c;background:#102235;padding:13px;border-radius:12px}.canvas-shape{height:85px;border-radius:8px;background:linear-gradient(130deg,#174b68,#1e7a9c,#071626);margin-bottom:10px}.muted,.result-head p{color:var(--muted);font-size:11px}.results{margin-top:16px}.result-head h3{margin-bottom:2px}.tabs{display:flex;gap:7px;border-bottom:1px solid var(--line);margin:15px 0;padding-bottom:9px;overflow:auto}.tab{background:transparent;border:0;color:var(--muted);padding:8px 11px;border-radius:8px;white-space:nowrap;font-size:12px}.tab.active{background:#15384e;color:#e2f8ff}.screen-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px;gap:10px}.output-card,.screen-card{border:1px solid #25394b;background:#0b121c;border-radius:12px;padding:14px}.screen-num{font-size:9px;letter-spacing:1.3px;color:var(--cyan)}.output-card h4,.screen-card h4{margin:8px 0;font-size:14px}.output-card li,.output-card p,.screen-card p{color:#aebfd0;font-size:12px}.component-list{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}.component-list span{font-size:9px;color:#b5d5e8;border:1px solid #263c4e;padding:4px 6px;border-radius:6px}.output-card{padding:18px}.empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 10px;text-align:center;color:var(--muted)}.empty b{color:#e5f2fc}.empty-icon{font-size:30px;color:var(--cyan)}footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:25px;padding:17px 0;color:var(--muted);font-size:10px}@media(max-width:780px){.shell{padding:15px}.hero{grid-template-columns:1fr;padding:25px 0}.device{display:none}.screen-grid,.workspace{grid-template-columns:1fr}.panel,.results{padding:14px}.result-head{align-items:start}.hero h2{letter-spacing:-1.8px}.input-actions{flex-wrap:wrap}.input-actions button{flex:1 1}.status{font-size:9px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}