:root{color-scheme:dark;--surround: #0b0b0c;--on-surround: #f2f2f3;--muted: #8a8a90;--cell: #17171a;--cell-border: #34343a;--cell-active: #6f6f7a;--mask: #1f1f1f;--mask-selected: #b3261e;--mask-glow: 239, 83, 80;--error: #ff6b6b;--live: #3ddc84;--reconnecting: #ffb02e;--connecting: #8a8a90;--panel: rgba(17, 17, 20, .92);--panel-border: #34343a;--correct: #3ddc84;--wrong: #ff6b6b;--accent: #8ab4ff;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;touch-action:manipulation}.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(8px,2vw,28px)}.join__cell{display:flex;align-items:center;justify-content:center;width:clamp(56px,11vw,148px);height:clamp(76px,15vw,196px);border:2px solid var(--cell-border);border-radius:16px;background:var(--cell);font-size:clamp(40px,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}.join__resume{padding:12px 24px;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}.join__resume:hover,.join__resume:focus-visible{border-color:var(--cell-active)}.join__resume:disabled{opacity:.6;cursor:default}@media(max-width:480px){.join{padding:16px;gap:20px}}.join-card{position:fixed;left:max(16px,env(safe-area-inset-left));bottom:max(16px,env(safe-area-inset-bottom));z-index:5;display:flex;align-items:center;gap:clamp(12px,1.4vw,24px);padding:clamp(10px,1.1vw,18px);border:1px solid var(--panel-border);border-radius:16px;background:var(--panel);pointer-events:none}.join-card__qr{width:clamp(104px,12vw,220px);aspect-ratio:1;border-radius:8px;overflow:hidden;background:#fff}.join-card__qr svg{display:block;width:100%;height:100%}.join-card__text{display:flex;flex-direction:column;gap:4px}.join-card__host{margin:0;color:var(--muted);font-size:clamp(16px,1.6vw,28px)}.join-card__code{margin:0;font-size:clamp(22px,2.4vw,40px);font-weight:600}.join-card__digits{font-size:1.6em;font-weight:700;letter-spacing:.08em;font-variant-numeric:tabular-nums}.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;height:100dvh;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{background:var(--mask-selected);outline:2px solid rgba(var(--mask-glow),.9);outline-offset:-1px;animation:mask-pulse 1.6s ease-in-out infinite}.stage__ink{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.stage__ink path{fill:none;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px currentColor)}.stage__badge{--badge-w: clamp(150px, 15vw, 300px);--badge-h: clamp(30px, 3.2vw, 56px);position:absolute;z-index:2;left:max(0px,min(var(--qx),calc(100% - var(--badge-w))));top:max(0px,calc(var(--qy) - var(--badge-h) - 6px));width:var(--badge-w);height:var(--badge-h);display:flex;align-items:center;justify-content:center;padding:0 12px;border:2px solid rgba(var(--mask-glow),.9);border-radius:999px;background:var(--panel);color:var(--on-surround);font-size:calc(var(--badge-h) * .48);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;pointer-events:none}.stage__badge--closed{border-color:var(--cell-border);color:var(--muted)}.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:rgba(var(--mask-glow),.4);box-shadow:0 0 rgba(var(--mask-glow),0)}50%{outline-color:rgba(var(--mask-glow),1);box-shadow:0 0 18px 4px rgba(var(--mask-glow),.6)}}.fs-toggle{position:fixed;top:16px;right:16px;z-index:10;display:grid;place-items:center;width:56px;height:56px;padding:0;border:1px solid var(--cell-border);border-radius:12px;background:#0b0b0cb3;color:var(--on-surround);cursor:pointer;transition:opacity .2s ease}.fs-toggle[data-visible=false]{opacity:0;pointer-events:none}.fs-toggle:focus,.fs-toggle:focus-visible{opacity:1!important;pointer-events:auto;outline:3px solid var(--cell-active);outline-offset:2px}.fs-toggle:hover{border-color:var(--cell-active)}.fs-hint{position:fixed;top:84px;right:16px;z-index:10;margin:0;padding:8px 14px;border:1px solid var(--error);border-radius:8px;background:#0b0b0cd9;color:var(--error);font-size:14px}.results{position:fixed;top:0;right:0;bottom:0;z-index:4;width:28vw;min-width:260px;display:flex;flex-direction:column;gap:clamp(12px,1.6vh,24px);padding:clamp(16px,2.4vw,40px);border-left:1px solid var(--panel-border);background:var(--panel);overflow:hidden;pointer-events:none}.results__title{margin:0;color:var(--muted);font-size:clamp(18px,1.8vw,32px);font-weight:600}.results__score{display:flex;flex-direction:column;gap:8px}.results__bar{height:clamp(14px,1.6vh,24px);border-radius:999px;background:var(--cell);overflow:hidden}.results__fill{height:100%;border-radius:inherit;background:var(--correct)}.results__pct{margin:0;font-size:clamp(30px,3.4vw,64px);font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}.results__answered{margin:0;color:var(--muted);font-size:clamp(16px,1.5vw,26px)}.results__groups{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:clamp(6px,1vh,12px);min-height:0}.results__group{display:grid;grid-template-columns:1.4em 1fr auto;align-items:baseline;gap:10px;font-size:clamp(16px,1.5vw,28px)}.results__mark{color:var(--correct);font-weight:700}.results__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results__group--correct .results__text{font-weight:600}.results__count{color:var(--muted);font-variant-numeric:tabular-nums}.results__more{margin:0;color:var(--muted);font-size:clamp(14px,1.3vw,22px)}.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)}.student{position:fixed;top:0;right:0;bottom:0;left:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.student__inner{min-height:100%;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:480px;margin:0 auto;padding:max(24px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom))}.student__panel{display:flex;flex-direction:column;gap:16px}.student__panel--center{align-items:center;text-align:center}.student__eyebrow{margin:0;color:var(--muted);font-size:15px;letter-spacing:.02em}.student__title{margin:0;font-size:28px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}.student__lead{margin:0;color:var(--muted);font-size:20px}.student__form{display:flex;flex-direction:column;gap:12px}.student__field{width:100%;padding:14px 16px;border:2px solid var(--cell-border);border-radius:12px;background:var(--cell);color:var(--on-surround);font:inherit;font-size:18px;outline:none}.student__field:focus{border-color:var(--cell-active)}.student__button{min-height:48px;padding:12px 24px;border:0;border-radius:12px;background:var(--on-surround);color:var(--surround);font:inherit;font-size:18px;font-weight:600;cursor:pointer}.student__button:disabled{opacity:.45;cursor:default}.student__link{align-self:center;padding:8px;border:0;background:none;color:var(--muted);font:inherit;font-size:15px;text-decoration:underline;cursor:pointer}.student__error{margin:0;min-height:1.4em;color:var(--error);font-size:16px}.student__error--empty{visibility:hidden}.student__note{margin:0;color:var(--correct);font-size:16px}.student__answer{overflow-wrap:anywhere}.student__mark{margin:0;font-size:96px;font-weight:700;line-height:1}.student__mark--correct{color:var(--correct)}.student__mark--wrong{color:var(--wrong)}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.stage__ink path{filter:drop-shadow(0 0 6px currentColor)}.stage__mask--selected{animation:none!important;background:var(--mask-selected);outline-color:rgba(var(--mask-glow),1);box-shadow:0 0 12px 3px rgba(var(--mask-glow),.5)}}