@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap');

:root{--bg:#090b10;--panel:#11141c;--panel2:#171b25;--line:#252b39;--text:#f1f3f8;--muted:#8f98aa;--accent:#9d7bff;--cyan:#5eead4;--danger:#fb7185;--shadow:0 22px 60px #0008}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 78% -10%,#2e1d5738,transparent 36%),var(--bg);color:var(--text);font-family:'DM Sans',system-ui,sans-serif;min-height:100vh}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1480px)/2));border-bottom:1px solid #ffffff0d;background:#090b10cc;backdrop-filter:blur(16px);position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,var(--accent),#6947cf);font-weight:700;box-shadow:0 8px 30px #8b5cf64f}.brand strong,.brand small{display:block}.brand strong{line-height:1.05}.brand small{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:3px}.badge{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:12px;font-weight:600;text-transform:capitalize}.badge i{width:7px;height:7px;border-radius:50%;background:#64748b}.badge.live,.badge.recognizing{color:#c8fff6;border-color:#5eead43b;background:#5eead40c}.badge.live i{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.badge.recognizing i{background:var(--accent);box-shadow:0 0 10px var(--accent);animation:pulse 1s infinite}.badge.error{color:#fecdd3;border-color:#fb718548}.badge.error i{background:var(--danger)}.badge small{font:500 10px 'JetBrains Mono',monospace;color:var(--muted);padding-left:7px;border-left:1px solid var(--line)}@keyframes pulse{50%{opacity:.35}}
main{width:min(1480px,calc(100% - 48px));margin:28px auto 50px}.hero-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(320px,.7fr);gap:20px}.side-stack{display:grid;grid-template-rows:1fr auto;gap:20px}.card{background:linear-gradient(145deg,#141822,#0f1219);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.card-head{padding:19px 21px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}h1,h2{font-size:18px;line-height:1.2;margin:3px 0 0}.eyebrow{font:500 10px 'JetBrains Mono',monospace;color:var(--accent);letter-spacing:.14em;margin:0}.mono{font:500 11px 'JetBrains Mono',monospace;color:var(--muted)}.viewport{position:relative;aspect-ratio:1/2;background:#050609;display:grid;place-items:center;overflow:hidden}.viewport img{display:block;width:100%;height:100%;object-fit:contain}.scanline{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#fff0 50%,#00000012 50%);background-size:100% 4px;opacity:.28}.summary-card{min-height:270px}.summary{font-size:17px;line-height:1.65;margin:0;padding:24px 22px;color:#dce1ec;white-space:pre-wrap}.spark{color:var(--accent);font-size:20px}.error{margin:0 22px 22px;padding:11px;border:1px solid #fb71854a;border-radius:9px;background:#fb718511;color:#fecdd3;font-size:12px}.metrics{display:grid;grid-template-columns:1fr 1fr;padding:13px}.metrics div{padding:15px 10px;border-radius:10px}.metrics span,.metrics small{display:block}.metrics span{font:600 21px 'JetBrains Mono',monospace}.metrics small{color:var(--muted);font-size:10px;margin-top:5px;text-transform:uppercase;letter-spacing:.07em}.controls-card{margin-top:20px}.controls-head{gap:20px}.save-wrap{display:flex;align-items:center;gap:12px}#saveStatus{color:var(--muted);font-size:12px}button{border:0;border-radius:10px;padding:10px 17px;background:linear-gradient(135deg,var(--accent),#7655df);color:white;font:600 13px inherit;cursor:pointer;box-shadow:0 8px 24px #7955e538;transition:.18s}button:hover,.button-link:hover{transform:translateY(-1px);filter:brightness(1.08)}button:disabled{opacity:.5;transform:none}.recording-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-top:1px solid var(--line);background:#0b0e14}.recording-bar>span{font:500 12px 'JetBrains Mono',monospace;color:var(--muted)}.recording-actions{display:flex;align-items:center;gap:9px}.danger-button{background:linear-gradient(135deg,#ef476f,#be123c)}.button-link{display:inline-block;border-radius:10px;padding:10px 17px;background:linear-gradient(135deg,var(--cyan),#0f9f91);color:#061312;text-decoration:none;font:600 13px inherit;box-shadow:0 8px 24px #2dd4bf2b;transition:.18s}.button-link[hidden]{display:none}form{padding:21px}.prompt-field{display:block}.prompt-field>span,label>span{display:block;color:#b9c0cf;font-size:12px;font-weight:600;margin-bottom:7px}textarea,input{width:100%;border:1px solid #303747;border-radius:9px;background:#0b0e14;color:var(--text);font:500 13px inherit;outline:none;transition:border .15s,box-shadow .15s}textarea{padding:13px;resize:vertical;line-height:1.5}input{height:40px;padding:0 11px}textarea:focus,input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #9d7bff19}.control-groups{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:19px}fieldset{margin:0;border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:11px}legend{padding:0 6px;color:#d5d9e3;font-size:12px;font-weight:700}legend em{font-style:normal;color:var(--muted);font-weight:400}footer{text-align:center;color:#60697b;font-size:11px;padding:0 20px 28px}footer span{color:var(--accent);padding:0 5px}
@media(max-width:650px){.recording-bar{align-items:flex-start;flex-direction:column}.recording-actions{width:100%;flex-wrap:wrap}.recording-actions button,.recording-actions .button-link{flex:1;text-align:center}}@media(max-width:1050px){.hero-grid{grid-template-columns:1fr}.side-stack{grid-template-columns:1fr 1fr;grid-template-rows:auto}.control-groups{grid-template-columns:1fr 1fr}}@media(max-width:650px){.topbar{height:66px;padding:0 16px}main{width:calc(100% - 24px);margin-top:12px}.side-stack{grid-template-columns:1fr}.card{border-radius:14px}.card-head{padding:15px}.summary{padding:18px;font-size:15px}.controls-head{align-items:flex-start}.save-wrap{flex-direction:column-reverse;align-items:flex-end}.control-groups{grid-template-columns:1fr}form{padding:15px}.brand small{display:none}}