:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #07080d; color: #f5f4f0; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { min-width: 320px; margin: 0; background: radial-gradient(circle at 50% 44%, rgba(62, 72, 158, .11), transparent 35rem), #07080d; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible { outline: 2px solid #d2d7ff; outline-offset: 4px; }
button:disabled { cursor: not-allowed; opacity: .44; }

#experience { --page-padding: max(24px, env(safe-area-inset-left)); --control-zone-min-height: 192px; position: relative; isolation: isolate; display: grid; grid-template-rows: 36px minmax(0, 1fr) minmax(var(--control-zone-min-height), auto); row-gap: 12px; min-height: 100vh; min-height: 100dvh; max-width: 880px; margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) var(--page-padding) max(22px, env(safe-area-inset-bottom)); overflow: hidden; }
#experience::before { position: absolute; z-index: -2; inset: 0; background: radial-gradient(ellipse at 50% 43%, rgba(104, 104, 223, .1), transparent 47%); content: ""; transition: opacity 700ms ease-out; }
.identity { display: flex; align-items: center; gap: 9px; min-height: 36px; letter-spacing: .125em; }
.identity h1 { margin: 0; font-size: 12px; font-weight: 650; }
.identity-dot { width: 5px; height: 5px; border-radius: 50%; background: #a5afff; box-shadow: 0 0 18px #8290ff; }

#stage { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; width: 100%; height: 100%; overflow: clip; }
#intro, #orb { grid-area: 1 / 1; min-width: 0; min-height: 0; }
#intro { width: 100%; height: 100%; }
#intro { z-index: 2; display: grid; place-items: center; transition: opacity 800ms ease-out, transform 900ms cubic-bezier(.16, 1, .3, 1); }
#intro-media { position: relative; width: min(76vw, 332px); max-height: 100%; aspect-ratio: 1 / 1.12; display: grid; place-items: center; overflow: hidden; border-radius: 52% 48% 50% 50% / 48% 52% 48% 52%; }
#intro-media picture, #intro-media img, #intro-media video { display: block; width: 100%; height: 100%; }
#intro-media img, #intro-media video { object-fit: cover; border-radius: inherit; filter: saturate(.75) contrast(1.04) brightness(.82); }
#intro-media::after { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, transparent 46%, rgba(7, 8, 13, .64)); content: ""; pointer-events: none; }
#orb { z-index: 1; display: grid; place-items: center; width: min(84vw, 360px); max-height: 100%; aspect-ratio: 1 / 1; }
.orb-canvas, .orb-fallback { display: block; width: 100%; height: 100%; }
.orb-canvas { mix-blend-mode: screen; }
.orb-fallback { width: 52%; height: 52%; border-radius: 50%; background: radial-gradient(circle at 34% 29%, #c3c8ff 0, #6875ff 12%, #3c2ea3 38%, #12142c 69%, transparent 70%); box-shadow: 0 0 30px rgba(115, 116, 255, .42), 0 0 100px rgba(67, 70, 235, .26), inset -12px -16px 34px rgba(4, 4, 22, .72); }

#experience[data-visual-state="intro"] #intro { opacity: 1; transform: scale(1); }
#experience[data-visual-state="idle"] #intro, #experience[data-visual-state="connecting"] #intro, #experience[data-visual-state="listening"] #intro, #experience[data-visual-state="thinking"] #intro, #experience[data-visual-state="speaking"] #intro, #experience[data-visual-state="interrupted"] #intro, #experience[data-visual-state="error"] #intro, #experience[data-visual-state="ended"] #intro { opacity: 0; transform: scale(.94); pointer-events: none; }
#experience[data-intro-visual="photo"] #intro-media { border-radius: 48% 52% 47% 53% / 43% 46% 54% 57%; }
#experience[data-intro-visual="photo"] #intro-media img { object-position: 50% 30%; filter: saturate(.86) contrast(1.025) brightness(.90); }
#experience[data-intro-visual="photo"] #intro-media::after { background: linear-gradient(180deg, rgba(7, 8, 13, .02) 18%, transparent 45%, rgba(7, 8, 13, .22) 69%, rgba(7, 8, 13, .94) 100%); }
#experience[data-intro-visual="photo"][data-visual-state="idle"] #intro,
#experience[data-intro-visual="photo"][data-visual-state="ended"] #intro { opacity: 1; transform: scale(1); pointer-events: auto; }
.media-fallback { position: relative; width: 70%; height: 70%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, rgba(122, 128, 255, .35), rgba(30, 29, 70, .14) 47%, transparent 70%); }
.media-fallback--orb::before { position: absolute; inset: 20%; border: 1px solid rgba(204, 210, 255, .46); border-radius: 50%; box-shadow: 0 0 45px rgba(93, 111, 255, .5); content: ""; }
.media-fallback-message { position: absolute; bottom: 12%; margin: 0; color: rgba(245, 244, 240, .78); font-size: 14px; letter-spacing: .02em; }

#control-zone { position: relative; z-index: 3; display: grid; grid-template-rows: auto auto; gap: 8px; align-content: end; min-height: var(--control-zone-min-height); }
.conversation-controls { display: grid; justify-items: center; gap: 14px; min-height: 168px; padding: 8px 0 16px; text-align: center; }
#state { min-height: 20px; margin: 0; color: #c8cad8; font-size: 14px; letter-spacing: .015em; }
.primary-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.button-primary, .button-quiet, .button-end { min-height: 48px; border: 0; border-radius: 999px; padding: 0 23px; letter-spacing: .09em; text-transform: uppercase; }
.button-primary { min-width: min(100%, 256px); color: #101119; font-size: 12px; font-weight: 750; background: #eff0f4; box-shadow: 0 10px 35px rgba(211, 215, 255, .14); transition: transform 180ms ease-out, background 180ms ease-out; }
.button-primary:not(:disabled):hover { background: #fff; transform: translateY(-1px); }
.button-quiet, .button-end { color: #d8dae8; background: transparent; border: 1px solid rgba(211, 214, 239, .22); font-size: 11px; }
.button-end:not(:disabled) { border-color: rgba(235, 178, 194, .42); color: #edc5d1; }
.contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 360px; }
.contact-actions .button-quiet { display: inline-grid; place-items: center; min-height: 40px; padding: 0 14px; text-decoration: none; }
.privacy { margin: 0 auto; max-width: 340px; color: #858896; font-size: 11px; line-height: 1.45; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#acceptance { display: grid; gap: .6rem; margin-top: 1rem; text-align: left; }
#acceptance label { display: grid; gap: .2rem; }
#acceptance input, #acceptance select, #acceptance textarea { padding: .4rem; }
#acceptance-summary, #diagnostics { overflow-wrap: anywhere; white-space: pre-wrap; font-size: .75rem; text-align: left; }

@media (min-width: 700px) { #experience { --control-zone-min-height: 192px; padding-inline: 42px; } #stage { justify-self: center; width: min(100%, 590px); } #intro-media { width: min(58vw, 440px); } #orb { width: min(58vw, 460px); } .identity h1 { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .orb-fallback { box-shadow: 0 0 24px rgba(115, 116, 255, .32); } }