:root{font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#252522;background:#fdfdfc;--canvas:#fdfdfc;--panel:#f7f7f5;--line:rgba(39,39,35,.07);--text:#343430;--muted:#777771;--accent:#64645c;--track:#deded8}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{color:inherit;cursor:pointer;border:0;background:none;transition:background .15s,border-color .15s,color .15s,opacity .15s}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #92928a;outline-offset:3px}button:disabled{opacity:.3;cursor:default}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}[hidden]{display:none!important}
.app{display:grid;grid-template-columns:var(--library-width,264px) var(--library-divider,5px) minmax(0,1fr) var(--controls-divider,5px) var(--controls-width,286px);grid-template-rows:minmax(0,1fr);height:100svh;min-height:500px;overflow:hidden}.library-sidebar,.sidebar{display:flex;flex-direction:column;min-height:0;background:var(--panel)}.library-sidebar,.sidebar{position:relative;z-index:2}.panel{min-height:0;flex:1}.library-panel{display:flex;flex-direction:column}.collection-tabs{margin:6px;flex:none}.collection-tabs button{min-height:32px}.collection-tabs button[aria-selected=true]{background:#eaeae3;color:#343430}.image-grid{display:block;overflow:auto;padding:0;flex:1;min-height:0;scrollbar-width:thin;scrollbar-color:#d9d9d2 transparent}.asset-item{min-width:0}.asset-tile{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;border:0;border-radius:0}.asset-tile img{width:100%;height:100%;object-fit:cover;display:block}.asset-tile::after{content:'';position:absolute;inset:0;pointer-events:none;transition:box-shadow .15s}.asset-tile:hover::after{box-shadow:inset 0 0 0 2px #fff8}.asset-tile[aria-pressed=true]::after{box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px #343430}.asset-tile:focus-visible{outline-offset:-3px;z-index:1}
.panel-resizer{position:relative;z-index:4;cursor:col-resize;touch-action:none;background:var(--panel)}.panel-resizer::before{content:'';position:absolute;inset:0 -5px}.panel-resizer::after{content:'';position:absolute;inset:0 2px;background:var(--line);transition:background .15s}.panel-resizer:hover::after,.panel-resizer:focus-visible::after,.panel-resizer.resizing::after{background:#aaa99e}.app.resizing{user-select:none}.app.resizing canvas{pointer-events:none}

.workspace{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:36px 28px 105px;background:var(--canvas);overflow:hidden}.stage{height:100%;width:100%;display:flex;justify-content:center;align-items:center;min-height:0;touch-action:none;position:relative}.artwork-wrap{position:relative;box-shadow:0 5px 24px #24242008,0 1px 2px #24242008;max-width:100%;max-height:100%;aspect-ratio:4/5;background:#deded6;width:auto;height:100%;transition:opacity .24s ease;transform-origin:center;will-change:transform,opacity}.artwork-wrap.changing{opacity:0;transition-duration:.16s}canvas{display:block;width:100%;height:100%;object-fit:contain}.loading{position:absolute;inset:0;display:grid;place-items:center;background:#eaeae5;color:var(--muted);font-size:11px}.loading span{width:5px;height:5px;border-radius:50%;background:#989890;animation:pulse 1s infinite alternate}@keyframes pulse{to{opacity:.15}}
.icon-button{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;flex-shrink:0;color:#777771}.icon-button svg{width:18px;height:18px}.icon-button:hover:not(:disabled){background:#eeeee9;color:#343430}.canvas-toolbar{z-index:3;position:absolute;bottom:27px;display:flex;align-items:center;justify-content:space-between;width:328px;max-width:calc(100% - 16px);height:52px;gap:6px;padding:7px;background:rgba(255,255,255,.92);border:1px solid rgba(36,36,32,.065);border-radius:16px;box-shadow:0 3px 18px #24242006}.canvas-toolbar .icon-button{width:36px;height:36px;flex:0 0 36px;border-radius:8px;color:#62625b}.canvas-toolbar .icon-button svg{width:19px;height:19px}.canvas-toolbar #export{color:#343430}.mobile-tabs{display:none}
.studio-panel{padding:0 22px 20px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d9d9d2 transparent}.control-section{padding:0;border-bottom:1px solid var(--line)}.control-section>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;cursor:pointer;min-height:53px;font-size:12px;font-weight:600;letter-spacing:.01em;color:#343430;user-select:none}.control-section>summary::-webkit-details-marker{display:none}.control-section>summary::after{content:'';width:6px;height:6px;flex-shrink:0;border-right:1.3px solid #8b8b83;border-bottom:1.3px solid #8b8b83;transform:rotate(-45deg);margin-right:3px;transition:transform .15s}.control-section[open]>summary::after{transform:rotate(45deg) translate(-1px,-1px)}.control-section>summary:hover{color:#111110}.control-section>summary:focus-visible{outline-offset:-2px;border-radius:4px}.section-body{padding:13px 0 23px}#treatments-details>.section-body,#color-details>.section-body{padding-top:2px}.section-body>.range-label:first-child{margin-top:0}
.treatments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.treatments button{border:1px solid #e3e3dd;border-radius:6px;display:flex;flex-direction:column;align-items:center;padding:9px 1px;gap:5px;color:#85857b}.treatments button svg{width:31px;height:28px;stroke-width:.9}.treatments button span{font-size:9px}.treatments button[aria-pressed=true]{background:#eeeee8;border-color:#a8a89c;color:#414139}.treatments button:hover{border-color:#b9b9ae;background:#f0f0eb}:is(.ratio-options,.segmented-options){display:flex;border:1px solid #ddddd5;border-radius:5px;overflow:hidden}:is(.ratio-options,.segmented-options) button{flex:1;padding:9px 3px;font-size:10px;color:#77776e}:is(.ratio-options,.segmented-options) button+button{border-left:1px solid #ddddd5}:is(.ratio-options,.segmented-options) button[aria-pressed=true]{background:#eaeae3;color:#343430}
.range-label{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#66665d;margin:17px 0 7px}.range-label output{color:#8a8a80;font-size:10px;font-variant-numeric:tabular-nums}input[type=range]{display:block;appearance:none;width:100%;height:14px;background:transparent;margin:0;cursor:pointer;accent-color:var(--accent)}input[type=range]::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:var(--track)}input[type=range]::-webkit-slider-thumb{appearance:none;background:#8c8c81;border:2px solid var(--panel);width:12px;height:12px;border-radius:50%;margin-top:-5px;box-shadow:0 0 0 .6px #b8b8ac}input[type=range]::-moz-range-track{height:2px;background:var(--track)}input[type=range]::-moz-range-thumb{background:#8c8c81;border:2px solid var(--panel);width:9px;height:9px;border-radius:50%}
.swatches{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:2px}.swatches button{position:relative;background:var(--swatch);width:100%;aspect-ratio:1;border-radius:4px;border:2px solid var(--panel);box-shadow:0 0 0 1px transparent}.swatches button:hover{box-shadow:0 0 0 1px #b8b8ae}.swatches button[aria-pressed=true]{box-shadow:0 0 0 1.5px #64645b}.swatches button[aria-pressed=true]::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:4px;border-left:1.7px solid #fff;border-bottom:1.7px solid #fff;transform:translate(-50%,-65%) rotate(-45deg);filter:drop-shadow(0 1px 1px #0007)}.effect-parameters{margin-top:24px}.field-label{display:block;color:#66665d;font-size:11px;margin-bottom:9px}.switch-row{display:flex;align-items:center;justify-content:space-between;position:relative;margin:19px 0;color:#66665d;font-size:11px;cursor:pointer}.switch-row input{position:absolute;right:0;opacity:0;width:28px;height:16px}.switch-ui{width:26px;height:14px;background:#ddddd4;border-radius:10px;position:relative;pointer-events:none}.switch-ui::after{content:'';position:absolute;left:2px;top:2px;width:10px;height:10px;background:#fff;border-radius:50%;transition:transform .15s}.switch-row input:checked+.switch-ui{background:#8c8c7e}.switch-row input:checked+.switch-ui::after{transform:translateX(12px)}.switch-row input:focus-visible+.switch-ui{outline:2px solid #92928a;outline-offset:3px}.segmented-field{margin:19px 0}.section-body>.segmented-field:first-child{margin-top:0}.segmented-field .field-label{margin-bottom:10px}.segmented-options button{min-width:0;font-size:9px;padding:10px 2px}.segmented-options button:hover{background:#efefe9}

@media(min-width:1500px){.workspace{padding:48px 45px 110px}}
@media(max-width:1100px){.workspace{padding:30px 20px 103px}.studio-panel{padding-left:18px;padding-right:18px}}

.control-tooltip{position:fixed;z-index:20;max-width:225px;padding:9px 12px;color:#f9f9f7;background:#262625;border:1px solid #ffffff0d;border-radius:9px;font-size:11px;font-weight:400;line-height:1.5;box-shadow:0 4px 16px #0002;pointer-events:none;opacity:0;transform:translateY(3px);transition:opacity .13s,transform .13s;text-align:center}.control-tooltip[data-visible=true]{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:0;align-content:start}
.library-sidebar,.sidebar{min-width:0;overflow:hidden}
.panel-toggle{position:absolute;top:10px;z-index:5;width:28px;height:28px;background:var(--canvas)}
.library-toggle{left:9px}.controls-toggle{right:9px}.panel-toggle svg{width:19px;height:19px;stroke-width:1.7}
@media(min-width:801px){.app[data-left-collapsed=true] .library-sidebar,.app[data-right-collapsed=true] .sidebar{visibility:hidden;pointer-events:none}
.app[data-left-collapsed=true] #library-resizer,.app[data-right-collapsed=true] #controls-resizer{visibility:hidden;pointer-events:none}}
@media(min-width:801px){.app[data-left-collapsed=true]{--library-width:0px!important;--library-divider:0px}.app[data-right-collapsed=true]{--controls-width:0px!important;--controls-divider:0px}}


.flat-controls{margin-top:0}.flat-controls>.segmented-field:first-child{margin-top:0}.library-sidebar{container:library / inline-size}.sidebar{container:controls / inline-size}.collection-tabs button{font-size:10px;padding:9px 3px}
.collection-tabs button{display:flex;align-items:center;justify-content:center}.collection-icon{display:block;width:18px;height:18px;stroke-width:1.35}.collection-name{display:none}
@container controls (max-width:310px){.treatments{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container controls (max-width:260px){.studio-panel{padding-left:18px;padding-right:18px}}
.studio-panel>.control-section:last-child{border-bottom:0}

.flat-controls{display:flex;flex-direction:column;gap:30px}.control-group{min-width:0}.effect-choices,.effect-switches{display:flex;flex-direction:column;gap:17px}.effect-choices>.segmented-field,.effect-switches>.switch-row{margin:0}.effect-sliders>.range-label:first-child{margin-top:0}

/* Formatting stays in workspace coordinates while text boxes follow canvas zoom. */
.text-color-trigger,.text-dropdown-trigger{display:flex;align-items:center;justify-content:center;gap:2px;min-width:0;height:35px;padding:0 3px;border:1px solid #ddddd5;border-radius:8px;background:#fbfbf9}.text-color-trigger:hover,.text-color-trigger[aria-expanded=true],.text-dropdown-trigger:hover,.text-dropdown-trigger[aria-expanded=true],.text-dropdown-trigger[data-active=true]{background:#efefe9}.text-dropdown-trigger>svg:first-child{width:19px;height:19px;flex:none;color:#64645c}.text-dropdown-trigger>svg.text-style-icon{width:26px;height:18px}.text-color-preview{width:25px;height:25px;border-radius:4px;background:#111827;box-shadow:inset 0 0 0 1px #00000014}.text-color-popover,.text-format-popover{position:absolute;z-index:3;width:232px;max-width:calc(100vw - 32px);padding:11px;border:1px solid #deded7;border-radius:12px;background:#fdfdfb;box-shadow:0 8px 28px #24242020,0 2px 6px #2424200a;overflow:auto;overscroll-behavior:contain}.text-format-popover{width:132px;padding:6px}.text-format-popover .text-segments{border:0;border-radius:7px}.text-format-popover .text-segments button{height:32px;border:0;border-radius:6px}.text-format-popover .text-segments button+button{border-left:0}.text-color-swatches{gap:4px;padding:2px}.text-color-swatches button{min-width:0;min-height:0;border-color:#fdfdfb}.text-color-opacity{display:flex;flex-direction:column;gap:8px;margin-top:11px;padding-top:0;border-top:0}.text-color-opacity label{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:11px;color:#77776e}.text-color-opacity output{font-size:10px;font-variant-numeric:tabular-nums;color:#8a8a80}
.text-leading-options{display:flex;flex-direction:column;gap:2px}.text-leading-options button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:30px;padding:6px 9px;border-radius:6px;text-align:left;font-size:12px;font-variant-numeric:tabular-nums;color:#68685f}.text-leading-options button:hover,.text-leading-options button[aria-pressed=true]{background:#eaeae3;color:#343430}.text-leading-options button[aria-pressed=true]::after{content:"✓";font-size:12px}.text-leading-options button:focus-visible{outline-offset:-2px}
.text-toolbar{position:absolute;z-index:12;left:8px;top:8px;width:min(391px,calc(100% - 16px));height:52px;padding:7px;border:1px solid #deded7;border-radius:16px;background:rgba(253,253,251,.98);box-shadow:0 5px 24px #24242014,0 1px 3px #24242008;isolation:isolate}
.text-controls{color:var(--text)}.text-controls input{font:inherit;color:var(--text)}.text-toolbar-row{display:grid;height:100%;grid-template-columns:minmax(0,1fr) 36px repeat(5,35px);gap:4px;align-items:center}.text-input-field{display:flex;align-items:center;min-width:0;height:35px;border:1px solid #ddddd5;border-radius:8px;background:#fbfbf9}.text-input-field input{min-width:0;width:100%;height:100%;padding:0 8px;border:0;border-radius:4px;outline-offset:2px;background:transparent;font-size:11px}.text-input-field input[type=number]{appearance:textfield;font-variant-numeric:tabular-nums}.text-input-field input[type=number]::-webkit-inner-spin-button,.text-input-field input[type=number]::-webkit-outer-spin-button{margin:0;appearance:none}#text-size{padding-inline:4px;text-align:center;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;outline:none;box-shadow:none}#text-size:focus,#text-size:focus-visible{outline:none;box-shadow:none}.text-size-field{background:#f7f7f2;border-color:#e1e1da;transition:background .15s,border-color .15s}.text-size-field:focus-within{background:#fff;border-color:#bdbdb3}.text-font-trigger{position:relative;display:flex;align-items:center;width:100%;padding:0 23px 0 9px;text-align:left;font-size:11px}.text-font-trigger:hover,.text-font-trigger[aria-expanded=true]{background:#efefe9}#text-font-label{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-field-chevron{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:#8b8b83;pointer-events:none}.text-segments{display:flex;min-width:0;overflow:hidden;border:1px solid #ddddd5;border-radius:5px}.text-segments button{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;height:29px;padding:4px 0;color:#77776e}.text-segments button+button{border-left:1px solid #ddddd5}.text-segments button:hover{background:#efefe9}.text-segments button[aria-pressed=true]{background:#eaeae3;color:#343430}.text-segments button:focus-visible{outline-offset:-3px}.text-segments svg{width:15px;height:15px}.text-delete{width:35px;height:35px;border:1px solid #ddddd5;border-radius:8px;background:#fbfbf9}.text-delete svg{width:21px;height:21px}.text-delete:hover:not(:disabled){background:#f4e9e4;color:#974f3b}
.font-popover{position:absolute;z-index:12;display:flex;flex-direction:column;width:232px;max-width:calc(100vw - 32px);max-height:min(288px,50svh);padding:6px;border:1px solid #deded7;border-radius:12px;background:#fdfdfb;box-shadow:0 5px 20px #24242015;overflow:hidden}.text-controls #font-search{flex:none;width:100%;height:33px;padding:0 9px;border:1px solid #ddddd5;border-radius:7px;outline-offset:-1px;background:#f7f7f3;font-size:11px}#font-options{min-height:0;max-height:226px;overflow:auto;margin-top:5px;padding:2px;scrollbar-width:thin;scrollbar-color:#d9d9d2 transparent}.font-option{display:block;width:100%;padding:8px 9px;border-radius:4px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#5d5d55}.font-option:hover,.font-option.is-active,.font-option[aria-selected=true]{background:#eaeae3;color:#343430}.font-option:focus-visible{outline-offset:-2px}.font-empty{padding:10px 9px;color:#8a8a80;font-size:11px;line-height:1.4}
.text-layers{position:absolute;inset:0;z-index:1;pointer-events:none}.text-box-target{position:absolute;display:block;margin:0;padding:0;border:0;border-radius:0;background:transparent;outline:1px solid transparent;outline-offset:3px;pointer-events:auto;cursor:pointer;touch-action:none}.text-box-target:hover{outline-color:#929a9f88}.text-box-target:focus-visible{outline:2px solid #929a9f;outline-offset:3px}.text-layer{position:absolute;z-index:2;pointer-events:none;cursor:grab;touch-action:none;background:transparent;outline:1px solid #929a9f;outline-offset:3px}.text-layer:not([hidden]){pointer-events:auto}.text-layer:focus-visible{outline-width:2px}.text-layer.dragging,.text-layer[data-dragging=true]{cursor:grabbing;outline-color:#64645c}.text-layer.editing{cursor:text}.canvas-text-editor{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;outline:0;background:transparent;resize:none;overflow:hidden;white-space:pre-wrap;overflow-wrap:break-word;cursor:text;caret-color:currentColor;box-shadow:none}.canvas-text-editor[hidden]{display:none}.text-resize-handle{position:absolute;z-index:3;display:block;width:8px;height:8px;padding:0;border:1px solid #7d868d;border-radius:1.5px;background:#f8f8f5;box-shadow:0 1px 3px #0002;touch-action:none;transform:translate(-50%,-50%)}.text-resize-handle::before{content:'';position:absolute;inset:-5px}.text-resize-handle[data-text-resize=nw]{left:0;top:0;cursor:nwse-resize}.text-resize-handle[data-text-resize=n]{left:50%;top:0;cursor:ns-resize}.text-resize-handle[data-text-resize=ne]{left:100%;top:0;cursor:nesw-resize}.text-resize-handle[data-text-resize=e]{left:100%;top:50%;cursor:ew-resize}.text-resize-handle[data-text-resize=se]{left:100%;top:100%;cursor:nwse-resize}.text-resize-handle[data-text-resize=s]{left:50%;top:100%;cursor:ns-resize}.text-resize-handle[data-text-resize=sw]{left:0;top:100%;cursor:nesw-resize}.text-resize-handle[data-text-resize=w]{left:0;top:50%;cursor:ew-resize}
@media(max-width:400px){.text-toolbar{padding:7px}.text-toolbar-row{grid-template-columns:minmax(0,1fr) 36px repeat(5,35px);gap:3px}.text-toolbar .text-input-field input{padding-left:6px;padding-right:4px}.text-toolbar .text-font-trigger{padding-right:19px;padding-left:6px}.text-toolbar .text-field-chevron{right:3px}.canvas-toolbar{width:304px;gap:6px}}

@media(max-width:340px){.text-toolbar-row{grid-template-columns:minmax(0,1fr) 34px repeat(5,32px);gap:2px}.text-toolbar .text-delete{width:32px}.text-toolbar .text-font-trigger{padding-left:5px;padding-right:16px}.text-toolbar .text-field-chevron{right:1px;width:13px}.text-toolbar .text-color-preview{width:23px;height:23px}}

/* Rotation regions hug each corner; the resize handles retain pointer priority. */
.text-layer,.text-box-target{transform-origin:50% 50%}.text-rotate-handle{position:absolute;z-index:2;width:32px;height:32px;padding:0;border:0;border-radius:0;background:transparent;touch-action:none;cursor:crosshair}.text-rotate-handle:focus,.text-rotate-handle:focus-visible{outline:0;box-shadow:none}.text-rotate-handle[data-text-rotate=nw]{left:-24px;top:-24px}.text-rotate-handle[data-text-rotate=ne]{right:-24px;top:-24px}.text-rotate-handle[data-text-rotate=se]{right:-24px;bottom:-24px}.text-rotate-handle[data-text-rotate=sw]{left:-24px;bottom:-24px}.workspace.text-rotating *{cursor:inherit!important}

/* Fixed mobile navigation and a single contextual shelf above the canvas. */
.library-sidebar{grid-column:1;grid-row:1}#library-resizer{grid-column:2;grid-row:1}.workspace{grid-column:3;grid-row:1}#controls-resizer{grid-column:4;grid-row:1}.sidebar{grid-column:5;grid-row:1}
@media(max-width:800px){
 .app{display:flex;flex-direction:column;height:100svh;min-height:0;--mobile-thumb-size:72px}
 .panel-toggle,.panel-resizer{display:none}
 .mobile-tabs{order:0;display:flex;flex:none;align-items:center;gap:4px;width:100%;height:52px;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--panel);z-index:9}
 .mobile-tabs button{display:flex;align-items:center;justify-content:center;flex:1;min-width:0;height:36px;padding:0 4px;border:1px solid transparent;border-radius:7px;white-space:nowrap;font-size:11px;color:#85857b}
 .mobile-tabs button[data-mobile-section=treatments]{flex:1.4}
 .mobile-tabs button[aria-selected=true]{background:#e9e9e2;border-color:#ddddd5;color:#343430}
 .mobile-tabs button:focus-visible{outline-offset:-2px}
 .library-sidebar,.sidebar{order:1;flex:none;width:100%;min-height:0;height:clamp(140px,34svh,260px);border:0;border-bottom:1px solid var(--line);visibility:visible;pointer-events:auto}
 .library-sidebar{height:89px}
 .app[data-panel=studio] .library-sidebar,.app[data-panel=library] .sidebar{display:none}
 .app[data-panel=studio] .sidebar,.app[data-panel=library] .library-sidebar{display:flex}
 .app:is([data-mobile-section=treatments],[data-mobile-section=color]) .sidebar{height:89px}
 .collection-tabs{display:none}
 .collection-tabs button{font-size:10px;padding:6px 3px;border-top:0!important;min-width:0}
 .collection-tabs button+button{border-left:1px solid #ddddd5!important}
 .image-grid{display:flex;align-items:center;gap:8px;margin:0;padding:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior:contain}
 .image-grid::-webkit-scrollbar{display:none}
 .collection-grid{display:flex;flex:none;flex-wrap:nowrap;width:max-content;min-width:100%;height:var(--mobile-thumb-size);gap:8px}
 .asset-item{flex:0 0 var(--mobile-thumb-size);width:var(--mobile-thumb-size)}
 .asset-tile{height:var(--mobile-thumb-size);border-radius:6px;overflow:visible}
 .asset-tile img{border-radius:inherit}
 .asset-tile::after{border-radius:inherit;box-shadow:none}
 .asset-tile:hover::after{box-shadow:none}
 .asset-tile[aria-pressed=true]::after{inset:-3px;border:3px solid rgb(0 0 0 / 20%);border-radius:9px;box-shadow:none}
 .studio-panel{padding:0;overscroll-behavior:contain}
 .studio-panel>.control-section{display:none;border:0;height:100%}
 .app[data-mobile-section=treatments] #treatments-details,.app[data-mobile-section=color] #color-details,.app[data-mobile-section=effects] #effects-details,.app[data-mobile-section=image] #image-details{display:block}
 .control-section>summary{display:none}
 .control-section>.section-body,#treatments-details>.section-body,#color-details>.section-body{padding:14px 0}
 #treatments-details>.section-body,#color-details>.section-body{display:flex;align-items:center;height:88px;padding:0}
 .treatments,#color-details .swatches{display:flex;align-items:center;gap:8px;width:100%;max-width:none;margin:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding:8px;overscroll-behavior:contain}
 .treatments::-webkit-scrollbar,#color-details .swatches::-webkit-scrollbar{display:none}
 .treatments button,#color-details .swatches button{flex:0 0 72px;width:72px;height:72px;min-width:0;aspect-ratio:1}
 .treatments button{justify-content:center;padding:8px 4px;gap:6px}
 .treatments button svg{width:31px;height:28px}.treatments button span{font-size:10px}
 #color-details .swatches button{border:0;border-radius:6px;box-shadow:none}
 #color-details .swatches button[aria-pressed=true]::after{width:32px;height:32px;border:0;background:#fff;transform:translate(-50%,-50%);filter:none;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 12 5 5L20 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m4 12 5 5L20 7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
 #color-details .swatches button:is([data-ink="#e9d8a6"],[data-ink="#f4de62"],[data-ink="#bfd17d"],[data-ink="#94d2bd"],[data-ink="#93b9e6"],[data-ink="#c4afe4"],[data-ink="#f0bac6"],[data-ink="#f2efe8"])::after{background:#343430}
 .workspace{order:2;flex:1;min-height:0;padding:20px 16px calc(84px + env(safe-area-inset-bottom,0px))}
 .canvas-toolbar{bottom:0;left:0;right:0;width:100%;max-width:none;height:calc(64px + env(safe-area-inset-bottom,0px));padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));justify-content:space-evenly;gap:0;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none;background:var(--panel)}
 .canvas-toolbar .icon-button{width:40px;height:40px;flex:0 0 40px}
}

/* Individual controls keep their identity when rearranged for touch. */
.range-control>.range-label{margin:17px 0 7px}
.section-body>.range-control:first-child>.range-label,.effect-sliders>.range-control:first-child>.range-label{margin-top:0}
.effect-choices:not(:has(.segmented-field:not([hidden]))),.effect-switches:not(:has(.switch-row:not([hidden]))){display:none}
.text-center-guide{position:absolute;z-index:4;pointer-events:none;background:#7c8cff;box-shadow:0 0 0 .5px #ffffff66}
.text-center-guide[data-axis=x]{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px)}
.text-center-guide[data-axis=y]{top:50%;left:0;right:0;height:1px;transform:translateY(-.5px)}
@media(max-width:800px){
 .app:is([data-mobile-section=effects],[data-mobile-section=image]) .sidebar{height:153px}
 .app:is([data-mobile-section=effects],[data-mobile-section=image]) .studio-panel{overflow:hidden}
 #effects-details>.section-body,#image-details>.section-body{height:152px;padding:10px 8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior:contain}
 #effects-details>.section-body::-webkit-scrollbar,#image-details>.section-body::-webkit-scrollbar{display:none}
 #effects-details .flat-controls{flex-direction:row;align-items:stretch;gap:12px;width:max-content;min-width:100%;height:132px}
 #effects-details .effect-sliders,#image-details>.section-body{display:flex;gap:4px;align-items:stretch}
 #effects-details .effect-sliders{flex:none}
 #advanced-controls,#orbit-controls{display:contents}
 #effects-details .effect-choices{flex:0 0 80px;justify-content:center}
 #effects-details .effect-switches{flex:0 0 64px;justify-content:center}
 #effects-details .effect-switches .switch-row{flex-direction:column;gap:14px;text-align:center}
 #effects-details .effect-switches .switch-row input{inset:auto;bottom:0;right:22px}
 #effects-details #shape .segmented-options{flex-direction:column}
 #effects-details #shape .segmented-options button{min-height:34px}
 #effects-details #shape .segmented-options button+button{border-left:0;border-top:1px solid #ddddd5}
 #studio-panel .range-control{position:relative;display:flex;flex-direction:column;align-items:center;flex:0 0 64px;min-width:0;height:132px}
 #studio-panel .range-control>.range-label{display:flex;align-items:flex-start;justify-content:center;width:100%;min-height:28px;margin:0;text-align:center;font-size:10px;line-height:14px}
 #studio-panel .range-control output{position:absolute;left:0;right:0;bottom:0;text-align:center;font-size:10px;line-height:16px;white-space:nowrap}
 #studio-panel .range-control input[type=range]{writing-mode:vertical-lr;direction:rtl;width:28px;height:82px;flex:none;margin:4px auto 0;touch-action:none}
 #studio-panel .range-control input[type=range]::-webkit-slider-runnable-track{width:2px;height:100%}
 #studio-panel .range-control input[type=range]::-webkit-slider-thumb{margin:0 0 0 -5px}
 #studio-panel .range-control input[type=range]::-moz-range-track{width:2px;height:100%}
}

/* Full-width mobile rails fade only toward content that remains offscreen. */
@media(max-width:800px){
 :where(.image-grid,.treatments,#color-details .swatches,#effects-details>.section-body,#image-details>.section-body){
  --rail-fade-left:#000;--rail-fade-right:#000;
  -webkit-mask-image:linear-gradient(to right,var(--rail-fade-left),#000 24px,#000 calc(100% - 24px),var(--rail-fade-right));
  mask-image:linear-gradient(to right,var(--rail-fade-left),#000 24px,#000 calc(100% - 24px),var(--rail-fade-right));
 }
 [data-fade-left=true]{--rail-fade-left:transparent}
 [data-fade-right=true]{--rail-fade-right:transparent}
}