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

:root {
  --bg: #0c0c0c;
  --bg-soft: #121212;
  --card: #161616;
  --text: #e8e8e8;
  --muted: #a5a5a5;
  --accent: #ff3b30;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --radius: 8px;
  --navH: 72px;
  --tickerH: 40px;
  --section-w: 1100px;
  --copy-w: 720px;
}

html {
  scroll-behavior: smooth;
  width: 100%;
  overflow-x: hidden;
  overscroll-behavior: none;
}

body {
  position: relative;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Noto Sans JP",
    Arial,
    sans-serif;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.012) 0,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 28px
    ),
    linear-gradient(180deg, #0a0a0a 0%, #101010 42%, #151515 100%);
  color: var(--text);
  padding-top: calc(var(--navH) + var(--tickerH));
  padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  isolation: isolate;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background:
    linear-gradient(90deg, rgba(255, 59, 48, 0.08), transparent 38%, rgba(255, 255, 255, 0.025)),
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.014) 0,
      rgba(255, 255, 255, 0.014) 1px,
      transparent 1px,
      transparent 18px
    );
}

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

.section[id] {
  scroll-margin-top: calc(var(--navH) + var(--tickerH) + 18px);
}

#intro {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
  z-index: 1000;
  cursor: pointer;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}

#intro video {
  position: relative;
  z-index: 1;
  width: min(68vw, 520px);
  max-width: 100%;
  max-height: min(58vh, 420px);
  height: auto;
  display: block;
  object-fit: contain;
}

#intro video {
  background: transparent;
  pointer-events: none;
}

#intro .intro-loader {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%);
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
  pointer-events: none;
}

#intro .intro-loader img {
  width: clamp(72px, 16vw, 108px);
  height: auto;
  display: block;
  filter:
    drop-shadow(0 10px 28px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 16px rgba(255, 255, 255, 0.08));
}

#intro .intro-loader span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
}

#intro.is-loader video {
  opacity: 0;
}

#intro.is-loader .intro-loader {
  opacity: 1;
  visibility: visible;
}

#intro.is-loader .intro-loader img {
  animation: introLoaderSpin 1.1s linear infinite;
}

@keyframes introLoaderSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

#intro.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: var(--navH);
  padding: 0 1em;
  border-bottom: 1px solid #1c1c1c;
  overflow: visible;
  isolation: isolate;
}

.logo {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 2;
  --logo-jump-offset: 0px;
  --logo-scale: 1;
}

.logo img {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  transform-origin: center bottom;
  transition: filter 0.2s ease;
  transform: translateY(var(--logo-jump-offset)) scale(var(--logo-scale));
}

.logo.is-armed {
  --logo-scale: 1.03;
}

.logo.is-armed img {
  filter:
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 10px rgba(255, 59, 48, 0.28));
}

.logo.is-powered img {
  animation: logoPowered 1s linear infinite;
}

@keyframes logoPowered {
  0% {
    filter:
      hue-rotate(0deg)
      saturate(1.35)
      drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 10px rgba(255, 76, 76, 0.45));
  }

  25% {
    filter:
      hue-rotate(90deg)
      saturate(1.45)
      drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 10px rgba(255, 225, 76, 0.48));
  }

  50% {
    filter:
      hue-rotate(180deg)
      saturate(1.4)
      drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 10px rgba(76, 255, 198, 0.48));
  }

  75% {
    filter:
      hue-rotate(270deg)
      saturate(1.45)
      drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 10px rgba(118, 137, 255, 0.48));
  }
  100% {
    filter:
      hue-rotate(360deg)
      saturate(1.35)
      drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 10px rgba(255, 76, 76, 0.45));
  }
}

.nav-game {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

nav.is-game-active .nav-game {
  opacity: 1;
}

.nav-game__lane {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.nav-game__hud {
  position: absolute;
  top: 4px;
  left: 50%;
  right: auto;
  display: flex;
  gap: 6px;
  z-index: 2;
  pointer-events: none;
  transform: translateX(-50%);
}

.nav-game-status {
  position: absolute;
  top: 30px;
  left: 50%;
  z-index: 3;
  max-width: min(78vw, 320px);
  margin: 0;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(8, 8, 8, 0.82);
  color: rgba(255, 255, 255, 0.76);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(-6px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease;
}

.nav-game-status.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.nav-game-status.is-success {
  border-color: rgba(88, 214, 141, 0.4);
  color: rgba(210, 255, 224, 0.96);
}

.nav-game-status.is-error {
  border-color: rgba(255, 107, 107, 0.46);
  color: rgba(255, 224, 224, 0.96);
}

.nav-game__stat {
  min-width: 70px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 10, 10, 0.52);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

.nav-game__stat-label {
  display: block;
  margin-bottom: 1px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.nav-game__stat-value {
  display: block;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.nav-game__lane::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
}

.nav-game__wall,
.nav-game__powerup {
  position: absolute;
  left: 0;
  top: 0;
  will-change: transform;
}

.nav-game__wall {
  width: 26px;
  border-radius: 8px 8px 4px 4px;
  background:
    linear-gradient(180deg, rgba(255, 120, 120, 0.98), rgba(94, 8, 8, 0.92)),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.18) 0,
      rgba(255, 255, 255, 0.18) 6px,
      transparent 6px,
      transparent 12px
    );
  border: 1px solid rgba(255, 204, 204, 0.24);
  box-shadow:
    0 10px 18px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(255, 59, 48, 0.18);
}

.nav-game__wall.is-shattered {
  animation: wallShatter 0.18s ease forwards;
}

.nav-game__burst {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.nav-game__burst-piece {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 165, 165, 0.95), rgba(146, 22, 22, 0.92));
  border: 1px solid rgba(255, 228, 228, 0.3);
  box-shadow: 0 0 12px rgba(255, 59, 48, 0.32);
  transform: translate3d(0, 0, 0) scale(1);
  animation: wallBurst 0.48s cubic-bezier(0.2, 0.74, 0.24, 1) forwards;
}

@keyframes wallShatter {
  0% {
    opacity: 1;
    filter: brightness(1.15);
  }

  100% {
    opacity: 0;
    filter: blur(4px) brightness(1.55);
  }
}

@keyframes wallBurst {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(var(--burst-x, 0px), var(--burst-y, 0px), 0)
      rotate(var(--burst-rot, 0deg))
      scale(0.32);
  }
}

.nav-game__powerup {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(72, 72, 72, 0.92), rgba(0, 0, 0, 0.94));
  box-shadow:
    0 0 16px rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: #ffe36d;
  font-size: 16px;
  text-shadow: 0 0 10px rgba(255, 223, 96, 0.55);
}

.nav-game-over {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  background: linear-gradient(90deg, rgba(12, 12, 12, 0.84), rgba(24, 8, 8, 0.84));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease;
}

.nav-game-over.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.nav-game-over__label {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.16em;
  white-space: nowrap;
}

.nav-game-over__score {
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

.nav-game-over__retry {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 59, 48, 0.16);
  color: #fff;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.nav-game-over__retry:hover {
  background: rgba(255, 59, 48, 0.28);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
}

.nav-ranking {
  position: absolute;
  top: calc(100% + 8px);
  right: 12px;
  z-index: 4;
  width: min(420px, calc(100vw - 24px));
  max-height: min(68vh, 430px);
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(14, 14, 14, 0.96), rgba(10, 10, 10, 0.94)),
    rgba(0, 0, 0, 0.9);
  box-shadow:
    0 24px 54px rgba(0, 0, 0, 0.4),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(14px);
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

.nav-ranking.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-ranking__header,
.nav-ranking__summary,
.nav-ranking__name-row,
.nav-ranking__item {
  display: flex;
  align-items: center;
}

.nav-ranking__header,
.nav-ranking__summary {
  justify-content: space-between;
  gap: 10px;
}

.nav-ranking__eyebrow,
.nav-ranking__best-label,
.nav-ranking__summary-label,
.nav-ranking__name-label,
.nav-ranking__hint {
  color: rgba(255, 255, 255, 0.58);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.nav-ranking__title {
  margin-top: 2px;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.nav-ranking__best {
  text-align: right;
}

.nav-ranking__best-value,
.nav-ranking__summary-value {
  display: block;
  margin-top: 2px;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.nav-ranking__summary {
  margin-top: 14px;
}

.nav-ranking__summary-card {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.nav-ranking__message {
  margin-top: 12px;
  min-height: 1.5em;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  line-height: 1.5;
}

.nav-ranking__message[data-tone="success"] {
  color: #bfffc2;
}

.nav-ranking__message[data-tone="error"] {
  color: #ffb3b3;
}

.nav-ranking__name-form {
  margin-top: 12px;
}

.nav-ranking__name-row {
  gap: 8px;
  margin-top: 6px;
}

.nav-ranking__name-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 14px;
}

.nav-ranking__name-input:focus {
  outline: none;
  border-color: rgba(255, 59, 48, 0.55);
  box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.16);
}

.nav-ranking__name-save {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 59, 48, 0.18);
  color: #fff;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.nav-ranking__list {
  list-style: none;
  margin-top: 14px;
  padding: 0;
}

.nav-ranking__item {
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.nav-ranking__item:last-child {
  border-bottom: 0;
}

.nav-ranking__item.is-self {
  color: #fff;
}

.nav-ranking__item-rank {
  width: 42px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.nav-ranking__item-name {
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-ranking__item-score {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.nav-ranking__empty {
  padding: 12px 0 4px;
  color: rgba(255, 255, 255, 0.58);
  font-size: 13px;
}

.nav-ranking__hint {
  margin-top: 10px;
}

.nav-links,
.hamburger {
  position: relative;
  z-index: 2;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5em;
}

.nav-links a {
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}

.nav-links a:hover,
.nav-links a:focus {
  background: #1a1a1a;
  outline: none;
  color: #fff;
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  cursor: pointer;
  width: 36px;
  height: 30px;
}

.hamburger span {
  height: 3px;
  width: 100%;
  background: var(--muted);
  margin: 4px 0;
  border-radius: 2px;
  transition: 0.3s;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

@media (max-width: 768px) {
  body {
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .nav-game__hud {
    top: 4px;
    left: 50%;
    gap: 6px;
  }

  .nav-game-status {
    top: 27px;
    max-width: min(84vw, 280px);
    padding: 4px 9px;
    font-size: 9px;
    letter-spacing: 0.06em;
  }

  .nav-game__stat {
    min-width: 62px;
    padding: 3px 7px;
  }

  .nav-game__stat-label {
    font-size: 8px;
  }

  .nav-game__stat-value {
    font-size: 10px;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    background: #000;
    position: absolute;
    top: var(--navH);
    left: 0;
    width: 100%;
    text-align: center;
    padding: 1em 0;
    border-top: 1px solid #111;
  }

  .nav-links a {
    font-size: 16px;
  }

  .nav-links.show {
    display: flex;
  }

  .hamburger {
    display: flex;
  }

  .nav-game-over {
    gap: 8px;
  }

  .nav-game-over__label {
    font-size: 12px;
    letter-spacing: 0.12em;
  }

  .nav-game-over__score {
    font-size: 10px;
  }

  .nav-game-over__retry {
    min-height: 30px;
    padding: 0 10px;
    font-size: 12px;
  }

  .nav-ranking {
    right: 8px;
    left: 8px;
    width: auto;
    max-height: min(62vh, 400px);
    padding: 14px;
  }

  .nav-ranking__title,
  .nav-ranking__best-value,
  .nav-ranking__summary-value {
    font-size: 18px;
  }

  .nav-ranking__name-row {
    align-items: stretch;
    flex-direction: column;
  }

  .nav-ranking__name-save {
    width: 100%;
    min-height: 34px;
  }

  #intro {
    padding: 18px;
  }

  #intro video {
    width: min(78vw, 300px);
    max-height: min(38vh, 240px);
  }

  #intro .intro-loader {
    gap: 10px;
  }

  #intro .intro-loader img {
    width: clamp(68px, 23vw, 92px);
  }

  #intro .intro-loader span {
    font-size: 10px;
    letter-spacing: 0.18em;
  }

  .section {
    padding: 28px 14px;
  }

  .section h1,
  .section h2 {
    font-size: clamp(22px, 6.4vw, 28px);
    margin-bottom: 14px;
  }

  .section-kicker {
    margin-bottom: 10px;
    font-size: 10px;
  }

  .lead {
    font-size: 14px;
    line-height: 1.85;
    text-align: left;
  }

  .info-panel {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0;
  }

  .info-panel__main {
    width: 100%;
    justify-self: stretch;
  }

  .info-panel h1,
  .info-panel h2 {
    font-size: clamp(19px, 5.4vw, 23px);
    margin-bottom: 12px;
    line-height: 1.42;
    letter-spacing: 0.01em;
  }

  .info-panel .lead {
    font-size: 13px;
    line-height: 1.78;
  }

  .info-panel__inline-motto {
    display: none;
  }

  .info-panel__aside {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    align-content: start;
    justify-content: flex-start;
  }

  .info-panel__label {
    font-size: 9px;
    letter-spacing: 0.16em;
    white-space: nowrap;
  }

  .info-panel__motto {
    font-size: clamp(38px, 12vw, 58px);
    line-height: 1.35;
    letter-spacing: 0.06em;
  }

  .slider {
    height: clamp(360px, 86vw, 500px);
    min-height: 360px;
  }

  .catalog-shell {
    padding: 0 12px;
  }

  .catalog-groups {
    gap: 28px;
  }

  .catalog-group {
    gap: 14px;
  }

  .catalog-group__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .catalog-sort {
    width: 100%;
  }

  .catalog-sort__button {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding: 0 10px;
    font-size: 13px;
  }

  .catalog-row {
    gap: 14px;
    padding-bottom: 10px;
  }

  .catalog-row-edge {
    width: 44px;
    bottom: 10px;
  }

  .catalog-row-edge--left {
    left: 4px;
  }

  .catalog-row-edge--right {
    right: 4px;
  }

  .catalog-group__nav {
    display: none;
  }

  .catalog-card {
    flex-basis: min(82vw, 320px);
    width: min(82vw, 320px);
    border-radius: var(--radius);
  }

  .catalog-card__body {
    gap: 8px;
    padding: 15px 15px 17px;
  }

  .catalog-card__body h3 {
    font-size: 18px;
  }

  .catalog-card__body p:last-child {
    font-size: 13px;
  }

  .news-list {
    padding: 0 12px;
    margin-bottom: 132px;
  }

  .feedback-panel {
    padding: 2px 0 0;
  }

  .feedback-copy {
    font-size: 14px;
    line-height: 1.85;
    text-align: left;
  }

  .feedback-note {
    font-size: 12px;
    line-height: 1.7;
    text-align: left;
  }

  .feedback-button {
    width: 100%;
    min-height: 46px;
    margin-top: 16px;
  }

  #fixed-footer .center-links {
    gap: 14px;
  }

  #fixed-footer .center-links a {
    font-size: 14px;
  }
}

.news-ticker {
  position: fixed;
  top: var(--navH);
  left: 0;
  right: 0;
  z-index: 90;
  width: 100%;
  background: #000;
  color: #fff;
  overflow: hidden;
  height: var(--tickerH);
  border-top: 1px solid #181818;
  border-bottom: 1px solid #181818;
}

.ticker-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.ticker-item {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  padding: 0 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

.ticker-item .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  margin-right: 10px;
}

.ticker-item .text {
  color: #ffb4ad;
}

.slider-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
}

.slider-stage {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slider {
  position: relative;
  width: 100%;
  height: min(56.25vw, 72vh);
  min-height: 360px;
  max-height: 760px;
  background: var(--bg-soft);
  box-shadow: var(--shadow);
  overflow: hidden;
  isolation: isolate;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.01);
  transition:
    opacity 0.45s ease,
    transform 0.7s ease;
  pointer-events: none;
}

.hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

.slide-link {
  display: block;
  width: 100%;
  height: 100%;
}

.slide-link .responsive-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.slide-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  margin: 0;
  padding: 8px 16px 7px;
  background: linear-gradient(180deg, rgba(12, 12, 12, 0.64), rgba(5, 5, 5, 0.82));
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

.hero-dot {
  appearance: none;
  min-width: 42px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(255, 255, 255, 0.66);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    width 0.2s ease;
}

.hero-dot.is-active {
  min-width: 58px;
  background: rgba(255, 59, 48, 0.22);
  border-color: rgba(255, 180, 173, 0.58);
  color: #fff;
  box-shadow:
    0 0 0 1px rgba(255, 59, 48, 0.16),
    0 0 18px rgba(255, 59, 48, 0.22);
}

.hero-dot:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 4px;
}

.slider-controls {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 46px;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0;
  padding-inline: clamp(12px, 3vw, 28px);
  pointer-events: none;
}

.slider-progress {
  width: 100%;
  padding-inline: 0;
  margin-top: 0;
}

.slider-progress__track {
  display: block;
  width: 100%;
  height: 7px;
  background: rgba(255, 255, 255, 0.14);
  border-radius: 0;
  overflow: hidden;
}

.slider-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #ff3b30, #ff8a65);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
}

.slider-progress__bar.is-animating {
  animation: sliderProgress var(--slider-progress-duration, 4000ms) linear forwards;
}

@keyframes sliderProgress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.ctrl-btn {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(9, 9, 9, 0.44);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.ctrl-btn:hover {
  background: rgba(20, 20, 20, 0.72);
}

.ctrl-btn:focus-visible,
.catalog-sort__button:focus-visible,
.catalog-group__control:focus-visible,
.chip:focus-visible,
.feedback-button:focus-visible,
.nav-links a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.78);
  outline-offset: 3px;
}

.section {
  padding: 36px 16px;
}

.section h1,
.section h2 {
  width: min(100%, var(--section-w));
  font-size: clamp(24px, 3vw, 30px);
  margin: 0 auto 16px;
  color: #fff;
  line-height: 1.24;
  letter-spacing: 0.02em;
  text-align: left;
}

.section-kicker {
  margin: 0 0 12px;
  color: rgba(255, 180, 173, 0.92);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.lead {
  max-width: var(--copy-w);
  margin: 0 auto;
  color: var(--muted);
  font-size: 16px;
  text-align: left;
  line-height: 1.9;
}

.section--intro {
  padding-top: 82px;
  padding-bottom: 88px;
}

.info-panel,
.feedback-panel {
  width: min(100%, var(--section-w));
  margin: 0 auto;
}

.info-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 0.7fr);
  gap: 32px;
  padding: 16px 2px;
  align-items: stretch;
  perspective: 900px;
}

.info-panel__main {
  min-width: 0;
  width: min(100%, var(--copy-w));
  justify-self: end;
}

.info-panel__inline-motto {
  display: none;
}

.info-panel h1,
.info-panel h2,
.feedback-panel h1,
.feedback-panel h2 {
  margin: 0 0 16px;
  max-width: none;
  text-align: left;
}

.info-panel .lead {
  max-width: none;
  margin: 0;
  text-align: left;
  font-size: 16px;
  line-height: 1.95;
}

.info-panel__aside {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 20px 0 20px 34px;
  border-left: 0;
  background: transparent;
  perspective: 900px;
}

.info-panel__label {
  margin: 0;
  color: rgba(255, 255, 255, 0.48);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.info-panel__motto {
  position: relative;
  display: inline-flex;
  gap: 0.08em;
  transform-style: preserve-3d;
  margin: 0;
  color: #fff;
  font-size: clamp(52px, 7vw, 96px);
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.08em;
  transform:
    rotateX(calc(26deg - var(--motto-progress, 0) * 10deg))
    rotateY(calc(-32deg + var(--motto-progress, 0) * 8deg))
    translate3d(0, -3px, 36px)
    scale(1.02);
  filter:
    drop-shadow(0 12px 22px rgba(0, 0, 0, 0.38))
    drop-shadow(0 0 38px rgba(255, 255, 255, 0.58))
    drop-shadow(0 0 64px rgba(111, 237, 255, 0.54));
  animation: crystalFloat 3.8s ease-in-out infinite;
}

.info-panel__motto::before,
.info-panel__motto::after {
  content: "";
  position: absolute;
  inset: -18px -20px;
  opacity: 0;
  pointer-events: none;
  border-radius: 999px;
}

.info-panel__motto::before {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.9), transparent 28%),
    radial-gradient(circle at 52% 48%, rgba(111, 237, 255, 0.44), transparent 44%);
  mix-blend-mode: screen;
}

.info-panel__motto::after {
  display: none;
}

.info-panel__motto span {
  position: relative;
  display: inline-block;
  opacity: 0;
  color: transparent;
  background:
    linear-gradient(135deg, #ffffff 0%, #ffffff 36%, #b9fbff 54%, #ffffff 72%, #eafcff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow:
    0 0 14px rgba(255, 255, 255, 0.92),
    0 0 34px rgba(128, 240, 255, 0.68),
    0 18px 30px rgba(0, 0, 0, 0.32);
  -webkit-text-stroke: 0.55px rgba(255, 255, 255, 0.95);
  transform:
    translate3d(var(--letter-x, 0), var(--letter-y, 0), -160px)
    rotateZ(var(--letter-rot, 0deg))
    scale(0.3);
}

.info-panel__motto span::before,
.info-panel__motto span::after {
  content: "";
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
}

.info-panel__motto span::before {
  display: none;
}

.info-panel__motto span::after {
  display: none;
}

.info-panel__motto.is-crystallized {
  filter:
    drop-shadow(0 12px 22px rgba(0, 0, 0, 0.32))
    drop-shadow(0 0 54px rgba(255, 255, 255, 0.78))
    drop-shadow(0 0 104px rgba(126, 235, 255, 0.62));
}

.info-panel__motto.is-flashing::before {
  animation: crystalFlash 0.72s ease-out;
}

.info-panel__motto.is-crystallizing span {
  animation: crystalLetterGather 1.1s cubic-bezier(0.16, 0.82, 0.2, 1) var(--letter-delay, 0ms) forwards;
}

.motto-crystal-shard {
  display: none;
}

.info-panel__motto.is-crystallizing .motto-crystal-shard {
  animation: crystalShardGather 1.18s cubic-bezier(0.16, 0.82, 0.2, 1) var(--shard-delay, 0ms) forwards;
}

.info-panel__motto.is-crystallized .motto-crystal-shard {
  opacity: 0.16;
  transform:
    translate(-50%, -50%)
    translate3d(0, 0, -28px)
    rotate(var(--shard-rot, 0deg))
    scale(0.78);
}

.info-panel__motto.is-crystallized span {
  opacity: 1;
  transform:
    translate3d(0, 0, calc(24px + var(--motto-progress, 0) * 18px))
    rotateY(calc(-18deg + var(--motto-progress, 0) * 8deg));
}

.info-panel__motto.is-crystallized:not(.is-crystallizing) span:nth-child(1) {
  animation: crystalShardFloat 4.9s ease-in-out infinite;
}

.info-panel__motto.is-crystallized:not(.is-crystallizing) span:nth-child(2) {
  animation: crystalShardFloat 5.3s ease-in-out 0.2s infinite;
}

.info-panel__motto.is-crystallized:not(.is-crystallizing) span:nth-child(3) {
  animation: crystalShardFloat 5s ease-in-out 0.38s infinite;
}

.info-panel__motto.is-crystallized:not(.is-crystallizing) span:nth-child(4) {
  animation: crystalShardFloat 5.6s ease-in-out 0.12s infinite;
}

@keyframes crystalLetterGather {
  0% {
    opacity: 0;
    filter: blur(12px);
    transform:
      translate3d(var(--letter-x, 0), var(--letter-y, 0), -170px)
      rotateZ(var(--letter-rot, 0deg))
      rotateY(-44deg)
      scale(0.24);
  }

  38% {
    opacity: 0.95;
    filter: blur(0);
  }

  72% {
    opacity: 1;
    filter: brightness(1.8);
    transform:
      translate3d(0, 0, 52px)
      rotateZ(0deg)
      rotateY(-8deg)
      scale(1.12);
  }

  100% {
    opacity: 1;
    filter: brightness(1);
    transform:
      translate3d(0, 0, calc(24px + var(--motto-progress, 0) * 18px))
      rotateY(calc(-18deg + var(--motto-progress, 0) * 8deg))
      scale(1);
  }
}

@keyframes crystalFlash {
  0% {
    opacity: 0;
    transform: scale(0.82);
    filter: blur(12px);
  }

  24% {
    opacity: 1;
    transform: scale(1.04);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: scale(1.22);
    filter: blur(14px);
  }
}

@keyframes crystalFacetGrow {
  0% {
    opacity: 0;
    transform: translateZ(-18px) rotateZ(-18deg) scale(0.18);
    filter: blur(9px);
  }

  38% {
    opacity: 1;
    transform: translateZ(28px) rotateZ(10deg) scale(1.18);
    filter: blur(0);
  }

  100% {
    opacity: 0.72;
    transform: translateZ(10px) rotateZ(0) scale(1);
    filter: blur(0);
  }
}

@keyframes crystalSparkBurst {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(0.2);
  }

  24% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translate3d(var(--spark-x, 0.42em), var(--spark-y, -0.38em), 42px)
      scale(1.6);
  }
}

@keyframes crystalShardGather {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform:
      translate(-50%, -50%)
      translate3d(var(--shard-x, 0), var(--shard-y, 0), -160px)
      rotate(calc(var(--shard-rot, 0deg) - 38deg))
      scale(0.18);
  }

  28% {
    opacity: 0.92;
    filter: blur(0);
  }

  72% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      translate3d(0, 0, 48px)
      rotate(calc(var(--shard-rot, 0deg) + 14deg))
      scale(1.08);
  }

  100% {
    opacity: 0.18;
    filter: blur(0);
    transform:
      translate(-50%, -50%)
      translate3d(0, 0, -28px)
      rotate(var(--shard-rot, 0deg))
      scale(0.78);
  }
}

@keyframes crystalFloat {
  0%,
  100% {
    transform:
      rotateX(calc(26deg - var(--motto-progress, 0) * 10deg))
      rotateY(calc(-32deg + var(--motto-progress, 0) * 8deg))
      translate3d(0, -3px, 36px)
      scale(1.02);
  }

  50% {
    transform:
      rotateX(calc(22deg - var(--motto-progress, 0) * 8deg))
      rotateY(calc(-26deg + var(--motto-progress, 0) * 8deg))
      translate3d(0, -16px, 54px)
      scale(1.06);
  }
}

@keyframes crystalShardFloat {
  0%,
  100% {
    transform:
      translate3d(0, 0, calc(24px + var(--motto-progress, 0) * 18px))
      rotateY(calc(-18deg + var(--motto-progress, 0) * 8deg));
  }

  50% {
    transform:
      translate3d(0, -8px, calc(38px + var(--motto-progress, 0) * 22px))
      rotateY(calc(-10deg + var(--motto-progress, 0) * 8deg))
      rotateX(4deg);
  }
}

@media (max-width: 768px) {
  .section--intro {
    padding-top: 52px;
    padding-bottom: 58px;
  }

  .info-panel {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0;
  }

  .info-panel__main {
    width: 100%;
    justify-self: stretch;
  }

  .info-panel h1,
  .info-panel h2 {
    font-size: clamp(19px, 5.6vw, 23px);
    margin-bottom: 12px;
    line-height: 1.4;
    letter-spacing: 0.01em;
  }

  .info-panel .lead {
    font-size: 14px;
    line-height: 1.82;
  }

  .info-panel__inline-motto {
    display: none;
  }

  .info-panel__aside {
    display: block;
    padding: 14px 0 0;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .info-panel__label {
    display: block;
    margin-bottom: 6px;
    font-size: 9px;
    letter-spacing: 0.16em;
  }

  .info-panel__motto {
    font-size: clamp(38px, 12vw, 58px);
    line-height: 1.34;
    letter-spacing: 0.06em;
  }
}

.section--catalog {
  padding-top: 12px;
  padding-bottom: 40px;
}

.catalog-shell {
  width: min(100%, var(--section-w));
  margin: 0 auto;
  padding: 0 16px;
  position: relative;
  z-index: 89;
}

.catalog-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
}

.catalog-sort__button {
  appearance: none;
  border: 1px solid #2a2a2a;
  background: #151515;
  color: #dfdfdf;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  transition:
    border-color 0.2s,
    background 0.2s,
    color 0.2s;
}

.catalog-sort__button.is-active,
.catalog-sort__button:hover {
  border-color: rgba(255, 59, 48, 0.38);
  background: rgba(255, 59, 48, 0.12);
  color: #fff;
}

.catalog-groups {
  display: grid;
  gap: 38px;
}

.catalog-group {
  display: grid;
  gap: 16px;
}

.catalog-group__header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
}

.catalog-group__title-wrap {
  flex: 0 0 auto;
}

.catalog-group__title {
  margin: 0;
  color: #fff;
  font-size: clamp(25px, 2.8vw, 30px);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.catalog-group__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
}

.catalog-group__nav {
  display: flex;
  gap: 8px;
}

.catalog-group__control {
  appearance: none;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s;
}

.catalog-group__control:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 59, 48, 0.3);
  transform: translateY(-1px);
}

.catalog-group__control:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

.catalog-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
  touch-action: auto;
  cursor: grab;
}

.catalog-row-shell {
  position: relative;
  width: 100%;
  min-width: 0;
}

.catalog-row-edge {
  position: absolute;
  top: 4px;
  bottom: 14px;
  width: 76px;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.catalog-row-edge--left {
  left: 2px;
  background: linear-gradient(
    90deg,
    rgba(12, 12, 12, 0.72) 0,
    rgba(12, 12, 12, 0.42) 34%,
    rgba(12, 12, 12, 0.1) 72%,
    rgba(12, 12, 12, 0) 100%
  );
}

.catalog-row-edge--right {
  right: 2px;
  background: linear-gradient(
    270deg,
    rgba(12, 12, 12, 0.72) 0,
    rgba(12, 12, 12, 0.42) 34%,
    rgba(12, 12, 12, 0.1) 72%,
    rgba(12, 12, 12, 0) 100%
  );
}

.catalog-row-shell.is-scrollable:not(.is-at-start) .catalog-row-edge--left {
  opacity: 1;
}

.catalog-row-shell.is-scrollable:not(.is-at-end) .catalog-row-edge--right {
  opacity: 1;
}

.catalog-row::-webkit-scrollbar {
  height: 8px;
}

.catalog-row::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.catalog-row.is-single {
  overflow: visible;
  justify-content: center;
  cursor: default;
}

.catalog-row.is-dragging {
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;
}

.catalog-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-self: stretch;
  height: auto;
  flex: 0 0 clamp(280px, 31vw, 340px);
  width: clamp(280px, 31vw, 340px);
  max-width: none;
  min-height: 100%;
  border: 1px solid #232323;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, #161616, #121212);
  color: inherit;
  font: inherit;
  text-align: left;
  box-shadow: var(--shadow);
  transition:
    transform 0.2s,
    border-color 0.2s,
    box-shadow 0.2s;
  -webkit-user-drag: none;
  backface-visibility: hidden;
}

