:root {
  --bg: #08080c;
  --panel: #101017;
  --panel-2: #15141e;
  --line: #292738;
  --text: #f1eef8;
  --muted: #888594;
  --pink: #ff4fc8;
  --cyan: #53e7e0;
  --lime: #c8ff55;
  --ink: currentColor;
  --ink-2: #ff4fd8;
  --ink-3: #4ff8ff;
  color-scheme: dark;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "DM Mono", monospace;
  letter-spacing: 0;
  overflow-x: hidden;
}
button,
input {
  font: inherit;
}
.topbar {
  height: 76px;
  border-bottom: 1px solid var(--line);
  padding: 0 clamp(20px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.brand {
  display: flex;
  gap: 13px;
  align-items: center;
  color: var(--text);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.15em;
}
.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--pink), var(--cyan));
  color: #08080c;
  font-weight: 700;
  border-radius: 6px;
}
.top-meta {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--muted);
  font-size: 11px;
}
.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 12px var(--lime);
}
.hero {
  min-height: 560px;
  padding: 80px clamp(20px, 6vw, 96px) 70px;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.hero:after {
  content: "";
  position: absolute;
  right: 8vw;
  top: 70px;
  width: 220px;
  height: 220px;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 9px,
    #181722 10px 11px
  );
  opacity: 0.6;
  transform: skew(-12deg);
  z-index: -1;
}
.eyebrow {
  display: inline-block;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 8px 14px;
  color: var(--muted);
  font-size: 11px;
  margin: 0 0 38px;
}
.hero h1 {
  font-family: "Syne", sans-serif;
  font-weight: 500;
  font-size: clamp(48px, 7.3vw, 112px);
  line-height: 0.95;
  margin: 0;
  max-width: 1100px;
}
.hero h1 span {
  color: #656270;
}
.hero mark {
  color: #09090d;
  background: linear-gradient(90deg, var(--pink), var(--cyan));
  padding: 0 0.08em;
}
.intro {
  max-width: 730px;
  color: #a8a5b1;
  line-height: 1.8;
  font-size: 14px;
  margin: 34px 0;
}
.editor {
  display: grid;
  grid-template-columns: auto minmax(180px, 390px) 42px;
  align-items: center;
  gap: 14px;
  max-width: 570px;
}
.editor label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
}
.editor input,
.search input {
  border: 1px solid var(--line);
  background: #0d0d13;
  color: var(--text);
  outline: none;
}
.editor input {
  height: 42px;
  padding: 0 14px;
}
.editor input:focus,
.search:focus-within {
  border-color: var(--cyan);
}
.icon-btn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 20px;
}
.icon-btn:hover {
  background: var(--text);
  color: var(--bg);
}
.library {
  padding: 70px clamp(20px, 6vw, 96px) 100px;
}
.library-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 28px;
}
.section-no {
  font-size: 11px;
  color: var(--pink);
  margin: 0 0 7px;
}
.library h2 {
  font-family: "Syne", sans-serif;
  font-size: 28px;
  margin: 0;
}
.library-tools {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--muted);
  font-size: 11px;
}
.search {
  height: 38px;
  width: 210px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding-left: 12px;
  gap: 8px;
}
.search input {
  border: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}
