:root{--bg-app:#090d16;--bg-card:#141b2d99;--border-card:#ffffff14;--border-glow:#38bdf826;--text-primary:#f8fafc;--text-muted:#94a3b8;--text-inactive:#475569;--primary-cyan:#38bdf8;--primary-cyan-glow:#38bdf880;--gold:#fbbf24;--gold-glow:#fbbf2480;--pink:#f472b6;--pink-glow:#f472b680;--green:#4ade80;--green-glow:#4ade8080;--purple:#a78bfa;--purple-glow:#a78bfa80;--danger:#ef4444;--font-display:"Outfit", sans-serif;--font-sans:"Quicksand", sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;margin:0;padding:0}body{background-color:var(--bg-app);color:var(--text-primary);font-family:var(--font-sans);justify-content:center;align-items:center;min-height:100dvh;display:flex;overflow:hidden}#app{background:radial-gradient(circle at 50% 20%,#131c31 0%,#090d16 100%);flex-direction:column;justify-content:space-between;width:100%;max-width:480px;height:100dvh;display:flex;position:relative;box-shadow:0 0 40px #0009}.app-header{-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border-card);z-index:10;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.logo{font-family:var(--font-display);letter-spacing:-.5px;font-size:24px;font-weight:900}.logo span{display:inline-block}.neon-text-gold{color:var(--gold);text-shadow:0 0 10px var(--gold-glow)}.neon-text-blue{color:var(--primary-cyan);text-shadow:0 0 10px var(--primary-cyan-glow);margin-left:2px}.mode-selector{border:1px solid var(--border-card);background:#ffffff0d;border-radius:30px;padding:4px;display:flex}.mode-selector button{color:var(--text-muted);font-family:var(--font-sans);cursor:pointer;background:0 0;border:none;border-radius:20px;padding:8px 16px;font-size:15px;font-weight:800;transition:all .3s cubic-bezier(.4,0,.2,1)}.mode-selector button.active{background:var(--primary-cyan);color:#090d16;box-shadow:0 0 12px var(--primary-cyan-glow);text-shadow:none}.main-content{flex-direction:column;flex:1;justify-content:space-around;align-items:center;padding:10px 20px;display:flex}.letter-nav{justify-content:space-between;align-items:center;width:100%;max-width:340px;margin:12px 0;display:flex}.nav-arrow{background:var(--bg-card);border:2px solid var(--border-card);color:var(--text-primary);cursor:pointer;-webkit-backdrop-filter:blur(5px);border-radius:50%;justify-content:center;align-items:center;width:56px;height:56px;transition:all .2s;display:flex}.nav-arrow:active{border-color:var(--primary-cyan);background:#fff3;transform:scale(.9)}.letter-display-wrapper{align-items:center;gap:16px;display:flex}#current-letter-display{font-family:var(--font-display);background:linear-gradient(135deg,#fff 0%,#cbd5e1 100%);-webkit-text-fill-color:transparent;text-shadow:0 4px 20px #fff3;-webkit-background-clip:text;font-size:64px;font-weight:900}.speak-icon-btn{border:2px solid var(--border-card);color:var(--primary-cyan);cursor:pointer;background:#ffffff14;border-radius:50%;justify-content:center;align-items:center;width:48px;height:48px;transition:all .2s;display:flex}.speak-icon-btn:active{background:var(--primary-cyan-glow);color:#fff;transform:scale(.9)}.canvas-container-outer{flex:1;justify-content:center;align-items:center;width:100%;min-height:280px;display:flex}.canvas-container-inner{background:#fdfbf7;border:3px solid #cbd5e1;border-radius:28px;justify-content:center;align-items:center;width:95%;max-width:360px;height:95%;max-height:360px;transition:border-color .3s,box-shadow .3s;display:flex;position:relative;overflow:hidden;box-shadow:0 15px 35px #00000080,inset 0 2px 8px #0000000d}.canvas-container-inner.active-drawing{border-color:var(--primary-cyan);box-shadow:0 0 25px var(--primary-cyan-glow), 0 15px 35px #00000080}.canvas-container-inner.success-glow{border-color:#16a34a;box-shadow:0 0 30px #16a34a80,0 15px 35px #00000080}#tracing-canvas{touch-action:none;z-index:1;width:100%;height:100%;display:block;position:absolute;top:0;left:0}.guide-overlay{pointer-events:none;z-index:2;width:100%;height:100%;position:absolute;top:0;left:0}.stroke-indicator-bar{background:#fffffff2;border:1.5px solid #0000001a;border-radius:20px;justify-content:space-between;align-items:center;width:90%;max-width:340px;margin:10px auto 4px;padding:12px 20px;display:flex;box-shadow:0 4px 12px #00000014}#stroke-progress-text{color:#1e293b;font-size:15px;font-weight:800}.progress-dots{gap:8px;display:flex}.dot{background:#cbd5e1;border-radius:50%;width:12px;height:12px;transition:all .3s}.dot.active{background:var(--primary-cyan);box-shadow:0 0 6px var(--primary-cyan-glow);transform:scale(1.25)}.dot.completed{background:#16a34a;box-shadow:0 0 6px #16a34a66}.first-time-hint{z-index:4;-webkit-backdrop-filter:blur(2px);text-align:center;pointer-events:auto;background:#fdfbf7e6;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:30px;transition:opacity .5s;display:flex;position:absolute;top:0;left:0}.first-time-hint p{color:#1e293b;margin-top:15px;font-size:15px;font-weight:700;line-height:1.5}.hint-hand{color:#16a34a;filter:drop-shadow(0 2px 4px #16a34a33);animation:2.2s ease-in-out infinite handGesture}@keyframes handGesture{0%{opacity:0;transform:translate(0)scale(1)}15%{opacity:1}30%{transform:translate(-30px,40px)scale(.9)}60%{transform:translate(30px,40px)scale(.9)}85%{opacity:1}to{opacity:0;transform:translate(0)scale(1)}}.grid-toggle-container{margin:12px 0}.btn-secondary{color:var(--text-primary);font-family:var(--font-sans);cursor:pointer;background:#ffffff14;border:2.5px solid #fff3;border-radius:30px;align-items:center;gap:8px;padding:10px 22px;font-size:16px;font-weight:800;transition:all .2s;display:flex}.btn-secondary:active{border-color:var(--primary-cyan);background:#ffffff26}.app-footer{border-top:1px solid var(--border-card);z-index:10;background:linear-gradient(#0000 0%,#090d16 15%);flex-direction:column;gap:16px;padding:16px 20px 24px;display:flex}.color-palette{justify-content:center;gap:20px;display:flex}.color-swatch{cursor:pointer;border:3.5px solid #0000;border-radius:50%;width:44px;height:44px;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative}.color-swatch.active{border-color:#fff;transform:scale(1.15);box-shadow:0 0 15px}.action-buttons{gap:14px;display:flex}.btn-control{background:var(--bg-card);height:56px;color:var(--text-primary);font-family:var(--font-sans);cursor:pointer;border:2px solid #ffffff1f;border-radius:16px;flex:1;justify-content:center;align-items:center;gap:8px;font-size:16px;font-weight:800;transition:all .2s;display:flex}.btn-control:active{border-color:var(--primary-cyan);background:#ffffff1a;transform:scale(.96)}.btn-control svg{color:var(--text-primary);width:22px;height:22px;transition:color .2s}.btn-control.warning{border-color:#ef444459}.btn-control.warning:active{border-color:var(--danger);color:var(--danger);background:#ef444426}.btn-control.warning:active svg{color:var(--danger)}.modal{-webkit-backdrop-filter:blur(12px);z-index:100;opacity:0;background:#090d16d9;width:100%;height:100%;transition:opacity .3s;display:none;position:absolute;top:0;left:0}.modal.show{opacity:1;display:block}.modal-content{border-top:1px solid var(--border-card);background:#0f172a;border-radius:32px 32px 0 0;flex-direction:column;max-height:90%;transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(100%)}.modal.show .modal-content{transform:translateY(0)}.modal-header{border-bottom:1px solid var(--border-card);justify-content:space-between;align-items:center;padding:20px 24px;display:flex}.modal-header h3{color:var(--text-primary);font-size:22px;font-weight:800}.close-btn{color:var(--text-primary);cursor:pointer;background:0 0;border:none;padding:5px;font-size:38px;line-height:1}.modal-body{flex:1;padding:16px 16px 20px;overflow-y:auto}.modal-instruction{color:var(--text-muted);text-align:center;margin-bottom:16px;padding:0 10px;font-size:14px;font-weight:700;line-height:1.5}.modal-footer{border-top:1px solid var(--border-card);background:#0f172a;justify-content:center;padding:12px 16px 24px;display:flex}.btn-primary-large{background:var(--primary-cyan);color:#090d16;width:100%;max-width:340px;height:56px;font-family:var(--font-sans);cursor:pointer;box-shadow:0 0 15px var(--primary-cyan-glow);border:none;border-radius:16px;font-size:17px;font-weight:800;transition:all .2s}.btn-primary-large:active{box-shadow:0 0 8px var(--primary-cyan-glow);transform:scale(.97)}.alphabet-grid{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}.grid-item{border:2px solid var(--border-card);aspect-ratio:1;font-family:var(--font-display);color:var(--text-primary);cursor:pointer;background:#ffffff0d;border-radius:16px;justify-content:center;align-items:center;font-size:28px;font-weight:900;transition:all .2s;display:flex}.grid-item:active,.grid-item.active-selection{border-color:var(--primary-cyan);background:#38bdf840;transform:scale(1.05);box-shadow:0 0 15px #38bdf866}.grid-item.completed{border-color:var(--green);color:var(--green);background:#4ade801a}@media (height>=800px){.canvas-container-outer{max-width:380px}}