body { font-family:'Inter Home','Noto Sans JP Home',sans-serif; }
.gc-intro { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 2px; }
.gc-intro h1 { margin:8px 0; font-size:clamp(1.5rem,3vw,2.2rem); letter-spacing:-.04em; }
.gc-intro p { color:var(--muted); font-size:.9rem; }
.gc-private { color:var(--accent-strong); font-size:.78rem; white-space:nowrap; }
.gc-layout { display:grid; grid-template-columns:minmax(0,1fr) 290px; gap:20px; align-items:start; }
.gc-controls,.gc-preview { padding:22px; min-width:0; border-radius:var(--radius-lg); }
.gc-controls::before,.gc-preview::before { content:none; }
.gc-controls { position:sticky; top:100px; }
.gc-preview h2,.gc-controls h2 { margin:0; font-size:1.05rem; }
.gc-note { color:var(--muted); font-size:.8rem; line-height:1.7; }
.gc-preview-heading,.gc-control-heading { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.gc-controls fieldset { border:0; padding:0; margin:16px 0 0; min-width:0; }
.gc-controls label { display:block; margin:20px 0; font-size:.85rem; }
.gc-controls output { float:right; font-variant-numeric:tabular-nums; color:var(--accent-strong); }
input[type=range] { accent-color:var(--accent); cursor:pointer; }
.gc-controls input[type=range] { width:100%; display:block; margin-top:14px; }
.gc-controls input[type=file] { max-width:100%; font-size:.75rem; margin-top:10px; }
.gc-controls select,.gc-toolbar select,.gc-coordinates input { width:100%; border:1px solid var(--line); border-radius:10px; background:var(--surface-strong); color:var(--text); padding:9px; margin-top:6px; font:inherit; }
.gc-toolbar { display:flex; gap:12px; margin:20px 0 16px; }
.gc-toolbar label { flex:1; min-width:0; font-size:.76rem; color:var(--muted); }
.gc-toolbar select { color:var(--text); }
.gc-viewport { position:relative; overflow:auto; height:clamp(330px,56vh,700px); background:var(--bg); border:1px solid var(--line); border-radius:14px; overscroll-behavior:contain; }
.gc-viewport.is-dropping { outline:3px dashed var(--accent); outline-offset:-5px; }
#stage { position:relative; line-height:0; margin:auto; }
#canvas,#before-canvas,#mask-canvas { display:block; max-width:none; }
#canvas { touch-action:none; }
#before-canvas,#mask-canvas { position:absolute; inset:0; pointer-events:none; }
#roi-box { position:absolute; pointer-events:none; border:2px dashed var(--accent-strong); background:color-mix(in srgb,var(--accent) 15%,transparent); }
#compare-overlay { position:absolute; inset:0; pointer-events:none; }
.gc-before-tag,.gc-after-tag { position:absolute; top:12px; padding:7px 10px; border-radius:8px; background:var(--surface-strong); color:var(--text); line-height:1; font-size:.73rem; box-shadow:var(--shadow); }
.gc-before-tag { left:12px; }.gc-after-tag { right:12px; }
#compare-handle { position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:36px; border:0; background:transparent; padding:0; cursor:ew-resize; pointer-events:auto; touch-action:none; color:var(--text); }
#compare-handle::before { content:''; position:absolute; width:2px; inset:0 auto 0 17px; background:var(--surface-strong); box-shadow:0 0 3px var(--text); }
#compare-handle span { position:absolute; top:50%; left:0; width:36px; height:42px; transform:translateY(-50%); display:grid; place-items:center; border-radius:13px; background:var(--surface-strong); box-shadow:var(--shadow); font-size:20px; }
.gc-compare-controls { display:flex; align-items:center; gap:12px; margin:14px 0 8px; font-size:.75rem; color:var(--muted); }
.gc-compare-controls input { flex:1; min-width:30px; }
#empty { height:100%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; padding:24px; text-align:center; }
.gc-empty-icon { font-size:36px; color:var(--accent); }
#empty h3 { margin:0; font-size:1.12rem; }#empty p { color:var(--muted); font-size:.85rem; }
.gc-file-button { position:relative; overflow:hidden; cursor:pointer; }.gc-file-button input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
.gc-file-button:focus-within { outline:2px solid var(--accent-strong); outline-offset:4px; }
.gc-text-button { color:var(--accent-strong); border:0; background:none; cursor:pointer; padding:7px 2px; font:inherit; font-size:.8rem; text-decoration:underline; text-underline-offset:4px; }
.gc-status-row { display:flex; gap:10px; align-items:center; margin:14px 0; min-height:30px; }
#status { flex:1; font-size:.8rem; line-height:1.7; overflow-wrap:anywhere; }
#busy-indicator { width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:gc-spin .9s linear infinite; flex-shrink:0; }
@keyframes gc-spin { to { transform:rotate(360deg); } }
.gc-downloads { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--line); }
.gc-downloads .button { font-size:.8rem; padding:12px 18px; }
.gc-downloads details { font-size:.76rem; }.gc-downloads details button { display:block; }
summary { cursor:pointer; }.gc-controls details { border-top:1px solid var(--line); margin-top:20px; padding-top:18px; font-size:.83rem; }
.gc-controls .button { width:100%; justify-content:center; font-size:.84rem; }
.gc-presets { display:flex; gap:5px; }.gc-presets button { flex:1; font:inherit; font-size:.77rem; padding:10px 3px; border:1px solid var(--line); border-radius:10px; background:var(--bg-soft); color:var(--muted); cursor:pointer; }
.gc-presets button[aria-pressed=true] { background:var(--accent-strong); color:var(--surface-strong); border-color:var(--accent-strong); }
.gc-coordinates { display:grid; grid-template-columns:1fr 1fr; gap:0 10px; }.gc-coordinates label { margin:5px 0; }.gc-coordinates input { min-width:0; }
.gc-auto-row label { font-size:.79rem; }.gc-auto-row input { accent-color:var(--accent); }
.gc-tip { margin-top:24px; padding:14px; border-radius:12px; background:var(--bg); color:var(--muted); font-size:.78rem; line-height:1.8; }
.gc-brush-tools { display:flex; gap:14px; align-items:center; font-size:.8rem; margin-bottom:12px; }.gc-brush-tools label { display:flex; align-items:center; gap:5px; flex:1; flex-wrap:wrap; }.gc-brush-tools input { width:100%; }
button:disabled { opacity:.45; cursor:not-allowed; }
@media(max-width:850px) { .gc-layout { grid-template-columns:1fr; }.gc-controls { position:static; }.gc-private { display:none; }.gc-controls,.gc-preview { padding:16px; }.gc-intro { padding:8px; }.gc-viewport { height:390px; }.gc-toolbar { gap:8px; }.gc-toolbar label { font-size:.7rem; }.gc-toolbar select { padding:7px 3px; }.gc-downloads { gap:8px; }.gc-downloads .button { flex:1; }.gc-downloads details { width:100%; } }
@media(prefers-reduced-motion:reduce) { #busy-indicator { animation:none; } }
.gc-preview-heading > .button { padding:10px 15px; font-size:.8rem; }
.gc-preview-heading > h2 { margin-right:auto; }
.gc-history { display:flex; gap:18px; margin:12px 0 0; }
.gc-result-state { color:var(--accent-strong); font-size:.8rem; margin-top:10px; }
.gc-result-state:empty { display:none; }
#brush-cursor { position:absolute; border:2px solid var(--surface-strong); outline:1px solid var(--accent-strong); border-radius:50%; transform:translate(-50%,-50%); pointer-events:none; }
.gc-brush-tools { padding:12px; background:var(--bg); border-radius:12px; }
.gc-brush-tools label { flex:1; min-width:0; }
.gc-controls #paint-apply { margin-bottom:18px; }
.gc-work-load { display:block; margin:10px 0; font-size:.8rem; color:var(--accent-strong); }
.gc-work-load input { display:block; margin-top:6px; max-width:100%; font-size:.75rem; }

.gc-tool-art { flex:none; width:64px; height:64px; object-fit:cover; border:1px solid var(--line); border-radius:16px; }
@media(max-width:600px) { .gc-tool-art { width:44px; height:44px; border-radius:12px; } }