*{box-sizing:border-box;margin:0;padding:0}:root{--gray-0:#000;--gray-1:#1a1a1a;--gray-2:#333;--gray-3:#666;--gray-4:#999;--gray-5:#ccc;--gray-6:#e5e5e5;--gray-7:#f5f5f5;--gray-8:#fff;--bg-primary:var(--gray-8);--bg-secondary:var(--gray-7);--text-primary:var(--gray-0);--text-secondary:var(--gray-2);--border:var(--gray-5);--guide:var(--gray-4);--guide-light:var(--gray-6);--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--touch-min:44px}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}#app{width:100vw;height:100dvh;position:relative;overflow:hidden}.screen{width:100%;height:100%;display:none;position:absolute;top:0;left:0}.screen.active{flex-direction:column;display:flex}.profile-screen{padding:var(--space-2xl);justify-content:center;align-items:center;gap:var(--space-xl)}.profile-screen h1{letter-spacing:-1px;margin-bottom:var(--space-lg);font-size:48px;font-weight:300}.profile-grid{gap:var(--space-lg);grid-template-columns:repeat(auto-fit,minmax(120px,1fr));width:100%;max-width:600px;display:grid}.profile-card{background:var(--bg-secondary);border:2px solid var(--border);padding:var(--space-lg);min-height:var(--touch-min);align-items:center;gap:var(--space-sm);cursor:pointer;border-radius:12px;flex-direction:column;transition:all .2s;display:flex}.profile-card:hover,.profile-card:active{border-color:var(--gray-2);transform:scale(.98)}.profile-avatar{font-size:48px;line-height:1}.profile-name{font-size:18px;font-weight:500}.add-profile{border-style:dashed;justify-content:center}.add-profile-icon{color:var(--gray-4);font-size:48px}.practice-screen{background:var(--bg-primary)}.practice-canvas{touch-action:none;cursor:crosshair;width:100%;height:100%}.dashboard-screen{padding:var(--space-xl);overflow-y:auto}.dashboard-header{margin-bottom:var(--space-xl);padding-bottom:var(--space-lg);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;display:flex}.dashboard-header h1{font-size:32px;font-weight:400}.back-button{background:var(--bg-secondary);border:1px solid var(--border);padding:var(--space-sm) var(--space-md);cursor:pointer;min-height:var(--touch-min);min-width:var(--touch-min);border-radius:8px;font-size:16px}.back-button:hover{border-color:var(--gray-2)}.progress-section{margin-bottom:var(--space-2xl)}.progress-section h2{margin-bottom:var(--space-lg);font-size:24px;font-weight:400}.mastery-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(80px,1fr));display:grid}.mastery-item{background:var(--bg-secondary);border:1px solid var(--border);padding:var(--space-md);text-align:center;align-items:center;gap:var(--space-xs);border-radius:8px;flex-direction:column;display:flex}.mastery-letter{font-size:32px;font-weight:400;line-height:1}.mastery-status{color:var(--text-secondary);font-size:12px}.mastery-item.not-started{opacity:.4}.mastery-item.introduced{opacity:.5}.mastery-item.guided{opacity:.7}.mastery-item.reduced{opacity:.85}.mastery-item.mastered{opacity:1;border-width:2px;border-color:var(--gray-2)}.modal{z-index:1000;background:#00000080;justify-content:center;align-items:center;width:100%;height:100%;display:none;position:fixed;top:0;left:0}.modal.active{display:flex}.modal-content{background:var(--bg-primary);border:2px solid var(--border);padding:var(--space-xl);border-radius:16px;width:90%;max-width:400px}.modal-content h2{margin-bottom:var(--space-lg);font-size:28px;font-weight:400}.form-group{margin-bottom:var(--space-lg)}.form-group label{margin-bottom:var(--space-sm);color:var(--text-secondary);font-size:16px;display:block}.form-group input{width:100%;padding:var(--space-md);border:1px solid var(--border);font-size:18px;font-family:var(--font-sans);background:var(--bg-primary);min-height:var(--touch-min);border-radius:8px}.form-group input:focus{outline:2px solid var(--gray-2);outline-offset:2px;border-color:var(--gray-2)}.emoji-grid{gap:var(--space-sm);grid-template-columns:repeat(6,1fr);display:grid}.emoji-option{padding:var(--space-sm);cursor:pointer;text-align:center;min-height:var(--touch-min);border:2px solid #0000;border-radius:8px;justify-content:center;align-items:center;font-size:32px;display:flex}.emoji-option:hover,.emoji-option.selected{background:var(--bg-secondary);border-color:var(--gray-2)}.modal-actions{gap:var(--space-md);margin-top:var(--space-xl);display:flex}.btn{padding:var(--space-md);border:1px solid var(--border);font-size:18px;font-family:var(--font-sans);cursor:pointer;min-height:var(--touch-min);background:var(--bg-secondary);border-radius:8px;flex:1}.btn:hover{border-color:var(--gray-2)}.btn-primary{background:var(--gray-0);color:var(--gray-8);border-color:var(--gray-0)}.btn-primary:hover{background:var(--gray-1)}.btn-primary:disabled{opacity:.4;cursor:not-allowed}.loading{color:var(--text-secondary);font-size:24px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.3)}}.pulse{animation:1.5s ease-in-out infinite pulse}@keyframes sparkle{0%{opacity:1;transform:scale(1)rotate(0)}to{opacity:0;transform:scale(1.5)rotate(180deg)}}.sparkle{animation:.6s ease-out forwards sparkle}