:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--surface:#fff;--surface-strong:#f8f9fa;--surface-muted:#f4f7ff;--surface-border:#e5e4e7;--text-muted:#6b6375;--warning-bg:#fff3cd;--warning-border:#ffeaa7;--success:#22c55e;--danger:#dc3545;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--surface:#1f2028;--surface-strong:#23242d;--surface-muted:#ffffff0f;--surface-border:#2e303a;--text-muted:#94a3b8;--warning-bg:#2f2a1f;--warning-border:#5b5136;--success:#4ade80;--danger:#f87171;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}body{margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}.app{max-width:800px;margin:0 auto;padding:20px;font-family:Arial,sans-serif}.nav-bar{background-color:var(--surface-strong);border:1px solid var(--surface-border);border-radius:8px;justify-content:center;gap:10px;margin-bottom:20px;padding:10px;display:flex}.nav-bar button{background-color:var(--surface);border:1px solid var(--surface-border);cursor:pointer;color:var(--text);border-radius:4px;padding:8px 16px;font-size:14px}.nav-bar button.active{color:#fff;background-color:#007bff}.nav-bar button:hover:not(.active){background-color:var(--surface-muted)}.home-screen,.profile-create-screen,.drill-screen,.summary-screen,.dashboard-screen{text-align:center}button{cursor:pointer;margin:10px;padding:10px 20px;font-size:16px}button.danger{background-color:var(--danger);color:#fff;border:1px solid #a71d2a;border-radius:6px;font-weight:700;transition:background-color .2s,transform .1s,box-shadow .2s;box-shadow:0 4px 8px #00000014}button.danger:hover{background-color:#c82333;box-shadow:0 6px 12px #0000001f}button.danger:active{background-color:#b21f2d;transform:translateY(1px)}button.danger:focus-visible{outline-offset:2px;outline:3px solid #dc354559}.confirmation-dialog p{margin:0 0 15px}.drill-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.drill-header h1{margin:0}input{margin:10px;padding:8px;font-size:16px}.profile-header{justify-content:center;align-items:center;gap:20px;margin-bottom:20px;display:flex}.avatar-preview{border:3px solid var(--surface-border);background:var(--surface);border-radius:16px;justify-content:center;align-items:center;width:110px;height:110px;padding:15px;font-size:4rem;display:flex}.profile-form{text-align:left;gap:20px;display:grid}.difficulty-preview{background:var(--surface-strong);border:1px solid var(--surface-border);border-radius:14px;padding:16px}.difficulty-preview div{background:var(--surface);border:1px solid var(--surface-border);border-radius:10px;padding:10px}.field-label{margin-bottom:0;font-size:1rem;display:block}.avatar-selection{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px;display:flex}.avatar-selection button{border:1px solid var(--surface-border);background:var(--surface);width:56px;height:56px;color:var(--text);border-radius:10px;justify-content:center;align-items:center;margin:5px;font-size:2em;transition:background-color .2s,color .2s,border-color .2s;display:inline-flex}.avatar{margin:20px;font-size:3em}.home-screen .avatar{border:3px solid var(--surface-border);background:var(--surface);border-radius:18px;justify-content:center;align-items:center;width:140px;height:140px;margin:24px auto;font-size:4rem;display:flex}.problem{margin:20px;font-size:2em}.problem input{text-align:center;width:100px}.feedback{margin:20px;font-size:1.5em}.correct{color:green}.incorrect{color:red}.score-display{background:var(--surface-strong);border:1px solid var(--surface-border);border-radius:18px;flex-direction:column;align-items:center;gap:12px;min-width:260px;max-width:100%;margin:20px auto;padding:24px 20px;display:inline-flex}.score{font-size:3.5em;font-weight:700}.score-detail{color:var(--text-muted);text-align:center;max-width:320px;font-size:1.25em}.time-display{margin:10px 0;font-size:1.2em}.performance-message{margin:20px 0;font-size:1.2em}.celebration{background:linear-gradient(45deg,gold,#ffed4e);border:2px solid orange;border-radius:10px;margin:20px 0;padding:20px;animation:1s ease-in-out celebrate}@keyframes celebrate{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.celebration h2{color:#ff4500;margin:0}.celebration p{margin:10px 0 0;font-size:1.2em}.accuracy-table{margin:20px 0;overflow-x:auto}.accuracy-table table{border-collapse:collapse;background:var(--surface);width:100%;box-shadow:0 2px 4px var(--shadow);border-radius:8px;margin:0 auto;overflow:hidden}.accuracy-table th,.accuracy-table td{text-align:center;border-bottom:1px solid var(--surface-border);padding:12px}.accuracy-table th{background:var(--surface-strong);font-weight:700}.accuracy-table tr:last-child td{border-bottom:none}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:20px;max-width:600px;margin:20px auto;display:grid}.stat-item{background:var(--surface-strong);text-align:center;box-shadow:0 2px 4px var(--shadow);border-radius:8px;padding:20px}.stat-value{color:var(--text-h);font-size:2em;font-weight:700}.stat-label{color:var(--text-muted);margin-top:5px;font-size:.9em}.score-chart{flex-direction:column;gap:10px;max-width:600px;margin:20px auto;display:flex}.chart-bar{align-items:center;gap:10px;display:flex}.bar-label{text-align:right;min-width:100px;font-size:.9em}.bar-container{background:var(--surface-strong);border-radius:12px;flex:1;height:24px;overflow:hidden}.bar-fill{background:linear-gradient(90deg,#4caf50,#45a049);border-radius:12px;height:100%;transition:width .3s}.focus-area{text-align:center;background:linear-gradient(135deg,#fff3cd,#ffeaa7);border:2px solid #ffc107;border-radius:10px;margin:20px 0;padding:20px}.focus-area h2{color:#856404;margin:0 0 10px}.focus-area p{margin:0;font-size:1.1em}.achievements-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:15px;margin:20px 0;display:grid}.achievements-grid.recent{grid-template-columns:repeat(3,1fr)}.home-achievements-section{margin-top:30px}.home-achievements-grid{grid-template-columns:repeat(3,1fr);gap:15px;margin-top:20px;display:grid}.home-achievements-section .achievement-card{min-height:140px}.home-achievements-section .view-more-container{margin-top:20px}.view-more-container{text-align:center;margin:20px 0}.achievement-card{background:var(--surface-strong);border:1px solid var(--surface-border);text-align:center;box-shadow:0 2px 4px var(--shadow);border-radius:8px;padding:15px}.achievement-emoji{margin-bottom:10px;font-size:2em}.achievement-name{margin-bottom:5px;font-weight:700}.achievement-description{color:var(--text-muted);font-size:.9em}.settings-screen{text-align:left;max-width:600px;margin:0 auto;padding:20px}.settings-screen h1{text-align:center;margin-bottom:30px}.settings-section{background:var(--surface-strong);border:1px solid var(--surface-border);box-shadow:0 2px 4px var(--shadow);border-radius:12px;margin-bottom:24px;padding:24px}.settings-section h2{color:var(--text-h);margin-top:0;margin-bottom:20px;font-size:1.25em}.field-label{margin-bottom:12px;font-size:1rem;font-weight:500;display:block}.field-label input{width:100%;max-width:300px;margin-top:8px}.avatar-selection{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:12px;margin-bottom:16px;display:flex}.avatar-selection button{border:1px solid var(--surface-border);background:var(--surface);width:60px;height:60px;color:var(--text);border-radius:12px;justify-content:center;align-items:center;font-size:2em;transition:background-color .2s,color .2s,border-color .2s;display:inline-flex}.avatar-selection button:hover{background:var(--surface-muted)}.avatar-selection button.selected{color:#fff;background:#007bff;border-color:#007bff}.radio-group{flex-direction:column;gap:12px;margin-top:12px;display:flex}.radio-group label{background:var(--surface);border:1px solid var(--surface-border);cursor:pointer;border-radius:8px;align-items:center;gap:8px;padding:12px;transition:background-color .2s;display:flex}.radio-group label:hover{background:var(--surface-muted)}.radio-group input[type=radio]{margin:0}.operation-toggle-group{flex-direction:column;gap:12px;margin-top:12px;display:flex}.operation-toggle-group label{background:var(--surface);border:1px solid var(--surface-border);cursor:pointer;border-radius:8px;align-items:center;gap:8px;padding:12px;transition:background-color .2s;display:flex}.operation-toggle-group label:hover{background:var(--surface-muted)}.operation-toggle-group input[type=checkbox]{margin:0}.difficulty-grid{grid-template-columns:1fr;gap:16px;margin-top:12px;display:grid}.difficulty-row{background:var(--surface);border:1px solid var(--surface-border);border-radius:8px;align-items:center;gap:12px;padding:12px;display:flex}.difficulty-row span{text-align:center;min-width:40px;font-size:1.2em}.difficulty-row select{border:1px solid var(--surface-border);background:var(--surface);border-radius:6px;flex:1;padding:8px;font-size:1rem}.info{color:var(--text-muted);margin-top:8px;font-size:.9em;font-style:italic}.confirmation-dialog{background:var(--warning-bg);border:1px solid var(--warning-border);text-align:left;border-radius:8px;margin:16px 0;padding:20px}.confirmation-dialog p{margin:0 0 16px;line-height:1.5}.settings-section button{border:1px solid var(--surface-border);background:var(--surface);cursor:pointer;border-radius:8px;margin-top:16px;padding:12px 24px;font-size:1rem;transition:all .2s}.settings-section button.danger{background:var(--danger);color:#fff;border-color:#a71d2a;box-shadow:0 4px 8px #00000014}.settings-section button.danger:hover{background:#c82333}.settings-section button.danger:active{background:#b21f2d}.settings-section button:hover:not(.danger){background:var(--surface-muted)}.settings-section button:disabled{opacity:.6;cursor:not-allowed}