:root{--bg:#f3f4f6;--panel:#fff;--line:#d8dbe0;--text:#1f2329;--muted:#5b636e;--accent:#2f6aa8;--accent-bg:#e5edf6;--accent-text:#fff;--warn:#9a4a12;--warn-bg:#fbeee2;--check1:#e6e8eb;--check2:#fbfbfc;--input:#fff}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#16181c;--panel:#1f2227;--line:#353a42;--text:#e3e6ea;--muted:#9aa2ad;--accent:#6f9fd2;--accent-bg:#26323f;--accent-text:#10161d;--warn:#e3a679;--warn-bg:#3a2a1e;--check1:#2a2d33;--check2:#33373e;--input:#171a1e}}:root[data-theme=dark]{--bg:#16181c;--panel:#1f2227;--line:#353a42;--text:#e3e6ea;--muted:#9aa2ad;--accent:#6f9fd2;--accent-bg:#26323f;--accent-text:#10161d;--warn:#e3a679;--warn-bg:#3a2a1e;--check1:#2a2d33;--check2:#33373e;--input:#171a1e}*{box-sizing:border-box}html,body{height:100%}body{background:var(--bg);color:var(--text);margin:0;font:14px/1.5 system-ui,Hiragino Sans,Yu Gothic UI,Meiryo,sans-serif}header{background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:12px;padding:8px 16px;display:flex}header h1{margin:0 auto 0 0;font-size:16px;font-weight:700}.hbtns{gap:6px;display:flex}dialog{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;width:100%;max-width:min(640px,100vw - 32px);padding:0;box-shadow:0 12px 40px #00000040}dialog::backdrop{background:#00000073}.dlg-head{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.dlg-head h2{color:var(--text);margin:0;font-size:15px}.dlg-body{max-height:70vh;padding:12px 20px 16px;overflow:auto}.dlg-body h3{margin:14px 0 4px;font-size:14px}.dlg-body h3:first-child{margin-top:0}.dlg-body p,.dlg-body ol,.dlg-body ul{margin:4px 0;padding-left:1.4em}.dlg-body p{padding-left:0}.dlg-body li{margin:2px 0}.dlg-foot{border-top:1px solid var(--line);justify-content:flex-end;gap:8px;padding:12px 16px;display:flex}kbd{border:1px solid var(--line);background:var(--bg);border-radius:4px;padding:0 4px;font:12px ui-monospace,monospace}.zoom{align-items:center;gap:4px;display:flex}.zoom span{text-align:center;font-variant-numeric:tabular-nums;min-width:52px;color:var(--muted)}button,.btn{font:inherit;color:var(--text);background:var(--panel);border:1px solid var(--line);cursor:pointer;border-radius:6px;padding:5px 10px}button:hover,.btn:hover{background:var(--accent-bg)}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-text);font-weight:600}button.primary:hover{filter:brightness(1.08)}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--accent);outline-offset:2px}main{grid-template-columns:310px 1fr;height:calc(100% - 49px);display:grid}aside{background:var(--panel);border-right:1px solid var(--line);padding:4px 16px 24px;overflow:auto}section{border-bottom:1px solid var(--line);padding:12px 0}section:last-child{border-bottom:0}h2{color:var(--muted);letter-spacing:.04em;margin:0 0 8px;font-size:13px;font-weight:700}.row{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;display:grid}.row.one{grid-template-columns:1fr}label.f{color:var(--muted);flex-direction:column;gap:3px;font-size:12px;display:flex}label.c{align-items:center;gap:6px;margin-bottom:8px;font-size:13px;display:flex}input[type=number],select{font:inherit;color:var(--text);background:var(--input);border:1px solid var(--line);border-radius:6px;width:100%;padding:4px 6px}input[type=color]{border:1px solid var(--line);background:var(--input);border-radius:6px;width:100%;height:30px;padding:2px}input[type=range]{width:100%;accent-color:var(--accent)}.rangev{justify-content:space-between;display:flex}.hint{color:var(--muted);margin:4px 0 8px;font-size:12px}.btns{flex-wrap:wrap;gap:6px;display:flex}.btns.col{flex-direction:column}.btns.col button{width:100%}#file{display:none}.stage{background:conic-gradient(var(--check1) 25%,var(--check2) 0 50%,var(--check1) 0 75%,var(--check2) 0) 0 0/20px 20px;position:relative;overflow:auto}.stage-inner{justify-content:center;align-items:center;min-width:100%;min-height:100%;padding:24px;display:flex}canvas#view{box-shadow:0 0 0 1px var(--line);cursor:move;touch-action:none;image-rendering:auto;display:block}.info{background:var(--panel);border:1px solid var(--line);color:var(--muted);font-variant-numeric:tabular-nums;border-radius:6px;margin:0 8px 8px;padding:4px 10px;font-size:12px;display:inline-block;position:sticky;bottom:8px;left:8px}.warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}.drop:after{content:"ここに画像を落とす";border:2px dashed var(--accent);color:var(--accent);background:color-mix(in srgb,var(--panel) 80%,transparent);pointer-events:none;border-radius:10px;justify-content:center;align-items:center;font-size:18px;font-weight:700;display:flex;position:absolute;inset:8px}.seg{border:1px solid var(--line);border-radius:7px;margin-bottom:10px;display:flex;overflow:hidden}.seg label{flex:1;position:relative}.seg input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.seg span{text-align:center;border-left:1px solid var(--line);cursor:pointer;white-space:nowrap;padding:5px 2px;font-size:13px;display:block}.seg label:first-child span{border-left:0}.seg input:checked+span{background:var(--accent);color:var(--accent-text);font-weight:600}.seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:-3px}.seg input:disabled+span{opacity:.45;cursor:not-allowed}.rangev{align-items:center;gap:8px}.rangev output{text-align:right;font-variant-numeric:tabular-nums;min-width:40px}input.mini{flex:none;width:72px}details.more{margin-top:6px}details.more summary{cursor:pointer;color:var(--muted);padding:4px 0;font-size:12px}details.more[open] summary{margin-bottom:8px}.imgname{color:var(--muted);word-break:break-all;margin:6px 0;font-size:12px}@media (width<=800px){main{grid-template-columns:1fr;height:auto}aside{border-right:0;border-bottom:1px solid var(--line);order:2}.stage{order:1;height:60vh}}a.xt-back{text-decoration:none}