/* 1 Screenshot Can Change Your Life ($SCREEN).
   One phosphor verification terminal, built to art/ref/system-page.jpg: a 1 px framed sheet of soft
   green rules on near black, a code wallpaper behind it, and nothing with a bevel, a shadow or a
   radius anywhere. Every colour below was sampled off that file. */

@font-face {
  font-family: "Martian";
  src: url("/fonts/MartianMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Martian";
  src: url("/fonts/MartianMono-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Martian";
  src: url("/fonts/MartianMono-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pixeloid";
  src: url("/fonts/PixeloidSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: block;
}

:root {
  /* sampled off the reference */
  --ground: #030a02;
  --panel: #050f04;
  --rule-q: #2c5f27;
  --rule: #7bcc65;
  --ink-d: #4f9147;      /* 5.0:1 on the ground */
  --ink: #9fdc8f;        /* 12.1:1 */
  --ink-v: #d9ffcf;      /* 17.4:1 */
  --hot: #44ff02;        /* 14.5:1 */
  --wall: #0b2b07;

  /* one scale, nothing off it */
  --s1: 8px; --s2: 12px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px;
  --page: 1120px;
  --gut: 24px;
  --edge: 32px;          /* the inset from his frame: more than the 27 px heads it holds */
  --bar: 56px;           /* his 43 px bar, as a share of the taller page */
  --key: 44px;
  --grid: 9px;           /* Pixeloid's own pixel */

  --mono: "Martian", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --px: "Pixeloid", ui-monospace, monospace;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--ground); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 15px/24px var(--mono);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

/* ---------------------------------------------------------- the wallpaper
   ONE layer, fixed, dim, and it never repeats inside the surfaces above it. */
/* his ground is not flat black: the phosphor washes out from the middle of the screen. One fixed
   layer under the characters, and nothing above it is tinted. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 38%, rgba(26, 128, 20, .22), rgba(6, 26, 5, .05) 58%, transparent 80%);
}
.wall { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.wall canvas { display: block; }
/* the tile is twice the window's height, so moving it by exactly half loops with no seam, and the
   whole thing runs on the compositor: the main thread paints it once and is then free */
@keyframes wall-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, var(--wall-shift), 0); }
}

/* ------------------------------------------------------------- the sheet */
.sheet {
  position: relative;
  z-index: 1;
  box-sizing: content-box;          /* the 1 px frame sits outside the column, so the column stays even */
  width: min(100% - 2 * var(--gut) - 2px, var(--page));
  margin: var(--s4) auto var(--s6);
  border: 1px solid var(--rule);
  padding: 0;
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  box-shadow: 0 0 34px rgba(68, 255, 2, .07);
}

.vis-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* the pixel role, set once: 9 px grid, one grid pixel of tracking, its own layer so
   Chrome on Windows drops the LCD filter that paints colour on the strokes */
.px {
  font-family: var(--px);
  font-weight: 700;
  letter-spacing: 0.1111em;
  word-spacing: 0.2222em;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: none;
  will-change: transform;
}

code { overflow-wrap: anywhere; min-width: 0; }
.wlist { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.wlist li {
  position: relative; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3);
  align-items: baseline; justify-content: space-between; padding-bottom: var(--s2); min-width: 0;
}
.wlist li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #163313; }
.wlist li:last-child::after { display: none; }
.wlist code { font: 500 14px/22px var(--mono); color: var(--ink-v); }
.sep { color: var(--ink-d); padding: 0 0.4em; }
.lab {
  font-size: 14px; line-height: 20px; color: var(--ink-d);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.val { font-size: 16px; line-height: 24px; color: var(--ink-v); font-weight: 500; margin: 0; }

/* ---------------------------------------------------------------- the bar */
.bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s4);
  box-sizing: content-box;          /* 56 px of content, not 55: a half pixel here smears the face */
  height: var(--bar);
  padding: 0 var(--edge);
  border-bottom: 1px solid var(--rule);
}
.bar__ident {
  font-size: 18px; line-height: 18px; color: var(--hot); text-decoration: none;
  border: 1px solid var(--rule-q); padding: 11px 20px;
}
.bar__ident:hover, .bar__ident:focus-visible { border-color: var(--hot); }
.bar__title {
  margin: 0; font-size: 18px; line-height: 18px; color: var(--ink-v);
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  overflow-wrap: anywhere;
}
.look { display: flex; gap: 0; }
.look__in {
  width: 160px; height: 40px; padding: 0 16px;
  background: transparent; border: 1px solid var(--rule-q); border-right: 0;
  color: var(--ink-v); font: 400 14px/38px var(--mono);
}
.look__in::placeholder { color: var(--ink-d); }
.look__in:focus { outline: 0; border-color: var(--hot); }
.look__go {
  height: 40px; padding: 0 20px; font-size: 18px; line-height: 18px;
  background: transparent; border: 1px solid var(--rule-q); color: var(--ink);
  cursor: pointer;
}
.look__go:hover, .look__go:focus-visible { color: var(--hot); border-color: var(--hot); }

