@font-face {
  font-family: "Fusion Pixel";
  src: url("./fonts/fusion-pixel-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0100-024F;
}

@font-face {
  font-family: "Fusion Pixel";
  src: url("./fonts/fusion-pixel-zh.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+3000-30FF, U+4E00-9FFF, U+FF00-FFEF;
}

:root {
  --acid: #c8ff00;
  --ink: #000000;
  --mute: #2c2c2c;
  --dim: #6b6b6b;
  --fog: #111111;
  --hud: "Fusion Pixel", "Silkscreen", ui-monospace, monospace;
  --display: "Jersey 15", "Fusion Pixel", "Silkscreen", sans-serif;
  --zh: "Fusion Pixel", "Silkscreen", sans-serif;
  --pix: "Press Start 2P", "Fusion Pixel", monospace;
  --px: 0;
  --py: 0;
  --mx: 50vw;
  --my: 50vh;
}

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

html,
body {
  min-height: 100svh;
  height: 100dvh;
  overflow: hidden;
  background: #050805;
  color: var(--acid);
  font-family: var(--hud);
  cursor: none;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smooth: never;
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: none;
}

img {
  display: block;
}

.fx {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 40;
}

.grain {
  opacity: 0.09;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation: grain-shift 0.35s steps(2) infinite;
}

.scanlines {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.55) 0px,
      rgba(0, 0, 0, 0.55) 2px,
      rgba(180, 255, 80, 0.06) 3px,
      transparent 4px
    );
  opacity: 0.7;
  animation: scan-drift 4.8s linear infinite;
  mix-blend-mode: overlay;
}

.crt-sweep {
  height: 28%;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(200, 255, 0, 0.07),
    rgba(255, 255, 255, 0.04),
    transparent
  );
  animation: crt-sweep 4.2s linear infinite;
  mix-blend-mode: screen;
}

.rgb-split {
  box-shadow: inset 2px 0 0 rgba(255, 0, 60, 0.08), inset -2px 0 0 rgba(0, 255, 120, 0.08);
  mix-blend-mode: screen;
  animation: rgb-jitter 0.18s steps(2) infinite;
}

.flicker {
  background: rgba(200, 255, 0, 0.035);
  mix-blend-mode: overlay;
  animation: tv-flicker 0.12s steps(2) infinite;
}

.vignette {
  box-shadow:
    inset 0 0 220px 48px #000,
    inset 0 0 90px 16px rgba(0, 0, 0, 0.9),
    inset 0 -40px 80px rgba(0, 40, 0, 0.25);
}

.field {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
}

.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.sparks {
  position: fixed;
  inset: 0;
  z-index: 41;
  pointer-events: none;
}

svg.reticle {
  position: fixed;
  z-index: 80;
  width: 88px;
  height: 88px;
  left: 0;
  top: 0;
  margin: -44px 0 0 -44px;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 0 6px #c8ff00);
  transform: translate3d(var(--mx), var(--my), 0);
}

.pix {
  position: fixed;
  z-index: 3;
  width: 120px;
  height: 120px;
  pointer-events: none;
  background:
    linear-gradient(#c8ff00, #c8ff00) 0 0 / 48px 24px no-repeat,
    linear-gradient(#c8ff00, #c8ff00) 0 24px / 24px 24px no-repeat,
    linear-gradient(#c8ff00, #c8ff00) 0 48px / 24px 24px no-repeat;
  opacity: 0.92;
}

.pix--tl { top: 0; left: 0; }
.pix--tr {
  top: 0;
  right: 0;
  transform: scaleX(-1);
}
.pix--bl {
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
}
.pix--br {
  bottom: 0;
  right: 0;
  transform: scale(-1);
}

.deck {
  position: fixed;
  z-index: 45;
  right: calc(13% + env(safe-area-inset-right));
  bottom: calc(13% + env(safe-area-inset-bottom));
  width: 128px;
  height: 128px;
  padding: 0;
  border: 2px solid #000;
  background: var(--acid);
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  transform: scale(var(--ds, 1));
  transform-origin: center center;
  transition: box-shadow 0.14s linear, transform 0.08s linear;
}

.deck:focus-visible {
  outline: 1px solid #000;
  outline-offset: 3px;
}

.deck.is-hot,
.deck.is-press {
  box-shadow: 0 0 22px rgba(200, 255, 0, 0.55), 0 0 0 2px #000;
}

.deck.is-on {
  box-shadow: 0 0 26px rgba(200, 255, 0, 0.42);
}

.deck.is-press {
  --ds: 0.94;
}

.deck__frame {
  position: relative;
  z-index: 0;
  width: 128px;
  height: 128px;
  display: grid;
  place-items: center;
  overflow: hidden;
  animation: deck-spin 3.6s steps(32) infinite;
  animation-play-state: paused;
  will-change: transform;
}

.deck.is-on .deck__frame {
  animation-play-state: running;
}

.deck__vinyl {
  width: 128px;
  height: 128px;
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform: none;
}

.deck__scan,
.deck__sweep {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.deck__scan {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.5) 0px,
      rgba(0, 0, 0, 0.5) 1px,
      rgba(200, 255, 0, 0.1) 2px,
      transparent 3px
    );
  mix-blend-mode: multiply;
  opacity: 0.72;
  animation: scan-drift 3.4s linear infinite;
}

.deck.is-on .deck__scan,
.deck.is-hot .deck__scan {
  opacity: 0.92;
  animation-duration: 1.35s;
}

.deck__sweep {
  height: 38%;
  inset: auto 0 0 0;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(200, 255, 0, 0.22),
    rgba(255, 255, 255, 0.08),
    transparent
  );
  mix-blend-mode: screen;
  animation: crt-sweep 3.8s linear infinite;
}

.deck.is-on .deck__sweep {
  animation-duration: 1.8s;
}

body.is-overlay .deck {
  pointer-events: none;
  z-index: 20;
}

.deck__embed {
  display: none;
}

@keyframes deck-spin {
  to { transform: rotate(360deg); }
}

@keyframes scan-drift {
  from { background-position: 0 0; }
  to { background-position: 0 12px; }
}

@keyframes crt-sweep {
  0% { transform: translateY(-120%); }
  100% { transform: translateY(430%); }
}

@keyframes rgb-jitter {
  0% { transform: translate(0, 0); }
  50% { transform: translate(1px, -0.5px); }
  100% { transform: translate(-1px, 0.5px); }
}

@keyframes tv-flicker {
  0%, 100% { opacity: 0.08; }
  50% { opacity: 0.22; }
}

.pointer-glow {
  position: fixed;
  z-index: 2;
  width: 280px;
  height: 280px;
  left: 0;
  top: 0;
  margin: -140px 0 0 -140px;
  pointer-events: none;
  background: radial-gradient(
    circle,
    rgba(200, 255, 0, 0.12) 0%,
    rgba(200, 255, 0, 0.04) 32%,
    transparent 70%
  );
  mix-blend-mode: screen;
  transform: translate3d(var(--mx), var(--my), 0);
}

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-1%, 1%); }
  100% { transform: translate(1%, -1%); }
}

