:root { color-scheme: dark; --bg: #07070b; --text: #f7f8ff; --muted: #9aa3b2; --accent: #59d7ff; --accent2: #8b5cf6; }
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: radial-gradient(circle at 50% 25%, rgba(89,215,255,.16), transparent 28rem), radial-gradient(circle at 50% 75%, rgba(139,92,246,.14), transparent 32rem), var(--bg); color: var(--text); }
.start-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 18px; padding: 24px; }
#start-speechwork { border: 0; border-radius: 999px; padding: clamp(22px, 4vw, 34px) clamp(34px, 7vw, 72px); background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #05050a; font-size: clamp(1.3rem, 4vw, 2.4rem); font-weight: 900; letter-spacing: -0.03em; cursor: pointer; box-shadow: 0 28px 90px rgba(89,215,255,.22), 0 14px 44px rgba(139,92,246,.18); transition: transform .18s ease, filter .18s ease, opacity .18s ease; }
#start-speechwork:hover:not(:disabled) { transform: translateY(-2px) scale(1.01); filter: brightness(1.08); }
#start-speechwork:disabled { cursor: default; opacity: .82; }
#speechwork-status { min-height: 1.4em; margin: 0; color: var(--muted); text-align: center; font-size: 1rem; }
#remote-audio { display: none; }