/* TypingTutor.Online Numpad Hub v17.8.73 */
.numpad-subnav{width:min(1280px,calc(100% - 28px));margin:10px auto 0;display:flex;align-items:center;gap:6px;padding:6px;border:1px solid var(--numeric-line,#dbe5f2);border-radius:13px;background:var(--numeric-card,#fff);box-shadow:0 6px 20px rgba(15,23,42,.04);overflow-x:auto;scrollbar-width:none}
.numpad-subnav::-webkit-scrollbar{display:none}.numpad-subnav a{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:34px;padding:7px 13px;border-radius:9px;color:var(--numeric-muted,#64748b);text-decoration:none;font-size:.76rem;font-weight:800;white-space:nowrap}.numpad-subnav a:hover{background:var(--numeric-panel,#f8fbff);color:var(--numeric-blue,#1769ff)}.numpad-subnav a[aria-current="page"]{background:var(--numeric-blue,#1769ff);color:#fff}
.numpad-page-shell{width:min(1280px,calc(100% - 32px));margin:0 auto;padding:16px 0 54px;color:var(--numeric-ink,#0f172a)}.numpad-page-shell .numeric-breadcrumb{margin-bottom:10px}.numpad-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:0 0 14px}.numpad-page-header h1{font-family:Poppins,Inter,sans-serif;font-size:clamp(1.55rem,2.8vw,2.15rem);line-height:1.15;margin:0 0 5px;color:var(--numeric-ink,#0f172a)}.numpad-page-header p{max-width:780px;margin:0;color:var(--numeric-muted,#64748b);font-size:.88rem;line-height:1.55}.numpad-page-badge{flex:0 0 auto;border:1px solid #bad2fa;background:#eef5ff;color:#1559d3;border-radius:999px;padding:7px 11px;font-size:.7rem;font-weight:850}
.numpad-work-card{background:var(--numeric-card,#fff);border:1px solid var(--numeric-line,#dbe5f2);border-radius:18px;box-shadow:0 10px 28px rgba(15,23,42,.06);padding:16px}.numpad-work-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(300px,.62fr);gap:12px;align-items:start}.numpad-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.numpad-metric{border:1px solid var(--numeric-line,#dbe5f2);border-radius:12px;background:var(--numeric-panel,#f8fbff);padding:9px;text-align:center}.numpad-metric span{display:block;font-size:.61rem;color:var(--numeric-muted,#64748b);font-weight:800;text-transform:uppercase;letter-spacing:.06em}.numpad-metric strong{display:block;margin-top:2px;font-size:1.2rem;color:var(--numeric-blue,#1769ff)}
.numpad-control-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}.numpad-control-group{min-width:0}.numpad-control-group>span{display:block;margin-bottom:5px;font-size:.64rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase;color:var(--numeric-muted,#64748b)}.numpad-pills{display:flex;gap:5px;flex-wrap:wrap}.numpad-pills button{min-height:33px;padding:6px 11px;border:1px solid var(--numeric-line,#dbe5f2);border-radius:9px;background:var(--numeric-panel,#f8fbff);color:var(--numeric-ink,#0f172a);font-size:.73rem;font-weight:800;cursor:pointer}.numpad-pills button.is-active{background:var(--numeric-blue,#1769ff);border-color:var(--numeric-blue,#1769ff);color:#fff}.numpad-sound-button{min-height:33px;padding:6px 10px;border:1px solid var(--numeric-line,#dbe5f2);border-radius:9px;background:var(--numeric-panel,#f8fbff);color:var(--numeric-muted,#64748b);font-size:.72rem;font-weight:800;cursor:pointer}
.numpad-target-box{margin-top:9px;border:1px solid #cadbf7;background:linear-gradient(180deg,#fbfdff,#f4f8ff);border-radius:15px;padding:11px 13px;outline:none}.numpad-target-top{display:flex;justify-content:space-between;gap:10px;font-size:.65rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em;color:var(--numeric-muted,#64748b)}.numpad-three-lines{display:grid;grid-template-rows:repeat(3,34px);align-content:center;min-height:110px;padding:3px 0;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;font-size:clamp(1.15rem,2.1vw,1.72rem);line-height:34px;letter-spacing:.045em;overflow:hidden}.numpad-line{display:flex;align-items:center;justify-content:center!important;width:100%;height:34px;white-space:pre;overflow:hidden}.numpad-char{flex:0 0 auto;border-radius:4px;padding:0 2px}.numpad-char.done{color:#0f9f6e;background:#e8fbf4}.numpad-char.current{color:#fff;background:var(--numeric-blue,#1769ff);box-shadow:0 2px 8px rgba(23,105,255,.22)}.numpad-char.error{color:#fff;background:#dc2626}.numpad-progress{height:5px;margin-top:4px;background:#dce7f8;border-radius:999px;overflow:hidden}.numpad-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#1769ff,#32c48d);border-radius:inherit;transition:width .12s linear}
.numpad-mini-keypad{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,50px);gap:6px;border:1px solid #c2cfde;background:#dce5f0;border-radius:15px;padding:9px}.numpad-mini-keypad button{border:1px solid #b8c5d5;border-bottom-width:3px;border-radius:8px;background:linear-gradient(180deg,#fff,#eef3f8);color:#132238;font:800 .95rem Inter,sans-serif;cursor:pointer}.numpad-mini-keypad button.is-expected{border-color:#1769ff;color:#1769ff;box-shadow:0 0 0 2px rgba(23,105,255,.14)}.numpad-mini-keypad button:active,.numpad-mini-keypad button.is-pressed{transform:translateY(2px);border-bottom-width:1px}.numpad-mini-keypad .plus{grid-column:4;grid-row:2/span 2}.numpad-mini-keypad .enter{grid-column:4;grid-row:4/span 2;font-size:.7rem}.numpad-mini-keypad .zero{grid-column:1/span 2}.numpad-mini-keypad .utility{font-size:.66rem}.numpad-mini-keypad .operator{background:linear-gradient(180deg,#eaf2ff,#d8e7ff);color:#0f58d1}
.numpad-result{margin-top:10px;border:1px solid var(--numeric-line,#dbe5f2);border-radius:14px;background:var(--numeric-panel,#f8fbff);padding:12px}.numpad-result[hidden]{display:none!important}.numpad-result h2{font-size:1rem;margin:0 0 4px}.numpad-result p{margin:0;color:var(--numeric-muted,#64748b);font-size:.78rem;line-height:1.5}.numpad-result-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.numpad-action{display:inline-flex;align-items:center;justify-content:center;min-height:35px;padding:7px 12px;border:1px solid var(--numeric-line,#dbe5f2);border-radius:9px;background:var(--numeric-panel,#f8fbff);color:var(--numeric-ink,#0f172a);text-decoration:none;font-size:.74rem;font-weight:850;cursor:pointer}.numpad-action.primary{background:var(--numeric-blue,#1769ff);border-color:var(--numeric-blue,#1769ff);color:#fff}.numpad-action.danger{color:#b91c1c;border-color:#fecaca;background:#fff7f7}
.numpad-section-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:13px 0}.numpad-section-card{display:block;border:1px solid var(--numeric-line,#dbe5f2);border-radius:15px;background:var(--numeric-card,#fff);padding:15px;text-decoration:none;color:var(--numeric-ink,#0f172a);box-shadow:0 8px 22px rgba(15,23,42,.04)}.numpad-section-card:hover{border-color:#9fc1f7;transform:translateY(-1px)}.numpad-section-card b{display:block;margin-bottom:4px;color:var(--numeric-blue,#1769ff);font-size:.9rem}.numpad-section-card span{display:block;color:var(--numeric-muted,#64748b);font-size:.76rem;line-height:1.45}
/* Games */
.numpad-game-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}.numpad-game-choice{border:1px solid var(--numeric-line,#dbe5f2);border-radius:13px;background:var(--numeric-panel,#f8fbff);padding:11px;text-align:left;cursor:pointer;color:var(--numeric-ink,#0f172a)}.numpad-game-choice b{display:block;font-size:.83rem;margin-bottom:3px}.numpad-game-choice small{color:var(--numeric-muted,#64748b);line-height:1.35}.numpad-game-choice.is-active{border-color:#1769ff;background:#eef5ff}.numpad-game-stage{position:relative;display:grid;place-items:center;min-height:236px;border:1px solid #cadbf7;border-radius:16px;background:radial-gradient(circle at 50% 30%,#f7fbff,#eef5ff);overflow:hidden}.numpad-game-target{font-family:Poppins,Inter,sans-serif;font-size:clamp(3rem,8vw,5.8rem);font-weight:850;color:#1769ff;text-shadow:0 8px 22px rgba(23,105,255,.12)}.numpad-game-sub{position:absolute;bottom:13px;left:13px;right:13px;text-align:center;color:var(--numeric-muted,#64748b);font-size:.74rem;font-weight:750}.numpad-game-stage.rain .numpad-game-target{position:absolute;top:10px;animation:numpadRain 2.4s linear forwards}.numpad-game-stage.rain .numpad-game-target.reset{animation:none}@keyframes numpadRain{from{transform:translateY(0)}to{transform:translateY(145px)}}.numpad-entry-record{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:clamp(2rem,5vw,3.5rem);font-weight:850;letter-spacing:.05em;color:#173d78}.numpad-entry-progress{margin-top:7px;font-family:ui-monospace,monospace;font-size:1rem;color:var(--numeric-muted,#64748b)}
/* Statistics */
.numpad-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}.numpad-stat-card{border:1px solid var(--numeric-line,#dbe5f2);border-radius:14px;background:var(--numeric-card,#fff);padding:13px;box-shadow:0 7px 20px rgba(15,23,42,.035)}.numpad-stat-card span{display:block;color:var(--numeric-muted,#64748b);font-size:.65rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}.numpad-stat-card strong{display:block;margin-top:4px;font-size:1.45rem;color:var(--numeric-blue,#1769ff)}.numpad-dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.numpad-dashboard-card{border:1px solid var(--numeric-line,#dbe5f2);border-radius:16px;background:var(--numeric-card,#fff);padding:15px}.numpad-dashboard-card h2{font-size:1rem;margin:0 0 10px}.numpad-course-progress{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.numpad-course-dot{border:1px solid var(--numeric-line,#dbe5f2);border-radius:10px;background:var(--numeric-panel,#f8fbff);padding:8px;text-align:center}.numpad-course-dot b{display:block;font-size:.8rem}.numpad-course-dot small{color:var(--numeric-muted,#64748b);font-size:.6rem}.numpad-course-dot.mastered{background:#eafaf3;border-color:#9bd9be;color:#087a52}.numpad-weak-list{display:flex;flex-wrap:wrap;gap:6px}.numpad-weak-chip{border:1px solid #f2c6c6;background:#fff7f7;color:#a52222;border-radius:999px;padding:6px 9px;font-size:.72rem;font-weight:850}.numpad-history{display:grid;gap:6px}.numpad-history-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;border-top:1px solid var(--numeric-line,#dbe5f2);padding:8px 0}.numpad-history-row:first-child{border-top:0}.numpad-history-icon{width:29px;height:29px;display:grid;place-items:center;border-radius:8px;background:#eef5ff;color:#1769ff;font-size:.7rem;font-weight:900}.numpad-history-row b{display:block;font-size:.76rem}.numpad-history-row small{display:block;color:var(--numeric-muted,#64748b);font-size:.64rem;margin-top:2px}.numpad-history-value{text-align:right;font-size:.7rem;font-weight:850;color:var(--numeric-muted,#64748b)}
/* Lesson result inside main tutor */
.numeric-lesson-result{margin-top:8px;border:1px solid var(--numeric-line);border-radius:12px;background:var(--numeric-panel);padding:10px 12px}.numeric-lesson-result[hidden]{display:none!important}.numeric-lesson-result.is-mastered{border-color:#9bd9be;background:#f1fbf6}.numeric-lesson-result h2{margin:0 0 3px;font-size:.9rem}.numeric-lesson-result p{margin:0;color:var(--numeric-muted);font-size:.72rem;line-height:1.45}.numeric-lesson-result .numpad-result-actions{margin-top:7px}
html[data-theme="dark"] .numpad-subnav,body.dark-mode .numpad-subnav,html[data-theme="dark"] .numpad-work-card,body.dark-mode .numpad-work-card,html[data-theme="dark"] .numpad-section-card,body.dark-mode .numpad-section-card,html[data-theme="dark"] .numpad-stat-card,body.dark-mode .numpad-stat-card,html[data-theme="dark"] .numpad-dashboard-card,body.dark-mode .numpad-dashboard-card{background:#111c2f;border-color:#2a3a53}html[data-theme="dark"] .numpad-target-box,body.dark-mode .numpad-target-box{background:linear-gradient(180deg,#0f1c30,#0c1728);border-color:#2c4161}html[data-theme="dark"] .numpad-game-stage,body.dark-mode .numpad-game-stage{background:radial-gradient(circle at 50% 30%,#14253f,#0d1729);border-color:#2c4161}html[data-theme="dark"] .numpad-game-choice,body.dark-mode .numpad-game-choice{background:#0d1729;border-color:#2a3a53}html[data-theme="dark"] .numpad-game-choice.is-active,body.dark-mode .numpad-game-choice.is-active{background:#132b51;border-color:#5f94eb}html[data-theme="dark"] .numpad-entry-record,body.dark-mode .numpad-entry-record{color:#b9d5ff}html[data-theme="dark"] .numpad-course-dot,body.dark-mode .numpad-course-dot{background:#0d1729;border-color:#2a3a53}html[data-theme="dark"] .numpad-course-dot.mastered,body.dark-mode .numpad-course-dot.mastered{background:#103728;border-color:#2b7958;color:#8be0bc}html[data-theme="dark"] .numpad-weak-chip,body.dark-mode .numpad-weak-chip{background:#391b24;border-color:#6d2c39;color:#ffb8c1}html[data-theme="dark"] .numpad-mini-keypad,body.dark-mode .numpad-mini-keypad{background:#101a2b;border-color:#2d3c53}
@media(prefers-color-scheme:dark){html[data-theme="system"] .numpad-subnav,html[data-theme="system"] .numpad-work-card,html[data-theme="system"] .numpad-section-card,html[data-theme="system"] .numpad-stat-card,html[data-theme="system"] .numpad-dashboard-card{background:#111c2f;border-color:#2a3a53}html[data-theme="system"] .numpad-target-box{background:linear-gradient(180deg,#0f1c30,#0c1728);border-color:#2c4161}}
@media(max-width:900px){.numpad-work-grid{grid-template-columns:1fr}.numpad-mini-keypad{max-width:520px;width:100%;justify-self:center}.numpad-stats-grid{grid-template-columns:repeat(2,1fr)}.numpad-dashboard-grid{grid-template-columns:1fr}.numpad-course-progress{grid-template-columns:repeat(5,1fr)}}
@media(max-width:650px){.numpad-subnav{width:calc(100% - 16px);margin-top:7px;padding:4px}.numpad-subnav a{min-height:31px;padding:6px 10px;font-size:.68rem}.numpad-page-shell{width:calc(100% - 18px);padding-top:10px}.numpad-page-header{display:block}.numpad-page-badge{display:inline-block;margin-top:8px}.numpad-work-card{padding:11px;border-radius:15px}.numpad-mini-grid{grid-template-columns:repeat(2,1fr)}.numpad-game-picker{grid-template-columns:1fr}.numpad-stats-grid{grid-template-columns:repeat(2,1fr)}.numpad-course-progress{grid-template-columns:repeat(2,1fr)}.numpad-section-grid{grid-template-columns:1fr}.numpad-three-lines{font-size:clamp(1rem,5vw,1.3rem)}.numpad-history-row{grid-template-columns:auto minmax(0,1fr)}.numpad-history-value{grid-column:2;text-align:left}.numpad-pills button{padding:6px 9px}}