/* ------------------------------------------------------- 2. the scan panel */
.scan { margin: var(--s4) var(--edge); border: 1px solid var(--rule); box-shadow: 0 0 26px rgba(68, 255, 2, .06); }
.scan.is-over { border-color: var(--hot); }
.scan__field { position: relative; height: 252px; border-bottom: 1px solid var(--rule-q); }
.scan__field canvas { display: block; width: 100%; height: 100%; }
.scan__empty, .scan__hint {
  position: absolute; left: var(--edge); right: var(--edge); margin: 0;
  font-size: 14px; line-height: 20px; color: var(--ink-d);
}
.scan__empty { top: var(--s3); }
.scan__hint { bottom: var(--s3); color: var(--ink); }
.scan__foot { display: flex; gap: var(--s2); padding: var(--s3) var(--s4); align-items: center; }
.scan__in {
  flex: 1 1 auto; min-width: 0; height: var(--key); padding: 0 16px;
  background: #061305; border: 1px solid var(--rule-q); color: var(--ink-v);
  font: 400 15px/42px var(--mono);
}
.scan__in::placeholder { color: var(--ink-d); }
.scan__in:focus { outline: 0; border-color: var(--hot); }

/* ------------------------------------------------------------- keys, tiles */
.key {
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--key); padding: 0 20px;
  border: 1px solid var(--rule-q); background: transparent;
  color: var(--ink); font-family: var(--px); font-weight: 700;
  font-size: 18px; line-height: 18px; letter-spacing: 0.1111em; word-spacing: 0.2222em;
  text-rendering: geometricPrecision; -webkit-font-smoothing: none; will-change: transform;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.key:hover, .key:focus-visible { color: var(--hot); border-color: var(--hot); }
