@import url('https://fonts.googleapis.com/css2?family=Jockey+One&display=swap');

:root {
  --bottom-safe-clearance: clamp(7.2rem, 14vh, 9rem);
}

html {
  min-height: 100%;
  background: #080a0c;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;

  background: linear-gradient(
    to bottom,
    #889FCA 0%,
    #080a0c 100%
  );

  background-repeat: no-repeat;
  background-size: 100% 165%; /* overscan so the animated wave never exposes empty space */
  animation: pulseGradient 4s ease-in-out infinite;
}

.scroll-page {
  height: 100vh;
  overflow: hidden;
}

main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--bottom-safe-clearance);
}

body:not(.collection-page):not(.item-page):not(.scroll-page) main:not(.help-page) {
  padding-bottom: 0;
}

body:not(.collection-page):not(.item-page):not(.scroll-page) main:not(.help-page) .panel {
  padding: 0 1em calc(1em + var(--bottom-safe-clearance));
  box-sizing: border-box;
}

.scroll-page main {
  overflow: hidden;
  padding-bottom: 0;
}

.command-list {
  width: 60%;
  margin: 1em auto;
  text-align: center;
  border: black solid 1px;
  border-radius: 1em;
  background-image: linear-gradient(#434F64 , #889FCA);
}


@keyframes hint-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.96); }
}

.hints {
  display: flex;
  justify-content: space-evenly;
  list-style-type: none;
  padding: 0;
}

.hints li {
  animation: hint-pulse 2.4s ease-in-out infinite;
}

.hints li:nth-child(2) { animation-delay: 0.4s; }
.hints li:nth-child(3) { animation-delay: 0.8s; }
.hints li:nth-child(4) { animation-delay: 1.2s; }
.hints li:nth-child(5) { animation-delay: 1.6s; }

.mic {
  position: fixed;
  left: 50%;
  bottom: env(safe-area-inset-bottom, 0px);
  transform: translate(-50%, 50%);
  z-index: 950;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  border-radius: 999px;
  background: #5cc9ff8a;
  outline: solid black 1px;
  width: 10em;
  height: 10em;
}

.mic svg {
  width: 5em;
  height: 5em;
  margin-top: 0.25em;
  transition: fill 0.3s ease;
  fill: #000000;
}

.mic svg.listening {
  fill: #ffffff;
  animation: micGlowEaseIn 0.8s ease-in forwards, micGlowPulse 0.6s ease-in-out 0.8s infinite;
}

.mic svg.speaking {
  fill: #ffffff;
  animation: micGlowSpeakingEaseIn 0.8s ease-in forwards, micGlowSpeakingPulse 0.6s ease-in-out 0.8s infinite;
}

