:root{--primary-gradient:linear-gradient(135deg,#667eea 0%,#764ba2 100%);--primary-color:#667eea;--primary-dark:#5a6fd6;--secondary-color:#764ba2;--daily-life:#10b981;--daily-life-bg:#10b9811a;--business:#3b82f6;--business-bg:#3b82f61a;--travel:#f59e0b;--travel-bg:#f59e0b1a;--social:#ec4899;--social-bg:#ec48991a;--bg-primary:#f8fafc;--bg-secondary:#fff;--bg-tertiary:#f1f5f9;--text-primary:#1e293b;--text-secondary:#64748b;--text-muted:#94a3b8;--border-color:#e2e8f0;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;--shadow-xl:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--spacing-3xl:4rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-2xl:1.5rem;--radius-full:9999px;--transition-fast:.15s ease;--transition-base:.2s ease;--transition-slow:.3s ease;--font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--font-size-5xl:3rem}[data-theme=dark]{--bg-primary:#0f172a;--bg-secondary:#1e293b;--bg-tertiary:#334155;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-muted:#64748b;--border-color:#334155;--shadow-sm:0 1px 2px 0 #0000004d;--shadow-md:0 4px 6px -1px #0006,0 2px 4px -1px #0000004d;--shadow-lg:0 10px 15px -3px #0006,0 4px 6px -2px #0000004d}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--text-primary);background-color:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}button{cursor:pointer;background:0 0;border:none;font-family:inherit}ul{list-style:none}.container{width:100%;max-width:1200px;padding:0 var(--spacing-lg);margin:0 auto}.gradient-text{background:var(--primary-gradient);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.navbar{z-index:1000;-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-color);transition:var(--transition-base);background:#fffc;position:fixed;top:0;left:0;right:0}[data-theme=dark] .navbar{background:#0f172acc}.nav-container{max-width:1200px;padding:var(--spacing-md)var(--spacing-lg);justify-content:space-between;align-items:center;margin:0 auto;display:flex}.logo{align-items:center;gap:var(--spacing-sm);font-weight:700;font-size:var(--font-size-xl);display:flex}.logo-icon{font-size:1.5rem}.nav-links{gap:var(--spacing-xl);display:flex}.nav-link{color:var(--text-secondary);transition:var(--transition-fast);font-weight:500;position:relative}.nav-link:hover{color:var(--primary-color)}.nav-link:after{content:"";background:var(--primary-gradient);width:0;height:2px;transition:var(--transition-base);position:absolute;bottom:-4px;left:0}.nav-link:hover:after{width:100%}.theme-toggle{border-radius:var(--radius-full);background:var(--bg-tertiary);width:40px;height:40px;transition:var(--transition-base);justify-content:center;align-items:center;display:flex}.theme-toggle:hover{background:var(--border-color);transform:scale(1.05)}.theme-icon{font-size:1.25rem}.hero{min-height:100vh;padding:calc(80px + var(--spacing-3xl))0 var(--spacing-3xl);align-items:center;display:flex;position:relative;overflow:hidden}.hero:before{content:"";pointer-events:none;background:radial-gradient(circle at 20% 80%,#667eea26 0%,#0000 50%),radial-gradient(circle at 80% 20%,#764ba226 0%,#0000 50%);position:absolute;inset:0}.hero-container{justify-content:space-between;align-items:center;gap:var(--spacing-2xl);z-index:1;display:flex;position:relative}.hero-content{flex-shrink:0;max-width:600px}.hero-badge{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm)var(--spacing-md);background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-full);font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-sm);font-weight:500;display:inline-flex}.hero-title{font-size:clamp(2.5rem,5vw,var(--font-size-5xl));margin-bottom:var(--spacing-lg);letter-spacing:-.02em;font-weight:700;line-height:1.2}.hero-subtitle{font-size:var(--font-size-lg);color:var(--text-secondary);margin-bottom:var(--spacing-xl);max-width:500px}.hero-actions{gap:var(--spacing-md);margin-bottom:var(--spacing-2xl);display:flex}.btn{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md)var(--spacing-xl);border-radius:var(--radius-lg);font-weight:600;font-size:var(--font-size-base);transition:var(--transition-base);display:inline-flex}.btn-primary{background:var(--primary-gradient);color:#fff;box-shadow:var(--shadow-md),0 0 0 0 #667eea66}.btn-primary:hover{box-shadow:var(--shadow-lg),0 0 20px #667eea66;transform:translateY(-2px)}.btn-arrow{transition:var(--transition-fast)}.btn-primary:hover .btn-arrow{transform:translate(4px)}.btn-secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--bg-tertiary);border-color:var(--text-muted)}.hero-stats{gap:var(--spacing-2xl);display:flex}.stat{flex-direction:column;display:flex}.stat-number{font-size:var(--font-size-2xl);color:var(--primary-color);font-weight:700}.stat-label{font-size:var(--font-size-sm);color:var(--text-secondary)}.hero-visual{flex-shrink:0;width:400px;height:400px;position:relative}.floating-cards{width:100%;height:100%;position:relative}.floating-card{padding:var(--spacing-md)var(--spacing-lg);background:var(--bg-secondary);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);font-weight:600;font-size:var(--font-size-lg);border:1px solid var(--border-color);animation:6s ease-in-out infinite float;position:absolute}.card-1{animation-delay:0s;top:10%;left:10%}.card-2{animation-delay:1.5s;top:30%;right:5%}.card-3{animation-delay:3s;bottom:30%;left:5%}.card-4{animation-delay:4.5s;bottom:10%;right:15%}@keyframes float{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-20px)rotate(2deg)}}.categories{padding:var(--spacing-3xl)0;background:var(--bg-secondary)}.section-header{text-align:center;margin-bottom:var(--spacing-2xl)}.section-title{font-size:var(--font-size-3xl);margin-bottom:var(--spacing-sm);font-weight:700}.section-subtitle{font-size:var(--font-size-lg);color:var(--text-secondary)}.category-tabs{justify-content:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-2xl);flex-wrap:wrap;display:flex}.category-tab{padding:var(--spacing-sm)var(--spacing-lg);border-radius:var(--radius-full);color:var(--text-secondary);background:var(--bg-tertiary);transition:var(--transition-base);font-weight:500}.category-tab:hover{color:var(--text-primary);background:var(--border-color)}.category-tab.active{background:var(--primary-gradient);color:#fff}.scenarios-grid{gap:var(--spacing-lg);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.scenario-card{background:var(--bg-primary);border-radius:var(--radius-xl);padding:var(--spacing-xl);border:1px solid var(--border-color);transition:var(--transition-base);cursor:pointer;position:relative;overflow:hidden}.scenario-card:before{content:"";background:var(--category-color,var(--primary-gradient));opacity:0;height:4px;transition:var(--transition-base);position:absolute;top:0;left:0;right:0}.scenario-card:hover{box-shadow:var(--shadow-xl);border-color:#0000;transform:translateY(-4px)}.scenario-card:hover:before{opacity:1}.scenario-icon{margin-bottom:var(--spacing-md);font-size:2.5rem}.scenario-name{font-size:var(--font-size-xl);margin-bottom:var(--spacing-xs);font-weight:600}.scenario-name-en{font-size:var(--font-size-sm);color:var(--text-muted);margin-bottom:var(--spacing-md)}.scenario-description{font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--spacing-md);line-height:1.5}.scenario-meta{align-items:center;gap:var(--spacing-md);display:flex}.scenario-level{font-size:var(--font-size-xs);padding:var(--spacing-xs)var(--spacing-sm);border-radius:var(--radius-full);background:var(--category-bg,var(--bg-tertiary));color:var(--category-color,var(--text-secondary));font-weight:500}.scenario-count{font-size:var(--font-size-xs);color:var(--text-muted)}.scenario-card[data-category=daily]{--category-color:var(--daily-life);--category-bg:var(--daily-life-bg)}.scenario-card[data-category=business]{--category-color:var(--business);--category-bg:var(--business-bg)}.scenario-card[data-category=travel]{--category-color:var(--travel);--category-bg:var(--travel-bg)}.scenario-card[data-category=social]{--category-color:var(--social);--category-bg:var(--social-bg)}.features{padding:var(--spacing-3xl)0;background:var(--bg-primary)}.features-grid{gap:var(--spacing-lg);grid-template-columns:repeat(auto-fit,minmax(250px,1fr));display:grid}.feature-card{text-align:center;padding:var(--spacing-2xl);border-radius:var(--radius-xl);background:var(--bg-secondary);border:1px solid var(--border-color);transition:var(--transition-base)}.feature-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}.feature-icon{margin-bottom:var(--spacing-md);font-size:3rem}.feature-card h3{font-size:var(--font-size-xl);margin-bottom:var(--spacing-sm);font-weight:600}.feature-card p{font-size:var(--font-size-sm);color:var(--text-secondary)}.footer{padding:var(--spacing-2xl)0 var(--spacing-lg);background:var(--bg-secondary);border-top:1px solid var(--border-color)}.footer-content{align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-xl);flex-direction:column;display:flex}.footer-brand{align-items:center;gap:var(--spacing-sm);font-size:var(--font-size-xl);font-weight:700;display:flex}.footer-text{color:var(--text-secondary)}.footer-bottom{text-align:center;padding-top:var(--spacing-lg);border-top:1px solid var(--border-color)}.footer-bottom p{font-size:var(--font-size-sm);color:var(--text-muted)}@media (max-width:1024px){.hero-visual{display:none}.hero-container{text-align:center;flex-direction:column}.hero-content{max-width:100%}.hero-subtitle{max-width:100%;margin-left:auto;margin-right:auto}.hero-actions,.hero-stats{justify-content:center}}@media (max-width:768px){.nav-links{display:none}.hero-title{font-size:var(--font-size-3xl)}.hero-actions{flex-direction:column;align-items:center}.btn{justify-content:center;width:100%;max-width:280px}.hero-stats{gap:var(--spacing-lg);flex-wrap:wrap}.category-tabs{padding-bottom:var(--spacing-sm);justify-content:flex-start;overflow-x:auto}}.scene-header{padding:calc(80px + var(--spacing-2xl))var(--spacing-lg)var(--spacing-2xl);background:var(--bg-secondary);border-bottom:1px solid var(--border-color)}.scene-header-content{max-width:800px;margin:0 auto}.breadcrumb{align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);font-size:var(--font-size-sm);color:var(--text-secondary);display:flex}.breadcrumb a{color:var(--primary-color)}.breadcrumb a:hover{text-decoration:underline}.scene-title-row{align-items:center;gap:var(--spacing-lg);margin-bottom:var(--spacing-md);display:flex}.scene-icon{font-size:3rem}.scene-titles h1{font-size:var(--font-size-3xl);margin-bottom:var(--spacing-xs);font-weight:700}.scene-titles .name-en{font-size:var(--font-size-lg);color:var(--text-secondary)}.scene-description{font-size:var(--font-size-lg);color:var(--text-secondary);max-width:600px}.scene-content{padding:var(--spacing-2xl)var(--spacing-lg)}.scene-main{max-width:800px;margin:0 auto}.dialogue-section{margin-bottom:var(--spacing-2xl)}.dialogue-section h2{font-size:var(--font-size-xl);margin-bottom:var(--spacing-lg);align-items:center;gap:var(--spacing-sm);font-weight:600;display:flex}.dialogue-container{background:var(--bg-secondary);border-radius:var(--radius-xl);padding:var(--spacing-xl);border:1px solid var(--border-color)}.dialogue-item{gap:var(--spacing-md);padding:var(--spacing-md)0;border-bottom:1px solid var(--border-color);display:flex}.dialogue-item:last-child{border-bottom:none}.speaker-avatar{border-radius:var(--radius-full);background:var(--primary-gradient);flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.25rem;display:flex}.speaker-avatar.customer{background:linear-gradient(135deg,var(--daily-life),#059669)}.dialogue-content{flex:1}.speaker-name{font-weight:600;font-size:var(--font-size-sm);color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.dialogue-text{font-size:var(--font-size-base);margin-bottom:var(--spacing-xs);line-height:1.6}.dialogue-translation{font-size:var(--font-size-sm);color:var(--text-muted);font-style:italic}.vocabulary-section{margin-bottom:var(--spacing-2xl)}.vocabulary-section h2{font-size:var(--font-size-xl);margin-bottom:var(--spacing-lg);align-items:center;gap:var(--spacing-sm);font-weight:600;display:flex}.vocabulary-grid{gap:var(--spacing-md);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}.vocabulary-card{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-lg);border:1px solid var(--border-color);transition:var(--transition-base)}.vocabulary-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary-color)}.vocab-word{font-size:var(--font-size-xl);margin-bottom:var(--spacing-xs);font-weight:600}.vocab-phonetic{font-size:var(--font-size-sm);color:var(--text-muted);margin-bottom:var(--spacing-sm)}.vocab-meaning{font-size:var(--font-size-base);color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.vocab-example{font-size:var(--font-size-sm);color:var(--text-muted);padding-left:var(--spacing-md);border-left:2px solid var(--primary-color);font-style:italic}.phrases-section{margin-bottom:var(--spacing-2xl)}.phrases-section h2{font-size:var(--font-size-xl);margin-bottom:var(--spacing-lg);align-items:center;gap:var(--spacing-sm);font-weight:600;display:flex}.phrase-list{gap:var(--spacing-md);flex-direction:column;display:flex}.phrase-item{background:var(--bg-secondary);border-radius:var(--radius-lg);padding:var(--spacing-lg);border:1px solid var(--border-color)}.phrase-text{font-size:var(--font-size-lg);margin-bottom:var(--spacing-sm);color:var(--primary-color);font-weight:600}.phrase-meaning{font-size:var(--font-size-base);margin-bottom:var(--spacing-xs)}.phrase-usage{font-size:var(--font-size-sm);color:var(--text-muted)}.tips-section{margin-bottom:var(--spacing-2xl)}.tips-section h2{font-size:var(--font-size-xl);margin-bottom:var(--spacing-lg);align-items:center;gap:var(--spacing-sm);font-weight:600;display:flex}.tips-list{border-radius:var(--radius-xl);padding:var(--spacing-xl);background:linear-gradient(135deg,#667eea1a,#764ba21a);border:1px solid #667eea33}.tip-item{align-items:flex-start;gap:var(--spacing-md);padding:var(--spacing-sm)0;display:flex}.tip-icon{flex-shrink:0;font-size:1.25rem}.tip-text{font-size:var(--font-size-base);color:var(--text-primary);line-height:1.6}.loading{padding:var(--spacing-3xl);color:var(--text-secondary);flex-direction:column;justify-content:center;align-items:center;display:flex}.loading-spinner{border:3px solid var(--border-color);border-top-color:var(--primary-color);width:40px;height:40px;margin-bottom:var(--spacing-md);border-radius:50%;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error-message{text-align:center;padding:var(--spacing-2xl);color:var(--text-secondary)}.error-message h3{font-size:var(--font-size-xl);margin-bottom:var(--spacing-md)}.back-link{align-items:center;gap:var(--spacing-sm);color:var(--primary-color);margin-bottom:var(--spacing-lg);transition:var(--transition-base);font-weight:500;display:inline-flex}.back-link:hover{gap:var(--spacing-md)}