:root{--text:#4b5563;--text-h:#111827;--bg:#f7f8f5;--surface:#fff;--border:#d8ded6;--accent:#0f766e;--danger:#b42318;--focus:#2563eb;--button-bg:#fff;--button-border:#cfd8cf;--button-text:#111827;--shadow:0 18px 50px #11182714;--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font:16px/1.5 var(--sans);letter-spacing:0;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--text:#c4c9c1;--text-h:#f7f8f5;--bg:#111411;--surface:#1a1f1a;--border:#313a32;--accent:#14b8a6;--danger:#f97066;--focus:#60a5fa;--button-bg:#202720;--button-border:#3b453c;--button-text:#f7f8f5;--shadow:0 18px 50px #00000052}}*{box-sizing:border-box}body{min-width:0;margin:0;overflow-x:clip}button,input,select{font:inherit}#root{min-height:100svh}.app-shell{flex-direction:column;min-height:100svh;display:flex}.topbar{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:16px;min-height:72px;padding:0 32px;display:flex}.brand{color:var(--text-h);font-size:18px;font-weight:700;text-decoration:none}.language-switch{color:var(--text);align-items:center;gap:10px;font-size:14px;display:inline-flex}.language-switch select,input:not([type=range]){border:1px solid var(--border);background:var(--surface);min-height:42px;color:var(--text-h);font:inherit;border-radius:7px}.language-switch select{padding:0 30px 0 10px}main{flex:1;min-width:0;display:flex}.page-grid,.join-layout{grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);align-items:center;gap:36px;width:min(1060px,100%);margin:0 auto;padding:56px 20px;display:grid}.intro{text-align:left}.eyebrow{color:var(--accent);letter-spacing:0;text-transform:uppercase;margin-bottom:12px;font-size:13px;font-weight:700}.intro h1{color:var(--text-h);letter-spacing:0;margin:0;font-size:clamp(42px,8vw,88px);line-height:.94}.intro p:not(.eyebrow){max-width:560px;color:var(--text);margin-top:20px;font-size:20px}.primary-action,.secondary-action,.field-result button,.join-media-button,.room-controls button{border:1px solid var(--button-border);background:var(--button-bg);min-height:44px;color:var(--button-text);font:inherit;cursor:pointer;border-radius:7px;font-weight:700;text-decoration:none}.primary-action{background:var(--accent);border-color:var(--accent);color:#fff;margin-top:32px;padding:0 22px}.primary-action:disabled{cursor:progress;opacity:.7}.secondary-action{justify-content:center;align-items:center;padding:0 16px;display:inline-flex}.result-panel,.join-form{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);text-align:left;border-radius:8px;flex-direction:column;gap:16px;padding:22px;display:flex}.field-result{gap:8px;display:grid}.field-result span,.join-form span{color:var(--text);letter-spacing:0;text-transform:uppercase;font-size:13px;font-weight:700}.field-result strong{overflow-wrap:anywhere;color:var(--text-h);font-size:18px}.field-result button{justify-self:start;padding:0 14px}.join-form label{gap:8px;display:grid}.join-form input{box-sizing:border-box;width:100%;padding:0 12px}.join-media-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.join-media-button{width:100%;min-width:0;padding:0 12px}.join-media-button[data-enabled=false]{border-color:color-mix(in srgb, var(--danger) 36%, var(--button-border));color:var(--danger)}.error{color:var(--danger);font-weight:700}.room-layout{width:min(1460px,100%);min-width:0;margin:0 auto;padding:22px 16px 28px}.room-statusbar{border:1px solid var(--border);background:linear-gradient(135deg, #0f766e14, transparent 42%), var(--surface);min-width:0;box-shadow:var(--shadow);border-radius:8px;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;padding:12px 14px;display:flex}.room-identity{align-items:center;gap:12px;min-width:0;display:flex}.room-identity p,.room-code span,.device-control span,.volume-control span{color:var(--text);letter-spacing:0;text-transform:uppercase;margin:0;font-size:12px;font-weight:800}.room-identity h1{color:var(--text-h);letter-spacing:0;text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:clamp(24px,4vw,42px);line-height:1;overflow:hidden}.status-dot{border:2px solid var(--surface);background:var(--text);width:14px;height:14px;box-shadow:0 0 0 3px color-mix(in srgb, var(--text) 22%, transparent);border-radius:999px;flex:none}.status-dot-connected{background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent)}.status-dot-connecting,.status-dot-reconnecting{background:#d97706;box-shadow:0 0 0 3px #d9770638}.status-dot-disconnected{background:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb, var(--danger) 22%, transparent)}.room-code{justify-items:end;gap:2px;min-width:0;display:grid}.room-code strong{max-width:220px;color:var(--text-h);text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.room-error{margin:0 0 12px}.room-stage{border:1px solid var(--border);background:#121719;border-radius:8px;min-width:0;padding:10px;box-shadow:inset 0 0 0 1px #ffffff0a}.video-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0;display:grid}.video-grid[data-participant-count="1"]{grid-template-columns:minmax(0,1fr)}.video-grid[data-participant-count="2"],.video-grid[data-participant-count="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}.video-tile{background:#0b0f12;border:1px solid #ffffff24;border-radius:6px;min-width:0;overflow:hidden}.video-frame{aspect-ratio:16/9;background:linear-gradient(135deg,#14b8a61f,#0000 46%),#0b0f12;min-width:0;overflow:hidden}.video-tile video{object-fit:cover;object-position:center;width:100%;height:100%;display:block}.video-footer{color:#fff;background:#151b1e;border-top:1px solid #ffffff1f;justify-content:space-between;align-items:center;gap:8px;min-width:0;min-height:56px;padding:8px 10px 8px 12px;display:flex}.video-meta{gap:1px;min-width:0;display:grid}.video-meta strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.video-meta span,.media-badges span{font-size:12px}.video-meta span{color:#ffffffad}.video-footer-actions,.media-badges{align-items:center;gap:6px;display:flex}.video-footer-actions{flex:0 auto;min-width:0}.media-badges{flex-wrap:wrap;justify-content:flex-end;min-width:0}.media-badges span{color:#ffffffe6;white-space:nowrap;background:#ffffff1f;border-radius:999px;padding:5px 8px;font-weight:800}.video-focus-button{color:#fff;cursor:pointer;background:#ffffff14;border:1px solid #fff3;border-radius:6px;flex:none;place-items:center;width:38px;height:38px;padding:0;display:inline-grid}.video-focus-button:hover{background:#ffffff29;border-color:#ffffff6b}.video-focus-button svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;width:19px;height:19px}.spotlight-layout{grid-template-columns:minmax(0,1fr) 224px;gap:10px;height:min(72svh,780px);min-height:480px;display:grid}.spotlight-main,.spotlight-filmstrip{min-width:0;min-height:0}.video-tile-spotlight{flex-direction:column;height:100%;display:flex}.video-tile-spotlight .video-frame{aspect-ratio:auto;flex:1;min-height:0}.spotlight-filmstrip{scrollbar-color:#ffffff52 transparent;flex-direction:column;gap:10px;padding-right:3px;display:flex;overflow:hidden auto}.video-tile-filmstrip{cursor:pointer;flex:none}.video-tile-filmstrip:hover{border-color:#ffffff5c}.video-tile-filmstrip .video-footer{min-height:48px;padding:6px 8px}.video-tile-filmstrip .video-meta span,.video-tile-filmstrip .media-badges,.video-tile-filmstrip .video-footer-actions{display:none}.empty-room{color:#ffffffbd;margin:12px 2px 0}.room-controls{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow);border-radius:8px;grid-template-columns:minmax(280px,.65fr) minmax(420px,1.1fr) minmax(360px,.9fr);align-items:stretch;gap:12px;margin-top:14px;padding:12px;display:grid}.quick-actions,.control-cluster{gap:10px;display:grid}.quick-actions{grid-template-rows:repeat(2,72px);grid-template-columns:minmax(0,1fr) minmax(0,.58fr)}.control-cluster{grid-template-rows:repeat(2,72px);grid-template-columns:repeat(2,minmax(0,1fr));min-width:0}.device-control:nth-child(3){grid-column:1/-1}.control-cluster-volume{grid-template-rows:repeat(2,72px);grid-template-columns:minmax(0,1fr)}.control-button{width:100%;min-width:0;min-height:0;padding:0 13px}.quick-actions .control-button:first-child{grid-column:1/-1}.control-button-danger{border-color:color-mix(in srgb, var(--danger) 36%, var(--button-border));color:var(--danger)}.device-control,.volume-control{min-width:0}.device-control{gap:6px;display:grid}.device-control select{border:1px solid var(--border);background:var(--button-bg);width:100%;min-width:0;min-height:44px;color:var(--text-h);font:inherit;border-radius:7px;padding:0 34px 0 10px}.volume-control{border:1px solid var(--border);background:var(--surface);min-height:0;color:var(--text-h);border-radius:7px;grid-template-columns:minmax(118px,.42fr) minmax(120px,1fr) 54px;align-items:center;gap:8px;padding:6px 10px;display:grid}.volume-control input{width:100%;min-width:0;accent-color:var(--accent)}.volume-control strong{color:var(--text-h);text-align:right;font-size:13px}.device-note{color:var(--text);grid-column:1/-1;margin:0;font-size:13px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,.video-tile-filmstrip:focus-visible{outline:3px solid var(--focus);outline-offset:2px}@media (width<=980px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.video-grid[data-participant-count="1"]{grid-template-columns:minmax(0,1fr)}.spotlight-layout{grid-template-columns:minmax(0,1fr) 190px}}@media (width<=1120px){.room-controls{grid-template-columns:minmax(0,1fr)}.control-cluster-volume{grid-template-rows:72px;grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=760px){.topbar{flex-direction:column;align-items:flex-start;padding:18px 20px}.page-grid,.join-layout{grid-template-columns:1fr;width:min(100%,560px);padding:32px 14px}.intro h1{font-size:46px}.intro p:not(.eyebrow){font-size:17px}.room-layout{width:100%;padding:18px 10px 22px}.room-statusbar{flex-direction:column;align-items:stretch}.room-code{justify-items:start}.room-code strong{max-width:100%}.room-controls{grid-template-columns:minmax(0,1fr)}.quick-actions,.control-cluster,.control-cluster-volume{justify-content:flex-start}.room-controls button,.join-media-button,.device-control,.volume-control{flex-basis:100%;width:100%;min-width:0}.volume-control{grid-template-columns:minmax(0,1fr) 52px}.volume-control input{order:2;grid-column:1/-1}.video-grid{grid-template-columns:minmax(0,1fr);width:100%}.video-tile{width:100%;max-width:100%}.spotlight-layout{grid-template-columns:minmax(0,1fr);height:auto;min-height:0}.video-tile-spotlight{height:auto}.video-tile-spotlight .video-frame{aspect-ratio:16/9}.spotlight-filmstrip{flex-direction:row;padding:0 0 4px;overflow:auto hidden}.video-tile-filmstrip{width:clamp(180px,58vw,260px)}.video-footer{flex-wrap:wrap;align-items:flex-start}.video-footer-actions{justify-content:space-between;width:100%}}