:root {
  /* DESIGN FONT TOKENS: IBM Plex Mono* for timestamps; Inter* for legible annotations; Space Grotesk “renai; Space Grotesk* for huge cropped titles. */
  --black: #0B0D10;
  --white: #F2F4F7;
  --gray: #CDD3DA;
  --graphite: #66717F;
  --cyan: #52E3FF;
  --violet: #7A6BFF;
  --coral: #FF5E6C;
  --ink: #1B2028;
  --seam-x: 50vw;
  --blur: 18px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--black);
  font-family: Inter, Arial, sans-serif;
  overflow-x: hidden;
}

body.inspecting { --blur: 5px; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .18;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(11,13,16,.45) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(82,227,255,.08), transparent 23%, rgba(255,94,108,.07) 24%, transparent 55%);
  background-size: 7px 7px, 220px 100%;
  mix-blend-mode: multiply;
}

.scanner-band {
  position: fixed;
  left: 0;
  top: -18vh;
  width: 100%;
  height: 15vh;
  z-index: 25;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(82,227,255,.55), rgba(242,244,247,.75), rgba(255,94,108,.28), transparent);
  filter: blur(10px);
}

.scanner-band.sweep { animation: sweep 900ms cubic-bezier(.2,.9,.2,1); }

.seam {
  position: fixed;
  top: 0;
  left: calc(var(--seam-x) - 13px);
  width: 26px;
  height: 100vh;
  z-index: 20;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(82,227,255,.7), rgba(242,244,247,.5), rgba(255,94,108,.58), transparent),
    repeating-linear-gradient(180deg, rgba(11,13,16,.9) 0 8px, transparent 8px 18px);
  filter: blur(2px);
  transform: skewX(-1deg);
  animation: seamWobble 2.7s infinite steps(2);
}

.seam::before,
.seam::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--black);
  opacity: .45;
}

.seam::before { left: 4px; }
.seam::after { right: 5px; background: var(--cyan); }

.seam-code {
  position: absolute;
  top: 50%;
  left: -42px;
  transform: rotate(-90deg);
  transform-origin: center;
  white-space: nowrap;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--coral);
  background: var(--white);
  padding: 5px 9px;
}

.margin-notes {
  position: fixed;
  left: calc(var(--seam-x) - 96px);
  top: 22px;
  z-index: 24;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.margin-notes a {
  color: var(--black);
  background: rgba(242,244,247,.82);
  border: 1px solid rgba(11,13,16,.75);
  text-decoration: none;
  padding: 5px 8px;
  transform: rotate(-1deg);
  box-shadow: 3px 3px 0 rgba(82,227,255,.65);
}

.margin-notes a:nth-child(even) { transform: rotate(1.5deg); box-shadow: 3px 3px 0 rgba(255,94,108,.55); }
.margin-notes a.active { background: var(--black); color: var(--white); }

.bench {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, var(--seam-x)) minmax(0, calc(100vw - var(--seam-x)));
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.bench::before {
  content: attr(data-index) " / " attr(data-word);
  position: absolute;
  left: 22px;
  bottom: 18px;
  z-index: 4;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--graphite);
}

.panel {
  min-height: 100vh;
  position: relative;
  padding: clamp(24px, 5vw, 72px);
  overflow: hidden;
}

.panel-left { background: var(--white); }
.panel-right { background: var(--ink); color: var(--white); }
.dark-left { background: var(--black); color: var(--white); }
.pale-right { background: var(--gray); color: var(--black); }
.charcoal { background: var(--ink); color: var(--white); }

.mono,
.rail {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.rail {
  position: absolute;
  top: 26px;
  left: 28px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--graphite);
}

.title-renai {
  margin: 7vh 0 0 -1vw;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(92px, 22vw, 280px);
  line-height: .74;
  letter-spacing: -.09em;
  color: var(--black);
  transform: scaleX(.9);
  text-shadow: -5px 0 0 rgba(82,227,255,.58), 5px 2px 0 rgba(255,94,108,.45);
}

.works-stack {
  position: absolute;
  right: 7vw;
  top: 46vh;
  display: flex;
  gap: 5px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(42px, 8vw, 110px);
  font-weight: 700;
  letter-spacing: -.06em;
  text-transform: uppercase;
}

.works-stack span {
  background: var(--black);
  color: var(--white);
  padding: .02em .09em;
  transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, -1deg));
  box-shadow: 4px 4px 0 var(--cyan), -3px -2px 0 var(--coral);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
}

.note,
.receipt,
.memory-card,
.chat-scrap,
.noise-sheet,
.final-note {
  position: absolute;
  max-width: 320px;
  padding: 16px 18px;
  background: rgba(242,244,247,.92);
  color: var(--black);
  border: 1px solid var(--black);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  box-shadow: 7px 7px 0 rgba(11,13,16,.18);
}

