:root{--bg: #0c0c0f;--stage: #101014;--panel: #121219;--border: #1f1f27;--text: #e8eaed;--muted: #9aa0a6;--accent: #22c55e;--accent2: #8ab4f8;--warn: #ef4444;--btn: #1a1a22;--shadow: 0 10px 30px rgba(0, 0, 0, .35);--r: 14px;--tile-min: 260px;--tile-max: 420px;--tile-radius: 18px;--tile-aspect: 4/3;--tile-gap: 10px;--safe-b: env(safe-area-inset-bottom, 0px);--safe-t: env(safe-area-inset-top, 0px)}html,body,#root,.app{height:calc(var(--vh, 1vh) * 100)}*{box-sizing:border-box;font-family:VK Sans Display Regular,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}body{margin:0;background:var(--bg);color:var(--text)}.app{display:grid;grid-template-rows:auto 1fr}.topbar{height:44px;display:flex;align-items:center;justify-content:center;color:var(--muted)}.stage{position:relative;background:var(--stage);border-block:1px solid var(--border)}.grid{position:absolute;inset:0;display:grid;place-items:center;padding:20px}.vgrid{width:100%;height:100%;display:grid;grid-template-columns:1fr;gap:8px;align-content:center;justify-items:center;padding:8px}.tile{position:relative;width:100%;max-width:680px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0a0a0f;border:1px solid var(--border);box-shadow:0 4px 20px #00000047,inset 0 0 0 1px #ffffff05;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}.tile:hover{transform:translateY(-1px);border-color:#2a2a33}.tile.is-speaking{box-shadow:0 8px 28px #00000057,0 0 0 2px #22c55e59 inset;border-color:#22c55e73}.tile video{width:100%;height:100%;object-fit:cover;display:block;background:#000;border-radius:inherit}.namebar{position:absolute;right:8px;bottom:6px;font-size:12px;font-weight:500;color:#ffffffd9;text-shadow:0 1px 2px rgba(0,0,0,.6);-webkit-user-select:none;user-select:none;pointer-events:none}@media(min-width:721px){.vgrid{grid-template-columns:repeat(auto-fit,minmax(var(--tile-min),1fr));gap:var(--tile-gap);padding:12px}.tile{width:clamp(var(--tile-min),28vw,var(--tile-max));aspect-ratio:var(--tile-aspect);border-radius:var(--tile-radius)}}.status{position:absolute;right:10px;bottom:10px;display:flex;gap:8px}.badge{inline-size:28px;block-size:28px;border-radius:999px;display:grid;place-items:center;background:#0000008c;border:1px solid rgba(255,255,255,.08);color:#fff;font-size:14px}.badge.muted{background:#ef44442e;border-color:#ef444459}.badge.hand{background:#8ab4f82e;border-color:#8ab4f859}.placeholder{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(120% 120% at 50% 0%,#1a1a22,#0e0e13)}.placeholder .initials{inline-size:120px;block-size:120px;border-radius:999px;display:grid;place-items:center;background:#23232b;color:#e8eaed;border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 0 24px #00000059;font-weight:900;font-size:44px;letter-spacing:-.02em}.avatar{display:grid;place-items:center;inline-size:160px;block-size:160px;border-radius:999px;background:radial-gradient(120% 120% at 50% 20%,#b5ff7a,#5ad12b);color:#0b0b0d;font-weight:900;font-size:48px;letter-spacing:-.02em;box-shadow:var(--shadow)}.avatar .initials{transform:translateY(-2px)}@media(min-width:721px){.avatar{inline-size:220px;block-size:220px;font-size:64px}}.controls{position:absolute;inset-inline:0;bottom:10px;display:flex;justify-content:center;pointer-events:none;padding-bottom:max(0px,var(--safe-b))}.toolbar{display:flex;gap:8px;padding:8px 10px;background:#14141aa6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:14px;pointer-events:auto;box-shadow:0 6px 24px #00000059;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.toolbar::-webkit-scrollbar{display:none}.btn{all:unset;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 12px;border-radius:10px;color:var(--text);background:transparent;font-weight:500;font-size:14px;cursor:pointer;transition:background .15s ease,color .15s ease,transform .06s ease}.btn:hover{background:#ffffff0f}.btn:active{transform:translateY(1px);background:#ffffff14}.btn--primary{color:#b5ff7a}.btn--danger{color:#ffb5b5}.btn--ghost{color:var(--text);opacity:.9}.btn--ghost:hover{opacity:1;background:#ffffff14}.btn--icon{width:42px;height:38px;padding:0;border-radius:50%}.counter{min-width:16px;height:16px;border-radius:999px;background:var(--accent2);color:#001b3a;font-weight:700;font-size:11px;display:inline-grid;place-items:center;padding:0 4px}.side{position:absolute;inset-block:0;right:0;inline-size:360px;background:var(--panel);border-left:1px solid var(--border);transform:translate(100%);transition:transform .18s ease;display:flex;flex-direction:column;z-index:20}.side.open{transform:translate(0)}.side-head{padding:12px 14px;border-bottom:1px solid var(--border);font-weight:800}.list{padding:12px;display:grid;gap:10px;overflow:auto}.item{display:flex;align-items:center;justify-content:space-between;background:#0f0f16;border:1px solid var(--border);border-radius:10px;padding:10px 12px}.name{font-weight:700}.hand{color:var(--accent2)}.muted{color:var(--muted)}@media(max-width:720px){.side{inline-size:100%;inset:auto 0 0;transform:translateY(100%);height:auto;max-height:calc(var(--vh, 1vh) * 100 - 56px);border-left:none;border-top:1px solid var(--border);border-radius:14px 14px 0 0;position:fixed;background:color-mix(in oklab,var(--panel) 92%,black 8%)}.side.open{transform:translateY(0)}.side[style*="right: 360px"]{right:0!important}.side-head{padding:14px 16px;font-size:16px}.list{padding-bottom:max(8px,var(--safe-b))}}.chat{display:flex;flex-direction:column;flex:1;min-height:0}.chat-messages{flex:1;min-height:0;overflow:auto;display:grid;gap:6px;padding:10px 10px 6px;align-content:start;justify-items:start}.msg{background:#0f0f16;border:1px solid var(--border);border-radius:10px;padding:6px 8px;max-width:92%;width:fit-content;font-size:13px;line-height:1.35}.msg.me{justify-self:end;background:#14141c}.msg-head{display:flex;gap:6px;align-items:center;color:var(--muted);font-size:11px}.msg-text{margin-top:2px;white-space:pre-wrap;word-break:break-word;font-size:13px}.chat-input{position:sticky;bottom:0;background:var(--panel);padding:8px 10px calc(8px + var(--safe-b));border-top:1px solid var(--border);display:flex;gap:8px}.chat-input .input{block-size:38px;padding:0 10px;font-size:14px}.chat-input .btn{height:38px;padding:0 12px;border-radius:9px;font-size:14px}.input{block-size:42px;padding:0 12px;flex:1;border:1px solid var(--border);border-radius:10px;background:#0f0f16;color:var(--text)}.toast-wrap{position:absolute;inset-inline:0;top:14px;display:grid;place-items:center;pointer-events:none}.toast{pointer-events:auto;background:#111119;border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:12px;box-shadow:var(--shadow)}.landing{position:absolute;inset:0;display:grid;place-items:center;padding:24px;z-index:5}.landing:before{content:"";position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 0,#00000040,#0000008c);pointer-events:none}.landing-box{width:min(820px,96vw);border-radius:20px;padding:22px;background:#14141ac7;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.06);box-shadow:0 18px 60px #00000073;position:relative}.landing-head{margin-bottom:14px}.landing-title{font-weight:800;font-size:22px}.landing-sub{color:var(--muted);font-size:13px;margin-top:2px}.hero{width:min(780px,94vw);display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(120px,auto);gap:10px}.tile-cta{background:#282830bf;border:1px solid rgba(255,255,255,.05);border-radius:18px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 30px #0006,inset 0 1px #ffffff08;position:relative;overflow:hidden;padding:20px;display:flex;align-items:center;justify-content:center;transition:transform .12s ease,border-color .12s ease,background .12s ease}.tile-cta:hover{transform:translateY(-2px);border-color:#ffffff1f}.tile-content{display:grid;gap:10px;justify-items:center;text-align:center}.tile-title{font-weight:700;font-size:15px;margin-top:6px}.tile-icon{width:54px;height:54px}.tile-icon.small{width:42px;height:42px}.btn-hero{all:unset;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:#e8eaed;background:#ffffff0d;padding:8px 14px;border-radius:10px;font-size:14px;font-weight:600}.btn-hero:hover{background:#ffffff17}@media(min-width:861px){.hero{grid-template-columns:1.6fr 1fr;grid-template-rows:1fr 1fr}.tile-create{grid-row:1 / span 2;grid-column:1}.tile-join{grid-row:1;grid-column:2}.tile-settings{grid-row:2;grid-column:2}}.landing-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:720px){.landing-grid{grid-template-columns:1fr}}.card-cta{display:flex;flex-direction:column;gap:12px;min-height:170px;background:#0f0f16;border:1px solid var(--border);border-radius:14px;padding:16px}.card-cta h4{margin:0;font-weight:800}.card-cta p{margin:0;color:var(--muted);font-size:13px;line-height:1.35}.btn-wide{width:100%}.row{display:grid;grid-template-columns:1fr auto;gap:10px}.code-input{font-variant-numeric:tabular-nums;text-transform:lowercase;letter-spacing:.2px}.help{color:var(--muted);font-size:12px}.panel-min{background:#0f0f16;border:1px solid var(--border);border-radius:14px;padding:16px;display:grid;gap:12px}