@font-face {
  font-family: "Nori Braille";
  src: url("/fonts/nori-braille.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
  unicode-range: U+2800-28FF;
}
/* Animated character art, using the existing dark marketing palette. */
.braille-art {
  margin: 36px 0 48px;
  overflow: hidden;
  border: 1px solid #262626;
  border-radius: 6px;
  background: #161616;
  scroll-margin-top: 24px;
}
.braille-art__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #262626;
}
.braille-art__label {
  color: #8a8f98;
  font: 11px/1.5 var(--mono), monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.braille-art__toggle {
  flex-shrink: 0;
  padding: 6px 10px;
  border: 1px solid #393939;
  border-radius: 4px;
  background: transparent;
  color: #dde1e6;
  cursor: pointer;
  font: 11px/1.5 var(--mono), monospace;
}
.braille-art__toggle:hover { background: #262626; }
.braille-art__toggle:focus-visible { outline: 2px solid #42be65; outline-offset: 3px; }
.braille-art__stage { position: relative; height: 376px; overflow: hidden; }
.braille-art__stage pre {
  position: absolute;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  white-space: pre;
  overflow: visible;
  font-family: "Nori Braille", monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  letter-spacing: 0;
  font-variant-ligatures: none;
  color: #6fdc8c;
  user-select: none;
}
.braille-art__stage .braille-art__dim { color: #393939; }
.braille-art figcaption {
  display: block;
  margin: 0;
  padding: 20px;
  border-top: 1px solid #262626;
  text-align: left;
  font-family: var(--sans), sans-serif;
}
.braille-art__title { display: block; color: #f2f4f8; font-size: 17px; line-height: 1.4; }
@media (max-width: 480px) {
  .braille-art__header { padding: 12px; }
  .braille-art__label { font-size: 10px; letter-spacing: 0; }
  .braille-art__toggle { font-size: 10px; padding: 6px; }
  .braille-art__stage { height: 312px; }
  .braille-art figcaption { padding: 16px; }
}

.braille-art__canvas { position: absolute; inset: 0; display: block; }