:root{--bg:#f5f6f8;--panel:#fff;--panel-2:#eef1f5;--border:#d9dee6;--text:#1f2430;--text-dim:#6b7686;--accent:#0f766e;--accent-2:#2563eb;--warn:#b45309;--bad:#dc2626;font-size:14px}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%}body{background:var(--bg);color:var(--text);flex-direction:column;margin:0;font-family:Hiragino Sans,Noto Sans JP,system-ui,sans-serif;display:flex;overflow:hidden}header{background:var(--panel);border-bottom:1px solid var(--border);flex:none;justify-content:space-between;align-items:center;gap:12px;padding:8px 14px;display:flex}header h1{margin:0;font-size:1rem;font-weight:700}header .sub{color:var(--text-dim);margin-left:8px;font-size:.72rem;font-weight:400}.header-right{align-items:center;gap:8px;display:flex}.btn{background:var(--panel);color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:5px 12px;font-size:.82rem}.btn:hover:not(:disabled){border-color:var(--accent-2)}.btn:disabled{opacity:.45;cursor:default}.btn.recording{border-color:var(--bad);color:var(--bad)}.chip{background:var(--panel-2);border:1px solid var(--border);color:var(--text-dim);white-space:nowrap;border-radius:999px;padding:2px 10px;font-size:.78rem;display:inline-block}.chip.good{color:var(--accent);border-color:var(--accent)}.chip.poor{color:var(--warn);border-color:var(--warn)}.chip.alert{color:var(--bad);border-color:var(--bad)}#status-banner{background:var(--panel);border:1px solid var(--accent-2);white-space:pre-wrap;border-radius:8px;flex:none;margin:8px 14px 0;padding:8px 12px;font-size:.85rem}#status-banner.error{border-color:var(--bad);color:var(--bad)}.grid{flex:1;grid-template:"video expr"minmax(0,1.4fr)"video pulse"minmax(0,.6fr)"pose payload"minmax(0,1fr)/minmax(0,1.5fr) minmax(0,1fr);gap:10px;min-height:0;padding:10px 14px 12px;display:grid}.panel{background:var(--panel);border:1px solid var(--border);border-radius:10px;flex-direction:column;min-width:0;min-height:0;padding:10px 12px;display:flex;overflow:hidden}.panel h2{color:var(--text-dim);flex:none;margin:0 0 6px;font-size:.82rem;font-weight:600}.panel h3{color:var(--text-dim);flex:none;margin:6px 0 3px;font-size:.72rem;font-weight:600}.note{color:var(--text-dim);font-size:.68rem;font-weight:400}.video-panel{grid-area:video}.expr-panel{grid-area:expr}.pulse-panel{grid-area:pulse}.pose-panel{grid-area:pose}.payload-panel{grid-area:payload}.expr-panel{overflow-y:auto}.video-wrap{background:#dfe3e9;border-radius:8px;flex:1;min-height:0;position:relative;overflow:hidden}.video-wrap video,.video-wrap canvas{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.mirrored video,.mirrored canvas{transform:scaleX(-1)}.panel-foot{color:var(--text-dim);flex:none;gap:14px;padding-top:6px;font-size:.78rem;display:flex}.panel-foot label{cursor:pointer;align-items:center;gap:5px;display:flex}.big-row{flex-wrap:wrap;flex:none;align-items:baseline;gap:12px;margin-bottom:4px;display:flex}.big-label{color:var(--accent);font-size:1.7rem;font-weight:800;line-height:1.1}.big-sub{color:var(--text-dim);font-variant-numeric:tabular-nums;font-size:.95rem}.bars{flex-direction:column;gap:3px;display:flex}.bars.small{gap:2px}.bar-row{grid-template-columns:6em 1fr 3em;align-items:center;gap:8px;font-size:.74rem;display:grid}.bars.small .bar-row{color:var(--text-dim);font-size:.68rem}.bar-track{background:var(--panel-2);border-radius:4px;height:7px;overflow:hidden}.bars.small .bar-track{height:4px}.bar-fill{background:var(--accent);border-radius:4px;width:0%;height:100%;transition:width .12s linear}.bars.small .bar-fill{background:var(--accent-2)}.bar-val{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-dim)}.pulse-meta{flex-direction:column;gap:4px;display:flex}#bpm{color:var(--accent-2)}#bpm.dim{color:var(--text-dim)}#waveform{flex:none;width:100%;height:40px;margin-top:4px}#pose3d{background:var(--panel-2);border-radius:8px;flex:1;min-height:0;overflow:hidden}.pose-meta{flex:none;align-items:center;gap:10px;padding-top:6px;display:flex}.motion-row{flex:none;align-items:center;gap:10px;padding-top:6px;font-size:.78rem;display:flex}.motion-title{color:var(--text-dim)}.meter{background:var(--panel-2);border-radius:4px;flex:1;max-width:200px;height:7px;overflow:hidden}#motion-bar{background:var(--accent);border-radius:4px;width:0%;height:100%;transition:width .15s linear}.view-switch{gap:0;display:flex}.view-switch .btn{border-radius:6px 0 0 6px}.view-switch .btn+.btn{border-left:none;border-radius:0 6px 6px 0}.view-switch .btn.active{background:var(--accent-2);border-color:var(--accent-2);color:#fff}.chat-panel{grid-area:chat;display:none}.state-mini-panel{grid-area:state;display:none}body.mode-dialog .chat-panel,body.mode-dialog .state-mini-panel{display:flex}body.mode-dialog .expr-panel,body.mode-dialog .pulse-panel,body.mode-dialog .pose-panel,body.mode-dialog .payload-panel{display:none}body.mode-dialog .grid{grid-template:"chat video"minmax(0,1fr)"chat state"minmax(0,1fr)/minmax(0,1.6fr) minmax(0,1fr)}body.mode-dialog .msg{max-width:80%;font-size:.88rem}body.mode-dialog .chat-input-row input{padding:9px 12px;font-size:.95rem}body.mode-dialog .chat-input-row .btn{padding:8px 14px;font-size:.95rem}.state-chips{flex-wrap:wrap;flex:none;gap:6px;display:flex}.state-chips .chip{color:var(--text);font-size:.8rem}.state-mini-panel #events-mini{flex:1;min-height:0;max-height:none;margin:0;padding:0;font-size:.74rem;list-style:none;overflow-y:auto}.state-mini-panel #events-mini li{border-bottom:1px solid var(--border);color:var(--text-dim);padding:2px 0}.state-mini-panel #events-mini li .t{color:var(--accent-2);font-variant-numeric:tabular-nums;margin-right:8px}.note a{color:var(--accent-2);cursor:pointer;text-decoration:none}.chat-setup{flex:none;gap:6px;margin-bottom:6px;display:flex}.chat-setup input{border:1px solid var(--border);border-radius:6px;flex:1;min-width:0;padding:5px 8px;font-size:.76rem}.chat-setup .key-note{color:var(--text-dim);align-self:center;font-size:.68rem}#chat-log{flex-direction:column;flex:1;gap:4px;min-height:0;padding:2px 0;display:flex;overflow-y:auto}.msg{white-space:pre-wrap;word-break:break-word;border-radius:10px;max-width:85%;padding:6px 9px;font-size:.78rem;line-height:1.45}.msg.user{background:#e3edff;align-self:flex-end}.msg.ai{background:var(--panel-2);align-self:flex-start}.msg.error{color:var(--bad);background:#fdecec;align-self:flex-start}.msg .state-line{color:var(--text-dim);margin-top:4px;font-size:.64rem;display:block}.msg details{color:var(--text-dim);margin-top:3px;font-size:.64rem}.msg details pre{background:#0000000d;border-radius:5px;margin:3px 0 0;padding:5px;font-size:.62rem;line-height:1.4;overflow-x:auto}.chat-input-row{flex:none;align-items:center;gap:6px;padding-top:6px;display:flex}.chat-input-row input{border:1px solid var(--border);border-radius:6px;flex:1;min-width:0;padding:6px 9px;font-size:.8rem}#btn-mic.recording{border-color:var(--bad);color:var(--bad);background:#fdecec}.tts-toggle{color:var(--text-dim);cursor:pointer;white-space:nowrap;align-items:center;gap:4px;font-size:.72rem;display:flex}.payload-panel pre{background:var(--panel-2);border-radius:8px;flex:1;min-height:60px;margin:0;padding:8px;font-size:.7rem;line-height:1.4;overflow:auto}#events{flex:none;max-height:90px;margin:0;padding:0;font-size:.74rem;list-style:none;overflow-y:auto}#events li{border-bottom:1px solid var(--border);color:var(--text-dim);padding:2px 0}#events li .t{color:var(--accent-2);font-variant-numeric:tabular-nums;margin-right:8px}@media (height<=720px){.expr-panel h3,#expr-blend{display:none}}@media (width<=980px){body{overflow:auto}.grid{grid-template-rows:none;grid-template-columns:minmax(0,1fr);grid-template-areas:"video""expr""pulse""pose""payload"}.video-wrap{aspect-ratio:4/3;flex:none}}