:root{color-scheme:dark;--bg: #0a0b0e;--surface: #14161b;--surface-elevated: #1b1e25;--input-bg: #14161b;--fg: #ecedf0;--fg-muted: #9aa0a6;--fg-subtle: #6b7079;--accent: #5b8def;--accent-hover: #7aa3f5;--accent-soft: rgba(91, 141, 239, .14);--accent-ring: rgba(91, 141, 239, .35);--success: #62d18a;--danger: #ef6868;--danger-soft: rgba(239, 104, 104, .12);--border: #262932;--border-strong: #353944;--secondary: #2a2d36;--secondary-hover: #353944;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);--shadow-md: 0 4px 16px rgba(0, 0, 0, .5);--shadow-lg: 0 12px 36px rgba(0, 0, 0, .55);--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--transition: .14s cubic-bezier(.2, 0, 0, 1)}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI Variable,Segoe UI,Roboto,sans-serif;background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(91,141,239,.08),transparent 60%),var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body{display:flex;align-items:center;justify-content:center;min-height:100vh}.container{width:100%;max-width:380px;padding:40px 24px}header{margin-bottom:36px;text-align:center}header h1{margin:0 0 88px;font-size:57px;font-weight:700;letter-spacing:-.025em;background:linear-gradient(180deg,var(--fg) 0%,var(--fg-muted) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 24px rgba(91,141,239,.35)) drop-shadow(0 2px 8px rgba(91,141,239,.15));-webkit-box-reflect:below -8px linear-gradient(rgba(0,0,0,.4) 0%,rgba(0,0,0,.18) 45%,transparent 90%)}.subtitle{margin:0;font-size:13px;color:var(--fg-muted);letter-spacing:.01em}.pin-form{display:flex;flex-direction:column;gap:14px}label{font-size:12px;color:var(--fg-muted);font-weight:500;letter-spacing:.02em;text-transform:uppercase}input[type=text]{background:var(--input-bg);border:1px solid var(--border);color:var(--fg);padding:14px 16px;border-radius:var(--radius-md);font-size:20px;letter-spacing:.12em;text-align:center;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,monospace;transition:border-color var(--transition),box-shadow var(--transition)}input[type=text]::placeholder{color:var(--fg-subtle);letter-spacing:.12em}input[type=text]:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-ring)}button{border:none;padding:12px 16px;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:background-color var(--transition),transform var(--transition),box-shadow var(--transition)}button:active:not(:disabled){transform:scale(.98)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--accent);color:#fff;box-shadow:0 1px #ffffff14 inset,var(--shadow-sm)}button.primary:hover:not(:disabled){background:var(--accent-hover)}button.secondary{background:var(--secondary);color:var(--fg);border:1px solid var(--border-strong)}button.secondary:hover:not(:disabled){background:var(--secondary-hover);border-color:var(--border-strong)}.status{margin-top:18px;min-height:1.2em;font-size:13px;color:var(--fg-muted);text-align:center;letter-spacing:.01em}.status[data-state=error]{color:var(--danger)}.status[data-state=info]{color:var(--accent)}[hidden]{display:none!important}.stage{position:fixed;top:0;right:0;bottom:0;left:0;background:#000;display:flex;align-items:safe center;justify-content:safe center;overflow:auto}.stage[data-zoomed=true]{cursor:grab}.stage[data-zoomed=true].panning{cursor:grabbing}.stage[data-zoomed=true] .stage-overlay{display:none}.video-grid{width:100%;height:100%;background:#000;position:relative;display:grid;gap:2px;flex-shrink:0}.video-grid[data-count="0"]{display:none}.video-grid[data-count="1"]{aspect-ratio:16 / 9;grid-template-columns:1fr;grid-template-rows:1fr}.video-grid[data-count="1"] video,.video-grid[data-count="2"][data-layout=horizontal] video,.video-grid[data-count="2"][data-layout=vertical] video,.video-grid[data-count="3"][data-layout=columns] video,.video-grid[data-count="3"][data-layout=rows] video{width:100%}.video-grid[data-count="2"][data-layout=horizontal]{aspect-ratio:32 / 9;grid-template-columns:1fr 1fr;grid-template-rows:1fr}.video-grid[data-count="2"][data-layout=vertical]{aspect-ratio:16 / 18;grid-template-columns:1fr;grid-template-rows:1fr 1fr}.video-grid[data-count="2"][data-layout=pip]{aspect-ratio:16 / 9;display:block}.video-grid[data-count="2"][data-layout=pip] video:nth-child(1){position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%}.video-grid[data-count="2"][data-layout=pip] video:nth-child(2){position:absolute;right:16px;bottom:16px;width:28%;height:28%;border:2px solid rgba(255,255,255,.6);border-radius:6px;box-shadow:0 4px 16px #00000080;z-index:1}.video-grid[data-count="3"][data-layout=main-right]{aspect-ratio:24 / 9;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"main sub1" "main sub2"}.video-grid[data-count="3"][data-layout=main-right] video:nth-child(1){grid-area:main;width:100%}.video-grid[data-count="3"][data-layout=main-right] video:nth-child(2){grid-area:sub1;align-self:start}.video-grid[data-count="3"][data-layout=main-right] video:nth-child(3){grid-area:sub2;align-self:end}.video-grid[data-count="3"][data-layout=main-bottom]{aspect-ratio:32 / 27;grid-template-columns:1fr 1fr;grid-template-rows:2fr 1fr;grid-template-areas:"main main" "sub1 sub2"}.video-grid[data-count="3"][data-layout=main-bottom] video:nth-child(1){grid-area:main;width:100%}.video-grid[data-count="3"][data-layout=main-bottom] video:nth-child(2){grid-area:sub1;justify-self:start}.video-grid[data-count="3"][data-layout=main-bottom] video:nth-child(3){grid-area:sub2;justify-self:end}.video-grid[data-count="3"][data-layout=columns]{aspect-ratio:48 / 9;grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr}.video-grid[data-count="3"][data-layout=rows]{aspect-ratio:16 / 27;grid-template-columns:1fr;grid-template-rows:1fr 1fr 1fr}.video-grid video{height:100%;max-width:100%;object-fit:contain;background:#000;min-width:0;min-height:0;display:block}.video-grid[data-layout=pip] video:nth-child(2),.video-grid[data-layout=main-right] video:not(:nth-child(1)),.video-grid[data-layout=main-bottom] video:not(:nth-child(1)){cursor:pointer;transition:outline-color var(--transition),border-color var(--transition)}.video-grid[data-layout=main-right] video:not(:nth-child(1)):hover,.video-grid[data-layout=main-bottom] video:not(:nth-child(1)):hover{outline:2px solid var(--accent);outline-offset:-2px}.video-grid[data-layout=pip] video:nth-child(2):hover{border-color:var(--accent)}.video-grid[data-layout=free]{display:block;aspect-ratio:auto;position:relative;overflow:hidden}.free-item{position:absolute;background:#000;border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 16px #0006;overflow:hidden;-webkit-user-select:none;user-select:none}.free-item.dragging,.free-item.resizing{border-color:#4c8df6b3;box-shadow:0 0 0 1px #4c8df680,0 6px 20px #0009}.free-item{cursor:grab}.free-item.dragging{cursor:grabbing}.free-item>video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;background:#000;display:block;pointer-events:none}.free-resize{position:absolute;width:16px;height:16px;background:transparent;z-index:2}.free-item:hover .free-resize{background:#ffffff59;border-radius:2px}.free-resize-nw{top:0;left:0;cursor:nwse-resize}.free-resize-ne{top:0;right:0;cursor:nesw-resize}.free-resize-sw{bottom:0;left:0;cursor:nesw-resize}.free-resize-se{bottom:0;right:0;cursor:nwse-resize}.video-grid[data-layout=room]{display:block;width:100%;height:100%;aspect-ratio:auto;perspective:900px;perspective-origin:50% 50%;background:radial-gradient(circle at center,#0c0f15,#050608 70%);overflow:hidden;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}.video-grid[data-layout=room].looking{cursor:grabbing}.room-camera{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d}.room-wall{position:absolute;left:50%;top:50%;transform-style:preserve-3d;background:#000}.room-wall>video{width:100%;height:100%;object-fit:contain;background:#000;display:block;pointer-events:none}.room-floor{position:absolute;left:50%;top:50%;width:2000px;height:2000px;margin:-1000px 0 0 -1000px;transform:rotateX(90deg) translateZ(350px);background-image:linear-gradient(rgba(100,130,200,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(100,130,200,.18) 1px,transparent 1px);background-size:100px 100px;pointer-events:none;opacity:.6}.session-warning{position:absolute;top:56px;left:50%;transform:translate(-50%);padding:8px 14px;border-radius:6px;background:#f064642e;border:1px solid rgba(240,100,100,.55);color:#ffd0d0;font-size:13px;font-variant-numeric:tabular-nums;z-index:3;pointer-events:none}.stage-overlay{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:linear-gradient(180deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,.4) 60%,transparent 100%);color:var(--fg);transition:opacity .22s ease;z-index:2}.stage-overlay[data-hidden=true]{opacity:0;pointer-events:none}.overlay-left,.overlay-right{display:flex;align-items:center;gap:8px}.stage-status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--fg-muted);padding:5px 12px 5px 9px;background:#0006;border:1px solid rgba(255,255,255,.08);border-radius:999px;letter-spacing:.01em}.stage-status:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fg-subtle);flex-shrink:0}.stage-status[data-state=connected]{color:var(--success)}.stage-status[data-state=connected]:before{background:var(--success);box-shadow:0 0 8px #62d18a99}.stage-status[data-state=error]{color:var(--danger)}.stage-status[data-state=error]:before{background:var(--danger)}.layout-select-wrap{display:inline-flex;align-items:stretch;height:34px;background:#00000073;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);transition:border-color var(--transition);overflow:hidden}.layout-select-wrap:hover{border-color:#fff3}.layout-select-label{display:inline-flex;align-items:center;padding:0 12px;font-size:12px;font-weight:500;color:var(--fg-muted);line-height:1;border-right:1px solid rgba(255,255,255,.1)}.layout-select{background:transparent;border:none;color:var(--fg);font-size:12px;font-weight:500;line-height:1;cursor:pointer;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 26px 0 12px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23ecedf0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 10px center}.layout-select option{background:var(--surface-elevated);color:var(--fg)}.icon-btn{background:#00000073;border:1px solid rgba(255,255,255,.1);color:var(--fg);width:34px;height:34px;padding:0;border-radius:var(--radius-md);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background-color var(--transition),border-color var(--transition),transform var(--transition)}.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.icon-btn:hover{background:#ffffff1a;border-color:#fff3}.icon-btn:active{transform:scale(.95)}.icon-btn[data-muted=true]{color:var(--fg-subtle)}.audio-mute-btn[data-muted=false] .icon-volume-off,.audio-mute-btn[data-muted=true] .icon-volume-on{display:none}.overlay-right .secondary{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;font-size:13px;background:#00000073;border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-md);color:var(--fg)}.overlay-right .secondary:hover:not(:disabled){background:#ef686826;border-color:#ef686880;color:var(--danger)}.overlay-right .secondary svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}