.op-th-board{position:relative;container-type:inline-size}.op-th-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem;display:grid}.op-th-tile{letter-spacing:.01em;text-align:center;width:100%;min-height:3.75rem;font-weight:650;line-height:1.15;font-size:max(.625rem, min(1rem, calc(((100cqi - 1.5rem) / 4 - .75rem) / var(--chars,8) * 1.55)));color:var(--color-text);background:var(--color-surface-2);border:1px solid var(--color-border);cursor:pointer;-webkit-tap-highlight-color:transparent;overflow-wrap:break-word;-webkit-hyphens:manual;hyphens:manual;border-radius:14px;place-items:center;padding:.25rem .375rem;transition:transform .14s,background-color .16s,color .16s,box-shadow .16s;display:grid}@container (width>=30rem){.op-th-grid{gap:.625rem}.op-th-tile{border-radius:16px;min-height:4.75rem}}.op-th-tile:hover{border-color:var(--color-border-strong)}.op-th-tile:active{transform:scale(.95)}.op-th-tile:focus-visible{outline:2px solid var(--color-ring);outline-offset:2px}.op-th-tile-on{color:#fff;background:#2b2a7a;border-color:#2b2a7a;box-shadow:0 6px 16px -8px #2b2a7acc}.dark .op-th-tile-on{color:#1d1b3a;background:#e8e6ff;border-color:#e8e6ff}.op-th-shake{animation:.38s both op-th-shake}.op-th-shake-b{animation:.38s both op-th-shake-b}@keyframes op-th-shake{20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}@keyframes op-th-shake-b{20%,60%{transform:translate(-4px)}40%,80%{transform:translate(4px)}}.op-th-band{color:#1d1b3a;background:var(--band);animation:.42s cubic-bezier(.2,.9,.3,1.2) both op-th-in}.op-th-band[data-level="1"]{--band:#f6d27a}.op-th-band[data-level="2"]{--band:#9fdcae}.op-th-band[data-level="3"]{--band:#a9c8f5}.op-th-band[data-level="4"]{--band:#cdb5f3}.op-th-band[data-missed]{outline-offset:-4px;outline:2px dashed #1d1b3a73}.op-th-verse-toggle{background:#ffffff73}.op-th-verse-toggle:hover{background:#ffffffa6}@keyframes op-th-in{0%{opacity:0;transform:scale(.96)translateY(6px)}}.op-th-try{border-radius:999px;width:.625rem;height:.625rem;box-shadow:inset 0 0 0 1.5px #ffffff73}.op-th-try-on{background:#f6cf86;box-shadow:0 0 8px #f6cf8699}.op-th-result{animation:.36s both op-th-rise}@keyframes op-th-rise{0%{opacity:0;transform:translateY(8px)}}@media (prefers-reduced-motion:reduce){.op-th-band,.op-th-result,.op-th-shake,.op-th-shake-b{animation:none}.op-th-tile,.op-th-tile:active{transition:none;transform:none}}@media (prefers-contrast:more){.op-th-tile{border-width:2px;border-color:var(--color-text)}}