button.catalog-card {
  cursor: pointer;
}

.catalog-row.is-single .catalog-card {
  flex-basis: min(360px, 100%);
  width: min(360px, 100%);
}

.catalog-card:hover,
.catalog-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 59, 48, 0.24);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
  outline: none;
}

.catalog-row.is-scrolling .catalog-card,
.catalog-row.is-dragging .catalog-card,
.catalog-row.is-scrolling .catalog-card:hover,
.catalog-row.is-dragging .catalog-card:hover {
  transform: none;
  border-color: #232323;
  box-shadow: var(--shadow);
}

.catalog-card--static {
  cursor: default;
}

.catalog-card--static:hover {
  transform: none;
  border-color: #232323;
  box-shadow: var(--shadow);
}

.catalog-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0f0f0f;
}

.catalog-card__media .responsive-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.catalog-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
  -webkit-user-drag: none;
  user-select: none;
}

.catalog-card:hover .catalog-card__image {
  transform: scale(1.02);
}

.catalog-row.is-scrolling .catalog-card__image,
.catalog-row.is-dragging .catalog-card__image,
.catalog-row.is-scrolling .catalog-card:hover .catalog-card__image,
.catalog-row.is-dragging .catalog-card:hover .catalog-card__image {
  transform: none;
}

.catalog-card__body {
  display: grid;
  grid-template-rows: auto auto 1fr;
  flex: 1 1 auto;
  gap: 11px;
  padding: 18px 18px 20px;
  user-select: none;
}

.catalog-card__eyebrow {
  margin: 0;
  color: #ffb4ad;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.catalog-card__body h3 {
  margin: 0;
  color: #fff;
  font-size: 19px;
  line-height: 1.35;
}

.catalog-card__body p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}

.catalog-card[data-catalog-id] {
  position: relative;
  isolation: isolate;
}

.catalog-card__media,
.catalog-card__body {
  position: relative;
  z-index: 2;
}

.catalog-card__fx {
  display: none;
}

.catalog-card[data-catalog-id]:hover .catalog-card__fx,
.catalog-card[data-catalog-id]:focus-visible .catalog-card__fx,
.catalog-card.is-gesture-hover .catalog-card__fx {
  display: none;
}

.catalog-card[data-catalog-id]:hover .catalog-card__body,
.catalog-card[data-catalog-id]:focus-visible .catalog-card__body,
.catalog-card.is-gesture-hover .catalog-card__body {
  transform: translateY(-3px);
}

.catalog-card__body {
  transition: transform 0.24s ease;
}

.catalog-card[data-catalog-id]:hover .catalog-card__body h3,
.catalog-card[data-catalog-id]:focus-visible .catalog-card__body h3,
.catalog-card.is-gesture-hover .catalog-card__body h3 {
  transform: translateY(-2px);
}

.catalog-card__body h3 {
  transition:
    transform 0.24s ease,
    filter 0.24s ease,
    text-shadow 0.24s ease;
}

.fx-board,
.fx-grid,
.fx-choice-grid {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 42px 42px;
}

.fx-fog {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--card-pointer-x, 50%) var(--card-pointer-y, 42%), transparent 0 58px, rgba(210, 230, 238, 0.28) 84px, rgba(210, 230, 238, 0.55) 100%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.13) 0 14px, transparent 14px 36px);
  filter: blur(7px);
  mix-blend-mode: screen;
}

.fx-cell {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: rgba(84, 215, 255, 0.24);
  box-shadow: 0 0 18px rgba(84, 215, 255, 0.35);
  animation: holoCellPulse 1.8s ease-in-out infinite;
}

.fx-cell:nth-child(2) {
  left: 24%;
  top: 24%;
}

.fx-cell:nth-child(3) {
  right: 22%;
  top: 44%;
  animation-delay: 0.34s;
}

.fx-ghost {
  position: absolute;
  left: 62%;
  top: 24%;
  width: 42px;
  height: 58px;
  border-radius: 18px 18px 6px 6px;
  background: rgba(0, 0, 0, 0.54);
  box-shadow: 0 0 28px rgba(255, 255, 255, 0.22);
  opacity: 0;
  animation: holoGhost 2.4s ease-in-out infinite;
}

.fx-forge-glow {
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: -22%;
  height: 58%;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 95, 32, 0.9), rgba(255, 159, 64, 0.28) 34%, transparent 72%);
  filter: blur(12px);
}

.fx-shock {
  position: absolute;
  left: 50%;
  bottom: 22%;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 194, 112, 0.72);
  border-radius: 50%;
  transform: translate(-50%, 50%);
  animation: forgeShock 1.18s ease-out infinite;
}

.fx-spark,
.fx-particle {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #ffd19a;
  box-shadow: 0 0 10px rgba(255, 119, 47, 0.75);
  animation: sparkFly 1.2s ease-out infinite;
}

.fx-spark:nth-of-type(1) {
  left: 32%;
  bottom: 30%;
}

.fx-spark:nth-of-type(2) {
  left: 54%;
  bottom: 24%;
  animation-delay: 0.18s;
}

.fx-spark:nth-of-type(3) {
  left: 68%;
  bottom: 34%;
  animation-delay: 0.34s;
}

.fx-steam {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 62%, rgba(255, 255, 255, 0.12), transparent 28%),
    radial-gradient(ellipse at 74% 44%, rgba(255, 255, 255, 0.1), transparent 32%);
  filter: blur(10px);
  animation: steamDrift 3.8s ease-in-out infinite;
}

.catalog-card[data-catalog-id="battle-forged"]:hover,
.catalog-card[data-catalog-id="battle-forged"].is-gesture-hover {
  transform: translateY(1px) scale(0.994);
}

.catalog-card[data-catalog-id="battle-forged"]:hover .catalog-card__body h3,
.catalog-card[data-catalog-id="battle-forged"]:focus-visible .catalog-card__body h3,
.catalog-card[data-catalog-id="battle-forged"].is-gesture-hover .catalog-card__body h3 {
  color: #fff5e8;
  text-shadow:
    0 0 10px rgba(255, 199, 117, 0.58),
    0 0 22px rgba(255, 83, 26, 0.48);
  animation: heatWaver 0.52s ease-in-out infinite;
}

.fx-neural-line {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(32deg, transparent 0 16%, rgba(91, 255, 190, 0.22) 17%, transparent 18% 100%),
    linear-gradient(148deg, transparent 0 24%, rgba(84, 215, 255, 0.22) 25%, transparent 26% 100%),
    radial-gradient(circle at 30% 36%, rgba(91, 255, 190, 0.34) 0 3px, transparent 4px),
    radial-gradient(circle at 68% 54%, rgba(84, 215, 255, 0.36) 0 3px, transparent 4px),
    radial-gradient(circle at 42% 70%, rgba(255, 255, 255, 0.25) 0 2px, transparent 3px);
  animation: neuroGrow 1.8s ease-in-out infinite;
}

.fx-heartbeat {
  position: absolute;
  left: -20%;
  top: 48%;
  width: 140%;
  height: 56px;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(91, 255, 190, 0.72) 12% 13%, transparent 13% 23%, rgba(91, 255, 190, 0.72) 23% 24%, transparent 24% 31%, rgba(91, 255, 190, 0.72) 31% 33%, transparent 33% 100%);
  clip-path: polygon(0 52%, 12% 52%, 16% 18%, 20% 82%, 24% 52%, 44% 52%, 48% 30%, 52% 72%, 56% 52%, 100% 52%);
  animation: heartbeatRun 1.2s linear infinite;
}

.fx-log {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 18px;
  display: grid;
  gap: 4px;
  color: rgba(169, 255, 229, 0.75);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
}

.fx-log span {
  opacity: 0;
  animation: logBlink 1.6s steps(1, end) infinite;
}

.fx-log span:nth-child(2) {
  animation-delay: 0.24s;
}

.fx-log span:nth-child(3) {
  animation-delay: 0.48s;
}

.catalog-card[data-catalog-id="neuro-lab"]:hover .catalog-card__body h3,
.catalog-card[data-catalog-id="neuro-lab"]:focus-visible .catalog-card__body h3,
.catalog-card[data-catalog-id="neuro-lab"].is-gesture-hover .catalog-card__body h3 {
  color: #eafff8;
  text-shadow:
    1px 0 rgba(84, 215, 255, 0.86),
    -1px 0 rgba(255, 70, 98, 0.55),
    0 0 18px rgba(91, 255, 190, 0.32);
  animation: neuroTitleBaseGlitch 1.8s steps(1, end) infinite;
}

.catalog-card[data-catalog-id="neuro-lab"] .catalog-card__body h3 {
  position: relative;
}

.catalog-card[data-catalog-id="neuro-lab"] .catalog-card__body h3::after {
  content: "NΞUR0-L△B";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(152, 255, 225, 0.96);
  text-shadow:
    2px 0 rgba(84, 215, 255, 0.92),
    -2px 0 rgba(255, 45, 95, 0.72),
    0 0 16px rgba(91, 255, 190, 0.48);
  opacity: 0;
  pointer-events: none;
}

.catalog-card[data-catalog-id="neuro-lab"]:hover .catalog-card__body h3::after,
.catalog-card[data-catalog-id="neuro-lab"]:focus-visible .catalog-card__body h3::after,
.catalog-card[data-catalog-id="neuro-lab"].is-gesture-hover .catalog-card__body h3::after {
  animation: neuroTitleSwap 1.8s steps(1, end) infinite;
}

.catalog-card[data-catalog-id="neuro-lab"] .catalog-card__body p:last-child {
  position: relative;
}

.catalog-card[data-catalog-id="neuro-lab"] .catalog-card__body p:last-child::after {
  content: "人格Δ変化 // 覚醒_#観測";
  position: absolute;
  left: 0;
  top: 48%;
  max-width: 82%;
  padding: 1px 4px;
  overflow: hidden;
  color: rgba(169, 255, 229, 0.9);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  line-height: 1.35;
  white-space: nowrap;
  background: rgba(8, 18, 22, 0.62);
  box-shadow: 0 0 12px rgba(91, 255, 190, 0.22);
  opacity: 0;
  pointer-events: none;
}

.catalog-card[data-catalog-id="neuro-lab"]:hover .catalog-card__body p:last-child::after,
.catalog-card[data-catalog-id="neuro-lab"]:focus-visible .catalog-card__body p:last-child::after,
.catalog-card[data-catalog-id="neuro-lab"].is-gesture-hover .catalog-card__body p:last-child::after {
  animation: neuroTextCorrupt 2.2s steps(1, end) infinite;
}

.fx-word {
  position: absolute;
  color: #fff;
  font-size: 15px;
  font-weight: 850;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.38);
  animation: wordFloat 2.2s ease-in-out infinite;
}

.fx-word:nth-child(1) {
  left: 20%;
  top: 28%;
}

.fx-word:nth-child(2) {
  left: 54%;
  top: 42%;
  animation-delay: 0.22s;
}

.fx-word:nth-child(3) {
  left: 32%;
  top: 64%;
  animation-delay: 0.44s;
}

.fx-shape {
  position: absolute;
  right: 22%;
  top: 30%;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.68);
  clip-path: polygon(50% 0, 66% 38%, 100% 50%, 66% 62%, 50% 100%, 34% 62%, 0 50%, 34% 38%);
  animation: shapeBorn 2s ease-in-out infinite;
}

.fx-chain {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(26deg, transparent 25%, rgba(255, 255, 255, 0.35) 26%, transparent 27% 100%),
    linear-gradient(154deg, transparent 45%, rgba(255, 180, 173, 0.35) 46%, transparent 47% 100%);
  animation: chainDraw 2s ease-in-out infinite;
}

.fx-quiz-number {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 58px;
  font-weight: 900;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.fx-quiz-number span {
  grid-area: 1 / 1;
  opacity: 0;
  animation: quizCount 1.9s steps(1, end) infinite;
}

.fx-quiz-number span:nth-child(2) {
  animation-delay: 0.25s;
}

.fx-quiz-number span:nth-child(3) {
  animation-delay: 0.5s;
}

.fx-quiz-number span:nth-child(4) {
  animation-delay: 0.75s;
}

.fx-choice-grid {
  inset: auto 24px 22px;
  height: 58px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, 0.12) 0 1px, transparent 1px);
  background-size: 50% 50%;
}

.fx-hierarchy,
.fx-terminal,
.fx-rename-list,
.fx-translate,
.fx-code {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 24px;
  display: grid;
  gap: 6px;
  color: rgba(255, 255, 255, 0.82);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
}

.fx-hierarchy span,
.fx-terminal span,
.fx-rename-list span,
.fx-translate span,
.fx-code span {
  display: block;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.36);
}

.fx-clipboard {
  position: absolute;
  right: 24px;
  bottom: 26px;
  width: 64px;
  height: 78px;
  border: 2px solid rgba(255, 255, 255, 0.36);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  animation: clipboardCatch 1.8s ease-in-out infinite;
}

.fx-rename-list span {
  animation: renameSweep 1.8s steps(1, end) infinite;
}

.fx-lock-file {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 54px;
  height: 66px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.34);
  transform: translate(-50%, -50%);
}

.fx-lock-file::after {
  content: "LOCK";
  position: absolute;
  left: 50%;
  bottom: -26px;
  color: #bfffc2;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  transform: translateX(-50%);
}

.fx-cursor {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 16px solid #fff;
  border-right: 10px solid transparent;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.35));
  animation: cursorRace 1.8s ease-in-out infinite;
}

.fx-cursor:nth-of-type(1) {
  left: 22%;
  top: 22%;
}

.fx-cursor:nth-of-type(2) {
  right: 18%;
  bottom: 28%;
  animation-delay: 0.22s;
}

.fx-network {
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(84, 215, 255, 0.22);
  background:
    linear-gradient(90deg, transparent 48%, rgba(84, 215, 255, 0.24) 49%, transparent 50%),
    linear-gradient(0deg, transparent 48%, rgba(84, 215, 255, 0.24) 49%, transparent 50%);
  animation: networkRun 1.6s linear infinite;
}

.fx-wave {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 26px;
  height: 34px;
  background:
    linear-gradient(90deg, rgba(84, 215, 255, 0.1), rgba(255, 180, 173, 0.35), rgba(84, 215, 255, 0.1));
  clip-path: polygon(0 50%, 6% 28%, 12% 72%, 18% 38%, 24% 62%, 30% 30%, 36% 76%, 42% 46%, 48% 56%, 54% 22%, 60% 78%, 66% 44%, 72% 58%, 78% 34%, 84% 66%, 90% 42%, 96% 54%, 100% 50%, 100% 100%, 0 100%);
  animation: waveRun 1.4s linear infinite;
}

.fx-code span {
  animation: codeToNote 2s ease-in-out infinite;
}

.fx-note {
  position: absolute;
  right: 25%;
  top: 28%;
  color: #fff;
  font-size: 26px;
  animation: wordFloat 2s ease-in-out infinite;
}

.fx-knob {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.38), transparent 18%),
    radial-gradient(circle, #353535, #0e0e0e);
  border: 2px solid rgba(255, 255, 255, 0.18);
  transform: translate(-50%, -50%);
  animation: knobTurn 1.8s ease-in-out infinite;
}

.fx-knob::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  width: 4px;
  height: 22px;
  border-radius: 999px;
  background: #ffb4ad;
  transform: translateX(-50%);
}

.fx-ring {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 80px;
  height: 80px;
  border: 1px solid rgba(84, 215, 255, 0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: ringWave 1.8s ease-out infinite;
}

.fx-ring:nth-child(2) {
  animation-delay: 0.36s;
}

.catalog-card[data-catalog-id="babel-breaker"] .fx-particle {
  background: #7ad06d;
  box-shadow: none;
}

.catalog-card[data-catalog-id="babel-breaker"] .fx-particle:nth-child(2) {
  left: 18%;
  top: 24%;
}

.catalog-card[data-catalog-id="babel-breaker"] .fx-particle:nth-child(3) {
  left: 74%;
  top: 38%;
  animation-delay: 0.2s;
}

.catalog-card[data-catalog-id="babel-breaker"] .fx-particle:nth-child(4) {
  left: 42%;
  top: 64%;
  animation-delay: 0.42s;
}

.work-hover-stage {
  position: fixed;
  inset: 0;
  z-index: 72;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  contain: paint;
  --card-pointer-x: 50%;
  --card-pointer-y: 50%;
  --hover-card-center-x: 50vw;
  --hover-card-center-y: 50vh;
  transition:
    opacity 0.16s ease,
    visibility 0.16s ease;
}

.work-hover-stage.is-visible {
  opacity: 1;
  visibility: visible;
}

body.is-catalog-scrolling .work-hover-stage {
  opacity: 0;
  visibility: hidden;
}

.work-hover-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background:
    radial-gradient(circle at var(--card-pointer-x) var(--card-pointer-y), rgba(255, 255, 255, 0.1), rgba(126, 232, 255, 0.06) 12%, transparent 31%),
    radial-gradient(circle at var(--hover-card-center-x) var(--hover-card-center-y), rgba(255, 255, 255, 0.08), transparent 24%);
  filter: blur(12px);
  opacity: 0.58;
}

.work-hover-stage > * {
  position: absolute;
  pointer-events: none;
}

.work-hover-stage .fx-board,
.work-hover-stage .fx-grid,
.work-hover-stage .fx-choice-grid,
.work-hover-stage .fx-neural-line,
.work-hover-stage .fx-heartbeat,
.work-hover-stage .fx-steam,
.work-hover-stage .fx-forge-glow,
.work-hover-stage .fx-chain {
  inset: 6vh 5vw;
  opacity: 0.38;
}

.work-hover-stage .fx-board,
.work-hover-stage .fx-grid,
.work-hover-stage .fx-choice-grid {
  background-size: clamp(34px, 6vw, 72px) clamp(34px, 6vw, 72px);
  -webkit-mask-image: radial-gradient(circle at var(--card-pointer-x) var(--card-pointer-y), #000 0 28%, transparent 62%);
  mask-image: radial-gradient(circle at var(--card-pointer-x) var(--card-pointer-y), #000 0 28%, transparent 62%);
}

.work-hover-stage .fx-fog {
  inset: -10%;
  opacity: 0.78;
}

.work-hover-stage--holoboard .fx-board {
  inset: 9vh 8vw;
  opacity: 0.26;
}

.work-hover-stage--holoboard .fx-fog {
  opacity: 0.96;
  background:
    radial-gradient(circle at var(--card-pointer-x, 50%) var(--card-pointer-y, 42%), transparent 0 220px, rgba(226, 246, 255, 0.22) 290px, rgba(226, 246, 255, 0.74) 100%),
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.18) 0 18px, rgba(210, 232, 240, 0.34) 18px 40px, transparent 40px 66px);
  filter: blur(9px);
  mix-blend-mode: normal;
}

.work-hover-stage .fx-cell {
  width: clamp(22px, 4vw, 46px);
  height: clamp(22px, 4vw, 46px);
  opacity: 0.72;
}

.work-hover-stage .fx-ghost {
  width: clamp(34px, 5vw, 62px);
  height: clamp(48px, 7vw, 84px);
  opacity: 0;
}

.work-hover-stage .fx-log,
.work-hover-stage .fx-hierarchy,
.work-hover-stage .fx-terminal,
.work-hover-stage .fx-rename-list,
.work-hover-stage .fx-translate,
.work-hover-stage .fx-code {
  left: auto;
  right: clamp(18px, 7vw, 96px);
  top: clamp(96px, 18vh, 180px);
  width: min(420px, 72vw);
  opacity: 0.88;
}

.work-hover-stage .fx-word-matrix {
  position: absolute;
  left: clamp(26px, 6vw, 96px);
  top: clamp(116px, 18vh, 190px);
  display: grid;
  grid-template-columns: repeat(2, minmax(104px, 150px));
  gap: 12px;
}

.work-hover-stage--siritori-stef .fx-word-matrix {
  left: auto;
  right: clamp(26px, 6vw, 96px);
  top: clamp(170px, 24vh, 260px);
}

.fx-matrix-word {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 72px;
  padding: 12px;
  border: 1px solid rgba(132, 244, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(6, 16, 22, 0.68), rgba(4, 8, 14, 0.34)),
    repeating-linear-gradient(0deg, rgba(132, 244, 255, 0.08) 0 1px, transparent 1px 16px);
  box-shadow: 0 0 22px rgba(84, 215, 255, 0.14);
  overflow: hidden;
}

.fx-matrix-word b,
.fx-matrix-word i {
  grid-area: 1 / 1;
  font-style: normal;
  transition: opacity 0.2s ease;
}

.fx-matrix-word b {
  color: rgba(237, 253, 255, 0.92);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-shadow: 0 0 16px rgba(84, 215, 255, 0.36);
  animation: matrixWordOut 2.2s ease-in-out infinite;
}

.fx-matrix-word i {
  color: #fff;
  font-size: 34px;
  opacity: 0;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.44));
  animation: matrixEmojiIn 2.2s ease-in-out infinite;
}

.fx-matrix-word:nth-child(2) b,
.fx-matrix-word:nth-child(2) i {
  animation-delay: 0.18s;
}

.fx-matrix-word:nth-child(3) b,
.fx-matrix-word:nth-child(3) i {
  animation-delay: 0.36s;
}

.fx-matrix-word:nth-child(4) b,
.fx-matrix-word:nth-child(4) i {
  animation-delay: 0.54s;
}

.work-hover-stage .fx-knob,
.work-hover-stage .fx-ring {
  left: calc(100vw - clamp(132px, 16vw, 250px));
  top: clamp(190px, 42vh, 420px);
  opacity: 0.78;
}

.work-hover-stage .fx-wave {
  left: clamp(20px, 8vw, 120px);
  right: clamp(20px, 8vw, 120px);
  bottom: clamp(52px, 12vh, 118px);
  opacity: 0.64;
}

.work-hover-stage .fx-forge-glow {
  left: -6vw;
  right: -6vw;
  top: auto;
  bottom: -18vh;
  height: 44vh;
  opacity: 0.52;
}

.work-hover-stage .fx-shock {
  left: calc(100vw - clamp(132px, 16vw, 250px));
  bottom: auto;
  top: clamp(190px, 42vh, 420px);
  opacity: 0.58;
}

.work-hover-stage .fx-spark,
.work-hover-stage .fx-particle {
  opacity: 0.72;
}

.work-hover-stage--babel-breaker .fx-particle:nth-of-type(1) {
  left: 12vw;
  top: 28vh;
}

.work-hover-stage--babel-breaker .fx-particle:nth-of-type(2) {
  left: 18vw;
  top: 58vh;
}

.work-hover-stage--babel-breaker .fx-particle:nth-of-type(3) {
  right: 16vw;
  top: 34vh;
}

.work-hover-stage .fx-network {
  inset: 9vh 8vw;
  opacity: 0.44;
}

.work-hover-stage .fx-lock-file {
  left: calc(100vw - clamp(132px, 16vw, 250px));
  top: clamp(190px, 42vh, 420px);
  opacity: 0.76;
}

.work-hover-stage .fx-cursor:nth-of-type(1) {
  left: calc(100vw - clamp(330px, 26vw, 440px));
  top: clamp(120px, 28vh, 280px);
}

.work-hover-stage .fx-cursor:nth-of-type(2) {
  right: auto;
  bottom: auto;
  left: calc(100vw - clamp(110px, 10vw, 180px));
  top: clamp(290px, 56vh, 520px);
}

.work-hover-stage .fx-word {
  opacity: 0.78;
  font-size: clamp(17px, 2.4vw, 32px);
}

.work-hover-stage .fx-shape {
  right: clamp(32px, 18vw, 240px);
  top: clamp(110px, 22vh, 210px);
  width: clamp(42px, 7vw, 82px);
  height: clamp(42px, 7vw, 82px);
  opacity: 0.74;
}

@keyframes holoCellPulse {
  0%,
  100% {
    opacity: 0.34;
  }

  50% {
    opacity: 1;
  }
}

@keyframes holoGhost {
  0%,
  38%,
  100% {
    opacity: 0;
    transform: translateX(-12px);
  }

  48%,
  58% {
    opacity: 0.72;
    transform: translateX(0);
  }
}

@keyframes holoTextSignal {
  0%,
  100% {
    opacity: 0.48;
    transform: translateX(0);
  }

  48%,
  66% {
    opacity: 1;
    transform: translateX(4px);
  }
}

@keyframes matrixWordOut {
  0%,
  38% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  58%,
  100% {
    opacity: 0;
    transform: translateY(-8px);
    filter: blur(3px);
  }
}

@keyframes matrixEmojiIn {
  0%,
  42% {
    opacity: 0;
    transform: translateY(10px) scale(0.74);
    filter: blur(4px);
  }

  62%,
  88% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-4px) scale(0.92);
    filter: blur(3px);
  }
}

@keyframes forgeShock {
  0% {
    opacity: 0.8;
    transform: translate(-50%, 50%) scale(0.4);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, 50%) scale(4.4);
  }
}

@keyframes forgeCardSink {
  0% {
    transform: translateY(-2px) scale(1);
  }

  34% {
    transform: translateY(3px) scale(0.988);
  }

  100% {
    transform: translateY(-2px) scale(1);
  }
}

@keyframes forgeCardSparks {
  0% {
    opacity: 0;
    background-position:
      50% 50%,
      66% 44%,
      42% 34%,
      56% 66%;
    transform: translate(-50%, -50%) scale(0.62) rotate(-8deg);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    background-position:
      42% 22%,
      82% 26%,
      26% 14%,
      64% 86%;
    transform: translate(-50%, -50%) scale(1.06) rotate(10deg);
  }
}

@keyframes sparkFly {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.4);
  }

  22% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(22px, -58px, 0) scale(0.2);
  }
}

@keyframes steamDrift {
  0%,
  100% {
    transform: translateX(-6px);
    opacity: 0.46;
  }

  50% {
    transform: translateX(10px);
    opacity: 0.72;
  }
}

@keyframes heatWaver {
  0%,
  100% {
    transform: skewX(0) translateY(0);
    filter: blur(0);
  }

  50% {
    transform: skewX(-2.3deg) translateY(-0.5px);
    filter: blur(0.25px);
  }
}

@keyframes neuroGrow {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.98);
  }

  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}

@keyframes heartbeatRun {
  from {
    transform: translateX(-12%);
  }

  to {
    transform: translateX(12%);
  }
}

@keyframes logBlink {
  0%,
  100% {
    opacity: 0;
  }

  40%,
  70% {
    opacity: 1;
  }
}

@keyframes titleGlitch {
  0%,
  100% {
    text-shadow: 2px 0 #54d7ff, -2px 0 #ff3b30;
  }

  50% {
    text-shadow: -2px 0 #54d7ff, 2px 0 #ff3b30;
  }
}

@keyframes neuroTitleBaseGlitch {
  0%,
  8%,
  18%,
  100% {
    transform: translateX(0);
    filter: none;
  }

  10% {
    transform: translateX(1px);
    filter: hue-rotate(18deg);
  }

  12% {
    transform: translateX(-2px);
    filter: hue-rotate(-18deg);
  }
}

@keyframes neuroTitleSwap {
  0%,
  8%,
  16%,
  100% {
    opacity: 0;
    transform: translateX(0);
  }

  9%,
  13% {
    opacity: 1;
    transform: translateX(2px);
  }

  14% {
    opacity: 0.82;
    transform: translateX(-2px);
  }
}

@keyframes neuroTextCorrupt {
  0%,
  18%,
  38%,
  100% {
    opacity: 0;
    transform: translateX(0);
  }

  20%,
  30% {
    opacity: 0.96;
    transform: translateX(1px);
  }

  32% {
    opacity: 0.78;
    transform: translateX(-2px);
  }
}

@keyframes neuroWarningFrame {
  0%,
  100% {
    border-color: rgba(91, 255, 190, 0.48);
    box-shadow:
      0 16px 38px rgba(0, 0, 0, 0.48),
      0 0 0 1px rgba(91, 255, 190, 0.12) inset,
      0 0 24px rgba(91, 255, 190, 0.1);
  }

  50% {
    border-color: rgba(84, 215, 255, 0.74);
    box-shadow:
      0 16px 38px rgba(0, 0, 0, 0.48),
      0 0 0 1px rgba(84, 215, 255, 0.24) inset,
      0 0 30px rgba(84, 215, 255, 0.16);
  }
}

@keyframes nyxBoardBreathe {
  0%,
  100% {
    opacity: 0.42;
    filter: brightness(0.94);
  }

  50% {
    opacity: 0.56;
    filter: brightness(1.08);
  }
}

@keyframes nyxPieceStep {
  0%,
  14% {
    transform: translate(-50%, -50%);
  }

  15%,
  29% {
    transform: translate(calc(-50% - var(--nyx-cell)), -50%);
  }

  30%,
  46% {
    transform: translate(calc(-50% - var(--nyx-cell)), calc(-50% - var(--nyx-cell)));
  }

  47%,
  64% {
    transform: translate(-50%, calc(-50% - var(--nyx-cell)));
  }

  65%,
  82% {
    transform: translate(calc(-50% + var(--nyx-cell)), calc(-50% - var(--nyx-cell)));
  }

  83%,
  100% {
    transform: translate(calc(-50% + var(--nyx-cell)), -50%);
  }
}

@keyframes nyxPieceStepAlt {
  0%,
  18% {
    transform: translate(-50%, -50%);
  }

  19%,
  34% {
    transform: translate(-50%, calc(-50% + var(--nyx-cell)));
  }

  35%,
  52% {
    transform: translate(calc(-50% + var(--nyx-cell)), calc(-50% + var(--nyx-cell)));
  }

  53%,
  70% {
    transform: translate(calc(-50% + var(--nyx-cell)), -50%);
  }

  71%,
  86% {
    transform: translate(calc(-50% + var(--nyx-cell)), calc(-50% - var(--nyx-cell)));
  }

  87%,
  100% {
    transform: translate(-50%, calc(-50% - var(--nyx-cell)));
  }
}