.key:active { transform: translateY(1px); }
.key--go { color: var(--ground); background: var(--hot); border-color: var(--hot); }
.key--go:hover, .key--go:focus-visible { color: var(--ground); background: #7bff4a; border-color: #7bff4a; }
.key[disabled], .key[aria-disabled="true"] {
  color: var(--ink-d); border-color: #1d3f1a; cursor: default; pointer-events: none; opacity: .74;
}
.key--go[disabled] { background: #1d3f1a; border-color: #1d3f1a; color: var(--ink-d); }

.keys { display: flex; flex-wrap: wrap; gap: var(--s2); }
.keys--small { margin: var(--s3) 0 0; }
.keys--wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.keys--wide .key { min-width: 0; padding: 0 20px; }

.keys--tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
@supports (width: round(down, 3px, 2px)) {
  .keys--tiles, .keys--wide { grid-template-columns: round(down, calc((100% - var(--s2)) / 2), 1px) minmax(0, 1fr); }
  .read, .two { grid-template-columns: round(down, calc((100% - var(--s4)) / 2), 1px) minmax(0, 1fr); }
}
/* a platform name that does not fit its key is a width problem: the row takes the whole column */
@container (max-width: 500px) {
  .keys--wide, .keys--wide:is(*) { grid-template-columns: minmax(0, 1fr); }
}
.tile {
  display: grid; justify-items: center; align-content: center; gap: 8px;
  height: 84px; border: 1px solid var(--rule-q); background: transparent; cursor: pointer;
  padding: 0 16px;
}
.tile:hover, .tile:focus-visible { border-color: var(--hot); }
.tile:hover .gl, .tile:focus-visible .gl { filter: brightness(1.45); }
.tile__t { font-size: 18px; line-height: 18px; color: var(--ink); }
.tile:hover .tile__t, .tile:focus-visible .tile__t { color: var(--hot); }
.tile[aria-pressed="true"] { border-color: var(--hot); }
.tile[aria-pressed="true"] .tile__t { color: var(--hot); }
/* one 24 px cell for the whole set, drawn at 1x and enlarged by a whole number, so the blocks stay
   square on a 1x screen and on a 2x one */
.gl {
  display: block; width: 24px; height: 24px;
  background-image: url("/img/keys-24.png");
  background-repeat: no-repeat;
  background-size: 96px 24px;
  image-rendering: pixelated;
}
.gl--code { background-position: 0 0; }
.gl--wallet { background-position: -24px 0; }
.gl--sign { background-position: -48px 0; }
.gl--add { background-position: -72px 0; }

/* -------------------------------------------------------- 3. verdict card */
.card {
  display: grid;
  grid-template-columns: 279px minmax(0, 1fr);   /* his 24.9% of the column */
  gap: var(--s4);
  margin: var(--s4) var(--edge);
  align-items: start;
}
.plate {
  position: relative; margin: 0; aspect-ratio: 1 / 1;
  border: 1px solid var(--rule); background: #061305;
  display: grid; place-items: center; overflow: hidden;
}
.plate__img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* the one generated object on the sheet: it stands in the plate until a real picture lands there */
.plate__idle { width: 76%; height: auto; display: block; opacity: .55; }
.plate__idle[hidden] { display: none; }
.plate__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0; padding: 10px var(--s3);
  font-size: 14px; line-height: 20px; color: var(--ink-d);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  border-top: 1px solid var(--rule-q);
  text-align: center;
}
.plate.is-open { cursor: zoom-in; }
.plate.is-open:hover { border-color: var(--hot); }

.card__body { min-width: 0; }
.verdict {
  margin: 0 0 var(--s2); font-size: 45px; line-height: 55px; color: var(--ink-v); overflow-wrap: anywhere;
}
.verdict.is-yes {
  color: var(--ground); background: var(--hot); display: inline-block;
  box-shadow: 0 0 30px rgba(68, 255, 2, .3);
  padding: 20px 34px 24px; text-shadow: none;
}
.verdict.is-no { color: var(--hot); text-shadow: 0 0 18px rgba(68, 255, 2, .35); }
.verdict.is-off { color: var(--ink-d); }
.meta { margin: 0 0 var(--s3); font-size: 14px; line-height: 22px; color: var(--ink-d); overflow-wrap: anywhere; }
.why { margin: 0; font-size: 15px; line-height: 24px; color: var(--ink); max-width: 62ch; }
.why b { color: var(--ink-v); font-weight: 500; }

/* ------------------------------------------------- 4. the two readings */
.read { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin: var(--s5) var(--edge) 0; align-items: stretch; }
.read__col { display: grid; grid-template-rows: auto 1fr; gap: var(--s2); }
.head { margin: 0 0 var(--s2); font-size: 27px; line-height: 33px; color: var(--hot); }
.panel { border: 1px solid var(--rule); background: var(--panel); padding: var(--s3) var(--s4); }
.panel__empty { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink-d); }
.rows { margin: 0; }
.row {
  position: relative;
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s3);
  align-items: baseline; padding: 9px 0;
}
.row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #163313;
}
.row:last-child::after { display: none; }
.row dt { margin: 0; }
.row dd { margin: 0; }
.row.is-off .val { color: var(--hot); }
.row__note { display: block; font-size: 14px; line-height: 20px; color: var(--ink-d); font-weight: 400; }
.read .panel { min-height: 0; }

