/* Screen 01 — Landing. */

.hero {
  padding: 68px 40px 52px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 44px;
  align-items: center;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.hero__title {
  margin: 0;
  font-size: 44px;
  line-height: 1.12;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: #fff;
}

.hero__lede {
  margin: 0;
  font-size: 18px;
  line-height: 1.65;
  color: #a8a8a8;
  max-width: 46ch;
}

.hero__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.promise {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  margin-top: 10px;
}

.promise__tag {
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 6px 10px;
  border-radius: var(--r-ui);
  white-space: nowrap;
}

.promise__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-2);
}

.promise--footer {
  margin: 0;
}

.landing-credit {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 9px;
  margin: 40px auto 40px;
  color: var(--muted-3);
  font-size: 12px;
  text-decoration: none;
  transition: color 120ms ease;
}

.landing-credit img {
  display: block;
  width: 70px;
  height: auto;
  opacity: 0.72;
  transition: opacity 120ms ease;
}

.landing-credit:hover,
.landing-credit:focus-visible {
  color: var(--text-dim);
}

.landing-credit:hover img,
.landing-credit:focus-visible img {
  opacity: 1;
}

.hero__aside {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

/* The landing disk takes its body and outline from the preview panels, while
   its working details keep the component's neutral drawing colours. */
.hero__aside .disk {
  --disk-edge: var(--border);
  background: var(--sunken);
}

.hero__caption {
  font-size: 13px;
  color: var(--muted-3);
}

/* A representative room view makes the landing page explain the product before
   asking a person to create anything. It remains clearly framed as platform
   chrome, because code inside the real frame is allowed to draw anything. */
.landing-showcase {
  margin: 8px 40px 0;
  border-top: 1px solid var(--border);
}

.landing-feature {
  display: grid;
  grid-template-columns: minmax(210px, 0.65fr) minmax(0, 1.35fr);
  align-items: center;
  gap: 38px;
  padding: 48px 0 52px;
}

.landing-feature + .landing-feature {
  border-top: 1px solid var(--border);
}

/* Alternating the visual anchor keeps a long landing page from becoming one
   repeated column. The source order remains text then preview for narrow
   screens and assistive technology. */
.landing-feature--reverse {
  grid-template-columns: minmax(0, 1.35fr) minmax(210px, 0.65fr);
}

.landing-feature--reverse .landing-showcase__head {
  grid-column: 2;
  grid-row: 1;
}

.landing-feature--reverse .feature-card,
.landing-feature--reverse .showcase-grid {
  grid-column: 1;
  grid-row: 1;
}

.landing-showcase__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin: 0;
  min-width: 0;
}

.landing-showcase__head h2 {
  margin: 8px 0 0;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--text);
  overflow-wrap: anywhere;
}

.landing-showcase__head p {
  max-width: 40ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted-2);
}

.showcase-grid {
  display: block;
}

.room-shot {
  overflow: hidden;
}

.shot__bar,
.mini-shot__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 43px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.shot__identity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-size: 12px;
}

.shot__identity strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.shot__state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  font: 9px var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--ok-fg);
}

.shot__state span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ok-fg);
  box-shadow: 0 0 10px rgba(169, 192, 169, 0.55);
}

.shot__code {
  color: var(--muted-3);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.room-shot__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
}

.game-shot {
  padding: 11px;
  min-width: 0;
  border-right: 1px solid var(--border);
}

.game-shot__label,
.room-shot__side-label {
  display: block;
  margin-bottom: 7px;
  font: 9px var(--font-mono);
  letter-spacing: 0.1em;
  color: var(--muted-3);
}

.game-shot__world {
  position: relative;
  min-height: 218px;
  overflow: hidden;
  border: 1px solid #3d4247;
  border-radius: 2px;
  background: #191c1e;
}

.game-shot__grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(203, 220, 219, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(203, 220, 219, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, black, transparent 140%);
}

.game-shot__player {
  position: absolute;
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font: 11px var(--font-mono);
  background: #191c1e;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.025), 0 0 24px currentColor;
}

