/* The Vinyl Room. Same system as the flight: black title bars over grey
   bodies with the double border, Departure Mono for labels, Inter Tight for
   reading, flat colour and no CSS gradients. The room is lit by the record
   on the deck (--room, set in vinyl.js from the cover). */

.room {
  --room: #2a2327;
  --glow: #ffc94a;
  /* the two players' own colours, for the switch between them */
  --apple: #fa2d48;
  --spotify: #1ed760;
  --s: min(320px, 70vw);
  background-color: var(--room);
  /* a dot floor, the same weave as the flight's stage */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect x='5' y='5' width='2' height='2' fill='%23ffffff' fill-opacity='0.08'/%3E%3C/svg%3E");
  color: var(--paper);
  transition: background-color 0.6s var(--step);
}
.menubar a {
  color: var(--ink);
}
.menubar a:hover {
  color: var(--paper);
}
.menu-end {
  margin-left: auto;
}
.menubar [aria-current] {
  background: var(--ink);
  color: var(--paper);
}

.shop {
  width: var(--frame);
  margin: 0 auto;
  padding: 72px 0 40px;
}
.shop-head {
  margin-bottom: 28px;
}
.pane-listen {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas:
    "crate deck"
    "crate notes";
  grid-template-rows: auto 1fr;
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: 28px;
  align-items: start;
}
.pane[hidden] {
  display: none;
}
.shop-kicker {
  display: inline-block;
  margin: 0 0 14px;
  padding: 3px 8px;
  background: var(--glow);
  color: var(--ink);
  font-size: 14px;
  transition: background-color 0.6s var(--step);
}
.shop-head h1 {
  margin: 0;
  font-weight: 600;
  /* smaller since the rooms came in, so a room starts in the first screen */
  font-size: clamp(44px, 6vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.055em;
}
.shop-sub {
  max-width: 34ch;
  margin: 16px 0 0;
  font-size: 19px;
  line-height: 1.4;
  color: rgba(254, 254, 254, 0.82);
}

/* ------------------------------------------------------------- crate */
.crate-wrap {
  grid-area: crate;
  position: sticky;
  top: 60px;
}
.crate {
  position: relative;
  height: calc(var(--s) * 1.62);
  perspective: 1100px;
  perspective-origin: 50% 12%;
  /* transparent, not none: Windows high-contrast mode drops the box-shadow
     focus below and draws this outline instead */
  outline: 2px solid transparent;
  touch-action: pan-y;
}
.crate:focus-visible {
  box-shadow: 0 0 0 2px var(--glow);
}
.crate-inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.rec {
  position: absolute;
  left: 50%;
  bottom: 20%;
  width: var(--s);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid var(--ink);
  background: #d9d4cf;
  transform-origin: 50% 100%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition:
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.3s ease,
    filter 0.3s ease;
  filter: brightness(0.62);
}
.rec.front {
  filter: none;
}
.rec:not(.front):hover {
  filter: brightness(0.85);
}
.rec.flipped,
.rec.gone {
  opacity: 0;
  pointer-events: none;
}
.rec .cover {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
/* the paper edge along the top of the sleeve, what you read in a bin */
.rec-edge {
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.35);
}
.crate-front {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  width: calc(var(--s) * 1.18);
  height: 25%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 14px 12px;
  background: var(--beige);
  color: var(--ink);
  border: 1px solid var(--ink);
  box-shadow:
    inset 0 0 0 3px var(--beige),
    inset 0 0 0 4px var(--ink),
    8px 8px 0 rgba(0, 0, 0, 0.35);
  z-index: 300;
  pointer-events: none;
}
/* two slats, so it reads as a crate and not a box */
.crate-front::before {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 34%;
  height: 1px;
  background: var(--ink);
  opacity: 0.5;
}
.crate-front span {
  font-size: 13px;
}
.crate-ctl {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.ctl {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--paper);
  background: transparent;
  color: var(--paper);
  font-size: 14px;
  cursor: pointer;
  transition:
    background 0.12s var(--step),
    color 0.12s var(--step);
}
.ctl:hover {
  background: var(--paper);
  color: var(--ink);
}
.ctl.play {
  background: var(--glow);
  border-color: var(--glow);
  color: var(--ink);
}
.ctl.play:hover {
  background: var(--paper);
  border-color: var(--paper);
}
.ctl.play:disabled,
.ctl.play:disabled:hover {
  background: transparent;
  border-color: var(--glow);
  color: var(--glow);
  cursor: default;
}

/* -------------------------------------------------------------- deck */
.deck {
  grid-area: deck;
}
.plinth {
  position: relative;
  padding: 22px 64px 22px 22px;
}
.platter {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2b2a2b;
  border: 1px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.25);
}
.disc {
  position: absolute;
  inset: 3%;
  width: 94%;
  height: 94%;
  border-radius: 50%;
  transition:
    translate 0.38s cubic-bezier(0.5, 0, 0.8, 0.4),
    opacity 0.38s ease;
}
.disc.off {
  translate: -70% 0;
  opacity: 0;
}
.spinning .disc {
  animation: spin 1.8s linear infinite;
}
@keyframes spin {
  to {
    rotate: 360deg;
  }
}
/* the light off the vinyl stays where the lamp is while the record turns */
.sheen {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: rgba(255, 255, 255, 0.1);
  border-left-color: rgba(255, 255, 255, 0.05);
  rotate: -20deg;
  pointer-events: none;
}
.arm {
  position: absolute;
  top: 10px;
  right: 8px;
  width: 64px;
  height: auto;
  transform-origin: 50% 11%;
  rotate: -4deg;
  transition: rotate 0.7s cubic-bezier(0.3, 0.7, 0.2, 1);
  pointer-events: none;
}
.arm.on {
  rotate: 24deg;
}
.arm-base {
  fill: #9a9a9a;
  stroke: var(--ink);
  stroke-width: 2;
}
.arm-pivot {
  fill: var(--ink);
}
.arm-rod {
  fill: none;
  stroke: #d9d9d9;
  stroke-width: 5;
  stroke-linejoin: round;
}
.arm-head {
  fill: var(--ink);
}
.knobs {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.knobs i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
}
.knobs span {
  font-size: 12px;
  color: var(--ink);
}