/* ---------- boot ---------- */

.boot {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000;
  display: grid;
  place-items: center;
  transition: opacity 0.55s ease, visibility 0.55s ease;
}

.boot.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: none;
}

.boot__frame {
  width: min(520px, calc(100% - 40px));
}

.boot__kicker,
.boot__id {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--acid);
}

.boot__id {
  margin-top: 4px;
  color: var(--dim);
}

.boot__init {
  margin: 28px 0 18px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(48px, 12vw, 88px);
  letter-spacing: 0.08em;
  line-height: 0.9;
  color: var(--acid);
  padding-left: 6px;
}

.boot__log {
  font-family: var(--hud);
  font-size: 12px;
  line-height: 1.7;
  color: var(--acid);
  min-height: 9.5em;
  white-space: pre-wrap;
}

/* ---------- shell ---------- */

.shell {
  position: relative;
  z-index: 2;
  width: min(1280px, calc(100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  height: 100dvh;
  margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top)) 0 calc(12px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: opacity 0.4s ease;
}

.hud-rail {
  position: fixed;
  z-index: 3;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 56px;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.hud-rail .top__block,
.hud-rail .matrix,
.hud-rail .nested {
  width: 56px;
  height: 56px;
}

@media (min-width: 901px) {
  .scan {
    flex: 1;
    min-height: 0;
  }
}

.top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  min-height: 64px;
  flex: 0 0 auto;
}

.top__end {
  display: grid;
  grid-template-columns: minmax(100px, 160px) 88px 72px;
  gap: 8px;
}

.top__block {
  position: relative;
  background: var(--acid);
  overflow: hidden;
}

.top__scan {
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  background: #000;
  animation: block-scan 1.4s linear infinite;
}

.matrix {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 3px;
  padding: 6px;
  border: 1px solid var(--acid);
  background: #000;
}

.matrix i {
  background: var(--acid);
  opacity: 0.12;
  transition: opacity 0.08s linear;
}

.matrix i.is-on {
  opacity: 1;
  box-shadow: 0 0 6px var(--acid);
}

.nested {
  position: relative;
  background: #000;
  border: 1px solid var(--acid);
}

.nested span {
  position: absolute;
  inset: 12%;
  border: 2px solid var(--acid);
  animation: nest-pulse 1.8s ease-in-out infinite;
}

.nested span:nth-child(2) {
  inset: 26%;
  animation-delay: 0.2s;
}

.nested span:nth-child(3) {
  inset: 40%;
  animation-delay: 0.4s;
}

.nested span:nth-child(4) {
  inset: 54%;
  background: var(--acid);
  animation-delay: 0.6s;
}

@keyframes nest-pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  50% { opacity: 1; transform: scale(1); }
}

@keyframes block-scan {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(360%); }
}

.top__id {
  min-width: 0;
  border: 1px solid var(--mute);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.top__id p:first-child {
  font-size: 15px;
  letter-spacing: 0.22em;
  color: var(--acid);
}

.top__id p:last-child {
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--dim);
}

/* ---------- scan / persona labels ---------- */

.scan {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.scan-title {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: #000;
  color: var(--acid);
  width: max-content;
}

.scan-title__kicker {
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--acid);
}

.scan__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  container-type: size;
  --eye-x: 34%;
  --eye-y: 52%;
}

.brand-mark {
  position: absolute;
  z-index: 8;
  right: 2%;
  top: 4%;
  left: auto;
  max-width: 48%;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  transform: none;
  pointer-events: none;
  color: var(--acid);
  text-align: right;
  text-transform: uppercase;
  opacity: 1;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}

.brand-mark__kicker {
  font-family: var(--hud);
  font-size: clamp(12px, 1.3vw, 16px);
  letter-spacing: 0.28em;
  opacity: 0.8;
}