@keyframes slotCardBounce {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  24% {
    transform: translateY(4px) scale(0.992);
  }

  62% {
    transform: translateY(-5px) scale(1.006);
  }
}

@keyframes slotTitleRoll {
  0% {
    content: "7 BAR ?";
    transform: translateY(-0.42em);
    filter: blur(1.8px);
  }

  15% {
    content: "★ ? ⚙";
  }

  30% {
    content: "♡ 7 BAR";
  }

  45% {
    content: "Original ? ⚙";
    transform: translateY(-0.18em);
    filter: blur(1px);
  }

  62% {
    content: "Original Slot ★";
  }

  79%,
  100% {
    content: "Original Slot Maker";
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes slotReelSpin {
  from {
    transform: translateY(-48%);
    filter: blur(1.4px);
  }

  to {
    transform: translateY(4%);
    filter: blur(1.4px);
  }
}

@keyframes slotStopReveal {
  0%,
  46% {
    opacity: 0;
    transform: translateY(-50%) scale(0.94);
    filter: blur(2px);
  }

  47% {
    opacity: 0.38;
    transform: translateY(-50%) scale(1.08);
  }

  58%,
  100% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    filter: blur(0);
  }
}

@keyframes slotFinalReveal {
  0%,
  70% {
    opacity: 0;
    transform: translateX(-50%) translateY(12px) scale(0.96);
    filter: blur(2px);
  }

  82% {
    opacity: 1;
    transform: translateX(-50%) translateY(-3px) scale(1.04);
  }

  100% {
    opacity: 0.94;
    transform: translateX(-50%) translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes slotWinFlash {
  0% {
    opacity: 0;
    transform: scale(0.82);
    filter: blur(6px);
  }

  18% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }

  62% {
    opacity: 0.86;
  }

  100% {
    opacity: 0;
    transform: scale(1.16);
    filter: blur(7px);
  }
}

@keyframes jibrilTitleSigil {
  0%,
  8% {
    content: "◇∴◇ 具象化 / JIBRIL ◇∴◇";
    color: rgba(255, 240, 169, 0.94);
    transform: translateY(-0.08em);
    filter: blur(1px);
  }

  9%,
  16% {
    content: "剣::炎::本::王冠";
    color: rgba(114, 237, 255, 0.94);
    transform: translateY(0.04em);
    filter: blur(0.6px);
  }

  17%,
  100% {
    content: "具象化しりとりTRPG ジブリール編";
    color: #f4fdff;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes jibrilCardCircle {
  0% {
    rotate: 0deg;
    filter: brightness(0.95);
  }

  50% {
    filter: brightness(1.28);
  }

  100% {
    rotate: 360deg;
    filter: brightness(0.95);
  }
}

@keyframes jibrilStageVeil {
  0%,
  100% {
    opacity: 0.46;
    transform: translateX(-0.6vw);
  }

  50% {
    opacity: 0.66;
    transform: translateX(0.6vw);
  }
}

@keyframes jibrilMatrixFall {
  0% {
    opacity: 0;
    transform: translate3d(0, -18vh, 0);
  }

  14% {
    opacity: 0.42;
  }

  82% {
    opacity: 0.34;
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 118vh, 0);
  }
}

@keyframes jibrilMatrixEmoji {
  0%,
  36%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.58);
  }

  45% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  64% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.92);
  }
}

@keyframes jibrilSummonRing {
  0%,
  100% {
    opacity: 0.56;
    transform: scale(0.94) rotate(0deg);
  }

  42% {
    opacity: 0.92;
    transform: scale(1.04) rotate(18deg);
  }
}

@keyframes jibrilWordSelect {
  0%,
  30%,
  100% {
    opacity: 0.9;
    transform: translateY(0) scale(1);
  }

  46% {
    opacity: 0;
    transform: translateY(-8px) scale(0.9);
  }

  64% {
    opacity: 0;
  }
}

@keyframes jibrilSummonEmoji {
  0%,
  34%,
  100% {
    opacity: 0;
    transform: scale(0.48) rotate(-8deg);
  }

  48% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }

  68% {
    opacity: 0.7;
    transform: scale(0.9) rotate(6deg);
  }
}

@keyframes jibrilCirclePulse {
  0%,
  100% {
    opacity: 0.34;
    transform: scale(0.98);
  }

  50% {
    opacity: 0.56;
    transform: scale(1.04);
  }
}

@keyframes jibrilCircleTurn {
  to {
    rotate: 360deg;
  }
}

@keyframes stefCardWordEmoji {
  0%,
  18% {
    content: "りんご → 🍎";
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }

  24%,
  38% {
    content: "りんご → 🍎";
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  39%,
  55% {
    content: "花 → 🌸";
    opacity: 1;
  }

  56%,
  72% {
    content: "鍵 → 🔑";
    opacity: 1;
  }

  73%,
  90% {
    content: "城 → 🏰";
    opacity: 1;
  }

  100% {
    content: "NEXT WORD?";
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
}

@keyframes stefStageAir {
  0%,
  100% {
    opacity: 0.44;
    transform: translateX(-0.5vw);
  }

  50% {
    opacity: 0.64;
    transform: translateX(0.5vw);
  }
}

@keyframes stefChainFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -8px, 0);
  }
}

@keyframes stefNodePop {
  0%,
  100% {
    opacity: 0.44;
    transform: scale(0.9);
  }

  24%,
  76% {
    opacity: 0.94;
    transform: scale(1);
  }

  42% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes stefEmojiFlip {
  0%,
  38%,
  100% {
    opacity: 0;
    transform: translateY(4px) scale(0.58) rotate(-8deg);
  }

  50%,
  72% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes stefLinkDraw {
  0%,
  26%,
  100% {
    opacity: 0;
    scale: 0 1;
  }

  42%,
  78% {
    opacity: 0.82;
    scale: 1 1;
  }
}

@keyframes stefCrownHolo {
  0%,
  100% {
    opacity: 0.24;
    transform: translateY(0) skewX(-2deg);
    filter:
      drop-shadow(0 0 12px rgba(132, 226, 255, 0.22))
      drop-shadow(0 0 24px rgba(132, 226, 255, 0.08));
  }

  48% {
    opacity: 0.48;
    transform: translateY(-6px) skewX(2deg);
    filter:
      drop-shadow(0 0 18px rgba(132, 226, 255, 0.34))
      drop-shadow(0 0 38px rgba(132, 226, 255, 0.16));
  }
}

@keyframes quizQuestionFloat {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg) scale(1);
    filter: brightness(1);
  }

  45% {
    transform: translateY(-8px) rotate(5deg) scale(1.08);
    filter: brightness(1.22);
  }
}

@keyframes quizStagePulse {
  0%,
  100% {
    opacity: 0.38;
    transform: scale(1);
  }

  50% {
    opacity: 0.58;
    transform: scale(1.02);
  }
}

@keyframes quizNumberScatter {
  0%,
  100% {
    opacity: 0;
    transform: translateY(10px) scale(0.82);
    filter: blur(2px);
  }

  18% {
    opacity: 0.74;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  48% {
    opacity: 0.44;
    transform: translateY(-8px) scale(1.08);
  }

  72% {
    opacity: 0;
    transform: translateY(-18px) scale(0.94);
    filter: blur(1px);
  }
}

@keyframes quizTimeSweep {
  0% {
    opacity: 0.42;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.98);
  }

  50% {
    opacity: 0.58;
    transform: translate(-50%, -50%) rotate(180deg) scale(1.02);
  }

  100% {
    opacity: 0.42;
    transform: translate(-50%, -50%) rotate(360deg) scale(0.98);
  }
}

@keyframes quizMeterCore {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.92);
  }

  50% {
    opacity: 0.76;
    transform: scale(1.08);
  }
}

@keyframes quizMeterNeedle {
  to {
    transform: rotate(360deg);
  }
}

@keyframes aiCursorBlink {
  0%,
  48% {
    opacity: 1;
  }

  49%,
  100% {
    opacity: 0;
  }
}

@keyframes aiClipboardIconPulse {
  0%,
  100% {
    filter: brightness(0.95);
  }

  50% {
    filter: brightness(1.22);
  }
}

@keyframes aiStageUiBreathe {
  0%,
  100% {
    opacity: 0.38;
    transform: translateX(-0.4vw);
  }

  50% {
    opacity: 0.58;
    transform: translateX(0.4vw);
  }
}

@keyframes aiContextPacket {
  0% {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.86);
    filter: blur(1px);
  }

  18% {
    opacity: 0.72;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }

  68% {
    opacity: 0.66;
    transform: translate3d(42vw, 1vh, 0) scale(0.44);
    filter: blur(0.4px);
  }

  100% {
    opacity: 0;
    transform: translate3d(52vw, 1vh, 0) scale(0.16);
    filter: blur(2px);
  }
}

@keyframes aiStreamToTarget {
  0% {
    opacity: 0;
    transform: translateX(0) scaleX(0.5);
  }

  18% {
    opacity: 0.8;
  }

  78% {
    opacity: 0.64;
    transform: translateX(42vw) scaleX(1);
  }

  100% {
    opacity: 0;
    transform: translateX(48vw) scaleX(0.35);
  }
}

@keyframes aiTargetBreathe {
  0%,
  100% {
    opacity: 0.82;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.03);
  }
}

@keyframes aiTargetRing {
  0%,
  100% {
    opacity: 0.28;
    transform: scale(0.96);
  }

  50% {
    opacity: 0.58;
    transform: scale(1.05);
  }
}

@keyframes batchCardSnap {
  0% {
    transform: translateY(-2px) skewX(-0.6deg);
    filter: brightness(0.96);
  }

  36% {
    transform: translateY(-2px) skewX(0.5deg);
  }

  62% {
    transform: translateY(-2px) skewX(0deg) scale(1.004);
    filter: brightness(1.12);
  }

  100% {
    transform: translateY(-2px) skewX(0deg) scale(1);
    filter: brightness(1);
  }
}

@keyframes batchTitleScan {
  0%,
  12% {
    opacity: 0;
    transform: translate(-20%, -50%);
  }

  24%,
  68% {
    opacity: 0.9;
  }

  86%,
  100% {
    opacity: 0;
    transform: translate(380%, -50%);
  }
}

@keyframes batchStageSettle {
  0%,
  100% {
    opacity: 0.34;
    transform: translateX(-0.3vw);
  }

  50% {
    opacity: 0.5;
    transform: translateX(0.3vw);
  }
}

@keyframes batchRowAlign {
  0%,
  28% {
    transform: translate3d(var(--batch-mess-x, 0), var(--batch-mess-y, 0), 0);
    border-color: rgba(172, 232, 255, 0.1);
  }

  55%,
  88% {
    transform: translate3d(0, 0, 0);
    border-color: rgba(172, 232, 255, 0.22);
  }

  100% {
    transform: translate3d(var(--batch-mess-x, 0), var(--batch-mess-y, 0), 0);
    border-color: rgba(172, 232, 255, 0.1);
  }
}

@keyframes batchRowScan {
  0%,
  18% {
    opacity: 0;
    transform: translateX(-115%);
  }

  32%,
  58% {
    opacity: 1;
    transform: translateX(0);
  }

  72%,
  100% {
    opacity: 0;
    transform: translateX(115%);
  }
}

@keyframes batchNameOldOut {
  0%,
  39%,
  100% {
    opacity: 0.82;
  }

  40%,
  86% {
    opacity: 0;
  }
}

@keyframes batchNameNewIn {
  0%,
  39%,
  100% {
    opacity: 0;
    transform: translateX(-8px);
  }

  40%,
  86% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes batchWideScan {
  0%,
  16% {
    opacity: 0;
    transform: translateX(0);
  }

  28%,
  66% {
    opacity: 0.76;
  }

  82%,
  100% {
    opacity: 0;
    transform: translateX(136vw);
  }
}

@keyframes collabCardPulse {
  0%,
  100% {
    box-shadow:
      0 16px 38px rgba(0, 0, 0, 0.46),
      0 0 0 1px rgba(119, 225, 255, 0.1) inset,
      0 0 20px rgba(119, 225, 255, 0.1);
  }

  48% {
    box-shadow:
      0 16px 38px rgba(0, 0, 0, 0.46),
      0 0 0 1px rgba(181, 255, 198, 0.2) inset,
      0 0 34px rgba(119, 225, 255, 0.18);
  }
}

@keyframes collabCardLock {
  0%,
  100% {
    filter: brightness(0.95);
  }

  50% {
    filter: brightness(1.22);
  }
}

@keyframes collabNetworkBreathe {
  0%,
  100% {
    opacity: 0.36;
    transform: scale(1);
  }

  50% {
    opacity: 0.58;
    transform: scale(1.015);
  }
}

@keyframes collabNetworkExpand {
  0%,
  100% {
    opacity: 0.42;
    filter: brightness(0.92);
  }

  48% {
    opacity: 0.68;
    filter: brightness(1.18);
  }
}

@keyframes collabFileLock {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.98);
    filter: brightness(0.95);
  }

  52% {
    transform: translate(-50%, -50%) scale(1.04);
    filter: brightness(1.18);
  }
}

@keyframes collabLockClose {
  0%,
  38% {
    opacity: 0.42;
    transform: translate(-50%, -50%) scale(0.92);
  }

  52%,
  100% {
    opacity: 0.86;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes collabLockShackle {
  0%,
  38% {
    opacity: 0.55;
    transform: translate(-50%, -34%) scaleY(1.08);
  }

  52%,
  100% {
    opacity: 0.9;
    transform: translate(-50%, -10%) scaleY(1);
  }
}

@keyframes collabLockedLabel {
  0%,
  48% {
    opacity: 0;
  }

  49%,
  100% {
    opacity: 1;
  }
}

@keyframes collabCursorOwner {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  18% {
    opacity: 0.92;
  }

  50%,
  100% {
    opacity: 0.92;
    transform: translate3d(calc(var(--hover-card-center-x, 50vw) + 18px), calc(var(--hover-card-center-y, 50vh) - 20vh - 20px), 0);
  }
}

@keyframes collabCursorWait {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  22% {
    opacity: 0.88;
  }

  52%,
  100% {
    opacity: 0.62;
    transform: translate3d(calc(-100vw + var(--hover-card-center-x, 50vw) + 136px), calc(var(--hover-card-center-y, 50vh) - 68vh + 20px), 0);
    filter: drop-shadow(0 0 10px rgba(255, 214, 110, 0.34));
  }
}

@keyframes collabCursorReview {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  24% {
    opacity: 0.72;
  }

  58%,
  100% {
    opacity: 0.42;
    transform: translate3d(calc(var(--hover-card-center-x, 50vw) - 128px), calc(var(--hover-card-center-y, 50vh) - 72vh + 44px), 0);
  }
}

@keyframes collabSyncLine {
  0% {
    opacity: 0;
    scale: 0 1;
  }

  30%,
  72% {
    opacity: 0.74;
    scale: 1 1;
  }

  100% {
    opacity: 0;
    scale: 1 1;
  }
}

@keyframes babelCardBlockGlow {
  0%,
  100% {
    filter: brightness(0.92);
    box-shadow:
      0 0 18px rgba(111, 205, 93, 0.18),
      inset 0 0 18px rgba(132, 244, 255, 0.05);
  }

  50% {
    filter: brightness(1.28);
    box-shadow:
      0 0 24px rgba(111, 205, 93, 0.28),
      inset 0 0 22px rgba(132, 244, 255, 0.1);
  }
}

@keyframes babelTitleGlitchBase {
  0%,
  84%,
  100% {
    transform: translateY(-2px);
  }

  86% {
    transform: translateY(-2px) translateX(1px);
  }

  88% {
    transform: translateY(-2px) translateX(-1px);
  }
}

@keyframes babelTitleGlitchLayer {
  0%,
  82%,
  100% {
    opacity: 0;
    transform: translateX(0);
  }

  84% {
    opacity: 0.75;
    transform: translateX(2px);
  }

  86% {
    opacity: 0.32;
    transform: translateX(-2px);
  }

  88% {
    opacity: 0.68;
    transform: translateX(1px);
  }
}

@keyframes babelCardDescriptionKey {
  0%,
  24% {
    content: "item.mod.sword";
    opacity: 0.72;
  }

  25%,
  48% {
    content: "item.mod.sword → 剣";
    opacity: 0.94;
  }

  49%,
  72% {
    content: "block.mod.ore → 鉱石";
    opacity: 0.94;
  }

  73%,
  100% {
    content: "entity.mod.dragon → ドラゴン";
    opacity: 0.86;
  }
}

@keyframes babelEdgeClear {
  0%,
  42% {
    opacity: 0.78;
    filter: blur(0);
  }

  72%,
  100% {
    opacity: 0.38;
    filter: blur(1px);
  }
}

@keyframes babelWallBreak {
  0%,
  36% {
    opacity: 0.78;
    transform: translate3d(0, 0, 0);
    border-color: rgba(111, 205, 93, 0.16);
  }

  52% {
    opacity: 0.92;
    transform: translate3d(0, -2px, 0);
    border-color: rgba(132, 244, 255, 0.34);
  }

  78%,
  100% {
    opacity: 0.68;
    transform: translate3d(0, 0, 0);
    border-color: rgba(111, 205, 93, 0.14);
  }
}

@keyframes babelEnglishBreak {
  0%,
  38% {
    opacity: 0.86;
    transform: translateY(0);
    filter: none;
  }

  52% {
    opacity: 0.2;
    transform: translateY(-8px);
    filter: blur(1px);
  }

  70%,
  100% {
    opacity: 0;
    transform: translateY(-10px);
    filter: blur(2px);
  }
}

@keyframes babelJapaneseRebuild {
  0%,
  42% {
    opacity: 0;
    transform: translateY(8px);
  }

  58%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes babelCrackOpen {
  0%,
  18% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(0.08);
  }

  36% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleY(1);
  }

  72% {
    opacity: 0.82;
    transform: translate(-50%, -50%) scaleY(1.08) scaleX(1.2);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scaleY(1.08) scaleX(1.5);
  }
}

@keyframes babelTranslationBlock {
  0%,
  38% {
    opacity: 0.45;
    transform: translateY(8px);
  }

  58%,
  100% {
    opacity: 0.95;
    transform: translateY(0);
  }
}

@keyframes babelBlockFall {
  0%,
  34% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg) scale(0.7);
  }

  44% {
    opacity: 0.92;
  }

  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--babel-block-x)), calc(-50% + var(--babel-block-y))) rotate(var(--babel-block-rot)) scale(0.25);
  }
}

@keyframes collabCardSyncSweep {
  0%,
  100% {
    background-position: -160% 0, 160% 0;
    box-shadow:
      inset 0 0 18px rgba(119, 225, 255, 0.08),
      0 0 20px rgba(119, 225, 255, 0.1);
  }

  50% {
    background-position: 160% 0, -160% 0;
    box-shadow:
      inset 0 0 22px rgba(181, 255, 198, 0.12),
      0 0 26px rgba(119, 225, 255, 0.15);
  }
}

@keyframes collabMarginBreathe {
  0%,
  100% {
    opacity: 0.26;
  }

  50% {
    opacity: 0.42;
  }
}

@keyframes collabFileClickV2 {
  0%,
  38%,
  100% {
    transform: translate(-50%, -50%) scale(0.98);
    filter: brightness(0.94);
  }

  48% {
    transform: translate(-50%, -50%) scale(0.93);
    filter: brightness(1.22);
  }

  58% {
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes collabLockBodyV2 {
  0%,
  40% {
    opacity: 0.35;
    transform: translate(-50%, -50%) scale(0.88);
  }

  52%,
  100% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes collabLockShackleV2 {
  0%,
  40% {
    opacity: 0.5;
    transform: translate(-50%, -42%) scaleY(1.18);
  }

  52%,
  100% {
    opacity: 0.92;
    transform: translate(-50%, -20%) scaleY(1);
  }
}

@keyframes collabCursorOwnerV2 {
  0% {
    opacity: 0;
    transform: translate3d(-18px, 0, 0);
  }

  18% {
    opacity: 0.92;
  }

  48%,
  100% {
    opacity: 0.92;
    transform: translate3d(calc(43vw - 54px), 88px, 0);
  }
}

@keyframes collabCursorWaitV2 {
  0% {
    opacity: 0;
    transform: translate3d(18px, 0, 0);
  }

  20% {
    opacity: 0.86;
  }

  50%,
  100% {
    opacity: 0.66;
    transform: translate3d(calc(-37vw + 44px), -74px, 0);
  }
}

@keyframes collabWarningGate {
  0%,
  42% {
    opacity: 0;
    transform: scaleY(0.4);
  }

  52%,
  82% {
    opacity: 0.78;
    transform: scaleY(1);
  }

  100% {
    opacity: 0.28;
    transform: scaleY(0.8);
  }
}

@keyframes collabStatusWaiting {
  0%,
  55% {
    opacity: 1;
  }

  56%,
  100% {
    opacity: 0;
  }
}

@keyframes collabStatusSynced {
  0%,
  55% {
    opacity: 0;
  }

  56%,
  100% {
    opacity: 1;
  }
}

@keyframes collabSyncLineV2 {
  0% {
    opacity: 0;
    scale: 0 1;
  }

  24%,
  72% {
    opacity: 0.64;
    scale: 1 1;
  }

  100% {
    opacity: 0.24;
    scale: 1 1;
  }
}

@keyframes collabSyncReturnV2 {
  0% {
    opacity: 0.5;
    scale: 1 1;
  }

  100% {
    opacity: 0;
    scale: 0 1;
  }
}

@keyframes pythonStageBreathe {
  0%,
  100% {
    opacity: 0.3;
    transform: translateX(-0.3vw);
  }

  50% {
    opacity: 0.46;
    transform: translateX(0.3vw);
  }
}

@keyframes pythonTerminalCycle {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    filter: blur(1px);
  }

  14%,
  70% {
    opacity: 0.74;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  82% {
    opacity: 0.82;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-8px) scale(0.99);
    filter: blur(1px);
  }
}

@keyframes pythonLogLine {
  0%,
  100% {
    opacity: 0;
    transform: translateX(-6px);
  }

  18%,
  74% {
    opacity: 1;
    transform: translateX(0);
  }

  86% {
    opacity: 0.62;
    transform: translateX(0);
  }
}

@keyframes pythonDotsCycle {
  0%,
  16%,
  72%,
  100% {
    opacity: 0;
  }

  24%,
  62% {
    opacity: 0.86;
  }
}

@keyframes pythonDotRun {
  0%,
  100% {
    opacity: 0.44;
    transform: translateX(0) scale(0.9);
  }

  50% {
    opacity: 1;
    transform: translateX(22px) scale(1.08);
  }
}

@keyframes wordFloat {
  0%,
  100% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }

  38%,
  72% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes shapeBorn {
  0%,
  100% {
    opacity: 0;
    transform: scale(0.4) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1) rotate(30deg);
  }
}

@keyframes chainDraw {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }

  60%,
  100% {
    opacity: 1;
    clip-path: inset(0);
  }
}

@keyframes quizCount {
  0%,
  24% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes clipboardCatch {
  0%,
  100% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-18px);
  }
}

@keyframes renameSweep {
  0%,
  48% {
    color: rgba(255, 255, 255, 0.82);
  }

  49%,
  100% {
    color: #bfffc2;
  }
}

@keyframes cursorRace {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  56% {
    transform: translate3d(56px, 34px, 0);
  }
}

@keyframes networkRun {
  from {
    opacity: 0.25;
  }

  to {
    opacity: 0.78;
  }
}

@keyframes waveRun {
  from {
    transform: translateX(-10px);
  }

  to {
    transform: translateX(10px);
  }
}

@keyframes codeToNote {
  0%,
  46% {
    letter-spacing: 0;
  }

  74%,
  100% {
    letter-spacing: 0.18em;
    color: #bdf4ff;
  }
}

@keyframes lyraTitleRhythm {
  0%,
  100% {
    transform: translateY(-2px) translateX(0) rotate(0deg);
    letter-spacing: 0;
  }

  24% {
    transform: translateY(-3px) translateX(0.5px) rotate(0.18deg);
  }

  52% {
    transform: translateY(-1px) translateX(-0.6px) rotate(-0.16deg);
    letter-spacing: 0.018em;
  }

  78% {
    transform: translateY(-2px) translateX(0.3px) rotate(0.1deg);
  }
}

@keyframes lyraCardCodeNote {
  0%,
  22% {
    content: "{ } ;";
    opacity: 0.62;
    transform: translateY(3px);
  }

  36%,
  58% {
    content: "{ ♪ ;";
    opacity: 0.9;
    transform: translateY(0);
  }

  72%,
  100% {
    content: "♪ ♫ ♬";
    opacity: 0.78;
    transform: translateY(1px);
  }
}

@keyframes lyraCardWave {
  0%,
  100% {
    opacity: 0.36;
    transform: translateX(-6px) scaleY(0.78);
  }

  50% {
    opacity: 0.86;
    transform: translateX(8px) scaleY(1);
  }
}

@keyframes lyraCodePanelDrift {
  0%,
  100% {
    opacity: 0.72;
    transform: translate3d(0, 0, 0);
  }

  50% {
    opacity: 0.92;
    transform: translate3d(0, -10px, 0);
  }
}

@keyframes lyraCodeLineFlow {
  0%,
  100% {
    transform: translateX(-4px);
  }

  50% {
    transform: translateX(8px);
  }
}

@keyframes lyraStageWave {
  0% {
    transform: translateX(-4%) scaleY(0.82);
  }

  50% {
    transform: translateX(3%) scaleY(1.05);
  }

  100% {
    transform: translateX(8%) scaleY(0.82);
  }
}

@keyframes lyraPointerNotePulse {
  0%,
  100% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.94);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@keyframes lyraNoteDrift {
  0%,
  100% {
    opacity: 0.18;
    transform: translate3d(0, 18px, 0) rotate(-8deg);
  }

  42%,
  70% {
    opacity: 0.84;
    transform: translate3d(12px, -10px, 0) rotate(10deg);
  }
}

@keyframes knobTurn {
  0%,
  100% {
    transform: translate(-50%, -50%) rotate(-18deg);
  }

  50% {
    transform: translate(-50%, -50%) rotate(38deg);
  }
}

@keyframes ringWave {
  0% {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(0.8);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.3);
  }
}

@keyframes easyKnobStageTurn {
  0%,
  100% {
    transform: translateY(-50%) rotate(-18deg);
  }

  50% {
    transform: translateY(-50%) rotate(38deg);
  }
}

@keyframes easyKnobStageRing {
  0% {
    opacity: 0.68;
    transform: translateY(-50%) scale(0.72);
  }

  100% {
    opacity: 0;
    transform: translateY(-50%) scale(1.55);
  }
}

.game-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease;
}

.game-modal.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.game-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
}

.game-modal__panel {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  max-height: min(82vh, 640px);
  overflow: auto;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(25, 25, 25, 0.98), rgba(10, 10, 10, 0.98)),
    #101010;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.54);
}

.game-modal__panel:focus {
  outline: none;
}

.game-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.game-modal__close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.78);
  outline-offset: 3px;
}

.game-modal__eyebrow {
  margin: 0 42px 10px 0;
  color: rgba(255, 180, 173, 0.9);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.game-modal h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.18;
}

.game-modal__lead,
.game-modal__body {
  color: var(--muted);
  line-height: 1.82;
}

.game-modal__lead {
  margin: 14px 0 0;
  font-size: 15px;
}

.game-modal__body {
  margin: 16px 0 0;
  font-size: 14px;
}

.game-modal__rows {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
}

