:root{color-scheme:dark;--bg: #0e0f13;--panel: #171a21;--line: #262b36;--text: #e8eaf0;--muted: #8a92a6;--accent: #4f8cff;--danger: #e2504a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center}.screen h1{margin:0;font-size:28px}.muted{color:var(--muted);margin:0;max-width:42ch}.small{font-size:14px}code{background:var(--panel);padding:2px 6px;border-radius:4px}button{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 18px;cursor:pointer}button:hover{border-color:var(--accent)}button.primary{background:var(--accent);border-color:var(--accent);font-weight:600}button.danger{background:var(--danger);border-color:var(--danger)}button.off{color:var(--muted);border-style:dashed}.call{height:100vh;height:100dvh;display:flex;flex-direction:column}.stage{position:relative;flex:1;background:#000;overflow:hidden}.remote{width:100%;height:100%;object-fit:cover}.corner{position:absolute;right:16px;bottom:16px;width:17vw;max-width:170px;aspect-ratio:3 / 4;border-radius:12px;border:1px solid var(--line);overflow:hidden;background:#000;z-index:2;cursor:pointer}.corner video,.corner .tile{width:100%;height:100%;object-fit:cover;display:block}.corner .tile{border:0;border-radius:0}.local{object-fit:cover}.mirror{transform:scaleX(-1)}.tile.clickable{cursor:pointer}.screen-share-stage,video.screen{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;background:#000}.remote.tucked{position:absolute;right:16px;bottom:calc(28px + 16.5vw);width:22vw;max-width:220px;height:auto;aspect-ratio:4 / 3;object-fit:cover;border-radius:12px;border:1px solid var(--line);z-index:2}.badge{position:absolute;top:16px;left:50%;transform:translate(-50%);z-index:3;padding:6px 14px;border-radius:999px;background:#4f8cffe6;font-size:14px;font-weight:600}.grid{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-auto-rows:1fr;gap:6px;padding:6px}.strip{position:absolute;left:6px;right:240px;bottom:6px;z-index:2;display:flex;gap:6px;overflow-x:auto}.tile{position:relative;min-width:0;border-radius:10px;overflow:hidden;background:#000;border:2px solid transparent}.tile video{width:100%;height:100%;object-fit:cover;display:block}.tile.small{width:150px;flex:0 0 auto;aspect-ratio:4 / 3}.tile.speaking{border-color:var(--accent)}.tile-off{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:#14161c;color:var(--muted, #8b93a7);font-size:13px;text-align:center;padding:8px}.tile-off-icon{font-size:22px;opacity:.5}.tile.small .tile-off{font-size:11px}.tile.small .tile-off-icon{font-size:16px}.tile-badge{position:absolute;left:6px;bottom:6px;padding:2px 8px;border-radius:999px;background:#4f8cffeb;font-size:12px}@media (max-width: 640px){.strip{right:6px}.tile.small{width:104px}}.music-bar{position:absolute;bottom:16px;left:16px;z-index:3;display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:#171a21f0;font-size:14px}.music-bar input[type=range]{width:110px;accent-color:var(--accent)}.meter{display:block;height:8px;border-radius:999px;background:#0a0b0e;border:1px solid var(--line);overflow:hidden}.meter-fill{display:block;height:100%;background:linear-gradient(90deg,#3ec46d,#e2c84a 70%,var(--danger));transition:width 60ms linear}.badge-meter{width:70px;height:6px}.warn{position:absolute;top:56px;left:50%;transform:translate(-50%);z-index:3;padding:6px 14px;border-radius:999px;background:#e2504aeb;font-size:13px}.badge{display:flex;align-items:center;gap:10px}.studio-panel{display:flex;flex-direction:column;gap:10px;padding:14px;background:var(--panel);border-top:1px solid var(--line)}.studio-panel select{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px}.studio-actions{display:flex;gap:8px}@media (max-width: 640px){.music-bar{left:8px;bottom:8px;font-size:13px}.music-bar input[type=range]{width:80px}}.knock{position:absolute;top:16px;right:16px;z-index:5;max-width:260px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:#171a21f5}.knock p{margin:0 0 10px;font-size:14px}.knock-actions{display:flex;gap:8px}.knock-actions button{padding:8px 12px;font-size:14px}.overlay{position:absolute;z-index:4;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:#0e0f13eb;text-align:center;padding:24px}.overlay h2{margin:0;font-weight:600}.controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:center;padding:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:1px solid var(--line)}.controls button.hangup{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:999px;background:var(--danger);border-color:var(--danger);color:#fff;font-weight:600}.controls button.hangup:hover{background:#c9433e;border-color:#c9433e}.controls button.hangup svg{flex:0 0 auto}@media (max-width: 640px){.corner{width:30vw}.remote.tucked{width:34vw;bottom:calc(28px + 25.5vw)}.controls button{padding:10px 12px;font-size:14px}.controls button.hangup{order:99;flex:1 0 100%;justify-content:center;padding:12px 20px;font-size:16px}}