@font-face {
  font-family: "Departure Mono";
  src: url("assets/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  color-scheme: dark;
  --bg: oklch(8% 0 0);
  --text: oklch(94% 0 0);
  --muted: oklch(72% 0 0);
  --dim: oklch(46% 0 0);
  --line: oklch(22% 0 0);
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--bg);
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  scrollbar-width: none;
  background: var(--bg);
  color: var(--muted);
  font: 400 22px/1.5 "Departure Mono", ui-monospace, monospace;
  -webkit-font-smoothing: none;
  font-smooth: never;
  font-synthesis: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Crect width='1' height='1' fill='%23fff'/%3E%3C/svg%3E");
}

::selection { background: var(--text); color: var(--bg); }

html:not(.is-ready) main {
  visibility: hidden;
}

@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: steps(4);
}

main {
  position: relative;
  z-index: 1;
  width: min(572px, calc(100vw - 32px));
  margin-left: clamp(22px, 7vw, 110px);
  padding-top: clamp(88px, 22vh, 176px);
  padding-bottom: 88px;
}

.mark {
  display: block;
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
  image-rendering: pixelated;
  cursor: pointer;
  touch-action: manipulation;
  opacity: 0;
}

html.is-ready .mark {
  opacity: 1;
  animation: snap-in 280ms steps(3, end) 40ms both;
}

.saturn {
  display: inline-block;
  vertical-align: middle;
  width: 48px;
  height: 48px;
  margin: 0 0 0 8px;
  cursor: pointer;
  image-rendering: pixelated;
}

h1 {
  margin: 0 0 22px;
  color: var(--text);
  font-size: 33px;
  line-height: 1.333;
  font-weight: 400;
}

body:not(.home) h1 {
  margin-bottom: 11px;
  opacity: 0;
}

html.is-ready body:not(.home) h1 {
  opacity: 1;
  animation: snap-in 360ms steps(3, end) var(--delay, 0ms) both;
}

h1 .word {
  display: inline-block;
  opacity: 0;
}

html.is-ready h1 .word {
  opacity: 1;
  animation: snap-in 320ms steps(3, end) calc(40ms + var(--i, 0) * 80ms) both;
}

.stamp {
  margin: 0 0 22px;
  color: var(--dim);
  opacity: 0;
}

html.is-ready .stamp {
  opacity: 1;
  animation: snap-in 360ms steps(3, end) var(--delay, 0ms) both;
}

p {
  margin: 0 0 22px;
  opacity: 0;
}

html.is-ready p:not(.section-label) {
  opacity: 1;
  animation: snap-in 360ms steps(3, end) var(--delay, 0ms) both;
}

html.is-ready body.home p:nth-of-type(1) { animation-delay: 280ms; }
html.is-ready body.home p:nth-of-type(2) { animation-delay: 360ms; }
html.is-ready body.home p:nth-of-type(3) { animation-delay: 440ms; }
html.is-ready body.home p:nth-of-type(4) { animation-delay: 520ms; }
html.is-ready body.home p:nth-of-type(5) { animation-delay: 600ms; }

a {
  position: relative;
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 2px 0 var(--dim);
  transition: box-shadow 0s 160ms;
}

/* difference blend turns the light text dark wherever the fill has reached it */
a::after {
  content: "";
  position: absolute;
  inset: 0 0 -2px;
  background: var(--text);
  mix-blend-mode: difference;
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 160ms steps(4, start);
}

a:hover {
  box-shadow: 0 2px 0 transparent;
  transition-delay: 0s;
}

a:hover::after {
  clip-path: inset(0);
}

a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

/* 4 offset shadows draw a 2px border with the corner pixels knocked out */
.player,
.screen,
.key {
  --ring:
    0 -2px 0 var(--edge),
    0 2px 0 var(--edge),
    -2px 0 0 var(--edge),
    2px 0 0 var(--edge);
}

.player {
  --edge: oklch(26% 0 0);
  margin: 0 2px 33px;
  padding: 14px;
  background: oklch(12% 0 0);
  box-shadow: inset 0 2px 0 oklch(17% 0 0), var(--ring);
}

html.is-loading .player {
  animation: snap-in 360ms steps(3, end) both;
}

.screen {
  --edge: oklch(4% 0 0);
  display: grid;
  grid-template-columns: 99px minmax(0, 1fr);
  gap: 22px;
  margin: 2px;
  padding: 11px;
  background: oklch(6% 0 0);
  box-shadow: var(--ring);
}

.art-slot {
  position: relative;
  width: 99px;
  height: 99px;
}

.art {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  filter: grayscale(1) contrast(1.15) brightness(.82);
  transition: filter 220ms steps(3);
}

.player.is-awake .art { filter: none; }

.cube {
  position: absolute;
  inset: 0;
  margin: auto;
  image-rendering: pixelated;
}

html.is-tracks .cube { display: none; }

.readout {
  min-width: 0;
  line-height: 33px;
}

.readout-top {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--dim);
}

.eq { margin-left: auto; }

.readout-title,
.readout-artist {
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
}

.readout-title { color: var(--text); }
.readout-title.is-scrolling { text-overflow: clip; }
.readout-artist { color: var(--dim); }

.controls {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding: 0 2px 2px;
}

.key {
  --edge: oklch(28% 0 0);
  width: 52px;
  height: 40px;
  padding: 0 0 4px;
  border: 0;
  font: inherit;
  line-height: 1;
  color: var(--text);
  background: oklch(17% 0 0);
  box-shadow: inset 0 -4px 0 oklch(10% 0 0), var(--ring);
  cursor: pointer;
  touch-action: manipulation;
}

.key:hover { background: oklch(21% 0 0); }

.key:active {
  transform: translateY(2px);
  padding-bottom: 2px;
  box-shadow: inset 0 -2px 0 oklch(10% 0 0), var(--ring);
}

.key:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}

.listen { margin-left: auto; }

.loading {
  display: inline-block;
  width: 10ch;
  overflow: hidden;
  white-space: nowrap;
  animation: dots 1120ms steps(4, jump-none) infinite;
}

@keyframes dots {
  from { width: 7ch; }
  to { width: 10ch; }
}

.tracks {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.tracks li {
  display: grid;
  grid-template-columns: 66px 1fr;
  column-gap: 22px;
  margin-bottom: 22px;
}

.tracks img {
  grid-row: span 2;
  image-rendering: pixelated;
  filter: grayscale(1);
}

.tracks .artist { color: var(--dim); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@keyframes snap-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 560px) {
  main { padding-top: 72px; margin-left: 16px; }
  body { font-size: 22px; }
  .screen { grid-template-columns: 66px minmax(0, 1fr); gap: 14px; }
  .art-slot { width: 66px; height: 66px; }
  .readout { line-height: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html.is-ready .mark,
  html.is-ready h1,
  html.is-ready h1 .word,
  html.is-ready p,
  html.is-ready .stamp,
  html.is-loading .player {
    animation: none !important;
    opacity: 1;
  }

  a,
  a::after {
    transition: none;
  }
}