:root{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#eaf1f8;background:#101b29;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at 82% 17%,#24425d 0,transparent 32%),radial-gradient(circle at 6% 83%,#193e49 0,transparent 29%),#101b29}button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.shell{max-width:1150px;margin:auto;padding:0 28px}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff16}.brand{font-size:20px;font-weight:750;letter-spacing:-.04em}.brand-icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#5bd0b0;color:#0e2430;margin-right:9px}.top-note{color:#9bb1c0;font-size:14px}.hero{min-height:calc(100vh - 92px);display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:7%;padding:60px 0 110px}.eyebrow{color:#67d7bb;font-size:12px;font-weight:800;letter-spacing:.22em}.intro h1{font-size:clamp(46px,6vw,82px);line-height:1.13;letter-spacing:-.065em;margin:20px 0 24px}.intro em{font-style:normal;color:#67d7bb}.intro p{color:#abc0ce;font-size:18px;line-height:1.7;max-width:470px}.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px}.chips span{font-size:12px;border:1px solid #527387;border-radius:100px;color:#b8ccd8;padding:10px 13px}.card,.room-card{background:#f7fbfc;color:#163044;border-radius:24px;box-shadow:0 30px 90px #06131f66;padding:38px}.card-head{display:flex;gap:17px;align-items:center;margin-bottom:33px}.card-icon{width:48px;height:48px;border-radius:15px;background:#d9f8ed;color:#117c66;display:grid;place-items:center;font-size:25px}.card h2{margin:0 0 5px;font-size:23px;letter-spacing:-.04em}.card-head p{color:#7b909d;margin:0;font-size:13px}label{display:block;font-size:13px;font-weight:700;margin:20px 0 9px}input{width:100%;height:48px;border:1px solid #d4e0e6;background:#fff;color:#153044;border-radius:10px;padding:0 14px;outline:none}input:focus{border-color:#21a986;box-shadow:0 0 0 3px #b5f0de}input::placeholder{color:#9db0ba}.primary{width:100%;height:51px;display:flex;align-items:center;justify-content:space-between;border:0;border-radius:11px;background:#159b79;color:#fff;font-weight:750;margin-top:26px;padding:0 17px}.primary:hover{background:#087f62}.primary:disabled{opacity:.55;cursor:wait}.divider{position:relative;text-align:center;color:#93a5af;font-size:12px;margin:28px 0 18px}.divider:before{content:"";height:1px;background:#dbe5e9;position:absolute;top:50%;left:0;right:0}.divider span{position:relative;background:#f7fbfc;padding:0 14px}.join-row,.link-row{display:flex;gap:9px}.join-row button,.link-row button{border:1px solid #d5e1e5;background:#e9f3f4;color:#1a6c62;border-radius:10px;padding:0 16px;font-weight:700}.error{color:#b73745;font-size:13px;min-height:18px;margin:12px 0 0}.room{max-width:580px;margin:60px auto}.room-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;color:#b6cbd5}.back{font-size:14px}.pill{border:1px solid #4a857b;color:#6de1be;padding:8px 12px;border-radius:100px;font-size:12px}.room-card{padding:45px}.room-symbol{width:55px;height:55px;display:grid;place-items:center;border-radius:17px;background:#dcf5ea;color:#0c8d6e;font-size:29px}.room-heading h1{margin:22px 0 8px;font-size:30px;letter-spacing:-.04em}.room-heading p{margin:0 0 28px;color:#76909d}.invite{border-top:1px solid #dce7eb;margin-top:35px;padding-top:10px}.invite input{font-size:12px;color:#607783}#meeting-view{position:fixed;inset:0;background:#101b29;z-index:10}.meeting-bar{height:50px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;color:#d2e5eb;font-size:14px}.meeting-bar button{border:1px solid #506678;border-radius:7px;background:#1e3444;color:#d9e9ed;padding:7px 12px}rtk-meeting{display:flex;height:calc(100vh - 50px)}[hidden]{display:none!important}@media(max-width:760px){.shell{padding:0 20px}.topbar{height:72px}.top-note{display:none}.hero{min-height:auto;display:block;padding:52px 0 65px}.intro h1{font-size:48px}.intro p{font-size:16px}.chips{margin:25px 0 38px}.card,.room-card{padding:27px}.room{margin:35px auto}}
.join-row input,.link-row input{min-width:0;flex:1}.join-row button,.link-row button{min-width:70px;white-space:nowrap}
.device-options{display:flex;flex-wrap:wrap;gap:14px;margin:16px 0}.device-options label{display:flex;align-items:center;gap:6px;margin:0;font-weight:500}.device-options input{width:17px;height:17px;accent-color:#159b79}.meeting-bar button{white-space:nowrap}

.text-button{border:0;background:transparent;color:#32776c;padding:15px 0;cursor:pointer}
.stage-loading{position:absolute;inset:50px 0 0;background:#131313;z-index:2;display:flex;flex-direction:column;padding:48px 28px 0;color:#dce6eb}.stage-placeholder{flex:1;min-height:0;border-radius:18px;background:linear-gradient(120deg,#1c1c1c,#222,#1c1c1c);background-size:200% 100%;animation:stage-shimmer 3s ease-in-out infinite;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.loading-avatar{width:96px;height:96px;border-radius:50%;background:#244c46;color:#6de0bd;display:grid;place-items:center;font-size:40px;animation:avatar-pulse 2s ease-in-out infinite}.connection-caption{display:flex;align-items:center;gap:10px;font-size:16px}.connection-spinner{width:16px;height:16px;border:2px solid #466459;border-top-color:#72dfc0;border-radius:50%;animation:connection-spin .8s linear infinite}.stage-placeholder p{margin:0;color:#8ea59e;font-size:13px}.loading-controls{height:90px;display:flex;align-items:center;justify-content:center;gap:16px}.loading-controls span{height:36px;width:36px;background:#252525;border-radius:50%}#retry-connection{border:0;border-radius:9px;padding:12px 24px;background:#159b79;color:white}#connection-home{color:#a3beb6;font-size:14px}.stage-loading.is-error .connection-spinner{display:none}.stage-loading.is-error .stage-placeholder,.stage-loading.is-error .loading-avatar{animation:none}@keyframes stage-shimmer{50%{background-position:100% 50%}}@keyframes avatar-pulse{50%{box-shadow:0 0 0 15px #244c4622}}@keyframes connection-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.stage-placeholder,.loading-avatar,.connection-spinner{animation:none}}@media(max-width:600px){.stage-loading{padding:20px 12px 0}.loading-avatar{width:72px;height:72px;font-size:30px}}
.stage-identity{width:min(360px,calc(100% - 32px));text-align:left}.stage-identity input{background:#292e31;border-color:#425451;color:#edf5f2}.stage-identity label{color:#c8dcd5}.stage-identity p{color:#ef9a9a!important;margin-top:12px!important}.stage-loading.is-identity .connection-spinner,.stage-loading.is-ended .connection-spinner{display:none}.stage-loading.is-identity .stage-placeholder,.stage-loading.is-ended .stage-placeholder,.stage-loading.is-identity .loading-avatar,.stage-loading.is-ended .loading-avatar{animation:none}

/* Size the meeting from the visible viewport, including mobile browser chrome. */
#meeting-view{display:flex;flex-direction:column;bottom:auto;height:100vh;height:100dvh;padding-bottom:env(safe-area-inset-bottom,0px)}
.meeting-bar{flex:0 0 50px;min-width:0}.meeting-bar>div{display:flex;align-items:center;gap:5px}
rtk-meeting{flex:1 1 0%;height:auto;min-height:0;width:100%}
#microphone-button{display:none}#media-feedback{position:absolute;top:52px;left:12px;right:12px;z-index:4;margin:0;color:#ffe0c0;background:#513127;border-radius:8px;padding:10px;font-size:13px}#media-feedback:empty{display:none}
@media(max-width:600px){#microphone-button{display:inline-block;min-width:48px;min-height:40px;border-color:#66c7ad}#microphone-button[aria-pressed="true"]{background:#12785f}.meeting-bar{padding:0 8px;gap:4px;font-size:12px}.meeting-bar button{padding:7px 8px;font-size:12px;min-height:40px}.meeting-bar>span{white-space:nowrap}.stage-loading{bottom:env(safe-area-inset-bottom,0px)}}
/* Device and media actions now live together in the two-row bottom dock. */
.meeting-bar #microphone-button,.meeting-bar #leave-button{display:none!important}
/* A quiet meeting header: time, code and details on the left; participants on the right. */
#meeting-header{position:relative;background:#121414;padding:0 24px;flex:0 0 50px;color:#e3e3e3;border:0;font-size:15px;z-index:4}
#meeting-header .meeting-identity{display:flex;gap:12px;align-items:center;min-width:0}#meeting-header time{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}.header-divider{width:1px;height:21px;background:#5b5d60;margin:0 3px}#meeting-code{font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
#meeting-header .header-info{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;padding:4px;border:0;border-radius:50%;background:transparent;color:#bdc4c2}#meeting-header .header-info svg{width:20px;height:20px}#meeting-header .header-info:hover{background:#333738}#meeting-header .header-info:focus-visible,#meeting-header .participant-chip:focus-visible{outline:2px solid #a8c7fa;outline-offset:2px}
#meeting-header .participant-chip{display:flex;align-items:center;gap:9px;padding:3px 10px 3px 3px;border:0;border-radius:24px;background:#282b2d;min-height:36px;color:#e5e7e6}#meeting-header .participant-chip:disabled{opacity:.6}.header-avatar{display:grid;place-items:center;width:30px;height:30px;background:#437f75;color:#fff;border-radius:50%;font-size:17px}#header-count{font-size:14px;font-variant-numeric:tabular-nums}
.meeting-details{position:fixed;bottom:94px;right:20px;max-height:calc(100dvh - 118px);overflow:auto;max-width:calc(100vw - 24px);width:370px;padding:18px;border:1px solid #464c4a;border-radius:18px;background:#252829;box-shadow:0 10px 36px #0008;color:#e3e3e3;z-index:8}.details-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.details-heading h2{font-size:17px;margin:0}.details-heading button{font-size:25px}.meeting-details>p{font-size:14px;overflow-wrap:anywhere}.meeting-details label{color:#b7c4c0;font-size:12px;margin:20px 0 8px}.details-copy{display:flex;align-items:center;gap:4px;padding:3px;border:1px solid #3c4340;border-radius:12px;background:#191d1c}.details-copy input{height:36px;min-width:0;flex:1;background:transparent;color:#e2e9e6;border:0;box-shadow:none;font-size:12px;padding:0 8px}.details-copy button{flex:none;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:transparent!important;color:#bdc4c2!important;border:0!important;border-radius:50%!important;padding:8px!important}.details-copy button:hover{background:#ffffff0d!important;color:#e3e3e3!important}.details-copy button:focus-visible{outline:2px solid #a8c7fa;outline-offset:1px}.details-copy button svg{width:20px;height:20px}#header-copy-status{margin-bottom:0;color:#e8bf8e}
@media(max-width:600px){#meeting-header{padding:0 12px;font-size:12px}#meeting-header .meeting-identity{gap:7px}.header-divider{margin:0 2px;height:17px}#meeting-code{font-size:12px}#meeting-header .header-info{width:28px;height:28px}#meeting-header .participant-chip{gap:6px;padding-right:8px;min-height:34px}.header-avatar{width:28px;height:28px;font-size:15px}#header-count{font-size:12px}.meeting-details{right:12px;bottom:88px;padding:16px;max-height:calc(100dvh - 110px);overflow:auto}}
#meeting-header button{position:relative;overflow:hidden}#meeting-header button::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;border-radius:inherit;pointer-events:none;transition:opacity 75ms linear}#meeting-header button[data-pressed]::after{opacity:.08}#meeting-header .press-ripple{position:absolute;pointer-events:none;border-radius:50%;background:currentColor;opacity:.12;transform:translate(-50%,-50%) scale(0)}@media(prefers-reduced-motion:reduce){#meeting-header button::after{transition:none}}

.invite-qr{width:180px;height:180px;margin:20px auto 8px;background:white;border-radius:12px;padding:4px}.invite-qr svg{display:block;width:100%;height:100%}.meeting-details .qr-caption{text-align:center;color:#b7c4c0;font-size:12px;margin:8px 0 0}@media(min-width:601px) and (max-width:1000px){.meeting-details{bottom:142px;right:16px;max-height:calc(100dvh - 166px)}}

@media(max-height:500px) and (max-width:1000px){.meeting-details{right:12px;bottom:88px;max-height:calc(100dvh - 110px);overflow:auto}}