:root{--bg: #FFF9F0;--card: #FFFFFF;--text: #2D3436;--text-light: #636E72;--shadow: rgba(0, 0, 0, .08);--radius: 1rem;font-family:Nunito,Comic Neue,ui-rounded,Segoe UI,system-ui,sans-serif;line-height:1.5;color-scheme:light}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}body{background-image:radial-gradient(circle at 20% 30%,#FFE0EC 0%,transparent 40%),radial-gradient(circle at 80% 70%,#D4F1F9 0%,transparent 40%),radial-gradient(circle at 50% 50%,#fff9f0,#fff9f0)}.page{max-width:640px;margin:0 auto;padding:1.25rem 1rem 2rem}.title{text-align:center;font-size:2rem;font-weight:800;color:#6c63ff;margin-bottom:.25rem}.title-emoji{font-size:1.8rem;margin-right:.25rem}.subtitle{text-align:center;font-size:1rem;color:var(--text-light);margin-bottom:1.25rem}.letter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:.65rem}.letter-tile{position:relative;border:none;border-radius:var(--radius);padding:.65rem .35rem .55rem;cursor:pointer;color:#fff;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:.15rem;box-shadow:0 4px 12px var(--shadow);transition:transform .18s,box-shadow .18s;animation:pop-in .4s cubic-bezier(.34,1.56,.64,1) both}.letter-tile:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 8px 24px #00000024}.letter-tile:active{transform:scale(.95)}.tile-letter{font-size:1.6rem;line-height:1}.tile-emoji{font-size:1rem}@keyframes pop-in{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}.top-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.btn-back{background:#fff;border:2px solid #DFE6E9;border-radius:2rem;padding:.4rem 1rem;font-size:.9rem;font-weight:700;cursor:pointer;color:var(--text);transition:background .15s}.btn-back:hover{background:#f0f0f0}.letter-nav{display:flex;gap:.5rem}.btn-nav{background:#6c63ff;color:#fff;border:none;border-radius:2rem;padding:.4rem 1rem;font-size:.9rem;font-weight:700;cursor:pointer;transition:opacity .15s}.btn-nav:hover{opacity:.85}.hero{display:flex;align-items:center;gap:1rem;background:var(--card);border-radius:var(--radius);padding:1.25rem 1.5rem;box-shadow:0 4px 16px var(--shadow);margin-bottom:1rem}.hero-emoji{font-size:3.5rem}.hero-text{display:flex;flex-direction:column}.hero-letter{font-size:3.5rem;font-weight:900;line-height:1}.hero-lower{font-size:2rem;font-weight:700;line-height:1;opacity:.65}.hero-word{font-size:1.1rem;font-weight:600;margin-top:.25rem;color:var(--text-light)}.tip-box{display:flex;align-items:flex-start;gap:.5rem;background:#fff3cd;border-radius:var(--radius);padding:.75rem 1rem;font-size:.88rem;font-weight:600;color:#856404;margin-bottom:1rem}.tip-icon{font-size:1.2rem;flex-shrink:0}.practice-section{margin-bottom:1.25rem}.section-title{font-size:1.1rem;font-weight:800;color:#6c63ff;margin-bottom:.65rem}.canvas-wrapper{position:relative;width:100%;aspect-ratio:1;max-width:500px;margin:0 auto;background:#fff;border-radius:var(--radius);border:3px dashed #DFE6E9;overflow:hidden;touch-action:none}.watermark{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:18rem;font-weight:900;opacity:.07;pointer-events:none;-webkit-user-select:none;user-select:none;line-height:1}.guide-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.guide-dot{position:absolute;width:22px;height:22px;margin-left:-11px;margin-top:-11px;background:#6c63ff33;border:2.5px solid #6C63FF;border-radius:50%;z-index:2;pointer-events:none;display:grid;place-items:center}.guide-dot-num{font-size:.65rem;font-weight:800;color:#fff;background:#6c63ff;width:16px;height:16px;border-radius:50%;display:grid;place-items:center;line-height:1}.draw-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;cursor:crosshair;z-index:3}.canvas-actions{display:flex;justify-content:center;gap:.75rem;margin-top:.75rem}.btn-clear,.btn-done{border:none;border-radius:2rem;padding:.55rem 1.5rem;font-size:.95rem;font-weight:700;cursor:pointer;transition:transform .15s,opacity .15s}.btn-clear{background:#dfe6e9;color:var(--text)}.btn-clear:hover{background:#c8d6db}.btn-done{background:#00b894;color:#fff}.btn-done:hover{opacity:.9}.btn-clear:active,.btn-done:active{transform:scale(.95)}.bottom-nav{display:flex;justify-content:center;gap:.75rem;margin-top:.5rem}.btn-nav-big{background:#6c63ff;color:#fff;border:none;border-radius:2rem;padding:.6rem 1.75rem;font-size:1.05rem;font-weight:800;cursor:pointer;transition:opacity .15s,transform .15s;box-shadow:0 4px 14px #6c63ff4d}.btn-nav-big:hover{opacity:.9;transform:translateY(-2px)}.btn-nav-big:active{transform:scale(.95)}.btn-nav-next{background:#ff6b6b;box-shadow:0 4px 14px #ff6b6b4d}.confetti-container{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:100}.confetti-piece{position:absolute;top:-20px;border-radius:2px;animation:confetti-fall 2s ease-out forwards}@keyframes confetti-fall{0%{transform:translateY(0) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}@media(max-width:480px){.title{font-size:1.5rem}.hero{padding:1rem}.hero-emoji,.hero-letter{font-size:2.5rem}.hero-lower{font-size:1.5rem}.letter-grid{grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:.5rem}.tile-letter{font-size:1.3rem}}