/* The Apex channel: the site is a little TV set. The picture uses the
   browser's own paper, ink and companion colours; the set around it is
   soft plastic. Fonts: Nunito, Inter and VT323 (all OFL, in ../fonts). */

@font-face {
  font-family: 'Nunito';
  font-weight: 500 900;
  font-display: swap;
  src: url('../fonts/nunito-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-wght.woff2') format('woff2');
}

@font-face {
  font-family: 'VT323';
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/vt323-latin.woff2') format('woff2');
}

:root {
  color-scheme: light dark;

  --plastic: light-dark(#ebe5da, #2b2826);
  --plastic-hi: light-dark(#f8f4ed, #3a3633);
  --plastic-lo: light-dark(#d7cebf, #1d1b1a);
  --plastic-ink: light-dark(#9a8f7f, #8a8279);

  --paper: light-dark(#fdfcfa, #222120);
  --paper-2: light-dark(#f8f7f4, #262523);
  --ground: light-dark(#eeece8, #302d2a);
  --raised: light-dark(#ffffff, #2f2d2b);
  --ink: light-dark(#1c1a17, #f1efec);
  --ink-2: light-dark(#66615a, #aaa49d);
  --ink-3: light-dark(#8d877f, #7f7972);
  --line: light-dark(#e3dfd9, #3a3734);
  --violet: light-dark(#6a4bff, #8c72ff);
  --violet-key: #7657ff;
  --violet-lo: #4529c4;
  --pink: #ff7eb6;
  --ok: light-dark(#1e9467, #3fcf8e);

  --round: 'Nunito', ui-rounded, 'SF Pro Rounded', system-ui, sans-serif;
  --brand: 'Inter', system-ui, sans-serif;
  --pixel: 'VT323', ui-monospace, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-floor: linear(0, 0.072, 0.238, 0.438, 0.632, 0.797, 0.922, 1.008, 1.058, 1.08, 1.083, 1.073, 1.058, 1.041, 1.026, 1.013, 1.004, 0.998, 0.994, 0.993, 0.993, 0.994, 0.996, 0.997, 1);
  --tint: #8f74f8;
}

/* Anything with a companion colour gets its readable ink and a wash. */
:root,
[style*='--tint'] {
  --tint-ink: light-dark(color-mix(in srgb, var(--tint) 45%, #1c1a17), color-mix(in srgb, var(--tint) 76%, #f1efec));
  --tint-wash: light-dark(color-mix(in srgb, var(--tint) 24%, transparent), color-mix(in srgb, var(--tint) 14%, transparent));
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--plastic);
  color: var(--ink);
  font-family: var(--round);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
p {
  margin: 0;
  text-wrap: balance;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
}

button {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
}

.i {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- the set ---- */

.tv {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100dvh;
  padding: clamp(8px, 1.3vw, 18px) clamp(8px, 1.3vw, 18px) 0;
  background: radial-gradient(130% 90% at 50% 0%, var(--plastic-hi), var(--plastic) 55%, var(--plastic-lo));
}

/* A little grain in the plastic. */
.tv::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: light-dark(0.35, 0.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* The tube's dark rim, set into the plastic. */
.tv__glass {
  min-height: 0;
  padding: clamp(5px, 0.6vw, 9px);
  border-radius: clamp(26px, 3.2vw, 46px);
  background: linear-gradient(180deg, #100f0e, #1f1c1a);
  box-shadow:
    0 0 0 1px light-dark(#c8bead, #121110),
    0 2px 0 1px var(--plastic-hi),
    inset 0 1px 1px rgba(255, 255, 255, 0.07),
    inset 0 -3px 8px rgba(0, 0, 0, 0.6);
}

.tv__screen {
  position: relative;
  isolation: isolate;
  height: 100%;
  overflow: hidden;
  border-radius: clamp(20px, 2.6vw, 38px);
  background: #0b0a09;
  container-type: size;
  container-name: screen;
}

.tv__picture {
  position: absolute;
  inset: 0;
  background: var(--paper);
}

/* Power on: a bright line, then the picture. */
.tv[data-power='off'] .tv__picture {
  clip-path: inset(50% 50% 50% 50%);
}

.tv[data-power='on'] .tv__picture {
  animation: power-on 1000ms var(--ease-out) both;
}

@keyframes power-on {
  0% {
    clip-path: inset(49.6% 50% 49.6% 50%);
    filter: brightness(4) saturate(0);
  }
  28% {
    clip-path: inset(49.6% 0 49.6% 0);
    filter: brightness(4) saturate(0);
  }
  62% {
    clip-path: inset(0 0 0 0);
    filter: brightness(1.7) saturate(0.6);
  }
  100% {
    clip-path: inset(0 0 0 0);
    filter: none;
  }
}

/* The glass: sheen, vignette, scanlines and a slow rolling bar. */
.crt {
  position: absolute;
  inset: 0;
  z-index: 30;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(162deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 26%),
    radial-gradient(140% 125% at 50% 45%, transparent 58%, light-dark(rgba(30, 16, 60, 0.2), rgba(0, 0, 0, 0.45)) 100%),
    repeating-linear-gradient(0deg, light-dark(rgba(20, 10, 40, 0.035), rgba(0, 0, 0, 0.16)) 0 1px, transparent 1px 3px);
  box-shadow:
    inset 0 0 60px light-dark(rgba(20, 10, 40, 0.12), rgba(0, 0, 0, 0.4)),
    inset 0 0 2px rgba(0, 0, 0, 0.5);
}

.crt::after {
  content: '';
  position: absolute;
  inset: -30% 0 auto;
  height: 22%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  animation: roll 9s linear infinite;
}

@keyframes roll {
  to {
    transform: translateY(620%);
  }
}

.static {
  position: absolute;
  inset: 0;
  z-index: 25;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms;
}

.static[data-on] {
  opacity: 1;
  transition: none;
}

/* The on-screen display, as a set shows the channel. */
.osd {
  position: absolute;
  top: clamp(14px, 4cqh, 36px);
  left: clamp(16px, 3.4cqw, 44px);
  z-index: 31;
  display: flex;
  flex-direction: column;
  color: #fff;
  font-family: var(--pixel);
  line-height: 0.82;
  text-shadow:
    0 0 10px rgba(150, 120, 255, 0.9),
    2px 2px 0 rgba(20, 10, 50, 0.6),
    -1px -1px 0 rgba(20, 10, 50, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms;
}

.osd[data-on] {
  opacity: 1;
  transition: none;
}

.osd b {
  font-size: clamp(38px, 8cqh, 76px);
  font-weight: 400;
}

.osd span {
  font-size: clamp(20px, 3.6cqh, 34px);
  letter-spacing: 0.05em;
}

/* ---- the panel under the screen ---- */

.panel {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 16px);
  height: clamp(66px, 9.5vh, 86px);
  padding: 0 clamp(6px, 1.4vw, 22px);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--plastic-ink);
  font-family: var(--brand);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.035em;
  text-decoration: none;
  text-shadow:
    0 1px 0 var(--plastic-hi),
    0 -1px 0 light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5));
}

.badge img {
  width: 30px;
  height: 30px;
}

.led {
  width: 8px;
  height: 8px;
  margin-left: 4px;
  border-radius: 50%;
  background: #6b2a22;
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.4);
  transition: background 300ms, box-shadow 300ms;
}

.tv[data-power='on'] .led {
  background: #49e08e;
  box-shadow:
    0 0 8px #49e08e,
    inset 0 -1px 1px rgba(0, 0, 0, 0.25);
}

.grille {
  flex: 1;
  min-width: 24px;
  height: 30px;
  background: radial-gradient(circle, var(--plastic-lo) 1.6px, transparent 2.1px) 0 0 / 9px 9px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

.tuner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lcd {
  display: flex;
  align-items: center;
  gap: 12px;
  width: clamp(150px, 20vw, 250px);
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #1f1b33, #141126);
  box-shadow:
    inset 0 2px 5px rgba(0, 0, 0, 0.7),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 1px 0 var(--plastic-hi);
  color: #b4a3ff;
  font-family: var(--pixel);
  font-size: 27px;
  line-height: 1;
  text-shadow: 0 0 7px rgba(150, 120, 255, 0.85);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

.lcd__num {
  color: #e2d9ff;
}

.lcd__name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.presets {
  display: flex;
  gap: 6px;
}

.preset {
  position: relative;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--plastic-hi), var(--plastic));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 2px 0 var(--plastic-lo),
    0 3px 6px rgba(40, 30, 20, 0.15);
  color: var(--plastic-ink);
  font-family: var(--pixel);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.preset:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--plastic-lo);
}

.preset::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -7px;
  width: 4px;
  height: 4px;
  translate: -50% 0;
  border-radius: 50%;
  background: transparent;
}

.preset[aria-current='true'] {
  color: var(--violet);
}

.preset[aria-current='true']::after {
  background: #49e08e;
  box-shadow: 0 0 6px #49e08e;
}

/* Keys: soft plastic buttons that press in. */
.key {
  --key: light-dark(#fbf8f3, #423e3a);
  --key-lo: light-dark(#d2c8b8, #191716);
  --key-ink: var(--ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--key) 100%, white), color-mix(in srgb, var(--key) 90%, black));
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    0 4px 0 var(--key-lo),
    0 6px 12px rgba(40, 30, 20, 0.18);
  color: var(--key-ink);
  font: 800 16px/1 var(--round);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 80ms,
    box-shadow 80ms,
    filter 120ms;
}

.key:hover {
  filter: brightness(1.04);
}

.key:active,
.key[data-pressed] {
  transform: translateY(3px);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.4),
    0 1px 0 var(--key-lo),
    0 2px 4px rgba(40, 30, 20, 0.18);
}

.key--round {
  width: 46px;
  padding: 0;
}

.key--go {
  --key: var(--violet-key);
  --key-lo: var(--violet-lo);
  --key-ink: #fff;
}

.key--big {
  height: 56px;
  padding: 0 28px;
  font-size: 19px;
}

.key--big .i {
  width: 22px;
  height: 22px;
}

.key--huge {
  height: 68px;
  padding: 0 36px;
  font-size: 23px;
}

.key--huge .i {
  width: 26px;
  height: 26px;
}

[data-sound] .i--on,
[data-sound][aria-pressed='true'] .i--off {
  display: none;
}

[data-sound][aria-pressed='true'] .i--on {
  display: block;
}

/* ---- channels ---- */

.channel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.channel[hidden] {
  display: none;
}

.channel h2 {
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

/* ---- CH 1: the square ---- */

.ch-square {
  background: var(--paper);
  touch-action: none;
}

.sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, light-dark(#e6dfff, #1d1a2c) 0%, light-dark(#f3effb, #24212f) 30%, var(--paper) 52%);
  transition: background 1200ms var(--ease-standard);
}

.cloud {
  position: absolute;
  top: 9%;
  left: -30%;
  width: 34cqw;
  height: 11cqh;
  border-radius: 50%;
  background: radial-gradient(closest-side, light-dark(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.05)), transparent);
  animation: drift 110s linear infinite;
}

.cloud:nth-child(2) {
  top: 22%;
  width: 26cqw;
  animation-duration: 140s;
  animation-delay: -60s;
}

.cloud:nth-child(3) {
  top: 4%;
  width: 22cqw;
  animation-duration: 95s;
  animation-delay: -30s;
}

@keyframes drift {
  to {
    transform: translateX(170cqw);
  }
}

.stars {
  position: absolute;
  inset: 0 0 50%;
  opacity: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 28% 34%, #fff, transparent),
    radial-gradient(2px 2px at 44% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 63% 28%, #fff, transparent),
    radial-gradient(2px 2px at 78% 16%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 36%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 6% 42%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 44%, #fff, transparent),
    radial-gradient(2px 2px at 35% 6%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 84% 46%, #fff, transparent);
  transition: opacity 1200ms;
}

.ch-square[data-night] .sky {
  background: linear-gradient(180deg, #120f2e 0%, #1d1840 34%, #2b2350 54%);
}

.ch-square[data-night] .stars {
  opacity: 0.9;
  animation: twinkle 3s ease-in-out infinite alternate;
}

.ch-square[data-night] .cloud {
  opacity: 0.08;
}

@keyframes twinkle {
  to {
    opacity: 0.5;
  }
}

.ch-square[data-night] .square__floor {
  filter: saturate(0.9);
}

.ch-square[data-night] .sprite {
  filter: brightness(0.78) saturate(0.85);
}

.ch-square[data-night] .square__title h1,
.ch-square[data-night] .square__title p {
  color: #f1efec;
}

.square__floor {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  transition: filter 1200ms;
}

.square__title {
  position: absolute;
  top: clamp(16px, 6cqh, 64px);
  left: 50%;
  z-index: 3;
  translate: -50% 0;
  width: max-content;
  max-width: 90%;
  text-align: center;
  pointer-events: none;
}

.square__title h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.16em;
  font-family: var(--brand);
  font-size: clamp(42px, 10cqh, 104px);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -0.05em;
  transition: color 1200ms;
}


.square__title p {
  margin-top: 0.4em;
  color: var(--ink-2);
  font-size: clamp(17px, 2.8cqh, 26px);
  font-weight: 800;
  transition: color 1200ms;
}

.square__crowd {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.actor {
  --h: 120px;
  --inv: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--h);
  height: var(--h);
  margin: calc(var(--h) * -1) 0 0 calc(var(--h) * -0.5);
  padding: 0;
  border: 0;
  background: none;
  transform-origin: 50% 100%;
  cursor: grab;
  touch-action: none;
  will-change: transform;
}

.actor:active {
  cursor: grabbing;
}

.actor:focus-visible {
  outline: none;
}

.actor:focus-visible .actor__ring {
  opacity: 1;
}

.actor__shadow {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 46%;
  height: 12%;
  translate: -50% 50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, light-dark(rgba(50, 30, 80, 0.3), rgba(0, 0, 0, 0.55)), transparent);
}

.actor__ring {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 62%;
  height: 16%;
  translate: -50% 50%;
  border: 3px solid color-mix(in srgb, var(--tint) 80%, white);
  border-radius: 50%;
  box-shadow: 0 0 12px color-mix(in srgb, var(--tint) 70%, transparent);
  opacity: 0;
  transition: opacity 200ms;
}

.actor[data-selected] .actor__ring {
  opacity: 1;
  animation: ring-breathe 1.8s ease-in-out infinite alternate;
}

@keyframes ring-breathe {
  to {
    scale: 1.12;
  }
}

.actor__body {
  position: absolute;
  inset: 0;
  transform-origin: 50% 100%;
}

/* One frame of the companion's sheet (or its still until the sheet is in),
   moved down so its feet stand on the actor's spot. */
.sprite {
  position: absolute;
  inset: 0;
  translate: 0 calc((1 - var(--feet, 0.9)) * 100%);
  background: center / contain no-repeat;
  pointer-events: none;
}

.sprite[data-sheet] {
  background-size: var(--sheet-size, 800% 500%);
  background-position: 0 25%;
}

.actor__tag {
  position: absolute;
  left: 50%;
  top: 100%;
  padding: 3px 10px 4px;
  translate: -50% 6px;
  scale: var(--inv);
  transform-origin: 50% 0;
  border-radius: 999px;
  background: var(--raised);
  box-shadow: 0 2px 8px rgba(40, 30, 80, 0.18);
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms;
}

.actor:hover .actor__tag,
.actor:focus-visible .actor__tag,
.actor[data-selected] .actor__tag {
  opacity: 1;
}

/* Bubbles: a glyph, a friend's face, a site, or a few words. */
.bubble {
  position: absolute;
  left: 50%;
  bottom: 82%;
  z-index: 2;
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 4px;
  translate: -50% 0;
  scale: var(--inv);
  transform-origin: 50% 100%;
  border-radius: 21px;
  background: var(--raised);
  box-shadow:
    0 0 0 1px light-dark(rgba(46, 36, 24, 0.06), rgba(255, 255, 255, 0.06)),
    0 6px 16px light-dark(rgba(60, 40, 120, 0.18), rgba(0, 0, 0, 0.5));
  color: var(--tint-ink);
  pointer-events: none;
  animation: bubble-pop 320ms var(--ease-floor) both;
}

.bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 10px;
  height: 10px;
  translate: -50% 0;
  rotate: 45deg;
  border-radius: 0 0 3px 0;
  background: inherit;
}

.bubble .i {
  width: 22px;
  height: 22px;
}

.bubble--heart {
  color: #ff5a8a;
}

.bubble--heart .i,
.bubble--sun .i,
.bubble--zap .i {
  fill: currentColor;
}

.bubble--sun {
  color: #f2a516;
}

.bubble--zap {
  color: #f2b31c;
}

.bubble--moon {
  color: #6f62d8;
}

.bubble--face img {
  width: 36px;
  height: 36px;
}

.bubble--site b {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--c);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
}

.bubble--text {
  height: auto;
  min-height: 42px;
  width: max-content;
  max-width: 250px;
  padding: 9px 15px 10px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

@keyframes bubble-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.5);
  }
}

/* The arrival ring when someone drops in. */
.drop-ring {
  position: absolute;
  z-index: 1;
  width: 120px;
  height: 40px;
  margin: -20px 0 0 -60px;
  border: 3px solid var(--tint);
  border-radius: 50%;
  pointer-events: none;
  animation: drop-ring 900ms var(--ease-out) both;
}

@keyframes drop-ring {
  from {
    opacity: 1;
    transform: scale(0.3);
  }
  to {
    opacity: 0;
    transform: scale(1.8);
  }
}

/* Tools: big round buttons at the side of the picture. */
.tools {
  position: absolute;
  left: clamp(12px, 2.6cqw, 34px);
  top: 50%;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 14px;
  translate: 0 -50%;
}

.tool {
  position: relative;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, light-dark(#ffffff, #4a4552), light-dark(#ece7f6, #34303c));
  box-shadow:
    inset 0 -3px 0 light-dark(rgba(90, 70, 160, 0.1), rgba(0, 0, 0, 0.3)),
    0 0 0 3px light-dark(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.06)),
    0 8px 18px light-dark(rgba(70, 50, 150, 0.2), rgba(0, 0, 0, 0.5));
  color: var(--violet);
  cursor: pointer;
  transition:
    transform 160ms var(--ease-out),
    background 200ms;
}

.tool:hover {
  transform: scale(1.07);
}

.tool:active {
  transform: scale(0.95);
}

.tool .i {
  width: 27px;
  height: 27px;
}

.tool[aria-pressed='true'] {
  background: radial-gradient(circle at 50% 28%, #8f74ff, #5e40ee);
  color: #fff;
}

.tool span {
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  padding: 7px 13px;
  translate: -6px -50%;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 140ms,
    translate 160ms var(--ease-out);
}

.tool:hover span,
.tool:focus-visible span {
  opacity: 1;
  translate: 0 -50%;
}

.square__hint {
  position: absolute;
  right: clamp(12px, 2.6cqw, 34px);
  bottom: clamp(12px, 3.2cqh, 30px);
  z-index: 5;
  padding: 7px 15px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--raised) 82%, transparent);
  box-shadow: 0 4px 12px rgba(60, 40, 120, 0.12);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 800;
  pointer-events: none;
}

/* The profile, as a lower third. */
.lower-third {
  position: absolute;
  left: clamp(12px, 2.6cqw, 34px);
  bottom: clamp(12px, 3.2cqh, 30px);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(600px, 100% - 24px);
  padding: 10px 12px 10px 10px;
  border-radius: 28px;
  background: var(--raised);
  box-shadow:
    0 0 0 1px light-dark(rgba(46, 36, 24, 0.06), rgba(255, 255, 255, 0.06)),
    0 14px 36px light-dark(rgba(60, 40, 120, 0.22), rgba(0, 0, 0, 0.55));
}

.lower-third[data-in] {
  animation: lt-in 460ms var(--ease-floor) both;
}

.lower-third[hidden] {
  display: none;
}

@keyframes lt-in {
  from {
    opacity: 0;
    transform: translateX(-30px) scale(0.96);
  }
}

.lt__face {
  display: grid;
  place-items: center;
  flex: none;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tint) 30%, white), color-mix(in srgb, var(--tint) 75%, white));
}

.lt__face img {
  width: 92%;
  height: 92%;
}

.lt__text {
  min-width: 0;
}

.lt__name {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.lt__tagline {
  color: var(--ink-2);
  font-size: 16px;
  font-weight: 800;
}

.lt__good {
  margin-top: 2px;
  color: var(--tint-ink);
  font-size: 14px;
  font-weight: 800;
}

.lt__go {
  flex: none;
  height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tint) 30%, var(--raised));
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--tint) 45%, transparent);
  color: var(--tint-ink);
  font-size: 15px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
}

.lt__go:active {
  transform: translateY(2px);
  box-shadow: none;
}

.lt__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-3);
  cursor: pointer;
}

.lt__close .i {
  width: 18px;
  height: 18px;
}

/* ---- CH 2: in your tabs ---- */

.ch-tabs {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background:
    radial-gradient(60% 60% at 70% 40%, var(--tint-wash), transparent 80%),
    linear-gradient(180deg, light-dark(#f1ecff, #221f2e), var(--paper) 60%);
}

.show {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
  min-height: 0;
  padding: 9cqh 5cqw 1cqh;
}

.show__window {
  display: flex;
  flex-direction: column;
  width: min(60cqw, 92cqh, 780px);
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  background: var(--ground);
  box-shadow:
    0 0 0 1px light-dark(rgba(46, 36, 24, 0.08), rgba(255, 255, 255, 0.06)),
    0 24px 60px light-dark(rgba(60, 40, 120, 0.2), rgba(0, 0, 0, 0.55));
  overflow: hidden;
}

.win__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
}

.win__bar i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 16%, transparent);
}

.win__tab {
  margin-left: 12px;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--raised);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  font-size: 13px;
  font-weight: 800;
}

