:root {
  color-scheme: dark;
  --wall-black: #050608;
  --wall-panel: #0b0e12;
  --wall-panel-raised: #12171d;
  --wall-white: #f7fafc;
  --wall-muted: #aeb7c2;
  --wall-red: #f22732;
  --wall-cyan: #19e7f2;
  --wall-grid-gap: 4px;
}

.wall-page,
.wall-page * {
  box-sizing: border-box;
}

.wall-page {
  min-width: 320px;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  color: var(--wall-white);
  background: var(--wall-black);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

.wall-masthead {
  position: relative;
  z-index: 20;
  min-width: 0;
  min-height: 104px;
  padding: 12px 18px 11px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 18px;
  background: var(--wall-panel);
  border-top: 5px solid var(--wall-red);
  border-bottom: 1px solid #27313a;
}

.wall-masthead::before {
  content: "";
  position: absolute;
  top: -5px;
  right: 0;
  width: 22%;
  height: 5px;
  background: var(--wall-cyan);
}

.wall-masthead > div:first-child {
  min-width: 0;
}

.wall-kicker,
.wall-masthead h1,
.wall-masthead p,
.wall-join span,
.wall-tile__credit {
  margin: 0;
  letter-spacing: 0;
}

.wall-kicker {
  color: var(--wall-cyan);
  font-size: 0.72rem;
  line-height: 1.15;
  font-weight: 850;
  text-transform: uppercase;
}

.wall-masthead h1 {
  margin-top: 3px;
  overflow: hidden;
  display: -webkit-box;
  overflow-wrap: anywhere;
  color: var(--wall-white);
  font-size: 1.7rem;
  line-height: 1.03;
  font-weight: 850;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#wallPrompt {
  margin-top: 5px;
  overflow: hidden;
  display: -webkit-box;
  color: var(--wall-muted);
  font-size: 0.9rem;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.wall-join {
  min-width: 0;
  display: grid;
  grid-template-columns: 64px auto;
  align-items: center;
  gap: 10px;
  color: var(--wall-white);
}

.wall-join img {
  width: 64px;
  height: 64px;
  display: block;
  object-fit: contain;
  background: #ffffff;
  border: 4px solid #ffffff;
  border-radius: 2px;
}

.wall-join span {
  max-width: 7rem;
  color: var(--wall-white);
  font-size: 0.77rem;
  line-height: 1.1;
  font-weight: 800;
  text-transform: uppercase;
}

.wall-join.is-unavailable img {
  visibility: hidden;
}

#showModeButton {
  min-width: 108px;
  min-height: 42px;
  padding: 8px 13px;
  color: var(--wall-white);
  background: transparent;
  border: 1px solid var(--wall-red);
  border-radius: 3px;
  font: inherit;
  font-size: 0.76rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}

#showModeButton:hover,
#showModeButton:focus-visible,
#showModeButton[aria-pressed="true"] {
  color: #ffffff;
  background: var(--wall-red);
  outline: none;
}

#showModeButton:focus-visible {
  box-shadow: 0 0 0 2px var(--wall-panel), 0 0 0 4px var(--wall-cyan);
}

.wall-grid,
.wall-empty {
  position: relative;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
}

.wall-grid {
  position: relative;
  padding: var(--wall-grid-gap);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: var(--wall-grid-gap);
  overflow: hidden;
  background: var(--wall-black);
}

.wall-grid[hidden],
.wall-empty[hidden] {
  display: none;
}

.wall-grid[data-layout="0"] {
  grid-template-areas:
    "one one one one two two two three three three three three"
    "one one one one two two two three three three three three"
    "one one one one two two two three three three three three"
    "six six six six four four four four five five five five"
    "six six six six four four four four five five five five"
    "six six six six four four four four five five five five";
}

.wall-grid[data-layout="1"] {
  grid-template-areas:
    "one one one one one two two two three three three three"
    "one one one one one two two two three three three three"
    "one one one one one four four four four four four four"
    "one one one one one four four four four four four four"
    "six six six six six five five five five five five five"
    "six six six six six five five five five five five five";
}

.wall-grid[data-layout="2"] {
  grid-template-areas:
    "one one one two two two two two two three three three"
    "one one one two two two two two two three three three"
    "four four four two two two two two two five five five"
    "four four four two two two two two two five five five"
    "four four four six six six six six six five five five"
    "four four four six six six six six six five five five";
}

.wall-grid[data-layout="3"] {
  grid-template-areas:
    "one one one one one one two two two three three three"
    "one one one one one one two two two three three three"
    "one one one one one one two two two three three three"
    "four four four five five five six six six six six six"
    "four four four five five five six six six six six six"
    "four four four five five five six six six six six six";
}

.wall-tile:nth-child(1) { grid-area: one; }
.wall-tile:nth-child(2) { grid-area: two; }
.wall-tile:nth-child(3) { grid-area: three; }
.wall-tile:nth-child(4) { grid-area: four; }
.wall-tile:nth-child(5) { grid-area: five; }
.wall-tile:nth-child(6) { grid-area: six; }

