:root {
  --bg: #0b0f1a;
  --fg: #e9eefc;
  --muted: #a5b0cf;
  --brand: #6ea8fe;

  --panel-bg-1: #0a0f24;
  --panel-bg-2: #0d1533;
  --grid: rgba(158,197,255,0.06);

  --baseFontSize: 13px;
  --lineHeight: 18px;
  --gridEvery: 3;
}

.rightFX {
  --edgeTop: 0%;
  --edgeBottom: 0%;
  --panelH: 366px;
  position: relative;
}

@media (max-width: 1024px) {
  .rightFX { --panelH: 300px;}
}

@media (max-width: 640px) {
  .rightFX { --panelH: 240px;}
}

.rightFX-clip {
  position: relative;
  height: var(--panelH);
  overflow: hidden;
  /* Diagonal edge */
  clip-path: polygon(
    0 0,
    100% var(--edgeTop),
    100% calc(100% - var(--edgeBottom)),
    0 100%
  );
  border-radius: 8px;
}

.rightFX-clip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      to bottom,
      var(--grid) 0px,
      var(--grid) 1px,
      transparent 1px,
      transparent calc(var(--lineHeight) * var(--gridEvery))
    );
}

.rightFX-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(900px 600px at 82% 20%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.22) 100%);
}

.rightFX-inner {
  position: absolute;
  inset: 0;
  perspective: 900px;
  transform-style: preserve-3d;
}

.lines3d {
  position: absolute;
  inset: 0;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #d3e2ff;
  transform-style: preserve-3d;
  perspective: 800px;
}

.line {
  color: rgba(168,200,255,0.35);
  position: absolute;
  left: 0;
  right: 0;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform;
  text-shadow:
    0 0 1px rgba(0,0,0,0.2),
    0 1px 0 rgba(0,0,0,0.15);
}

.line.strong { color: #494b4d; }
.line.layer1 { font-size: 23px; }
.line.layer2 { font-size: 20px; }

.track, .tile {
  display: inline-block;
  white-space: nowrap;
}

.lines3d[aria-hidden="true"] { user-select: none; }