:root {
  /* Typography compliance: IBM Plex Mono` for body copy; Space Mono` in 700 for oversized `haru.works` titles. */
  --wet-paper: #F7F0DF;
  --sumi: #121016;
  --sakura: #FF2EA6;
  --acid: #B6FF00;
  --cyan: #00E5FF;
  --tangerine: #FF7A00;
  --violet: #6C2DFF;
  --graphite: #6F7480;
  --station-hue: #00E5FF;
  --pigment-opacity: .72;
  --border-progress: 0%;
  --mis-x: 14px;
  --mis-y: -10px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--sumi); }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(0,229,255,.18), transparent 22rem),
    radial-gradient(circle at 78% 18%, rgba(255,46,166,.18), transparent 21rem),
    linear-gradient(135deg, #121016 0%, #1a151f 48%, #08070a 100%);
  color: var(--wet-paper);
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

a { color: inherit; text-decoration: none; }

.bench-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .45;
  background-image:
    linear-gradient(rgba(247,240,223,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,240,223,.025) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1.2px);
  background-size: 72px 72px, 72px 72px, 5px 5px;
  mix-blend-mode: screen;
}

.cursor-halo {
  position: fixed;
  left: 0;
  top: 0;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  opacity: .38;
  background: radial-gradient(circle, rgba(0,229,255,.36), rgba(255,46,166,.14) 38%, transparent 70%);
  filter: blur(16px);
  transform: translate3d(-50%, -50%, 0);
  mix-blend-mode: screen;
}

.fixed-register { position: fixed; inset: 20px; pointer-events: none; z-index: 4; }
.fixed-register span { position: absolute; width: 26px; height: 26px; border: 1px solid rgba(182,255,0,.45); }
.fixed-register span::before, .fixed-register span::after { content: ""; position: absolute; background: rgba(0,229,255,.5); }
.fixed-register span::before { width: 38px; height: 1px; left: -6px; top: 12px; }
.fixed-register span::after { width: 1px; height: 38px; left: 12px; top: -6px; }
.fixed-register span:nth-child(1) { left: 0; top: 0; }
.fixed-register span:nth-child(2) { right: 0; top: 0; }
.fixed-register span:nth-child(3) { left: 0; bottom: 0; }
.fixed-register span:nth-child(4) { right: 0; bottom: 0; }

.station {
  --local-progress: 0;
  position: relative;
  min-height: 112vh;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(70px, 8vw, 120px) clamp(22px, 6vw, 92px);
}