/* The page loading, a line across the top. */
.win__load {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 0;
  height: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--tint);
}

.win__load[data-on] {
  animation: load 700ms var(--ease-out) both;
}

@keyframes load {
  0% {
    width: 0;
    opacity: 1;
  }
  75% {
    width: 100%;
    opacity: 1;
  }
  100% {
    width: 100%;
    opacity: 0;
  }
}

/* Sparkles when the table's booked. */
.burst {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 2;
  pointer-events: none;
}

.burst i {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--tint);
  opacity: 0;
}

.burst i:nth-child(3n + 1) {
  color: #f2b31c;
}

.burst i:nth-child(3n + 2) {
  color: var(--pink);
}

.burst .i {
  width: 26px;
  height: 26px;
  fill: currentColor;
}

.burst[data-on] i {
  animation: spark 900ms var(--ease-out) both;
}

@keyframes spark {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--a)) translateX(16px) scale(0.3);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--a)) translateX(calc(var(--r) * min(16cqh, 150px))) scale(1);
  }
}

.win__body {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-top-left-radius: 10px;
  background: var(--paper);
}

.act {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 400ms,
    transform 500ms var(--ease-out);
}

.show[data-act='ask'] .act--ask,
.show[data-act='form'] .act--form {
  opacity: 1;
  transform: none;
}

