*{box-sizing:border-box;padding:0;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:2rem}.container{max-width:1200px;margin:0 auto}.header{text-align:center;color:#fff;margin-bottom:3rem}.header h1{font-size:2.5rem;margin-bottom:.5rem}.header p{font-size:1.1rem;opacity:.9}.demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(450px,1fr));grid-gap:2rem;gap:2rem;margin-bottom:2rem}.card{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 10px 30px rgba(0,0,0,.2)}.card h2{color:#333;margin-bottom:.5rem;font-size:1.5rem}.card-description{color:#666;margin-bottom:1.5rem;font-size:.95rem;line-height:1.5}.input-group{margin-bottom:1rem}.input-group label{display:block;color:#555;margin-bottom:.5rem;font-weight:500;font-size:.9rem}.input-group input{width:100%;padding:.75rem;border:2px solid #e0e0e0;border-radius:6px;font-size:1rem;transition:border-color .2s}.input-group input:focus{outline:none;border-color:#667eea}.button{width:100%;padding:1rem;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;margin-bottom:0}.button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 15px rgba(102,126,234,.4)}.button:disabled{opacity:.6;cursor:not-allowed}.loading{display:flex;align-items:center;justify-content:center;padding:1.25rem;background:linear-gradient(135deg,#f0f4ff,#e8f0fe);border-radius:8px;margin-bottom:1rem;border:2px solid #d0e0ff}.spinner{width:24px;height:24px;border-color:#667eea #667eea #d0e0ff #d0e0ff;border-style:solid;border-width:3px;border-radius:50%;animation:spin .8s linear infinite;margin-right:1rem;flex-shrink:0}@keyframes spin{to{transform:rotate(1turn)}}.timing{background:#fff3cd;padding:1rem;border-radius:6px;margin-bottom:1rem;border-left:4px solid #ffc107}.timing-title{font-weight:600;color:#856404;margin-bottom:.25rem}.timing-value{font-size:1.5rem;font-weight:700;color:#856404}.result{background:#f8f9fa;padding:1.5rem;border-radius:6px;border:2px solid #e0e0e0}.result h3{color:#333;margin-bottom:1rem;font-size:1.1rem}.result-content{color:#555;line-height:1.6;white-space:pre-wrap;word-break:break-word}.error{background:#f8d7da;color:#721c24;padding:1rem;border-radius:6px;border-left:4px solid #dc3545;margin-bottom:1rem}.info-banner{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 4px 12px rgba(0,0,0,.1);margin-bottom:2rem}.info-banner h3{color:#333;margin-bottom:.75rem}.info-banner p{color:#666;line-height:1.6;margin-bottom:.5rem}.info-banner code{background:#f0f0f0;padding:.2rem .4rem;border-radius:3px;font-family:Courier New,monospace;font-size:.9rem}@media (max-width:768px){.demo-grid{grid-template-columns:1fr}body{padding:1rem}.header h1{font-size:1.75rem}}