@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/8a480f0b521d4e75-s.8e0177b5.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/7178b3e590c64307-s.b97b3418.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/caa3a2e1cccd8315-s.p.853070df.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Fallback;src:local(Arial);ascent-override:95.94%;descent-override:28.16%;line-gap-override:0.0%;size-adjust:104.76%}.geist_a71539c9-module__T19VSG__className{font-family:Geist,Geist Fallback;font-style:normal}.geist_a71539c9-module__T19VSG__variable{--font-geist-sans:"Geist","Geist Fallback"}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/4fa387ec64143e14-s.c1fdd6c2.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/bbc41e54d2fcbd21-s.799d8ef8.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/797e433ab948586e-s.p.dbea232f.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Mono Fallback;src:local(Arial);ascent-override:74.67%;descent-override:21.92%;line-gap-override:0.0%;size-adjust:134.59%}.geist_mono_8d43a2aa-module__8Li5zG__className{font-family:Geist Mono,Geist Mono Fallback;font-style:normal}.geist_mono_8d43a2aa-module__8Li5zG__variable{--font-geist-mono:"Geist Mono","Geist Mono Fallback"}
:root{--color-background:#0f0f0f;--color-surface:#1a1a1a;--color-text-primary:#f5f5f5;--color-text-secondary:#a0a0a0;--color-text-tertiary:#666;--color-accent:#e0e0e0;--color-accent-hover:#fff;--color-error:#ff6b7a;--color-error-bg:#2a1a1a;--color-border:#333;--color-shadow:#0000004d;--font-display:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","HarmonyOS Sans","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","HarmonyOS Sans","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:"SF Mono","Monaco","Inconsolata","Fira Mono","Consolas",monospace;--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--spacing-2xl:48px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-full:9999px;--shadow-sm:0 1px 2px var(--color-shadow);--shadow-md:0 4px 12px var(--color-shadow);--shadow-lg:0 8px 24px var(--color-shadow);--transition-fast:.15s cubic-bezier(.4,0,.2,1);--transition-base:.25s cubic-bezier(.4,0,.2,1);--transition-slow:.35s cubic-bezier(.4,0,.2,1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--color-background);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:hidden}.video-background{z-index:-1;background:linear-gradient(135deg,#0f0c29 0%,#302b63 50%,#24243e 100%);width:100%;height:100%;position:fixed;top:0;left:0;overflow:hidden}.video-background video{object-fit:cover;opacity:0;width:100%;height:100%;transition:opacity 1s ease-in-out}.video-background video.loaded{opacity:1}.video-background:before{content:"";background:radial-gradient(circle at 20% 80%,#667eea26 0%,#0000 50%),radial-gradient(circle at 80% 20%,#764ba226 0%,#0000 50%),radial-gradient(circle at 40% 40%,#667eea1a 0%,#0000 30%);animation:8s ease-in-out infinite backgroundPulse;position:absolute;inset:0}.video-background:after{content:"";background:radial-gradient(circle,#ffffff08 0%,#0000 60%);width:200%;height:200%;animation:15s linear infinite backgroundGlow;position:absolute;top:-50%;left:-50%}@keyframes backgroundPulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes backgroundGlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.video-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#0009;width:100%;height:100%;position:absolute;top:0;left:0}.container{width:100%;min-height:100vh;padding:var(--spacing-lg);flex-direction:column;align-items:center;display:flex;position:relative;overflow-y:auto}.start-screen{width:100%;max-width:600px;padding:var(--spacing-2xl);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1a1a1ad9;border:1px solid #ffffff1a;flex-direction:column;justify-content:center;align-items:center;display:flex}.start-screen h1{font-family:var(--font-display);color:var(--color-text-primary);margin-bottom:var(--spacing-xl);font-size:2.5rem;font-weight:600}.start-button{font-family:var(--font-body);padding:var(--spacing-md)var(--spacing-2xl);color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;font-size:1.25rem;font-weight:600;box-shadow:0 4px 15px #667eea66}.start-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea80}.start-button:active{transform:translateY(0)}.main-content{border-radius:var(--radius-lg);width:100%;height:80vh;box-shadow:none;background:0 0;border:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.listen-screen{text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.headphone-container{margin-bottom:var(--spacing-2xl);position:relative}.headphone-icon{filter:drop-shadow(0 4px 8px #0000001a);font-size:6rem;line-height:1;animation:3s ease-in-out infinite float}.pulse-ring{border:2px solid var(--color-accent);opacity:0;border-radius:50%;width:8rem;height:8rem;animation:2s ease-out infinite pulse-ring;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes pulse-ring{0%{opacity:.6;transform:translate(-50%,-50%)scale(.8)}to{opacity:0;transform:translate(-50%,-50%)scale(1.4)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.listen-text{font-family:var(--font-display);color:var(--color-text-primary);letter-spacing:.05em;text-transform:uppercase;text-shadow:0 2px 10px #0000004d;font-size:2rem;font-weight:600}.text-screen{width:100%;height:100%;padding:var(--spacing-2xl);flex-direction:column;justify-content:center;align-items:center;display:flex;position:relative}.text-content{text-align:center;flex-direction:column;justify-content:center;align-items:center;width:100%;max-width:100%;animation:.5s ease-out fadeIn;display:flex}.english-text{font-family:var(--font-display);color:var(--color-text-primary);margin-bottom:var(--spacing-md);letter-spacing:.02em;text-shadow:0 2px 10px #0000004d;font-size:2.5rem;font-weight:600;line-height:1.3;animation:.5s ease-out slideUp}.phonetic-text{font-family:var(--font-mono);color:var(--color-text-tertiary);margin-bottom:var(--spacing-lg);letter-spacing:.08em;font-size:1.1rem;font-weight:400;animation:.5s ease-out .1s both slideUp}.chinese-text{font-family:var(--font-body);color:var(--color-text-secondary);text-shadow:0 2px 8px #0000004d;font-size:1.5rem;font-weight:400;line-height:1.8;animation:.5s ease-out .2s both slideUp}.slow-tag{top:var(--spacing-lg);right:var(--spacing-lg);align-items:center;gap:var(--spacing-xs);background:var(--color-surface);padding:var(--spacing-sm)var(--spacing-md);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);border:1px solid var(--color-border);animation:.3s ease-out fadeIn;display:flex;position:absolute}.slow-dot{background:var(--color-accent);border-radius:50%;width:8px;height:8px;animation:1.5s ease-in-out infinite slowPulse}@keyframes slowPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.controls-wrapper{bottom:var(--spacing-lg);right:var(--spacing-lg);z-index:10;align-items:flex-end;gap:var(--spacing-sm);flex-direction:column;display:flex;position:absolute}.controls-container{align-items:center;gap:var(--spacing-md);background:var(--color-surface);padding:var(--spacing-sm)var(--spacing-md);border-radius:var(--radius-full);box-shadow:var(--shadow-md);border:1px solid var(--color-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex}.progress-indicator{top:var(--spacing-lg);right:var(--spacing-lg);padding:var(--spacing-sm)var(--spacing-md);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;background:#1a1a1ad9;border:1px solid #ffffff1a;position:fixed}.progress-text{font-family:var(--font-body);color:var(--color-text-secondary);letter-spacing:.05em;font-size:.875rem;font-weight:500}.control-btn{justify-content:center;align-items:center;gap:var(--spacing-xs);background:var(--color-surface);border:1px solid var(--color-border);cursor:pointer;padding:var(--spacing-sm);border-radius:var(--radius-md);transition:all var(--transition-fast);flex-direction:column;min-width:60px;display:flex}.control-btn:hover{box-shadow:var(--shadow-sm);background:#252525;transform:translateY(-2px)}.control-btn:active{transform:translateY(0)}.btn-icon{font-size:1.5rem;line-height:1}.btn-label{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;font-weight:500}.volume-control{align-items:center;gap:var(--spacing-sm);padding:0 var(--spacing-sm);display:flex}.volume-icon{color:var(--color-text-secondary);font-size:1.2rem}.volume-slider{appearance:none;cursor:pointer;width:100px;height:4px;transition:all var(--transition-fast);background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);border-radius:2px;outline:none}.volume-slider::-webkit-slider-thumb{appearance:none;cursor:pointer;width:16px;height:16px;transition:transform var(--transition-fast);background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;box-shadow:0 2px 8px #667eea66}.volume-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.volume-slider::-moz-range-thumb{cursor:pointer;width:16px;height:16px;transition:transform var(--transition-fast);background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:50%;box-shadow:0 2px 8px #667eea66}.volume-slider::-moz-range-thumb:hover{transform:scale(1.2)}.volume-value{color:var(--color-text-tertiary);text-align:center;min-width:40px;font-size:.75rem;font-weight:500}.level-selector,.sentence-selector{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-family:var(--font-body);padding:var(--spacing-sm)var(--spacing-md);cursor:pointer;transition:all var(--transition-fast);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M6 9L2 5L3.41 3.59L6 6.17L8.59 3.59L10 5L6 9Z' fill='%23a0a0a0'/%3E%3C/svg%3E");background-position:right 8px center;background-repeat:no-repeat;background-size:12px;min-width:100px;padding-right:32px;font-size:.875rem}.level-selector:hover,.sentence-selector:hover{border-color:var(--color-accent);box-shadow:var(--shadow-sm);background:#252525;transform:translateY(-1px)}.level-selector:focus,.sentence-selector:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 2px #667eea33}.level-selector option,.sentence-selector option{background:var(--color-surface);color:var(--color-text-primary);padding:var(--spacing-sm)}.level-selector option:hover,.sentence-selector option:hover{background:#252525}.level-control{align-items:center;gap:var(--spacing-sm);padding:0 var(--spacing-sm);display:flex}.level-icon{color:var(--color-text-secondary);font-size:1.2rem}.progress-indicator .sentence-selector{margin-left:var(--spacing-md);min-width:200px;padding:var(--spacing-xs)var(--spacing-sm);font-size:.75rem}.level-selector-container{top:var(--spacing-lg);left:var(--spacing-lg);z-index:100;padding:var(--spacing-sm)var(--spacing-md);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1a1a1ad9;border:1px solid #ffffff1a;position:fixed}.error-toast{top:calc(var(--spacing-lg)*3);left:var(--spacing-lg);z-index:100;animation:.3s ease-out slideInRight;position:absolute}.error-content{align-items:center;gap:var(--spacing-sm);background:var(--color-error-bg);color:var(--color-error);padding:var(--spacing-sm)var(--spacing-md);border-radius:var(--radius-md);border-left:3px solid var(--color-error);box-shadow:var(--shadow-md);max-width:300px;display:flex}.error-icon{flex-shrink:0;font-size:1.2rem}.error-message{font-size:.875rem;font-weight:500;line-height:1.4}.error-dismiss{color:var(--color-error);cursor:pointer;padding:var(--spacing-xs);opacity:.6;transition:opacity var(--transition-fast);background:0 0;border:none;margin-left:auto;font-size:1rem;line-height:1}.error-dismiss:hover{opacity:1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.hidden{display:none!important}@media (max-width:768px){.main-content{border-radius:var(--radius-md);height:70vh}.headphone-icon{font-size:5rem}.pulse-ring{width:6rem;height:6rem}.listen-text{font-size:1.5rem}.english-text{font-size:2rem}.phonetic-text{font-size:.9rem}.chinese-text{font-size:1.1rem}.controls-wrapper{bottom:var(--spacing-md);right:var(--spacing-md);left:var(--spacing-md)}.controls-container{justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-xs)var(--spacing-sm)}.volume-slider{width:80px}.error-toast{top:var(--spacing-md);left:var(--spacing-md);right:var(--spacing-md)}.error-content{max-width:100%}}@media (max-width:480px){.headphone-icon{font-size:4rem}.pulse-ring{width:5rem;height:5rem}.listen-text{font-size:1.25rem}.english-text{font-size:1.75rem}.chinese-text{font-size:1rem}.control-btn{min-width:50px}.btn-icon{font-size:1.25rem}.volume-slider{width:60px}}.home-container{width:100%;max-width:1200px;padding:var(--spacing-2xl);align-items:center;gap:var(--spacing-2xl);flex-direction:column;display:flex}.home-header{text-align:center;margin-bottom:var(--spacing-lg)}.home-header h1{font-family:var(--font-display);color:var(--color-text-primary);margin-bottom:var(--spacing-md);text-shadow:0 2px 10px #0000004d;font-size:3rem;font-weight:600}.home-header p{color:var(--color-text-secondary);max-width:600px;margin:0 auto;font-size:1.25rem}.course-grid{gap:var(--spacing-lg);width:100%;margin-top:var(--spacing-xl);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));display:grid}.course-card{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);transition:all var(--transition-base);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1a1a1ad9;border:1px solid #ffffff1a;overflow:hidden}.course-card:hover{border-color:#fff3;transform:translateY(-5px);box-shadow:0 12px 30px #0006}.course-image{width:100%;height:180px;overflow:hidden}.course-image img{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-slow)}.course-card:hover .course-image img{transform:scale(1.05)}.course-info{padding:var(--spacing-lg);gap:var(--spacing-sm);flex-direction:column;display:flex}.course-info h3{font-family:var(--font-display);color:var(--color-text-primary);margin:0;font-size:1.25rem;font-weight:600}.course-info p{color:var(--color-text-secondary);flex-grow:1;margin:0;font-size:.9rem;line-height:1.4}.course-level{color:#667eea;padding:var(--spacing-xs)var(--spacing-md);border-radius:var(--radius-full);margin-top:var(--spacing-sm);background:#667eea33;border:1px solid #667eea80;align-self:flex-start;font-size:.8rem;font-weight:600;display:inline-block}.back-button{top:var(--spacing-lg);left:var(--spacing-lg);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--spacing-sm)var(--spacing-md);cursor:pointer;transition:all var(--transition-fast);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;background:#1a1a1ad9;font-size:.9rem;font-weight:500;position:absolute}.back-button:hover{box-shadow:var(--shadow-sm);border-color:var(--color-accent);background:#252525;transform:translateY(-2px)}.loading-container{width:100%;min-height:400px;color:var(--color-text-secondary);justify-content:center;align-items:center;font-size:1.2rem;display:flex}@media (max-width:768px){.home-container{padding:var(--spacing-lg)}.home-header h1{font-size:2.5rem}.course-grid{gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.course-image{height:150px}.loading-container{min-height:300px;font-size:1rem}}@media (max-width:480px){.home-header h1{font-size:2rem}.home-header p{font-size:1rem}.course-grid{grid-template-columns:1fr}.course-image{height:120px}.course-info{padding:var(--spacing-md)}.course-info h3{font-size:1.1rem}}.course-info-screen{width:100%;min-height:80vh;padding:var(--spacing-2xl);text-align:center;flex-direction:column;justify-content:center;align-items:center;max-width:600px;margin:auto;animation:.5s ease-out fadeIn;display:flex}:is(.main-content:has(.course-info-screen)~.progress-indicator,.main-content:has(.course-info-screen)~.controls-wrapper){display:none!important}.course-info-screen h2{font-family:var(--font-display);color:var(--color-text-primary);margin-bottom:var(--spacing-lg);text-shadow:0 2px 10px #0000004d;font-size:2.5rem;font-weight:600;animation:.5s ease-out slideUp}.course-info-screen p{color:var(--color-text-secondary);margin-bottom:var(--spacing-xl);font-size:1.2rem;line-height:1.6;animation:.5s ease-out .1s both slideUp}.course-info-screen .course-level{color:#667eea;margin:0 auto var(--spacing-xl);background:#667eea33;border:1px solid #667eea80;animation:.5s ease-out .2s both slideUp}.course-info-screen .start-learning-button{font-family:var(--font-body);padding:var(--spacing-md)var(--spacing-2xl);color:#fff;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);margin-top:var(--spacing-xl);background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;font-size:1.25rem;font-weight:600;animation:.5s ease-out .3s both slideUp;box-shadow:0 4px 15px #667eea66}.course-info-screen .start-learning-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea80}.course-info-screen .start-learning-button:active{transform:translateY(0)}@media (max-width:768px){.course-info-screen{padding:var(--spacing-xl);max-width:100%}.course-info-screen h2{font-size:2rem}.course-info-screen p{font-size:1rem}.back-button{top:var(--spacing-md);left:var(--spacing-md);padding:var(--spacing-xs)var(--spacing-sm);font-size:.8rem}.progress-indicator{top:var(--spacing-md);right:var(--spacing-md);padding:var(--spacing-xs)var(--spacing-sm);font-size:.75rem}.progress-indicator .sentence-selector{margin-left:var(--spacing-sm);min-width:150px;padding:var(--spacing-xs);font-size:.65rem}}@media (max-width:480px){.course-info-screen{padding:var(--spacing-lg)}.course-info-screen h2{font-size:1.75rem}.course-info-screen p{font-size:.9rem}.back-button{top:var(--spacing-sm);left:var(--spacing-sm)}.progress-indicator{top:var(--spacing-sm);right:var(--spacing-sm)}.progress-indicator .sentence-selector{min-width:120px}}