.act--ask {
  gap: 4px;
  background: radial-gradient(50% 50% at 50% 50%, var(--tint-wash), transparent 80%);
}

.act__perch {
  position: relative;
  width: 26%;
  aspect-ratio: 1;
}

@keyframes bob {
  to {
    transform: translateY(-5px);
  }
}

.ask {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 78%;
  min-height: 24%;
  padding: 14px 12px 12px 18px;
  border-radius: 18px;
  background: var(--raised);
  box-shadow:
    0 0 0 1px var(--line),
    0 6px 18px rgba(26, 20, 60, 0.07);
}

.ask__text {
  flex: 1;
  align-self: flex-start;
  font-size: clamp(14px, 1.6cqw, 19px);
  font-weight: 700;
}

.ask__hint {
  color: var(--ink-3);
}

.caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin: 0 1px -0.18em;
  background: var(--tint-ink);
  animation: caret 1s steps(1) infinite;
}

@keyframes caret {
  50% {
    opacity: 0;
  }
}

.ask__send {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--tint) 62%, #1c1a17);
  color: #fff;
  transition: transform 160ms var(--ease-out);
}

.ask__send .i {
  width: 18px;
  height: 18px;
}

.show[data-sent] .ask__send {
  transform: scale(0.85);
}

.act--form {
  align-items: stretch;
  justify-content: flex-start;
  padding: 6% 9%;
}