.game-modal__row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.game-modal__row dt {
  color: rgba(255, 180, 173, 0.82);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.game-modal__row dd {
  margin: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.6;
}

body.is-modal-open {
  overflow: hidden;
}

@media (max-width: 640px) {
  .slider-wrap {
    margin-bottom: 30px;
  }

  .slider-controls {
    padding-inline: 14px;
  }

  .slider {
    height: clamp(360px, 92vw, 480px);
    min-height: 360px;
  }

  .ctrl-btn {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }

  .catalog-shell {
    padding: 0 12px;
  }

  .catalog-group__header {
    flex-direction: column;
    align-items: stretch;
  }

  .catalog-group__actions {
    justify-content: space-between;
    align-items: center;
  }

  .game-modal {
    align-items: end;
    padding: 12px;
  }

  .game-modal__panel {
    width: 100%;
    max-height: 86vh;
    padding: 22px 18px;
  }

  .game-modal__row {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

.news-list {
  width: min(100%, var(--section-w));
  margin: 0 auto 120px;
  padding: 0 16px;
}

.news-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin: 0 0 14px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid #2a2a2a;
  background: #151515;
  color: #e6e6e6;
  cursor: pointer;
  user-select: none;
}

.chip.is-active {
  background: #1d1d1d;
  border-color: #444;
}

.chip .count {
  opacity: 0.7;
  font-size: 12px;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 780px) {
  .news-grid {
    grid-template-columns: 1fr;
  }
}

.news-item-card {
  display: block;
  padding: 18px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #171717, #121212);
  border: 1px solid #232323;
  box-shadow: var(--shadow);
  transition:
    transform 0.15s,
    background 0.2s;
}

.news-item-card:hover,
.news-item-card:focus-visible {
  transform: translateY(-2px);
  background: linear-gradient(180deg, #1a1a1a, #151515);
  outline: none;
  border-color: rgba(255, 59, 48, 0.24);
}

.news-item-card h2 {
  font-size: 17px;
  color: #fff;
  margin-bottom: 8px;
  line-height: 1.45;
}

.news-item-card time {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.56);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
}

.news-item-card p,
.news-empty {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.75;
}

.news-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px;
  border: 1px dashed #2a2a2a;
  border-radius: var(--radius);
}

.section--feedback {
  padding-top: 18px;
  padding-bottom: 40px;
}

.feedback-panel {
  padding: 6px 2px 0;
  text-align: left;
}

.feedback-panel h1,
.feedback-panel h2 {
  text-align: left;
}

.feedback-copy {
  margin: 0;
  max-width: var(--copy-w);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.9;
}

.feedback-note {
  margin: 16px 0 0;
  max-width: var(--copy-w);
  color: rgba(255, 255, 255, 0.54);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

.feedback-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 24px;
  padding: 0 24px;
  border: 1px solid rgba(255, 59, 48, 0.3);
  border-radius: 999px;
  background: rgba(255, 59, 48, 0.14);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.feedback-button.is-attention {
  animation: feedbackAttention 1.35s ease-out 1;
}

.feedback-button:hover,
.feedback-button:focus-visible {
  background: rgba(255, 59, 48, 0.22);
  border-color: rgba(255, 59, 48, 0.45);
  transform: translateY(-1px);
}

@keyframes feedbackAttention {
  0% {
    box-shadow: 0 0 0 rgba(255, 59, 48, 0);
    transform: translateY(0) scale(1);
  }

  30% {
    box-shadow:
      0 0 0 8px rgba(255, 59, 48, 0.16),
      0 0 34px rgba(255, 107, 53, 0.42);
    transform: translateY(-2px) scale(1.035);
  }

  100% {
    box-shadow: 0 0 0 20px rgba(255, 59, 48, 0);
    transform: translateY(0) scale(1);
  }
}

.gesture-mode {
  position: fixed;
  right: 18px;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  z-index: 1003;
  pointer-events: none;
}

.gesture-toggle,
.gesture-panel,
.gesture-status,
.gesture-pip,
.gesture-pip-restore {
  pointer-events: auto;
}

.gesture-toggle {
  appearance: none;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.88);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.gesture-toggle.is-active {
  border-color: rgba(255, 59, 48, 0.38);
  background: rgba(255, 59, 48, 0.2);
}

.gesture-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: min(310px, calc(100vw - 36px));
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(12, 12, 12, 0.94);
  color: #fff;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.44);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

.gesture-panel.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gesture-panel__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  cursor: pointer;
}

.gesture-panel h2 {
  margin: 0 34px 12px 0;
  color: #fff;
  font-size: 18px;
  line-height: 1.35;
}

.gesture-panel p {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 13px;
  line-height: 1.7;
}

.gesture-start {
  appearance: none;
  width: 100%;
  min-height: 42px;
  margin-top: 12px;
  border: 1px solid rgba(255, 59, 48, 0.36);
  border-radius: 999px;
  background: rgba(255, 59, 48, 0.18);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.gesture-status {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  width: max-content;
  max-width: min(280px, calc(100vw - 36px));
  margin: 0;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.9);
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

.gesture-status.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gesture-pip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(240px, calc(100vw - 36px));
  padding: 9px;
  border: 1px solid rgba(126, 235, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(8, 10, 12, 0.9);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.4),
    0 0 24px rgba(84, 215, 255, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

.gesture-pip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gesture-pip.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}

.gesture-pip__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
  color: rgba(237, 253, 255, 0.86);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.gesture-pip__hide,
.gesture-pip-restore {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.gesture-pip__hide {
  min-height: 26px;
  padding: 0 9px;
}

.gesture-pip__canvas {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: #050505;
}

.gesture-pip__feedback {
  min-height: 1.5em;
  margin: 7px 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.gesture-pip-restore {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  min-height: 34px;
  padding: 0 12px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

.gesture-pip-restore.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.gesture-video,
.gesture-canvas {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.gesture-effect-layer {
  position: fixed;
  inset: 0;
  z-index: 1002;
  pointer-events: none;
  overflow: hidden;
}

.gesture-effect {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #fff;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.gesture-effect--heart {
  display: flex;
  gap: 0.08em;
  font-size: clamp(44px, 11vw, 112px);
  font-weight: 900;
  letter-spacing: 0.08em;
  transform-style: preserve-3d;
  animation: gestureHeart 2s ease-out forwards;
}

.gesture-effect--heart span {
  display: inline-block;
  color: transparent;
  background: linear-gradient(135deg, #fff, #bdf4ff 42%, #fff 62%, #ffb4ad);
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 36px rgba(116, 211, 255, 0.42);
  transform: rotateY(-18deg) translateZ(24px);
}

.gesture-effect--cross {
  font-size: clamp(96px, 18vw, 180px);
  font-weight: 900;
  color: rgba(255, 59, 48, 0.95);
  text-shadow: 0 0 38px rgba(255, 59, 48, 0.34);
  animation: gesturePop 0.78s ease-out forwards;
}

.gesture-firework {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: hsl(var(--firework-hue, 0), 90%, 68%);
  box-shadow: 0 0 16px hsl(var(--firework-hue, 0), 90%, 68%);
  animation: gestureFirework 1.1s ease-out forwards;
}

@keyframes gestureHeart {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotateX(62deg) scale(0.78);
    filter: blur(8px);
  }

  24% {
    opacity: 1;
    filter: blur(0);
  }

  70% {
    opacity: 1;
    transform: translate(-50%, -56%) rotateX(0deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -62%) rotateX(0deg) scale(1.05);
  }
}

@keyframes gesturePop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }

  25% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }
}

@keyframes gestureFirework {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform:
      translate3d(var(--firework-x, 0px), var(--firework-y, 0px), 0)
      scale(0.18);
  }
}

.catalog-card[data-catalog-id]:hover,
.catalog-card[data-catalog-id]:focus-visible,
.catalog-card.is-gesture-hover {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.catalog-card[data-catalog-id="battle-forged"]:hover,
.catalog-card[data-catalog-id="battle-forged"]:focus-visible,
.catalog-card[data-catalog-id="battle-forged"].is-gesture-hover {
  transform: translateY(-2px);
  border-color: rgba(255, 133, 54, 0.58);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 180, 96, 0.1) inset,
    0 0 34px rgba(255, 93, 31, 0.25),
    0 0 70px rgba(255, 65, 22, 0.1);
  animation: forgeCardSink 0.52s cubic-bezier(0.18, 0.8, 0.22, 1) 1;
}

.catalog-card[data-catalog-id="neuro-lab"]:hover,
.catalog-card[data-catalog-id="neuro-lab"]:focus-visible,
.catalog-card[data-catalog-id="neuro-lab"].is-gesture-hover {
  border-color: rgba(91, 255, 190, 0.5);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(91, 255, 190, 0.12) inset,
    0 0 24px rgba(91, 255, 190, 0.12);
  animation: neuroWarningFrame 0.88s steps(2, end) infinite;
}

.catalog-card[data-catalog-id="nyx-tactics"]:hover,
.catalog-card[data-catalog-id="nyx-tactics"]:focus-visible,
.catalog-card[data-catalog-id="nyx-tactics"].is-gesture-hover {
  border-color: rgba(170, 219, 255, 0.48);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(170, 219, 255, 0.14) inset,
    0 0 22px rgba(117, 178, 255, 0.12);
}

.catalog-card[data-catalog-id="nyx-tactics"]:hover::before,
.catalog-card[data-catalog-id="nyx-tactics"]:focus-visible::before,
.catalog-card[data-catalog-id="nyx-tactics"].is-gesture-hover::before {
  opacity: 0;
}

.catalog-card[data-catalog-id="original-slot-maker"]:hover,
.catalog-card[data-catalog-id="original-slot-maker"]:focus-visible,
.catalog-card[data-catalog-id="original-slot-maker"].is-gesture-hover {
  border-color: rgba(255, 210, 82, 0.56);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 210, 82, 0.16) inset,
    0 0 24px rgba(255, 210, 82, 0.18),
    0 0 36px rgba(255, 76, 184, 0.08);
  animation: slotCardBounce 0.54s cubic-bezier(0.2, 0.8, 0.2, 1) 1;
}

.catalog-card[data-catalog-id="original-slot-maker"] .catalog-card__body h3 {
  position: relative;
}

.catalog-card[data-catalog-id="original-slot-maker"]:hover .catalog-card__body h3,
.catalog-card[data-catalog-id="original-slot-maker"]:focus-visible .catalog-card__body h3,
.catalog-card[data-catalog-id="original-slot-maker"].is-gesture-hover .catalog-card__body h3 {
  color: transparent;
  text-shadow: none;
}

.catalog-card[data-catalog-id="original-slot-maker"] .catalog-card__body h3::after {
  content: "Original Slot Maker";
  position: absolute;
  left: 0;
  top: 0;
  color: #fff7c6;
  text-shadow:
    0 0 10px rgba(255, 222, 108, 0.58),
    0 0 20px rgba(255, 76, 184, 0.18);
  opacity: 0;
  pointer-events: none;
}

.catalog-card[data-catalog-id="original-slot-maker"]:hover .catalog-card__body h3::after,
.catalog-card[data-catalog-id="original-slot-maker"]:focus-visible .catalog-card__body h3::after,
.catalog-card[data-catalog-id="original-slot-maker"].is-gesture-hover .catalog-card__body h3::after {
  opacity: 1;
  animation: slotTitleRoll 2.35s steps(1, end) forwards;
}

.catalog-card[data-catalog-id="siritori-jibril"]:hover,
.catalog-card[data-catalog-id="siritori-jibril"]:focus-visible,
.catalog-card[data-catalog-id="siritori-jibril"].is-gesture-hover {
  border-color: rgba(230, 252, 255, 0.42);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 240, 169, 0.12) inset,
    0 0 26px rgba(114, 237, 255, 0.13),
    0 0 38px rgba(255, 240, 169, 0.08);
}

.catalog-card[data-catalog-id="siritori-jibril"] .catalog-card__body h3 {
  position: relative;
}

.catalog-card[data-catalog-id="siritori-jibril"]:hover .catalog-card__body h3,
.catalog-card[data-catalog-id="siritori-jibril"]:focus-visible .catalog-card__body h3,
.catalog-card[data-catalog-id="siritori-jibril"].is-gesture-hover .catalog-card__body h3 {
  color: transparent;
  text-shadow: none;
}

.catalog-card[data-catalog-id="siritori-jibril"] .catalog-card__body h3::after {
  content: "具象化しりとりTRPG ジブリール編";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: block;
  color: #f4fdff;
  line-height: inherit;
  white-space: normal;
  text-shadow:
    0 0 10px rgba(114, 237, 255, 0.45),
    0 0 22px rgba(255, 240, 169, 0.18);
  opacity: 0;
  pointer-events: none;
}

.catalog-card[data-catalog-id="siritori-jibril"]:hover .catalog-card__body h3::after,
.catalog-card[data-catalog-id="siritori-jibril"]:focus-visible .catalog-card__body h3::after,
.catalog-card[data-catalog-id="siritori-jibril"].is-gesture-hover .catalog-card__body h3::after {
  opacity: 1;
  animation: jibrilTitleSigil 2.4s steps(1, end) infinite;
}

.catalog-card[data-catalog-id]::before,
.catalog-card[data-catalog-id]::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.catalog-card[data-catalog-id]::before {
  left: var(--card-pointer-x, 50%);
  top: var(--card-pointer-y, 50%);
  z-index: 1;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 66%);
  transform: translate(-50%, -50%) scale(0.72);
}

.catalog-card[data-catalog-id]::after {
  right: 12px;
  bottom: 12px;
  z-index: 3;
  max-width: calc(100% - 24px);
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(6, 8, 10, 0.72);
  color: rgba(255, 255, 255, 0.82);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  transform: translateY(6px);
}

.catalog-card[data-catalog-id]:hover::before,
.catalog-card[data-catalog-id]:focus-visible::before,
.catalog-card.is-gesture-hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.catalog-card[data-catalog-id]:hover::after,
.catalog-card[data-catalog-id]:focus-visible::after,
.catalog-card.is-gesture-hover::after {
  opacity: 1;
  transform: translateY(0);
}

.catalog-card[data-catalog-id="battle-forged"]::before {
  left: var(--card-pointer-x, 50%);
  top: var(--card-pointer-y, 50%);
  z-index: 5;
  width: 150px;
  height: 150px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 238, 176, 0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 66% 44%, rgba(255, 158, 55, 0.95) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 34%, rgba(255, 203, 118, 0.9) 0 1.5px, transparent 3px),
    radial-gradient(circle at 56% 66%, rgba(255, 92, 31, 0.84) 0 2px, transparent 3.5px);
  box-shadow: none;
  filter: drop-shadow(0 0 8px rgba(255, 108, 35, 0.78));
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(0.64) rotate(-8deg);
}

.catalog-card[data-catalog-id="battle-forged"]:hover::before,
.catalog-card[data-catalog-id="battle-forged"]:focus-visible::before,
.catalog-card[data-catalog-id="battle-forged"].is-gesture-hover::before {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  animation: forgeCardSparks 1.05s ease-out infinite;
}

.catalog-card[data-catalog-id="holoboard"]::before {
  inset: 0;
  left: 0;
  top: 0;
  z-index: 4;
  width: auto;
  height: auto;
  border-radius: inherit;
  background:
    radial-gradient(circle at 22% 12%, rgba(255, 255, 255, 0.34), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(143, 231, 255, 0.3), transparent 34%),
    repeating-linear-gradient(112deg, rgba(236, 250, 255, 0.92) 0 16px, rgba(185, 216, 228, 0.84) 16px 34px, rgba(212, 232, 240, 0.9) 34px 58px);
  -webkit-mask-image: radial-gradient(circle at var(--card-pointer-x, 50%) var(--card-pointer-y, 50%), transparent 0 76px, rgba(0, 0, 0, 0.38) 104px, #000 136px);
  mask-image: radial-gradient(circle at var(--card-pointer-x, 50%) var(--card-pointer-y, 50%), transparent 0 76px, rgba(0, 0, 0, 0.38) 104px, #000 136px);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;
  transform: none;
  mix-blend-mode: normal;
  backdrop-filter: blur(2px) saturate(0.82);
  transition: opacity 0.2s ease;
}

.catalog-card[data-catalog-id="holoboard"]:hover::before,
.catalog-card[data-catalog-id="holoboard"]:focus-visible::before,
.catalog-card[data-catalog-id="holoboard"].is-gesture-hover::before {
  opacity: 0.96;
  transform: none;
}

.catalog-card[data-catalog-id="holoboard"]:hover,
.catalog-card[data-catalog-id="holoboard"]:focus-visible,
.catalog-card[data-catalog-id="holoboard"].is-gesture-hover {
  border-color: rgba(139, 238, 255, 0.42);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.48),
    0 0 34px rgba(94, 217, 255, 0.14);
}

.catalog-card[data-catalog-id="holoboard"]:hover .catalog-card__body h3,
.catalog-card[data-catalog-id="holoboard"]:focus-visible .catalog-card__body h3,
.catalog-card[data-catalog-id="holoboard"].is-gesture-hover .catalog-card__body h3 {
  color: #f5fdff;
  text-shadow:
    0 0 12px rgba(126, 232, 255, 0.38),
    0 0 28px rgba(126, 232, 255, 0.16);
}

.catalog-card[data-catalog-id="siritori-jibril"]::before {
  inset: 10px;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: auto;
  height: auto;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 44%, rgba(230, 252, 255, 0.36) 45% 46%, transparent 47%),
    conic-gradient(from 0deg, transparent 0 8%, rgba(255, 240, 169, 0.36) 8% 9%, transparent 9% 22%, rgba(114, 237, 255, 0.38) 22% 23%, transparent 23% 100%);
  box-shadow:
    inset 0 0 22px rgba(114, 237, 255, 0.08),
    0 0 24px rgba(255, 240, 169, 0.08);
  opacity: 0;
  transform: rotate(0deg) scale(0.98);
  mix-blend-mode: screen;
}

.catalog-card[data-catalog-id="siritori-jibril"]:hover::before,
.catalog-card[data-catalog-id="siritori-jibril"]:focus-visible::before,
.catalog-card[data-catalog-id="siritori-jibril"].is-gesture-hover::before {
  opacity: 0.72;
  transform: rotate(0deg) scale(1);
  animation: jibrilCardCircle 5.8s linear infinite;
}

.catalog-card[data-catalog-id="siritori-stef"]:hover,
.catalog-card[data-catalog-id="siritori-stef"]:focus-visible,
.catalog-card[data-catalog-id="siritori-stef"].is-gesture-hover {
  border-color: rgba(255, 204, 226, 0.42);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(132, 226, 255, 0.1) inset,
    0 0 24px rgba(255, 180, 210, 0.14),
    0 0 42px rgba(132, 226, 255, 0.08);
}

.catalog-card[data-catalog-id="siritori-stef"] .catalog-card__body p:last-child {
  position: relative;
}

.catalog-card[data-catalog-id="siritori-stef"] .catalog-card__body p:last-child::after {
  content: "りんご → 🍎";
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid rgba(255, 220, 236, 0.24);
  border-radius: 999px;
  background: rgba(24, 12, 28, 0.58);
  color: rgba(255, 238, 247, 0.94);
  font-size: 0.82em;
  font-weight: 850;
  letter-spacing: 0.04em;
  line-height: 1.35;
  white-space: nowrap;
  box-shadow:
    0 0 14px rgba(255, 180, 210, 0.18),
    0 0 18px rgba(132, 226, 255, 0.1);
  opacity: 0;
  pointer-events: none;
}

.catalog-card[data-catalog-id="siritori-stef"]:hover .catalog-card__body p:last-child::after,
.catalog-card[data-catalog-id="siritori-stef"]:focus-visible .catalog-card__body p:last-child::after,
.catalog-card[data-catalog-id="siritori-stef"].is-gesture-hover .catalog-card__body p:last-child::after {
  animation: stefCardWordEmoji 2.6s steps(1, end) infinite;
}

.catalog-card[data-catalog-id="ima-nanmonme"]:hover,
.catalog-card[data-catalog-id="ima-nanmonme"]:focus-visible,
.catalog-card[data-catalog-id="ima-nanmonme"].is-gesture-hover {
  border-color: rgba(146, 255, 178, 0.42);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(146, 255, 178, 0.1) inset,
    0 0 24px rgba(146, 255, 178, 0.12);
}

.catalog-card[data-catalog-id="ima-nanmonme"] .catalog-card__floating-question {
  display: inline-block;
  color: #eafff0;
  text-shadow:
    0 0 10px rgba(146, 255, 178, 0.46),
    0 0 20px rgba(255, 255, 255, 0.16);
}

.catalog-card[data-catalog-id="ima-nanmonme"]:hover .catalog-card__floating-question,
.catalog-card[data-catalog-id="ima-nanmonme"]:focus-visible .catalog-card__floating-question,
.catalog-card[data-catalog-id="ima-nanmonme"].is-gesture-hover .catalog-card__floating-question {
  animation: quizQuestionFloat 1.8s ease-in-out infinite;
}

.catalog-card[data-catalog-id="babel-breaker"] {
  --babel-card-rgb: 111, 205, 93;
}

.catalog-card[data-catalog-id="babel-breaker"]:hover,
.catalog-card[data-catalog-id="babel-breaker"]:focus-visible,
.catalog-card[data-catalog-id="babel-breaker"].is-gesture-hover {
  border-color: rgba(111, 205, 93, 0.54);
  border-radius: 6px;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(132, 244, 255, 0.12) inset,
    0 0 0 3px rgba(111, 205, 93, 0.08) inset,
    0 0 24px rgba(111, 205, 93, 0.14);
}

.catalog-card[data-catalog-id="babel-breaker"]::before {
  inset: 10px;
  left: 10px;
  top: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  width: auto;
  height: auto;
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(111, 205, 93, 0.6) 0 12px, transparent 12px calc(100% - 12px), rgba(132, 244, 255, 0.48) calc(100% - 12px) 100%),
    linear-gradient(180deg, rgba(132, 244, 255, 0.46) 0 10px, transparent 10px calc(100% - 10px), rgba(111, 205, 93, 0.56) calc(100% - 10px) 100%),
    radial-gradient(circle at 12% 18%, rgba(111, 205, 93, 0.78) 0 3px, transparent 4px),
    radial-gradient(circle at 88% 26%, rgba(132, 244, 255, 0.74) 0 3px, transparent 4px),
    radial-gradient(circle at 18% 84%, rgba(132, 244, 255, 0.64) 0 3px, transparent 4px),
    radial-gradient(circle at 82% 76%, rgba(111, 205, 93, 0.72) 0 3px, transparent 4px);
  box-shadow:
    0 0 18px rgba(111, 205, 93, 0.18),
    inset 0 0 18px rgba(132, 244, 255, 0.05);
  opacity: 0;
  transform: none;
  mix-blend-mode: screen;
}

.catalog-card[data-catalog-id="babel-breaker"]:hover::before,
.catalog-card[data-catalog-id="babel-breaker"]:focus-visible::before,
.catalog-card[data-catalog-id="babel-breaker"].is-gesture-hover::before {
  opacity: 0.86;
  transform: none;
  animation: babelCardBlockGlow 1.35s steps(2, end) infinite;
}

.catalog-card[data-catalog-id="babel-breaker"] .catalog-card__body h3 {
  position: relative;
}

.catalog-card[data-catalog-id="babel-breaker"] .catalog-card__body h3::after {
  content: "BABEL_BREAKER";
  position: absolute;
  left: 0;
  top: 0;
  color: rgba(154, 255, 142, 0.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-shadow:
    2px 0 rgba(132, 244, 255, 0.62),
    -2px 0 rgba(111, 205, 93, 0.64);
  opacity: 0;
  pointer-events: none;
}

.catalog-card[data-catalog-id="babel-breaker"]:hover .catalog-card__body h3,
.catalog-card[data-catalog-id="babel-breaker"]:focus-visible .catalog-card__body h3,
.catalog-card[data-catalog-id="babel-breaker"].is-gesture-hover .catalog-card__body h3 {
  text-shadow:
    0 0 10px rgba(111, 205, 93, 0.34),
    0 0 18px rgba(132, 244, 255, 0.16);
  animation: babelTitleGlitchBase 1.9s steps(1, end) infinite;
}

.catalog-card[data-catalog-id="babel-breaker"]:hover .catalog-card__body h3::after,
.catalog-card[data-catalog-id="babel-breaker"]:focus-visible .catalog-card__body h3::after,
.catalog-card[data-catalog-id="babel-breaker"].is-gesture-hover .catalog-card__body h3::after {
  animation: babelTitleGlitchLayer 1.9s steps(1, end) infinite;
}

.catalog-card[data-catalog-id="babel-breaker"] .catalog-card__body p:last-child {
  position: relative;
}

.catalog-card[data-catalog-id="babel-breaker"] .catalog-card__body p:last-child::after {
  content: "item.mod.sword → 剣";
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  max-width: min(100%, 260px);
  padding: 3px 8px;
  border: 1px solid rgba(111, 205, 93, 0.28);
  border-radius: 4px;
  background: rgba(6, 17, 12, 0.68);
  color: rgba(219, 255, 218, 0.94);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78em;
  font-weight: 850;
  line-height: 1.35;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.catalog-card[data-catalog-id="babel-breaker"]:hover .catalog-card__body p:last-child::after,
.catalog-card[data-catalog-id="babel-breaker"]:focus-visible .catalog-card__body p:last-child::after,
.catalog-card[data-catalog-id="babel-breaker"].is-gesture-hover .catalog-card__body p:last-child::after {
  animation: babelCardDescriptionKey 2.4s steps(1, end) infinite;
}

.catalog-card[data-catalog-id="ai-state-exporter"]:hover,
.catalog-card[data-catalog-id="ai-state-exporter"]:focus-visible,
.catalog-card[data-catalog-id="ai-state-exporter"].is-gesture-hover {
  border-color: rgba(148, 232, 255, 0.42);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(148, 232, 255, 0.1) inset,
    0 0 24px rgba(148, 232, 255, 0.12);
}

.catalog-card[data-catalog-id="ai-state-exporter"] .catalog-card__body h3 {
  position: relative;
}

.catalog-card[data-catalog-id="ai-state-exporter"] .catalog-card__body h3::after {
  content: "";
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  width: 32px;
  height: 2px;
  border-radius: 999px;
  background: rgba(170, 238, 255, 0.9);
  box-shadow: 0 0 12px rgba(148, 232, 255, 0.44);
  opacity: 0;
  pointer-events: none;
}

.catalog-card[data-catalog-id="ai-state-exporter"]:hover .catalog-card__body h3::after,
.catalog-card[data-catalog-id="ai-state-exporter"]:focus-visible .catalog-card__body h3::after,
.catalog-card[data-catalog-id="ai-state-exporter"].is-gesture-hover .catalog-card__body h3::after {
  animation: aiCursorBlink 0.9s steps(1, end) infinite;
}

.catalog-card[data-catalog-id="ai-state-exporter"]::before {
  content: none;
  display: none;
}

.catalog-card[data-catalog-id="ai-state-exporter"]:hover::before,
.catalog-card[data-catalog-id="ai-state-exporter"]:focus-visible::before,
.catalog-card[data-catalog-id="ai-state-exporter"].is-gesture-hover::before {
  content: none;
  display: none;
  opacity: 0;
  animation: none;
}

.catalog-card[data-catalog-id="batch-renamer"]:hover,
.catalog-card[data-catalog-id="batch-renamer"]:focus-visible,
.catalog-card[data-catalog-id="batch-renamer"].is-gesture-hover {
  border-color: rgba(172, 232, 255, 0.44);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(172, 232, 255, 0.12) inset,
    0 0 24px rgba(172, 232, 255, 0.1);
  animation: batchCardSnap 0.48s cubic-bezier(0.18, 0.84, 0.24, 1) 1;
}

.catalog-card[data-catalog-id="batch-renamer"] .catalog-card__body h3 {
  position: relative;
  overflow: hidden;
}

.catalog-card[data-catalog-id="batch-renamer"] .catalog-card__body h3::after {
  content: "";
  position: absolute;
  left: -28%;
  right: auto;
  top: 50%;
  width: 34%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(202, 245, 255, 0.88), transparent);
  box-shadow: 0 0 12px rgba(172, 232, 255, 0.42);
  opacity: 0;
  transform: translateY(-50%);
  pointer-events: none;
}

.catalog-card[data-catalog-id="batch-renamer"]:hover .catalog-card__body h3::after,
.catalog-card[data-catalog-id="batch-renamer"]:focus-visible .catalog-card__body h3::after,
.catalog-card[data-catalog-id="batch-renamer"].is-gesture-hover .catalog-card__body h3::after {
  animation: batchTitleScan 1.25s ease-in-out infinite;
}

.catalog-card[data-catalog-id="collab-sync"]:hover,
.catalog-card[data-catalog-id="collab-sync"]:focus-visible,
.catalog-card[data-catalog-id="collab-sync"].is-gesture-hover {
  border-color: rgba(119, 225, 255, 0.44);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(119, 225, 255, 0.12) inset,
    0 0 24px rgba(119, 225, 255, 0.12);
  animation: collabCardPulse 1.45s ease-in-out infinite;
}

.catalog-card[data-catalog-id="collab-sync"]::before {
  inset: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  width: auto;
  height: auto;
  border: 1px solid rgba(181, 255, 198, 0.24);
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent 0 20%, rgba(119, 225, 255, 0.28) 24%, transparent 30% 100%),
    linear-gradient(90deg, transparent 0 70%, rgba(181, 255, 198, 0.22) 76%, transparent 82% 100%);
  background-size: 220% 100%;
  box-shadow:
    inset 0 0 18px rgba(119, 225, 255, 0.08),
    0 0 20px rgba(119, 225, 255, 0.1);
  opacity: 0;
  transform: none;
  mix-blend-mode: screen;
}

.catalog-card[data-catalog-id="collab-sync"]:hover::before,
.catalog-card[data-catalog-id="collab-sync"]:focus-visible::before,
.catalog-card[data-catalog-id="collab-sync"].is-gesture-hover::before {
  opacity: 0.82;
  transform: none;
  animation: collabCardSyncSweep 1.45s ease-in-out infinite;
}

.catalog-card[data-catalog-id="lyra-code2music"]:hover,
.catalog-card[data-catalog-id="lyra-code2music"]:focus-visible,
.catalog-card[data-catalog-id="lyra-code2music"].is-gesture-hover {
  border-color: rgba(178, 142, 255, 0.44);
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.46),
    0 0 0 1px rgba(118, 236, 255, 0.1) inset,
    0 0 24px rgba(178, 142, 255, 0.12);
}

.catalog-card[data-catalog-id="lyra-code2music"] .catalog-card__body {
  position: relative;
}

.catalog-card[data-catalog-id="lyra-code2music"] .catalog-card__body h3 {
  position: relative;
}

.catalog-card[data-catalog-id="lyra-code2music"]:hover .catalog-card__body h3,
.catalog-card[data-catalog-id="lyra-code2music"]:focus-visible .catalog-card__body h3,
.catalog-card[data-catalog-id="lyra-code2music"].is-gesture-hover .catalog-card__body h3 {
  animation: lyraTitleRhythm 1.18s ease-in-out infinite;
  text-shadow:
    0 0 10px rgba(178, 142, 255, 0.38),
    0 0 20px rgba(118, 236, 255, 0.14);
}

.catalog-card[data-catalog-id="lyra-code2music"] .catalog-card__body h3::after {
  content: "{ } ; → ♪";
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  color: rgba(220, 246, 255, 0.9);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.58em;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-shadow:
    0 0 10px rgba(118, 236, 255, 0.38),
    0 0 18px rgba(178, 142, 255, 0.18);
  opacity: 0;
  pointer-events: none;
}

.catalog-card[data-catalog-id="lyra-code2music"]:hover .catalog-card__body h3::after,
.catalog-card[data-catalog-id="lyra-code2music"]:focus-visible .catalog-card__body h3::after,
.catalog-card[data-catalog-id="lyra-code2music"].is-gesture-hover .catalog-card__body h3::after {
  animation: lyraCardCodeNote 1.65s steps(1, end) infinite;
}

.catalog-card[data-catalog-id="lyra-code2music"] .catalog-card__body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 16px;
  background: linear-gradient(90deg, rgba(178, 142, 255, 0.08), rgba(118, 236, 255, 0.42), rgba(178, 142, 255, 0.08));
  clip-path: polygon(0 50%, 7% 34%, 14% 66%, 21% 42%, 28% 58%, 35% 30%, 42% 70%, 49% 45%, 56% 55%, 63% 28%, 70% 72%, 77% 44%, 84% 58%, 91% 38%, 100% 50%, 100% 100%, 0 100%);
  opacity: 0;
  pointer-events: none;
}

.catalog-card[data-catalog-id="lyra-code2music"]:hover .catalog-card__body::after,
.catalog-card[data-catalog-id="lyra-code2music"]:focus-visible .catalog-card__body::after,
.catalog-card[data-catalog-id="lyra-code2music"].is-gesture-hover .catalog-card__body::after {
  animation: lyraCardWave 1.22s ease-in-out infinite;
}

.catalog-card[data-catalog-id]::after {
  content: none !important;
  display: none !important;
}

