:root {
  --bg: #08090d;
  --panel: rgba(18, 20, 28, 0.72);
  --panel-soft: rgba(28, 31, 41, 0.66);
  --text: #f7f5ef;
  --muted: #9597a2;
  --muted-strong: #c7c6c0;
  --yellow: #f8c526;
  --yellow-soft: #ffe27c;
  --cyan: #76daf0;
  --line: rgba(255, 255, 255, 0.09);
  --shadow: 0 30px 90px rgba(0, 0, 0, 0.36);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 68% 36%, rgba(241, 185, 37, 0.09), transparent 22rem),
    radial-gradient(circle at 10% 10%, rgba(70, 98, 146, 0.12), transparent 24rem),
    var(--bg);
  font-family: "DM Sans", system-ui, sans-serif;
  overflow-x: hidden;
}

button, textarea { font: inherit; }
button { cursor: pointer; }

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}

.ambient { position: fixed; pointer-events: none; filter: blur(50px); opacity: 0.24; border-radius: 999px; }
.ambient-one { width: 18rem; height: 18rem; top: 30%; left: -10rem; background: #264d72; }
.ambient-two { width: 20rem; height: 20rem; right: -10rem; bottom: -10rem; background: #8a6617; }

.topbar {
  height: 82px;
  padding: 0 5.4vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.brand-lockup { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 30px; height: 30px; display: grid; place-items: center; color: #181300; font-family: "Space Grotesk", sans-serif; font-size: 18px; font-weight: 700; background: var(--yellow); border-radius: 9px; transform: rotate(-8deg); }
.brand-name { font-family: "Space Grotesk", sans-serif; font-size: 18px; letter-spacing: -0.05em; font-weight: 700; line-height: 1; }
.brand-caption { color: #6f7079; text-transform: uppercase; letter-spacing: 0.13em; font-size: 8px; margin-top: 5px; }

.connection-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; color: #b0b1b9; font-size: 11px; background: rgba(255,255,255,0.025); }
.connection-dot { width: 6px; height: 6px; background: var(--yellow); border-radius: 50%; box-shadow: 0 0 12px rgba(248,197,38,0.65); }
.icon-button { width: 34px; height: 34px; display: grid; place-items: center; color: #a4a5ad; background: transparent; border: 1px solid transparent; border-radius: 10px; transition: .2s ease; }
.icon-button:hover { color: var(--text); border-color: var(--line); background: rgba(255,255,255,0.05); }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { width: min(1280px, 90vw); min-height: calc(100vh - 130px); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, .94fr); gap: clamp(3rem, 8vw, 9rem); align-items: center; padding: 50px 0 42px; position: relative; z-index: 1; }
.conversation-panel { max-width: 600px; min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: var(--yellow); text-transform: uppercase; letter-spacing: .18em; font-size: 10px; font-weight: 700; }
.eyebrow-line { width: 25px; height: 1px; background: var(--yellow); }
h1 { margin: 19px 0 15px; font-family: "Space Grotesk", sans-serif; font-size: clamp(48px, 6.1vw, 80px); line-height: .95; letter-spacing: -.075em; font-weight: 600; }
h1 em { color: var(--yellow); font-style: normal; }
.intro { max-width: 470px; margin: 0 0 30px; color: var(--muted); font-size: 15px; line-height: 1.65; }

.conversation { height: 210px; overflow-y: auto; padding: 3px 9px 4px 0; scrollbar-width: thin; scrollbar-color: #353640 transparent; }
.message { display: flex; gap: 11px; padding: 14px 0; }
.message-avatar { flex: 0 0 27px; width: 27px; height: 27px; display: grid; place-items: center; color: #1c1804; background: var(--yellow); border-radius: 8px; font-family: "Space Grotesk", sans-serif; font-size: 13px; font-weight: 700; }
.user-message { justify-content: flex-end; }
.user-message .message-avatar { order: 2; color: #bfc0c8; background: #262934; }
.message-body { min-width: 0; max-width: 84%; }
.message-meta { color: #7d7f89; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin: 1px 0 7px; }
.message-meta span { color: #565863; margin-left: 5px; }
.message-body p { margin: 0; color: #d7d5cf; font-size: 14px; line-height: 1.55; }
.user-message .message-body { text-align: right; }
.user-message .message-body p { display: inline-block; padding: 9px 13px; text-align: left; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.07); border-radius: 14px 4px 14px 14px; }
.typing-dots { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing-dots i { width: 5px; height: 5px; background: var(--yellow); border-radius: 50%; animation: blink 1.1s infinite; }
.typing-dots i:nth-child(2) { animation-delay: .16s; }.typing-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.suggestions { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 18px; }
.suggestions button { padding: 8px 11px; color: #a7a8b0; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.025); font-size: 11px; transition: .2s ease; }
.suggestions button span { color: var(--yellow); margin-left: 5px; }
.suggestions button:hover { color: var(--text); border-color: rgba(248,197,38,.48); background: rgba(248,197,38,.08); }

.composer { display: flex; align-items: flex-end; gap: 10px; min-height: 58px; padding: 8px 9px 8px 16px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(20,22,30,.83); box-shadow: 0 16px 40px rgba(0,0,0,.14); }
.composer:focus-within { border-color: rgba(248,197,38,.55); box-shadow: 0 0 0 3px rgba(248,197,38,.06); }
textarea { flex: 1; min-width: 0; max-height: 110px; resize: none; padding: 9px 0; color: var(--text); border: 0; outline: none; background: transparent; font-size: 14px; line-height: 1.45; }
textarea::placeholder { color: #737580; }
.composer-actions { display: flex; gap: 6px; }
.mic-button, .send-button { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; border: 1px solid transparent; transition: .2s ease; }
.mic-button { color: #c8c8cd; background: rgba(255,255,255,.06); }
.mic-button:hover, .mic-button.recording { color: #191401; background: var(--yellow); }
.mic-button.recording { animation: mic-pulse 1.5s infinite; }
@keyframes mic-pulse { 50% { box-shadow: 0 0 0 7px rgba(248,197,38,.12); } }
.send-button { color: #1c1702; background: var(--yellow); }
.send-button:hover { background: var(--yellow-soft); transform: translateY(-1px); }
.composer-note { margin: 10px 3px 0; color: #61636d; font-size: 10px; }.lock-icon { color: var(--yellow); font-size: 14px; margin-right: 3px; }

.orb-panel { min-height: 540px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; padding: 20px 10px; border-left: 1px solid rgba(255,255,255,.055); }
.orb-panel-top { width: min(390px, 100%); display: flex; justify-content: space-between; color: #767984; text-transform: uppercase; letter-spacing: .15em; font-size: 9px; }
.orb-status { color: var(--yellow); }
.orb-stage { width: min(430px, 100%); height: 380px; display: grid; place-items: center; position: relative; }
.orb, .orbit { position: absolute; border-radius: 50%; }
.orb { width: 242px; height: 242px; z-index: 2; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 31% 25%, #ffecae 0%, #f4c632 15%, #c48212 35%, #593c1b 64%, #1e1b17 100%); box-shadow: inset -26px -22px 50px rgba(0,0,0,.5), inset 15px 12px 24px rgba(255,255,255,.22), 0 0 45px rgba(243,183,25,.25), 0 0 115px rgba(223,154,20,.12); transition: box-shadow .3s ease, transform .3s ease; }
.orb::before, .orb::after { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(255,248,205,.35); border-radius: 50%; pointer-events: none; }
.orb::after { inset: 16px; border-color: rgba(255,248,205,.12); }
.orb[data-state="listening"] { transform: scale(1.045); box-shadow: inset -26px -22px 50px rgba(0,0,0,.45), inset 15px 12px 24px rgba(255,255,255,.25), 0 0 38px rgba(248,197,38,.52), 0 0 130px rgba(248,197,38,.26); }
.orb[data-state="thinking"] { animation: orb-thinking 1.4s ease-in-out infinite; }
.orb[data-state="speaking"] { animation: orb-speaking .85s ease-in-out infinite alternate; }
@keyframes orb-thinking { 50% { transform: scale(1.025) rotate(3deg); } }
@keyframes orb-speaking { to { transform: scale(1.055); box-shadow: inset -26px -22px 50px rgba(0,0,0,.45), inset 15px 12px 24px rgba(255,255,255,.25), 0 0 54px rgba(118,218,240,.52), 0 0 138px rgba(118,218,240,.18); } }
.orb-glow { width: 260px; height: 60px; position: absolute; bottom: 40px; background: rgba(243,182,27,.27); filter: blur(35px); border-radius: 50%; }
.orbit { border: 1px solid rgba(244,191,50,.21); transform: rotate(28deg) skewX(-17deg); }
.orbit-one { width: 330px; height: 125px; animation: orbit-one 9s linear infinite; }.orbit-two { width: 310px; height: 150px; transform: rotate(-48deg) skewX(17deg); border-color: rgba(104,204,225,.13); animation: orbit-two 11s linear infinite reverse; }
@keyframes orbit-one { to { transform: rotate(388deg) skewX(-17deg); } } @keyframes orbit-two { to { transform: rotate(312deg) skewX(17deg); } }
.orb-latitude, .orb-longitude { position: absolute; border: 1px solid rgba(255,250,213,.27); border-radius: 50%; pointer-events: none; }
.latitude-one { width: 220px; height: 96px; transform: rotate(-8deg); }.latitude-two { width: 225px; height: 150px; transform: rotate(16deg); opacity: .55; }
.longitude-one { width: 80px; height: 230px; transform: rotate(18deg); }.longitude-two { width: 165px; height: 235px; transform: rotate(-22deg); opacity: .55; }
.orb-highlight { position: absolute; width: 72px; height: 34px; left: 47px; top: 42px; transform: rotate(-30deg); border-radius: 50%; background: rgba(255,250,215,.3); filter: blur(11px); }
.orb-core { width: 55px; height: 55px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.45), rgba(255,206,54,.18) 34%, rgba(255,255,255,.02) 70%); filter: blur(1px); opacity: .85; }
.orb-trigger { position: absolute; z-index: 4; width: 54px; height: 54px; display: grid; place-items: center; color: #fff9da; border: 1px solid rgba(255,255,255,.27); border-radius: 50%; background: rgba(48,34,12,.36); backdrop-filter: blur(8px); transition: .22s ease; }
.orb-trigger:hover { color: #201802; background: var(--yellow); transform: scale(1.07); }.orb-trigger svg { width: 22px; height: 22px; }
.voice-copy { text-align: center; }.voice-title { color: #f2f0e8; font-family: "Space Grotesk", sans-serif; font-size: 20px; letter-spacing: -.04em; }.voice-subtitle { margin-top: 8px; color: #858691; font-size: 12px; }
.voice-controls { display: flex; align-items: center; gap: 9px; margin-top: 27px; }.round-control { width: 34px; height: 34px; display: grid; place-items: center; color: #9d9ea8; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; background: rgba(255,255,255,.03); }.round-control:hover, .round-control.active { color: var(--yellow); border-color: rgba(248,197,38,.36); }.round-control svg { width: 15px; height: 15px; }.voice-mode-label { padding: 0; color: #a8a8b1; border: 0; background: transparent; font-size: 11px; }.voice-hint { color: #5d5f69; font-size: 10px; padding-left: 5px; border-left: 1px solid rgba(255,255,255,.11); }

.footer { width: 90vw; margin: 0 auto; padding: 0 0 24px; color: #555762; font-size: 10px; letter-spacing: .04em; text-align: center; position: relative; z-index: 1; }.footer-separator { color: #91801c; padding: 0 8px; }
.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; }
.hidden { display: none !important; }
.voice-only { min-height: 100dvh; display: grid; place-items: center; }
.voice-only .topbar, .voice-only .conversation-panel, .voice-only .footer, .voice-only .orb-panel-top, .voice-only .voice-controls { display: none; }
.voice-only .app-shell { display: block; width: min(600px, 100vw); min-height: 0; padding: 20px; }
.voice-only .orb-panel { border: 0; min-height: 0; padding: 0; }
.voice-only .orb-stage { width: min(480px, 90vw); height: min(480px, 90vw); margin: 0; transform: none; }
.voice-only .orb { width: min(320px, 68vw); height: min(320px, 68vw); }
.voice-only .orb-trigger { inset: 0; width: 100%; height: 100%; border: 0; background: transparent; backdrop-filter: none; }
.voice-only .orb-trigger:hover { background: transparent; transform: none; }
.voice-only .orb-trigger svg { display: none; }
.voice-only .orb-trigger:focus-visible { outline: 3px solid white; outline-offset: -8px; }
.voice-only .orb-core { width: 100%; height: 100%; opacity: .65; background: radial-gradient(circle at 25% 25%, #fff5b0 0 2px, transparent 3px), radial-gradient(circle at 60% 35%, #fff5b0 0 3px, transparent 4px), radial-gradient(circle at 40% 65%, #fff5b0 0 2px, transparent 3px); background-size: 58px 64px, 83px 71px, 71px 87px; animation: neural-pulse 2s ease-in-out infinite alternate; }
.voice-only .orb[data-state="speaking"] .orb-core { animation-duration: .4s; }
.voice-only .orb[data-state="listening"] { scale: calc(1 + var(--voice-energy, 0)); }
@keyframes neural-pulse { to { opacity: .25; filter: drop-shadow(0 0 7px #fff1ab); transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .voice-only * { animation: none !important; } }

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; gap: 10px; padding-top: 38px; }.orb-panel { order: -1; min-height: 470px; border-left: 0; border-top: 1px solid rgba(255,255,255,.055); padding-top: 32px; }.conversation-panel { order: 2; max-width: 680px; margin: 0 auto; width: 100%; }.orb-stage { height: 330px; }
}
@media (max-width: 560px) {
  .topbar { height: 70px; padding: 0 5vw; }.connection-pill { font-size: 0; padding: 8px; }.connection-dot { width: 7px; height: 7px; }.app-shell { width: 90vw; padding-top: 32px; }.intro { font-size: 14px; }.conversation { height: 230px; }.orb-panel { min-height: 430px; }.orb-stage { height: 285px; transform: scale(.88); margin: -17px 0; }.voice-title { font-size: 18px; }.footer { line-height: 1.7; }
}

.build-version { position: fixed; right: 12px; bottom: 10px; z-index: 5; color: #6b6d78; font-size: 11px; letter-spacing: .04em; pointer-events: none; }
.voice-picker { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 22px; color: #858691; font-size: 12px; letter-spacing: .04em; }
.voice-picker select { max-width: 78vw; padding: 9px 12px; border: 1px solid #2c2d36; border-radius: 999px; background: #15161c; color: #f2f0e8; font: inherit; font-size: 13px; }
.voice-picker select:focus-visible { outline: 2px solid #f5d90a; outline-offset: 2px; }
.app-title { color: #f7f5ef; font-family: "Space Grotesk", sans-serif; font-size: clamp(22px, 6vw, 30px); font-weight: 600; letter-spacing: -.04em; text-align: center; }
.app-title em { color: #f8c526; font-style: normal; }
.install-button { display: block; margin: 18px auto 0; padding: 10px 20px; border: 0; border-radius: 999px; background: #f8c526; color: #181300; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.install-button[hidden] { display: none; }
.install-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (display-mode: standalone) { .voice-only { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } }