:root {
  --linen: #f5f0e8;
  --aged: #ede4d3;
  --bone: #e8dcc6;
  --indigo: #1c1c2e;
  --ink: #2a2118;
  --charcoal: #3d3529;
  --magenta: #ff2d8a;
  --chartreuse: #c6f400;
  --cyan: #00e5ff;
  --ease: cubic-bezier(0.25, 0.8, 0.25, 1.1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--indigo);
  font-family: "Source Sans 3", Inter, sans-serif;
  line-height: 1.65;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

.defs { position: absolute; width: 0; height: 0; }

.mystery-index {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: 280px;
  padding: 2rem 1.2rem;
  background: linear-gradient(175deg, #f5f0e8 0%, #ede4d3 60%, #e8dcc6 100%);
  filter: url(#paper-noise);
  clip-path: polygon(0 0, 96% 0, 100% 9%, 97% 18%, 100% 31%, 95% 48%, 99% 65%, 96% 82%, 100% 100%, 0 100%);
  border-right: 1px solid rgba(61, 53, 41, 0.35);
  box-shadow: 16px 0 45px rgba(42, 33, 24, 0.18);
}

.mystery-index::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(92deg, rgba(61,53,41,0.035) 0 1px, transparent 1px 13px), radial-gradient(circle at 20% 12%, rgba(255,45,138,0.12), transparent 26%), radial-gradient(circle at 80% 78%, rgba(0,229,255,0.11), transparent 30%);
  pointer-events: none;
}

.index-seal {
  position: relative;
  font-family: "Cormorant Garamond", serif;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--charcoal);
}

.index-kicker, .code, .case-file strong, .badge {
  font-family: "Space Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.index-kicker { position: relative; margin: .2rem 0 2rem; font-size: .72rem; color: var(--magenta); }

.constellation {
  position: absolute;
  left: 28px;
  top: 118px;
  width: 220px;
  height: 520px;
  opacity: .55;
}
.constellation line { stroke: var(--cyan); stroke-width: 1.2; stroke-dasharray: 4 8; filter: drop-shadow(0 0 5px var(--cyan)); }

.case-list { position: relative; display: flex; flex-direction: column; gap: 1.25rem; }
.case-file {
  width: 220px;
  margin-left: var(--x);
  display: grid;
  grid-template-columns: 58px 1fr;
  align-items: center;
  gap: .72rem;
  border: 0;
  padding: .45rem;
  color: var(--ink);
  background: rgba(245,240,232,.66);
  transform: rotate(var(--tilt)) scale(1);
  transform-origin: left center;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background .45s var(--ease);
  cursor: pointer;
  text-align: left;
}
.case-file strong { display: block; font-size: .68rem; color: var(--magenta); }
.case-file em { display: block; font-style: normal; font-size: .86rem; line-height: 1.12; color: var(--charcoal); }
.case-file:hover, .case-file.active { transform: rotate(var(--tilt)) scale(1.05); background: #f5f0e8; box-shadow: 0 0 12px #ff2d8a, 0 0 24px #ff2d8a40; }
.case-file:hover strong, .case-file.active strong { color: var(--chartreuse); text-shadow: 0 0 8px #c6f400; }

.case-thumb {
  width: 48px;
  height: 64px;
  position: relative;
  display: block;
  background: linear-gradient(145deg, #3d3529, #ede4d3 44%, #2a2118);
  border: 1px solid rgba(61,53,41,.45);
  box-shadow: inset -8px -10px 16px rgba(42,33,24,.16), 0 0 0 1px rgba(255,45,138,.25);
  overflow: hidden;
}
.case-thumb::after { content: ""; position: absolute; inset: 7px; border: 1px solid var(--magenta); box-shadow: 0 0 12px var(--magenta); }
.lens-mini::after { border-radius: 50%; border-color: var(--cyan); box-shadow: 0 0 12px var(--cyan); }
.stair-mini::after { clip-path: polygon(0 70%, 35% 70%, 35% 45%, 68% 45%, 68% 20%, 100% 20%, 100% 100%, 0 100%); background: rgba(198,244,0,.28); border-color: var(--chartreuse); }
.klein-mini::after { border-radius: 55% 45% 60% 40%; border-color: var(--cyan); }
.portal-mini::after { border-radius: 50%; border-color: var(--chartreuse); }

.sidebar-note { position: absolute; left: 1.2rem; right: 2rem; bottom: 1.4rem; font-size: .9rem; color: rgba(42,33,24,.75); }

.active-link { position: fixed; inset: 0; z-index: 18; pointer-events: none; width: 100vw; height: 100vh; }
.active-link path { fill: none; stroke: var(--cyan); stroke-width: 1.4; stroke-dasharray: 5 8; filter: drop-shadow(0 0 7px var(--cyan)); }

.mobile-tab { display: none; }

.scroll-canvas {
  margin-left: 280px;
  min-height: 100vh;
  scroll-snap-type: y proximity;
}

.chapter {
  position: relative;
  min-height: 100vh;
  padding: 8vh clamp(2rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2.4rem;
  align-items: center;
  overflow: hidden;
  scroll-snap-align: start;
}
.chapter.light { background: linear-gradient(135deg, #f5f0e8 0%, #ede4d3 58%, #e8dcc6 100%); }
.chapter.light::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 70%, rgba(255,45,138,.12) 70% 70.35%, transparent 70.35%), repeating-linear-gradient(0deg, rgba(61,53,41,.025) 0 1px, transparent 1px 12px); }
.chapter.torn { clip-path: polygon(0 0, 100% 0, 100% 94%, 92% 97%, 81% 95%, 70% 100%, 58% 96%, 45% 99%, 30% 95%, 18% 98%, 0 94%); }
.chapter.final { min-height: 110vh; }

.chapter-number {
  position: absolute;
  right: 4vw;
  top: 2vh;
  font-family: "Space Mono", monospace;
  font-size: 20vw;
  line-height: .8;
  color: var(--charcoal);
  opacity: .04;
  pointer-events: none;
  transition: opacity .7s var(--ease);
}
.chapter.in-view .chapter-number { opacity: .08; }

.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }

.dossier { position: relative; z-index: 2; }
.code { margin: 0 0 1rem; font-size: .85rem; color: var(--magenta); text-shadow: 0 0 8px #ff2d8a60; }
h1, h2 {
  margin: 0 0 1.4rem;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.2rem, 4.5vw, 4.8rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
}
.dossier p:not(.code), .evidence-card p { font-size: clamp(1rem, 1.22vw, 1.18rem); }

.evidence-rail { position: absolute; left: 1.6rem; top: 18vh; display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.evidence-rail span, .badge { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--magenta); color: var(--magenta); font-size: .62rem; background: #f5f0e8; box-shadow: 0 0 14px #ff2d8a50; }
.evidence-rail i { width: 1px; height: 72px; border-left: 1px dashed var(--cyan); }

.evidence-card {
  z-index: 2;
  align-self: end;
  padding: 1.25rem;
  border: 1px solid rgba(61,53,41,.28);
  background: rgba(245,240,232,.5);
  box-shadow: 0 18px 40px rgba(42,33,24,.12);
}
.badge { margin-bottom: .8rem; width: 42px; height: 42px; }

.object-wrap { position: relative; z-index: 3; min-height: 330px; display: grid; place-items: center; perspective: 900px; }
.object-3d { transition: transform .55s var(--ease), filter .55s var(--ease); }
.object-wrap:hover .object-3d { transform: rotateX(10deg) rotateY(-18deg) scale(1.06); filter: saturate(1.25); }

.penrose { width: 240px; height: 220px; position: relative; transform-style: preserve-3d; animation: rotate3d 12s linear infinite; }
.penrose b { position: absolute; width: 190px; height: 34px; left: 25px; top: 88px; background: linear-gradient(90deg, #8c642c, #e8dcc6, #3d3529); border: 1px solid var(--magenta); box-shadow: 0 0 20px #ff2d8a80; transform-origin: center; }
.penrose b:nth-child(1) { transform: rotate(0deg) translateY(-70px); }
.penrose b:nth-child(2) { transform: rotate(60deg) translateY(54px); }
.penrose b:nth-child(3) { transform: rotate(-60deg) translateY(54px); }

.magnifier { width: 230px; height: 230px; position: relative; animation: float 6s var(--ease) infinite; }
.magnifier::before { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 13px solid var(--charcoal); background: radial-gradient(circle at 30% 20%, rgba(0,229,255,.4), rgba(245,240,232,.24)); backdrop-filter: hue-rotate(45deg) brightness(1.2); box-shadow: inset 0 0 25px #00e5ff80, 0 0 22px #00e5ff55; }
.magnifier::after { content: ""; position: absolute; width: 104px; height: 22px; left: 130px; top: 145px; background: linear-gradient(90deg, var(--charcoal), var(--magenta)); transform: rotate(45deg); border-radius: 16px; box-shadow: 0 0 18px #ff2d8a70; }
.magnifier span { position: absolute; inset: 44px 0 0 42px; width: 58px; height: 22px; border-top: 2px solid var(--magenta); border-bottom: 2px solid var(--cyan); transform: skew(-20deg); }

.impossible-stairs { width: 250px; height: 230px; transform-style: preserve-3d; animation: stairTurn 10s linear infinite; }
.impossible-stairs i { position: absolute; display: block; width: 115px; height: 34px; background: linear-gradient(135deg, #3d3529, #ede4d3); border: 1px solid var(--chartreuse); box-shadow: 0 0 18px #c6f40080; transform: translateZ(0); }
.impossible-stairs i:nth-child(1) { left: 30px; top: 42px; transform: rotateX(55deg) rotateZ(0deg); }
.impossible-stairs i:nth-child(2) { left: 92px; top: 72px; transform: rotateX(55deg) rotateZ(90deg); }
.impossible-stairs i:nth-child(3) { left: 112px; top: 134px; transform: rotateX(55deg) rotateZ(180deg); }
.impossible-stairs i:nth-child(4) { left: 48px; top: 156px; transform: rotateX(55deg) rotateZ(270deg); }
.impossible-stairs i:nth-child(5) { left: 28px; top: 98px; transform: rotateX(55deg) rotateZ(0deg); }
.impossible-stairs i:nth-child(6) { left: 84px; top: 108px; transform: rotateX(55deg) rotateZ(90deg); }

.klein { width: 245px; height: 260px; position: relative; animation: breathe 5s var(--ease) infinite; }
.klein::before { content: ""; position: absolute; inset: 20px 40px 20px 30px; border-radius: 54% 46% 60% 40%; background: radial-gradient(circle at 32% 24%, #e8dcc6, rgba(0,229,255,.22) 38%, rgba(28,28,46,.72)); border: 3px solid var(--cyan); box-shadow: inset 0 0 35px #00e5ff66, 0 0 22px #00e5ff; }
.klein span { position: absolute; width: 76px; height: 180px; right: 36px; top: 10px; border: 18px solid transparent; border-left-color: var(--cyan); border-radius: 50%; transform: rotate(20deg); filter: drop-shadow(0 0 12px var(--cyan)); }
.klein b { position: absolute; width: 130px; height: 44px; left: 48px; bottom: 50px; border-radius: 50%; border: 2px solid var(--magenta); box-shadow: 0 0 16px #ff2d8a; }

.portal { width: 250px; height: 250px; display: grid; place-items: center; transform-style: preserve-3d; animation: rotate3d 9s linear infinite reverse; }
.portal i { position: absolute; border-radius: 50%; border: 2px solid; box-shadow: 0 0 24px currentColor; }
.portal i:nth-child(1) { width: 230px; height: 230px; color: var(--magenta); transform: rotateX(68deg); }
.portal i:nth-child(2) { width: 170px; height: 170px; color: var(--cyan); transform: rotateY(72deg); }
.portal i:nth-child(3) { width: 110px; height: 110px; color: var(--chartreuse); transform: rotateZ(42deg); }

.dark {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #1c1c2e;
  color: #e8dcc6;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
}
.dark::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,45,138,0.06) 0 1px, transparent 1px 4px); pointer-events: none; }
.interstitial-phrase { position: relative; margin: 2rem 0 0; font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600; font-size: clamp(2rem, 4vw, 4.2rem); color: var(--bone); text-shadow: 0 0 12px #00e5ff40; }
.magnetic { width: min(42vw, 360px); aspect-ratio: 1; transition: transform .2s linear; filter: drop-shadow(0 0 18px #ff2d8a66); animation: interScale .9s var(--ease) both, rotate3d 18s linear infinite; }
.magnetic svg { width: 100%; height: 100%; overflow: visible; }
.magnetic line, .magnetic polygon { fill: none; stroke: var(--cyan); stroke-width: 2; stroke-dasharray: 220; animation: pulseLine 2.8s var(--ease) infinite; }
.magnetic circle { fill: var(--magenta); filter: drop-shadow(0 0 8px var(--magenta)); }
.alt line, .alt polygon { stroke: var(--chartreuse); }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity .65s var(--ease), transform .65s var(--ease); }
.chapter.in-view .reveal { opacity: 1; transform: translateY(0); }
.chapter.in-view .delay-2 { transition-delay: 120ms; }
.chapter.in-view .delay-3 { transition-delay: 240ms; }

@keyframes rotate3d { from { transform: rotateX(8deg) rotateY(0deg); } to { transform: rotateX(8deg) rotateY(360deg); } }
@keyframes float { 0%,100% { transform: translateY(-8px) rotate(-4deg); } 50% { transform: translateY(12px) rotate(5deg); } }
@keyframes stairTurn { from { transform: rotateX(52deg) rotateZ(0deg); } to { transform: rotateX(52deg) rotateZ(360deg); } }
@keyframes breathe { 0%,100% { transform: scale(.98); filter: drop-shadow(0 0 10px #00e5ff80); } 50% { transform: scale(1.04); filter: drop-shadow(0 0 24px #00e5ff); } }
@keyframes pulseLine { 0%,100% { opacity: .65; filter: drop-shadow(0 0 4px currentColor); } 50% { opacity: 1; filter: drop-shadow(0 0 16px currentColor); } }
@keyframes interScale { 0% { transform: scale(.7); opacity: 0; } 70% { transform: scale(1.02); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

@media (max-width: 900px) {
  .mystery-index { width: 240px; }
  .scroll-canvas { margin-left: 240px; }
  .chapter { grid-template-columns: repeat(4, 1fr); }
  .span-3, .span-4 { grid-column: span 4; }
  .span-2 { grid-column: span 2; }
}

@media (max-width: 767px) {
  .scroll-canvas { margin-left: 0; }
  .mobile-tab { display: block; position: fixed; right: 1rem; bottom: 1rem; z-index: 35; border: 1px solid var(--magenta); background: var(--indigo); color: var(--bone); padding: .75rem 1rem; font-family: "Space Mono", monospace; text-transform: uppercase; letter-spacing: .08em; box-shadow: 0 0 18px #ff2d8a80; }
  .mystery-index { inset: auto 0 0 0; width: 100%; height: 235px; transform: translateY(178px); clip-path: polygon(0 8%, 12% 0, 26% 6%, 40% 2%, 55% 8%, 70% 0, 86% 6%, 100% 1%, 100% 100%, 0 100%); transition: transform .45s var(--ease); }
  .mystery-index.open { transform: translateY(0); }
  .index-kicker, .sidebar-note { display: none; }
  .case-list { flex-direction: row; overflow-x: auto; gap: .8rem; padding-top: .6rem; }
  .case-file { min-width: 170px; margin-left: 0; }
  .constellation, .active-link { display: none; }
  .chapter { grid-template-columns: 1fr; gap: 1rem; padding: 6rem 1.5rem 3rem; }
  .span-2, .span-3, .span-4 { grid-column: auto; }
  .evidence-rail { left: auto; right: .8rem; top: 7rem; }
  .object-wrap { min-height: 250px; transform: scale(.84); }
}