.tp-root{margin:var(--vyre-spacing-4) 0}.tp-pill-row{gap:var(--vyre-spacing-2);padding:var(--vyre-spacing-4) 0;flex-wrap:wrap;display:flex}.tp-pill{font-family:var(--vyre-typography-font-family-mono);font-size:var(--vyre-typography-font-size-xs);color:var(--vyre-color-semantic-text-muted);background:var(--vyre-color-semantic-surface-raised);border:1px solid var(--vyre-color-semantic-border);border-radius:var(--vyre-border-radius-full);cursor:pointer;align-items:center;gap:6px;padding:3px 12px;transition:color .12s,background .12s,border-color .12s;display:inline-flex}.tp-pill:hover:not(.tp-pill--active){color:var(--vyre-color-semantic-text-secondary);border-color:var(--vyre-color-semantic-border-strong)}.tp-pill__dot{border-radius:50%;flex-shrink:0;width:7px;height:7px}.tp-custom-bar{align-items:center;gap:var(--vyre-spacing-3);padding:var(--vyre-spacing-4) 0;display:flex}.tp-color-label{align-items:center;gap:var(--vyre-spacing-2);border:1px solid var(--vyre-color-semantic-border);border-radius:var(--vyre-border-radius-full);background:var(--vyre-color-semantic-surface-raised);cursor:pointer;padding:3px 12px 3px 8px;transition:border-color .12s;display:inline-flex}.tp-color-label:hover{border-color:var(--vyre-color-semantic-border-strong)}.tp-color-input{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}.tp-color-swatch{border:1px solid var(--vyre-color-semantic-border);border-radius:50%;flex-shrink:0;width:14px;height:14px}.tp-color-hex{font-family:var(--vyre-typography-font-family-mono);font-size:var(--vyre-typography-font-size-xs);color:var(--vyre-color-semantic-text-secondary);letter-spacing:.04em;background:0 0;padding:0}.tp-contrast{font-family:var(--vyre-typography-font-family-mono);font-size:var(--vyre-typography-font-size-xs);border-radius:var(--vyre-border-radius-full);border:1px solid #0000;padding:3px 10px;font-weight:500}.tp-contrast--pass{background:var(--vyre-color-semantic-success-subtle);color:var(--vyre-color-semantic-success);border-color:var(--vyre-color-semantic-success-subtle-border)}.tp-contrast--warn{background:var(--vyre-color-semantic-warning-subtle);color:var(--vyre-color-semantic-warning);border-color:var(--vyre-color-semantic-warning-subtle-border)}.tp-contrast--fail{background:var(--vyre-color-semantic-danger-subtle);color:var(--vyre-color-semantic-danger);border-color:var(--vyre-color-semantic-danger-subtle-border)}.tp-preview{border:1px solid var(--vyre-color-semantic-border-subtle);border-radius:var(--vyre-border-radius-xl);background:var(--vyre-color-semantic-surface);overflow:hidden}.tp-preview__toolbar{padding:var(--vyre-spacing-4) var(--vyre-spacing-5);border-bottom:1px solid var(--vyre-color-semantic-border-subtle);background:var(--vyre-color-semantic-surface-raised);justify-content:space-between;align-items:center;display:flex}.tp-preview__badges{gap:var(--vyre-spacing-2);flex-wrap:wrap;align-items:center;display:flex}.tp-preview__content{gap:var(--vyre-spacing-4);padding:var(--vyre-spacing-5);align-items:flex-start;display:flex}.tp-preview__meta{gap:var(--vyre-spacing-3);flex-direction:column;flex:1;min-width:0;display:flex}.tp-preview__title{font-family:var(--vyre-typography-font-family-body);font-size:var(--vyre-typography-font-size-sm);color:var(--vyre-color-semantic-text-primary);font-weight:600;line-height:1.3;display:block}.tp-preview__desc{font-family:var(--vyre-typography-font-family-body);font-size:var(--vyre-typography-font-size-sm);color:var(--vyre-color-semantic-text-muted);display:block}.tp-preview__progress{gap:var(--vyre-spacing-1);flex-direction:column;display:flex}.tp-preview__progress-labels{font-family:var(--vyre-typography-font-family-mono);font-size:var(--vyre-typography-font-size-xs);color:var(--vyre-color-semantic-text-muted);justify-content:space-between;display:flex}.tp-preview__footer{gap:var(--vyre-spacing-2);padding:var(--vyre-spacing-3) var(--vyre-spacing-5);border-top:1px solid var(--vyre-color-semantic-border-subtle);background:var(--vyre-color-semantic-surface-raised);flex-wrap:wrap;align-items:center;display:flex}.tp-readout{margin-top:var(--vyre-spacing-3);padding:var(--vyre-spacing-4) var(--vyre-spacing-5);border-radius:var(--vyre-border-radius-lg);border:1px solid var(--vyre-color-semantic-border-subtle);background:var(--vyre-color-semantic-surface);flex-direction:column;gap:5px;display:flex}.tp-readout__row{align-items:center;gap:var(--vyre-spacing-3);grid-template-columns:12px 1fr auto;display:grid}.tp-readout__swatch{border:1px solid var(--vyre-color-semantic-border);border-radius:3px;width:12px;height:12px}.tp-readout__name{font-family:var(--vyre-typography-font-family-mono);font-size:var(--vyre-typography-font-size-xs);color:var(--vyre-color-semantic-teal);background:var(--vyre-color-semantic-teal-subtle);border-radius:var(--vyre-border-radius-sm);text-overflow:ellipsis;white-space:nowrap;padding:1px 5px;overflow:hidden}.tp-readout__val{font-family:var(--vyre-typography-font-family-mono);font-size:var(--vyre-typography-font-size-xs);color:var(--vyre-color-semantic-text-muted);white-space:nowrap}