.brand-mark__title {
  font-family: var(--display);
  font-size: clamp(42px, 7.2vw, 96px);
  line-height: 0.8;
  letter-spacing: 0.04em;
  color: #000;
  background: var(--acid);
  padding: 0.1em 0.16em 0.06em;
  box-shadow: 8px 8px 0 #000;
}

.brand-mark__sub {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-family: var(--display);
  font-size: clamp(20px, 3vw, 36px);
  line-height: 0.9;
  letter-spacing: 0.08em;
}

.brand-mark__sub i {
  display: block;
  width: 0.7em;
  height: 0.55em;
  background: var(--acid);
}

.scan__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}

.scan__eye {
  position: absolute;
  left: var(--eye-x);
  top: var(--eye-y);
  width: min(380px, 42vh, 48vw);
  height: min(380px, 42vh, 48vw);
  margin: 0;
  z-index: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: none;
  color: inherit;
}

.scan__eye:focus-visible {
  outline: 1px solid var(--acid);
  outline-offset: 6px;
}

.pixel-eye {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: saturate(1.15) contrast(1.08) drop-shadow(0 0 18px rgba(200, 255, 0, 0.35));
  transition: filter 0.18s linear;
}

.scan__eye:hover .pixel-eye,
.scan__eye:focus-visible .pixel-eye {
  filter: saturate(1.2) contrast(1.12) drop-shadow(0 0 28px rgba(200, 255, 0, 0.75));
}

.scan__nav {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: block;
  pointer-events: none;
  --orbit-x: 50%;
  --orbit-y: 50%;
  --rad: min(40cqmin, 280px);
}

#targets {
  --orbit-x: var(--eye-x);
  --orbit-y: var(--eye-y);
  --rad: 220px;
  --rad: min(44cqmin, 300px);
}

#inner-nav,
#social-nav {
  --orbit-x: 50%;
  --orbit-y: 50%;
  --rad: 200px;
  --rad: min(38cqmin, 260px);
}

#targets .scan-btn:nth-child(1) { --ang: 54deg; }
#targets .scan-btn:nth-child(2) { --ang: 126deg; }
#targets .scan-btn:nth-child(3) { --ang: 198deg; }
#targets .scan-btn:nth-child(4) { --ang: 270deg; }
#targets .scan-btn:nth-child(5) { --ang: 342deg; }

#inner-nav .scan-btn:nth-child(1) { --ang: 150deg; }
#inner-nav .scan-btn:nth-child(2) { --ang: 30deg; }

#social-nav .scan-btn:nth-child(1) { --ang: 18deg; }
#social-nav .scan-btn:nth-child(2) { --ang: 125deg; }
#social-nav .scan-btn:nth-child(3) { --ang: 232deg; }

button.scan-btn,
button.inner__back,
button.layer__close,
button.viewer__nav,
button.viewer__op {
  font-family: inherit;
  cursor: none;
  touch-action: manipulation;
}

a.scan-btn,
.scan__eye,
.inner__brand,
.thumbs button {
  touch-action: manipulation;
}

.scan-btn {
  position: absolute;
  left: calc(var(--orbit-x, 50%) + cos(var(--ang, 0deg)) * var(--rad, 0px));
  top: calc(var(--orbit-y, 50%) + sin(var(--ang, 0deg)) * var(--rad, 0px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 14px 6px;
  background: transparent;
  color: var(--acid);
  border: 0;
  width: max-content;
  white-space: nowrap;
  text-align: center;
  box-shadow: none;
  pointer-events: auto;
  transform-origin: center center;
  transform:
    translate(-50%, -50%)
    perspective(720px)
    translate3d(var(--ox, 0px), var(--oy, 0px), var(--oz, 0px))
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    scale(var(--sc, 1));
  transform-style: preserve-3d;
  will-change: transform, background, color;
  transition: background 0.14s linear, color 0.14s linear, box-shadow 0.14s linear;
}

.scan-btn__en {
  font-family: var(--display);
  font-size: clamp(22px, 3.4vw, 42px);
  line-height: 0.92;
  letter-spacing: 0.04em;
}

.scan-btn__zh {
  font-family: var(--zh);
  font-size: 14px;
  color: #7a8a4a;
}

.scan-btn:focus-visible,
.scan-btn.is-hot,
.scan-btn.is-press {
  background: var(--acid);
  color: #000;
  outline: none;
  box-shadow: 10px 0 0 var(--acid), -16px 0 0 var(--acid);
  z-index: 6;
}

.scan-btn:focus-visible .scan-btn__zh,
.scan-btn.is-hot .scan-btn__zh,
.scan-btn.is-press .scan-btn__zh {
  color: #111;
}

@media (hover: hover) and (pointer: fine) {
  .scan-btn:hover {
    background: var(--acid);
    color: #000;
    outline: none;
    box-shadow: 10px 0 0 var(--acid), -16px 0 0 var(--acid);
    z-index: 6;
  }

  .scan-btn:hover .scan-btn__zh {
    color: #111;
  }

  .deck:hover {
    box-shadow: 0 0 22px rgba(200, 255, 0, 0.55), 0 0 0 2px #000;
  }

  .deck:hover .deck__scan {
    opacity: 0.92;
    animation-duration: 1.35s;
  }
}

.scan-btn.is-picked {
  position: fixed;
  z-index: 30;
  left: var(--pick-x);
  top: var(--pick-y);
  margin: 0;
  transform: translate(-50%, -50%) scale(1.18);
  transition:
    left 0.48s cubic-bezier(0.22, 0.9, 0.28, 1),
    top 0.48s cubic-bezier(0.22, 0.9, 0.28, 1),
    transform 0.48s cubic-bezier(0.22, 0.9, 0.28, 1),
    background 0.14s linear,
    color 0.14s linear;
  pointer-events: none;
}

.pick {
  position: absolute;
  left: var(--eye-x);
  top: 36%;
  z-index: 4;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.28s cubic-bezier(0.2, 1.2, 0.3, 1);
}

.pick.is-on {
  opacity: 1;
  transform: scale(1);
}

.pick__icon {
  width: 96px;
  height: 96px;
  color: var(--acid);
  filter: drop-shadow(0 0 12px rgba(200, 255, 0, 0.55));
}

.pick__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

body.is-picking .scan-btn:not(.is-picked) {
  opacity: 0.28;
}

body.is-picking .scan__lines {
  opacity: 0.15;
}

.scan__foot {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 12px;
  flex: 0 0 auto;
  padding: 2px 8px 0;
}

.scan__foot .launch-word {
  margin: 0;
  color: var(--acid);
  font-size: clamp(36px, 5.8vw, 72px);
}

.scan__hint {
  font-size: 15px;
  letter-spacing: 0.12em;
  color: #4a4a4a;
}

.layout {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 14px;
  margin-top: 12px;
  align-items: stretch;
  perspective: 1600px;
  flex: 1;
  min-height: 0;
}

.col {
  min-width: 0;
  min-height: 0;
}

.col--ident,
.col--ops {
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
}

/* ---------- init ---------- */

.init__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 6vw, 64px);
  letter-spacing: 0.12em;
  line-height: 0.85;
  color: var(--acid);
  padding-left: 4px;
  transform: translate3d(calc(var(--px) * -8px), calc(var(--py) * -6px), 0);
}

