:root{color-scheme:dark;--surround: #0b0b0c;--on-surround: #f2f2f3;--muted: #8a8a90;--cell: #17171a;--cell-border: #34343a;--cell-active: #6f6f7a;--mask: #1f1f1f;--error: #ff6b6b;--live: #3ddc84;--reconnecting: #ffb02e;--connecting: #8a8a90;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--surround);color:var(--on-surround);overflow:hidden}.join{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px;text-align:center}.join__title{margin:0;font-size:clamp(24px,3vw,40px);font-weight:600;letter-spacing:.01em}.join__hint{margin:0;color:var(--muted);font-size:clamp(16px,1.8vw,24px)}.join__form{position:relative;cursor:text}.join__cells{display:flex;gap:clamp(12px,2vw,28px)}.join__cell{display:flex;align-items:center;justify-content:center;width:clamp(72px,11vw,148px);height:clamp(96px,15vw,196px);border:2px solid var(--cell-border);border-radius:16px;background:var(--cell);font-size:clamp(52px,9vw,120px);font-weight:700;line-height:1;letter-spacing:0;font-variant-numeric:tabular-nums}.join__cell--active{border-color:var(--cell-active)}.join__input{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;padding:0;border:0;background:transparent;color:transparent;caret-color:transparent;font-size:16px;text-align:center;outline:none}.join__error{margin:0;min-height:1.4em;color:var(--error);font-size:clamp(18px,2vw,26px)}.join__error--empty{visibility:hidden}.waiting{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px;text-align:center}.waiting__message{margin:0;font-size:clamp(28px,4vw,56px);font-weight:600}.waiting__status{display:flex;align-items:center;gap:10px;margin:0;color:var(--muted);font-size:clamp(15px,1.6vw,20px)}.dot{width:12px;height:12px;border-radius:50%;background:var(--connecting)}.waiting__status--live .dot{background:var(--live)}.waiting__status--reconnecting .dot{background:var(--reconnecting)}.stage{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;background:var(--surround)}.stage__frame{position:relative;overflow:hidden}.stage__image{display:block;width:100%;height:100%;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}.stage__mask{position:absolute;background:var(--mask)}.stage__mask--selected{outline:2px solid rgba(242,242,243,.85);outline-offset:-1px;animation:mask-pulse 1.6s ease-in-out infinite}.stage__loading{margin:0;color:var(--muted);font-size:clamp(16px,1.8vw,22px)}.stage__notice{position:fixed;right:16px;bottom:16px;margin:0;padding:8px 14px;border:1px solid var(--error);border-radius:8px;background:#0b0b0cd9;color:var(--error);font-size:14px}@keyframes mask-pulse{0%,to{outline-color:#f2f2f359;box-shadow:0 0 #f2f2f300}50%{outline-color:#f2f2f3;box-shadow:0 0 18px 4px #f2f2f38c}}.ended{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px;text-align:center}.ended__message{margin:0;font-size:clamp(28px,4vw,56px);font-weight:600}.ended__again{padding:14px 28px;border:2px solid var(--cell-border);border-radius:12px;background:var(--cell);color:var(--on-surround);font:inherit;font-size:clamp(16px,1.6vw,20px);cursor:pointer}.ended__again:hover,.ended__again:focus-visible{border-color:var(--cell-active)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.stage__mask--selected{animation:none!important;outline-color:#f2f2f3}}