/* ----------------------------------------- 5. bind and the token, his two heads */
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin: var(--s5) var(--edge) 0; align-items: stretch; }
/* a head, a row of keys and a panel: the panel takes whatever is left, so both columns end on one line */
.two__col { container-type: inline-size; grid-template-rows: auto auto 1fr; }
.two__col { display: grid; gap: var(--s2); }
.two__col .panel { min-height: 0; }
.ca { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s3); align-items: center; }
.ca__v {
  font: 500 15px/22px var(--mono); color: var(--ink-v);
  overflow-wrap: anywhere; min-width: 0; user-select: all;
}
.ca__v.is-empty { color: var(--ink-d); user-select: none; overflow-wrap: normal; }
.key--copy { height: 40px; padding: 0 20px; }
.ca__msg { margin: var(--s1) 0 0; min-height: 20px; font-size: 14px; line-height: 20px; color: var(--hot); }
.panel--token .rows { position: relative; margin-top: var(--s2); padding-top: 1px; }
.panel--token .rows::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #163313;
}

/* -------------------------------------------------------------- 6. rules */
.rules { margin: var(--s5) var(--edge) 0; }
.panel--rules { padding: var(--s5); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.step { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s3); align-items: start; }
.step__n { margin: 0; font-size: 27px; line-height: 33px; color: var(--hot); }
.step span { font-size: 15px; line-height: 24px; }
.fine { position: relative; margin: var(--s4) 0 0; padding-top: var(--s3); font-size: 14px; line-height: 21px; color: var(--ink-d); }
.fine::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #163313; }

/* ------------------------------------------------- 7. the week, his transport */
.pot { margin: var(--s5) var(--edge) var(--edge); }
.pot__strip {
  display: flex; flex-wrap: wrap; align-items: center; margin: 0;
  box-sizing: content-box;
  min-height: 48px; padding: 12px var(--edge);
  border: 1px solid var(--rule); border-bottom: 0;
  font-size: 15px; line-height: 24px; color: var(--ink-v);
}
.pot__strip .px { font-size: 18px; line-height: 18px; color: var(--hot); }
.pot__row {
  display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto; gap: var(--s2);
  align-items: stretch; padding: var(--s3) var(--edge);
  border: 1px solid var(--rule); border-bottom: 0;
}
.key--end { align-self: stretch; }
.plinth {
  border: 1px solid var(--rule-q); padding: var(--s3) 28px;
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; gap: var(--s2);
  min-width: 0;
}
.plinth__p { margin: 0; font-size: 27px; line-height: 33px; color: var(--hot); }
.plinth__h { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-v); overflow-wrap: anywhere; }
.plinth__s { margin: 2px 0 0; grid-column: 2; font-size: 14px; line-height: 20px; color: var(--ink-d); }
.plinth__v { margin: 4px 0 0; grid-column: 2; font-size: 14px; line-height: 20px; color: var(--ink-v); overflow-wrap: anywhere; }
.plinth a { display: inline-block; padding: 7px 0; color: inherit; }
.pot__rail { height: 7px; border: 1px solid var(--rule); background: #0a1c08; }
.pot__rail i { display: block; height: 5px; background: var(--hot); }

/* ------------------------------------------------------------- the dialog */
.big {
  width: min(92vw, 980px); max-height: 88vh; padding: 0;
  background: var(--ground); border: 1px solid var(--rule); color: var(--ink);
}
.big::backdrop { background: rgba(1, 4, 1, .86); }
.big__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  height: var(--bar); padding: 0 var(--s4); border-bottom: 1px solid var(--rule); margin: 0;
}
.big__t { margin: 0; font-size: 18px; line-height: 18px; color: var(--ink-v); }
.big__body { padding: var(--s4); overflow: auto; max-height: calc(88vh - var(--bar)); }
.big__body img { display: block; max-width: 100%; height: auto; }
.big__body .lab { display: block; margin: 0 0 var(--s1); }
.big__body .wlist { display: grid; gap: var(--s2); margin: 0 0 var(--s4); padding: 0; list-style: none; }
.big__body .wlist li { position: relative; display: flex; gap: var(--s3); align-items: center; justify-content: space-between; padding-bottom: var(--s2); }
.big__body .wlist li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #163313; }
.big__body code { font: 500 14px/22px var(--mono); color: var(--ink-v); overflow-wrap: anywhere; }
.big__body p { font-size: 15px; line-height: 24px; }
.big__in {
  width: 100%; height: var(--key); padding: 0 16px; margin: 0 0 var(--s3);
  background: #061305; border: 1px solid var(--rule-q); color: var(--ink-v); font: 400 15px/42px var(--mono);
}
.big__in:focus { outline: 0; border-color: var(--hot); }