@keyframes micGlowEaseIn {
  0% {
    filter: drop-shadow(0 0 0em #ffffff) drop-shadow(0 0 0em #5cc9ff);
  }
  100% {
    filter: drop-shadow(0 0 0.5em #ffffff) drop-shadow(0 0 1em #5cc9ff);
  }
}

@keyframes micGlowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 0.5em #ffffff) drop-shadow(0 0 1em #5cc9ff);
  }
  50% {
    filter: drop-shadow(0 0 1em #ffffff) drop-shadow(0 0 1.5em #5cc9ff);
  }
}

@keyframes micGlowSpeakingEaseIn {
  0% {
    filter: drop-shadow(0 0 0em #ffffff) drop-shadow(0 0 0em #ff4444);
  }
  100% {
    filter: drop-shadow(0 0 0.5em #ffffff) drop-shadow(0 0 1em #ff4444);
  }
}

@keyframes micGlowSpeakingPulse {
  0%, 100% {
    filter: drop-shadow(0 0 0.5em #ffffff) drop-shadow(0 0 1em #ff4444);
  }
  50% {
    filter: drop-shadow(0 0 1em #ffffff) drop-shadow(0 0 1.5em #ff4444);
  }
}

@keyframes pulseGradient {
  0% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 0% 10%;
  }
  100% {
    background-position: 0% 100%;
  }
}

h1, a, p, h2, li, h3 {
    color: white;
    font-family: "Jockey One", sans-serif;
    text-decoration: none;
    text-shadow: 0.1em 0.1em 0.1em #080a0c ;
}

h1 {
  font-size: clamp(1.35rem, 2.4vw, 2.15rem);
}

h2 {
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
}

p,
figcaption {
  font-size: clamp(0.92rem, 1.2vw, 1.06rem);
  line-height: 1.35;
}

header {
    padding: 0 1em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #889FCA;
    border-bottom: solid black 1px;
}

.help {
    padding: 0.75em 1em;
    background-color: #920000;
    border-radius: 1em;
}


.banner {
    background: linear-gradient(90deg, #5f6579 0%, #7c8298 50%, #5f6579 100%);
    background-size: 200% 100%;
    position: relative;
    overflow: hidden;
    padding: 2em;
    min-height: 12rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.banner.loading {
    animation: imageCardLoading 1.4s ease-in-out infinite;
}

.banner.loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: imageCardShimmer 1.4s ease-in-out infinite;
}

.banner h2, .banner span {
    margin: 0;
}

.panel {
  background-color: #767C94;
  border: black solid 0.1em;
  border-bottom: none;
  border-radius: 1em 1em 0 0;
  margin: 1em 1em 0 1em;
  flex: 1;
  min-height: 0;
}

.item-panel {
  width: 60%;
}

.item-page main {
  display: grid;
  grid-template-columns: minmax(30rem, 1.2fr) minmax(22rem, 0.9fr);
  align-items: start;
  gap: 1.25rem;
  padding: 1rem 1.25rem 0;
  min-height: calc(100vh - 9.1rem);
}

.item-page .item-panel {
  order: 1;
  width: min(46rem, 52vw);
  margin: 0;
  padding: 1.4rem 1.6rem calc(2rem + var(--bottom-safe-clearance));
  min-height: min(33rem, calc(100vh - 50vh));
  margin-top: max(0.5rem, calc(50vh - 9.1rem));
  align-self: end;
  display: flex;
  flex-direction: column;
}

.item-page .item-panel::after {
  content: "";
  flex: 1;
}

.item-page .item-panel h2 {
  font-size: clamp(1.35rem, 2.3vw, 3rem);
  margin: 0 0 0.8rem 0;
}

.item-page .item-panel p {
  font-size: clamp(1.02rem, 1.5vw, 2rem);
  line-height: 1.6;
  margin: 0;
}

.item-page header {
  position: relative;
  z-index: 20;
}

.item-page .circle-carousel {
  order: 2;
  justify-self: end;
  align-self: start;
  position: fixed;
  right: clamp(-28rem, -30vw, -14rem);
  top: 6.75rem;
  --ring-rotation: 0deg;
  --counter-rotation: 0deg;
  --spin-duration: 440ms;
  --spin-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  width: min(56rem, 62vw);
  height: min(56rem, 62vw);
  margin: 0;
  transform: none;
  overflow: visible;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(144, 152, 180, 0.42) 0%, rgba(17, 20, 27, 0.1) 68%, rgba(17, 20, 27, 0) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 1;
  flex-shrink: 0;
}

.circle-carousel-track {
  position: absolute;
  inset: 0;
  --orbit-radius: clamp(12rem, 24vw, 22rem);
  transform: rotate(var(--ring-rotation));
  transform-origin: 50% 50%;
  transition: transform var(--spin-duration) var(--spin-ease);
}

.circle-carousel-track.no-transition {
  transition: none;
}

.item-page .circle-carousel.no-transition .circle-item-image,
.item-page .circle-carousel.no-transition .circle-item figcaption {
  transition: none;
}

.item-page .circle-carousel.no-transition .circle-item,
.item-page .circle-carousel.no-transition .circle-item-main,
.item-page .circle-carousel.no-transition .circle-item-main .circle-item-image {
  transition: none;
}

.item-carousel-arrow {
  position: absolute;
  top: 62%;
  transform: translateY(-50%);
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: rgba(8, 10, 12, 0.42);
  color: white;
  opacity: 0.9;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 6;
}

.item-carousel-arrow:hover,
.item-carousel-arrow:focus-visible {
  background: rgba(8, 10, 12, 0.64);
  outline: none;
}

.item-carousel-arrow-left {
  left: 4%;
}

.item-carousel-arrow-right {
  right: 50%;
}

.item-page .circle-item {
  width: clamp(11rem, 19vw, 16.5rem);
}

.item-page .circle-item-image {
  height: clamp(6.2rem, 10.6vw, 10rem);
}

.circle-item {
  --slot-angle: 0deg;
  --slot-scale: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  width: clamp(9.2rem, 16.8vw, 14.2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  pointer-events: none;
  will-change: transform;
  transform: translate(-50%, -50%) rotate(var(--slot-angle)) translateX(var(--orbit-radius)) rotate(calc(-1 * var(--slot-angle))) scale(var(--slot-scale));
  transition: transform var(--spin-duration) var(--spin-ease);
}

.circle-item figcaption {
  font-size: clamp(0.92rem, 1.1vw, 1.08rem);
  max-width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: rotate(var(--counter-rotation));
  transform-origin: center;
  transition: transform var(--spin-duration) var(--spin-ease);
  display: none;
}

.circle-item-image {
  width: 100%;
  height: clamp(5.3rem, 9.2vw, 8.2rem);
  border-radius: 0.75em;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #5f6579 0%, #7c8298 50%, #5f6579 100%);
  background-size: 200% 100%;
  transform: rotate(var(--counter-rotation));
  transform-origin: center;
  transition: transform var(--spin-duration) var(--spin-ease);
}

.circle-item-image.loading {
  animation: imageCardLoading 1.4s ease-in-out infinite;
}

.circle-item-image.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: imageCardShimmer 1.4s ease-in-out infinite;
}

.item-page .orbit-top-left {
  --slot-angle: 252deg;
}

.item-page .orbit-top-right {
  --slot-angle: 324deg;
}

.item-page .orbit-left {
  --slot-angle: 108deg;
}

.item-page .orbit-right {
  --slot-angle: 36deg;
}

.item-page .circle-item-main {
  --slot-angle: 180deg;
  width: clamp(9.2rem, 16.8vw, 14.2rem);
  z-index: 3;
}

.item-page .circle-item-main .circle-item-image {
  height: clamp(5.3rem, 9.2vw, 8.2rem);
}

.item-page .panel {
  margin: 0;
}

@media (max-width: 980px) {
  .item-page main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-top: 0.35rem;
  }

  .item-page .item-panel {
    order: 2;
    width: min(42rem, 96vw);
    margin-top: -0.55rem;
    align-self: auto;
    min-height: auto;
  }

  .item-page .item-panel::after {
    display: none;
  }

  .item-page .circle-carousel {
    order: 1;
    position: relative;
    right: auto;
    top: auto;
    width: min(30rem, 94vw);
    height: min(30rem, 94vw);
    margin: -12rem auto 3em;
    overflow: hidden;
    border-top: none;
    border-radius: 0 0 100vmax 100vmax;
  }

  .item-page .circle-carousel-track {
    --orbit-radius: clamp(9.6rem, 42vw, 12rem);
    transform: rotate(calc(var(--ring-rotation) - 90deg));
  }

  .item-page .circle-item,
  .item-page .circle-item-main {
    width: clamp(6.5rem, 23vw, 8.5rem);
  }

  .item-page .circle-item-image,
  .item-page .circle-item-main .circle-item-image {
    height: clamp(4.2rem, 15vw, 5.8rem);
    transform: rotate(calc(var(--counter-rotation) + 90deg));
  }

  .item-page .circle-item figcaption {
    transform: rotate(calc(var(--counter-rotation) + 90deg));
  }

  .item-carousel-arrow-right {
    right: 1.1rem;
  }
}

@media (max-width: 760px) {
  .item-page main {
    padding-top: 0;
  }

  .item-page .circle-carousel {
    width: min(23rem, 96vw);
    height: min(23rem, 96vw);
    margin-top: -10rem;
    margin-bottom: 5em;
  }

  .item-page .circle-carousel-track {
    --orbit-radius: clamp(7.8rem, 34vw, 9.6rem);
    transform: rotate(calc(var(--ring-rotation) - 90deg));
  }

  .item-page .circle-item,
  .item-page .circle-item-main {
    width: clamp(5.25rem, 18.5vw, 6.7rem);
  }

  .item-page .circle-item-image,
  .item-page .circle-item-main .circle-item-image {
    height: clamp(3.35rem, 12.2vw, 4.6rem);
    transform: rotate(calc(var(--counter-rotation) + 90deg));
  }

  .item-page .circle-item figcaption {
    transform: rotate(calc(var(--counter-rotation) + 90deg));
  }

  .item-page .item-panel {
    width: min(94vw, 26rem);
    padding: 1.15rem 1rem calc(1.1rem + var(--bottom-safe-clearance));
  }
}

.carousel {
  width: 90%;
  margin: 1em auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

@media (max-width: 760px) {
  .carousel {
    width: min(34rem, calc(100% - 1.1rem));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
    align-items: stretch;
    justify-content: stretch;
  }

  .carousel .arrow {
    display: none;
  }

  .carousel > a {
    min-width: 0;
  }

  .carousel .image-card,
  .carousel .image-card.image-card-center {
    width: 100%;
    height: clamp(5.4rem, 22vw, 8.4rem);
  }
}

.index-h2 {
    justify-self: center;
    margin: 1em;
}

.image-card {
    width: clamp(8.5rem, 15vw, 25rem);
    height: clamp(4.75rem, 9.6vw, 15rem);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border-radius: 0.75em;
    background: linear-gradient(90deg, #5f6579 0%, #7c8298 50%, #5f6579 100%);
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0.75em;
    display: flex;
    align-items: flex-end;
    outline: solid black 1px;
    transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 360ms cubic-bezier(0.22, 0.61, 0.36, 1), width 360ms cubic-bezier(0.22, 0.61, 0.36, 1), height 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform, opacity;
}

  .image-card.carousel-card-hidden {
    opacity: 0;
  }

  .image-card.carousel-motion-clone {
    position: fixed;
    margin: 0;
    z-index: 30;
    pointer-events: none;
    transition: left 360ms cubic-bezier(0.22, 0.61, 0.36, 1), top 360ms cubic-bezier(0.22, 0.61, 0.36, 1), width 360ms cubic-bezier(0.22, 0.61, 0.36, 1), height 360ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 360ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

.image-card.loading {
    animation: imageCardLoading 1.4s ease-in-out infinite;
}

.image-card.loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: imageCardShimmer 1.4s ease-in-out infinite;
}

.image-card span {
    position: relative;
    z-index: 1;
}

.voice-choice-overlay-host {
  position: relative;
}

.voice-choice-overlay {
  position: absolute;
  top: 0.38rem;
  right: 0.38rem;
  min-width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 12, 0.86);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.65);
  font-family: "Jockey One", sans-serif;
  font-size: 0.92rem;
  line-height: 1;
  z-index: 7;
  pointer-events: none;
}

.item-image-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: radial-gradient(circle at 50% 16%, rgba(136, 159, 202, 0.24) 0%, rgba(8, 10, 12, 0.88) 66%);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(0.55rem, 1.8vw, 1.25rem);
}

.item-image-overlay-panel {
  width: clamp(18rem, 90vw, 70rem);
  max-height: clamp(18rem, 92vh, 58rem);
  overflow: auto;
  background: linear-gradient(180deg, rgba(118, 124, 148, 0.95) 0%, rgba(95, 101, 121, 0.95) 100%);
  border: 1px solid rgba(0, 0, 0, 0.62);
  border-radius: 1rem;
  box-shadow: 0 1rem 2.2rem rgba(5, 7, 10, 0.48);
  padding: clamp(0.6rem, 1.3vw, 1.1rem);
}

.item-image-overlay-close {
  display: block;
  margin-left: auto;
  margin-bottom: 0.65rem;
  border: 1px solid rgba(0, 0, 0, 0.72);
  background: #920000;
  color: white;
  border-radius: 999px;
  padding: 0.35rem 0.86rem;
  font-family: "Jockey One", sans-serif;
  font-size: 0.95rem;
  text-shadow: 0.1em 0.1em 0.1em #080a0c;
  cursor: pointer;
  transition: transform 180ms ease, filter 180ms ease;
}

.item-image-overlay-close:hover,
.item-image-overlay-close:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.08);
  outline: none;
}

.item-image-overlay-image {
  width: auto;
  height: auto;
  max-width: min(100%, clamp(16rem, 84vw, 66rem));
  max-height: clamp(12rem, 72vh, 44rem);
  display: block;
  margin: 0 auto;
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.62);
  box-shadow: 0 0.6rem 1.1rem rgba(8, 10, 12, 0.34);
}