.note { left: 18vw; bottom: 16vh; transform: rotate(-2deg); }
.receipt { left: 16vw; top: 48vh; background: var(--white); transform: rotate(2deg); }
.memory-card { right: 11vw; bottom: 16vh; transform: rotate(-3deg); }
.chat-scrap { right: 8vw; top: 20vh; transform: rotate(3deg); }
.noise-sheet { right: 10vw; top: 34vh; font-size: clamp(24px, 4vw, 58px); max-width: 520px; }
.final-note { right: 7vw; bottom: 20vh; }

.blurred { filter: blur(var(--blur)); opacity: .74; transition: filter 360ms, opacity 360ms, transform 360ms; }
.sharp, .focusable { transition: filter 300ms, transform 300ms; }
.bench.active .focusable, .bench.active .sharp { filter: blur(0); }
.bench:not(.active) .focusable, .bench:not(.active) .sharp { filter: blur(7px); }

.strip {
  position: absolute;
  left: 10vw;
  top: 18vh;
  width: 480px;
  padding: 8px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  background: var(--gray);
  border: 1px solid var(--black);
  transform: rotate(-9deg);
  white-space: nowrap;
}

.paper-layer {
  position: absolute;
  inset: 12vh 8vw auto auto;
  width: min(410px, 38vw);
  min-height: 250px;
  padding: 28px;
  background: rgba(205,211,218,.85);
  color: var(--black);
  clip-path: polygon(0 6%, 94% 0, 100% 82%, 7% 100%);
  font-family: "IBM Plex Mono", monospace;
}

.blob {
  position: absolute;
  border-radius: 48% 52% 62% 38% / 44% 36% 64% 56%;
  background:
    radial-gradient(circle at 34% 28%, rgba(242,244,247,.75), transparent 27%),
    radial-gradient(circle at 68% 70%, rgba(122,107,255,.38), transparent 31%),
    rgba(205,211,218,.54);
  filter: blur(var(--blur));
  mix-blend-mode: screen;
  animation: breathe 5.5s ease-in-out infinite alternate;
}

.blob-main { width: 58vw; height: 58vw; left: -14vw; top: 13vh; }
.blob-soft { width: 46vw; height: 36vw; left: -8vw; top: 7vh; background-color: rgba(102,113,127,.55); }
.blob-cut { width: 42vw; height: 50vw; left: -12vw; bottom: -10vh; }
.blob-align { width: 54vw; height: 42vw; left: -16vw; top: 24vh; }
.blob-final { width: 65vw; height: 44vw; left: -12vw; top: 14vh; background-color: rgba(82,227,255,.18); }

.stamp,
.stamp-button {
  position: absolute;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--black);
  background: var(--cyan);
  border: 2px solid var(--black);
  padding: 12px 16px;
  box-shadow: 5px 5px 0 var(--coral);
  transform: rotate(-4deg);
}

.stamp { right: 9vw; bottom: 9vh; }
.stamp.violet { background: var(--violet); color: var(--white); }
.stamp-button { left: 12vw; bottom: 14vh; cursor: pointer; }
.stamp-button.final { left: auto; right: 12vw; bottom: 9vh; text-decoration: none; }
.stamp-button:active { transform: rotate(-4deg) translate(3px, 3px); box-shadow: 2px 2px 0 var(--coral); }

.chapter {
  margin: 14vh 0 0 4vw;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(76px, 16vw, 230px);
  line-height: .78;
  letter-spacing: -.08em;
  text-transform: uppercase;
}

.glitch { position: relative; text-shadow: -4px 0 var(--cyan), 4px 2px var(--coral); }
.glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 8px;
  top: 2px;
  color: transparent;
  -webkit-text-stroke: 1px var(--violet);
  clip-path: inset(42% 0 23% 0);
}

.compressed { transform: scaleX(.72); transform-origin: left; }
.archive-title { font-size: clamp(62px, 12vw, 170px); }

.big-copy {
  position: absolute;
  right: -4vw;
  top: 8vh;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(100px, 19vw, 260px);
  letter-spacing: -.08em;
  color: rgba(11,13,16,.22);
  transform: rotate(90deg);
}

.diagram {
  position: absolute;
  left: 8vw;
  bottom: 14vh;
  width: 34vw;
  height: 22vh;
  border: 1px solid var(--graphite);
}

.diagram span {
  position: absolute;
  width: 42%;
  height: 1px;
  background: var(--cyan);
  transform-origin: left;
}
.diagram span:nth-child(1) { left: 12%; top: 22%; transform: rotate(18deg); }
.diagram span:nth-child(2) { left: 26%; top: 52%; transform: rotate(-11deg); background: var(--coral); }
.diagram span:nth-child(3) { left: 46%; top: 72%; transform: rotate(-38deg); background: var(--violet); }

