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

.up .up-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}.up .up-auto:hover{background:#e4d8f4}.up-auto[aria-pressed=true]{box-shadow:0 0 0 2px #b5a0d3}.up-preview-frame{position:relative;isolation:isolate}.up-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}.up-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}.up-loading-card strong{font-size:16px;color:#62487f}.up-loading-card>span:not(.up-loading-orbit){font-size:12px}.up-loading-card small{font-size:10px;color:#a094ac}.up-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}.up-loading-track{width:190px;max-width:100%;height:4px;background:#ece5f4;border-radius:9px;overflow:hidden}.up-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){.up-loading-orbit,.up-loading-track span{animation:none}.up-loading-track span{width:100%}}
.up .up-primary{background:#168d80;border-color:#168d80}.up .up-primary:hover{background:#11796e}.up input[type=range]{accent-color:#168d80}.up-presets .selected{background:#e5f4ed;border-color:#9bcaba;color:#237a69}.up-queue{display:grid;gap:6px;max-height:220px;overflow:auto}.up-queue button{text-align:start;display:flex;flex-direction:column;gap:4px;padding:10px;overflow:hidden}.up-queue strong{font-size:11px;overflow-wrap:anywhere}.up-queue small{font-size:10px;font-weight:400;color:#8f899f}.up-queue button.selected{background:#e8f4ef;border-color:#91c9b7}.up-controls>button{margin-top:9px;width:100%}.up-dimensions{padding:12px;border-radius:10px;background:#edf5ef;color:#52836e;text-align:center;font:11px ui-monospace,monospace}.up-export{border-top:1px solid #ece8f1;padding-top:17px;margin-top:22px}.up-export-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.up-preview-frame{position:relative;isolation:isolate}.up-loading{pointer-events:auto}.up-loading-card progress{width:190px;height:6px;accent-color:#168d80}.up-orbit{font-size:35px;display:grid;place-items:center;width:65px;height:65px;color:#168d80;border:2px solid #dcefe6;border-top-color:#168d80;border-radius:50%;animation:vs-orbit 2s linear infinite}.up-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}.up-feature-grid article{padding:17px;border-radius:13px;background:#f7faf6;border:1px solid #e2ece3}.up-feature-grid article>span{font-size:20px;color:#789d84;display:block;margin-bottom:9px}.up-feature-grid strong{font-size:12px;color:#59816a;display:block}.up-feature-grid p{font-size:11px;line-height:1.7;color:#8a9c8f}.up-viewport{height:470px}.up-loading-card{color:#507c68}.up-loading-card strong{color:#34695b}.up [disabled]{cursor:not-allowed}@media(max-width:680px){.up-feature-grid{grid-template-columns:minmax(0,1fr)}.up-export-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.up-viewport{height:350px}.up-zoom button{padding:6px}.up-controls .up-queue{max-height:155px}}@media(prefers-reduced-motion:reduce){.up-orbit{animation:none}}

.up-detail-review{border:1px solid #e8e4ef;border-radius:15px;padding:18px;background:#faf9fc}.up-detail-heading{display:flex;justify-content:space-between;gap:12px;font-size:13px;margin-bottom:16px}.up-detail-heading span{color:#8c6ed3;font-size:11px}.up-detail-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.up-detail-pair figure{margin:0;min-width:0;text-align:center}.up-detail-pair canvas{max-width:100%;height:auto;border-radius:9px;background:repeating-conic-gradient(#eeeaf3 0% 25%,#fff 0% 50%) 50%/16px 16px}.up-detail-pair figcaption{font-size:11px;color:#757187;margin-top:10px}.up-detail-position{display:grid;grid-template-columns:1fr 1fr;gap:20px}.up-toolbar{flex-wrap:wrap}.up-view-tabs{flex-wrap:wrap}.up [hidden]{display:none!important}@media(max-width:500px){.up-detail-review{padding:12px}.up-detail-heading{flex-direction:column}.up-detail-pair{gap:8px}.up-detail-pair figcaption{font-size:9px}}

/* 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;}