*{box-sizing:border-box;margin:0;padding:0}button,input,select,textarea{color:inherit;touch-action:manipulation}:root{--bg:#fafafa;--surface:#fff;--text:#1a1a1a;--text-muted:#666;--border:#e0e0e0;--primary:#2563eb;--primary-hover:#1d4ed8;--success:#16a34a;--danger:#dc2626;--radius:8px;--canvas-bg:#fff;--stroke-color:#333;--hover-bg:#f0f4ff;--active-bg:#e0ecff;--passed-bg:#f0fdf4;--retry-hover:#eee;--banner-pass-bg:#dcfce7;--banner-pass-text:#15803d;--banner-fail-bg:#fef2f2;--banner-fail-text:#b91c1c}[data-theme=dark]{--bg:#1a1a2e;--surface:#16213e;--text:#e0e0e0;--text-muted:#999;--border:#2a2a4a;--primary:#4f8cff;--primary-hover:#3a7bff;--success:#34d399;--danger:#f87171;--canvas-bg:#0f0f23;--stroke-color:#e0e0e0;--hover-bg:#4f8cff26;--active-bg:#4f8cff40;--passed-bg:#34d3991a;--retry-hover:#ffffff1a;--banner-pass-bg:#34d39926;--banner-pass-text:#6ee7b7;--banner-fail-bg:#f8717126;--banner-fail-text:#fca5a5}body{background:var(--bg);color:var(--text);height:100dvh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}#root{height:100dvh}.app{flex-direction:column;height:100%;display:flex}.menu-view{padding:2rem;overflow-y:auto}.menu-view>*{max-width:720px;margin-left:auto;margin-right:auto}.menu-header{text-align:center;margin-bottom:2rem}.menu-header h1{font-size:1.8rem;font-weight:700}.subtitle{color:var(--text-muted);margin-top:.25rem}.stage-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1.5rem;padding:1.25rem}.stage-card.locked{opacity:.5}.stage-header{align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.stage-header h2{flex:1;font-size:1.1rem}.lock-badge{background:var(--border);color:var(--text-muted);border-radius:999px;padding:.15rem .5rem;font-size:.75rem}.stage-progress{color:var(--text-muted);font-size:.85rem}.exercise-list{flex-wrap:wrap;gap:.5rem;display:flex}.exercise-btn{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;align-items:center;gap:.5rem;padding:.5rem .75rem;font-size:.9rem;transition:all .15s;display:flex}.exercise-btn:hover:not(:disabled){border-color:var(--primary);background:color-mix(in srgb, var(--primary) 8%, var(--surface))}.exercise-btn.passed{border-color:var(--success);background:var(--passed-bg)}.exercise-btn.locked{opacity:.4;cursor:not-allowed}.exercise-score{font-size:.8rem;font-weight:600}.exercise-score.pass{color:var(--success)}.exercise-score.fail{color:var(--danger)}.exercise-lock{font-size:.75rem}.exercise-view{position:relative}.canvas-container{flex:1;position:relative;overflow:hidden}.drawing-canvas{background:var(--canvas-bg);width:100%;height:100%;display:block}.canvas-controls{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius);border:1px solid var(--border);background:#ffffffe6;gap:.5rem;padding:.5rem;display:flex;position:absolute;bottom:1rem;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #00000014}.canvas-controls button{border:1px solid var(--border);background:var(--surface);cursor:pointer;width:36px;height:36px;color:var(--text);border-radius:6px;justify-content:center;align-items:center;transition:all .15s;display:flex}.canvas-controls button:hover:not(:disabled){background:var(--hover-bg);border-color:var(--primary)}.canvas-controls button:disabled{opacity:.3;cursor:not-allowed}.canvas-controls .submit-btn{background:var(--primary);color:#fff;border-color:var(--primary);width:36px;height:36px;padding:0}.canvas-controls .submit-btn:hover:not(:disabled){background:var(--primary-hover);border-color:var(--primary-hover)}.canvas-controls .submit-btn:disabled{opacity:.3;background:var(--primary);color:#fff}.exercise-header{background:var(--surface);border-bottom:1px solid var(--border);z-index:10;justify-content:space-between;align-items:center;padding:.75rem 1rem .75rem 3rem;display:flex}.exercise-info{flex:1;min-width:0}.exercise-stage{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-size:.75rem}.exercise-info h2{font-size:1rem;font-weight:600;line-height:1.2}.exercise-info p{color:var(--text-muted);font-size:.8rem}.exercise-actions{flex-shrink:0;align-items:center;gap:.5rem;display:flex}.timer{font-variant-numeric:tabular-nums;color:var(--text);background:var(--bg);border-radius:var(--radius);padding:.25rem .5rem;font-size:1.1rem;font-weight:700}.timer.urgent{color:var(--danger);animation:1s infinite pulse}@keyframes pulse{50%{opacity:.5}}.submit-btn,.retry-btn,.next-btn,.menu-btn{border-radius:var(--radius);cursor:pointer;border:none;padding:.4rem .85rem;font-size:.85rem;font-weight:500;transition:all .15s}.submit-btn{background:var(--primary);color:#fff}.submit-btn:hover:not(:disabled){background:var(--primary-hover)}.submit-btn:disabled{opacity:.4;cursor:not-allowed}.retry-btn{background:var(--bg);color:var(--text);border:1px solid var(--border)}.retry-btn:hover{background:var(--retry-hover)}.next-btn{background:var(--success);color:#fff}.next-btn:hover{opacity:.9}.menu-btn{color:var(--text-muted);border:1px solid var(--border);background:0 0}.menu-btn:hover{background:var(--bg)}.result-banner{z-index:10;justify-content:center;align-items:center;gap:.75rem;padding:.5rem;font-weight:600;display:flex}.result-banner.pass{background:var(--banner-pass-bg);color:var(--banner-pass-text)}.result-banner.fail{background:var(--banner-fail-bg);color:var(--banner-fail-text)}.result-view-toggle{gap:.25rem;margin-left:.75rem;display:flex}.view-btn{color:inherit;cursor:pointer;opacity:.6;background:0 0;border:1px solid #8080804d;border-radius:4px;padding:.15rem .5rem;font-size:.7rem;transition:all .15s}.view-btn.active{opacity:1;border-color:currentColor;font-weight:600}.view-btn:hover{opacity:.9}.result-accuracy{font-size:1.5rem}.result-label{font-size:.9rem}.study-overlay{color:#fff;border-radius:var(--radius);z-index:20;pointer-events:none;background:#000000b3;padding:1rem 2rem;font-size:1.1rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.sidebar-toggle{z-index:30;border:1px solid var(--border);background:var(--surface);cursor:pointer;width:36px;height:36px;color:var(--text);border-radius:6px;justify-content:center;align-items:center;display:flex;position:absolute;top:.65rem;left:.5rem}.sidebar-toggle:hover{background:var(--hover-bg)}.sidebar-overlay{z-index:40;background:#0000004d;position:fixed;inset:0}.sidebar{background:var(--surface);border-right:1px solid var(--border);width:280px;padding:1.25rem;position:absolute;top:0;bottom:0;left:0;overflow-y:auto}.sidebar h3{margin-bottom:1rem;font-size:1rem}.sidebar-stage{margin-bottom:1rem}.sidebar-stage h4{text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:.35rem;font-size:.8rem}.sidebar-exercise{cursor:pointer;width:100%;color:var(--text);text-align:left;background:0 0;border:none;border-radius:4px;align-items:center;padding:.35rem .5rem;font-size:.85rem;display:flex}.sidebar-exercise:hover:not(:disabled){background:var(--hover-bg)}.sidebar-exercise.active{background:var(--active-bg);font-weight:600}.sidebar-exercise.passed{color:var(--success)}.sidebar-exercise:disabled{opacity:.35;cursor:not-allowed}.sidebar-score{color:var(--text-muted);margin-left:auto;font-size:.8rem}.sidebar-home{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;width:100%;color:var(--text);margin-bottom:1rem;padding:.5rem;font-size:.85rem;display:block}.sidebar-home:hover{background:var(--bg)}.streak-badge{background:color-mix(in srgb, var(--success) 15%, var(--surface));color:var(--success);border-radius:999px;margin-top:.5rem;padding:.2rem .75rem;font-size:.8rem;font-weight:600;display:inline-block}.menu-actions{justify-content:center;gap:.5rem;margin-top:.75rem;display:flex}.theme-btn,.stats-btn{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;color:var(--text);padding:.4rem 1.2rem;font-size:.85rem;transition:all .15s}.theme-btn:hover,.stats-btn:hover{border-color:var(--primary);background:color-mix(in srgb, var(--primary) 8%, var(--surface))}.stats-view{padding:1.5rem 2rem;overflow-y:auto}.stats-view>*{max-width:720px;margin-left:auto;margin-right:auto}.stats-header{align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.stats-header h1{flex:1;font-size:1.5rem;font-weight:700}.reset-btn{color:#e53e3e;cursor:pointer;background:0 0;border:1px solid #e53e3e;border-radius:6px;padding:.4rem .8rem;font-size:.85rem;transition:background .15s,color .15s}.reset-btn:hover{color:#fff;background:#e53e3e}.stats-summary{gap:1rem;margin-bottom:2rem;display:flex}.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);text-align:center;flex:1;padding:1rem}.stat-value{color:var(--primary);font-size:1.4rem;font-weight:700;display:block}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;font-size:.75rem}.stats-stage-block{margin-bottom:1.5rem}.stats-stage-header{justify-content:space-between;align-items:baseline;margin-bottom:.35rem;display:flex}.stats-stage-header h3{font-size:.95rem}.stats-stage-header span{color:var(--text-muted);font-size:.8rem}.progress-bar{background:var(--border);border-radius:3px;height:6px;margin-bottom:.75rem;overflow:hidden}.progress-fill{background:var(--success);border-radius:3px;height:100%;transition:width .3s}.stats-exercise-list{flex-direction:column;gap:.35rem;display:flex}.stats-exercise-row{background:var(--surface);border-radius:4px;align-items:center;gap:.75rem;padding:.3rem .5rem;font-size:.85rem;display:flex}.stats-ex-name{flex:1;min-width:0}.stats-ex-attempts{color:var(--text-muted);font-size:.8rem}.stats-ex-best{color:var(--success);font-size:.8rem;font-weight:600}.sparkline{flex-shrink:0}.inline-trend{background:var(--surface);border-bottom:1px solid var(--border);z-index:10;justify-content:center;align-items:center;gap:.5rem;padding:.25rem .75rem;display:flex}.inline-trend-label{color:var(--text-muted);font-size:.75rem}@media (pointer:coarse){.canvas-controls button,.canvas-controls .submit-btn{width:48px;height:48px}.sidebar-toggle{width:44px;height:44px}.sidebar-exercise{min-height:44px;padding:.5rem .75rem;font-size:.95rem}.exercise-btn{min-height:44px;padding:.5rem .85rem;font-size:.9rem}.view-btn{min-height:36px;padding:.3rem .75rem;font-size:.8rem}.submit-btn,.retry-btn,.next-btn,.menu-btn{min-height:44px;padding:.5rem 1rem;font-size:.9rem}.sidebar-home{min-height:44px;padding:.65rem}.theme-btn,.stats-btn,.reset-btn{min-height:44px;padding:.5rem 1.2rem}}@media (width>=601px) and (width<=1024px){.menu-view{padding:1.5rem}.sidebar{width:300px}.exercise-header{padding:.75rem 1rem .75rem 3.25rem}.canvas-controls{gap:.5rem;padding:.6rem;bottom:1.25rem}.stats-summary{gap:.75rem}}@media (width<=600px){.menu-view{padding:1rem}.menu-header h1{font-size:1.3rem}.subtitle{font-size:.85rem}.stage-card{margin-bottom:1rem;padding:.75rem}.stage-header h2{font-size:.95rem}.exercise-list{gap:.35rem}.exercise-header{flex-direction:column;align-items:flex-start;gap:.35rem;padding:.5rem .75rem .5rem 3rem}.exercise-info p{display:none}.exercise-info h2{white-space:nowrap;text-overflow:ellipsis;max-width:calc(100vw - 3.5rem);font-size:.9rem;overflow:hidden}.exercise-stage{font-size:.65rem}.exercise-actions{flex-wrap:wrap;justify-content:flex-start;gap:.4rem;width:100%}.result-banner{flex-wrap:wrap;gap:.35rem;padding:.4rem .5rem}.result-accuracy{font-size:1.1rem}.result-label{font-size:.75rem}.result-view-toggle{justify-content:center;gap:.5rem;width:100%;margin-left:0}.canvas-controls{gap:.4rem;padding:.4rem;bottom:.5rem}.sidebar{width:min(85vw,300px);padding:1rem}.sidebar-toggle{top:.5rem;left:.4rem}.stats-view{padding:1rem}.stats-header{flex-wrap:wrap;gap:.5rem}.stats-header h1{font-size:1.2rem}.stats-summary{flex-direction:column;gap:.5rem}.stat-value{font-size:1.1rem}.stat-card{text-align:left;align-items:center;gap:.5rem;padding:.6rem;display:flex}.stat-card .stat-value{min-width:3rem}.stats-exercise-row{flex-wrap:wrap;gap:.35rem;font-size:.8rem}.sparkline{width:80px}.stats-stage-header{flex-direction:column;align-items:flex-start;gap:.15rem}.inline-trend{padding:.2rem .5rem}.study-overlay{text-align:center;width:calc(100% - 2rem);padding:.75rem 1.25rem;font-size:.9rem}}