:root{--s4-gold:#dcc4a2;--s4-muted:#ada5a0}body{background:radial-gradient(circle at 50% -30%,#29292b,#101112 66%);color:#eee9e2}.topbar{background:#121314eb!important;backdrop-filter:blur(18px);border-bottom:1px solid #554e4660!important}.topbar #export{background:var(--s4-gold);color:#1b1917;border-radius:99px;border:0}main.editor{display:block!important;margin:auto;max-width:1400px;padding:0 24px 50px}.workspace{display:flex;flex-direction:column;padding:24px 0!important;max-width:unset!important;gap:10px;align-items:center}.workspace-heading{width:min(100%,1120px);margin:0 auto 4px}.workspace-heading h1{font-weight:400;font-size:clamp(23px,2.7vw,34px)}.workspace-heading em{color:var(--s4-gold)}#viewport{height:clamp(280px,53vh,640px);width:min(100%,1120px);border-radius:22px;border:1px solid #504a42;background:radial-gradient(ellipse,#323334,#171819 76%);box-shadow:0 20px 65px #0009;overflow:hidden}#viewport canvas{max-height:unset;max-width:unset}#status{width:min(100%,920px);margin:3px auto 6px;text-align:center;background:#1d1e20;border:1px solid #4b4946;border-radius:12px;padding:9px 14px;font-size:12px}.view-toolbar{width:min(100%,1120px);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}.view-toolbar button{border-radius:100px}#comparison{width:min(100%,1120px)}.s4-dock{display:flex;gap:5px;padding:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin:10px auto 0;border:1px solid #62584e;background:linear-gradient(145deg,#292929,#1a1b1d);box-shadow:0 8px 36px #0009;border-radius:21px;max-width:100%}.s4-tool{flex:0 1 auto!important;min-height:63px!important;min-width:95px;padding:7px!important;display:flex;flex-direction:column;align-items:center;gap:5px;justify-content:center;background:transparent!important;border:1px solid transparent!important;border-radius:13px!important;color:#bdb8b3!important;font-size:10px;letter-spacing:.08em;transition:all .18s}.s4-tool[aria-pressed=true]{color:#f5dbb8!important;background:#45382c!important;border-color:#a48a69!important}.s4-tool-symbol{font-size:24px;line-height:1}.s4-station{width:min(100%,1120px);border:1px solid #5a5045;border-radius:22px;box-shadow:0 15px 45px #0007;background:linear-gradient(160deg,#28292b,#18191b);overflow:hidden}.s4-station-header{display:flex;align-items:center;justify-content:space-between;padding:17px 21px;border-bottom:1px solid #72635449;gap:10px;cursor:default}.s4-station-header small{color:#a99c8d;letter-spacing:.2em;font-size:9px}.s4-station-header h2{font-size:20px;letter-spacing:.12em;margin:3px 0 0}.s4-station-header button{border-radius:99px;font-size:12px;padding:7px 14px;background:#353435;border:1px solid #625b51}.s4-station-content{padding:20px}.s4-station.collapsed .s4-station-content{display:none}.s4-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:17px}.s4-chiprow button{min-height:36px;flex:0 0 auto;width:auto!important;border-radius:99px;padding:7px 14px!important;background:#343537;border:1px solid #5a5858;font-size:12px}.s4-chiprow button[aria-pressed=true]{background:#604c36;color:#f6d7a9;border-color:#c4a47b}.s4-sliderbox{max-width:760px;margin:0 auto}.s4-sliderhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.s4-sliderhead strong{font-size:17px;font-weight:500}.s4-sliderhead output{font-size:23px;color:var(--s4-gold);font-variant-numeric:tabular-nums}.s4-sliderbox input{width:100%;accent-color:#d9b68b}.s4-sliderfoot{display:flex;justify-content:space-between;color:#989393;font-size:10px;letter-spacing:.12em}.s4-sub{padding-top:18px;margin-top:23px;border-top:1px solid #5b544e}.s4-sub small{display:block;margin-bottom:13px;letter-spacing:.18em;color:#c8b098}.s4-swatches{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}.s4-swatches button{width:34px!important;height:34px!important;min-height:34px;padding:0!important;background:var(--s)!important;border-radius:50%;border:2px solid #252525;box-shadow:0 0 0 1px #999}.s4-swatches button[aria-pressed=true]{box-shadow:0 0 0 2px white,0 0 0 5px #6d5640}.s4-reset{margin-top:15px;border-radius:99px;padding:8px 16px;font-size:12px}.s4-ai .selection-toolbar{position:static!important;display:flex!important;flex-wrap:wrap;background:transparent!important;box-shadow:none!important;padding:0!important;margin:0 0 14px!important}.s4-ai .process-bar{margin:12px 0;max-width:410px}.s4-ai .engine-control{margin-top:15px}.s4-ai .instructions{margin:18px 0;border-top:1px solid #5c5347}.s4-ai .privacy{font-size:11px}.s4-history #history{display:flex;gap:7px;flex-wrap:wrap}.s4-history #history button{padding:5px}.controls[hidden],#alternatives[hidden]{display:none!important}#alternatives{width:min(100%,1120px);margin:10px auto}.canvas-hint{text-align:center} @media(max-width:800px){main.editor{padding:0 10px 30px}.workspace{padding:12px 0!important;gap:6px}.workspace-heading h1{font-size:24px}#viewport{height:clamp(240px,43dvh,470px);border-radius:15px}.view-toolbar button{min-height:37px;padding:7px 9px}.s4-dock{width:100%;gap:1px;flex-wrap:nowrap;padding:6px 2px;border-radius:16px}.s4-tool{flex:1 1 0!important;min-width:0;min-height:55px!important;padding:4px 1px!important;font-size:7px;letter-spacing:0}.s4-tool-symbol{font-size:20px}.s4-station{border-radius:16px}.s4-station-header{padding:11px 14px}.s4-station-header h2{font-size:16px}.s4-station-content{padding:13px;max-height:37dvh;overflow:auto;overscroll-behavior:contain}.s4-chiprow{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.s4-chiprow button{white-space:nowrap}.s4-ai .selection-toolbar{flex-wrap:wrap}#status{font-size:11px}}@media(prefers-reduced-motion:reduce){.s4-tool{transition:none}}


@media(max-width:800px){.s4-dock{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));z-index:12;backdrop-filter:blur(20px)}.s4-station{scroll-margin-bottom:90px}.topbar{position:sticky;top:0;z-index:15}.s4-sliderbox input{min-height:44px}}