.station::before {
  content: attr(data-station);
  position: absolute;
  top: 42px;
  left: clamp(18px, 4vw, 62px);
  z-index: 3;
  color: var(--station-hue);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.station::after {
  content: "";
  position: absolute;
  inset: 8% 6%;
  z-index: -2;
  background:
    linear-gradient(105deg, transparent 0 49%, rgba(247,240,223,.04) 50%, transparent 51% 100%),
    repeating-linear-gradient(90deg, rgba(111,116,128,.11) 0 1px, transparent 1px 88px);
  opacity: .85;
  transform: skewY(-2deg);
}

.paper-sheet {
  position: absolute;
  inset: 9% 9% 7% 7%;
  background: linear-gradient(115deg, rgba(247,240,223,.95), rgba(247,240,223,.63));
  clip-path: polygon(3% 1%, 94% 5%, 98% 91%, 8% 98%, 0 24%);
  transform: rotate(-2.5deg);
  z-index: -1;
  box-shadow: 0 26px 90px rgba(0,0,0,.4);
  mix-blend-mode: luminosity;
  opacity: .28;
}

.wash-layer, .photo-layer, .trace-layer { position: absolute; inset: 0; will-change: transform; }
.wash-layer { z-index: 0; mix-blend-mode: screen; }
.photo-layer { z-index: 1; }
.trace-layer { z-index: 2; }

.bloom, .drip {
  position: absolute;
  display: block;
  border-radius: 47% 53% 61% 39% / 39% 46% 54% 61%;
  opacity: var(--pigment-opacity);
  filter: blur(2px) saturate(1.35);
  animation: breathe 9s ease-in-out infinite alternate;
}
.bloom::after, .drip::after { content: ""; position: absolute; inset: 12%; border-radius: inherit; border: 1px dashed currentColor; opacity: .24; }
.cyan { background: radial-gradient(circle at 38% 36%, rgba(247,240,223,.55), rgba(0,229,255,.55) 31%, rgba(0,229,255,.08) 67%, transparent 72%); color: var(--cyan); }
.sakura { background: radial-gradient(circle at 44% 42%, rgba(255,46,166,.66), rgba(255,46,166,.16) 58%, transparent 72%); color: var(--sakura); }
.acid { background: radial-gradient(circle, rgba(182,255,0,.7), rgba(182,255,0,.13) 62%, transparent 74%); color: var(--acid); }
.violet { background: radial-gradient(circle, rgba(108,45,255,.64), rgba(108,45,255,.12) 61%, transparent 73%); color: var(--violet); }
.tangerine { background: radial-gradient(circle, rgba(255,122,0,.62), rgba(255,122,0,.12) 60%, transparent 74%); color: var(--tangerine); }
.bloom-a { width: 48vw; height: 38vw; left: 31%; top: 3%; }
.bloom-b { width: 25vw; height: 23vw; left: 2%; bottom: 10%; animation-delay: -2s; }
.bloom-c { width: 42vw; height: 34vw; right: -5%; top: 20%; }
.bloom-d { width: 24vw; height: 30vw; left: 12%; top: 6%; animation-delay: -3s; }
.bloom-e { width: 55vw; height: 41vw; left: 5%; top: 18%; }
.bloom-f { width: 35vw; height: 28vw; right: 15%; top: 6%; }
.bloom-g { width: 26vw; height: 34vw; left: 6%; bottom: 2%; animation-delay: -4s; }
.bloom-h { width: 48vw; height: 40vw; right: 2%; bottom: 5%; }
.bloom-i { width: 26vw; height: 23vw; left: 10%; top: 14%; }
.drip { width: 12vw; min-width: 120px; height: 42vh; border-radius: 50% 45% 62% 44% / 12% 18% 72% 80%; opacity: .45; }
.drip-a { right: 14%; top: 34%; }
.drip-b { left: 72%; top: 12%; }
.drip-c { left: 48%; top: -5%; }

.photo-fragment {
  position: absolute;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(247,240,223,.23);
  box-shadow: 0 22px 70px rgba(0,0,0,.45), inset 0 0 0 8px rgba(247,240,223,.035);
  clip-path: polygon(2% 0, 100% 5%, 96% 92%, 9% 100%, 0 31%);
  background-color: #211b20;
  background-blend-mode: screen, overlay, normal;
}
.photo-fragment::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 18%, rgba(247,240,223,.34) 19% 23%, transparent 24%),
    repeating-linear-gradient(35deg, rgba(247,240,223,.13) 0 2px, transparent 2px 16px),
    radial-gradient(circle at 25% 70%, rgba(255,46,166,.35), transparent 24%),
    radial-gradient(circle at 76% 30%, rgba(0,229,255,.34), transparent 27%),
    linear-gradient(135deg, rgba(18,16,22,.2), rgba(18,16,22,.84));
  filter: contrast(1.12) saturate(1.4);
}
.photo-fragment::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(182,255,0,.22) 0 8px, transparent 8px), linear-gradient(rgba(255,122,0,.25) 0 6px, transparent 6px); mix-blend-mode: screen; }
.photo-noise { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(247,240,223,.22) 1px, transparent 1.5px); background-size: 7px 7px; opacity: .2; }
figcaption { position: absolute; left: 16px; bottom: 14px; z-index: 1; max-width: 80%; font-size: 11px; line-height: 1.4; color: var(--wet-paper); background: rgba(18,16,22,.72); padding: 8px 10px; }
.brush-photo { width: min(520px, 48vw); height: 56vh; right: 8%; top: 24%; transform: rotate(4deg); }
.schematic-photo { width: min(610px, 55vw); height: 58vh; left: 8%; top: 22%; transform: rotate(-5deg); }
.wire-photo { width: min(560px, 52vw); height: 60vh; right: 6%; top: 14%; transform: rotate(2deg); }
.ruler-photo { width: min(620px, 54vw); height: 55vh; left: 9%; top: 28%; transform: rotate(5deg); }
.artifact-photo { width: min(540px, 45vw); height: 52vh; right: 12%; top: 25%; transform: rotate(-4deg); border-radius: 47% 53% 44% 56% / 38% 35% 65% 62%; }