.init__meta {
  margin-top: 4px;
  color: var(--mute);
  font-size: 12px;
  letter-spacing: 0.04em;
  line-height: 1.55;
}

.cores {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0 16px;
  margin: 8px 0;
  color: #3a3a3a;
}

.init__stable {
  margin-top: 6px;
}

/* ---------- mark panel ---------- */

.mark-panel {
  position: relative;
  margin-top: 10px;
  background: var(--acid);
  color: #000;
  min-height: 0;
  padding: 12px 12px 10px;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
  will-change: transform;
  transform: translate3d(calc(var(--px) * -12px), calc(var(--py) * -8px), 0);
}

.mark-panel__ornament {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 700;
  padding-right: 28px;
}

.xx {
  font-family: var(--hud);
}

.code {
  font-family: var(--hud);
}

.rotated {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.2em;
  font-size: 10px;
  position: absolute;
  right: 18px;
  top: 16px;
}

.play {
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid #000;
}

.dots {
  width: 28px;
  height: 28px;
  background-image: radial-gradient(#000 1.4px, transparent 1.5px);
  background-size: 8px 8px;
}

.serial {
  margin-left: auto;
  font-size: 10px;
}

.mark {
  margin-top: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 0.82;
  letter-spacing: 0.02em;
  color: #000;
  text-transform: uppercase;
  position: relative;
  white-space: nowrap;
  width: max-content;
  max-width: 100%;
  flex: 0 0 auto;
}

.mark::before,
.mark::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.mark::before {
  clip-path: inset(22% 0 62% 0);
  transform: translate(6px, 0);
}

.mark::after {
  clip-path: inset(66% 0 12% 0);
  transform: translate(-4px, 0);
}

.mark-panel__tag {
  margin-top: 8px;
  padding-top: 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  flex: 0 0 auto;
}

.eye-stage {
  position: relative;
  flex: 1;
  min-height: 120px;
  margin-top: 6px;
}

.pixel-eye {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.eye-n {
  position: absolute;
  z-index: 1;
  font-family: var(--pix);
  font-size: 8px;
  letter-spacing: 0;
  color: #000;
  opacity: 0.4;
  pointer-events: none;
}

.eye-n.n1 { top: 4px; left: 6px; }
.eye-n.n2 { top: 4px; left: 28%; }
.eye-n.n3 { top: 4px; left: 50%; transform: translateX(-50%); }
.eye-n.n4 { top: 4px; right: 28%; }
.eye-n.n5 { top: 4px; right: 6px; }

.eye-stage::before,
.eye-stage::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(#000, #000) center / 14px 2px no-repeat,
    linear-gradient(#000, #000) center / 2px 14px no-repeat;
}

.eye-stage::before { top: 2px; left: 2px; }
.eye-stage::after { top: 2px; right: 2px; }

.run-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 2px;
  padding: 0 4px;
  flex: 0 0 auto;
}

.run-label {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(46px, 7.7vw, 82px);
  letter-spacing: 0.02em;
  color: var(--acid);
  line-height: 0.8;
  transform: translate3d(calc(var(--px) * 8px), calc(var(--py) * 4px), 0);
}

.glyph {
  width: 132px;
  height: 72px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.glyph i {
  background: var(--acid);
}

.glyph i:nth-child(2),
.glyph i:nth-child(7),
.glyph i:nth-child(8),
.glyph i:nth-child(11),
.glyph i:nth-child(13) {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--acid);
}

.glyph i:nth-child(4),
.glyph i:nth-child(16) {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 35% 100%);
}

.glyph i:nth-child(3),
.glyph i:nth-child(6),
.glyph i:nth-child(10),
.glyph i:nth-child(15) {
  animation: glyph-flicker 2.8s steps(2) infinite;
}

.glyph i:nth-child(6) { animation-delay: 0.4s; }
.glyph i:nth-child(10) { animation-delay: 1.1s; }
.glyph i:nth-child(15) { animation-delay: 1.8s; }

@keyframes glyph-flicker {
  0%, 80% { opacity: 1; }
  81%, 100% { opacity: 0.15; }
}

/* ---------- ops / targets ---------- */

.ops-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
  color: var(--dim);
  font-size: 11px;
  letter-spacing: 0.18em;
}