.wall-tile {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  contain: paint;
  isolation: isolate;
  background: var(--wall-panel-raised);
  border: 1px solid #202932;
  border-radius: 3px;
  transform-origin: top left;
}

.wall-tile::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  width: 34px;
  height: 3px;
  background: var(--wall-red);
  pointer-events: none;
}

.wall-tile:nth-child(even)::after {
  right: 0;
  left: auto;
  background: var(--wall-cyan);
}

.wall-tile--qr {
  container-name: qr-tile;
  container-type: size;
  background: var(--wall-panel);
}

.wall-qr__background,
.wall-qr__shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wall-qr__background {
  z-index: 0;
  display: block;
  object-fit: cover;
}

.wall-qr__shade {
  z-index: 1;
  background: linear-gradient(90deg, rgba(5, 6, 8, 0.9), rgba(5, 6, 8, 0.18) 78%);
}

.wall-qr__logo {
  position: absolute;
  z-index: 2;
  top: 5%;
  left: 5%;
  width: 35%;
  height: 29%;
  display: block;
  object-fit: contain;
  object-position: left top;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.wall-qr__copy {
  position: absolute;
  z-index: 2;
  right: 60%;
  bottom: 7%;
  left: 5%;
  min-width: 0;
  display: grid;
  gap: 7px;
  color: #ffffff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
}

.wall-qr__copy span,
.wall-qr__copy strong,
.wall-qr__copy p {
  margin: 0;
  overflow-wrap: anywhere;
  letter-spacing: 0;
}

.wall-qr__copy span {
  color: var(--wall-cyan);
  font-size: 0.82rem;
  line-height: 1.1;
  font-weight: 900;
  text-transform: uppercase;
}

.wall-qr__copy strong {
  overflow: hidden;
  display: -webkit-box;
  font-size: 2.15rem;
  line-height: 0.98;
  font-weight: 900;
  text-transform: uppercase;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.wall-qr__copy p {
  font-size: 1.02rem;
  line-height: 1.05;
  font-weight: 850;
}

.wall-qr__code {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 4%;
  width: 46%;
  width: min(53cqw, 84cqh);
  aspect-ratio: 1;
  padding: 8px;
  background: #ffffff;
  border: 3px solid #ffffff;
  border-radius: 2px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.36);
  transform: translateY(-50%);
}

.wall-qr__code img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.wall-tile--qr.is-unavailable .wall-qr__code {
  display: none;
}

@container qr-tile (max-width: 520px) {
  .wall-qr__logo {
    width: 37%;
    height: 27%;
  }

  .wall-qr__copy {
    right: 58%;
    gap: 4px;
  }

  .wall-qr__copy span {
    font-size: 0.55rem;
  }

  .wall-qr__copy strong {
    font-size: 1.15rem;
  }

  .wall-qr__copy p {
    font-size: 0.65rem;
  }

  .wall-qr__code {
    right: 3%;
    padding: 4px;
    border-width: 2px;
  }
}

@container qr-tile (max-width: 260px) {
  .wall-qr__copy {
    right: 59%;
    gap: 2px;
  }

  .wall-qr__copy span {
    font-size: 0.42rem;
  }

  .wall-qr__copy strong {
    font-size: 0.78rem;
  }

  .wall-qr__copy p {
    font-size: 0.48rem;
  }

  .wall-qr__code {
    padding: 2px;
  }
}

.wall-tile__standby,
.wall-tile__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wall-tile__standby {
  z-index: 0;
  display: grid;
  place-content: center;
  color: #3b4651;
  background: var(--wall-panel-raised);
  text-align: center;
  line-height: 0.8;
  pointer-events: none;
}

.wall-tile__standby strong {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 0;
}

.wall-tile__standby span {
  margin-top: 7px;
  color: var(--wall-cyan);
  font-size: 0.65rem;
  font-weight: 850;
  letter-spacing: 0;
}

.wall-tile__media {
  z-index: 1;
  display: block;
  object-fit: cover;
  object-position: var(--focus-x, 50%) var(--focus-y, 50%);
  background: var(--wall-panel-raised);
  backface-visibility: hidden;
}

.wall-tile img.wall-tile__media.is-current {
  animation: wall-media-drift 18s ease-in-out alternate infinite;
}

.wall-tile:nth-child(3n + 2) img.wall-tile__media.is-current {
  animation-direction: alternate-reverse;
  animation-duration: 21s;
}

.wall-tile__credit {
  position: absolute;
  z-index: 6;
  right: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 5px 7px 5px 8px;
  overflow: hidden;
  color: #ffffff;
  background: rgba(5, 6, 8, 0.84);
  border-left: 3px solid var(--wall-cyan);
  border-radius: 2px;
  font-size: 0.7rem;
  line-height: 1.1;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.wall-tile.is-video-paused {
  cursor: pointer;
}

.wall-tile.is-video-paused::before {
  content: "Tap to play";
  position: absolute;
  z-index: 7;
  top: 10px;
  right: 10px;
  padding: 5px 7px;
  color: #ffffff;
  background: rgba(5, 6, 8, 0.88);
  border: 1px solid var(--wall-red);
  border-radius: 2px;
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
}

.wall-empty {
  place-self: stretch;
  display: grid;
  place-items: center;
  padding: 32px;
  color: var(--wall-muted);
  background: var(--wall-black);
  border-top: 1px solid #1c242c;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
}

.wall-empty::before {
  content: "";
  position: absolute;
  width: 72px;
  height: 4px;
  margin-top: -52px;
  background: var(--wall-cyan);
}

.wall-empty[data-state="error"]::before,
.wall-page[data-connection="degraded"] .wall-masthead::before {
  background: var(--wall-red);
}

.wall-page.is-show-mode {
  grid-template-rows: minmax(0, 1fr);
}

.wall-page.is-show-mode .wall-masthead {
  display: none;
}

.wall-page.is-show-mode .wall-grid,
.wall-page.is-show-mode .wall-empty {
  grid-row: 1;
}

@keyframes wall-media-drift {
  from { transform: scale(1.01) translate3d(-0.25%, -0.2%, 0); }
  to { transform: scale(1.055) translate3d(0.25%, 0.2%, 0); }
}

@media (max-width: 760px), (orientation: portrait) and (max-aspect-ratio: 4 / 5) {
  :root {
    --wall-grid-gap: 3px;
  }

  .wall-masthead {
    min-height: 102px;
    padding: 9px 10px 8px;
    grid-template-columns: minmax(0, 1fr) 102px;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 5px;
  }

  .wall-masthead > div:first-child {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .wall-kicker {
    font-size: 0.62rem;
  }

  .wall-masthead h1 {
    font-size: 1.18rem;
    line-height: 1.05;
  }

  #wallPrompt {
    font-size: 0.72rem;
    -webkit-line-clamp: 2;
  }

  .wall-join {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 6px;
  }

  .wall-join img {
    width: 46px;
    height: 46px;
    border-width: 3px;
  }

  .wall-join span {
    font-size: 0.58rem;
  }

  #showModeButton {
    grid-column: 2;
    grid-row: 2;
    width: 102px;
    min-width: 0;
    min-height: 31px;
    padding: 5px 4px;
    font-size: 0.62rem;
  }

  .wall-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(12, minmax(0, 1fr));
  }

  .wall-grid[data-layout="0"] {
    grid-template-areas:
      "one one one one one one"
      "one one one one one one"
      "one one one one one one"
      "two two two three three three"
      "two two two three three three"
      "two two two three three three"
      "four four four four four four"
      "four four four four four four"
      "four four four four four four"
      "five five five six six six"
      "five five five six six six"
      "five five five six six six";
  }

  .wall-grid[data-layout="1"] {
    grid-template-areas:
      "one one one two two two"
      "one one one two two two"
      "one one one two two two"
      "three three three three three three"
      "three three three three three three"
      "three three three three three three"
      "four four four five five five"
      "four four four five five five"
      "four four four five five five"
      "six six six six six six"
      "six six six six six six"
      "six six six six six six";
  }

  .wall-grid[data-layout="2"] {
    grid-template-areas:
      "one one one one two two"
      "one one one one two two"
      "one one one one two two"
      "one one one one two two"
      "three three four four four four"
      "three three four four four four"
      "three three four four four four"
      "three three four four four four"
      "five five five six six six"
      "five five five six six six"
      "five five five six six six"
      "five five five six six six";
  }

  .wall-grid[data-layout="3"] {
    grid-template-areas:
      "one one one two two two"
      "one one one two two two"
      "one one one two two two"
      "three three three three three three"
      "three three three three three three"
      "three three three three three three"
      "three three three three three three"
      "three three three three three three"
      "four four five five six six"
      "four four five five six six"
      "four four five five six six"
      "four four five five six six";
  }

  .wall-tile__credit {
    right: 5px;
    bottom: 5px;
    max-width: calc(100% - 10px);
    padding: 4px 5px;
    font-size: 0.6rem;
  }

}

@media (max-width: 390px) {
  .wall-masthead {
    grid-template-columns: minmax(0, 1fr) 94px;
  }

  .wall-join {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .wall-join img {
    width: 44px;
    height: 44px;
  }

  #showModeButton {
    width: 94px;
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  .wall-masthead {
    min-height: 76px;
    padding-top: 7px;
    padding-bottom: 6px;
  }

  .wall-masthead h1 {
    font-size: 1.25rem;
  }

  #wallPrompt {
    max-width: 60rem;
    font-size: 0.72rem;
    -webkit-line-clamp: 1;
  }

  .wall-join {
    grid-template-columns: 48px auto;
  }

  .wall-join img {
    width: 48px;
    height: 48px;
    border-width: 3px;
  }
}

@media (min-width: 1500px) {
  .wall-masthead {
    min-height: 112px;
    padding-right: 28px;
    padding-left: 28px;
    gap: 26px;
  }

  .wall-masthead h1 {
    font-size: 2rem;
  }

  #wallPrompt {
    font-size: 1rem;
  }

  .wall-join {
    grid-template-columns: 72px auto;
  }

  .wall-join img {
    width: 72px;
    height: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wall-page *,
  .wall-page *::before,
  .wall-page *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}