@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
:root{font-family:'Noto Sans JP',sans-serif;color:#272a2e;background:#f7f8fa;font-size:13px;--accent:#3f6e5e}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;background:white;border:1px solid #dce1e3;border-radius:7px;padding:9px 13px;color:inherit}button:hover{background:#eff3f0}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #7bb59b;outline-offset:3px}header{height:78px;border-bottom:1px solid #e3e6e8;background:white;display:flex;align-items:center;padding:0 30px;gap:24px}.brand{font-size:23px;letter-spacing:4px;font-weight:700;text-decoration:none;color:inherit;display:flex;align-items:center;gap:12px}.brand small{font-size:9px;color:#939a9f;letter-spacing:2px;margin-left:8px}.brand-icon{color:var(--accent);font-size:32px}.privacy{margin-left:auto;color:#6b8074;font-size:11px}header button{font-size:12px}main{display:grid;grid-template-columns:310px 1fr;min-height:calc(100vh - 78px)}aside{background:white;border-right:1px solid #e1e5e7;padding:26px 23px}.section-head{display:flex;justify-content:space-between;align-items:center;letter-spacing:1.6px;font-size:10px;font-weight:600;color:#959a9e;margin-top:29px}.section-head:first-child{margin-top:0}.section-head button{padding:0;border:0;font-size:10px;letter-spacing:0;color:#737b80}h2{font-size:19px;letter-spacing:.04em;margin:14px 0 8px}.muted{font-size:11px;color:#8a9196;line-height:1.8}.upload{display:flex;align-items:center;gap:12px;border:1px dashed #cdd5d1;border-radius:9px;margin-top:12px;padding:15px;min-height:95px;cursor:pointer;background:#fbfcfb}.upload:hover,.upload.dragover{background:#eaf2ed;border-color:var(--accent)}.upload input{display:none}.upload img{display:none;width:50px;height:61px;object-fit:cover;border-radius:4px}.upload img[src]{display:block}.upload b{font-size:9px;letter-spacing:1.6px}.upload strong{display:block;font-size:12px;margin:7px 0 4px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.upload small{font-size:9px;color:#959c99}.dot{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:6px}.before{background:#599f82}.after{background:#b99671}.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:15px 0 21px}.modes button{padding:9px 1px;font-size:23px;border:1px solid #e1e5e3}.modes button span{display:block;font-size:10px;margin-top:5px}.modes button.active{color:var(--accent);background:#eaf1ed;border-color:#7ba18e}.range-label{display:flex;justify-content:space-between;font-size:11px;margin-top:15px}output{color:#7e8884;font-size:11px}input[type=range]{accent-color:var(--accent);width:100%;height:4px;margin:16px 0 7px}input[type=checkbox]{accent-color:var(--accent)}.align-button{width:100%;font-size:11px;margin-top:15px;color:var(--accent);border-color:#c6d8ce;background:#f5f9f6;padding:12px 3px}.help{font-size:10px}.check{display:flex;align-items:center;gap:6px;font-size:11px;margin:17px 0}.adjust-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.adjust-grid label{font-size:10px;color:#7c8388}.adjust-grid input{width:100%;border:1px solid #e0e4e5;border-radius:5px;padding:7px;margin-top:5px;font-size:12px}.workspace{min-width:0;padding:28px 32px 15px;display:flex;flex-direction:column}.work-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.eyebrow{font-size:9px;letter-spacing:2.7px;color:#89968e}h1{font-size:19px;font-weight:500;margin:8px 0 0;letter-spacing:.06em}.mode-pill{font-size:10px;color:#6a7e73;border:1px solid #d6e1da;background:#eef4f0;border-radius:20px;padding:6px 13px}.canvas-wrap{position:relative;flex:1;min-height:450px;height:calc(100vh - 250px);max-height:1000px;background-color:#e9eceb;background-image:linear-gradient(45deg,#e4e7e6 25%,transparent 25%),linear-gradient(-45deg,#e4e7e6 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e4e7e6 75%),linear-gradient(-45deg,transparent 75%,#e4e7e6 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;border:1px solid #d9dfdc;border-radius:12px;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}#empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#f0f3f1;color:#68796f;padding:22px;pointer-events:none}#empty button{pointer-events:auto;background:var(--accent);color:white;border:0;padding:12px 25px;margin:17px}.empty-icon{font-size:60px;color:#92ac9e}#empty h2{font-size:20px;color:#52685b}#empty p{font-size:12px;line-height:2;color:#8a978f}#empty small{font-size:10px;color:#97a29b}.canvas-label{position:absolute;top:18px;font-size:9px;letter-spacing:1.6px;border:1px solid #ffffff70;background:#ffffffd9;padding:7px 10px;border-radius:4px;pointer-events:none;display:none}.before-label{left:18px;color:#4e8b70}.after-label{right:18px;color:#9e795a}footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:15px;color:#939a97;font-size:10px}footer div{display:flex;align-items:center;gap:10px;white-space:nowrap}footer button{padding:5px 10px;background:transparent}#status{font-size:11px;color:#698372;min-height:17px}#alignBanner{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);background:#234638ee;color:white;padding:12px 16px;border-radius:9px;width:max-content;max-width:95%;font-size:12px}#alignBanner button{margin-left:10px;font-size:10px;padding:5px} [hidden]{display:none!important}@media(max-width:1000px){.brand small{display:none}.workspace{padding:24px 18px}main{grid-template-columns:280px 1fr}aside{padding:24px 18px}h1{font-size:15px}.mode-pill{display:none}footer{flex-wrap:wrap}}@media(max-width:700px){header{padding:0 16px;height:65px;gap:10px}.brand{font-size:19px}.privacy{display:none}header button{margin-left:auto;font-size:10px}main{display:flex;flex-direction:column}.workspace{order:-1;padding:18px 14px 0}.canvas-wrap{flex:none;min-height:330px;height:48vh}.work-heading{margin-bottom:15px}aside{border:0;padding:20px}.upload{display:inline-flex;width:calc(50% - 5px);vertical-align:top;margin-right:2px;padding:10px}.upload img{width:35px;height:50px}.upload strong{max-width:110px;font-size:10px}.modes button{font-size:21px}.adjust-grid{grid-template-columns:repeat(4,1fr)}#empty h2{font-size:18px}}

dialog{border:1px solid #d6dfd9;border-radius:14px;width:min(460px,94vw);padding:23px;color:#293c31;box-shadow:0 24px 90px #102d2730}dialog::backdrop{background:#12251a66;backdrop-filter:blur(4px)}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}.dialog-heading h2{margin:0}.dialog-heading button{border:0}.field{display:block;margin:18px 0;font-size:12px}.field select{display:block;width:100%;padding:11px;margin-top:7px;border:1px solid #d2dcd6;border-radius:7px;background:white;color:#314b3c;font:inherit}#saveStatus{font-size:11px;line-height:1.8}.workspace:fullscreen,.workspace.focus-mode{background:#f7f8fa;width:100%;height:100dvh;padding:15px;overflow:auto}.workspace:fullscreen .canvas-wrap,.workspace.focus-mode .canvas-wrap{max-height:none;min-height:100px;height:auto}.workspace.focus-mode{position:fixed;inset:0;z-index:100}.fullscreen-exit{display:none}.workspace:fullscreen .fullscreen-exit,.workspace.focus-mode .fullscreen-exit{display:block}.workspace:fullscreen .work-heading,.workspace.focus-mode .work-heading{margin-bottom:12px}body.focus-open{overflow:hidden}@media(max-width:700px){header{gap:6px}header button{padding:7px;font-size:10px}.workspace:fullscreen .canvas-wrap,.workspace.focus-mode .canvas-wrap{flex:1}.brand{letter-spacing:2px}}

header{height:auto;min-height:78px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px;gap:10px}.privacy{margin-left:auto}.brand small{display:none}header button{white-space:nowrap;font-size:11px}dialog{max-height:90dvh;overflow:auto}.field input,.adjust-grid select{width:100%;padding:9px;border:1px solid #d2dcd6;border-radius:6px;font:inherit;background:white;margin-top:7px}.cloud-save{border-bottom:1px solid #d5dfd9;padding-bottom:17px;margin-bottom:22px}.cloud-save h3,dialog h3{font-size:14px;font-weight:500}.library-actions{display:flex;gap:8px}#libraryStatus{font-size:12px}#projectList article{padding:15px 0;border-bottom:1px solid #e0e7e2}#projectList article b{display:block;overflow-wrap:anywhere}#projectList article small{display:block;color:#87978c;margin:7px 0}#projectList article button{margin-right:8px}.danger{color:#a44848}progress{width:100%;height:7px;accent-color:#3f6e5e;margin-top:15px}.work-heading{gap:8px}.work-heading>div{margin-right:auto}.work-heading .fullscreen-exit{font-size:10px}#aiCancel{margin-top:8px}#undoAI{font-size:10px}.brand{margin-right:auto}@media(max-width:700px){header{padding:10px}.privacy{display:none}.brand{font-size:17px}header button{margin:0;font-size:10px}.work-heading h1{font-size:13px}.adjust-grid select{font-size:11px}}


.warp-panel{margin-top:20px;padding-top:16px;border-top:1px solid #dce3dd}.warp-panel h3{font-size:16px;margin:0 0 8px}.warp-panel small{display:block;font-size:12px;color:#647469;margin-top:10px}.warp-panel .field{margin:10px 0}.warp-panel button{margin-bottom:6px}#alignBanner{flex-wrap:wrap}#alignText{flex:1;min-width:160px}

.clear-image{display:block;width:100%;margin:6px 0 16px;padding:9px 12px;font-size:13px;color:#9b3e3e;border-color:#e7caca;background:#fffafa}.clear-image:hover:not(:disabled){background:#fcecec}.clear-image:disabled{opacity:.45}@media(max-width:700px){.upload{display:flex;width:100%;margin-right:0}.upload strong{max-width:220px}}

.viewer-tools{flex-wrap:wrap}.viewer-tools select{max-width:200px;padding:7px;border:1px solid #ccd6d0;border-radius:6px;background:white;font:inherit}.viewer-tools label{font-size:12px}
.workspace:fullscreen,.workspace.focus-mode{position:fixed;inset:0;margin:0;padding:0;overflow:hidden;max-width:none;max-height:none;width:100vw;height:100dvh}
.workspace:fullscreen .canvas-wrap,.workspace.focus-mode .canvas-wrap{position:absolute;inset:0;width:100%;height:100%;min-height:0;max-height:none;border:0;border-radius:0;flex:none}
.workspace:fullscreen .work-heading,.workspace.focus-mode .work-heading{position:absolute;top:max(12px,env(safe-area-inset-top));right:12px;z-index:3;margin:0;gap:8px}
.workspace:fullscreen .work-heading>div,.workspace.focus-mode .work-heading>div,.workspace:fullscreen .mode-pill,.workspace.focus-mode .mode-pill{display:none}
.workspace:fullscreen footer,.workspace.focus-mode footer{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:3;max-width:calc(100% - 24px);width:max-content;border:1px solid #ccd8d0;border-radius:12px;background:#fffffff0;padding:10px;box-shadow:0 2px 15px #0002}
.workspace:fullscreen footer>span,.workspace.focus-mode footer>span,.workspace:fullscreen>p,.workspace.focus-mode>p{display:none}
.workspace:fullscreen .fullscreen-exit,.workspace.focus-mode .fullscreen-exit{font-size:13px;background:#fffffff0}
.workspace.controls-collapsed footer,.workspace.controls-collapsed #fullscreenSave{display:none}
.workspace:fullscreen #alignBanner,.workspace.focus-mode #alignBanner{bottom:85px;z-index:4}
@media(max-width:700px){.viewer-tools{justify-content:center;gap:6px}.viewer-tools select{max-width:180px}.workspace:fullscreen .canvas-label,.workspace.focus-mode .canvas-label{top:65px}}