
@media (min-width:801px){
html,body{height:100%;overflow:hidden}
.topbar{height:66px!important;position:relative;z-index:10;padding:0 28px!important}
.topbar .wordmark{position:absolute;left:50%;transform:translateX(-50%);text-align:center}
.topbar #export{min-width:125px;padding:10px 18px}
main.editor{display:block!important;width:100%!important;max-width:none!important;height:calc(100dvh - 66px)!important;overflow:hidden!important;padding:0!important;margin:0!important}
main.editor>.workspace{
 display:grid!important;grid-template-columns:80px minmax(0,1fr) clamp(310px,27vw,390px);
 grid-template-rows:64px minmax(0,1fr) 44px auto;gap:10px 13px;
 align-items:stretch;justify-items:stretch;height:100%!important;min-height:0!important;
 max-width:none!important;padding:14px 20px 15px!important;overflow:hidden!important;margin:0!important
}
.workspace-heading{grid-column:1/-1;grid-row:1;width:100%!important;height:100%;margin:0!important;padding:0 1px 10px;border-bottom:1px solid #5a534760;display:flex;align-items:center;justify-content:space-between}
.workspace-heading h1{font-size:clamp(21px,2.1vw,29px)!important;margin:1px 0 0}
.workspace-heading .upload{min-width:145px;border-radius:99px}
#viewport{grid-column:2;grid-row:2;width:100%!important;height:100%!important;min-width:0;min-height:0;max-height:none!important;margin:0!important;border-radius:17px!important;box-shadow:0 14px 44px #0008}
#status{grid-column:2;grid-row:2;z-index:4;position:relative;align-self:start;justify-self:center;width:min(80%,600px)!important;max-height:50px;min-height:0;overflow:hidden;pointer-events:none;margin:15px 0 0!important;padding:8px 12px!important;background:#18191bcc!important;backdrop-filter:blur(14px)}
#status[data-state="success"],#status[data-state="idle"]{width:1px!important;height:1px!important;overflow:hidden;clip-path:inset(50%);margin:0!important;padding:0!important}
.view-toolbar{grid-column:2;grid-row:3;width:100%!important;min-height:0;margin:0!important;padding:0;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:8px}
.view-toolbar>.zoom-controls{display:flex;align-items:center;gap:5px;min-width:0;margin-right:auto}
.view-toolbar>.zoom-controls button{min-width:36px;min-height:36px;height:36px;padding:5px 9px}
.view-toolbar>.zoom-controls output{min-width:43px}
.view-toolbar>button{min-height:36px;height:36px;min-width:105px;white-space:nowrap;padding:5px 11px!important;font-size:11px!important}
#comparison{grid-column:2;grid-row:4;width:100%!important;margin:0!important;padding:0}
.canvas-hint{display:none!important}
.s4-dock{grid-column:1;grid-row:2/5;width:100%!important;max-width:none!important;min-width:0;max-height:100%;height:fit-content;margin:0!important;padding:7px 5px!important;border-radius:15px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;flex-wrap:nowrap!important;gap:6px!important;overflow-y:auto;scrollbar-width:thin}
.s4-tool{flex:0 0 auto!important;width:100%!important;min-width:0!important;min-height:70px!important;padding:7px 2px!important;gap:6px!important;letter-spacing:0!important;font-size:10px!important}
.s4-tool-symbol{font-size:23px}
.s4-station{grid-column:3;grid-row:2/5;width:100%!important;max-width:none!important;min-width:0;min-height:0;height:100%!important;margin:0!important;border-radius:16px!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;box-shadow:0 15px 45px #0008}
.s4-station-header{flex:0 0 auto!important;padding:15px 18px!important;background:#2c2927}
.s4-station-header h2{font-size:18px!important}
.s4-station-header button{min-height:34px;border-radius:22px;font-size:11px}
.s4-station-content{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden;width:100%;padding:16px 17px 22px!important;overscroll-behavior:contain;scrollbar-width:thin}
.s4-sliderbox{width:100%;max-width:none!important}
.s4-sliderhead strong{font-size:15px}
.s4-sliderhead output{font-size:20px}
.s4-chiprow{gap:6px!important;margin-bottom:12px}
.s4-chiprow button{font-size:11px!important;padding:7px 11px!important}
.s4-color-switcher button{flex:1}
.s4-sub{padding-top:14px;margin-top:16px}
.s4-swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.s4-swatches button{width:min(31px,100%)!important;height:31px!important;min-height:31px;justify-self:center}
.s4-ai .selection-toolbar button{flex:1 1 auto}
.s4-ai .process-bar{max-width:none}
#alternatives{width:100%!important;max-width:none!important}
.s4-layer-tray{display:flex;flex:0 0 auto;flex-direction:column;gap:7px;padding:12px 15px 13px;border-top:1px solid #68594977;background:linear-gradient(#202022,#1a1b1d)}
.s4-layer-top{display:flex;align-items:center;justify-content:space-between}
.s4-layer-top strong{font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.s4-layer-top button{min-height:28px;padding:3px 9px;font-size:10px;border-radius:20px}
.s4-layer-line{display:flex;align-items:center;gap:9px;min-height:43px;padding:6px 9px;border:1px solid #55514d;border-radius:9px;background:#2c2d2f}
.s4-adjust-layer{background:#342f2c;border-color:#93785a88}
.s4-layer-icon{display:grid;place-items:center;flex:0 0 31px;height:31px;border-radius:7px;background:#49433f;color:#f3d4a5;font-size:17px}
.s4-layer-copy{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;gap:1px}
.s4-layer-copy b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s4-layer-copy small{font-size:9px;color:#b1a9a1}
.s4-layer-visibility{flex:0 0 35px;min-height:33px!important;height:33px;padding:2px!important;border-radius:9px;background:#29292a!important;color:#eed4ad;font-size:16px}
.s4-layer-hidden{opacity:.62}
.s4-layer-caption{margin:0;font-size:9px;line-height:1.3;color:#a59b92}
body.s4-adjustments-muted[data-s4-tool="light"] .s4-station-content,
body.s4-adjustments-muted[data-s4-tool="color"] .s4-station-content,
body.s4-adjustments-muted[data-s4-tool="detail"] .s4-station-content{pointer-events:none;opacity:.46}
}
@media(min-width:801px) and (max-width:1120px){
 main.editor>.workspace{grid-template-columns:66px minmax(0,1fr) 300px!important;gap:9px!important;padding:12px!important}
 .s4-tool{font-size:9px!important;min-height:64px!important}
 .s4-station-content{padding:13px!important}
 .s4-layer-tray{padding:10px!important}
 .view-toolbar>button{min-width:83px;font-size:10px!important;padding:5px 7px!important}
 .zoom-controls button{min-width:31px!important}
}
/* A short desktop window still needs simultaneous access to the photo and tools. */
@media(min-width:801px) and (max-height:700px){
 main.editor>.workspace{grid-template-rows:48px minmax(0,1fr) 38px auto;gap:7px 10px;padding:8px 12px 9px!important}
 .workspace-heading{padding-bottom:6px}
 .workspace-heading h1{font-size:22px!important}
 .workspace-heading .eyebrow{font-size:8px}
 .s4-station-header{padding:8px 13px!important}
 .s4-station-header h2{font-size:15px!important;margin:0}
 .s4-station-header small{font-size:8px}
 .s4-station-content{padding:12px!important}
 .s4-tool{min-height:51px!important;gap:3px!important;padding:4px 2px!important}
 .s4-tool-symbol{font-size:20px}
 .s4-layer-tray{padding:7px 10px!important;gap:4px}
 .s4-layer-line{min-height:34px;padding:3px 6px;gap:6px}
 .s4-layer-icon{flex-basis:25px;height:25px;font-size:15px}
 .s4-layer-visibility{min-height:28px!important;height:28px;flex-basis:30px}
 .s4-layer-caption{display:none}
 .view-toolbar>.zoom-controls button,.view-toolbar>button{min-height:34px;height:34px}
}
@media(min-width:801px) and (max-height:500px){
 .topbar{height:54px!important}
 main.editor{height:calc(100dvh - 54px)!important}
 main.editor>.workspace{grid-template-rows:40px minmax(0,1fr) 34px auto;gap:5px 9px}
 .workspace-heading h1{font-size:18px!important}
 .workspace-heading .eyebrow{display:none}
 .workspace-heading .upload{min-height:34px;padding:5px 10px}
}
@media(max-width:800px){.s4-layer-tray{display:none!important}}