.form__name {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(18px, 2.4cqw, 30px);
  font-style: italic;
  font-weight: 700;
}

.form__sub {
  color: var(--ink-3);
  font-size: clamp(12px, 1.3cqw, 15px);
  font-weight: 700;
}

.form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4% 4%;
  margin-top: 5%;
}

.fld {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fld span {
  color: var(--ink-3);
  font-size: clamp(11px, 1.1cqw, 13px);
  font-weight: 800;
}

.fld b {
  height: clamp(28px, 3.6cqw, 40px);
  padding: 0 12px;
  border-radius: 10px;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: transparent;
  font-size: clamp(13px, 1.4cqw, 17px);
  line-height: clamp(28px, 3.6cqw, 40px);
  transition:
    color 200ms,
    box-shadow 200ms;
}

.fld[data-filled] b {
  color: var(--ink);
}

.fld[data-active] b {
  box-shadow:
    inset 0 0 0 2px var(--tint),
    0 0 0 4px color-mix(in srgb, var(--tint) 25%, transparent);
}

.form__book {
  align-self: flex-start;
  margin-top: 6%;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-size: clamp(13px, 1.4cqw, 16px);
  font-weight: 800;
  transition: background 300ms;
}

.show[data-booked] .form__book {
  background: var(--ok);
}

.form__done {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4%;
  color: var(--ok);
  font-size: clamp(14px, 1.6cqw, 19px);
  font-weight: 900;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 300ms,
    transform 400ms var(--ease-out);
}

.show[data-booked] .form__done {
  opacity: 1;
  transform: none;
}

/* The companion's own pointer while it works, in its colour. */
.ghost {
  position: absolute;
  left: 50%;
  top: 110%;
  z-index: 2;
  width: 26px;
  height: 26px;
  fill: var(--tint);
  stroke: #fff;
  stroke-width: 2;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25));
  transition:
    left 600ms var(--ease-out),
    top 600ms var(--ease-out);
}

