*{box-sizing:border-box}html,body{height:100%}
:root{
  --bg:#0f1220;
  --panel:#151937;
  --border:#232642;
  --text:#e7e9ee;
  --muted:#a7a9b4;
  --accent:#21d06b;
}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;margin:0;background:var(--bg);color:var(--text)}
a{color:var(--accent)}
.site-header, .site-footer{padding:14px 18px;background:#11142a;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.site-footer{border-top:1px solid var(--border);border-bottom:none;margin-top:18px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;object-fit:contain;border-radius:8px;background:#0e0;box-shadow:0 0 0 2px rgba(0,0,0,.15) inset}
.brand-text .sitg{margin:0;font-size:18px;letter-spacing:.5px}
.tagline{font-size:12px;color:var(--muted)}
main{padding:16px 18px;max-width:1000px;margin:0 auto}
.hero{margin:0 0 12px 0}
.card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;margin-bottom:14px}
label{display:block;margin-bottom:8px}
select,button,input{font:inherit}
#player.hidden{display:none}
#videoFrame{height:220px;border-radius:12px;background:linear-gradient(135deg,#1d2144,#0a0e2b);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:12px;position:relative;overflow:hidden}
#sceneOverlay{padding:16px;text-align:center}
#sceneTitle{font-weight:700;margin-bottom:6px}
#scenePrompt{opacity:.9}
#io{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
#textControls{display:flex;gap:8px;flex:1}
#textInput{flex:1;padding:10px;border-radius:10px;border:1px solid #334; background:#0c102b; color:var(--text)}
.btn{padding:10px 14px;border:1px solid #334;background:linear-gradient(#18224b,#121a3c);color:var(--text);border-radius:10px;cursor:pointer;transition:transform .02s ease, box-shadow .15s ease;box-shadow:0 0 0 0 rgba(33,208,107,0)}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px -10px var(--accent)}
.btn.secondary{background:#1a1f45}
#transcript{min-height:90px;background:#0c102b;border:1px solid var(--border);border-radius:10px;padding:10px;white-space:pre-wrap}
#scoreBox{margin:8px 0 12px 0}
.muted{color:var(--muted)}
.voice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.voice-actions{display:flex;align-items:center;gap:12px;margin-top:10px}