.game-shot__player--one { top: 30%; left: 28%; color: #d6c493; }
.game-shot__player--two { top: 58%; left: 59%; color: #a9c0a9; }
.game-shot__player--three { top: 21%; right: 16%; color: #a6b8cf; }
.game-shot__player--four { bottom: 13%; left: 12%; color: #c7a6c4; }

.game-shot__spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ededed;
  box-shadow: 0 0 16px #ededed;
}

.game-shot__spark--one { top: 33%; left: 45%; }
.game-shot__spark--two { bottom: 20%; right: 24%; }

.game-shot__score {
  position: absolute;
  top: 10px;
  left: 11px;
  right: 11px;
  display: flex;
  justify-content: space-between;
  color: #cfd5d5;
  font: 10px var(--font-mono);
  letter-spacing: 0.12em;
}

.game-shot__score strong { font-weight: 400; color: var(--warn-fg); }

.room-shot__side {
  padding: 12px 10px;
  min-width: 0;
}

.room-shot__people,
.room-shot__chat {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.room-shot__people span,
.room-shot__chat span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  color: var(--muted-2);
}

.room-shot__people span { display: flex; align-items: center; gap: 6px; color: var(--text-dim); }

.preview-avatar {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 2px;
  background: #555;
}

.preview-avatar--one { background: #807758; }
.preview-avatar--two { background: #506858; }
.preview-avatar--three { background: #5b687c; }
.preview-avatar--four { background: #775f73; }

.room-shot__chat {
  margin-top: 15px;
  padding-top: 11px;
  border-top: 1px solid var(--border);
}

.room-shot__chat b { color: var(--muted); font-weight: 500; }

.mini-shot__more { font-size: 10px; color: var(--muted-3); }

.feature-card {
  overflow: hidden;
}

.feature-card__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 43px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.studio-shot {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(185px, 0.65fr);
  min-height: 184px;
}

.studio-shot__code {
  display: grid;
  align-content: center;
  gap: 11px;
  padding: 24px 28px;
  background: linear-gradient(100deg, #1e2121, var(--sunken));
  color: #c9cfcc;
  font-size: 12px;
}

.studio-shot__code span { white-space: nowrap; }
.studio-shot__code i { display: inline-block; width: 29px; color: #5c5c5c; font-style: normal; }

.studio-shot__manifest {
  padding: 19px 18px;
  border-left: 1px solid var(--border);
}

.studio-shot__manifest dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.studio-shot__manifest dl div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font: 10px var(--font-mono);
}

.studio-shot__manifest dt { color: var(--muted-3); }
.studio-shot__manifest dd { margin: 0; color: var(--text-dim); }

.studio-shot__note {
  display: block;
  margin-top: 20px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted-3);
}

.library-shot {
  display: grid;
  grid-template-columns: 1fr;
}

.library-shot__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 18px 16px;
}

.library-shot__item + .library-shot__item {
  border-top: 1px solid var(--border);
}

.library-shot__item > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.library-shot__item strong {
  overflow: hidden;
  color: var(--text-dim);
  font: 12px var(--font-mono);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-shot__item > div span {
  color: var(--muted-3);
  font-size: 9px;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.library-shot__item > .tag {
  margin-left: auto;
}

.hero__diskmeta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.diskcard__tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.notfound {
  padding: 68px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.notfound p {
  margin: 0;
  font-size: 18px;
  color: var(--muted);
}

/* M1: the same content at 390px. */
@media (max-width: 760px) {
  .hero {
    padding: 40px 16px 48px;
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .hero__title {
    font-size: 34px;
  }

  /* On a narrow screen the disk competes with the headline for the first
     viewport. The room previews below still show what a disk becomes. */
  .hero__aside {
    display: none;
  }

  .hero__lede {
    font-size: 16px;
  }

  .notfound {
    padding: 48px 16px;
  }

  .landing-showcase {
    margin: 8px 16px 0;
  }

  .landing-feature {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 40px 0;
  }

  .landing-feature--reverse {
    grid-template-columns: 1fr;
  }

  .landing-feature--reverse .landing-showcase__head,
  .landing-feature--reverse .feature-card,
  .landing-feature--reverse .showcase-grid {
    grid-column: auto;
    grid-row: auto;
  }

  .landing-showcase__head h2 {
    font-size: 24px;
  }

  .showcase-grid {
    grid-template-columns: 1fr;
  }

  .studio-shot {
    grid-template-columns: minmax(0, 1.3fr) minmax(165px, 0.7fr);
  }

  .studio-shot__code {
    padding: 22px 18px;
  }

  .library-shot__item {
    gap: 9px;
    padding: 15px 10px;
  }
}

@media (max-width: 460px) {
  .room-shot__body {
    grid-template-columns: 1fr;
  }

  .game-shot {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .game-shot__world {
    min-height: 200px;
  }

  .room-shot__side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .room-shot__side-label { grid-column: 1 / -1; margin-bottom: 0; }
  .room-shot__chat { margin: 0; padding: 0; border-top: 0; }

  .studio-shot {
    grid-template-columns: 1fr;
  }

  .studio-shot__manifest {
    border-top: 1px solid var(--border);
    border-left: 0;
  }

  .studio-shot__note {
    margin-top: 12px;
  }

}