*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:#f5f5f5;color:#333;line-height:1.6}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem;gap:2rem}.header{text-align:center}.header h1{font-size:2.5rem;font-weight:700;margin-bottom:.5rem}.header p{color:#666}.github-link{margin-top:1rem}.github-button{display:inline-block;padding:.75rem 1.5rem;background:#333;color:#fff;text-decoration:none;border-radius:6px;font-weight:500;transition:all .2s;font-size:.875rem}.github-button:hover{background:#555;transform:translateY(-1px);box-shadow:0 4px 8px #0003}.card{background:#fff;border:2px solid #e0e0e0;border-radius:8px;width:100%;max-width:1200px}.card-header{padding:1.5rem;border-bottom:1px solid #e0e0e0}.card-header h2{font-size:1.5rem;font-weight:600;text-align:center}.card-content{padding:2rem}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;align-items:end;justify-items:center}.loader-item{display:flex;flex-direction:column;align-items:center;gap:.75rem;min-height:120px}.size-label{font-size:.75rem;font-family:monospace;color:#666;height:16px}.loader-wrapper{display:flex;align-items:center;justify-content:center}.progress-text{margin-top:2rem;height:24px;display:flex;align-items:center;justify-content:center}.loading-text{text-align:center;font-family:monospace;font-size:.875rem;color:#666}.done-text{text-align:center;font-weight:700;color:#22c55e}.controls-section{display:flex;flex-direction:column;gap:1rem;width:100%;max-width:1200px}.button-group{display:flex;gap:1rem}.btn{padding:.5rem 1rem;border-radius:6px;border:1px solid #d0d0d0;background:#fff;cursor:pointer;font-size:.875rem;transition:all .2s}.btn:hover{background:#f5f5f5}.btn-primary{background:#333;color:#fff;border-color:#333}.btn-primary:hover{background:#555}.btn-secondary{background:#f5f5f5}.btn-outline{background:#fff;border:1px solid #d0d0d0}.controls-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem}.controls-column h3{font-size:1.125rem;font-weight:600;margin-bottom:1rem}.control-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}.control-row label:first-child{font-size:.875rem}.toggle{position:relative;display:inline-block;width:44px;height:24px}.toggle input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.3s;border-radius:24px}.toggle-slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.3s;border-radius:50%}.toggle input:checked+.toggle-slider{background-color:#333}.toggle input:checked+.toggle-slider:before{transform:translate(20px)}.input-group{margin-bottom:1rem}.input-group label{display:block;font-size:.875rem;margin-bottom:.5rem}.input-group input{width:100%;padding:.5rem;border:1px solid #d0d0d0;border-radius:4px;font-size:.875rem}.input-group input:focus{outline:none;border-color:#333}.code-container{position:relative}.btn-copy{position:absolute;top:.5rem;right:.5rem;padding:.25rem .75rem;background:#f5f5f5;border:1px solid #d0d0d0;border-radius:4px;cursor:pointer;font-size:.75rem}.btn-copy:hover{background:#e0e0e0}.code-block{background:#f5f5f5;padding:1rem;border-radius:6px;overflow:auto;font-size:.875rem;font-family:monospace;margin:0}.code-block code{display:block;white-space:pre}.footer{margin-top:auto;padding:2rem 0;text-align:center;color:#666;font-size:.875rem}.footer .heart{color:#ff69b4;display:inline-block}.footer-link{color:#333;text-decoration:none;font-weight:500}.footer-link:hover{text-decoration:underline}@media (max-width: 768px){.grid,.controls-grid{grid-template-columns:1fr}}