.show__star {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(25cqw, 46cqh, 320px);
}

.show__star::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 70%;
  height: 12%;
  translate: -50% 50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 45%, transparent), transparent);
}

.show__fig {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}



.say {
  position: absolute;
  bottom: 96%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(320px, 34cqw);
  padding: 12px 18px 14px;
  translate: -50% 0;
  border-radius: 22px;
  background: var(--raised);
  box-shadow: 0 10px 26px light-dark(rgba(60, 40, 120, 0.2), rgba(0, 0, 0, 0.5));
  font-size: clamp(15px, 1.7cqw, 20px);
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.say::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 12px;
  height: 12px;
  translate: -50% 0;
  rotate: 45deg;
  background: inherit;
}

.say[data-pop] {
  animation: bubble-pop 320ms var(--ease-floor) both;
}

.say__keys {
  display: none;
  gap: 8px;
}

.say[data-ask] .say__keys {
  display: flex;
}

.say__keys b,
.say__keys i {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
}

.say__keys b {
  background: var(--violet-key);
  box-shadow: 0 3px 0 var(--violet-lo);
  color: #fff;
  transition:
    transform 80ms,
    box-shadow 80ms;
}

.say[data-press] .say__keys b {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--violet-lo);
}

.say__keys i {
  background: var(--paper-2);
  color: var(--ink-2);
}

