:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#1c2430;--muted:#667487;--line:#d8dde5;--panel:#fff;--page:#f5f7fa;--stage:#e9edf3;--accent:#1570ef;--accent-strong:#075fcc;--mint:#22a06b;--coral:#e36b57;--gold:#d59b1c;--shadow:0 18px 50px #1c24301f}*{box-sizing:border-box}html,body,#root{height:100%}body{background:var(--page);color:var(--ink);letter-spacing:0;margin:0;font-family:Inter,Segoe UI,Hiragino Sans,Yu Gothic UI,Meiryo,sans-serif}button,input,select{font:inherit}button,label.command{-webkit-tap-highlight-color:transparent}svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.9px;display:block}.app-shell{grid-template-rows:auto 1fr;height:100dvh;display:grid;overflow:hidden}.toolbar{border-bottom:1px solid var(--line);z-index:5;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#ffffffeb;justify-content:space-between;align-items:center;gap:18px;min-height:72px;padding:12px 18px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:12px;min-width:260px;display:flex}.brand-mark{color:#fff;background:linear-gradient(135deg, var(--accent), var(--mint));border-radius:8px;flex:none;place-items:center;width:42px;height:42px;display:grid;box-shadow:0 8px 20px #1570ef38}.brand-mark svg{width:25px;height:25px}h1,h2,p{margin:0}h1{font-size:18px;font-weight:760;line-height:1.15}.brand p,.meta-strip,.range-row output,.select-row label{color:var(--muted);font-size:12px}.actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.site-links{align-items:center;gap:10px;margin-left:auto;font-size:12px;font-weight:760;display:flex}.site-links a{color:var(--muted);text-decoration:none}.site-links a:hover{color:var(--accent-strong)}#fileInput{opacity:0;pointer-events:none;block-size:1px;inline-size:1px;position:absolute}.command,.tool-button{border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;border-radius:8px;transition:transform .12s,border-color .12s,background .12s,color .12s,box-shadow .12s}.command{justify-content:center;align-items:center;gap:8px;min-height:40px;padding:0 13px;font-weight:700;display:inline-flex}.command svg,.tool-button svg{width:18px;height:18px}.command.primary{background:var(--accent);color:#fff;border-color:#0000;box-shadow:0 10px 20px #1570ef33}.command:hover:not(:disabled),.tool-button:hover:not(:disabled){border-color:#a8b2c2;transform:translateY(-1px);box-shadow:0 7px 18px #1c24301a}.command.primary:hover{background:var(--accent-strong)}:is(button,input,select,a,label.command):focus-visible{outline-offset:2px;outline:3px solid #1570ef61}label.command:has(+#fileInput:focus-visible){outline-offset:2px;outline:3px solid #1570ef61}label.command:has(+#fileInput:disabled){cursor:not-allowed;opacity:.48}button:disabled{cursor:not-allowed;opacity:.48}.workspace{grid-template-columns:minmax(250px,320px) minmax(360px,1fr);gap:14px;min-height:0;padding:14px;display:grid}.panel,.stage-panel{min-width:0}.panel{background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 30px #1c24300f}.controls{overscroll-behavior:contain;align-self:stretch;min-height:0;display:grid;overflow-y:auto}.panel-block{border-bottom:1px solid var(--line);padding:16px}.panel-block:last-child{border-bottom:0}h2{margin-bottom:11px;font-size:13px;font-weight:780}.segmented{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;display:grid}.segmented button{border:1px solid var(--line);color:#344054;cursor:pointer;background:#f9fafc;border-radius:7px;min-height:34px;font-size:12px;font-weight:700}.segmented button.selected{color:var(--accent-strong);background:#eaf2ff;border-color:#93b7ff}.range-row{color:#303a47;grid-template-columns:1fr auto;align-items:center;gap:8px;margin-top:13px;font-size:13px;display:grid}.range-row:first-of-type{margin-top:0}.range-row input{width:100%;accent-color:var(--accent);grid-column:1/-1}.range-row input:disabled{opacity:.42;cursor:not-allowed}.tool-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;display:grid}.tool-button{justify-content:center;align-items:center;gap:6px;min-height:38px;padding:0 7px;font-size:12px;font-weight:750;display:inline-flex}.tool-button.active,.command.active{color:var(--accent-strong);background:#eaf2ff;border-color:#93b7ff}.select-row{gap:6px;margin-top:12px;display:grid}.color-row{color:#303a47;justify-content:space-between;align-items:center;gap:10px;min-height:38px;margin-top:12px;font-size:13px;display:flex}.color-row input{border:1px solid var(--line);cursor:pointer;background:#fbfcfe;border-radius:7px;width:48px;height:32px;padding:0}.select-row select{border:1px solid var(--line);width:100%;min-height:36px;color:var(--ink);background:#fbfcfe;border-radius:7px;padding:0 10px}.sample-row{flex-wrap:wrap;gap:6px;min-height:20px;margin-top:10px;display:flex}.sample-chip{border:2px solid #fff;border-radius:999px;width:22px;height:22px;box-shadow:0 0 0 1px #1c24302e}.cover-command{width:100%;margin-top:12px}.mode-note{color:#667085;min-height:24px;margin-top:10px;font-size:12px;font-weight:700}.stage-panel{grid-template-rows:minmax(360px,1fr) auto;gap:9px;min-height:0;display:grid}.stage{border:1px solid var(--line);background:linear-gradient(45deg, #0000000d 25%, transparent 25%), linear-gradient(-45deg, #0000000d 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #0000000d 75%), linear-gradient(-45deg, transparent 75%, #0000000d 75%), var(--stage);min-height:360px;box-shadow:var(--shadow);background-position:0 0,0 12px,12px -12px,-12px 0;background-size:24px 24px;border-radius:8px;place-items:center;display:grid;position:relative;overflow:hidden}.stage.dragging{outline-offset:-7px;outline:3px solid #1570ef57}.stage.brushing canvas{cursor:crosshair}.stage.eyedropper canvas{cursor:copy}.stage.circle-edit canvas{cursor:crosshair}.loading-overlay{z-index:4;color:#27364a;text-align:center;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:all;background:#f7f9fcc7;place-content:center;justify-items:center;gap:12px;padding:24px;font-size:13px;font-weight:760;display:grid;position:absolute;inset:0}.loading-overlay[hidden]{display:none}.loading-spinner{border:4px solid #1570ef2e;border-top-color:var(--accent);border-radius:50%;width:34px;height:34px;animation:.78s linear infinite loading-spin}@keyframes loading-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.loading-spinner{animation-duration:1.8s}}#mainCanvas{image-rendering:auto;width:auto;max-width:100%;height:auto;max-height:100%}.empty-state{color:#536174;pointer-events:none;place-content:center;justify-items:center;gap:10px;font-weight:760;display:grid;position:absolute;inset:0}.empty-state svg{width:42px;height:42px}.empty-state.hidden{display:none}.meta-strip{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;min-height:28px;padding:0 4px;display:flex}.meta-button{border:1px solid var(--line);color:#667085;cursor:pointer;white-space:nowrap;background:#fbfcfe;border-radius:7px;min-height:26px;padding:0 9px;font-size:11px;font-weight:760}.meta-button:hover:not(:disabled){color:#303a47;border-color:#a8b2c2}@media (width<=1050px){.workspace{grid-template-columns:minmax(220px,300px) minmax(360px,1fr)}}@media (width<=760px){#root{height:auto}.app-shell{height:auto;min-height:100dvh;overflow:visible}.toolbar{flex-direction:column;align-items:stretch;position:static}.brand{min-width:0}.actions{justify-content:stretch}.site-links{margin-left:0}.command{flex:140px}.workspace{grid-template-columns:1fr;padding:10px}.controls{overflow:visible}.stage-panel{order:-1}.stage{min-height:330px}}@media (width<=440px){.tool-grid{grid-template-columns:1fr}.meta-strip{flex-direction:column;align-items:flex-start;gap:3px}}