:root {
  /* Inter* Inter** International Typographic translated interactive stage: baselines Interpret AI* AI** secondary whisper systems: systems*: systems**: multiple exploring possibility from angles. mood lucid Grotesk* Grotesk** `simai.xyz` massive */
  --paper: #F4F6F8;
  --ink: #171A1F;
  --grid: #AEB7C2;
  --slate: #5E6A78;
  --violet: #6D5CFF;
  --mint: #43D9B8;
  --yellow: #FFCF5A;
  --col: calc((100vw - 96px) / 12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.poster-shell {
  position: relative;
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(174,183,194,.24) 1px, transparent 1px) 48px 0 / var(--col) 100%,
    linear-gradient(0deg, rgba(174,183,194,.18) 1px, transparent 1px) 0 0 / 100% 64px,
    var(--paper);
}

.plotter-border {
  position: fixed;
  inset: 14px;
  z-index: 20;
  pointer-events: none;
}

.plotter-border span { position: absolute; background: var(--ink); }
.plotter-border span:nth-child(1) { left: 0; top: 0; width: 0; height: 2px; animation: drawX 1s .1s forwards; }
.plotter-border span:nth-child(2) { right: 0; top: 0; width: 2px; height: 0; animation: drawY .8s 1s forwards; }
.plotter-border span:nth-child(3) { right: 0; bottom: 0; width: 0; height: 2px; animation: drawX 1s 1.8s forwards; }
.plotter-border span:nth-child(4) { left: 0; bottom: 0; width: 2px; height: 0; animation: drawY .8s 2.8s forwards; }

@keyframes drawX { to { width: 100%; } }
@keyframes drawY { to { height: 100%; } }

.rail-index {
  position: fixed;
  left: 30px;
  top: 30px;
  z-index: 10;
  width: 164px;
  display: grid;
  gap: 13px;
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.rail-index a {
  color: var(--ink);
  text-decoration: none;
  border-top: 1px solid var(--grid);
  padding-top: 8px;
}

.rail-stamp {
  padding: 10px;
  border: 1px solid var(--ink);
  background: rgba(244,246,248,.76);
  font-weight: 800;
}

.jp-note {
  writing-mode: vertical-rl;
  height: 138px;
  font-family: "Noto Sans JP", Inter, sans-serif;
  color: var(--slate);
}

.plate {
  position: relative;
  min-height: 100vh;
  padding: 48px 48px 48px 232px;
  overflow: hidden;
  isolation: isolate;
}

.grid-overlay {
  position: absolute;
  inset: 48px;
  border: 1px solid rgba(174,183,194,.65);
  background-image:
    linear-gradient(90deg, rgba(174,183,194,.35) 1px, transparent 1px),
    linear-gradient(0deg, rgba(174,183,194,.25) 1px, transparent 1px);
  background-size: calc(var(--col) * 2) 120px;
  z-index: -2;
}

.plate-label {
  display: flex;
  gap: 24px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate);
}

.wordmark {
  position: absolute;
  left: 205px;
  bottom: -5.7vw;
  margin: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(96px, 20vw, 328px);
  line-height: .72;
  letter-spacing: -.09em;
  color: var(--ink);
  white-space: nowrap;
}

.hero-caption {
  position: absolute;
  left: calc(232px + var(--col));
  top: 26vh;
  width: min(360px, 33vw);
  font-size: clamp(22px, 3vw, 48px);
  font-family: "Space Grotesk", Inter, sans-serif;
  line-height: .94;
  letter-spacing: -.05em;
}

.microcopy {
  margin-top: 22px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: .02em;
  color: var(--slate);
}

.proof-field {
  position: absolute;
  right: 6vw;
  top: 11vh;
  width: min(620px, 45vw);
  height: min(620px, 72vh);
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: skewY(-2deg);
}

.axis {
  position: absolute;
  font-weight: 800;
  font-size: 12px;
  color: var(--slate);
}
.axis-x { bottom: -24px; right: 0; }
.axis-y { left: -22px; top: 0; }
.axis-z { right: 14%; top: 18%; color: var(--violet); transform: rotate(-24deg); }

.shape {
  position: absolute;
  display: block;
  opacity: 0;
  transform: translate(var(--mx, 0), var(--my, 0)) scale(.65) rotate(0deg);
  animation: snapIn .8s forwards, drift 5s 1s infinite alternate ease-in-out;
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}

.shape:hover { transform: translate(var(--mx, 0), var(--my, 0)) scale(1.18) rotate(18deg); }

.circle { width: 88px; height: 88px; border-radius: 50%; left: 16%; top: 18%; animation-delay: 1.1s, 1.9s; }
.square { width: 112px; height: 112px; left: 58%; top: 10%; animation-delay: 1.25s, 2.1s; }
.triangle { width: 0; height: 0; border-left: 58px solid transparent; border-right: 58px solid transparent; border-bottom: 104px solid var(--ink); left: 34%; top: 47%; animation-delay: 1.4s, 2.2s; }
.rect { width: 178px; height: 58px; left: 60%; top: 62%; animation-delay: 1.55s, 2.4s; }
.ring { width: 134px; height: 134px; border-radius: 50%; left: 8%; top: 66%; border: 16px solid var(--yellow); background: transparent; animation-delay: 1.7s, 2.5s; }
.polygon { width: 142px; height: 118px; left: 42%; top: 28%; clip-path: polygon(18% 0, 88% 10%, 100% 58%, 58% 100%, 0 76%); animation-delay: 1.85s, 2.6s; }
.sliver { width: 18px; height: 230px; left: 84%; top: 24%; transform-origin: top; animation-delay: 2s, 2.7s; }

.violet, .violet-soft { background: var(--violet); }
.mint { background: var(--mint); }
.graphite { background: var(--ink); }
.slate { background: var(--slate); }

@keyframes snapIn { to { opacity: .95; transform: translate(var(--mx, 0), var(--my, 0)) scale(1) rotate(var(--rot, 0deg)); } }
@keyframes drift { to { translate: var(--dx, 12px) var(--dy, -10px); rotate: var(--spin, 5deg); } }

.calibration-bar {
  position: absolute;
  right: 48px;
  bottom: 48px;
  display: flex;
  gap: 4px;
}
.calibration-bar i { width: 34px; height: 12px; display: block; background: var(--grid); }
.calibration-bar i:nth-child(2) { background: var(--violet); }
.calibration-bar i:nth-child(3) { background: var(--mint); }
.calibration-bar i:nth-child(4) { background: var(--yellow); }
.calibration-bar i:nth-child(5) { background: var(--ink); }

.plate-two, .plate-three { border-top: 1px solid var(--ink); }

.plate-number {
  position: absolute;
  left: 228px;
  top: 56px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(92px, 15vw, 220px);
  line-height: .75;
  letter-spacing: -.08em;
  color: rgba(23,26,31,.08);
}

.section-copy {
  position: relative;
  z-index: 2;
  width: min(520px, 45vw);
  padding-top: 20vh;
}

.kicker {
  margin: 0 0 18px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--violet);
  font-weight: 800;
}