.work-hover-stage {
  z-index: 88;
  --stage-rgb: 126, 232, 255;
  --stage-accent-rgb: 255, 255, 255;
  transition:
    opacity 0.22s ease,
    visibility 0.22s ease;
}

.work-hover-stage.is-leaving {
  opacity: 0;
  visibility: visible;
}

.work-hover-stage::before {
  inset: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at var(--hover-card-center-x, 50vw) var(--hover-card-center-y, 50vh), rgba(var(--stage-rgb), 0.18), transparent 23%),
    linear-gradient(90deg, rgba(var(--stage-rgb), 0.12), transparent 26%, transparent 74%, rgba(var(--stage-accent-rgb), 0.12));
  filter: none;
  opacity: 0.9;
  mix-blend-mode: screen;
}

.work-hover-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 0% 50%, rgba(var(--stage-rgb), 0.34), rgba(var(--stage-rgb), 0.12) 26%, transparent 44%),
    radial-gradient(ellipse at 100% 50%, rgba(var(--stage-accent-rgb), 0.3), rgba(var(--stage-accent-rgb), 0.1) 25%, transparent 44%),
    linear-gradient(90deg, rgba(var(--stage-rgb), 0.08), transparent 18%, transparent 82%, rgba(var(--stage-accent-rgb), 0.08));
  opacity: 0.95;
  mix-blend-mode: screen;
  animation: stageSideAura 2.8s ease-in-out infinite;
}

.work-hover-stage--holoboard {
  --stage-rgb: 111, 229, 255;
  --stage-accent-rgb: 216, 247, 255;
}

.work-hover-stage--holoboard::before {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(186, 229, 241, 0.24), rgba(186, 229, 241, 0.08) 23%, transparent 37%, transparent 63%, rgba(216, 247, 255, 0.08) 77%, rgba(216, 247, 255, 0.24)),
    radial-gradient(ellipse at 0% 48%, rgba(221, 248, 255, 0.2), transparent 42%),
    radial-gradient(ellipse at 100% 52%, rgba(178, 230, 245, 0.18), transparent 42%);
  filter: blur(10px);
  opacity: 0.9;
}

.work-hover-stage--holoboard::after {
  z-index: 0;
  background:
    radial-gradient(ellipse at 3% 48%, rgba(222, 247, 255, 0.42), rgba(195, 224, 235, 0.16) 28%, transparent 49%),
    radial-gradient(ellipse at 97% 52%, rgba(216, 247, 255, 0.4), rgba(183, 217, 229, 0.14) 27%, transparent 49%);
  filter: blur(16px);
  opacity: 0.82;
  animation: holoSideFogFloat 6.8s ease-in-out infinite;
}

.work-hover-stage--battle-forged {
  --stage-rgb: 255, 91, 32;
  --stage-accent-rgb: 255, 190, 96;
}

.work-hover-stage.is-leaving.work-hover-stage--battle-forged {
  opacity: 1;
  transition: opacity 0.42s ease;
}

.work-hover-stage--neuro-lab {
  --stage-rgb: 92, 238, 255;
  --stage-accent-rgb: 91, 255, 190;
}

.work-hover-stage.is-leaving.work-hover-stage--neuro-lab {
  opacity: 1;
  transition: opacity 0.46s ease;
}

.work-hover-stage--nyx-tactics {
  --stage-rgb: 117, 178, 255;
  --stage-accent-rgb: 196, 225, 255;
}

.work-hover-stage--original-slot-maker {
  --stage-rgb: 255, 207, 84;
  --stage-accent-rgb: 255, 76, 184;
}

.work-hover-stage--siritori-jibril {
  --stage-rgb: 114, 237, 255;
  --stage-accent-rgb: 255, 240, 169;
}

.work-hover-stage--siritori-stef {
  --stage-rgb: 255, 180, 210;
  --stage-accent-rgb: 255, 220, 112;
}

.work-hover-stage--ima-nanmonme {
  --stage-rgb: 255, 255, 255;
  --stage-accent-rgb: 255, 180, 173;
}

.work-hover-stage--ai-state-exporter,
.work-hover-stage--batch-renamer,
.work-hover-stage--python-runner {
  --stage-rgb: 148, 232, 255;
  --stage-accent-rgb: 210, 240, 255;
}

.work-hover-stage--collab-sync {
  --stage-rgb: 119, 225, 255;
  --stage-accent-rgb: 181, 255, 198;
}

.work-hover-stage--babel-breaker {
  --stage-rgb: 111, 205, 93;
  --stage-accent-rgb: 132, 244, 255;
}

.work-hover-stage--lyra-code2music {
  --stage-rgb: 178, 142, 255;
  --stage-accent-rgb: 118, 236, 255;
}

.work-hover-stage--EasyKnob {
  --stage-rgb: 118, 236, 255;
  --stage-accent-rgb: 255, 180, 173;
  --easyknob-ring-right: clamp(34px, 5vw, 94px);
  --easyknob-knob-right: clamp(72px, 8vw, 138px);
  --easyknob-stage-top: clamp(200px, 43vh, 430px);
}

.work-hover-stage .fx-board,
.work-hover-stage .fx-grid,
.work-hover-stage .fx-choice-grid,
.work-hover-stage .fx-neural-line,
.work-hover-stage .fx-heartbeat,
.work-hover-stage .fx-steam,
.work-hover-stage .fx-forge-glow,
.work-hover-stage .fx-chain,
.work-hover-stage .fx-heat-haze,
.work-hover-stage .fx-lyra-code,
.work-hover-stage .fx-lyra-wave,
.work-hover-stage .fx-lyra-pointer-note,
.work-hover-stage .fx-lyra-note,
.work-hover-stage .fx-babel-wall,
.work-hover-stage .fx-babel-crack,
.work-hover-stage .fx-babel-translation,
.work-hover-stage .fx-babel-block,
.work-hover-stage .fx-collab-lane,
.work-hover-stage .fx-collab-file,
.work-hover-stage .fx-collab-cursor,
.work-hover-stage .fx-collab-warning,
.work-hover-stage .fx-collab-status,
.work-hover-stage .fx-collab-sync {
  position: absolute;
  pointer-events: none;
}

.work-hover-stage .fx-board,
.work-hover-stage .fx-grid,
.work-hover-stage .fx-choice-grid {
  inset: 8vh 4vw;
  opacity: 0.26;
  background-size: clamp(38px, 5.2vw, 76px) clamp(38px, 5.2vw, 76px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 32%, transparent 44% 56%, #000 68% 100%);
  mask-image: linear-gradient(90deg, #000 0 32%, transparent 44% 56%, #000 68% 100%);
}

.work-hover-stage .fx-fog {
  inset: -12%;
  opacity: 0.84;
  background:
    radial-gradient(circle at var(--hover-card-center-x, 50vw) var(--hover-card-center-y, 50vh), transparent 0 150px, rgba(225, 244, 255, 0.17) 230px, rgba(225, 244, 255, 0.42) 100%),
    repeating-linear-gradient(110deg, rgba(255, 255, 255, 0.13) 0 22px, rgba(196, 221, 232, 0.24) 22px 44px, transparent 44px 72px);
  filter: blur(12px);
  animation: stageFogDrift 4.6s ease-in-out infinite;
}

.work-hover-stage--holoboard .fx-fog {
  inset: -9vh -5vw;
  z-index: 1;
  opacity: 0.72;
  background:
    repeating-linear-gradient(104deg, rgba(244, 252, 255, 0.15) 0 18px, rgba(191, 222, 234, 0.2) 18px 44px, transparent 44px 78px),
    linear-gradient(90deg, rgba(221, 245, 251, 0.48), rgba(221, 245, 251, 0.08) 25%, transparent 39%, transparent 61%, rgba(207, 237, 247, 0.08) 75%, rgba(207, 237, 247, 0.48));
  filter: blur(15px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 29%, transparent 41% 59%, #000 71% 100%);
  mask-image: linear-gradient(90deg, #000 0 29%, transparent 41% 59%, #000 71% 100%);
  animation: holoSideFogFlow 8.4s ease-in-out infinite;
}

.work-hover-stage .fx-holo-side-fog {
  top: -10vh;
  bottom: -10vh;
  z-index: 1;
  width: min(38vw, 460px);
  background:
    radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, 0.34), transparent 36%),
    radial-gradient(ellipse at 50% 72%, rgba(156, 219, 238, 0.26), transparent 42%),
    repeating-linear-gradient(96deg, rgba(235, 250, 255, 0.22) 0 24px, rgba(181, 211, 222, 0.16) 24px 54px, transparent 54px 92px);
  filter: blur(18px);
  opacity: 0.58;
  mix-blend-mode: screen;
  animation: holoSideFogFloat 7.2s ease-in-out infinite;
}

.work-hover-stage .fx-holo-side-fog--left {
  left: -8vw;
}

.work-hover-stage .fx-holo-side-fog--right {
  right: -8vw;
  animation-delay: -2.6s;
}

.work-hover-stage .fx-holo-trails {
  inset: 0;
  z-index: 2;
}

.work-hover-stage .fx-holo-trail {
  position: absolute;
  width: clamp(112px, 13vw, 188px);
  height: clamp(112px, 13vw, 188px);
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(4, 20, 28, 0.02) 0 28%, rgba(191, 248, 255, 0.26) 50%, rgba(234, 252, 255, 0.12) 70%, transparent 100%);
  box-shadow:
    0 0 26px rgba(151, 241, 255, 0.18),
    inset 0 0 24px rgba(246, 253, 255, 0.1);
  filter: blur(2px);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(0.72);
  animation: holoFogTrailReturn 1.45s ease-out forwards;
}

.work-hover-stage .fx-vision {
  left: calc(var(--hover-card-center-x, 50vw) - 150px);
  top: calc(var(--hover-card-center-y, 50vh) - 150px);
  width: 300px;
  height: 300px;
  border-radius: 999px;
  border: 1px solid rgba(139, 239, 255, 0.34);
  background: radial-gradient(circle, rgba(139, 239, 255, 0.18), transparent 68%);
  box-shadow: 0 0 48px rgba(91, 215, 255, 0.18);
  animation: stageVisionPulse 2.3s ease-in-out infinite;
}

.work-hover-stage .fx-scout-squares {
  inset: 0;
}

.work-hover-stage .fx-scout-squares span {
  position: absolute;
  width: clamp(28px, 4vw, 58px);
  height: clamp(28px, 4vw, 58px);
  border: 1px solid rgba(116, 232, 255, 0.38);
  background: rgba(116, 232, 255, 0.12);
  box-shadow: 0 0 20px rgba(116, 232, 255, 0.18);
  animation: stageSquareSpread 2.6s ease-in-out infinite;
}

.work-hover-stage .fx-scout-squares span:nth-child(1) {
  left: 8vw;
  top: 24vh;
}

.work-hover-stage .fx-scout-squares span:nth-child(2) {
  right: 9vw;
  top: 30vh;
  animation-delay: 0.18s;
}

.work-hover-stage .fx-scout-squares span:nth-child(3) {
  left: 14vw;
  bottom: 22vh;
  animation-delay: 0.36s;
}

.work-hover-stage .fx-scout-squares span:nth-child(4) {
  right: 17vw;
  bottom: 18vh;
  animation-delay: 0.54s;
}

.work-hover-stage .fx-enemy-shadow {
  right: clamp(32px, 8vw, 120px);
  top: clamp(120px, 22vh, 240px);
  width: clamp(44px, 6vw, 76px);
  height: clamp(60px, 8vw, 104px);
  border-radius: 50% 50% 18% 18%;
  background: rgba(0, 0, 0, 0.42);
  box-shadow: 0 0 36px rgba(255, 255, 255, 0.18);
  opacity: 0;
  animation: stageEnemyBlink 3.1s ease-in-out infinite;
}

.work-hover-stage--battle-forged::before {
  z-index: 0;
  background:
    radial-gradient(ellipse at 50% 108%, rgba(255, 66, 22, 0.5), rgba(255, 127, 41, 0.18) 28%, transparent 58%),
    linear-gradient(90deg, rgba(255, 104, 38, 0.1), transparent 28%, transparent 72%, rgba(255, 185, 90, 0.1));
  filter: blur(4px);
  opacity: 0.95;
}

.work-hover-stage--battle-forged::after {
  z-index: 0;
  background:
    radial-gradient(ellipse at 0% 62%, rgba(255, 227, 188, 0.22), rgba(165, 92, 61, 0.11) 24%, transparent 45%),
    radial-gradient(ellipse at 100% 56%, rgba(255, 198, 142, 0.2), rgba(141, 83, 61, 0.1) 25%, transparent 45%);
  filter: blur(15px);
  opacity: 0.5;
  animation: stageForgeSideHeat 6.2s ease-in-out infinite;
}

.work-hover-stage--battle-forged .fx-forge-glow {
  left: -14vw;
  right: -14vw;
  bottom: -24vh;
  height: 58vh;
  opacity: 0.74;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(255, 54, 18, 0.98), rgba(255, 117, 38, 0.58) 24%, rgba(255, 174, 78, 0.25) 44%, transparent 74%);
  filter: blur(22px);
  animation:
    stageForgeHeatBuild 5.8s ease-out forwards,
    stageForgeHeatPulse 2.8s ease-in-out 5.8s infinite;
}

.work-hover-stage.is-leaving.work-hover-stage--battle-forged .fx-forge-glow {
  animation: stageForgeCool 0.42s ease-in forwards;
}

.work-hover-stage.is-leaving.work-hover-stage--battle-forged .fx-steam,
.work-hover-stage.is-leaving.work-hover-stage--battle-forged .fx-heat-haze,
.work-hover-stage.is-leaving.work-hover-stage--battle-forged .fx-shock,
.work-hover-stage.is-leaving.work-hover-stage--battle-forged .fx-spark {
  opacity: 0;
  transition: opacity 0.24s ease;
}

.work-hover-stage--battle-forged .fx-steam {
  inset: 3vh 0 auto 0;
  height: 82vh;
  opacity: 0.46;
  background:
    radial-gradient(ellipse at 7% 58%, rgba(255, 239, 219, 0.28), rgba(218, 173, 132, 0.1) 25%, transparent 47%),
    radial-gradient(ellipse at 93% 44%, rgba(255, 232, 202, 0.25), rgba(191, 145, 108, 0.09) 25%, transparent 47%),
    repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.08) 0 22px, transparent 22px 60px);
  filter: blur(18px);
  -webkit-mask-image: linear-gradient(90deg, #000 0 30%, transparent 42% 58%, #000 70% 100%);
  mask-image: linear-gradient(90deg, #000 0 30%, transparent 42% 58%, #000 70% 100%);
  animation: stageForgeSteam 7.2s ease-in-out infinite;
}

.work-hover-stage--battle-forged .fx-heat-haze {
  left: 0;
  right: 0;
  bottom: -5vh;
  height: 52vh;
  opacity: 0.3;
  background:
    repeating-linear-gradient(90deg, transparent 0 18px, rgba(255, 210, 154, 0.18) 18px 21px, transparent 21px 42px),
    linear-gradient(0deg, rgba(255, 104, 38, 0.12), transparent 76%);
  filter: blur(9px);
  animation: stageHeatRise 1.85s ease-in-out infinite;
}

.work-hover-stage--battle-forged .fx-shock {
  left: var(--hover-card-center-x, 50vw);
  top: var(--hover-card-center-y, 50vh);
  width: clamp(140px, 24vw, 340px);
  height: clamp(140px, 24vw, 340px);
  border-color: rgba(255, 207, 137, 0.34);
  background: radial-gradient(circle, rgba(255, 180, 90, 0.08), transparent 67%);
  transform: translate(-50%, -50%) scale(0.3);
  animation: forgeStageShock 0.9s cubic-bezier(0.12, 0.68, 0.22, 1) 1 both;
}

.work-hover-stage--battle-forged .fx-spark {
  width: 8px;
  height: 4px;
  border-radius: 0;
  background: linear-gradient(90deg, #fff1b8, #ff8b2e 62%, #5a2418);
  box-shadow:
    0 0 10px rgba(255, 137, 44, 0.8),
    0 0 22px rgba(255, 70, 20, 0.32);
  clip-path: polygon(0 42%, 66% 0, 100% 54%, 28% 100%);
  animation: stageMetalSpark 1.45s ease-out infinite;
}

.work-hover-stage--battle-forged .fx-spark:nth-of-type(1) {
  left: 5vw;
  bottom: 16vh;
}

.work-hover-stage--battle-forged .fx-spark:nth-of-type(2) {
  left: 14vw;
  bottom: 34vh;
  animation-delay: 0.24s;
}

.work-hover-stage--battle-forged .fx-spark:nth-of-type(3) {
  right: 8vw;
  bottom: 22vh;
  animation-delay: 0.42s;
}

.work-hover-stage--battle-forged .fx-spark--heart {
  right: 12vw;
  bottom: 36vh;
  width: 14px;
  height: 14px;
  background: linear-gradient(135deg, #fff0bc, #ff6d3a 66%, #e02f1c);
  border-radius: 0;
  clip-path: polygon(50% 92%, 7% 47%, 7% 18%, 32% 6%, 50% 24%, 68% 6%, 93% 18%, 93% 47%);
  opacity: 0;
  animation: none;
}

.work-hover-stage--battle-forged.has-forge-heart .fx-spark--heart {
  animation: stageHeartSpark 1.75s ease-out 0.28s 1 both;
}

.work-hover-stage--neuro-lab::before {
  z-index: 0;
  background:
    radial-gradient(circle at var(--card-pointer-x, 50%) var(--card-pointer-y, 50%), rgba(91, 255, 190, 0.13), transparent 18%),
    linear-gradient(90deg, rgba(92, 238, 255, 0.09), transparent 28%, transparent 72%, rgba(91, 255, 190, 0.08));
  filter: none;
  opacity: 0.82;
}

.work-hover-stage--neuro-lab::after {
  z-index: 0;
  background:
    radial-gradient(ellipse at 0% 44%, rgba(92, 238, 255, 0.16), transparent 40%),
    radial-gradient(ellipse at 100% 56%, rgba(91, 255, 190, 0.14), transparent 40%);
  filter: blur(10px);
  opacity: 0.58;
}

.work-hover-stage--neuro-lab .fx-neuro-web {
  position: absolute;
  top: clamp(92px, 16vh, 170px);
  width: min(36vw, 430px);
  height: clamp(330px, 56vh, 560px);
  opacity: 0.88;
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(92, 238, 255, 0.12));
}

.work-hover-stage--neuro-lab .fx-neuro-web--left {
  left: clamp(12px, 3vw, 52px);
}

.work-hover-stage--neuro-lab .fx-neuro-web--right {
  right: clamp(12px, 3vw, 52px);
}

.work-hover-stage--neuro-lab .fx-neuro-map {
  position: absolute;
  inset: 0;
  overflow: visible;
  shape-rendering: geometricPrecision;
}

.work-hover-stage--neuro-lab .fx-neuro-web--right .fx-neuro-map {
  transform: scaleX(-1);
  transform-origin: center;
}

.work-hover-stage--neuro-lab .fx-neuro-edge {
  stroke: rgba(112, 240, 255, 0.56);
  stroke-width: 0.45;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(92, 238, 255, 0.62));
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: neuroEdgeDraw 1.35s ease-out both, neuroEdgePulse 2.4s ease-in-out 1.35s infinite;
}

.work-hover-stage--neuro-lab .fx-neuro-dot {
  fill: rgba(205, 255, 255, 0.96);
  stroke: rgba(92, 238, 255, 0.7);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(92, 238, 255, 0.95));
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: neuroDotAppear 0.72s ease-out both, neuroDotPulse 2.15s ease-in-out 0.72s infinite;
}

.work-hover-stage--neuro-lab .fx-neuro-edge:nth-child(2) { animation-delay: 0.08s, 1.43s; }
.work-hover-stage--neuro-lab .fx-neuro-edge:nth-child(3) { animation-delay: 0.14s, 1.49s; }
.work-hover-stage--neuro-lab .fx-neuro-edge:nth-child(4) { animation-delay: 0.2s, 1.55s; }
.work-hover-stage--neuro-lab .fx-neuro-edge:nth-child(5) { animation-delay: 0.26s, 1.61s; }
.work-hover-stage--neuro-lab .fx-neuro-edge:nth-child(6) { animation-delay: 0.32s, 1.67s; }
.work-hover-stage--neuro-lab .fx-neuro-edge:nth-child(7) { animation-delay: 0.38s, 1.73s; }
.work-hover-stage--neuro-lab .fx-neuro-edge:nth-child(8) { animation-delay: 0.44s, 1.79s; }
.work-hover-stage--neuro-lab .fx-neuro-edge:nth-child(9) { animation-delay: 0.5s, 1.85s; }
.work-hover-stage--neuro-lab .fx-neuro-edge:nth-child(10) { animation-delay: 0.56s, 1.91s; }
.work-hover-stage--neuro-lab .fx-neuro-edge:nth-child(11) { animation-delay: 0.62s, 1.97s; }
.work-hover-stage--neuro-lab .fx-neuro-edge:nth-child(12) { animation-delay: 0.68s, 2.03s; }
.work-hover-stage--neuro-lab .fx-neuro-edge:nth-child(13) { animation-delay: 0.74s, 2.09s; }
.work-hover-stage--neuro-lab .fx-neuro-edge:nth-child(14) { animation-delay: 0.8s, 2.15s; }
.work-hover-stage--neuro-lab .fx-neuro-edge:nth-child(15) { animation-delay: 0.86s, 2.21s; }
.work-hover-stage--neuro-lab .fx-neuro-edge:nth-child(16) { animation-delay: 0.92s, 2.27s; }

.work-hover-stage--neuro-lab .fx-neuro-dot:nth-child(2) { animation-delay: 0.06s, 0.78s; }
.work-hover-stage--neuro-lab .fx-neuro-dot:nth-child(3) { animation-delay: 0.12s, 0.84s; }
.work-hover-stage--neuro-lab .fx-neuro-dot:nth-child(4) { animation-delay: 0.18s, 0.9s; }
.work-hover-stage--neuro-lab .fx-neuro-dot:nth-child(5) { animation-delay: 0.24s, 0.96s; }
.work-hover-stage--neuro-lab .fx-neuro-dot:nth-child(6) { animation-delay: 0.3s, 1.02s; }
.work-hover-stage--neuro-lab .fx-neuro-dot:nth-child(7) { animation-delay: 0.36s, 1.08s; }
.work-hover-stage--neuro-lab .fx-neuro-dot:nth-child(8) { animation-delay: 0.42s, 1.14s; }
.work-hover-stage--neuro-lab .fx-neuro-dot:nth-child(9) { animation-delay: 0.48s, 1.2s; }
.work-hover-stage--neuro-lab .fx-neuro-dot:nth-child(10) { animation-delay: 0.54s, 1.26s; }

.work-hover-stage.is-leaving.work-hover-stage--neuro-lab .fx-neuro-dot {
  animation: neuroDotDisappear 0.42s ease-in forwards;
}

.work-hover-stage.is-leaving.work-hover-stage--neuro-lab .fx-neuro-edge {
  animation: neuroEdgeErase 0.46s ease-in forwards;
}

.work-hover-stage--neuro-lab .fx-neuro-attractor {
  position: absolute;
  left: var(--card-pointer-x, 50%);
  top: var(--card-pointer-y, 50%);
  z-index: 3;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: rgba(205, 255, 255, 0.95);
  box-shadow:
    0 0 18px rgba(92, 238, 255, 0.82),
    0 0 44px rgba(91, 255, 190, 0.24);
  transform: translate(-50%, -50%);
  animation: neuroAttractorPulse 1.6s ease-in-out infinite;
}

.work-hover-stage--neuro-lab .fx-neuro-attractor::before,
.work-hover-stage--neuro-lab .fx-neuro-attractor::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(80px, 11vw, 140px);
  height: 1px;
  background: linear-gradient(90deg, rgba(92, 238, 255, 0), rgba(92, 238, 255, 0.38));
  transform-origin: 0 50%;
}

.work-hover-stage--neuro-lab .fx-neuro-attractor::before {
  transform: rotate(-22deg);
}

.work-hover-stage--neuro-lab .fx-neuro-attractor::after {
  transform: rotate(36deg);
}

.work-hover-stage--neuro-lab .fx-heartbeat {
  left: 7vw;
  right: 7vw;
  top: auto;
  bottom: clamp(52px, 10vh, 110px);
  width: auto;
  height: 42px;
  overflow: hidden;
  opacity: 0.78;
  background: none;
  clip-path: none;
  animation: none;
}

.work-hover-stage--neuro-lab .fx-heartbeat::before,
.work-hover-stage--neuro-lab .fx-heartbeat::after {
  content: "";
  position: absolute;
  left: -18%;
  top: 0;
  width: 136%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(92, 238, 255, 0.86), rgba(91, 255, 190, 0.55), transparent);
  clip-path: polygon(0 53%, 10% 53%, 13% 32%, 16% 72%, 19% 53%, 31% 53%, 34% 18%, 38% 85%, 42% 53%, 58% 53%, 61% 40%, 64% 66%, 67% 53%, 100% 53%);
}

.work-hover-stage--neuro-lab .fx-heartbeat::before {
  animation: neuroHeartbeatFlow 1.45s linear infinite;
}

.work-hover-stage--neuro-lab .fx-heartbeat::after {
  opacity: 0;
  animation: neuroHeartbeatUnstable 0.68s steps(3, end) 3.2s infinite;
}

.work-hover-stage .fx-log,
.work-hover-stage .fx-hierarchy,
.work-hover-stage .fx-terminal,
.work-hover-stage .fx-rename-list,
.work-hover-stage .fx-translate,
.work-hover-stage .fx-code {
  left: auto;
  right: clamp(18px, 6vw, 88px);
  top: clamp(94px, 17vh, 170px);
  width: min(430px, 32vw);
  opacity: 0.9;
  text-shadow: 0 0 14px currentColor;
}

.work-hover-stage .fx-log span:last-child {
  color: rgba(255, 96, 96, 0.88);
}

.work-hover-stage--nyx-tactics::before {
  background:
    linear-gradient(90deg, rgba(91, 135, 188, 0.07), transparent 25%, transparent 75%, rgba(172, 214, 255, 0.07)),
    radial-gradient(circle at 50% 50%, rgba(11, 18, 28, 0.22), transparent 48%);
  opacity: 0.62;
}

.work-hover-stage--nyx-tactics::after {
  background: none;
}

.work-hover-stage--nyx-tactics .fx-nyx-board {
  --nyx-cell: clamp(34px, 4.3vw, 56px);
  position: absolute;
  top: clamp(120px, 22vh, 220px);
  width: calc(var(--nyx-cell) * 4);
  height: calc(var(--nyx-cell) * 5);
  border: 1px solid rgba(173, 217, 255, 0.18);
  background:
    linear-gradient(rgba(173, 217, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(173, 217, 255, 0.16) 1px, transparent 1px);
  background-size: var(--nyx-cell) var(--nyx-cell);
  box-shadow:
    0 0 28px rgba(117, 178, 255, 0.08),
    inset 0 0 18px rgba(15, 26, 38, 0.42);
  opacity: 0.5;
  animation: nyxBoardBreathe 4.8s ease-in-out infinite;
}

.work-hover-stage--nyx-tactics .fx-nyx-board--left {
  left: clamp(18px, 5vw, 92px);
}

.work-hover-stage--nyx-tactics .fx-nyx-board--right {
  right: clamp(18px, 5vw, 92px);
}

.work-hover-stage--nyx-tactics .fx-nyx-piece {
  position: absolute;
  left: calc(var(--nyx-cell) * 1.5);
  top: calc(var(--nyx-cell) * 2.5);
  width: calc(var(--nyx-cell) * 0.44);
  height: calc(var(--nyx-cell) * 0.44);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  animation: nyxPieceStep 6.4s steps(1, end) infinite;
}

.work-hover-stage--nyx-tactics .fx-nyx-piece--black {
  background: #05070b;
  border: 1px solid rgba(163, 208, 255, 0.22);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.85),
    0 0 18px rgba(114, 175, 255, 0.18);
}

.work-hover-stage--nyx-tactics .fx-nyx-piece--white {
  background: rgba(238, 248, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow:
    0 0 14px rgba(206, 232, 255, 0.28),
    0 0 28px rgba(117, 178, 255, 0.12);
  animation-name: nyxPieceStepAlt;
}

.work-hover-stage--original-slot-maker::before {
  background:
    radial-gradient(circle at 9% 52%, rgba(255, 207, 84, 0.17), transparent 22%),
    radial-gradient(circle at 91% 48%, rgba(255, 76, 184, 0.14), transparent 23%),
    linear-gradient(90deg, rgba(255, 207, 84, 0.09), transparent 30%, transparent 70%, rgba(255, 76, 184, 0.09));
  opacity: 0.82;
}

.work-hover-stage.is-leaving.work-hover-stage--original-slot-maker {
  opacity: 1;
  transition: opacity 0.98s ease;
}

.work-hover-stage--original-slot-maker .fx-slot-reels {
  position: absolute;
  top: clamp(84px, 13vh, 130px);
  bottom: clamp(78px, 12vh, 128px);
  width: min(31vw, 330px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 1vw, 14px);
  opacity: 0.88;
  filter: drop-shadow(0 0 24px rgba(255, 207, 84, 0.14));
}

.work-hover-stage--original-slot-maker .fx-slot-reels--left {
  left: clamp(12px, 4vw, 74px);
}

.work-hover-stage--original-slot-maker .fx-slot-reels--right {
  right: clamp(12px, 4vw, 74px);
}

.work-hover-stage--original-slot-maker .fx-slot-column {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255, 232, 138, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 207, 84, 0.08), rgba(255, 76, 184, 0.05)),
    rgba(10, 8, 16, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 28px 42px rgba(255, 255, 255, 0.04),
    inset 0 -28px 36px rgba(0, 0, 0, 0.25),
    0 0 22px rgba(255, 207, 84, 0.08);
}

.work-hover-stage--original-slot-maker .fx-slot-column::before,
.work-hover-stage--original-slot-maker .fx-slot-column::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  height: 27%;
  pointer-events: none;
}

.work-hover-stage--original-slot-maker .fx-slot-column::before {
  top: 0;
  background: linear-gradient(180deg, rgba(6, 5, 10, 0.66), transparent);
}

.work-hover-stage--original-slot-maker .fx-slot-column::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(6, 5, 10, 0.7), transparent);
}