.caption {
  padding: 1cqh 6cqw 5cqh;
  text-align: center;
}

.caption h2 {
  font-size: clamp(28px, 6cqh, 54px);
}

.caption p {
  max-width: 44ch;
  margin: 0.5em auto 0;
  color: var(--ink-2);
  font-size: clamp(16px, 2.7cqh, 22px);
  font-weight: 800;
}

/* ---- CH 3: the booth ---- */

.ch-make {
  background:
    radial-gradient(46% 70% at 30% 46%, var(--tint-wash), transparent 80%),
    linear-gradient(180deg, light-dark(#f4efe8, #24211f), var(--paper) 70%);
  transition: background 600ms;
}

.booth {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: 2cqw;
  padding: 6cqh 6cqw 4cqh 3cqw;
}

.booth__stage {
  position: relative;
  height: 100%;
}

.booth__spot {
  position: absolute;
  left: 50%;
  top: -12%;
  width: 70%;
  height: 92%;
  translate: -50% 0;
  background: linear-gradient(180deg, light-dark(rgba(255, 255, 255, 0.95), rgba(255, 250, 230, 0.12)), transparent 90%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  filter: blur(6px);
}

.booth__floor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.booth__figure {
  aspect-ratio: 1;
  cursor: pointer;
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: min(48cqh, 32cqw);
  translate: -50% 0;
  transform-origin: 50% 92%;
}

.booth__figure[data-pop] {
  animation: pop 640ms var(--ease-floor) both;
}

@keyframes pop {
  0% {
    transform: translateY(-30%) scale(0.5);
    opacity: 0;
  }
  35% {
    opacity: 1;
  }
}

.booth__ring {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 34%;
  height: 9%;
  translate: -50% 50%;
  border: 3px solid var(--tint);
  border-radius: 50%;
  opacity: 0;
}

.booth__ring[data-on] {
  animation: drop-ring 900ms var(--ease-out) both;
}

.booth__name {
  position: absolute;
  left: 50%;
  bottom: 3%;
  padding: 8px 22px 10px;
  translate: -50% 0;
  border-radius: 999px;
  background: var(--raised);
  box-shadow: 0 6px 18px rgba(60, 40, 120, 0.16);
  font-size: clamp(20px, 4cqh, 32px);
  font-weight: 900;
  white-space: nowrap;
}

.booth__name::before {
  content: '';
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.35em;
  border-radius: 50%;
  background: var(--tint);
  vertical-align: 0.05em;
}

.part {
  position: absolute;
  left: calc(50% + cos(var(--a)) * 41%);
  top: calc(48% + sin(var(--a)) * 38%);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px 0 11px;
  translate: -50% -50%;
  border: 1px solid light-dark(#ece9e4, #3a3734);
  border-radius: 999px;
  background: var(--raised);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--tint) 80%, transparent);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  transition:
    background 250ms,
    border-color 250ms,
    transform 300ms var(--ease-floor);
}

.part .i {
  width: 18px;
  height: 18px;
  color: var(--tint-ink);
}

.part[data-on] {
  border-color: color-mix(in srgb, var(--tint) 70%, transparent);
  background: color-mix(in srgb, var(--tint) 22%, var(--raised));
  transform: scale(1.08);
}

.booth__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.4cqh;
}

.booth__side h2 {
  font-size: clamp(34px, 8cqh, 72px);
}

.booth__side > p {
  max-width: 24ch;
  color: var(--ink-2);
  font-size: clamp(17px, 3cqh, 24px);
  font-weight: 800;
}

.booth__keys {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-top: 1cqh;
}

.six {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2cqh;
}

.six button {
  display: grid;
  place-items: center;
  width: clamp(48px, 8cqh, 64px);
  height: clamp(48px, 8cqh, 64px);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tint) 30%, white), color-mix(in srgb, var(--tint) 70%, white));
  box-shadow:
    0 3px 0 color-mix(in srgb, var(--tint) 60%, #2a2440),
    0 6px 12px rgba(40, 30, 80, 0.16);
  cursor: pointer;
  transition: transform 160ms var(--ease-out);
}

.six button:hover {
  transform: translateY(-3px);
}

.six button[aria-pressed='true'] {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
}

.six img {
  width: 90%;
}

/* ---- CH 4: shared ---- */

