*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#101828;color:#f2f4f7}.screen{min-height:100%;display:flex;align-items:center;justify-content:center;padding:16px}.card{width:100%;max-width:420px;background:#1d2939;border-radius:16px;padding:24px;text-align:center;display:flex;flex-direction:column;gap:12px}.card h1{font-size:22px}.card p{color:#d0d5dd;line-height:1.5}.muted{color:#98a2b3}.datetime{font-weight:600}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;border-radius:10px;background:#1a73e8;color:#fff;font-size:16px;font-weight:600;padding:14px 24px;cursor:pointer}.button:disabled{opacity:.5;cursor:default}.button.join{margin-top:8px}.preview{position:relative;aspect-ratio:4 / 3;background:#0c111d;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}.preview video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.preview video.hidden,.local-preview video.hidden{display:none}.preview-controls{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:12px}.round-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;width:52px;height:52px;border-radius:50%;background:#ffffff24;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}.round-button.off,.round-button.hangup{background:#f04438}.select-label{display:flex;flex-direction:column;gap:4px;text-align:left;font-size:13px;color:#98a2b3}.select-label select{border-radius:8px;border:1px solid #344054;background:#0c111d;color:#f2f4f7;padding:10px;font-size:15px}.media-blocked{display:flex;flex-direction:column;gap:12px;padding:12px 0}.media-blocked h2{font-size:17px}.spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.2);border-top-color:#1a73e8;border-radius:50%;animation:spin .9s linear infinite;margin:0 auto}@keyframes spin{to{transform:rotate(360deg)}}.call{position:fixed;top:0;right:0;bottom:0;left:0;background:#0c111d}.peer-grid{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-auto-rows:1fr;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 8px) 8px calc(env(safe-area-inset-bottom,0px) + 8px)}.peer-grid.cols-1{padding:0;gap:0}.peer-grid.cols-2{grid-template-columns:repeat(2,1fr)}.peer-grid.cols-3{grid-template-columns:repeat(3,1fr)}@media (max-width: 600px){.peer-grid.cols-3{grid-template-columns:repeat(2,1fr)}}.peer-tile{position:relative;min-width:0;min-height:0;background:#1d2939;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}.peer-grid.cols-1 .peer-tile{border-radius:0}.peer-tile video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.peer-tile video.hidden{display:none}.peer-placeholder{width:64px;height:64px;border-radius:50%;background:#344054;font-size:26px;font-weight:600;display:flex;align-items:center;justify-content:center}.peer-name{position:absolute;left:8px;bottom:8px;max-width:calc(100% - 16px);padding:4px 10px;border-radius:8px;background:#0c111d99;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.peer-connecting{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0c111d80}.call-status{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:#0c111dd9;font-size:17px}.local-preview{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;width:108px;aspect-ratio:3 / 4;background:#1d2939;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px #0006}.local-preview video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.call-settings{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 96px);left:50%;transform:translate(-50%);width:min(320px,calc(100% - 32px));background:#1d2939;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px}.call-controls{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 24px);left:0;right:0;display:flex;justify-content:center;gap:16px}