main{font-family:BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.color-preview-grid{padding:1rem}.color-preview-grid h2{font-size:1.5rem;font-weight:700;margin-bottom:1rem}.grid-and-output{display:flex;gap:2rem}.grid{flex:1;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:0;margin-bottom:1rem}.color-item{display:flex;flex-direction:column;align-items:center;padding:.4rem 0;cursor:move}.color-item:active{opacity:.8}.color-box{width:100%;height:5rem;border-radius:0;box-shadow:none;position:relative;cursor:pointer}.reset-button{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background-color:#ffffffb3;border:none;font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;line-height:1}.reset-button:hover{background-color:#ffffffe6}.color-name{margin-top:.4rem;margin-bottom:.2rem;font-size:.8rem;text-align:center;overflow:hidden;text-overflow:ellipsis;width:100%;white-space:nowrap}.color-value{font-size:.8rem;color:#666;margin-top:.2rem;cursor:pointer}.color-value:hover{color:#06c}.color-input{margin-top:.2rem;font-size:.8rem;width:100%;text-align:center;padding:.2rem}.output{width:500px;flex-shrink:0;padding:1rem;background-color:#f3f4f6;border-radius:.5rem;height:-moz-fit-content;height:fit-content;position:sticky;top:1rem}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.copy-button{padding:5px 10px;background-color:#f0f0f0;border:1px solid #ccc;border-radius:4px;cursor:pointer;font-size:14px}.copy-button:hover{background-color:#e0e0e0}.output h3{font-size:1.125rem;font-weight:700;margin-bottom:.5rem}.output pre{white-space:pre-wrap;font-size:.875rem;max-height:80vh;overflow-y:auto}@media (max-width: 768px){.grid-and-output{flex-direction:column}.output{position:static}}@media (max-width: 1024px){.grid-and-output{flex-direction:column}.output{width:100%;position:static}}.button-container{display:flex;justify-content:flex-start;gap:10px;margin-bottom:20px}.reset-all-button{display:flex;align-items:center;justify-content:center;padding:8px 16px;font-size:14px;font-weight:600;color:#fff;background-color:#3498db;border:none;border-radius:20px;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 5px #0000001a}.reset-all-button:hover{background-color:#2980b9;box-shadow:0 4px 8px #0003}.reset-all-button:active{transform:translateY(1px);box-shadow:0 2px 3px #0003}.reset-icon{font-size:16px;margin-right:6px}