:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #090d1b; color: #f3f6ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; background: radial-gradient(circle at 50% -15%, #23377a 0, #101a3c 30%, #090d1b 68%); }
.shell { width: min(100%, 680px); min-height: 100svh; padding: 10vh 24px 48px; margin: auto; }
header { text-align: center; }
.eyebrow { margin: 0; color: #93a9ff; font-size: .72rem; font-weight: 750; letter-spacing: .16em; }
h1 { font-size: clamp(3rem, 13vw, 5.2rem); letter-spacing: -.06em; line-height: .95; margin: 12px 0; }
header > p:last-child { color: #b9c2df; }
.card, .transcript-card { border: 1px solid #2d3e78; background: rgba(12, 19, 45, .72); box-shadow: 0 20px 50px #0005; border-radius: 18px; }
.gate { padding: 22px; margin: 40px auto; }
label, h2 { display: block; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #aebbe5; margin-bottom: 10px; }
.gate-row, .controls { display: flex; gap: 10px; }
input { flex: 1; min-width: 0; padding: 14px; border-radius: 10px; border: 1px solid #3c4d87; background: #0c1330; color: inherit; font-size: 1rem; }
button { border: 0; border-radius: 10px; padding: 13px 17px; color: #eef2ff; background: #2d427f; font: inherit; font-weight: 650; cursor: pointer; }
button:hover { background: #3c58a7; } button:disabled { opacity: .48; cursor: not-allowed; }
.hint, .muted { color: #8d99bb; font-size: .86rem; }.hidden { display: none; }
.orb-wrap { display: grid; place-items: center; padding: 36px 0 16px; }.orb { width: min(47vw, 220px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d1dbff, #718aff 22%, #263a89 57%, #101738); box-shadow: 0 0 50px #5d79ff96, inset -15px -20px 40px #050918bb; transition: transform .25s, box-shadow .25s; }.orb[data-mode="listening"] { box-shadow: 0 0 75px #6dd7ff, inset -15px -20px 40px #050918bb; transform: scale(1.04); }.orb[data-mode="speaking"] { animation: pulse .75s ease-in-out infinite alternate; box-shadow: 0 0 100px #a98cff, inset -15px -20px 40px #050918bb; }.orb[data-mode="error"] { box-shadow: 0 0 55px #ff779a; }.state { text-align: center; min-height: 1.5em; color: #bec9eb; }.controls { justify-content: center; margin: 20px 0 28px; }.primary { background: #637eff; }.secondary { background: #263456; }.transcript-card { padding: 18px; }.transcript { max-height: 260px; overflow: auto; line-height: 1.5; }.transcript p { margin: 0 0 12px; }.transcript p[data-speaker="Friday"] { color: #cad4ff; }.transcript p[data-speaker="You"] { color: #a7e8d1; }
@keyframes pulse { from { transform: scale(.98); } to { transform: scale(1.06); } }
@media (max-width: 420px) { .shell { padding-inline: 16px; }.gate-row { flex-direction: column; }.gate-row button { width: 100%; } }