/* ---------------------------------------------------------------
   pixel.maintalk.cn — grid-aligned pixel art recovery
   Design notes:
     · zero border-radius, zero box-shadow. hairlines only.
       the subject is a square lattice; rounded corners fight it.
     · accents are literal PICO-8 palette entries.
     · Departure Mono (Helena Zhang, SIL OFL) for anything numeric —
       a pixel font for a pixel tool.
   --------------------------------------------------------------- */

@font-face {
  font-family: "Departure Mono";
  src: url("DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0c0d0f;
  --surface: #101216;
  --surface-2: #15181d;
  --line: #1e222a;
  --line-2: #2c323c;
  --fg: #dcd7cc;
  --fg-dim: #868d99;
  --fg-faint: #575e69;

  /* PICO-8 palette */
  --acc: #ffa300;   /* orange  — primary signal */
  --grid: #29adff;  /* blue    — detected lattice overlay */
  --bad: #ff004d;   /* red     — low confidence / errors */
  --good: #00e436;  /* green   — high confidence */

  --mono: "Departure Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --text: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;

  --u: 8px; /* the module. everything snaps to it. */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acc); text-decoration: none; border-bottom: 1px solid var(--line-2); }
a:hover { border-bottom-color: var(--acc); }

::selection { background: var(--acc); color: #000; }

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 calc(var(--u) * 3);
}

/* ── masthead ─────────────────────────────────────────────── */

.masthead {
  border-bottom: 1px solid var(--line);
  padding: calc(var(--u) * 4) 0 calc(var(--u) * 3);
}

.masthead-in {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(var(--u) * 3);
  flex-wrap: wrap;
}

.mark {
  font-family: var(--mono);
  font-size: 30px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
}

.mark b { font-weight: 400; color: var(--acc); }

/* the wordmark glyph: 4 mushy cells collapsing to 1 crisp pixel */
.mark-glyph { display: block; width: 32px; height: 32px; flex: none; }

.tagline {
  margin: calc(var(--u) * 1.5) 0 0;
  color: var(--fg-dim);
  font-size: 14px;
  max-width: 46ch;
}

.spec {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.04em;
  text-align: right;
  line-height: 1.9;
}
.spec span { color: var(--fg-dim); }

/* ── workbench ────────────────────────────────────────────── */

.bench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: 0;
  border-bottom: 1px solid var(--line);
  min-height: 520px;
}

.stage {
  border-right: 1px solid var(--line);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* cutting-mat lattice, on the same 8px module as the layout */
  background-image:
    linear-gradient(to right, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: var(--u) var(--u);
}

.stage.dragover { background-color: rgba(255, 163, 0, .05); }
.stage.dragover .dropzone { border-color: var(--acc); color: var(--acc); }

/* drop target */
.dropzone {
  flex: 1;
  margin: calc(var(--u) * 3);
  border: 1px dashed var(--line-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  color: var(--fg-dim);
  cursor: pointer;
  transition: border-color .12s, color .12s;
  text-align: center;
  padding: calc(var(--u) * 3);
}
.dropzone:hover { border-color: var(--fg-faint); color: var(--fg); }
.dropzone:focus-visible {
  border-color: var(--acc);
  color: var(--fg);
  outline: 1px solid var(--acc);
  outline-offset: 3px;
}

.dropzone-hint {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.dropzone-sub { font-size: 12px; color: var(--fg-faint); line-height: 1.9; }
.dropzone-sub kbd {
  font-family: var(--mono);
  border: 1px solid var(--line-2);
  padding: 0 4px;
  font-size: 11px;
  color: var(--fg-dim);
}

/* viewer */
.viewer { flex: 1; display: none; flex-direction: column; min-height: 0; }
.viewer.on { display: flex; }

.frame-pad {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--u) * 3);
  min-height: 0;
  overflow: hidden;
}

.frame {
  position: relative;
  line-height: 0;
  max-width: 100%;
  /* checkerboard for transparent pixel art */
  background-image:
    linear-gradient(45deg, #16181c 25%, transparent 25%),
    linear-gradient(-45deg, #16181c 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #16181c 75%),
    linear-gradient(-45deg, transparent 75%, #16181c 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  background-color: #0f1114;
  outline: 1px solid var(--line-2);
}

.frame img { display: block; max-width: 100%; max-height: 58vh; width: auto; height: auto; }

#beforeImg { position: relative; z-index: 1; }

/* the "after" layer is clipped by the divider position */
.after-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  background-color: #0f1114;
  background-image: inherit;
  background-size: inherit;
  background-position: inherit;
}
.after-layer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: none;
  max-height: none;
}

#gridCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s;
}
#gridCanvas.on { opacity: 1; }

.divider {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 4;
  width: 1px;
  background: var(--acc);
  cursor: ew-resize;
  touch-action: none;
}
.divider::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -12px; right: -12px;
}
.divider-grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 25px;
  background: var(--acc);
}
.divider-tag {
  position: absolute;
  top: calc(var(--u) * 1);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  background: var(--acc);
  color: #000;
  padding: 1px 5px;
  white-space: nowrap;
}
.divider-tag.l { right: calc(100% + 5px); }
.divider-tag.r { left: calc(100% + 5px); }