/* ------------------------------------------------------------- notes */
.notes {
  grid-area: notes;
}
.notes-body {
  padding: 18px 20px 22px;
  background: var(--paper);
  color: var(--ink);
  min-height: 200px;
}
.notes-body .meta {
  margin: 0 0 8px;
  font-size: 13px;
  color: #5b5357;
}
.notes-body h2 {
  margin: 0;
  font-weight: 600;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
  letter-spacing: -0.045em;
}
.notes-body .by {
  margin: 6px 0 0;
  font-size: 18px;
}
.notes-body .by span {
  color: #5b5357;
  font-size: 15px;
}
.notes-body h3 {
  margin: 20px 0 8px;
  font-size: 13px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--ink);
}
.notes-body p {
  margin: 0;
  font-size: 17px;
  line-height: 1.45;
}
.tracks {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: t;
  columns: 2;
  column-gap: 24px;
  font-size: 15px;
  line-height: 1.5;
}
.tracks li {
  counter-increment: t;
  break-inside: avoid;
  display: flex;
  gap: 8px;
}
.tracks li::before {
  content: counter(t, decimal-leading-zero);
  font-family: var(--pixel);
  font-size: 12px;
  line-height: 1.9;
  color: #8a817c;
}

.shop-foot {
  width: var(--frame);
  margin: 0 auto;
  padding: 24px 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: rgba(254, 254, 254, 0.7);
}

