:root{--primary-color: #4a90e2;--secondary-color: #7b68ee;--success-color: #5cb85c;--danger-color: #d9534f;--warning-color: #f0ad4e;--dark-color: #2c3e50;--light-color: #ecf0f1;--text-color: #333;--border-radius: 8px;--box-shadow: 0 2px 10px rgba(0, 0, 0, .1);--transition: all .3s ease}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.6;color:var(--text-color);background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh}#app{min-height:100vh;display:flex;flex-direction:column}.header{background:#fffffff2;backdrop-filter:blur(10px);padding:2rem 0;text-align:center;box-shadow:var(--box-shadow)}.header h1{color:var(--primary-color);font-size:2.5rem;margin-bottom:.5rem;font-weight:700}.header p{color:var(--dark-color);font-size:1.1rem;opacity:.8}.main{flex:1;padding:2rem 0}.container{max-width:1200px;margin:0 auto;padding:0 1rem}.intro{background:#fff;padding:2rem;border-radius:var(--border-radius);box-shadow:var(--box-shadow);margin-bottom:2rem;text-align:center}.intro h2{color:var(--primary-color);margin-bottom:1rem;font-size:2rem}.intro p{font-size:1.1rem;color:var(--dark-color)}.features{background:#fff;padding:2rem;border-radius:var(--border-radius);box-shadow:var(--box-shadow);margin-bottom:2rem}.features h2{color:var(--primary-color);margin-bottom:1.5rem;font-size:1.8rem;text-align:center}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}.feature-card{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:1.5rem;border-radius:var(--border-radius);transition:var(--transition);opacity:0;transform:translateY(20px)}.feature-card.fade-in{opacity:1;transform:translateY(0);animation:fadeIn .5s ease}.feature-card:hover{transform:translateY(-5px);box-shadow:0 5px 20px #0003}.feature-card h3{font-size:1.3rem;margin-bottom:.5rem}.feature-card p{font-size:.95rem;opacity:.95}.demo{background:#fff;padding:2rem;border-radius:var(--border-radius);box-shadow:var(--box-shadow);margin-bottom:2rem;text-align:center}.demo h2{color:var(--primary-color);margin-bottom:1.5rem;font-size:1.8rem}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:12px 30px;font-size:1.1rem;border-radius:50px;cursor:pointer;transition:var(--transition);box-shadow:0 4px 15px #667eea66;font-weight:600}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.btn-primary:active{transform:translateY(0)}.demo-output{margin-top:2rem;padding:0;background:#f8f9fa;border-radius:var(--border-radius);max-height:0;overflow:hidden;transition:max-height .5s ease,padding .5s ease}.demo-output.show{max-height:500px;padding:1.5rem}.demo-content h3{color:var(--dark-color);margin-bottom:1rem}.file-list{list-style:none;text-align:left;max-width:400px;margin:0 auto 1rem}.file-list li{padding:.5rem;margin-bottom:.5rem;background:#fff;border-radius:var(--border-radius);border:1px solid #e0e0e0;transition:var(--transition)}.file-list li:hover{background:var(--light-color);transform:translate(5px)}.demo-message{color:var(--primary-color);font-style:italic;margin-top:1rem}.footer{background:#fffffff2;backdrop-filter:blur(10px);text-align:center;padding:1.5rem 0;box-shadow:0 -2px 10px #0000001a}.footer p{color:var(--dark-color);opacity:.8}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.header h1{font-size:2rem}.header p{font-size:1rem}.feature-grid{grid-template-columns:1fr}.intro h2,.features h2,.demo h2{font-size:1.5rem}.btn-primary{padding:10px 24px;font-size:1rem}}