.wml-matrix-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: var(--matrix-bg, #000);
  display: flex;
  overflow: hidden;
}

.matrix-canvas-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  opacity: var(--matrix-opacity, 1);
  pointer-events: none;
  z-index: 0;
}

.matrix-content-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: var(--matrix-justify, flex-start);
  align-items: var(--matrix-align, flex-start);
}

.matrix-pattern {
  position: relative;
  width: 1000px;
  height: 100%;
  flex-shrink: 0;
}

.matrix-column {
  position: absolute;
  top: -100%;
  width: 20px;
  height: 100%;
  font-size: 16px;
  line-height: 18px;
  font-weight: bold;
  animation: matrix-fall linear infinite;
  white-space: nowrap;
}

@keyframes rainbowShift {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.matrix-column::before {
  content: "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(
    0deg,
    var(--matrix-color-1, #b94fff) 0%,
    var(--matrix-color-2, #ff4545) 20%,
    var(--matrix-color-3, #fcb045) 40%,
    var(--matrix-color-4, #fced45) 60%,
    var(--matrix-color-5, #45fc5a) 80%,
    var(--matrix-color-6, #45cefc) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  writing-mode: vertical-lr;
  letter-spacing: 1px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  animation: rainbowShift 5s linear infinite;
}

.matrix-column:nth-child(1) { left: 0px; animation-delay: -2.5s; animation-duration: calc(3s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(2) { left: 25px; animation-delay: -3.2s; animation-duration: calc(4s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(3) { left: 50px; animation-delay: -1.8s; animation-duration: calc(2.5s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(4) { left: 75px; animation-delay: -2.9s; animation-duration: calc(3.5s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(5) { left: 100px; animation-delay: -1.5s; animation-duration: calc(3s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(6) { left: 125px; animation-delay: -3.8s; animation-duration: calc(4.5s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(7) { left: 150px; animation-delay: -2.1s; animation-duration: calc(2.8s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(8) { left: 175px; animation-delay: -2.7s; animation-duration: calc(3.2s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(9) { left: 200px; animation-delay: -3.4s; animation-duration: calc(3.8s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(10) { left: 225px; animation-delay: -1.9s; animation-duration: calc(2.7s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(11) { left: 250px; animation-delay: -3.6s; animation-duration: calc(4.2s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(12) { left: 275px; animation-delay: -2.3s; animation-duration: calc(3.1s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(13) { left: 300px; animation-delay: -3.1s; animation-duration: calc(3.6s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(14) { left: 325px; animation-delay: -2.6s; animation-duration: calc(2.9s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(15) { left: 350px; animation-delay: -3.7s; animation-duration: calc(4.1s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(16) { left: 375px; animation-delay: -2.8s; animation-duration: calc(3.3s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(17) { left: 400px; animation-delay: -3.3s; animation-duration: calc(3.7s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(18) { left: 425px; animation-delay: -2.2s; animation-duration: calc(2.6s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(19) { left: 450px; animation-delay: -3.9s; animation-duration: calc(4.3s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(20) { left: 475px; animation-delay: -2.4s; animation-duration: calc(3.4s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(21) { left: 500px; animation-delay: -1.7s; animation-duration: calc(2.4s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(22) { left: 525px; animation-delay: -3.5s; animation-duration: calc(3.9s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(23) { left: 550px; animation-delay: -2s; animation-duration: calc(3s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(24) { left: 575px; animation-delay: -4s; animation-duration: calc(4.4s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(25) { left: 600px; animation-delay: -1.6s; animation-duration: calc(2.3s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(26) { left: 625px; animation-delay: -3s; animation-duration: calc(3.5s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(27) { left: 650px; animation-delay: -3.8s; animation-duration: calc(4s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(28) { left: 675px; animation-delay: -2.5s; animation-duration: calc(2.8s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(29) { left: 700px; animation-delay: -3.2s; animation-duration: calc(3.6s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(30) { left: 725px; animation-delay: -2.7s; animation-duration: calc(3.2s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(31) { left: 750px; animation-delay: -1.8s; animation-duration: calc(2.7s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(32) { left: 775px; animation-delay: -3.6s; animation-duration: calc(4.1s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(33) { left: 800px; animation-delay: -2.1s; animation-duration: calc(3.1s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(34) { left: 825px; animation-delay: -3.4s; animation-duration: calc(3.7s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(35) { left: 850px; animation-delay: -2.8s; animation-duration: calc(2.9s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(36) { left: 875px; animation-delay: -3.7s; animation-duration: calc(4.2s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(37) { left: 900px; animation-delay: -2.3s; animation-duration: calc(3.3s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(38) { left: 925px; animation-delay: -1.9s; animation-duration: calc(2.5s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(39) { left: 950px; animation-delay: -3.5s; animation-duration: calc(3.8s / var(--matrix-speed, 1)); }
.matrix-column:nth-child(40) { left: 975px; animation-delay: -2.6s; animation-duration: calc(3.4s / var(--matrix-speed, 1)); }

.matrix-column:nth-child(odd)::before {
  content: "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン123456789";
}

.matrix-column:nth-child(even)::before {
  content: "ガギグゲゴザジズゼゾダヂヅデドバビブベボパピプペポヴァィゥェォャュョッABCDEFGHIJKLMNOPQRSTUVWXYZ";
}

.matrix-column:nth-child(3n)::before {
  content: "アカサタナハマヤラワイキシチニヒミリウクスツヌフムユルエケセテネヘメレオコソトノホモヨロヲン0987654321";
}

.matrix-column:nth-child(4n)::before {
  content: "ンヲロヨモホノトソコオレメヘネテセケエルユムフヌツスクウリミヒニチシキイワラヤマハナタサカア";
}

.matrix-column:nth-child(5n)::before {
  content: "ガザダバパギジヂビピグズヅブプゲゼデベペゴゾドボポヴァィゥェォャュョッ!@#$%^&*()_+-=[]{}|;:,.<>?";
}

@keyframes matrix-fall {
  0% { transform: translateY(-10%); opacity: 1; }
  100% { transform: translateY(200%); opacity: 0; }
}

@media (max-width: 768px) {
  .matrix-column { font-size: 14px; line-height: 16px; width: 18px; }
  .matrix-column:nth-child(1) { left: 0px; }
  .matrix-column:nth-child(2) { left: 20px; }
  .matrix-column:nth-child(3) { left: 40px; }
  .matrix-column:nth-child(4) { left: 60px; }
  .matrix-column:nth-child(5) { left: 80px; }
  .matrix-column:nth-child(6) { left: 100px; }
  .matrix-column:nth-child(7) { left: 120px; }
  .matrix-column:nth-child(8) { left: 140px; }
  .matrix-column:nth-child(9) { left: 160px; }
  .matrix-column:nth-child(10) { left: 180px; }
  .matrix-column:nth-child(11) { left: 200px; }
  .matrix-column:nth-child(12) { left: 220px; }
  .matrix-column:nth-child(13) { left: 240px; }
  .matrix-column:nth-child(14) { left: 260px; }
  .matrix-column:nth-child(15) { left: 280px; }
  .matrix-column:nth-child(16) { left: 300px; }
  .matrix-column:nth-child(17) { left: 320px; }
  .matrix-column:nth-child(18) { left: 340px; }
  .matrix-column:nth-child(19) { left: 360px; }
  .matrix-column:nth-child(20) { left: 380px; }
  .matrix-column:nth-child(21) { left: 400px; }
  .matrix-column:nth-child(22) { left: 420px; }
  .matrix-column:nth-child(23) { left: 440px; }
  .matrix-column:nth-child(24) { left: 460px; }
  .matrix-column:nth-child(25) { left: 480px; }
  .matrix-column:nth-child(26) { left: 500px; }
  .matrix-column:nth-child(27) { left: 520px; }
  .matrix-column:nth-child(28) { left: 540px; }
  .matrix-column:nth-child(29) { left: 560px; }
  .matrix-column:nth-child(30) { left: 580px; }
  .matrix-column:nth-child(31) { left: 600px; }
  .matrix-column:nth-child(32) { left: 620px; }
  .matrix-column:nth-child(33) { left: 640px; }
  .matrix-column:nth-child(34) { left: 660px; }
  .matrix-column:nth-child(35) { left: 680px; }
  .matrix-column:nth-child(36) { left: 700px; }
  .matrix-column:nth-child(37) { left: 720px; }
  .matrix-column:nth-child(38) { left: 740px; }
  .matrix-column:nth-child(39) { left: 760px; }
  .matrix-column:nth-child(40) { left: 780px; }
  .matrix-pattern { width: 800px; }
}

@media (max-width: 480px) {
  .matrix-column { font-size: 12px; line-height: 14px; width: 14px; }
  .matrix-column:nth-child(1) { left: 0px; }
  .matrix-column:nth-child(2) { left: 15px; }
  .matrix-column:nth-child(3) { left: 30px; }
  .matrix-column:nth-child(4) { left: 45px; }
  .matrix-column:nth-child(5) { left: 60px; }
  .matrix-column:nth-child(6) { left: 75px; }
  .matrix-column:nth-child(7) { left: 90px; }
  .matrix-column:nth-child(8) { left: 105px; }
  .matrix-column:nth-child(9) { left: 120px; }
  .matrix-column:nth-child(10) { left: 135px; }
  .matrix-column:nth-child(11) { left: 150px; }
  .matrix-column:nth-child(12) { left: 165px; }
  .matrix-column:nth-child(13) { left: 180px; }
  .matrix-column:nth-child(14) { left: 195px; }
  .matrix-column:nth-child(15) { left: 210px; }
  .matrix-column:nth-child(16) { left: 225px; }
  .matrix-column:nth-child(17) { left: 240px; }
  .matrix-column:nth-child(18) { left: 255px; }
  .matrix-column:nth-child(19) { left: 270px; }
  .matrix-column:nth-child(20) { left: 285px; }
  .matrix-column:nth-child(21) { left: 300px; }
  .matrix-column:nth-child(22) { left: 315px; }
  .matrix-column:nth-child(23) { left: 330px; }
  .matrix-column:nth-child(24) { left: 345px; }
  .matrix-column:nth-child(25) { left: 360px; }
  .matrix-column:nth-child(26) { left: 375px; }
  .matrix-column:nth-child(27) { left: 390px; }
  .matrix-column:nth-child(28) { left: 405px; }
  .matrix-column:nth-child(29) { left: 420px; }
  .matrix-column:nth-child(30) { left: 435px; }
  .matrix-column:nth-child(31) { left: 450px; }
  .matrix-column:nth-child(32) { left: 465px; }
  .matrix-column:nth-child(33) { left: 480px; }
  .matrix-column:nth-child(34) { left: 495px; }
  .matrix-column:nth-child(35) { left: 510px; }
  .matrix-column:nth-child(36) { left: 525px; }
  .matrix-column:nth-child(37) { left: 540px; }
  .matrix-column:nth-child(38) { left: 555px; }
  .matrix-column:nth-child(39) { left: 570px; }
  .matrix-column:nth-child(40) { left: 585px; }
  .matrix-pattern { width: 600px; }
}