/* The editor and its settings share the available screen height. */
html{height:100%}body{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}body>header{flex:0 0 auto}body>main{flex:1 1 0;min-height:0;width:100%;padding:16px 24px;align-items:stretch}main>aside{min-height:0;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-gutter:stable}main>.stage{position:relative;top:auto;align-self:stretch;min-height:0;height:100%;overflow:hidden}.stagebar{flex:0 0 auto;flex-wrap:wrap;gap:8px;margin-bottom:10px}.stagebar .tabs{gap:4px}.stagebar .tabs button{padding:7px 10px;font-size:12px}.stage>.zoom-tools{flex:0 0 auto;gap:6px;margin-bottom:10px}.stage>.zoom-tools>span{font-size:10px!important}.stage>.workspace{height:auto;min-height:0;flex:1 1 0}.stage>.status{flex:0 0 auto;max-height:62px;overflow-y:auto;padding:8px 0;font-size:11px}.stage>.footer{display:none}.stage>.run-panel{flex:0 1 auto;min-height:0;max-height:35%;overflow-y:auto;padding:14px;margin-bottom:10px}.stage>.run-panel p{margin:10px 0}.workspace .empty:not([hidden]){height:100%;max-height:100%;padding:18px;display:flex;align-items:center;justify-content:center}.workspace .workspace-logo{max-height:100%;width:auto;max-width:156px;margin:0}.workspace-edit-tools{padding-top:18px;margin-top:20px;border-top:1px solid #ddd}.workspace-edit-tools h3{font-size:15px;margin:0 0 14px}.workspace-edit-tools .ai-panel{margin-top:10px}.workspace-edit-tools summary{cursor:pointer;line-height:1.8}.workspace-edit-tools .row button{font-size:12px;padding:10px 12px}body>footer{flex:0 0 auto;padding:6px 16px!important;font-size:10px!important;line-height:1.6}
/* Keep the empty-state logo hidden after an image has loaded, at every zoom. */
.workspace .empty[hidden]{display:none!important}

#eraserSizeControl[hidden],#trimSelection[hidden]{display:none!important}

/* Keep settings on the left and the complete workspace on the right at every size. */
html{width:100%;overflow:hidden}
body{width:100%;min-width:0;min-height:0}
body>main{display:grid;grid-template-columns:clamp(220px,24vw,310px) minmax(0,1fr);max-width:none;margin:0;gap:clamp(10px,1.4vw,22px);padding:clamp(10px,1.2vw,16px) clamp(10px,1.5vw,24px);overflow:hidden}
main>aside{order:0;min-width:0;max-width:100%;height:100%;overflow:auto;overflow-wrap:anywhere}
main>.stage{order:1;min-width:0;padding:0;border:0;z-index:auto;background:transparent}
main>aside button,main>aside .upload{max-width:100%;white-space:normal}
main>aside .pair{grid-template-columns:repeat(2,minmax(0,1fr))}
main>aside input,main>aside select{min-width:0;max-width:100%}
body>header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 24px;padding:12px 24px;min-width:0}
body>header .badge.brand-caption{min-width:0;gap:clamp(10px,1.6vw,22px);flex-wrap:nowrap;padding:4px 0}
body>header .brand-caption-name{gap:clamp(6px,.8vw,12px)}
body>header .brand-caption .brand-wordmark{width:clamp(54px,7.2vw,90px)}
body>header .brand-caption-jp{font-size:clamp(24px,3.2vw,40px)}
body>header .brand-caption .brand-caption-tagline{width:clamp(115px,18vw,225px)}
body>header .site-nav{min-width:0;width:auto;max-width:100%;margin:0;flex-wrap:nowrap;gap:20px;white-space:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:4px 0}
body>header .site-nav a{flex:0 0 auto}
.stagebar{min-width:0}
.stagebar .tabs{min-width:0;max-width:100%;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:2px}
.stagebar .tabs button{white-space:nowrap;flex:0 0 auto}
.stage>.zoom-tools{min-width:0;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding-bottom:2px}
.stage>.zoom-tools>*{flex:0 0 auto;white-space:nowrap}
.stage>.zoom-tools>span{flex:0 1 auto;white-space:normal}
.stage>.workspace{min-width:0;max-width:100%;width:100%}
@media(max-width:1150px){
 body>header{grid-template-columns:auto minmax(0,1fr);gap:6px 16px;padding:8px 16px}
 body>header .site-nav{grid-column:1/-1;justify-content:flex-end}
 body>header .silo-brand svg{width:32px;height:44px}
 .stagebar>div:first-child{display:none}
 .stagebar .tabs{width:100%}
 .stage>.zoom-tools>span{display:none}
}
@media(max-width:850px){
 body>main{grid-template-columns:clamp(160px,31vw,240px) minmax(0,1fr);padding:8px;gap:8px}
 main>aside{padding:14px 12px;border-radius:10px}
 main>aside h2{font-size:16px;padding:10px 9px}
 .stagebar{margin-bottom:6px;align-items:center}
 .stagebar .tabs{gap:3px}
 .stagebar .tabs button{font-size:11px;padding:7px 8px}
 .stage>.zoom-tools{gap:4px;margin-bottom:6px}
 .stage>.zoom-tools button{font-size:11px;padding:7px 9px}
 .stage>.status{font-size:10px;max-height:40px;padding:5px 0}
 .stage>.run-panel{max-height:35%;padding:9px;font-size:11px}
 .workspace .workspace-logo{max-width:110px}
 body>footer{font-size:9px!important;padding:4px 8px!important}
}
@media(max-width:540px){
 body>header{padding:6px 10px;gap:4px 10px}
 body>header .silo-brand svg{width:25px;height:34px}
 body>header .badge.brand-caption{gap:8px}
 body>header .brand-caption .brand-wordmark{width:54px}
 body>header .brand-caption-jp{font-size:24px}
 body>header .brand-caption .brand-caption-tagline{width:115px}
 body>header .site-nav{justify-content:flex-start;gap:18px;font-size:11px}
 body>main{grid-template-columns:clamp(136px,39vw,190px) minmax(0,1fr);padding:6px;gap:6px}
 main>aside{padding:12px 9px;scrollbar-gutter:auto}
 main>aside h2{font-size:14px;padding:9px 7px;margin-top:22px;line-height:1.7}
 main>aside label{font-size:12px}
 main>aside button,main>aside .upload{font-size:12px;padding:10px 8px}
 main>aside .ai-panel{padding:8px}
 main>aside .pair{grid-template-columns:1fr;gap:0}
 main>aside .row{gap:6px}
 .workspace .workspace-logo{max-width:85px}
 body>footer{display:none}
}
@media(max-height:540px){
 body>header{padding-top:4px;padding-bottom:4px;gap:2px 12px}
 body>header .silo-brand svg{width:22px;height:30px}
 body>header .badge.brand-caption{padding:0}
 body>header .brand-caption .brand-wordmark{width:60px}
 body>header .brand-caption-jp{font-size:27px}
 body>header .site-nav{padding:2px 0}
 body>main{padding-top:6px;padding-bottom:6px}
 body>footer{display:none}
 .stagebar,.stage>.zoom-tools{margin-bottom:4px}
 .stage>.status{max-height:28px;padding:3px 0}
}