/* ------------------------------------------------------------ the focus ring */
:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }

/* ----------------------------------------------------------------- the list */
.clist { list-style: none; margin: 0; padding: 0; display: grid; }
.clist li { position: relative; }
.clist li::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #163313;
}
.clist li:last-child::after { display: none; }
.clist a {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--s3);
  align-items: baseline; padding: 11px 0; color: var(--ink); text-decoration: none;
  font-size: 15px; line-height: 22px;
}
.clist a:hover, .clist a:focus-visible { color: var(--hot); }
.clist .n { color: var(--ink-d); font-size: 14px; }
.clist .v { color: var(--ink-v); font-weight: 500; }
.clist .y { color: var(--hot); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.clist .no { color: var(--ink-d); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }

/* --------------------------------------------------------------- the widths */
@media (max-width: 1000px) {
  .card { grid-template-columns: 236px minmax(0, 1fr); }
  .verdict { font-size: 36px; line-height: 46px; }
}
@media (max-width: 860px) {
  :root { --gut: 16px; }
  .bar { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--s2); height: auto; padding: var(--s3) var(--s4); }
  .bar__title { text-align: left; white-space: normal; }
  .look { grid-column: 1 / -1; }
  .look__in { width: 100%; }
  .read, .two { grid-template-columns: minmax(0, 1fr); }
  .read .panel, .two__col .panel { min-height: 0; }
  .pot__row { grid-template-columns: minmax(0, 1fr); }
  .key--end { justify-self: stretch; }
}
@media (max-width: 620px) {
  :root { --edge: 28px; }
  .head, .step__n, .plinth__p { font-size: 18px; line-height: 22px; }
  .step { grid-template-columns: 26px minmax(0, 1fr); }
  .plate { max-width: 100%; }
  .bar { grid-template-columns: minmax(0, 1fr); row-gap: var(--s2); padding: var(--s3) var(--edge); }
  .bar__ident { justify-self: start; }
  .bar__title { text-align: left; white-space: normal; overflow: visible; }
  .clist a { grid-template-columns: auto minmax(0, 1fr); row-gap: 2px; }
  .clist .v, .clist .y, .clist .no { grid-column: 2; }
  .card { grid-template-columns: minmax(0, 1fr); }
  /* the mint is 44 characters: it gets the whole width, with its label over it and Copy under it */
  .ca { grid-template-columns: minmax(0, 1fr); gap: var(--s2); justify-items: start; }
  .ca .key--copy { justify-self: stretch; }
  .plate { max-width: 320px; }
  .scan__foot { flex-wrap: wrap; }
  .scan__in { flex: 1 1 100%; }
  .scan__field { height: 184px; }
  .verdict { font-size: 27px; line-height: 33px; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

@media (max-width: 420px) {
  :root { --gut: 12px; --edge: 28px; }
  .keys--tiles { grid-template-columns: minmax(0, 1fr); }
  .tile { height: 64px; grid-template-columns: 24px minmax(0, 1fr); justify-items: start; align-items: center; gap: var(--s3); padding: 0 var(--s4); }
  .panel, .panel--rules { padding: var(--s3) var(--s4); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}