.ops-head__kicker {
  color: var(--acid);
}

.targets {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.target {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #1d1d1d;
  padding: 8px 12px;
  min-height: 52px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.target:nth-child(1) { transform: translate3d(calc(var(--px) * 4px), calc(var(--py) * 2px), 0); }
.target:nth-child(2) { transform: translate3d(calc(var(--px) * 7px), calc(var(--py) * 4px), 0); }
.target:nth-child(3) { transform: translate3d(calc(var(--px) * 10px), calc(var(--py) * 6px), 0); }
.target:nth-child(4) { transform: translate3d(calc(var(--px) * 13px), calc(var(--py) * 8px), 0); }
.target:nth-child(5) { transform: translate3d(calc(var(--px) * 16px), calc(var(--py) * 10px), 0); }

.target__idx {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--mute);
}

.target__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.target__name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.04em;
  line-height: 0.95;
  color: var(--acid);
}

.target__zh {
  font-family: var(--zh);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--dim);
}

.target__host {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #3f3f3f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.target__go {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: #3a3a3a;
}

.target:hover,
.target:focus-visible,
.target.is-hot {
  background: var(--acid);
  border-color: var(--acid);
  color: #000;
  outline: none;
}

.target:hover .target__idx,
.target:focus-visible .target__idx,
.target.is-hot .target__idx,
.target:hover .target__name,
.target:focus-visible .target__name,
.target.is-hot .target__name,
.target:hover .target__zh,
.target:focus-visible .target__zh,
.target.is-hot .target__zh,
.target:hover .target__host,
.target:focus-visible .target__host,
.target.is-hot .target__host,
.target:hover .target__go,
.target:focus-visible .target__go,
.target.is-hot .target__go {
  color: #000;
}

.target:hover .target__go,
.target:focus-visible .target__go,
.target.is-hot .target__go {
  font-weight: 700;
}

/* ---------- launch panel ---------- */

.launch-panel {
  position: relative;
  margin-top: auto;
  background: var(--acid);
  color: #000;
  min-height: 0;
  padding: 10px 12px 0;
  overflow: hidden;
  will-change: transform;
  transform: translate3d(calc(var(--px) * 10px), calc(var(--py) * 8px), 0);
}

.ops-reticle {
  position: relative;
  height: 52px;
  transform: translate3d(calc(var(--px) * 16px), calc(var(--py) * 12px), 0);
}

.reticle__plus {
  position: absolute;
  width: 18px;
  height: 18px;
}

.reticle__plus::before,
.reticle__plus::after {
  content: "";
  position: absolute;
  background: #000;
}

.reticle__plus::before {
  left: 8px;
  top: 0;
  width: 2px;
  height: 18px;
}

.reticle__plus::after {
  left: 0;
  top: 8px;
  width: 18px;
  height: 2px;
}

.p1 { top: 8px; left: 18%; }
.p2 { top: 8px; right: 18%; }
.p3 { bottom: 8px; left: 18%; }
.p4 { bottom: 8px; right: 18%; }

.reticle__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42px;
  height: 42px;
  border: 7px solid #000;
  border-radius: 50%;
  border-top-color: transparent;
  animation: ring-spin 10s linear infinite;
}

@keyframes ring-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.launch-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 4px 0;
}

.barcode {
  width: 78px;
  height: 22px;
  background: repeating-linear-gradient(
    to right,
    #000 0 3px,
    transparent 3px 6px,
    #000 6px 8px,
    transparent 8px 10px,
    #000 10px 14px,
    transparent 14px 16px
  );
}

.sym {
  font-size: 22px;
  font-weight: 700;
}

.eye {
  width: 22px;
  height: 22px;
  border: 3px solid #000;
  border-radius: 50%;
  position: relative;
}

.eye::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: #000;
  border-radius: 50%;
}

.pix {
  font-family: var(--pix);
  font-size: 10px;
  letter-spacing: 0.08em;
}

.sig {
  font-size: 18px;
}

.launch-word {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 72px);
  line-height: 0.8;
  letter-spacing: 0.02em;
  margin-top: 6px;
  text-transform: uppercase;
}

.launch-sub {
  font-size: 11px;
  letter-spacing: 0.22em;
  margin-top: 8px;
}

.notches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 10px;
  height: 22px;
}

.notches i {
  background: #000;
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
}

.status {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: #3a3a3a;
  border-top: 1px solid #1a1a1a;
  padding-top: 10px;
  padding-right: 16px;
  flex: 0 0 auto;
}

body.is-launching .launch-word {
  animation: launch-blink 0.12s steps(2) infinite;
}

body.is-launching .launch-panel {
  filter: invert(1);
}

@keyframes launch-blink {
  to { opacity: 0.2; }
}

/* ---------- inner iris / dive ---------- */

body.is-diving .brand-mark,
body.is-diving .scan__nav,
body.is-diving .scan__lines,
body.is-diving .scan__foot,
body.is-diving .top,
body.is-diving .status,
body.is-diving .hud-rail,
body.is-diving .pix,
body.is-diving .pick,
body.is-surfacing .brand-mark,
body.is-surfacing .scan__nav,
body.is-surfacing .scan__lines,
body.is-surfacing .scan__foot,
body.is-surfacing .top,
body.is-surfacing .status,
body.is-surfacing .hud-rail,
body.is-surfacing .pix,
body.is-surfacing .pick {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.32s linear;
}