/* Keep cloud retry, local copies and export actions in separate layout boxes. */
.share-export #libraryRetry{margin:8px 0;max-width:100%;line-height:1.5}
.share-export .local-downloads{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:14px 0;padding:0;clear:both}
.share-export .local-downloads[hidden]{display:none}
.share-export .local-downloads .library-file{display:flex;align-items:center;justify-content:center;box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:12px 14px;line-height:1.5;white-space:normal;overflow-wrap:anywhere;margin:0}
.export-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0 0;clear:both}
.export-buttons button{width:100%;min-width:0;min-height:44px;margin:0;line-height:1.5;overflow-wrap:anywhere}
.export-buttons #svg{grid-column:1/-1}

/* Phone: keep a usable, full-width preview above independently scrolling settings. */
.mobile-actions{display:none}
@media(max-width:650px) and (orientation:portrait){
 body>main{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(180px,48%) minmax(0,1fr);padding:6px;gap:6px}
 main>.stage{grid-row:1;order:0;height:100%;min-height:0}
 main>aside{grid-row:2;order:1;height:100%;padding:14px;scroll-padding-top:12px}
 main>aside button,main>aside .upload{min-height:44px;font-size:14px}
 main>aside input,main>aside select{font-size:16px;min-height:36px}
 .stagebar .tabs button,.stage>.zoom-tools button{min-height:36px;font-size:12px}
 .stage>.status{font-size:12px;max-height:44px}
 .stage>.run-panel{position:absolute;inset:42px 4px auto;z-index:6;max-height:75%;background:white;border:1px solid #ddd;box-shadow:0 3px 16px #0002}
 .mobile-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:4px 8px;background:white;flex:0 0 auto}
 .mobile-actions button{min-height:42px;padding:8px 4px;font-size:13px}
 body>header .brand-caption .brand-caption-tagline{display:none}
}