/* Studio 4: mobile editor layout fix (keeps the live-Hue patch untouched). */
@media(max-width:800px){
html,body{max-width:100%;overflow-x:clip}
.topbar{display:grid;grid-template-columns:minmax(25px,1fr) max-content minmax(105px,1fr);gap:6px;width:100%;min-width:0;padding-inline:max(10px,env(safe-area-inset-left)) max(10px,env(safe-area-inset-right))}
.topbar>a{width:max-content;min-width:0;justify-self:start;line-height:1}
.topbar .wordmark{width:max-content;min-width:0;justify-self:center;white-space:nowrap;text-align:center;font-size:14px}
.topbar #export{min-width:0;width:max-content;max-width:none;justify-self:end;white-space:nowrap;font-size:10px;padding:7px 8px}
main.editor{width:100%;max-width:100%;min-width:0;padding-inline:10px}
.workspace,.workspace-heading,.view-toolbar,.s4-dock,.s4-station{min-width:0;max-width:100%}
.s4-dock{box-sizing:border-box;overflow:hidden;flex-shrink:0}
.s4-tool{min-width:0!important;max-width:100%;font-size:9px!important;letter-spacing:-.01em;text-align:center}
.s4-tool-symbol{font-size:19px}
.s4-swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.s4-swatches button{width:min(34px,7.2vw)!important;height:min(34px,7.2vw)!important;min-height:25px;justify-self:center}
.s4-station-header h2{font-size:16px}
.s4-station-header button{flex-shrink:0;white-space:nowrap}
.s4-chiprow{width:100%;min-width:0}
.s4-sub{padding-top:12px;margin-top:15px}
.s4-station-content{min-width:0;scrollbar-width:thin}
.view-toolbar button{min-width:0}
#before{min-width:0}
}
@media(max-width:800px) and (min-height:561px){
body.s4-photo-ready:not([data-s4-tool="ai"]){overflow:hidden}
body.s4-photo-ready:not([data-s4-tool="ai"]) main.editor{height:calc(100dvh - 58px);min-height:0;overflow:hidden;padding-bottom:0}
body.s4-photo-ready:not([data-s4-tool="ai"]) .workspace{position:relative;height:100%;min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 0 max(8px,env(safe-area-inset-bottom))!important}
body.s4-photo-ready:not([data-s4-tool="ai"]) .workspace-heading{position:absolute;top:12px;right:10px;z-index:11;width:auto;margin:0;pointer-events:none}
body.s4-photo-ready:not([data-s4-tool="ai"]) .workspace-heading>div{display:none}
body.s4-photo-ready:not([data-s4-tool="ai"]) #uploadButton{pointer-events:auto;min-height:34px;max-width:120px;background:#1b1c1de3;border:1px solid #766955;color:#f7e6c9;font-size:11px;padding:5px 9px;border-radius:99px}
body.s4-photo-ready:not([data-s4-tool="ai"]) #status{position:absolute;top:43px;left:10px;right:10px;z-index:11;width:auto;min-height:0;margin:0;font-size:10px;padding:5px 7px;max-height:36px;overflow:hidden;pointer-events:none}
body.s4-photo-ready:not([data-s4-tool="ai"]) #status[data-state="idle"],
body.s4-photo-ready:not([data-s4-tool="ai"]) #status[data-state="success"]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.s4-photo-ready:not([data-s4-tool="ai"]) #viewport{flex:1 1 27dvh;min-height:145px;max-height:none;width:100%;height:auto;border-radius:12px;box-shadow:none}
body.s4-photo-ready:not([data-s4-tool="ai"]) .view-toolbar{width:100%;display:grid;grid-template-columns:minmax(145px,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:5px;align-items:stretch;flex:0 0 auto;margin:0}
body.s4-photo-ready:not([data-s4-tool="ai"]) .view-toolbar>.zoom-controls{grid-column:auto;justify-content:flex-start;min-width:0;border:0;padding:0;gap:3px}
body.s4-photo-ready:not([data-s4-tool="ai"]) .view-toolbar .zoom-controls button{min-height:36px;height:36px;min-width:35px;padding:5px 7px}
body.s4-photo-ready:not([data-s4-tool="ai"]) .view-toolbar .zoom-controls output{font-size:11px;min-width:34px;text-align:center}
body.s4-photo-ready:not([data-s4-tool="ai"]) .view-toolbar>button{grid-column:auto;min-width:0;width:100%;min-height:36px;height:36px;font-size:10px;white-space:nowrap;padding:5px 4px}
body.s4-photo-ready:not([data-s4-tool="ai"]) .canvas-hint{display:none}
body.s4-photo-ready:not([data-s4-tool="ai"]) #comparison{flex:0 0 auto;margin:1px 0}
body.s4-photo-ready:not([data-s4-tool="ai"]) .s4-dock{position:relative;bottom:auto;z-index:10;flex:0 0 auto;margin:0;width:100%;padding:3px 2px}
body.s4-photo-ready:not([data-s4-tool="ai"]) .s4-tool{min-height:48px!important;padding:3px 1px!important;gap:2px}
body.s4-photo-ready:not([data-s4-tool="ai"]) .s4-station{width:100%;height:clamp(190px,38dvh,340px);min-height:0;flex:0 0 auto;display:flex;flex-direction:column;overflow:hidden;border-radius:13px;scroll-margin:0}
body.s4-photo-ready:not([data-s4-tool="ai"]) .s4-station.collapsed{height:auto}
body.s4-photo-ready:not([data-s4-tool="ai"]) .s4-station-header{flex:0 0 auto;padding:7px 11px}
body.s4-photo-ready:not([data-s4-tool="ai"]) .s4-station-header small{font-size:8px}
body.s4-photo-ready:not([data-s4-tool="ai"]) .s4-station-header h2{margin-top:0;font-size:14px}
body.s4-photo-ready:not([data-s4-tool="ai"]) .s4-station-header button{min-height:33px;padding:4px 10px}
body.s4-photo-ready:not([data-s4-tool="ai"]) .s4-station-content{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:10px 12px max(18px,env(safe-area-inset-bottom))}
body.s4-photo-ready:not([data-s4-tool="ai"]) .s4-chiprow{margin-bottom:10px}
body.s4-photo-ready:not([data-s4-tool="ai"]) .s4-sliderhead{margin-bottom:2px}
body.s4-photo-ready:not([data-s4-tool="ai"]) .s4-sliderhead strong{font-size:14px}
body.s4-photo-ready:not([data-s4-tool="ai"]) .s4-sliderhead output{font-size:18px}
body.s4-photo-ready:not([data-s4-tool="ai"]) .s4-reset{margin-top:9px}
}
@media(max-width:390px) and (min-height:561px){
body.s4-photo-ready:not([data-s4-tool="ai"]) .view-toolbar{grid-template-columns:1fr 1fr}
body.s4-photo-ready:not([data-s4-tool="ai"]) .view-toolbar>.zoom-controls{grid-column:1/-1;justify-content:center}
body.s4-photo-ready:not([data-s4-tool="ai"]) .s4-station{height:clamp(172px,33dvh,250px)}
body.s4-photo-ready:not([data-s4-tool="ai"]) #viewport{min-height:120px}
.s4-tool{font-size:8px!important}
}
@media(max-width:800px) and (max-height:560px){.s4-station-content{max-height:55dvh}#viewport{height:clamp(160px,46dvh,300px)}}


/* Studio 4 / Removal workspace — two intentional tools, not one long panel. */
.s4-ai{width:100%;min-width:0;display:flex;flex-direction:column;gap:0}
.s4-removal-nav{
 position:sticky;top:0;z-index:6;display:grid;grid-template-columns:1fr 1fr;
 gap:5px;align-items:center;width:100%;padding:5px;background:#1d1e20;
 border:1px solid #56504a;border-radius:13px;margin:0 0 13px;
}
.s4-removal-nav button{
 display:grid;place-items:center;min-width:0;min-height:39px;padding:8px 8px;
 font-size:12px;line-height:1.2;font-weight:650;letter-spacing:0;
 white-space:normal;border:1px solid transparent;border-radius:9px;
 color:#c2bcb5;background:transparent;
}
.s4-removal-nav button[aria-selected="true"]{
 color:#f1d2a8;background:#55483a;border-color:#9d805e;
 box-shadow:0 2px 8px #0004;
}
.s4-removal-nav button:focus-visible{outline:2px solid #ebcca0;outline-offset:2px}
.s4-removal-pane{width:100%;min-width:0;margin:0;display:flex;flex-direction:column;gap:11px}
.s4-removal-pane[hidden]{display:none!important}
.s4-remove-head{display:flex;flex-direction:column;gap:5px}
.s4-remove-head h3{font-size:17px;font-weight:720;line-height:1.2;margin:0;color:#f6e2c4;letter-spacing:-.015em}
.s4-remove-head p{font-size:11px;line-height:1.45;color:#b9b2aa;margin:0}
.s4-remove-actions{display:flex;gap:8px;align-items:stretch;min-width:0}
.s4-removal-background .s4-bg-go{
 display:block;flex:1 1 auto;min-width:0;min-height:48px;
 padding:9px 12px;border:1px solid #ead4b2;border-radius:10px;
 background:#e2c08a;color:#1e1913;font-size:13px;font-weight:760;letter-spacing:.01em;
 white-space:normal;line-height:1.3;
}
.s4-removal-background .s4-bg-go:disabled{opacity:.49}
.s4-removal-background .s4-bg-cancel{
 flex:0 0 auto;min-height:48px;padding:9px 13px;font-size:11px;
 border:1px solid #77716b;border-radius:10px;background:#272729;color:#eee;
}
.s4-removal-background .s4-bg-cancel[hidden]{display:none!important}
.s4-remove-status{font-size:10px;line-height:1.4;min-height:16px;margin:0;color:#c1b9b1;overflow-wrap:anywhere}
.s4-remove-step{font-size:10px;line-height:1.3;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#cdb08a}
.s4-remove-step-secondary{margin-top:2px}
.s4-removal-object .selection-toolbar{
 display:flex!important;flex-wrap:wrap;gap:6px!important;
 padding:0!important;margin:0!important;width:100%;min-width:0;
}
.s4-removal-object .selection-toolbar>button{
 min-width:0;min-height:38px;padding:7px 10px;font-size:11px;
 line-height:1.25;white-space:normal;
}
.s4-removal-object .brush-control{
 flex:1 1 100%;min-width:0;display:grid;grid-template-columns:auto auto minmax(0,1fr);
 align-items:center;gap:9px;margin:3px 0 0;padding:0 1px;
}
.s4-removal-object .brush-control input{min-width:0;width:100%}
.s4-removal-object .process-bar{width:100%;max-width:none!important;margin:0!important}
.s4-removal-object #run{width:100%;max-width:none;min-height:46px;border-radius:10px;font-size:13px}
.s4-removal-object .engine-control{
 display:flex;flex-direction:column;gap:10px;
 margin:0!important;padding:14px 0 0;border-top:1px solid #61584d55;
}
.s4-removal-object .engine-control>label:first-child{font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.s4-removal-object .engine-control select{width:100%;min-width:0;max-width:none}
.s4-removal-object .engine-control .choice-toggle{display:flex;align-items:center;gap:10px;font-size:11px;line-height:1.4}
.s4-removal-object .engine-control small{font-size:10px;line-height:1.5;color:#a9a198}
.s4-removal-object .instructions{margin:6px 0 0!important}
.s4-removal-object .privacy{margin:4px 0 0!important;font-size:10px!important;line-height:1.5}
.s4-station-content:has(.s4-ai) #alternatives{margin-top:10px!important;max-width:100%!important}
@media (max-width:800px){
 .s4-removal-nav{margin-bottom:9px;padding:4px;gap:4px}
 .s4-removal-nav button{font-size:11px;min-height:34px;padding:6px}
 .s4-removal-pane{gap:8px}
 .s4-remove-head h3{font-size:14px}
 .s4-remove-head p{font-size:10px;line-height:1.35}
 .s4-removal-background .s4-bg-go{min-height:41px;font-size:12px;padding:6px 9px}
 .s4-removal-background .s4-bg-cancel{min-height:41px;padding:6px 10px}
 .s4-remove-status{font-size:9px}
 .s4-removal-object .selection-toolbar>button{font-size:10px;min-height:35px;padding:6px 8px}
 .s4-removal-object .process-bar #run{min-height:42px;font-size:12px}
 .s4-removal-object .engine-control{padding-top:10px}
 .s4-remove-step{font-size:9px}
}
@media (max-width:390px) and (min-height:480px){
 body.s4-photo-ready .s4-station{height:clamp(209px,35dvh,260px)!important}
 .s4-remove-head p{font-size:9.5px}
}