@media (max-width: 860px) {
  .room {
    --s: min(260px, 64vw);
  }
    .shop {
    padding-top: 56px;
  }
  .pane-listen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "crate" "deck" "notes";
  }
  .crate-wrap {
    position: static;
  }
  .plinth {
    padding: 16px 54px 16px 16px;
  }
  .arm {
    width: 52px;
  }
  .tracks {
    columns: 1;
  }
  .menubar a:not(:first-child):not([aria-current]) {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rec,
  .arm,
  .disc {
    transition: none;
  }
  .spinning .disc {
    animation: none;
  }
}

/* ------------------------------------------------------------- rooms
   Four rooms, 2026-09-26. The tabs are the doors; the shop floor is where
   you walk in. */
.rooms {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 22px;
}
.room-tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(254, 254, 254, 0.5);
  color: var(--paper);
  font-size: 14px;
  text-decoration: none;
  transition:
    background 0.12s var(--step),
    color 0.12s var(--step);
}
.room-tab:hover {
  background: var(--paper);
  color: var(--ink);
}
.room-tab[aria-current] {
  background: var(--glow);
  border-color: var(--glow);
  color: var(--ink);
}
.room-err {
  padding: 40px 0;
}
.room-err a,
.whole a,
.credit a {
  color: var(--glow);
}
.notes-body .whole a {
  color: var(--ink);
}

