*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#0f0f0f;--surface:#1a1a1a;--border:#2a2a2a;--text:#fff;--text-muted:#888}body{background:var(--bg);color:var(--text);min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.app{max-width:480px;margin:0 auto;padding:2rem 1.5rem}h1{text-align:center;margin-bottom:2rem;font-size:1.75rem;font-weight:600}h3{text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:.75rem;font-size:.75rem}.color-preview{cursor:pointer;border-radius:16px;width:100%;height:160px;margin-bottom:2rem;transition:transform .2s;position:relative;box-shadow:0 8px 32px #0000004d}.color-preview:hover{transform:scale(1.02)}.color-input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.controls{flex-direction:column;gap:1.5rem;margin-bottom:2rem;display:flex}.slider-group{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:1.25rem}.slider-row{align-items:center;gap:.75rem;margin-bottom:.75rem;display:flex}.slider-row:last-child{margin-bottom:0}.slider-row label{width:1.5rem;color:var(--text-muted);font-size:.875rem;font-weight:500}.slider{appearance:none;background:var(--border);border-radius:4px;outline:none;flex:1;height:8px}.slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#fff;border-radius:50%;width:20px;height:20px;box-shadow:0 2px 6px #0000004d}.slider-r::-webkit-slider-thumb{background:#ef4444}.slider-g::-webkit-slider-thumb{background:#22c55e}.slider-b::-webkit-slider-thumb{background:#3b82f6}.slider-h::-webkit-slider-thumb{background:linear-gradient(135deg,#ef4444,#eab308,#22c55e,#06b6d4,#3b82f6,#a855f7,#ef4444)}.number-input{border:1px solid var(--border);background:var(--bg);width:60px;color:var(--text);text-align:center;border-radius:8px;padding:.5rem;font-size:.875rem}.number-input:focus{border-color:#6366f1;outline:none}.output{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:2rem;padding:1.25rem}.formats{flex-direction:column;gap:.5rem;display:flex}.format-btn{background:var(--bg);border:1px solid var(--border);width:100%;color:var(--text);cursor:pointer;text-align:left;border-radius:8px;align-items:center;gap:1rem;padding:.875rem 1rem;transition:all .2s;display:flex}.format-btn:hover{background:#6366f11a;border-color:#6366f1}.format-btn.copied{background:#22c55e1a;border-color:#22c55e}.format-label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);width:40px;font-size:.75rem;font-weight:600}.format-btn code{flex:1;font-family:SF Mono,Monaco,monospace;font-size:.9rem}.copied-badge{color:#22c55e;font-weight:700}footer{text-align:center;color:var(--text-muted);font-size:.75rem}@media (width<=480px){.app{padding:1.5rem 1rem}.color-preview{height:120px}}