.image-card-center {
  width: clamp(9.75rem, 20vw, 30rem);
  height: clamp(5.5rem, 11.2vw, 20rem);
    z-index: 2;
}

@keyframes imageCardLoading {
  0% {
    background-position: 100% 50%;
  }
  50% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

@keyframes imageCardShimmer {
  100% {
    transform: translateX(100%);
  }
}

.scroll-box {
  position: relative;
  width: min(60%, calc(100% - 2rem));
  min-height: 0;
  margin: 2em auto 0;
  padding: 1.25rem clamp(1rem, 3vw, 2rem) 2.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: stretch;
  overflow: hidden;
}

.scroll-lines-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.scroll-panel {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-panel-viewport {
  position: relative;
  height: auto;
  max-height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.scroll-panel-track {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.45rem);
  align-items: center;
  will-change: transform;
}

.scroll-panel a {
  display: block;
}

.scroll-panel a.scroll-card-peripheral {
  pointer-events: none;
}

.scroll-panel a.scroll-card-peripheral .image-card {
  opacity: 0.42;
}

.scroll-panel a.scroll-card-peripheral-top .image-card {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.22) 42%, #000000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.22) 42%, #000000 100%);
}

.scroll-panel a.scroll-card-peripheral-bottom .image-card {
  -webkit-mask-image: linear-gradient(to bottom, #000000 0%, rgba(0, 0, 0, 0.22) 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000000 0%, rgba(0, 0, 0, 0.22) 58%, transparent 100%);
}

.scroll-page .scroll-panel .image-card {
  width: clamp(10.6rem, 20vw, 27rem);
  height: clamp(6rem, 12.6vw, 16.8rem);
}

.scroll-test-controls {
  position: absolute;
  top: 50%;
  right: clamp(0.45rem, 1.6vw, 1rem);
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.scroll-test-button {
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(8, 10, 12, 0.72);
  color: #ffffff;
  font-family: "Jockey One", sans-serif;
  font-size: 0.95rem;
  padding: 0.75rem 1rem;
  cursor: pointer;
  box-shadow: 0 0.45rem 1rem rgba(0, 0, 0, 0.28);
}

.scroll-test-button:hover,
.scroll-test-button:focus-visible {
  background: rgba(8, 10, 12, 0.9);
  outline: none;
}

.scroll-test-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.scroll-panel .image-card.scroll-card-placeholder {
  background-image: linear-gradient(135deg, rgba(95, 101, 121, 0.95), rgba(67, 73, 94, 0.95));
  background-size: cover;
}

.scroll-page .scroll-box .mic {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: calc(100% - 1.5rem);
  bottom: auto;
  transform: translate(-50%, -50%);
  align-items: center;
  animation: scrollMicToCenter 850ms ease-in-out 220ms forwards;
}

.scroll-page .scroll-box .mic svg {
  margin-top: 0;
}

@keyframes scrollMicToCenter {
  from {
    top: calc(100% - 1.5rem);
  }
  to {
    top: 50%;
  }
}

@media (max-width: 900px) {
  .scroll-page main {
    justify-content: flex-start;
    padding-top: clamp(3.25rem, 14vh, 7.5rem);
  }

  .scroll-box {
    width: min(80%, calc(100% - 1rem));
    column-gap: clamp(1rem, 3vw, 1.6rem);
    margin-top: 0;
    padding: 0.7rem 0.75rem 2.2rem;
  }

  .scroll-page .scroll-panel .image-card {
    width: clamp(10.8rem, 42vw, 21.5rem);
    height: clamp(6.2rem, 24.5vw, 12.2rem);
  }

  .scroll-test-controls {
    top: auto;
    bottom: 1rem;
    right: 0.7rem;
    transform: none;
  }
}

@media (max-width: 640px) {
  .scroll-page main {
    padding-top: clamp(2.6rem, 11vh, 5.2rem);
  }

  .scroll-box {
    width: min(96%, calc(100% - 0.8rem));
    margin-top: 0;
    padding: 0.4rem 4.8rem calc(1.2rem + var(--bottom-safe-clearance)) 0.4rem;
  }

  .scroll-page .scroll-lines-canvas {
    display: none;
  }

  .scroll-page .scroll-panel .image-card {
    width: clamp(10.4rem, 43vw, 20.5rem);
    height: clamp(5.95rem, 24.5vw, 11.8rem);
  }

  .scroll-page .scroll-box .mic {
    position: fixed;
    left: 50%;
    bottom: 0;
    top: auto;
    transform: translate(-50%, 50%);
    z-index: 950;
    align-items: flex-start;
    animation: none;
    width: 8em;
    height: 8em;
  }

  .scroll-page .scroll-box .mic svg {
    width: 4em;
    height: 4em;
  }

  .scroll-test-button {
    font-size: 0.84rem;
    padding: 0.65rem 0.8rem;
  }
}

.help-page {
  align-items: center;
  padding: 0 1rem calc(1.75rem + var(--bottom-safe-clearance));
}


.help-page section {
  width: min(68rem, 95%);
  background-color: #6b738a;
  padding: 1em 1.1em 1.35em;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  border-radius: 0 0 1.1rem 1.1rem;
  border: 1px solid rgba(0, 0, 0, 0.55);
  border-top: none;
  position: relative;
  box-shadow: 0 0.55rem 0.9rem rgba(5, 7, 10, 0.36);
}

.help-command-block {
  width: 100%;
}

.help-command-label {
  margin: 0.6rem 0 0.2rem;
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  opacity: 0.92;
}

.help-command-block > p {
  font-size: clamp(1.04rem, 1.2vw, 1.22rem);
  line-height: 1.6;
}

.help-command-phrases {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.3rem);
  line-height: 1.72;
  word-spacing: 0.14em;
  opacity: 0.95;
}

.help-page section + section {
  margin-top: -0.45rem;
}



.help-tab-image {
  width: clamp(10rem, 30vw, 16rem);
  height: clamp(7rem, 20vw, 12rem);
  border-radius: 0.75em;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #5f6579 0%, #7c8298 50%, #5f6579 100%);
  background-size: 200% 100%;
  flex-shrink: 0;
}

.help-tab-image.loading {
  animation: imageCardLoading 1.4s ease-in-out infinite;
}

.help-tab-image.loading::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.22) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: imageCardShimmer 1.4s ease-in-out infinite;
}

