:root{color-scheme:light;--accent:#2563EB;--accent-hover:#1D4ED8;--accent-soft:#EFF4FF;--bg:#F4F6FA;--surface:#FFFFFF;--surface-2:#F8FAFC;--text:#0F172A;--text-2:#475569;--muted:#64748B;--border:#E2E8F0;--border-strong:#CBD5E1;color:var(--text);background:var(--bg)}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--accent:#60A5FA;--accent-hover:#93C5FD;--accent-soft:#172554;--bg:#0B1120;--surface:#111827;--surface-2:#0F172A;--text:#E5E7EB;--text-2:#CBD5E1;--muted:#94A3B8;--border:#1F2937;--border-strong:#334155}}
body{background:var(--bg);color:var(--text)}header{background:var(--surface);border:1px solid var(--border);padding:16px 20px;border-radius:14px}.logo,a,.text,#state,summary{color:var(--accent)}.tag{color:var(--text-2);border-color:var(--border-strong)}.intro{background:linear-gradient(135deg,var(--accent-soft),var(--bg));max-width:none;border-radius:18px;padding:36px;margin:24px 0}h1{font-size:clamp(40px,7vw,64px)}p,label{color:var(--text-2)}small,.intro small,.device small,footer{color:var(--muted)}.card{background:var(--surface);border-color:var(--border);box-shadow:0 3px 14px #00000004}pre,input,select{background:var(--surface-2);color:var(--text);border:1px solid var(--border-strong)}button{background:var(--accent);color:var(--surface)}button:hover:not(:disabled){background:var(--accent-hover)}.secondary{background:var(--surface);color:var(--accent);border-color:var(--border-strong)}.secondary:hover:not(:disabled),.text:hover{background:var(--accent-soft)}.text{background:transparent}.peer-card,footer{border-color:var(--border)}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline-color:var(--accent)}.notice,.debug-banner{background:var(--accent-soft);color:var(--text-2);padding:14px;border-radius:10px}#notice,#login-error{color:var(--text)}#login-button{margin-top:20px}.inline-check{accent-color:var(--accent)}#simulated-position{color:var(--muted)}@media(max-width:720px){.intro{padding:24px}header{letter-spacing:1px;gap:8px}}

.brand{display:inline-flex;align-items:center;gap:12px;background:transparent;color:var(--text);padding:0;letter-spacing:2px;font:inherit;font-weight:750}.brand:hover:not(:disabled){background:transparent}.brand .logo{line-height:1}.brand{touch-action:manipulation}

.bracelet-details{margin:20px 0;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px}.bracelet-details>summary{color:var(--text);font-weight:600;cursor:pointer}.bracelet-details>summary span{display:block;margin:8px 0 0 18px;font-size:12px;font-weight:400;color:var(--muted)}.bracelet-details .grid{margin-top:16px}.bracelet-details .card{margin:0}.bracelet-details summary:focus-visible{outline:2px solid var(--accent);outline-offset:5px}

.system-loader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--bg);padding:28px}.loader-content{text-align:center;max-width:380px;width:100%;display:flex;flex-direction:column;align-items:center}.loader-mark{font-size:68px;color:var(--accent);line-height:1.2}.loader-content>strong{letter-spacing:5px;font-size:18px;margin-top:12px;color:var(--text)}.loader-content h2{font-size:23px;margin:24px 0 0;letter-spacing:-.5px}.loader-content p{min-height:48px;margin:12px 0 32px}.loader-content small{letter-spacing:1px;line-height:1.7}.loader-spinner{display:block;width:32px;height:32px;border:3px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;margin-top:36px;animation:guiar-spin 1s linear infinite}@keyframes guiar-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.loader-spinner{animation:none;border-color:var(--accent);opacity:.6}}

.connection-card{border:1px solid var(--border-strong);transition:background .2s,border-color .2s}.connection-heading{display:flex;gap:20px;align-items:center}.bracelet-symbol{width:80px;height:80px;flex-shrink:0;display:grid;place-items:center;border-radius:22px;background:var(--surface-2);color:var(--muted)}.bracelet-symbol svg{width:58px;height:58px}.connection-copy small{font-size:10px;letter-spacing:2px}.connection-copy h2{font-size:23px;letter-spacing:-.5px;margin:8px 0 12px}.connection-badge{display:inline-flex;align-items:center;gap:8px;border-radius:30px;background:var(--surface-2);padding:7px 11px;font-weight:600}#state.connection-badge{color:var(--text-2);font-size:12px}.connection-dot{width:8px;height:8px;border-radius:50%;background:var(--muted)}.connection-update{font-size:12px;margin:6px 0;color:var(--muted)}.connection-update:empty{display:none}.connection-card[data-connection="connected"]{background:var(--accent-soft);border-color:var(--accent)}[data-connection="connected"] .bracelet-symbol{background:var(--surface);color:var(--accent)}[data-connection="connected"] .connection-dot{background:var(--accent);box-shadow:0 0 0 4px var(--surface)}[data-connection="connected"] #state{background:var(--surface);color:var(--accent)}[data-connection="connected"] #compat{display:none}[data-connection="connecting"] .connection-dot{background:var(--accent);animation:connection-pulse 1s ease-in-out infinite}[data-connection="error"] .connection-dot{background:var(--text)}.connection-card #disconnect{flex:0 1 auto}.connection-card #connect{max-width:280px}.connection-card #connection-description{margin-bottom:4px}@keyframes connection-pulse{50%{opacity:.3}}@media(prefers-reduced-motion:reduce){[data-connection="connecting"] .connection-dot{animation:none}.connection-card{transition:none}}@media(max-width:480px){.connection-heading{gap:14px}.bracelet-symbol{width:64px;height:64px;border-radius:18px}.bracelet-symbol svg{width:48px;height:48px}.connection-copy h2{font-size:20px}.connection-card #connect{max-width:none}}

.virtual-controls{margin:16px 0;padding:14px;border:1px dashed var(--accent);border-radius:10px}.virtual-controls p{font-size:12px;margin-bottom:0}[data-connection="simulated"]{border-color:var(--accent);background:var(--accent-soft)}[data-connection="simulated"] .bracelet-symbol{color:var(--accent)}[data-connection="simulated"] .connection-dot{background:var(--accent)}