@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap";:root{--color-bg-gradient-start: #3d5a5c;--color-bg-gradient-end: #c9b89a;--color-text-primary: #1a1a2e;--color-text-secondary: rgba(26, 26, 46, .7);--color-text-muted: rgba(26, 26, 46, .5);--color-accent: #2c6e6a;--color-accent-light: #e0f0ee;--color-accent-dark: #1a4d4a;--color-success: #2e7d32;--color-success-bg: #e8f5e9;--color-warning: #f57c00;--color-warning-bg: #fff3e0;--color-error: #c62828;--color-error-bg: #ffebee;--color-info: #1565c0;--color-info-bg: #e3f2fd;--color-white: #ffffff;--color-surface: rgba(255, 255, 255, .6);--color-surface-hover: rgba(255, 255, 255, .8);--color-cta-start: #667eea;--color-cta-end: #764ba2;--glass-bg: rgba(255, 255, 255, .25);--glass-border: rgba(255, 255, 255, .3);--glass-blur: 20px;--glass-shadow: 0 8px 32px rgba(0, 0, 0, .1);--glass-shadow-elevated: 0 20px 40px rgba(0, 0, 0, .15);--font-display: "Playfair Display", Georgia, serif;--font-body: "Inter", -apple-system, sans-serif;--font-mono: "JetBrains Mono", monospace;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--radius-pill: 9999px;--transition-fast: .15s ease;--transition-normal: .25s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-body);background:linear-gradient(135deg,var(--color-bg-gradient-start),var(--color-bg-gradient-end));background-attachment:fixed;background-size:cover;min-height:100vh;color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:var(--font-mono)}button,input,textarea,select{font-family:var(--font-body)}.responsive-track-outer{align-items:flex-end;margin-left:auto}.responsive-track-inner{align-items:flex-end;text-align:right}@media (max-width: 950px){.responsive-track-outer{align-items:flex-start;margin-left:0;width:100%;margin-top:16px}.responsive-track-inner{align-items:flex-start;text-align:left}}.flex-col{display:flex!important;flex-direction:column!important}.flex-row{display:flex!important;flex-direction:row!important}.items-center{align-items:center}.justify-center{justify-content:center}.gap-xs{gap:4px!important}.gap-sm{gap:8px!important}.gap-md{gap:16px!important}.gap-lg{gap:24px!important}.gap-xl{gap:32px!important}.app-container{width:100%;max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:20px;padding:32px 32px 64px;align-items:stretch}@media (max-width: 768px){.app-container{padding:24px;gap:16px}}.header-container{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:0}.brand-title{margin:0;font-size:20px;color:var(--color-white);font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;justify-content:center;gap:6px}.brand-subtitle{color:#fff9;font-size:11px;font-weight:400;margin-top:2px;letter-spacing:.02em}.greeting-text{color:#fffffff2;font-size:32px;font-weight:300;margin-top:16px;font-family:var(--font-display);letter-spacing:-.02em;text-shadow:0 2px 10px rgba(0,0,0,.1)}.btn--pro{background:linear-gradient(135deg,#d4af37,#aa8c2c);color:#fff;border:none;font-weight:600;box-shadow:0 4px 12px #aa8c2c4d;transform:translateZ(0);letter-spacing:.02em}.btn--pro:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 6px 16px #aa8c2c66}.glass-card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid rgba(255,255,255,.4);box-shadow:var(--glass-shadow),inset 0 1px 1px #ffffff4d,0 4px 20px #0000000d;border-radius:var(--radius-lg);padding:var(--space-lg);transition:var(--transition-normal)}.glass-card:hover{border-color:#fff9;box-shadow:var(--glass-shadow-elevated),inset 0 1px 2px #fff6}.glass-card--subtle{background:#ffffff26;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);padding:var(--space-md)}.glass-card--elevated{background:#ffffffd9;-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);border:1px solid rgba(255,255,255,.5);box-shadow:var(--glass-shadow-elevated);border-radius:var(--radius-lg);padding:var(--space-xl)}.page-wrapper{max-width:900px;margin:0 auto;padding:var(--space-md);padding-top:max(80px,12vh);padding-bottom:120px;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:20px}.flex-center{display:flex;justify-content:center;align-items:center}.flex-col{display:flex;flex-direction:column}.flex-row{display:flex;flex-direction:row}.gap-lg{gap:var(--space-lg)}.gap-xl{gap:var(--space-xl)}.w-full{width:100%}.flex-column{display:flex;flex-direction:column}.flex-center-all{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.layout-grid-compact{display:grid;grid-template-columns:1fr;gap:var(--space-md)}@media (min-width: 768px){.layout-grid-compact{grid-template-columns:1fr 1fr}}.target-canvas{min-height:200px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-inline:var(--space-md);padding-top:var(--space-md);padding-bottom:var(--space-md);position:relative;width:100%}.text-hero{font-family:var(--font-display);font-size:clamp(32px,8vw,48px);font-weight:700;color:var(--color-white);text-align:center;letter-spacing:-.02em;margin-bottom:var(--space-xs);text-shadow:0 2px 10px rgba(0,0,0,.1);overflow-wrap:anywhere}.text-subtitle{font-family:var(--font-body);font-size:14px;color:var(--color-text-muted);text-align:center;margin-bottom:var(--space-lg);font-weight:400}.text-main-display{font-family:var(--font-display);overflow-wrap:anywhere!important;-webkit-hyphens:auto!important;hyphens:auto!important;text-align:center;word-break:normal;max-width:100%;width:100%;box-sizing:border-box;display:block}.text-heading{font-family:var(--font-display);font-size:24px;font-weight:600;color:var(--color-text-primary);margin-bottom:var(--space-md);overflow-wrap:anywhere}.text-body{font-size:16px;color:var(--color-text-secondary);line-height:1.6}.text-caption{font-size:13px;color:var(--color-text-muted)}.text-center{text-align:center}.input,.textarea{width:100%;padding:var(--space-md);border-radius:var(--radius-md);border:1px solid var(--glass-border);background:#fff9;font-size:16px;color:var(--color-text-primary);transition:var(--transition-fast);outline:none}:root{--transition-fast: .15s ease;--transition-normal: .25s ease;--game-scale: 1}@media (max-width: 480px){:root{--game-scale: .75}}.input:focus,.textarea:focus{background:#ffffffe6;border-color:var(--color-accent);box-shadow:0 0 0 2px var(--color-accent-light)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:12px 24px;border-radius:var(--radius-pill);font-weight:600;cursor:pointer;transition:var(--transition-fast);border:none;font-size:15px;text-decoration:none}.btn:disabled{opacity:.6;cursor:not-allowed;filter:grayscale(1)}.btn--primary{background-color:var(--color-accent);color:#fff;box-shadow:0 4px 12px #2c6e6a40;transform:translateZ(0)}.btn--primary:not(:disabled):hover{background-color:var(--color-accent-dark);transform:translateY(-1px);box-shadow:0 6px 16px #2c6e6a59}.btn--secondary{background:#fff6;color:var(--color-text-primary);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.btn--secondary:not(:disabled):hover{background:#fff9;border-color:#ffffff80}.btn--cta{background:linear-gradient(135deg,var(--color-cta-start),var(--color-cta-end));color:#fff;font-weight:700;box-shadow:0 8px 24px #667eea66}.btn--cta:not(:disabled):hover{filter:brightness(1.1);transform:translateY(-2px)}.btn--ghost{background:transparent;color:var(--color-text-secondary);border:none;border-radius:var(--radius-sm);transition:var(--transition-fast)}.btn--ghost:hover{background:#0000000a;color:var(--color-text-primary)}.btn--pro{background:linear-gradient(135deg,#facc15,#fbbf24);color:#78350f;border:none;font-weight:700;box-shadow:0 0 10px #facc1566;animation:pro-glow 2s infinite ease-in-out;transform:translateZ(0)}.btn--pro:hover{filter:brightness(1.1);transform:translateY(-1px);box-shadow:0 0 15px #facc1599}@keyframes pro-glow{0%{box-shadow:0 0 5px #facc1566}50%{box-shadow:0 0 15px #facc15b3}to{box-shadow:0 0 5px #facc1566}}.btn--icon{width:32px;height:32px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:#ffffff1a;color:#fff;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.btn--icon:hover{background:#fff3;transform:translateY(-1px)}.tab-group{display:flex!important;background:#64646414;padding:4px;border-radius:var(--radius-pill);gap:4px;overflow-x:auto;white-space:nowrap;-ms-overflow-style:none;scrollbar-width:none;width:auto;max-width:100%}.tab-group::-webkit-scrollbar{display:none}.tab{padding:8px 16px;border-radius:var(--radius-pill);cursor:pointer;font-size:13px;font-weight:600;color:#1a1a2e99;transition:var(--transition-fast);background:transparent;border:none;flex-shrink:0}.tab:hover{color:var(--color-text-primary);background:#fff3}.tab.active{background:#fff;color:var(--color-accent);font-weight:700;box-shadow:0 2px 8px #00000014}.phoneme-pill{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 12px;border-radius:var(--radius-sm);min-width:44px;background:var(--color-surface);border:1px solid var(--glass-border);transition:var(--transition-fast)}.phoneme-pill__char{font-weight:700;font-size:18px;color:var(--color-text-primary);line-height:1.2}.phoneme-pill__label{font-size:10px;margin-top:4px;text-transform:uppercase;font-weight:600;opacity:.7}.phoneme-pill--correct{background-color:#2ecc7126;border-color:#2ecc7166;color:var(--color-success)}.phoneme-pill--correct .phoneme-pill__char{color:var(--color-success)}.phoneme-pill--close{background-color:#f1c40f26;border-color:#f1c40f66;color:var(--color-warning)}.phoneme-pill--close .phoneme-pill__char{color:var(--color-warning)}.phoneme-pill--wrong{background-color:#e74c3c26;border-color:#e74c3c66;color:var(--color-error)}.phoneme-pill--wrong .phoneme-pill__char{color:var(--color-error)}.phoneme-pill--missing{background-color:#e74c3c0d;border-color:#e74c3c33;border-style:dashed;color:var(--color-error);opacity:.7}.phoneme-pill--missing .phoneme-pill__char{color:var(--color-error)}.phoneme-pill--extra{background-color:#3498db26;border-color:#3498db66;color:var(--color-info)}.phoneme-pill--extra .phoneme-pill__char{color:var(--color-info)}.alert{padding:var(--space-md);border-radius:var(--radius-sm);font-size:14px;margin-bottom:var(--space-md)}.alert--error{background-color:var(--color-error-bg);color:var(--color-error);border:1px solid var(--color-error)}.alert--success{background-color:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-success)}@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 #dc3545b3}70%{transform:scale(1.05);box-shadow:0 0 0 10px #dc354500}to{transform:scale(1);box-shadow:0 0 #dc354500}}.animate-pulse{animation:pulse 1.5s infinite}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .4s ease-out forwards}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#0000001a;border-radius:4px}.word-group{position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden;flex-direction:column;align-items:center}.word-group:hover,.word-group.force-open{background:#ffffff40!important;box-shadow:0 8px 32px #0000000d;transform:translateY(-2px);z-index:10}.correction-row{max-height:0;opacity:0;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);margin-top:0;display:flex;flex-direction:column;align-items:center;width:100%}.word-group:hover .correction-row,.word-group.force-open .correction-row{max-height:200px;opacity:1;margin-top:12px;padding-top:12px;border-top:1px solid rgba(0,0,0,.05)}.shadow-passage{font-size:clamp(16px,4vw,22px);line-height:1.75;color:var(--color-text-primary);text-align:left;width:100%}.shadow-word{display:inline;transition:color .15s ease,background .15s ease,box-shadow .15s ease;border-radius:4px}.shadow-word--active{color:var(--color-accent);background:#2c6e6a26;box-shadow:0 0 0 4px #2c6e6a26}.shadow-word--done{opacity:.35}.shadow-controls{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;padding:8px 0}.pace-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;max-width:260px;height:4px;border-radius:2px;background:linear-gradient(to right,var(--color-accent) 0%,var(--color-accent) var(--pct, 50%),rgba(0,0,0,.1) var(--pct, 50%),rgba(0,0,0,.1) 100%);outline:none;cursor:pointer}.pace-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-accent);box-shadow:0 2px 6px #2c6e6a59;cursor:pointer;transition:transform .12s ease}.pace-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.pace-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-accent);border:none;box-shadow:0 2px 6px #2c6e6a59;cursor:pointer}