:root{--bg:#111318;--panel:#1b1e26;--text:#eef0f4;--muted:#9aa0ac;--accent:#3b82f6;--danger:#ef4444;--warning:#f59e0b;--border:#2c303a;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}body{background:var(--bg);min-height:100vh;color:var(--text);margin:0}#app{max-width:960px;margin:0 auto;padding:1.5rem}h1{margin:0 0 .5rem;font-size:1.5rem}.btn{background:var(--panel);color:var(--text);border:1px solid var(--border);cursor:pointer;border-radius:6px;padding:.5rem 1rem;font-size:.9rem}.btn:hover{border-color:var(--accent)}.btn--active{border-color:var(--warning);color:var(--warning)}.btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn--danger{border-color:var(--danger);color:var(--danger)}.btn--danger:hover{background:#ef444426}.btn:disabled{opacity:.4;cursor:default;border-color:var(--border);color:var(--muted)}.banner{border-radius:6px;margin-bottom:1rem;padding:.75rem 1rem;font-size:.9rem}.banner--warning{border:1px solid var(--warning);color:var(--warning);background:#f59e0b26}.banner--error{border:1px solid var(--danger);color:var(--danger);background:#ef444426}.room-screen{text-align:center;max-width:480px;margin:4rem auto}.room-screen__subtitle{color:var(--muted);margin-bottom:1.5rem}.room-screen__form{flex-wrap:wrap;gap:.5rem;margin-top:1rem;display:flex}.room-screen__form input,.room-screen__host-form input,.session-timer input{border:1px solid var(--border);background:var(--panel);min-width:0;color:var(--text);border-radius:6px;flex:1;padding:.5rem .75rem;font-size:1rem}.room-screen__host-form{border:1px solid var(--border);background:var(--panel);text-align:left;border-radius:8px;gap:1rem;padding:1.25rem;display:grid}.room-screen__hint{color:var(--muted);margin:0;font-size:.85rem}.room-screen__invite-name{overflow-wrap:anywhere;font-size:1.2rem}.room-screen__sessions{text-align:left;margin-top:1.5rem}.room-screen__sessions h2{margin:0 0 .25rem;font-size:1.1rem}.hosted-sessions{text-align:left;gap:.5rem;margin:.75rem 0 0;padding:0;list-style:none;display:grid}.hosted-session{border:1px solid var(--border);background:var(--panel);border-radius:8px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:.75rem 1rem;display:flex}.hosted-session--prominent{border-color:var(--accent)}.hosted-session__info{flex:12rem;gap:.15rem;min-width:0;display:grid}.hosted-session__name{overflow-wrap:anywhere;font-weight:600}.hosted-session__meta{color:var(--muted);font-size:.8rem}.hosted-session__actions{flex-wrap:wrap;gap:.4rem;display:flex}.session-timer{border:1px solid var(--border);background:var(--panel);border-radius:8px;flex-shrink:0;margin-bottom:1rem;padding:.85rem 1rem}.session-timer__name{overflow-wrap:anywhere;margin:0 0 .5rem;font-size:1rem;font-weight:600}.session-timer__summary,.session-timer__controls,.session-timer__target{flex-wrap:wrap;align-items:center;gap:.65rem;display:flex}.session-timer__clock{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.65rem}.session-timer--overtime .session-timer__clock{color:var(--warning)}.session-timer__description{color:var(--muted);flex:1;font-size:.8rem}.session-timer__controls{align-items:end;margin-top:.75rem}.session-timer__target{align-items:end}.session-timer input{width:7rem}.call-stage--fullscreen .session-timer{border-radius:0;margin:0}@media (height<=500px) and (width>=600px){.call-stage--fullscreen .session-timer{flex-wrap:wrap;align-items:center;gap:.35rem .75rem;padding:.4rem .6rem;display:flex}.call-stage--fullscreen .session-timer__name{text-overflow:ellipsis;white-space:nowrap;max-width:25%;margin:0;font-size:.85rem;overflow:hidden}.call-stage--fullscreen .session-timer__summary{flex:1}.call-stage--fullscreen .session-timer__clock{font-size:1.25rem}.call-stage--fullscreen .session-timer__controls{flex:100%;margin:0}.call-stage--fullscreen .session-timer__target,.call-stage--fullscreen .session-timer .settings__field{flex-flow:row;flex:1;align-items:center;min-width:0;font-size:.75rem}.call-stage--fullscreen .session-timer input{flex:none;width:4.5rem}}.room-bar{background:var(--panel);border:1px solid var(--border);border-radius:6px;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:.75rem;padding:.5rem .75rem;display:flex}.room-bar__label{overflow-wrap:anywhere;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem}.status-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;margin-bottom:1rem;display:flex}.status-bar__actions{gap:.5rem;display:flex}.status-bar__text{color:var(--muted);font-size:.9rem}.status-bar[data-status=connected] .status-bar__text{color:#22c55e}.status-bar[data-status=failed] .status-bar__text{color:var(--danger)}.video-panel{background:var(--panel);border:1px solid var(--border);border-radius:8px;flex-direction:column;margin-bottom:1rem;display:flex;overflow:hidden}.video-panel__controls{background:var(--panel);border-bottom:1px solid var(--border);flex-wrap:wrap;align-items:center;gap:.5rem;padding:.5rem;display:flex}.video-panel__stage{background:#000;position:relative}.video-panel__video{background:#000;display:block}.video-panel__video--local{transform:scaleX(-1)}.video-panel--pip .video-panel__video--remote{aspect-ratio:16/9;object-fit:cover;width:100%}.video-panel--pip .video-panel__video--local{border:2px solid var(--border);border-radius:6px;width:25%;max-width:220px;position:absolute;bottom:.75rem;right:.75rem}.video-panel--side-by-side .video-panel__stage{flex-direction:row;gap:2px;display:flex}.video-panel--side-by-side .video-panel__video{aspect-ratio:4/3;object-fit:cover;flex:50%;width:50%;min-width:0}.video-panel--top-bottom .video-panel__stage{flex-direction:column;gap:2px;display:flex}.video-panel--top-bottom .video-panel__video{aspect-ratio:16/9;object-fit:cover;width:100%}.call-stage{flex-direction:column;display:flex}.call-stage--fullscreen{background:#000;justify-content:center;position:relative}.call-stage--fullscreen .video-panel{border:none;border-radius:0;flex:1;min-height:0;margin-bottom:0}.call-stage--fullscreen .video-panel__stage{flex:1;min-height:0}.call-stage--fullscreen .video-panel--pip .video-panel__stage,.call-stage--fullscreen .video-panel--side-by-side .video-panel__stage,.call-stage--fullscreen .video-panel--top-bottom .video-panel__stage{height:100%}.call-stage--fullscreen .video-panel--pip .video-panel__video--remote,.call-stage--fullscreen .video-panel--side-by-side .video-panel__video,.call-stage--fullscreen .video-panel--top-bottom .video-panel__video{height:100%;aspect-ratio:unset}.call-stage--fullscreen .piano-keyboard{border-bottom:none;border-left:none;border-right:none;border-radius:0;flex-shrink:0;padding-bottom:4rem}.call-stage--fullscreen .video-panel{position:relative}.call-stage--fullscreen .video-panel__controls{z-index:2;background:linear-gradient(#000000b3,#0000);border-bottom:none;transition:opacity .2s,transform .2s;position:absolute;top:0;left:0;right:0}.call-stage--fullscreen:not(.call-stage--chrome-visible) .video-panel__controls{opacity:0;pointer-events:none;transform:translateY(-100%)}.call-stage__bottom-bar{display:none}.call-stage--fullscreen .call-stage__bottom-bar{z-index:2;background:linear-gradient(#0000,#000000b3);justify-content:center;padding:.75rem;transition:opacity .2s,transform .2s;display:flex;position:absolute;bottom:0;left:0;right:0}.call-stage--fullscreen:not(.call-stage--chrome-visible) .call-stage__bottom-bar{opacity:0;pointer-events:none;transform:translateY(100%)}.mic-meter{border:1px solid var(--border);background:#1b1e26d9;border-radius:6px;align-items:center;gap:.35rem;padding:.35rem .6rem;font-size:.9rem;display:flex}.mic-meter__icon{line-height:1}.mic-meter__bar{transform-origin:0;background:#22c55e;border-radius:4px;width:48px;height:8px;transition:transform 60ms linear;transform:scaleX(0)}.mic-meter__bar--hot{background:var(--danger)}.settings{background:var(--panel);border:1px solid var(--border);border-radius:8px;flex-wrap:wrap;align-items:end;gap:1rem;margin-bottom:1rem;padding:1rem;display:flex}.settings__field{color:var(--muted);flex-direction:column;gap:.25rem;font-size:.85rem;display:flex}.settings select{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;min-width:180px;padding:.4rem}.settings--audio{align-items:center}.settings__title{color:var(--muted);margin-right:.25rem;font-size:.85rem}.settings__checkbox-field{color:var(--text);align-items:center;gap:.4rem;font-size:.85rem;display:flex}.piano-keyboard{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:1rem}.piano-keyboard--hidden{display:none}.piano-keyboard__toolbar{align-items:center;gap:.4rem;margin-bottom:.5rem;display:flex}.piano-keyboard__zoom-btn{padding:.25rem .6rem;font-size:1rem;line-height:1}.piano-keyboard__zoom-btn:disabled{opacity:.4;cursor:default}.piano-keyboard__pan-slider{accent-color:var(--accent);flex:1}.piano-keyboard__stage{padding-bottom:1.1rem;position:relative}.piano-keyboard__canvas{touch-action:none;cursor:pointer;width:100%;display:block}.piano-keyboard__middle-c-hint{color:var(--warning);white-space:nowrap;pointer-events:none;flex-direction:column;align-items:center;gap:0;font-size:.65rem;line-height:1;display:flex;position:absolute;bottom:0;transform:translate(-50%)}.piano-keyboard__middle-c-arrow{font-size:.6rem;line-height:1}.piano-keyboard__hint{color:var(--muted);margin:.5rem 0 0;font-size:.8rem}.fatal-error{text-align:center;max-width:560px;margin:4rem auto}@media (width<=600px){#app{padding:.75rem}.room-bar,.status-bar{gap:.5rem}.status-bar__actions{width:100%}.status-bar__actions .btn{flex:1}.btn{padding:.6rem .9rem}.video-panel__controls{gap:.4rem;padding:.4rem}.video-panel--pip .video-panel__video--local{width:35%}.settings{padding:.75rem}.settings select{width:100%;min-width:0}}