:root{--bg:#f5f5f0;--bg-warm:#eeeee8;--surface:#fff;--border:#d4d4cc;--border-light:#e8e8e2;--text:#1a1a1a;--text-secondary:#666660;--text-tertiary:#999990;--guide-color:#c8c8c0;--guide-light:#e0e0d8;--stroke-color:#2a2a2a;--dot-pulse:#888880;--success:#444440;--shadow-sm:0 1px 3px #0000000f;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 8px 24px #0000001a;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--font-ui:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--ease-smooth:cubic-bezier(.4, 0, .2, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;font-family:var(--font-ui);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:none;-webkit-user-select:none;user-select:none;overflow:hidden}#app{width:100%;height:100%;position:relative}.screen{opacity:0;transition:opacity .3s var(--ease-smooth);pointer-events:none;flex-direction:column;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.screen.active{opacity:1;pointer-events:auto}.profile-screen{justify-content:center;align-items:center;gap:48px;padding:48px 32px}.profile-screen h1{letter-spacing:-.02em;color:var(--text);font-size:28px;font-weight:300}.profile-grid{flex-wrap:wrap;justify-content:center;gap:24px;max-width:600px;display:flex}.profile-card{background:var(--surface);border:2px solid var(--border-light);border-radius:var(--radius-md);cursor:pointer;width:120px;height:140px;transition:transform .2s var(--ease-spring), border-color .2s;box-shadow:var(--shadow-sm);flex-direction:column;justify-content:center;align-items:center;gap:12px;display:flex}.profile-card:active{transform:scale(.95)}.profile-card .avatar{font-size:40px;line-height:1}.profile-card .name{color:var(--text-secondary);text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:100px;font-size:14px;font-weight:500;overflow:hidden}.profile-card.add-new{border-style:dashed;border-color:var(--border)}.profile-card.add-new .avatar{color:var(--text-tertiary);font-size:32px}.modal-overlay{z-index:100;opacity:0;pointer-events:none;background:#0000004d;justify-content:center;align-items:center;transition:opacity .2s;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.modal-overlay.visible{opacity:1;pointer-events:auto}.modal{background:var(--surface);border-radius:var(--radius-lg);width:90%;max-width:400px;box-shadow:var(--shadow-lg);transition:transform .3s var(--ease-spring);padding:36px;transform:scale(.95)}.modal-overlay.visible .modal{transform:scale(1)}.modal h2{text-align:center;margin-bottom:24px;font-size:20px;font-weight:500}.modal-input{border:2px solid var(--border);border-radius:var(--radius-sm);width:100%;font-size:18px;font-family:var(--font-ui);background:var(--bg);color:var(--text);outline:none;margin-bottom:20px;padding:12px 16px;transition:border-color .2s}.modal-input:focus{border-color:var(--text-secondary)}.avatar-picker{flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:24px;display:flex}.avatar-option{cursor:pointer;width:48px;height:48px;transition:border-color .2s, transform .2s var(--ease-spring);background:var(--bg);border:2px solid #0000;border-radius:50%;justify-content:center;align-items:center;font-size:28px;display:flex}.avatar-option.selected{border-color:var(--text);transform:scale(1.1)}.modal-actions{justify-content:center;gap:12px;display:flex}.btn{border:2px solid var(--border);border-radius:var(--radius-sm);font-size:16px;font-family:var(--font-ui);cursor:pointer;background:var(--surface);color:var(--text);transition:background .15s, transform .15s var(--ease-spring);padding:12px 28px;font-weight:500}.btn:active{transform:scale(.97)}.btn-primary{background:var(--text);color:var(--surface);border-color:var(--text)}.phase-screen{gap:24px;padding:32px}.phase-screen-header{justify-content:space-between;align-items:center;display:flex}.phase-screen-header h1{font-size:22px;font-weight:400}.user-badge{background:var(--surface);border:1px solid var(--border-light);cursor:pointer;border-radius:100px;align-items:center;gap:8px;padding:6px 14px;font-size:14px;display:flex}.user-badge .avatar{font-size:20px}.phase-list{flex-direction:column;flex:1;gap:12px;padding-bottom:24px;display:flex;overflow-y:auto}.phase-card{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-md);cursor:pointer;transition:transform .15s var(--ease-spring), box-shadow .15s;box-shadow:var(--shadow-sm);align-items:center;gap:20px;padding:20px 24px;display:flex}.phase-card:active{transform:scale(.98)}.phase-card.locked{opacity:.45;pointer-events:none}.phase-card .phase-icon{border-radius:var(--radius-sm);background:var(--bg);border:1px solid var(--border-light);flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:22px;display:flex}.phase-card .phase-info{flex:1;min-width:0}.phase-card .phase-title{margin-bottom:4px;font-size:16px;font-weight:500}.phase-card .phase-desc{color:var(--text-secondary);font-size:13px}.phase-progress{background:var(--bg);border-radius:2px;width:100%;height:4px;margin-top:8px;overflow:hidden}.phase-progress-bar{background:var(--text);height:100%;transition:width .4s var(--ease-smooth);border-radius:2px}.skill-screen{gap:20px;padding:32px}.skill-screen-header{align-items:center;gap:16px;display:flex}.back-btn{border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;background:var(--surface);width:40px;height:40px;transition:transform .15s var(--ease-spring);justify-content:center;align-items:center;font-size:18px;display:flex}.back-btn:active{transform:scale(.92)}.skill-grid{flex:1;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:12px;padding-bottom:24px;display:grid;overflow-y:auto}.skill-tile{aspect-ratio:1;background:var(--surface);border:2px solid var(--border-light);border-radius:var(--radius-md);cursor:pointer;transition:transform .15s var(--ease-spring), border-color .2s;flex-direction:column;justify-content:center;align-items:center;gap:4px;display:flex;position:relative}.skill-tile:active{transform:scale(.93)}.skill-tile .letter{font-size:32px;font-weight:300;line-height:1}.skill-tile .mastery-dots{gap:3px;display:flex}.skill-tile .mastery-dot{background:var(--border);border-radius:50%;width:5px;height:5px}.skill-tile .mastery-dot.filled{background:var(--text)}.skill-tile.locked{opacity:.3;pointer-events:none}.skill-tile.mastered{border-color:var(--text)}.practice-screen{background:var(--surface);justify-content:center;align-items:center}.practice-canvas-wrap{position:absolute;top:0;bottom:0;left:0;right:0}.practice-canvas-wrap canvas{width:100%;height:100%;display:block}.practice-hud{pointer-events:none;z-index:10;justify-content:space-between;align-items:center;display:flex;position:absolute;top:16px;left:16px;right:16px}.practice-hud>*{pointer-events:auto}.practice-prompt{color:var(--text-secondary);letter-spacing:.02em;font-size:16px;font-weight:400}.practice-close{border:1px solid var(--border);background:var(--surface);cursor:pointer;width:36px;height:36px;color:var(--text-secondary);transition:transform .15s var(--ease-spring);border-radius:50%;justify-content:center;align-items:center;font-size:16px;display:flex}.practice-close:active{transform:scale(.9)}.practice-progress-dots{z-index:10;gap:6px;display:flex;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.practice-progress-dot{background:var(--border);width:8px;height:8px;transition:background .3s, transform .3s var(--ease-spring);border-radius:50%}.practice-progress-dot.done{background:var(--text)}.practice-progress-dot.current{background:var(--text-secondary);transform:scale(1.3)}.completion-overlay{z-index:20;opacity:0;pointer-events:none;background:#f5f5f0e6;flex-direction:column;justify-content:center;align-items:center;gap:16px;transition:opacity .4s;display:flex;position:absolute;top:0;bottom:0;left:0;right:0}.completion-overlay.visible{opacity:1;pointer-events:auto}.completion-check{border:3px solid var(--text);width:64px;height:64px;transition:transform .5s var(--ease-spring);border-radius:50%;justify-content:center;align-items:center;font-size:28px;display:flex;transform:scale(0)}.completion-overlay.visible .completion-check{transform:scale(1)}.dashboard-screen{gap:20px;padding:32px;overflow-y:auto}.dashboard-screen h1{font-size:22px;font-weight:400}.dashboard-stats{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.stat-card{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius-md);text-align:center;padding:16px}.stat-card .stat-value{font-size:28px;font-weight:300}.stat-card .stat-label{color:var(--text-secondary);margin-top:4px;font-size:12px}.mastery-grid-section{margin-top:12px}.mastery-grid-section h3{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;font-size:14px;font-weight:500}.mastery-grid{grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:8px;display:grid}.mastery-cell{aspect-ratio:1;border-radius:var(--radius-sm);border:1px solid var(--border-light);background:var(--surface);justify-content:center;align-items:center;font-size:18px;font-weight:300;display:flex}.mastery-cell.m-0{background:var(--bg);color:var(--text-tertiary)}.mastery-cell.m-1{background:#eee}.mastery-cell.m-2{background:#ddd}.mastery-cell.m-3{background:#ccc}.mastery-cell.m-4{background:#bbb}.mastery-cell.m-5{color:#fff;background:#aaa}.mastery-cell.m-6{color:#fff;background:#555}.dashboard-settings{border-top:1px solid var(--border-light);margin-top:24px;padding-top:24px}.dashboard-settings h3{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;font-size:14px;font-weight:500}.setting-row{border-bottom:1px solid var(--border-light);justify-content:space-between;align-items:center;padding:12px 0;display:flex}.setting-row .setting-label{font-size:15px}.setting-row .setting-action{color:var(--text-secondary);cursor:pointer;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:14px;font-family:var(--font-ui);background:0 0;padding:6px 12px}.sparkle{background:var(--text);pointer-events:none;width:4px;height:4px;animation:sparkle-out .8s var(--ease-smooth) forwards;border-radius:50%;position:absolute}@keyframes sparkle-out{0%{opacity:1;transform:scale(1)translate(0)}to{opacity:0;transform:scale(0) translate(var(--tx), var(--ty))}}@keyframes pulse{0%,to{opacity:.8;transform:translate(-50%,-50%)scale(1)}50%{opacity:.4;transform:translate(-50%,-50%)scale(1.4)}}.start-dot{background:var(--text);pointer-events:none;z-index:5;border-radius:50%;width:16px;height:16px;animation:1.5s ease-in-out infinite pulse;position:absolute}.guideline{background:var(--guide-light);pointer-events:none;height:1px;position:absolute;left:0;right:0}.guideline.baseline{background:var(--guide-color);height:2px}.word-box{border:1px dashed var(--guide-light);border-radius:4px;position:absolute}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}