.effect-grid {
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.effect-card {
  height: 290px;
  position: relative;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  padding: 0;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.effect-card:nth-child(even) {
  background: var(--panel-2);
}
.effect-card:hover {
  background: #1a1924;
}
.card-top {
  position: absolute;
  inset: 20px 22px auto;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}
.card-no,
.card-action {
  font-size: 10px;
  color: var(--muted);
}
.card-action {
  opacity: 0;
  transform: translateY(-5px);
  transition: 0.2s;
}
.effect-card:hover .card-action {
  opacity: 1;
  transform: none;
  color: var(--cyan);
}
.stage {
  height: 230px;
  display: grid;
  place-items: center;
  padding: 35px 16px 0;
  overflow: hidden;
}
.fx {
  --word: "CREATIVE";
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1;
  white-space: nowrap;
}
.card-name {
  position: absolute;
  left: 22px;
  bottom: 18px;
  font-family: "Syne", sans-serif;
  font-size: 16px;
}
.card-tag {
  position: absolute;
  right: 22px;
  bottom: 20px;
  color: var(--muted);
  font-size: 9px;
}
.empty {
  text-align: center;
  color: var(--muted);
  padding: 80px 0;
}
footer {
  border-top: 1px solid var(--line);
  min-height: 110px;
  padding: 0 clamp(20px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 10px;
}
footer a {
  color: var(--text);
  text-decoration: none;
}
.fx-aurora {
  font:
    600 30px/1.1 "JetBrains Mono",
    monospace;
  letter-spacing: 0.06em;
  background: linear-gradient(
      115deg,
      var(--ink-2),
      var(--ink-3),
      var(--ink-2),
      var(--ink-3)
    )
    0 0/300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fx-aurora 7s linear infinite;
}
@keyframes fx-aurora {
  0% {
    background-position: 0% 50%;
    filter: hue-rotate(0deg);
  }
  100% {
    background-position: 300% 50%;
    filter: hue-rotate(360deg);
  }
}
.fx-glitch {
  position: relative;
  font:
    600 30px/1.1 "JetBrains Mono",
    monospace;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.fx-glitch::before,
.fx-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
}
.fx-glitch::before {
  color: var(--ink-2);
  clip-path: inset(0 0 55% 0);
  animation: fx-glitch-a 2.6s steps(1) infinite;
}
.fx-glitch::after {
  color: var(--ink-3);
  clip-path: inset(45% 0 0 0);
  animation: fx-glitch-b 2.6s steps(1) infinite;
}
@keyframes fx-glitch-a {
  0%,
  12%,
  20%,
  55%,
  100% {
    transform: translate(0);
    opacity: 0;
  }
  13% {
    transform: translate(-5px, -2px);
    opacity: 0.9;
  }
  16% {
    transform: translate(4px, 1px);
    opacity: 0.9;
  }
  48% {
    transform: translate(-3px, 2px);
    opacity: 0.9;
  }
  51% {
    transform: translate(2px, -1px);
    opacity: 0.9;
  }
}
@keyframes fx-glitch-b {
  0%,
  14%,
  22%,
  60%,
  100% {
    transform: translate(0);
    opacity: 0;
  }
  15% {
    transform: translate(5px, 2px);
    opacity: 0.9;
  }
  18% {
    transform: translate(-4px, -1px);
    opacity: 0.9;
  }
  52% {
    transform: translate(3px, -2px);
    opacity: 0.9;
  }
  56% {
    transform: translate(-2px, 1px);
    opacity: 0.9;
  }
}
.fx-neon {
  font: 600 32px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .14em;
  color: var(--ink);
  animation: fx-neon 3.2s linear infinite;
}
@keyframes fx-neon {
  0%, 18%, 21%, 24%, 100% {
    opacity: 1;
    text-shadow: 0 0 4px var(--ink), 0 0 11px var(--ink-2), 0 0 24px var(--ink-2), 0 0 48px var(--ink-2);
  }
  19%, 22%, 62% {
    opacity: .35;
    text-shadow: none;
  }
  63%, 64.5% {
    opacity: .6;
    text-shadow: 0 0 4px var(--ink-2);
  }
}
.fx-outline {
  color: transparent;
  -webkit-text-stroke: 1px var(--cyan);
  text-shadow: 5px 5px 0 rgba(255, 79, 200, 0.4);
}
.fx-liquid {
  font: 600 32px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .06em;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--ink-3) 65%, transparent);
  background: linear-gradient(0deg, var(--ink-3) 0 46%, color-mix(in srgb, var(--ink-3) 55%, transparent) 48%, transparent 52% 100%) 0 0 / 100% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: fx-liquid 3.4s ease-in-out infinite;
}
@keyframes fx-liquid {
  0%, 100% { background-position: 0 -110%; }
  50% { background-position: 0 10%; }
}
.fx-chrome {
  font: 600 32px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .06em;
  background: linear-gradient(105deg, color-mix(in srgb, var(--ink) 40%, transparent) 0 38%, var(--ink) 47%, #fff 50%, var(--ink) 53%, color-mix(in srgb, var(--ink) 40%, transparent) 62% 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fx-chrome 2.8s ease-in-out infinite;
}
@keyframes fx-chrome {
  0% { background-position: 130% 0; }
  60%, 100% { background-position: -130% 0; }
}
.fx-slice {
  position: relative;
  color: var(--text);
  animation: slice 2.2s ease-in-out infinite;
}
@keyframes slice {
  0%,
  70%,
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: none;
  }
  78% {
    clip-path: polygon(0 0, 100% 0, 100% 46%, 0 54%);
    transform: translateX(5px);
  }
  86% {
    clip-path: polygon(0 52%, 100% 44%, 100% 100%, 0 100%);
    transform: translateX(-5px);
  }
}
.fx-shadow {
  color: var(--lime);
  text-shadow:
    1px 1px #0d0d13,
    2px 2px #0d0d13,
    3px 3px var(--pink),
    4px 4px var(--pink),
    5px 5px var(--cyan),
    6px 6px var(--cyan);
}
.fx-scan {
  color: #afb0b8;
  position: relative;
  background: linear-gradient(
    90deg,
    #afb0b8 0 42%,
    var(--lime) 47% 53%,
    #afb0b8 58%
  );
  background-size: 250% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: scan 2.4s linear infinite;
}
@keyframes scan {
  to {
    background-position: -250% 0;
  }
}
.fx-echo {
  position: relative;
  font: 600 32px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .12em;
  color: var(--ink);
}
.fx-echo::before, .fx-echo::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  animation: fx-echo 2s ease-out infinite;
}
.fx-echo::before { color: var(--ink-2); }
.fx-echo::after { color: var(--ink-3); animation-delay: 1s; }
@keyframes fx-echo {
  0% { opacity: .8; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.9); filter: blur(3px); }
}
.fx-vapor {
  background: linear-gradient(
    180deg,
    #f9c8ff,
    #d16dff 45%,
    #52e8ff 55%,
    #a0ffe1
  );
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  font-style: italic;
  filter: drop-shadow(5px 5px 0 #ff4fc844);
}
.fx-wave {
  font: 600 32px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .1em;
  color: var(--ink-3);
}
.fx-wave b {
  font-weight: inherit;
  display: inline-block;
  animation: fx-wave 1.3s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.14s);
}
@keyframes fx-wave {
  0%, 100% { transform: translateY(7px); }
  50% { transform: translateY(-7px); }
}
dialog {
  width: min(760px, calc(100% - 30px));
  max-height: 88vh;
  padding: 0;
  background: #101017;
  color: var(--text);
  border: 1px solid #444052;
  box-shadow: 0 30px 100px #000;
  overflow: auto;
}
dialog::backdrop {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(5px);
}
.dialog-head {
  padding: 24px 26px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  border-bottom: 1px solid var(--line);
}
.dialog-head p {
  color: var(--pink);
  font-size: 10px;
  margin: 0 0 6px;
}
.dialog-head h2 {
  font-family: "Syne";
  margin: 0;
}
.tabs {
  padding: 14px 26px 0;
  display: flex;
  gap: 3px;
}
.tab {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 10px 14px;
  cursor: pointer;
  font-size: 11px;
}
.tab.active {
  color: var(--cyan);
  border-bottom: 1px solid var(--cyan);
}
pre {
  margin: 0 26px 20px;
  padding: 20px;
  background: #08080c;
  border: 1px solid var(--line);
  overflow: auto;
  min-height: 250px;
  white-space: pre-wrap;
  color: #c9f7e7;
  font-size: 12px;
  line-height: 1.7;
}
.copy-btn {
  width: calc(100% - 52px);
  height: 50px;
  margin: 0 26px 26px;
  border: 0;
  background: var(--text);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  cursor: pointer;
  font-weight: 500;
}
.copy-btn:hover {
  background: var(--cyan);
}
#toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 20px);
  background: var(--lime);
  color: #08080c;
  padding: 12px 18px;
  font-size: 11px;
  opacity: 0;
  pointer-events: none;
  transition: 0.25s;
  z-index: 20;
}
#toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
@media (max-width: 850px) {
  .effect-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hero {
    min-height: auto;
  }
  .hero h1 {
    font-size: clamp(46px, 11vw, 76px);
  }
  .intro {
    max-width: 90%;
  }
}
@media (max-width: 560px) {
  .topbar {
    height: 64px;
  }
  .top-meta span:last-child {
    display: none;
  }
  .hero {
    padding-top: 55px;
  }
  .hero:after {
    display: none;
  }
  .hero h1 {
    font-size: 44px;
    line-height: 1.04;
  }
  .intro {
    font-size: 12px;
  }
  .editor {
    grid-template-columns: 1fr 42px;
  }
  .editor label {
    grid-column: 1/-1;
  }
  .library {
    padding-top: 50px;
  }
  .library-head {
    align-items: start;
    gap: 22px;
    flex-direction: column;
  }
  .library-tools {
    width: 100%;
    justify-content: space-between;
  }
  .search {
    width: min(210px, 65vw);
  }
  .effect-grid {
    grid-template-columns: 1fr;
  }
  .effect-card {
    height: 260px;
  }
  .stage {
    height: 205px;
  }
  .fx {
    font-size: 42px;
  }
  footer {
    padding: 30px 20px;
    align-items: start;
    gap: 14px;
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Reference-like editorial headline with explicit, non-overlapping rows. */
.hero h1 {
  font-family: "Syne", sans-serif;
  font-size: initial;
  line-height: normal;
  letter-spacing: 0;
}
.hero h1 .headline-top {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 1.5vw, 22px);
  width: max-content;
  max-width: 100%;
  color: inherit;
}
.hero h1 .effect-total,
.hero h1 mark,
.hero h1 .comma,
.hero h1 .headline-bottom {
  font-size: clamp(46px, 6.1vw, 88px);
  line-height: 1;
}
.hero h1 .effect-total {
  flex: none;
  color: #656270;
}
.hero h1 mark {
  display: block;
  padding: 0.04em 0.1em 0.08em;
  white-space: nowrap;
}
.hero h1 .comma {
  color: #656270;
  margin-left: -0.14em;
}
.hero h1 .headline-bottom {
  display: block;
  color: var(--text);
  margin-top: clamp(12px, 1.5vw, 22px);
}
@media (max-width: 700px) {
  .hero h1 .headline-top {
    gap: 7px;
  }
  .hero h1 .effect-total,
  .hero h1 mark,
  .hero h1 .comma,
  .hero h1 .headline-bottom {
    font-size: clamp(31px, 9.2vw, 52px);
  }
  .hero h1 .headline-bottom {
    margin-top: 12px;
  }
}

/* Extended library */
.fx-fire {
  color: #ffd0a3;
  text-shadow:
    0 -2px 8px var(--accent),
    0 -8px 24px #ff3c00;
  animation: fire 1.4s ease-in-out infinite alternate;
}
@keyframes fire {
  to {
    filter: blur(0.4px);
    transform: skewX(-2deg) scale(1.02);
  }
}
.fx-holo {
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  text-shadow:
    2px 0 #ff4fc8,
    -2px 0 #53e7e0;
  animation: holo 2s linear infinite;
}
@keyframes holo {
  50% {
    filter: hue-rotate(120deg);
    transform: translateY(-2px);
  }
}
.fx-pixel {
  color: var(--accent);
  font-family: "DM Mono", monospace;
  image-rendering: pixelated;
  text-shadow: 4px 0 #53e7e0;
  animation: pixel 0.8s steps(2) infinite;
}
@keyframes pixel {
  50% {
    transform: translate(3px, -3px);
    clip-path: inset(20% 0 25%);
  }
}
.fx-glass {
  color: #ffffff24;
  -webkit-text-stroke: 1px var(--accent);
  text-shadow:
    inset 0 0 10px #fff,
    0 8px 20px #53e7e044;
  filter: drop-shadow(0 0 8px #fff5);
}
.fx-matrix {
  color: var(--accent);
  font-family: "DM Mono";
  text-shadow: 0 0 8px var(--accent);
  animation: matrix 1.2s steps(3) infinite;
}
@keyframes matrix {
  50% {
    opacity: 0.55;
    filter: blur(1px);
  }
}
.fx-prism {
  background: conic-gradient(
    from 90deg,
    #ff4fc8,
    var(--accent),
    #53e7e0,
    #8c6cff,
    #ff4fc8
  );
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(4px 3px 0 #fff2);
}
.fx-laser {
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  text-shadow:
    0 0 5px var(--accent),
    0 0 22px var(--accent);
  animation: laser 1.8s ease-in-out infinite;
}
@keyframes laser {
  50% {
    filter: brightness(2);
  }
}
.fx-signal {
  color: var(--accent);
  animation: signal 0.7s steps(2) infinite;
}
@keyframes signal {
  25% {
    transform: translateX(-3px);
    text-shadow: 6px 0 #ff4fc8;
  }
  75% {
    transform: translateX(3px);
    text-shadow: -6px 0 #c8ff55;
  }
}
.fx-portal {
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
  filter: drop-shadow(0 0 8px var(--accent));
  animation: portal 2.2s ease-in-out infinite;
}
@keyframes portal {
  50% {
    letter-spacing: 0.12em;
    transform: perspective(200px) rotateX(18deg);
  }
}
.fx-duo {
  color: var(--accent);
  text-shadow: 0.08em 0.08em 0 var(--accent2);
}
.fx-blueprint {
  color: transparent;
  -webkit-text-stroke: 1px var(--accent);
  background: repeating-linear-gradient(0deg, #0000 0 5px, #ffffff22 6px);
  background-clip: text;
}
.fx-sunprint {
  color: #241b00;
  background: var(--accent);
  padding: 0.08em 0.16em;
  box-shadow: 6px 6px 0 #ff704d;
  transform: rotate(-2deg);
}
.fx-night {
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent);
  filter: contrast(1.5);
  animation: night 2s steps(4) infinite;
}
@keyframes night {
  50% {
    opacity: 0.65;
  }
}
.fx-candy {
  color: #fff;
  text-shadow:
    3px 3px 0 var(--accent),
    6px 6px 0 #53e7e0,
    -2px -2px 0 #ffe56b;
  transform: rotate(-2deg);
}
.fx-carbon {
  color: #bbb;
  background: repeating-linear-gradient(135deg, #eee 0 2px, #555 3px 5px);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.fx-xray {
  color: #071119;
  -webkit-text-stroke: 2px var(--accent);
  text-shadow: 0 0 12px var(--accent);
  filter: invert(0.1);
}
.fx-halftone {
  color: transparent;
  background: radial-gradient(circle, var(--accent) 45%, transparent 48%) 0
    0/7px 7px;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 1px var(--accent);
}
.fx-spectral {
  color: transparent;
  background: linear-gradient(90deg, #ff4fc8, #ffe55c, #53e7e0, #8d7cff);
  background-clip: text;
  -webkit-background-clip: text;
  filter: blur(0.3px);
  animation: spectral 3s linear infinite;
}
@keyframes spectral {
  50% {
    filter: hue-rotate(180deg);
  }
}
.fx-marquee {
  color: #151017;
  -webkit-text-stroke: 2px var(--accent);
  text-shadow:
    0 0 5px var(--accent),
    8px 0 8px #ff4fc8;
  animation: marquee 1s steps(2) infinite;
}
@keyframes marquee {
  50% {
    text-shadow:
      0 0 5px var(--accent),
      -8px 0 8px #53e7e0;
  }
}
.fx-letterpress {
  color: var(--accent);
  text-shadow:
    0 -2px 0 #fff,
    0 3px 3px #000;
  filter: contrast(1.2);
}
.fx-retro {
  background: linear-gradient(
    #ffed71 0 42%,
    var(--accent) 43% 67%,
    #4adfff 68%
  );
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  text-shadow: 7px 7px 0 #4b2477;
}
.fx-polar {
  color: var(--accent);
  filter: drop-shadow(7px 0 #ff4fc8) drop-shadow(-7px 0 #536cff);
  animation: polar 2s ease-in-out infinite;
}
@keyframes polar {
  50% {
    filter: drop-shadow(-5px 0 #ff4fc8) drop-shadow(5px 0 #536cff);
  }
}
.fx-gothic {
  font-family: Georgia, serif;
  color: var(--accent);
  letter-spacing: -0.04em;
  text-shadow: 3px 3px 0 #555;
}
.fx-puff {
  color: var(--accent);
  -webkit-text-stroke: 5px #ffd6e9;
  paint-order: stroke fill;
  filter: drop-shadow(0 8px 0 #b73573);
}
.fx-stardust {
  color: var(--accent);
  text-shadow:
    0 0 4px #fff,
    12px -13px 2px #fff,
    -16px 9px 1px #fff;
  animation: stars 1.5s ease-in-out infinite;
}
@keyframes stars {
  50% {
    text-shadow:
      0 0 10px #fff,
      -12px -8px 2px #fff,
      15px 12px 1px #fff;
  }
}
.fx-kinetic {
  color: var(--accent);
  font-style: italic;
  animation: kinetic 0.65s ease-in-out infinite alternate;
}
@keyframes kinetic {
  to {
    transform: skewX(-12deg) translateX(8px);
    letter-spacing: 0.04em;
  }
}
.fx-melt {
  font: 600 34px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .1em;
  color: var(--ink-2);
}
.fx-melt b {
  font-weight: inherit;
  display: inline-block;
  transform-origin: top center;
  animation: fx-melt 2.8s ease-in infinite;
  animation-delay: calc(var(--i) * .22s);
}
@keyframes fx-melt {
  0%, 45% { transform: scaleY(1) translateY(0); filter: blur(0); }
  70% { transform: scaleY(1.55) translateY(7px) scaleX(.92); filter: blur(1.5px); }
  85%, 100% { transform: scaleY(1) translateY(0); filter: blur(0); }
}
.fx-frost {
  color: #eaffff;
  text-shadow:
    0 0 5px var(--accent),
    3px 3px 0 #62a4ca;
  -webkit-text-stroke: 1px #fff;
}
.fx-heat {
  color: var(--accent);
  text-shadow: 0 -5px 10px #ffd23d;
  animation: heat 1s ease-in-out infinite alternate;
}
@keyframes heat {
  to {
    transform: skewX(3deg);
    filter: blur(0.8px);
  }
}
.fx-frequency {
  color: var(--accent);
  animation: frequency 0.5s steps(2) infinite;
}
@keyframes frequency {
  50% {
    transform: scaleY(0.82);
    text-shadow: 0 7px 0 #ff4fc855;
  }
}
.fx-monolith {
  color: var(--accent);
  -webkit-text-stroke: 1px #000;
  text-shadow:
    5px 5px 0 #6c6875,
    10px 10px 0 #292733;
}
.fx-riso {
  color: var(--accent);
  text-shadow: 5px 2px 0 var(--accent2);
  mix-blend-mode: screen;
}
.fx-offset {
  color: #111;
  background: var(--accent);
  padding: 0 0.12em;
  box-shadow: -7px 7px 0 #ff4fc8;
}
.fx-electric {
  color: #fff;
  text-shadow:
    0 0 3px #fff,
    0 0 15px var(--accent);
  animation: electric 0.3s steps(2) infinite;
}
@keyframes electric {
  50% {
    transform: translate(1px, -2px) skewX(2deg);
  }
}
.fx-phantom {
  color: var(--accent);
  opacity: 0.7;
  text-shadow:
    0 8px 6px #c7b7ff88,
    0 16px 10px #c7b7ff33;
  animation: phantom 2s ease-in-out infinite;
}
@keyframes phantom {
  50% {
    transform: translateY(-5px);
    opacity: 0.35;
  }
}
.fx-stencil {
  color: var(--accent);
  clip-path: polygon(
    0 0,
    45% 0,
    47% 38%,
    53% 38%,
    55% 0,
    100% 0,
    100% 100%,
    55% 100%,
    53% 62%,
    47% 62%,
    45% 100%,
    0 100%
  );
}
.fx-terminal {
  color: var(--accent);
  font-family: "DM Mono";
  text-shadow: 0 0 8px var(--accent);
  border-right: 3px solid var(--accent);
  animation: terminal 0.8s steps(2) infinite;
}
@keyframes terminal {
  50% {
    border-color: transparent;
  }
}
.fx-orbit {
  color: var(--accent);
  animation: orbit 2.5s ease-in-out infinite;
}
@keyframes orbit {
  25% {
    transform: translate(7px, -7px) rotate(1deg);
  }
  75% {
    transform: translate(-7px, 5px) rotate(-1deg);
  }
}
.fx-shutter {
  color: transparent;
  background: repeating-linear-gradient(
    0deg,
    var(--accent) 0 4px,
    transparent 5px 9px
  );
  background-clip: text;
  -webkit-background-clip: text;
  animation: shutter 1.5s linear infinite;
}
@keyframes shutter {
  to {
    background-position: 0 18px;
  }
}
.fx-toxic {
  color: #101608;
  background: var(--accent);
  padding: 0.04em 0.15em;
  box-shadow: 0 0 18px var(--accent);
  transform: skewX(-5deg);
}
.fx-velvet {
  color: var(--accent);
  text-shadow:
    0 1px 0 #ff9ebb,
    0 3px 6px #710d36;
  filter: saturate(0.8);
}
.fx-foil {
  background: linear-gradient(
    110deg,
    #8d6b20,
    #fff4bd 40%,
    #9c7929 55%,
    #fff1a1 70%,
    #88681e
  );
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: foil 2s linear infinite;
  background-size: 200%;
}
@keyframes foil {
  to {
    background-position: 200%;
  }
}
.fx-datamosh {
  color: var(--accent);
  text-shadow: 5px 0 var(--accent2);
  animation: mosh 0.8s steps(3) infinite;
}
@keyframes mosh {
  33% {
    clip-path: inset(10% 0 60%);
    transform: translateX(6px);
  }
  66% {
    clip-path: inset(60% 0 10%);
    transform: translateX(-5px);
  }
}
.fx-paper {
  color: #17151b;
  background: var(--accent);
  padding: 0.08em 0.14em;
  filter: drop-shadow(5px 6px 0 #aaa);
  transform: rotate(1deg);
}
.fx-float {
  color: var(--accent);
  text-shadow: 0 12px 12px #000;
  animation: float 2.2s ease-in-out infinite;
}
@keyframes float {
  50% {
    transform: translateY(-13px);
    text-shadow: 0 25px 18px #000;
  }
}

/* Exact 01-57 source catalog classes. */
.fx-typewriter {
  font: 600 24px/1.2 "JetBrains Mono", monospace;
  letter-spacing: 0;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  width: 10ch;
  border-right: .55ch solid var(--ink-2);
  animation: fx-type 3.6s steps(10) infinite, fx-caret .65s steps(1) infinite;
}
@keyframes fx-type {
  0%, 8% { width: 0; }
  55%, 100% { width: 10ch; }
}
@keyframes fx-caret {
  50% { border-color: transparent; }
}
.fx-focus {
  font: 600 30px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .08em;
  color: var(--ink);
}
.fx-focus b {
  font-weight: inherit;
  display: inline-block;
  animation: fx-focus 2.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * .18s);
}
@keyframes fx-focus {
  0%, 100% { filter: blur(0); opacity: 1; }
  50% { filter: blur(7px); opacity: .35; }
}
.fx-sliced {
  position: relative;
  font: 600 32px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .06em;
  color: transparent;
}
.fx-sliced::before, .fx-sliced::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--ink);
}
.fx-sliced::before {
  clip-path: inset(0 0 50% 0);
  animation: fx-sliced-top 3s ease-in-out infinite;
}
.fx-sliced::after {
  clip-path: inset(50% 0 0 0);
  animation: fx-sliced-bot 3s ease-in-out infinite;
}
@keyframes fx-sliced-top {
  0%, 22%, 78%, 100% { transform: translateX(0); }
  38%, 62% { transform: translateX(8px); color: var(--ink-2); }
}
@keyframes fx-sliced-bot {
  0%, 22%, 78%, 100% { transform: translateX(0); }
  38%, 62% { transform: translateX(-8px); color: var(--ink-3); }
}
.fx-decoder {
  font: 600 28px/1.2 "JetBrains Mono", monospace;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.fx-decoder::after {
  content: "▓K#R1&Q";
  animation: fx-decoder 4s steps(1) infinite;
}
@keyframes fx-decoder {
  0% { content: "▓K#R1&Q"; color: var(--ink-3); }
  8% { content: "D%#OD3▒"; }
  16% { content: "DE☰O*ER"; }
  24% { content: "DEC0D£R"; }
  32% { content: "DECOD€R"; }
  40%, 82% { content: "DECODER"; color: var(--ink); }
  88% { content: "D3C0*€R"; color: var(--ink-3); }
  94% { content: "▒#COD1Q"; }
}
.fx-scanner {
  position: relative;
  font: 600 28px/1.2 "JetBrains Mono", monospace;
  letter-spacing: .08em;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 25%, transparent) 0 40%, var(--ink) 50%, color-mix(in srgb, var(--ink) 25%, transparent) 60% 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fx-scan-glow 2.6s ease-in-out infinite alternate;
}
.fx-scanner::after {
  content: "";
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: 0;
  width: 3px;
  background: var(--ink-2);
  box-shadow: 0 0 14px var(--ink-2);
  animation: fx-scan-bar 2.6s ease-in-out infinite alternate;
}
.fx-ember {
  font: 600 32px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .1em;
  color: #ffd9a0;
  animation: fx-ember 1.7s ease-in-out infinite alternate;
}
@keyframes fx-scan-glow {
  0% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
@keyframes fx-scan-bar {
  0% { left: 0; transform: translateX(0); }
  100% { left: 100%; transform: translateX(-100%); }
}
@keyframes fx-ember {
  0% { text-shadow: 0 -2px 6px #ffab40, 0 -6px 14px #ff6d00, 0 -12px 28px #dd2c00, 0 -20px 44px rgba(213, 0, 0, .55); }
  100% { text-shadow: 0 -3px 8px #ffc46b, 0 -9px 20px #ff8f1f, 0 -18px 38px #ff3d00, 0 -30px 60px rgba(213, 0, 0, .8); }
}
.fx-extrude {
  font: 600 34px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .08em;
  color: var(--ink);
  text-shadow: 1px 1px 0 color-mix(in srgb, var(--ink-2) 80%, #000), 2px 2px 0 color-mix(in srgb, var(--ink-2) 70%, #000), 3px 3px 0 color-mix(in srgb, var(--ink-2) 60%, #000), 4px 4px 0 color-mix(in srgb, var(--ink-2) 50%, #000), 5px 5px 0 color-mix(in srgb, var(--ink-2) 40%, #000), 6px 6px 0 color-mix(in srgb, var(--ink-2) 30%, #000), 7px 7px 12px rgba(0, 0, 0, .5);
  animation: fx-extrude 3s ease-in-out infinite;
}
@keyframes fx-extrude {
  0%, 100% { transform: rotate(-3.5deg) translateY(2px); }
  50% { transform: rotate(3.5deg) translateY(-4px); }
}
.fx-contour {
  width: 240px;
  height: 56px;
  overflow: visible;
}
.fx-contour text {
  font: 600 40px "JetBrains Mono", monospace;
  letter-spacing: .02em;
  fill: color-mix(in srgb, var(--ink) 10%, transparent);
  stroke: var(--ink-3);
  stroke-width: 1.2;
  stroke-dasharray: 34 66;
  animation: fx-contour 3.2s linear infinite;
}
@keyframes fx-contour {
  to { stroke-dashoffset: -100; }
}
.fx-spectrum {
  font: 600 26px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .08em;
}
.fx-spectrum b {
  font-weight: inherit;
  display: inline-block;
  color: #ff2d78;
  filter: hue-rotate(calc(var(--i) * 42deg));
  animation: fx-spectrum 2.4s linear infinite;
  animation-delay: calc(var(--i) * -.1s);
}
@keyframes fx-spectrum {
  to { filter: hue-rotate(calc(var(--i) * 42deg + 360deg)); }
}
.fx-jitter {
  font: 600 30px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .06em;
  color: var(--ink);
  animation: fx-jitter 1.9s steps(1) infinite;
}
@keyframes fx-jitter {
  0%, 7%, 15%, 55%, 100% { transform: none; opacity: 1; }
  8% { transform: skewX(-14deg) translateX(-4px); }
  10% { transform: skewX(10deg) translateX(3px); }
  12% { transform: translateY(-3px); opacity: .6; }
  46% { transform: skewX(8deg); }
  48% { transform: skewX(-6deg) translateY(2px); opacity: .75; }
  50% { transform: translateX(2px); }
}
.fx-anaglyph {
  font: 600 30px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .1em;
  color: var(--ink);
  animation: fx-anaglyph 2.4s ease-in-out infinite;
}
@keyframes fx-anaglyph {
  0%, 100% { text-shadow: 0 0 0 #ff3355, 0 0 0 #33ddff; }
  50% { text-shadow: -6px 0 1px #ff3355, 6px 0 1px #33ddff; }
}
.fx-flap {
  font: 600 24px/1 "JetBrains Mono", monospace;
  letter-spacing: 0;
  display: inline-flex;
  gap: 3px;
  perspective: 400px;
  color: var(--ink);
}
.fx-flap b {
  font-weight: inherit;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.9em;
  background: linear-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 0 49%, color-mix(in srgb, var(--ink) 8%, transparent) 51% 100%);
  border-radius: 4px;
  transform-origin: center;
  animation: fx-flap 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * .12s);
}
@keyframes fx-flap {
  0%, 55%, 100% { transform: rotateX(0); }
  62% { transform: rotateX(-88deg); }
  69% { transform: rotateX(0); }
  74% { transform: rotateX(-25deg); }
  79% { transform: rotateX(0); }
}
.fx-crt {
  position: relative;
  font: 600 26px/1.2 "JetBrains Mono", monospace;
  letter-spacing: .1em;
  padding: .3em .5em;
  color: #4dff88;
  text-shadow: 0 0 7px rgba(77, 255, 136, .8);
  background: rgba(20, 60, 35, .18);
  border-radius: 4px;
  animation: fx-crt-flicker 3.4s steps(1) infinite;
}
.fx-crt::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, .38) 2px 4px);
  animation: fx-crt-roll 6s linear infinite;
}
@keyframes fx-crt-flicker {
  0%, 6%, 100% { opacity: 1; }
  3% { opacity: .82; }
  4.5% { opacity: .95; transform: translateY(1px); }
  70% { opacity: .9; }
  71% { opacity: 1; transform: none; }
}
@keyframes fx-crt-roll { to { background-position: 0 48px; } }
.fx-pop {
  font: 600 34px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .04em;
  color: var(--ink);
}
.fx-pop b {
  font-weight: inherit;
  display: inline-block;
  animation: fx-pop 1.5s cubic-bezier(.3, 1.6, .4, 1) infinite;
  animation-delay: calc(var(--i) * .09s);
}
@keyframes fx-pop {
  0%, 55%, 100% { transform: translateY(0); text-shadow: 0 0 0 var(--ink-2); }
  25% { transform: translateY(-12px) rotate(-4deg); text-shadow: 0 12px 0 var(--ink-2); }
}
.fx-spotlight {
  font: 600 26px/1.2 "JetBrains Mono", monospace;
  letter-spacing: .08em;
  background: radial-gradient(3.5ch 100% at 50% 50%, var(--ink) 20%, color-mix(in srgb, var(--ink) 14%, transparent) 75%) 0 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: fx-spotlight 3.4s ease-in-out infinite alternate;
}
@keyframes fx-spotlight {
  0% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
.fx-elastic {
  font: 600 32px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .08em;
  color: var(--ink-2);
  animation: fx-elastic 1.6s ease-in-out infinite;
}
@keyframes fx-elastic {
  0%, 100% { transform: scale(1, 1); }
  28% { transform: scale(1.28, .72); }
  44% { transform: scale(.78, 1.24); }
  60% { transform: scale(1.12, .9); }
  74% { transform: scale(.96, 1.05); }
  86% { transform: scale(1.02, .98); }
}
.fx-mirror {
  font: 600 32px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .1em;
  color: var(--ink);
  -webkit-box-reflect: below 2px linear-gradient(transparent 45%, rgba(255, 255, 255, .28));
  animation: fx-mirror 3s ease-in-out infinite;
}
@keyframes fx-mirror {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.fx-ransom {
  font: 600 24px/1 "JetBrains Mono", monospace;
  letter-spacing: 0;
  display: inline-flex;
  gap: 4px;
  color: var(--ink);
}
.fx-ransom b {
  font-weight: inherit;
  display: grid;
  place-items: center;
  padding: .28em .3em;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 14%, transparent);
  animation: fx-ransom 2.8s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -.5s);
}
.fx-ransom b:nth-child(odd) { background: var(--ink-2); color: #14020f; }
.fx-ransom b:nth-child(3n) { background: transparent; outline: 1.5px dashed color-mix(in srgb, var(--ink) 55%, transparent); color: var(--ink-3); }
@keyframes fx-ransom {
  0% { transform: rotate(-6deg) translateY(1.5px); }
  100% { transform: rotate(6deg) translateY(-1.5px); }
}
.fx-heartbeat {
  font: 600 32px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .12em;
  color: var(--ink-2);
  animation: fx-heartbeat 1.4s ease-in-out infinite;
}
@keyframes fx-heartbeat {
  0%, 100% { transform: scale(1); text-shadow: 0 0 0 transparent; }
  14% { transform: scale(1.14); text-shadow: 0 0 18px color-mix(in srgb, var(--ink-2) 65%, transparent); }
  28% { transform: scale(1); }
  42% { transform: scale(1.18); text-shadow: 0 0 26px color-mix(in srgb, var(--ink-2) 80%, transparent); }
  70% { transform: scale(1); text-shadow: 0 0 0 transparent; }
}
.fx-marker {
  font: 600 28px/1.3 "JetBrains Mono", monospace;
  letter-spacing: .08em;
  color: var(--ink);
  padding: .1em .2em;
  background: linear-gradient(100deg, color-mix(in srgb, var(--ink-2) 85%, transparent), color-mix(in srgb, var(--ink-2) 60%, transparent)) no-repeat 0 62%;
  background-size: 0% 46%;
  animation: fx-marker 3s ease-in-out infinite;
}
@keyframes fx-marker {
  0% { background-size: 0% 46%; background-position: 0 62%; }
  38%, 62% { background-size: 100% 46%; background-position: 0 62%; }
  100% { background-size: 0% 46%; background-position: 100% 62%; }
}
.fx-sundial {
  font: 600 32px/1.1 "JetBrains Mono", monospace;
  letter-spacing: .1em;
  color: var(--ink);
  animation: fx-sundial 5s linear infinite;
}
@keyframes fx-sundial {
  0%, 100% { text-shadow: 4px 0 var(--ink-2), 8px 0 color-mix(in srgb, var(--ink-2) 55%, transparent), 12px 0 color-mix(in srgb, var(--ink-2) 25%, transparent); }
  12.5% { text-shadow: 2.8px 2.8px var(--ink-2), 5.6px 5.6px color-mix(in srgb, var(--ink-2) 55%, transparent), 8.4px 8.4px color-mix(in srgb, var(--ink-2) 25%, transparent); }
  25% { text-shadow: 0 4px var(--ink-2), 0 8px color-mix(in srgb, var(--ink-2) 55%, transparent), 0 12px color-mix(in srgb, var(--ink-2) 25%, transparent); }
  37.5% { text-shadow: -2.8px 2.8px var(--ink-2), -5.6px 5.6px color-mix(in srgb, var(--ink-2) 55%, transparent), -8.4px 8.4px color-mix(in srgb, var(--ink-2) 25%, transparent); }
  50% { text-shadow: -4px 0 var(--ink-2), -8px 0 color-mix(in srgb, var(--ink-2) 55%, transparent), -12px 0 color-mix(in srgb, var(--ink-2) 25%, transparent); }
  62.5% { text-shadow: -2.8px -2.8px var(--ink-2), -5.6px -5.6px color-mix(in srgb, var(--ink-2) 55%, transparent), -8.4px -8.4px color-mix(in srgb, var(--ink-2) 25%, transparent); }
  75% { text-shadow: 0 -4px var(--ink-2), 0 -8px color-mix(in srgb, var(--ink-2) 55%, transparent), 0 -12px color-mix(in srgb, var(--ink-2) 25%, transparent); }
  87.5% { text-shadow: 2.8px -2.8px var(--ink-2), 5.6px -5.6px color-mix(in srgb, var(--ink-2) 55%, transparent), 8.4px -8.4px color-mix(in srgb, var(--ink-2) 25%, transparent); }
}
.fx-negative {
  position: relative;
  font: 600 28px/1.2 "JetBrains Mono", monospace;
  letter-spacing: .08em;
  color: var(--ink);
  padding: .18em .22em;
}
.fx-negative::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 34%;
  background: var(--ink);
  mix-blend-mode: difference;
  animation: fx-negative 2.4s ease-in-out infinite alternate;
}
@keyframes fx-negative {
  0% { left: 0; transform: translateX(0); }
  100% { left: 100%; transform: translateX(-100%); }
}
.fx-hologram {
  color: transparent;
  -webkit-text-stroke: 1px #7df9ff;
  text-shadow:
    2px 0 #ff4fc8,
    -2px 0 #53e7e0;
  animation: holo 2s linear infinite;
}
.fx-starlight {
  color: #fff3a8;
  text-shadow:
    0 0 4px #fff,
    12px -13px 2px #fff,
    -16px 9px 1px #fff;
  animation: stars 1.5s ease-in-out infinite;
}
.fx-blackout {
  color: #111;
  background: #111;
  padding: 0.03em 0.14em;
  box-shadow: 0 0 0 1px #333;
  animation: blackout 3s steps(2) infinite;
}
@keyframes blackout {
  50% {
    color: #777;
  }
}
.fx-magnetic {
  color: #fff;
  letter-spacing: 0.15em;
  animation: magnetic 1.8s ease-in-out infinite;
}
@keyframes magnetic {
  50% {
    letter-spacing: -0.06em;
    text-shadow:
      8px 0 #ff4fc8,
      -8px 0 #53e7e0;
  }
}
.fx-mesh {
  color: transparent;
  background:
    repeating-linear-gradient(45deg, #53e7e0 0 2px, transparent 3px 7px),
    repeating-linear-gradient(-45deg, #ff4fc8 0 2px, transparent 3px 7px);
  background-clip: text;
  -webkit-background-clip: text;
}
.fx-iridescent {
  background: linear-gradient(
    110deg,
    #ff91df,
    #d8ff86,
    #73e8ff,
    #c492ff,
    #ff91df
  );
  background-size: 220%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: foil 2.5s linear infinite;
}
.fx-datastream {
  font-family: "DM Mono";
  color: #71ff9d;
  text-shadow: 0 0 7px #71ff9d;
  animation: datastream 0.7s steps(3) infinite;
}
@keyframes datastream {
  50% {
    transform: translateY(3px);
    clip-path: inset(15% 0 20%);
  }
}
.fx-prismcut {
  color: #fff;
  text-shadow:
    -5px 0 #ff4fc8,
    5px 0 #53e7e0;
  clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%, 8% 50%);
}
.fx-softblur {
  color: #fff;
  text-shadow: 0 0 18px #fff;
  filter: blur(2px);
  animation: softblur 2.2s ease-in-out infinite;
}
@keyframes softblur {
  50% {
    filter: blur(0);
    text-shadow: 0 0 3px #fff;
  }
}
.fx-microchip {
  font-family: "DM Mono";
  color: #71ff9d;
  -webkit-text-stroke: 1px #1c6f43;
  text-shadow: 4px 0 0 #173c2b;
  letter-spacing: 0.06em;
}
.fx-heatmap {
  background: linear-gradient(90deg, #3020ff, #00d4ff, #ffe600, #ff2d00);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: heatmap 2s linear infinite;
  background-size: 200%;
}
@keyframes heatmap {
  to {
    background-position: 200%;
  }
}
.fx-parallax {
  color: #fff;
  text-shadow:
    6px 5px 0 #6a53ff,
    12px 10px 0 #ff4fc8,
    18px 15px 0 #53e7e0;
  animation: parallax 2s ease-in-out infinite alternate;
}
@keyframes parallax {
  to {
    text-shadow:
      2px 2px 0 #6a53ff,
      5px 5px 0 #ff4fc8,
      8px 8px 0 #53e7e0;
  }
}
.fx-inktrap {
  font-family: Georgia, serif;
  color: #0c0c0e;
  -webkit-text-stroke: 2px #eee;
  text-shadow: 5px 5px 0 #000;
  letter-spacing: -0.05em;
}
.fx-topographic {
  color: transparent;
  -webkit-text-stroke: 1px #c8ff55;
  text-shadow:
    3px 3px 0 #456020,
    6px 6px 0 #263815,
    9px 9px 0 #18230d;
}
.fx-tiltshift {
  color: #fff;
  filter: blur(3px);
  animation: tiltshift 2.4s ease-in-out infinite;
}
@keyframes tiltshift {
  50% {
    filter: blur(0);
    transform: skewY(-3deg) scale(1.06);
  }
}
.fx-duotone {
  color: #ff4fc8;
  text-shadow: 0.09em 0.09em 0 #53e7e0;
}
.fx-glyphrain {
  font-family: "DM Mono";
  color: #73ff9a;
  text-shadow: 0 0 8px #73ff9a;
  animation: glyphrain 1s steps(4) infinite;
}
@keyframes glyphrain {
  50% {
    transform: translateY(8px);
    opacity: 0.55;
  }
}

/* Source-matched card hover controls. */
.effect-card {
  height: 360px;
  margin: 0;
  display: block;
  font: inherit;
}
.effect-card:hover,
.effect-card:focus-within,
.effect-card:focus-visible {
  background: #201426;
  outline: none;
}
.effect-card .stage {
  height: 278px;
  padding-top: 55px;
}
.effect-card .card-top {
  align-items: flex-start;
}
.card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0.18s;
}
.effect-card:hover .card-actions,
.effect-card:focus-within .card-actions,
.effect-card:focus-visible .card-actions {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.card-actions button {
  height: 34px;
  border: 0;
  border-radius: 18px;
  padding: 0 14px;
  background: #35122f;
  color: var(--pink);
  font-family: "DM Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.card-actions button[data-action="css"] {
  background: var(--pink);
  color: #0b0710;
}
.card-actions button:hover,
.card-actions button:focus-visible {
  filter: brightness(1.16);
  outline: 1px solid #fff8;
  outline-offset: 2px;
}
.effect-card .card-name {
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  width: calc(100% - 44px);
  text-align: center;
  color: #aaa5b9;
  font-family: "DM Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.effect-card .card-tag {
  display: none;
}
@media (max-width: 560px) {
  .effect-card {
    height: 310px;
  }
  .effect-card .stage {
    height: 240px;
  }
  .card-actions {
    opacity: 1;
    visibility: visible;
    transform: none;
    gap: 6px;
  }
  .card-actions button {
    height: 30px;
    padding: 0 9px;
    font-size: 9px;
  }
  .effect-card .card-name {
    bottom: 25px;
  }
}

/* Shared centered content width, matching the reference layout. */
.topbar,
.hero,
.library,
footer {
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
}
.hero {
  padding-left: 0;
  padding-right: 0;
}
.library {
  padding-left: 0;
  padding-right: 0;
}
footer {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 560px) {
  .topbar,
  .hero,
  .library,
  footer {
    width: calc(100% - 32px);
  }
}

/* Source-matched CSS / prompt detail modal. */
#codeDialog {
  width: min(1120px, calc(100% - 32px));
  height: min(900px, calc(100vh - 40px));
  max-height: calc(100vh - 40px);
  padding: 0;
  overflow: hidden;
  background: #09080f;
  border: 1px solid #322b43;
  box-shadow: 0 30px 100px #000;
}
#codeDialog[open] {
  display: flex;
  flex-direction: column;
}
#codeDialog:before,
#codeDialog:after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
  z-index: 3;
}
#codeDialog:before {
  left: -1px;
  top: -1px;
  border-left: 2px solid var(--pink);
  border-top: 2px solid var(--pink);
}
#codeDialog:after {
  right: -1px;
  bottom: -1px;
  border-right: 2px solid var(--pink);
  border-bottom: 2px solid var(--pink);
}
#codeDialog .dialog-head {
  min-height: 104px;
  flex: none;
  padding: 0 40px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #101019;
}
.dialog-title {
  display: flex;
  align-items: center;
  gap: 22px;
}
.dialog-title #dialogIndex {
  display: grid;
  place-items: center;
  min-width: 50px;
  height: 36px;
  padding: 0 12px;
  border-radius: 18px;
  background: var(--pink);
  color: #09070d;
  font-size: 18px;
  font-weight: 500;
}
#codeDialog .dialog-head h2 {
  font-family: "DM Mono", monospace;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.2em;
  margin: 0;
}
#codeDialog .dialog-head .icon-btn {
  margin-left: auto;
  border-radius: 14px;
  width: 48px;
  height: 48px;
  font-size: 22px;
}
.dialog-preview {
  height: 214px;
  min-height: 170px;
  flex: none;
  display: grid;
  place-items: center;
  background: #1d1123;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.dialog-preview .fx {
  font-size: clamp(38px, 5vw, 58px);
}
#codeDialog pre {
  flex: 1;
  min-height: 0;
  width: 100%;
  margin: 0;
  padding: 42px 40px;
  background: #07070d;
  border: 0;
  overflow: auto;
  white-space: pre-wrap;
  color: #d6d2df;
  font-family: "DM Mono", monospace;
  font-size: 15px;
  line-height: 1.65;
}
.dialog-foot {
  min-height: 106px;
  flex: none;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  background: #101019;
  color: #9e98b2;
  font-size: 13px;
  letter-spacing: 0.14em;
}
#codeDialog .copy-btn {
  width: auto;
  min-width: 180px;
  height: 58px;
  margin: 0;
  padding: 0 28px;
  display: block;
  background: var(--pink);
  color: #09070d;
  border-radius: 0;
  font-size: 15px;
  letter-spacing: 0.12em;
}
#codeDialog .copy-btn:hover {
  background: #ff77dc;
}
@media (max-width: 600px) {
  #codeDialog {
    width: calc(100% - 20px);
    height: calc(100vh - 20px);
    max-height: calc(100vh - 20px);
  }
  #codeDialog .dialog-head {
    min-height: 78px;
    padding: 0 18px;
  }
  .dialog-title {
    gap: 12px;
  }
  .dialog-title #dialogIndex {
    min-width: 42px;
    height: 30px;
    font-size: 14px;
  }
  #codeDialog .dialog-head h2 {
    font-size: 15px;
  }
  .dialog-preview {
    height: 160px;
  }
  #codeDialog pre {
    padding: 24px 18px;
    font-size: 12px;
  }
  .dialog-foot {
    min-height: 84px;
    padding: 12px 18px;
    gap: 12px;
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
  }
  .dialog-foot span {
    font-size: 9px;
  }
  #codeDialog .copy-btn {
    width: 100%;
    min-width: 0;
    height: 42px;
    font-size: 12px;
  }
}