:root {
  /* The site is light by design — the black surfaces are chosen, not a theme.
     Declaring the scheme is what stops Chromium's auto-dark (Brave, and Chrome
     on Android) force-inverting the page, which it only does to pages that say
     nothing. Standard property, not a workaround: it says what the page
     supports, and the browser stops guessing. */
  color-scheme: light;

  --ink: #11110f;
  --paper: #f2f0e9;
  --muted: #75736c;
  --line: #d8d5cc;
  --dark: #0c0d0c;
  --red: #f04444;
  --yellow: #f3cf3c;
  --green: #36c66a;
  --blue: #4a78f0;
  --page-pad: clamp(1.25rem, 4vw, 4.5rem);
  --max-width: 100rem;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
}

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
}

.skip-link {
  position: fixed;
  top: 0;
  left: 1rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: white;
  transform: translateY(-110%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header,
.site-footer {
  width: min(100%, var(--max-width));
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

.site-header {
  min-height: 6.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: 1px solid var(--line);
}

.site-brand {
  display: block;
  width: 6.4rem;
}

.site-brand__mark,
.xzzx-wordmark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
}

.xzzx-wordmark .xzzx-letter {
  fill: none;
  stroke: currentColor;
  stroke-width: 10;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.xzzx-gridmark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 10;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.xzzx-radial {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 10;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.xzzx-cellular {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 10;
  stroke-linecap: butt;
  stroke-linejoin: round;
}

.site-nav {
  display: flex;
  gap: clamp(1rem, 3vw, 2.5rem);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

main {
  width: min(100%, var(--max-width));
  margin-inline: auto;
  flex: 1;
  padding-inline: var(--page-pad);
}

.eyebrow,
.study__number,
figcaption {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.7rem;
  line-height: 1.4;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.holding {
  min-height: calc(100vh - 12rem);
  padding-block: clamp(5rem, 12vw, 11rem);
}

.holding h1,
.scratch-intro h1 {
  max-width: 13ch;
  margin: 1.5rem 0 2rem;
  font-size: clamp(3.5rem, 9vw, 9rem);
  font-weight: 500;
  line-height: 0.88;
  letter-spacing: -0.065em;
}

.holding__lede {
  max-width: 42rem;
  margin: 0 0 2.5rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.55;
}

.text-link {
  display: inline-flex;
  gap: 1.25rem;
  align-items: center;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid;
  font-size: 0.9rem;
  text-decoration: none;
}

.site-footer {
  min-height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.67rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.scratch-intro {
  min-height: 35rem;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.5fr);
  gap: 4rem;
  align-items: end;
  padding-block: clamp(5rem, 10vw, 9rem);
}

.scratch-intro h1 {
  margin-bottom: 0;
}

.scratch-intro > p {
  max-width: 29rem;
  margin: 0 0 0.65rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.study {
  padding-block: clamp(4rem, 8vw, 8rem);
  border-top: 1px solid var(--line);
}

.study__heading {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.study__heading h2 {
  margin: -0.18em 0 0.55rem;
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  font-weight: 500;
  letter-spacing: -0.045em;
}

.study__heading p:last-child {
  max-width: 42rem;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.surface-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #aaa79f;
  border: 1px solid #aaa79f;
}

.logo-surface {
  min-width: 0;
  min-height: clamp(16rem, 28vw, 28rem);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.25rem, 2.5vw, 2.5rem);
}

.logo-surface--light {
  background: #fff;
  color: #090a09;
}

.logo-surface--dark {
  background: var(--dark);
  color: #fff;
}

.logo-study {
  width: 100%;
  margin-block: auto;
}

.logo-study--signal .xzzx-letter--1,
.xzzx-gridmark--flush.xzzx-gridmark--signal .xzzx-letter--1 {
  stroke: var(--red);
}

.logo-study--signal .xzzx-letter--2,
.xzzx-gridmark--flush.xzzx-gridmark--signal .xzzx-letter--2 {
  stroke: var(--yellow);
}

.logo-study--signal .xzzx-letter--3,
.xzzx-gridmark--flush.xzzx-gridmark--signal .xzzx-letter--3 {
  stroke: var(--green);
}

.logo-study--signal .xzzx-letter--4,
.xzzx-gridmark--flush.xzzx-gridmark--signal .xzzx-letter--4 {
  stroke: var(--blue);
}

.radial-study--signal .xzzx-letter--1 {
  stroke: var(--red);
}

.radial-study--signal .xzzx-letter--2 {
  stroke: var(--yellow);
}

.radial-study--signal .xzzx-letter--3 {
  stroke: var(--green);
}

.radial-study--signal .xzzx-letter--4 {
  stroke: var(--blue);
}

.cellular-study--signal .xzzx-letter--1 {
  stroke: var(--red);
}

.cellular-study--signal .xzzx-letter--2 {
  stroke: var(--yellow);
}

.cellular-study--signal .xzzx-letter--3 {
  stroke: var(--green);
}

.cellular-study--signal .xzzx-letter--4 {
  stroke: var(--blue);
}

.xzzx-gridmark--signal .xzzx-letter--1 {
  stroke: var(--red);
}

.xzzx-gridmark--signal .xzzx-letter--2 {
  stroke: var(--yellow);
}

.xzzx-gridmark--signal .xzzx-letter--3 {
  stroke: var(--green);
}

.xzzx-gridmark--signal .xzzx-letter--4 {
  stroke: var(--blue);
}

.logo-surface figcaption {
  color: currentColor;
  opacity: 0.56;
}

.radial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: #aaa79f;
  border: 1px solid #aaa79f;
}

.radial-study {
  width: 100%;
  margin-block: auto;
}

.cellular-study {
  width: 100%;
  margin-block: auto;
}

.variation-label {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 0.75rem;
  color: var(--muted);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.67rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.variation-label p {
  margin: 0;
}

.variation-label--spaced {
  margin-top: clamp(3rem, 6vw, 6rem);
}

.weight-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.weight-card {
  min-width: 0;
  margin: 0;
  padding: clamp(1.25rem, 2.5vw, 2.5rem);
  border: 1px solid var(--line);
}

.weight-card .logo-study {
  margin-block: clamp(3rem, 7vw, 6rem);
}

.weight-card figcaption {
  color: var(--muted);
}

.weight-card--selected {
  border-color: var(--ink);
}

.logo-study--thin {
  stroke-width: 6;
}

.logo-study--heavy {
  stroke-width: 16;
}

.compact-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(12rem, 1fr));
  gap: 1px;
  background: #aaa79f;
  border: 1px solid #aaa79f;
}

.compact-card {
  min-width: 0;
  min-height: 27rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1.25rem, 2.5vw, 2.5rem);
}

.compact-card--light {
  background: white;
}

.compact-card--dark {
  background: var(--dark);
  color: white;
}

.xzzx-gridmark {
  width: min(75%, 16rem);
  margin: auto;
}

.xzzx-gridmark--flush {
  fill: none;
  stroke: currentColor;
  stroke-width: 8;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.compact-card figcaption {
  opacity: 0.56;
}

.compact-notes {
  min-height: 18rem;
  grid-column: 1 / -1;
  padding: clamp(1.5rem, 3vw, 3.5rem);
  background: #deda4d;
  display: grid;
  grid-template-columns: minmax(8rem, 0.4fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: end;
}

.compact-notes > p:last-child {
  max-width: 28rem;
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  line-height: 1.35;
  letter-spacing: -0.025em;
}

.scratch-next {
  display: grid;
  grid-template-columns: minmax(8rem, 0.35fr) minmax(0, 1fr);
  gap: 3rem;
  padding-block: clamp(5rem, 10vw, 10rem);
  border-top: 1px solid var(--line);
}

.scratch-next > p:last-child {
  max-width: 45rem;
  margin: 0;
  font-size: clamp(1.5rem, 3.5vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.045em;
}

@media (max-width: 800px) {
  .site-header {
    min-height: 5rem;
  }

  .site-brand {
    width: 5rem;
  }

  .site-nav a:first-child {
    display: none;
  }

  .scratch-intro {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .surface-grid,
  .radial-grid,
  .weight-grid,
  .compact-row {
    grid-template-columns: 1fr;
  }

  .logo-surface {
    min-height: 19rem;
  }

  .compact-notes {
    min-height: 20rem;
    grid-column: auto;
    grid-template-columns: 1fr;
    align-items: initial;
  }

  .scratch-next {
    grid-template-columns: 1fr;
  }

  .variation-label {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.3rem;
  }
}

@media (max-width: 480px) {
  .site-nav {
    font-size: 0.62rem;
  }

  .site-footer {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 0.4rem;
  }

  .study__heading {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a {
    transition: color 160ms ease, opacity 160ms ease;
  }
}

.lab-launch {
  min-height: clamp(12rem, 22vw, 20rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 4vw, 4rem);
  background: var(--dark);
  color: white;
  text-decoration: none;
}

.lab-launch strong {
  display: block;
  margin-top: 1rem;
  font-size: clamp(2rem, 5vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.05em;
}

.lab-launch > span:last-child {
  font-size: clamp(2rem, 5vw, 5rem);
}

.lab-page-intro {
  min-height: 28rem;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.55fr);
  gap: 4rem;
  align-items: end;
  padding-block: clamp(4rem, 8vw, 8rem);
}

.lab-page-intro h1 {
  margin: 1.25rem 0 0;
  font-size: clamp(3.5rem, 8vw, 8rem);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.065em;
}

.lab-page-intro > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.65;
}

.curve-lab {
  display: grid;
  grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr);
  gap: 1px;
  margin-inline: calc(var(--page-pad) * -1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--line);
}

.curve-lab__panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: #fff;
}

.curve-lab__panel h2 {
  margin: 0.65rem 0 2rem;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.lab-control {
  margin-bottom: 1.2rem;
}

.lab-control label,
.lab-control-row label,
.lab-actions label {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lab-control label span {
  color: #b6292e;
  font-variant-numeric: tabular-nums;
}

.lab-control input[type="range"] {
  width: 100%;
  accent-color: #b6292e;
}

.lab-control-row {
  margin-top: 1.5rem;
}

.lab-control-row select,
.lab-actions select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: white;
  color: var(--ink);
  font: inherit;
}

.lab-reset {
  margin-block: 1rem 2rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: #b6292e;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
}

.lab-versions {
  margin-bottom: 2rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.lab-versions__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.lab-versions__heading h3 {
  margin: 0;
  font-size: 0.95rem;
}

.lab-versions__heading span,
.lab-versions > label {
  color: var(--muted);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lab-versions > label {
  display: block;
  margin-bottom: 0.35rem;
}

.lab-save-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.lab-save-row input {
  min-width: 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  font: inherit;
}

.lab-save-row button {
  padding-inline: 0.8rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: white;
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
}

.lab-version-list {
  display: grid;
  gap: 1px;
  margin-top: 1rem;
  background: var(--line);
  border: 1px solid var(--line);
}

.lab-version {
  display: grid;
  gap: 0.65rem;
  padding: 0.75rem;
  background: white;
}

.lab-version > div:first-child {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.lab-version strong {
  overflow: hidden;
  font-size: 0.78rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lab-version span {
  color: var(--muted);
  font-size: 0.62rem;
}

.lab-version__actions {
  display: flex;
  gap: 0.35rem;
}

.lab-version__actions button {
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.65rem;
}

.lab-version__actions .lab-version__delete {
  margin-left: auto;
  color: #a21d25;
}

.lab-version-empty {
  margin: 0;
  padding: 0.75rem;
  background: white;
  color: var(--muted);
  font-size: 0.72rem;
}

.lab-actions {
  display: grid;
  gap: 0.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.lab-actions button {
  padding: 0.75rem 1rem;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: white;
  cursor: pointer;
  font: inherit;
}

.lab-actions .lab-button--ghost {
  background: white;
  color: var(--ink);
}

.lab-status {
  min-height: 1.25rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.curve-lab__stage {
  min-width: 0;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: var(--paper);
}

.curve-preview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: #aaa79f;
  border: 1px solid #aaa79f;
}

.curve-preview {
  min-width: 0;
  min-height: clamp(14rem, 24vw, 24rem);
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1rem, 2vw, 2rem);
}

.curve-preview > div {
  width: 100%;
  margin-block: auto;
}

.curve-preview--light {
  background: white;
}

.curve-preview--dark {
  background: var(--dark);
  color: white;
}

.xzzx-curve-mark {
  display: block;
  width: 100%;
  height: auto;
}

.curve-context-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1rem;
  background: #aaa79f;
  border: 1px solid #aaa79f;
}

.curve-context {
  min-width: 0;
  min-height: 5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.curve-context > span:first-child {
  width: 4.5rem;
}

.curve-context--light {
  background: white;
}

.curve-context--dark {
  background: var(--dark);
  color: white;
}

.curve-source {
  margin-top: 1rem;
  border: 1px solid var(--line);
  background: white;
}

.curve-source summary {
  padding: 0.85rem 1rem;
  cursor: pointer;
  font-size: 0.8rem;
}

.curve-source textarea {
  width: 100%;
  height: 13rem;
  padding: 1rem;
  border: 0;
  border-top: 1px solid var(--line);
  resize: vertical;
  color: var(--ink);
  font: 0.72rem/1.5 "Courier New", Courier, monospace;
}

.curve-lab__note {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
}

@media (min-width: 1000px) {
  .curve-lab__panel {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
  }
}

@media (max-width: 999px) {
  .curve-lab {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .lab-page-intro {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .curve-preview-grid,
  .curve-context-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .site-nav a:nth-child(2) {
    display: none;
  }
}

/* Hero dead-zone editor ---------------------------------------------------- */

.mask-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 30rem);
  gap: 2.5rem;
  align-items: end;
  padding-block: clamp(1.5rem, 3vw, 2.75rem);
}

.mask-intro h1 {
  margin: 0.5rem 0 0;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
}

.mask-intro > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.mask-lab {
  display: grid;
  grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
  gap: 1px;
  margin-inline: calc(var(--page-pad) * -1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--line);
}

.mask-lab__panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: #fff;
}

.mask-lab__head h2 {
  margin: 0.65rem 0 1.5rem;
  font: 0.95rem/1.4 "Courier New", Courier, monospace;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.mask-save {
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}

.mask-save__button {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

/* Only live-looking when there is something to write. */
.mask-save__button--dirty {
  border-color: #b6292e;
  background: #b6292e;
  color: white;
}

.mask-save__button:disabled {
  cursor: default;
}

.mask-save__state {
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mask-save__state--dirty {
  color: #b6292e;
}

.mask-save__discard {
  margin-top: 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  text-decoration: underline;
}

.mask-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.mask-nav button {
  padding: 0.6rem 0.5rem;
  border: 1px solid var(--ink);
  background: white;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
}

.mask-nav .mask-nav__skip {
  grid-column: 1 / -1;
  border-color: var(--line);
  color: var(--muted);
}

.mask-fit {
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.mask-fit--clean {
  color: #1c7a42;
}

.mask-fit--tight {
  color: #a21d25;
}

.mask-fit--retired {
  color: var(--ink);
}

.mask-zones {
  margin-block: 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.mask-zones__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.mask-zones__heading h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
}

.mask-zones__heading span {
  color: var(--muted);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mask-zone-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.mask-zone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  background: white;
}

.mask-zone-row span {
  font: 0.7rem/1.3 "Courier New", Courier, monospace;
  font-variant-numeric: tabular-nums;
}

.mask-zone-row button {
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--line);
  background: white;
  color: #a21d25;
  cursor: pointer;
  font: inherit;
  font-size: 0.65rem;
}

.mask-zone-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.mask-zone-tools button {
  padding: 0.5rem;
  border: 0;
  background: transparent;
  color: #b6292e;
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  text-align: left;
}

.mask-progress {
  margin: 1.25rem 0 0.5rem;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mask-lab__note {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.7;
}

.mask-lab__note kbd {
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--line);
  color: var(--ink);
  font: 0.7rem/1 "Courier New", Courier, monospace;
}

.mask-lab__stage {
  min-width: 0;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: var(--paper);
}

/* The frame is sampled at whole pixels wherever it appears, here included —
   a smoothed preview would hide exactly the blocks being drawn around. */
.mask-stage {
  position: relative;
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  border: 1px solid var(--line);
  background-color: var(--dark);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}

.mask-stage--retired {
  cursor: not-allowed;
  filter: grayscale(1) contrast(0.65);
}

/* Stripes rather than a colour wash: the sources are saturated pixel art and
   any flat tint would read as part of the art on some frame or other. */
.mask-zone {
  position: absolute;
  pointer-events: none;
  box-shadow: 0 0 0 1px #fff, inset 0 0 0 1px #11110f;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(17, 17, 15, 0.5) 0 4px,
    rgba(242, 240, 233, 0.5) 4px 8px
  );
}

.mask-zone--draft {
  box-shadow: 0 0 0 1px #fff, inset 0 0 0 1px #f04444;
}

.mask-zone__remove {
  position: absolute;
  top: 0;
  right: 0;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: 0;
  background: var(--ink);
  color: white;
  cursor: pointer;
  pointer-events: auto;
  font: 0.9rem/1 Arial, Helvetica, sans-serif;
}

.mask-hint {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: center;
}

.mask-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
  gap: 0.4rem;
  max-height: 24rem;
  margin-top: 1.5rem;
  padding: 0.7rem;
  overflow-y: auto;
  border: 1px solid var(--line);
  background: white;
}

.mask-thumb {
  position: relative;
  padding: 0;
  border: 2px solid transparent;
  background-color: var(--dark);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
  cursor: pointer;
}

.mask-thumb--marked {
  border-color: #b6292e;
}

.mask-thumb--retired {
  border-color: var(--muted);
  opacity: 0.3;
}

.mask-thumb--current {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

/* A corner flag rather than another border colour, so "changed" reads on top of
   marked, retired and current instead of competing with them. */
.mask-thumb--unsaved::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-top: 0.55rem solid #b6292e;
  border-left: 0.55rem solid transparent;
}

.mask-thumb__zones {
  position: absolute;
  inset: 0;
}

.mask-thumb__zones span {
  position: absolute;
  background: rgba(17, 17, 15, 0.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

@media (min-width: 1000px) {
  .mask-lab__panel {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
  }
}

@media (max-width: 999px) {
  .mask-lab {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .mask-intro {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
  }
}

/* Banner colour tool ------------------------------------------------------- */

/* Borrows the dead-zone editor's frame — same two columns, same panel, same
   save block — because it is the same shape of job: a panel of controls beside
   the thing they change. Only what is inside the panel is new. */
.tint-lab {
  display: grid;
  grid-template-columns: minmax(17rem, 22rem) minmax(0, 1fr);
  gap: 1px;
  margin-inline: calc(var(--page-pad) * -1);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--line);
}

.tint-lab__panel {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: #fff;
}

.tint-lab__stage {
  min-width: 0;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: var(--paper);
}

.tint-lab__note {
  margin: 1.25rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.6;
}

/* Only on screen when this browser is holding colours the file does not have.
   Bordered rather than coloured: it is a question, not a warning — the tool is
   already showing the right thing. */
.tint-draft {
  margin-bottom: 1.5rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  background: var(--paper);
}

.tint-draft p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.tint-draft__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
  margin-top: 0.7rem;
}

.tint-draft__actions button {
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--ink);
  background: white;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
}

/* Names the two kinds apart — colours in the picture, colours in the CSS over
   it — because "Sky" and "Wordmark" are otherwise five identical-looking rows
   followed by two that behave differently. */
.tint-group {
  padding-block: 1.4rem 0.2rem;
}

.tint-group:first-child {
  padding-top: 0;
}

.tint-group h3 {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tint-group p {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.tint-slot {
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.tint-slot__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.tint-slot__label {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Only present on a slot that has moved, so the row says whether it has been
   touched without needing a second marker to say so. */
.tint-slot__revert {
  padding: 0;
  border: 0;
  background: transparent;
  color: #b6292e;
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  text-decoration: underline;
}

.tint-slot__row {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: stretch;
}

/* Full width under the swatch and the field, on the two slots that have one.
   The native colour picker has no alpha in any shipping browser, so this is
   the other half of the value — and the hex field beside it is the readout,
   which is why the slider carries no number of its own. */
.tint-slot__alpha {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 0.15rem;
  accent-color: #b6292e;
}

/* The native picker, stripped back to a plain swatch. Every browser draws this
   control differently and none of them draw it like anything else on the page;
   flattening it to a bordered block is the only way it sits with the rest. */
.tint-slot__swatch {
  width: 100%;
  height: 2.4rem;
  padding: 0;
  border: 1px solid var(--ink);
  background: none;
  cursor: pointer;
}

.tint-slot__swatch::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.tint-slot__swatch::-webkit-color-swatch {
  border: 0;
}

.tint-slot__swatch::-moz-color-swatch {
  border: 0;
}

.tint-slot__hex {
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: white;
  color: var(--ink);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.85rem;
  text-transform: lowercase;
}

.tint-slot__note {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.tint-slot__origin {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

/* Reset has nothing to do when every slot is already on the frame, and the
   same goes for Save with nothing outstanding. Both stay in place and go quiet
   rather than disappearing, so the panel does not resize as you work. Scoped to
   this lab: the dead-zone editor shares these two classes and does not disable
   either button the same way. */
.tint-lab .lab-actions button:disabled,
.tint-lab .mask-save__button:disabled {
  border-color: var(--line);
  background: var(--paper);
  color: var(--muted);
  cursor: default;
}

/* The band at the width it will run at, on the black the game page puts it
   under, so the wordmark is read against what it is read against there. */
.tint-stage {
  border: 1px solid var(--line);
  background: var(--dark);
}

.tint-hint {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.tint-frame {
  margin: 2rem 0 0;
}

/* Sized by width so the frame scales with the column, with the crop line laid
   over it rather than drawn into it — the canvas holds the picture and nothing
   else, which is what lets it be redrawn wholesale on every edit. */
.tint-frame__holder {
  position: relative;
  width: min(100%, 32rem);
  border: 1px solid var(--line);
  background: var(--dark);
}

.tint-frame canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* 166 of 240 rows down: the top edge of the 74 the band shows. */
.tint-frame__crop {
  position: absolute;
  left: 0;
  right: 0;
  top: 69.1667%;
  border-top: 1px dashed rgba(255, 255, 255, 0.85);
  pointer-events: none;
}

.tint-frame figcaption {
  margin-top: 0.75rem;
  max-width: 32rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* The About section on the white the game page gives it, boxed so the lab's
   paper does not read as part of the layout. Nothing inside is restyled — the
   section is public.css's, at whatever width this column gives it. */
.tint-screen {
  border: 1px solid var(--line);
  background: #fff;
}

@media (min-width: 1000px) {
  .tint-lab__panel {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    overflow-y: auto;
  }
}

@media (max-width: 999px) {
  .tint-lab {
    grid-template-columns: 1fr;
  }
}