.digits{box-sizing:border-box;min-height:100%;color:var(--color-text);place-items:center;padding:20px;font-family:DM Mono,monospace;display:grid}.digits-card{box-sizing:border-box;background:#ffffff06;border:1px solid #ffffff1a;border-radius:18px;width:min(900px,100%);padding:28px 34px}.digits-header,.result{text-align:center}.digits-mark{letter-spacing:.18em;font-size:28px;font-weight:800}.digits-mark.small{text-align:left;font-size:18px}.digits-header p{color:#8b8f98;margin:6px 0 28px;font-size:11px}.digits-level{text-align:center;border-block:1px solid #ffffff12;grid-template-columns:48px 1fr 48px;align-items:center;gap:12px;padding:14px 0;display:grid}.digits-level button,.digits-navigation button{color:#fff;cursor:pointer;height:42px;font:inherit;background:0 0;border:1px solid #ffffff1a;border-radius:8px;font-size:18px}.digits-level button:disabled,.digits-navigation button:disabled{opacity:.2;cursor:not-allowed}.digits-level span,.digits-level small{color:#777c86;font-size:9px;display:block}.digits-level strong{margin:2px 0;font-size:20px;display:block}.digits-config{margin:24px 0 10px;display:block}.digits-config>span{color:#777c86;letter-spacing:.12em;margin-bottom:8px;font-size:9px;display:block}.digits-config input{box-sizing:border-box;color:#fff;width:100%;height:52px;font:inherit;background:#ffffff09;border:1px solid #ffffff1a;border-radius:9px;outline:none;padding:0 16px;font-size:16px}.digits-config input:focus{border-color:#fff6}.digits-config small{color:#555963;margin-top:7px;font-size:9px;display:block}.digits-preview{color:#777c86;white-space:nowrap;border:1px solid #ffffff0f;border-radius:8px;margin-bottom:18px;padding:12px;font-size:11px;overflow:hidden}.digits-primary{color:#111;cursor:pointer;width:100%;min-height:42px;font:inherit;letter-spacing:.06em;background:#f2f2f2;border:0;border-radius:9px;padding:12px 16px;font-weight:700}.digits-primary:hover:not(:disabled){background:#fff}.digits-primary:disabled{opacity:.25;cursor:not-allowed}.digits-reset{color:#777c86;cursor:pointer;font:inherit;background:0 0;border:0;margin:16px auto 0;font-size:9px;display:block}.digits-reset:hover{color:#fff}.digits-game-head{justify-content:space-between;align-items:flex-end;display:flex}.digits-game-head span{color:#777c86;margin-top:4px;font-size:9px;display:block}.digits-game-head strong{font-size:16px;font-weight:400}.digits-page{color:#555963;text-align:center;margin-top:18px;font-size:9px}.digits-chunks{justify-content:center;align-items:center;gap:18px;min-height:250px;display:flex}.digits-chunks span{background:#ffffff09;border:1px solid #ffffff1a;border-radius:8px;padding:14px 18px;font-size:32px}.digits-navigation{grid-template-columns:48px 1fr 48px;align-items:center;gap:10px;display:grid}.digits-navigation span{color:#555963;text-align:center;font-size:9px}.recall{width:min(1100px,100%)}.digits-grid,.result-grid{grid-template-columns:repeat(20,minmax(0,1fr));gap:4px;margin:24px 0 18px;display:grid}.digits-grid button,.result-grid span{aspect-ratio:1;box-sizing:border-box;color:#3f434b;min-width:0;font:inherit;background:0 0;border:1px solid #ffffff12;border-radius:4px;place-items:center;font-size:13px;display:grid}.digits-grid button{cursor:text}.digits-grid button:hover{background:#ffffff09}.digits-grid button.active{color:#fff;background:#ffffff09;border-color:#fff6}.digits-grid button:focus{outline:none}.digits-keypad{grid-template-columns:repeat(10,1fr);gap:6px;margin-bottom:8px;display:grid}.digits-keypad button{color:#fff;cursor:pointer;min-height:40px;font:inherit;background:#ffffff09;border:1px solid #ffffff1a;border-radius:8px}.digits-keypad button:hover{background:#ffffff14}.digits-focus{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:360px;display:flex}.digits-focus span{color:#777c86;letter-spacing:.16em;font-size:10px}.digits-focus strong{margin:16px 0 12px;font-size:clamp(72px,12vw,110px);font-weight:800;line-height:.8}.digits-focus small{color:#555963;letter-spacing:.08em;font-size:10px}.result{width:min(1100px,100%)}.result-top{justify-content:space-between;align-items:center;gap:24px;margin-top:10px;display:flex}.result-top .digits-primary{width:auto;min-width:130px;margin:0}.result-score{letter-spacing:-.035em;align-items:baseline;margin-top:0;font-size:clamp(48px,6vw,64px);font-weight:700;line-height:.95;display:flex}.result-score span{color:#555963;letter-spacing:-.01em;margin-left:5px;font-size:23px;font-weight:400}.result-message{color:#777c86;margin:8px 0 14px;font-size:10px}.comparison{text-align:left;grid-template-columns:1fr 1fr;gap:20px;margin:0;display:grid}.comparison-column{min-width:0}.comparison small{color:#555963;letter-spacing:.1em;margin:0 0 6px;font-size:8px;display:block}.result-grid{grid-template-columns:repeat(20,minmax(0,1fr));gap:3px;margin:0;display:grid}.result-grid span{aspect-ratio:1;color:#777c86;justify-content:center;align-items:center;min-width:0;font-size:14px;display:flex}.result-grid .correct{color:#22c55e;background:#22c55e12;border-color:#22c55e8c}.result-grid .wrong{color:#ef4444;background:#ef444412;border-color:#ef4444a6}.result-grid .missing{color:#3f434b}@media (width<=700px){.digits{padding:10px}.digits-card{border-radius:14px;padding:20px 16px}.digits-chunks{gap:8px;min-height:220px}.digits-chunks span{padding:12px 10px;font-size:24px}.digits-grid,.result-grid{grid-template-columns:repeat(10,minmax(0,1fr))}.result-top{align-items:flex-end}.comparison{grid-template-columns:1fr;gap:14px}.digits-keypad{grid-template-columns:repeat(5,1fr)}.digits-keypad button{min-height:44px}}.result-stats{border-block:1px solid #ffffff12;grid-template-columns:repeat(4,1fr);margin:20px 0;display:grid}.result-stats>div{text-align:center;border-right:1px solid #ffffff12;padding:14px 10px}.result-stats>div:last-child{border-right:0}.result-stats small{color:#555963;letter-spacing:.1em;margin-bottom:5px;font-size:8px;display:block}.result-stats strong{color:#e5e7eb;font-variant-numeric:tabular-nums;font-size:15px;font-weight:500;display:block}@media (width<=700px){.result-stats>div{padding:12px 4px}.result-stats strong{font-size:12px}}.digits-save{color:#777c86;font:inherit;cursor:pointer;text-underline-offset:3px;background:0 0;border:0;margin:10px auto 0;padding:0;font-size:11px;text-decoration:underline;display:block}.digits-save:hover{color:#c4c7ce}