body.is-diving .scan__eye {
  z-index: 21;
  pointer-events: none;
  animation: iris-plunge 0.92s cubic-bezier(0.18, 0.7, 0.22, 1) forwards;
}

body.is-surfacing .scan__eye {
  z-index: 21;
  pointer-events: none;
  animation: iris-emerge 0.92s cubic-bezier(0.18, 0.7, 0.22, 1) forwards;
}

@keyframes iris-plunge {
  0% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
  42% { transform: translate(-50%, -50%) scale(3.6); filter: brightness(1.45) contrast(1.2); }
  100% { transform: translate(-50%, -50%) scale(22); filter: brightness(0); }
}

@keyframes iris-emerge {
  0% { transform: translate(-50%, -50%) scale(22); filter: brightness(0); }
  42% { transform: translate(-50%, -50%) scale(3.6); filter: brightness(1.45) contrast(1.2); }
  100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
}

body.is-inner .shell,
body.is-inner .hud-rail,
body.is-inner .pix {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.inner {
  position: fixed;
  inset: 0;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #000;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

.inner.is-on {
  opacity: 1;
  visibility: visible;
}

body.is-surfacing .inner,
body.is-surfacing .inner.is-on {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.inner:not(.is-on) .iris-wave,
body.is-surfacing .iris-wave {
  display: none !important;
}

body.is-inner .inner,
body.is-diving .inner {
  pointer-events: auto;
}

.iris-wave {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  background: #000;
}

body.is-inner .scene,
body.is-inner .field,
body.is-diving .scene,
body.is-diving .field {
  opacity: 0;
}

.inner__ui {
  position: fixed;
  inset: 0;
  z-index: 22;
  width: min(1280px, calc(100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  height: 100dvh;
  margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top)) 0 calc(12px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.55s ease 0.12s, visibility 0.55s ease 0.12s;
  transform: translateZ(0);
  isolation: isolate;
}

body.is-inner .inner__ui {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

body.is-overlay .inner__ui,
body.is-diving .inner__ui,
body.is-surfacing .inner__ui {
  opacity: 0 !important;
  visibility: hidden !important;
}

.inner__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  container-type: size;
  --orbit-x: 50%;
  --orbit-y: 50%;
}

.inner__lines {
  z-index: 2;
}

.inner__brand {
  z-index: 8;
  pointer-events: auto !important;
  border: 0;
  background: transparent;
  cursor: none;
  font-family: inherit;
}

.inner__nav {
  pointer-events: none;
}

#social-nav {
  display: none;
}

body.is-social #inner-nav {
  display: none;
}

body.is-social #social-nav {
  display: block;
}

.inner__nav .scan-btn {
  pointer-events: auto;
  color: #fff;
}

.inner__nav .scan-btn .scan-btn__zh {
  color: rgba(255, 255, 255, 0.78);
}

.inner__nav .scan-btn:focus-visible,
.inner__nav .scan-btn.is-hot,
.inner__nav .scan-btn.is-press {
  color: #000;
}

.inner__nav .scan-btn:focus-visible .scan-btn__zh,
.inner__nav .scan-btn.is-hot .scan-btn__zh,
.inner__nav .scan-btn.is-press .scan-btn__zh {
  color: #111;
}

@media (hover: hover) and (pointer: fine) {
  .inner__nav .scan-btn:hover {
    color: #000;
  }

  .inner__nav .scan-btn:hover .scan-btn__zh {
    color: #111;
  }
}

.inner__foot {
  pointer-events: none;
  justify-content: flex-end;
  padding-right: 16px;
}

.inner__back,
.layer__close {
  pointer-events: auto;
  border: 0;
  background: transparent;
  color: #4a4a4a;
  font-size: 15px;
  letter-spacing: 0.12em;
  padding: 6px 8px;
}

.layer__close {
  align-self: center;
  border: 1px solid var(--acid);
  color: var(--acid);
  padding: 10px 14px;
  letter-spacing: 0.16em;
}

.inner__back:focus-visible,
.layer__close:focus-visible {
  background: var(--acid);
  color: #000;
  outline: none;
}

@media (hover: hover) and (pointer: fine) {
  .inner__back:hover,
  .layer__close:hover {
    background: var(--acid);
    color: #000;
    outline: none;
  }
}

/* ---------- overlay layers ---------- */

.layer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  transform: translateZ(0);
  isolation: isolate;
}

.layer.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.layer__veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

.layer__shell {
  position: relative;
  z-index: 1;
  width: min(1280px, calc(100% - 40px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  height: 100dvh;
  margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top)) 0 calc(12px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.layer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  flex: 0 0 auto;
}

.layer__top .top__id {
  min-height: 64px;
}

.index {
  display: none;
  flex: 1;
  min-height: 0;
  margin-top: 12px;
  overflow: auto;
  flex-wrap: wrap-reverse;
  align-content: flex-start;
  align-items: stretch;
  gap: 8px;
  padding-right: 4px;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: var(--acid) #000;
}

.layer.is-index .index {
  display: flex;
}

.layer.is-index .viewer,
.layer.is-index .thumbs {
  display: none;
}

.layer.is-index #gallery-zoom,
.layer.is-index #gallery-drop,
.layer.is-index #gallery-dl {
  display: none;
}

