/* Sampler at Sea -- hero panel.
   The ASCII rule IS the border of the piece, so this element carries no border
   of its own: only a background, the radius, and the clip. */

.ascii-hero {
  --ascii-ink: #1a272b;
  --ascii-panel: #fbfcfa;
  --ascii-grid: rgba(31, 58, 62, 0.07);
  --ascii-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  width: 1280px;
  max-width: 100%;
  aspect-ratio: 1280 / 491;   /* locked: the character grid is tuned to it */
  background: var(--ascii-panel);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-color-scheme: dark) {
  .ascii-hero:not([data-theme="light"]) {
    --ascii-ink: #cde2db;
    --ascii-panel: #121c20;
    --ascii-grid: rgba(160, 205, 197, 0.07);
  }
}
.ascii-hero[data-theme="dark"] {
  --ascii-ink: #cde2db;
  --ascii-panel: #121c20;
  --ascii-grid: rgba(160, 205, 197, 0.07);
}

.ascii-hero__stage {
  margin: 0;
  width: max-content;
  white-space: pre;
  display: block;
  font-family: var(--ascii-mono);
  color: var(--ascii-ink);
  /* faint counted-chart grid, one cell per glyph; set by the component */
  background-image:
    repeating-linear-gradient(to right,  var(--ascii-grid) 0 1px, transparent 1px var(--cw)),
    repeating-linear-gradient(to bottom, var(--ascii-grid) 0 1px, transparent 1px var(--lh));
}