:root{--bg: #0f172a;--surface: #1e293b;--surface-hover: #334155;--border: #475569;--text: #f8fafc;--text-muted: #94a3b8;--accent: #3b82f6;--yellow: #eab308;--green: #22c55e;--row-height: 40px;--scrollbar-width: 20px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:Inter,system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);overflow:hidden}.modal{position:fixed;inset:0;background:#000000d9;display:none;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal.active{display:flex}.modal-content{background:#1e293bf2;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:2rem;max-width:450px;text-align:center}.modal-content h2{font-size:1.5rem;margin-bottom:1rem;color:#fbbf24}.modal-content p{color:var(--text-muted);margin-bottom:1rem;line-height:1.6}.modal-content strong{color:var(--text)}.accept-btn{background:linear-gradient(135deg,#ec4899,#8b5cf6);border:none;color:#fff;padding:.75rem 1.5rem;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s;margin-top:.5rem}.accept-btn:hover{transform:scale(1.05);box-shadow:0 4px 20px #ec489966}.share-modal-content{position:relative;width:420px;padding:0;overflow:hidden;background:linear-gradient(180deg,#1e293bfa,#0f172afa);border:1px solid rgba(255,255,255,.1)}#share-color-preview{width:100%;height:120px;margin:0;border-radius:0}.share-modal-body{padding:1.5rem}.modal-close{position:absolute;top:.75rem;right:.75rem;background:#00000080;border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:1.25rem;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .2s;z-index:10}.modal-close:hover{background:#000c;transform:scale(1.1)}#share-color-name{font-size:1.25rem;font-family:JetBrains Mono,monospace;color:var(--text);margin-bottom:1.25rem;text-align:center;font-weight:600}.share-url-container{display:flex;gap:.75rem;margin-bottom:1.25rem}#share-url{flex:1;padding:.75rem 1rem;border:1px solid rgba(255,255,255,.15);border-radius:8px;background:#0006;color:var(--text);font-family:JetBrains Mono,monospace;font-size:.85rem;outline:none;transition:all .2s}#share-url:focus{border-color:#ec489999;box-shadow:0 0 0 3px #ec489926}#share-copy-btn{margin-top:0;padding:.75rem 1.25rem;font-size:.9rem;white-space:nowrap}#share-copy-btn.copied{background:linear-gradient(135deg,#22c55e,#16a34a)}.share-social{display:flex;justify-content:center;gap:.75rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1)}.social-btn{display:flex;align-items:center;gap:.5rem;padding:.6rem 1.25rem;border-radius:8px;text-decoration:none;font-size:.9rem;font-weight:600;transition:all .2s}.social-btn svg{width:18px;height:18px}.social-btn.twitter{background:#1d9bf0;color:#fff}.social-btn.twitter:hover{background:#1a8cd8;transform:translateY(-2px);box-shadow:0 4px 12px #1d9bf066}.api-modal-content{max-width:480px;text-align:left;position:relative}.api-modal-content h2{font-size:1.5rem;margin-bottom:.25rem}.api-subtitle{color:var(--text-muted);margin-bottom:1.5rem}.api-section{margin-bottom:1.25rem}.api-section h3{font-size:.9rem;color:var(--text-muted);margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.5px}.api-example{display:block;background:#0006;padding:.75rem 1rem;border-radius:8px;font-size:.85rem;word-break:break-all}.hl-r{color:#f87171}.hl-g{color:#4ade80}.hl-b{color:#60a5fa}.hl-a{color:#c084fc}.hl-dim{color:#94a3b8}.hl-ext{color:#fbbf24}.api-examples{display:flex;flex-direction:column;gap:.75rem}.api-ex{display:flex;align-items:center;gap:1rem;background:#0000004d;padding:.5rem .75rem;border-radius:8px}.api-ex img{border-radius:4px;flex-shrink:0}.api-ex code{font-size:.8rem;color:var(--text-muted)}.mcp-section{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1)}.mcp-section h3{background:linear-gradient(90deg,#22c55e,#14b8a6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.mcp-tools{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}.mcp-tool{display:flex;align-items:center;justify-content:space-between;background:#0000004d;padding:.5rem .75rem;border-radius:6px;border-left:3px solid #22c55e}.mcp-tool strong{font-family:JetBrains Mono,monospace;font-size:.8rem;color:#4ade80}.mcp-tool span{font-size:.75rem;color:var(--text-muted)}#app{display:flex;height:100vh;width:100vw}#container{flex:1;display:flex;flex-direction:column;outline:none;min-width:0}header{position:relative;z-index:100;padding:1rem 1.5rem;background:#0f172ad9;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.1)}.header-content{display:flex;align-items:center;justify-content:space-between;gap:1rem}header h1{font-size:1.25rem;font-weight:600;background:linear-gradient(90deg,#f472b6,#c084fc,#60a5fa,#34d399);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:background .3s ease-out}header p{font-size:.75rem;color:var(--text-muted);margin-top:.25rem}header .warning{color:#fbbf24cc;font-size:.65rem}.header-actions{display:flex;align-items:center;gap:.5rem}.header-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:8px;background:#ffffff1a;color:var(--text);cursor:pointer;transition:all .15s;text-decoration:none}.header-btn:hover{background:#fff3;transform:scale(1.1)}.header-btn.active{background:#ec489980;color:#fff}.header-btn svg{width:18px;height:18px}.header-btn.copied{background:#22c55e80}.search-container{display:flex;align-items:center;height:36px}#search-input{width:0;height:36px;padding:0;border:none;background:#ffffff1a;color:var(--text);font-family:JetBrains Mono,monospace;font-size:.75rem;border-radius:8px 0 0 8px;outline:none;transition:all .25s ease;opacity:0;box-sizing:border-box}#search-input.visible{width:180px;padding:0 .75rem;opacity:1}#search-input::placeholder{color:var(--text-muted);font-size:.7rem}.search-container .header-btn{border-radius:8px}.search-container #search-input.visible+.header-btn{border-radius:0 8px 8px 0}#favorites-view{display:none;position:fixed;top:var(--header-height);left:0;right:var(--scrollbar-width);bottom:0;background:var(--bg);overflow-y:auto;padding:1rem;z-index:50}#favorites-view.visible{display:block}#favorites-view .empty{text-align:center;color:var(--text-muted);padding:3rem}#list{flex:1;overflow:hidden;transition:opacity .15s ease-out;touch-action:pan-y;-webkit-overflow-scrolling:touch}.row{--row-color: rgba(0, 0, 0, 1);--text-color: rgb(255, 255, 255);display:grid;grid-template-columns:100px 90px auto auto 1fr auto auto auto;gap:.75rem;align-items:center;height:var(--row-height);padding:0 1rem 0 0;margin:0 8px 2px;cursor:pointer;font-family:JetBrains Mono,Fira Code,monospace;font-size:.85rem;font-weight:500;position:relative;border-radius:4px;overflow:visible;touch-action:pan-y;background-image:linear-gradient(45deg,#444 25%,transparent 25%),linear-gradient(-45deg,#444 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#444 75%),linear-gradient(-45deg,transparent 75%,#444 75%);background-color:#222;background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0}.row:before{content:"";position:absolute;inset:0;background:var(--row-color);pointer-events:none;transition:all .15s;border-radius:4px}.row>*{position:relative;z-index:1;color:#fff}.row:hover{z-index:10}.row:hover:before{box-shadow:inset 3px 0 #fff9}.index,.hex,.rgba,.hsla{background:linear-gradient(135deg,#000000b3,#00000080);backdrop-filter:blur(8px) saturate(1.5);-webkit-backdrop-filter:blur(8px) saturate(1.5);padding:.25rem .5rem;border-radius:4px;box-shadow:0 2px 8px #0000004d,inset 0 1px #ffffff1a;border:1px solid rgba(255,255,255,.15);touch-action:none;pointer-events:none}.index{font-size:.75rem;margin-left:.5rem}.hex{font-weight:600}.rgba,.hsla{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:fit-content}.btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;border-radius:6px;color:#fff;transition:all .15s;box-shadow:0 2px 8px #0006}.btn:hover{background:#000000b3;transform:scale(1.1);box-shadow:0 4px 12px #0009}.btn svg{width:18px;height:18px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}.copy-btn.copied{color:#4ade80;animation:color-burst .6s ease-out}.fav-btn{color:var(--text-muted)}.fav-btn.faved{color:var(--yellow)}.fav-btn.spin{animation:color-burst .6s ease-out}@keyframes color-burst{0%{transform:scale(1);filter:drop-shadow(0 0 0 transparent)}30%{transform:scale(1.4);filter:drop-shadow(0 0 8px #f472b6) drop-shadow(0 0 16px #c084fc)}60%{transform:scale(.9);filter:drop-shadow(0 0 4px #60a5fa)}to{transform:scale(1);filter:drop-shadow(0 0 0 transparent)}}#scrollbar{width:var(--scrollbar-width);background:var(--surface);display:flex;flex-direction:column;border-left:1px solid var(--border)}.scroll-arrow{display:flex;align-items:center;justify-content:center;height:32px;border:none;background:var(--surface);color:var(--text-muted);cursor:pointer;transition:all .1s}.scroll-arrow:hover{background:var(--surface-hover);color:var(--text)}.scroll-arrow:active{background:var(--border)}.scroll-arrow svg{width:16px;height:16px}#scroll-up{border-bottom:1px solid var(--border)}#scroll-down{border-top:1px solid var(--border)}#scrollbar-track{flex:1;position:relative;cursor:pointer;margin:4px 6px;background:var(--bg);border-radius:4px}#scrollbar-thumb{position:absolute;left:0;right:0;height:40px;min-height:30px;background:var(--border);border-radius:4px;cursor:grab;transition:background .3s ease-out}#scrollbar-thumb:hover{background:var(--text-muted)}#scrollbar-thumb:active{cursor:grabbing;background:var(--accent)}.light-text .swatch{border-color:#ffffff4d}.dark-text .swatch{border-color:#0000004d}@media(max-width:640px){:root{--scrollbar-width: 0px;--header-height: 56px;--row-height: 48px}header{padding:.75rem 1rem}header h1{font-size:1rem}.header-actions{gap:.25rem}.header-btn{width:36px;height:36px}.search-container{position:static}.search-container #search-input{position:fixed;top:0;left:0;right:0;width:100%;height:56px;padding:0 60px 0 1rem;border-radius:0;background:#0f172afa;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.1);z-index:200;font-size:1rem;opacity:0;pointer-events:none;transform:translateY(-100%);transition:all .25s ease}.search-container #search-input.visible{width:100%;opacity:1;pointer-events:auto;transform:translateY(0)}.search-container #search-input.visible+.header-btn{position:fixed;top:10px;right:10px;z-index:201;border-radius:8px;background:#ffffff26}#scrollbar{width:12px}#scrollbar-track{margin:2px}#scrollbar-thumb{min-height:50px}.scroll-arrow{display:none}.row{grid-template-columns:1fr auto auto auto;font-size:.85rem;gap:.5rem;padding:0 .75rem}.index,.rgba,.hsla,.spacer{display:none}.hex{font-size:.8rem;font-weight:500;padding:.35rem .6rem}.btn{width:32px;height:32px}.btn svg{width:16px;height:16px}.subtitle .click-copy{display:none}.modal-content{width:90vw;max-width:360px;padding:1rem}.share-modal-content{width:90vw;max-width:360px}#share-color-preview{height:80px}.share-modal-body{padding:1rem}#share-color-name{font-size:1rem}.share-url-container{flex-direction:column}#share-url{font-size:.75rem}}@media(prefers-reduced-motion:reduce){.row:before{transition:background .5s ease-out}#list{transition:opacity .3s ease-out}}