:root{--bg: #1a1030;--bg-light: #2d1f4e;--text: #fff;--radius: 12px;font-family:Nunito,Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text);overflow-x:hidden}body{background:radial-gradient(circle at 20% 20%,rgba(255,107,107,.08) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(77,150,255,.08) 0%,transparent 50%),radial-gradient(circle at 50% 50%,rgba(155,89,182,.06) 0%,transparent 60%),var(--bg)}.app{max-width:480px;margin:0 auto;padding:20px 16px 40px;display:flex;flex-direction:column;align-items:center;gap:20px}.header{text-align:center;padding:8px 0}.header h1{font-size:2rem;font-weight:800;background:linear-gradient(135deg,#ff6b6b,#ffd93d,#6bcb77,#4d96ff,#9b59b6);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 4s ease-in-out infinite}.title-icon{-webkit-text-fill-color:initial;margin-right:6px}.subtitle{color:#fff9;font-size:.95rem;margin-top:2px}@keyframes gradientShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.letter-selector{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:12px;background:#ffffff0a;border-radius:var(--radius);border:1px solid rgba(255,255,255,.08)}.letter-btn{width:38px;height:38px;border-radius:10px;border:2px solid rgba(255,255,255,.15);background:#ffffff0f;color:#fffc;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.letter-btn:hover{transform:scale(1.1);background:#ffffff1f}.letter-btn.active{color:#fff;transform:scale(1.15);box-shadow:0 0 16px #ffffff26;font-weight:800}.canvas-area{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative}.canvas-wrapper{position:relative;border-radius:16px;border:3px solid;overflow:hidden;background:#0000004d;box-shadow:0 0 30px #ffffff08,inset 0 0 40px #0003;touch-action:none}.guide-canvas,.draw-canvas{display:block;width:100%;height:100%}.guide-canvas{position:absolute;top:0;left:0;pointer-events:none}.draw-canvas{position:relative;z-index:1;cursor:crosshair}.current-letter-display{font-size:3rem;font-weight:900;opacity:.15;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0}.stroke-counter{display:flex;align-items:center;gap:6px;font-size:.85rem;color:#fff9;background:#ffffff0f;padding:4px 12px;border-radius:20px}.stroke-icon{font-size:1rem}.controls{display:flex;flex-direction:column;gap:14px;width:100%;max-width:400px;padding:16px;background:#ffffff0a;border-radius:var(--radius);border:1px solid rgba(255,255,255,.08)}.picker-label{font-size:.8rem;color:#ffffff80;text-transform:uppercase;letter-spacing:.08em;font-weight:600;min-width:42px}.color-picker{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.color-btn{width:32px;height:32px;border-radius:50%;border:3px solid transparent;cursor:pointer;transition:all .2s ease}.color-btn:hover{transform:scale(1.15)}.color-btn.active{border-color:#fff;transform:scale(1.2);box-shadow:0 0 12px #ffffff40}.size-picker{display:flex;align-items:center;gap:10px}.size-slider{flex:1;height:6px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff26;border-radius:3px;outline:none}.size-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;cursor:pointer;box-shadow:0 2px 6px #0000004d}.size-preview{border-radius:50%;transition:all .15s ease;flex-shrink:0}.action-buttons{display:flex;gap:10px}.btn{flex:1;padding:10px 16px;border-radius:10px;border:none;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .2s ease;font-family:inherit}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(0)}.btn-clear{background:#ffffff1a;color:#fffc;border:1px solid rgba(255,255,255,.15)}.btn-clear:hover{background:#ffffff26}.btn-celebrate{background:linear-gradient(135deg,#ff6b6b,#ffd93d,#6bcb77);background-size:200% 200%;color:#1a1030;animation:gradientShift 3s ease-in-out infinite}.btn-celebrate:hover{box-shadow:0 4px 16px #ff6b6b4d}.progress-bar{width:100%;max-width:400px;text-align:center}.progress-track{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}.progress-dot{width:10px;height:10px;border-radius:50%;background:#ffffff1f;transition:all .3s ease}.progress-dot.filled{transform:scale(1.1);box-shadow:0 0 6px #fff3}.progress-label{font-size:.8rem;color:#fff6}.star-particle{position:absolute;pointer-events:none;z-index:10;animation:starPop 1.5s ease-out forwards}@keyframes starPop{0%{opacity:1;transform:scale(0) rotate(0)}30%{opacity:1;transform:scale(1.3) rotate(180deg)}to{opacity:0;transform:scale(.5) rotate(360deg) translateY(-40px)}}@keyframes celebrateGlow{0%,to{box-shadow:0 0 20px #ffd70033}50%{box-shadow:0 0 40px #ffd70080}}@media(max-width:420px){.app{padding:12px 10px 30px;gap:14px}.header h1{font-size:1.6rem}.letter-btn{width:32px;height:32px;font-size:.8rem}.controls{padding:12px}}