@import "https://fonts.googleapis.com/css2?family=Chivo+Mono:wght@300;400;600&family=Syne:wght@500;600;700&display=swap";
:root{--bg:#070807;--panel:#0c0e0d;--line:#242824;--ink:#f1f2ed;--muted:#777e77;--acid:#d7ff38;--red:#ff4b3e}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--ink);margin:0;font-family:Chivo Mono,monospace}button,input,textarea,select{font:inherit}button{color:inherit}.shell{background:radial-gradient(circle at 32% 15%,#1d241630,transparent 28%),var(--bg);height:100vh;overflow:hidden}.topbar{border-bottom:1px solid var(--line);background:#080908dd;justify-content:space-between;align-items:center;height:64px;padding:0 20px;display:flex}.brand,.top-actions,.brand>div,.top-actions>*{align-items:center;display:flex}.brand{gap:12px}.mark{background:var(--acid);color:#0b0d08;clip-path:polygon(0 0,100% 0,100% 74%,74% 100%,0 100%);justify-content:center;width:34px;height:34px}.brand strong{letter-spacing:.05em;font-family:Syne,sans-serif;font-size:14px}.brand small{color:var(--muted);letter-spacing:.15em;margin-top:3px;font-size:8px;display:block}.top-actions{gap:8px}.top-actions>*{border:1px solid var(--line);letter-spacing:.08em;background:#101210;gap:7px;height:30px;padding:0 10px;font-size:10px}.top-actions button{cursor:pointer}.credit{color:var(--acid)}.live{color:var(--red);border-color:#4e2824}.live i{background:var(--red);border-radius:50%;width:6px;height:6px;animation:1.5s infinite pulse;box-shadow:0 0 0 5px #ff4b3e18}.metric svg{color:var(--red)}.workspace{grid-template-columns:minmax(520px,1fr) 320px 280px;height:calc(100vh - 64px);display:grid}.stage{min-width:0;padding:20px;overflow:auto}.broadcast{aspect-ratio:16/9;background:#161916;border:1px solid #333833;min-height:330px;max-height:calc(100vh - 305px);position:relative;overflow:hidden}.broadcast video{object-fit:cover;filter:saturate(.78)contrast(1.05);width:100%;height:100%}.broadcast:after{content:"";pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 100px #0009}.scanlines{z-index:1;opacity:.13;background:repeating-linear-gradient(0deg,#0000 0 3px,#000 4px);position:absolute;inset:0}.signal-tag{z-index:2;gap:1px;display:flex;position:absolute;top:18px;left:18px}.signal-tag>*{letter-spacing:.12em;background:#0b0d0be8;padding:8px 10px;font-size:9px}.signal-tag span{color:var(--acid)}.caption{z-index:2;background:linear-gradient(#0000,#070807ed);padding:60px 22px 16px;position:absolute;inset:auto 0 0}.caption p,.caption h1{margin:0}.caption p{color:var(--muted);letter-spacing:.14em;font-size:8px}.caption p b{color:var(--acid)}.caption h1{max-width:760px;margin-top:8px;font-family:Syne,sans-serif;font-size:clamp(18px,2vw,28px);line-height:1.12}.controls{align-items:center;gap:10px;margin-top:18px;display:flex}.controls button{cursor:pointer;background:#ffffff0d;border:1px solid #ffffff24;place-items:center;width:28px;height:28px;display:grid}.controls svg{width:13px}.controls span{color:var(--muted);font-size:9px}.timeline{background:#ffffff25;flex:1;height:2px}.timeline i{background:var(--acid);width:38%;height:100%;display:block}.generation-strip{border:1px solid var(--line);background:#0b0d0c;margin-top:14px}.section-head,.panel-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:48px;padding:0 14px;display:flex}.section-head span,.panel-head span{letter-spacing:.13em;font-size:9px}.section-head small{color:var(--muted);margin-top:4px;font-size:7px;display:block}.section-head>b{color:var(--acid);font-size:8px}.cards{background:var(--line);grid-template-columns:repeat(6,1fr);gap:1px;display:grid}.cards article{background:#0b0d0c;min-width:0;padding:8px}.thumb{aspect-ratio:16/9;color:#fff;background-position:50%;background-size:cover;justify-content:center;align-items:center;display:flex;position:relative}.thumb:after{content:"";background:linear-gradient(135deg,#0000,#0008);position:absolute;inset:0}.thumb span{z-index:1;font-size:7px;position:absolute;top:4px;left:5px}.thumb svg{z-index:1;width:15px}.hue-0{background:linear-gradient(135deg,#c35a25,#182532)}.hue-1{background:linear-gradient(135deg,#266a58,#242117)}.hue-2{background:linear-gradient(135deg,#80334c,#15151f)}.hue-3{background:linear-gradient(135deg,#1b5f75,#172335)}.hue-4{background:linear-gradient(135deg,#7a7020,#33261d)}.hue-5{background:linear-gradient(135deg,#6a2921,#151515)}.card-meta{justify-content:space-between;margin-top:7px;display:flex}.card-meta em{text-transform:uppercase;color:var(--muted);font-size:7px;font-style:normal}.card-meta em.generating{color:#ffc83d}.card-meta em.ready{color:var(--acid)}.card-meta small{color:var(--muted);font-size:6px}.cards article p{height:24px;margin:6px 0 0;font-family:Syne,sans-serif;font-size:9px;line-height:1.3;overflow:hidden}.progress{background:#282b27;height:2px;margin-top:6px}.progress i{background:#ffc83d;height:100%;display:block}.chat-panel,.queue-panel{border-left:1px solid var(--line);background:#090b0a;flex-direction:column;min-width:0;height:100%;display:flex}.panel-head span{align-items:center;gap:7px;display:flex}.panel-head svg{width:13px;color:var(--acid)}.panel-head label{color:var(--muted);font-size:8px}.panel-head input{color:#aaa;background:0 0;border:0;outline:none;width:75px;font-size:8px}.panel-head>b{color:var(--acid);font-size:9px}.chat-scroll,.queue-scroll{flex:1;overflow:auto}.chat-scroll{padding:12px}.chat-scroll>div{border-bottom:1px solid #ffffff08;padding:7px 0}.chat-scroll b{color:#aeb5ae;font-size:9px}.chat-scroll em{color:var(--acid);border:1px solid #4a5428;margin-left:7px;padding:2px 4px;font-size:6px;font-style:normal}.chat-scroll p{color:#bdc1bb;margin:4px 0 0;font-family:Syne,sans-serif;font-size:11px;line-height:1.35}.prompt-msg{border-left:2px solid var(--acid);padding-left:8px!important}.chat-form{border-top:1px solid var(--line);padding:12px}.chat-form>div{border:1px solid var(--line);background:#0f1210;display:flex}.chat-form input{color:#fff;background:0 0;border:0;outline:none;flex:1;min-width:0;height:37px;padding:0 10px;font-size:10px}.chat-form button{cursor:pointer;background:0 0;border:0;width:36px}.chat-form svg{width:14px;color:var(--acid)}.chat-form small{color:var(--muted);margin-top:7px;font-size:6px;display:block}.chat-form small b{color:#b6be9d}.queue-scroll article{border-bottom:1px solid var(--line);grid-template-columns:27px 1fr 14px;align-items:start;gap:9px;padding:13px 12px;display:grid}.queue-num{color:#4f554f;font-size:8px}.queue-scroll article em{color:var(--acid);font-size:7px;font-style:normal}.queue-scroll article p{margin:5px 0;font-family:Syne,sans-serif;font-size:10px;line-height:1.35}.queue-scroll article small{color:var(--muted);font-size:6px}.queue-scroll article>svg{color:#4c514c;width:12px}.upload-cta{background:var(--acid);color:#11140b;cursor:pointer;border:1px solid #536125;justify-content:center;align-items:center;gap:8px;height:42px;margin:12px;font-size:9px;font-weight:600;display:flex}.upload-cta svg{width:14px}.upload-cta svg:last-child{margin-left:auto}.empty{text-align:center;color:#565c56;padding:40px 20px;font-size:9px;line-height:2}.modal-bg{z-index:10;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#000c;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:#0e100f;border:1px solid #3a403a;width:min(520px,100%);padding:28px;position:relative;box-shadow:12px 12px #d7ff3812}.close{cursor:pointer;background:0 0;border:0;position:absolute;top:12px;right:12px}.close svg{width:17px}.modal-title small,.field{letter-spacing:.13em;color:var(--acid);font-size:8px}.modal-title h2{margin:7px 0;font-family:Syne,sans-serif;font-size:24px}.modal-title p{color:var(--muted);font-size:10px}.drop{cursor:pointer;background:#ffffff03;border:1px dashed #515751;flex-direction:column;justify-content:center;align-items:center;gap:6px;height:130px;margin:20px 0;display:flex}.drop input{display:none}.drop svg{width:22px;color:var(--acid)}.drop small{color:var(--muted);font-size:7px}.field{display:block}.field textarea{resize:none;border:1px solid var(--line);color:#fff;background:#080a09;outline:none;width:100%;height:78px;margin-top:7px;padding:10px;font-size:11px;display:block}.settings{grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;display:grid}.settings label{color:var(--muted);font-size:7px}.settings select{border:1px solid var(--line);color:#fff;background:#080a09;width:100%;height:35px;margin-top:6px;padding:0 8px;display:block}.generate{background:var(--acid);color:#11140b;cursor:pointer;border:0;justify-content:center;align-items:center;gap:8px;width:100%;height:44px;margin-top:18px;font-size:9px;font-weight:600;display:flex}.generate:disabled{opacity:.35;cursor:not-allowed}.generate svg{width:15px}.generate span{margin-left:auto;margin-right:12px}.toast{z-index:20;background:var(--acid);color:#111;align-items:center;gap:8px;padding:11px 16px;font-size:9px;display:flex;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.toast svg{width:14px}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.45}}.chat-form>div{transition:border-color .18s,box-shadow .18s}.chat-form:focus-within>div,.chat-form.mode-video>div{box-shadow:inset 0 -1px var(--acid);border-color:#59672a}.mode-picker{border:0;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 8px;padding:0;display:grid}.mode-picker label{border:1px solid var(--line);cursor:pointer;background:#101210;align-items:center;gap:7px;min-width:0;padding:7px 8px;transition:border-color .16s,background .16s;display:flex}.mode-picker label:has(input:checked){background:#18200f;border-color:#66762e}.mode-picker input{border-radius:50%;appearance:none!important;background:0 0!important;border:1px solid #626961!important;flex:none!important;width:11px!important;height:11px!important;margin:0!important;padding:0!important}.mode-picker input:checked{box-shadow:0 0 0 1px var(--acid);background:var(--acid)!important;border:3px solid #10130b!important}.mode-picker span{align-items:baseline;gap:5px;min-width:0;display:flex}.mode-picker b{color:#dfe4dc;letter-spacing:.08em;font-size:7px}.mode-picker small{color:var(--muted);white-space:nowrap;margin:0!important;font-size:6px!important}.mode-picker label:has(input:checked) b{color:var(--acid)}.composer>input{color:#fff;background:0 0;border:0;outline:none;flex:1;min-width:0;height:37px;padding:0 10px;font-size:10px}.chat-panel{min-height:0;overflow:hidden}.chat-panel>.panel-head,.chat-form{flex:none}.chat-scroll{overscroll-behavior:contain;scrollbar-gutter:stable;min-height:0;overflow:hidden auto}.chat-scroll::-webkit-scrollbar{width:5px}.chat-scroll::-webkit-scrollbar-track{background:#090b0a}.chat-scroll::-webkit-scrollbar-thumb{background:#353b32}.chat-scroll::-webkit-scrollbar-thumb:hover{background:var(--acid)}.timeline{cursor:pointer;overflow:hidden}.timeline i{width:0;transition:width .12s linear}.controls span{white-space:nowrap;text-align:center;min-width:66px}.cards article.playable{cursor:pointer;outline:none;transition:background .16s,box-shadow .16s,transform .16s}.cards article.playable:hover,.cards article.playable:focus-visible{background:#151a12;transform:translateY(-1px);box-shadow:inset 0 0 0 1px #64732f}.cards article.selected{box-shadow:inset 0 0 0 1px var(--acid);background:#17200f}.thumb-preview{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.thumb svg.card-play{box-sizing:content-box;fill:#fff;filter:drop-shadow(0 2px 5px #000);background:#070807b8;border:1px solid #fff8;border-radius:50%;width:16px;height:16px;padding:6px}@media (max-width:1150px){.workspace{grid-template-columns:minmax(500px,1fr) 300px}.queue-panel{display:none}.cards{grid-template-columns:repeat(3,1fr)}.cards article:nth-child(n+4){display:none}}@media (max-width:760px){.shell{height:auto;min-height:100vh;overflow:auto}.topbar{z-index:5;position:sticky;top:0}.mobile-hide{display:none!important}.workspace{height:auto;display:block}.stage{padding:10px}.broadcast{min-height:0;max-height:none}.caption{padding:40px 14px 12px}.caption h1{font-size:17px}.generation-strip{margin-bottom:10px}.cards{grid-template-columns:repeat(2,1fr)}.cards article:nth-child(n+3){display:none}.chat-panel{border:1px solid var(--line);height:540px;margin:10px}.top-actions{gap:4px}.top-actions>*{padding:0 7px}.brand small{display:none}}.brand-divider{color:#515851;margin-left:2px;font-size:17px;font-weight:300}.powered-by{color:#9ba29b;letter-spacing:.11em;text-transform:uppercase;white-space:nowrap;font-size:7px;text-decoration:none;transition:color .18s}.powered-by:hover{color:var(--acid)}@media (max-width:760px){.brand-divider,.powered-by{display:none}}.powered-by{color:#cbd2c7;letter-spacing:.08em;background:#111510;border:1px solid #3b4338;align-items:center;gap:7px;min-height:30px;padding:0 10px;font-size:9px;font-weight:600;display:inline-flex;box-shadow:inset 0 0 0 1px #ffffff05}.powered-by svg{width:11px;height:11px;color:var(--acid);transition:transform .18s}.powered-by:hover,.powered-by:focus-visible{color:#fff;background:#1a2113;border-color:#71813a;outline:none;box-shadow:0 0 0 2px #d7ff3820}.powered-by:hover svg{transform:translate(1px,-1px)}@media (max-width:760px){.brand-divider{display:none}.powered-by{min-height:26px;padding:0 7px;font-size:7px;display:inline-flex}.powered-by svg{width:9px;height:9px}}html,body,button,input,textarea,select{font-size:14px}.brand strong{font-size:17px}.brand small{font-size:10px}.top-actions>*,.section-head span,.panel-head span{font-size:12px}.section-head small{font-size:10px}.section-head>b,.panel-head>b,.caption p,.controls span{font-size:11px}.chat-scroll b{font-size:12px}.chat-scroll em{font-size:9px}.chat-scroll p{font-size:14px;line-height:1.5}.chat-scroll>div{padding:10px 0}.composer>input,.chat-form input{height:42px;font-size:14px}.mode-picker b{font-size:10px}.mode-picker small{font-size:9px!important}.queue-scroll article p{font-size:14px;line-height:1.45}.queue-scroll article em{font-size:10px}.queue-scroll article small,.queue-num{font-size:9px}.cards article p{height:34px;font-size:12px;line-height:1.4}.card-meta em{font-size:9px}.card-meta small{font-size:8px}.thumb span{font-size:9px}.upload-cta{font-size:12px}.modal-title small,.field{font-size:11px}.modal-title p{font-size:14px}.drop b{font-size:12px}.drop small{font-size:10px}.field textarea{font-size:14px}.settings label{font-size:10px}.generate{font-size:12px}.powered-by{font-size:10px}.caption{padding-top:38px}.caption h1{max-width:84%;margin-top:6px;font-size:clamp(16px,1.35vw,21px);line-height:1.2}.caption p{font-size:10px}.controls{margin-top:12px}@media (max-width:760px){.caption{padding-top:28px}.caption h1{max-width:92%;font-size:15px;line-height:1.2}}