:root{color-scheme:dark;--background: #09090b;--foreground: #fafafa;--card: #09090b;--muted: #18181b;--muted-foreground: #a1a1aa;--accent: #27272a;--border: #27272a;--ring: #d4d4d8;--radius: .75rem;--radius-sm: .5rem}*,*:before,*:after{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--background);color:var(--foreground);font:14px/1.5 Geist,Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased}p{margin:0}.layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;height:100dvh;padding:16px}.card{position:relative;min-height:0;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);overflow:hidden}.stage{background:#000}.background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}#avatar{position:absolute!important;inset:0}.stage:after{content:"";position:absolute;inset:auto 0 0;z-index:1;height:18%;background:linear-gradient(to bottom,transparent,#000);pointer-events:none}.badge{position:absolute;top:12px;left:12px;z-index:2;padding:2px 10px;border:1px solid var(--border);border-radius:9999px;background:#09090bb3;backdrop-filter:blur(8px);font-size:12px;font-weight:500;text-transform:capitalize}.backgrounds{position:absolute;top:12px;right:12px;z-index:2;display:flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#09090bb3;backdrop-filter:blur(8px)}.background-option{width:44px;height:26px;padding:0;border:1px solid transparent;border-radius:4px;background:#18181b center / cover no-repeat;opacity:.6;cursor:pointer;transition:opacity .15s,border-color .15s}.background-option:hover{opacity:1}.background-option[aria-checked=true]{border-color:var(--foreground);opacity:1}.background-option:focus-visible{outline:1px solid var(--ring);outline-offset:1px}.stage-status{position:absolute;left:50%;bottom:16px;z-index:2;transform:translate(-50%);max-width:calc(100% - 32px);padding:4px 12px;border-radius:var(--radius-sm);background:#09090bb3;color:var(--muted-foreground);font-size:13px;text-align:center}.stage-status.error{color:var(--foreground);border:1px solid var(--foreground)}.stage-status[hidden],.badge[hidden],.events[hidden],.debug-info[hidden]{display:none}.events{position:absolute;inset:auto 12px 12px;z-index:3;display:flex;flex-direction:column;max-height:42%;border:1px solid var(--border);border-radius:var(--radius-sm);background:#09090bd1;backdrop-filter:blur(8px)}.events-head{display:flex;align-items:center;justify-content:space-between;padding:4px 4px 4px 12px;border-bottom:1px solid var(--border);color:var(--muted-foreground);font-size:12px;font-weight:500}.debug-info{display:flex;flex-wrap:wrap;gap:0 20px;margin:0;padding:6px 12px;border-bottom:1px solid var(--border);font:12px/1.6 Geist Mono,ui-monospace,SFMono-Regular,Menlo,monospace}.debug-info div{display:flex;gap:8px;min-width:0;max-width:100%}.debug-info dt{color:var(--muted-foreground);white-space:nowrap}.debug-info dd{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}.event-list{min-height:0;margin:0;padding:6px 0;overflow-y:auto;list-style:none;font:12px/1.6 Geist Mono,ui-monospace,SFMono-Regular,Menlo,monospace;scrollbar-color:var(--accent) transparent}.event-list .empty{padding:4px 12px;color:var(--muted-foreground);font:12px/1.5 Geist,Inter,ui-sans-serif,system-ui,sans-serif}.event{display:grid;grid-template-columns:92px 64px 132px minmax(0,1fr) auto 40px;gap:8px;padding:0 12px;white-space:nowrap}.event span{overflow:hidden;text-overflow:ellipsis}.event .time,.event .delta,.event .req,.event .rev{color:var(--muted-foreground)}.event .delta,.event .rev{text-align:right}.event[data-kind=motion] .name{color:var(--muted-foreground)}.button.small{height:24px;padding:0 8px;font-size:12px}.chat{display:flex;flex-direction:column}.chat-head{display:flex;align-items:center;gap:8px;padding:12px 12px 12px 16px;border-bottom:1px solid var(--border)}.status{flex:1;display:inline-flex;align-items:center;gap:8px;color:var(--muted-foreground);text-transform:capitalize}.status i{width:8px;height:8px;border-radius:50%;background:#52525b}.status[data-state=busy] i{background:var(--muted-foreground);animation:pulse 1.2s ease-in-out infinite}.status[data-state=on] i{background:var(--foreground)}@keyframes pulse{50%{opacity:.3}}.messages{flex:1;display:flex;flex-direction:column;gap:8px;min-height:0;padding:16px;overflow-y:auto;scrollbar-color:var(--accent) transparent}.empty{margin:auto;color:var(--muted-foreground)}.message{max-width:85%;padding:8px 12px;border-radius:var(--radius);white-space:pre-wrap;overflow-wrap:anywhere}.message.user{align-self:flex-end;background:var(--foreground);color:var(--background)}.message.user .heard-word{transition:opacity .3s ease-out}.message.user.unclear{opacity:.55;font-style:italic}.message .confidence{margin-left:8px;padding:0 5px;border-radius:4px;background:var(--muted);color:var(--muted-foreground);font:11px/1.6 ui-monospace,monospace;font-style:normal;vertical-align:1px}.message .confidence[data-unclear=true]{background:#7f1d1d;color:#fecaca}.cutoff{display:flex;align-items:center;gap:6px;margin-left:auto;margin-right:8px;color:var(--muted-foreground);font-size:12px}.cutoff .input{width:64px;height:24px;padding:0 6px;font-size:12px}.message.assistant{align-self:flex-start;background:var(--muted)}.message.preset{border:1px dashed var(--border)}.presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 12px 0;border-top:1px solid var(--border)}.presets .input{flex:1 1 200px;background:var(--card)}.preset-note{flex-basis:100%;color:var(--muted-foreground);font-size:12px}.preset-note:empty{display:none}.presets:not([hidden])+.composer{border-top:0}.quick-replies{display:flex;flex-wrap:wrap;gap:8px;padding:12px 12px 0;border-top:1px solid var(--border)}.quick-replies .button{height:auto;min-height:32px;padding:6px 12px;text-align:left;white-space:normal}.quick-replies:not([hidden])+.presets{border-top:0}.quick-replies:not([hidden])+.presets[hidden]+.composer{border-top:0}.composer{display:flex;gap:8px;padding:12px;border-top:1px solid var(--border)}.input{flex:1;min-width:0;height:36px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:transparent;color:var(--foreground);font:inherit}.input::placeholder{color:var(--muted-foreground)}.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--foreground);font:inherit;font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s,opacity .15s}.button svg{width:16px;height:16px}.button.icon-only{width:36px;padding:0;flex:none}.button.primary{background:var(--foreground);color:var(--background)}.button.primary:hover{background:#fafafae6}.button.outline{border-color:var(--border)}.button.outline:hover,.button.ghost:hover{background:var(--accent)}.button[aria-pressed=true].outline{background:var(--foreground);color:var(--background);border-color:var(--foreground)}.button:disabled,.input:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.button:focus-visible,.input:focus-visible{outline:1px solid var(--ring);outline-offset:1px}@media(max-width:768px){.event-list{font-size:11px}.event{grid-template-columns:80px 108px minmax(0,1fr) 28px;gap:6px;padding:0 10px}.event .delta,.event .req{display:none}.layout{grid-template-columns:1fr;grid-template-rows:55dvh minmax(60dvh,auto);height:auto;min-height:100dvh}}@font-face{font-family:HP Inter;src:url(/static/hp-inter-8kRkwJBP.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}@font-face{font-family:HP Geist Mono;src:url(/static/hp-geist-mono-DZzjZex8.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}body:not([data-view=showcase]) :is(#burst-root,.frame-glow,.show-top,.call-dock,.chat-title,.connection-notice,.message .emotion-chip,.spoken-word-tint){display:none}body:not([data-view=showcase]) .spoken-word{animation:none}[data-emotion=neutral]{--tone: oklch(.8 .007 80);--tint: oklch(.3 .004 80)}[data-emotion=happy]{--tone: oklch(.83 .115 80);--tint: oklch(.29 .028 80)}[data-emotion=sad]{--tone: oklch(.8 .08 250);--tint: oklch(.29 .024 250)}[data-emotion=surprise]{--tone: oklch(.8 .085 310);--tint: oklch(.29 .026 310)}[data-emotion=angry]{--tone: oklch(.8 .105 25);--tint: oklch(.29 .029 25)}[data-emotion=disgust]{--tone: oklch(.8 .08 135);--tint: oklch(.29 .026 135)}body[data-view=showcase]{--show-page: oklch(.165 .002 80);--show-ink: oklch(.945 .006 80);--show-copy: oklch(.79 .005 80);--show-muted: oklch(.705 .005 80);--show-input: oklch(.295 .003 80);--show-placeholder: oklch(.72 .005 80);--show-badge: oklch(.21 .003 80 / .88);--show-panel: linear-gradient(155deg, oklch(.245 .003 80), oklch(.235 .003 80) 45%, oklch(.225 .003 80));--show-backdrop: oklch(.875 .009 95);--show-accent: oklch(.78 .006 80);--show-control-light: oklch(.96 .006 80);--show-control-deep: oklch(.91 .008 80);--show-control-ink: oklch(.21 .003 80);--show-disabled: oklch(.36 .003 80);--show-disabled-ink: oklch(.62 .005 80);--frame-radius: 40px;--panel-inset: 16px;--panel-radius: calc(var(--frame-radius) - var(--panel-inset));--panel-width: 384px;--glow-depth: 48px;background:var(--show-page);color:var(--show-ink);font:400 15px/1.6 HP Inter,ui-sans-serif,system-ui,sans-serif}body[data-view=showcase] :is(.events,.presets,.badge,.status,.stage-status,#events-toggle,#sound,#connect,#mic,.messages>.empty,.message .confidence){display:none}body[data-view=showcase] #app{display:grid;place-items:center;min-height:100dvh;padding:48px 0}#burst-root{position:fixed;inset:0;z-index:0;pointer-events:none}#burst-root .prismatic-burst-container{position:relative;width:100%;height:100%;overflow:hidden}#burst-root .prismatic-burst-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}#burst-root .prismatic-burst-container[data-renderer=unavailable]{background:radial-gradient(ellipse at 18% 66%,oklch(.6 .1 280 / .22),transparent 42%),radial-gradient(ellipse at 85% 72%,oklch(.7 .12 55 / .16),transparent 38%)}body[data-view=showcase] .layout{display:block;position:relative;z-index:1;width:min(1040px,calc(100vw - 96px));height:clamp(540px,calc(100dvh - 230px),650px);margin:0;padding:0}body[data-view=showcase] .stage{position:absolute;inset:0;border:0;border-radius:var(--frame-radius);background:var(--show-backdrop)}body[data-view=showcase] #avatar{right:calc(var(--panel-width) + 4px)}body[data-view=showcase] .stage:after{display:none}.frame-glow{position:absolute;inset:0;z-index:1;border-radius:inherit;overflow:hidden;pointer-events:none;mix-blend-mode:screen;opacity:.78;transition:opacity .56s cubic-bezier(.22,.61,.36,1)}.frame-glow.is-speaking{opacity:.88}.frame-glow-canvas,.frame-glow-fallback{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit}.frame-glow-canvas{display:none}.frame-glow.has-live-glow .frame-glow-canvas{display:block}.frame-glow.has-live-glow .frame-glow-fallback{visibility:hidden}.frame-glow-layer{position:absolute;inset:0;border-radius:inherit;opacity:0;box-shadow:inset 0 0 20px color-mix(in oklch,var(--tone) 46%,transparent),inset 0 0 var(--glow-depth) 0 color-mix(in oklch,var(--tone) 24%,transparent);transition:opacity .68s cubic-bezier(.22,.61,.36,1)}.frame-glow-layer.is-active{opacity:1}body[data-view=showcase] .show-top{position:absolute;top:24px;left:24px;right:436px;z-index:2;display:flex;min-height:32px;align-items:center;justify-content:flex-end;gap:12px}body[data-view=showcase] .show-top{pointer-events:none}body[data-view=showcase] .show-top>*{pointer-events:auto}.show-status{padding:6px 10px;border-radius:999px;background:var(--show-badge);color:var(--show-copy);font-size:11px;line-height:16px;backdrop-filter:blur(16px)}body[data-view=showcase] .backgrounds{top:24px;right:auto;left:24px;z-index:2;border:0;border-radius:999px;background:var(--show-badge);padding:4px;backdrop-filter:blur(16px)}body[data-view=showcase] .background-option{width:40px;height:24px;border-radius:999px}body[data-view=showcase] .call-dock{position:absolute;left:32px;right:420px;bottom:48px;z-index:2;display:flex;justify-content:center}.call-controls[hidden]{display:none}.call-controls{display:flex;align-items:center;gap:6px;min-height:62px;padding:6px;border-radius:999px;background:#0003;box-shadow:0 14px 34px -24px #000000c7;backdrop-filter:blur(18px) saturate(.9) brightness(.84)}.call-mic,.call-end{border:0;color:#fff;cursor:pointer;font-family:inherit;transition:transform .12s ease-out,background-color .15s ease-out,color .15s ease-out}.call-mic{display:grid;grid-template-columns:minmax(76px,1fr) auto auto;align-items:center;gap:11px;width:clamp(232px,25vw,286px);height:50px;padding:6px 7px 6px 16px;border-radius:999px;background:#ffffff1f;box-shadow:inset 0 1px #ffffff0e}.call-mic strong{overflow:hidden;padding-block:2px;font-size:15px;font-weight:650;letter-spacing:-.02em;line-height:1.2;text-align:left;text-overflow:ellipsis;white-space:nowrap}.call-mic:hover:not(:disabled){background:#ffffff29}.call-mic:disabled{background:#ffffff1f;color:#fff;cursor:default}.call-mic[data-mode=connect]:disabled strong{color:#ffffffa8}.voice-matrix{display:grid;grid-template-columns:repeat(9,4px);grid-auto-rows:4px;gap:3px;color:#ffffffad}.voice-matrix i{width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.12;transform:scale(.72);transition:opacity 84ms linear}.call-mic-icon{display:grid;width:38px;height:38px;place-items:center;color:#ffffffe6}.call-mic-icon svg{width:20px;height:20px}.call-end{display:grid;width:50px;height:50px;place-items:center;border-radius:50%;background:#ca3748e0;box-shadow:0 8px 18px -12px #520818b8}.call-end svg{width:22px;height:22px}.call-end:hover:not(:disabled){background:#d33e4ff0}.call-mic:active:not(:disabled),.call-end:active:not(:disabled){transform:scale(.96)}.call-end:disabled{background:#ffffff0b;color:#ffffff52;cursor:not-allowed}.call-mic:focus-visible,.call-end:focus-visible{outline:2px solid #fff;outline-offset:2px}body[data-view=showcase] .chat{position:absolute;top:var(--panel-inset);right:var(--panel-inset);bottom:var(--panel-inset);z-index:3;width:var(--panel-width);border:0;border-radius:var(--panel-radius);background:var(--show-panel)}body[data-view=showcase] .chat-head{min-height:76px;padding:0 68px 0 28px;border-bottom:0}.chat-title{flex:1;margin:0;font-size:20px;line-height:28px;font-weight:500;letter-spacing:-.035em;text-wrap:nowrap}body[data-view=showcase] .messages{gap:24px;padding:4px 28px 24px;overscroll-behavior:contain;scrollbar-width:thin}body[data-view=showcase] .message{flex:none;max-width:65ch;padding:0;border:0;border-radius:0;background:none;color:var(--show-ink);font-size:15px;line-height:1.75;animation:message-arrive .18s ease-out both}body[data-view=showcase] .message.user{align-self:flex-end;max-width:92%;padding:12px 16px;border-radius:18px 18px 5px;background:var(--show-input);line-height:1.65}body[data-view=showcase] .message.assistant{align-self:stretch;animation:none}@keyframes message-arrive{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}.message .emotion-chip{display:inline-flex;align-items:center;min-height:21px;margin-right:6px;padding:1px 7px;border-radius:6px;background:var(--tint);color:var(--tone);font:10px/19px HP Geist Mono,ui-monospace,SFMono-Regular,Menlo,monospace;vertical-align:1px;white-space:nowrap}.spoken-word{position:relative;display:inline-block;animation:spoken-word-enter .18s cubic-bezier(.19,1,.22,1) both}.spoken-word-tint{position:absolute;inset:0;color:var(--tone);pointer-events:none;user-select:none;animation:spoken-tint-settle .7s ease-out both}@keyframes spoken-word-enter{0%{opacity:0}to{opacity:1}}@keyframes spoken-tint-settle{0%,22%{opacity:1}to{opacity:0}}body[data-view=showcase] .connection-notice{margin:8px 12px 12px;color:#d9d3e3;font-size:12px;line-height:1.5}body[data-view=showcase] .connection-notice[hidden]{display:none}.text-button{min-height:44px;padding:0 8px;border:0;background:none;color:var(--show-copy);font:inherit;cursor:pointer}.text-button:hover{color:var(--show-ink)}.text-button:focus-visible{outline:2px solid var(--show-accent);outline-offset:2px}body[data-view=showcase] .composer{position:relative;display:block;margin:8px 12px 12px;padding:0;border:0;border-radius:calc(var(--panel-radius) - 12px);background:var(--show-input)}body[data-view=showcase] .connection-notice:not([hidden])+.composer{margin-top:0}body[data-view=showcase] .composer:focus-within{box-shadow:0 0 0 2px var(--show-accent)}body[data-view=showcase] #text{display:block;width:100%;height:80px;padding:27px 80px 27px 16px;border:0;border-radius:inherit;background:transparent;color:var(--show-ink);font:400 16px/25px HP Inter,ui-sans-serif,system-ui,sans-serif;outline:none}body[data-view=showcase] #text:disabled{opacity:1}body[data-view=showcase] #text::placeholder{color:var(--show-placeholder);opacity:1}body[data-view=showcase] #send{position:absolute;right:14px;bottom:16px;width:48px;height:48px;border-radius:50%;background:linear-gradient(145deg,var(--show-control-light),var(--show-control-deep));color:var(--show-control-ink);transition:transform .18s ease-out,opacity .15s ease-out}body[data-view=showcase] #send:hover:not(:disabled){transform:translateY(-2px)}body[data-view=showcase] #send:active:not(:disabled){transform:scale(.94)}body[data-view=showcase] #send:disabled{background:var(--show-disabled);color:var(--show-disabled-ink);opacity:1}body[data-view=showcase] #send svg{width:18px;height:18px}@media(max-width:760px){body[data-view=showcase]{--frame-radius: 32px;--panel-inset: 10px;--glow-depth: 34px;--stage: 62%}body[data-view=showcase] #app{padding:12px 0}body[data-view=showcase] .layout{width:calc(100vw - 24px);height:calc(100dvh - 24px);min-height:560px}body[data-view=showcase] #avatar{right:0;bottom:auto;height:calc(var(--stage) + 48px);-webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 84%);mask-image:linear-gradient(to bottom,#000 72%,transparent 84%)}body[data-view=showcase] .show-top{top:16px;left:16px;right:16px}body[data-view=showcase] .backgrounds{top:16px;left:16px}body[data-view=showcase] .call-dock{top:calc(var(--stage) - 108px);bottom:auto;left:16px;right:16px}body[data-view=showcase] .call-controls{padding:7px}body[data-view=showcase] .call-mic{width:min(218px,calc(100vw - 132px));height:48px;grid-template-columns:minmax(68px,1fr) auto auto;gap:9px;padding-left:15px}body[data-view=showcase] .call-mic strong{font-size:14px}body[data-view=showcase] .voice-matrix{grid-template-columns:repeat(9,3px);grid-auto-rows:3px;gap:2px}body[data-view=showcase] .voice-matrix i{width:3px;height:3px}body[data-view=showcase] .call-mic-icon{width:36px;height:36px}body[data-view=showcase] .call-end{width:48px;height:48px}body[data-view=showcase] .chat{top:calc(var(--stage) - 14px);left:var(--panel-inset);width:auto}body[data-view=showcase] .chat-head{min-height:64px;padding:0 24px}body[data-view=showcase] .chat-title{font-size:18px}body[data-view=showcase] .messages{gap:16px;padding:0 24px 20px}body[data-view=showcase] #text{height:76px;padding:25px 76px 25px 12px}body[data-view=showcase] #send{right:12px;bottom:16px;width:44px;height:44px}}@media(prefers-reduced-motion:reduce){.frame-glow,.frame-glow-layer{transition:opacity .16s ease-out}.spoken-word{animation:none}.spoken-word-tint{display:none}body[data-view=showcase] .message,.voice-matrix i,.call-mic,.call-end{animation:none;transition:none}}.local-controls{display:flex;gap:8px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid #e5e5e5;align-items:center}.local-controls .input{width:auto;max-width:190px}.local-controls label{font-size:12px}.local-controls [hidden]{display:none!important}.view-toggle{position:fixed;right:16px;top:2px;z-index:100;border:0;background:#222;color:#ddd;border-radius:8px;font-size:10px;padding:3px 9px;cursor:pointer}.preset-panel{padding:10px 20px;border-top:1px solid var(--border, #ddd)}.preset-panel[hidden]{display:none}.preset-panel>span{font-size:12px;font-weight:600}.preset-buttons{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.preset-buttons .button{white-space:normal;text-align:left}.preset-panel small{font-size:11px;opacity:.7}