.section-copy h2 {
  margin: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(42px, 7vw, 112px);
  line-height: .85;
  letter-spacing: -.07em;
}

.section-copy p:not(.kicker) {
  max-width: 410px;
  color: var(--slate);
  font-size: 16px;
  line-height: 1.55;
}

.sister-stage {
  position: absolute;
  right: 7vw;
  top: 16vh;
  width: min(600px, 44vw);
  height: 620px;
  border-top: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
}

.sister-colony { position: absolute; inset: 0; }
.sister-colony span {
  position: absolute;
  width: 76px;
  height: 76px;
  border: 2px solid var(--violet);
  animation: colony 5.2s infinite alternate ease-in-out;
}
.colony-b span { border-color: var(--mint); mix-blend-mode: multiply; animation-name: colonyB; }
.sister-colony span:nth-child(1) { left: 12%; top: 14%; }
.sister-colony span:nth-child(2) { left: 42%; top: 22%; border-radius: 50%; animation-delay: .2s; }
.sister-colony span:nth-child(3) { left: 66%; top: 46%; clip-path: polygon(50% 0, 100% 100%, 0 100%); animation-delay: .4s; }
.sister-colony span:nth-child(4) { left: 22%; top: 64%; width: 126px; height: 44px; animation-delay: .6s; }
.sister-colony span:nth-child(5) { left: 72%; top: 8%; width: 28px; height: 180px; animation-delay: .8s; }

