:root{--accent-color: #0071e3;--blur-amount: 20px;--radius-sm: 4px}:root,[data-theme=light]{--bg-color: #fbfbfd;--text-color: #1d1d1f;--surface-color: #f2f2f5;--border-color: rgba(0, 0, 0, .08);--heading-gradient: linear-gradient(180deg, #1d1d1f 0%, #434343 100%);--button-hover: rgba(0, 0, 0, .04);--button-active: rgba(0, 0, 0, .08);--controls-bg: #ffffff;--menu-bg: #f5f5f7;--context-bg: #ffffff;--shadow-main: 0 4px 20px rgba(0, 0, 0, .04);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .04);--shadow-hover: 0 12px 24px -8px rgba(0, 0, 0, .08), 0 4px 8px -4px rgba(0, 0, 0, .04);--shadow-glow-success: 0 0 15px rgba(34, 197, 94, .2);--shadow-inset: inset 0 1px 3px rgba(0, 0, 0, .06)}@media(prefers-color-scheme:dark){:root:not([data-theme]){--bg-color: #121212;--text-color: #f5f5f7;--surface-color: #1e1e1e;--border-color: rgba(255, 255, 255, .1);--heading-gradient: linear-gradient(180deg, #ffffff 0%, #a1a1a1 100%);--button-hover: rgba(255, 255, 255, .08);--button-active: rgba(255, 255, 255, .12);--controls-bg: #1a1a1a;--menu-bg: #2a2a2a;--context-bg: #1e1e1e;--shadow-main: 0 4px 20px rgba(0, 0, 0, .2);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);--shadow-hover: 0 12px 24px -8px rgba(0, 0, 0, .4), 0 4px 8px -4px rgba(0, 0, 0, .3);--shadow-glow-success: 0 0 15px rgba(34, 197, 94, .3);--shadow-inset: inset 0 1px 3px rgba(0, 0, 0, .4)}}[data-theme=dark]{--bg-color: #121212;--text-color: #f5f5f7;--surface-color: #1e1e1e;--border-color: rgba(255, 255, 255, .1);--heading-gradient: linear-gradient(180deg, #ffffff 0%, #a1a1a1 100%);--button-hover: rgba(255, 255, 255, .08);--button-active: rgba(255, 255, 255, .12);--controls-bg: #1a1a1a;--menu-bg: #2a2a2a;--context-bg: #1e1e1e;--shadow-main: 0 4px 20px rgba(0, 0, 0, .2);--shadow-sm: 0 2px 8px rgba(0, 0, 0, .2);--shadow-hover: 0 12px 24px -8px rgba(0, 0, 0, .4), 0 4px 8px -4px rgba(0, 0, 0, .3);--shadow-glow-success: 0 0 15px rgba(34, 197, 94, .3);--shadow-inset: inset 0 1px 3px rgba(0, 0, 0, .4)}*{box-sizing:border-box}body{background-color:var(--bg-color);color:var(--text-color);margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow-x:hidden;overflow-y:auto;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;cursor:default}input,textarea{user-select:text;-webkit-user-select:text;cursor:text}.hex-label,.value-label{user-select:all;-webkit-user-select:all}.header{width:100%;max-width:1200px;padding:40px 20px 10px;margin:0 auto 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}h1{font-size:3rem;font-weight:700;margin-bottom:10px;background:var(--heading-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-.05em}.controls-container{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:1100px;margin:0 auto 30px;position:sticky;top:20px;background:var(--controls-bg);padding:6px;border-radius:var(--radius-sm);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid var(--border-color);z-index:100;box-shadow:var(--shadow-main)}.guidelined{position:relative;overflow:hidden}.guideline-v{position:absolute;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent 0%,var(--text-color) 15%,var(--text-color) 85%,transparent 100%);opacity:.08;pointer-events:none;z-index:0}.guideline-h{position:absolute;left:0;right:0;height:1px;background:linear-gradient(to right,transparent 0%,var(--text-color) 15%,var(--text-color) 85%,transparent 100%);opacity:.08;pointer-events:none;z-index:0}.guideline-v.v1{left:20%}.guideline-v.v2{left:40%}.guideline-v.v3{left:60%}.guideline-v.v4{left:80%}.guideline-h.h1{top:20%}.guideline-h.h2{top:40%}.guideline-h.h3{top:60%}.guideline-h.h4{top:80%}.menu,.grid-controls{flex:1;display:flex;position:relative;align-items:center;background:var(--menu-bg);border-radius:var(--radius-sm);padding:2px;gap:4px}.menu{justify-content:flex-start;max-width:fit-content}.grid-controls{justify-content:flex-end}#color-count{position:absolute;left:50%;transform:translate(-50%);font-size:.75rem;color:var(--text-color);font-weight:600;padding:0;white-space:nowrap;text-align:center;opacity:.9;z-index:2;pointer-events:none}.menu button,.grid-controls button{position:relative;background-color:transparent;color:var(--text-color);border:none;padding:8px 12px;cursor:pointer;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1;min-width:60px}.menu button:hover,.grid-controls button:hover{color:var(--text-color);background-color:var(--button-hover)}.menu button.active,.grid-controls button.active{color:var(--text-color)}.menu-indicator,.grid-indicator{position:absolute;top:2px;bottom:2px;left:2px;background-color:var(--button-active);border-radius:var(--radius-sm);transition:all .4s cubic-bezier(.23,1,.32,1);box-shadow:var(--shadow-sm);z-index:0}@media(max-width:768px){.controls-container{display:flex;flex-direction:column;padding:8px;gap:12px}.menu,.grid-controls{justify-content:center;width:100%}#color-count{padding:4px 0}}.loading-pulse{opacity:.5;animation:miniPulse 1s ease-in-out infinite alternate}@keyframes miniPulse{0%{opacity:.3;transform:scale(.98)}to{opacity:.8;transform:scale(1)}}.spinner-container{grid-column:1 / -1;display:flex;justify-content:center;align-items:center;padding:100px 0}.spinner{width:24px;height:24px;border:2px solid var(--border-color);border-top-color:var(--text-color);border-radius:var(--radius-sm);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.color-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:20px;width:90%;max-width:1200px;margin:0 auto 60px;transition:opacity .3s ease}.color-container.compact{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:12px}.color-container.large{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:24px}.color-container.filtering{opacity:0}.color-container.no-gap{gap:0}.color-container.no-gap .color-box{border-radius:0;border:none;box-shadow:none;z-index:1;outline:1px solid var(--current-hex)}.color-container.no-gap .color-box:hover{z-index:10;transform:scale(1.1);box-shadow:var(--shadow-hover)}.color-container.no-gap .color-box.rounded{z-index:50;border-radius:50%;transform:scale(.8);box-shadow:inset 0 2px 4px #0000001a,0 0 0 4px var(--bg-color),0 0 20px #00000026;outline:none}.color-container.show-info .color-info{opacity:1;transform:translateY(0)}.color-box,.color-card{width:100%;position:relative;border:1px solid rgba(0,0,0,.05);cursor:pointer;transition:all .4s cubic-bezier(.16,1,.3,1);overflow:hidden;box-shadow:var(--shadow-sm);border-radius:var(--radius-sm);will-change:transform,box-shadow}.random-box{background:var(--surface-color);background:linear-gradient(135deg,var(--surface-color) 0%,var(--border-color) 100%);border:1px dashed var(--text-color);opacity:.8;cursor:pointer}.random-box .color-box-content{flex-direction:column;gap:8px;padding:10px}.color-container.compact .random-box .color-box-content{gap:4px}.color-container.compact .random-box .color-name{font-size:.85rem}.color-container.compact .random-box svg{width:18px;height:18px}.random-box .random-icon{opacity:.5;transition:all .3s ease}.random-box:hover .random-icon{opacity:1;transform:rotate(180deg)}.random-box:hover{background:var(--text-color);color:var(--bg-color);border-style:solid;opacity:1}.color-box{padding-bottom:100%;animation:boxEntry .6s cubic-bezier(.2,1,.3,1) both}.color-card{height:60px;display:flex;align-items:center;padding:0 20px}.color-box-content,.card-overlay{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;transition:all .3s ease;border-radius:inherit;z-index:1}.card-overlay{justify-content:space-between;padding:0 24px}.color-box:hover .color-box-content{background:#00000026}.color-card:hover .card-overlay{background:#ffffff0d;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1)}@keyframes boxEntry{0%{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.color-box:hover,.color-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:var(--shadow-hover);z-index:10}.color-box:after,.color-card:after{content:"";position:absolute;top:0;left:-150%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);transition:.6s;pointer-events:none;will-change:left}.color-box:hover:after,.color-card:hover:after{left:150%}.color-box:active{transform:scale(.96)}.color-box.rounded{z-index:50;border-radius:50%!important;transform:scale(.8);box-shadow:inset 0 2px 6px #00000026,0 0 0 4px var(--bg-color),0 0 20px #00000026}.color-info{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:0;transform:translateY(10px);transition:all .3s ease}.color-box:hover .color-info,.color-box.rounded .color-info{opacity:1;transform:translateY(0)}.color-name{font-weight:600;font-size:.95rem;letter-spacing:-.01em;text-align:center;padding:0 10px;line-height:1.2;word-break:break-word}.color-hex,.hex-label{font-size:.8rem;opacity:.8;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;transition:all .3s ease}.color-box:hover .color-hex,.color-card:hover .hex-label{letter-spacing:.1em;opacity:1}.copy-message{position:fixed;bottom:40px;left:50%;transform:translate(-50%) translateY(100px);background:var(--text-color);color:var(--bg-color);padding:12px 24px;border-radius:var(--radius-sm);font-weight:500;font-size:.9rem;box-shadow:var(--shadow-main);z-index:100;transition:all .6s cubic-bezier(.16,1,.3,1);pointer-events:none}.copy-message.show{transform:translate(-50%) translateY(0)}footer{padding:40px 20px;color:#86868b;text-align:center;width:100%;font-size:.9rem;border-top:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:flex-start;max-width:1200px;margin:80px auto 0}.info-group{display:flex;flex-direction:column;gap:8px}.info-group.left{text-align:left;align-items:flex-start}.info-group.right{text-align:right;align-items:flex-end}@media(max-width:768px){footer{flex-direction:column;gap:32px;text-align:center;align-items:center}.info-group.left,.info-group.right{text-align:center;align-items:center}}footer p{margin:0}footer a{color:var(--text-color);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}footer a:hover{border-color:var(--text-color)}.creator{font-size:.95rem;font-weight:500;color:var(--text-color)}.secondary-text{font-size:.8rem;color:#86868b;opacity:.8}.source-link{display:inline-flex;align-items:center;gap:6px;color:var(--text-color);font-weight:500;font-size:.95rem;text-decoration:none;transition:opacity .2s}.source-link:hover{opacity:.7}.source-link span{order:1}.source-link svg{order:2}.scroll-to-top{position:fixed;bottom:30px;right:30px;width:50px;height:50px;border-radius:var(--radius-sm);background:var(--surface-color);color:var(--text-color);backdrop-filter:blur(var(--blur-amount));border:1px solid var(--border-color);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(20px);transition:all .5s cubic-bezier(.2,1,.3,1);box-shadow:var(--shadow-main);z-index:90}.scroll-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}.scroll-to-top:hover{background:var(--button-hover);transform:scale(1.1) translateY(-2px);box-shadow:var(--shadow-main)}.scroll-to-top:active{transform:scale(.95)}@media(max-width:768px){.scroll-to-top{bottom:20px;right:20px;width:44px;height:44px}}.view-controls-wrapper{display:flex;align-items:center;gap:12px}.separator{width:1px;height:24px;background-color:var(--border-color)}.view-toggles{display:flex;gap:4px;background:var(--menu-bg);border-radius:var(--radius-sm);padding:2px}.view-toggles button{background:transparent;border:none;color:var(--text-color);padding:8px 12px;border-radius:var(--radius-sm);cursor:pointer;font-size:.85rem;font-weight:500;transition:all .2s cubic-bezier(.4,0,.2,1);opacity:.7}.view-toggles button:hover{opacity:1;background:var(--button-hover)}.view-toggles button.active{opacity:1;background:var(--surface-color);box-shadow:var(--shadow-sm);color:var(--text-color)}.context-menu{position:fixed;z-index:1000;background:var(--context-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:6px;box-shadow:var(--shadow-main);display:flex;flex-direction:column;gap:2px;min-width:180px;opacity:0;visibility:hidden;transform:scale(.95);transition:opacity .1s ease,transform .1s ease,visibility .1s}.context-menu.open{opacity:1;visibility:visible;transform:scale(1)}.menu-header{display:flex;align-items:center;gap:10px;padding:8px 12px;margin-bottom:4px}.menu-color-preview{width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid rgba(0,0,0,.1);box-shadow:var(--shadow-sm)}.menu-info{display:flex;flex-direction:column}.menu-color-name{font-weight:600;font-size:.9rem;color:var(--text-color)}.menu-color-hex{font-size:.75rem;opacity:.6;font-family:var(--font-mono);text-transform:uppercase}.context-menu button{background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-color);padding:8px 12px;text-align:left;font-size:.85rem;font-weight:500;cursor:pointer;transition:background-color .2s;display:flex;justify-content:space-between;align-items:center;width:100%}.value-preview{font-size:.75rem;opacity:.5;font-family:var(--font-mono)}.context-menu button:hover{background-color:var(--button-hover)}.context-menu button:hover .value-preview{opacity:.8}.menu-separator{height:1px;background-color:var(--border-color);margin:4px 6px}.header h1{margin-bottom:12px}.header-desc{display:flex;align-items:center;gap:12px;font-size:.85rem;color:var(--text-color);opacity:.8;font-weight:500;flex-wrap:wrap;justify-content:center}.desc-item{display:flex;align-items:center;gap:6px}.key-badge{background:var(--surface-color);border:1px solid var(--border-color);color:var(--text-color);padding:2px 8px;border-radius:var(--radius-sm);font-size:.75rem;font-weight:600;font-family:var(--font-mono);box-shadow:var(--shadow-sm);display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;vertical-align:middle;height:24px}.key-badge.icon{padding:0 6px}.key-badge svg{display:block}.desc-separator{opacity:.4;font-weight:700}.list-attribution{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:60px;margin-bottom:20px;opacity:.4;font-size:.85rem;text-align:center}.list-attribution p{margin:0}.list-attribution a{color:var(--text-color);text-decoration:underline;text-underline-offset:2px;transition:opacity .2s}.list-attribution a:hover{opacity:.7}.theme-controller[data-astro-cid-oafmexzm]{position:fixed;top:24px;right:24px;display:flex;background:var(--controls-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:2px;z-index:1000;box-shadow:var(--shadow-main)}button[data-astro-cid-oafmexzm]{background:transparent;border:none;padding:6px 10px;color:var(--text-color);cursor:pointer;border-radius:var(--radius-sm);transition:opacity .2s;opacity:.5;position:relative;z-index:2;display:flex;align-items:center;justify-content:center}button[data-astro-cid-oafmexzm]:hover{opacity:.8}button[data-astro-cid-oafmexzm].active{opacity:1}.theme-indicator[data-astro-cid-oafmexzm]{position:absolute;top:2px;left:2px;height:calc(100% - 4px);background:var(--surface-color);border-radius:var(--radius-sm);transition:transform .3s cubic-bezier(.4,0,.2,1),width .3s;z-index:1;box-shadow:var(--shadow-sm);border:1px solid var(--border-color)}@media(max-width:768px){.theme-controller[data-astro-cid-oafmexzm]{top:auto;bottom:24px;right:24px}}