:root{--bg-base: #0a0a0b;--bg-base-2: #0d0e10;--surface: #16171a;--surface-2: #1a1c20;--surface-raised: #1f2024;--hairline: rgba(255,255,255,.06);--hairline-strong:rgba(255,255,255,.1);--text-primary: #F5F6F7;--text-muted: #8fa6b8;--text-faint: rgba(255,255,255,.45);--plum: #f06cc9;--plum-light: #f7b6dd;--plum-lilac: #d6b8f0;--plum-bloom: rgba(230,200,255,.16);--plum-tint-bg: #241019;--live: #34c759;--live-bright: #7ff0a3;--live-bg: #062b12;--live-tint: rgba(127,240,163,.18);--danger: #ff6b5e;--danger-tint-06: rgba(255,107,94,.06);--danger-tint-12: rgba(255,107,94,.12);--danger-tint-16: rgba(255,107,94,.16);--danger-tint-25: rgba(255,107,94,.25);--warning: #e8b84b;--warning-bg: #3a2f10;--id-plum: #f06cc9;--id-blue: #6e8bff;--id-green: #7ff0a3;--id-amber: #e8b84b;--id-lilac: #d6b8f0;--id-slate: #8fa6b8;--font-display: "Manrope", -apple-system, system-ui, sans-serif;--font-ui: "Albert Sans", -apple-system, system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--text-hero: 28px;--text-body: 14px;--text-label: 13.5px;--text-caption: 12.5px;--text-micro: 12px;--weight-btn: 700;--radius-pill: 999px;--radius-card: 16px;--radius-tile: 12px;--radius-chip: 8px;--control-size: 44px;--control-size-compact: 32px;--menubar-max-height: 24px;--motion-fast: .12s;--motion-base: .18s;--ease-standard: cubic-bezier(.2, 0, 0, 1);--spring: cubic-bezier(.34, 1.56, .64, 1)}@media(prefers-reduced-motion:reduce){:root{--motion-fast: 0ms;--motion-base: 0ms}}@font-face{font-family:Manrope;src:url(/assets/manrope-variable-C46ZzDBF.woff2) format("woff2-variations"),url(/assets/manrope-variable-C46ZzDBF.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}@font-face{font-family:Albert Sans;src:url(/assets/albert-sans-variable-BifFJOWk.woff2) format("woff2-variations"),url(/assets/albert-sans-variable-BifFJOWk.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}@font-face{font-family:JetBrains Mono;src:url(/assets/jetbrains-mono-variable-Db4Uuiha.woff2) format("woff2-variations"),url(/assets/jetbrains-mono-variable-Db4Uuiha.woff2) format("woff2");font-weight:100 800;font-style:normal;font-display:swap}@font-face{font-family:Fredoka;src:url(/assets/fredoka-latin-600-normal-C4zohCW5.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg-base);color:var(--text-primary);font:400 var(--text-body) / 1.45 var(--font-ui);-webkit-font-smoothing:antialiased}.hidden{display:none!important}.join-screen{min-height:100%;display:flex;align-items:center;justify-content:center;padding:32px 16px;background:var(--bg-base)}.join-card{width:min(380px,calc(100vw - 32px));max-width:100%;min-height:min(580px,calc(100vh - 64px));max-height:calc(100vh - 32px);overflow:auto;overscroll-behavior:contain;background:var(--menu-shell);border:1px solid rgba(255,255,255,.08);border-radius:20px;box-shadow:0 40px 90px -30px #0009;display:flex;flex-direction:column}.home-topbar{flex-shrink:0;height:52px;padding:6px 16px;display:flex;align-items:center;gap:10px}.brand-cluster{display:inline-flex;align-items:center;gap:10px;min-width:0;flex-shrink:0}.petal-logo{display:block;color:var(--text-primary);flex-shrink:0}.wordmark{display:inline-block;margin:0;font-family:"Fredoka",var(--font-display);font-size:16px;font-weight:600;line-height:1;letter-spacing:0;color:var(--text-primary);-webkit-font-smoothing:antialiased}.profile-editor{margin-left:auto;display:grid;grid-template-columns:24px minmax(0,108px);align-items:center;gap:8px;min-width:0;height:36px;padding:0 6px 0 0;border-radius:var(--radius-pill);cursor:text;transition:background-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard)}.profile-editor:hover,.profile-editor:focus-within{background:#ffffff0e}.profile-editor:focus-within{box-shadow:0 0 0 1px #ffffff1f}.profile-avatar{position:relative;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--radius-pill);color:var(--id-green);font:600 10px var(--font-ui);background:linear-gradient(160deg,var(--surface-2),var(--bg-base-2));flex-shrink:0}.profile-avatar:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:var(--radius-pill);border:1.5px solid currentColor;pointer-events:none}.profile-avatar span{line-height:1}.profile-avatar.is-empty span{display:none}.profile-avatar.is-empty:after{content:"";width:13px;height:13px;border-radius:var(--radius-pill);background:radial-gradient(circle at 50% 27%,currentColor 0 20%,transparent 21%),radial-gradient(ellipse at 50% 88%,currentColor 0 40%,transparent 41%);opacity:.64}.hero-quiet{position:relative;height:122px;padding:20px 22px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;flex-shrink:0;background:linear-gradient(165deg,#16181b,#0b0c0e 80%)}.quiet-bloom{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(58% 80% at 82% 24%,rgba(52,199,89,.1),transparent 70%)}.quiet-eyebrow,.quiet-title{position:relative}.quiet-eyebrow{display:inline-flex;align-items:center;gap:6px;font:500 10.5px var(--font-mono);letter-spacing:.06em;color:#fff6;margin-bottom:8px}.quiet-ring{width:7px;height:7px;border-radius:var(--radius-pill);border:1.5px solid rgba(255,255,255,.4);box-sizing:border-box;flex-shrink:0}.quiet-title{margin:0;max-width:280px;font:600 22px var(--font-ui);line-height:1.16;color:var(--text-primary);letter-spacing:0;text-wrap:balance}.home-body{flex:1;min-height:0;padding:16px 16px 0;display:flex;flex-direction:column}.join-sub{margin:0 0 10px;font-size:var(--text-caption);color:var(--text-faint)}.field{display:flex;flex-direction:column;gap:6px}.field-label{font:600 var(--text-micro) var(--font-ui);color:var(--text-faint);text-transform:none}input[type=text]{width:100%;height:44px;padding:0 12px;font:500 14px var(--font-ui);color:var(--text-primary);background:#ffffff0a;border:1px solid rgba(255,255,255,.09);border-radius:13px;outline:none;transition:border-color var(--motion-fast) var(--ease-standard)}.profile-editor input[type=text]{height:28px;padding:0;border:0;border-radius:0;background:transparent;font:600 12px var(--font-ui);color:#ffffffc7}.profile-editor input[type=text]:focus-visible{border-color:transparent}.meeting-field input[type=text]{font-size:14px}input[type=text]::placeholder{color:#ffffff59}input[type=text]:focus-visible{border-color:#ffffff47}input[type=text]:disabled{opacity:.5}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 12px;border-radius:13px;border:none;font:600 12px var(--font-ui);cursor:pointer;transition:background-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),opacity var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard)}.btn.primary{background:var(--live);border:0;color:#06280f;box-shadow:0 6px 22px -6px #34c75999}.btn.primary:hover:not(:disabled){opacity:.92}.btn.ghost{background:transparent;color:#ffffffbf}.btn.ghost:hover:not(:disabled){color:var(--text-primary)}.btn:disabled{opacity:.45;cursor:default}.btn:active:not(:disabled){transform:scale(var(--press-scale, .96))}.btn:focus-visible,.control-button:focus-visible,.layout-mode-button:focus-visible,.recent-room__star:focus-visible,.recent-room__copy:focus-visible,.recent-room__button:focus-visible{outline:2px solid var(--id-blue);outline-offset:2px}.error{margin:0 0 8px;font-size:12px;color:var(--danger);text-wrap:pretty}.join-hint{margin:0 0 8px;font-size:12px;color:var(--text-faint);text-wrap:pretty}.meeting-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin-bottom:14px}.join-submit{min-width:0;white-space:nowrap}.room-code-button{padding-inline:12px;white-space:nowrap}.desktop-prototype-link{align-self:flex-start;margin:0 0 12px;color:#ffffffb8;font:600 var(--text-micro) var(--font-ui);text-decoration:none;border-bottom:1px solid transparent;transition:color var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard)}.desktop-prototype-link:hover{color:var(--text-primary);border-color:var(--hairline-strong)}.recent-rooms{flex:1;min-height:0;display:flex;flex-direction:column;gap:0;margin-top:0;padding-top:0;border-top:0;overflow:auto}.recent-rooms__header{margin:4px 0 8px;font:500 10px var(--font-mono);letter-spacing:.1em;color:#ffffff57}.recent-room{display:grid;grid-template-columns:minmax(0,1fr) 40px 40px;align-items:center;gap:4px;border-radius:var(--radius-tile);transition:background-color var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard)}.recent-room:hover,.recent-room:focus-within{background:#ffffff0d}.recent-room:active{transform:scale(var(--press-scale, .96))}.recent-room__star,.recent-room__copy,.recent-room__button{border:0;font-family:var(--font-ui);cursor:pointer}.recent-room__star,.recent-room__copy{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border-radius:var(--radius-pill);color:#ffffff6b;background:transparent;opacity:0;transition:opacity var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard)}.recent-room:hover .recent-room__star,.recent-room:focus-within .recent-room__star,.recent-room__star.is-favorite{opacity:1}.recent-room:hover .recent-room__copy,.recent-room:focus-within .recent-room__copy,.recent-room__copy.copied{opacity:1}.recent-room__star:hover{color:var(--id-lilac)}.recent-room__copy:hover,.recent-room__copy.copied{color:var(--live-bright)}.recent-room__copy.copied{font:700 10px var(--font-display)}.recent-room__star.is-favorite{color:var(--id-lilac)}.recent-room__star.is-favorite svg{fill:currentColor}.recent-room__button{min-width:0;min-height:40px;padding:9px 4px;border-radius:inherit;background:transparent;color:var(--text-primary);text-align:left;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;align-items:center;transition:color var(--motion-fast) var(--ease-standard)}.recent-room__button:hover{color:#ffffffeb}.recent-room__code{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:700 14px var(--font-display);color:#fffc}.recent-room__meta{color:#ffffff4d;font:500 10.5px var(--font-mono);white-space:nowrap;font-variant-numeric:tabular-nums}.web-status-bar{flex-shrink:0;min-height:32px;margin-top:auto;padding:9px 16px 10px;text-align:center;color:#fff6;font:500 11px var(--font-mono);font-variant-numeric:tabular-nums}@media(max-width:420px){.join-screen{align-items:stretch;padding:0}.join-card{width:100%;min-height:100vh;max-height:none;border-radius:0;border-inline:0}.profile-editor{grid-template-columns:24px minmax(0,88px)}}.meeting{height:100%;display:flex;flex-direction:column;min-height:0;background:var(--bg-base-2)}.topbar{flex-shrink:0;display:flex;align-items:center;gap:12px;height:50px;padding:0 22px;border-bottom:1px solid var(--hairline);background:#ffffff04}.live-dot{width:7px;height:7px;border-radius:var(--radius-pill);background:var(--live);flex-shrink:0}.room-title{display:inline-flex;align-items:center;gap:6px;min-width:0}.room-name{font:600 14.5px var(--font-ui);color:#ffffffeb;min-width:0;overflow-wrap:anywhere}.room-name.renaming{display:inline-flex;min-width:min(180px,42vw);max-width:min(280px,54vw)}.room-name-input{width:100%;min-width:0;height:28px;padding:0 8px;border:none;border-radius:var(--radius-chip);outline:1px solid rgba(255,255,255,.18);background:#ffffff14;color:var(--text-primary);font:600 14.5px var(--font-ui);box-sizing:border-box}.room-title-actions{display:inline-flex;align-items:center;gap:4px;width:52px;flex-shrink:0;opacity:0;pointer-events:none;transition:opacity var(--motion-fast) var(--ease-standard)}.room-title:hover .room-title-actions,.room-title:focus-within .room-title-actions{opacity:1;pointer-events:auto}.room-title:hover .elapsed,.room-title:focus-within .elapsed{opacity:1}.room-name.renaming+.room-title-actions{opacity:0;pointer-events:none}.room-title-action{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:none;border-radius:var(--radius-chip);background:transparent;color:#ffffff9e;cursor:pointer;flex-shrink:0;transition:background-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),scale var(--motion-fast) var(--ease-standard)}.room-title-action:hover,.room-title-action:focus-visible{background:#ffffff14;color:var(--text-primary)}.room-title-action:focus-visible{outline:1px solid rgba(255,255,255,.42);outline-offset:2px}.room-title-action:active{scale:var(--press-scale, .96)}.elapsed{font:500 12.5px var(--font-mono);font-variant-numeric:tabular-nums;flex-shrink:0;opacity:0;color:var(--text-faint);transition:opacity var(--motion-fast) var(--ease-standard)}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}.conn-chip{font:500 11px var(--font-mono);padding:4px 10px;border-radius:var(--radius-pill);background:#ffffff0f;color:var(--text-faint)}.conn-chip.state-connected{color:var(--live-bright);background:var(--live-tint)}.conn-chip.state-connecting{color:var(--warning);background:#e8b84b1f}.conn-chip.state-error{color:var(--danger);background:var(--danger-tint-12)}.count-chip{display:flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--radius-chip);background:#ffffff0f;color:#ffffffb3}.count{font:600 12px var(--font-mono)}.layout-picker{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:var(--radius-pill);border:1px solid var(--hairline);background:#ffffff09}.layout-mode-button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:24px;padding:0;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-faint);cursor:pointer;transition:background var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard)}.layout-mode-button:hover{color:#ffffffd6}.layout-mode-button.is-active{background:#ffffff17;color:var(--text-primary)}.tiles{--tile-min: 220px;--tile-row-min: 140px;--tile-gap: 16px;--tile-pad: 20px;flex:1;min-height:0;padding:var(--tile-pad);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--tile-min)),1fr));grid-auto-rows:minmax(var(--tile-row-min),1fr);gap:var(--tile-gap);overflow:auto;align-content:start}.tiles.layout-spotlight{grid-template-columns:minmax(0,1fr) minmax(176px,260px);grid-auto-rows:minmax(var(--spotlight-row-min, 118px),1fr)}.tile{position:relative;min-width:0;min-height:var(--tile-row-min);border-radius:var(--radius-tile);overflow:hidden;background:var(--surface);border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;transition:border-color var(--motion-fast) var(--ease-standard),box-shadow var(--motion-fast) var(--ease-standard),transform var(--motion-fast) var(--ease-standard)}.tile.is-pinnable{cursor:pointer}.tile.is-spotlight{grid-column:1;grid-row:1 / span 4;min-height:0}.tile.is-speaking{border-color:color-mix(in srgb,var(--live-bright) 46%,var(--hairline));box-shadow:0 0 0 1px color-mix(in srgb,var(--live-bright) 22%,transparent),0 0 18px color-mix(in srgb,var(--live-bright) 16%,transparent)}.tile video,.tile canvas.full-range-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:contain;background:#000}.tile video.full-range-source-video{opacity:0}.tile canvas.full-range-canvas{pointer-events:none}.tile.stream-paused video,.tile.stream-paused canvas.full-range-canvas{filter:saturate(.75) brightness(.62)}.pause-overlay{position:absolute;right:12px;bottom:12px;z-index:4;display:inline-flex;align-items:center;gap:7px;max-width:calc(100% - 24px);padding:6px 9px;border-radius:var(--radius-pill);background:#080a0cb8;color:#ffffffd6;font:700 11px var(--font-ui);line-height:1;white-space:nowrap;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px #ffffff17}.pause-bars{display:inline-flex;gap:2px;align-items:center;flex:0 0 auto}.pause-bars i{display:block;width:3px;height:9px;border-radius:3px;background:currentColor}.tiles.layout-spotlight .tile:not(.is-spotlight){min-height:var(--spotlight-row-min, 118px)}.tiles.layout-spotlight .tile:not(.is-spotlight) .initials{font-size:20px}.telepointer-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2}.remote-telepointer{--pointer-color: var(--live-bright);position:absolute;left:0;top:0;display:flex;align-items:flex-start;gap:6px;opacity:1;transition-property:opacity,filter;transition-duration:.18s;transition-timing-function:cubic-bezier(.2,0,0,1);will-change:transform,opacity}.remote-telepointer.is-stale{opacity:.42}.remote-telepointer.is-hidden{opacity:0}.remote-telepointer.is-controlling{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--pointer-color) 64%,transparent))}.remote-telepointer__arrow{width:22px;height:22px;overflow:visible}.remote-telepointer__arrow-fill{stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.remote-telepointer__arrow-fill{fill:var(--pointer-color);stroke:none}.remote-telepointer__label{max-width:180px;margin-top:2px;padding:5px 9px 4px;border-radius:var(--radius-pill);background:var(--pointer-color);background:linear-gradient(180deg,color-mix(in srgb,var(--pointer-color) 92%,#f5f6f7),var(--pointer-color));color:#0a0a0ce0;color:color-mix(in srgb,var(--pointer-color) 16%,#0c0c0e);font:800 10.5px/1 var(--font-ui);letter-spacing:.045em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.remote-telepointer__typing{display:none;align-items:center;gap:2px;height:14px;margin-top:2px;padding:0 5px;border-radius:var(--radius-pill);background:#08080ab8;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pointer-color) 36%,transparent),0 2px 8px #00000040}.remote-telepointer.is-typing .remote-telepointer__typing{display:inline-flex}.remote-telepointer__typing span{width:3px;height:3px;border-radius:var(--radius-pill);background:var(--pointer-color);animation:remote-typing-dot .78s cubic-bezier(.2,0,0,1) infinite}.remote-telepointer__typing span:nth-child(2){animation-delay:.11s}.remote-telepointer__typing span:nth-child(3){animation-delay:.22s}.remote-telepointer__ripple{position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:var(--radius-pill);background:var(--pointer-color);opacity:.55;animation:remote-pointer-ripple .48s cubic-bezier(.2,0,0,1) forwards}.remote-telepointer__handshake{position:absolute;width:58px;height:58px;transform:translate(-50%,-50%);border-radius:var(--radius-pill);background:color-mix(in srgb,var(--id-lilac) 24%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--id-lilac) 68%,transparent),0 0 28px color-mix(in srgb,var(--id-lilac) 55%,transparent);animation:remote-handshake-burst .92s cubic-bezier(.2,0,0,1) forwards}.remote-telepointer__handshake span{position:absolute;top:16px;right:16px;bottom:16px;left:16px;border-radius:var(--radius-pill);background:var(--id-lilac);opacity:.75}.remote-telepointer__handshake span:nth-child(1){transform:translate(-9px) rotate(-18deg)}.remote-telepointer__handshake span:nth-child(2){transform:translate(9px) rotate(18deg)}@keyframes remote-pointer-ripple{0%{transform:scale(.4);opacity:.55}to{transform:scale(3.2);opacity:0}}@keyframes remote-typing-dot{0%,80%,to{transform:translateY(0);opacity:.48}35%{transform:translateY(-2px);opacity:1}}@keyframes remote-handshake-burst{0%{transform:translate(-50%,-50%) scale(.54);opacity:0}25%{opacity:1}to{transform:translate(-50%,-50%) scale(1.35);opacity:0}}@media(prefers-reduced-motion:reduce){.remote-telepointer__ripple,.remote-telepointer__typing span,.remote-telepointer__handshake{animation:none}.remote-telepointer__ripple{opacity:0}}.tile .initials{position:absolute;left:50%;top:50%;z-index:1;display:inline-flex;align-items:center;justify-content:center;max-width:calc(100% - 32px);min-width:2.4em;min-height:2.4em;transform:translate(-50%,-50%);font:700 26px var(--font-display);line-height:1;color:var(--text-faint);letter-spacing:.5px;-webkit-user-select:none;user-select:none;white-space:nowrap}.tile.camera-off .name-chip{display:none}.tile .name-chip{position:absolute;left:10px;bottom:10px;z-index:3;display:flex;align-items:center;gap:6px;max-width:calc(100% - 20px);padding:4px 10px;border-radius:var(--radius-pill);background:#0a0a0bb8;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:600 var(--text-micro) var(--font-ui);color:#ffffffe6;white-space:nowrap;overflow:hidden}.tile .name-chip-label{min-width:0;overflow:hidden;text-overflow:clip}.tile .name-chip .tag{font:600 10px var(--font-mono);color:var(--text-faint)}.tile.share-tile .name-chip .tag{color:var(--live-bright)}.tile.share-tile.remote-control-active{border-color:color-mix(in srgb,var(--live-bright) 52%,var(--hairline));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--live-bright) 24%,transparent),0 0 0 1px #0000001f}.tile.share-tile.remote-control-active video,.tile.share-tile.remote-control-active canvas.full-range-canvas{cursor:crosshair}.remote-control-button{position:absolute;right:10px;top:10px;z-index:3;height:26px;padding:0 10px;border-radius:var(--radius-pill);border:1px solid var(--hairline-strong);background:#0a0a0bc2;color:#ffffffd6;font:700 10px var(--font-ui);cursor:pointer;transition:background var(--motion-fast) var(--ease-standard),border-color var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard)}.remote-control-button:hover{background:#121214e0;color:#fffffff5}.remote-control-button.is-active{border-color:color-mix(in srgb,var(--live-bright) 46%,transparent);background:var(--live-tint);color:var(--live-bright)}.remote-control-button:focus-visible{outline:2px solid var(--id-blue);outline-offset:2px}.tile .audio-dot{width:6px;height:6px;border-radius:var(--radius-pill);background:var(--live-bright);flex-shrink:0}.tile .audio-dot.hidden{display:none}.controlbar{flex-shrink:0;display:flex;align-items:center;gap:16px;padding:14px 24px;border-top:1px solid var(--hairline);background:var(--bg-base);flex-wrap:wrap}.controls-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.control-cell{display:flex;flex-direction:column;align-items:center;gap:7px;width:64px}.control-label{font:500 10px var(--font-ui);color:var(--text-faint);white-space:nowrap}.control-label.on{font-weight:600;color:#ffffffeb}.leave-cell{margin-left:auto}.leave-label{font-weight:500}.control-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--control-size);height:var(--control-size);border-radius:var(--radius-pill);border:none;padding:0;background:#ffffff12;color:#ffffffe0;cursor:pointer;transition:background var(--motion-fast) var(--ease-standard),color var(--motion-fast) var(--ease-standard),opacity var(--motion-fast) var(--ease-standard);flex-shrink:0;overflow:hidden}.control-button:hover:not(:disabled){opacity:.88}.control-button:active:not(:disabled){opacity:.8}.control-button:disabled{background:#ffffff09;color:#ffffff40;cursor:default}.control-button.live{background:var(--control-live-bg, var(--live-tint));color:var(--control-live-fg, var(--live-bright))}.control-button.danger{background:var(--danger-tint-16);color:var(--danger)}#ctl-leave,.control-button.leave-subtle{background:#ffffff12;color:#ffffffe0}#ctl-leave svg,.control-button.leave-subtle svg{opacity:.72}.control-button .slash{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--motion-base) var(--ease-standard)}.control-button.slashed .slash{stroke-dashoffset:0}.toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%);max-width:min(360px,calc(100vw - 48px));padding:9px 16px;border-radius:var(--radius-pill);background:var(--surface-raised);border:1px solid var(--hairline-strong);color:#ffffffe6;font:600 var(--text-caption) var(--font-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 8px 24px #00000073;z-index:50}.dev-panel{flex-shrink:0;border-top:1px solid var(--hairline);background:var(--bg-base);max-height:45vh;overflow-y:auto}.dev-panel summary{padding:8px 24px;font:600 var(--text-micro) var(--font-mono);color:var(--text-faint);cursor:pointer;-webkit-user-select:none;user-select:none}.dev-body{padding:4px 24px 20px;display:flex;flex-direction:column;gap:18px}.dev-section h3{margin:0 0 8px;font:600 var(--text-caption) var(--font-ui);color:var(--text-muted)}.hint{margin:0 0 10px;font-size:var(--text-micro);color:var(--text-faint)}code{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--text-muted);background:var(--surface);border-radius:4px;padding:1px 5px}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}.dev-key{font:500 var(--text-micro) var(--font-mono);color:var(--text-faint);min-width:96px}.checkbox-row{display:flex;align-items:center;gap:8px;font-size:var(--text-caption);color:var(--text-muted)}.state{font-family:var(--font-mono);font-size:var(--text-micro);padding:3px 10px;border-radius:var(--radius-pill);background:#ffffff0f;color:var(--text-faint)}.state-on{background:var(--live-tint);color:var(--live-bright)}.state-error{background:var(--danger-tint-12);color:var(--danger)}canvas#test-canvas{display:block;margin-top:12px;width:100%;max-width:420px;height:auto;border:1px solid var(--hairline-strong);border-radius:var(--radius-chip);background:#000}.session-log{font-family:var(--font-mono);font-size:var(--text-micro);max-height:200px;overflow-y:auto;border:1px solid var(--hairline);border-radius:var(--radius-chip);padding:8px 10px;background:var(--surface);color:var(--text-muted)}.session-log .log-line{padding:3px 0;border-bottom:1px solid var(--hairline);display:flex;gap:8px}.session-log .log-line:last-child{border-bottom:none}.session-log .log-time{color:var(--text-faint);flex-shrink:0}.session-log .log-kind-error{color:var(--danger)}.session-log .log-kind-warn{color:var(--warning)}.session-log .log-kind-ok{color:var(--live-bright)}@media(max-width:1024px){.tiles{--tile-min: 190px;--tile-row-min: 132px;--tile-gap: 14px;--tile-pad: 16px;--spotlight-row-min: 112px}.tile .initials{font-size:24px}}@media(max-width:760px){.join-actions{grid-template-columns:1fr}.topbar{padding-inline:14px}.tiles{--tile-min: 170px;--tile-row-min: 128px;--tile-gap: 12px;--tile-pad: 14px;--spotlight-row-min: 128px}.layout-picker{order:-1}.tiles.layout-spotlight{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--spotlight-row-min),1fr)}.tile.is-spotlight{grid-column:auto;grid-row:auto;min-height:240px}.tile .initials{font-size:23px}.tile .name-chip{left:8px;bottom:8px;max-width:calc(100% - 16px)}}@media(max-width:560px){.topbar{height:auto;min-height:50px;flex-wrap:wrap;row-gap:7px;padding-block:8px}.room-title{flex:1 1 150px}.topbar-right{margin-left:0;gap:6px}.tiles{--tile-min: 0px;--tile-row-min: 176px;--tile-gap: 10px;--tile-pad: 12px;grid-template-columns:minmax(0,1fr)}.tiles.layout-spotlight{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(var(--tile-row-min),1fr)}.tile.is-spotlight{min-height:220px}.controlbar{justify-content:center;gap:12px;padding:12px}.controls-left{justify-content:center;gap:12px}.control-cell{width:58px}.leave-cell{margin-left:0}}@media(max-width:420px){.topbar{column-gap:8px;padding-inline:10px}.elapsed{font-size:11px}.conn-chip,.count-chip{padding-inline:8px}.tiles{--tile-row-min: 152px;--tile-gap: 9px;--tile-pad: 10px}.tile .initials{font-size:22px}.tile .name-chip{gap:5px;padding:4px 8px}}