/* Phone editor: canvas first; settings appear only on demand. */
.mobile-only,.mobile-panel-heading{display:none}
@media(max-width:650px) and (orientation:portrait){
 body>header{order:0;padding:4px 10px;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;min-height:48px}
 body>header .site-nav{display:none}
 body>header .silo-brand svg{width:22px;height:30px}
 body>header .badge.brand-caption{gap:4px;padding:0}
 body>header .brand-caption .brand-wordmark{width:62px}
 body>header .brand-caption-jp{font-size:25px}
 body>header .mobile-only{display:block;min-height:40px;font-size:12px;padding:6px 10px}
 body.mobile-nav-open>header .site-nav{display:flex;position:absolute;left:0;right:0;top:100%;flex-wrap:wrap;z-index:60;background:white;padding:16px;border-bottom:1px solid #ddd;box-shadow:0 8px 18px #0002}
 body>main{order:1;display:block;position:relative;min-height:0;padding:4px 6px;flex:1 1 0}
 main>.stage{height:100%;width:100%}
 main>aside{display:none;position:fixed;left:6px;right:6px;bottom:calc(62px + env(safe-area-inset-bottom,0px));width:auto;height:min(48dvh,420px);z-index:40;padding:0 14px 18px;border:1px solid #ddd;border-radius:16px 16px 0 0;box-shadow:0 -6px 25px #0002;overflow:auto;scroll-padding-top:64px}
 body.mobile-settings-open main>aside{display:block}
 .mobile-panel-heading{display:flex;position:sticky;top:0;align-items:center;justify-content:space-between;background:white;border-bottom:1px solid #ddd;padding:8px 0;z-index:3}
 .mobile-panel-heading button{min-height:40px}
 .stagebar{flex-wrap:nowrap;gap:4px;margin:0 0 4px}
 .stagebar>.mobile-only{display:block;order:2;flex:0 0 auto;min-height:38px;padding:6px 10px;font-size:13px}
 .stagebar .tabs{width:auto;flex:1 1 0;overflow-x:auto}
 .stagebar [data-view="parts"]{display:none}
 .stagebar .tabs button{padding:6px 8px;font-size:12px;min-height:38px}
 .stage>.zoom-tools{margin-bottom:4px}
 .stage>.zoom-tools button{min-height:38px;padding:6px 10px}
 .stage>.workspace{flex:1 1 0;min-height:0}
 .stage>.status{font-size:12px;line-height:1.5;max-height:42px;padding:4px 0}
 .mobile-actions{order:2;position:relative;z-index:45;gap:5px;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));border-top:1px solid #ddd}
 .mobile-actions button{min-height:48px;font-size:14px}
 body>footer{display:none}
}

@media(max-width:1150px){.stagebar>div:not(.tabs){display:none}}
@media(max-width:650px) and (orientation:portrait){
 body[data-mobile-step] .editor-step{display:none}
 body[data-mobile-step="settingsPhoto"] #settingsPhoto,body[data-mobile-step="settingsRecognize"] #settingsRecognize,body[data-mobile-step="settingsLines"] #settingsLines,body[data-mobile-step="settingsExport"] #settingsExport{display:block}
 .editor-step>.mobile-only{display:block;width:100%;min-height:44px;margin:10px 0}
 .editor-step>h2:first-child{margin-top:16px}
 .mobile-actions button.active{background:#111;color:white}
 #drop{touch-action:none;-webkit-user-select:none;user-select:none}
}
@media(max-width:650px) and (orientation:portrait){
 .mobile-panel-heading{gap:8px}
 .mobile-panel-heading strong{white-space:nowrap;font-size:13px;flex:0 0 auto}
 .mobile-panel-heading select{width:auto;min-width:0;flex:1;margin:0;font-size:14px}
 .mobile-panel-heading button{flex:0 0 auto;white-space:nowrap;min-width:60px;padding:6px 8px}
}

/* Keep the canvas repaint inside the editor; avoid scaled canvas compositing trails. */
#drop{isolation:isolate;contain:paint}
#canvas{transform:none}