:root{color-scheme:light dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#fff;color:#202124;--app-bg: #ffffff;--surface: #ffffff;--surface-muted: #f7f8fb;--surface-elevated: #ffffff;--line: rgb(32 33 36 / .16);--line-strong: rgb(32 33 36 / .28);--text-muted: #5f6368;--text-soft: #7d858d;--primary: #4285f4;--primary-strong: #2868d8;--primary-soft: #e8f0fe;--paired: #00a69c;--paired-soft: #e2f7f5;--public-room: #ed9d01;--public-room-soft: #fff2d8;--success: #188038;--success-soft: #e6f4ea;--warning: #a86616;--warning-soft: #fff4df;--danger: #c5221f;--danger-soft: #fce8e6;--shadow: 0 18px 46px rgb(60 64 67 / .18);--shadow-soft: 0 8px 22px rgb(60 64 67 / .12);--peer-width: 128px;--header-height: 56px}@media(prefers-color-scheme:dark){:root{background:#121212;color:#f1f3f4;--app-bg: #121212;--surface: #1d1f21;--surface-muted: #25282b;--surface-elevated: #202326;--line: rgb(255 255 255 / .18);--line-strong: rgb(255 255 255 / .32);--text-muted: #bdc1c6;--text-soft: #9aa0a6;--primary: #8ab4f8;--primary-strong: #aecbfa;--primary-soft: #1d304f;--paired: #55d6cf;--paired-soft: #123b38;--public-room: #f4b94f;--public-room-soft: #493611;--success: #81c995;--success-soft: #1f3525;--warning: #fdd663;--warning-soft: #3f3014;--danger: #f28b82;--danger-soft: #3d201d;--shadow: 0 18px 46px rgb(0 0 0 / .45);--shadow-soft: 0 8px 22px rgb(0 0 0 / .28)}}:root[data-theme=light]{color-scheme:light;background:#fff;color:#202124;--app-bg: #ffffff;--surface: #ffffff;--surface-muted: #f7f8fb;--surface-elevated: #ffffff;--line: rgb(32 33 36 / .16);--line-strong: rgb(32 33 36 / .28);--text-muted: #5f6368;--text-soft: #7d858d;--primary: #4285f4;--primary-strong: #2868d8;--primary-soft: #e8f0fe;--paired: #00a69c;--paired-soft: #e2f7f5;--public-room: #ed9d01;--public-room-soft: #fff2d8;--success: #188038;--success-soft: #e6f4ea;--warning: #a86616;--warning-soft: #fff4df;--danger: #c5221f;--danger-soft: #fce8e6;--shadow: 0 18px 46px rgb(60 64 67 / .18);--shadow-soft: 0 8px 22px rgb(60 64 67 / .12)}:root[data-theme=dark]{color-scheme:dark;background:#121212;color:#f1f3f4;--app-bg: #121212;--surface: #1d1f21;--surface-muted: #25282b;--surface-elevated: #202326;--line: rgb(255 255 255 / .18);--line-strong: rgb(255 255 255 / .32);--text-muted: #bdc1c6;--text-soft: #9aa0a6;--primary: #8ab4f8;--primary-strong: #aecbfa;--primary-soft: #1d304f;--paired: #55d6cf;--paired-soft: #123b38;--public-room: #f4b94f;--public-room-soft: #493611;--success: #81c995;--success-soft: #1f3525;--warning: #fdd663;--warning-soft: #3f3014;--danger: #f28b82;--danger-soft: #3d201d;--shadow: 0 18px 46px rgb(0 0 0 / .45);--shadow-soft: 0 8px 22px rgb(0 0 0 / .28)}*{box-sizing:border-box;letter-spacing:0}html{min-width:320px;background:var(--app-bg)}body{margin:0;min-width:320px;min-height:100vh;min-height:100svh;background:var(--app-bg);overflow-x:hidden}button,input{font:inherit}button,.button-like,.drop-picker{min-height:40px;border:1px solid var(--line);border-radius:8px;padding:0 14px;background:var(--surface);color:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-align:center;transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease,transform .16s ease}button:hover,.button-like:hover,.drop-picker:hover{border-color:var(--line-strong);box-shadow:var(--shadow-soft);transform:translateY(-1px)}button.primary,.peer-actions button:first-child,.peer-actions .button-like:first-child{border-color:var(--primary);background:var(--primary);color:#fff}button:disabled,.button-like:has(input:disabled){opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}input{width:100%;min-height:40px;border:1px solid var(--line);border-radius:8px;padding:0 12px;outline:none;background:var(--surface-muted);color:inherit;transition:border-color .16s ease,background-color .16s ease,box-shadow .16s ease}input:focus{border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary),transparent 78%)}input[type=file]{display:none}h1,h2,h3,p{margin:0}h1{font-size:22px;line-height:1.1;font-weight:500;color:var(--primary)}h2{font-size:24px;line-height:1.2;font-weight:500;color:var(--primary)}h3{font-size:15px;line-height:1.25;font-weight:600}p,small{color:var(--text-muted)}.app-shell{min-height:100vh;min-height:100svh;position:relative;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--app-bg)}.circles-canvas{position:fixed;inset:0;z-index:0;display:block;width:100vw;height:100vh;pointer-events:none}.topbar{min-height:var(--header-height);padding:8px 12px;position:relative;z-index:20;display:flex;align-items:center;justify-content:flex-end;width:100vw;gap:4px;pointer-events:none}.brand,.header-tools{pointer-events:auto}.brand{display:flex;align-items:center;min-width:0}.brand h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.brand p,.brand-mark,.identity-chip{display:none}.header-tools{position:relative;z-index:31;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:4px;min-width:0}.status-pill{width:40px;height:40px;min-height:40px;border:0;border-radius:50%;padding:0;background:transparent;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:13px;text-transform:capitalize;transition:background-color .3s ease,color .3s ease,opacity .3s ease}.status-pill:hover{background:color-mix(in srgb,var(--text-muted),transparent 88%)}.network-glyph{width:24px;height:20px;position:relative;display:block;color:currentColor}.network-glyph>span{position:absolute;border:2px solid currentColor;border-radius:50%}.network-glyph>span:nth-child(1){left:1px;bottom:1px;width:8px;height:8px}.network-glyph>span:nth-child(2){right:1px;bottom:1px;width:8px;height:8px}.network-glyph>span:nth-child(3){left:8px;top:0;width:8px;height:8px}.network-glyph:before,.network-glyph:after{content:"";position:absolute;top:9px;width:8px;height:2px;border-radius:2px;background:currentColor}.network-glyph:before{left:6px;transform:rotate(-32deg)}.network-glyph:after{right:6px;transform:rotate(32deg)}.status-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.status-pill.connected{color:var(--text-muted)}.status-pill.connected .network-glyph{color:currentColor}.status-pill.disconnected,.status-pill.offline{color:var(--text-muted)}.status-pill.disconnected .network-glyph,.status-pill.offline .network-glyph{color:currentColor}.workspace{position:relative;z-index:2;min-height:0;display:grid;place-items:center;padding:8px 16px 12px}.tool-panel{--tool-accent: var(--primary);position:relative;display:flex}.pair-panel{--tool-accent: var(--paired)}.public-panel{--tool-accent: var(--public-room)}.tool-button,.icon-button{width:40px;height:40px;min-height:40px;min-width:40px;padding:0;border:0;border-color:transparent;border-radius:50%;-webkit-user-select:none;user-select:none;color:var(--text-muted);background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;text-decoration:none;touch-action:manipulation;transition:background-color .3s ease,color .3s ease,opacity .3s ease}.tool-button span,.icon-button span{display:inline-flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;font-size:15px;font-weight:700;line-height:1}.tool-button:hover,.tool-button:focus-visible,.icon-button:hover,.icon-button:focus-visible{background:color-mix(in srgb,var(--text-muted),transparent 88%);border-color:transparent;box-shadow:none;transform:none;outline:none}.tool-panel.open .tool-button,.icon-button.selected{border-color:transparent;background:color-mix(in srgb,var(--tool-accent),transparent 78%);color:var(--tool-accent, var(--primary));box-shadow:none}.theme-wrapper{--tool-accent: var(--primary);position:relative;z-index:32;display:flex;flex-direction:column;align-items:center;width:40px;min-width:40px;height:40px}.theme-wrapper .icon-button:not(.selected){height:0;min-height:0;opacity:0;overflow:hidden;pointer-events:none}.theme-wrapper:hover .icon-button,.theme-wrapper:focus-within .icon-button{height:40px;min-height:40px;opacity:1;pointer-events:auto}.theme-auto-glyph{position:relative;width:20px;height:20px;border:2px solid currentColor;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%)}.theme-light-glyph,.theme-dark-glyph{position:relative;width:20px;height:20px}.theme-light-glyph:before{content:"";position:absolute;inset:5px;border-radius:50%;background:currentColor;box-shadow:0 -8px 0 -3px currentColor,0 8px 0 -3px currentColor,8px 0 0 -3px currentColor,-8px 0 0 -3px currentColor,6px 6px 0 -4px currentColor,-6px 6px 0 -4px currentColor,6px -6px 0 -4px currentColor,-6px -6px 0 -4px currentColor}.theme-dark-glyph:before{content:"";position:absolute;inset:2px;border-radius:50%;background:currentColor}.theme-dark-glyph:after{content:"";position:absolute;top:0;right:0;width:16px;height:16px;border-radius:50%;background:var(--app-bg)}.tool-popover{position:absolute;top:calc(100% + 14px);right:-4px;z-index:40;width:min(344px,calc(100vw - 24px));border:1px solid var(--line);border-radius:8px;padding:16px;background:color-mix(in srgb,var(--surface-elevated),transparent 2%);box-shadow:var(--shadow);display:grid;gap:13px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.tool-popover:before{content:"";position:absolute;top:-7px;right:16px;width:12px;height:12px;border-top:1px solid var(--line);border-left:1px solid var(--line);background:color-mix(in srgb,var(--surface-elevated),transparent 2%);transform:rotate(45deg)}.pair-panel .tool-popover{right:-44px}.pair-panel .tool-popover:before{right:56px}.panel-heading{display:grid;gap:5px}.panel-kicker{color:var(--tool-accent, var(--primary));font-size:11px;font-weight:700;line-height:1;text-transform:uppercase}.panel-heading h2{font-size:18px;color:inherit}.panel-heading p{font-size:13px;line-height:1.45}.tool-popover form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.pair-glyph{position:relative;width:24px;height:16px;background:linear-gradient(currentColor,currentColor) center / 10px 2px no-repeat}.pair-glyph:before,.pair-glyph:after{content:"";position:absolute;top:3px;width:8px;height:8px;border:2px solid currentColor;border-radius:50%}.pair-glyph:before{left:0}.pair-glyph:after{right:0}.room-glyph{position:relative;width:24px;height:20px}.room-glyph:before{content:"";position:absolute;left:8px;top:0;width:8px;height:8px;border:2px solid currentColor;border-radius:50%;box-shadow:-9px 3px 0 -2px currentColor,9px 3px 0 -2px currentColor}.room-glyph:after{content:"";position:absolute;left:4px;bottom:0;width:16px;height:8px;border:2px solid currentColor;border-radius:11px 11px 3px 3px}.pair-code,.room-chip{min-height:46px;border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--surface-muted);display:flex;align-items:center;gap:10px;flex-wrap:wrap}.pair-code strong,.room-chip strong{color:var(--tool-accent, var(--primary));font-size:22px;line-height:1;font-variant-numeric:tabular-nums}.pair-code img{width:96px;height:96px;border:1px solid var(--line);border-radius:8px;padding:4px;background:#fff}.peer-stage{width:min(100%,1040px);min-height:100%;display:grid;align-content:center;justify-items:center;gap:18px;transform:translateY(clamp(-42px,-7vh,-18px))}.share-strip{width:min(520px,100%);min-height:54px;border:1px solid color-mix(in srgb,var(--primary),transparent 52%);border-radius:8px;padding:10px 12px;background:color-mix(in srgb,var(--primary-soft),var(--surface) 38%);display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:var(--shadow-soft)}.share-strip div{min-width:0;display:grid;gap:2px}.share-strip strong{color:var(--primary-strong);line-height:1.2}.share-strip span{min-width:0;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty-state{width:min(520px,100%);min-height:137px;padding:8px;display:grid;place-items:center;align-content:center;gap:5px;text-align:center}.empty-state h2{max-width:520px;color:var(--primary);font-size:24px;font-weight:400;line-height:32px;animation:fade-rise .42s ease-out both}.empty-state p{max-width:430px;line-height:1.5;animation:fade-rise .42s ease-out 80ms both}.drop-picker{margin-top:6px;border-style:dashed;color:var(--primary-strong);background:color-mix(in srgb,var(--primary-soft),var(--surface) 45%)}.peer-grid{width:min(100%,980px);display:flex;flex-flow:row wrap;align-items:flex-start;justify-content:center;gap:24px 20px;padding:8px 0 18px}.peer-card{--peer-color: var(--primary);width:var(--peer-width);min-height:162px;display:grid;justify-items:center;align-content:start;gap:4px;padding:8px 0;text-align:center;animation:peer-rise .32s ease-out both}.peer-card.type-secret{--peer-color: var(--paired)}.peer-card.type-public-id:not(.type-ip):not(.type-secret){--peer-color: var(--public-room)}.peer-card.offline{--peer-color: #8a8f98}.peer-icon{position:relative;width:64px;height:64px;border-radius:50%;background:linear-gradient(45deg,var(--peer-color) 40%,color-mix(in srgb,var(--peer-color) 70%,white)),var(--peer-color);color:#fff;display:grid;place-items:center;box-shadow:0 3px 4px #00000024,0 1px 8px #0000001f,0 3px 3px -2px #0006;transition:transform .15s ease,opacity .15s ease;animation:peer-pop .6s ease-out both}.peer-card.offline .peer-icon{color:#7b8088;opacity:.72;filter:grayscale(.35);outline:2px dashed color-mix(in srgb,#7b8088,transparent 38%);outline-offset:4px;box-shadow:0 0 0 6px color-mix(in srgb,#7b8088,transparent 90%),inset 0 0 0 1px color-mix(in srgb,#7b8088,transparent 76%)}.peer-card.offline .peer-icon:after{content:"!";position:absolute;right:-4px;bottom:-3px;z-index:1;width:20px;height:20px;display:grid;place-items:center;border:2px solid var(--app-bg);border-radius:50%;background:#74777d;color:#fff;font-size:13px;font-weight:800;line-height:1}.peer-icon .device-symbol{position:relative;display:block;width:34px;height:30px}.peer-icon-desktop .device-symbol:before{content:"";position:absolute;inset:2px 1px 8px;border:3px solid currentColor;border-radius:2px}.peer-icon-desktop .device-symbol:after{content:"";position:absolute;left:7px;bottom:3px;width:20px;height:3px;border-radius:3px;background:currentColor;box-shadow:7px 4px 0 -1px currentColor,-7px 4px 0 -1px currentColor}.peer-icon-phone .device-symbol:before,.peer-icon-tablet .device-symbol:before{content:"";position:absolute;inset:0 8px;border:3px solid currentColor;border-radius:5px}.peer-icon-phone .device-symbol:after,.peer-icon-tablet .device-symbol:after{content:"";position:absolute;left:15px;bottom:3px;width:4px;height:4px;border-radius:50%;background:currentColor}.peer-icon-tablet .device-symbol:before{inset:0 5px;border-radius:6px}.peer-card:hover .peer-icon,.peer-card:focus-within .peer-icon{transform:scale(1.05)}.highlight-wrapper{display:flex;align-items:center;justify-content:center;gap:2px;height:6px;margin:3px auto 0}.highlight{display:none;width:15px;height:6px;border-radius:4px;box-shadow:0 3px 4px #00000024,0 1px 8px #0000001f,0 3px 3px -2px #0006}.type-ip .highlight-room-ip{display:block;background:linear-gradient(180deg,var(--primary),color-mix(in srgb,var(--primary) 90%,black)),var(--primary)}.type-secret .highlight-room-secret{display:block;background:linear-gradient(180deg,var(--paired),color-mix(in srgb,var(--paired) 90%,black)),var(--paired)}.type-public-id .highlight-room-public-id{display:block;background:linear-gradient(180deg,var(--public-room),color-mix(in srgb,var(--public-room) 90%,black)),var(--public-room)}.device-descriptor{width:100%;display:grid;justify-items:center;gap:0}.device-descriptor h3,.device-descriptor p,.device-descriptor small{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-descriptor p,.device-descriptor small{font-size:12px;line-height:18px;opacity:.7}.device-descriptor small{display:none}.peer-card.offline .device-descriptor small{display:inline-flex;width:auto;max-width:100%;align-items:center;justify-content:center;margin-top:2px;padding:0 7px;border-radius:999px;background:color-mix(in srgb,#7b8088,transparent 84%);color:#686d75;font-size:11px;font-weight:700;line-height:18px;letter-spacing:0;text-transform:uppercase;opacity:1}.peer-card.offline .peer-actions{opacity:.55}.peer-actions{width:100%;min-height:32px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:4px}.peer-actions button,.peer-actions .button-like{min-height:28px;min-width:54px;padding:0 9px;font-size:12px}progress{width:94px;height:7px;accent-color:var(--primary)}.dialog-backdrop{position:fixed;inset:0;z-index:50;padding:20px;background:#0000006b;display:grid;place-items:center}.dialog{width:min(460px,100%);border:1px solid var(--line);border-radius:8px;padding:20px;background:var(--surface-elevated);box-shadow:var(--shadow);display:grid;gap:14px}.dialog h2{font-size:20px;color:inherit}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}.file-list{max-height:180px;margin:0;padding-left:20px;overflow:auto;color:var(--text-muted)}.toast-stack{position:fixed;right:18px;bottom:18px;z-index:60;display:grid;gap:8px}.toast{max-width:min(360px,calc(100vw - 36px));justify-content:start;background:var(--surface-elevated);box-shadow:var(--shadow)}.footer{position:relative;z-index:3;margin:auto 5px 7px;padding:0 12px 6px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;color:var(--text-muted);cursor:default;font-size:14px}.footer-logo{width:80px;height:80px;color:var(--primary);fill:currentColor;margin-top:-10px;margin-bottom:8px;animation:logo-float 4.8s ease-in-out infinite}.known-as-wrapper,.discovery-wrapper{display:inline-flex;align-items:center;justify-content:center;gap:6px;max-width:min(100%,720px);flex-wrap:wrap}.known-as-wrapper span,.discovery-wrapper span{color:var(--text-soft)}.known-as-wrapper strong,.discovery-wrapper strong{max-width:min(72vw,24rem);border-radius:6px;padding:2px 7px 3px;color:#fff;font-weight:600;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.known-as-wrapper strong{background:#74777d}.discovery-wrapper{margin-top:4px;border:2px solid color-mix(in srgb,var(--text-muted),transparent 34%);border-radius:18px;padding:3px 5px 4px;background:color-mix(in srgb,var(--surface),transparent 12%)}.badge-room-ip{background:var(--primary)}.badge-room-secret{background:var(--paired)}.badge-room-public{background:var(--public-room)}.display-name-edit{width:24px;height:24px;min-height:24px;border:0;border-radius:50%;padding:0;background:transparent;box-shadow:none;color:currentColor}.display-name-edit:hover{background:color-mix(in srgb,currentColor,transparent 88%);box-shadow:none;transform:none}.edit-mark{position:relative;width:16px;height:16px;display:block}.edit-mark:before{content:"";position:absolute;left:3px;top:9px;width:11px;height:4px;border-radius:2px;background:currentColor;transform:rotate(-45deg)}.edit-mark:after{content:"";position:absolute;left:1px;bottom:2px;width:5px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}@keyframes peer-pop{0%{transform:scale(.72)}42%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes peer-rise{0%{transform:translateY(8px)}to{transform:translateY(0)}}@keyframes fade-rise{0%{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes logo-float{0%,to{transform:translateY(0)}50%{transform:translateY(-2px)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}.footer-logo,.peer-card,.peer-icon,.empty-state h2,.empty-state p{animation:none!important}}@media(max-width:720px){:root{--peer-width: 120px}.topbar{padding-inline:8px}.header-tools{gap:2px}.workspace{padding-inline:12px}.peer-stage{align-content:center}.empty-state h2{font-size:22px}.tool-popover{width:min(332px,calc(100vw - 24px))}.pair-panel .tool-popover,.public-panel .tool-popover{right:0}.pair-panel .tool-popover:before,.public-panel .tool-popover:before{right:16px}.tool-popover form{grid-template-columns:1fr}.share-strip{align-items:stretch;flex-direction:column}.share-strip button{width:100%}}@media(max-width:430px){.topbar{min-height:56px}.tool-button,.icon-button,.status-pill,.theme-wrapper{width:36px;min-width:36px;height:36px;min-height:36px}.workspace{padding-top:0}.peer-grid{gap:22px 12px}.footer-logo{width:64px;height:64px}}