.ch-shared {
  background:
    radial-gradient(50% 40% at 80% 18%, light-dark(rgba(255, 126, 182, 0.14), rgba(255, 126, 182, 0.08)), transparent),
    linear-gradient(180deg, light-dark(#efeaff, #221f2e), var(--paper) 62%);
}

.shared__head {
  position: absolute;
  top: clamp(20px, 9cqh, 90px);
  left: 7cqw;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.8cqh;
  max-width: min(640px, 86cqw);
}

.shared__head h2 {
  font-size: clamp(36px, 8.4cqh, 78px);
}

.shared__head > p:not(.shared__safe) {
  max-width: 36ch;
  color: var(--ink-2);
  font-size: clamp(17px, 2.9cqh, 24px);
  font-weight: 800;
}

.shared__keys {
  margin-top: 1cqh;
}

.shared__safe {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 800;
}

.shared__safe .i {
  color: var(--ok);
}

/* The real .apexpack file art, floating where packs come from. */
.shared__pack {
  position: absolute;
  top: clamp(16px, 7cqh, 70px);
  right: 8cqw;
  z-index: 2;
  width: min(36cqh, 24cqw);
  filter: drop-shadow(0 18px 30px rgba(80, 50, 180, 0.22));
  animation: float 4s ease-in-out infinite alternate;
}

@keyframes float {
  from {
    transform: translateY(0) rotate(-4deg);
  }
  to {
    transform: translateY(-12px) rotate(2deg);
  }
}

.parade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50cqh;
}

/* The street they walk along: a strip of the floor field. */
.parade::before {
  content: '';
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: 4%;
  height: 46%;
  border-radius: 50%;
  background:
    radial-gradient(circle, light-dark(rgba(106, 75, 255, 0.28), rgba(180, 160, 255, 0.16)) 1.5px, transparent 2px) 0 0 / 22px 12px,
    radial-gradient(closest-side, light-dark(rgba(143, 116, 248, 0.16), rgba(143, 116, 248, 0.1)), transparent);
  -webkit-mask-image: radial-gradient(closest-side, #000 50%, transparent);
  mask-image: radial-gradient(closest-side, #000 50%, transparent);
}

.walker {
  --h: min(23cqh, 180px);
  position: absolute;
  left: 0;
  bottom: var(--y);
  z-index: var(--z);
  width: var(--h);
  height: var(--h);
  animation: walk var(--dur) linear var(--delay) infinite;
}

@keyframes walk-narrow {
  from {
    transform: translateX(-70cqw);
  }
  to {
    transform: translateX(170cqw);
  }
}

@keyframes walk {
  from {
    transform: translateX(-28cqw);
  }
  to {
    transform: translateX(118cqw);
  }
}

/* The walk row of the companion's sheet, stepped by CSS: no script per frame. */
.walker__body {
  position: absolute;
  inset: 0;
  translate: 0 calc((1 - var(--feet, 0.9)) * 100%);
  background: 0 0 / 800% 500% no-repeat;
  animation: sprite-walk 0.84s steps(8) infinite;
}

@keyframes sprite-walk {
  to {
    background-position-x: 114.2857%;
  }
}

.walker {
  cursor: pointer;
}

.walker--back {
  animation-name: walk-back;
}

.walker--back .walker__body {
  transform: scaleX(-1);
}

@keyframes walk-back {
  from {
    transform: translateX(118cqw);
  }
  to {
    transform: translateX(-28cqw);
  }
}

@keyframes walk-back-narrow {
  from {
    transform: translateX(170cqw);
  }
  to {
    transform: translateX(-70cqw);
  }
}

.walker[data-wave] {
  animation-play-state: paused;
}

.walker[data-wave] .walker__body {
  transform: none;
  background-position-y: 75%;
  animation: sprite-wave 0.5s steps(5) infinite;
}

.walker[data-wave] .sign {
  scale: 1.08;
}

@keyframes sprite-wave {
  from {
    background-position-x: 14.2857%;
  }
  to {
    background-position-x: 85.7143%;
  }
}

.walker::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 44%;
  height: 11%;
  translate: -50% 50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, light-dark(rgba(50, 30, 80, 0.26), rgba(0, 0, 0, 0.5)), transparent);
}

/* The pack each one carries, on a little stick. */
.sign {
  position: absolute;
  left: 50%;
  bottom: 88%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 7px;
  translate: -50% 0;
  border-radius: 14px;
  background: var(--raised);
  box-shadow: 0 8px 20px light-dark(rgba(60, 40, 120, 0.18), rgba(0, 0, 0, 0.5));
  white-space: nowrap;
  animation: sway 0.84s ease-in-out infinite alternate;
  transform-origin: 50% 160%;
}

@keyframes sway {
  from {
    rotate: -3deg;
  }
  to {
    rotate: 3deg;
  }
}

.sign::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 4px;
  height: 16px;
  translate: -50% 0;
  border-radius: 2px;
  background: light-dark(#c9b79e, #6a5e50);
}

.sign__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tint) 30%, var(--raised));
  color: var(--tint-ink);
}

.sign__icon .i {
  width: 18px;
  height: 18px;
}

.sign__icon img {
  width: 30px;
  height: 30px;
}