.work-hover-stage--original-slot-maker .fx-slot-strip {
  position: absolute;
  inset: -45% 0 auto;
  display: grid;
  gap: clamp(10px, 1.6vh, 18px);
  padding-block: clamp(10px, 2vh, 22px);
  animation: slotReelSpin 0.44s linear infinite;
}

.work-hover-stage--original-slot-maker .fx-slot-column:nth-child(2) .fx-slot-strip {
  animation-duration: 0.36s;
}

.work-hover-stage--original-slot-maker .fx-slot-column:nth-child(3) .fx-slot-strip {
  animation-duration: 0.3s;
}

.work-hover-stage--original-slot-maker .fx-slot-strip span,
.work-hover-stage--original-slot-maker .fx-slot-stop,
.work-hover-stage--original-slot-maker .fx-slot-final span {
  display: grid;
  place-items: center;
  color: rgba(255, 250, 207, 0.96);
  font-weight: 950;
  letter-spacing: 0.06em;
  text-shadow:
    0 0 12px rgba(255, 207, 84, 0.5),
    0 0 26px rgba(255, 76, 184, 0.16);
}

.work-hover-stage--original-slot-maker .fx-slot-strip span {
  min-height: clamp(44px, 7vh, 74px);
  font-size: clamp(20px, 3.3vw, 45px);
}

.work-hover-stage--original-slot-maker .fx-slot-stop {
  position: absolute;
  z-index: 4;
  left: 8px;
  right: 8px;
  top: 50%;
  height: clamp(52px, 8vh, 86px);
  border-radius: 6px;
  border: 1px solid rgba(255, 232, 138, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 232, 138, 0.16), rgba(255, 76, 184, 0.08)),
    rgba(24, 14, 27, 0.88);
  box-shadow:
    0 0 22px rgba(255, 207, 84, 0.18),
    inset 0 0 18px rgba(255, 232, 138, 0.08);
  font-size: clamp(20px, 3.1vw, 44px);
  opacity: 0;
  transform: translateY(-50%) scale(0.94);
  animation: slotStopReveal 2.35s steps(1, end) forwards;
}

.work-hover-stage--original-slot-maker .fx-slot-column:nth-child(2) .fx-slot-stop {
  animation-delay: 0.24s;
}

.work-hover-stage--original-slot-maker .fx-slot-column:nth-child(3) .fx-slot-stop {
  animation-delay: 0.48s;
}

.work-hover-stage--original-slot-maker.is-leaving .fx-slot-strip {
  animation-play-state: paused;
  opacity: 0.12;
}

.work-hover-stage--original-slot-maker.is-leaving .fx-slot-stop {
  animation: none;
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

.work-hover-stage--original-slot-maker .fx-slot-final {
  position: absolute;
  left: 50%;
  bottom: clamp(34px, 8vh, 78px);
  display: flex;
  gap: clamp(8px, 1.2vw, 16px);
  transform: translateX(-50%) translateY(12px);
  opacity: 0;
  animation: slotFinalReveal 2.35s ease forwards;
}

.work-hover-stage--original-slot-maker .fx-slot-final span {
  min-width: clamp(48px, 6vw, 84px);
  height: clamp(44px, 6vw, 72px);
  border-radius: 8px;
  border: 1px solid rgba(255, 232, 138, 0.3);
  background:
    linear-gradient(180deg, rgba(255, 232, 138, 0.15), rgba(255, 76, 184, 0.08)),
    rgba(13, 9, 20, 0.72);
  font-size: clamp(18px, 3vw, 36px);
  box-shadow: 0 0 24px rgba(255, 207, 84, 0.1);
}

.work-hover-stage--original-slot-maker.is-leaving .fx-slot-final {
  animation: none;
  opacity: 0.94;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.78s ease, transform 0.78s ease;
}

.work-hover-stage--original-slot-maker .fx-slot-win {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.work-hover-stage--original-slot-maker.is-slot-win .fx-slot-win {
  animation: slotWinFlash 1.24s ease-out 2.1s both;
}

.work-hover-stage--original-slot-maker .fx-slot-win::before,
.work-hover-stage--original-slot-maker .fx-slot-win::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(46vw, 520px);
  height: min(46vw, 520px);
  border-radius: 999px;
  transform: translate(-50%, -50%) scale(0.4);
  background:
    radial-gradient(circle, rgba(255, 252, 190, 0.6) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255, 76, 184, 0.48) 0 2px, transparent 3px);
  background-size: 42px 42px, 58px 58px;
  box-shadow: 0 0 80px rgba(255, 207, 84, 0.24);
}

.work-hover-stage--original-slot-maker .fx-slot-win span {
  position: absolute;
  left: 50%;
  top: 50%;
  color: rgba(255, 250, 207, 0.96);
  font-size: clamp(58px, 12vw, 150px);
  font-weight: 1000;
  letter-spacing: 0.12em;
  text-shadow:
    0 0 20px rgba(255, 207, 84, 0.72),
    0 0 58px rgba(255, 76, 184, 0.38);
  transform: translate(-50%, -50%) scale(0.86);
}

@media (max-width: 760px) {
  .work-hover-stage--original-slot-maker .fx-slot-reels {
    top: auto;
    bottom: clamp(64px, 12vh, 100px);
    width: min(42vw, 190px);
    height: min(30vh, 210px);
    opacity: 0.6;
  }

  .work-hover-stage--original-slot-maker .fx-slot-reels--left {
    left: 10px;
  }

  .work-hover-stage--original-slot-maker .fx-slot-reels--right {
    right: 10px;
  }

  .work-hover-stage--original-slot-maker .fx-slot-final {
    bottom: clamp(20px, 5vh, 44px);
  }
}

.work-hover-stage .fx-word-matrix {
  left: clamp(18px, 5vw, 88px);
  top: clamp(86px, 16vh, 150px);
  grid-template-columns: repeat(2, minmax(96px, 142px));
}

.work-hover-stage--siritori-jibril::before {
  background:
    radial-gradient(circle at 12% 36%, rgba(255, 240, 169, 0.12), transparent 24%),
    radial-gradient(circle at 88% 62%, rgba(114, 237, 255, 0.13), transparent 26%),
    linear-gradient(90deg, rgba(114, 237, 255, 0.07), transparent 34%, transparent 66%, rgba(255, 240, 169, 0.07));
  opacity: 0.74;
}

.work-hover-stage--siritori-jibril::after {
  background:
    linear-gradient(90deg, rgba(114, 237, 255, 0.09), transparent 17%, transparent 83%, rgba(255, 240, 169, 0.09)),
    repeating-linear-gradient(90deg, transparent 0 7.6vw, rgba(114, 237, 255, 0.045) 7.6vw calc(7.6vw + 1px), transparent calc(7.6vw + 1px) 9vw);
  opacity: 0.58;
  animation: jibrilStageVeil 5.8s ease-in-out infinite;
}

.work-hover-stage--siritori-jibril .fx-jibril-rain {
  inset: -28vh 0 -20vh;
  overflow: hidden;
}

.work-hover-stage--siritori-jibril .fx-jibril-stream {
  position: absolute;
  top: -24vh;
  display: block;
  min-height: 64vh;
  color: rgba(213, 252, 255, 0.52);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(13px, 1.45vw, 22px);
  font-weight: 850;
  letter-spacing: 0.16em;
  line-height: 1.42;
  text-shadow:
    0 0 10px rgba(114, 237, 255, 0.34),
    0 0 18px rgba(255, 240, 169, 0.12);
  writing-mode: vertical-rl;
  text-orientation: upright;
  opacity: 0.38;
  animation: jibrilMatrixFall 7.4s linear infinite;
}

.work-hover-stage--siritori-jibril .fx-jibril-stream b {
  display: block;
  font-weight: inherit;
}

.work-hover-stage--siritori-jibril .fx-jibril-stream i {
  position: absolute;
  left: 50%;
  top: 42%;
  display: grid;
  place-items: center;
  width: clamp(24px, 3vw, 38px);
  height: clamp(24px, 3vw, 38px);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 240, 169, 0.16), transparent 66%);
  font-size: clamp(18px, 2.4vw, 30px);
  font-style: normal;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.64);
  filter: drop-shadow(0 0 14px rgba(255, 240, 169, 0.35));
  animation: jibrilMatrixEmoji 3.8s ease-in-out infinite;
}

.work-hover-stage--siritori-jibril .fx-jibril-stream:nth-child(1) { left: 3vw; animation-duration: 7.2s; }
.work-hover-stage--siritori-jibril .fx-jibril-stream:nth-child(2) { left: 11vw; animation-duration: 8.3s; animation-delay: -1.5s; }
.work-hover-stage--siritori-jibril .fx-jibril-stream:nth-child(3) { left: 19vw; animation-duration: 6.8s; animation-delay: -0.8s; }
.work-hover-stage--siritori-jibril .fx-jibril-stream:nth-child(4) { left: 28vw; animation-duration: 8.8s; animation-delay: -2.6s; }
.work-hover-stage--siritori-jibril .fx-jibril-stream:nth-child(5) { left: 37vw; animation-duration: 7.7s; animation-delay: -3.2s; }
.work-hover-stage--siritori-jibril .fx-jibril-stream:nth-child(6) { left: 46vw; animation-duration: 9s; animation-delay: -1.1s; }
.work-hover-stage--siritori-jibril .fx-jibril-stream:nth-child(7) { left: 55vw; animation-duration: 7.1s; animation-delay: -3.9s; }
.work-hover-stage--siritori-jibril .fx-jibril-stream:nth-child(8) { left: 64vw; animation-duration: 8.6s; animation-delay: -2s; }
.work-hover-stage--siritori-jibril .fx-jibril-stream:nth-child(9) { left: 73vw; animation-duration: 7.9s; animation-delay: -4.3s; }
.work-hover-stage--siritori-jibril .fx-jibril-stream:nth-child(10) { left: 82vw; animation-duration: 9.2s; animation-delay: -0.4s; }
.work-hover-stage--siritori-jibril .fx-jibril-stream:nth-child(11) { left: 90vw; animation-duration: 7.4s; animation-delay: -2.9s; }
.work-hover-stage--siritori-jibril .fx-jibril-stream:nth-child(12) { left: 96vw; animation-duration: 8.1s; animation-delay: -1.8s; }

.work-hover-stage--siritori-jibril .fx-jibril-stream:nth-child(2n) i {
  animation-delay: 0.55s;
}

.work-hover-stage--siritori-jibril .fx-jibril-stream:nth-child(3n) i {
  animation-delay: 1.1s;
}

.work-hover-stage--siritori-jibril .fx-jibril-summons {
  inset: 0;
}

.work-hover-stage--siritori-jibril .fx-jibril-summon {
  position: absolute;
  display: grid;
  place-items: center;
  width: clamp(72px, 8vw, 110px);
  height: clamp(72px, 8vw, 110px);
  border-radius: 999px;
  border: 1px solid rgba(230, 252, 255, 0.2);
  background:
    radial-gradient(circle, rgba(255, 240, 169, 0.13), transparent 60%),
    conic-gradient(from 0deg, transparent 0 18%, rgba(114, 237, 255, 0.2) 18% 19%, transparent 19% 52%, rgba(255, 240, 169, 0.24) 52% 53%, transparent 53% 100%);
  box-shadow:
    0 0 24px rgba(114, 237, 255, 0.12),
    inset 0 0 18px rgba(255, 240, 169, 0.06);
  opacity: 0.82;
  transform: scale(0.96);
  animation: jibrilSummonRing 3.4s ease-in-out infinite;
}

.work-hover-stage--siritori-jibril .fx-jibril-summon b,
.work-hover-stage--siritori-jibril .fx-jibril-summon i {
  grid-area: 1 / 1;
  font-style: normal;
}

.work-hover-stage--siritori-jibril .fx-jibril-summon b {
  color: rgba(237, 253, 255, 0.92);
  font-size: clamp(14px, 1.35vw, 19px);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-shadow: 0 0 16px rgba(114, 237, 255, 0.4);
  animation: jibrilWordSelect 3.4s ease-in-out infinite;
}

.work-hover-stage--siritori-jibril .fx-jibril-summon i {
  font-size: clamp(26px, 3.5vw, 46px);
  opacity: 0;
  transform: scale(0.48);
  filter: drop-shadow(0 0 16px rgba(255, 240, 169, 0.4));
  animation: jibrilSummonEmoji 3.4s ease-in-out infinite;
}

.work-hover-stage--siritori-jibril .fx-jibril-summon:nth-child(1) {
  left: clamp(34px, 8vw, 128px);
  top: clamp(110px, 22vh, 230px);
}

.work-hover-stage--siritori-jibril .fx-jibril-summon:nth-child(2) {
  right: clamp(42px, 10vw, 158px);
  top: clamp(118px, 26vh, 260px);
  animation-delay: 0.46s;
}

.work-hover-stage--siritori-jibril .fx-jibril-summon:nth-child(3) {
  left: clamp(58px, 13vw, 210px);
  bottom: clamp(82px, 16vh, 150px);
  animation-delay: 0.92s;
}

.work-hover-stage--siritori-jibril .fx-jibril-summon:nth-child(4) {
  right: clamp(54px, 12vw, 198px);
  bottom: clamp(90px, 18vh, 170px);
  animation-delay: 1.38s;
}

.work-hover-stage--siritori-jibril .fx-jibril-summon:nth-child(2) b,
.work-hover-stage--siritori-jibril .fx-jibril-summon:nth-child(2) i {
  animation-delay: 0.46s;
}

.work-hover-stage--siritori-jibril .fx-jibril-summon:nth-child(3) b,
.work-hover-stage--siritori-jibril .fx-jibril-summon:nth-child(3) i {
  animation-delay: 0.92s;
}

.work-hover-stage--siritori-jibril .fx-jibril-summon:nth-child(4) b,
.work-hover-stage--siritori-jibril .fx-jibril-summon:nth-child(4) i {
  animation-delay: 1.38s;
}

.work-hover-stage .fx-magic-circle {
  width: clamp(160px, 18vw, 270px);
  height: clamp(160px, 18vw, 270px);
  border: 1px solid rgba(221, 246, 255, 0.2);
  border-radius: 999px;
  background:
    radial-gradient(circle, transparent 0 36%, rgba(216, 247, 255, 0.1) 37% 38%, transparent 39% 48%, rgba(255, 240, 169, 0.12) 49% 50%, transparent 51%),
    conic-gradient(from 0deg, transparent 0 10%, rgba(246, 255, 213, 0.2) 10% 11%, transparent 11% 28%, rgba(125, 232, 255, 0.22) 28% 29%, transparent 29% 48%, rgba(255, 240, 169, 0.16) 48% 49%, transparent 49% 100%);
  opacity: 0.44;
  filter: drop-shadow(0 0 20px rgba(114, 237, 255, 0.14));
  animation: jibrilCircleTurn 11s linear infinite, jibrilCirclePulse 3.8s ease-in-out infinite;
}

.work-hover-stage--siritori-jibril .fx-magic-circle--left {
  left: clamp(-82px, -4vw, -28px);
  top: clamp(110px, 24vh, 230px);
}

.work-hover-stage--siritori-jibril .fx-magic-circle--right {
  right: clamp(-82px, -4vw, -28px);
  bottom: clamp(88px, 18vh, 170px);
  animation-direction: reverse, normal;
}

.work-hover-stage--siritori-stef::before {
  background:
    radial-gradient(circle at 11% 34%, rgba(255, 180, 210, 0.14), transparent 23%),
    radial-gradient(circle at 89% 60%, rgba(132, 226, 255, 0.12), transparent 25%),
    linear-gradient(90deg, rgba(255, 180, 210, 0.08), transparent 32%, transparent 68%, rgba(132, 226, 255, 0.08));
  opacity: 0.78;
}

.work-hover-stage--siritori-stef::after {
  background:
    linear-gradient(90deg, rgba(255, 180, 210, 0.08), transparent 19%, transparent 81%, rgba(132, 226, 255, 0.08)),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05), transparent 44%);
  opacity: 0.52;
  animation: stefStageAir 4.6s ease-in-out infinite;
}

.work-hover-stage--siritori-stef .fx-stef-chain {
  top: clamp(102px, 18vh, 190px);
  width: min(32vw, 360px);
  height: min(58vh, 440px);
  opacity: 0.9;
  animation: stefChainFloat 4.8s ease-in-out infinite;
}

.work-hover-stage--siritori-stef .fx-stef-chain--left {
  left: clamp(16px, 5vw, 92px);
}

.work-hover-stage--siritori-stef .fx-stef-chain--right {
  right: clamp(16px, 5vw, 92px);
  animation-delay: 0.55s;
}

.work-hover-stage--siritori-stef .fx-stef-node {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: clamp(62px, 7vw, 92px);
  min-height: clamp(42px, 4.8vw, 60px);
  padding: 8px 12px;
  border: 1px solid rgba(255, 224, 238, 0.28);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 235, 246, 0.12), rgba(132, 226, 255, 0.06)),
    rgba(16, 12, 30, 0.52);
  box-shadow:
    0 0 18px rgba(255, 180, 210, 0.12),
    inset 0 0 14px rgba(132, 226, 255, 0.08);
  opacity: 0;
  transform: scale(0.86);
  animation: stefNodePop 3.6s ease-in-out infinite;
}

.work-hover-stage--siritori-stef .fx-stef-node b,
.work-hover-stage--siritori-stef .fx-stef-node em {
  grid-area: 1 / 1;
  font-style: normal;
}

.work-hover-stage--siritori-stef .fx-stef-node b {
  color: rgba(255, 238, 247, 0.94);
  font-size: clamp(13px, 1.35vw, 18px);
  font-weight: 900;
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px rgba(255, 180, 210, 0.32);
}

.work-hover-stage--siritori-stef .fx-stef-node em {
  color: rgba(245, 252, 255, 0.96);
  font-size: clamp(22px, 2.8vw, 36px);
  opacity: 0;
  transform: scale(0.58);
  filter: drop-shadow(0 0 12px rgba(132, 226, 255, 0.34));
  animation: stefEmojiFlip 3.6s ease-in-out infinite;
}

.work-hover-stage--siritori-stef .fx-stef-node--1 {
  left: 4%;
  top: 8%;
}

.work-hover-stage--siritori-stef .fx-stef-node--2 {
  left: 48%;
  top: 26%;
  animation-delay: 0.28s;
}

.work-hover-stage--siritori-stef .fx-stef-node--3 {
  left: 18%;
  top: 55%;
  animation-delay: 0.56s;
}

.work-hover-stage--siritori-stef .fx-stef-node--4 {
  left: 56%;
  top: 78%;
  animation-delay: 0.84s;
}

.work-hover-stage--siritori-stef .fx-stef-node--2 em {
  animation-delay: 0.28s;
}

.work-hover-stage--siritori-stef .fx-stef-node--3 em {
  animation-delay: 0.56s;
}

.work-hover-stage--siritori-stef .fx-stef-node--4 em {
  animation-delay: 0.84s;
}

.work-hover-stage--siritori-stef .fx-stef-link {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 180, 210, 0), rgba(255, 220, 236, 0.62), rgba(132, 226, 255, 0));
  box-shadow: 0 0 14px rgba(132, 226, 255, 0.22);
  opacity: 0;
  transform-origin: left center;
  animation: stefLinkDraw 3.6s ease-in-out infinite;
}

.work-hover-stage--siritori-stef .fx-stef-link--1 {
  left: 22%;
  top: 22%;
  width: 42%;
  rotate: 19deg;
}

.work-hover-stage--siritori-stef .fx-stef-link--2 {
  left: 35%;
  top: 42%;
  width: 37%;
  rotate: 128deg;
  animation-delay: 0.32s;
}

.work-hover-stage--siritori-stef .fx-stef-link--3 {
  left: 34%;
  top: 68%;
  width: 45%;
  rotate: 19deg;
  animation-delay: 0.64s;
}

.work-hover-stage--siritori-stef .fx-stef-crown {
  width: clamp(108px, 13vw, 178px);
  height: clamp(76px, 9vw, 124px);
  opacity: 0.34;
  filter:
    drop-shadow(0 0 16px rgba(132, 226, 255, 0.28))
    drop-shadow(0 0 34px rgba(132, 226, 255, 0.12));
  animation: stefCrownHolo 3.8s ease-in-out infinite;
}

.work-hover-stage--siritori-stef .fx-stef-crown::before,
.work-hover-stage--siritori-stef .fx-stef-crown::after {
  content: "";
  position: absolute;
  inset: 0;
}

.work-hover-stage--siritori-stef .fx-stef-crown::before {
  clip-path: polygon(0 72%, 12% 36%, 31% 63%, 50% 18%, 69% 63%, 88% 36%, 100% 72%, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, rgba(184, 242, 255, 0.58), rgba(132, 226, 255, 0.12)),
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(255, 255, 255, 0.16) 8px 9px);
}

.work-hover-stage--siritori-stef .fx-stef-crown::after {
  inset: 11% 8%;
  border: 1px solid rgba(184, 242, 255, 0.24);
  border-radius: 999px;
  transform: translateY(32%);
}

.work-hover-stage--siritori-stef .fx-stef-crown--left {
  left: clamp(-48px, -2vw, -18px);
  bottom: clamp(70px, 14vh, 150px);
}

.work-hover-stage--siritori-stef .fx-stef-crown--right {
  right: clamp(-48px, -2vw, -18px);
  top: clamp(92px, 18vh, 170px);
  animation-delay: 0.72s;
}

.work-hover-stage--ima-nanmonme::before {
  background:
    radial-gradient(circle at 18% 32%, rgba(146, 255, 178, 0.12), transparent 24%),
    radial-gradient(circle at 82% 64%, rgba(226, 255, 236, 0.1), transparent 25%),
    linear-gradient(90deg, rgba(146, 255, 178, 0.08), transparent 31%, transparent 69%, rgba(146, 255, 178, 0.08));
  opacity: 0.74;
}

.work-hover-stage--ima-nanmonme::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(146, 255, 178, 0.08), transparent 36%),
    repeating-linear-gradient(90deg, transparent 0 88px, rgba(146, 255, 178, 0.035) 88px 89px, transparent 89px 176px);
  opacity: 0.48;
  animation: quizStagePulse 4.4s ease-in-out infinite;
}

.work-hover-stage--ima-nanmonme .fx-quiz-scatter {
  inset: 0;
}

.work-hover-stage--ima-nanmonme .fx-quiz-scatter span {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: clamp(34px, 4vw, 58px);
  min-height: clamp(34px, 4vw, 58px);
  border-radius: 999px;
  color: rgba(232, 255, 238, 0.88);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(22px, 4.2vw, 62px);
  font-weight: 950;
  text-shadow:
    0 0 16px rgba(146, 255, 178, 0.36),
    0 0 30px rgba(255, 255, 255, 0.12);
  opacity: 0;
  transform: translateY(8px) scale(0.86);
  animation: quizNumberScatter 3.8s ease-in-out infinite;
}

.work-hover-stage--ima-nanmonme .fx-quiz-scatter span:nth-child(1) { left: 8vw; top: 18vh; animation-delay: 0s; }
.work-hover-stage--ima-nanmonme .fx-quiz-scatter span:nth-child(2) { left: 22vw; top: 36vh; animation-delay: 0.35s; }
.work-hover-stage--ima-nanmonme .fx-quiz-scatter span:nth-child(3) { left: 12vw; top: 68vh; animation-delay: 0.72s; }
.work-hover-stage--ima-nanmonme .fx-quiz-scatter span:nth-child(4) { left: 37vw; top: 20vh; animation-delay: 1.1s; }
.work-hover-stage--ima-nanmonme .fx-quiz-scatter span:nth-child(5) { left: 48vw; top: 72vh; animation-delay: 1.48s; }
.work-hover-stage--ima-nanmonme .fx-quiz-scatter span:nth-child(6) { left: 58vw; top: 32vh; animation-delay: 1.82s; }
.work-hover-stage--ima-nanmonme .fx-quiz-scatter span:nth-child(7) { left: 70vw; top: 17vh; animation-delay: 2.18s; }
.work-hover-stage--ima-nanmonme .fx-quiz-scatter span:nth-child(8) { left: 84vw; top: 42vh; animation-delay: 2.52s; }
.work-hover-stage--ima-nanmonme .fx-quiz-scatter span:nth-child(9) { left: 75vw; top: 72vh; animation-delay: 2.88s; }
.work-hover-stage--ima-nanmonme .fx-quiz-scatter span:nth-child(10) { left: 30vw; top: 58vh; animation-delay: 3.22s; }
.work-hover-stage--ima-nanmonme .fx-quiz-scatter span:nth-child(11) { left: 91vw; top: 21vh; animation-delay: 0.9s; }
.work-hover-stage--ima-nanmonme .fx-quiz-scatter span:nth-child(12) { left: 4vw; top: 46vh; animation-delay: 2.05s; }

.work-hover-stage--ima-nanmonme .fx-time-meter {
  left: 50%;
  top: 50%;
  width: clamp(210px, 28vw, 390px);
  height: clamp(210px, 28vw, 390px);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(10, 20, 14, 0.2) 0 56%, transparent 57%),
    conic-gradient(from -90deg, rgba(146, 255, 178, 0.62) 0 var(--quiz-time, 72%), rgba(146, 255, 178, 0.08) var(--quiz-time, 72%) 100%);
  box-shadow:
    0 0 42px rgba(146, 255, 178, 0.12),
    inset 0 0 28px rgba(146, 255, 178, 0.08);
  opacity: 0.5;
  animation: quizTimeSweep 5.4s linear infinite;
}

.work-hover-stage--ima-nanmonme .fx-time-meter::before,
.work-hover-stage--ima-nanmonme .fx-time-meter::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}

.work-hover-stage--ima-nanmonme .fx-time-meter::before {
  inset: 12px;
  border: 1px solid rgba(210, 255, 223, 0.2);
  background:
    radial-gradient(circle, transparent 58%, rgba(210, 255, 223, 0.1) 59% 60%, transparent 61%),
    repeating-conic-gradient(from -90deg, rgba(226, 255, 236, 0.22) 0 2deg, transparent 2deg 14deg);
  mask-image: radial-gradient(circle, transparent 0 56%, #000 57% 62%, transparent 63%);
}

.work-hover-stage--ima-nanmonme .fx-time-meter::after {
  inset: 32%;
  border: 1px solid rgba(146, 255, 178, 0.2);
  box-shadow: 0 0 20px rgba(146, 255, 178, 0.12);
  animation: quizMeterCore 1.8s ease-in-out infinite;
}

.work-hover-stage--ima-nanmonme .fx-time-meter span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 50%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(226, 255, 236, 0.92), rgba(146, 255, 178, 0));
  transform-origin: 50% 0;
  transform: rotate(0deg);
  filter: drop-shadow(0 0 10px rgba(146, 255, 178, 0.5));
  animation: quizMeterNeedle 5.4s linear infinite;
}

.work-hover-stage--ai-state-exporter::before {
  background:
    radial-gradient(circle at 15% 46%, rgba(148, 232, 255, 0.1), transparent 24%),
    radial-gradient(circle at 85% 48%, rgba(210, 240, 255, 0.1), transparent 24%),
    linear-gradient(90deg, rgba(148, 232, 255, 0.08), transparent 34%, transparent 66%, rgba(210, 240, 255, 0.08));
  opacity: 0.66;
}

.work-hover-stage--ai-state-exporter::after {
  background:
    linear-gradient(90deg, rgba(148, 232, 255, 0.08), transparent 24%, transparent 76%, rgba(210, 240, 255, 0.08)),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(148, 232, 255, 0.035) 28px 29px, transparent 29px 58px);
  opacity: 0.46;
  animation: aiStageUiBreathe 4.2s ease-in-out infinite;
}

.work-hover-stage--ai-state-exporter .fx-ai-hierarchy {
  left: clamp(18px, 5vw, 86px);
  top: clamp(82px, 13vh, 138px);
  width: min(430px, 34vw);
  max-height: min(64vh, 560px);
  display: grid;
  gap: 0;
  padding: 34px 12px 12px;
  border: 1px solid rgba(148, 232, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(11, 23, 32, 0.72), rgba(7, 13, 20, 0.48)),
    rgba(4, 8, 14, 0.38);
  color: rgba(221, 247, 255, 0.78);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(10px, 0.9vw, 13px);
  line-height: 1.45;
  box-shadow:
    0 0 24px rgba(148, 232, 255, 0.08),
    inset 0 0 18px rgba(148, 232, 255, 0.04);
  opacity: 0.68;
  overflow: visible;
}

.work-hover-stage--ai-state-exporter .fx-ai-hierarchy::before {
  content: "UNITY HIERARCHY / CONTEXT";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 10px;
  color: rgba(184, 241, 255, 0.64);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.work-hover-stage--ai-state-exporter .fx-ai-hierarchy::after {
  content: "Scene Context\ASelected Object\AComponents\AState Snapshot";
  position: absolute;
  left: 64%;
  top: 38%;
  width: min(250px, 20vw);
  padding: 10px 12px;
  border: 1px solid rgba(184, 241, 255, 0.22);
  border-radius: 8px;
  background: rgba(8, 18, 27, 0.72);
  color: rgba(232, 250, 255, 0.86);
  font-size: clamp(9px, 0.85vw, 12px);
  line-height: 1.45;
  white-space: pre;
  box-shadow: 0 0 22px rgba(148, 232, 255, 0.12);
  transform-origin: left center;
  animation: aiContextPacket 3.2s ease-in-out infinite;
}

.work-hover-stage--ai-state-exporter .fx-ai-hierarchy span {
  display: block;
  padding: 3px 8px;
  border-bottom: 1px solid rgba(148, 232, 255, 0.055);
  background: linear-gradient(90deg, rgba(148, 232, 255, 0.04), transparent 72%);
  white-space: nowrap;
}

.work-hover-stage--ai-state-exporter .fx-ai-hierarchy span:nth-child(4n) {
  color: rgba(184, 241, 255, 0.88);
}

.work-hover-stage--ai-state-exporter .fx-ai-stream {
  left: clamp(300px, 32vw, 520px);
  right: clamp(160px, 18vw, 300px);
  top: clamp(210px, 44vh, 430px);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(148, 232, 255, 0.2), transparent);
  opacity: 0.76;
}

.work-hover-stage--ai-state-exporter .fx-ai-stream span {
  position: absolute;
  left: 0;
  top: -2px;
  width: clamp(58px, 7vw, 110px);
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(184, 241, 255, 0.72), transparent);
  box-shadow: 0 0 16px rgba(148, 232, 255, 0.28);
  opacity: 0;
  animation: aiStreamToTarget 1.9s ease-in-out infinite;
}

