#b-top-bar {
  grid-template-columns: 20% 60% 20%;
}

#b-top-bar .theme-toggle {
  display: none;
}

#b-top-bar .header-right {
  justify-self: end;
  padding-right: 3cqw;
}

.landing {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  height: 100%;
  padding: 4cqh 6cqw 10cqh;
  text-align: center;
}

.landing-actions {
  display: grid;
  place-items: center;
  gap: 4cqh;
}

.today-puzzle {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 24ch;
  padding: 4cqh 5cqw 3cqh;
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  border-radius: 50%;
  filter: drop-shadow(0 1cqh 1.5cqh rgb(0 0 0 / 22%));
  transition: scale 180ms ease, filter 180ms ease;
}

.today-title {
  color: transparent;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 6.5cqh;
  font-weight: 700;
  line-height: 1.1;
  background: linear-gradient(105deg, var(--text) 0 38%, var(--highlight2) 46%, white 50%, var(--highlight2) 54%, var(--text) 62% 100%);
  background-size: 260% 100%;
  background-clip: text;
  text-shadow: 0 0.25cqh 1.2cqh color-mix(in srgb, var(--panel) 65%, transparent);
  animation: trace-title 2200ms 350ms ease-out both;
}

.today-puzzle::after {
  position: absolute;
  bottom: 2.4cqh;
  left: 18%;
  width: 64%;
  height: 0.18cqh;
  content: "";
  background: linear-gradient(90deg, transparent, var(--highlight2), white, transparent);
  box-shadow: 0 0 1.2cqh var(--highlight2);
  transform: scaleX(0);
  transform-origin: left;
  animation: trail-line 1100ms 1100ms ease-out both;
}

.play-cue {
  margin-top: 1.4cqh;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.85em;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.64;
  transform: translateY(0.6cqh);
  transition: opacity 180ms ease, transform 180ms ease;
}

.today-puzzle:hover,
.today-puzzle:focus-visible {
  scale: 1.045;
  filter: drop-shadow(0 1.2cqh 2.2cqh rgb(0 0 0 / 30%)) drop-shadow(0 0 1.4cqh var(--highlight2));
  outline: none;
}

.today-puzzle:hover .play-cue,
.today-puzzle:focus-visible .play-cue {
  opacity: 1;
  transform: translateY(0);
}

.today-puzzle:active {
  scale: 0.985;
}

.archive-link {
  padding: 1.2cqh 2cqw;
  color: var(--text);
  font-weight: 700;
  text-decoration-thickness: 0.12em;
  text-underline-offset: 0.35em;
  text-shadow: 0 0.15cqh 0.5cqh var(--panel), 0 0 1cqh var(--panel);
}

.archive-link:hover,
.archive-link:focus-visible {
  color: var(--highlight2);
  outline: 0.25cqh solid var(--highlight2);
  outline-offset: 0.5cqh;
}

.landing-menu-button,
.landing-menu button,
.landing-help button {
  color: var(--text);
  font-weight: 700;
  background: var(--button);
  border: 0.18cqh solid var(--line);
  cursor: pointer;
}

.landing-menu-button {
  display: grid;
  place-items: center;
  width: 3.2em;
  height: 3.2em;
  padding: 0;
  font-size: 1.1em;
  border-radius: 50%;
  box-shadow: 0 0.6cqh 1.4cqh rgb(0 0 0 / 28%);
}

.landing-menu,
.landing-help {
  box-sizing: border-box;
  max-width: min(82cqw, 34rem);
  padding: 3cqh 3cqw;
  color: var(--text);
  background: var(--panel);
  border: 0.25cqh solid var(--highlight1);
  border-radius: 2cqh;
  box-shadow: 0 2cqh 6cqh rgb(0 0 0 / 35%);
}

.landing-menu::backdrop,
.landing-help::backdrop {
  background: rgb(0 0 0 / 55%);
  backdrop-filter: blur(0.4cqh);
}

.landing-menu h2,
.landing-help h2 {
  margin-top: 0;
}

.landing-menu-list {
  display: grid;
  gap: 1cqh;
  margin: 2cqh 0 3cqh;
}

.landing-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3cqw;
  width: 100%;
  padding: 1.4cqh 1.2cqw;
  text-align: left;
  border-radius: 1cqh;
}

.landing-menu-row > span:first-child {
  display: grid;
  gap: 0.3cqh;
}

.landing-menu-row small {
  font-weight: 400;
  opacity: 0.72;
}

.landing-menu form,
.landing-help form {
  display: flex;
  justify-content: flex-end;
}

.landing-menu form button,
.landing-help form button {
  padding: 0.8cqh 1.2cqw;
  border-radius: 1cqh;
}

@keyframes trace-title {
  from {
    background-position: 100% 0;
    filter: brightness(0.9);
  }

  to {
    background-position: 0 0;
    filter: brightness(1.08);
  }
}

@keyframes trail-line {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }

  35% {
    opacity: 1;
  }

  100% {
    opacity: 0.7;
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .today-title,
  .today-puzzle::after {
    animation: none;
  }
}