:root{--bg: #f4f4f4;--surface: #ffffff;--ink: #171717;--text: #32373c;--muted: #6b6f75;--border: #e3e3e3;--black: #000000;--yellow: #f1fc00;--teal: #00aac2;--lime: #bdd230;--pink: #d91d52;--orange: #ed7824;--purple: #7e287c;--blue: #066aab;--brand-gradient: linear-gradient(90deg, var(--teal), var(--lime), var(--orange), var(--pink), var(--purple));--heading: "Oswald", "Arial Narrow", "Segoe UI", sans-serif;font-family:Segoe UI,system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}*{box-sizing:border-box}body{margin:0;background:var(--bg)}.topbar{background:var(--black);color:#fff;position:sticky;top:0;z-index:10}.topbar-inner{max-width:820px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{display:flex;align-items:center;gap:14px;min-width:0}.brand img{height:36px;width:auto;display:block}.brand-sub{font-family:var(--heading);font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;padding-left:14px;border-left:1px solid rgba(255,255,255,.3);white-space:nowrap}.brand-stripe{height:3px;background:var(--brand-gradient)}.actions{display:flex;gap:8px}.app{display:flex;flex-direction:column;height:calc(100dvh - 59px);max-width:820px;margin:0 auto;padding-inline:16px}.stage{margin-top:14px;border-radius:16px;background:radial-gradient(ellipse at 50% 35%,#1b1f2a,#07080c 70%);box-shadow:0 10px 30px #0000002e;overflow:hidden;position:relative}.stage:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--brand-gradient)}.orb{display:flex;flex-direction:column;align-items:center;padding-block:2px 12px}.orb canvas{height:min(270px,30dvh)!important;width:auto!important;max-width:100%;aspect-ratio:1}.orb-label{display:flex;align-items:center;gap:8px;margin-top:-10px;font-family:var(--heading);font-size:.85rem;letter-spacing:.18em;color:#fff}.orb-dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;animation:blink 1.4s infinite}.orb-idle .orb-label,.orb-connecting .orb-label{color:#9aa0a8}.orb-ready .orb-label{color:var(--teal)}.orb-listening .orb-label{color:var(--lime)}.orb-thinking .orb-label{color:var(--orange)}.orb-speaking .orb-label{color:#ff5c8a}@keyframes blink{50%{opacity:.25}}@media(prefers-reduced-motion:reduce){.orb-dot{animation:none}}.banner{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding:8px 12px;border-left:4px solid var(--pink);border-radius:8px;background:#fdecf1;color:#a3123c;font-size:.9rem}.transcript{flex:1;min-height:140px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-block:16px}.transcript>*{flex-shrink:0}.stage,.banner,.quick-prompts,.controls{flex-shrink:0}.empty{margin:auto;color:var(--muted);text-align:center;font-size:1rem}.bubble{max-width:80%;padding:10px 14px;border-radius:14px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.bubble.user{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}.bubble.agent{align-self:flex-start;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-bottom-left-radius:4px;box-shadow:0 1px 2px #0000000a}.card{align-self:stretch;background:var(--surface);color:var(--ink);border:1px solid var(--border);border-radius:12px;padding:14px 18px;box-shadow:0 4px 14px #0000000f;position:relative;overflow:hidden;animation:card-in .25s ease-out}.card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,var(--teal),var(--lime),var(--orange),var(--pink),var(--purple))}.card h3{display:inline-block;margin:0 0 10px;font-family:var(--heading);font-weight:500;font-size:1.2rem;letter-spacing:.02em;text-transform:uppercase;border-bottom:3px solid var(--yellow);line-height:1.3}.card-body{margin:0 0 6px;line-height:1.55}.card ul,.card ol{margin:0;padding-left:20px;line-height:1.7}.table-scroll{overflow-x:auto}.card table{border-collapse:collapse;width:100%;font-size:.95rem}.card th,.card td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--border)}.card th{font-family:var(--heading);font-weight:500;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}@keyframes card-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}button{padding:10px 18px;border-radius:10px;border:none;background:var(--black);color:#fff;font-family:var(--heading);font-weight:500;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}button:hover:not(:disabled){background:#2a2a2a}button:disabled{opacity:.4;cursor:default}button:focus-visible{outline:3px solid var(--teal);outline-offset:2px}button.ghost{background:transparent;border:1px solid rgba(255,255,255,.35);color:#fff;padding:6px 12px;font-size:.85rem}button.ghost:hover:not(:disabled){background:#ffffff1f}button.ghost.danger{border-color:var(--pink);color:#ff7aa0}.banner button.ghost{color:#a3123c;border-color:transparent;text-transform:none}.quick-prompts{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:8px}button.chip{background:var(--surface);border:1px solid var(--border);color:var(--ink);border-radius:999px;padding:7px 14px;font-family:inherit;font-size:.9rem;font-weight:500;letter-spacing:0;text-transform:none}button.chip:hover:not(:disabled){border-color:var(--ink);background:var(--ink);color:#fff}.controls{padding-block:12px 16px;border-top:1px solid var(--border)}.start{width:100%;padding:14px;font-size:1.15rem}.live-controls{display:flex;flex-direction:column;gap:10px}.ptt{width:100%;padding:18px;-webkit-user-select:none;user-select:none;touch-action:none;font-size:1.1rem}button.ptt.active,button.ptt.active:hover{background:var(--lime);color:var(--ink);box-shadow:0 0 0 4px #bdd23059}.composer{display:flex;gap:8px}.composer input{flex:1;min-width:0;padding:12px 14px;border-radius:10px;border:1px solid #cfcfcf;background:var(--surface);color:var(--ink);font-size:1rem;outline:none}.composer input:focus{border-color:var(--ink);box-shadow:0 0 0 3px #00aac233}@media(max-width:560px){.brand-sub{display:none}.bubble{max-width:92%}}