/* Flow field, project 15.

   The visual is the hero, so the chrome stays out of its way: one slim
   toolbar above a full-width stage on near-black. Everything here is the site
   design system, unmodified. The only place this page takes a playful liberty
   is inside the canvas, which is where it belongs. */

.ff__about {
  margin-block-start: var(--s-5);
  color: var(--text-2);
  max-width: 68ch;
}

.ff__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-4);
  margin-block: var(--s-6) var(--s-4);
}

.ff__field {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 140px;
}

.ff__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-inline-start: auto;
}

/* The stage. Near-black so the trails carry the whole picture, and a fixed
   aspect ratio so the canvas cannot collapse to nothing before the script has
   measured it. */
.ff__stage {
  position: relative;
  background: #07090f;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}

.ff__canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* The backing store is set in script at device resolution; this is only
     how big it is on the page. */
  height: auto;
}

/* The seed, in the corner, in mono, because it is a value to be read back and
   typed out rather than prose. */
.ff__seed {
  position: absolute;
  right: var(--s-3);
  bottom: var(--s-3);
  margin: 0;
  padding: var(--s-2) var(--s-3);
  background: rgb(7 9 15 / 0.82);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  color: var(--text-2);
  font-size: var(--t-xs);
  letter-spacing: 0.01em;
}

.ff__seedValue {
  font-family: "Mono", ui-monospace, monospace;
  color: var(--text-1);
}

.ff__status {
  margin-block-start: var(--s-4);
  color: var(--text-2);
  font-size: var(--t-sm);
  min-height: 1.5em;
}

.ff__panel {
  margin-block-start: var(--s-7);
  max-width: 68ch;
}

.ff__panelTitle {
  font-size: var(--t-lg);
  margin-block-end: var(--s-3);
}

.ff__panel p {
  color: var(--text-2);
}

.ff__panel p + p {
  margin-block-start: var(--s-4);
}

@media (max-width: 600px) {
  .ff__group {
    margin-inline-start: 0;
  }

  .ff__canvas {
    aspect-ratio: 4 / 3;
  }
}