.index__cell,
.index__add {
  position: relative;
  flex: 0 0 calc((100% - 24px) / 4);
  width: calc((100% - 24px) / 4);
  aspect-ratio: 1;
  padding: 0;
  border: 1px solid #2a2a2a;
  background: #000;
  overflow: hidden;
  cursor: none;
  touch-action: manipulation;
}

.index__add {
  display: grid;
  place-items: center;
  border-style: dashed;
  border-color: var(--acid);
  color: var(--acid);
  font-family: var(--display);
  font-size: 36px;
  letter-spacing: 0;
}

.index__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.index__tag {
  position: absolute;
  left: 6px;
  bottom: 6px;
  font-family: var(--hud);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--acid);
  background: rgba(0, 0, 0, 0.72);
  padding: 2px 5px;
  pointer-events: none;
}

.index__cell.is-on,
.index__cell:focus-visible {
  border-color: var(--acid);
  outline: none;
  box-shadow: 0 0 0 1px var(--acid);
}

.viewer {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  margin-top: 12px;
}

.viewer__stage {
  position: relative;
  border: 1px solid var(--acid);
  background: #000;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  cursor: none;
  touch-action: none;
}

.viewer__frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transform: translate(var(--pan-x, 0px), var(--pan-y, 0px)) scale(var(--zoom, 1));
  will-change: transform;
}

.viewer__img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  object-position: center;
  user-select: none;
  pointer-events: none;
  image-rendering: auto;
}

.viewer__stage.is-empty .viewer__img,
.viewer__stage.is-empty .viewer__frame {
  display: none;
}

.viewer__empty {
  display: none;
  position: absolute;
  inset: 0;
  place-content: center;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(28px, 5vw, 48px);
  letter-spacing: 0.06em;
  color: var(--acid);
  line-height: 0.9;
  pointer-events: none;
}

.viewer__empty span {
  display: block;
  margin-top: 10px;
  font-family: var(--hud);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--dim);
}

.viewer__empty .viewer__op {
  margin: 18px auto 0;
  pointer-events: auto;
  max-width: 160px;
}

.viewer__stage.is-empty .viewer__empty {
  display: grid;
}

.viewer__nav,
.viewer__op,
.viewer__op:visited {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--acid);
  background: #000;
  color: var(--acid);
  padding: 10px 12px;
  letter-spacing: 0.16em;
  font-size: 13px;
  align-self: center;
}

.viewer__nav:focus-visible,
.viewer__op:focus-visible {
  background: var(--acid);
  color: #000;
  outline: none;
}

.viewer__op.is-on {
  background: var(--acid);
  color: #000;
}

@media (hover: hover) and (pointer: fine) {
  .viewer__nav:hover,
  .viewer__op:hover,
  .thumbs__add:hover,
  .index__add:hover {
    background: var(--acid);
    color: #000;
    outline: none;
  }

  .index__cell:hover {
    border-color: var(--acid);
  }
}

.viewer__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  flex: 0 0 auto;
}

.viewer__name {
  font-family: var(--display);
  font-size: clamp(22px, 3.2vw, 36px);
  letter-spacing: 0.04em;
  color: var(--acid);
  line-height: 0.9;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.viewer__ops {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.gallery-file {
  position: fixed;
  left: -100vw;
  top: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
}

.viewer__op--file {
  cursor: none;
}

.thumbs__add {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--acid);
  background: #000;
  color: var(--acid);
  font-family: var(--display);
  font-size: 28px;
  letter-spacing: 0;
  cursor: none;
  touch-action: manipulation;
}

.index__cell.is-local,
.thumbs button.is-local {
  outline: 1px solid var(--acid);
  outline-offset: -1px;
}

.thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 10px;
  padding-bottom: 6px;
  flex: 0 0 auto;
  scrollbar-width: thin;
  scrollbar-color: var(--acid) #000;
}

.thumbs button {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid #2a2a2a;
  background: #000;
  cursor: none;
  overflow: hidden;
}

.thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.thumbs button.is-on,
.thumbs button:focus-visible {
  border-color: var(--acid);
  outline: none;
  box-shadow: 0 0 0 1px var(--acid);
}

@media (hover: hover) and (pointer: fine) {
  .thumbs button:hover {
    border-color: var(--acid);
    outline: none;
    box-shadow: 0 0 0 1px var(--acid);
  }
}

.uplink {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: center;
  margin-top: 18px;
}

.uplink__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px 20px 18px;
  border: 1px solid var(--acid);
  background: #000;
  color: var(--acid);
  min-height: 220px;
  transition: background 0.14s linear, color 0.14s linear;
}

.uplink__icon {
  width: 72px;
  height: 72px;
  color: var(--acid);
  margin-bottom: 8px;
  filter: drop-shadow(0 0 10px rgba(200, 255, 0, 0.45));
}

.uplink__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.uplink__code {
  margin-top: auto;
  font-size: 12px;
  letter-spacing: 0.18em;
  color: #3f3f3f;
}

.uplink__card:hover,
.uplink__card:focus-visible {
  background: var(--acid);
  color: #000;
  outline: none;
}

.uplink__card:hover .scan-btn__zh,
.uplink__card:focus-visible .scan-btn__zh,
.uplink__card:hover .uplink__code,
.uplink__card:focus-visible .uplink__code {
  color: #111;
}

.uplink__card:hover .uplink__icon,
.uplink__card:focus-visible .uplink__icon {
  color: #000;
  filter: none;
}

.uplink__hint {
  margin-top: 16px;
  text-align: right;
}