/* stage toolbar */
.stagebar {
  border-top: 1px solid var(--line);
  padding: 0 calc(var(--u) * 2);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  flex-wrap: wrap;
  min-height: calc(var(--u) * 6);
  background: var(--surface);
}

.tgl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  background: none;
  border: 1px solid var(--line-2);
  padding: 3px calc(var(--u) * 1.25);
  cursor: pointer;
  transition: none;
}
.tgl:hover { color: var(--fg); border-color: var(--fg-faint); }
.tgl[aria-pressed="true"] { color: #000; background: var(--acc); border-color: var(--acc); }
.tgl.grid[aria-pressed="true"] { background: var(--grid); border-color: var(--grid); }

.stagebar-sep { flex: 1; }

.filename {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 30ch;
}

/* busy state */
.busy {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 2);
  background: rgba(12, 13, 15, .88);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
}
.busy.on { display: flex; }
.busy-bar { width: 168px; height: 5px; border: 1px solid var(--line-2); position: relative; overflow: hidden; }
.busy-bar i { position: absolute; top: 0; bottom: 0; width: 32px; background: var(--acc); animation: sweep 1.05s steps(9, end) infinite; }
@keyframes sweep { from { left: -34px; } to { left: 168px; } }
.busy-note { color: var(--fg-faint); font-size: 11px; }

/* ── readout rail ─────────────────────────────────────────── */

.readout {
  padding: calc(var(--u) * 3);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 3);
  background: var(--surface);
  min-width: 0;
}

#readoutBody { display: flex; flex-direction: column; gap: calc(var(--u) * 3); }

.rgroup > h3 {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--fg-faint);
  margin: 0 0 var(--u);
  padding-bottom: 5px;
  border-bottom: 1px solid var(--line);
}

/* spec-sheet rows with dot leaders */
.row {
  display: flex;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 2;
  color: var(--fg-dim);
  gap: 6px;
}
.row .k { flex: none; }
.row .lead {
  flex: 1;
  border-bottom: 1px dotted var(--line-2);
  transform: translateY(-3px);
  min-width: 12px;
}
.row .v { flex: none; color: var(--fg); }
.row .v.hero { color: var(--acc); font-size: 15px; }
.row .v.dim { color: var(--fg-faint); }

/* confidence meter — 3 segments, instrument style */
.conf { display: flex; align-items: center; gap: var(--u); margin-top: 4px; }
.conf-seg { display: flex; gap: 3px; }
.conf-seg i { width: 18px; height: 9px; border: 1px solid var(--line-2); background: transparent; }
.conf-seg i.lit { border-color: transparent; }
.conf-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; }
.conf[data-level="high"] .conf-seg i.lit { background: var(--good); }
.conf[data-level="high"] .conf-label { color: var(--good); }
.conf[data-level="medium"] .conf-seg i.lit { background: var(--acc); }
.conf[data-level="medium"] .conf-label { color: var(--acc); }
.conf[data-level="low"] .conf-seg i.lit { background: var(--bad); }
.conf[data-level="low"] .conf-label { color: var(--bad); }