.tape,
.coral-mark {
  position: absolute;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .15em;
  background: var(--white);
  color: var(--black);
  padding: 8px 12px;
  border: 1px solid var(--black);
}
.tape-one { left: 12vw; top: 18vh; transform: rotate(-12deg); }
.coral-mark { right: 8vw; bottom: 19vh; background: var(--coral); }

.slash-collage {
  position: absolute;
  right: 7vw;
  top: 30vh;
  display: grid;
  gap: 14px;
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
}
.slash-collage span {
  background: var(--black);
  color: var(--white);
  padding: 10px 14px;
  clip-path: polygon(6% 0, 100% 0, 94% 100%, 0 100%);
  transform: rotate(var(--r, -3deg));
}
.slash-collage span:nth-child(2) { --r: 2deg; background: var(--graphite); }
.slash-collage span:nth-child(3) { --r: -1deg; background: var(--coral); }

.registration-field {
  position: absolute;
  inset: auto 8vw 15vh 11vw;
  height: 34vh;
  border: 1px dashed var(--graphite);
}
.registration-field i {
  position: absolute;
  width: 38px;
  height: 38px;
  border: 2px solid var(--cyan);
  border-radius: 50%;
}
.registration-field i::before,
.registration-field i::after {
  content: "";
  position: absolute;
  background: var(--coral);
}
.registration-field i::before { width: 54px; height: 2px; left: -8px; top: 17px; }
.registration-field i::after { width: 2px; height: 54px; left: 17px; top: -8px; }
.registration-field i:nth-child(1) { left: 8%; top: 14%; }
.registration-field i:nth-child(2) { right: 12%; top: 20%; }
.registration-field i:nth-child(3) { left: 28%; bottom: 10%; }
.registration-field i:nth-child(4) { right: 24%; bottom: 14%; }

.overprint {
  position: absolute;
  right: 8vw;
  top: 15vh;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(92px, 14vw, 190px);
  font-weight: 700;
  line-height: .72;
  letter-spacing: -.1em;
  color: var(--black);
  text-shadow: -7px 0 rgba(82,227,255,.75), 7px 3px rgba(255,94,108,.55);
}

.archive-list {
  position: absolute;
  left: 11vw;
  bottom: 18vh;
  display: grid;
  gap: 10px;
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
}
.archive-list span {
  background: var(--gray);
  border: 1px solid var(--black);
  padding: 9px 13px;
  transform: rotate(-1deg);
}
.archive-list span:nth-child(even) { transform: rotate(2deg); }

.final-copy {
  position: absolute;
  left: 7vw;
  top: 18vh;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(54px, 9vw, 130px);
  letter-spacing: -.07em;
  text-shadow: -4px 0 var(--cyan), 4px 2px var(--coral);
}

.crop {
  position: absolute;
  width: 42px;
  height: 42px;
  border-color: var(--black);
}
.crop-tl { left: 22px; top: 22px; border-left: 2px solid; border-top: 2px solid; }
.crop-br { right: 22px; bottom: 22px; border-right: 2px solid; border-bottom: 2px solid; }

@keyframes breathe {
  from { transform: translate3d(0,0,0) rotate(-3deg) scale(.98); border-radius: 46% 54% 66% 34% / 45% 41% 59% 55%; }
  to { transform: translate3d(18px,-16px,0) rotate(4deg) scale(1.08); border-radius: 61% 39% 42% 58% / 57% 31% 69% 43%; }
}

@keyframes seamWobble {
  0%, 100% { transform: translateX(0) skewX(-1deg); filter: blur(2px); }
  35% { transform: translateX(-4px) skewX(4deg); filter: blur(8px); }
  70% { transform: translateX(3px) skewX(-5deg); filter: blur(4px); }
}

@keyframes sweep {
  0% { top: -18vh; opacity: 0; }
  18% { opacity: .95; }
  100% { top: 112vh; opacity: 0; }
}

@media (max-width: 760px) {
  :root { --seam-x: 50vw; }
  .margin-notes { left: 12px; top: 12px; flex-direction: row; flex-wrap: wrap; width: calc(100vw - 24px); }
  .margin-notes a { font-size: 9px; padding: 4px 6px; }
  .panel { padding: 58px 18px 28px; }
  .rail { display: none; }
  .title-renai { margin-top: 18vh; font-size: 25vw; }
  .works-stack { right: 4vw; top: 55vh; }
  .note, .receipt, .memory-card, .chat-scrap, .noise-sheet, .final-note { max-width: 42vw; padding: 10px; font-size: 11px; }
  .chapter { margin-left: 0; font-size: 18vw; }
  .stamp-button, .stamp { font-size: 10px; padding: 9px 10px; }
}