@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap";
*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0a0a0a;--bg-panel:#141414bf;--bg-panel-hover:#282828d9;--border:#ffffff1f;--text-primary:#fff;--text-secondary:#fff9;--accent:#fff;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px}html,body{background:var(--bg-primary);width:100vw;height:100vh;color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Plus Jakarta Sans,sans-serif;font-size:14px;line-height:1.5;overflow:hidden}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUpFade{0%{opacity:0;transform:translateY(20px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes dockReveal{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.animate-fade{animation:.3s both fadeIn}.animate-slide-up{animation:.4s cubic-bezier(.16,1,.3,1) both slideUpFade}.animate-dock{animation:.6s cubic-bezier(.16,1,.3,1) .2s both dockReveal}.main-container{flex-direction:row;width:100%;height:100%;display:flex;position:relative}.swatch-col{cursor:pointer;flex-direction:column;flex:1;justify-content:flex-end;align-items:center;padding-bottom:20vh;transition:flex .4s cubic-bezier(.25,1,.5,1),background-color .4s;display:flex;position:relative}.swatch-col:hover{flex:1.15}.swatch-controls{opacity:0;z-index:10;flex-direction:column;gap:16px;transition:opacity .25s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.swatch-col:hover .swatch-controls{opacity:1}@media (max-width:800px){.main-container{flex-direction:column}.swatch-col{flex-direction:row;justify-content:space-between;align-items:center;padding:0 20px}.swatch-controls{flex-direction:row}}.swatch-btn{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);width:44px;height:44px;color:inherit;cursor:pointer;background:#00000026;border:none;border-radius:50%;justify-content:center;align-items:center;transition:all .2s;display:flex;box-shadow:0 4px 12px #0000001a}.swatch-btn:hover{background:#0000004d;transform:scale(1.08)}.swatch-btn:active{transform:scale(.95)}.custom-select{color:var(--text-primary);appearance:none;cursor:pointer;border-radius:var(--radius-md);background:#ffffff0d;border:none;outline:none;width:160px;padding:8px 16px;font-weight:500;transition:all .2s;box-shadow:0 4px 12px #0000001a}.custom-select:hover{background:#ffffff14}.custom-select:focus,.custom-select:active{background:#ffffff1f;box-shadow:0 0 0 2px #a78bfa80}.custom-select option{color:#fff;background-color:#1a1a24;padding:12px;font-weight:500}.custom-select-wcag{width:100%}.swatch-hex{letter-spacing:1px;text-transform:uppercase;margin-top:16px;font-family:JetBrains Mono,monospace;font-size:2vw;font-weight:700;transition:transform .2s}.swatch-labels{text-align:center;pointer-events:none;flex-direction:column;padding:0 24px 32px;display:flex}@media (max-width:800px){.swatch-labels{text-align:right;flex-direction:row;align-items:center;gap:16px;padding:0}.swatch-hex{margin-top:0!important;font-size:16px!important}.swatch-name{font-size:12px;margin-top:0!important}}.glass-panel{background:var(--bg-panel);-webkit-backdrop-filter:blur(24px);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:0 20px 40px #0006,inset 0 1px #ffffff1a}.btn{border-radius:var(--radius-md);cursor:pointer;color:var(--text-primary);white-space:nowrap;background:0 0;border:1px solid #0000;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:14px;font-weight:600;transition:all .2s;display:inline-flex}.btn:hover{background:#ffffff14}.btn:active{transform:scale(.96)}.btn-primary{color:#000;background:#fff}.btn-primary:hover{background:#e5e5e5}.btn-icon{border-radius:var(--radius-md);padding:10px}.input,.select{border:1px solid var(--border);color:var(--text-primary);border-radius:var(--radius-sm);background:#0006;outline:none;width:100%;padding:10px 14px;font-family:inherit;font-size:14px;transition:border-color .2s}.input:focus,.select:focus{border-color:#fff6}.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='rgba(255,255,255,0.6)' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;padding-right:36px}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#0009;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}