:root{--bg-color: #f0f0f0;--text-color: #333;--text-muted: #666;--link-color: #0078d4;--header-bg-color: #ddd;--header-color: hotpink;--page-bg-color: #ffffff;--page-shadow-color: rgba(0, 0, 0, .1);--select-bg-color: #e9e9e9;--select-text-color: #333;--select-border-color: #ccc;--select-focus-border-color: #0078d4;--select-focus-shadow-color: rgba(0, 120, 212, .3);--color-item-light-text: #000000;--color-item-dark-text: #ffffff;--color-item-text-hover-bg: rgba(0, 0, 0, .05);--notification-bg-color: #4caf50;--notification-fail-bg-color: #e53935;--fieldset-border-color: #ddd;--legend-text-color: #555}[data-theme=dark]{--bg-color: #1a1a1a;--text-color: #ccc;--text-muted: #888;--link-color: #5cb8ff;--header-bg-color: #333;--header-color: hotpink;--page-bg-color: #222;--page-shadow-color: rgba(0, 0, 0, .3);--select-bg-color: #333;--select-text-color: #eee;--select-border-color: #555;--select-focus-border-color: lightskyblue;--select-focus-shadow-color: rgba(135, 206, 250, .3);--color-item-text-hover-bg: rgba(255, 255, 255, .1);--fieldset-border-color: #444;--legend-text-color: #aaa}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg-color: #1a1a1a;--text-color: #ccc;--text-muted: #888;--link-color: #5cb8ff;--header-bg-color: #333;--header-color: hotpink;--page-bg-color: #222;--page-shadow-color: rgba(0, 0, 0, .3);--select-bg-color: #333;--select-text-color: #eee;--select-border-color: #555;--select-focus-border-color: lightskyblue;--select-focus-shadow-color: rgba(135, 206, 250, .3);--color-item-light-text: #000000;--color-item-dark-text: #ffffff;--color-item-text-hover-bg: rgba(255, 255, 255, .1);--fieldset-border-color: #444;--legend-text-color: #aaa}}body{background-color:var(--bg-color);color:var(--text-color);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;padding:20px;font-size:16px;transition:background-color .3s,color .3s}button.icon-btn,button.text-btn{background:none;border:none;padding:0;margin:0;font:inherit;cursor:pointer;color:inherit}input[type=search]{padding:8px 12px;border-radius:4px;border:1px solid var(--select-border-color);background-color:var(--select-bg-color);color:var(--select-text-color);font-size:.9em;margin:0 10px;width:200px}input[type=search]:focus{outline:none;border-color:var(--select-focus-border-color);box-shadow:0 0 0 2px var(--select-focus-shadow-color)}.page-container{content-visibility:auto;contain-intrinsic-size:1000px}.color-item.svelte-1s894xj{position:relative;display:flex;align-items:center;justify-content:space-between;padding:10px 15px;border-radius:4px;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out;will-change:transform}.item-bg-btn.svelte-1s894xj{position:absolute;top:0;left:0;width:100%;height:100%;background:transparent;border:none;cursor:pointer;z-index:0}.color-item.svelte-1s894xj:hover{transform:scale(1.02);box-shadow:0 4px 12px #0006}.copy-icon.svelte-1s894xj{width:24px;height:24px;pointer-events:none;margin-left:4px}.color-item.light-bg.svelte-1s894xj{color:var(--color-item-light-text)}.color-item.dark-bg.svelte-1s894xj{color:var(--color-item-dark-text)}.color-item.dark-bg.svelte-1s894xj .copy-icon:where(.svelte-1s894xj){filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}.color-item.light-bg.svelte-1s894xj .copy-icon:where(.svelte-1s894xj){filter:drop-shadow(0 1px 2px rgba(0,0,0,.2))}.color-info.svelte-1s894xj{flex-grow:1;font-family:Source Code Pro,Consolas,Courier New,Courier,monospace;font-size:.95em;display:flex;align-items:center;overflow:hidden;z-index:1;pointer-events:none}.color-swatch-action.svelte-1s894xj{pointer-events:auto;cursor:pointer;padding:0 6px;border-radius:4px;transition:background-color .2s ease-in-out;white-space:nowrap;display:flex;align-items:center;height:24px;z-index:1}.color-swatch-action.svelte-1s894xj:hover{background-color:var(--color-item-text-hover-bg)}.color-copy-group.svelte-1s894xj{transition:max-width .4s ease-in-out,opacity .3s ease-in-out,margin-left .4s ease-in-out;overflow:hidden;opacity:0;max-width:0;margin-left:0;display:flex;align-items:center;z-index:1}.color-item.svelte-1s894xj:hover .color-copy-group:where(.svelte-1s894xj){opacity:1;max-width:12em;margin-left:1ch}.color-copy-group.svelte-1s894xj:hover{background-color:var(--color-item-text-hover-bg)}.page-container.svelte-10perp2{max-width:1280px;margin:0 auto 20px;padding:10px 20px 20px;background-color:var(--page-bg-color);border-radius:4px;box-shadow:0 4px 12px var(--page-shadow-color);transition:background-color .3s}fieldset.svelte-10perp2{border:1px solid var(--fieldset-border-color);border-radius:4px;padding:15px;margin:0}legend.svelte-10perp2{font-size:1.2em;font-weight:600;color:var(--legend-text-color);padding:0 10px;margin-left:5px;display:flex;align-items:center}.legend-actions.svelte-10perp2{font-size:.8em;font-weight:400;margin-left:15px;color:var(--select-focus-border-color);white-space:nowrap}.legend-copy-action.svelte-10perp2{transition:color .2s,transform .2s ease-in-out;display:inline-block}.legend-copy-action.svelte-10perp2:hover{text-decoration:underline;color:var(--header-color);transform:scale(1.05)}.color-list.svelte-10perp2{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));grid-auto-rows:max-content;gap:15px;align-content:start}.copy-notification.svelte-1q6vvua{position:fixed;background-color:var(--notification-bg-color);color:#fff;padding:10px 20px;border-radius:4px;z-index:1000;opacity:0;transition:opacity .3s ease-in-out,transform .3s ease-in-out;pointer-events:none;transform:translate(-50%,-50%);white-space:nowrap;box-shadow:0 4px 12px #0003}.copy-notification.show.svelte-1q6vvua{opacity:1;transform:translate(-50%,calc(-100% - 10px))}.copy-notification.hide.svelte-1q6vvua{opacity:0;transform:translate(-50%,-50%)}header.svelte-1n46o8q{align-items:center;border-radius:4px;display:flex;justify-content:space-between;margin:10px auto 30px;max-width:1280px;position:sticky;top:0;z-index:1000;background-color:var(--header-bg-color);padding:10px 20px;box-shadow:0 4px 12px var(--page-shadow-color);transition:background-color .3s}header.svelte-1n46o8q h1:where(.svelte-1n46o8q){color:var(--header-color);font-family:Source Code Pro,Consolas,Courier New,Courier,monospace;letter-spacing:4px;margin:0;font-size:1.8em}.controls-container.svelte-1n46o8q{display:flex;align-items:center;gap:10px}.controls-container.svelte-1n46o8q label:where(.svelte-1n46o8q){font-size:.9em}.controls-container.svelte-1n46o8q select:where(.svelte-1n46o8q){padding:8px 12px;border-radius:4px;border:1px solid var(--select-border-color);background-color:var(--select-bg-color);color:var(--select-text-color);font-size:.9em;cursor:pointer}.controls-container.svelte-1n46o8q select:where(.svelte-1n46o8q):focus{outline:none;border-color:var(--select-focus-border-color);box-shadow:0 0 0 2px var(--select-focus-shadow-color)}@media(max-width:768px){header.svelte-1n46o8q{flex-direction:column;gap:15px}.controls-container.svelte-1n46o8q{flex-wrap:wrap;justify-content:center}}footer.svelte-1n46o8q{text-align:center;padding:20px;color:var(--text-muted);font-size:.85em}footer.svelte-1n46o8q a:where(.svelte-1n46o8q){color:var(--link-color);text-decoration:none;margin-left:8px}footer.svelte-1n46o8q a:where(.svelte-1n46o8q):hover{text-decoration:underline}