.work-hover-stage--ai-state-exporter .fx-ai-stream span:nth-child(2) {
  animation-delay: 0.42s;
}

.work-hover-stage--ai-state-exporter .fx-ai-stream span:nth-child(3) {
  animation-delay: 0.84s;
}

.work-hover-stage--ai-state-exporter .fx-ai-target {
  right: clamp(28px, 8vw, 130px);
  top: clamp(150px, 35vh, 330px);
  display: grid;
  place-items: center;
  width: clamp(116px, 12vw, 180px);
  height: clamp(116px, 12vw, 180px);
  border: 1px solid rgba(184, 241, 255, 0.24);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 50%, rgba(148, 232, 255, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(11, 23, 32, 0.64), rgba(7, 13, 20, 0.38));
  color: rgba(232, 250, 255, 0.94);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(44px, 6vw, 86px);
  font-weight: 1000;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 18px rgba(148, 232, 255, 0.42),
    0 0 38px rgba(148, 232, 255, 0.14);
  box-shadow:
    0 0 30px rgba(148, 232, 255, 0.1),
    inset 0 0 28px rgba(148, 232, 255, 0.06);
  animation: aiTargetBreathe 2.2s ease-in-out infinite;
}

.work-hover-stage--ai-state-exporter .fx-ai-target::before,
.work-hover-stage--ai-state-exporter .fx-ai-target::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(184, 241, 255, 0.16);
  border-radius: 10px;
  pointer-events: none;
}

.work-hover-stage--ai-state-exporter .fx-ai-target::after {
  inset: -10px;
  border-color: rgba(148, 232, 255, 0.1);
  animation: aiTargetRing 2.2s ease-in-out infinite;
}

.work-hover-stage--batch-renamer::before {
  background:
    radial-gradient(circle at 14% 40%, rgba(172, 232, 255, 0.11), transparent 23%),
    radial-gradient(circle at 86% 58%, rgba(210, 240, 255, 0.1), transparent 24%),
    linear-gradient(90deg, rgba(172, 232, 255, 0.08), transparent 34%, transparent 66%, rgba(172, 232, 255, 0.08));
  opacity: 0.68;
}

.work-hover-stage--batch-renamer::after {
  background:
    linear-gradient(90deg, rgba(172, 232, 255, 0.08), transparent 22%, transparent 78%, rgba(172, 232, 255, 0.08)),
    repeating-linear-gradient(0deg, transparent 0 34px, rgba(172, 232, 255, 0.032) 34px 35px, transparent 35px 70px);
  opacity: 0.42;
  animation: batchStageSettle 3.6s ease-in-out infinite;
}

.work-hover-stage--batch-renamer .fx-batch-list {
  top: clamp(92px, 16vh, 166px);
  width: min(400px, 31vw);
  display: grid;
  gap: clamp(7px, 1vh, 10px);
  padding: 12px;
  border: 1px solid rgba(172, 232, 255, 0.16);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(12, 22, 30, 0.58), rgba(6, 12, 18, 0.38)),
    rgba(4, 8, 14, 0.28);
  box-shadow:
    0 0 22px rgba(172, 232, 255, 0.07),
    inset 0 0 18px rgba(172, 232, 255, 0.035);
  opacity: 0.78;
}

.work-hover-stage--batch-renamer .fx-batch-list--left {
  left: clamp(18px, 5vw, 84px);
}

.work-hover-stage--batch-renamer .fx-batch-list--right {
  right: clamp(18px, 5vw, 84px);
}

.work-hover-stage--batch-renamer .fx-batch-list span {
  position: relative;
  display: grid;
  min-height: clamp(31px, 3.4vw, 42px);
  align-items: center;
  padding: 7px 10px;
  border: 1px solid rgba(172, 232, 255, 0.1);
  border-radius: 6px;
  background: rgba(7, 16, 24, 0.54);
  color: rgba(225, 248, 255, 0.84);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(10px, 0.96vw, 13px);
  overflow: hidden;
  transform: translate3d(var(--batch-mess-x, 0), var(--batch-mess-y, 0), 0);
  animation: batchRowAlign 3.2s cubic-bezier(0.2, 0.82, 0.18, 1) infinite;
}

.work-hover-stage--batch-renamer .fx-batch-list span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(202, 245, 255, 0.22), transparent);
  transform: translateX(-115%);
  animation: batchRowScan 3.2s ease-in-out infinite;
}

.work-hover-stage--batch-renamer .fx-batch-list b,
.work-hover-stage--batch-renamer .fx-batch-list em {
  grid-area: 1 / 1;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}

.work-hover-stage--batch-renamer .fx-batch-list b {
  color: rgba(255, 255, 255, 0.68);
  animation: batchNameOldOut 3.2s steps(1, end) infinite;
}

.work-hover-stage--batch-renamer .fx-batch-list em {
  color: rgba(220, 250, 255, 0.94);
  text-shadow: 0 0 10px rgba(172, 232, 255, 0.28);
  opacity: 0;
  transform: translateX(-8px);
  animation: batchNameNewIn 3.2s steps(1, end) infinite;
}

.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(1) { --batch-mess-x: -9px; --batch-mess-y: 4px; }
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(2) { --batch-mess-x: 12px; --batch-mess-y: -5px; animation-delay: 0.05s; }
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(3) { --batch-mess-x: -4px; --batch-mess-y: 8px; animation-delay: 0.1s; }
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(4) { --batch-mess-x: 16px; --batch-mess-y: 3px; animation-delay: 0.15s; }
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(5) { --batch-mess-x: -14px; --batch-mess-y: -4px; animation-delay: 0.2s; }
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(6) { --batch-mess-x: 7px; --batch-mess-y: 7px; animation-delay: 0.25s; }

.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(2)::before,
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(2) b,
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(2) em { animation-delay: 0.05s; }
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(3)::before,
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(3) b,
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(3) em { animation-delay: 0.1s; }
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(4)::before,
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(4) b,
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(4) em { animation-delay: 0.15s; }
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(5)::before,
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(5) b,
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(5) em { animation-delay: 0.2s; }
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(6)::before,
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(6) b,
.work-hover-stage--batch-renamer .fx-batch-list span:nth-child(6) em { animation-delay: 0.25s; }

.work-hover-stage--batch-renamer .fx-batch-scan {
  left: -18vw;
  right: auto;
  top: 0;
  width: 18vw;
  height: 100%;
  background:
    linear-gradient(90deg, transparent, rgba(202, 245, 255, 0.12), rgba(202, 245, 255, 0.34), transparent),
    linear-gradient(90deg, transparent 48%, rgba(230, 252, 255, 0.84) 49% 50%, transparent 51%);
  filter: blur(0.2px);
  opacity: 0;
  animation: batchWideScan 3.2s ease-in-out infinite;
}

.work-hover-stage--collab-sync::before {
  background:
    radial-gradient(circle at 12% 48%, rgba(119, 225, 255, 0.12), transparent 24%),
    radial-gradient(circle at 88% 52%, rgba(181, 255, 198, 0.1), transparent 24%),
    radial-gradient(circle at var(--hover-card-center-x, 50vw) var(--hover-card-center-y, 50vh), rgba(119, 225, 255, 0.14), transparent 22%),
    linear-gradient(90deg, rgba(119, 225, 255, 0.08), transparent 34%, transparent 66%, rgba(181, 255, 198, 0.08));
  opacity: 0.72;
}

.work-hover-stage--collab-sync::after {
  background:
    linear-gradient(90deg, rgba(119, 225, 255, 0.08), transparent 20%, transparent 80%, rgba(181, 255, 198, 0.08)),
    repeating-linear-gradient(45deg, transparent 0 58px, rgba(119, 225, 255, 0.035) 58px 59px, transparent 59px 116px);
  opacity: 0.44;
  animation: collabNetworkBreathe 3.2s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-network {
  top: clamp(92px, 15vh, 160px);
  width: min(340px, 30vw);
  height: min(56vh, 420px);
  border: 1px solid rgba(119, 225, 255, 0.13);
  border-radius: 8px;
  background:
    radial-gradient(circle at 20% 24%, rgba(119, 225, 255, 0.42) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 18%, rgba(181, 255, 198, 0.36) 0 2px, transparent 3px),
    radial-gradient(circle at 44% 56%, rgba(119, 225, 255, 0.38) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 76%, rgba(181, 255, 198, 0.34) 0 2px, transparent 3px),
    linear-gradient(27deg, transparent 0 28%, rgba(119, 225, 255, 0.16) 29%, transparent 30% 100%),
    linear-gradient(132deg, transparent 0 34%, rgba(181, 255, 198, 0.14) 35%, transparent 36% 100%),
    linear-gradient(90deg, transparent 0 46%, rgba(119, 225, 255, 0.12) 47%, transparent 48% 100%);
  box-shadow:
    0 0 24px rgba(119, 225, 255, 0.08),
    inset 0 0 18px rgba(119, 225, 255, 0.04);
  opacity: 0.58;
  animation: collabNetworkExpand 2.7s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-network--left {
  left: clamp(18px, 5vw, 86px);
}

.work-hover-stage--collab-sync .fx-collab-network--right {
  right: clamp(18px, 5vw, 86px);
  animation-delay: 0.38s;
}

.work-hover-stage--collab-sync .fx-collab-file {
  left: var(--hover-card-center-x, 50vw);
  top: var(--hover-card-center-y, 50vh);
  width: clamp(66px, 7vw, 100px);
  height: clamp(80px, 8vw, 120px);
  border: 1px solid rgba(181, 255, 198, 0.34);
  border-radius: 8px;
  background:
    linear-gradient(135deg, transparent 0 72%, rgba(181, 255, 198, 0.18) 73% 100%),
    linear-gradient(180deg, rgba(11, 27, 30, 0.74), rgba(6, 14, 18, 0.48));
  box-shadow:
    0 0 26px rgba(119, 225, 255, 0.12),
    inset 0 0 16px rgba(181, 255, 198, 0.06);
  transform: translate(-50%, -50%);
  opacity: 0.86;
  animation: collabFileLock 2.2s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-file::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 44%;
  height: 32%;
  border: 2px solid rgba(181, 255, 198, 0.72);
  border-radius: 8px 8px 6px 6px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 14px rgba(181, 255, 198, 0.18);
  animation: collabLockClose 2.2s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-file::after {
  content: "LOCKED";
  position: absolute;
  left: 50%;
  bottom: -24px;
  color: rgba(214, 255, 224, 0.86);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(9px, 0.8vw, 11px);
  font-weight: 900;
  letter-spacing: 0.12em;
  text-shadow: 0 0 12px rgba(181, 255, 198, 0.34);
  transform: translateX(-50%);
  opacity: 0;
  animation: collabLockedLabel 2.2s steps(1, end) infinite;
}

.work-hover-stage--collab-sync .fx-collab-file span {
  position: absolute;
  left: 50%;
  top: 35%;
  width: 30%;
  height: 26%;
  border: 2px solid rgba(181, 255, 198, 0.64);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  transform: translate(-50%, -20%);
  animation: collabLockShackle 2.2s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-cursor {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 18px solid rgba(235, 252, 255, 0.92);
  border-right: 11px solid transparent;
  filter: drop-shadow(0 0 12px rgba(119, 225, 255, 0.36));
  opacity: 0;
}

.work-hover-stage--collab-sync .fx-collab-cursor--owner {
  left: -24px;
  top: 20vh;
  animation: collabCursorOwner 2.2s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-cursor--wait {
  right: -24px;
  top: 68vh;
  animation: collabCursorWait 2.2s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-cursor--review {
  left: -24px;
  top: 72vh;
  border-top-color: rgba(214, 255, 224, 0.88);
  animation: collabCursorReview 2.2s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-sync {
  top: var(--hover-card-center-y, 50vh);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(119, 225, 255, 0.66), rgba(181, 255, 198, 0.42), transparent);
  box-shadow: 0 0 16px rgba(119, 225, 255, 0.28);
  opacity: 0;
  animation: collabSyncLine 1.35s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-sync--left {
  left: 0;
  width: max(0px, var(--hover-card-center-x, 50vw));
  transform-origin: right center;
}

.work-hover-stage--collab-sync .fx-collab-sync--right {
  left: var(--hover-card-center-x, 50vw);
  right: 0;
  transform-origin: left center;
  animation-delay: 0.28s;
}

.work-hover-stage--collab-sync::before {
  background:
    radial-gradient(circle at 13% 50%, rgba(119, 225, 255, 0.12), transparent 21%),
    radial-gradient(circle at 87% 50%, rgba(181, 255, 198, 0.1), transparent 21%),
    linear-gradient(90deg, rgba(119, 225, 255, 0.07), transparent 26%, transparent 74%, rgba(181, 255, 198, 0.07));
  opacity: 0.58;
}

.work-hover-stage--collab-sync::after {
  background:
    linear-gradient(90deg, rgba(119, 225, 255, 0.08), transparent 24%, transparent 76%, rgba(181, 255, 198, 0.08));
  opacity: 0.34;
  animation: collabMarginBreathe 3.4s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-file {
  left: 50vw;
  top: var(--hover-card-center-y, 50vh);
  z-index: 4;
  width: clamp(64px, 6.6vw, 94px);
  height: clamp(78px, 7.7vw, 112px);
  border: 1px solid rgba(181, 255, 198, 0.36);
  border-radius: 8px;
  background:
    linear-gradient(135deg, transparent 0 72%, rgba(181, 255, 198, 0.2) 73% 100%),
    linear-gradient(180deg, rgba(13, 32, 34, 0.78), rgba(5, 12, 16, 0.5));
  box-shadow:
    0 0 24px rgba(119, 225, 255, 0.14),
    inset 0 0 14px rgba(181, 255, 198, 0.08);
  opacity: 0.9;
  transform: translate(-50%, -50%);
  animation: collabFileClickV2 2.45s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-file::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 47%;
  width: 42%;
  height: 30%;
  border: 2px solid rgba(181, 255, 198, 0.72);
  border-radius: 8px 8px 6px 6px;
  box-shadow: 0 0 12px rgba(181, 255, 198, 0.2);
  transform: translate(-50%, -50%);
  animation: collabLockBodyV2 2.45s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-file::after {
  content: "shared.scene";
  position: absolute;
  left: 50%;
  bottom: -25px;
  color: rgba(219, 255, 226, 0.84);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(9px, 0.86vw, 12px);
  font-weight: 900;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(181, 255, 198, 0.28);
  transform: translateX(-50%);
}

.work-hover-stage--collab-sync .fx-collab-file span {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 31%;
  height: 26%;
  border: 2px solid rgba(181, 255, 198, 0.68);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  transform: translate(-50%, -30%);
  animation: collabLockShackleV2 2.45s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-cursor {
  z-index: 5;
  width: 0;
  height: 0;
  border-top: 18px solid rgba(235, 252, 255, 0.94);
  border-right: 11px solid transparent;
  filter: drop-shadow(0 0 10px rgba(119, 225, 255, 0.34));
  opacity: 0;
}

.work-hover-stage--collab-sync .fx-collab-cursor--owner {
  left: clamp(28px, 7vw, 116px);
  top: calc(var(--hover-card-center-y, 50vh) - 110px);
  animation: collabCursorOwnerV2 2.45s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-cursor--wait {
  right: clamp(28px, 7vw, 116px);
  top: calc(var(--hover-card-center-y, 50vh) + 86px);
  border-top-color: rgba(255, 246, 212, 0.94);
  filter:
    drop-shadow(0 0 10px rgba(255, 212, 100, 0.28))
    drop-shadow(0 0 4px rgba(119, 225, 255, 0.2));
  animation: collabCursorWaitV2 2.45s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-warning {
  left: calc(50vw + clamp(58px, 6.2vw, 92px));
  top: calc(var(--hover-card-center-y, 50vh) - 72px);
  z-index: 4;
  width: 2px;
  height: clamp(110px, 17vh, 160px);
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, rgba(255, 108, 108, 0.74), rgba(255, 218, 112, 0.54), transparent);
  box-shadow: 0 0 14px rgba(255, 108, 108, 0.26);
  opacity: 0;
  animation: collabWarningGate 2.45s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-status {
  left: calc(50vw + clamp(82px, 8vw, 128px));
  top: calc(var(--hover-card-center-y, 50vh) + 38px);
  z-index: 5;
  min-width: 94px;
  color: rgba(224, 255, 232, 0.9);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(10px, 1vw, 14px);
  font-weight: 950;
  letter-spacing: 0.12em;
  text-shadow: 0 0 12px rgba(181, 255, 198, 0.34);
}

.work-hover-stage--collab-sync .fx-collab-status span {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

.work-hover-stage--collab-sync .fx-collab-status span:first-child {
  color: rgba(255, 229, 152, 0.88);
  animation: collabStatusWaiting 2.45s steps(1, end) infinite;
}

.work-hover-stage--collab-sync .fx-collab-status span:last-child {
  animation: collabStatusSynced 2.45s steps(1, end) infinite;
}

.work-hover-stage--collab-sync .fx-collab-sync {
  top: var(--hover-card-center-y, 50vh);
  z-index: 2;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(119, 225, 255, 0.58), rgba(181, 255, 198, 0.38), transparent);
  box-shadow: 0 0 14px rgba(119, 225, 255, 0.24);
  opacity: 0;
  animation: collabSyncLineV2 2.45s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-sync--left {
  left: 0;
  width: 50vw;
  transform-origin: right center;
}

.work-hover-stage--collab-sync .fx-collab-sync--right {
  left: 50vw;
  right: 0;
  transform-origin: left center;
  animation-delay: 0.12s;
}

.work-hover-stage.is-leaving.work-hover-stage--collab-sync .fx-collab-sync {
  animation: collabSyncReturnV2 0.42s ease-in forwards;
}

.work-hover-stage--python-runner::before {
  background:
    radial-gradient(circle at 13% 44%, rgba(148, 232, 255, 0.1), transparent 23%),
    radial-gradient(circle at 87% 56%, rgba(210, 240, 255, 0.09), transparent 24%),
    linear-gradient(90deg, rgba(148, 232, 255, 0.08), transparent 34%, transparent 66%, rgba(210, 240, 255, 0.08));
  opacity: 0.64;
}

.work-hover-stage--python-runner::after {
  background:
    linear-gradient(90deg, rgba(148, 232, 255, 0.06), transparent 22%, transparent 78%, rgba(210, 240, 255, 0.06)),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(148, 232, 255, 0.03) 28px 29px, transparent 29px 58px);
  opacity: 0.36;
  animation: pythonStageBreathe 4.2s ease-in-out infinite;
}

.work-hover-stage--python-runner .fx-python-terminal {
  top: clamp(110px, 20vh, 210px);
  width: min(390px, 31vw);
  display: grid;
  gap: 7px;
  padding: 36px 14px 14px;
  border: 1px solid rgba(148, 232, 255, 0.18);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(9, 18, 25, 0.72), rgba(5, 10, 15, 0.48)),
    rgba(4, 8, 14, 0.36);
  color: rgba(225, 248, 255, 0.86);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(11px, 1vw, 14px);
  line-height: 1.45;
  box-shadow:
    0 0 24px rgba(148, 232, 255, 0.08),
    inset 0 0 18px rgba(148, 232, 255, 0.04);
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  animation: pythonTerminalCycle 3.4s ease-in-out infinite;
}

.work-hover-stage--python-runner .fx-python-terminal::before {
  content: "PYTHON RUNNER";
  position: absolute;
  left: 14px;
  top: 10px;
  color: rgba(184, 241, 255, 0.62);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.14em;
}

.work-hover-stage--python-runner .fx-python-terminal::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 28px;
  height: 1px;
  background: linear-gradient(90deg, rgba(148, 232, 255, 0.28), transparent);
}

.work-hover-stage--python-runner .fx-python-terminal--left {
  left: clamp(18px, 5vw, 86px);
}

.work-hover-stage--python-runner .fx-python-terminal--right {
  right: clamp(18px, 5vw, 86px);
  animation-delay: 0.38s;
}

.work-hover-stage--python-runner .fx-python-terminal span {
  display: block;
  min-height: 1.45em;
  padding: 2px 0;
  opacity: 0;
  transform: translateX(-6px);
  white-space: nowrap;
  animation: pythonLogLine 3.4s steps(1, end) infinite;
}

.work-hover-stage--python-runner .fx-python-terminal--right span {
  animation-delay: 0.38s;
}

.work-hover-stage--python-runner .fx-python-terminal span:nth-child(1) {
  color: rgba(232, 250, 255, 0.92);
}

.work-hover-stage--python-runner .fx-python-terminal span:nth-child(2) {
  color: rgba(255, 230, 153, 0.9);
  animation-delay: 0.42s;
}

.work-hover-stage--python-runner .fx-python-terminal span:nth-child(3) {
  color: rgba(184, 241, 255, 0.78);
  animation-delay: 0.9s;
}

.work-hover-stage--python-runner .fx-python-terminal span:nth-child(4) {
  color: rgba(181, 255, 198, 0.92);
  animation-delay: 1.36s;
}

.work-hover-stage--python-runner .fx-python-terminal--right span:nth-child(2) {
  animation-delay: 0.8s;
}

.work-hover-stage--python-runner .fx-python-terminal--right span:nth-child(3) {
  animation-delay: 1.28s;
}

.work-hover-stage--python-runner .fx-python-terminal--right span:nth-child(4) {
  animation-delay: 1.74s;
}

.work-hover-stage--python-runner .fx-python-dots {
  display: flex;
  gap: 9px;
  opacity: 0;
  animation: pythonDotsCycle 3.4s ease-in-out infinite;
}

.work-hover-stage--python-runner .fx-python-dots--left {
  left: clamp(22px, 5vw, 90px);
  bottom: clamp(74px, 15vh, 150px);
}

.work-hover-stage--python-runner .fx-python-dots--right {
  right: clamp(22px, 5vw, 90px);
  bottom: clamp(74px, 15vh, 150px);
  animation-delay: 0.38s;
}

.work-hover-stage--python-runner .fx-python-dots span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(148, 232, 255, 0.86);
  box-shadow: 0 0 16px rgba(148, 232, 255, 0.48);
  animation: pythonDotRun 0.86s ease-in-out infinite;
}

.work-hover-stage--python-runner .fx-python-dots span:nth-child(2) {
  animation-delay: 0.13s;
}

.work-hover-stage--python-runner .fx-python-dots span:nth-child(3) {
  animation-delay: 0.26s;
}

.work-hover-stage--ai-state-exporter .fx-hierarchy,
.work-hover-stage--python-runner .fx-terminal,
.work-hover-stage--batch-renamer .fx-rename-list,
.work-hover-stage--babel-breaker .fx-translate {
  left: clamp(22px, 5vw, 82px);
  right: auto;
  width: min(430px, 34vw);
}

.work-hover-stage .fx-clipboard {
  right: clamp(34px, 9vw, 140px);
  top: clamp(150px, 32vh, 310px);
  width: clamp(62px, 7vw, 98px);
  height: clamp(78px, 9vw, 124px);
}

.work-hover-stage .fx-scan-sweep {
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  background: rgba(170, 225, 255, 0.76);
  box-shadow: 0 0 22px rgba(170, 225, 255, 0.46);
  animation: stageSweep 1.7s ease-in-out infinite;
}

.work-hover-stage .fx-network {
  inset: 10vh 6vw;
  opacity: 0.38;
}

.work-hover-stage .fx-lock-file {
  right: clamp(42px, 9vw, 150px);
  left: auto;
  top: clamp(170px, 34vh, 330px);
}

.work-hover-stage .fx-sync-line {
  left: clamp(18px, 6vw, 96px);
  right: clamp(18px, 6vw, 96px);
  top: var(--hover-card-center-y, 50vh);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(119, 225, 255, 0.52), transparent);
  animation: stageSyncLine 1.2s linear infinite;
}

.work-hover-stage .fx-run-dots {
  right: clamp(32px, 8vw, 130px);
  bottom: clamp(72px, 16vh, 150px);
  display: flex;
  gap: 12px;
}

.work-hover-stage .fx-run-dots span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(148, 232, 255, 0.86);
  box-shadow: 0 0 18px rgba(148, 232, 255, 0.5);
  animation: stageDotRun 0.9s ease-in-out infinite;
}

.work-hover-stage .fx-run-dots span:nth-child(2) {
  animation-delay: 0.14s;
}

.work-hover-stage .fx-run-dots span:nth-child(3) {
  animation-delay: 0.28s;
}

.work-hover-stage--babel-breaker .fx-particle {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: rgba(111, 205, 93, 0.82);
  box-shadow: 0 0 12px rgba(111, 205, 93, 0.34);
}

.work-hover-stage--babel-breaker .fx-particle:nth-of-type(1) {
  left: 11vw;
  top: 25vh;
}

.work-hover-stage--babel-breaker .fx-particle:nth-of-type(2) {
  left: 18vw;
  top: 62vh;
}

.work-hover-stage--babel-breaker .fx-particle:nth-of-type(3) {
  right: 18vw;
  top: 32vh;
}

.work-hover-stage--babel-breaker .fx-particle:nth-of-type(4) {
  right: 12vw;
  bottom: 24vh;
}

.work-hover-stage--babel-breaker::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(111, 205, 93, 0.13), transparent 24%),
    linear-gradient(90deg, rgba(111, 205, 93, 0.1), transparent 24%, transparent 76%, rgba(132, 244, 255, 0.1));
  opacity: 0.72;
}

.work-hover-stage--babel-breaker::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(132, 244, 255, 0.1), transparent 20%),
    linear-gradient(90deg, rgba(8, 22, 14, 0.28), transparent 22%, transparent 78%, rgba(8, 22, 14, 0.28));
  opacity: 0.76;
  animation: babelEdgeClear 3.2s ease-in-out infinite;
}

.work-hover-stage--babel-breaker .fx-babel-wall {
  inset: 0;
  z-index: 2;
  color: rgba(219, 255, 218, 0.74);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 850;
  letter-spacing: 0.02em;
  text-shadow: 0 0 12px rgba(111, 205, 93, 0.2);
  mix-blend-mode: screen;
}

.work-hover-stage--babel-breaker .fx-babel-word {
  position: absolute;
  display: block;
  min-width: 130px;
  padding: 6px 8px;
  border: 1px solid rgba(111, 205, 93, 0.16);
  border-radius: 4px;
  background: rgba(4, 16, 10, 0.3);
  box-shadow: inset 0 0 12px rgba(111, 205, 93, 0.04);
  overflow: hidden;
  animation: babelWallBreak 3.2s ease-in-out infinite;
}

.work-hover-stage--babel-breaker .fx-babel-word b,
.work-hover-stage--babel-breaker .fx-babel-word em {
  display: block;
  font-style: normal;
}

.work-hover-stage--babel-breaker .fx-babel-word b {
  animation: babelEnglishBreak 3.2s ease-in-out infinite;
}

.work-hover-stage--babel-breaker .fx-babel-word em {
  position: absolute;
  inset: 6px auto auto 8px;
  color: rgba(236, 255, 235, 0.95);
  opacity: 0;
  transform: translateY(8px);
  text-shadow:
    0 0 12px rgba(111, 205, 93, 0.38),
    0 0 18px rgba(132, 244, 255, 0.16);
  animation: babelJapaneseRebuild 3.2s ease-in-out infinite;
}

.work-hover-stage--babel-breaker .fx-babel-word--a {
  left: 6vw;
  top: 17vh;
}

.work-hover-stage--babel-breaker .fx-babel-word--b {
  left: 13vw;
  top: 45vh;
  animation-delay: 0.16s;
}

.work-hover-stage--babel-breaker .fx-babel-word--c {
  left: 5vw;
  bottom: 18vh;
  animation-delay: 0.32s;
}

.work-hover-stage--babel-breaker .fx-babel-word--d {
  left: 24vw;
  top: 27vh;
  animation-delay: 0.48s;
}

.work-hover-stage--babel-breaker .fx-babel-word--e {
  right: 8vw;
  top: 18vh;
  animation-delay: 0.24s;
}

.work-hover-stage--babel-breaker .fx-babel-word--f {
  right: 18vw;
  top: 50vh;
  animation-delay: 0.4s;
}

.work-hover-stage--babel-breaker .fx-babel-word--g {
  right: 6vw;
  bottom: 18vh;
  animation-delay: 0.56s;
}

.work-hover-stage--babel-breaker .fx-babel-word--h {
  right: 26vw;
  top: 30vh;
  animation-delay: 0.72s;
}

.work-hover-stage--babel-breaker .fx-babel-crack {
  left: 50vw;
  top: 50vh;
  z-index: 4;
  width: clamp(4px, 0.7vw, 8px);
  height: clamp(260px, 54vh, 520px);
  background:
    linear-gradient(180deg, transparent, rgba(234, 255, 232, 0.92) 14%, rgba(111, 205, 93, 0.68) 48%, rgba(132, 244, 255, 0.66) 76%, transparent);
  clip-path: polygon(42% 0, 88% 18%, 48% 31%, 74% 48%, 34% 61%, 66% 78%, 38% 100%, 0 80%, 36% 64%, 10% 46%, 46% 32%, 18% 14%);
  filter:
    drop-shadow(0 0 10px rgba(111, 205, 93, 0.48))
    drop-shadow(0 0 18px rgba(132, 244, 255, 0.22));
  transform: translate(-50%, -50%) scaleY(0.08);
  opacity: 0;
  animation: babelCrackOpen 3.2s ease-in-out infinite;
}

.work-hover-stage--babel-breaker .fx-babel-crack::before,
.work-hover-stage--babel-breaker .fx-babel-crack::after {
  content: "";
  position: absolute;
  left: 50%;
  width: clamp(80px, 14vw, 190px);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(132, 244, 255, 0.72), transparent);
  transform-origin: left center;
  opacity: 0.82;
}

.work-hover-stage--babel-breaker .fx-babel-crack::before {
  top: 34%;
  transform: rotate(-23deg);
}

.work-hover-stage--babel-breaker .fx-babel-crack::after {
  top: 63%;
  transform: rotate(28deg);
}

.work-hover-stage--babel-breaker .fx-babel-translation {
  left: 50vw;
  top: calc(var(--hover-card-center-y, 50vh) + clamp(74px, 13vh, 130px));
  z-index: 5;
  display: grid;
  gap: 8px;
  width: min(360px, 42vw);
  color: rgba(232, 255, 232, 0.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(11px, 1vw, 15px);
  font-weight: 900;
  transform: translateX(-50%);
}

.work-hover-stage--babel-breaker .fx-babel-translation span {
  position: relative;
  display: block;
  min-height: 24px;
  padding: 6px 10px;
  border: 1px solid rgba(111, 205, 93, 0.18);
  border-radius: 5px;
  background: rgba(5, 18, 12, 0.42);
  overflow: hidden;
  box-shadow: inset 0 0 14px rgba(111, 205, 93, 0.05);
  animation: babelTranslationBlock 3.2s ease-in-out infinite;
}

.work-hover-stage--babel-breaker .fx-babel-translation b,
.work-hover-stage--babel-breaker .fx-babel-translation em {
  display: block;
  font-style: normal;
}

.work-hover-stage--babel-breaker .fx-babel-translation b {
  animation: babelEnglishBreak 3.2s ease-in-out infinite;
}

.work-hover-stage--babel-breaker .fx-babel-translation em {
  position: absolute;
  inset: 6px auto auto 10px;
  color: rgba(242, 255, 241, 0.98);
  opacity: 0;
  transform: translateY(8px);
  text-shadow:
    0 0 14px rgba(111, 205, 93, 0.5),
    0 0 20px rgba(132, 244, 255, 0.18);
  animation: babelJapaneseRebuild 3.2s ease-in-out infinite;
}

.work-hover-stage--babel-breaker .fx-babel-block {
  --babel-block-x: 18vw;
  --babel-block-y: 24vh;
  --babel-block-rot: 160deg;
  z-index: 4;
  left: 50vw;
  top: 50vh;
  width: clamp(8px, 1vw, 14px);
  height: clamp(8px, 1vw, 14px);
  border-radius: 2px;
  background: rgba(111, 205, 93, 0.82);
  box-shadow: 0 0 12px rgba(111, 205, 93, 0.36);
  opacity: 0;
  animation: babelBlockFall 3.2s ease-in-out infinite;
}

.work-hover-stage--babel-breaker .fx-babel-block--b {
  --babel-block-x: -17vw;
  --babel-block-y: 18vh;
  --babel-block-rot: -132deg;
  background: rgba(132, 244, 255, 0.78);
  animation-delay: 0.08s;
}

.work-hover-stage--babel-breaker .fx-babel-block--c {
  --babel-block-x: 24vw;
  --babel-block-y: -16vh;
  --babel-block-rot: 104deg;
  animation-delay: 0.16s;
}

.work-hover-stage--babel-breaker .fx-babel-block--d {
  --babel-block-x: -23vw;
  --babel-block-y: -12vh;
  --babel-block-rot: -188deg;
  background: rgba(132, 244, 255, 0.74);
  animation-delay: 0.24s;
}

.work-hover-stage--babel-breaker .fx-babel-block--e {
  --babel-block-x: 9vw;
  --babel-block-y: 28vh;
  --babel-block-rot: 216deg;
  animation-delay: 0.32s;
}

.work-hover-stage--babel-breaker .fx-babel-block--f {
  --babel-block-x: -8vw;
  --babel-block-y: 26vh;
  --babel-block-rot: -96deg;
  background: rgba(132, 244, 255, 0.74);
  animation-delay: 0.4s;
}

.work-hover-stage--lyra-code2music .fx-lyra-wave,
.work-hover-stage--EasyKnob .fx-wave {
  left: clamp(22px, 6vw, 100px);
  right: clamp(22px, 6vw, 100px);
  bottom: clamp(58px, 12vh, 116px);
}

.work-hover-stage--lyra-code2music .fx-lyra-code {
  z-index: 2;
  width: min(430px, 32vw);
  padding: 14px 16px;
  border: 1px solid rgba(178, 142, 255, 0.2);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(12, 14, 26, 0.42), rgba(10, 28, 36, 0.2)),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 24px);
  color: rgba(226, 245, 255, 0.82);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(12px, 1.15vw, 16px);
  line-height: 1.7;
  letter-spacing: 0.015em;
  box-shadow:
    0 0 26px rgba(178, 142, 255, 0.13),
    inset 0 0 18px rgba(118, 236, 255, 0.06);
  mix-blend-mode: screen;
  animation: lyraCodePanelDrift 7.4s ease-in-out infinite;
}

.work-hover-stage--lyra-code2music .fx-lyra-code--left {
  left: clamp(18px, 4.8vw, 76px);
  top: clamp(120px, 23vh, 250px);
}

.work-hover-stage--lyra-code2music .fx-lyra-code--right {
  right: clamp(18px, 4.8vw, 76px);
  top: clamp(170px, 31vh, 330px);
  animation-delay: -2.2s;
}

.work-hover-stage--lyra-code2music .fx-lyra-code span {
  position: relative;
  display: block;
  min-height: 1.7em;
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 0 0 12px rgba(118, 236, 255, 0.22);
  animation: lyraCodeLineFlow 3.4s ease-in-out infinite;
}

.work-hover-stage--lyra-code2music .fx-lyra-code span:nth-child(2) {
  animation-delay: 0.18s;
}

.work-hover-stage--lyra-code2music .fx-lyra-code span:nth-child(3) {
  animation-delay: 0.36s;
}

.work-hover-stage--lyra-code2music .fx-lyra-code span:nth-child(4) {
  animation-delay: 0.54s;
}

.work-hover-stage--lyra-code2music .fx-lyra-code b,
.work-hover-stage--lyra-code2music .fx-lyra-code em {
  display: block;
  font-style: normal;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    filter 0.18s ease;
}

.work-hover-stage--lyra-code2music .fx-lyra-code b {
  opacity: 0.62;
}

.work-hover-stage--lyra-code2music .fx-lyra-code em {
  position: absolute;
  inset: 0 auto auto 0;
  color: rgba(246, 249, 255, 0.96);
  opacity: 0;
  transform: translateY(8px);
  text-shadow:
    0 0 14px rgba(118, 236, 255, 0.56),
    0 0 24px rgba(178, 142, 255, 0.36);
}

.work-hover-stage--lyra-code2music[data-lyra-row="1"] .fx-lyra-code span:nth-child(1) b,
.work-hover-stage--lyra-code2music[data-lyra-row="2"] .fx-lyra-code span:nth-child(2) b,
.work-hover-stage--lyra-code2music[data-lyra-row="3"] .fx-lyra-code span:nth-child(3) b,
.work-hover-stage--lyra-code2music[data-lyra-row="4"] .fx-lyra-code span:nth-child(4) b {
  opacity: 0.12;
  filter: blur(1px);
  transform: translateY(-6px);
}

.work-hover-stage--lyra-code2music[data-lyra-row="1"] .fx-lyra-code span:nth-child(1) em,
.work-hover-stage--lyra-code2music[data-lyra-row="2"] .fx-lyra-code span:nth-child(2) em,
.work-hover-stage--lyra-code2music[data-lyra-row="3"] .fx-lyra-code span:nth-child(3) em,
.work-hover-stage--lyra-code2music[data-lyra-row="4"] .fx-lyra-code span:nth-child(4) em {
  opacity: 1;
  transform: translateY(0);
}

.work-hover-stage--lyra-code2music .fx-lyra-wave {
  z-index: 2;
  height: clamp(32px, 5vh, 58px);
  overflow: hidden;
  opacity: 0.8;
  filter: drop-shadow(0 0 18px rgba(118, 236, 255, 0.24));
}

.work-hover-stage--lyra-code2music .fx-lyra-wave::before,
.work-hover-stage--lyra-code2music .fx-lyra-wave span {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  height: 100%;
  background:
    linear-gradient(90deg, rgba(178, 142, 255, 0.04), rgba(118, 236, 255, 0.5), rgba(255, 180, 225, 0.34), rgba(118, 236, 255, 0.5), rgba(178, 142, 255, 0.04));
  clip-path: polygon(0 52%, 5% 38%, 10% 65%, 15% 44%, 20% 58%, 25% 32%, 30% 72%, 35% 48%, 40% 56%, 45% 25%, 50% 76%, 55% 42%, 60% 61%, 65% 34%, 70% 70%, 75% 45%, 80% 56%, 85% 32%, 90% 66%, 95% 44%, 100% 52%, 100% 100%, 0 100%);
  animation: lyraStageWave 2.2s linear infinite;
}

.work-hover-stage--lyra-code2music .fx-lyra-wave span {
  opacity: 0.42;
  transform: translateX(22px) scaleY(0.72);
  animation-delay: -1.1s;
}

.work-hover-stage--lyra-code2music.has-lyra-heart .fx-lyra-wave::before {
  clip-path: polygon(0 54%, 5% 44%, 10% 62%, 15% 42%, 20% 56%, 25% 36%, 30% 63%, 35% 37%, 40% 58%, 45% 28%, 50% 74%, 55% 28%, 60% 58%, 65% 37%, 70% 63%, 75% 36%, 80% 56%, 85% 42%, 90% 62%, 95% 44%, 100% 54%, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(178, 142, 255, 0.08), rgba(255, 138, 197, 0.62), rgba(118, 236, 255, 0.46), rgba(255, 138, 197, 0.62), rgba(178, 142, 255, 0.08));
}

.work-hover-stage--lyra-code2music .fx-lyra-pointer-note {
  z-index: 4;
  left: var(--card-pointer-x, 50%);
  top: var(--card-pointer-y, 50%);
  padding: 6px 10px;
  border: 1px solid rgba(118, 236, 255, 0.26);
  border-radius: 999px;
  background: rgba(8, 18, 28, 0.34);
  color: rgba(248, 252, 255, 0.94);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(12px, 1.25vw, 17px);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 0 0 14px rgba(118, 236, 255, 0.55);
  transform: translate(-50%, -50%);
  animation: lyraPointerNotePulse 1.05s ease-in-out infinite;
}

.work-hover-stage--lyra-code2music .fx-lyra-note {
  z-index: 3;
  color: rgba(244, 250, 255, 0.8);
  font-size: clamp(20px, 3.2vw, 42px);
  font-weight: 900;
  text-shadow:
    0 0 18px rgba(118, 236, 255, 0.46),
    0 0 28px rgba(178, 142, 255, 0.28);
  animation: lyraNoteDrift 4.8s ease-in-out infinite;
}

.work-hover-stage--lyra-code2music .fx-lyra-note--a {
  left: 12vw;
  top: 20vh;
}

.work-hover-stage--lyra-code2music .fx-lyra-note--b {
  right: 17vw;
  top: 18vh;
  animation-delay: -1.1s;
}

.work-hover-stage--lyra-code2music .fx-lyra-note--c {
  left: 20vw;
  bottom: 20vh;
  animation-delay: -2.2s;
}

.work-hover-stage--lyra-code2music .fx-lyra-note--d {
  right: 10vw;
  bottom: 25vh;
  animation-delay: -3.1s;
}

.work-hover-stage .fx-note:nth-of-type(1) {
  right: 22vw;
  top: 22vh;
}

.work-hover-stage .fx-note:nth-of-type(2) {
  right: 12vw;
  top: 46vh;
  animation-delay: 0.24s;
}

.work-hover-stage .fx-note:nth-of-type(3) {
  left: 16vw;
  bottom: 22vh;
  animation-delay: 0.48s;
}

.work-hover-stage--EasyKnob .fx-ring,
.work-hover-stage--EasyKnob .fx-knob {
  left: auto;
  top: var(--easyknob-stage-top);
  opacity: 0.78;
}

.work-hover-stage--EasyKnob .fx-ring {
  right: var(--easyknob-ring-right);
  width: clamp(128px, 13vw, 190px);
  height: clamp(128px, 13vw, 190px);
  transform: translateY(-50%);
  animation-name: easyKnobStageRing;
}

.work-hover-stage--EasyKnob .fx-knob {
  right: var(--easyknob-knob-right);
  width: clamp(76px, 7.2vw, 106px);
  height: clamp(76px, 7.2vw, 106px);
  transform: translateY(-50%);
  animation-name: easyKnobStageTurn;
}

.work-hover-stage--EasyKnob::after {
  content: "";
  position: absolute;
  left: var(--card-pointer-x, 50%);
  top: var(--card-pointer-y, 50%);
  width: clamp(90px, 14vw, 190px);
  height: clamp(90px, 14vw, 190px);
  border: 1px solid rgba(118, 236, 255, 0.34);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(118, 236, 255, 0.14), transparent 64%);
  box-shadow: 0 0 34px rgba(118, 236, 255, 0.24);
  transform: translate(-50%, -50%);
  animation: stagePointerWave 1.55s ease-out infinite;
}

