:root{font-family:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color:#eaf3f5;background:#071a25;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 10%,#235066 0%,#102c3d 40%,#071a25 80%);color:#eaf3f5}button,input{font:inherit}button{cursor:pointer;transition:background .15s,transform .15s}button:hover:not(:disabled){transform:translateY(-1px)}button:disabled{cursor:not-allowed;opacity:.6}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #67dec9;outline-offset:3px}
.shell{max-width:1120px;min-height:100vh;margin:auto;padding:22px 26px 28px;display:flex;flex-direction:column}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0 20px;border-bottom:1px solid #ffffff20}.brand{display:flex;align-items:baseline;gap:9px}.mark{font-size:30px;font-weight:800;letter-spacing:-1px}.dot{color:#64d8d0}.name{font-size:27px;font-weight:300}.version{font-size:10px;color:#a9bac4;border:1px solid #ffffff2b;border-radius:99px;padding:3px 7px;align-self:center}.tagline{color:#a5b9c5;font-size:14px}main{flex:1;display:flex;justify-content:center;align-items:center}h1,p{margin-top:0}.panel{border:1px solid #ffffff1e;background:#163547cc;border-radius:26px;box-shadow:0 25px 70px #00000024}.welcome{width:min(100%,640px);text-align:center;padding:52px 36px 42px;margin:30px auto}.heart{font-size:73px;line-height:1;color:#68d9ca;margin-bottom:19px}.welcome h1{font-size:clamp(32px,5vw,48px);font-weight:650;letter-spacing:-.04em;margin-bottom:16px}.lead{color:#c2d3dc;font-size:18px;line-height:1.55;max-width:430px;margin:0 auto 34px}.small{font-size:13px;line-height:1.55}.muted{color:#a6b8c3}.welcome .small{max-width:400px;margin:20px auto 0}.primary,.secondary{border:0;border-radius:13px;padding:14px 24px;font-weight:650}.primary{background:#6de3cc;color:#0b2635;box-shadow:0 6px 28px #4fbfad20}.primary:hover:not(:disabled){background:#9af5e0}.secondary{background:#26475a;color:#eef5f7;border:1px solid #ffffff20}.secondary:hover:not(:disabled){background:#355d72}.large{font-size:16px;min-height:54px}.room{width:100%;align-self:stretch;padding-top:20px}.room-header{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:14px}.room-header h1{font-size:24px;margin:2px 0;font-weight:600}.eyebrow{color:#77d8d0;font-size:10px;letter-spacing:2.3px;margin:0;font-weight:700}.status{font-size:12px;line-height:1.5;color:#d4f4f0;background:#1e5a62;border:1px solid #388991;padding:9px 14px;border-radius:999px;text-align:center;max-width:58%}.status[data-mode="error"]{background:#6a3035;border-color:#ad5960;color:#ffe0e3}.status[data-mode="wait"]{background:#3a4b5a;border-color:#587082;color:#d6e1ea}.video-area{position:relative;height:min(51vw,475px);min-height:290px;background:#0c202c;border-radius:23px;overflow:hidden;border:1px solid #ffffff1c;box-shadow:0 24px 45px #00000025}.remote-tile{height:100%;position:relative}.remote-tile video{display:block;width:100%;height:100%;object-fit:contain;background:#071c28}.remote-placeholder{position:absolute;inset:0;background:radial-gradient(circle at center,#244b5d,#0b2533);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:18px;color:#bdd6de;font-size:16px;padding:20px}.remote-placeholder .person-icon{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#345868;font-size:74px;font-weight:200;color:#9be7d9}.tile-label{position:absolute;left:15px;bottom:14px;background:#071923c9;border:1px solid #ffffff12;padding:7px 12px;border-radius:9px;font-size:12px;color:#e0eff3}.self-tile{position:absolute;right:18px;bottom:17px;width:27%;max-width:210px;min-width:115px;height:36%;min-height:122px;max-height:158px;background:#29495b;border:2px solid #ffffff36;border-radius:15px;overflow:hidden;box-shadow:0 10px 22px #0006}.self-tile video{display:block;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.self-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#23495a;color:#c8e1e5;font-size:18px}.self-tile .tile-label{left:8px;bottom:8px;padding:3px 8px;font-size:11px}.invitation{background:#123143;border:1px solid #ffffff1b;border-radius:17px;padding:15px 18px;margin-top:18px}.invite-title{font-size:15px;font-weight:650}.invitation p{margin:5px 0 12px}.invite-actions{display:flex;gap:9px}.invite-actions input{min-width:0;flex:1;background:#0a2433;border:1px solid #446073;border-radius:12px;color:#c9e0e6;padding:12px;font-size:14px}.join-area{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin:20px auto}.text-btn{color:#92eadb;border:0;background:none;text-decoration:underline;text-underline-offset:4px;padding:14px}.controls{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:18px 0 10px}.control{border:1px solid #ffffff2b;background:#294858;color:#e9f2f5;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;min-width:108px;min-height:77px;font-size:12px;padding:9px 14px}.control-icon{font-size:24px;line-height:1.2}.control.off{background:#565362}.control.danger{background:#8d3542;border-color:#a64b59}.control.danger:hover{background:#ab4254}.new-button{display:block;margin:20px auto}.diagnostics{max-width:600px;margin:16px auto 10px;font-size:12px;color:#9cbbc7;text-align:center}.diagnostics summary{cursor:pointer}.diagnostics p{margin:7px}.error{padding:12px 16px;margin:12px 0;border:1px solid #a95967;background:#5c2534;border-radius:13px;color:#ffe5e7;line-height:1.5;font-size:14px}footer{text-align:center;color:#89a0ae;font-size:11px;padding:22px 0 4px}.hidden{display:none!important}
@media(max-width:620px){.shell{padding:14px 12px 19px}.topbar{padding:5px 4px 14px}.mark{font-size:26px}.name{font-size:23px}.tagline{font-size:11px}.welcome{padding:42px 24px;margin:20px 0}.welcome .lead{font-size:16px}.room{padding-top:18px}.room-header h1{font-size:21px}.status{padding:7px 10px;font-size:11px;max-width:62%}.video-area{height:58vh;min-height:290px;max-height:590px;border-radius:16px}.self-tile{right:10px;bottom:12px;width:32%;height:30%;min-height:110px}.remote-placeholder .person-icon{width:80px;height:80px;font-size:58px}.remote-placeholder{font-size:14px}.invitation{padding:14px 12px}.invite-actions{flex-direction:column}.invite-actions input{width:100%;font-size:12px}.controls{gap:8px}.control{flex:1;min-width:67px;min-height:75px;padding:8px 4px;font-size:11px;border-radius:13px}.control-icon{font-size:21px}.join-area{flex-direction:column;gap:3px}}