.App{width:100%;height:100%}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.subtitle{font-size:1.2em;color:#666;margin-bottom:2rem}.demo-section{background:#f8f9fa;border-radius:12px;padding:2rem;margin:2rem 0;border:1px solid #e9ecef}.demo-section h2{color:#333;margin-top:0}.controls{display:flex;gap:1rem;justify-content:center;margin-top:1.5rem;flex-wrap:wrap}.control-group{display:flex;flex-direction:column;gap:.5rem;min-width:150px}.control-group label{font-weight:700;color:#555}.control-group input{padding:.5rem;border:1px solid #ddd;border-radius:4px;font-size:1rem}.control-group input[type=color]{height:40px;border:none;border-radius:4px;cursor:pointer}.info-section{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-radius:12px;padding:2rem;margin:2rem 0}.info-section h2{margin-top:0;color:#fff}.info-section ul{text-align:left;max-width:400px;margin:0 auto;padding-left:1rem}.info-section li{margin:.8rem 0;font-size:1.1rem}@media(max-width:768px){.controls{flex-direction:column;align-items:center}.control-group{min-width:200px}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}body{margin:0;padding:0;min-height:100vh;min-width:320px}#root{width:100%;height:100vh;display:flex;flex-direction:column}