.sign__text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.sign__text small {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sign__text b {
  font-size: 15px;
  font-weight: 900;
}

/* ---- CH 5: get ---- */

.ch-get {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5cqh;
  padding: 6cqh 4cqw 4cqh;
  background:
    radial-gradient(60% 40% at 50% 100%, light-dark(rgba(255, 126, 182, 0.16), rgba(255, 126, 182, 0.08)), transparent),
    linear-gradient(180deg, light-dark(#e9e2ff, #1f1c2b), light-dark(#f8f2fa, #24212c) 50%, var(--paper));
  text-align: center;
}

.ch-get h2 {
  position: relative;
  z-index: 2;
  font-size: clamp(40px, 10cqh, 96px);
}

.get__floor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.get__cast {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.get__fig {
  position: relative;
  width: min(24cqh, 15cqw);
  aspect-ratio: 1;
  margin-inline: min(-2.4cqh, -1.5cqw);
  pointer-events: auto;
}

.get__fig:nth-child(3) {
  width: min(30cqh, 19cqw);
  z-index: 2;
}

.get__cta {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 1cqh;
}

.get__os {
  color: var(--ink-3);
  font-size: 17px;
  font-weight: 800;
}

.get__os a {
  color: var(--ink-2);
  text-underline-offset: 3px;
}

.get__note {
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 700;
}

.get__foot {
  position: absolute;
  bottom: clamp(10px, 2.4cqh, 22px);
  left: 0;
  right: 0;
  z-index: 2;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 700;
}

/* ---- smaller screens ---- */

@container screen (max-width: 760px) {
  .show__window {
    aspect-ratio: 4 / 3.4;
  }

  .act--form {
    padding: 5% 7%;
  }

  .booth {
    grid-template-rows: 46cqh auto;
    align-content: start;
    gap: 1cqh;
    padding: 7cqh 5cqw 3cqh;
  }

  .booth__figure {
    width: min(40cqh, 62cqw);
    bottom: 18%;
  }

  .booth__parts {
    display: none;
  }

  .booth__name {
    font-size: 20px;
    padding: 6px 16px 7px;
  }

  .booth__side {
    gap: 1.6cqh;
  }

  .booth__side h2 {
    font-size: clamp(28px, 5.4cqh, 44px);
  }

  .booth__side > p {
    font-size: 16px;
  }

  .booth__keys {
    justify-content: center;
    margin-top: 0;
  }

  .booth__keys .key--big {
    height: 48px;
    padding: 0 20px;
    font-size: 16px;
  }

  .six {
    justify-content: center;
    gap: 8px;
    margin-top: 0.5cqh;
  }

  .six button {
    width: 44px;
    height: 44px;
  }

  .shared__pack {
    display: none;
  }

  .shared__head > p:not(.shared__safe) {
    font-size: 16px;
  }

  .shared__safe {
    font-size: 13px;
  }

  .walker {
    animation-name: walk-narrow;
  }

  .walker--back {
    animation-name: walk-back-narrow;
  }

  .sign {
    gap: 6px;
    padding: 5px 9px 5px 5px;
    border-radius: 11px;
  }

  .sign__icon {
    width: 26px;
    height: 26px;
    border-radius: 8px;
  }

  .sign__text small {
    font-size: 10px;
  }

  .sign__text b {
    font-size: 13px;
  }

  .ch-get h2 {
    font-size: clamp(36px, 13cqw, 64px);
  }

  .get__fig {
    width: 22cqw;
    margin-inline: -4cqw;
  }

  .get__fig:nth-child(3) {
    width: 28cqw;
  }

  .get__cta .key--huge {
    height: 58px;
    padding: 0 22px;
    font-size: 18px;
  }

  .tools {
    top: auto;
    bottom: 12px;
    flex-direction: row;
    gap: 10px;
    translate: none;
  }

  .tool {
    width: 50px;
    height: 50px;
  }

  .tool .i {
    width: 23px;
    height: 23px;
  }

  .tool span {
    left: 50%;
    top: auto;
    bottom: calc(100% + 10px);
    translate: -50% 4px;
  }

  .tool:hover span,
  .tool:focus-visible span {
    translate: -50% 0;
  }

  .square__hint {
    display: none;
  }

  .lower-third {
    bottom: 74px;
    flex-wrap: wrap;
    gap: 10px;
  }

  .lt__face {
    width: 60px;
    height: 60px;
  }

  .lt__name {
    font-size: 22px;
  }

  .lt__go {
    order: 4;
    width: 100%;
  }

  .lt__close {
    position: absolute;
    top: 8px;
    right: 8px;
  }

  .show {
    flex-direction: column;
    gap: 2cqh;
    padding-top: 12cqh;
  }

  .show__window {
    width: 92cqw;
  }

  .show__star {
    order: -1;
    width: min(30cqh, 40cqw);
    margin-top: 6cqh;
  }

  .say {
    max-width: 70cqw;
  }

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

  .booth__side {
    align-items: center;
    text-align: center;
  }

  .part {
    height: 32px;
    padding: 0 10px 0 8px;
    font-size: 12px;
  }

  .shared__head {
    left: 6cqw;
    right: 6cqw;
    top: 12cqh;
  }

  .shared__head h2 {
    font-size: clamp(32px, 6.4cqh, 54px);
  }

  .parade {
    height: 40cqh;
  }
}

@media (max-width: 860px) {
  .grille,
  .presets {
    display: none;
  }

  .tuner {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .badge span,
  .badge .led {
    display: none;
  }

  .panel .key--go span {
    display: none;
  }

  .panel .key--go {
    width: 46px;
    padding: 0;
  }

  .lcd {
    width: auto;
    flex: 1;
    font-size: 24px;
    gap: 8px;
  }

  .tuner {
    min-width: 0;
  }

  [data-sound] {
    display: none;
  }
}

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

  .walker {
    animation: none !important;
  }
}