:root{--bg:#faf4e8;--bg-card:#fff8ee;--bg-tile:#f3e9d2;--bg-tile-hover:#ebddb8;--text:#5c4a30;--text-soft:#8b7a5c;--text-light:#b5a280;--accent:#d4744a;--accent-soft:#e8b89a;--accent-bg:#d4744a1f;--border:#e0d0b0;--border-dark:#c8b888;--shadow:0 4px 12px #5c4a301a;--shadow-lg:0 8px 24px #5c4a3026;--radius:20px;--radius-sm:12px;--sans:"Quicksand", system-ui, "Segoe UI", sans-serif;--heading:"Fredoka", "Quicksand", system-ui, sans-serif;--mono:ui-monospace, Consolas, monospace;font-family:var(--sans);color:var(--text);background:var(--bg);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-synthesis:none;--touch-min:56px;font-size:18px;line-height:1.4}*{box-sizing:border-box}body{background:var(--bg);overscroll-behavior:none;min-height:100svh;margin:0}#root{flex-direction:column;max-width:480px;min-height:100svh;margin:0 auto;display:flex}h1,h2,h3{font-family:var(--heading);color:var(--text);margin:0;font-weight:600}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.2rem}button{font-family:var(--sans);color:var(--text);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:0 0;border:none;font-size:1rem}.app{flex-direction:column;flex:1;gap:16px;padding:16px;display:flex}.header{justify-content:space-between;align-items:center;padding:8px 4px;display:flex}.header-title{font-family:var(--heading);color:var(--accent);font-size:1.4rem;font-weight:700}.header-back{min-height:var(--touch-min);min-width:var(--touch-min);background:var(--bg-tile);color:var(--text);border-radius:50%;justify-content:center;align-items:center;font-size:1.5rem;transition:background .15s;display:flex}.header-back:active{background:var(--bg-tile-hover)}.home{flex-direction:column;align-items:center;gap:24px;padding-top:20px;display:flex}.home-logo{font-family:var(--heading);color:var(--accent);text-align:center;letter-spacing:-.5px;font-size:2.2rem;font-weight:700}.home-subtitle{color:var(--text-soft);text-align:center;font-size:1.1rem}.home-menu{flex-direction:column;gap:12px;width:100%;max-width:320px;display:flex}.menu-btn{min-height:var(--touch-min);background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);align-items:center;gap:16px;padding:20px 24px;transition:transform .1s,border-color .15s;display:flex}.menu-btn:active{border-color:var(--accent-soft);transform:scale(.97)}.menu-btn-icon{text-align:center;width:48px;font-size:2rem}.menu-btn-text{font-family:var(--heading);color:var(--text);font-size:1.3rem;font-weight:600}.menu-btn-desc{color:var(--text-soft);font-size:.85rem}.grid{grid-template-columns:repeat(4,1fr);gap:12px;padding:8px 0 24px;display:grid}@media (width>=400px){.grid{grid-template-columns:repeat(5,1fr)}}.grid-tile{aspect-ratio:1;background:var(--bg-tile);border:2px solid var(--border);border-radius:var(--radius-sm);font-family:var(--heading);color:var(--text);min-height:var(--touch-min);justify-content:center;align-items:center;font-size:2rem;font-weight:700;transition:transform .1s,background .15s,border-color .15s;display:flex}.grid-tile:active{background:var(--bg-tile-hover);border-color:var(--accent-soft);transform:scale(.92)}.grid-section-title{font-family:var(--heading);color:var(--accent);margin:8px 0 4px;font-size:1.3rem}.card-view{flex-direction:column;flex:1;align-items:center;gap:16px;display:flex}.card-glyph{font-family:var(--heading);color:var(--accent);margin-top:8px;font-size:6rem;font-weight:700;line-height:1}.card-illustration{margin:8px 0}.card-word{font-family:var(--heading);color:var(--text);text-align:center;font-size:2rem;font-weight:600}.card-phonetic{color:var(--text-soft);font-size:1rem;font-style:italic}.audio-btn{min-height:var(--touch-min);background:var(--accent);color:#fff;font-family:var(--heading);box-shadow:var(--shadow);border-radius:50px;align-items:center;gap:8px;padding:14px 28px;font-size:1.2rem;font-weight:600;transition:transform .1s;display:flex}.audio-btn:active{transform:scale(.95)}.audio-btn.playing{animation:.8s ease-in-out infinite pulse}@keyframes pulse{0%,to{box-shadow:0 4px 12px #d4744a4d}50%{box-shadow:0 4px 20px #d4744a99}}.trace-container{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);flex-direction:column;align-items:center;gap:12px;width:100%;max-width:280px;padding:20px;display:flex}.trace-toggle{background:var(--bg-tile);min-height:48px;color:var(--text);border-radius:50px;align-items:center;gap:8px;padding:10px 20px;font-size:1rem;font-weight:600;transition:background .15s;display:flex}.trace-toggle:active{background:var(--bg-tile-hover)}.trace-toggle.active{background:var(--accent);color:#fff}.trace-svg{width:100%;max-width:200px}.trace-path{fill:none;stroke:var(--accent);stroke-width:6px;stroke-linecap:round;stroke-linejoin:round}.trace-guide{stroke:var(--border-dark);stroke-width:6px;stroke-linecap:round;stroke-linejoin:round;fill:none;opacity:.25}.profiles{flex-direction:column;align-items:center;gap:20px;padding-top:20px;display:flex}.profile-grid{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.profile-tile{min-height:var(--touch-min);background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;align-items:center;gap:8px;padding:20px 16px;transition:transform .1s;display:flex}.profile-tile:active{transform:scale(.95)}.profile-avatar{font-size:3rem}.profile-name{font-family:var(--heading);color:var(--text);font-size:1.2rem;font-weight:600}.overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#5c4a3099;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.overlay-card{background:var(--bg-card);border:2px solid var(--border);border-radius:var(--radius);text-align:center;width:100%;max-width:340px;box-shadow:var(--shadow-lg);padding:32px 24px}.overlay-card h2{color:var(--accent);margin-bottom:8px}.overlay-card p{color:var(--text-soft);margin-bottom:20px}.parent-hold{min-height:var(--touch-min);background:var(--bg-tile);border:2px solid var(--border-dark);color:var(--text-soft);border-radius:50px;justify-content:center;align-items:center;padding:16px 32px;font-size:1rem;font-weight:600;display:inline-flex;position:relative;overflow:hidden}.parent-hold-fill{background:var(--accent);opacity:.2;transform-origin:0;transition:transform 1.5s linear;position:absolute;inset:0;transform:scaleX(0)}.parent-hold.holding .parent-hold-fill{transform:scaleX(1)}.parent-hold-text{z-index:1;position:relative}.parent-cancel{color:var(--text-light);margin-top:16px;font-size:.9rem}.nav-arrows{gap:16px;margin-top:8px;display:flex}.nav-arrow{min-height:var(--touch-min);min-width:var(--touch-min);background:var(--bg-tile);color:var(--text);border-radius:50%;justify-content:center;align-items:center;font-size:1.5rem;transition:background .15s,transform .1s;display:flex}.nav-arrow:active{background:var(--bg-tile-hover);transform:scale(.9)}.sr-only{clip:rect(0,0,0,0);width:1px;height:1px;position:absolute;overflow:hidden}