/* ---------------------------------------------------------- shop floor */
.pane-shop {
  position: relative;
}
.shop-stage {
  position: relative;
  height: min(72svh, 720px);
  min-height: 380px;
  border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.35);
  background: #1a1216;
  overflow: hidden;
  touch-action: none;
  /* transparent, not none: Windows high-contrast mode drops the box-shadow
     focus below and draws this outline instead */
  outline: 2px solid transparent;
}
.shop-stage:focus-visible {
  box-shadow:
    0 0 0 2px var(--glow),
    8px 8px 0 rgba(0, 0, 0, 0.35);
}
.shop-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
/* the year you are standing in, top left of the shop, a door into it */
.shop-year {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 2;
  display: grid;
  gap: 2px;
  min-height: 44px;
  padding: 6px 10px 7px;
  border: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s var(--step);
}
.shop-year b {
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--glow);
}
.shop-year:hover,
.shop-year:focus-visible {
  background: var(--plum);
}
.shop-app {
  justify-self: start;
  margin-top: 3px;
  padding: 1px 5px;
  color: var(--ink);
}
.shop-app[data-app="apple"] {
  background: var(--apple);
}
.shop-app[data-app="spotify"] {
  background: var(--spotify);
}
.stage-hint {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  margin: 0;
  padding: 6px 10px;
  max-width: calc(100% - 24px);
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  pointer-events: none;
}
.pulled {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 3;
  width: min(360px, calc(100% - 32px));
}
.pulled[hidden] {
  display: none;
}
.pulled-body {
  padding: 16px 18px 18px;
  background: var(--paper);
  color: var(--ink);
}
.pulled-body .meta {
  margin: 0 0 6px;
  font-size: 13px;
  color: #5b5357;
}
.pulled-body h2 {
  margin: 0;
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.045em;
}
.pulled-body .by {
  margin: 6px 0 14px;
  font-size: 17px;
}
.pulled-go {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.pulled-go .ctl {
  border-color: var(--ink);
  color: var(--ink);
}
.pulled-go .ctl:hover {
  background: var(--ink);
  color: var(--paper);
}
.pulled-go .ctl.play {
  grid-column: 1 / -1;
  background: var(--glow);
  border-color: var(--ink);
}

/* ------------------------------------------------------ listening room */
.lights {
  display: block;
  width: 100%;
  height: 28px;
  background: #1e1e1e;
  image-rendering: pixelated;
}
.transport {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: var(--win);
  color: var(--ink);
  border-top: 1px solid var(--ink);
}
.tbtn {
  min-width: 44px;
  min-height: 44px;
  padding: 0 10px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
  transition:
    background 0.12s var(--step),
    color 0.12s var(--step);
}
.tbtn:hover {
  background: var(--ink);
  color: var(--paper);
}
.tbtn.go {
  min-width: 72px;
  background: var(--glow);
}
.t-now {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 6px;
  padding-left: 6px;
}
.t-name {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.t-bar {
  display: block;
  height: 6px;
  background: var(--win-deep);
  border: 1px solid var(--ink);
}
.t-bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ink);
}
.credit {
  margin: 0;
  padding: 8px 12px;
  font-size: 12px;
  background: var(--ink);
  color: rgba(254, 254, 254, 0.75);
}
.arm.on {
  transition: rotate 0.5s linear;
}
.trk {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.trk:hover {
  text-decoration: underline;
}
.trk.now {
  font-weight: 600;
  background: var(--glow);
  padding: 0 4px;
}
/* a finger needs more than the 23 px line the tracks set */
@media (pointer: coarse) {
  .trk {
    padding: 8px 0;
  }
  .trk.now {
    padding: 8px 4px;
  }
}
.whole {
  margin: 16px 0 0;
  font-size: 13px;
}

/* ------------------------------------------------------------ the booth */
.booth {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.62fr) minmax(0, 1fr);
  grid-template-areas: "a mix b";
  gap: 16px;
  align-items: start;
}
.bdeck[data-deck="A"] {
  grid-area: a;
}
.bdeck[data-deck="B"] {
  grid-area: b;
}
.bmix {
  grid-area: mix;
}
.bdeck .win-bar .t {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bd-body,
.bm-body {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--win);
  color: var(--ink);
}
.bd-load {
  display: grid;
  /* minmax(0, ...) so a select's longest option cannot widen its column */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.booth select,
.pl-room select {
  width: 100%;
  min-height: 40px;
  min-width: 0;
  /* WebKit let a long record name spill past the select and counted it in
     the page's width, 16 px past an iPhone (2026-09-27); clipped, it ends
     in an ellipsis instead */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
  border: 1px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
}
.bd-wave,
.bd-over {
  display: block;
  width: 100%;
  image-rendering: pixelated;
  border: 1px solid var(--ink);
  cursor: pointer;
}
.bd-wave {
  height: 72px;
}
.bd-over {
  height: 24px;
}
.bd-mid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}
.bd-platter {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1;
  justify-self: center;
  image-rendering: pixelated;
  cursor: grab;
  touch-action: none;
}
.bd-platter.held {
  cursor: grabbing;
}
.bd-pitch {
  display: grid;
  justify-items: center;
  gap: 6px;
  font-size: 12px;
}
.bd-pitch input {
  writing-mode: vertical-lr;
  direction: rtl;
  height: 170px;
  width: 28px;
  accent-color: var(--ink);
}
.bd-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.bd-ctl .ctl,
.bm-body .ctl {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper);
}
.bd-ctl .ctl:hover,
.bm-body .ctl:hover {
  background: var(--ink);
  color: var(--paper);
}
/* sync engaged: lit like a deck that is playing */
.bd-ctl .ctl.sync.on {
  background: var(--ink);
  color: var(--glow);
}
.bm-mix {
  width: 100%;
}
.bd-ctl .ctl.play {
  background: var(--glow);
}
.bdeck.live .ctl.play {
  background: var(--ink);
  color: var(--glow);
}
.bd-bpm {
  margin-left: auto;
  font-size: 14px;
}
.bm-eq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.bm-ch {
  display: grid;
  gap: 6px;
}
.bm-knob,
.bm-fader,
.bm-x {
  display: grid;
  gap: 2px;
  font-size: 11px;
}
.bm-knob input,
.bm-fader input,
.bm-x input {
  width: 100%;
  accent-color: var(--ink);
}
.bm-fader input {
  writing-mode: vertical-lr;
  direction: rtl;
  height: 110px;
  justify-self: center;
  width: 28px;
}
.bm-x {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.bm-phase {
  width: 100%;
  height: 34px;
  image-rendering: pixelated;
  border: 1px solid var(--ink);
}
.bm-tip {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}
.bmix .credit {
  margin: 0 -12px -12px;
}

/* ----------------------------------------------------------- play along */
.pl-room {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: 16px;
  align-items: start;
}
.pl-body {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: var(--win);
  color: var(--ink);
}
.pl-f {
  display: grid;
  gap: 4px;
  font-size: 12px;
}
.pl-levels {
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.pl-levels .ctl,
.pl-body .ctl {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper);
  text-transform: capitalize;
}
.pl-levels .ctl:hover {
  background: var(--ink);
  color: var(--paper);
}
.pl-levels .ctl[aria-checked="true"] {
  background: var(--ink);
  color: var(--glow);
}
.pl-go.ctl.play {
  background: var(--glow);
  min-height: 52px;
  font-size: 16px;
}
.pl-go:disabled {
  opacity: 0.6;
  cursor: progress;
}
.pl-best {
  margin: 0;
  font-size: 13px;
}
.pl-best:empty {
  display: none;
}
.pl-how {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}
.pl-off input {
  accent-color: var(--ink);
}
.pl-body .credit {
  margin: 0 -14px -14px;
}
.pl-stage {
  position: relative;
  height: min(78svh, 760px);
  min-height: 420px;
  border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.35);
  background: #141014;
  overflow: hidden;
}
.pl-road {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  touch-action: none;
  outline: 2px solid transparent;
  outline-offset: -2px;
}
/* inset, because .pl-stage clips anything drawn outside the canvas */
.pl-road:focus-visible {
  outline-color: var(--glow);
}
.pl-hud {
  position: absolute;
  top: 12px;
  left: 12px;
  right: 12px;
  display: flex;
  gap: 12px;
  align-items: baseline;
  pointer-events: none;
  color: var(--paper);
  font-size: 18px;
}
.pl-mult {
  margin-left: auto;
  padding: 2px 8px;
  background: var(--paper);
  color: var(--ink);
}
.pl-mult[data-m="2"] {
  background: var(--gold);
}
.pl-mult[data-m="3"] {
  background: var(--coral);
}
.pl-mult[data-m="4"] {
  background: var(--pink);
}
.pane-play:not(.playing) .pl-hud {
  opacity: 0.4;
}
.pl-judge {
  position: absolute;
  left: 50%;
  top: 60%;
  translate: -50% 0;
  margin: 0;
  font-size: 22px;
  color: var(--paper);
  pointer-events: none;
  opacity: 0;
}
.pl-judge[data-kind="perfect"] {
  color: var(--yellow);
}
.pl-judge[data-kind="miss"] {
  color: var(--pink);
}
.pl-judge.pop {
  animation: judge 0.5s steps(5, end) forwards;
}
@keyframes judge {
  0% {
    opacity: 1;
    translate: -50% 0;
  }
  100% {
    opacity: 0;
    translate: -50% -14px;
  }
}
/* reduce, not remove: the verdict still fades, it just stops rising */
@keyframes judge-fade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* !important because os.css switches every animation off with !important
   under reduced motion; this rule is more specific, so it wins */
