.mix-bar-middle{display:contents}.mixbar-part{flex:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--transition-base),filter var(--transition-fast)}.mixbar-part:hover{filter:brightness(.96)}.mixbar-part--result{flex:2;border-left:4px solid var(--color-white);border-right:4px solid var(--color-white)}.mixbar-part--step{border-left:2px solid var(--color-white)}.mixbar-part--step:first-child{border-left:none}.mixbar-label{padding:var(--space-1) var(--space-2);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-slate-700);background-color:#fffc;border-radius:var(--radius-sm)}.mixbar-label--result{color:var(--color-slate-900);background-color:#ffffffe6}.page-shell[data-astro-cid-q3snixd5]{max-width:1152px;margin:0 auto;padding:var(--space-8) var(--space-6)}.tool-card[data-astro-cid-q3snixd5]{background-color:var(--color-white);border:1px solid var(--color-slate-200);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:var(--shadow-sm);margin-bottom:var(--space-8)}.info-card[data-astro-cid-q3snixd5]{background-color:var(--color-slate-50);border:1px solid var(--color-slate-200);border-radius:var(--radius-xl);padding:var(--space-6)}.inputs-grid[data-astro-cid-q3snixd5]{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6);margin-bottom:var(--space-8)}.color-input-row[data-astro-cid-q3snixd5]{display:flex;align-items:stretch;gap:var(--space-2)}.color-input-row__field[data-astro-cid-q3snixd5]{flex:1;min-width:0}.color-picker-box[data-astro-cid-q3snixd5]{flex-shrink:0;width:48px;height:42px;padding:0;background-color:var(--color-white);border:1px solid var(--color-slate-300);border-radius:var(--radius-md);cursor:pointer}.section[data-astro-cid-q3snixd5]{margin-bottom:var(--space-8)}.section--wide[data-astro-cid-q3snixd5]{margin-bottom:var(--space-10)}.section-title[data-astro-cid-q3snixd5]{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-slate-500);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-4);font-family:var(--font-sans)}.section-head[data-astro-cid-q3snixd5]{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4)}.steps-control[data-astro-cid-q3snixd5]{display:flex;align-items:center;gap:var(--space-2)}.steps-control__label[data-astro-cid-q3snixd5]{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-slate-500);text-transform:uppercase;letter-spacing:.05em;font-family:var(--font-body)}.steps-select[data-astro-cid-q3snixd5]{width:auto;min-width:64px;padding:6px var(--space-2)}.field-label[data-astro-cid-q3snixd5]{display:block;font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--color-slate-700);margin-bottom:6px}.space-select[data-astro-cid-q3snixd5]{width:100%;min-width:0;padding:10px var(--space-3);font-size:var(--text-sm);font-family:var(--font-body);background-color:var(--color-white);border:1px solid var(--color-slate-300);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.space-select[data-astro-cid-q3snixd5]:focus{outline:none;border-color:var(--color-indigo-500);box-shadow:0 0 0 3px #6366f133}.hint[data-astro-cid-q3snixd5]{margin-top:var(--space-2);font-size:var(--text-xs);color:var(--color-slate-500);font-family:var(--font-body)}.mix-bar[data-astro-cid-q3snixd5]{display:flex;align-items:stretch;height:96px;border:1px solid var(--color-slate-200);border-radius:var(--radius-lg);overflow:hidden}.mix-bar__part[data-astro-cid-q3snixd5]{flex:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--transition-base),filter var(--transition-fast)}.mix-bar__part[data-astro-cid-q3snixd5]:hover{filter:brightness(.96)}.mix-bar__part--result[data-astro-cid-q3snixd5]{flex:2;border-left:4px solid var(--color-white);border-right:4px solid var(--color-white)}.mix-bar__label[data-astro-cid-q3snixd5]{padding:var(--space-1) var(--space-2);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--color-slate-700);background-color:#fffc;border-radius:var(--radius-sm)}.mix-bar__label--result[data-astro-cid-q3snixd5]{color:var(--color-slate-900);background-color:#ffffffe6}.ratio-track[data-astro-cid-q3snixd5]{position:relative;height:16px;margin-top:var(--space-2)}.ratio-track__line[data-astro-cid-q3snixd5]{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:4px;background-color:var(--color-slate-200);border-radius:var(--radius-full)}.ratio-track__dot[data-astro-cid-q3snixd5]{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;background-color:var(--color-indigo-600);border-radius:var(--radius-full);box-shadow:var(--shadow-sm);transition:left var(--transition-base)}.ratio-scale[data-astro-cid-q3snixd5]{display:flex;justify-content:space-between;margin-top:var(--space-1);font-size:var(--text-xs);color:var(--color-slate-500);font-family:var(--font-body)}.result-row[data-astro-cid-q3snixd5]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6)}.result-swatch[data-astro-cid-q3snixd5]{width:100%;height:160px;border:1px solid var(--color-slate-200);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);cursor:pointer;transition:background-color var(--transition-base),filter var(--transition-fast)}.result-swatch[data-astro-cid-q3snixd5]:hover{filter:brightness(.97)}.result-values[data-astro-cid-q3snixd5]{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-3)}.result-value[data-astro-cid-q3snixd5]{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}.value-code[data-astro-cid-q3snixd5]{font-size:var(--text-sm);font-family:var(--font-mono);color:var(--color-slate-700);background-color:var(--color-slate-100);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);overflow-wrap:anywhere;cursor:pointer;transition:color var(--transition-fast)}.value-code[data-astro-cid-q3snixd5]:hover{color:var(--color-indigo-600)}.copy-btn[data-astro-cid-q3snixd5]{font-size:var(--text-xs);font-family:var(--font-body);color:var(--color-slate-500);background:none;border:none;cursor:pointer;transition:color var(--transition-base)}.copy-btn[data-astro-cid-q3snixd5]:hover{color:var(--color-indigo-600)}.copy-btn[data-astro-cid-q3snixd5].is-copied{color:var(--color-emerald-500)}.code-head[data-astro-cid-q3snixd5]{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-3)}#css-code[data-astro-cid-q3snixd5]{max-width:100%;overflow-x:auto;padding:var(--space-4);background-color:var(--color-slate-900);color:var(--color-slate-100);border-radius:var(--radius-lg);font-size:var(--text-sm);font-family:var(--font-mono)}.info-title[data-astro-cid-q3snixd5]{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-slate-900);font-family:var(--font-sans);margin-bottom:var(--space-4)}.prose[data-astro-cid-q3snixd5] h2[data-astro-cid-q3snixd5]{font-size:var(--text-xl);font-weight:var(--font-bold);color:var(--color-slate-900);font-family:var(--font-sans);margin-top:var(--space-8);margin-bottom:var(--space-4)}.prose[data-astro-cid-q3snixd5] h2[data-astro-cid-q3snixd5]:first-child{margin-top:0}.prose[data-astro-cid-q3snixd5] p[data-astro-cid-q3snixd5]{color:var(--color-slate-600);font-family:var(--font-body);font-size:var(--text-sm);line-height:1.7;margin-bottom:var(--space-4)}.prose[data-astro-cid-q3snixd5] p[data-astro-cid-q3snixd5]:last-of-type{margin-bottom:0}.faq-item[data-astro-cid-q3snixd5]{padding-left:var(--space-4);border-left:1px solid var(--color-slate-200);margin-bottom:var(--space-4)}.faq-item[data-astro-cid-q3snixd5] h3[data-astro-cid-q3snixd5]{margin-top:0;font-size:var(--text-base);font-weight:var(--font-semibold);color:var(--color-slate-700);font-family:var(--font-sans);margin-bottom:var(--space-2)}.faq-item[data-astro-cid-q3snixd5] p[data-astro-cid-q3snixd5]{margin-bottom:0}.inline-code[data-astro-cid-q3snixd5]{font-size:var(--text-xs);font-family:var(--font-mono);background-color:var(--color-slate-100);padding:2px 4px;border-radius:var(--radius-sm);overflow-wrap:anywhere}.inline-code--bordered[data-astro-cid-q3snixd5]{font-size:var(--text-sm);background-color:var(--color-white);border:1px solid var(--color-slate-200);padding:2px 6px}.accent[data-astro-cid-q3snixd5]{color:var(--color-indigo-600);font-weight:var(--font-medium)}.semibold[data-astro-cid-q3snixd5]{font-weight:var(--font-medium)}@media(min-width:640px){.tool-card[data-astro-cid-q3snixd5],.info-card[data-astro-cid-q3snixd5]{padding:var(--space-8)}.inputs-grid[data-astro-cid-q3snixd5]{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.space-select[data-astro-cid-q3snixd5]{width:auto;min-width:200px}.result-row[data-astro-cid-q3snixd5]{flex-direction:row}.result-swatch[data-astro-cid-q3snixd5]{width:160px;flex-shrink:0}}