.tm-hex-rgb-converter{display:flex;flex-direction:column;gap:var(--space-5);padding:clamp(var(--space-4),2.5vw,var(--space-6));border:1px solid color-mix(in srgb,var(--accent-primary) 18%,var(--border));border-radius:var(--radius-xl);background:radial-gradient(circle at 100% 0,var(--accent-primary-subtle),transparent 38%),var(--bg-surface);box-shadow:var(--shadow-lift);container-type:inline-size}.tm-hex-rgb-converter__sr-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tm-hex-rgb-converter__swatch-wrap{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-panel)}.tm-hex-rgb-converter__swatch{width:96px;height:96px;border-radius:var(--radius-md);border:1px solid var(--border-strong);background-image:linear-gradient(45deg,rgba(127,127,127,.18) 25%,transparent 25%),linear-gradient(-45deg,rgba(127,127,127,.18) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(127,127,127,.18) 75%),linear-gradient(-45deg,transparent 75%,rgba(127,127,127,.18) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:transparent;flex-shrink:0;transition:opacity var(--duration-fast) var(--ease-standard)}.tm-hex-rgb-converter__swatch--empty{background-color:transparent}.tm-hex-rgb-converter__swatch--stale{opacity:.4}.tm-hex-rgb-converter__swatch-meta{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.tm-hex-rgb-converter__swatch-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--fg-muted);font-weight:var(--weight-bold)}.tm-hex-rgb-converter__swatch-value{font-family:var(--font-mono);font-size:var(--text-lg);font-weight:var(--weight-bold);color:var(--fg-body);word-break:break-all}.tm-hex-rgb-converter__panels{display:grid;grid-template-columns:1fr;gap:var(--space-4)}@container (min-width: 720px){.tm-hex-rgb-converter__panels{grid-template-columns:1fr 1fr;grid-template-areas:"hex rgb" "format format"}.tm-hex-rgb-converter__panels>.tm-hex-rgb-converter__panel:first-child{grid-area:hex}.tm-hex-rgb-converter__panels>.tm-hex-rgb-converter__panel:nth-child(3){grid-area:rgb}.tm-hex-rgb-converter__format{grid-area:format}}.tm-hex-rgb-converter__panel{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg-surface);transition:border-color var(--duration-fast) var(--ease-standard);margin:0;min-width:0}.tm-hex-rgb-converter__panel--error{border-color:color-mix(in srgb,var(--color-danger) 50%,var(--border))}.tm-hex-rgb-converter__panel-heading{font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--fg-muted);text-transform:uppercase;letter-spacing:.05em;padding:0}.tm-hex-rgb-converter__field-row{display:flex;gap:var(--space-2);align-items:stretch}.tm-hex-rgb-converter__input{flex:1;min-width:0;min-height:44px;padding:0 var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--fg-body);font:inherit;font-size:var(--text-base);transition:border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),opacity var(--duration-fast) var(--ease-standard)}.tm-hex-rgb-converter__input--mono{font-family:var(--font-mono)}.tm-hex-rgb-converter__input:focus-visible{outline:none;border-color:var(--accent-primary);box-shadow:var(--focus-ring-soft)}.tm-hex-rgb-converter__input--error{border-color:var(--color-danger);background:var(--color-danger-subtle)}.tm-hex-rgb-converter__input--stale{opacity:.45}.tm-hex-rgb-converter__copy-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:80px;padding:0 var(--space-4);border:1px solid color-mix(in srgb,var(--accent-primary) 30%,var(--border));border-radius:var(--radius-md);background:var(--accent-primary-subtle);color:var(--accent-primary-hover);font:inherit;font-size:var(--text-sm);font-weight:var(--weight-bold);cursor:pointer;white-space:nowrap;transition:background var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard)}.tm-hex-rgb-converter__copy-btn:hover:not(:disabled){background:color-mix(in srgb,var(--accent-primary) 18%,transparent)}.tm-hex-rgb-converter__copy-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}.tm-hex-rgb-converter__copy-btn:disabled{opacity:.4;cursor:not-allowed}.tm-hex-rgb-converter__help{margin:0;font-size:var(--text-xs);color:var(--fg-muted);line-height:1.5}.tm-hex-rgb-converter__error{margin:0;font-size:var(--text-sm);color:var(--color-danger);font-weight:var(--weight-medium)}.tm-hex-rgb-converter__channels-label{margin:var(--space-2) 0 0;font-size:var(--text-xs);color:var(--fg-muted);text-transform:uppercase;letter-spacing:.04em;font-weight:var(--weight-bold)}.tm-hex-rgb-converter__channels{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}.tm-hex-rgb-converter__channel{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--text-xs);color:var(--fg-muted);font-weight:var(--weight-bold);text-transform:uppercase;letter-spacing:.04em}.tm-hex-rgb-converter__channel-input{min-height:40px;padding:0 var(--space-2);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);color:var(--fg-body);font:inherit;font-family:var(--font-mono);font-size:var(--text-base);text-align:center;transition:border-color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard),opacity var(--duration-fast) var(--ease-standard)}.tm-hex-rgb-converter__channel-input:focus-visible{outline:none;border-color:var(--accent-primary);box-shadow:var(--focus-ring-soft)}.tm-hex-rgb-converter__channel-input--error{border-color:var(--color-danger);background:var(--color-danger-subtle)}.tm-hex-rgb-converter__channel-input--stale{opacity:.45}.tm-hex-rgb-converter__format-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:var(--space-3)}.tm-hex-rgb-converter__toggle{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-2) 0;cursor:pointer;font-size:var(--text-sm);color:var(--fg-body);user-select:none}.tm-hex-rgb-converter__toggle input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent-primary);cursor:pointer;flex-shrink:0}.tm-hex-rgb-converter__toggle input[type=checkbox]:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.tm-hex-rgb-converter__privacy{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-4);border:1px dashed var(--border);border-radius:var(--radius-md);background:var(--bg-panel);font-size:var(--text-sm);color:var(--fg-muted)}.tm-hex-rgb-converter__privacy-icon{flex-shrink:0}.tm-hex-rgb-converter__privacy-note{flex:1;min-width:0}.tm-hex-rgb-converter__privacy-btn{background:transparent;border:none;padding:var(--space-1) var(--space-2);font:inherit;font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--accent-primary);cursor:pointer;border-radius:var(--radius-sm)}.tm-hex-rgb-converter__privacy-btn:hover{text-decoration:underline}.tm-hex-rgb-converter__privacy-btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}.tm-hex-rgb-converter__privacy-details{flex-basis:100%;margin:var(--space-2) 0 0;font-size:var(--text-sm);color:var(--fg-muted);line-height:1.55}[data-theme=dark] .tm-hex-rgb-converter__panel{background:color-mix(in srgb,var(--bg-surface) 60%,var(--bg-panel))}[data-theme=dark] .tm-hex-rgb-converter__input,[data-theme=dark] .tm-hex-rgb-converter__channel-input{background:var(--bg-panel)}[data-theme=dark] .tm-hex-rgb-converter__swatch{background-image:linear-gradient(45deg,rgba(255,255,255,.08) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.08) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.08) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.08) 75%)}@media(max-width:480px){.tm-hex-rgb-converter__swatch{width:72px;height:72px}.tm-hex-rgb-converter__channels{grid-template-columns:repeat(2,1fr)}}