@keyframes colony { to { transform: translate(-18px, 12px) rotate(-9deg); } }
@keyframes colonyB { to { transform: translate(28px, -18px) rotate(14deg) scale(1.08); } }

.cursor-pair {
  position: absolute;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
}
.cursor-a { left: 20%; top: 42%; background: var(--violet); color: var(--paper); }
.cursor-b { left: 30%; top: 48%; background: var(--mint); color: var(--ink); }

.specimen-note {
  position: absolute;
  right: 54px;
  bottom: 74px;
  transform: rotate(-90deg);
  transform-origin: right bottom;
  color: var(--slate);
  font-size: 11px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.xyz-stack {
  position: absolute;
  left: 45%;
  top: 10vh;
  display: grid;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(120px, 18vw, 260px);
  line-height: .66;
  letter-spacing: -.1em;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  transform: rotate(-7deg) skewX(-8deg);
}

.final-copy { margin-left: auto; width: min(500px, 42vw); padding-top: 46vh; }

.rehearsal-board {
  position: absolute;
  left: 232px;
  top: 19vh;
  width: 42vw;
  height: 54vh;
  border: 2px solid var(--ink);
  transform: perspective(800px) rotateX(58deg) rotateZ(-20deg);
  transform-origin: center;
}

.tile, .orbit { position: absolute; display: block; }
.tile { width: 28%; height: 24%; background: rgba(109,92,255,.18); border: 1px solid var(--violet); animation: tileShift 4s infinite alternate ease-in-out; }
.t1 { left: 8%; top: 10%; }
.t2 { left: 44%; top: 18%; background: rgba(67,217,184,.22); border-color: var(--mint); animation-delay: .4s; }
.t3 { left: 18%; top: 52%; background: rgba(255,207,90,.38); border-color: var(--yellow); animation-delay: .8s; }
.t4 { left: 62%; top: 58%; background: rgba(23,26,31,.08); border-color: var(--ink); animation-delay: 1.2s; }
.orbit { width: 90px; height: 90px; border-radius: 50%; border: 3px solid var(--mint); left: 54%; top: 36%; animation: orbit 5s infinite linear; }
.o2 { border-color: var(--violet); width: 58px; height: 58px; left: 36%; top: 38%; animation-duration: 3.5s; animation-direction: reverse; }

@keyframes tileShift { to { transform: translate(16px, -8px) rotate(6deg); } }
@keyframes orbit { to { transform: rotate(360deg) translateX(24px) rotate(-360deg); } }

.proof-stamp {
  position: absolute;
  right: 8%;
  bottom: 10%;
  padding: 12px 14px;
  background: var(--yellow);
  border: 2px solid var(--ink);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  transform: rotate(13deg);
}

body.pointer-active .plotter-border span { background: var(--mint); }
body.pointer-active .rail-stamp { border-color: var(--violet); }

@media (max-width: 900px) {
  :root { --col: calc((100vw - 40px) / 6); }
  .rail-index { position: absolute; left: 22px; top: 22px; width: 138px; }
  .plate { padding: 170px 22px 38px; }
  .grid-overlay { inset: 22px; }
  .wordmark { left: 18px; bottom: -18px; font-size: 27vw; }
  .hero-caption, .proof-field, .sister-stage, .final-copy, .section-copy, .rehearsal-board { position: relative; left: auto; right: auto; top: auto; width: 100%; }
  .hero-caption { margin-top: 2vh; }
  .proof-field { margin-top: 42px; height: 420px; }
  .sister-stage { margin-top: 34px; height: 440px; }
  .section-copy, .final-copy { padding-top: 30px; }
  .plate-number { left: 22px; top: 122px; }
  .xyz-stack { left: 22px; top: 24vh; opacity: .38; }
  .rehearsal-board { margin-top: 26px; height: 330px; }
}