@media (prefers-reduced-motion: reduce) {
  .pl-judge.pop {
    animation: judge-fade 0.5s steps(5, end) forwards !important;
  }
}
.pl-end {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(380px, calc(100% - 32px));
  z-index: 2;
}
.pl-end[hidden] {
  display: none;
}
.pl-end-body {
  display: grid;
  gap: 8px;
  padding: 16px 18px 18px;
  background: var(--paper);
  color: var(--ink);
}
.pl-end-body p {
  margin: 0;
}
.pl-end-body .meta {
  font-size: 12px;
  color: #5b5357;
}
.pl-score {
  font-weight: 600;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.pl-stars {
  display: flex;
  gap: 4px;
}
.pl-stars i {
  width: 18px;
  height: 18px;
  background: var(--win-deep);
  clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%);
}
.pl-stars i.on {
  background: var(--gold);
}
.pl-stats {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 12px;
  margin: 4px 0;
  font-size: 15px;
}
.pl-stats dt {
  font-size: 12px;
  color: #5b5357;
}
.pl-stats dd {
  margin: 0;
  text-align: right;
}
.pl-end-go {
  display: flex;
  gap: 6px;
}
.pl-end-go .ctl {
  flex: 1;
  border-color: var(--ink);
  color: var(--ink);
}
.pl-end-go .ctl.play {
  background: var(--glow);
}