.help-tab-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
}


.item-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 8px;
}

.item-grid > .command-list {
  grid-column: 1 / -1;
  grid-row: 1;
}

.collection-text {
  grid-column: 0/4;
  grid-row: 2;
}

.collection-page .collection-text {
  text-align: left;
  margin-inline: auto;
}

.collection-page main {
  padding-bottom: 0;
}

.collection-page .panel {
  padding: 1em 1em calc(1em + var(--bottom-safe-clearance));
  box-sizing: border-box;
}

.collection-page .banner h2 {
  font-size: clamp(1.65rem, 3.4vw, 3rem);
}

.collection-page .banner span {
  font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  line-height: 1.45;
}

.collection-page .collection-text h2 {
  font-size: clamp(1.55rem, 2.9vw, 2.6rem);
  line-height: 1.2;
  margin: 0 0 0.35rem;
}

.collection-page .collection-text p {
  font-size: clamp(1.1rem, 1.75vw, 1.45rem);
  line-height: 1.45;
  margin: 0;
}

.item-grid > a:nth-of-type(odd) {
  grid-column: 1;
}

.item-grid > a:nth-of-type(even) {
  grid-column: 5;
}

.item-grid > a:nth-of-type(1) {
  grid-row: 3;
}

@media (min-width: 761px) {
  .collection-page .item-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 0.95rem;
    align-items: start;
  }

  .collection-page .item-grid > .command-list {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .collection-page .collection-text {
    grid-column: 1 / -1;
    grid-row: auto;
    padding: 0 5rem;
  }

  .collection-page .item-grid > a:nth-of-type(odd),
  .collection-page .item-grid > a:nth-of-type(even),
  .collection-page .item-grid > a:nth-of-type(1),
  .collection-page .item-grid > a:nth-of-type(2),
  .collection-page .item-grid > a:nth-of-type(3),
  .collection-page .item-grid > a:nth-of-type(4),
  .collection-page .item-grid > a:nth-of-type(5) {
    grid-column: auto;
    grid-row: auto;
  }

  .collection-page .item-grid > a {
    min-width: 0;
  }

  .collection-page .item-grid .image-card {
    width: 100%;
    height: clamp(6.1rem, 10.5vw, 11rem);
  }
}

