.demo-wrap{max-width:960px;margin:0 auto;padding:14px 18px 0}.demo-bar{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px}.demo-bar-row{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.demo-badge{background:var(--ink);color:#fff;letter-spacing:.08em;border-radius:6px;flex:none;padding:3px 8px;font-size:11px;font-weight:900}.demo-note{color:var(--muted);flex:220px;font-size:13px}.demo-bar-actions{flex-wrap:wrap;gap:8px;display:flex}.demo-bar-actions .btn{min-height:0;box-shadow:none;padding:9px 14px;font-size:13px;font-weight:800}.demo-bar-actions .btn:active{transform:translateY(1px)}.demo-panel{border-top:1px dashed var(--line);margin-top:12px;padding-top:12px}.demo-panel-section+.demo-panel-section{margin-top:14px}.demo-panel-label{color:var(--muted);letter-spacing:.04em;margin-bottom:8px;font-size:12px;font-weight:800}.demo-swatches{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.demo-swatch{border:2px solid var(--line);cursor:pointer;border-radius:50%;width:34px;height:34px;padding:0;transition:transform 80ms,border-color 80ms}.demo-swatch:hover{transform:scale(1.08)}.demo-swatch.active{border-color:var(--ink);box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--ink)}.demo-color-input{border:2px solid var(--line);cursor:pointer;background:0 0;border-radius:8px;width:40px;height:34px;padding:0}.demo-hex{color:var(--ink);font-variant-numeric:tabular-nums;font-size:13px;font-weight:700}.demo-name-row{gap:8px;display:flex}.demo-name-input{border:2px solid var(--line);background:color-mix(in srgb, var(--surface) 97%, var(--ink));border-radius:10px;flex:1;padding:10px 12px;font-size:15px}.demo-name-input:focus{border-color:var(--ink);outline:none}.demo-name-row .btn{min-height:0;box-shadow:none;flex:none;padding:9px 16px;font-size:14px}.demo-pending{color:var(--muted);margin-top:8px;font-size:13px}