:root{color:#1f2937;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f3efe9;font-family:Inter,Segoe UI,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html,body{min-height:100vh;margin:0}body{background:linear-gradient(#f5f5f4,#e7e5e4);place-items:center;display:grid}button,h1,h2,h3,p,video{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:3px;outline:3px solid #dc262659}#app{width:min(100%,900px);padding:32px 18px}.app-shell{flex-direction:column;align-items:center;gap:24px;display:flex}.topbar{text-align:center}.eyebrow{color:#7b6f68;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px;font-size:.72rem}h1,h2,h3{color:#1b1c1f;letter-spacing:-.05em;font-weight:600}h1{font-size:clamp(2rem,3vw,2.8rem);line-height:1.1}h2{font-size:1.25rem;line-height:1.1}h3{font-size:1rem}.intro{color:#6b7280;max-width:590px;margin:12px auto 0;font-size:.96rem}.camera-panel{flex-direction:column;align-items:center;gap:18px;width:min(100%,760px);display:flex}.camera-stage{aspect-ratio:4/3;background:#1118270a;border:1px solid #1118271f;border-radius:18px;width:min(100%,720px);position:relative;overflow:hidden;box-shadow:0 14px 28px #11182714}#camera-video,#overlay-canvas{width:100%;height:100%;display:block;position:absolute;inset:0}#camera-video{object-fit:cover;background:#1118270a}#overlay-canvas{pointer-events:none;background:0 0}#camera-video.is-mirrored,#overlay-canvas.is-mirrored{transform:scaleX(-1)}.controls{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.start-button,.stop-button,.mesh-button,.pair-button,.secondary-button,.copy-button,.link-button{border:none;border-radius:999px;min-height:42px;padding:0 16px;font-size:.92rem;font-weight:700;transition:transform .16s,box-shadow .16s,background .16s}.start-button,.pair-button{color:#fff;background:#dc2626;box-shadow:0 8px 14px #dc262638}.start-button:hover:not(:disabled),.pair-button:hover:not(:disabled){background:#b91c1c;transform:translateY(-1px)}.start-button:disabled,.pair-button:disabled{cursor:wait;opacity:.68}.stop-button{color:#7f1d1d;background:#fee2e2}.mesh-button,.secondary-button{color:#374151;background:#e5e7eb}.mesh-button[aria-pressed=false]{color:#6b7280;background:#f3f4f6}.mesh-button:disabled,.link-button:disabled{cursor:not-allowed;opacity:.55}.camera-status,.pairing-status{color:#6b7280;text-align:center;min-height:24px;font-size:.92rem}.camera-status[data-state=loading],.pairing-status[data-state=loading]{color:#9a6700}.camera-status[data-state=running],.pairing-status[data-state=connected]{color:#047857}.camera-status[data-state=error],.pairing-status[data-state=error]{color:#b42318}.pairing-status[data-state=ready]{color:#1d4ed8}.pairing-panel,.mesh-settings{background:#ffffffc2;border:1px solid #1118271a;border-radius:18px;width:min(100%,760px);padding:22px;box-shadow:0 12px 26px #1118270f}.pairing-panel{border-color:#dc26262e}.settings-heading{justify-content:space-between;align-items:end;gap:16px;margin-bottom:14px;display:flex}.settings-heading .eyebrow{margin:0 0 5px}.local-badge{white-space:nowrap;color:#7f1d1d;letter-spacing:.04em;background:#fff1f2;border-radius:999px;padding:6px 10px;font-size:.72rem;font-weight:800}.pairing-intro{color:#6b7280;max-width:650px;margin:0 0 18px;font-size:.9rem}.pairing-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.pairing-card,.setting-card{background:#fff;border:1px solid #1118271a;border-radius:12px;flex-direction:column;gap:12px;padding:15px;display:flex}.pairing-card[hidden]{display:none}.mac-pairing{align-items:flex-start}.qr-wrap{background:#fff8f8;border:1px dashed #dc262666;border-radius:12px;justify-items:center;gap:12px;width:min(100%,340px);padding:14px;display:grid}.qr-wrap canvas{background:#fff;border-radius:8px;width:min(100%,260px);height:auto;padding:8px}.room-label{color:#6b7280;text-align:center;margin:0;font-size:.8rem}.pairing-card-header{align-items:flex-start;gap:10px;display:flex}.pairing-card-header p{color:#6b7280;margin-top:3px;font-size:.82rem}.step-number{color:#fff;background:#dc2626;border-radius:50%;flex:none;place-items:center;width:25px;height:25px;font-size:.72rem;font-weight:800;display:grid}.code-label,.setting-label{color:#374151;font-size:.8rem;font-weight:800}.signal-code{resize:vertical;color:#374151;background:#fafafa;border:1px solid #d1d5db;border-radius:8px;width:100%;padding:9px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.72rem;line-height:1.35}.copy-button{color:#1d4ed8;background:#eff6ff}.secondary-button{align-self:flex-start}.pairing-footer{justify-content:space-between;align-items:center;gap:12px;margin-top:16px;display:flex}.pairing-status{text-align:left}.link-button{color:#7f1d1d;background:#fee2e2}.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;display:grid}.setting-card{justify-content:space-between;gap:15px;min-height:100px}.setting-control{justify-content:space-between;align-items:center;gap:12px;display:flex}output{color:#7c2d12;font-size:.78rem;font-weight:700}.range-control input{accent-color:#dc2626;width:100%}.color-control input[type=color]{cursor:pointer;background:#fff;border:1px solid #d1d5db;border-radius:7px;width:38px;height:28px;padding:2px}.select-control select{color:#374151;background:#fff;border:1px solid #d1d5db;border-radius:8px;min-width:115px;padding:7px 28px 7px 9px}.toggle-control{justify-content:flex-start}.toggle-control input{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.switch{background:#d1d5db;border-radius:999px;width:42px;height:24px;transition:background .16s;display:inline-block;position:relative}.switch:after{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .16s;position:absolute;top:3px;left:3px;box-shadow:0 1px 2px #00000029}.toggle-control input:checked+.switch{background:#dc2626}.toggle-control input:checked+.switch:after{transform:translate(18px)}@media (width<=620px){#app{padding:24px 14px}.pairing-grid,.settings-grid{grid-template-columns:1fr}.pairing-panel,.mesh-settings{padding:16px}.settings-heading,.pairing-footer{flex-direction:column;align-items:flex-start}.local-badge{white-space:normal}}