:root{color-scheme:dark;font-family:-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif}html,body,#root{margin:0;height:100%;background:#0d0d0f;color:#f5f5f5;overflow:hidden}.stage{position:relative;height:100%;width:100%}.viewer{position:absolute;inset:0}.viewer-canvas{display:block;width:100%;height:100%}.viewer-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;color:#9a9a9f;pointer-events:none}.viewer-overlay--error{color:#ff8a65;flex-direction:column;gap:8px;pointer-events:auto}.viewer-overlay-detail{font-size:14px;color:#6a6a6f;max-width:70%;text-align:center}.dev-panel{position:absolute;left:16px;bottom:16px;background:#18181cd1;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:12px 14px;border-radius:12px;display:flex;flex-direction:column;gap:10px;border:1px solid rgba(255,255,255,.08);max-width:min(92vw,640px)}.dev-group{display:flex;flex-direction:column;gap:6px}.dev-label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#8a8a90}.dev-row{display:flex;flex-wrap:wrap;gap:6px}.dev-row button{background:#ffffff0f;color:#e8e8ec;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:6px 12px;font-size:13px;cursor:pointer;transition:background .12s ease,border-color .12s ease}.dev-row button:hover{background:#ffffff1a}.dev-row button.active{background:#ff6b35;border-color:#ff6b35;color:#0d0d0f;font-weight:600}.pair-screen{display:flex;flex-direction:column;height:100%;padding:clamp(24px,4vh,64px) clamp(32px,5vw,96px);gap:clamp(24px,4vh,48px);background:radial-gradient(ellipse at top,#1a1a1f,#0d0d0f 70%)}.pair-header{display:flex;align-items:center;justify-content:space-between}.pair-brand{font-size:clamp(18px,1.6vw,28px);letter-spacing:.04em;color:#ff6b35;text-transform:uppercase;font-weight:700}.pair-device{font-size:clamp(14px,1.2vw,20px);color:#9a9a9f;padding:6px 14px;border:1px solid rgba(255,255,255,.1);border-radius:999px}.pair-body{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:clamp(24px,4vh,56px);text-align:center}.pair-instruction{font-size:clamp(16px,1.8vw,28px);color:#c8c8cc;max-width:36ch;line-height:1.4}.pair-content{display:flex;align-items:center;justify-content:center;gap:clamp(32px,6vw,96px);flex-wrap:wrap}.pair-qr{background:#0d0d0f;padding:16px;border-radius:16px;border:1px solid rgba(255,255,255,.08);box-shadow:0 16px 48px #ff6b3514;width:clamp(220px,26vw,420px);aspect-ratio:1;display:flex;align-items:center;justify-content:center}.pair-qr img{width:100%;height:100%;display:block;border-radius:8px}.pair-qr-placeholder{width:100%;height:100%;background:#ffffff0a;border-radius:8px}.pair-code{display:flex;flex-direction:column;gap:12px;align-items:center}.pair-code-label{font-size:clamp(12px,1vw,16px);text-transform:uppercase;letter-spacing:.08em;color:#8a8a90}.pair-code-digits{display:flex;gap:clamp(8px,1vw,16px)}.pair-code-digit{min-width:clamp(40px,4.5vw,80px);padding:clamp(8px,1vw,16px) 0;border-radius:12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);font-size:clamp(32px,4vw,64px);font-weight:700;letter-spacing:.02em;font-variant-numeric:tabular-nums;color:#f5f5f5;text-align:center}.pair-status{display:flex;align-items:center;gap:10px;font-size:clamp(14px,1.2vw,18px);color:#c8c8cc;align-self:center}.pair-status-dot{width:10px;height:10px;border-radius:50%;background:#8a8a90}.pair-status--waiting .pair-status-dot{background:#ff6b35;animation:pulse 1.6s ease-in-out infinite}.pair-status--negotiating .pair-status-dot{background:#ffd166;animation:pulse 1s ease-in-out infinite}.pair-status--reconnecting .pair-status-dot{background:#ffd166;animation:pulse .8s ease-in-out infinite}.pair-status--error{color:#ff8a65}.pair-status--error .pair-status-dot{background:#ff8a65}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.viewer-screen{position:relative;height:100%;width:100%}.viewer-overlay-top{position:absolute;top:clamp(16px,3vh,48px);left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:12px;align-items:center;pointer-events:none;text-align:center}.viewer-exercise-name{background:#0d0d0fb3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:10px 20px;border-radius:999px;font-size:clamp(16px,1.6vw,24px);border:1px solid rgba(255,255,255,.08)}.viewer-set{color:#9a9a9f;font-weight:400}.viewer-phase{font-size:clamp(40px,6vw,96px);font-weight:700;color:#ff6b35;text-shadow:0 2px 20px rgba(255,107,53,.4)}.viewer-phase--countdown{font-size:clamp(80px,12vw,200px);color:#fff}.viewer-phase--rest{color:#6eb8ff;text-shadow:0 2px 20px rgba(110,184,255,.4)}.viewer-disconnected{position:absolute;inset:0;background:#0d0d0fcc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.viewer-disconnected-title{font-size:clamp(24px,2.4vw,36px);font-weight:700}.viewer-disconnected-sub{font-size:clamp(14px,1.2vw,20px);color:#9a9a9f}
