@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Caveat:wght@400;500;600;700&display=swap";:root{--bg-primary: #0a0a0f;--bg-secondary: #12121a;--bg-card: #ffffff0a;--bg-glass: #ffffff0f;--bg-glass-strong: #ffffff1a;--accent-primary: #f0a040;--accent-secondary: #e8783e;--accent-glow: #f0a04040;--accent-glow-strong: #f0a04073;--text-primary: #f0ece4;--text-secondary: #f0ece499;--text-tertiary: #f0ece459;--text-on-accent: #0a0a0f;--paper-1: #fef9ef;--paper-2: #fdf3e0;--paper-3: #fcf0d8;--paper-4: #faebd2;--paper-5: #f8e6c8;--paper-ink: #2c1810;--border-subtle: #ffffff0f;--border-medium: #ffffff1f;--shadow-color: #0006;--jar-glass: #b4d2e61f;--jar-glass-edge: #c8dcf040;--jar-highlight: #ffffff26;--radius-sm: 8px;--radius-md: 14px;--radius-lg: 22px;--radius-xl: 30px;--radius-full: 9999px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 36px;--space-2xl: 48px;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-handwritten: "Caveat", cursive;--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-out-back: cubic-bezier(.34, 1.56, .64, 1);--ease-spring: cubic-bezier(.25, .46, .45, .94);--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;font-size:16px;overflow:hidden}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);overscroll-behavior:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100dvh;line-height:1.5;overflow:hidden}#root{flex-direction:column;min-height:100dvh;display:flex}button{cursor:pointer;color:inherit;font-family:inherit;font-size:inherit;-webkit-tap-highlight-color:transparent;background:0 0;border:none}input,textarea{color:inherit;background:0 0;border:none;outline:none;font-family:inherit}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slideDown{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes gentleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}@keyframes shake{0%,to{transform:translate(0) rotate(0)}15%{transform:translate(-4px) rotate(-2deg)}30%{transform:translate(4px) rotate(2deg)}45%{transform:translate(-3px) rotate(-1.5deg)}60%{transform:translate(3px) rotate(1.5deg)}75%{transform:translate(-2px) rotate(-1deg)}90%{transform:translate(1px) rotate(.5deg)}}@keyframes paperDraw{0%{opacity:0;transform:translateY(40px) rotate(0) scale(.7)}40%{opacity:1;transform:translateY(-10px) rotate(var(--slip-rotation, -3deg)) scale(1.05)}to{opacity:1;transform:translateY(0) rotate(var(--slip-rotation, -3deg)) scale(1)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 20px var(--accent-glow),0 0 60px #f0a04014}50%{box-shadow:0 0 30px var(--accent-glow-strong),0 0 80px #f0a04026}}@supports ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))){.glass{-webkit-backdrop-filter:blur(16px) saturate(1.4)}}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(at 20% 20%,#f0a0400a,#0000 50%),radial-gradient(at 80% 80%,#e8783e08,#0000 50%);position:fixed;inset:0}.jar-container{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .4s var(--ease-out-expo);flex-direction:column;align-items:center;display:flex;position:relative}.jar-container:active{transform:scale(.96)}.jar-container.shaking{animation:.5s ease-in-out shake}.jar{background:var(--jar-glass);border:1.5px solid var(--jar-glass-edge);width:160px;height:200px;transition:all .4s var(--ease-out-expo);border-radius:20px 20px 40px 40px;position:relative;overflow:hidden}.jar:before{content:"";background:linear-gradient(90deg,var(--jar-highlight) 0%,transparent 100%);pointer-events:none;border-radius:20px 0 0 40px;width:30%;height:100%;position:absolute;top:0;left:12px}.jar-lid{z-index:2;background:linear-gradient(#c8b49659,#aa967840);border:1.5px solid #c8b4964d;border-radius:10px 10px 4px 4px;width:176px;height:24px;margin-bottom:-3px;position:relative}.jar-lid:after{content:"";background:#ffffff14;border-radius:2px;height:4px;position:absolute;top:3px;left:10px;right:10px}.jar-fill{transition:height .6s var(--ease-out-expo);background:linear-gradient(#fef9ef14,#fef9ef33 40%,#faebd24d);border-radius:0 0 38px 38px;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.jar-fill:before{content:"";background:linear-gradient(#fef9ef59,#0000);height:12px;position:absolute;top:0;left:0;right:0}.jar-papers{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:2px;display:flex;position:absolute;inset:8px;overflow:hidden}.jar-paper-strip{opacity:.7;width:28px;height:8px;transform:rotate(var(--strip-rotation, 0deg));border-radius:2px}.jar-container.has-words .jar{animation:4s ease-in-out infinite pulseGlow}.jar-hint{margin-top:var(--space-md);color:var(--text-tertiary);text-align:center;font-size:.8rem;animation:.8s ease-out .3s both fadeIn}.draw-controls{z-index:100;background:var(--bg-secondary);border-top:1px solid var(--border-medium);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--space-lg) var(--space-lg) calc(var(--space-xl) + var(--safe-bottom));animation:slideUp .4s var(--ease-out-expo);position:fixed;bottom:0;left:0;right:0;box-shadow:0 -8px 40px #0000004d}.draw-controls.closing{animation:slideDown .3s var(--ease-out-expo) forwards}.draw-controls-handle{background:var(--border-medium);width:40px;height:4px;margin:0 auto var(--space-lg);border-radius:2px}.draw-controls-title{text-align:center;margin-bottom:var(--space-lg);font-size:1.1rem;font-weight:600}.number-selector{justify-content:center;align-items:center;gap:var(--space-lg);margin-bottom:var(--space-xl);display:flex}.number-btn{border-radius:var(--radius-full);background:var(--bg-glass);border:1px solid var(--border-subtle);width:48px;height:48px;color:var(--text-primary);transition:all .2s var(--ease-out-expo);justify-content:center;align-items:center;font-size:1.3rem;display:flex}.number-btn:active{background:var(--bg-glass-strong);transform:scale(.9)}.number-btn:disabled{opacity:.3;cursor:not-allowed}.number-display{color:var(--accent-primary);text-align:center;min-width:60px;font-size:3rem;font-weight:800;line-height:1}.draw-btn{border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));width:100%;color:var(--text-on-accent);justify-content:center;align-items:center;gap:var(--space-sm);transition:all .3s var(--ease-out-expo);box-shadow:0 4px 20px var(--accent-glow);letter-spacing:.01em;padding:16px;font-size:1.05rem;font-weight:700;display:flex}.draw-btn:active{transform:scale(.97)}.draw-btn:disabled{opacity:.5;cursor:not-allowed}.paper-slip{background:var(--paper-bg, var(--paper-1));min-width:100px;color:var(--paper-ink);font-family:var(--font-sans);letter-spacing:-.01em;transform:rotate(var(--slip-rotation, -2deg));animation:paperDraw .6s var(--ease-out-back) calc(var(--slip-delay, 0) * 1s) both;cursor:pointer;-webkit-user-select:none;user-select:none;transition:transform .3s var(--ease-out-expo),box-shadow .3s ease,opacity .3s ease;border-radius:4px;justify-content:center;align-items:center;padding:16px 28px;font-size:1.5rem;font-weight:700;display:inline-flex;position:relative;box-shadow:0 2px 8px #0000001a,0 1px 2px #0000000f,inset 0 1px #ffffff80}.paper-slip.discarding{opacity:0;pointer-events:none;transform:rotate(calc(var(--slip-rotation) + 15deg)) scale(.8) translateY(20px)!important}.paper-slip:before{content:"";pointer-events:none;background:repeating-linear-gradient(0deg,#0000,#0000 22px,#b4a08c14 22px 23px);border-radius:4px;position:absolute;inset:0}.paper-slip:after{content:"";background:linear-gradient(#0000,#00000008,#0000,#00000005,#0000,#00000008);border-radius:2px 0 0 2px;width:3px;position:absolute;top:4px;bottom:4px;left:-1px}.paper-slip:hover{transform:rotate(0) scale(1.05);box-shadow:0 8px 24px #00000026,0 4px 8px #00000014}.paper-slip .fold{background:linear-gradient(225deg,#0000000f,#00000005 50%,#0000 50%);border-radius:0 4px 0 0;width:16px;height:16px;position:absolute;top:0;right:0}.draw-area{z-index:80;background:var(--bg-primary);flex-direction:column;animation:.3s ease-out fadeIn;display:flex;position:fixed;inset:0}.draw-area-header{padding:var(--space-md) var(--space-lg);padding-top:calc(var(--space-md) + var(--safe-top));z-index:2;justify-content:space-between;align-items:center;display:flex}.draw-area-title{font-size:1.1rem;font-weight:600}.draw-area-close{border-radius:var(--radius-full);background:var(--bg-glass);border:1px solid var(--border-subtle);width:42px;height:42px;color:var(--text-secondary);justify-content:center;align-items:center;transition:all .2s;display:flex}.draw-area-close:active{background:var(--bg-glass-strong);transform:scale(.9)}.draw-area-slips{justify-content:center;align-items:center;gap:var(--space-lg);padding:var(--space-xl) var(--space-lg);-webkit-overflow-scrolling:touch;flex-wrap:wrap;flex:1;display:flex;overflow-y:auto}.draw-area-actions{gap:var(--space-md);padding:var(--space-lg);padding-bottom:calc(var(--space-lg) + var(--safe-bottom));display:flex}.return-btn{border-radius:var(--radius-lg);background:var(--bg-glass);border:1px solid var(--border-subtle);color:var(--text-primary);justify-content:center;align-items:center;gap:var(--space-sm);flex:1;padding:14px;font-size:.95rem;font-weight:600;transition:all .2s;display:flex}.return-btn:active{background:var(--bg-glass-strong);transform:scale(.97)}.redraw-btn{border-radius:var(--radius-lg);background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:var(--text-on-accent);justify-content:center;align-items:center;gap:var(--space-sm);box-shadow:0 4px 20px var(--accent-glow);flex:1;padding:14px;font-size:.95rem;font-weight:600;transition:all .2s;display:flex}.redraw-btn:active{transform:scale(.97)}.add-word-modal{z-index:100;flex-direction:column;justify-content:flex-end;display:flex;position:fixed;inset:0}.add-word-sheet{background:var(--bg-secondary);border-top:1px solid var(--border-medium);border-radius:var(--radius-xl) var(--radius-xl) 0 0;padding:var(--space-lg);padding-bottom:calc(var(--space-xl) + var(--safe-bottom));animation:slideUp .4s var(--ease-out-expo);z-index:100;flex-direction:column;max-height:85dvh;display:flex;position:relative;box-shadow:0 -8px 40px #0000004d}.add-word-sheet.closing{animation:slideDown .3s var(--ease-out-expo) forwards}.add-word-handle{background:var(--border-medium);width:40px;height:4px;margin:0 auto var(--space-lg);border-radius:2px}.add-word-header{margin-bottom:var(--space-lg);justify-content:space-between;align-items:center;display:flex}.add-word-title{font-size:1.2rem;font-weight:700}.add-word-close{border-radius:var(--radius-full);background:var(--bg-glass);border:1px solid var(--border-subtle);width:36px;height:36px;color:var(--text-secondary);justify-content:center;align-items:center;transition:all .2s;display:flex}.add-word-close:active{transform:scale(.9)}.add-word-input-row{gap:var(--space-sm);margin-bottom:var(--space-lg);display:flex}.add-word-input{border-radius:var(--radius-md);background:var(--bg-glass);border:1.5px solid var(--border-subtle);color:var(--text-primary);flex:1;padding:14px 18px;font-size:1rem;transition:border-color .2s}.add-word-input::placeholder{color:var(--text-tertiary)}.add-word-input:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-glow)}.add-word-submit{border-radius:var(--radius-md);background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));width:50px;height:50px;color:var(--text-on-accent);transition:all .2s var(--ease-out-expo);box-shadow:0 2px 10px var(--accent-glow);flex-shrink:0;justify-content:center;align-items:center;display:flex}.add-word-submit:active{transform:scale(.9)}.added-words-list{-webkit-overflow-scrolling:touch;flex:1;min-height:0;overflow-y:auto}.added-words-title{color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-md);font-size:.8rem;font-weight:600}.word-chip{border-radius:var(--radius-full);background:var(--bg-glass);border:1px solid var(--border-subtle);color:var(--text-primary);margin:0 var(--space-xs) var(--space-sm) 0;animation:fadeInScale .3s var(--ease-out-back);align-items:center;gap:6px;padding:8px 14px;font-size:.85rem;transition:all .2s;display:inline-flex}.word-chip .remove-word{border-radius:var(--radius-full);color:#ff6464e6;background:#ff505026;justify-content:center;align-items:center;width:18px;height:18px;font-size:.7rem;transition:all .2s;display:flex}.word-chip .remove-word:hover{background:#ff50504d}.bulk-hint{color:var(--text-tertiary);text-align:center;margin-top:var(--space-sm);font-size:.75rem}.app{z-index:1;min-height:100dvh;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);flex-direction:column;display:flex;position:relative}.app-header{padding:var(--space-md) var(--space-lg);padding-top:calc(var(--space-md) + var(--safe-top));z-index:10;justify-content:space-between;align-items:center;display:flex;position:relative}.app-title{letter-spacing:-.02em;background:linear-gradient(135deg,var(--text-primary),var(--accent-primary));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.35rem;font-weight:700}.app-subtitle{color:var(--text-tertiary);margin-top:2px;font-size:.75rem;font-weight:400}.header-actions{gap:var(--space-sm);display:flex}.icon-btn{border-radius:var(--radius-full);background:var(--bg-glass);border:1px solid var(--border-subtle);width:42px;height:42px;color:var(--text-secondary);transition:all .25s var(--ease-out-expo);justify-content:center;align-items:center;display:flex}.icon-btn:hover,.icon-btn:active{background:var(--bg-glass-strong);color:var(--text-primary);transform:scale(1.05)}.icon-btn.accent{background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:var(--text-on-accent);box-shadow:0 4px 20px var(--accent-glow);border:none}.icon-btn.accent:hover,.icon-btn.accent:active{box-shadow:0 6px 30px var(--accent-glow-strong);transform:scale(1.08)}.app-content{padding:var(--space-md);flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.word-count-badge{align-items:center;gap:var(--space-xs);border-radius:var(--radius-full);background:var(--bg-glass);border:1px solid var(--border-subtle);color:var(--text-secondary);margin-bottom:var(--space-lg);animation:fadeInUp .5s var(--ease-out-expo);padding:6px 14px;font-size:.8rem;font-weight:500;display:inline-flex}.word-count-badge .count{color:var(--accent-primary);font-weight:700}.empty-state{text-align:center;padding:var(--space-2xl);animation:fadeIn .6s var(--ease-out-expo);flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-state-icon{margin-bottom:var(--space-lg);font-size:4rem;animation:3s ease-in-out infinite gentleFloat}.empty-state h2{margin-bottom:var(--space-sm);color:var(--text-primary);font-size:1.3rem;font-weight:600}.empty-state p{color:var(--text-secondary);max-width:260px;font-size:.9rem;line-height:1.6}.empty-state-btn{margin-top:var(--space-lg);border-radius:var(--radius-full);background:linear-gradient(135deg,var(--accent-primary),var(--accent-secondary));color:var(--text-on-accent);align-items:center;gap:var(--space-sm);transition:all .3s var(--ease-out-expo);box-shadow:0 4px 20px var(--accent-glow);padding:14px 32px;font-size:.95rem;font-weight:600;display:flex}.empty-state-btn:hover,.empty-state-btn:active{box-shadow:0 8px 30px var(--accent-glow-strong);transform:scale(1.05)}.overlay-backdrop{z-index:90;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0000008c;animation:.25s ease-out fadeIn;position:fixed;inset:0}.sync-error{max-width:420px;margin-bottom:var(--space-md);border:1px solid #ff646459;border-radius:var(--radius-md);background:#ff50501f;color:#ffb3b3;padding:10px 14px;font-size:.8rem;line-height:1.5;animation:fadeIn .25s var(--ease-out-expo)}