.consensus {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-dim);
  background: var(--surface-2);
  border-left: 2px solid var(--line-2);
  padding: 5px var(--u);
  margin-top: var(--u);
  word-break: break-all;
  line-height: 1.7;
}

.readout-empty {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-faint);
  line-height: 2;
}

/* download block */
.dl { margin-top: auto; }
.dl-scales { display: flex; gap: 4px; margin-bottom: var(--u); }
.dl-scales .tgl { flex: 1; text-align: center; padding: 4px 0; }

.btn {
  display: block;
  width: 100%;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-align: center;
  padding: calc(var(--u) * 1.25);
  background: var(--acc);
  color: #000;
  border: 1px solid var(--acc);
  cursor: pointer;
}
.btn:hover { background: #ffb733; border-color: #ffb733; }
.btn:disabled { background: transparent; color: var(--fg-faint); border-color: var(--line-2); cursor: not-allowed; }

.err {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--bad);
  border: 1px solid var(--bad);
  padding: var(--u);
  line-height: 1.7;
  word-break: break-word;
}

/* ── samples strip ────────────────────────────────────────── */

.samples {
  border-bottom: 1px solid var(--line);
  padding: calc(var(--u) * 2.5) 0;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  flex-wrap: wrap;
}
.samples-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--fg-faint);
}
.samples-list { display: flex; gap: var(--u); flex-wrap: wrap; }
.sample {
  width: 60px; height: 60px;
  border: 1px solid var(--line-2);
  padding: 0;
  background: #0f1114;
  cursor: pointer;
  line-height: 0;
  position: relative;
}
.sample img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sample:hover { border-color: var(--acc); }
.sample:hover::after {
  content: attr(data-name);
  position: absolute;
  bottom: -1px; left: -1px; right: -1px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  background: var(--acc);
  color: #000;
  text-align: center;
  line-height: 13px;
}

/* ── explainer ────────────────────────────────────────────── */

.how { padding: calc(var(--u) * 6) 0 calc(var(--u) * 4); }

.how h2 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--fg-faint);
  margin: 0 0 calc(var(--u) * 3);
  padding-bottom: var(--u);
  border-bottom: 1px solid var(--line);
}

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.step { background: var(--ink); padding: calc(var(--u) * 2.5); }
.step-n { font-family: var(--mono); font-size: 11px; color: var(--acc); letter-spacing: 0.1em; }
.step h4 { margin: var(--u) 0 var(--u); font-size: 14px; font-weight: 600; color: var(--fg); }
.step p { margin: 0; font-size: 13px; color: var(--fg-dim); line-height: 1.75; }
.step code { font-family: var(--mono); font-size: 12px; color: var(--fg); }

.note {
  margin-top: calc(var(--u) * 3);
  font-size: 13px;
  color: var(--fg-dim);
  line-height: 1.85;
  max-width: 76ch;
}
.note strong { color: var(--fg); font-weight: 600; }

/* ── footer ───────────────────────────────────────────────── */

footer {
  border-top: 1px solid var(--line);
  padding: calc(var(--u) * 3) 0 calc(var(--u) * 6);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-faint);
  line-height: 2;
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 3);
  flex-wrap: wrap;
}
footer a { color: var(--fg-dim); border-bottom-color: var(--line-2); }
footer a:hover { color: var(--acc); }

/* ── responsive ───────────────────────────────────────────── */

@media (max-width: 880px) {
  .bench { grid-template-columns: 1fr; min-height: 0; }
  .stage { border-right: none; border-bottom: 1px solid var(--line); min-height: 380px; }
  .readout { border-bottom: none; }
  .dl { margin-top: calc(var(--u) * 2); }
  .spec { text-align: left; }
  .mark { font-size: 24px; }
}

@media (max-width: 560px) {
  .wrap { padding: 0 calc(var(--u) * 2); }
  .frame-pad { padding: calc(var(--u) * 2); }
  .dropzone { margin: calc(var(--u) * 2); }
}