.features{background:var(--color-background);padding:clamp(3rem,8vh,5rem) 0;position:relative}.features-container{max-width:1200px;padding:0 var(--spacing-lg);margin:0 auto}.features-header{text-align:center;max-width:600px;margin-bottom:clamp(2rem,6vh,3.5rem);margin-left:auto;margin-right:auto}.features-title{color:var(--color-text-primary);margin-bottom:var(--spacing-md);letter-spacing:-.02em;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700}.features-subtitle{font-size:var(--font-size-lg);color:var(--color-text-secondary);line-height:1.5}.features-grid{gap:var(--spacing-xl);grid-template-columns:repeat(auto-fit,minmax(280px,1fr));display:grid}.feature-card{--accent-color:var(--color-accent);background:var(--color-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-xl);transition:all .4s cubic-bezier(.16,1,.3,1);animation:.6s cubic-bezier(.16,1,.3,1) backwards fadeInScale;position:relative;overflow:hidden}.feature-card:before{content:"";background:var(--accent-color);transform-origin:0;height:3px;transition:transform .4s cubic-bezier(.16,1,.3,1);position:absolute;top:0;left:0;right:0;transform:scaleX(0)}.feature-card:after{content:"";background:radial-gradient(circle at 50% 0%, var(--accent-color), transparent 70%);opacity:0;pointer-events:none;transition:opacity .4s;position:absolute;inset:0}.feature-card:hover{border-color:var(--accent-color);transform:translateY(-8px);box-shadow:0 20px 40px #00000014}.feature-card:hover:before{transform:scaleX(1)}.feature-card:hover:after{opacity:.03}.feature-icon-wrapper{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);width:56px;height:56px;margin-bottom:var(--spacing-lg);justify-content:center;align-items:center;transition:all .4s cubic-bezier(.16,1,.3,1);display:flex}.feature-card:hover .feature-icon-wrapper{background:var(--accent-color);border-color:var(--accent-color);transform:rotate(5deg)scale(1.1)}.feature-icon{filter:grayscale(.3);font-size:1.75rem;line-height:1;transition:filter .4s}.feature-card:hover .feature-icon{filter:grayscale(0)brightness(2)contrast(.8)}.feature-title{font-size:var(--font-size-xl);color:var(--color-text-primary);margin-bottom:var(--spacing-sm);letter-spacing:-.01em;font-weight:600}.feature-description{font-size:var(--font-size-base);color:var(--color-text-secondary);margin:0;line-height:1.6}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media (width<=768px){.features-grid{gap:var(--spacing-lg);grid-template-columns:1fr}.feature-card{padding:var(--spacing-lg)}}.hero{background:var(--color-background);border-bottom:1px solid var(--color-border);padding:clamp(2rem,6vh,3rem) 0 clamp(1rem,3vh,1.5rem);position:relative}.hero-container{max-width:1200px;padding:0 var(--spacing-lg);text-align:center;margin:0 auto}.hero-title{gap:var(--spacing-xs);flex-direction:column;margin:0;display:flex}.hero-title-main{color:var(--color-text-primary);letter-spacing:-.02em;font-size:clamp(1.75rem,4vw,2.5rem);font-weight:700}.hero-title-accent{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.1em;font-size:clamp(.875rem,2vw,1rem);font-weight:400}@media (width<=640px){.hero{padding:var(--spacing-lg) 0 var(--spacing-md) 0}}.input-section{background:var(--color-card);border-radius:var(--radius-lg);margin-bottom:var(--spacing-2xl);border:1px solid var(--color-border);padding:clamp(1.5rem,4vw,2rem);transition:all .3s;position:relative;overflow:hidden;box-shadow:0 4px 24px #0000000f}.input-section:focus-within{border-color:var(--color-accent);box-shadow:0 8px 32px #1e88e51f}.input-container{gap:var(--spacing-md);z-index:1;flex-direction:column;display:flex;position:relative}.input-field{width:100%;padding:var(--spacing-lg);font-size:var(--font-size-lg);line-height:var(--line-height-relaxed);border:1px solid var(--color-border);border-radius:var(--radius-md);resize:vertical;background:var(--color-background);min-height:120px;font-family:var(--font-family);color:var(--color-text-primary);transition:all .3s}.input-field::placeholder{color:var(--color-text-secondary);opacity:.6}.input-field:focus{border-color:var(--color-accent);background:var(--color-card);outline:none}.input-field:disabled{background:var(--color-background-secondary);cursor:not-allowed;opacity:.6}.submit-button{font-size:var(--font-size-base);color:#fff;background:var(--color-accent);border-radius:var(--radius-md);cursor:pointer;justify-content:center;align-items:center;gap:var(--spacing-sm);font-weight:600;font-family:var(--font-family);letter-spacing:-.01em;border:none;align-self:flex-end;min-width:200px;padding:1rem 2rem;transition:all .3s;display:inline-flex;position:relative;box-shadow:0 2px 12px #1e88e54d}.submit-button:hover:not(:disabled){background:var(--color-accent-hover);transform:translateY(-2px);box-shadow:0 6px 20px #1e88e566}.submit-button:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 8px #1e88e54d}.submit-button:disabled{background:var(--color-border);color:var(--color-text-secondary);cursor:not-allowed;box-shadow:none}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}.error-message{align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);border-left:3px solid var(--color-error);border-radius:var(--radius-sm);color:var(--color-error);font-size:var(--font-size-sm);background:#dc26260d;animation:.3s slideIn;display:flex}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.error-icon{font-size:var(--font-size-lg);flex-shrink:0}@media (width<=640px){.input-field{min-height:100px;font-size:var(--font-size-base)}.submit-button{width:100%;min-width:auto}}.result-card{background:var(--color-card);border-radius:var(--radius-lg);border:1px solid var(--color-border);padding:var(--spacing-xl);border-left-width:4px;transition:all .4s cubic-bezier(.16,1,.3,1);position:relative;overflow:hidden;box-shadow:0 4px 16px #0000000f}.result-card:before{content:"";background:var(--card-accent-color,var(--color-accent));transform-origin:0;height:3px;transition:transform .4s cubic-bezier(.16,1,.3,1);position:absolute;top:0;left:0;right:0;transform:scaleX(0)}.result-card:after{content:"";background:radial-gradient(circle at 50% 0%, var(--card-accent-color,var(--color-accent)), transparent 70%);opacity:0;pointer-events:none;transition:opacity .4s;position:absolute;inset:0}.result-card:hover{border-color:var(--card-accent-color,var(--color-accent));border-left-width:4px;transform:translateY(-8px);box-shadow:0 20px 40px #0000001f}.result-card:hover:before{transform:scaleX(1)}.result-card:hover:after{opacity:.04}.result-card-header{align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md);border-bottom:2px solid var(--color-border);display:flex;position:relative}.result-card-icon{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-md);justify-content:center;align-items:center;width:48px;height:48px;font-size:1.5rem;line-height:1;transition:all .4s cubic-bezier(.16,1,.3,1);display:inline-flex}.result-card:hover .result-card-icon{background:var(--card-accent-color,var(--color-accent));border-color:var(--card-accent-color,var(--color-accent));transform:rotate(5deg)scale(1.15)}.result-card-title{font-family:var(--font-family-display);font-size:var(--font-size-xl);color:var(--color-text-primary);letter-spacing:-.01em;font-weight:700}.result-card-content{color:var(--color-text-secondary);line-height:var(--line-height-relaxed);font-size:var(--font-size-base)}.result-card-content p{margin-bottom:var(--spacing-md)}.result-card-content p:last-child{margin-bottom:0}.result-card--translation{--card-accent-color:#2563eb;border-left-color:#2563eb}.result-card--translation .result-card-header{border-bottom-color:#2563eb}.result-card--grammar{--card-accent-color:#7c3aed;border-left-color:#7c3aed}.result-card--grammar .result-card-header{border-bottom-color:#7c3aed}.result-card--tips{--card-accent-color:var(--color-accent);background:var(--color-highlight-tips);border-left-color:var(--color-accent)}.result-card--tips .result-card-header{border-bottom-color:var(--color-accent)}.result-card--variations{--card-accent-color:#059669;border-left-color:#059669}.result-card--variations .result-card-header{border-bottom-color:#059669}.result-card-content strong{font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.result-card-content em{color:var(--color-accent-secondary);font-style:italic}.result-card-content ul,.result-card-content ol{margin:var(--spacing-md) 0;padding-left:var(--spacing-xl);color:var(--color-text-secondary)}.result-card-content ul{list-style-type:disc}.result-card-content ol{list-style-type:decimal}.result-card-content li{margin-bottom:var(--spacing-sm);line-height:var(--line-height-relaxed)}.result-card-content li:last-child{margin-bottom:0}.result-card-content ul ul,.result-card-content ol ul{margin-top:var(--spacing-sm);list-style-type:circle}.result-card-content ul ol,.result-card-content ol ol{margin-top:var(--spacing-sm);list-style-type:lower-alpha}@media (width<=767px){.result-card{padding:var(--spacing-lg);border-left-width:3px}.result-card:hover{border-left-width:3px;transform:translateY(-4px)}.result-card-title{font-size:var(--font-size-lg)}.result-card-icon{width:40px;height:40px;font-size:1.25rem}}.results-grid{gap:var(--spacing-lg);margin-bottom:var(--spacing-xl);animation:.5s ease-out fadeIn;display:grid}.results-grid>:first-child{animation:.6s cubic-bezier(.16,1,.3,1) .1s both slideInUp}.results-grid>:nth-child(2){animation:.6s cubic-bezier(.16,1,.3,1) .2s both slideInUp}.results-grid>:nth-child(3){animation:.6s cubic-bezier(.16,1,.3,1) .3s both slideInUp}.results-grid>:nth-child(4){animation:.6s cubic-bezier(.16,1,.3,1) .4s both slideInUp}@media (width<=767px){.results-grid{grid-template-columns:1fr}}@media (width>=768px){.results-grid{gap:var(--spacing-xl);grid-template-columns:repeat(2,1fr)}}@media (width>=1024px){.results-grid{max-width:960px;margin-left:auto;margin-right:auto}}.theme-toggle{top:var(--spacing-lg);right:var(--spacing-lg);z-index:1000;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--color-card);border:2px solid var(--color-border);border-radius:var(--radius-xl);color:var(--color-text-primary);font-size:var(--font-size-sm);font-weight:600;font-family:var(--font-family-mono);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;box-shadow:var(--shadow-lg);backdrop-filter:blur(10px);transition:all .3s cubic-bezier(.16,1,.3,1);display:flex;position:fixed}.theme-toggle:hover{background:var(--gradient-accent);color:#fff;border-color:var(--color-accent);box-shadow:var(--shadow-xl);transform:translateY(-4px)scale(1.05)}.theme-toggle:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.theme-toggle:active{transform:translateY(0)}.theme-toggle-icon{font-size:var(--font-size-lg);line-height:1;transition:transform .3s}.theme-toggle:hover .theme-toggle-icon{transform:rotate(180deg)}.theme-toggle-text{display:none}@media (width>=640px){.theme-toggle-text{display:inline}}@media (width<=639px){.theme-toggle{top:var(--spacing-md);right:var(--spacing-md);padding:var(--spacing-sm)}}:root{--color-background:#f8fafc;--color-background-secondary:#f1f5f9;--color-card:#fff;--color-text-primary:#0f172a;--color-text-secondary:#475569;--color-accent:#1e88e5;--color-accent-hover:#1565c0;--color-accent-secondary:#42a5f5;--color-border:#bbdefb;--color-highlight-tips:#e3f2fd;--color-error:#dc2626;--color-success:#059669;--gradient-warm:linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);--gradient-accent:linear-gradient(135deg, #1e88e5 0%, #1565c0 100%);--gradient-mesh:radial-gradient(at 20% 30%, #1e88e51f 0%, transparent 50%), radial-gradient(at 80% 70%, #42a5f514 0%, transparent 50%)}[data-theme=dark]{--color-background:#0f172a;--color-background-secondary:#1e293b;--color-card:#1e293b;--color-text-primary:#f1f5f9;--color-text-secondary:#cbd5e1;--color-accent:#42a5f5;--color-accent-hover:#64b5f6;--color-accent-secondary:#2196f3;--color-border:#334155;--color-highlight-tips:#1e3a5f;--color-error:#ef4444;--color-success:#10b981;--gradient-warm:linear-gradient(135deg, #1e293b 0%, #334155 100%);--gradient-accent:linear-gradient(135deg, #42a5f5 0%, #2196f3 100%);--gradient-mesh:radial-gradient(at 20% 30%, #42a5f514 0%, transparent 50%), radial-gradient(at 80% 70%, #2196f30f 0%, transparent 50%)}:root,[data-theme=dark]{--font-family:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-family-display:"Playfair Display", Georgia, serif;--font-family-mono:"JetBrains Mono", "Courier New", monospace;--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-weight-light:300;--font-weight-regular:400;--font-weight-semibold:600;--font-weight-bold:700;--line-height-tight:1.25;--line-height-normal:1.5;--line-height-relaxed:1.6;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--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;--transition-fast:.15s ease-in-out;--transition-normal:.3s ease-in-out;--transition-slow:.5s ease-in-out}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text-primary);background:var(--color-background);min-height:100vh;margin:0;padding:0;position:relative}body:before{content:"";opacity:.025;pointer-events:none;z-index:1;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");width:100%;height:100%;position:fixed;top:0;left:0}body:after{content:"";background:var(--gradient-mesh);pointer-events:none;z-index:0;width:100%;height:100%;position:fixed;top:0;left:0}#app{z-index:2;min-height:100vh;position:relative}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);color:var(--color-text-primary);margin:0}h1{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold)}h2{font-size:var(--font-size-2xl)}h3{font-size:var(--font-size-xl)}p{line-height:var(--line-height-relaxed);margin:0}a{color:var(--color-accent);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-accent-hover)}button{font-family:var(--font-family);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none}button:disabled{cursor:not-allowed;opacity:.6}input,textarea{font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-fast)}input:focus,textarea:focus{border-color:var(--color-accent);outline:none;box-shadow:0 0 0 3px #38a1691a}textarea{resize:vertical}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link{background:var(--color-accent);color:#fff;padding:var(--spacing-sm) var(--spacing-md);font-weight:var(--font-weight-semibold);border-radius:0 0 var(--radius-md) 0;z-index:100;transition:top var(--transition-fast);text-decoration:none;position:absolute;top:-40px;left:0}.skip-link:focus{top:0}.app-footer{background:var(--color-card);border-top:3px solid var(--color-accent);padding:var(--spacing-xl) 0;text-align:center;color:var(--color-text-secondary);font-size:var(--font-size-sm);font-family:var(--font-family-mono);margin-top:auto;position:relative}.app-footer:before{content:"";background:var(--gradient-accent);width:100%;height:2px;position:absolute;top:0;left:0}.app-footer a{color:var(--color-accent);text-underline-offset:4px;font-weight:600;text-decoration:underline #0000;transition:all .3s}.app-footer a:hover{color:var(--color-accent-hover);text-decoration-color:var(--color-accent-hover)}.app{flex-direction:column;min-height:100vh;display:flex}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shimmer{0%{background-position:-100% 0}to{background-position:200% 0}}.fade-in{animation:fadeIn var(--transition-normal) ease-out}.slide-in-up{animation:.6s cubic-bezier(.16,1,.3,1) slideInUp}.scale-in{animation:.4s cubic-bezier(.16,1,.3,1) scaleIn}.stagger-1{animation-delay:.1s}.stagger-2{animation-delay:.2s}.stagger-3{animation-delay:.3s}.stagger-4{animation-delay:.4s}.container{width:100%;max-width:960px;padding:0 var(--spacing-md);margin:0 auto}@media (width>=768px){.container{padding:0 var(--spacing-lg)}}@media print{body{background:#fff}button{display:none}}