:root {
  color-scheme: light;
  --paper: #fafafa;
  --ink: #222321;
  --muted: #696b65;
  --line: #d9dad5;
  --coral: #c33b1e;
  --soft: #f0f0ed;
  --gutter: clamp(1.25rem, 4.4vw, 5rem);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 1.5rem; }
body { margin: 0; }
button, input, output, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
svg { display: block; flex-shrink: 0; }
button, a, input, summary, select { touch-action: manipulation; }
:is(button, a, input, summary, select):focus-visible { outline: 2px solid var(--coral); outline-offset: 5px; }
button:disabled, input:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
::selection { color: #fff; background: var(--coral); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -6rem; z-index: 10; padding: 1rem; background: #fff; }
.skip-link:focus { top: 1rem; }
.page-frame { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
.site-header { max-width: 1536px; min-height: 86px; margin-inline: auto; padding: 1.2rem var(--gutter); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .8rem; font-size: 1.1rem; font-weight: 800; letter-spacing: -.055em; white-space: nowrap; }
.brand-mark { border: 1.5px solid currentColor; padding: .5rem .35rem; font-size: 1rem; letter-spacing: -.11em; }
.header-nav { display: flex; align-items: center; gap: 1.8rem; font-size: .8125rem; }
.header-nav span { color: var(--coral); padding-left: .2rem; }
.header-nav a:hover, .site-footer a:hover { color: var(--coral); }
.intro { padding-block: 1.6rem 2.1rem; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.65rem; color: var(--muted); font-size: .6875rem; line-height: 1.5; }
.breadcrumbs a:hover { color: var(--coral); }
.kicker { display: flex; align-items: center; gap: .6rem; font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; font-size: .625rem; letter-spacing: .1em; line-height: 1.5; }
.kicker > span { width: 6px; height: 6px; background: var(--coral); border-radius: 50%; }
.intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) 225px; align-items: center; gap: 2rem; }
h1 { margin-top: .8rem; font-size: clamp(2.35rem, 4.4vw, 4.1rem); line-height: 1.03; font-weight: 500; letter-spacing: -.065em; }
h1 > span { color: var(--coral); }
.lead { margin-top: 1.05rem; color: var(--muted); font-size: .9375rem; line-height: 1.65; letter-spacing: -.01em; }
.editorial-art { position: relative; width: 225px; height: 180px; }
.art-before, .art-after { position: absolute; overflow: hidden; width: 122px; height: 145px; }
.art-before { left: 0; top: 0; background: #e9e6de; transform: rotate(-7deg); }
.art-circle { position: absolute; width: 94px; height: 94px; background: #d1cfbc; border-radius: 50%; top: -10px; left: -25px; }
.art-vase { position: absolute; bottom: 20px; left: 37px; width: 50px; height: 85px; background: var(--coral); border-radius: 20px 20px 13px 13px; transform: rotate(4deg); }
.art-vase::before { content: ""; position: absolute; width: 28px; height: 16px; background: var(--coral); top: -10px; left: 11px; }
.art-vase::after { content: ""; position: absolute; width: 13px; height: 52px; border: 2px solid #e87d5e; border-right: 0; border-radius: 50%; top: 18px; left: 8px; }
.art-after { top: 20px; right: 0; border: 1px solid #d5d6d0; background-color: #fff; background-image: linear-gradient(45deg, #e9eae5 25%, transparent 25%), linear-gradient(-45deg, #e9eae5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e9eae5 75%), linear-gradient(-45deg, transparent 75%, #e9eae5 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.art-after .art-vase { transform: none; }
.art-corner { position: absolute; width: 9px; height: 9px; border: 1.5px solid var(--coral); }
.corner-one { top: 16px; left: 22px; border-right: 0; border-bottom: 0; }
.corner-two { bottom: 12px; right: 22px; border-left: 0; border-top: 0; }
.art-arrow { position: absolute; top: 0; right: 21px; color: var(--coral); font-size: 1.5rem; }
.art-caption { position: absolute; bottom: 0; left: 4px; font-family: "SFMono-Regular", Consolas, monospace; font-size: .5rem; letter-spacing: .11em; color: var(--muted); }
.drop-zone { position: relative; display: flex; align-items: center; gap: 1.5rem; min-height: 164px; padding: 1.9rem 2rem; border: 1px dashed #adb0a6; background: #fff; transition: background 160ms ease, border-color 160ms ease; }
.drop-zone::before, .drop-zone::after { content: ""; position: absolute; width: 9px; height: 9px; border-color: var(--coral); border-style: solid; pointer-events: none; }
.drop-zone::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.drop-zone::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.drop-zone.dragging, .drop-zone.is-dragging, .drop-zone.drag-over, .drop-zone[data-dragging="true"] { background: #fcf0eb; border-color: var(--coral); }
.drop-zone:focus-within { border-color: var(--coral); }
.upload-symbol { flex: 0 0 42px; width: 42px; color: var(--coral); }
.upload-symbol svg { width: 42px; height: 42px; }
.drop-copy { min-width: 0; flex: 1; }
.drop-copy h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.2; }
.drop-copy > p { margin-top: .5rem; color: var(--muted); font-size: .75rem; line-height: 1.65; }
.drop-copy .heic-note { font-size: .6875rem; margin-top: .4rem; }
.heic-note a { text-decoration: underline; text-decoration-color: #c3c4bd; text-underline-offset: .2em; }
.heic-note a:hover { color: var(--coral); }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 1.5rem; min-height: 46px; padding: .8rem 1.2rem; border: 1px solid transparent; border-radius: 0; font-size: .8125rem; line-height: 1.3; font-weight: 550; transition: background 160ms ease, color 160ms ease, border-color 160ms ease; white-space: nowrap; }
.button span { font-size: 1.125rem; font-weight: 400; }
.button-dark { color: #fff; background: var(--ink); }
.button-dark:hover:not(:disabled) { background: #45463f; }
.button-primary { color: #fff; background: var(--coral); }
.button-primary:hover:not(:disabled) { background: #a93016; }
.button-quiet { color: var(--muted); background: transparent; border-color: var(--line); }
.button-quiet:hover:not(:disabled) { color: var(--ink); border-color: var(--ink); }
.button:disabled { color: #777970; background: #e7e8e2; border-color: transparent; }
.action-bar { display: flex; justify-content: space-between; align-items: center; gap: 1.25rem; padding-top: 1.15rem; }
.action-buttons { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: .7rem; }
.privacy-note { display: flex; align-items: center; gap: .55rem; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.privacy-note svg { width: 15px; height: 17px; }
.status-area { margin-top: .95rem; }
.status { min-height: 1.5em; color: var(--muted); font-size: .8125rem; line-height: 1.65; overflow-wrap: anywhere; }
.status:empty { display: none; }
.error-text, .status.error, .status.error-text { color: #a12d1b; }
.error-text { margin-top: .45rem; font-size: .8125rem; line-height: 1.6; overflow-wrap: anywhere; }
progress { display: block; width: 100%; height: 4px; margin-top: .7rem; border: 0; appearance: none; background: var(--soft); accent-color: var(--coral); }
progress::-webkit-progress-bar { background: var(--soft); }
progress::-webkit-progress-value { background: var(--coral); }
progress::-moz-progress-bar { background: var(--coral); }
.first-use-note { margin-top: .3rem; color: var(--muted); font-size: .6875rem; line-height: 1.6; }
.workspace { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.workspace-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; }
.workspace-heading h2 { font-size: 1.6rem; font-weight: 500; letter-spacing: -.045em; }
.file-info { color: var(--muted); font-size: .75rem; line-height: 1.6; overflow-wrap: anywhere; text-align: right; }
.preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.preview-panel { min-width: 0; border: 1px solid var(--line); background: #fff; }
.preview-heading { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.preview-heading h3 { font-size: .8125rem; font-weight: 550; }
.preview-heading > span { font-family: "SFMono-Regular", Consolas, monospace; color: var(--muted); font-size: .55rem; letter-spacing: .06em; }
.preview-stage { position: relative; display: flex; justify-content: center; align-items: center; min-height: 280px; padding: 1rem; background: #f2f2ef; }
#original-preview, #result-canvas { display: block; width: 100%; height: auto; max-height: 600px; object-fit: contain; }
.checkerboard, #result-canvas { background-color: #fff; background-image: linear-gradient(45deg, #e6e7e2 25%, transparent 25%), linear-gradient(-45deg, #e6e7e2 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e6e7e2 75%), linear-gradient(-45deg, transparent 75%, #e6e7e2 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
#result-canvas[data-background="white"], .result-stage[data-background="white"] #result-canvas, #result-canvas.preview-white { background: #fff; }
#result-canvas[data-background="dark"], .result-stage[data-background="dark"] #result-canvas, #result-canvas.preview-dark { background: #252622; }
.result-placeholder { display: grid; justify-items: center; gap: .7rem; padding: 2rem 1rem; color: var(--muted); text-align: center; font-size: .8125rem; line-height: 1.5; }
.result-placeholder > span { color: #a8aaa1; font-size: 2rem; font-weight: 300; }
.result-controls { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(190px, .8fr) auto; align-items: start; gap: 1.7rem; margin-top: 1.4rem; }
.control-label { display: flex; justify-content: space-between; gap: 1rem; font-size: .8125rem; margin-bottom: .5rem; }
.control-label label, .background-control label { font-weight: 550; }
.control-label output { color: var(--coral); font-family: "SFMono-Regular", Consolas, monospace; font-size: .75rem; }
#edge-cleanup { display: block; width: 100%; height: 20px; margin: 0; accent-color: var(--coral); cursor: pointer; }
#edge-cleanup:disabled { opacity: .5; cursor: not-allowed; }
.control-note { margin-top: .45rem; color: var(--muted); font-size: .6875rem; line-height: 1.5; }
.background-control label { display: block; margin-bottom: .5rem; font-size: .8125rem; }
.background-control select { width: 100%; min-height: 35px; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 0; color: var(--ink); background: #fff; font-size: .75rem; }
.download-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .65rem; padding-top: 1.3rem; }
.workspace-note { margin-top: 1.1rem; color: var(--muted); font-size: .6875rem; line-height: 1.6; }
.steps-section { margin-top: 2.5rem; padding-block: 1.8rem 2.6rem; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding: 0; margin: 0; list-style: none; }
.steps li { display: flex; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.step-number { padding-top: .15rem; color: var(--coral); font-family: "SFMono-Regular", Consolas, monospace; font-size: .625rem; }
.steps h2 { font-size: .875rem; font-weight: 550; line-height: 1.4; letter-spacing: -.025em; }
.steps p { margin-top: .45rem; color: var(--muted); font-size: .75rem; line-height: 1.75; }
.details-section { display: grid; grid-template-columns: 1fr 2fr; gap: 3rem; padding-block: 1.2rem 3.5rem; }
.details-intro { padding-top: 1rem; }
.details-intro h2 { margin-top: .8rem; font-size: 1.9rem; font-weight: 500; letter-spacing: -.055em; }
.details-list { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.1rem 0; font-size: .8125rem; line-height: 1.5; font-weight: 500; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary > span { color: var(--coral); font-size: 1.2rem; font-weight: 400; }
details[open] summary > span { transform: rotate(45deg); }
details p { padding: 0 1.5rem 1.2rem 0; color: var(--muted); font-size: .8125rem; line-height: 1.8; }
details p a { color: var(--ink); text-decoration: underline; text-decoration-color: #c3c4bd; text-underline-offset: .2em; }
details p a:hover { color: var(--coral); }
.site-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 2rem; border-top: 1px solid var(--line); padding-block: 1.8rem; color: var(--muted); font-size: .6875rem; line-height: 1.6; }
.footer-brand { color: var(--ink); font-size: .8125rem; font-weight: 800; letter-spacing: -.04em; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-left: auto; }
.legal-page { padding-block: 2rem 4rem; }
.legal-page h1 { margin-top: 1rem; font-size: clamp(2.4rem, 6vw, 4.5rem); }
.legal-intro { max-width: 65ch; margin-top: 1.5rem; color: var(--muted); font-size: .9375rem; line-height: 1.8; }
.license-section { max-width: 52rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.license-section h2 { font-size: 1.5rem; font-weight: 500; letter-spacing: -.04em; line-height: 1.3; }
.license-section p, .license-section ul { margin-top: 1rem; color: var(--muted); font-size: .9375rem; line-height: 1.8; }
.license-section ul { padding-left: 1.25rem; }
.license-section li + li { margin-top: .4rem; }
.license-section a { color: var(--ink); text-decoration: underline; text-decoration-color: #c3c4bd; text-underline-offset: .2em; overflow-wrap: anywhere; }
.license-section a:hover { color: var(--coral); }
@media (max-width: 1000px) {
  .intro-grid { grid-template-columns: minmax(0, 1fr) 180px; gap: 1rem; }
  .editorial-art { transform: scale(.8); transform-origin: right center; margin-left: -45px; }
  .drop-zone { padding: 1.5rem; gap: 1.1rem; }
  .result-controls { grid-template-columns: 1fr 1fr; }
  .download-actions { grid-column: 1 / -1; padding-top: 0; justify-content: flex-start; }
  .details-section { grid-template-columns: 1fr 2.3fr; gap: 2rem; }
}
@media (max-width: 720px) {
  .site-header { min-height: 75px; padding-block: 1rem; }
  .brand { font-size: .9375rem; gap: .5rem; }
  .brand-mark { padding: .4rem .3rem; font-size: .8rem; }
  .header-nav { font-size: .6875rem; gap: 1rem; }
  .intro { padding-block: 1.25rem 1.6rem; }
  .breadcrumbs { margin-bottom: 1.3rem; font-size: .625rem; }
  .intro-grid { grid-template-columns: minmax(0, 1fr); }
  .editorial-art { display: none; }
  h1 { font-size: clamp(2.2rem, 7.8vw, 3.5rem); }
  .lead { font-size: .8125rem; margin-top: .85rem; }
  .drop-zone { flex-wrap: wrap; min-height: 0; padding: 1.3rem; gap: 1rem; }
  .upload-symbol { flex-basis: 33px; width: 33px; }
  .upload-symbol svg { width: 33px; height: 33px; }
  .drop-copy { flex-basis: calc(100% - 49px); }
  .drop-copy h2 { font-size: 1.35rem; }
  #choose-file { width: 100%; }
  .action-bar { align-items: stretch; flex-direction: column-reverse; gap: .8rem; }
  .action-buttons { flex-wrap: nowrap; }
  #remove { flex: 1; }
  .privacy-note { font-size: .6875rem; }
  .status-area { margin-top: .65rem; }
  .workspace-heading { flex-direction: column; gap: .55rem; }
  .file-info { text-align: left; }
  .preview-grid { gap: .65rem; }
  .preview-heading { padding: .7rem; }
  .preview-heading > span { display: none; }
  .preview-stage { min-height: 190px; padding: .5rem; }
  .result-placeholder { padding: 1rem .4rem; font-size: .7rem; }
  .result-controls { gap: 1.2rem; }
  .steps-section { margin-top: 1.7rem; padding-block: 1.4rem 1.7rem; }
  .steps { grid-template-columns: 1fr; gap: 1rem; }
  .steps li { gap: .9rem; }
  .steps p { margin-top: .25rem; }
  .details-section { grid-template-columns: 1fr; gap: 1.4rem; padding-block: .75rem 2.5rem; }
  .details-intro { padding-top: 0; }
  .details-intro h2 { font-size: 1.7rem; margin-top: .6rem; }
  .site-footer { gap: .8rem 1.5rem; }
  .site-footer nav { width: 100%; margin-left: 0; }
}
@media (max-width: 390px) {
  .header-nav > a:first-child { display: none; }
  h1 { font-size: 8.1vw; }
  .drop-zone { padding: 1.2rem 1rem; }
  .drop-copy > p { font-size: .6875rem; }
  .upload-symbol { display: none; }
  .preview-grid { grid-template-columns: 1fr; }
  .result-controls { grid-template-columns: 1fr; }
  .button { padding-inline: .9rem; gap: 1rem; }
  details p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}
/* Photo selection workspace. */
.intro h1 {font-size:clamp(2.5rem,5vw,4.5rem)}
.editor-toolbar {display:flex;flex-wrap:wrap;align-items:end;gap:1rem;padding:1rem 0}
.field {display:flex;flex-direction:column;gap:.5rem;min-width:160px;font-size:.8125rem}
.field label {font-weight:550}.field select{border:1px solid var(--line);border-radius:0;min-height:44px;padding:.6rem;background:#fff;color:var(--ink);font-size:.8125rem}
.brush-field{flex:1;min-width:190px;max-width:300px}.brush-field label{display:flex;justify-content:space-between}.brush-field input{width:100%;height:32px;margin:0;accent-color:var(--coral)}.brush-field output{color:var(--coral);font-size:.75rem;font-weight:400}
.drawing-help{margin:.2rem 0 1rem;line-height:1.7}.canvas-shell{background:#e9e9e4;border:1px solid var(--line);padding:1rem;display:flex;align-items:center;justify-content:center;min-height:220px}
#editor{display:block;width:auto;height:auto;max-width:100%;max-height:70vh;touch-action:none;cursor:crosshair;background-image:conic-gradient(#eee 25%,#fff 0 50%,#eee 0 75%,#fff 0);background-size:20px 20px;outline-offset:4px}
#editor[aria-busy="true"]{cursor:wait}.editor-actions{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-top:1rem}.watermark-controls{grid-template-columns:minmax(0,1fr) 210px auto;border-top:1px solid var(--line);padding-top:1.4rem}.compare-buttons{display:flex;gap:.6rem;flex-wrap:wrap}.watermark-controls .button{min-height:44px}.button[aria-pressed="true"]{background:var(--ink);color:white}#status{min-height:2.5em}.header-nav a[href="/tools/"]{display:inline-flex!important}
@media(max-width:760px){.canvas-shell{padding:.4rem}.editor-toolbar{gap:.7rem}.editor-toolbar>.button{flex:1}.brush-field{max-width:none}.editor-actions{align-items:stretch;flex-direction:column}.editor-actions .button{width:100%}.watermark-controls{grid-template-columns:1fr}.compare-buttons>.button{flex:1}.wide-only{display:none}.site-footer nav{flex-wrap:wrap}#editor{max-height:62vh}}