@font-face{font-family:"Oswald";font-weight:600;font-display:swap;src:url(/fonts/oswald-600-latin.woff2) format("woff2")}
html,body{margin:0;height:100%;background:#fff}main{min-height:100dvh;display:grid;place-items:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.orb{width:min(272px,72vw);height:min(272px,72vw);border:0;padding:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;text-align:center;
background:radial-gradient(circle at 38% 34%,#1e98b4 0%,#2f7bff 30%,#1a4fc4 60%,#0a1a4a 100%);
box-shadow:0 0 40px #2f7bff59,0 0 90px #14c8c22e,0 12px 30px #0a1a4a33;animation:breathe 10s ease-in-out infinite;will-change:transform}
.orb:focus-visible{outline:3px solid #0a1a4a;outline-offset:6px}
.label{color:#fff;padding:0 14%;pointer-events:none;text-shadow:0 1px 3px #0a1a4acc,0 0 12px #0a1a4a80}
.q{display:block;font:600 clamp(24px,7vw,34px)/1.1 "Oswald","Arial Narrow",sans-serif}
.t{display:block;margin-top:10px;font:400 21px/1.3 "Avenir Next","Segoe UI",system-ui,sans-serif;letter-spacing:.04em}
@keyframes breathe{0%,100%{transform:scale(.94);opacity:.88}50%{transform:scale(1.04);opacity:1}}
@keyframes glow{0%,100%{opacity:.8}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.orb{animation:glow 10s ease-in-out infinite;transform:none}}
.t small{font-size:15px;opacity:.85}
[data-state="speaking"]{animation:none;transform:scale(calc(1 + var(--lvl,0) * .1));transition:transform .45s cubic-bezier(.2,.7,.3,1)}
[data-state="thinking"]{animation:think 14s ease-in-out infinite}
[data-state="listening"]{filter:brightness(1.08)}
@keyframes think{0%,100%{transform:scale(.97);opacity:.7}50%{transform:scale(1);opacity:.85}}

.notice{position:fixed;left:0;right:0;bottom:10px;text-align:center;font:400 11px/1.3 system-ui,sans-serif;color:#4a5270;background:#ffffffe6;pointer-events:none}

/* Live layout (SB-FR-009/010/019): orb slides upper right, "what I heard" panel on main screen */
.orb{--sz:min(272px,72vw);position:fixed;z-index:2;width:var(--sz);height:var(--sz);top:calc(50% - var(--sz) / 2);left:calc(50% - var(--sz) / 2);
transition:width .8s cubic-bezier(.2,.7,.3,1),height .8s cubic-bezier(.2,.7,.3,1),top .8s cubic-bezier(.2,.7,.3,1),left .8s cubic-bezier(.2,.7,.3,1)}
body.live .orb{--sz:84px;top:16px;left:calc(100% - 100px)}
body.live .orb .t{font-size:12px}body.live .orb .t small{font-size:10px}
.spec{display:none;width:min(560px,calc(100vw - 32px));margin:0 auto;padding:116px 0 64px;font:400 16px/1.4 "Avenir Next","Segoe UI",system-ui,sans-serif;color:#0a1a4a}
body.live main{place-items:start center}body.live .spec[data-revealed]{display:block;animation:fadein .6s ease-out}
.spec-h{font:600 22px/1.2 "Oswald","Arial Narrow",sans-serif;letter-spacing:.02em;margin:0 0 14px;color:#0a1a4a}
.spec-mode{margin:-8px 0 12px;min-height:1.2em;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#123a9c}.spec[data-mode=roleplay] .spec-mode{color:#0e8f8a;font-weight:600}.spec[data-mode=roleplay] .spec-row{border-left-color:#14c8c2}
.spec-list{margin:0;display:grid;gap:10px}
.spec-row{border:1px solid #2f7bff2e;border-left:4px solid #2f7bff40;border-radius:12px;padding:10px 14px;background:#f6f9ff;transition:border-color .5s,background .5s}
.spec-row dt{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#123a9c}
.spec-row dd{margin:4px 0 0;color:#0a1a4a99;word-break:break-word}
.spec-row.filled{border-left-color:#14c8c2;background:#effcfb}.spec-row.filled dd{color:#0a1a4a;animation:fadein .6s ease-out}
.hint{position:fixed;left:0;right:0;bottom:44px;margin:0;text-align:center;font:400 18px/1.3 "Avenir Next","Segoe UI",system-ui,sans-serif;color:#2f7bff;opacity:0;transition:opacity 1.2s ease;pointer-events:none}
body.live .hint.show{opacity:.75}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@media(min-width:900px){.spec{padding-top:72px}}
@media(prefers-reduced-motion:reduce){.orb,.spec-row,.hint{transition:none}body.live .spec,.spec-row.filled dd{animation:none}}

/* SB-FR-021: quiet below-the-fold description (crawlable); hidden during a live call */
.about{max-width:640px;margin:0 auto;padding:48px 20px 72px;color:#33405e;font:400 15px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}
.about h3{color:#0a1a4a;font:600 17px/1.3 system-ui,sans-serif;margin:28px 0 8px}.about .lede{font-size:16px;color:#0a1a4a}
.about ul,.about ol{padding-left:22px;margin:0}.about a{color:#1a4fc4}
body.live .about{display:none}
/* BUG-001: visitor caption on the orb (navy pill, white text, 13:1+ contrast); never covered by bot text */
.cap{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);width:max-content;max-width:min(320px,86vw);padding:8px 12px;border-radius:14px;background:#0a1a4a;color:#fff;font:500 15px/1.35 system-ui,-apple-system,"Segoe UI",sans-serif;text-align:center;opacity:0;transition:opacity .25s;pointer-events:none;z-index:3}
.cap.on{opacity:1}
body.live .cap{left:auto;right:0;transform:none;max-width:min(320px,calc(100vw - 32px))}
@media(prefers-reduced-motion:reduce){.cap{transition:none}}
/* SB-FR-022: show only the current question and captured fields */
.spec-row:not(.filled){display:none}
.spec-q{margin:0 0 14px;font:500 19px/1.35 "Avenir Next","Segoe UI",system-ui,sans-serif;color:#0a1a4a}.spec-q:empty{display:none}
.spec[data-mode=roleplay] .spec-q,.spec[data-mode=confirming] .spec-q{display:none}