.color-picker{width:100%}.color-picker-grid{display:grid;grid-template-columns:1fr;gap:calc(var(--spacing-unit) * 4)}.color-picker-main,.color-picker-sidebar{display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 4)}.color-card{background:var(--color-bg-secondary);border:1px solid var(--color-bg-tertiary);border-radius:var(--border-radius);padding:calc(var(--spacing-unit) * 4)}.color-card-header{display:flex;align-items:center;gap:calc(var(--spacing-unit) * 2);margin-bottom:calc(var(--spacing-unit) * 4);color:var(--color-accent-green)}.color-card-title{font-size:1.25rem;font-weight:600;color:var(--color-accent-green);margin:0}.color-card-content{display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 3)}.color-preview-section{display:flex;align-items:center;gap:calc(var(--spacing-unit) * 3)}.color-preview-box{width:96px;height:96px;border-radius:calc(var(--border-radius) * .75);border:2px solid var(--color-bg-tertiary);box-shadow:0 4px 12px #0003;flex-shrink:0}.color-input{flex:1;height:48px;border-radius:calc(var(--border-radius) * .75);cursor:pointer;border:1px solid var(--color-bg-tertiary)}.color-input-small{width:48px;height:48px;border-radius:calc(var(--border-radius) * .75);cursor:pointer;border:1px solid var(--color-bg-tertiary)}.tabs-container{width:100%}.tabs-list{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--spacing-unit) * 1);margin-bottom:calc(var(--spacing-unit) * 3);background:var(--color-bg-primary);padding:calc(var(--spacing-unit) * .5);border-radius:calc(var(--border-radius) * .75)}.tab-trigger{padding:calc(var(--spacing-unit) * 2);background:transparent;border:none;border-radius:calc(var(--border-radius) * .5);color:var(--color-text-secondary);font-size:.875rem;font-weight:500;cursor:pointer;transition:var(--transition);font-family:inherit}.tab-trigger:hover{background:var(--color-bg-secondary);color:var(--color-text-primary)}.tab-trigger.active{background:var(--color-accent-blue);color:#fff}.tab-content{display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 3)}.input-label{font-size:.875rem;font-weight:500;color:var(--color-text-secondary);display:block;margin-bottom:calc(var(--spacing-unit) * 1)}.input-group{display:flex;gap:calc(var(--spacing-unit) * 2)}.text-input{flex:1;padding:calc(var(--spacing-unit) * 2);background:var(--color-bg-primary);border:1px solid var(--color-bg-tertiary);border-radius:calc(var(--border-radius) * .75);color:var(--color-text-primary);font-size:.9375rem;font-family:inherit;transition:var(--transition)}.text-input:focus{outline:none;border-color:var(--color-accent-blue);box-shadow:0 0 0 3px #3b82f61a}.color-input-group{display:flex;gap:calc(var(--spacing-unit) * 2);align-items:center}.slider-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:calc(var(--spacing-unit) * 3)}.slider-item{display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 1)}.slider-label{font-size:.875rem;font-weight:500;color:var(--color-text-secondary)}.slider{width:100%;height:6px;border-radius:3px;background:var(--color-bg-tertiary);outline:none;-webkit-appearance:none;appearance:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-accent-blue);cursor:pointer;transition:var(--transition)}.slider::-webkit-slider-thumb:hover{transform:scale(1.1);box-shadow:0 0 0 4px #3b82f633}.slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-accent-blue);cursor:pointer;border:none;transition:var(--transition)}.slider::-moz-range-thumb:hover{transform:scale(1.1);box-shadow:0 0 0 4px #3b82f633}.icon-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;background:var(--color-accent-green);border:none;border-radius:calc(var(--border-radius) * .75);color:#fff;cursor:pointer;transition:var(--transition);flex-shrink:0}.icon-button:hover{background:#22c55e;transform:translateY(-1px)}.icon-button.copied{background:var(--color-accent-blue)}.action-button{display:inline-flex;align-items:center;gap:calc(var(--spacing-unit) * 1);padding:calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);background:var(--color-bg-tertiary);border:1px solid var(--color-bg-tertiary);border-radius:calc(var(--border-radius) * .75);color:var(--color-text-primary);font-size:.9375rem;font-weight:500;font-family:inherit;cursor:pointer;transition:var(--transition)}.action-button:hover{background:var(--color-bg-secondary);border-color:var(--color-accent-blue)}.action-button-primary{background:var(--color-accent-green);color:#fff;border-color:var(--color-accent-green)}.action-button-primary:hover{background:#22c55e;border-color:#22c55e}.action-button.copied{background:var(--color-accent-blue);border-color:var(--color-accent-blue);color:#fff}.cmyk-display{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(var(--spacing-unit) * 3)}.cmyk-item{display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * .5)}.cmyk-label{font-size:.875rem;font-weight:500;color:var(--color-text-primary)}.cmyk-label-secondary{font-size:.75rem;color:var(--color-text-muted)}.radio-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:calc(var(--spacing-unit) * 2)}.radio-item{display:flex;align-items:center;gap:calc(var(--spacing-unit) * 2);cursor:pointer;font-size:.875rem;color:var(--color-text-primary);user-select:none}.radio-item input[type=radio]{width:18px;height:18px;cursor:pointer;accent-color:var(--color-accent-blue)}.palette-grid{display:flex;gap:calc(var(--spacing-unit) * 2);flex-wrap:wrap}.palette-color{position:relative;cursor:pointer;transition:var(--transition)}.palette-color-box{width:64px;height:64px;border-radius:calc(var(--border-radius) * .75);border:2px solid var(--color-bg-tertiary);box-shadow:0 4px 12px #0003;transition:var(--transition)}.palette-color:hover .palette-color-box{transform:scale(1.05)}.palette-copy-indicator{position:absolute;inset:0;background:#00000080;border-radius:calc(var(--border-radius) * .75);display:flex;align-items:center;justify-content:center;color:#fff;opacity:1;transition:var(--transition)}.contrast-info{display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 1)}.contrast-row{display:flex;justify-content:space-between;font-size:.875rem;color:var(--color-text-primary)}.contrast-value{font-family:monospace;font-weight:600}.rating{font-weight:600}.rating-excellent{color:var(--color-accent-green)}.rating-good{color:#fbbf24}.rating-poor{color:#ef4444}.contrast-preview{padding:calc(var(--spacing-unit) * 3);border-radius:calc(var(--border-radius) * .75);text-align:center;font-weight:500;margin-top:calc(var(--spacing-unit) * 2)}.info-grid{display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 1);font-size:.875rem}.info-row{display:flex;justify-content:space-between;color:var(--color-text-primary)}.info-section{padding-top:calc(var(--spacing-unit) * 3);border-top:1px solid var(--color-bg-tertiary);margin-top:calc(var(--spacing-unit) * 2)}.info-title{font-size:.9375rem;font-weight:600;color:var(--color-text-primary);margin-bottom:calc(var(--spacing-unit) * 2)}.info-text{font-size:.875rem;color:var(--color-text-muted);display:flex;flex-direction:column;gap:calc(var(--spacing-unit) * 1)}.info-text p{margin:0}@media(min-width:1024px){.color-picker-grid{grid-template-columns:2fr 1fr}}@media(max-width:768px){.color-preview-section{flex-direction:column}.color-preview-box{width:100%;height:120px}.color-input{width:100%}.slider-grid,.radio-group{grid-template-columns:1fr}.palette-grid{justify-content:center}}.main[data-astro-cid-yjrhhzki]{min-height:100vh;padding:calc(var(--spacing-unit) * 4) 0}.container[data-astro-cid-yjrhhzki]{max-width:1200px;margin:0 auto;padding:0 calc(var(--spacing-unit) * 3)}.breadcrumb[data-astro-cid-yjrhhzki]{display:flex;align-items:center;gap:calc(var(--spacing-unit) * 1);margin-bottom:calc(var(--spacing-unit) * 4);font-size:.875rem;color:var(--color-text-muted)}.breadcrumb[data-astro-cid-yjrhhzki] a[data-astro-cid-yjrhhzki]{color:var(--color-text-muted);transition:var(--transition)}.breadcrumb[data-astro-cid-yjrhhzki] a[data-astro-cid-yjrhhzki]:hover{color:var(--color-accent-blue)}.separator[data-astro-cid-yjrhhzki]{color:var(--color-text-muted)}.current[data-astro-cid-yjrhhzki]{color:var(--color-text-secondary)}.tool-header[data-astro-cid-yjrhhzki]{display:flex;gap:calc(var(--spacing-unit) * 3);align-items:flex-start;margin-bottom:calc(var(--spacing-unit) * 6);padding-bottom:calc(var(--spacing-unit) * 6);border-bottom:1px solid var(--color-bg-tertiary)}.tool-icon[data-astro-cid-yjrhhzki]{width:80px;height:80px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;flex-shrink:0}.tool-info[data-astro-cid-yjrhhzki]{flex:1}.tool-title[data-astro-cid-yjrhhzki]{font-size:2.5rem;font-weight:700;color:var(--color-text-primary);margin-bottom:calc(var(--spacing-unit) * 2)}.tool-description[data-astro-cid-yjrhhzki]{font-size:1.125rem;color:var(--color-text-secondary);margin-bottom:calc(var(--spacing-unit) * 2);line-height:1.6}.tool-tags[data-astro-cid-yjrhhzki]{display:flex;gap:calc(var(--spacing-unit) * 1);flex-wrap:wrap}.tag[data-astro-cid-yjrhhzki]{font-size:.875rem;color:var(--color-text-muted);background:var(--color-bg-secondary);padding:calc(var(--spacing-unit) * .75) calc(var(--spacing-unit) * 2);border-radius:6px;border:1px solid var(--color-bg-tertiary)}.tool-content[data-astro-cid-yjrhhzki]{max-width:1200px}@media(max-width:768px){.container[data-astro-cid-yjrhhzki]{padding:0 calc(var(--spacing-unit) * 2)}.tool-header[data-astro-cid-yjrhhzki]{flex-direction:column;gap:calc(var(--spacing-unit) * 2)}.tool-icon[data-astro-cid-yjrhhzki]{width:64px;height:64px;font-size:1.5rem}.tool-title[data-astro-cid-yjrhhzki]{font-size:2rem}}