:root {
  color-scheme: dark;
  --background: #101416;
  --surface: #191e21;
  --surface-raised: #22282c;
  --border: #323a3f;
  --text: #edf2f2;
  --muted: #a4b0b4;
  --accent: #4cddc4;
  --accent-dark: #092d29;
  font-family: "Meiryo", "メイリオ", sans-serif;
  font-size: 14px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--background); color: var(--text); line-height: 1.6; }
button, input, select { font: inherit; }
button { cursor: pointer; font-size: 14px; }
button:disabled { cursor: not-allowed; opacity: .42; }
button, input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
button, select { transition: background-color .15s, border-color .15s; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
.icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.visually-hidden, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; z-index: 10; left: 20px; top: 12px; padding: 10px 18px; background: var(--accent); color: var(--accent-dark); }
.app-header { min-height: 92px; padding: 20px 38px; border-bottom: 1px solid #293034; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 42px; height: 42px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 8px; background: var(--accent); border-radius: 10px; }
.brand-mark i { background: #133530; border-radius: 1px; }
.brand-mark i:last-child { opacity: .55; }
.brand h1 { font-size: 19px; font-weight: 700; letter-spacing: .05em; }
.brand p { font-size: 11px; color: var(--muted); margin-top: 2px; }
.header-actions { display: flex; align-items: center; gap: 24px; }
.privacy-badge { font-size: 12px; display: flex; align-items: center; gap: 7px; color: #b6c9c4; }
.privacy-badge .icon { width: 17px; height: 17px; color: var(--accent); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 42px; border: 1px solid var(--border); border-radius: 7px; padding: 9px 17px; font-weight: 600; color: var(--text); background: var(--surface-raised); }
.button:not(:disabled):hover { background: #2d363b; border-color: #52646a; }
.button-open { background: #253a36; border-color: #41635a; color: #c6f4e7; }
.app-main { max-width: 1660px; margin: 0 auto; padding: 28px 38px 24px; }
.workspace-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 23px; gap: 16px; }
.section-kicker { font-size: .857142857rem; letter-spacing: .13em; color: var(--accent); display: block; margin-bottom: 5px; }
.workspace-heading h2 { font-size: 20px; font-weight: 600; }
.workspace-heading > p { color: var(--muted); font-size: .857142857rem; }
.workspace-heading > p span { padding: 0 9px; color: #617274; }
.editor-layout { display: grid; grid-template-columns: minmax(0, 1fr) 316px; align-items: start; gap: 24px; }
.workspace { min-width: 0; }
.workspace-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 54px; padding: 12px 17px; border: 1px solid var(--border); border-bottom: 0; border-radius: 9px 9px 0 0; background: var(--surface); }
.file-information { display: flex; align-items: center; gap: 9px; min-width: 0; color: #c8d1d4; font-size: 12px; }
.file-information .icon { width: 17px; height: 17px; color: #94a6aa; }
#file-name { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.image-dimensions { color: var(--muted); font-size: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stage { position: relative; min-height: 480px; display: flex; align-items: center; justify-content: center; padding: 30px; border: 1px solid var(--border); background-color: #111618; background-image: linear-gradient(45deg, #161c1f 25%, transparent 25%), linear-gradient(-45deg, #161c1f 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #161c1f 75%), linear-gradient(-45deg, transparent 75%, #161c1f 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; }
.stage.drag-over { outline: 2px dashed var(--accent); outline-offset: -9px; background-color: #173c34; }
.stage { touch-action: none; }
.empty-state { text-align: center; padding: 48px 20px; }
.empty-icon { width: 82px; height: 82px; position: relative; border: 1px solid #42534e; border-radius: 19px; margin: 0 auto 24px; display: flex; justify-content: center; align-items: center; background: #202d28; color: #b8d7cc; box-shadow: 0 12px 24px #0003; transform: rotate(-5deg); }
.empty-icon > .icon { width: 37px; height: 37px; stroke-width: 1.3; }
.empty-icon > span { position: absolute; bottom: -5px; right: -5px; border-radius: 8px; background: var(--accent); color: #10392f; line-height: 30px; width: 30px; height: 30px; font-size: 20px; border: 3px solid #18211d; }
.empty-state h3 { font-size: 18px; font-weight: 600; margin-bottom: 9px; }
.empty-state p { color: var(--muted); font-size: 12px; }
.empty-state .button { margin-top: 24px; padding: 10px 24px; min-height: 44px; }
.supported-formats { display: block; color: #93a3a6; font-size: 10px; margin-top: 20px; }
.image-view { position: relative; display: inline-block; max-width: 100%; line-height: 0; box-shadow: 0 8px 30px #0004; }
#image-canvas { display: block; max-width: 100%; max-height: 680px; width: auto; height: auto; }
#overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; touch-action: none; -webkit-user-select: none; user-select: none; }
.region-shape { fill: #4cddc40b; stroke: #eef6f6aa; stroke-width: 1.2; vector-effect: non-scaling-stroke; cursor: move; }
.region-selected .region-shape { stroke: var(--accent); stroke-width: 2; fill: #4cddc416; }
.resize-handle { fill: #edfdf8; stroke: #13483d; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.resize-handle[data-corner="nw"], .resize-handle[data-corner="se"] { cursor: nwse-resize; }
.resize-handle[data-corner="ne"], .resize-handle[data-corner="sw"] { cursor: nesw-resize; }
.workspace-footer { min-height: 44px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 9px 9px; background: var(--surface); display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 17px; font-size: .857142857rem; color: var(--muted); }
.selection-legend { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.selection-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.notice { display: flex; align-items: flex-start; gap: 8px; padding: 14px 0; color: #a9bcb6; font-size: 11px; min-height: 48px; }
.notice .icon { width: 15px; height: 15px; margin-top: 2px; color: var(--accent); }
.notice[data-kind="error"] { color: #ffc6bd; }
.notice[data-kind="error"] .icon { color: #ff9b89; }
.editor-tips { display: flex; flex-wrap: wrap; gap: 9px 25px; font-size: .857142857rem; color: #a3b0b4; }
.editor-tips span { display: inline-block; border: 1px solid #3b454a; border-radius: 4px; padding: 1px 7px; color: #c0cdd0; margin-right: 8px; }
.settings { border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: var(--surface); }
.settings-section { padding: 20px; border-bottom: 1px solid #30383d; }
.settings-section:last-child { border-bottom: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.section-heading h3 { font-size: 1rem; font-weight: 600; }
.section-heading > span { color: var(--muted); font-size: .857142857rem; }
.add-section .section-heading > span { font-size: 1rem; }
.shape-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shape-button { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; background: #232a2d; border: 1px solid #404b50; border-radius: 6px; color: #e1eaea; }
.shape-button:not(:disabled):hover { border-color: #83bcaf; background: #2a3633; }
.shape-button .icon { width: 19px; height: 19px; }
.shape-button > span { font-size: 12px; color: #a1b2b3; }
.shape-note { margin-top: 10px; color: var(--muted); font-size: .857142857rem; line-height: 1.7; }
.delete-button { background: none; color: #bac6c9; font-size: 1.071428571rem; border: 0; display: flex; align-items: center; gap: 5px; padding: 2px 0 2px 5px; }
.delete-button .icon { width: 14px; height: 14px; }
.delete-button:not(:disabled):hover { color: #ffb6a7; }
.selection-prompt { font-size: .857142857rem; color: var(--muted); margin: -2px 0 15px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset:disabled { opacity: .5; }
.field-group { margin-bottom: 15px; }
.field-group-label { display: flex; justify-content: space-between; color: #d3dedf; font-size: 11px; margin-bottom: 8px; }
.field-group-label > span { color: #a4b3b7; font-size: 10px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { position: relative; min-width: 0; }
.field label { display: block; font-size: 10px; color: #aebdc0; margin-bottom: 4px; }
.field input { width: 100%; border: 1px solid #465359; border-radius: 5px; background: #101719; color: #e2eded; padding: 9px 10px; height: 39px; font-size: 14px; font-variant-numeric: tabular-nums; }
.field input[aria-invalid="true"] { border-color: #ff9e8c; }
.form-error { font-size: 10px; color: #ffbaa9; margin: -5px 0 14px; }
.strength-fieldset legend { display: flex; justify-content: space-between; width: 100%; font-size: 11px; margin-bottom: 10px; }
.strength-fieldset legend > span { font-size: 10px; color: var(--accent); }
.strength-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; position: relative; }
.strength-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.strength-options label { display: flex; justify-content: center; align-items: center; height: 36px; border: 1px solid #404b50; border-radius: 5px; background: #232b2e; color: #b9c9cb; cursor: pointer; font-size: 12px; }
.strength-options input:checked + label { background: #214b40; color: #a2f5dc; border-color: #6cb9a1; }
.strength-options input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 3px; }
.strength-scale { display: flex; justify-content: space-between; color: #9cabad; font-size: .785714286rem; margin-top: 6px; }
.count-badge { min-width: 22px; height: 20px; text-align: center; border: 1px solid #445057; border-radius: 4px; }
.region-list { max-height: 174px; overflow-y: auto; display: grid; gap: 6px; padding: 3px; margin: -3px; }
.list-empty { text-align: center; padding: 15px 4px; color: #a5b3b7; font-size: .857142857rem; border: 1px dashed #485259; border-radius: 5px; }
.region-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; width: 100%; text-align: left; color: #c3d0d3; border: 1px solid transparent; border-radius: 5px; background: #222a2e; font-size: 1.071428571rem; }
.region-item .icon { width: 16px; height: 16px; }
.region-item > span:last-child { margin-left: auto; font-size: .857142857rem; color: #a8b8bb; }
.region-item[aria-pressed="true"] { border-color: #588e80; background: #223b33; color: #c9f4e6; }
.region-item:not(:disabled):hover { background: #2d3d38; }
.output-section { background: #1d2526; }
.button-primary { width: 100%; min-height: 47px; color: #0b3029; border-color: #73d7bd; background: #81e3c7; box-shadow: 0 4px 14px #0003; }
.button-primary:not(:disabled):hover { background: #a3f5db; border-color: #a3f5db; }
.mosaic-symbol { font-size: 25px; font-family: sans-serif; line-height: 1; }
.output-status { font-size: .857142857rem; line-height: 1.75; white-space: pre-line; text-align: center; color: #b1c2c1; margin: 10px 0 18px; }
.save-row { display: grid; grid-template-columns: 77px 1fr; gap: 8px; }
.format-field select { width: 100%; height: 41px; background: #121b1d; color: #d6e4e5; border: 1px solid #46575a; border-radius: 6px; padding: 7px; font-size: 12px; }
.button-save { min-height: 41px; padding: 8px 10px; background: #2b373a; }
.button-save .icon { width: 17px; height: 17px; }
progress { accent-color: var(--accent); width: 100%; height: 5px; margin-top: 12px; display: block; }
.app-footer { display: flex; justify-content: flex-end; gap: 16px; padding: 18px 38px 22px; border-top: 1px solid #283034; font-size: 10px; color: #9ba9ad; }
@media (min-width: 1450px) { .stage { min-height: 570px; } }
@media (max-width: 1100px) { .app-main { padding: 24px; } .app-header { padding: 18px 24px; } .editor-layout { gap: 18px; grid-template-columns: minmax(0, 1fr) 294px; } .stage { padding: 20px; min-height: 400px; } .settings-section { padding: 18px; } .workspace-heading > p { display: none; } }
@media (max-width: 760px) { .app-header { padding: 16px; gap: 12px; } .brand h1 { font-size: 17px; } .brand p, .privacy-badge { display: none; } .brand-mark { width: 36px; height: 36px; } .header-actions { gap: 0; } .button-open { padding: 8px 11px; min-height: 39px; } .app-main { padding: 22px 16px; } .workspace-heading { margin-bottom: 17px; } .workspace-heading h2 { font-size: 17px; } .editor-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; } .stage { min-height: 310px; padding: 16px; } .empty-state { padding: 28px 0; } .empty-state h3 { font-size: 16px; } .empty-state p { font-size: 11px; } .workspace-toolbar { padding: 10px 12px; } .image-dimensions { font-size: 9px; } .file-information { font-size: 10px; gap: 6px; } .workspace-footer { padding: 10px 12px; flex-wrap: wrap; } .settings-section { padding: 19px; } .field input { font-size: 16px; } .app-footer { padding: 15px 16px; flex-direction: column; gap: 5px; } .editor-tips { gap: 8px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }