.visualizer{background:#151515;border:1px solid #514635;border-radius:24px;padding:clamp(18px,3vw,36px);margin:28px 0;color:#f9f5ef}.visualizer h2{margin-top:0}.viz-intro{color:#c6beb1;max-width:700px}.viz-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:22px}.viz-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.visualizer button,.viz-upload{border:1px solid #73624c;background:#26221d;color:#fff;padding:11px 14px;border-radius:10px;font:inherit;cursor:pointer}.visualizer button:hover,.visualizer button:focus-visible{border-color:#e4bc7e;background:#393023}.visualizer button:disabled{opacity:.4;cursor:default}.viz-upload{display:inline-block;background:#d6aa66;color:#151515;font-weight:700}.viz-upload:focus-within{outline:3px solid white}.viz-upload input{position:absolute;width:1px;height:1px;opacity:0}.viz-stage{position:relative;border-radius:12px;overflow:hidden;background:#242424;min-height:220px;display:grid;place-items:center}.viz-stage canvas{display:block;width:100%;height:auto;touch-action:none;cursor:crosshair}.viz-empty{padding:50px 25px;text-align:center;color:#c6beb1}.viz-status{min-height:28px;margin:10px 0;font-weight:600;color:#ebc68f}.viz-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:410px;overflow:auto;padding:4px}.visualizer .viz-swatch{padding:4px;font-size:11px;min-width:0}.viz-swatch img{width:100%;height:58px;object-fit:cover;object-position:center;display:block;border-radius:5px;margin-bottom:5px}.viz-swatch[aria-pressed=true]{outline:2px solid #edc48b;background:#4c3921}.viz-selected{font-size:14px;min-height:42px}.viz-note{font-size:13px;color:#bfb7ac;margin-bottom:0}.viz-controls label{display:block;font-size:14px;margin:15px 0}.viz-controls input[type=range]{width:100%;accent-color:#d6aa66}.viz-footer{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}.viz-help{font-size:14px;color:#d8cfc1}.viz-step{color:#d6aa66;font-weight:bold;letter-spacing:.08em;font-size:12px;text-transform:uppercase}@media(max-width:760px){.viz-layout{grid-template-columns:1fr}.viz-swatches{grid-template-columns:repeat(5,1fr);max-height:210px}.visualizer{border-radius:16px}.viz-swatch img{height:48px}.viz-toolbar button{font-size:13px;padding:10px}.viz-stage{min-height:160px}}

.visualizer [hidden]{display:none!important}

.viz-try{display:block;width:100%;padding:12px;border:1px solid #a88650;background:#211d17;color:#edc48b;font:inherit;cursor:pointer;border-radius:0 0 10px 10px}