.vsm-root{position:relative;display:inline-block;overflow:hidden;line-height:0}.vsm-base{display:block}.vsm-canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;pointer-events:none}.vsm-state{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:12px;background:#ffffffb8;color:#334155;font-size:14px;line-height:1.4;text-align:center}.vsm-state--error{color:#b42318}.vsm-legend{position:absolute;right:8px;bottom:8px;display:grid;gap:4px;max-width:calc(100% - 16px);padding:6px 8px;background:#f8fafc8f;backdrop-filter:blur(10px) saturate(140%);-webkit-backdrop-filter:blur(10px) saturate(140%);border:1px solid rgb(255 255 255 / 34%);box-shadow:0 10px 24px #0f172a1f;color:#1f2937;font-size:12px;line-height:1.2}.vsm-legend__item{display:grid;grid-template-columns:12px minmax(0,1fr);align-items:center;gap:6px;min-width:0}.vsm-legend__swatch{width:12px;height:12px;border:1px solid rgb(0 0 0 / 18%)}.vsm-legend__label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f5f7fb;color:#17202a}.demo{width:min(100% - 48px,1060px);margin:0 auto;padding:32px 0}.demo__header{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.demo__header h1,.demo__header p,.demo__case h2{margin:0}.demo__header h1{font-size:28px;line-height:1.15}.demo__header p{margin-top:6px;color:#526170}.demo__controls{display:flex;align-items:center;gap:16px;color:#344454;font-size:14px}.demo__controls label{display:flex;align-items:center;gap:8px;white-space:nowrap}.demo__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.demo__case{display:grid;gap:12px;min-width:0}.demo__case header{display:flex;align-items:baseline;gap:12px}.demo__case h2{font-size:18px;line-height:1.2}.demo__case span{color:#607080;font-size:13px}.demo__manual{display:grid;gap:16px;margin-top:28px;padding-top:28px;border-top:1px solid #dce3ea}.demo__manual>header{display:flex;align-items:center;justify-content:space-between;gap:16px}.demo__manual h2,.demo__manual p{margin:0}.demo__manual h2{font-size:18px;line-height:1.2}.demo__manual p{margin-top:6px;color:#607080;font-size:14px}.demo__manual button{border:0;border-radius:6px;background:#176d63;color:#fff;cursor:pointer;font:inherit;font-size:14px;padding:9px 16px;white-space:nowrap}.demo__manual button:disabled{background:#aeb8c2;cursor:not-allowed}.demo__upload-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.demo__upload-field{display:grid;gap:8px;min-width:0;padding:14px;border:1px solid #dce3ea;border-radius:8px;background:#fff}.demo__upload-field span{color:#344454;font-size:14px;font-weight:600}.demo__upload-field input{width:100%}.demo__upload-field small{overflow:hidden;color:#607080;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.demo__manual-preview{max-width:512px}@media(max-width:820px){.demo{width:min(100% - 28px,420px);padding:20px 0}.demo__header{align-items:start;flex-direction:column}.demo__grid{grid-template-columns:1fr}.demo__manual>header,.demo__upload-controls{grid-template-columns:1fr}.demo__manual>header{align-items:start;flex-direction:column}}