.work-hover-stage .fx-meter {
  left: clamp(20px, 5vw, 80px);
  top: clamp(130px, 28vh, 260px);
  display: flex;
  align-items: end;
  gap: 9px;
  height: 150px;
}

.work-hover-stage .fx-meter span {
  width: 12px;
  min-height: 24px;
  border-radius: 999px 999px 2px 2px;
  background: rgba(118, 236, 255, 0.64);
  box-shadow: 0 0 18px rgba(118, 236, 255, 0.32);
  animation: stageMeter 1.1s ease-in-out infinite;
}

.work-hover-stage .fx-meter span:nth-child(2) {
  animation-delay: 0.1s;
}

.work-hover-stage .fx-meter span:nth-child(3) {
  animation-delay: 0.2s;
}

.work-hover-stage .fx-meter span:nth-child(4) {
  animation-delay: 0.3s;
}

.work-hover-stage .fx-audio-labels {
  right: clamp(28px, 7vw, 110px);
  bottom: clamp(72px, 16vh, 150px);
  display: grid;
  gap: 8px;
  color: rgba(215, 251, 255, 0.86);
  font-size: clamp(12px, 1.3vw, 18px);
  font-weight: 900;
  letter-spacing: 0.16em;
  text-align: right;
}

.work-hover-stage .fx-audio-labels span {
  animation: stageAudioLabel 2s ease-in-out infinite;
}

.work-hover-stage .fx-audio-labels span:nth-child(2) {
  animation-delay: 0.18s;
}

.work-hover-stage .fx-audio-labels span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes stageFogDrift {
  0%,
  100% {
    transform: translate3d(-1.5%, 0, 0);
  }

  50% {
    transform: translate3d(1.5%, -1%, 0);
  }
}

@keyframes holoSideFogFlow {
  0%,
  100% {
    opacity: 0.58;
    transform: translate3d(-1.6vw, 0, 0) scale(1);
  }

  50% {
    opacity: 0.86;
    transform: translate3d(1.6vw, -1vh, 0) scale(1.04);
  }
}

@keyframes holoSideFogFloat {
  0%,
  100% {
    opacity: 0.5;
    transform: translate3d(0, 1.2vh, 0) scaleX(0.98);
  }

  50% {
    opacity: 0.72;
    transform: translate3d(0, -1.4vh, 0) scaleX(1.04);
  }
}

@keyframes holoFogTrailReturn {
  0% {
    opacity: 0.72;
    transform: translate3d(-50%, -50%, 0) scale(0.62);
  }

  48% {
    opacity: 0.34;
    transform: translate3d(-50%, -50%, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(1.24);
  }
}

@keyframes stageSideAura {
  0%,
  100% {
    opacity: 0.68;
    transform: translate3d(0, 0, 0);
  }

  50% {
    opacity: 1;
    transform: translate3d(0, -1.2vh, 0);
  }
}

@keyframes stageVisionPulse {
  0%,
  100% {
    opacity: 0.52;
    transform: scale(0.92);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.12);
  }
}

@keyframes stageSquareSpread {
  0% {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.76);
  }

  32%,
  72% {
    opacity: 0.86;
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -8px, 0) scale(1.12);
  }
}

@keyframes stageEnemyBlink {
  0%,
  58%,
  100% {
    opacity: 0;
    transform: translateX(14px);
  }

  64%,
  76% {
    opacity: 0.72;
    transform: translateX(0);
  }
}

@keyframes stageForgeHeat {
  0%,
  100% {
    opacity: 0.46;
    transform: scaleY(0.94);
  }

  50% {
    opacity: 0.76;
    transform: scaleY(1.06);
  }
}

@keyframes stageForgeHeatBuild {
  0% {
    opacity: 0.42;
    transform: scaleY(0.74) translateY(5vh);
  }

  100% {
    opacity: 0.92;
    transform: scaleY(1.08) translateY(0);
  }
}

@keyframes stageForgeHeatPulse {
  0%,
  100% {
    opacity: 0.86;
    transform: scaleY(1.02);
  }

  50% {
    opacity: 1;
    transform: scaleY(1.14);
  }
}

@keyframes stageForgeCool {
  0% {
    opacity: 0.84;
    transform: scaleY(1.04) translateY(0);
  }

  100% {
    opacity: 0;
    transform: scaleY(0.54) translateY(12vh);
  }
}

@keyframes stageForgeSideHeat {
  0%,
  100% {
    opacity: 0.38;
    transform: translate3d(-0.8vw, 0, 0);
  }

  50% {
    opacity: 0.62;
    transform: translate3d(0.8vw, -1vh, 0);
  }
}

@keyframes stageForgeSteam {
  0%,
  100% {
    opacity: 0.34;
    transform: translate3d(-2vw, 1vh, 0) scaleX(0.98);
  }

  50% {
    opacity: 0.56;
    transform: translate3d(2vw, -1.2vh, 0) scaleX(1.03);
  }
}

@keyframes stageSteamDrift {
  0%,
  100% {
    transform: translateX(-2vw);
  }

  50% {
    transform: translateX(2vw);
  }
}

@keyframes stageHeatHaze {
  0%,
  100% {
    transform: skewX(-4deg) translateX(-1vw);
  }

  50% {
    transform: skewX(4deg) translateX(1vw);
  }
}

@keyframes stageHeatRise {
  0%,
  100% {
    opacity: 0.2;
    transform: skewX(-4deg) translate3d(-1vw, 1.4vh, 0);
  }

  50% {
    opacity: 0.36;
    transform: skewX(4deg) translate3d(1vw, -1.8vh, 0);
  }
}

@keyframes forgeStageShock {
  0% {
    opacity: 0.48;
    transform: translate(-50%, -50%) scale(0.22);
  }

  72% {
    opacity: 0.18;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(4.2);
  }
}

@keyframes stageSparkFly {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.6);
  }

  22% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(42px, -110px, 0) scale(0.18);
  }
}

@keyframes stageMetalSpark {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7);
  }

  18% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(52px, -118px, 0) rotate(160deg) scale(0.18);
  }
}

@keyframes stageHeartSpark {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(-12deg) scale(0.3);
  }

  20% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate3d(-34px, -128px, 0) rotate(18deg) scale(1.05);
  }
}

@keyframes neuroNodeAppear {
  0% {
    opacity: 0;
    transform: scale(0.18);
  }

  72% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes neuroNodeDisappear {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.14);
  }
}

@keyframes neuroNodePulse {
  0%,
  100% {
    transform: scale(0.92);
    filter: brightness(0.95);
  }

  50% {
    transform: scale(1.22);
    filter: brightness(1.28);
  }
}

@keyframes neuroLinkDraw {
  0% {
    opacity: 0;
    scale: 0 1;
  }

  22% {
    opacity: 1;
  }

  100% {
    opacity: 0.86;
    scale: 1 1;
  }
}

@keyframes neuroLinkErase {
  0% {
    opacity: 0.86;
    scale: 1 1;
  }

  100% {
    opacity: 0;
    scale: 0 1;
  }
}

@keyframes neuroDotAppear {
  0% {
    opacity: 0;
    transform: scale(0.24);
  }

  72% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes neuroDotDisappear {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.16);
  }
}

@keyframes neuroDotPulse {
  0%,
  100% {
    opacity: 0.82;
    transform: scale(0.94);
  }

  50% {
    opacity: 1;
    transform: scale(1.36);
  }
}

@keyframes neuroEdgeDraw {
  0% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  24% {
    opacity: 0.92;
  }

  100% {
    opacity: 0.78;
    stroke-dashoffset: 0;
  }
}

@keyframes neuroEdgeErase {
  0% {
    opacity: 0.78;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0;
    stroke-dashoffset: 1;
  }
}

@keyframes neuroEdgePulse {
  0%,
  100% {
    opacity: 0.46;
    stroke: rgba(112, 240, 255, 0.48);
  }

  48% {
    opacity: 0.92;
    stroke: rgba(91, 255, 190, 0.72);
  }
}

@keyframes neuroAttractorPulse {
  0%,
  100% {
    opacity: 0.58;
    transform: translate(-50%, -50%) scale(0.82);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.22);
  }
}

@keyframes neuroHeartbeatFlow {
  0% {
    transform: translateX(-16%);
  }

  100% {
    transform: translateX(16%);
  }
}

@keyframes neuroHeartbeatUnstable {
  0% {
    opacity: 0;
    transform: translateX(-8%) translateY(0) scaleY(1);
  }

  35% {
    opacity: 0.84;
    transform: translateX(1%) translateY(-3px) scaleY(1.35);
  }

  68% {
    opacity: 0.62;
    transform: translateX(7%) translateY(2px) scaleY(0.82);
  }

  100% {
    opacity: 0;
    transform: translateX(14%) translateY(0) scaleY(1.15);
  }
}

@keyframes stageNeuroGrow {
  0%,
  100% {
    opacity: 0.24;
    filter: hue-rotate(0deg);
  }

  50% {
    opacity: 0.54;
    filter: hue-rotate(22deg);
  }
}

@keyframes stageNodePull {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(0.82);
  }

  50% {
    transform: translate3d(18px, -12px, 0) scale(1.15);
  }
}

@keyframes stageCircleTurn {
  to {
    transform: rotate(360deg);
  }
}

@keyframes stageNextWord {
  0%,
  100% {
    opacity: 0.42;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-6px);
  }
}

@keyframes stageQuestionBlink {
  0%,
  64%,
  100% {
    opacity: 0;
  }

  72%,
  88% {
    opacity: 1;
  }
}

@keyframes stageSweep {
  0% {
    transform: translateY(-28vh);
    opacity: 0;
  }

  28%,
  70% {
    opacity: 1;
  }

  100% {
    transform: translateY(28vh);
    opacity: 0;
  }
}

@keyframes stageSyncLine {
  0% {
    opacity: 0;
    transform: scaleX(0.2);
  }

  50% {
    opacity: 0.92;
    transform: scaleX(1);
  }

  100% {
    opacity: 0;
    transform: scaleX(0.4);
  }
}

@keyframes stageDotRun {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }

  50% {
    transform: translateY(-18px);
    opacity: 1;
  }
}

@keyframes stageMeter {
  0%,
  100% {
    height: 34px;
  }

  50% {
    height: 132px;
  }
}

@keyframes stageAudioLabel {
  0%,
  100% {
    opacity: 0.42;
    transform: translateX(0);
  }

  50% {
    opacity: 1;
    transform: translateX(-8px);
  }
}

@keyframes stagePointerWave {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.58);
  }

  30% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.45);
  }
}

.catalog-card[data-catalog-id="babel-breaker"] .catalog-card__fx,
.catalog-card[data-catalog-id="collab-sync"] .catalog-card__fx {
  display: none;
}

.catalog-card[data-catalog-id="babel-breaker"]:hover,
.catalog-card[data-catalog-id="babel-breaker"]:focus-visible,
.catalog-card[data-catalog-id="babel-breaker"].is-gesture-hover,
.catalog-card[data-catalog-id="collab-sync"]:hover,
.catalog-card[data-catalog-id="collab-sync"]:focus-visible,
.catalog-card[data-catalog-id="collab-sync"].is-gesture-hover {
  border-color: rgba(255, 255, 255, 0.22);
  border-radius: inherit;
  box-shadow:
    0 16px 38px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  animation: none;
}

.catalog-card[data-catalog-id="babel-breaker"]::before,
.catalog-card[data-catalog-id="babel-breaker"]:hover::before,
.catalog-card[data-catalog-id="babel-breaker"]:focus-visible::before,
.catalog-card[data-catalog-id="babel-breaker"].is-gesture-hover::before,
.catalog-card[data-catalog-id="collab-sync"]::before,
.catalog-card[data-catalog-id="collab-sync"]:hover::before,
.catalog-card[data-catalog-id="collab-sync"]:focus-visible::before,
.catalog-card[data-catalog-id="collab-sync"].is-gesture-hover::before {
  content: none;
  display: none;
  opacity: 0;
  animation: none;
}

.catalog-card[data-catalog-id="babel-breaker"] .catalog-card__body p:last-child::after,
.catalog-card[data-catalog-id="babel-breaker"]:hover .catalog-card__body p:last-child::after,
.catalog-card[data-catalog-id="babel-breaker"]:focus-visible .catalog-card__body p:last-child::after,
.catalog-card[data-catalog-id="babel-breaker"].is-gesture-hover .catalog-card__body p:last-child::after {
  content: none;
  display: none;
  opacity: 0;
  animation: none;
}

.work-hover-stage--collab-sync .fx-collab-lane {
  top: clamp(128px, 24vh, 240px);
  width: clamp(180px, 20vw, 280px);
  height: clamp(220px, 42vh, 380px);
  z-index: 4;
}

.work-hover-stage--collab-sync .fx-collab-lane--left {
  left: clamp(22px, 6vw, 96px);
}

.work-hover-stage--collab-sync .fx-collab-lane--right {
  right: clamp(22px, 6vw, 96px);
}

.work-hover-stage--collab-sync .fx-collab-lane::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(119, 225, 255, 0.14);
  border-radius: 10px;
  background:
    radial-gradient(circle at 22% 24%, rgba(119, 225, 255, 0.3) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 28%, rgba(181, 255, 198, 0.24) 0 2px, transparent 3px),
    radial-gradient(circle at 32% 74%, rgba(119, 225, 255, 0.24) 0 2px, transparent 3px),
    linear-gradient(35deg, transparent 0 30%, rgba(119, 225, 255, 0.12) 31%, transparent 32% 100%),
    linear-gradient(140deg, transparent 0 38%, rgba(181, 255, 198, 0.1) 39%, transparent 40% 100%);
  box-shadow: inset 0 0 18px rgba(119, 225, 255, 0.05);
  opacity: 0.62;
  animation: collabMarginBreathe 3.4s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-lane .fx-collab-file {
  left: 50%;
  top: 52%;
  z-index: 4;
  width: clamp(64px, 6.6vw, 92px);
  height: clamp(78px, 7.7vw, 110px);
  transform: translate(-50%, -50%);
}

.work-hover-stage--collab-sync .fx-collab-lane--left .fx-collab-cursor--owner {
  left: 8%;
  top: 18%;
  animation: collabLeftOwnerCursor 2.45s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-lane--left .fx-collab-cursor--wait {
  left: 74%;
  top: 76%;
  border-top-color: rgba(255, 246, 212, 0.94);
  animation: collabLeftWaitCursor 2.45s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-lane--right .fx-collab-cursor--owner {
  left: 78%;
  top: 18%;
  animation: collabRightOwnerCursor 2.45s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-lane--right .fx-collab-cursor--wait {
  left: 10%;
  top: 76%;
  border-top-color: rgba(255, 246, 212, 0.94);
  animation: collabRightWaitCursor 2.45s ease-in-out infinite;
}

.work-hover-stage--collab-sync .fx-collab-lane .fx-collab-warning {
  left: calc(50% + clamp(48px, 5.5vw, 78px));
  top: 30%;
  height: clamp(96px, 18vh, 150px);
}

.work-hover-stage--collab-sync .fx-collab-lane--right .fx-collab-warning {
  left: auto;
  right: calc(50% + clamp(48px, 5.5vw, 78px));
}

.work-hover-stage--collab-sync .fx-collab-lane .fx-collab-status {
  left: calc(50% + clamp(58px, 6vw, 92px));
  top: 63%;
}

.work-hover-stage--collab-sync .fx-collab-lane--right .fx-collab-status {
  left: auto;
  right: calc(50% + clamp(58px, 6vw, 92px));
}

.work-hover-stage--collab-sync .fx-collab-sync--left,
.work-hover-stage--collab-sync .fx-collab-sync--right {
  top: 50%;
  width: clamp(160px, 24vw, 360px);
}

.work-hover-stage--collab-sync .fx-collab-sync--left {
  left: clamp(22px, 6vw, 96px);
  transform-origin: left center;
}

.work-hover-stage--collab-sync .fx-collab-sync--right {
  right: clamp(22px, 6vw, 96px);
  left: auto;
  transform-origin: right center;
}

@keyframes collabLeftOwnerCursor {
  0% {
    opacity: 0;
    transform: translate3d(-10px, -4px, 0);
  }

  18% {
    opacity: 0.92;
  }

  48%,
  100% {
    opacity: 0.92;
    transform: translate3d(92px, 96px, 0);
  }
}

@keyframes collabLeftWaitCursor {
  0% {
    opacity: 0;
    transform: translate3d(10px, 0, 0);
  }

  20% {
    opacity: 0.86;
  }

  50%,
  100% {
    opacity: 0.62;
    transform: translate3d(-58px, -56px, 0);
  }
}

@keyframes collabRightOwnerCursor {
  0% {
    opacity: 0;
    transform: translate3d(10px, -4px, 0);
  }

  18% {
    opacity: 0.92;
  }

  48%,
  100% {
    opacity: 0.92;
    transform: translate3d(-92px, 96px, 0);
  }
}

@keyframes collabRightWaitCursor {
  0% {
    opacity: 0;
    transform: translate3d(-10px, 0, 0);
  }

  20% {
    opacity: 0.86;
  }

  50%,
  100% {
    opacity: 0.62;
    transform: translate3d(58px, -56px, 0);
  }
}

@media (max-width: 920px) {
  .work-hover-stage .fx-log,
  .work-hover-stage .fx-hierarchy,
  .work-hover-stage .fx-terminal,
  .work-hover-stage .fx-rename-list,
  .work-hover-stage .fx-translate,
  .work-hover-stage .fx-code,
  .work-hover-stage .fx-lyra-code {
    width: min(320px, 42vw);
  }
}

#fixed-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(7, 7, 7, 0.82);
  backdrop-filter: blur(10px);
  color: var(--accent);
  padding: 0.72em 0.9em calc(0.72em + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9;
  border-top: 1px solid #1c1c1c;
}

#fixed-footer .center-links {
  width: min(100%, var(--section-w));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

#fixed-footer .center-links a {
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

#fixed-footer .center-links a:hover,
#fixed-footer .center-links a:focus {
  color: #fff;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }

  .slider-progress__bar {
    transform: none;
  }
}