:root { color-scheme: light; background: #fff; color: #141414; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 44px 1fr 44px;
  align-items: center;
  justify-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 24px;
}
.artwork {
  grid-row: 2;
  position: relative;
  display: block;
  width: min(100%, 52rem, calc(64vh * 1320 / 933));
  width: min(100%, 52rem, calc(64svh * 1320 / 933));
  aspect-ratio: 1320 / 933;
  padding: 0;
  border: 0;
  background: #fff;
  isolation: isolate;
  touch-action: pan-y pinch-zoom;
}
.artwork:enabled { cursor: pointer; }
.composition {
  position: absolute;
  inset: 50% 0 auto;
  aspect-ratio: 3624 / 2542;
  /* Percent vertical margins use the containing width. This centers the same
     native canvas without making it a containing block for viewport dust. */
  margin-top: calc(-100% * 2542 / 3624 / 2);
  isolation: isolate;
  background: #fff;
  pointer-events: none;
}
.base, .motion, .lettering { position: absolute; inset: 0; width: 100%; height: 100%; }
.motion { pointer-events: none; }
.multiply { mix-blend-mode: multiply; }
/* It paints behind both fixed ink passes, but still occupies the viewport. */
#free-dust { position: fixed; }
.foot { grid-row: 3; justify-self: start; z-index: 3; }
.discovery {
  min-height: 44px;
  border: 0;
  padding: 0 4px;
  background: transparent;
  color: #42464e;
  font: 0.6875rem/1.65 ui-monospace, "SFMono-Regular", Consolas, monospace;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  cursor: pointer;
}
.discovery span { margin-inline-start: 0.35em; }
button:focus-visible { outline: 2px solid #1642cf; outline-offset: 4px; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) { .motion { display: none; } }
@media (min-width: 901px) and (pointer: fine) {
  .artwork { width: min(100%, 57.2rem, calc(70.4svh * 1320 / 933)); }
}
@media (pointer: fine) {
  .artwork:enabled {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='2.4' fill='%23232e49' stroke='white' stroke-opacity='.92' stroke-width='1'/%3E%3C/svg%3E") 6 6, pointer;
  }
}
@media (forced-colors: active) {
  .artwork:enabled { cursor: pointer; }
  button:focus-visible { outline-color: Highlight; }
}