:root { color-scheme: dark; --ink:#f2f0e7; --muted:#a8a69d; --line:#343833; --panel:#171a17; --acid:#ccff33; --red:#ff5d4a; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:radial-gradient(circle at 85% 0,#273017 0,transparent 33%),#0c0e0c; color:var(--ink); font:15px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace; }
main { width:min(1120px,calc(100% - 32px)); margin:0 auto; padding:38px 0 70px; }
header,.hero,.actions,.token-row { display:flex; align-items:center; justify-content:space-between; gap:20px; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:0; font:800 clamp(27px,4vw,48px)/1 system-ui,sans-serif; letter-spacing:-.04em; } h2 { font-size:32px; margin-bottom:8px; } h3 { font-size:20px; }
.eyebrow,.label { color:var(--acid); font-size:11px; letter-spacing:.16em; font-weight:800; }
.pill { padding:8px 12px; border:1px solid var(--line); border-radius:999px; color:var(--muted); }
.panel { background:color-mix(in srgb,var(--panel) 95%,transparent); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:0 20px 60px #0005; }
.hero { margin:28px 0 14px; min-height:150px; }
.signal { display:flex; align-items:center; gap:10px; color:var(--muted); white-space:nowrap; }.signal i { width:14px;height:14px;border-radius:50%;background:#555; }.signal.live { color:var(--acid); }.signal.live i { background:var(--acid);box-shadow:0 0 24px var(--acid); }
.metrics { display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px; }.metrics article { display:flex;flex-direction:column; }.metrics span,.metrics small { color:var(--muted); }.metrics strong { font:800 31px/1.4 system-ui,sans-serif; }
.grid { display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-bottom:14px; }
.preview-panel { display:grid;grid-template-columns:.7fr 1.3fr;gap:24px;align-items:center;margin-bottom:14px; }.preview-panel video { width:100%;max-height:440px;background:#050605;border:1px solid var(--line);border-radius:12px; }.preview-panel p { color:var(--muted); }
textarea,input { width:100%;border:1px solid var(--line);border-radius:10px;background:#0d100d;color:var(--ink);padding:13px;font:inherit;outline:none; } textarea { min-height:125px;resize:vertical;margin:10px 0 14px; } textarea:focus,input:focus { border-color:var(--acid); }
button { appearance:none;border:0;border-radius:9px;background:var(--acid);color:#111;padding:11px 16px;font:800 13px ui-monospace,monospace;cursor:pointer; } button.secondary { background:#262a25;color:var(--ink);border:1px solid var(--line); } button:hover { filter:brightness(1.08); }
button:disabled { cursor:not-allowed;opacity:.45;filter:none; }
.ideas { display:grid;gap:9px;max-height:230px;overflow:auto; }.idea { border-left:2px solid var(--acid);padding-left:10px; }.idea b { color:var(--acid); }.idea p { margin:2px 0;color:var(--muted); }
.live-chat { grid-column:1 / -1; }.chat-help { color:var(--muted); }.chat-help code { color:var(--acid); }.chat-feed { min-height:110px;max-height:280px;padding:12px;background:#0d100d;border:1px solid var(--line);border-radius:10px;margin-bottom:14px; }.chat-compose { display:grid;grid-template-columns:180px 1fr auto;gap:10px;align-items:end; }.chat-compose textarea { min-height:50px;height:50px;margin:0; }.chat-compose button { height:50px; }.chat-compose input { height:50px; }
.status-panel { color:var(--muted); }.status-panel .token-row { margin:14px 0 0; }.token-row input { max-width:360px; }.error { color:var(--red)!important; }
@media(max-width:800px){.metrics{grid-template-columns:1fr 1fr}.grid,.preview-panel{grid-template-columns:1fr}.hero{align-items:flex-start;flex-direction:column}.actions,.chat-compose{align-items:stretch;grid-template-columns:1fr;flex-direction:column}.actions button,.chat-compose button{width:100%}.chat-compose textarea{height:88px}}