@import url('./fonts/sero-terminal.css');
@media(min-width:781px) and (max-height:650px){.dynamic-controls>.controls-action{padding-top:4px;padding-bottom:4px}.dynamic-controls .controls-action .hint{margin-top:4px}}
/* Two levels, one document. Panels use available height; the image keeps priority. */
.text-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none!important;box-shadow:none!important;background:transparent!important;z-index:4}
.mosaic-panel #mosaic-text{width:100%;min-height:62px;resize:vertical;margin-top:6px;padding:8px;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--ink);font:20px/1.3 'Sero Terminal',monospace}
.mosaic-panel #text-controls .field-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mosaic-panel #text-message.text-invalid{color:var(--danger,#e98d75)}
.editor-header{display:flex;align-items:center;gap:12px;flex:none;padding:9px 10px;border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0;background:var(--panel);flex-wrap:wrap}
.editor-header button{font-size:11px;padding:9px 10px;min-height:34px}.editor-level,.editor-workflow,.editor-file-actions{display:flex;gap:5px;align-items:center}.editor-file-actions{margin-left:auto}.editor-level{padding:3px;border:1px solid var(--line);border-radius:6px}.editor-level button{background:transparent;color:var(--muted);padding:6px 9px;min-height:28px}.editor-level button[aria-pressed=true]{background:var(--accent);color:var(--primary-ink)}
#editor-workflow #edit-mode{font-size:11px;min-height:34px;padding:8px 10px;margin:0;box-shadow:none}.editor-workflow #image-adjust{color:var(--ink);border:1px solid var(--line);background:transparent}.editor-workflow #image-adjust.active,.editor-workflow #edit-mode.active{border-color:var(--accent);background:var(--active-surface);color:var(--accent)}
#workbench>.toolbar{border-radius:0;padding:7px 10px;gap:8px;flex-wrap:wrap}#workbench>.toolbar .toolbar-right{gap:6px}#workbench>.toolbar button{font-size:10px;padding:7px 8px;min-height:30px}#workspace-zoom-controls{width:auto;gap:5px}#workspace-zoom-controls input{width:75px}#workspace-zoom-controls .inline{margin:0;gap:5px;font-size:10px}#workspace-zoom-controls select{font-size:10px;padding:6px;margin:0;max-width:85px}#viewzoom-caption{display:none}
.editor-state{display:flex;gap:10px;justify-content:space-between;flex:none;padding:5px 10px;font-size:10px;line-height:1.4;color:var(--muted);border-inline:1px solid var(--line);background:var(--panel);flex-wrap:wrap}#workbench>#edit-toolbar{display:none!important}
.mosaic-panel{flex:none;width:250px;min-height:0;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-left:0;background:var(--panel);padding:14px;scrollbar-color:var(--scroll-thumb) var(--scroll-track)}.mosaic-panel h3{font-size:18px;margin:0 0 14px}.mosaic-panel .eyebrow{font-size:9px;margin-bottom:6px}.mosaic-panel section,.mosaic-panel #compare-settings,.mosaic-panel #copy-controls{margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}.mosaic-panel label{font-size:11px;margin-bottom:10px}.mosaic-panel input,.mosaic-panel select{font-size:11px;width:100%;margin-top:6px}.mosaic-panel button{font-size:11px;padding:9px;white-space:normal}.mosaic-panel .edit-tools{display:grid;grid-template-columns:1fr 1fr;gap:5px}.mosaic-panel button.active{background:var(--active-surface);color:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.mosaic-panel .edit-color{display:grid;grid-template-columns:22px 1fr;gap:7px;min-width:0;margin:13px 0 0}.mosaic-panel .edit-color select{grid-column:1/-1;width:100%;max-width:none;margin:0}.mosaic-panel .hint,.mosaic-panel #edit-help,.mosaic-panel #selection-summary,.mosaic-panel #replace-count{font-size:10px;line-height:1.65;margin:9px 0;color:var(--muted)}.mosaic-panel details>summary{font-size:11px;margin:12px 0}.mosaic-panel .compare-settings{display:block;min-width:0;padding:12px 0 0;border-inline:0;border-bottom:0;background:transparent}.mosaic-panel .compare-transparency{min-width:0;display:block}.mosaic-panel .compare-settings .inline{display:block}.mosaic-panel .compare-settings .inline select{max-width:none}.mosaic-panel .copy-controls{display:flex;gap:7px;padding:12px 0 0;border-inline:0;border-bottom:0;background:transparent}.mosaic-panel .copy-controls .check{width:100%}.mosaic-panel .check input{width:auto;margin:0 5px 0 0}.mosaic-panel #copy-status{width:100%;margin:0}.mosaic-panel #restore-image-adjustment{margin-top:12px}.selection-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none!important;box-shadow:none!important;background:transparent!important;z-index:4}.selection-state button{width:100%}
body.editor-basic [data-advanced]:not(.active){display:none!important}body.editor-basic #brush-controls>label{display:none}body.editor-basic #brush-controls>label:first-child{display:block;margin-top:12px}body.editor-basic #brush-controls>.hint{display:none}body.editor-basic #brush-controls{border:0;padding:0;margin:0}
.photo-transforms{margin:10px 0 15px;padding:12px 0;border-block:1px solid var(--line)}.photo-transforms h4{font-size:12px;margin:0 0 10px}.photo-transform-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}.photo-transform-buttons button{font-size:11px;padding:9px}.photo-transform-buttons button[aria-pressed=true]{color:var(--accent);border-color:var(--accent)}.reset-adjustment{display:block;padding:5px 0;margin:0;font-size:10px}.editor-recovery-banner{display:flex;align-items:center;gap:10px;flex:none;flex-wrap:wrap;padding:12px;background:var(--panel);border:1px solid var(--accent);border-radius:6px;margin-bottom:8px;font-size:12px}.editor-recovery-banner button{font-size:11px}.editor-versions-dialog{width:min(680px,95vw);max-height:90dvh;padding:22px;overflow:auto}.editor-versions-dialog h2{font-size:23px}.editor-versions-dialog .hint{line-height:1.7}.editor-new-version{display:flex;gap:10px;align-items:end;padding-bottom:16px;border-bottom:1px solid var(--line)}.editor-new-version label{flex:1;margin:0;font-size:12px}.editor-new-version input{width:100%;display:block;margin-top:8px}.editor-new-version button{font-size:12px}.editor-version-list article{display:grid;grid-template-columns:1fr auto;align-items:center;gap:5px 15px;padding:14px 0;border-bottom:1px solid var(--line)}.editor-version-list strong{font-size:13px;overflow-wrap:anywhere}.editor-version-list p{grid-column:1;font-size:11px;color:var(--muted);margin:0}.editor-version-list button{grid-column:2;grid-row:1/3;font-size:11px}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.mosaic-panel .compare-settings .inline select{display:block}.mosaic-panel .edit-tools{grid-template-columns:repeat(2,minmax(0,1fr))}.mosaic-panel button{min-width:0;overflow-wrap:anywhere}
.editor-header button{min-width:0;white-space:normal;overflow-wrap:anywhere}.editor-workflow #edit-mode-label{min-width:0;overflow-wrap:anywhere}.editor-file-actions{flex-wrap:wrap}
.editor-live-help{margin:10px 0 14px}.editor-live-help>summary{font-size:11px;color:var(--muted);cursor:pointer}.editor-live-help #live-view-note{margin-block:10px}#live-short-note{font-size:11px;line-height:1.6;margin-bottom:8px}.image-adjust-panel h3{font-size:19px;margin-bottom:10px}
.editor-version-preview{grid-column:1/-1;min-width:0;margin-top:8px}.editor-version-preview>summary{font-size:11px;margin:0;cursor:pointer;color:var(--accent)}.editor-version-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}.editor-version-comparison figure{min-width:0;margin:0}.editor-version-comparison canvas{display:block;width:100%;height:auto;max-height:240px;object-fit:contain;image-rendering:pixelated;box-shadow:none;border:1px solid var(--line)}.editor-version-comparison figcaption{font-size:11px;color:var(--muted);margin-top:8px}
@media(min-width:781px){body.mosaic-editing .studio>.metrics{display:none}.mosaic-panel{height:100%}#workbench.expanded .mosaic-panel{height:auto}body.editor-basic .studio-heading>.topography-open{display:none}.image-adjust-panel{max-height:none}.studio-top{margin-bottom:9px}.editor-body{min-height:0}.mosaic-panel~.image-adjust-panel{border-left:0}}
@media(min-width:781px) and (max-height:800px){.editor-header{gap:6px;padding:7px 8px}.editor-header button{padding:7px 8px;font-size:10px}.editor-header #edit-mode{font-size:10px;padding:7px 8px}.editor-file-actions{gap:4px}.mosaic-panel{width:238px;padding:12px}.mosaic-panel h3{font-size:16px;margin-bottom:10px}.mosaic-panel button{padding:8px}.editor-state{font-size:9px}}
@media(max-width:1100px) and (min-width:781px){#workspace-zoom{display:none}#editor-save-status{flex:1}#workbench>.toolbar .toolbar-right{margin-left:auto}.editor-file-actions{margin-left:0}.editor-header{gap:6px}.editor-header button{font-size:10px;padding:7px}.mosaic-panel{width:225px}}
@media(max-width:780px){
 main{display:flex;flex-direction:column}.sidebar{order:2}.studio{order:1;padding:12px!important}main>.editor-brand{order:0;min-height:64px;height:auto;padding:5px 14px;justify-content:space-between;width:100%}.sidebar>.controls{padding:14px 20px}.studio-top{margin-bottom:10px}.studio-heading{flex-wrap:wrap}.studio-heading #motif-name{font-size:21px}.studio-top>#status{font-size:10px;text-align:left}
 .editor-header{gap:8px;padding:8px}.editor-level{flex:none}.editor-workflow{flex:1}.editor-workflow button,#editor-workflow #edit-mode{flex:1;min-height:44px;font-size:11px;padding:8px}.editor-file-actions{width:100%;margin:0;justify-content:space-between}.editor-file-actions button{min-height:40px;flex:1;min-width:5.4rem}.editor-level button{min-height:38px}.editor-header .editor-workflow{width:100%;flex-basis:100%}
 #workbench>.toolbar{padding:8px;gap:8px}#workbench>.toolbar .toolbar-right{width:100%;justify-content:space-between;gap:6px;flex-wrap:wrap}#workbench>.toolbar button{min-height:38px}.toolbar>.segmented{display:flex;flex-wrap:wrap;gap:3px}#workspace-zoom-controls{width:100%;justify-content:center}#workspace-zoom-controls input{display:block;width:90px;flex:1}#workbench>.toolbar #workspace-zoom-controls button{min-width:40px}.editor-state{gap:3px;font-size:10px}#editor-advanced-summary{width:100%}
 .editor-body{flex-direction:column}.editor-body>.canvas-stage{order:0;min-height:240px;height:min(53dvh,460px);flex:none;padding:12px}.mosaic-panel,.image-adjust-panel{order:1;width:100%;height:auto;max-height:none;overflow:visible;border:1px solid var(--line);border-top:0;padding:14px}.mosaic-panel .edit-tools{grid-template-columns:repeat(3,minmax(0,1fr))}.mosaic-panel button{min-height:44px}.mosaic-panel input,.mosaic-panel select{font-size:16px;min-height:36px}.mosaic-panel .editor-panel-heading{display:none}.mosaic-panel .edit-color{grid-template-columns:22px 1fr;max-width:100%}.mosaic-panel .edit-color select{max-width:none}.mosaic-panel .copy-controls .check{width:auto}.image-adjust-panel .live-actions{position:static;padding:12px 0 0;box-shadow:none}.image-adjust-panel .live-actions button{min-height:44px}.image-adjust-panel label select{font-size:16px}.editor-versions-dialog{padding:16px}.editor-new-version{flex-wrap:wrap}.editor-new-version label{flex-basis:100%}.editor-versions-dialog button{min-height:44px}
 #workbench.expanded{overflow:auto;inset:6px}#workbench.expanded>.editor-body{flex:none;overflow:visible}#workbench.expanded .canvas-stage{height:45dvh;min-height:200px;flex:none}#workbench.expanded .mosaic-panel,#workbench.expanded .image-adjust-panel{max-height:none}.studio>.metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}.editor-recovery-banner button{min-height:44px}
}
@media(min-width:781px) and (max-height:600px){.studio{overflow:auto!important}.studio>#workbench{min-height:410px;flex:none}.sidebar{overflow:auto}.mosaic-panel{max-height:340px}}
/* Enlarged text needs real scroll space instead of clipped controls or a zero-height panel. */
@media(min-width:781px){body.editor-large-controls .studio{overflow:auto}body.editor-large-controls .studio>#workbench{flex:none;min-height:650px}body.editor-large-controls #workbench>.editor-body{flex:none;height:440px}body.editor-large-controls .mosaic-panel{height:auto;max-height:none}body.editor-large-controls .editor-body>.canvas-stage{min-height:200px}}