.tm-hex-rgb-converter__controls,.tm-hex-rgb-converter__primary{display:flex;flex-direction:column;gap:var(--spacing-5);container-type:inline-size}.tm-hex-rgb-converter *,.tm-hex-rgb-converter *:before,.tm-hex-rgb-converter *:after{box-sizing:border-box}.tm-hex-rgb-converter__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-hex-rgb-converter__preview-swatch{position:relative;width:64px;height:64px;flex-shrink:0;border-radius:var(--radius-lg);border:1px solid var(--color-border);overflow:hidden}@container (min-width: 560px){.tm-hex-rgb-converter__preview-swatch{width:120px;height:120px}}.tm-hex-rgb-converter__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-hex-rgb-converter__preview-color{position:absolute;inset:0}.tm-hex-rgb-converter__preview-meta{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-1);min-width:0}.tm-hex-rgb-converter__preview-label{font-size:12px;font-weight:600;color:var(--color-text-2);text-transform:uppercase;letter-spacing:.05em}.tm-hex-rgb-converter__preview-value{font-family:var(--font-mono);font-size:clamp(18px,3vw,22px);font-weight:600;color:var(--color-text-1)}.tm-hex-rgb-converter__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-4);align-items:start}@container (max-width: 540px){.tm-hex-rgb-converter__grid{grid-template-columns:1fr}}.tm-hex-rgb-converter__field{display:flex;flex-direction:column;gap:var(--spacing-2)}.tm-hex-rgb-converter__field-label,.tm-hex-rgb-converter__section-label{font-size:12px;font-weight:600;color:var(--color-text-2);text-transform:uppercase;letter-spacing:.05em}.tm-hex-rgb-converter__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;transition:border-color .15s ease,box-shadow .15s ease}.tm-hex-rgb-converter__text-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-bg)}.tm-hex-rgb-converter__text-input--invalid{border-color:#dc2626}.tm-hex-rgb-converter__field-error{margin:0;font-size:12px;color:#dc2626}.tm-hex-rgb-converter__channels{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-2)}.tm-hex-rgb-converter__channel{display:flex;flex-direction:column;gap:var(--spacing-1)}.tm-hex-rgb-converter__channel-label{font-size:11px;font-weight:600;color:var(--color-text-2);text-align:center}.tm-hex-rgb-converter__channel-hint{display:block;font-size:9px;font-weight:400;color:var(--color-text-3, var(--color-text-2));text-transform:none;letter-spacing:0}.tm-hex-rgb-converter__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-hex-rgb-converter__channel-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-bg)}.tm-hex-rgb-converter__section{display:flex;flex-direction:column;gap:var(--spacing-3)}.tm-hex-rgb-converter__outputs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-2)}@container (min-width: 640px){.tm-hex-rgb-converter__outputs{grid-template-columns:repeat(3,1fr)}.tm-hex-rgb-converter__samples{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));max-width:100%}}@container (max-width: 480px){.tm-hex-rgb-converter__outputs{grid-template-columns:1fr}}.tm-hex-rgb-converter__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-hex-rgb-converter__output-name{flex-shrink:0;width:44px;font-size:11px;font-weight:600;color:var(--color-text-2);text-transform:uppercase;letter-spacing:.04em}.tm-hex-rgb-converter__output-value{flex:1;min-width:0;font-family:var(--font-mono);font-size:13px;color:var(--color-text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tm-hex-rgb-converter__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-hex-rgb-converter__copy-btn:hover:not(:disabled){border-color:var(--color-accent);color:var(--color-accent);background:var(--color-accent-bg)}.tm-hex-rgb-converter__copy-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-accent-bg)}.tm-hex-rgb-converter__copy-btn:disabled{opacity:.5;cursor:not-allowed}.tm-hex-rgb-converter__copy-btn.is-copied{border-color:#16a34a;color:#16a34a;background:#16a34a1a}.tm-hex-rgb-converter__options{display:flex;flex-wrap:wrap;gap:var(--spacing-4)}.tm-hex-rgb-converter__samples{display:flex;flex-wrap:wrap;gap:var(--spacing-2)}.tm-hex-rgb-converter__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-hex-rgb-converter__sample:hover{transform:scale(1.08);border-color:var(--color-text-1)}.tm-hex-rgb-converter__sample:focus-visible{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-bg)}[data-theme=dark] .tm-hex-rgb-converter__output-row,[data-theme=dark] .tm-hex-rgb-converter__preview{background:color-mix(in srgb,var(--color-bg-2) 60%,var(--color-bg-3))}[data-theme=dark] .tm-hex-rgb-converter__text-input,[data-theme=dark] .tm-hex-rgb-converter__channel-input,[data-theme=dark] .tm-hex-rgb-converter__copy-btn{background:var(--color-bg-3)}@media(prefers-reduced-motion:reduce){.tm-hex-rgb-converter__sample,.tm-hex-rgb-converter__copy-btn{transition:none}}