.tm-color-palette-generator{container-type:inline-size;position:relative}.tm-color-palette-generator *,.tm-color-palette-generator *:before,.tm-color-palette-generator *:after{box-sizing:border-box}.cp-kbd-hint{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--color-text-3);font-family:var(--font-mono);white-space:nowrap;margin-right:56px}.cp-kbd-hint kbd{font-family:var(--font-mono);font-size:11px;line-height:1;background:var(--color-bg);border:1px solid var(--color-border);color:var(--color-text-2);padding:3px 6px;border-radius:5px;min-width:18px;text-align:center}.cp-kbd-sep{opacity:.4;margin:0 1px}@media(max-width:680px){.cp-kbd-hint{display:none}}.cp-below-panels{padding:var(--spacing-5) var(--spacing-6) var(--spacing-6);display:flex;flex-direction:column;gap:var(--spacing-5)}.cp-section{display:flex;flex-direction:column;gap:var(--spacing-3)}.cp-section-label{display:block;font-size:12px;font-weight:600;color:var(--color-text-2);text-transform:uppercase;letter-spacing:.06em}.cp-palette-meta{font-weight:400;text-transform:none;letter-spacing:0;color:var(--color-text-2)}.cp-note{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-2);padding:var(--spacing-3) var(--spacing-4);border-radius:var(--radius-md);font-size:13px;line-height:1.5}.cp-note--info{background:var(--color-accent-bg);color:var(--color-text-1);border:1px solid var(--color-accent)}.cp-note--warning{background:var(--color-warning-soft);color:var(--color-warning-text);border:1px solid var(--color-warning-border)}.cp-note-dismiss{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;border:none;background:transparent;color:inherit;cursor:pointer;border-radius:var(--radius-sm);opacity:.6}.cp-note-dismiss:hover{opacity:1}.cp-input-section{gap:var(--spacing-2)}.cp-input-row{display:flex;align-items:flex-start;gap:var(--spacing-3)}@container (max-width: 480px){.cp-input-row{flex-direction:column}}.cp-swatch-trigger-wrap{position:relative;flex-shrink:0}.cp-swatch-trigger{display:block;width:44px;height:44px;border-radius:var(--radius-md);border:2px solid var(--color-border);cursor:pointer;padding:0;transition:border-color .15s ease,box-shadow .15s ease}.cp-swatch-trigger:hover{border-color:var(--color-text-2)}.cp-swatch-trigger:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-accent-bg);border-color:var(--color-accent)}.cp-native-color-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;border:none;padding:0}.cp-input-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--spacing-2)}.cp-format-tabs{display:inline-flex;gap:2px;background:var(--color-bg-3);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:3px}.cp-format-tab{padding:4px 12px;border-radius:calc(var(--radius-md) - 2px);border:none;background:transparent;color:var(--color-text-2);font-size:12px;font-weight:600;letter-spacing:.04em;cursor:pointer;min-height:30px;transition:background .12s ease,color .12s ease}.cp-format-tab:hover{background:var(--color-bg-2);color:var(--color-text-1)}.cp-format-tab.active{background:var(--color-surface);color:var(--color-text-1);box-shadow:0 1px 3px #0000001a}[data-theme=dark] .cp-format-tab.active{background:var(--color-bg-2)}.cp-format-tab:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-accent)}.cp-input-field-wrap{display:flex;flex-direction:column;gap:var(--spacing-1)}.cp-text-input{width:100%;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}.cp-text-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-bg)}.cp-text-input--invalid{border-color:var(--color-danger)}.cp-text-input--invalid:focus{box-shadow:0 0 0 3px var(--color-danger-soft)}.cp-input-error{margin:0;font-size:12px;color:var(--color-danger-text)}.cp-harmony-section{gap:var(--spacing-2)}.cp-harmony-row{display:flex;flex-wrap:wrap;gap:var(--spacing-2)}@container (max-width: 560px){.cp-harmony-row{display:flex;flex-wrap:wrap}}.cp-harmony-btn{padding:6px 14px;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-bg-3);color:var(--color-text-2);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;min-height:34px;transition:border-color .12s ease,background .12s ease,color .12s ease}.cp-harmony-btn:hover{background:var(--color-bg-2);border-color:var(--color-text-2);color:var(--color-text-1)}.cp-harmony-btn.active{background:var(--cat-design-bg);border-color:var(--cat-design-fg);color:var(--cat-design-fg);font-weight:600}.cp-harmony-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-accent-bg)}.cp-swatches-header{display:flex;align-items:center;justify-content:space-between}.cp-swatches{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:var(--spacing-3)}@container (max-width: 560px){.cp-swatches{grid-template-columns:1fr}}.cp-swatch{flex:1;min-width:0;border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-bg-3);display:flex;flex-direction:column}.cp-swatch--base{border:2px solid var(--color-text-2)}.cp-swatch-color{height:80px;width:100%;transition:background-color .2s ease;flex-shrink:0}@container (min-width: 640px){.cp-swatch-color{height:120px}}.cp-swatch-info{padding:var(--spacing-2) var(--spacing-3);display:flex;flex-direction:column;gap:var(--spacing-1);flex:1}.cp-swatch-base-badge{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:var(--cat-design-bg);color:var(--cat-design-fg);padding:1px 6px;border-radius:var(--radius-full);width:fit-content}.cp-swatch-codes{display:flex;flex-direction:column;gap:2px;min-width:0}.cp-swatch-hex{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--color-text-1);word-break:break-all}.cp-swatch-small{font-family:var(--font-mono);font-size:11px;color:var(--color-text-2);word-break:break-all}@container (max-width: 560px){.cp-swatch-small{font-size:10px}}.cp-swatch-copy-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-2);color:var(--color-text-2);cursor:pointer;margin-top:auto;transition:border-color .12s ease,color .12s ease,background .12s ease}.cp-swatch-copy-btn:hover{border-color:var(--color-accent);color:var(--color-accent);background:var(--color-accent-bg)}.cp-swatch-copy-btn.is-copied{border-color:var(--color-success-border);color:var(--color-success-text);background:var(--color-success-soft)}.cp-swatch-copy-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-accent-bg)}.cp-contrast-section{gap:var(--spacing-2)}.cp-contrast-toggle{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:5px 12px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-3);color:var(--color-text-2);font-size:13px;font-weight:500;cursor:pointer;min-height:34px;transition:border-color .12s ease,color .12s ease}.cp-contrast-toggle:hover{color:var(--color-text-1);border-color:var(--color-text-2)}.cp-contrast-toggle:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-accent-bg)}.cp-contrast-chips{display:flex;flex-wrap:wrap;gap:var(--spacing-2)}.cp-contrast-chip{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);font-size:12px}.cp-contrast-chip-swatch{display:inline-block;width:20px;height:20px;border-radius:var(--radius-sm);border:1px solid var(--color-border);flex-shrink:0}.cp-contrast-chip-ratio{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--color-text-1)}.cp-contrast-chip-badge{font-size:10px;font-weight:700;letter-spacing:.04em;padding:1px 6px;border-radius:var(--radius-full)}.cp-contrast-chip-badge.pass{background:var(--color-success-soft);color:var(--color-success-text)}.cp-contrast-chip-badge.fail{background:var(--color-danger-soft);color:var(--color-danger-text)}.cp-contrast-legend{margin:0;font-size:11px;color:var(--color-text-3);line-height:1.5}.cp-action-bar{flex-direction:row;flex-wrap:wrap;gap:var(--spacing-2);align-items:center}.cp-action-btn{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:6px 14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-3);color:var(--color-text-2);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;min-height:36px;transition:border-color .12s ease,color .12s ease,background .12s ease}.cp-action-btn:hover{border-color:var(--color-text-2);color:var(--color-text-1);background:var(--color-bg-2)}.cp-action-btn.active{background:var(--color-accent-bg);border-color:var(--color-accent);color:var(--color-accent)}.cp-action-btn.is-copied{border-color:var(--color-success-border);color:var(--color-success-text)}.cp-action-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-accent-bg)}.cp-export-container{position:relative}.cp-export-btn{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:6px 16px;border:1px solid var(--color-accent);border-radius:var(--radius-md);background:var(--color-accent);color:var(--color-accent-contrast);font-size:13px;font-weight:600;cursor:pointer;min-height:36px;transition:opacity .12s ease}.cp-export-btn:hover{opacity:.88}.cp-export-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-accent-bg)}.cp-export-dropdown{position:absolute;bottom:calc(100% + 6px);left:0;min-width:180px;list-style:none;margin:0;padding:var(--spacing-1);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:0 4px 20px #0000001f;z-index:100}[data-theme=dark] .cp-export-dropdown{background:var(--color-bg-2)}.cp-export-item{display:flex;align-items:center;gap:var(--spacing-2);width:100%;padding:var(--spacing-2) var(--spacing-3);border:none;background:transparent;color:var(--color-text-1);font-size:13px;font-weight:500;cursor:pointer;border-radius:var(--radius-md);text-align:left;transition:background .1s ease}.cp-export-item:hover{background:var(--color-bg-3)}.cp-export-item.is-copied{color:var(--color-success-text)}.cp-export-item:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-accent)}.cp-copy-format-section{flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--spacing-2)}.cp-copy-format-label{flex-shrink:0}.cp-copy-format-row{display:flex;gap:2px}.cp-copy-format-btn{padding:4px 12px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-3);color:var(--color-text-2);font-size:12px;font-weight:600;cursor:pointer;min-height:30px;transition:border-color .12s ease,color .12s ease,background .12s ease}.cp-copy-format-btn:hover{color:var(--color-text-1);border-color:var(--color-text-2)}.cp-copy-format-btn.active{background:var(--color-accent-bg);border-color:var(--color-accent);color:var(--color-accent)}.cp-copy-format-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-accent)}.cp-colorblind-section{flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--spacing-2)}.cp-colorblind-row{display:flex;flex-wrap:wrap;gap:var(--spacing-2)}.cp-colorblind-btn{padding:4px 12px;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-bg-3);color:var(--color-text-2);font-size:12px;font-weight:500;cursor:pointer;min-height:30px;transition:border-color .12s ease,color .12s ease,background .12s ease}.cp-colorblind-btn:hover{color:var(--color-text-1);border-color:var(--color-text-2)}.cp-colorblind-btn.active{background:var(--color-accent-bg);border-color:var(--color-accent);color:var(--color-accent)}.cp-colorblind-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-accent)}.cp-export-preview{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.cp-export-preview-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-2) var(--spacing-3);background:var(--color-bg-3);border-bottom:1px solid var(--color-border)}.cp-export-preview-close{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg-2);color:var(--color-text-2);cursor:pointer}.cp-export-preview-close:hover{color:var(--color-text-1)}.cp-export-code{font-family:var(--font-mono);font-size:12px;line-height:1.7;color:var(--color-text-1);background:var(--color-bg-2);padding:var(--spacing-4);margin:0;overflow-x:auto;white-space:pre}.cp-compare-all{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.cp-compare-heading{font-size:13px;font-weight:600;color:var(--color-text-2);text-transform:uppercase;letter-spacing:.06em;padding:var(--spacing-3) var(--spacing-4);background:var(--color-bg-3);border-bottom:1px solid var(--color-border);margin:0}.cp-compare-rows{display:flex;flex-direction:column}.cp-compare-row{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-3) var(--spacing-4);border-bottom:1px solid var(--color-border)}.cp-compare-row:last-child{border-bottom:none}.cp-compare-row--active{background:var(--color-accent-bg)}.cp-compare-rule-label{flex-shrink:0;width:110px;font-size:13px;font-weight:500;color:var(--color-text-1)}.cp-compare-swatches{display:flex;flex:1;gap:4px}.cp-compare-swatch{flex:1;height:32px;border-radius:var(--radius-sm);min-width:28px}.cp-compare-use-btn{flex-shrink:0;padding:4px 12px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-2);color:var(--color-text-1);font-size:12px;font-weight:600;cursor:pointer;min-height:30px;white-space:nowrap;transition:border-color .12s ease,background .12s ease}.cp-compare-use-btn:hover{border-color:var(--color-accent);background:var(--color-accent-bg);color:var(--color-accent)}.cp-compare-use-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--color-accent)}@container (max-width: 480px){.cp-compare-row{flex-direction:column;align-items:stretch;gap:var(--spacing-2)}.cp-compare-rule-label{width:auto;font-size:12px}.cp-compare-swatches{width:100%}.cp-compare-swatch{flex:1;height:24px}.cp-compare-use-btn{align-self:flex-start}}.cp-recent-section{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.cp-recent-heading{font-size:13px;font-weight:600;color:var(--color-text-2);text-transform:uppercase;letter-spacing:.06em;padding:var(--spacing-3) var(--spacing-4);background:var(--color-bg-3);border-bottom:1px solid var(--color-border);margin:0}.cp-recent-empty{font-size:13px;color:var(--color-text-2);padding:var(--spacing-4);margin:0}.cp-recent-strip{display:flex;gap:var(--spacing-3);overflow-x:auto;padding:var(--spacing-3) var(--spacing-4);-webkit-overflow-scrolling:touch;scrollbar-width:thin}@container (max-width: 480px){.cp-recent-strip{display:grid;grid-template-columns:repeat(2,1fr);overflow:visible}}.cp-recent-thumb{flex-shrink:0;display:flex;flex-direction:column;gap:var(--spacing-1);padding:var(--spacing-2);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-3);cursor:pointer;min-width:100px;text-align:left;transition:border-color .12s ease,background .12s ease}.cp-recent-thumb:hover{border-color:var(--color-accent);background:var(--color-accent-bg)}.cp-recent-thumb:focus-visible{outline:none;box-shadow:0 0 0 3px var(--color-accent-bg)}.cp-recent-swatches{display:flex;height:20px;border-radius:var(--radius-sm);overflow:hidden}.cp-recent-swatch{flex:1}.cp-recent-label{font-size:11px;font-weight:500;color:var(--color-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-toast{position:fixed;bottom:var(--spacing-6);left:50%;transform:translate(-50%);padding:var(--spacing-2) var(--spacing-4);background:var(--color-text-1);color:var(--color-surface);font-size:13px;font-weight:600;border-radius:var(--radius-full);box-shadow:0 4px 16px #00000026;pointer-events:none;z-index:9999;white-space:nowrap}[data-theme=dark] .cp-toast{background:var(--color-bg-3);color:var(--color-text-1);border:1px solid var(--color-border)}[data-theme=dark] .cp-text-input,[data-theme=dark] .cp-swatch-copy-btn,[data-theme=dark] .cp-copy-format-btn,[data-theme=dark] .cp-harmony-btn,[data-theme=dark] .cp-colorblind-btn,[data-theme=dark] .cp-action-btn,[data-theme=dark] .cp-compare-use-btn,[data-theme=dark] .cp-contrast-toggle{background:var(--color-bg-3)}[data-theme=dark] .cp-swatch{background:var(--color-bg-2)}@media(prefers-reduced-motion:reduce){.cp-swatch-color,.cp-swatch-trigger,.cp-swatch-copy-btn,.cp-harmony-btn,.cp-action-btn,.cp-export-btn,.cp-recent-thumb,.cp-compare-use-btn,.cp-format-tab,.cp-text-input,.cp-contrast-toggle{transition:none}}.tm-color-palette-generator__fs-stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 32px;text-align:center}.tm-color-palette-generator__fs-eyebrow{font-size:var(--fs-caption);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-3);margin:0 0 24px}.tm-color-palette-generator__fs-palette{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;max-width:960px;width:100%;margin-bottom:28px}.tm-color-palette-generator__fs-tile{display:flex;flex-direction:column;align-items:center;gap:10px;flex:1 1 120px;min-width:120px;max-width:none}.tm-color-palette-generator__fs-tile--base .tm-color-palette-generator__fs-color{outline:3px solid var(--color-text-2);outline-offset:3px}.tm-color-palette-generator__fs-color{width:100%;height:120px;border-radius:var(--radius-lg);transition:transform .15s ease}.tm-color-palette-generator__fs-hex{font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--color-text-1);user-select:all;letter-spacing:.04em}.tm-color-palette-generator__fs-hint{font-size:var(--fs-caption);color:var(--color-text-3);margin-bottom:16px}@media(max-width:640px){.tm-color-palette-generator__fs-stage{padding:28px 16px}.tm-color-palette-generator__fs-palette{gap:10px}.tm-color-palette-generator__fs-tile{min-width:80px}.tm-color-palette-generator__fs-color{height:80px}}