@layer components{.sn-stage{--stage:#07120d;--stage-2:#ffffff12;--stage-ink:var(--on-dark);--stage-dim:var(--on-dark-dim);--stage-faint:var(--on-dark-faint);--stage-line:#ffffff1f;min-width:0;color:var(--stage-ink);--sn-correct:var(--rn);--sn-present:#ffc83a;background:radial-gradient(90% 60% at 50% 0,#123526 0%,#07120d 70%);align-items:center;gap:8px;padding:12px 12px 8px}.sn-stage .kb{width:100%}.sn-stage .kb-key{color:var(--stage-ink);background:var(--stage-2);box-shadow:inset 0 0 0 1.5px var(--stage-line)}.sn-count{letter-spacing:.04em;color:var(--stage-dim);margin:4px 0 0;font-size:13px;font-weight:750}.sn-area{flex:1;place-items:center;width:100%;min-height:0;display:grid;container-type:size}.sn-board{width:min(100cqw - 8px, var(--n) * 62px, (100cqh - 30px) / 6 * var(--n) + (var(--n) - 1) * 5px);gap:6px;display:grid}.sn-row{grid-template-columns:repeat(var(--n), minmax(0, 1fr));gap:5px;display:grid;container-type:inline-size}.sn-row.is-shake{animation:sn-shake .38s var(--ease-out)}.sn-tile{--sn-bg:transparent;--sn-ink:var(--stage-ink);aspect-ratio:1;font-size:calc((100cqw - (var(--n) - 1) * 5px) / var(--n) * .52);text-transform:lowercase;color:var(--sn-ink);background:var(--sn-bg);box-shadow:inset 0 0 0 2px var(--stage-line);border-radius:8px;place-items:center;font-weight:750;line-height:1;display:grid;position:relative}.sn-tile.is-typed{box-shadow:inset 0 0 0 2px var(--stage-ink)}.sn-tile.is-correct{--sn-bg:var(--sn-correct);--sn-ink:#0d0d0f;box-shadow:none}.sn-tile.is-present{--sn-bg:var(--sn-present);--sn-ink:#0d0d0f;box-shadow:none}.sn-tile.is-absent{--sn-bg:color-mix(in oklab, var(--stage-ink) 16%, var(--stage-2));box-shadow:none}.sn-tile.is-present:after,.sn-mini-tile.is-present:after{content:"";aspect-ratio:1;opacity:.55;background:#0d0d0f;border-radius:50%;width:14%;position:absolute;top:10%;right:10%}.sn-tile.is-flip{animation:sn-flip .42s var(--ease-in-out) both;animation-delay:var(--d)}.sn-tile.is-win{animation:sn-flip .42s var(--ease-in-out) both, sn-hop .42s var(--ease-spring) both;animation-delay:var(--d), calc(var(--d) * .4)}.sn-keys{width:100%;padding-bottom:max(8px, env(safe-area-inset-bottom))}.sn-stage .kb-key.sn-k0{color:var(--stage-dim);background:color-mix(in oklab, var(--stage-ink) 10%, var(--stage));box-shadow:none}.sn-stage .kb-key.sn-k1{color:#0d0d0f;background:var(--sn-present);box-shadow:none}.sn-stage .kb-key.sn-k2{color:#0d0d0f;background:var(--sn-correct);box-shadow:none}.sn-reveal{text-align:center;flex-direction:column;align-items:center;gap:8px;width:min(100%,520px);padding:0 8px 12px;display:flex}.sn-who{letter-spacing:-.03em;overflow-wrap:anywhere;margin:0;font-size:18px;font-weight:750}.sn-job{color:var(--stage-dim);overflow-wrap:anywhere;margin:0;font-size:13px;line-height:1.35}.sn-reveal .sn-job{-webkit-line-clamp:4;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.sn-meta{color:var(--stage-dim);margin:-4px 0 0;font-size:13px;font-weight:600}.sn-career{width:min(100%,420px);max-height:var(--sn-career-h,30cqh);background:var(--stage-2);box-shadow:inset 0 0 0 1.5px var(--stage-line);border-radius:10px;overflow:auto}.sn-career table{border-collapse:collapse;text-align:left;font-variant-numeric:tabular-nums;width:100%;font-size:13px;line-height:1.25}.sn-career th{letter-spacing:.04em;color:var(--stage-dim);background:var(--stage-2);padding:6px 10px;font-size:11px;font-weight:750;position:sticky;top:0}.sn-career td{border-top:1px solid var(--stage-line);padding:4px 10px}.sn-career td:first-child{white-space:nowrap;color:var(--stage-dim)}.sn-career td:nth-child(2){width:100%;font-weight:650}.sn-career th:nth-child(3),.sn-career td:nth-child(3){text-align:right;white-space:nowrap}.sn-career tr.is-nation td{border-top:2px solid var(--stage-line)}.sn-mini .sn-career{--sn-career-h:none}.sn-toast{z-index:4;text-align:center;max-width:calc(100% - 24px);color:var(--stage);background:var(--stage-ink);border-radius:12px;padding:9px 14px;font-size:14px;font-weight:650;position:absolute;top:46px;left:50%;translate:-50%}.sn-wait{margin:auto;font-size:16px;font-weight:650}.sn-mini{text-align:center;justify-items:center;gap:10px;max-height:100%;display:grid;overflow:auto}.sn-mini-rows{gap:4px;display:grid}.sn-mini-row{grid-template-columns:repeat(var(--n), 22px);gap:3px;display:grid}.sn-mini-tile{height:22px;color:var(--stage-ink);background:color-mix(in oklab, var(--stage-ink) 16%, var(--stage));border-radius:4px;place-items:center;font-size:12px;font-weight:750;display:grid;position:relative}.sn-mini-tile.is-correct{color:#0d0d0f;background:var(--rn)}.sn-mini-tile.is-present{color:#0d0d0f;background:#ffc83a}@keyframes sn-flip{0%{transform:rotateX(0)}49%{transform:rotateX(90deg)}to{transform:rotateX(0)}}@keyframes sn-hop{40%{transform:translateY(-18%)}}@keyframes sn-shake{20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}@media (prefers-reduced-motion:reduce){.sn-tile.is-flip,.sn-tile.is-win,.sn-row.is-shake{animation:none}}}