:root{color-scheme:light;--md-ref-blue-10: #001b3d;--md-ref-blue-40: #0b57d0;--md-ref-blue-80: #a8c7fa;--md-ref-blue-90: #d3e3fd;--md-ref-green-40: #137333;--md-ref-amber-40: #8d4e00;--md-ref-red-40: #b3261e;--md-sys-color-primary: var(--md-ref-blue-40);--md-sys-color-on-primary: #fff;--md-sys-color-primary-container: var(--md-ref-blue-90);--md-sys-color-on-primary-container: var(--md-ref-blue-10);--md-sys-color-secondary-container: #d8e2ff;--md-sys-color-on-secondary-container: #001a41;--md-sys-color-error: var(--md-ref-red-40);--md-sys-color-error-container: #f9dedc;--md-sys-color-on-error-container: #410e0b;--md-sys-color-background: #f8fafd;--md-sys-color-surface: #fdfcff;--md-sys-color-surface-container-low: #f7f6f9;--md-sys-color-surface-container: #f3f1f4;--md-sys-color-surface-container-high: #eceaf0;--md-sys-color-surface-container-highest: #e6e2e8;--md-sys-color-surface-container-lowest: #fff;--md-sys-color-on-surface: #1a1b20;--md-sys-color-on-surface-variant: #44474f;--md-sys-color-outline: #74777f;--md-sys-color-outline-variant: #c4c6d0;--md-sys-color-inverse-surface: #2f3036;--md-sys-color-inverse-on-surface: #f1f0f7;--md-sys-state-hover: rgb(11 87 208 / .08);--md-sys-elevation-level1: 0 1px 2px rgb(60 64 67 / .16), 0 1px 3px 1px rgb(60 64 67 / .08);--md-sys-elevation-level2: 0 1px 2px rgb(60 64 67 / .2), 0 2px 6px 2px rgb(60 64 67 / .1);--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 28px;--transition: .16s cubic-bezier(.2, 0, 0, 1);font-family:Roboto,Roboto Flex,Arial,sans-serif;background:var(--md-sys-color-background);color:var(--md-sys-color-on-surface)}*{box-sizing:border-box}html{overflow-x:clip}html,body,#app{min-height:100%;margin:0}body{min-width:280px;background:var(--md-sys-color-background);overflow-wrap:break-word}button,input{font:inherit}button{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:3px solid var(--md-sys-color-primary);outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.48}.app-shell{min-height:100vh;background:var(--md-sys-color-background)}.topbar{align-items:center;background:var(--md-sys-color-surface);border-bottom:1px solid var(--md-sys-color-outline-variant);display:flex;gap:12px;height:64px;justify-content:flex-start;padding:0 20px}.brand{align-items:center;color:var(--md-sys-color-on-surface);display:inline-flex;font-size:18px;font-weight:700;gap:10px;letter-spacing:-.02em;text-decoration:none}.brand-mark{align-items:center;background:var(--md-sys-color-primary-container);border-radius:10px;color:var(--md-sys-color-on-primary-container);display:inline-flex;height:32px;justify-content:center;width:32px}.icon{display:block;height:20px;width:20px}.brand-mark .icon{height:19px;width:19px}.tv-mode-shortcut{background:var(--md-sys-color-secondary-container);border:1px solid transparent;border-radius:999px;color:var(--md-sys-color-on-secondary-container);cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.01em;min-height:40px;padding:9px 14px;white-space:nowrap}.tv-mode-shortcut:hover{background:color-mix(in srgb,var(--md-sys-color-secondary-container) 84%,var(--md-sys-color-on-secondary-container))}.topbar-actions{align-items:center;display:flex;gap:16px;margin-left:auto;min-width:0}.guide-link{color:var(--md-sys-color-on-surface-variant);font-size:13px;font-weight:700;text-decoration:none}.guide-link:hover{color:var(--md-sys-color-primary);text-decoration:underline;text-underline-offset:3px}.status-pill{align-items:center;color:var(--md-sys-color-on-surface-variant);display:inline-flex;font-size:12px;font-weight:600;gap:8px;line-height:1;white-space:nowrap}.status-dot{background:var(--md-sys-color-outline);border-radius:50%;display:inline-block;height:8px;width:8px}.status-pill.is-ready .status-dot{background:var(--md-ref-green-40)}.status-pill.is-warning .status-dot{background:var(--md-ref-amber-40)}.status-pill.is-error .status-dot{background:var(--md-sys-color-error)}.status-pill.is-live .status-dot{background:#d93025}.sender-shell{display:grid;gap:12px;min-height:calc(100vh - 64px);padding:16px}#capability-message:empty{display:none}.unsupported{background:var(--md-sys-color-error-container);border-radius:var(--radius-md);color:var(--md-sys-color-on-error-container);font-size:14px;line-height:1.5;padding:12px 16px}.sender-layout{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 352px;min-height:0}.workbench{background:var(--md-sys-color-surface-container-low);border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--radius-lg);display:grid;grid-template-rows:56px minmax(390px,1fr) 52px;min-height:0;overflow:hidden}.workbench-context,.workbench-dock{align-items:center;background:var(--md-sys-color-surface);display:flex;justify-content:space-between;padding:0 18px}.workbench-context{border-bottom:1px solid var(--md-sys-color-outline-variant)}.workbench-context>div,.workbench-dock>span{align-items:center;display:inline-flex;font-size:14px;font-weight:600;gap:9px}.context-icon{color:var(--md-sys-color-primary);display:inline-flex}.context-state{color:var(--md-sys-color-on-surface-variant);font-size:12px}.screen-canvas{align-items:center;background:var(--md-sys-color-surface-container-lowest);display:flex;justify-content:center;margin:16px;min-height:0;overflow:hidden;position:relative}.canvas-grid{background-image:linear-gradient(var(--md-sys-color-outline-variant) 1px,transparent 1px),linear-gradient(90deg,var(--md-sys-color-outline-variant) 1px,transparent 1px);background-size:24px 24px;inset:0;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 15%,#000 85%,transparent);opacity:.5;pointer-events:none;position:absolute}.empty-stage{align-items:center;display:flex;flex-direction:column;max-width:420px;padding:32px;position:relative;text-align:center;z-index:1}.canvas-mode-icon{align-items:center;background:var(--md-sys-color-primary-container);border-radius:22px;color:var(--md-sys-color-on-primary-container);display:flex;height:64px;justify-content:center;margin-bottom:17px;width:64px}.canvas-mode-icon .icon{height:31px;width:31px}.empty-stage h3{font-size:24px;font-weight:500;letter-spacing:-.02em;margin:0 0 8px}.empty-stage p{color:var(--md-sys-color-on-surface-variant);font-size:15px;line-height:1.55;margin:0}.canvas-actions{align-items:center;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:24px}.canvas-share-button{min-height:48px;padding:0 24px}.canvas-action-hint{color:var(--md-sys-color-on-surface-variant);font-size:12px}.canvas-saved-devices{display:grid;gap:8px;margin-top:22px;min-width:min(100%,320px)}.canvas-saved-label{color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:700;letter-spacing:.08em}.canvas-saved-note{color:var(--md-sys-color-on-surface-variant);font-size:12px}.canvas-device-button{align-items:center;background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--radius-md);color:var(--md-sys-color-on-surface);cursor:pointer;display:grid;font-size:13px;font-weight:650;gap:10px;grid-template-columns:32px minmax(0,1fr) 18px;padding:8px 11px 8px 8px;text-align:left;transition:background var(--transition),border-color var(--transition)}.canvas-device-button:hover{background:var(--md-sys-state-hover);border-color:var(--md-sys-color-primary)}.canvas-device-button>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-device-button>.icon{color:var(--md-sys-color-primary);height:17px;width:17px}.canvas-device-button .device-avatar{height:32px;width:32px}.canvas-device-button .device-avatar .icon{height:16px;width:16px}.screen-preview{background:#090a0c;display:none;height:100%;object-fit:contain;position:relative;width:100%;z-index:2}.screen-preview.is-visible{display:block}.workbench-dock{border-top:1px solid var(--md-sys-color-outline-variant);color:var(--md-sys-color-on-surface-variant)}.workbench-dock>span{font-size:12px;font-weight:400}.workbench-dock>span .icon{color:var(--md-sys-color-primary);height:18px;width:18px}.workbench-meta{display:grid;gap:3px}.context-title{color:inherit;font:inherit;margin:0}.workbench-meta>span:first-child{align-items:center;display:inline-flex;font-size:12px;font-weight:400;gap:7px}.workbench-meta>span:first-child .icon{color:var(--md-sys-color-primary);height:18px;width:18px}.live-controls{align-items:center;display:none;gap:12px}.live-controls.is-visible{display:flex}.inspector{background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--radius-lg);display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-height:0;overflow:hidden}.inspector-header{align-items:center;border-bottom:1px solid var(--md-sys-color-outline-variant);display:flex;justify-content:space-between;padding:16px 18px 13px}.inspector-header p{color:var(--md-sys-color-on-surface-variant);font-size:11px;font-weight:700;letter-spacing:.08em;margin:0}.inspector-header h2{font-size:19px;font-weight:600;margin:3px 0 0}.card-icon{align-items:center;background:var(--md-sys-color-primary-container);border-radius:50%;color:var(--md-sys-color-on-primary-container);display:inline-flex;height:36px;justify-content:center;width:36px}.card-icon .icon{height:19px;width:19px}.inspector-body{align-content:start;display:grid;gap:20px;overflow:auto;padding:20px}.setting-block{border-bottom:1px solid var(--md-sys-color-outline-variant);padding-bottom:20px}.field-label{color:var(--md-sys-color-on-surface);display:block;font-size:13px;font-weight:600;margin-bottom:8px}.field-help{color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:1.45;margin:8px 0 0}.pin-field{align-items:center;border:1px solid var(--md-sys-color-outline);border-radius:var(--radius-sm);display:flex;gap:8px;min-height:52px;padding:4px}.pin-field:focus-within{border:2px solid var(--md-sys-color-primary);padding:3px}.pin-input{background:transparent;border:0;color:var(--md-sys-color-on-surface);font-family:Roboto Mono,ui-monospace,monospace;font-size:18px;font-weight:600;letter-spacing:.22em;min-width:0;outline:0;padding:0 0 0 11px;text-align:center;width:100%}.pin-input::placeholder{color:var(--md-sys-color-outline)}.checkbox-row{align-items:center;color:var(--md-sys-color-on-surface);cursor:pointer;display:flex;font-size:13px;gap:10px;min-height:44px}.checkbox-row input{accent-color:var(--md-sys-color-primary);height:18px;margin:0;width:18px}.connection-result{align-items:center;background:var(--md-sys-color-secondary-container);border-radius:var(--radius-md);color:var(--md-sys-color-on-secondary-container);display:none;gap:10px;padding:12px}.connection-result.is-visible{display:flex}.connection-result .status-dot{background:var(--md-ref-green-40)}.connection-result strong{display:block;font-size:13px}.connection-result span{display:block;font-size:12px;margin-top:2px}.saved-section{min-width:0}.section-label{color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:700;letter-spacing:.04em;margin-bottom:7px}.saved-list{list-style:none;margin:0;padding:0}.saved-empty{color:var(--md-sys-color-on-surface-variant);font-size:13px;line-height:1.5;padding:10px 0}.saved-device{align-items:center;border-radius:var(--radius-md);display:grid;gap:9px;grid-template-columns:36px minmax(0,1fr) auto auto;padding:9px 6px}.saved-device:hover{background:var(--md-sys-state-hover)}.device-avatar{align-items:center;background:var(--md-sys-color-secondary-container);border-radius:50%;color:var(--md-sys-color-on-secondary-container);display:flex;height:36px;justify-content:center;width:36px}.device-avatar .icon{height:18px;width:18px}.device-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-meta{color:var(--md-sys-color-on-surface-variant);font-size:11px;margin-top:2px}.inspector-footer{border-top:1px solid var(--md-sys-color-outline-variant);padding:16px 20px}.button{align-items:center;background:transparent;border:1px solid transparent;border-radius:999px;color:var(--md-sys-color-on-surface);cursor:pointer;display:inline-flex;font-size:14px;font-weight:650;gap:8px;justify-content:center;min-height:44px;padding:0 20px;transition:background var(--transition),box-shadow var(--transition)}.button:hover:not(:disabled){box-shadow:inset 0 0 0 999px var(--md-sys-state-hover)}.button:active:not(:disabled){transform:none}.button .icon{height:18px;width:18px}.button-primary{background:var(--md-sys-color-primary);box-shadow:var(--md-sys-elevation-level1);color:var(--md-sys-color-on-primary)}.button-tonal{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.button-outline{border-color:var(--md-sys-color-outline);color:var(--md-sys-color-primary)}.button-danger{background:transparent;border-color:var(--md-sys-color-outline);color:var(--md-sys-color-error)}.button-small{font-size:12px;min-height:40px;padding:0 13px}.button-full{width:100%}.icon-button{align-items:center;background:transparent;border:0;border-radius:50%;color:var(--md-sys-color-on-surface-variant);cursor:pointer;display:inline-flex;height:44px;justify-content:center;width:44px}.icon-button:hover{background:var(--md-sys-state-hover);color:var(--md-sys-color-error)}.feedback{align-items:flex-start;background:#fff1d8;border-radius:var(--radius-sm);color:#6d3b00;display:none;font-size:13px;gap:8px;line-height:1.45;padding:10px}.feedback.is-visible{display:flex}.feedback.is-error{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.feedback.is-success{background:#c4eed0;color:#0b5224}.feedback .icon{flex:0 0 auto;height:18px;width:18px}.receiver-shell{align-items:center;display:grid;justify-content:center;min-height:100vh;padding:28px}.receiver-card{background:var(--md-sys-color-surface);border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--radius-xl);box-shadow:var(--md-sys-elevation-level2);max-width:500px;overflow:hidden;width:100%}.receiver-heading{align-items:center;display:flex;justify-content:space-between;padding:20px 24px}.fullscreen-button{align-items:center;background:var(--md-sys-color-secondary-container);border:0;border-radius:999px;color:var(--md-sys-color-on-secondary-container);cursor:pointer;display:inline-flex;font-size:13px;font-weight:700;gap:7px;min-height:44px;padding:0 15px;white-space:nowrap}.fullscreen-button:hover{background:color-mix(in srgb,var(--md-sys-color-secondary-container) 84%,var(--md-sys-color-on-secondary-container))}.fullscreen-button .icon{height:18px;width:18px}.receiver-status{border-bottom:1px solid var(--md-sys-color-outline-variant);border-top:1px solid var(--md-sys-color-outline-variant);padding:13px 24px}.receiver-content{padding:28px 24px 24px;text-align:center}.receiver-content h1{font-size:24px;font-weight:500;letter-spacing:-.02em;margin:0 0 7px}.qr-panel{align-items:center;background:#fff;border:1px solid var(--md-sys-color-outline-variant);border-radius:var(--radius-md);display:flex;justify-content:center;margin:0 auto 24px;max-width:292px;min-height:292px;padding:8px}.qr-panel canvas{display:block;height:auto!important;max-width:100%;width:100%!important}.qr-loading{color:var(--md-sys-color-on-surface-variant);font-size:13px}.receiver-instruction{color:var(--md-sys-color-on-surface-variant);font-size:14px;line-height:1.5;margin:0 auto 22px;max-width:350px}.pin-label{color:var(--md-sys-color-on-surface-variant);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.tv-pin{color:var(--md-sys-color-on-surface);font-family:Roboto Mono,ui-monospace,monospace;font-size:48px;font-weight:600;letter-spacing:.12em;line-height:1.2;margin-left:.12em}.expiry{color:var(--md-sys-color-on-surface-variant);font-size:12px;margin-top:8px}.receiver-footer{border-top:1px solid var(--md-sys-color-outline-variant);padding:14px 24px;text-align:center}.reset-link{align-items:center;background:transparent;border:0;color:var(--md-sys-color-on-surface-variant);cursor:pointer;display:inline-flex;font-size:12px;justify-content:center;min-height:44px;padding:0 12px;text-decoration:underline;text-underline-offset:3px}.reset-link:hover{color:var(--md-sys-color-primary)}.tv-video-stage{background:#090a0c;display:none;inset:0;outline:0;position:fixed;z-index:20}.tv-video-stage.is-visible{display:block}.tv-video-stage video{height:100%;object-fit:contain;width:100%}.video-chrome{align-items:flex-start;background:linear-gradient(to bottom,rgb(0 0 0 / .58),transparent);display:flex;justify-content:flex-end;left:0;padding:24px;position:absolute;right:0;top:0;transition:opacity var(--transition),transform var(--transition)}.tv-video-stage.is-controls-hidden .video-chrome{opacity:0;pointer-events:none;transform:translateY(-10px)}.video-actions{display:flex;gap:10px}.on-video-button,.sound-button{background:#ffffffeb;color:#1a1b20}@media(max-width:900px){.sender-layout{grid-template-columns:1fr}.workbench{min-height:480px}.inspector{min-height:0}.inspector-body{max-height:none}}@media(max-width:760px){.guide-link{display:none}.topbar-actions{gap:0}}@media(max-width:560px){.topbar{height:56px;padding:0 16px}.brand{font-size:16px}.brand-mark{height:30px;width:30px}.topbar .status-pill,.topbar-actions{display:none}.tv-mode-shortcut{font-size:11px;padding:8px 11px}.sender-shell{min-height:calc(100vh - 56px);padding:0}.sender-layout{gap:0}.workbench,.inspector{border-left:0;border-radius:0;border-right:0}.workbench{grid-template-rows:52px minmax(340px,1fr) auto}.screen-canvas{margin:10px}.workbench-dock{align-items:flex-start;flex-direction:column;gap:8px;padding:12px 16px}.live-controls{align-self:stretch;justify-content:space-between;width:100%}.inspector-body{padding:18px 16px}.inspector-footer{padding:14px 16px}.receiver-shell{padding:14px}.receiver-card{border-radius:var(--radius-lg)}.receiver-heading,.receiver-status,.receiver-content{padding-left:18px;padding-right:18px}.qr-panel{max-width:264px;min-height:264px}.tv-pin{font-size:42px}}@media(max-width:360px){body{min-width:280px}.topbar{gap:8px;padding:0 12px}.brand>span:last-child{display:none}.brand-mark{height:30px;width:30px}.tv-mode-shortcut{font-size:0;min-height:44px;min-width:44px;padding:0 11px}.tv-mode-shortcut:before{content:"TV";font-size:11px}.receiver-shell{padding:8px}.receiver-heading{gap:10px;padding:14px}.receiver-heading .brand>span:last-child{display:inline;font-size:15px}.fullscreen-button{min-width:40px;padding:0 11px}.fullscreen-button>span{display:none}.video-chrome{padding:12px}.video-actions{flex-wrap:wrap;gap:8px;justify-content:flex-end}.on-video-button,.sound-button{min-height:38px;padding:0 11px}}@media(prefers-color-scheme:dark){:root{color-scheme:dark;--md-sys-color-primary: var(--md-ref-blue-80);--md-sys-color-on-primary: #00316b;--md-sys-color-primary-container: #0842a0;--md-sys-color-on-primary-container: #d3e3fd;--md-sys-color-secondary-container: #2d3d57;--md-sys-color-on-secondary-container: #d8e2ff;--md-sys-color-error: #ffb4ab;--md-sys-color-error-container: #93000a;--md-sys-color-on-error-container: #ffdad6;--md-sys-color-background: #1f1f1f;--md-sys-color-surface: #1f1f1f;--md-sys-color-surface-container-low: #1a1a1a;--md-sys-color-surface-container: #2b2b2b;--md-sys-color-surface-container-high: #303030;--md-sys-color-surface-container-highest: #3c4043;--md-sys-color-surface-container-lowest: #141414;--md-sys-color-on-surface: #e8eaed;--md-sys-color-on-surface-variant: #c4c6d0;--md-sys-color-outline: #8e9099;--md-sys-color-outline-variant: #44474f}.qr-panel{background:#fff}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}