.technical-frame {
  position: absolute;
  border: 1px solid transparent;
  background:
    linear-gradient(90deg, var(--sakura) var(--border-progress), transparent 0) top left / 100% 2px no-repeat,
    linear-gradient(180deg, var(--acid) var(--border-progress), transparent 0) top right / 2px 100% no-repeat,
    linear-gradient(270deg, var(--cyan) var(--border-progress), transparent 0) bottom right / 100% 2px no-repeat,
    linear-gradient(0deg, var(--tangerine) var(--border-progress), transparent 0) bottom left / 2px 100% no-repeat;
  filter: drop-shadow(0 0 10px rgba(0,229,255,.22));
}
.technical-frame::before { content: ""; position: absolute; inset: var(--mis-y) var(--mis-x) calc(var(--mis-y) * -1) calc(var(--mis-x) * -1); border: 1px dashed color-mix(in srgb, var(--station-hue), transparent 28%); opacity: .62; }
.technical-frame::after { content: ""; position: absolute; width: 52px; height: 52px; right: -26px; top: -26px; border: 1px solid var(--station-hue); transform: rotate(45deg); background: rgba(18,16,22,.46); }
.hero-frame { inset: 16% 12% 17% 10%; transform: rotate(-1.5deg); }
.slant-frame { inset: 18% 8% 14% 27%; transform: rotate(2deg) skewX(-5deg); }
.fracture-frame { inset: 13% 18% 20% 7%; transform: rotate(-3deg); }
.double-frame { inset: 17% 9% 15% 23%; transform: rotate(1deg); }
.release-frame { inset: 16% 10% 17% 11%; transform: rotate(-2deg); }
.corner-dot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 16px var(--acid); }
.c1 { left: -4px; top: -4px; } .c2 { right: -4px; top: -4px; } .c3 { right: -4px; bottom: -4px; } .c4 { left: -4px; bottom: -4px; }

