@font-face{font-family:NotoJP;src:url('./assets/NotoSansJP.ttf');font-display:swap}
:root{font-family:NotoJP,system-ui,sans-serif;color:#203b2d;background:#f5f8f5;--green:#246c47;--soft:#e7f3e9;--border:#cfdfd1}
*{box-sizing:border-box}body{margin:0}header{display:flex;align-items:center;justify-content:space-between;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));background:var(--soft);border-bottom:1px solid var(--border)}header strong{font-size:20px}header span{display:block;font-size:11px;color:#496151}header img{object-fit:contain}.privacy{text-align:center;font-size:12px;padding:8px;background:#fff;color:var(--green)}main{max-width:1160px;margin:auto;padding:14px 14px 165px;display:grid;gap:14px}.card{background:white;border:1px solid var(--border);border-radius:16px;padding:16px;min-width:0}h1,h2{font-size:16px;margin:0 0 12px;font-weight:650}.section-title{display:flex;gap:8px;align-items:center;justify-content:space-between}.section-title h1,.section-title h2{margin:0 0 10px}.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}button,.file-button{border:1px solid var(--border);background:var(--soft);color:#204e34;padding:11px 14px;border-radius:10px;font:inherit;font-size:14px;min-height:44px;cursor:pointer;text-align:center;touch-action:manipulation}button:hover,.file-button:hover{border-color:var(--green)}button:disabled{opacity:.45;cursor:default}.primary{background:var(--green);color:white;border-color:var(--green)}.quiet{background:transparent;border-color:transparent;font-size:12px}.secondary{background:#f4f8f4}.file-button input{display:none}label{display:block;font-size:12px;font-weight:550;margin:10px 0}input,select,textarea{width:100%;font:inherit;font-size:16px;padding:10px;border:1px solid #b8cdbb;border-radius:8px;background:#fff;color:#203b2d;min-height:44px;margin-top:4px}input[type=checkbox]{width:22px;min-height:22px;vertical-align:middle;margin-right:8px}input[type=range]{padding:0}.hint{font-size:12px;line-height:1.65;color:#536958}.file-row{display:flex;align-items:center;gap:5px;border-top:1px solid #e6eee6;padding:8px 0}.file-row .file-select{flex:1;min-width:0;overflow-wrap:anywhere;text-align:left;background:#fff}.file-row .file-select[aria-pressed=true]{background:var(--soft);border-color:var(--green)}.file-row .file-select small{display:block;font-size:11px;color:#5e7264}.file-row .mini{padding:8px;min-width:40px}.field-grid{display:grid;gap:0 10px}.view-switch button[aria-pressed=true]{background:var(--green);color:white}.preview{overflow:hidden}#preview-scroll{overflow:auto;background:#edf1ed;border-radius:10px;margin-top:14px;padding:12px}#preview-stage{position:relative;max-width:100%;margin:auto;background:#fff;min-height:180px}#preview-canvas{display:block;width:100%;height:auto}#preview-canvas[hidden]{display:none}#empty{padding:70px 12px;text-align:center;font-size:13px;color:#617466}#split-line{position:absolute;background:#da6f19;touch-action:none;z-index:2}#split-line::after{content:'↔';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#da6f19;color:#fff;padding:8px;border-radius:50%;font-size:18px}#rect-overlay{position:absolute;border:2px dashed #d27924;background:#eaae3226;pointer-events:none}#preview-stage.drawing{touch-action:none}.page-nav{justify-content:center}.page-nav label{margin:0;font-size:11px}.page-nav input{width:65px;text-align:center}.page-nav select{width:90px}#text{font-size:14px;font-family:NotoJP,monospace;overflow-wrap:anywhere}.extras details{border-bottom:1px solid #e6eee6;padding:10px 0}.extras summary{cursor:pointer;min-height:36px;font-size:14px}.extras p{font-size:12px;line-height:1.75}.extras a{color:var(--green)}footer{position:fixed;bottom:0;left:0;right:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#ffffffef;border-top:1px solid var(--border);z-index:4;box-shadow:0 -3px 15px #24442c09}#status{font-size:12px;line-height:1.5;max-height:52px;overflow:auto;margin-bottom:8px}footer .actions{max-width:650px;margin:auto;flex-wrap:nowrap}footer button{flex:1;padding:12px 7px;font-size:13px}progress{width:100%;height:8px;accent-color:var(--green)}dialog{border:1px solid var(--border);border-radius:16px;padding:20px;width:min(620px,95vw);max-height:85dvh;overflow:auto;color:#203b2d}dialog::backdrop{background:#142c2066}.save-row{padding:8px 0;border-top:1px solid var(--border)}.save-row small{font-size:11px}#save-status{font-size:12px;white-space:pre-wrap}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #80b49b;outline-offset:2px}[hidden]{display:none!important}
@media(min-width:900px){main{grid-template-columns:360px 1fr}.files,.settings{grid-column:1}.preview{grid-column:2;grid-row:1/4;align-self:start;position:sticky;top:12px}.extras{grid-column:1}.field-grid{grid-template-columns:1fr 1fr}.privacy{text-align:left;padding-left:calc((100% - min(1130px,100%))/2 + 16px)}}
@media(max-width:380px){main{padding-left:8px;padding-right:8px}.card{padding:12px}button,.file-button{font-size:12px;padding:10px}.file-row .mini{min-width:34px}}
/* Compact workspace: controls stay in menus; page aspect ratio never grows the document. */
main{gap:8px;padding-top:8px;padding-bottom:120px}.card{padding:10px 12px;border-radius:12px}.files .file-button{margin:0}.files details{font-size:12px;margin-top:6px}.files summary{cursor:pointer;padding:4px}.files #file-list{max-height:210px;overflow:auto}.function-menu{display:flex;align-items:center;gap:8px}.function-menu label{flex:1;min-width:0;margin:0;font-size:11px}.function-menu select{margin-top:2px}.function-menu button{margin-top:15px}.preview .section-title h2{margin:0}.preview .section-title .actions button{padding:6px 9px;font-size:12px}.view-switch{margin-top:5px}.view-switch button{padding:7px 10px;min-height:36px;font-size:12px}#preview-scroll{height:clamp(220px,calc(100dvh - 470px),460px);margin-top:8px;display:flex;align-items:safe center;padding:12px}#preview-stage{flex:none;min-height:0}#empty{padding:45px 10px}#output-label{margin:4px 0;font-size:11px}#output{min-height:36px;padding:5px;font-size:13px}.page-nav{gap:5px;margin-top:5px}.page-nav button{min-height:36px;padding:5px 10px}.page-nav input,.page-nav select{min-height:36px;padding:5px;font-size:13px}.page-nav input{width:52px}.page-nav select{width:77px}#adopt{margin-top:6px;padding:7px 10px;min-height:36px;font-size:12px}#text{max-height:180px}.extras{padding:5px 12px}.extras>details{border:0;padding:0}.extras>details>summary{min-height:36px;padding:7px 0}#settings-dialog .field-grid{grid-template-columns:1fr 1fr}#settings-dialog #note{margin-top:10px}#settings-dialog #select-page{font-size:12px}#settings-dialog .section-title{position:sticky;top:-20px;background:#fff;padding:8px 0;z-index:2}
@media(min-width:900px){.function-menu{grid-column:1}.preview{grid-row:1/5}#preview-scroll{height:min(65dvh,650px)}.files{align-self:start}.extras{align-self:start}}
@media(max-width:380px){#settings-dialog .field-grid{grid-template-columns:1fr}footer button{font-size:12px}}
@media(max-width:899px){html,body{height:100%;height:100dvh;overflow:hidden}body{display:flex;flex-direction:column}header,.privacy,footer{flex-shrink:0}header{padding-top:8px;padding-bottom:8px}header strong{font-size:17px}header img{height:34px}.privacy{font-size:10px;padding:5px}main{width:100%;flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto;padding:6px 8px;gap:6px}.files,.function-menu,.extras{flex-shrink:0}.files{padding:4px 10px}.files details{margin-top:0}.files summary{padding:6px}.files details[open] #file-list{max-height:20dvh}.files .hint{margin:4px 0}.function-menu{padding:6px 10px}.function-menu select{min-height:38px;padding:6px 8px}.function-menu button{min-height:38px;padding:6px 12px}.preview{flex:1;min-height:220px;display:flex;flex-direction:column;padding:8px 10px}.preview>.section-title,.preview>.view-switch,.preview>#output-label,.preview>.page-nav,.preview>#adopt{flex-shrink:0}.preview .section-title button{min-height:30px}.preview .section-title h2{font-size:14px}.preview #preview-scroll{flex:1;min-height:60px;height:auto;margin-top:6px}.preview .page-nav{flex-wrap:nowrap;font-size:11px;gap:4px}.preview #text-label{min-height:0;overflow:auto;max-height:140px}.extras>details>summary{min-height:28px;padding:4px 0;font-size:12px}.extras .hint{font-size:11px}footer{position:static;padding:6px 8px calc(6px + env(safe-area-inset-bottom))}#status{font-size:10px;max-height:30px;margin-bottom:4px}footer button{min-height:40px;padding:8px 5px}#preview-stage{margin:auto}}
@media(max-width:899px){.preview .section-title h2{display:none}.preview .section-title .view-switch{width:100%;flex-wrap:nowrap;margin:0;gap:4px}.preview .section-title button{flex:1;padding:6px 4px;font-size:11px}.preview .section-title #preview-expand{flex:0 0 36px}body.preview-expanded>header,body.preview-expanded>.privacy,body.preview-expanded .files,body.preview-expanded .function-menu,body.preview-expanded .extras{display:none}body.preview-expanded .preview{min-height:0}}