[hidden]{display:none!important}
#visualize{padding:96px 0 80px;border-top:1px solid var(--line)}
.viz{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:24px;align-items:start}
.viz-stage{background:var(--card);border-radius:10px;padding:16px;min-height:420px}
.viz-empty{display:flex;flex-direction:column;gap:16px;height:100%}
.viz-drop{flex:1;min-height:360px;border:1.5px dashed #4A4640;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;cursor:pointer;transition:border-color .2s,background .2s}
.viz-drop:hover,.viz-drop.drag{border-color:var(--accent);background:rgba(201,183,156,.05)}
.viz-cam{font-size:36px;width:72px;height:72px;border-radius:50%;background:#2A2724;display:flex;align-items:center;justify-content:center}
.viz-drop strong{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:30px;color:#fff}
.viz-drop span:last-child{color:var(--muted);font-size:14px;max-width:340px;line-height:1.5}
.viz-samples{font-size:14px;color:var(--muted);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.viz button,.viz-samples button{font:inherit;color:var(--text);background:#262422;border:1px solid #3A3733;border-radius:999px;padding:8px 14px;cursor:pointer;font-size:13px}
.viz button:hover{border-color:var(--accent)}
.viz-canvas-wrap{position:relative;border-radius:6px;overflow:hidden;background:#0c0c0c;line-height:0}
#vizCanvas{width:100%;height:auto;display:block;touch-action:none;cursor:crosshair}
.viz-toolbar{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:14px}
.seg{display:inline-flex;background:#262422;border:1px solid #3A3733;border-radius:999px;padding:3px}
.seg button{border:0;background:none;padding:7px 14px}
.seg button.on{background:var(--text);color:#121212;font-weight:600}
.rng{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.rng input{accent-color:var(--accent);width:120px}
.viz-actions{display:flex;gap:8px;flex-wrap:wrap}
.viz-actions button[aria-pressed="true"]{border-color:var(--accent);color:var(--accent)}
.viz-hint{margin:12px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.viz-panel{background:var(--card);border-radius:10px;padding:22px}
.viz-panel h3{margin:0 0 14px;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:28px;color:#fff}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.chips button.on{background:var(--text);color:#121212;border-color:var(--text);font-weight:600}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px;max-height:330px;overflow:auto;padding:2px}
.sw{background:none!important;border:0!important;padding:0!important;border-radius:6px!important;text-align:left;cursor:pointer}
.sw canvas{width:100%;aspect-ratio:1;border-radius:6px;display:block;outline:2px solid transparent;outline-offset:2px}
.sw.on canvas{outline-color:var(--accent)}
.sw span{display:block;font-size:11px;color:var(--muted);margin-top:6px;line-height:1.3}
.viz-sel{display:flex;justify-content:space-between;align-items:baseline;margin:16px 0 4px;padding-top:14px;border-top:1px solid var(--line)}
#vizSelName{font-size:16px;font-weight:600;color:#fff}
#vizSelCat{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.viz-tune{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:10px 0 18px}
.viz-out{display:flex;flex-direction:column;gap:10px}
.viz-out .btn{text-align:center;padding:13px 20px;font-size:14px;background:none}
.viz-out .btn-solid{background:#fff;color:#121212}
.viz-note{font-size:12px;color:#8C857A;margin:14px 0 0;line-height:1.5}
@media (max-width:900px){
  .viz{grid-template-columns:1fr}
  .viz-stage{padding:10px;min-height:0}
  .viz-drop{min-height:260px}
  #visualize{padding:72px 0 56px}
}