.hero-title-wrap, .station .trace-layer > h2, .note-column, .annotation-strip, .parts-list, .closing, .station-label, .poster-word, .side-poem, .return-tag { position: absolute; z-index: 3; }
.hero-title-wrap { left: 11%; top: 28%; width: min(760px, 74vw); color: var(--sumi); mix-blend-mode: normal; }
.station-kicker, .station-label { color: var(--station-hue); letter-spacing: .18em; text-transform: uppercase; font-size: 12px; }
h1, h2 { margin: 0; font-family: "Space Mono", ui-monospace, monospace; font-weight: 700; letter-spacing: -.08em; text-transform: lowercase; }
h1 { font-size: clamp(58px, 14vw, 190px); line-height: .78; color: var(--sumi); text-shadow: 3px 0 var(--cyan), -2px 3px rgba(255,46,166,.75); }
h2 { max-width: 720px; font-size: clamp(42px, 7.7vw, 112px); line-height: .86; color: var(--wet-paper); text-shadow: 2px 2px rgba(255,46,166,.55), -2px 0 rgba(0,229,255,.45); }
.serif-fragment { font-family: "Noto Serif JP", Georgia, serif; color: var(--sakura); font-size: clamp(18px, 2vw, 28px); margin: 20px 0; }
.manifesto { max-width: 560px; color: var(--wet-paper); background: rgba(18,16,22,.78); padding: 18px 20px; line-height: 1.65; border-left: 5px solid var(--cyan); box-shadow: 8px 8px 0 rgba(255,46,166,.42); }
.hero-title-wrap .manifesto { color: var(--wet-paper); }
.vertical-command { position: absolute; right: 28px; top: 18%; writing-mode: vertical-rl; letter-spacing: .18em; color: var(--acid); text-transform: uppercase; font-size: 12px; }
.lab-tag { display: inline-block; margin-top: 16px; padding: 13px 18px; color: var(--sumi); background: var(--acid); font-weight: 700; transform: rotate(-2deg); box-shadow: 7px 7px 0 var(--sakura); transition: transform .25s ease, box-shadow .25s ease; }
.lab-tag:hover { transform: rotate(1deg) translateY(-3px); box-shadow: 10px 10px 0 var(--cyan); }
.station-label { left: 11%; top: 24%; }
#trace h2 { right: 9%; top: 31%; }
#spark h2 { left: 9%; top: 36%; }
#assemble h2 { right: 9%; top: 27%; }
#release h2 { left: 11%; top: 28%; }
.note-column { right: 12%; bottom: 16%; width: min(430px, 38vw); background: rgba(18,16,22,.84); color: var(--wet-paper); padding: 22px; border: 1px solid rgba(182,255,0,.4); box-shadow: -10px 10px 0 rgba(0,229,255,.28); }
.note-column p { margin: 0 0 14px; line-height: 1.55; }
.note-column b { color: var(--acid); }
.side-poem { left: 8%; bottom: 12%; max-width: 390px; background: rgba(247,240,223,.9); color: var(--sumi); padding: 18px 22px; transform: rotate(-4deg); }
.poster-word { right: 6%; bottom: 14%; font-family: "Archivo Black", Impact, sans-serif; font-size: clamp(68px, 13vw, 210px); color: transparent; -webkit-text-stroke: 2px var(--sakura); opacity: .78; transform: rotate(7deg); }
.annotation-strip { left: 8%; bottom: 17%; display: flex; flex-wrap: wrap; gap: 10px; max-width: 560px; }
.annotation-strip span { background: var(--wet-paper); color: var(--sumi); padding: 10px 12px; border: 1px solid var(--sakura); box-shadow: 4px 4px 0 var(--sakura); transform: rotate(-1deg); }
.parts-list { right: 11%; bottom: 18%; width: min(510px, 42vw); margin: 0; padding: 22px 22px 22px 44px; background: rgba(18,16,22,.82); border: 1px solid var(--tangerine); line-height: 1.7; }
.parts-list li::marker { color: var(--acid); }
.closing { left: 12%; bottom: 18%; }
.return-tag { left: 12%; bottom: 10%; }

.station-nav { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 6; display: flex; gap: 6px; padding: 7px; background: rgba(18,16,22,.78); border: 1px solid rgba(247,240,223,.24); backdrop-filter: blur(10px); }
.station-nav a { padding: 8px 10px; color: var(--graphite); font-size: 12px; text-transform: uppercase; letter-spacing: .13em; transition: color .2s ease, background .2s ease; }
.station-nav a.active { color: var(--sumi); background: var(--station-hue); }

@keyframes breathe { from { transform: scale(.96) rotate(-3deg); border-radius: 54% 46% 38% 62% / 45% 56% 44% 55%; } to { transform: scale(1.08) rotate(5deg); border-radius: 38% 62% 59% 41% / 58% 43% 57% 42%; } }

@media (max-width: 820px) {
  .station { min-height: 118vh; padding-inline: 18px; }
  .photo-fragment { width: 72vw; height: 38vh; opacity: .76; }
  .brush-photo, .wire-photo, .artifact-photo { right: -8%; top: 46%; }
  .schematic-photo, .ruler-photo { left: -12%; top: 48%; }
  .hero-title-wrap { left: 7%; top: 20%; width: 86vw; }
  h1 { font-size: clamp(52px, 19vw, 110px); }
  h2 { font-size: clamp(38px, 14vw, 76px); }
  #trace h2, #spark h2, #assemble h2, #release h2 { left: 7%; right: 5%; top: 22%; }
  .station-label { left: 7%; top: 16%; }
  .note-column, .parts-list, .closing { left: 7%; right: auto; bottom: 12%; width: 86vw; }
  .side-poem, .poster-word { display: none; }
  .annotation-strip { left: 7%; bottom: 13%; }
  .station-nav { width: calc(100% - 24px); overflow: auto; justify-content: start; }
}