@media (hover: none), (pointer: coarse) {
  html,
  html.is-touch,
  body.is-touch {
    touch-action: none;
  }

  html,
  body,
  a,
  button,
  .scan-btn,
  .scan__eye,
  .inner__brand,
  .viewer__stage,
  .thumbs button,
  .thumbs__add,
  .index__cell,
  .index__add,
  .deck {
    cursor: auto;
  }

  svg.reticle,
  .pointer-glow,
  .grain,
  .rgb-split,
  .flicker {
    display: none !important;
  }

  .scanlines {
    opacity: 0.32;
    animation: none;
  }

  .crt-sweep {
    animation-duration: 8s;
  }

  .scan-btn {
    transform: translate(-50%, -50%) translate3d(var(--ox, 0px), var(--oy, 0px), 0) scale(var(--sc, 1));
    transform-style: flat;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
  }

  .deck {
    touch-action: manipulation;
  }

  .deck:not(.is-press) {
    --ds: 1;
  }

  .scan__eye,
  .inner__brand {
    touch-action: none;
  }

  .thumbs {
    touch-action: pan-x;
  }

  .index {
    touch-action: pan-y;
  }

  .viewer__stage {
    touch-action: none;
  }

  .viewer__op,
  .viewer__nav,
  .layer__close,
  .inner__back {
    touch-action: manipulation;
  }
}

@media (max-width: 900px) {
  .top__end {
    grid-template-columns: 72px 64px 48px;
  }

  .scan-title {
    max-width: 70%;
  }

  .scan-btn {
    padding: 6px 10px;
  }

  .scan-btn__en {
    font-size: clamp(22px, 6vw, 36px);
  }

  .scan-btn__zh {
    font-size: 13px;
  }

  .index__cell,
  .index__add {
    flex-basis: calc((100% - 16px) / 3);
    width: calc((100% - 16px) / 3);
  }
}

@media (max-width: 560px) {
  .shell,
  .inner__ui,
  .layer__shell {
    width: calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
    padding-top: calc(8px + env(safe-area-inset-top));
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }

  .pix {
    width: 72px;
    height: 72px;
  }

  svg.reticle {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
  }

  .top__end {
    grid-template-columns: 48px 64px;
  }

  .nested,
  .hud-rail {
    display: none;
  }

  .reticle,
  svg.reticle {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
  }

  .scan__eye {
    /* orbit follows --eye-x */
    width: min(280px, 32vh, 70vw);
    height: min(280px, 32vh, 70vw);
    margin: 0;
  }

  .scan__stage {
    --eye-x: 50%;
  }

  #targets {
    --rad: min(42cqmin, 168px);
  }

  #targets .scan-btn:nth-child(1) { --ang: 40deg; }
  #targets .scan-btn:nth-child(2) { --ang: 100deg; }
  #targets .scan-btn:nth-child(3) { --ang: 160deg; }
  #targets .scan-btn:nth-child(4) { --ang: 215deg; }
  #targets .scan-btn:nth-child(5) { --ang: 258deg; }

  #inner-nav,
  #social-nav {
    --rad: min(36cqmin, 140px);
  }

  .brand-mark {
    right: 4%;
    top: 4%;
  }

  .brand-mark__title {
    font-size: clamp(32px, 11vw, 64px);
  }

  .scan-btn__zh {
    font-size: 11px;
  }

  .status {
    font-size: 11px;
    letter-spacing: 0.1em;
    margin-top: 8px;
    padding-top: 8px;
  }

  .viewer {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }

  .viewer__nav {
    justify-self: stretch;
  }

  .viewer__bar {
    flex-wrap: wrap;
    align-items: center;
  }

  .viewer__ops {
    flex-wrap: wrap;
  }

  .index {
    gap: 6px;
  }

  .index__cell,
  .index__add {
    flex-basis: calc((100% - 6px) / 2);
    width: calc((100% - 6px) / 2);
  }

  .layer__close {
    padding: 8px 10px;
    font-size: 12px;
  }

  .deck {
    width: 96px;
    height: 96px;
  }

  .deck__frame,
  .deck__vinyl {
    width: 96px;
    height: 96px;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .hud-rail,
  .pix,
  .top__end {
    display: none;
  }

  .scan__eye {
    width: min(220px, 58vh);
    height: min(220px, 58vh);
  }

  .scan__stage {
    --eye-x: 28%;
  }

  #targets {
    --rad: min(40cqmin, 150px);
  }

  .scan-btn {
    padding: 2px 8px;
  }

  .scan-btn__en {
    font-size: clamp(16px, 5.5vh, 28px);
  }

  .brand-mark__title {
    font-size: clamp(28px, 8vh, 48px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .grain,
  body.is-launching .launch-word,
  .reticle__ring,
  .glyph i,
  .nested span,
  .top__scan,
  .scanlines,
  .crt-sweep,
  .rgb-split,
  .flicker {
    animation: none;
  }

  body.is-diving .scan__eye,
  body.is-surfacing .scan__eye {
    animation: none;
    transform: translate(-50%, -50%) scale(1);
  }

  .boot {
    transition: none;
  }

  .field,
  .scene,
  .pointer-glow,
  .sparks {
    display: none;
  }

  .scan-btn,
  .scan-title,
  .scan__eye,
  .scan-btn.is-in,
  .shell {
    animation: none;
    transform: none !important;
  }

  .deck.is-on .deck__frame,
  .deck__frame,
  .deck__scan,
  .deck__sweep {
    animation: none;
  }

  .reticle__ring {
    transform: translate(-50%, -50%);
  }
}