.step-template-panel{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;flex-direction:column;flex:1;display:flex;overflow:hidden}.step-template-scroll{flex-direction:column;flex:1;gap:0;padding:12px;display:flex;overflow-y:auto}.swatch-grid{flex-direction:column;gap:8px;display:flex}.swatch{background:var(--bg-card);border:1px solid var(--border);cursor:pointer;text-align:center;border-radius:10px;flex-direction:column;align-items:stretch;width:100%;padding:0;transition:border-color .2s;display:flex;position:relative;overflow:hidden}.swatch:hover{border-color:var(--border-hover)}.swatch.selected{border-color:var(--accent);box-shadow:0 0 0 1px #d4a84326}.swatch-display{box-sizing:border-box;background:#151517;border-radius:10px;justify-content:center;align-items:center;width:100%;height:88px;padding:14px;transition:background .2s;display:flex;position:relative;overflow:hidden}.swatch-pv-line{opacity:0;pointer-events:none;white-space:nowrap;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.swatch-pv-line.active{opacity:1}.swatch:hover .swatch-pv-line[data-line="0"]{animation:3.5s step-end infinite swatchLineA}.swatch:hover .swatch-pv-line[data-line="1"]{animation:3.5s step-end infinite swatchLineB}@keyframes swatchLineA{0%{opacity:1}50%{opacity:0}}@keyframes swatchLineB{0%{opacity:0}50%{opacity:1}}.swatch-pv-text{text-align:center;color:var(--text-primary);font-size:19px;font-weight:700;line-height:1.3}.sw-word{margin-right:.28em;transition:color .15s;display:inline-block}.sw-word:last-child{margin-right:0}.swatch.sw-hi-color:not(:hover) .sw-hi{color:var(--sw-hi)}.swatch.sw-hi-strong:not(:hover) .sw-hi{color:#fff;background:var(--sw-hi);border-radius:6px;padding:2px 8px}.swatch:hover .swatch-pv-line .sw-word:first-child{animation-delay:0s}.swatch:hover .swatch-pv-line .sw-word:nth-child(2){animation-delay:.35s}.swatch:hover .swatch-pv-line .sw-word:nth-child(3){animation-delay:.7s}.swatch:hover .swatch-pv-line .sw-word:nth-child(4){animation-delay:1.05s}.swatch:hover .swatch-pv-line .sw-word:nth-child(5){animation-delay:1.4s}.swatch.sw-hi-color:hover .swatch-pv-line[data-line="0"] .sw-word{animation-name:swWordHiC0;animation-duration:3.5s;animation-timing-function:step-end;animation-iteration-count:infinite}.swatch.sw-hi-color:hover .swatch-pv-line[data-line="1"] .sw-word{animation-name:swWordHiC1;animation-duration:3.5s;animation-timing-function:step-end;animation-iteration-count:infinite}@keyframes swWordHiC0{0%,10%{color:var(--sw-hi)}11%,to{color:var(--sw-base)}}@keyframes swWordHiC1{0%,49.9%{color:var(--sw-base)}50%,60%{color:var(--sw-hi)}61%,to{color:var(--sw-base)}}.swatch.sw-hi-strong:hover .swatch-pv-line[data-line="0"] .sw-word{border-radius:6px;animation-name:swWordHiS0;animation-duration:3.5s;animation-timing-function:step-end;animation-iteration-count:infinite}.swatch.sw-hi-strong:hover .swatch-pv-line[data-line="1"] .sw-word{border-radius:6px;animation-name:swWordHiS1;animation-duration:3.5s;animation-timing-function:step-end;animation-iteration-count:infinite}@keyframes swWordHiS0{0%,10%{color:#fff;background:var(--sw-hi);box-shadow:0 0 0 4px var(--sw-hi)}11%,to{color:var(--sw-base);box-shadow:none;background:0 0}}@keyframes swWordHiS1{0%,49.9%{color:var(--sw-base);box-shadow:none;background:0 0}50%,60%{color:#fff;background:var(--sw-hi);box-shadow:0 0 0 4px var(--sw-hi)}61%,to{color:var(--sw-base);box-shadow:none;background:0 0}}.swatch.sw-bounce:hover .swatch-pv-line[data-line="0"] .sw-word{transform-origin:bottom;animation-name:swBounce0;animation-duration:3.5s;animation-timing-function:cubic-bezier(.34,1.56,.64,1);animation-iteration-count:infinite}.swatch.sw-bounce:hover .swatch-pv-line[data-line="1"] .sw-word{transform-origin:bottom;animation-name:swBounce1;animation-duration:3.5s;animation-timing-function:cubic-bezier(.34,1.56,.64,1);animation-iteration-count:infinite}@keyframes swBounce0{0%{color:var(--sw-base);transform:scale(.92)}3%{color:var(--sw-hi);transform:scale(1.25)}7%{color:var(--sw-hi);transform:scale(.97)}10%{color:var(--sw-hi);transform:scale(1.05)}14%{color:var(--sw-base);transform:scale(.92)}to{color:var(--sw-base);transform:scale(.92)}}@keyframes swBounce1{0%,49%{color:var(--sw-base);transform:scale(.92)}53%{color:var(--sw-hi);transform:scale(1.25)}57%{color:var(--sw-hi);transform:scale(.97)}60%{color:var(--sw-hi);transform:scale(1.05)}64%{color:var(--sw-base);transform:scale(.92)}to{color:var(--sw-base);transform:scale(.92)}}.swatch.sw-zoom:hover .swatch-pv-line[data-line="0"]{animation:7.5s infinite swZoom0}.swatch.sw-zoom:hover .swatch-pv-line[data-line="1"]{animation:7.5s infinite swZoom1}@keyframes swZoom0{0%{opacity:0;transform:translate(-50%,-50%)scale(.3)rotate(-3deg)}7%{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(-3deg)}30%{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(-3deg)}33%{opacity:0;transform:translate(-50%,-50%)scale(.3)rotate(-3deg)}34%,63%{opacity:0;transform:translate(-50%,-50%)scale(.3)rotate(3deg)}66%{opacity:0;transform:translate(-50%,-50%)scale(.3)rotate(3deg)}73%{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(3deg)}96%{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(3deg)}to{opacity:0;transform:translate(-50%,-50%)scale(.3)rotate(-3deg)}}@keyframes swZoom1{0%,30%{opacity:0;transform:translate(-50%,-50%)scale(.3)rotate(0)}33%{opacity:0;transform:translate(-50%,-50%)scale(.3)rotate(0)}40%{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(0)}63%{opacity:1;transform:translate(-50%,-50%)scale(1)rotate(0)}66%{opacity:0;transform:translate(-50%,-50%)scale(.3)rotate(0)}to{opacity:0;transform:translate(-50%,-50%)scale(.3)rotate(0)}}.swatch.sw-rainbow .sw-word{animation:3s linear infinite swatchRainbow}.swatch.sw-rainbow .sw-word:first-child{color:red;animation-delay:0s}.swatch.sw-rainbow .sw-word:nth-child(2){color:#f80;animation-delay:-.5s}.swatch.sw-rainbow .sw-word:nth-child(3){color:#ff0;animation-delay:-1s}.swatch.sw-rainbow .sw-word:nth-child(4){color:#0f0;animation-delay:-1.5s}.swatch.sw-rainbow .sw-word:nth-child(5){color:#08f;animation-delay:-2s}@keyframes swatchRainbow{0%{color:red}16%{color:#f80}33%{color:#ff0}50%{color:#0f0}66%{color:#08f}83%{color:#80f}to{color:red}}.swatch.sw-fade:hover .swatch-pv-line[data-line="0"] .sw-word{opacity:0;animation-name:swFadeIn0;animation-duration:3.5s;animation-timing-function:ease;animation-iteration-count:infinite;animation-fill-mode:both}.swatch.sw-fade:hover .swatch-pv-line[data-line="1"] .sw-word{opacity:0;animation-name:swFadeIn1;animation-duration:3.5s;animation-timing-function:ease;animation-iteration-count:infinite;animation-fill-mode:both}@keyframes swFadeIn0{0%{opacity:0;transform:translateY(4px)}10%{opacity:1;transform:translateY(0)}50%{opacity:1;transform:translateY(0)}51%{opacity:0;transform:translateY(4px)}to{opacity:0;transform:translateY(4px)}}@keyframes swFadeIn1{0%{opacity:0;transform:translateY(4px)}50%{opacity:0;transform:translateY(4px)}60%{opacity:1;transform:translateY(0)}to{opacity:1;transform:translateY(0)}}@keyframes ssPvFadeIn{0%{opacity:0;transform:translateY(4px)}15%{opacity:1;transform:translateY(0)}70%{opacity:1;transform:translateY(0)}85%{opacity:0;transform:translateY(4px)}to{opacity:0;transform:translateY(4px)}}@keyframes ssPvFadeSimple{0%{opacity:0}15%{opacity:1}70%{opacity:1}85%{opacity:0}to{opacity:0}}@keyframes ssPvPop{0%{opacity:.6;transform:scale(.92)}5%{opacity:1;transform:scale(1.25)}10%{opacity:1;transform:scale(.97)}15%{opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(1)}85%{opacity:0;transform:scale(.92)}to{opacity:.6;transform:scale(.92)}}@keyframes ssPvZoom{0%{opacity:0;transform:scale(.3)}15%{opacity:1;transform:scale(1)}70%{opacity:1;transform:scale(1)}85%{opacity:0;transform:scale(.3)}to{opacity:0;transform:scale(.3)}}@keyframes ssPvWordHi{0%,20%{color:var(--ss-hi);font-weight:700}21%,to{color:var(--ss-base);font-weight:500}}@keyframes ssPvWordHiStrong{0%,20%{color:#fff;background:var(--ss-hi);box-shadow:0 0 0 4px var(--ss-hi);border-radius:6px}21%,to{color:var(--ss-base);box-shadow:none;background:0 0}}@keyframes ssPvRainbow{0%{color:#e8334a}16%{color:#ffb300}33%{color:#f5e6c8}50%{color:#50e3a4}66%{color:#4fc3f7}83%{color:#fff}to{color:#e8334a}}.swatch-settings-link{width:24px;height:24px;color:var(--text-tertiary);cursor:pointer;opacity:0;z-index:2;background:0 0;border:none;justify-content:center;align-items:center;padding:0;font-size:0;transition:opacity .2s,color .15s;display:flex;position:absolute;bottom:6px;right:6px}.swatch-settings-link svg{width:18px;height:18px}.swatch:hover .swatch-settings-link{opacity:1}.swatch-settings-link:hover{color:var(--accent)}