.number-fill-page { --number-practice-accent: var(--color-secondary); --number-practice-support: var(--color-primary); }
.number-fill__masked-wrap { max-width: 48rem; margin: 2.5rem auto 0; border: 1px solid color-mix(in oklab, var(--number-practice-support) 25%, var(--number-practice-line)); border-radius: var(--radius-box); padding: 1.35rem; background: color-mix(in oklab, var(--number-practice-support) 6%, var(--color-base-100)); text-align: center; }
.number-fill__masked-label { color: color-mix(in oklab, var(--number-practice-ink) 56%, transparent); font-size: .8rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.number-fill__masked-number { margin-top: .7rem; color: var(--number-practice-ink); font-size: clamp(3.5rem, 12vw, 7rem); font-weight: 950; letter-spacing: .05em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.number-fill__blank { display: inline-flex; min-width: .85em; align-items: center; justify-content: center; border-bottom: .12em solid var(--number-practice-accent); color: var(--number-practice-accent); }
.number-fill__place-note { margin-top: .8rem; color: color-mix(in oklab, var(--number-practice-ink) 62%, transparent); }
.number-fill__place-note strong { color: var(--number-practice-accent); }
.number-fill__retry-note { color: var(--color-error); font-weight: 700; }
.number-fill__fallback-copy { max-width: 38rem; margin: .8rem auto; color: color-mix(in oklab, var(--number-practice-ink) 58%, transparent); font-size: .9rem; }
@media (max-width: 520px) { .number-fill__masked-wrap { padding: 1rem .7rem; } .number-fill__masked-number { font-size: clamp(2.8rem, 16vw, 5rem); } }