@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;
  font-family: 'DM Sans', Arial, sans-serif;
  background: #111111;
  color: #f5f5f5;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid white; outline-offset: 8px; }
header { display: flex; align-items: center; padding: 36px 52px; }
.brand img { display: block; width: 151px; height: auto; }
main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 28px; }
.hero { width: 100%; padding: 65px 0 120px; text-align: center; }
.brand-study { margin: 38px auto 0; width: min(100%, 320px); }

/* Every state uses the original icon's coordinates and visible silhouette. */
.pixel-display {
  position: relative;
  display: block;
  width: 256px;
  max-width: 100%;
  aspect-ratio: 158 / 124;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: #eeeeee;
  cursor: pointer;
}
.pixel-display:focus-visible { outline: 1px solid #aaaaaa; outline-offset: 8px; }
.pixel-display svg { display: block; width: 100%; height: 100%; }
.original-art {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.parallel-art, .connected-art { display: none; }
[data-mode="original"] .original-art { display: block; }
[data-mode="original"] .pixel-display svg { display: none; }
[data-mode="parallel"] .chips-art,
[data-mode="connected"] .chips-art { display: none; }
[data-mode="parallel"] .parallel-art,
[data-mode="connected"] .connected-art { display: initial; }

h1 {
  margin: 38px 0 0;
  font-size: clamp(38px, 7vw, 76px);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.055em;
}
h1 span { color: #a1a1a1; }
.skip { position: absolute; left: 20px; top: -100px; padding: 12px; background: white; color: #111111; }
.skip:focus { top: 16px; }

@media (max-width: 600px) {
  header { padding: 27px 25px; }
  .brand img { width: 126px; }
  main { padding: 0 25px; }
  .hero { padding-top: 55px; }
  .brand-study { width: min(100%, 250px); margin-top: 28px; }
  h1 { font-size: clamp(32px, 9vw, 50px); }
}