:root{--bg:#eff1f5;--card:#f7f8fb;--text:#1f2329;--muted:#8a9099;--body:#4b5563;--primary:#2f6fed;--primary-hover:#245fd6;--danger:#e5484d;--ok:#15803d;--warn-bg:#fff7e6;--warn:#92400e;--box:#d9dce2;--box-border:#cfd5de;--glow:0 0 60px 24px #ffffffe6, 0 28px 60px #6e82be1f;color:var(--text);background:var(--bg);font-family:Helvetica Neue,Arial,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;margin:0}.app{flex-direction:column;min-height:100vh;display:flex}.topbar{justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;display:flex}.brand{align-items:center;gap:10px;min-width:0;display:flex}.brand-name{font-family:Georgia,Times New Roman,serif;font-size:1.05rem;font-weight:700}.brand-sep{background:#c8ccd4;width:1px;height:14px;margin:0 8px}.device{min-width:0;color:var(--text);align-items:center;gap:8px;display:flex}.device-edit{color:#6b7280;cursor:text;align-items:center;gap:6px;display:flex}.device-input{font:inherit;color:#4b5563;text-underline-offset:3px;field-sizing:content;background:0 0;border:0;min-width:4ch;max-width:40vw;padding:2px 0;text-decoration:underline}.device-input:focus{-webkit-text-decoration-color:var(--primary);text-decoration-color:var(--primary);outline:none}.device-input[aria-invalid=true]{-webkit-text-decoration-color:var(--danger);text-decoration-color:var(--danger)}.device-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.disconnect{color:#374151;background:#fff;border-radius:10px;align-items:center;gap:8px;padding:10px 14px;display:flex;box-shadow:0 4px 18px #1e283c14}.disconnect:hover{background:#fafafa}.page{flex-direction:column;flex:1;align-items:center;width:100%;max-width:820px;margin:0 auto;padding:24px 16px 56px;display:flex}.panel{text-align:center;background:var(--card);width:min(484px,100%);min-height:380px;box-shadow:var(--glow);border-radius:24px;flex-direction:column;align-items:center;gap:16px;margin-top:8px;padding:64px 32px 36px;display:flex}.panel-title{margin:0;font-family:Georgia,Times New Roman,serif;font-size:1.2rem;font-weight:700}.panel-text{color:var(--body);margin:0}.panel-hint{color:var(--muted);margin:0;font-size:.85rem}.error-panel .panel-title{color:var(--danger)}button{font:inherit;cursor:pointer;border:0}button:disabled{opacity:.6;cursor:progress}.pill{color:#fff;background:var(--primary);border-radius:999px;min-width:110px;padding:9px 24px}.pill:hover:not(:disabled){background:var(--primary-hover)}.pill.secondary{color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary);background:#fff}.pill.secondary:hover:not(:disabled){background:#f2f6ff}.pill.danger{background:var(--danger)}.pill.danger:hover:not(:disabled){background:#d63d42}.code-form{flex-direction:column;align-items:center;gap:16px;margin-top:24px;display:flex}.pin{gap:28px;display:inline-flex;position:relative}.pin-group{gap:12px;display:flex}.pin-box{width:44px;height:44px;color:var(--text);background:var(--box);border:2px solid #0000;border-radius:8px;justify-content:center;align-items:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.3rem;font-weight:700;display:flex}.pin-box.filled{border-color:var(--box-border);background:#fff}.pin-box.active{border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px #2f6fed26}.pin-box.caret:after{content:"";background:var(--text);width:2px;height:22px;animation:1s step-end infinite blink}@keyframes blink{50%{opacity:0}}.pin.invalid .pin-box{border-color:var(--danger)}.pin-input{color:#0000;caret-color:#0000;cursor:text;background:0 0;border:0;outline:none;width:100%;height:100%;padding:0;font-size:16px;position:absolute;inset:0}.pin-input::selection{color:#0000;background:0 0}.field-error{color:var(--danger);margin:0;font-size:.9rem}.connected{flex-direction:column;align-items:center;width:100%;display:flex}.connected-title{text-align:center;margin:0 0 18px;font-size:1.2rem;font-weight:700}.connected-sub{color:var(--body);text-align:center;margin:0 0 32px}.accent{color:var(--primary)}.features{grid-template-columns:repeat(2,minmax(0,328px));justify-content:center;gap:40px;width:100%;display:grid}.feature-card{text-align:center;background:var(--card);min-height:312px;box-shadow:var(--glow);border-radius:24px;flex-direction:column;align-items:center;padding:64px 24px 48px;display:flex}.feature-card h3{margin:0 0 6px;font-size:1.05rem;font-weight:500}.feature-icon{margin-bottom:28px}.feature-desc{color:var(--muted);margin:0 0 32px;font-size:.92rem}.feature-card .warning{margin-bottom:16px}.feature-card.expanded{text-align:left;grid-column:1/-1;align-items:stretch;gap:16px;min-height:0;padding:28px 32px 32px}.feature-head{align-items:center;gap:16px;display:flex}.feature-head svg{width:56px;height:45px}.feature-head h3{margin:0}.button-row{flex-wrap:wrap;gap:10px;display:flex}.sync-video,.preview{object-fit:contain;background:#000;border-radius:12px;width:100%}.sync-video{max-height:60vh}.preview{max-height:260px}.warning{background:var(--warn-bg);color:var(--warn);border-radius:8px;margin:0;padding:10px 12px;font-size:.9rem}.status-grid{grid-template-columns:max-content 1fr;gap:10px 16px;margin:0;display:grid}.status-grid dt{color:var(--muted)}.status-grid dd{overflow-wrap:anywhere;margin:0}.status-grid dd.ok{color:var(--ok);font-weight:600}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9rem}.dot{background:var(--muted);border-radius:50%;width:10px;height:10px;margin-right:6px;display:inline-block}.dot.on{background:var(--ok)}.dot.pending{background:#f59e0b}@media (width<=720px){.features{grid-template-columns:minmax(0,420px);gap:24px}}@media (width<=480px){.topbar{padding:16px}.panel{padding:56px 16px 32px}.pin{gap:14px}.pin-group{gap:6px}.pin-box{width:38px;height:40px}.status-grid{grid-template-columns:1fr}}