:root{color-scheme:dark;--image-lime:#d3ff4e;--image-violet:#a17cff;--image-cyan:#52e1d2;--image-pink:#ff55b8;--image-line:#ffffff16;--image-muted:#a29caf;--image-panel:linear-gradient(145deg,#191a25f2,#14151df5)}
*{box-sizing:border-box}
html{min-width:320px;min-height:100%;scroll-behavior:smooth;background:#0b0c12}
body{min-height:100vh;margin:0;background:radial-gradient(ellipse at 8% 12%,#38205a52 0,transparent 29%),radial-gradient(ellipse at 94% 17%,#074c4a35 0,transparent 28%),radial-gradient(ellipse at 72% 100%,#54321f25 0,transparent 34%),linear-gradient(140deg,#0b0c12,#10111a 54%,#0b0c12);color:#f4f0ff;font-family:Inter,'Segoe UI',Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,.drop-zone:focus-visible{outline:2px solid var(--image-lime);outline-offset:3px}
.skip-link{position:absolute;top:8px;right:8px;z-index:100;padding:10px 15px;transform:translateY(-150%);border-radius:8px;background:var(--image-lime);color:#111;transition:transform .2s}
.skip-link:focus{transform:translateY(0)}
.brand small{display:block;margin-top:2px;color:var(--image-muted);font-size:8px;font-weight:750;letter-spacing:1.1px}
.studio-back{display:flex;align-items:center;gap:8px;color:#c4bdd3;font-size:11px;font-weight:650;text-decoration:none;transition:color .2s}
.studio-back span{color:var(--image-lime);font-size:15px}.studio-back:hover{color:white}
.page-shell.image-studio-shell{width:min(1000px,calc(100% - 48px));padding:35px 0 24px}
.image-intro{max-width:760px;margin:0 auto 29px;text-align:center}
.image-intro .eyebrow{gap:8px;color:var(--image-lime);font-size:9px;letter-spacing:1.45px}
.intro-spark{color:var(--image-pink);font-size:14px}
.image-intro h1{margin:13px 0 9px;color:#f6f2ff;font-size:clamp(34px,5.2vw,52px);font-weight:850;line-height:1.12;letter-spacing:-2.1px}
.image-intro h1 span{background:linear-gradient(95deg,var(--image-lime),var(--image-cyan) 56%,#bd9bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.image-intro>p{max-width:560px;margin:0 auto;color:#aaa4b8;font-size:13px;line-height:1.85}
.workflow{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:19px;color:#b6afc5;font-size:9px;font-weight:650}
.workflow span{display:flex;align-items:center;gap:6px}.workflow b{color:var(--image-lime);font-size:8px;letter-spacing:.6px}.workflow i{width:24px;height:1px;background:#ffffff20}
.studio-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);align-items:start;gap:17px}
.studio-panel{min-width:0;padding:21px;border:1px solid var(--image-line);border-radius:18px;background:var(--image-panel);box-shadow:0 20px 58px #0005,0 1px 0 #ffffff08 inset;backdrop-filter:blur(16px)}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.panel-heading h2{margin:4px 0 0;color:#f1edfa;font-size:17px;font-weight:760;letter-spacing:-.35px}
.step-label{color:var(--image-lime);font-size:8px;font-weight:850;letter-spacing:1.1px}
.privacy-pill{display:flex;align-items:center;gap:7px;padding:7px 9px;border:1px solid #d3ff4e27;border-radius:999px;background:#d3ff4e0b;color:#d9ff83;font-size:8px;font-weight:700;white-space:nowrap}
.privacy-pill i,.ready-dot{width:6px;height:6px;border-radius:50%;background:var(--image-lime);box-shadow:0 0 0 4px #d3ff4e16,0 0 10px #d3ff4e70}
.drop-zone{position:relative;display:flex;min-height:157px;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden;border:1px dashed #a17cff68;border-radius:13px;background:radial-gradient(ellipse at 50% 0,#9f70ff13,transparent 65%),#11121b;text-align:center;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.drop-zone:hover,.drop-zone.is-dragging{transform:translateY(-1px);border-color:var(--image-lime);background:radial-gradient(ellipse at 50% 0,#d3ff4e16,transparent 68%),#11121b}
.drop-zone input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;clip-path:inset(50%)}
.upload-icon{display:grid;width:39px;height:39px;place-items:center;margin-bottom:1px;border:1px solid #a17cff48;border-radius:12px;background:#a17cff14;color:#d0baff}
.upload-icon svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drop-zone strong{color:#f0ecf8;font-size:12px;font-weight:750}.drop-zone>span:not(.upload-icon){color:#a49db2;font-size:10px}.drop-zone em{color:var(--image-lime);font-style:normal;font-weight:750;text-decoration:underline;text-underline-offset:3px}.drop-zone small{margin-top:4px;color:#777285;font-size:8px}
.queue-heading{display:flex;align-items:center;justify-content:space-between;margin:15px 1px 8px;color:#ddd7e8;font-size:10px;font-weight:700}
.queue-heading b{display:inline-grid;min-width:19px;height:19px;place-items:center;margin-inline-start:5px;border:1px solid #ffffff18;border-radius:7px;background:#ffffff08;color:var(--image-lime);font-size:9px}
.text-button{padding:5px 0;border:0;background:none;color:#aaa3b9;font-size:9px;cursor:pointer}.text-button:hover:not(:disabled){color:#ff829f}.text-button:disabled{opacity:.42;cursor:default}
.file-list,.result-list{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.file-list:empty{display:none}
.file-item{display:grid;grid-template-columns:39px minmax(0,1fr) auto 23px;align-items:center;gap:9px;padding:7px;border:1px solid #ffffff12;border-radius:10px;background:#101119}
.file-thumb{width:39px;height:39px;overflow:hidden;border-radius:7px;background:#1b1c27;object-fit:cover}
.file-meta{min-width:0}.file-name{overflow:hidden;color:#e7e2ef;font-size:9px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}.file-details{margin-top:4px;color:#928b9e;font-size:8px;direction:ltr;text-align:right}
.file-size{color:#b1aabe;font-size:8px;direction:ltr}.remove-file{display:grid;width:23px;height:23px;place-items:center;border:1px solid transparent;border-radius:7px;background:transparent;color:#91899e;font-size:15px;cursor:pointer}.remove-file:hover{border-color:#ff648544;background:#ff648514;color:#ff90a8}
.settings-divider{height:1px;margin:18px 0;border:0;background:linear-gradient(90deg,transparent,#ffffff19,transparent)}
.settings-heading{margin-bottom:14px}.settings-mark{display:grid;width:30px;height:30px;place-items:center;border:1px solid #52e1d225;border-radius:9px;background:#52e1d210;color:var(--image-cyan);font-size:15px}
.setting-group{margin-top:15px}.setting-label{display:block;margin-bottom:8px;color:#ded9e8;font-size:9px;font-weight:750}
.format-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.format-option{display:flex;min-height:52px;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;padding:8px 10px;border:1px solid #ffffff17;border-radius:9px;background:#101119;color:#aaa4b7;text-align:right;cursor:pointer;transition:border-color .18s,background .18s,color .18s}
.format-option b{font-size:10px;letter-spacing:.5px}.format-option small{color:#827c90;font-size:8px}.format-option[aria-pressed="true"]{border-color:#a17cff85;background:linear-gradient(120deg,#a17cff25,#52e1d216);color:#f1eaff;box-shadow:0 0 16px #8d5be310}.format-option[aria-pressed="true"] small{color:#c0b2dc}
.range-heading{display:flex;align-items:center;justify-content:space-between}.range-heading .setting-label{margin:0}.range-heading output{color:var(--image-lime);font-size:10px;font-weight:800;direction:ltr}
.quality-group input[type=range]{width:100%;height:4px;margin:13px 0 0;accent-color:var(--image-violet);cursor:pointer}
.range-ends{display:flex;justify-content:space-between;margin-top:3px;color:#777185;font-size:8px}
.quality-group.is-disabled{opacity:.42}.quality-group.is-disabled input{cursor:not-allowed}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer}
.toggle-copy{display:grid;gap:4px}.toggle-copy b{color:#ded9e8;font-size:9px}.toggle-copy small{color:#8f899d;font-size:8px}
.toggle-row input{position:absolute;width:1px;height:1px;opacity:0}.switch{position:relative;width:34px;height:19px;flex:none;border:1px solid #ffffff26;border-radius:20px;background:#242430;transition:background .2s,border-color .2s}.switch::after{position:absolute;top:3px;right:3px;width:11px;height:11px;border-radius:50%;background:#aaa5b4;content:"";transition:transform .2s,background .2s}.toggle-row input:checked+.switch{border-color:#a17cff85;background:#a17cff45}.toggle-row input:checked+.switch::after{transform:translateX(-15px);background:#d3c3ff}.toggle-row input:focus-visible+.switch{outline:2px solid var(--image-lime);outline-offset:3px}
.dimension-fields{display:grid;grid-template-columns:1fr 18px 1fr;align-items:end;gap:6px;margin-top:12px;opacity:.46;transition:opacity .2s}.dimension-fields.is-enabled{opacity:1}.dimension-fields label{position:relative;display:grid;gap:6px;color:#aaa4b7;font-size:8px}.dimension-fields label>span{position:absolute;top:0;left:1px;color:#787286;font-size:8px}.dimension-fields input{width:100%;height:35px;padding:0 10px;border:1px solid #ffffff18;border-radius:8px;outline:none;background:#101119;color:#f2eef8;font-size:10px;direction:ltr;text-align:left}.dimension-fields input:focus{border-color:#a17cff88}.dimension-fields input:disabled{cursor:not-allowed}.dimension-fields input::placeholder{color:#686376}.dimension-times{padding-bottom:11px;color:#8d879a;text-align:center}
.setting-note{margin:7px 0 0;color:#797387;font-size:8px;line-height:1.6}
.background-group{padding:11px;border:1px solid #ffffff12;border-radius:10px;background:#101119}.background-group[hidden]{display:none}.background-picker{display:flex;align-items:center;gap:8px;color:#c8c2d3;font-size:9px}.background-picker input{width:28px;height:25px;padding:1px;border:1px solid #ffffff22;border-radius:6px;background:#171821;cursor:pointer}
.process-button{display:flex;width:100%;height:45px;align-items:center;justify-content:center;gap:10px;margin-top:17px;border:0;border-radius:10px;background:linear-gradient(105deg,#b65cff 0%,#8057ff 49%,#31cabc 100%);box-shadow:0 8px 24px #874cff38;color:#fff;font-size:11px;font-weight:800;cursor:pointer;transition:filter .18s,transform .18s,opacity .18s}.process-button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.1) saturate(1.08)}.process-button:disabled{opacity:.42;box-shadow:none;cursor:not-allowed}.process-button b{font-size:15px;font-weight:600}
.privacy-note{display:flex;align-items:center;justify-content:center;gap:6px;margin:11px 0 0;color:#888197;font-size:8px}.privacy-note span{color:var(--image-lime);font-size:11px}
.result-heading{margin-bottom:15px}.result-count{padding:6px 8px;border:1px solid #ffffff14;border-radius:8px;background:#ffffff07;color:#aaa3b5;font-size:8px;font-weight:700}
.summary-strip{display:grid;grid-template-columns:1fr 20px 1fr auto;align-items:center;gap:9px;margin-bottom:12px;padding:11px 12px;border:1px solid #ffffff13;border-radius:11px;background:#101119}.summary-strip[hidden]{display:none}.summary-strip>div{display:grid;gap:4px}.summary-strip small{color:#8e879b;font-size:8px}.summary-strip strong{color:#ded9e8;font-size:10px;direction:ltr;text-align:right}.summary-arrow{color:#a17cff;font-size:13px;text-align:center}.saving-badge{max-width:82px;padding:6px 7px;border:1px solid #d3ff4e27;border-radius:8px;background:#d3ff4e10;color:#ddff91;font-size:8px;font-weight:800;text-align:center;white-space:nowrap}.saving-badge.is-larger{border-color:#ffbd4a30;background:#ffbd4a12;color:#ffd17a}
.empty-result{display:flex;min-height:354px;flex-direction:column;align-items:center;justify-content:center;padding:25px;text-align:center}.empty-art{position:relative;width:122px;height:100px;margin-bottom:16px}.empty-image{position:absolute;width:67px;height:77px;border:1px solid #ffffff20;border-radius:12px;background:linear-gradient(145deg,#21212e,#14151e);box-shadow:0 13px 26px #0005}.empty-image-back{top:5px;left:12px;transform:rotate(-10deg);opacity:.6}.empty-image-front{top:8px;left:42px;display:grid;place-items:center;border-color:#a17cff45;background:linear-gradient(145deg,#28203b,#15151f);transform:rotate(8deg)}.empty-image-front i{width:38px;height:28px;border:1px solid #52e1d248;border-radius:6px;background:linear-gradient(145deg,#52e1d222,#a17cff15)}.empty-image-front i::after{display:block;width:11px;height:11px;margin:4px;border-radius:50%;background:#d3ff4e77;content:""}.empty-art>b{position:absolute;right:5px;bottom:5px;display:grid;width:27px;height:27px;place-items:center;border:1px solid #d3ff4e49;border-radius:9px;background:#d3ff4e17;color:var(--image-lime);font-size:14px;transform:rotate(-8deg)}.empty-result>strong{color:#e9e3f2;font-size:12px}.empty-result>p{max-width:280px;margin:8px 0 12px;color:#8f899e;font-size:9px;line-height:1.75}.supported-formats{color:#a99bc5;font-size:8px;font-weight:750;letter-spacing:1px}.supported-formats i{padding:0 5px;color:var(--image-lime);font-style:normal}
.result-card{overflow:hidden;border:1px solid #ffffff14;border-radius:12px;background:#101119}.result-card.is-stale{border-color:#ffbd4a31}.result-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border-bottom:1px solid #ffffff10}.result-file-info{min-width:0}.result-file-name{overflow:hidden;color:#e7e2ef;font-size:9px;font-weight:750;text-overflow:ellipsis;white-space:nowrap}.result-size-change{margin-top:4px;color:#918a9d;font-size:8px;direction:ltr;text-align:right}.result-status{flex:none;color:var(--image-lime);font-size:8px;font-weight:750}.result-status.is-stale{color:#ffd17a}.download-button{display:flex;min-height:28px;align-items:center;gap:5px;padding:0 9px;border:1px solid #d3ff4e25;border-radius:7px;background:#d3ff4e0e;color:#dcff87;font-size:8px;font-weight:750;text-decoration:none;white-space:nowrap}.download-button:hover:not([aria-disabled="true"]){border-color:#d3ff4e75;background:#d3ff4e1b}.download-button[aria-disabled="true"]{opacity:.4;pointer-events:none}
.result-preview{position:relative;display:grid;min-height:165px;place-items:center;overflow:hidden;padding:12px;background-color:#14151d;background-image:linear-gradient(45deg,#ffffff08 25%,transparent 25%),linear-gradient(-45deg,#ffffff08 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ffffff08 75%),linear-gradient(-45deg,transparent 75%,#ffffff08 75%);background-position:0 0,0 7px,7px -7px,-7px 0;background-size:14px 14px}.result-preview img{display:block;max-width:100%;max-height:205px;object-fit:contain;filter:drop-shadow(0 9px 17px #0008)}.result-placeholder{color:#867f92;font-size:9px}.result-metadata{display:flex;justify-content:space-between;gap:8px;padding:8px 11px;color:#8f899d;font-size:8px}.result-metadata span:last-child{direction:ltr}.status-message{min-height:17px;margin:9px 1px 0;color:#aaa3b5;font-size:9px;line-height:1.6}.status-message[data-kind="success"]{color:#c9f77c}.status-message[data-kind="error"]{color:#ff819a}.status-message:empty{display:none}
.results-foot{display:flex;align-items:center;gap:8px;margin-top:3px;padding-top:12px;border-top:1px solid #ffffff10;color:#918a9f;font-size:8px}.results-foot>span:nth-child(2){color:#5d5968}.results-foot .ready-dot{width:5px;height:5px}
.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:17px}.feature-row article{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #ffffff12;border-radius:12px;background:#13141c99}.feature-row article>span{display:grid;width:31px;height:31px;flex:none;place-items:center;border:1px solid #a17cff32;border-radius:9px;background:#a17cff0d;color:#c6a7ff;font-size:14px}.feature-row article:nth-child(2)>span{border-color:#52e1d22b;background:#52e1d20b;color:var(--image-cyan)}.feature-row article:nth-child(3)>span{border-color:#d3ff4e29;background:#d3ff4e0b;color:var(--image-lime)}.feature-row b{color:#ddd7e7;font-size:9px}.feature-row p{margin:4px 0 0;color:#8f899c;font-size:8px}
.tool-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding-top:15px;border-top:1px solid #ffffff12;color:#898396;font-size:8px}.tool-footer a{color:#aaa2b6;text-decoration:none}.tool-footer a:first-child{color:#ece7f4;font-size:10px;font-weight:850;letter-spacing:.4px}.tool-footer a:last-child span{color:var(--image-lime)}.tool-footer a:hover{color:var(--image-lime)}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:820px){.studio-grid{grid-template-columns:1fr}.results-panel{min-height:380px}.empty-result{min-height:280px}.result-preview{min-height:145px}}
@media(max-width:520px){.topbar{height:61px}.page-shell.image-studio-shell{width:calc(100% - 30px);padding-top:27px}.image-intro{margin-bottom:21px}.image-intro h1{font-size:35px;letter-spacing:-1.4px}.image-intro>p{font-size:11px}.workflow{gap:8px;font-size:8px}.workflow i{width:13px}.studio-panel{padding:15px;border-radius:15px}.privacy-pill{font-size:7px}.feature-row{grid-template-columns:1fr;gap:7px}.feature-row article{padding:10px}.tool-footer{flex-wrap:wrap;justify-content:space-between}.tool-footer>span{display:none}}
@media(max-width:370px){.workflow{gap:5px;font-size:7px}.workflow i{width:9px}.studio-panel{padding:12px}.summary-strip{grid-template-columns:1fr 14px 1fr auto;gap:5px;padding:9px}.saving-badge{padding:5px;font-size:7px}.result-card-top{flex-wrap:wrap}.download-button{margin-inline-start:auto}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
.file-details.file-error{color:#ff819a;direction:rtl;text-align:right}
.file-details.file-error{color:#ff819a;direction:rtl;text-align:right}
.empty-result[hidden]{display:none!important}