.vs{max-width:1480px;padding-bottom:40px;color:#25263e}.vs-heading{display:flex;justify-content:space-between;align-items:end;gap:24px;margin:30px 0}.vs-back{font-size:12px;color:#75758e}.vs-eyebrow{font-size:11px;letter-spacing:2px;color:#8a73c9;margin-top:24px;font-weight:700}.vs-heading h1{font-size:clamp(34px,5vw,58px);letter-spacing:-2px;line-height:1.08;margin:12px 0}.vs-heading p:last-child{color:#76768c;max-width:660px;line-height:1.6}.vs-private{font-size:12px;color:#447865;background:#e8f4ed;border:1px solid #d4e8dc;padding:10px 14px;border-radius:100px;white-space:nowrap}.vs-workspace{display:grid;grid-template-columns:285px minmax(0,1fr);border:1px solid #dedee8;border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 20px 70px #29244808}.vs-controls{padding:22px;background:#faf9fc;border-inline-end:1px solid #e7e5ef;min-width:0}.vs-control-title{display:flex;justify-content:space-between;font:700 10px system-ui;letter-spacing:1.7px;color:#88869d;margin:8px 0 18px}.vs-control-title:not(:first-child){margin-top:30px}.vs label:not(.vs-check):not(.vs-upload){display:block;font-size:12px;color:#59596f;margin:17px 0;font-weight:600}.vs input:not([type=checkbox]):not([type=range]):not([type=file]),.vs select{display:block;width:100%;min-width:0;background:#fff;border:1px solid #e0dfea;border-radius:9px;font:13px system-ui;padding:10px;color:#343448;margin-top:7px;box-sizing:border-box}.vs input[type=color]{height:39px!important;padding:4px!important}.vs input[type=range]{width:100%;accent-color:#8c6ed3;margin-top:12px;cursor:pointer}.vs output{float:inline-end;font-size:11px;color:#8c6ed3}.vs button{border:1px solid #dedee9;border-radius:9px;background:#fff;color:#50506b;font:600 12px system-ui;padding:10px 14px;cursor:pointer;transition:background .15s}.vs button:hover{background:#f0ecf7}.vs button:disabled{opacity:.4;cursor:not-allowed}.vs button:focus-visible,.vs input:focus-visible,.vs select:focus-visible,.vs summary:focus-visible,.vs-upload:focus-within{outline:3px solid #b8a4ea;outline-offset:3px}.vs-upload{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:25px 15px;border:1px dashed #c4b9dc;border-radius:14px;background:#f1edf8;cursor:pointer;position:relative}.vs-upload.dragging{background:#e3d9f4}.vs-upload-icon{font-size:30px;color:#9980c8}.vs-upload strong{font-size:12px;color:#685486;line-height:1.5}.vs-upload small{font-size:9px;color:#9b91ad}.vs-upload input{position:absolute;width:1px;height:1px;opacity:0}.vs .vs-text-btn{border:0;background:none;padding:12px 0;color:#8c6ed3;width:100%}.vs-muted{font-size:11px;color:#9692a8;line-height:1.6;overflow-wrap:anywhere}.vs-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.vs-presets button{padding:8px 0;font-size:11px}.vs-presets .selected{background:#eee7f8;border-color:#cdb8ec;color:#7e55ba}.vs details{border-top:1px solid #e7e4ef;margin-top:20px;padding-top:15px}.vs summary{font-size:12px;font-weight:600;color:#686178;cursor:pointer}.vs-check{display:flex;align-items:center;gap:7px;font-size:11px;color:#797287;margin:12px 0;line-height:1.5}.vs-check input{accent-color:#8c6ed3;width:14px;height:14px;flex-shrink:0}.vs .vs-primary{background:#8f71d0;color:#fff;border-color:#8f71d0;display:flex;align-items:center;justify-content:space-between;gap:15px}.vs .vs-primary:hover{background:#7c5ebd}.vs-controls>.vs-primary{width:100%;margin-top:20px}.vs-canvas-column{min-width:0;padding:0 24px 24px}.vs-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:20px 0}.vs-view-tabs{display:flex;background:#f5f4f8;border-radius:9px;padding:3px}.vs-view-tabs button{border:0;background:none;color:#9290a1;padding:8px 12px;font-size:11px}.vs-view-tabs button[aria-pressed=true]{background:#fff;color:#7b61ac;box-shadow:0 2px 7px #21114309}.vs-zoom{display:flex;gap:3px}.vs-zoom button{padding:8px 11px;font-size:11px;border:0;background:#faf9fc}.vs-viewport{height:460px;border:1px solid #e8e7ef;border-radius:15px;background:repeating-conic-gradient(#f4f2f7 0% 25%,#fff 0% 50%) 50%/20px 20px;overflow:auto;display:grid;align-items:center;justify-items:center;position:relative}.vs-empty{text-align:center;padding:30px;color:#b3a9c4}.vs-empty h2{font-size:24px;letter-spacing:-.7px;font-weight:600;color:#746980}.vs-empty p{font-size:12px;color:#a297ad;max-width:350px;line-height:1.7}.vs-empty>span{display:block;font-size:8px;letter-spacing:2px;margin-top:27px;color:#b0a3c2}.vs-mark{display:grid;place-items:center;margin:auto;width:90px;height:90px;border-radius:25px;border:1px solid #dcd2ec;background:#efe8f799;color:#ad92d0;font-size:55px;transform:rotate(-9deg);box-shadow:0 12px 35px #cab8e335}#vsStage{position:relative;width:80%;aspect-ratio:1;flex-shrink:0;margin:35px;direction:ltr}#vsStage img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}#vsOriginal{clip-path:inset(0 0 0 50%)}#vsDivider{position:absolute;inset-block:0;left:50%;border-left:1px solid #9371ce;pointer-events:none}#vsDivider:after{content:'↔';position:absolute;top:50%;left:-13px;width:25px;height:35px;display:grid;place-items:center;border-radius:7px;background:#8f71d0;color:#fff;box-shadow:0 2px 9px #54317322}.vs [hidden]{display:none!important}.vs-comparison{display:flex;align-items:center;gap:14px;font-size:8px;letter-spacing:1.2px;color:#a196ad;margin:13px 0}.vs-comparison input{margin:0!important;flex:1;min-width:0}.vs-result-bar{display:flex;justify-content:space-between;gap:15px;font-size:11px;color:#92869f;line-height:1.6;min-height:30px}.vs-result-bar span:last-child{white-space:nowrap;color:#756a85}.vs-palette-panel{display:flex;justify-content:space-between;gap:16px;align-items:center;border:1px solid #ece8f2;background:#fdfbff;border-radius:12px;padding:15px;margin:17px 0}.vs-palette-panel strong{font-size:11px;color:#776885}.vs-palette-panel p{margin:5px 0 0}.vs-palette{display:flex;flex-wrap:wrap;gap:5px;max-width:70%}.vs-palette input[type=color]{width:26px!important;height:26px!important;margin:0!important;border-radius:6px!important;cursor:pointer}.vs-export{padding:17px 0 0!important}.vs-export summary{letter-spacing:1px;font-size:10px;color:#8e849a}.vs-export-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 15px}.vs-export-grid label{margin:15px 0 0!important;font-size:11px!important}.vs-export-checks{display:flex;flex-wrap:wrap;gap:0 20px;margin-top:10px}.vs-downloads{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}.vs-downloads>span{font-size:10px;color:#a397b0}.vs-footnote{font-size:11px;line-height:1.8;color:#9b91a8;max-width:950px;margin:20px auto;text-align:center}.vs-footnote a{color:#8c6ed3}@media(max-width:1000px){.vs-workspace{grid-template-columns:245px minmax(0,1fr)}.vs-private{display:none}.vs-canvas-column{padding:0 16px 20px}.vs-palette-panel{align-items:start;flex-direction:column}.vs-palette{max-width:100%}.vs-viewport{height:380px}.vs-toolbar{flex-wrap:wrap}}@media(max-width:680px){.vs-heading{margin:20px 0}.vs-heading h1{letter-spacing:-1px}.vs-workspace{grid-template-columns:minmax(0,1fr);border-radius:17px}.vs-controls{border-inline-end:0;border-bottom:1px solid #e7e5ef;padding:18px}.vs-upload{padding:18px}.vs-controls label:not(.vs-upload):not(.vs-check){margin:13px 0}.vs-canvas-column{padding:0 12px 18px}.vs-export-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}.vs-toolbar{gap:8px}.vs-view-tabs button{padding:8px}.vs-zoom button{padding:8px}.vs-viewport{height:330px}.vs-result-bar{flex-direction:column;gap:3px}.vs-downloads>button{flex:1}.vs-heading p:last-child{font-size:13px}}

.vs .vs-auto{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:linear-gradient(120deg,#ede5fb,#e7f4ed);border-color:#d3c5ea;color:#74549e;margin:0 0 9px;padding:13px 12px}.vs .vs-auto:hover{background:#e4d8f4}.vs-auto[aria-pressed=true]{box-shadow:0 0 0 2px #b5a0d3}.vs-preview-frame{position:relative;isolation:isolate}.vs-loading{position:absolute;inset:0;z-index:3;border-radius:15px;display:grid;place-items:center;background:#f7f3fc80;backdrop-filter:blur(6px);pointer-events:none}.vs-loading-card{display:flex;align-items:center;flex-direction:column;text-align:center;gap:14px;max-width:calc(100% - 32px);padding:26px 30px;border-radius:22px;border:1px solid #fff;background:#ffffffed;box-shadow:0 20px 65px #4b306b20;color:#78608f}.vs-loading-card strong{font-size:16px;color:#62487f}.vs-loading-card>span:not(.vs-loading-orbit){font-size:12px}.vs-loading-card small{font-size:10px;color:#a094ac}.vs-loading-orbit{display:grid;place-items:center;font-size:27px;width:60px;height:60px;border:2px solid #e6dcee;border-top-color:#9872ce;border-radius:50%;color:#9a78c8;animation:vs-orbit 2.4s linear infinite}.vs-loading-track{width:190px;max-width:100%;height:4px;background:#ece5f4;border-radius:9px;overflow:hidden}.vs-loading-track span{display:block;height:100%;width:40%;border-radius:9px;background:linear-gradient(90deg,#c9b2eb,#92cbb0);animation:vs-track 1.5s ease-in-out infinite}@keyframes vs-orbit{to{transform:rotate(360deg)}}@keyframes vs-track{from{transform:translateX(-100%)}to{transform:translateX(350%)}}@media(prefers-reduced-motion:reduce){.vs-loading-orbit,.vs-loading-track span{animation:none}.vs-loading-track span{width:100%}}

#vsDivider{width:44px;margin-left:-22px;border-left:0;pointer-events:auto;cursor:ew-resize;touch-action:none;user-select:none;z-index:3}#vsDivider:before{content:'';position:absolute;top:0;bottom:0;left:22px;width:1px;background:#9371ce}#vsDivider:after{left:9px}#vsDivider:focus-visible{outline:2px solid #8f71d0;outline-offset:2px}

/* Error state stays readable in both themes and never relies on color alone. */
.studio-error{display:block!important;color:#fff!important;background:#991b1b!important;border:2px solid #f87171!important;border-inline-start:6px solid #ffb4b4!important;border-radius:10px;padding:12px 16px;font-size:14px!important;font-weight:700!important;line-height:1.6;overflow-wrap:anywhere;}
.studio-error::before{content:"⚠ ";font-size:18px;}
.up-result-bar:has(.studio-error),.vs-result-bar:has(.studio-error){align-items:start;}
.up-queue button:has(small[data-error]){border-color:#ef4444;}