:root{--color-accent-gradient:linear-gradient(135deg, #10b981, #06b6d4, #8b5cf6)}.color-suite-tab{cursor:pointer;white-space:nowrap;user-select:none;border:1px solid #0000;border-radius:.75rem;align-items:center;gap:.5rem;padding:.625rem 1rem;font-size:.8125rem;font-weight:700;transition:all .2s ease-in-out;display:inline-flex}.color-suite-tab:hover{background-color:var(--color-canvas-soft,#f1f5f9);color:var(--color-ink,#0f172a)}.color-suite-tab.active{background:var(--color-canvas,#fff);color:var(--color-ink,#0f172a);border-color:#10b98166;box-shadow:0 4px 12px -2px #10b98126,0 2px 4px -1px #0000000f}.dark-theme .color-suite-tab:hover{color:#f8fafc;background-color:#ffffff0d}.dark-theme .color-suite-tab.active{color:#34d399;background:#10b9811f;border-color:#34d39959;box-shadow:0 0 15px #10b98133}.color-tab-pane{animation:.25s cubic-bezier(.4,0,.2,1) fadeInPane;display:none}.color-tab-pane.active{display:block}@keyframes fadeInPane{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.gradient-preview-canvas{border-radius:1.25rem;width:100%;min-height:280px;transition:background .15s ease-out;position:relative;overflow:hidden;box-shadow:inset 0 2px 8px #00000026,0 10px 25px -5px #0000001a}.stops-track-container{border:1px solid var(--color-hairline,#0000001a);background-image:linear-gradient(45deg,#e2e8f0 25%,#0000 25%),linear-gradient(-45deg,#e2e8f0 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#e2e8f0 75%),linear-gradient(-45deg,#0000 75%,#e2e8f0 75%);background-position:0 0,0 6px,6px -6px,-6px 0;background-size:12px 12px;border-radius:.5rem;height:28px;position:relative}.dark-theme .stops-track-container{background-image:linear-gradient(45deg,#1e293b 25%,#0000 25%),linear-gradient(-45deg,#1e293b 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#1e293b 75%),linear-gradient(-45deg,#0000 75%,#1e293b 75%)}.stops-color-bar{pointer-events:none;border-radius:.5rem;position:absolute;inset:0}.stop-card{border:1px solid var(--color-hairline,#0000001a);transition:all .2s cubic-bezier(.4,0,.2,1)}.stop-card:hover{border-color:#10b98166}.stop-card.active-stop{border-color:#10b981;box-shadow:0 0 0 1px #10b981}.gradient-preset-card{cursor:pointer;border:1px solid var(--color-hairline,#00000014);border-radius:.875rem;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.gradient-preset-card:hover{border-color:#10b98180;transform:translateY(-2px);box-shadow:0 8px 16px -4px #0000001f}.palette-strip-col{min-height:180px;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative}.palette-strip-col:hover{flex-grow:1.25}.shade-tint-box{cursor:pointer;user-select:none;border-radius:.375rem;justify-content:center;align-items:center;height:38px;font-family:ui-monospace,monospace;font-size:.65rem;font-weight:700;transition:transform .15s,box-shadow .15s;display:flex}.shade-tint-box:hover{z-index:10;transform:scale(1.08);box-shadow:0 4px 10px #0003}.filter-target-box,.filter-result-box{border-radius:.75rem;justify-content:center;align-items:center;width:56px;height:56px;transition:all .2s;display:flex}.text-effects-preview-box{background-color:var(--color-canvas,#fff);border:1px solid var(--color-hairline,#0000001a);text-align:center;border-radius:1.25rem;justify-content:center;align-items:center;min-height:200px;padding:2rem;transition:all .2s;display:flex;position:relative;overflow:hidden}.dark-theme .text-effects-preview-box{background-color:#0b0f19;border-color:#ffffff14}.named-color-card{cursor:pointer;border:1px solid var(--color-hairline,#00000014);transition:all .18s}.named-color-card:hover{border-color:#10b981;transform:translateY(-2px);box-shadow:0 6px 16px -2px #00000014}input[type=range]{accent-color:#10b981}.copy-toast{color:#fff;z-index:9999;opacity:0;pointer-events:none;background:#0f172a;border:1px solid #ffffff26;border-radius:.75rem;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.8125rem;font-weight:700;transition:all .25s ease-out;display:flex;position:fixed;bottom:2rem;right:2rem;transform:translateY(10px);box-shadow:0 10px 25px -5px #0000004d}.copy-toast.show{opacity:1;transform:translateY(0)}