/* x402 Forge — workshop palette: machine-green enamel, cardboard, safety yellow, inspection red. */
:root {
  --enamel: #edf1ee;
  --floor: #e2e8e4;
  --ink: #1d2a27;
  --muted: #586964;
  --rule: #c9d4cf;
  --machine: #74b39c;
  --machine-deep: #3c7a65;
  --machine-ink: #0e2b24;
  --cardboard: #c99d63;
  --tape: #a77c44;
  --lamp: #f2b92b;
  --tag: #cc4630;
  --slate: #26332f;
  --wide: "wdth" 125;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--enamel);
  color: var(--ink);
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  font-variation-settings: "wdth" 100;
}
a { color: var(--machine-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--lamp); outline-offset: 3px; border-radius: 4px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; }

.top, main, footer { max-width: 1160px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

.top { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-top: 22px; padding-bottom: 8px; }
.mark { font-weight: 850; font-variation-settings: var(--wide); font-size: 19px; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.top nav { display: flex; gap: 22px; font-size: 15px; }
.top nav a { color: var(--muted); text-decoration: none; }
.top nav a:hover { color: var(--ink); }

.hero { padding: 56px 0 30px; }
h1 {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(40px, 6.6vw, 88px);
  line-height: 0.94;
  font-weight: 860;
  font-variation-settings: var(--wide);
  letter-spacing: -0.015em;
}
.lead { margin: 26px 0 0; max-width: 34em; font-size: 20px; line-height: 1.5; color: var(--muted); }

h2 {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 760;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.005em;
}

/* ---------- Factory floor ---------- */
.floor {
  margin: 18px 0 0;
  border-radius: 22px;
  background-color: var(--floor);
  background-image:
    linear-gradient(rgba(29, 42, 39, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(29, 42, 39, 0.045) 1px, transparent 1px);
  background-size: 48px 48px;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.stage { position: relative; height: clamp(400px, 44vw, 560px); }
.stage canvas { display: block; width: 100%; height: 100%; }
.flat .stage { display: none; }
svg.line[hidden] { display: none; }
.tags { position: absolute; inset: 0; pointer-events: none; }
.tag3d {
  position: absolute; left: 0; top: 0;
  display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: baseline;
  padding: 6px 11px 7px 9px;
  background: rgba(251, 252, 251, 0.94);
  border: 1px solid var(--rule);
  border-radius: 9px;
  box-shadow: 0 1px 0 rgba(29, 42, 39, 0.06);
  white-space: nowrap;
  font-size: 13px; line-height: 1.2;
  transition: border-color 0.2s, background 0.2s;
}
.tag3d .no { grid-row: 1 / 3; color: var(--muted); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tag3d b { font-weight: 760; font-variation-settings: "wdth" 108; }
.tag3d .s { color: var(--muted); font-size: 12px; }
.tag3d.busy { border-color: var(--lamp); background: #fff8e4; }
.tag3d.reject { border-color: var(--tag); background: #fbe9e5; }
.portrait .tag3d { grid-template-columns: auto auto; padding: 4px 8px; font-size: 12px; }
.portrait .tag3d .s { display: none; }
.portrait .tag3d .no { grid-row: auto; }
svg.line { display: block; width: 100%; height: auto; padding: 18px 10px 4px; font-family: inherit; }

.belt { stroke: var(--slate); stroke-width: 20; stroke-linecap: round; }
.belt-teeth { stroke: #4e5e59; stroke-width: 20; stroke-dasharray: 3 21; animation: belt 1.1s linear infinite; }
@keyframes belt { to { stroke-dashoffset: -24; } }

.machine .body { fill: var(--machine); stroke: var(--machine-deep); stroke-width: 2; transition: fill 0.25s; }
.machine .rivet { fill: var(--machine-deep); opacity: 0.55; }
.machine .arm { stroke: var(--machine-deep); stroke-width: 9; stroke-linecap: round; }
.machine .label { fill: var(--machine-ink); font-size: 16px; font-weight: 780; font-variation-settings: "wdth" 110; }
.machine .sub { fill: #234a40; font-size: 12.5px; font-weight: 450; }
.machine .step { fill: var(--machine-ink); font-size: 12px; font-weight: 700; opacity: 0.5; font-variant-numeric: tabular-nums; }
.machine .lamp { fill: #4f8a76; stroke: var(--machine-deep); stroke-width: 1.5; transition: fill 0.2s; }
.machine.busy .body { fill: #82c2aa; }
.machine.busy .lamp { fill: var(--lamp); filter: drop-shadow(0 0 5px rgba(242, 185, 43, 0.9)); }
.machine.busy .arm { animation: press 0.32s ease-in-out infinite alternate; }
.machine.reject .lamp { fill: var(--tag); filter: drop-shadow(0 0 6px rgba(204, 70, 48, 0.9)); }
@keyframes press { to { stroke-width: 13; } }

/* The person and the shipping door are not machines; they read differently. */
.m-review .body { fill: #eadcbd; stroke: #b49a63; }
.m-review.busy .body { fill: #f1e5ca; }
.m-review .arm, .m-review .rivet { stroke: #b49a63; fill: #b49a63; }
.m-review .label, .m-review .step { fill: #3a2c10; }
.m-review .sub { fill: #6a5630; }
.m-live .body { fill: var(--slate); stroke: #0f1715; }
.m-live.busy .body { fill: #33433f; }
.m-live .label, .m-live .step { fill: #f3f6f4; }
.m-live .sub { fill: #a9bab4; }
.m-live .arm, .m-live .rivet { stroke: #0f1715; fill: #0f1715; }

.box rect.carton { fill: var(--cardboard); stroke: var(--tape); stroke-width: 1.5; }
.box rect.tape { fill: var(--tape); opacity: 0.75; }
.box rect.tag { fill: var(--tag); opacity: 0; transition: opacity 0.2s; }
.box.rejected rect.tag { opacity: 1; }
.box.rejected rect.carton { stroke: var(--tag); stroke-width: 2.5; }
.box text { fill: var(--muted); font-size: 11.5px; font-weight: 600; }

/* Console under the line */
.console {
  display: grid;
  grid-template-columns: 210px 1.35fr 1fr;
  gap: 28px;
  padding: 24px 28px 8px;
  border-top: 6px solid transparent;
  border-image: repeating-linear-gradient(-45deg, var(--lamp) 0 12px, var(--slate) 12px 24px) 6;
  background: rgba(247, 249, 247, 0.72);
}
.console h2 { font-size: 15px; font-weight: 700; font-variation-settings: "wdth" 100; color: var(--muted); margin-bottom: 8px; }

.counters { display: grid; gap: 10px; align-content: start; }
.counters div { display: flex; align-items: center; gap: 12px; }
.counters .n {
  min-width: 74px;
  padding: 2px 10px;
  border-radius: 8px;
  background: var(--slate);
  color: var(--lamp);
  font-size: 30px;
  line-height: 1.25;
  font-weight: 700;
  font-variation-settings: "wdth" 70;
  font-variant-numeric: tabular-nums;
  text-align: right;
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.35);
}
.counters .k { font-size: 15px; color: var(--muted); }

.log { list-style: none; margin: 0; padding: 0; min-height: 13.2em; font-size: 14.5px; line-height: 1.4; }
.log li { padding: 4px 0 4px 14px; position: relative; animation: arrive 0.35s ease-out; }
.log li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 6px; height: 6px; border-radius: 50%; background: var(--rule); }
.log li.ok::before { background: var(--machine-deep); }
.log li.bad { color: #9b2f1d; }
.log li.bad::before { background: var(--tag); }
.log .t { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: 4px; }
@keyframes arrive { from { opacity: 0; transform: translateY(-4px); } }

.shelf { display: flex; flex-direction: column; gap: 8px; min-height: 12em; }
.chip {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 12px 7px 14px;
  background: #fffdf8;
  border: 1px solid #dccfb3;
  border-left: 6px solid var(--cardboard);
  border-radius: 6px;
  color: var(--ink);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  transition: background 0.6s;
}
.shelf .empty { margin: 0; font-size: 14.5px; color: var(--muted); }
.chip .price { color: var(--muted); font-weight: 450; font-variant-numeric: tabular-nums; }
.chip.fresh { background: #fbefc9; }
.chip:hover { border-left-color: var(--machine-deep); }

.caption { margin: 0; padding: 6px max(28px, calc(100% - 62em)) 22px 28px; font-size: 14px; color: var(--muted); background: rgba(247, 249, 247, 0.72); }

/* ---------- Catalog ---------- */
.shelfsec, .agents, .sell { padding: 72px 0 0; }
.sell .plate { background: #2f4a40; }
.note { margin: 0 0 18px; max-width: 40em; color: var(--muted); }
.cat { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.cat th { text-align: left; font-size: 14px; font-weight: 600; color: var(--muted); padding: 0 16px 10px 0; border-bottom: 2px solid var(--ink); }
.cat td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.cat td:first-child { width: 30%; }
.cat td a { text-decoration: none; color: var(--ink); display: block; }
.cat .pname { display: block; font-weight: 720; font-variation-settings: "wdth" 108; }
.cat .slug { display: block; color: var(--muted); font-size: 14px; }
.cat td a:hover .pname { color: var(--machine-deep); }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cat th.num, .cat td.num { padding-right: 0; }

/* ---------- For agents ---------- */
.plate { background: var(--slate); color: #e9efec; border-radius: 16px; padding: 10px 28px; }
.plate dl { margin: 0; display: grid; grid-template-columns: minmax(220px, auto) 1fr; }
.plate dt, .plate dd { margin: 0; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.plate dt:nth-last-of-type(1), .plate dd:last-of-type { border-bottom: 0; }
.plate dt code { color: var(--lamp); }
.plate dd { color: #b9c8c2; padding-left: 20px; }

footer { padding-top: 64px; padding-bottom: 48px; color: var(--muted); font-size: 15px; }
footer p { margin: 0; max-width: 46em; border-top: 1px solid var(--rule); padding-top: 18px; }

@media (max-width: 900px) {
  .console { grid-template-columns: 1fr 1fr; }
  .counters { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .counters div { flex-direction: column; align-items: flex-start; gap: 4px; }
}
@media (max-width: 640px) {
  .stage { height: 520px; }
  .top, main, footer { padding-left: 18px; padding-right: 18px; }
  .top nav { gap: 14px; }
  .hero { padding-top: 36px; }
  .lead { font-size: 18px; }
  .console { grid-template-columns: 1fr; padding: 20px 18px 6px; gap: 22px; }
  .counters .n { min-width: 0; width: 100%; font-size: 26px; }
  .log, .shelf { min-height: 0; }
  .caption { padding: 6px 18px 18px; }
  .cat td:first-child { width: auto; }
  .cat thead th:nth-child(2), .cat td:nth-child(2) { display: none; }
  .plate { padding: 6px 18px; }
  .plate dl { grid-template-columns: 1fr; }
  .plate dt { border-bottom: 0; padding-bottom: 2px; }
  .plate dd { padding-left: 0; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .belt-teeth, .machine.busy .arm, .log li { animation: none; }
}