:root {
  --bg: #0d1117;
  --panel: #161b22;
  --panel-2: #1f2937;
  --fg: #f7f7f2;
  --muted: #a1a1aa;
  --accent: #f59e0b;
  --accent-2: #f97316;
}
* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at top, #1f2937 0, #0d1117 55%); color: var(--fg); font-family: "Avenir Next", "Segoe UI", sans-serif; }
.topbar, .panel { backdrop-filter: blur(14px); background: rgba(13,17,23,.78); }
.topbar { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid rgba(255,255,255,.08); z-index: 10; }
.topbar .actions, .controls, .grid, .toggles { display: flex; gap: 12px; flex-wrap: wrap; }
.muted, .hint { color: var(--muted); }
button, a { border: 0; border-radius: 10px; padding: 12px 16px; text-decoration: none; color: #101010; background: linear-gradient(135deg, var(--accent), var(--accent-2)); font-weight: 700; cursor: pointer; }
main#viewport { min-height: calc(100vh - 64px); padding: 10vh 10vw 20vh; overflow: hidden; }
.teleprompter { white-space: pre-wrap; font-size: 58px; line-height: 1.35; transform-origin: center center; }
body.remote { min-height: 100vh; display: grid; place-items: center; padding: 18px; }
.panel { width: min(920px, 100%); padding: 24px; border: 1px solid rgba(255,255,255,.08); border-radius: 24px; box-shadow: 0 25px 90px rgba(0,0,0,.35); }
h1 { margin-top: 0; font-size: 2rem; }
label { display: grid; gap: 8px; font-weight: 600; }
textarea { width: 100%; min-height: 280px; resize: vertical; border-radius: 16px; padding: 16px; border: 1px solid rgba(255,255,255,.1); background: var(--panel); color: var(--fg); font: inherit; }
input[type=\"range\"] { width: 100%; }
.grid > label { flex: 1 1 220px; }
@media (max-width: 720px) { main#viewport { padding: 8vh 6vw 20vh; } .teleprompter { font-size: 42px; } .panel { padding: 18px; } }