:root {
  --paper: #f5f4ef;
  --surface: #ffffff;
  --ink: #11110f;
  --muted: #6e6d67;
  --line: #c8c6be;
  --red: #e52b20;
  --soft: #e7e5df;
}

* { box-sizing: border-box; }
html { background: #d9d7d0; color: var(--ink); font-family: Arial, Helvetica, sans-serif; }
body { margin: 0; min-width: 320px; }
button, input, select { color: inherit; font: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
.is-hidden { display: none !important; }

.app-shell {
  width: min(100%, 840px);
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--paper);
  border-inline: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
}

.masthead {
  min-height: 58px;
  padding: 0 16px;
  border-bottom: 1px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  color: inherit;
  font-size: 1.35rem;
  font-weight: 950;
  letter-spacing: -.08em;
  line-height: 1;
  text-decoration: none;
}

.brand span { color: var(--red); font-size: .55rem; margin-left: 4px; vertical-align: top; }
.status, .eyebrow, .format-note, .start-facts, .file-info, .local-badge, .panel-head p, .footer, .export-dock p {
  font-family: "Courier New", monospace;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .045em;
}

.status { margin: 0; display: flex; align-items: center; gap: 7px; }
.status i { width: 7px; height: 7px; background: var(--red); }

.start-screen {
  width: 100%;
  max-width: 620px;
  margin: auto;
  padding: clamp(34px, 8vh, 80px) 18px 38px;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.start-copy { border-top: 2px solid var(--ink); padding-top: 12px; }
.eyebrow { margin: 0; color: var(--red); }
h1 { margin: 24px 0 18px; font-size: clamp(2.65rem, 13vw, 5.4rem); font-weight: 950; letter-spacing: -.075em; line-height: .88; }
h1 em { color: var(--red); font-style: normal; }
.intro { max-width: 31rem; margin: 0 0 32px; font-size: 1rem; line-height: 1.45; text-wrap: pretty; }

.choose-button, #export-button {
  width: 100%;
  min-height: 58px;
  border: 1px solid var(--ink);
  background: var(--red);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  cursor: pointer;
  font-weight: 900;
  letter-spacing: -.025em;
}

.choose-button b, #export-button b { font-size: 1.4rem; }
.choose-button:active, #export-button:active { background: var(--ink); color: var(--surface); transform: translateY(1px); }
#image-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.start-facts { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ink); }
.start-facts span { min-height: 38px; padding: 8px 4px; display: grid; place-items: center; text-align: center; border-right: 1px solid var(--ink); }
.start-facts span:last-child { border: 0; }
.format-note { margin: 12px 0 0; color: var(--muted); line-height: 1.5; }

.editor { min-height: calc(100dvh - 58px); display: flex; flex-direction: column; }
.file-strip {
  min-height: 54px;
  padding: 5px 12px;
  border-bottom: 1px solid var(--ink);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}

.text-button { min-width: 48px; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; font: 700 .72rem "Courier New", monospace; }
.file-info { min-width: 0; }
.file-info p, .file-info span { margin: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-info p { font-size: .73rem; }
.file-info span { margin-top: 3px; color: var(--muted); font-size: .66rem; }
.local-badge { padding: 5px 7px; border: 1px solid var(--red); color: var(--red); }

.preview-wrap {
  min-height: 250px;
  height: clamp(280px, 39dvh, 430px);
  padding: 20px;
  border-bottom: 1px solid var(--ink);
  background: #272724;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}

#canvas-stage { max-width: 100%; max-height: 100%; position: relative; display: inline-block; line-height: 0; }
#preview-canvas { max-width: 100%; max-height: calc(39dvh - 40px); display: block; background: transparent; }
.loading-mark { position: absolute; padding: 10px 12px; background: var(--paper); border: 1px solid var(--ink); font: 700 .72rem "Courier New", monospace; }

#crop-overlay { position: absolute; inset: 0; z-index: 2; touch-action: none; }
#crop-box {
  position: absolute;
  left: 3%;
  top: 3%;
  width: 94%;
  height: 94%;
  border: 2px solid var(--red);
  box-shadow: 0 0 0 9999px rgba(0,0,0,.58);
  cursor: move;
  touch-action: none;
}

.crop-grid { position: absolute; display: block; background: rgba(255,255,255,.55); pointer-events: none; }
.crop-grid-v { top: 0; bottom: 0; width: 1px; }
.crop-grid-h { left: 0; right: 0; height: 1px; }
.crop-grid-v.one { left: 33.333%; } .crop-grid-v.two { left: 66.666%; }
.crop-grid-h.one { top: 33.333%; } .crop-grid-h.two { top: 66.666%; }

.crop-handle {
  position: absolute;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}

.crop-handle::after { content: ""; position: absolute; width: 13px; height: 13px; border-color: var(--red); border-style: solid; }
.crop-handle[data-handle="nw"] { left: -22px; top: -22px; cursor: nwse-resize; }
.crop-handle[data-handle="nw"]::after { right: 7px; bottom: 7px; border-width: 3px 0 0 3px; }
.crop-handle[data-handle="n"] { left: calc(50% - 22px); top: -22px; cursor: ns-resize; }
.crop-handle[data-handle="n"]::after { left: 15px; bottom: 7px; width: 14px; height: 3px; border: 0; background: var(--red); }
.crop-handle[data-handle="ne"] { right: -22px; top: -22px; cursor: nesw-resize; }
.crop-handle[data-handle="ne"]::after { left: 7px; bottom: 7px; border-width: 3px 3px 0 0; }
.crop-handle[data-handle="e"] { right: -22px; top: calc(50% - 22px); cursor: ew-resize; }
.crop-handle[data-handle="e"]::after { left: 7px; top: 15px; width: 3px; height: 14px; border: 0; background: var(--red); }
.crop-handle[data-handle="se"] { right: -22px; bottom: -22px; cursor: nwse-resize; }
.crop-handle[data-handle="se"]::after { left: 7px; top: 7px; border-width: 0 3px 3px 0; }
.crop-handle[data-handle="s"] { left: calc(50% - 22px); bottom: -22px; cursor: ns-resize; }
.crop-handle[data-handle="s"]::after { left: 15px; top: 7px; width: 14px; height: 3px; border: 0; background: var(--red); }
.crop-handle[data-handle="sw"] { left: -22px; bottom: -22px; cursor: nesw-resize; }
.crop-handle[data-handle="sw"]::after { right: 7px; top: 7px; border-width: 0 0 3px 3px; }
.crop-handle[data-handle="w"] { left: -22px; top: calc(50% - 22px); cursor: ew-resize; }
.crop-handle[data-handle="w"]::after { right: 7px; top: 15px; width: 3px; height: 14px; border: 0; background: var(--red); }

.panel { min-height: 156px; border-bottom: 1px solid var(--ink); background: var(--surface); }
.panel-head { min-height: 48px; padding: 9px 14px 8px; border-bottom: 1px solid var(--line); display: flex; align-items: end; justify-content: space-between; gap: 14px; }
.panel-head p { margin: 0; color: var(--red); }
.panel-head h2 { margin: 0; font-size: 1rem; line-height: 1; letter-spacing: -.035em; }
#panel-content { padding: 13px 14px 15px; }
.panel-copy { margin: 0; max-width: 38rem; color: var(--muted); font-size: .9rem; line-height: 1.45; }

.control-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.control { display: grid; gap: 6px; color: var(--muted); font: 700 .68rem "Courier New", monospace; letter-spacing: .025em; }
.control.full { grid-column: 1 / -1; }
.control input, .control select { width: 100%; min-height: 48px; padding: 8px 10px; border: 1px solid var(--ink); background: var(--surface); color: var(--ink); font: 700 .93rem Arial, sans-serif; }
.control input[type="range"] { min-height: 44px; padding: 0; border: 0; accent-color: var(--red); }
.toggle { min-height: 44px; display: flex; align-items: center; gap: 9px; color: var(--muted); font: 700 .7rem "Courier New", monospace; }
.toggle input { width: 20px; height: 20px; accent-color: var(--red); }

.range-head { min-height: 35px; display: flex; align-items: center; justify-content: space-between; font: 700 .72rem "Courier New", monospace; }
.range-head output { color: var(--red); font-family: Arial, sans-serif; font-size: 1.65rem; font-weight: 900; letter-spacing: -.06em; }
.quality-slider { width: 100%; min-height: 46px; margin: 0; accent-color: var(--red); }
.compress-meta { margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; font: 700 .7rem "Courier New", monospace; }
.compress-meta strong { color: var(--red); font-size: .78rem; }

.chip-row { display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.chip-row::-webkit-scrollbar, .tool-grid::-webkit-scrollbar { display: none; }
.chip { min-width: 52px; min-height: 42px; padding: 0 12px; border: 1px solid var(--ink); background: var(--surface); white-space: nowrap; cursor: pointer; font: 700 .72rem "Courier New", monospace; }
.chip.active, .chip:active { background: var(--ink); color: var(--surface); }
.action-row { margin-top: 11px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.panel-action { min-height: 48px; margin: 0; padding: 0 12px; border: 1px solid var(--ink); background: var(--ink); color: var(--surface); cursor: pointer; font-size: .78rem; font-weight: 900; }
.panel-action.secondary { background: var(--surface); color: var(--ink); }
.panel-action:active { background: var(--red); color: var(--ink); transform: translateY(1px); }
.tiny-note { margin: 9px 0 0; color: var(--muted); font: .68rem/1.4 "Courier New", monospace; }
.red { color: var(--red); }

.tool-grid {
  min-height: 70px;
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  display: flex;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.tool {
  min-width: 88px;
  min-height: 70px;
  padding: 8px 7px;
  border: 0;
  border-right: 1px solid var(--line);
  background: var(--paper);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  cursor: pointer;
}

.tool b { height: 21px; font-size: 1.12rem; font-weight: 500; line-height: 1; }
.tool span { display: flex; align-items: center; gap: 4px; font: 700 .66rem "Courier New", monospace; }
.tool small { padding: 1px 3px; border: 1px solid currentColor; font-size: .48rem; }
.tool.active { background: var(--ink); color: var(--surface); }
.tool.active b { color: var(--red); }

.message { margin: 10px 12px; padding: 10px 11px; border: 1px solid var(--red); background: #fff0ed; font: .7rem/1.4 "Courier New", monospace; }
.message.success { border-color: #27753c; background: #edf7ef; }
.export-dock { margin-top: auto; padding: 9px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ink); background: var(--paper); position: sticky; bottom: 0; z-index: 8; }
.export-dock p { margin: 0 0 6px; color: var(--muted); }

.footer { padding: 18px 12px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--ink); text-align: center; line-height: 1.75; }
.footer p { margin: 0; }
.footer a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }

button:focus-visible, label:focus-within, a:focus-visible, input:focus-visible, select:focus-visible, #crop-box:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

@media (min-width: 640px) {
  .masthead { padding-inline: 22px; }
  .editor { padding-inline: 22px; }
  .file-strip, .preview-wrap, .panel, .tool-grid, .export-dock { border-inline: 1px solid var(--ink); }
  .preview-wrap { height: clamp(360px, 48dvh, 520px); }
  #preview-canvas { max-height: calc(48dvh - 40px); }
  .tool { flex: 1; }
  .footer { border-top: 1px solid var(--ink); }
}

@media (prefers-reduced-motion: no-preference) {
  .tool, .chip, .panel-action, .choose-button, #export-button { transition: background-color .14s ease, color .14s ease, transform .14s ease; }
}