.tdf-color-preview{margin:16px 0 20px;padding:14px;border:1px solid #dfd6cc;border-radius:12px;background:#faf8f4;color:#554c43}.tdf-preview-heading{font-size:14px;letter-spacing:.05em;font-weight:600;margin-bottom:8px}.tdf-preview-stage{height:300px;display:flex;align-items:center;justify-content:center;position:relative;background:#fff;border-radius:8px;overflow:hidden}.tdf-preview-stage canvas{display:block;max-height:100%;max-width:100%;width:auto;height:100%;object-fit:contain}.tdf-preview-status{position:absolute;max-width:260px;text-align:center;padding:16px;font-size:13px}.tdf-preview-status[hidden],.tdf-preview-stage canvas[hidden]{display:none}.tdf-preview-legend{display:flex;flex-wrap:wrap;gap:6px 12px;margin:12px 0 8px;font-size:12px;line-height:1.4}.tdf-preview-legend span{display:inline-flex;align-items:center;gap:5px}.tdf-preview-legend i{display:inline-block;width:12px;height:12px;border:1px solid #0002;border-radius:50%;flex-shrink:0}.tdf-color-preview figcaption{font-size:12px;line-height:1.5;color:#71685e}@media(max-width:600px){.tdf-preview-stage{height:250px}.tdf-color-preview{padding:10px;margin:12px 0}.tdf-preview-heading{font-size:13px}}