@media (max-width: 1080px) {
  .booth {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "a b" "mix mix";
  }
}
@media (max-width: 860px) {
  .booth {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "a" "mix" "b";
  }
  .pl-room {
    grid-template-columns: minmax(0, 1fr);
  }
  .shop-stage {
    height: 64svh;
  }
  .pl-stage {
    height: 72svh;
  }
  .pulled {
    top: auto;
    bottom: 56px;
    right: 8px;
    width: calc(100% - 16px);
  }
  .bd-pitch input {
    height: 130px;
  }
}

/* ------------------------------------------------------------- years
   05 The years, 2026-09-26, on jakedev.org's pattern: a list of eras, each
   row its line and a contact sheet of its covers; an era opens to its line,
   the big number, the moments and the roll. */
.eras-list .era-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.eras-src {
  margin-left: auto;
  color: rgba(254, 254, 254, 0.6);
}
.era-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1.3fr) minmax(0, 1fr) 72px;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 96px;
  padding: 14px 16px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s var(--step);
}
.era-row:hover,
.era-row:focus-visible {
  background: var(--win-deep);
}
.er-n {
  align-self: start;
  font-size: 14px;
}
.er-name b {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.er-name i {
  display: block;
  margin-top: 4px;
  font-style: normal;
  font-size: 16px;
  color: #4a4a4a;
}
.er-line {
  display: grid;
  gap: 6px;
}
.er-line canvas {
  width: 100%;
  height: 40px;
  background: var(--ink);
}
.er-line .px {
  font-size: 13px;
  color: #4a4a4a;
}
.er-sheet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 72px;
  height: 72px;
  background: var(--ink);
}
.er-sheet span,
.er-sheet canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}
/* the switch from Apple Music to Spotify, a band across the list */
.era-switch {
  display: grid;
  border-bottom: 1px solid var(--ink);
}
.sw-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 7px 16px;
  font-size: 13px;
  color: var(--ink);
}
.sw-strip b {
  font-weight: 400;
  text-transform: uppercase;
}
.sw-strip[data-app="apple"] {
  background: var(--apple);
}
.sw-strip[data-app="spotify"] {
  background: var(--spotify);
}
.sw-mid {
  display: grid;
  gap: 6px;
  padding: 14px 16px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  line-height: 1.45;
}
.sw-mid b {
  font-weight: 400;
  font-size: 13px;
  text-transform: uppercase;
  color: var(--glow);
}
.era-app {
  margin-right: 12px;
  padding: 2px 6px;
  color: var(--ink);
}
.era-app[data-app="apple"] {
  background: var(--apple);
}
.era-app[data-app="spotify"] {
  background: var(--spotify);
}
.eras-how {
  margin: 0;
  padding: 12px 16px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #4a4a4a;
}

