.tm-color-picker *,.tm-color-picker *:before,.tm-color-picker *:after{box-sizing:border-box}.tm-color-picker__picker{display:flex;flex-direction:column;gap:var(--spacing-4)}.tm-color-picker__sv-field{position:relative;width:100%;aspect-ratio:1 / .78;border-radius:var(--radius-lg);border:1px solid var(--color-border);overflow:hidden;cursor:crosshair;touch-action:none}.tm-color-picker__sv-field:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-accent-bg)}.tm-color-picker__sv-white{position:absolute;inset:0;background:linear-gradient(to right,#fff,transparent)}.tm-color-picker__sv-black{position:absolute;inset:0;background:linear-gradient(to top,#000,transparent)}.tm-color-picker__sv-thumb{position:absolute;width:18px;height:18px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 0 0 1px #00000059,0 2px 6px #0000004d;transform:translate(-50%,-50%);pointer-events:none}.tm-color-picker__slider{position:relative;width:100%;height:16px;border-radius:var(--radius-full);border:1px solid var(--color-border);cursor:pointer;touch-action:none}.tm-color-picker__slider:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-accent-bg)}.tm-color-picker__slider--hue{background:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.tm-color-picker__slider--alpha{background-image:linear-gradient(45deg,#c4c4c4 25%,transparent 25%),linear-gradient(-45deg,#c4c4c4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#c4c4c4 75%),linear-gradient(-45deg,transparent 75%,#c4c4c4 75%);background-size:10px 10px;background-position:0 0,0 5px,5px -5px,-5px 0}.tm-color-picker__alpha-fill{position:absolute;inset:0;border-radius:var(--radius-full)}.tm-color-picker__slider-thumb{position:absolute;top:50%;width:20px;height:20px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 0 0 1px #00000040,0 2px 6px #00000040;transform:translate(-50%,-50%);pointer-events:none}.tm-color-picker__primary-inner{container-type:inline-size;display:flex;flex-direction:column;min-width:0;max-width:100%}.tm-color-picker__detail{display:flex;flex-direction:column;gap:var(--spacing-4)}.tm-color-picker__preview{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-bg-3)}.tm-color-picker__preview-swatch{position:relative;width:64px;height:64px;flex-shrink:0;border-radius:var(--radius-lg);border:1px solid var(--color-border);overflow:hidden}.tm-color-picker__preview-checker{position:absolute;inset:0;background-image:linear-gradient(45deg,#d8d8d8 25%,transparent 25%),linear-gradient(-45deg,#d8d8d8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#d8d8d8 75%),linear-gradient(-45deg,transparent 75%,#d8d8d8 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0}.tm-color-picker__preview-color{position:absolute;inset:0}.tm-color-picker__preview-meta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-2);min-width:0}.tm-color-picker__preview-hex{font-family:var(--font-mono);font-size:clamp(18px,3vw,22px);font-weight:600;color:var(--color-text-1)}.tm-color-picker__eyedropper-hint{font-size:12px;color:var(--color-text-2);line-height:1.5}.tm-color-picker__field{display:flex;flex-direction:column;gap:var(--spacing-2)}.tm-color-picker__field-label,.tm-color-picker__section-label{font-size:12px;font-weight:600;color:var(--color-text-2);text-transform:uppercase;letter-spacing:.05em}.tm-color-picker__text-input{min-height:44px;padding:var(--spacing-2) var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-2);color:var(--color-text-1);font-family:var(--font-mono);font-size:15px;text-transform:uppercase;transition:border-color .15s ease,box-shadow .15s ease}.tm-color-picker__text-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-bg)}.tm-color-picker__text-input--invalid{border-color:#dc2626}.tm-color-picker__field-error{margin:0;font-size:12px;color:#dc2626}.tm-color-picker__channels{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-2)}.tm-color-picker__channel{display:flex;flex-direction:column;gap:var(--spacing-1)}.tm-color-picker__channel-label{font-size:11px;font-weight:600;color:var(--color-text-2);text-align:center}.tm-color-picker__channel-input{min-height:40px;width:100%;padding:var(--spacing-1) var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-2);color:var(--color-text-1);font-family:var(--font-mono);font-size:14px;text-align:center;transition:border-color .15s ease,box-shadow .15s ease}.tm-color-picker__channel-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-bg)}.tm-color-picker__section{margin-top:var(--spacing-6);display:flex;flex-direction:column;gap:var(--spacing-3)}.tm-color-picker__outputs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-2)}@container (min-width: 800px){.tm-color-picker__preview-swatch{width:96px;height:96px}.tm-color-picker__outputs{grid-template-columns:repeat(3,1fr)}}@container (max-width: 480px){.tm-color-picker__outputs{grid-template-columns:1fr}}.tm-color-picker__output-row{display:flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-3)}.tm-color-picker__output-name{flex-shrink:0;width:48px;font-size:11px;font-weight:600;color:var(--color-text-2);text-transform:uppercase;letter-spacing:.04em}.tm-color-picker__output-value{flex:1;min-width:0;font-family:var(--font-mono);font-size:13px;color:var(--color-text-1);overflow-wrap:anywhere}.tm-color-picker__copy-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-2);color:var(--color-text-2);cursor:pointer;transition:border-color .15s ease,color .15s ease,background .15s ease}.tm-color-picker__copy-btn:hover{border-color:var(--color-accent);color:var(--color-accent);background:var(--color-accent-bg)}.tm-color-picker__copy-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-accent-bg)}.tm-color-picker__copy-btn.is-copied{border-color:#16a34a;color:#16a34a;background:#16a34a1a}@container (max-width: 480px){.tm-color-picker__copy-btn{width:44px;height:44px}}@media(max-width:480px){.tm-color-picker__copy-btn{width:44px;height:44px}}.tm-color-picker__note,.tm-color-picker__alpha-note{margin:0;font-size:12px;line-height:1.6;color:var(--color-text-2)}.tm-color-picker__section--samples{border-top:1px solid var(--color-border);padding-top:var(--spacing-4)}.tm-color-picker__samples{display:flex;flex-wrap:wrap;gap:var(--spacing-2)}.tm-color-picker__sample{width:44px;height:44px;border-radius:var(--radius-md);border:2px solid transparent;box-shadow:inset 0 0 0 1px #00000014;padding:0;cursor:pointer;transition:transform .15s ease,border-color .15s ease}.tm-color-picker__sample:hover{transform:scale(1.08);border-color:var(--color-text-1)}.tm-color-picker__sample:focus-visible{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-bg)}[data-theme=dark] .tm-color-picker__output-row,[data-theme=dark] .tm-color-picker__preview{background:color-mix(in srgb,var(--color-bg-2) 60%,var(--color-bg-3))}[data-theme=dark] .tm-color-picker__text-input,[data-theme=dark] .tm-color-picker__channel-input,[data-theme=dark] .tm-color-picker__copy-btn{background:var(--color-bg-3)}@media(prefers-reduced-motion:reduce){.tm-color-picker__sample,.tm-color-picker__copy-btn{transition:none}}