.App{text-align:center;max-width:800px;margin:0 auto;padding:20px}.App-header{background-color:#ffffff1a;padding:20px;border-radius:10px;margin-bottom:30px;backdrop-filter:blur(10px)}.App-header h1{color:#fff;margin:0 0 10px;font-size:2.5em}.App-header p{color:#ffffffe6;font-size:1.2em;margin:0}main{display:flex;flex-direction:column;gap:20px}.demo-section{background-color:#ffffffe6;padding:20px;border-radius:10px;box-shadow:0 4px 6px #0000001a}.demo-section h2{color:#333;margin-top:0;margin-bottom:15px;font-size:1.5em}.input-group{display:flex;gap:10px;margin-bottom:15px;flex-wrap:wrap;justify-content:center}.input-group input{padding:10px;border:2px solid #ddd;border-radius:5px;font-size:16px;flex:1;min-width:200px}.input-group input:focus{outline:none;border-color:#667eea}.input-group button{padding:10px 20px;background-color:#667eea;color:#fff;border:none;border-radius:5px;font-size:16px;cursor:pointer;transition:background-color .3s}.input-group button:hover:not(:disabled){background-color:#5a6fd8}.input-group button:disabled{background-color:#ccc;cursor:not-allowed}.result{background-color:#f0f8ff;padding:15px;border-radius:5px;margin-top:10px;font-size:16px;color:#333;border-left:4px solid #667eea}@media (max-width: 600px){.App{padding:10px}.input-group{flex-direction:column}.input-group input{min-width:auto}}body{margin:0;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}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}