.era[hidden],
.eras-list[hidden] {
  display: none;
}
.era {
  display: grid;
  gap: 28px;
  scroll-margin-top: 64px;
}
.era-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.era-count {
  font-size: 14px;
  color: rgba(254, 254, 254, 0.7);
}
.era-head h2 {
  margin: 0;
  font-weight: 600;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.05em;
}
.era-head p {
  margin: 10px 0 0;
  font-size: 19px;
  color: rgba(254, 254, 254, 0.82);
}
.era-chart {
  display: block;
  width: 100%;
  height: clamp(110px, 16vw, 180px);
  background: var(--ink);
}
.era-axis {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px 8px;
  font-size: 13px;
}
.era-axis .pk {
  text-align: center;
}
.era-big b {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(88px, 14vw, 180px);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--glow);
  transition: color 0.6s var(--step);
}
.era-big span {
  display: block;
  margin-top: 10px;
  font-size: 18px;
}
.era-big p {
  margin: 8px 0 0;
  font-size: 14px;
  color: rgba(254, 254, 254, 0.7);
}
.era-src {
  max-width: 70ch;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(254, 254, 254, 0.7);
}
.era-src b {
  font-weight: 400;
  color: var(--glow);
}
.moments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: rgba(254, 254, 254, 0.25);
  border: 1px solid rgba(254, 254, 254, 0.25);
}
.moment {
  padding: 18px 18px 20px;
  background: var(--room);
  transition: background-color 0.6s var(--step);
}
.m-d {
  font-size: 13px;
  color: var(--glow);
}
.moment h3 {
  margin: 8px 0 0;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.moment p {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1.45;
  color: rgba(254, 254, 254, 0.82);
}
.m-recs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}
.roll-hint {
  margin-left: auto;
  color: rgba(254, 254, 254, 0.6);
}
.frames {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px 14px;
  margin: 0;
  padding: 16px;
  list-style: none;
}
.frames li {
  display: grid;
  gap: 4px;
  align-content: start;
}
.frame {
  display: grid;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.f-cover {
  position: relative;
  display: block;
  aspect-ratio: 1;
  background: var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 2px;
  transition: outline-color 0.12s var(--step);
}
.f-cover canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.f-n {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 2px 5px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
}
.frame:hover .f-cover,
.frame:focus-visible .f-cover {
  outline: 3px solid var(--ink);
}
.frame.on .f-n {
  background: var(--glow);
  color: var(--ink);
}
.frame[data-none] {
  cursor: default;
}
.frame[data-none] .f-cover {
  background: transparent;
  outline: 2px dotted var(--ink);
}
.f-bar {
  display: block;
  height: 3px;
  background: var(--win-deep);
}
.f-bar i {
  display: block;
  width: 0;
  height: 100%;
  background: var(--ink);
}
.frame:not(.on) .f-bar i {
  width: 0 !important;
}
.f-t {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
}
.f-a {
  font-size: 14px;
  line-height: 1.2;
  color: #4a4a4a;
}
.f-note,
.f-ver,
.f-sp {
  font-size: 12px;
  line-height: 1.35;
  color: #4a4a4a;
}
.f-sp {
  justify-self: start;
  color: var(--ink);
  text-underline-offset: 3px;
}
.f-sp:hover {
  background: var(--ink);
  color: var(--paper);
}
.roll-credit {
  margin: -12px 0 0;
  font-size: 12px;
  color: rgba(254, 254, 254, 0.7);
}
.era-lists {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.era-lists > .px:first-child {
  width: 100%;
  margin-bottom: 4px;
  font-size: 13px;
  color: rgba(254, 254, 254, 0.7);
}
.era-lists .ctl {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.era-steps {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 760px) {
  .era-row {
    grid-template-columns: 30px minmax(0, 1fr) 56px;
    grid-template-areas: "n name sheet" "n line line";
    gap: 10px 12px;
  }
  .er-n {
    grid-area: n;
  }
  .er-name {
    grid-area: name;
  }
  .er-line {
    grid-area: line;
  }
  .er-sheet {
    grid-area: sheet;
    width: 56px;
    height: 56px;
  }
  .era-axis .pk {
    display: none;
  }
  .frames {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px;
  }
  .eras-src,
  .roll-hint {
    display: none;
  }
}