:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #080b13; color: #f4f7ff; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 50% 44%, #1d3155 0, #0d1424 27%, #080b13 68%); }
.call-shell { min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; padding: 28px clamp(22px, 5vw, 68px); }
header { display: flex; align-items: center; gap: 9px; letter-spacing: .02em; font-size: 14px; color: #dae4ff; }
.brand-dot { height: 9px; width: 9px; border-radius: 50%; background: #9b87ff; box-shadow: 0 0 18px #9b87ff; }
.call-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin: auto; max-width: 550px; width: 100%; }
.eyebrow { color: #aebeff; font-size: 11px; letter-spacing: .16em; font-weight: 700; margin: 0 0 24px; }
.orb-wrap { width: min(48vw, 250px); aspect-ratio: 1; display: grid; place-items: center; position: relative; }
.orb-shadow { position: absolute; width: 66%; height: 12%; bottom: 7%; border-radius: 50%; background: #6e5ccf; filter: blur(19px); opacity: .42; transition: transform .12s ease, opacity .12s ease; }
.orb { width: 71%; aspect-ratio: 1; border-radius: 50%; position: relative; overflow: hidden; background: radial-gradient(circle at 31% 26%, #dbdbff 0, #9385ff 22%, #5b43db 48%, #2e226d 78%); box-shadow: inset -18px -21px 38px #140f40, inset 10px 12px 28px #fff6, 0 0 74px #7866ff77; transform: scale(var(--level, 1)); transition: transform .08s linear; }
.orb i { position: absolute; inset: -24%; border-radius: 45%; background: #ffffff20; animation: drift 6s linear infinite; }
.orb i:nth-child(2) { background: #a4f2ff33; animation-duration: 9s; animation-direction: reverse; }
.orb i:nth-child(3) { background: #3e27b666; animation-duration: 13s; }
@keyframes drift { to { transform: rotate(360deg); } }
h1 { margin: 24px 0 8px; font-size: clamp(27px, 5vw, 42px); letter-spacing: -.045em; }
#callStatus { max-width: 380px; color: #aeb9d2; line-height: 1.5; margin: 0; }
.controls { display: flex; gap: 11px; margin-top: 31px; }
button { border: 0; border-radius: 999px; min-height: 48px; padding: 0 22px; font: inherit; font-weight: 650; cursor: pointer; transition: transform .15s ease, opacity .15s ease; }
button:hover:not(:disabled) { transform: translateY(-1px); } button:disabled { opacity: .45; cursor: default; }
.primary { color: #17122f; background: linear-gradient(120deg, #e6dfff, #a99dff); box-shadow: 0 8px 30px #8c79ff55; }.secondary { color: #e5eaff; background: #ffffff14; border: 1px solid #ffffff1d; }
.error { color: #ffb4b4; max-width: 400px; line-height: 1.4; margin: 19px 0 0; }
.capture-info { max-width: 31rem; margin: 10px auto -8px; color: #9ba9bf; font-size: 12px; line-height: 1.45; }
.audio-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 17px; }
.audio-option { min-height: 34px; padding: 0 13px; color: #bac6df; background: #ffffff0c; border: 1px solid #ffffff1d; font-size: 12px; font-weight: 600; }
.audio-option[aria-pressed="true"] { color: #211943; background: #c9c0ff; border-color: #dcd6ff; }
footer { text-align: center; font-size: 12px; color: #7783a0; }
@media (max-width: 460px) { .call-shell { padding: 22px; } .orb-wrap { width: 230px; } .controls { width: 100%; } button { flex: 1; padding: 0 14px; } }