/* Photobooth final CSS tokens: 38px controls, 3px corners, 2px active tab line.
   UI scope: .editor. Artwork typography is explicit in the unchanged renderer. */
@font-face{font-family:SUITE;src:url(fonts/SUITE-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:Pretendard;src:url(fonts/Pretendard.woff2) format('woff2');font-weight:100 900;font-display:block}
@font-face{font-family:SC;src:url(fonts/SCDream3.otf) format('opentype');font-weight:300;font-display:block}
@font-face{font-family:SC;src:url(fonts/SCDream4.otf) format('opentype');font-weight:400;font-display:block}
@font-face{font-family:SC;src:url(fonts/SCDream5.otf) format('opentype');font-weight:500;font-display:block}
:root{--workspace:#fff;--panel:#fff;--panel-2:#f1f1f1;--line:#e5e5e5;--line-strong:#d1d1d1;--text:#171717;--muted:#777;--soft:#f2f2f2;--accent:#8ADBA3;--accent-soft:#effbf2}
.editor,.editor *{box-sizing:border-box}
.editor{margin:0;background:var(--workspace);color:var(--text);font:400 12px/1.6 SUITE,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.editor [hidden]{display:none!important}
.editor button,.editor input,.editor select,.editor textarea{font:inherit}
.editor button{min-height:38px;padding:0 11px;border:1px solid #d7d7d7;border-radius:3px;background:#fff;color:#353535;font-size:11px;font-weight:620;cursor:pointer;box-shadow:none;transition:background .12s,border-color .12s,color .12s}
.editor button:hover{background:#fafafa;border-color:#9d9d9d}
.editor button:disabled{opacity:.4;cursor:default}
.editor button:focus-visible,.editor a:focus-visible{outline:2px solid #777;outline-offset:3px}
.editor button.primary-btn{background:#1c1c1c;color:#fff;border-color:#1c1c1c}
.editor button.primary-btn:hover{background:#3c3c3c;border-color:#3c3c3c}
.editor .topbar{background:#fff;padding:46px 20px 18px;text-align:center}
.editor .brand h1{margin:0;font-size:28px;line-height:1.25;font-weight:400;letter-spacing:-.045em;color:#202020}
.editor .brand p{margin:9px 0 0;font-size:11px;color:#969696;letter-spacing:.01em}
.editor .inspector-tabs{display:flex;align-items:stretch;justify-content:center;gap:34px;min-height:58px;margin:0 auto;border-bottom:1px solid var(--line);background:#fff;overflow-x:auto;scrollbar-width:none}
.editor .inspector-tabs::-webkit-scrollbar{display:none}
.editor .inspector-tab{position:relative;flex:0 0 auto;min-width:58px;min-height:58px;border:0;border-radius:0;padding:3px 0 0;background:transparent;color:#898989;font-size:12px;font-weight:600;white-space:nowrap}
.editor .inspector-tab:hover{background:transparent;color:#1f1f1f}
.editor .inspector-tab.active{background:transparent;color:#171717}
.editor .inspector-tab.active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent)}
.editor .app-shell{max-width:1120px;margin:0 auto;padding:32px 24px 0}
.editor .stage-column{min-width:0;background:#fff}
.editor .stage-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.editor .stage-title{display:flex;align-items:baseline;gap:11px}
.editor .stage-title strong{font-size:12px;font-weight:400}
.editor .stage-title span{font-size:11px;color:#909090;font-variant-numeric:tabular-nums}
.editor .history-actions{display:flex;gap:6px}
.editor .canvas-wrap{width:100%;height:auto;aspect-ratio:25/18;max-height:none;min-height:0;overflow:hidden;padding:0;border:1px solid #e5e5e5;border-radius:0;background:#f7f7f7;touch-action:none;overscroll-behavior:contain}
.editor #artboard{position:relative;margin:0 auto;background:#fff;flex-shrink:0}
.editor #canvas{display:block;width:100%;height:100%;touch-action:none}
.editor #selection{position:absolute;border:1.5px solid #555;pointer-events:none}
.editor #selection:after{content:'';position:absolute;right:-4px;bottom:-4px;width:7px;height:7px;background:#fff;border:1px solid #555}
.editor .canvas-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 0}
.editor .zoom-controls,.editor .view-options{display:flex;align-items:center;gap:10px}
.editor #zoom{width:110px}
.editor #zoom-value{width:36px;font-size:11px;color:#777;font-variant-numeric:tabular-nums}
.editor .view-options label{display:flex;gap:6px;align-items:center;color:#666;font-size:11px;white-space:nowrap}
.editor input[type=range]{accent-color:var(--accent);cursor:pointer;min-height:24px;padding:0}
.editor input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;margin:0;flex-shrink:0}
.editor .status{display:flex;justify-content:space-between;gap:12px;padding:0 0 20px;color:#969696;font-size:10px}
.editor #overflow{font-size:11px;color:#555;line-height:1.6;max-height:90px;overflow:auto}
.editor #overflow:not(:empty){padding:12px 0;margin-bottom:16px;border-top:1px solid var(--line)}
.editor .inspector{margin-top:18px;padding-top:28px;border-top:1px solid var(--line);background:#fff}
.editor .settings-header{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}
.editor .segmented{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;border:1px solid #d9d9d9;border-radius:3px;background:#efefef;padding:3px;width:280px}
.editor .segmented button{min-height:34px;border:0;border-radius:2px;background:transparent;color:#838383;font-size:11px}
.editor .segmented button.active{background:#fff;color:#171717;box-shadow:0 1px 3px #00000012}
.editor #settings-panel{outline:none}
.editor .tool-panel{background:#fff;padding-bottom:8px}
.editor .section-heading{margin:0 0 22px;padding:0 0 18px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.3;font-weight:660;letter-spacing:-.045em}
.editor .control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;align-items:start}
.editor #section-profile>.control-grid,.editor #section-colors>.control-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.editor .field{display:grid;gap:8px;min-width:0;margin:0;color:#464646;font-size:11px;font-weight:590}
.editor .field input:not([type=color]):not([type=range]):not([type=checkbox]),.editor select,.editor textarea{width:100%;min-width:0;min-height:38px;height:38px;padding:0 11px;border:1px solid #dcdcdc;border-radius:3px;background:#fff;color:#2f2f2f;font-size:11px;outline:none}
.editor select{cursor:pointer}
.editor textarea{padding:10px 11px;resize:vertical;min-height:80px;height:80px;line-height:1.65}
.editor .field input:focus,.editor select:focus,.editor textarea:focus{border-color:#8c8c8c;box-shadow:0 0 0 2px #1717170f;outline:none}
.editor .field input[type=checkbox]:focus{box-shadow:none}
.editor .field:has(>input[type=checkbox]){display:flex;align-items:center;gap:8px;min-height:38px}
.editor .field input[type=range]{width:100%}
.editor .row{display:flex;gap:8px;align-items:start;min-width:0}
.editor .row>*{min-width:0;flex:1}
.editor .color-row{display:flex;align-items:center;gap:8px;min-width:0}
.editor input[type=color]{width:42px;min-width:42px;height:38px;padding:3px;border:1px solid #d5d6da;border-radius:3px;background:#fff;appearance:none;-webkit-appearance:none;cursor:pointer;outline:none}
.editor input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.editor input[type=color]::-webkit-color-swatch,.editor input[type=color]::-moz-color-swatch{border:0;border-radius:0}
.editor .color-row input[type=text]{flex:1;min-width:0}
.editor .image-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:3px;border:1px solid #d9d9d9;border-radius:3px;background:#efefef}
.editor .image-grid button{border:0;background:transparent;color:#838383;min-height:34px}
.editor .image-grid button.selected{background:#fff;color:#171717;box-shadow:0 1px 3px #00000012}
.editor .small,.editor .helper-note{font-size:10px;line-height:1.6;color:#969696;margin:0}
.editor .control-grid>.small,.editor .control-grid>hr{grid-column:1/-1}
.editor hr{width:100%;border:0;border-top:1px solid var(--line);margin:4px 0}
.editor #text-style,.editor #warning-style{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px;grid-column:1/-1}
.editor #section-traits>.control-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.editor .trait-group{min-width:0}
.editor .subsection-label{margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:11px;font-weight:400;letter-spacing:.06em;color:#555}
.editor .trait-row{display:flex;gap:6px;align-items:start;margin:0 0 10px}
.editor .trait-row textarea{flex:1;min-width:0;min-height:74px;height:74px}
.editor .trait-buttons{display:flex;flex-direction:column;gap:3px}
.editor .trait-buttons button{width:28px;min-height:28px;height:28px;padding:0;font-size:13px;border-color:#d7d7d7;color:#5d5d5d}
.editor .trait-tools{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 28px;margin-top:8px;padding-top:22px;border-top:1px solid var(--line)}
.editor #section-warnings{margin-bottom:30px}
.editor .export-card{border-top:1px solid var(--line);padding:36px 0 16px;margin-top:32px;text-align:center}
.editor .export-heading h2{font-size:14px;font-weight:400;line-height:1.3;letter-spacing:-.045em;margin:0}
.editor .export-heading p{font-size:10px;color:#969696;margin:9px 0 0}
.editor .save-actions{display:flex;justify-content:center;margin:20px 0 24px}
.editor #preview{min-width:176px}
.editor #section-project .section-heading{display:none}
.editor #section-project .control-grid{max-width:640px;margin:0 auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.editor #section-project .row{grid-column:1/-1}
.editor #section-project #panel-preview{grid-column:1/-1;width:100%}
.editor #section-project #reset-all{grid-column:1/-1;justify-self:center;min-width:140px}
.editor .site-footer{display:flex;justify-content:center;gap:20px;padding:24px 20px 36px;color:#969696;font-size:10px}
.editor .site-footer a{color:inherit;text-underline-offset:3px}
.editor dialog{border:1px solid var(--line);border-radius:3px;width:min(1100px,94vw);padding:20px;background:#fff;color:var(--text)}
.editor dialog::backdrop{background:#17171780}
.editor .dialog-head,.editor .export-actions{display:flex;justify-content:space-between;gap:8px;align-items:center}
.editor .dialog-head strong{font-size:12px;font-weight:400}
.editor #export-preview{display:block;width:100%;max-height:68dvh;object-fit:contain;margin:18px 0}
.editor .export-actions{justify-content:center;flex-wrap:wrap;margin-bottom:12px}
@media(max-width:760px){.editor .topbar{padding-top:30px}.editor .brand h1{font-size:25px}.editor .inspector-tabs{gap:24px;min-height:52px}.editor .inspector-tab{min-height:52px;font-size:11px}.editor .app-shell{padding:24px 18px 0}.editor .control-grid,.editor #section-profile>.control-grid,.editor #section-colors>.control-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.editor #section-traits>.control-grid{grid-template-columns:1fr}.editor .trait-group{margin-bottom:8px}.editor .trait-tools,.editor #text-style,.editor #warning-style{grid-template-columns:repeat(2,minmax(0,1fr))}.editor .status span:last-child{display:none}.editor .canvas-controls{gap:12px}.editor .trait-buttons button{width:34px;min-height:34px;height:34px}}
@media(max-width:520px){.editor .inspector-tabs{justify-content:flex-start;gap:22px;padding:0 20px}.editor .inspector-tab{min-width:42px}.editor .app-shell{padding:20px 12px 0}.editor .stage-toolbar{margin-bottom:12px}.editor .stage-title{gap:8px}.editor .stage-title span{font-size:10px}.editor .history-actions{gap:4px}.editor .history-actions button{padding:0 10px}.editor .zoom-controls{gap:8px;flex:1 1 100%;width:100%}.editor .zoom-controls button{white-space:nowrap;flex-shrink:0}.editor #zoom{min-width:40px;width:64px;flex:1}.editor #zoom-value{width:30px}.editor .view-options{gap:20px}.editor .canvas-wrap{max-height:none}.editor .settings-header{gap:10px;margin-bottom:24px}.editor .segmented{width:auto;flex:1;max-width:280px}.editor #panel-toggle{padding:0 10px}.editor .control-grid,.editor #section-profile>.control-grid,.editor #section-colors>.control-grid,.editor .trait-tools,.editor #text-style,.editor #warning-style{grid-template-columns:1fr;gap:18px}.editor .image-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.editor .row{flex-wrap:wrap}.editor .row>*{flex:1 1 120px}.editor button{min-height:42px}.editor .segmented button,.editor .image-grid button{min-height:38px}.editor .field input:not([type=color]):not([type=range]):not([type=checkbox]),.editor select{min-height:42px;height:42px}.editor input[type=color]{height:42px}.editor .site-footer{flex-wrap:wrap;gap:6px 18px}.editor .export-card{padding-top:28px}}

.editor button.primary-btn,.editor #mobile-save{background:var(--accent);border-color:var(--accent);color:#fff}
.editor button.primary-btn:hover{background:#75cc90;border-color:#75cc90}
.editor .segmented button.active,.editor .image-grid button.selected{background:var(--accent-soft);box-shadow:0 1px 3px #00000012;color:#171717}
.editor button:focus-visible,.editor a:focus-visible{outline-color:#777}
.editor .field input:focus,.editor select:focus,.editor textarea:focus{border-color:#8c8c8c;box-shadow:0 0 0 2px #1717170f}
.editor .mobile-actions{display:none}
@media(max-width:760px){
.editor{padding-bottom:76px}.editor .inspector-tabs{position:sticky;top:0;z-index:20;gap:0;padding:0 8px;justify-content:space-around;box-shadow:0 2px 8px #00000008}
.editor .inspector-tab{font-size:12px;min-width:0;padding:0 6px}
.editor #panel,.editor .stage-column{scroll-margin-top:68px}
.editor .settings-header{position:sticky;top:52px;background:#fff;z-index:10;padding:10px 0;margin-bottom:20px;border-bottom:1px solid var(--line)}
.editor .mobile-actions{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;background:#fff;border-top:1px solid var(--line);gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.editor .mobile-actions button{flex:1;min-height:44px;font-size:14px}
.editor .field,.editor button{font-size:13px}.editor .field input:not([type=color]):not([type=range]):not([type=checkbox]),.editor select,.editor textarea{font-size:16px;min-height:44px}
.editor .trait-buttons button{width:44px;height:44px;min-height:44px}.editor input[type=checkbox]{width:20px;height:20px}
.editor input[type=color]{width:48px;min-width:48px;height:44px}
}

@font-face{font-family:BrotherSignature;src:url('fonts/BrotherSignature-7BWnK.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
.editor .brand h1{font-family:BrotherSignature,SUITE,sans-serif;font-size:48px;line-height:1.3;letter-spacing:0}
.editor .segmented,.editor .image-grid{background:#f2fbf5;border-color:#d9d9d9}
.editor .canvas-wrap{background:#f7f7f7;border-color:#e5e5e5}
.editor button{border-color:#d7d7d7}.editor button:hover{background:#effbf2;border-color:#9d9d9d}
.editor button.primary-btn:hover,.editor #mobile-save:hover{background:#75cc90;color:white}
.editor .segmented button.active,.editor .image-grid button.selected{background:#e3f7e9;color:#171717}
.editor .field input:not([type=color]):not([type=range]):not([type=checkbox]),.editor select,.editor textarea{border-color:#dcdcdc}
.editor input[type=range]{background:transparent}
.editor input[type=range]::-webkit-slider-runnable-track{height:6px;background:#ddf4e4;border-radius:6px}
.editor input[type=range]::-webkit-slider-thumb{margin-top:-5px}
@media(max-width:760px){.editor .brand h1{font-size:42px}}

@media(max-width:760px){
.editor button,.editor .field,.editor .inspector-tab,.editor .mobile-actions button{font-size:11px}
.editor button{min-height:36px;padding-left:8px;padding-right:8px}
.editor .inspector-tab{min-height:48px;padding:0 5px}
.editor .settings-header{top:48px;gap:8px;padding:8px 0}
.editor .segmented{max-width:232px;padding:2px}.editor .segmented button{min-height:32px;padding:0 7px}
.editor .image-grid button{min-height:34px}.editor .image-grid{gap:2px}
.editor .field input:not([type=color]):not([type=range]):not([type=checkbox]),.editor select,.editor textarea{font-size:13px;min-height:36px}
.editor .field input:not([type=color]):not([type=range]):not([type=checkbox]),.editor select{height:36px;padding:0 8px}
.editor .trait-buttons button{width:32px;height:32px;min-height:32px;padding:0}
.editor input[type=color]{width:36px;min-width:36px;height:36px}
.editor input[type=checkbox]{width:16px;height:16px}
.editor .mobile-actions{justify-content:center;gap:8px;padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}
.editor .mobile-actions button{flex:0 1 142px;min-height:36px}
.editor #preview{min-width:140px}.editor #panel-toggle{padding:0 8px}
.editor .control-grid{gap:14px}.editor .field{gap:6px}
}

/* Compact editing controls and one shared save action. */
.editor .brand h1{color:var(--accent)}
.editor .topbar{padding-top:28px;padding-bottom:12px}
.editor .app-shell{padding-top:20px}
.editor .inspector{margin-top:10px;padding-top:16px}
.editor .settings-header{margin-bottom:16px}
.editor .section-heading{margin-bottom:12px;padding-bottom:10px}
.editor .control-grid{gap:12px 20px}
.editor .trait-row{align-items:center;margin-bottom:7px}
.editor .trait-row textarea{height:40px;min-height:40px;padding:8px;line-height:1.5}
.editor .trait-buttons{flex-direction:row;gap:3px}
.editor .trait-buttons button{width:26px;height:30px;min-height:30px}
.editor .subsection-label{margin-bottom:8px;padding-bottom:8px}
.editor .trait-tools{margin-top:0;padding-top:12px;gap:12px 20px}
.editor #section-keywords textarea,.editor #section-warnings textarea{height:48px;min-height:48px;padding:8px;line-height:1.5}
.editor #section-warnings{margin-bottom:16px}
.editor #text-style,.editor #warning-style{gap:12px 20px}
.editor .export-card{margin-top:16px;padding:16px 0 0}
.editor .mobile-actions{display:flex;justify-content:center;gap:8px;padding:12px}
.editor .mobile-actions button{min-width:128px}
@media(max-width:760px){
.editor .topbar{padding-top:18px}.editor .app-shell{padding-top:14px}
.editor .trait-buttons button{width:28px;min-height:30px;height:30px}
.editor .trait-row textarea{height:38px;min-height:38px}
.editor .settings-header{margin-bottom:12px}
.editor .mobile-actions{padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
}

.editor .sheet-handle{display:none}
@media(max-width:760px){
.editor{padding-bottom:110px}
.editor .topbar{padding:12px 12px 8px}.editor .brand h1{font-size:34px}
.editor .app-shell{padding-top:10px}
.editor .stage-column{position:relative}
.editor .canvas-wrap{max-height:none}
.editor .inspector-tabs{position:fixed;top:auto;bottom:calc(52px + env(safe-area-inset-bottom) + var(--keyboard-offset,0px));left:0;right:0;min-height:44px;z-index:42;border-top:1px solid var(--line)}
.editor .inspector-tab{min-height:44px}
.editor .mobile-actions{z-index:43;bottom:var(--keyboard-offset,0px);min-height:52px}
.editor #panel{display:none;position:fixed;left:0;right:0;bottom:calc(96px + env(safe-area-inset-bottom) + var(--keyboard-offset,0px));height:42%;height:calc(var(--visible-height,100dvh) * .44);margin:0;padding:0 12px 12px;z-index:40;border:1px solid #ddd;border-radius:16px 16px 0 0;box-shadow:0 -5px 20px #00000012;overflow:hidden}
.editor.sheet-open #panel{display:flex;flex-direction:column}
.editor.sheet-large #panel{height:calc(var(--visible-height,100dvh) * .72 - 35px)}
.editor .sheet-handle{display:flex;justify-content:space-between;align-items:center;padding:8px 0 4px;flex-shrink:0}
.editor .sheet-handle button{min-height:28px;border:0;background:transparent;color:#666}
.editor .settings-header{position:static;padding:5px 0 10px;margin:0;flex-shrink:0}
.editor #panel-toggle{display:none}
.editor #settings-panel{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1;padding:12px 0 24px;scroll-padding:12px;touch-action:pan-y}
.editor .export-card{margin-top:10px}.editor .site-footer{padding:12px}
.editor.sheet-open .canvas-wrap{max-height:none}
}

.editor .topbar{border-bottom:1px solid var(--line);margin-bottom:12px;padding-bottom:20px}
.editor .site-credits{display:flex;flex-direction:column;gap:3px;align-items:center}
.editor .site-footer{align-items:center}
@media(max-width:760px){.editor .topbar{margin-bottom:10px;padding-bottom:14px}}

.editor .site-footer{flex-direction:column;gap:6px}
.editor .topbar{position:relative;border-bottom:0}
.editor .topbar::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);height:1px;width:calc(100% - 48px);max-width:1072px;background:#d9f2e1}
@media(max-width:760px){.editor .topbar::after{width:calc(100% - 36px)}}
@media(max-width:520px){.editor .topbar::after{width:calc(100% - 24px)}}

.editor .topbar::after{display:none}
.editor .stage-column,.editor .canvas-wrap{background:#effbf2}
.editor .stage-column{padding:12px;border-radius:6px}

/* Tighter title and preview spacing. */
.editor .topbar{padding:18px 16px 8px;margin-bottom:0}
.editor .app-shell{padding-top:10px}
.editor .stage-column{padding:8px 12px}
.editor .stage-toolbar{margin-bottom:8px}
.editor .canvas-controls{padding:8px 0;gap:10px}
.editor .status{padding-bottom:4px}
.editor #overflow:not(:empty){padding:6px 0;margin-bottom:4px}
@media(max-width:760px){
.editor .topbar{padding:10px 12px 4px;margin-bottom:0}
.editor .app-shell{padding-top:6px}
.editor .stage-column{padding:6px 10px}
.editor .stage-toolbar{margin-bottom:6px}
.editor .canvas-controls{padding:6px 0;gap:6px}
.editor .status{padding-bottom:2px}
}

/* Interaction and mobile keyboard fixes (v1.9.4). */
.editor .canvas-wrap.pan-enabled{overflow:auto;cursor:grab}
.editor .canvas-wrap.pan-enabled.is-dragging{cursor:grabbing}
.editor{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:760px){
  .editor .trait-row textarea,
  .editor #section-keywords textarea,
  .editor #section-warnings textarea{line-height:1.3;}
  /* Do not change the preview height when the keyboard or editor sheet opens. */
  .editor .canvas-wrap,.editor.sheet-open .canvas-wrap{max-height:none;}
}

/* v1.9.7: iPhone input typography without page zoom and a fixed-height bottom sheet. */
/* Actual form font remains 16px for WebKit focus; the 13px visual size is
   achieved by scaling the control, not by disabling user page zoom. */
@media (max-width:760px){
  .editor input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
  .editor textarea,
  .editor select{font-size:16px!important;touch-action:manipulation}
}
@media (max-width:760px){
  body.editor.sheet-open{
    position:fixed;left:0;right:0;top:var(--sheet-locked-top,0px);
    width:100%;height:100%;overflow:hidden;overscroll-behavior:none;
  }
  /* The height is captured once from the layout viewport when the sheet opens.
     Keyboard animation changes visualViewport but NOT this fixed measurement. */
  .editor #panel,
  .editor.sheet-open #panel{
    bottom:calc(96px + env(safe-area-inset-bottom));
    height:calc(var(--sheet-rest-height,100svh) * .44);
    max-height:calc(var(--sheet-rest-height,100svh) - 140px);
  }
  /* Leave the upper preview visible, as in the original expanded layout. */
  .editor.sheet-large #panel,
  .editor.sheet-open.sheet-large #panel{
    height:calc(var(--sheet-rest-height,100svh) * .64);
    max-height:calc(var(--sheet-rest-height,100svh) - 150px);
  }
  /* No input-specific height, max-height or position changes. When the keyboard
     covers the lower sheet, scroll the controls inside their own scrollport. */
  .editor.sheet-open.sheet-input-active #settings-panel{
    padding-bottom:calc(24px + var(--keyboard-offset,0px) + 32px);
  }
  .editor.sheet-input-active .mobile-inspector-tabs,
  .editor.sheet-input-active .mobile-actions{display:none}
  .editor.sheet-open #settings-panel{
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-y:contain;
  }
  /* 13px optical text without triggering iPhone Safari's sub-16px input zoom.
     This includes select elements, HEX inputs, and HAIR/FACE/BODY textareas. */
  .editor #panel input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
  .editor #panel textarea,
  .editor #panel select{
    --control-scale:.8125;
    font-size:16px!important;
    transform:scale(var(--control-scale));
    transform-origin:top left;
    width:123.076923%!important;
    margin-right:-23.076923%;
    padding-left:10px;
    padding-right:10px;
    border-radius:3.6923px;
  }
  /* Mobile inputs/selects used to occupy 36px; their layout box is enlarged,
     then the transform and negative margin restore the original grid rhythm. */
  .editor #panel input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
  .editor #panel select{
    height:44.307692px;
    min-height:44.307692px;
    margin-bottom:-8.307692px;
  }
  .editor #panel textarea{
    height:98.461538px;
    min-height:98.461538px;
    margin-bottom:-18.461538px;
    padding-top:12px;
    padding-bottom:12px;
  }
  .editor #panel .trait-row textarea{
    height:54.153846px;
    min-height:54.153846px;
    margin-bottom:-10.153846px;
    line-height:1.25;
  }
  /* Prevent FACE/BODY move buttons from overlapping the scaled textarea. */
  .editor #panel .trait-row:has(.trait-buttons) textarea{
    margin-right:calc(-23.076923% + 22px);
  }
  .editor #panel #section-keywords textarea,
  .editor #panel #section-warnings textarea{
    height:59.076923px;
    min-height:59.076923px;
    margin-bottom:-11.076923px;
    line-height:1.5;
  }
}

/* v1.9.8 — spacious desktop workspace. The mobile sheet and its controls are untouched. */
.editor .desktop-inspector-tabs,.editor .desktop-sidebar-actions{display:none}

@media (min-width:900px){
  body.editor{
    display:flex;
    flex-direction:column;
    width:100%;height:100vh;height:100dvh;
    overflow:hidden;
  }
  .editor .topbar{
    flex:0 0 auto;
    margin:0;
    padding:6px 16px 0;
  }
  .editor .brand h1{font-size:42px;line-height:1.16}
  .editor .mobile-inspector-tabs,.editor .mobile-actions,.editor .export-card{display:none}
  .editor .app-shell{
    flex:1 1 auto;
    display:grid;
    grid-template-columns:clamp(350px,28vw,440px) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    gap:clamp(14px,1.25vw,24px);
    align-items:stretch;
    width:100%;max-width:none;
    min-width:0;min-height:0;height:auto;
    margin:0;
    padding:9px clamp(12px,1.45vw,28px) 8px;
    overflow:hidden;
  }
  .editor #panel{
    position:relative;
    grid-column:1;grid-row:1;
    display:flex;flex-direction:column;
    top:auto;
    width:100%;height:100%;
    min-width:0;min-height:0;
    margin:0;padding:0 18px 12px;
    border:1px solid var(--line);
    border-radius:5px;
    background:#fff;
    overflow:hidden;
    overscroll-behavior:contain;
  }
  /* One compact, predictable row of section tabs. */
  .editor #panel .desktop-inspector-tabs{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    flex-shrink:0;
    gap:0;
    width:calc(100% + 36px);
    min-height:48px;
    margin:0 -18px;
    padding:3px 10px 0;
    overflow:visible;
    border-bottom:1px solid var(--line);
    background:#fff;
  }
  .editor #panel .desktop-inspector-tabs .inspector-tab{
    grid-column:auto;
    min-width:0;min-height:44px;
    padding:4px 2px;
    font-size:11px;line-height:1.25;
    white-space:normal;
  }
  .editor #panel .desktop-inspector-tabs .inspector-tab.active::after{
    left:8px;right:8px;bottom:-1px;height:2px;
  }
  .editor #panel .settings-header{
    display:flex;flex-shrink:0;
    gap:10px;
    margin:0;padding:11px 0 12px;
    border-bottom:1px solid var(--line);
  }
  .editor #panel .segmented{flex:1 1 auto;min-width:0;width:auto;max-width:none}
  .editor #panel .segmented button{min-height:34px}
  .editor #panel-toggle{
    flex-shrink:0;min-height:34px;
    padding:0 9px;font-size:11px;
  }
  .editor #panel #settings-panel{
    flex:1 1 auto;
    width:100%;min-height:0;
    padding:15px 5px 20px 0;
    overflow-x:hidden;overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#c9d5cd transparent;
    scroll-padding-block:18px;
  }
  .editor #panel #settings-panel::-webkit-scrollbar{width:6px}
  .editor #panel #settings-panel::-webkit-scrollbar-thumb{
    border-radius:6px;background:#c9d5cd;
  }
  .editor #panel .section-heading{
    margin:0 0 14px;padding:0 0 9px;
    font-size:13px;font-weight:600;
  }
  .editor #panel .control-grid,
  .editor #panel #section-profile>.control-grid,
  .editor #panel #section-colors>.control-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px 14px;
    align-items:start;
  }
  .editor #panel .field{gap:6px;min-width:0;font-size:11px}
  .editor #panel .field input:not([type=color]):not([type=range]):not([type=checkbox]),
  .editor #panel select{
    min-height:38px;height:38px;
    font-size:12px;
  }
  .editor #panel textarea{font-size:12px;line-height:1.5}
  .editor #panel .row{display:flex;flex-wrap:nowrap;gap:8px;align-items:stretch}
  .editor #panel .row>*{flex:1 1 0;min-width:0}
  .editor #panel .tool-panel{padding-bottom:8px}
  .editor #panel .small{line-height:1.5}
  /* Photo controls follow the user's sequence: select, upload, reuse, adjust. */
  .editor #panel #section-images>.control-grid{
    grid-template-columns:minmax(0,1fr);
    gap:12px;
  }
  .editor #panel .image-grid{
    grid-column:1;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:2px;
  }
  .editor #panel .image-grid button{
    min-width:0;min-height:42px;
    padding:4px 3px;
    font-size:10.5px;
    line-height:1.35;
    white-space:normal;
  }
  .editor #panel #section-images>.control-grid>.small{grid-column:1}
  .editor #panel #section-images>.control-grid>.row button{flex:1 1 0}
  /* Keep paired profile fields aligned; styling selection spans both columns. */
  .editor #panel #section-profile>.control-grid>.field:nth-child(13){grid-column:1/-1}
  .editor #panel #section-colors #apply-accent{grid-column:1/-1}
  .editor #panel #section-colors>.control-grid>hr{grid-column:1/-1}
  .editor #panel .color-row{gap:7px}
  .editor #panel .color-row input[type=color]{width:40px;min-width:40px}
  .editor #panel .color-row input[type=text]{font-size:11px;padding:0 7px}
  .editor #panel #section-traits>.control-grid{grid-template-columns:minmax(0,1fr)}
  .editor #panel .trait-row{gap:8px;align-items:center;margin-bottom:8px}
  .editor #panel .trait-row textarea{flex:1 1 auto;min-width:0}
  .editor #panel .trait-buttons{flex:0 0 auto;gap:4px}
  .editor #panel .trait-buttons button{width:30px;min-height:32px;height:32px}
  .editor #panel .trait-tools,
  .editor #panel #text-style,
  .editor #panel #warning-style{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 14px;
  }
  .editor #panel #section-keywords>.control-grid>.field:first-child,
  .editor #panel #section-warnings>.control-grid>.field{grid-column:1/-1}
  .editor .desktop-sidebar-actions{
    display:flex;flex-shrink:0;
    gap:9px;
    padding-top:11px;
    border-top:1px solid var(--line);
  }
  .editor .desktop-sidebar-actions button{
    flex:1 1 0;min-width:0;min-height:42px;font-size:12px;
  }
  .editor #desktop-reset{flex:0 0 36%}
  /* The preview leads. Avoid a second max-width cap on wide monitors. */
  .editor .stage-column{
    position:relative;
    grid-column:2;grid-row:1;
    display:flex;flex-direction:column;align-items:stretch;
    top:auto;justify-self:stretch;
    width:100%;max-width:none;height:100%;
    min-width:0;min-height:0;
    margin:0;padding:8px 12px 6px;
    border-radius:5px;
    overflow:hidden;
  }
  .editor .stage-toolbar{
    flex-shrink:0;
    width:100%;
    gap:12px;margin-bottom:5px;
  }
  .editor .stage-toolbar button{min-height:33px}
  .editor .canvas-wrap{
    flex-shrink:0;
    max-width:100%;max-height:none;
    margin:auto;
  }
  .editor .canvas-controls{
    flex-shrink:0;
    width:100%;
    justify-content:space-between;
    gap:10px;
    flex-wrap:wrap;
    padding:6px 0 3px;
  }
  .editor .status{
    display:flex;flex-shrink:0;
    width:100%;min-height:18px;
    gap:12px;padding:0 0 1px;
    font-size:10px;
    overflow:hidden;
  }
  .editor #save-status{
    display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .editor .status span:last-child{flex:0 0 auto;white-space:nowrap}
  .editor #overflow{flex:0 0 auto;width:100%;max-height:60px;overflow-y:auto}
  .editor .site-footer{
    flex:0 0 auto;
    margin:0;
    padding:1px 20px 7px;
    gap:2px;
  }
}

/* Compact viewports keep one-line controls and preserve a meaningful canvas. */
@media (min-width:900px) and (max-width:1140px){
  .editor .app-shell{grid-template-columns:350px minmax(0,1fr)}
  .editor #panel{padding-right:15px;padding-left:15px}
  .editor #panel .desktop-inspector-tabs{
    width:calc(100% + 30px);margin:0 -15px;
    padding-right:8px;padding-left:8px;
  }
  .editor .stage-column{padding-right:9px;padding-left:9px}
  .editor .stage-toolbar{gap:6px}
  .editor .history-actions{gap:4px}
  .editor .stage-toolbar button{padding:0 7px;font-size:10px}
  .editor .status span:last-child{display:none}
  .editor .canvas-controls{gap:7px}
  .editor .view-options{gap:9px}
}
@media (min-width:900px) and (max-height:740px){
  .editor .topbar{padding-top:2px}
  .editor .brand h1{font-size:37px;line-height:1.05}
  .editor .app-shell{padding-top:5px;padding-bottom:5px}
  .editor .stage-column{padding-top:5px;padding-bottom:3px}
  .editor .stage-toolbar{margin-bottom:2px}
  .editor .canvas-controls{padding-top:3px;padding-bottom:1px}
  .editor .site-footer{padding-bottom:3px}
}