*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-deep:#06060f;--bg-surface:#0d0d1a;--bg-card:#141428;--bg-card-hover:#1a1a35;--color-short-vowel:#ff6b6b;--color-long-vowel:#ffd93d;--color-consonant:#6bcfff;--color-digraph:#c77dff;--color-magic-e:#ffbe0b;--color-r-controlled:#06d6a0;--color-vowel-team:#f77f00;--color-correct:#00e676;--color-wrong:#ff5252;--color-text-primary:#eeeef6;--color-text-secondary:#eeeef68c;--color-text-dim:#eeeef640;--color-glow:#6bcfff4d;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-mono:"SF Mono", "Cascadia Code", "Consolas", monospace;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:40px;--space-2xl:64px;--shadow-card:0 2px 4px #0000004d, 0 8px 24px #0006, 0 24px 48px #0000004d;--shadow-card-drag:0 4px 8px #0006, 0 16px 40px #00000080, 0 32px 64px #0006;--shadow-glow-correct:0 0 40px #00e67666, 0 0 80px #00e67626;--shadow-glow-wrong:0 0 30px #ff52524d;--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--ease-out-back:cubic-bezier(.34, 1.56, .64, 1);--ease-spring:cubic-bezier(.22, 1.2, .36, 1);--ease-snap:cubic-bezier(.68, -.55, .27, 1.55);--card-width:min(360px, 85vw);--card-height:220px;--card-radius:24px;--block-size:64px;--block-radius:14px}html,body{background:var(--bg-deep);height:100%;color:var(--color-text-primary);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-user-select:none;user-select:none;touch-action:manipulation;overflow:hidden}#root{width:100%;height:100%;position:relative;overflow:hidden}.app{background:var(--bg-deep);background-image:radial-gradient(at 20%,#6bcfff08 0%,#0000 50%),radial-gradient(at 80%,#c77dff08 0%,#0000 50%);flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.swipe-card-container{width:var(--card-width);justify-content:center;align-items:center;display:flex;position:relative}.swipe-card{width:var(--card-width);min-height:var(--card-height);background:var(--bg-card);border-radius:var(--card-radius);box-shadow:var(--shadow-card);justify-content:center;align-items:center;gap:var(--space-lg);padding:var(--space-xl) var(--space-lg);cursor:grab;will-change:transform;border:1px solid #ffffff0f;flex-direction:column;transition:box-shadow .3s;display:flex;position:relative;overflow:hidden}.swipe-card:before{content:"";border-radius:var(--card-radius);pointer-events:none;background:linear-gradient(135deg,#ffffff0a 0%,#0000 50%,#ffffff03 100%);position:absolute;inset:0}.swipe-card.dragging{cursor:grabbing;box-shadow:var(--shadow-card-drag)}.swipe-card.correct-exit{transition:transform .35s var(--ease-out-expo), opacity .35s ease}.swipe-card.snap-back{transition:transform .5s var(--ease-snap)}.word-display{justify-content:center;align-items:center;gap:var(--space-sm);font-family:var(--font-mono);letter-spacing:4px;color:var(--color-text-primary);font-size:48px;font-weight:700;display:flex}.word-letter{justify-content:center;align-items:center;min-width:52px;transition:color .4s,text-shadow .4s;display:flex}.word-letter.magic-e-glow{color:var(--color-magic-e);text-shadow:0 0 20px #ffbe0b99,0 0 40px #ffbe0b4d;animation:1.5s ease-in-out infinite magic-e-pulse}.word-slot{width:var(--block-size);height:var(--block-size);border-radius:var(--block-radius);border:2px dashed #ffffff26;justify-content:center;align-items:center;transition:border-color .3s,background .3s;display:flex;position:relative}.word-slot.active{background:#ffffff0a;border-color:#ffffff59}.word-slot.filled{background:#ffffff0f;border-style:solid;border-color:#fff3}.sound-block{min-width:var(--block-size);height:var(--block-size);padding:0 var(--space-md);border-radius:var(--block-radius);font-family:var(--font-mono);color:var(--color-text-primary);transition:transform .25s var(--ease-spring), box-shadow .25s ease;justify-content:center;align-items:center;font-size:32px;font-weight:700;display:inline-flex;position:relative}.sound-block.category-short-vowel{text-shadow:0 0 12px #ff6b6b66;background:linear-gradient(135deg,#ff6b6b33,#ff6b6b14);border:1px solid #ff6b6b4d}.sound-block.category-long-vowel{text-shadow:0 0 12px #ffd93d66;background:linear-gradient(135deg,#ffd93d33,#ffd93d14);border:1px solid #ffd93d4d}.sound-block.category-consonant{text-shadow:0 0 12px #6bcfff66;background:linear-gradient(135deg,#6bcfff33,#6bcfff14);border:1px solid #6bcfff4d}.sound-block.category-digraph{text-shadow:0 0 12px #c77dff66;background:linear-gradient(135deg,#c77dff33,#c77dff14);border:1px solid #c77dff4d}.sound-block.category-magic-e{text-shadow:0 0 16px #ffbe0b80;background:linear-gradient(135deg,#ffbe0b40,#ffbe0b1a);border:1px solid #ffbe0b66;box-shadow:0 0 20px #ffbe0b26}.sound-block.digraph-fused{letter-spacing:-2px;position:relative}.sound-block.digraph-fused:after{content:"";opacity:.4;background:currentColor;border-radius:2px;width:60%;height:3px;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.candidate-zone{z-index:5;pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.candidate-zone.left{left:var(--space-md)}.candidate-zone.right{right:var(--space-md)}.candidate-block{opacity:.4;transition:opacity .3s ease, transform .3s var(--ease-spring);transform:scale(.85)}.candidate-block.active{opacity:1;transform:scale(1)}.swipe-hint{width:var(--card-width);padding:var(--space-md) var(--space-sm);color:var(--color-text-dim);letter-spacing:1px;text-transform:uppercase;justify-content:space-between;align-items:center;font-size:13px;display:flex}.swipe-hint-arrow{opacity:.4;font-size:18px}.edge-glow{pointer-events:none;opacity:0;z-index:1;width:120px;transition:opacity .2s;position:fixed;top:0;bottom:0}.edge-glow.left{background:linear-gradient(to right, var(--glow-color,#6bcfff4d), transparent);left:0}.edge-glow.right{background:linear-gradient(to left, var(--glow-color,#c77dff4d), transparent);right:0}.edge-glow.active{opacity:1}.phoneme-intro{justify-content:center;align-items:center;gap:var(--space-xl);animation:intro-fade-in .6s var(--ease-out-expo);flex-direction:column;display:flex}.phoneme-intro-symbol{font-family:var(--font-mono);background:linear-gradient(135deg, var(--intro-color,var(--color-consonant)), #ffffffe6);-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 30px var(--intro-color,var(--color-consonant)));-webkit-background-clip:text;background-clip:text;font-size:96px;font-weight:800;animation:2s ease-in-out infinite intro-symbol-pulse}.phoneme-intro-ipa{font-family:var(--font-mono);color:var(--color-text-secondary);letter-spacing:2px;font-size:24px}.phoneme-intro-tap-hint{color:var(--color-text-dim);letter-spacing:2px;text-transform:uppercase;font-size:14px;animation:2s ease-in-out infinite pulse-fade}.constellation-container{bottom:var(--space-lg);z-index:10;position:fixed;left:50%;transform:translate(-50%)}.constellation-toggle{width:44px;height:44px;color:var(--color-text-secondary);cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffff0a;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;font-size:18px;transition:all .3s;display:flex}.constellation-toggle:hover{background:#ffffff14;border-color:#fff3}.constellation-overlay{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);z-index:100;animation:constellation-open .5s var(--ease-out-expo);background:#06060ff2;flex-direction:column;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.constellation-title{letter-spacing:4px;text-transform:uppercase;color:var(--color-text-dim);margin-bottom:var(--space-xl);font-size:14px}.constellation-grid{gap:var(--space-md);max-width:380px;padding:var(--space-md);grid-template-columns:repeat(8,1fr);display:grid}.constellation-star{cursor:pointer;width:36px;height:36px;transition:all .3s var(--ease-spring);border-radius:50%;justify-content:center;align-items:center;font-size:11px;font-weight:600;display:flex;position:relative}.constellation-star.unseen{color:var(--color-text-dim);background:#ffffff0a;border:1px solid #ffffff0f}.constellation-star.learning{border:1px solid;animation:2s ease-in-out infinite star-pulse}.constellation-star.mastered{box-shadow:0 0 12px var(--star-color);border:1px solid}.constellation-star.mastered:after{content:"";border:1px solid var(--star-color);opacity:.3;border-radius:50%;position:absolute;inset:-3px}.constellation-close{top:var(--space-lg);right:var(--space-lg);width:40px;height:40px;color:var(--color-text-secondary);cursor:pointer;background:0 0;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;font-size:20px;transition:all .2s;display:flex;position:absolute}.constellation-close:hover{background:#ffffff0f}.level-indicator{top:var(--space-lg);letter-spacing:3px;text-transform:uppercase;color:var(--color-text-dim);z-index:10;font-size:12px;position:fixed;left:50%;transform:translate(-50%)}.streak-display{top:var(--space-lg);right:var(--space-lg);font-family:var(--font-mono);color:var(--color-text-dim);z-index:10;transition:all .3s var(--ease-spring);font-size:16px;font-weight:700;position:fixed}.streak-display.hot{color:var(--color-correct);text-shadow:0 0 12px #00e67666}.ripple-canvas{pointer-events:none;z-index:50;position:fixed;inset:0}@keyframes intro-fade-in{0%{opacity:0;transform:scale(.9)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes intro-symbol-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes magic-e-pulse{0%,to{text-shadow:0 0 20px #ffbe0b99,0 0 40px #ffbe0b4d}50%{text-shadow:0 0 30px #ffbe0bcc,0 0 60px #ffbe0b80}}@keyframes pulse-fade{0%,to{opacity:.3}50%{opacity:.7}}@keyframes star-pulse{0%,to{box-shadow:0 0 6px var(--star-color);opacity:.7}50%{box-shadow:0 0 14px var(--star-color);opacity:1}}@keyframes constellation-open{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes card-enter{0%{opacity:0;transform:scale(.92)translateY(30px)}to{opacity:1;transform:scale(1)translateY(0)}}@keyframes correct-word-flash{0%{color:var(--color-text-primary);transform:scale(1)}50%{color:var(--color-correct);text-shadow:0 0 20px #00e67680;transform:scale(1.08)}to{color:var(--color-correct);transform:scale(1.04)}}.card-entering{animation:card-enter .45s var(--ease-out-expo)}.word-correct-flash{animation:correct-word-flash .35s var(--ease-out-expo) forwards}