.item-grid > a:nth-of-type(2) {
  grid-row: 4;
}

.item-grid > a:nth-of-type(3) {
  grid-row: 5;
}

.item-grid > a:nth-of-type(4) {
  grid-row: 6;
}

.item-grid > a:nth-of-type(5) {
  grid-row: 7;
}

@media (max-width: 760px) {
  .collection-page .banner h2 {
    font-size: clamp(1.45rem, 6.8vw, 2.2rem);
  }

  .collection-page .banner span {
    font-size: clamp(1.05rem, 4.4vw, 1.28rem);
  }

  .collection-page .item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    gap: 0.7rem;
    align-items: start;
  }

  .collection-page .item-grid > .command-list {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .hints {
    flex-direction: column;
    align-items: center;
  }

  .collection-page .collection-text {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-bottom: 0.2rem;
  }

  .collection-page .collection-text h2 {
    font-size: clamp(1.32rem, 5.6vw, 1.85rem);
  }

  .collection-page .collection-text p {
    font-size: clamp(1rem, 4vw, 1.22rem);
  }

  .collection-page .item-grid > a:nth-of-type(odd),
  .collection-page .item-grid > a:nth-of-type(even),
  .collection-page .item-grid > a:nth-of-type(1),
  .collection-page .item-grid > a:nth-of-type(2),
  .collection-page .item-grid > a:nth-of-type(3),
  .collection-page .item-grid > a:nth-of-type(4),
  .collection-page .item-grid > a:nth-of-type(5) {
    grid-column: auto;
    grid-row: auto;
  }

  .collection-page .item-grid > a {
    min-width: 0;
  }

  .collection-page .item-grid .image-card {
    width: 100%;
    height: clamp(5.4rem, 22vw, 8.4rem);
  }
}
        

footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35em 0.9em;
  padding-bottom: calc(0.35em + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 10, 12, 0.9);
  border-top: 1px solid #000000;
  backdrop-filter: blur(4px);
}

footer p {
  margin: 0;
  font-size: clamp(0.78rem, 1vw, 0.95rem);
}

footer a {
  margin: 0;
  font-size: clamp(0.78rem, 1vw, 0.95rem);
  text-decoration: underline;
}

@media (max-width: 760px) {
  .mic {
    width: 9.2em;
    height: 9.2em;
  }

  .mic svg {
    width: 4.6em;
    height: 4.6em;
  }

  footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 8.2rem minmax(0, 1fr);
    align-items: end;
    gap: 0.35rem 0.55rem;
    padding: 0.32em 0.7em;
    padding-bottom: calc(0.32em + env(safe-area-inset-bottom, 0px));
  }

  footer p,
  footer a {
    font-size: clamp(0.72rem, 2.7vw, 0.86rem);
  }

  footer p {
    grid-column: 1;
    align-self: end;
  }

  footer a {
    grid-column: 3;
    justify-self: end;
    align-self: end;
  }
}