:root {
  /* design typography token: IBM Plex Mono** for typewriter entries */
  --carbon: #08070B;
  --emerald: #00C27A;
  --amethyst: #6D3BFF;
  --ruby: #C83A5A;
  --sapphire: #103B7A;
  --marble: #E8DEC8;
  --brass: #D6A84F;
  --font-sans: "Commissioner", "Inter", system-ui, sans-serif;
  --font-serif: "Fraunces", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--carbon);
  color: var(--marble);
  font-family: var(--font-sans);
  overflow-x: hidden;
}

.grain, .carbon-dust {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}

.grain {
  opacity: .18;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(232,222,200,.18) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(0,194,122,.12) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 48%, rgba(214,168,79,.08) 49% 50%, transparent 51%);
  background-size: 13px 17px, 19px 23px, 160px 160px;
}

.carbon-dust i {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--emerald);
  box-shadow: 0 0 10px var(--emerald);
  opacity: .45;
  transform: rotate(45deg);
  animation: drift 14s linear infinite;
}

.side-index {
  position: fixed;
  z-index: 50;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: .45rem;
}

.tab {
  width: 8.2rem;
  padding: .55rem .7rem;
  color: var(--marble);
  text-decoration: none;
  font: 600 .72rem var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(16,59,122,.7);
  border-left: 4px solid var(--brass);
  clip-path: polygon(0 0, 91% 0, 100% 50%, 91% 100%, 0 100%);
  transition: transform .35s ease, background .35s ease, color .35s ease;
}

.tab span { color: var(--brass); margin-right: .45rem; }
.tab.active, .tab:hover { background: var(--emerald); color: var(--carbon); transform: translateX(.6rem) rotate(-1deg); }
.tab.active span, .tab:hover span { color: var(--sapphire); }

.room {
  position: relative;
  min-height: 100vh;
  padding: 7vw 8vw 6vw 12vw;
  overflow: hidden;
  isolation: isolate;
}

.room::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(125deg, transparent 0 42%, rgba(109,59,255,.12) 42% 45%, transparent 45% 100%),
    radial-gradient(circle at 85% 20%, rgba(0,194,122,.16), transparent 28%),
    radial-gradient(circle at 20% 85%, rgba(200,58,90,.12), transparent 30%);
  z-index: -2;
}

.opening {
  display: grid;
  grid-template-columns: .7fr 1.1fr .9fr;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(16,59,122,.55), transparent 34%),
    linear-gradient(145deg, var(--carbon), #0e1020 58%, var(--carbon));
}

.terminal-card {
  grid-column: 1 / 3;
  grid-row: 1;
  align-self: end;
  width: min(600px, 70vw);
  padding: 1.1rem 1.3rem;
  border: 1px solid rgba(0,194,122,.5);
  background: rgba(8,7,11,.82);
  box-shadow: 0 0 28px rgba(0,194,122,.2), inset 0 0 30px rgba(0,194,122,.07);
  transform: rotate(-2deg) translateY(2rem);
}

.prompt, .room-number, .stamp, figcaption, .encyclopedia-plate span {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.prompt { color: var(--brass); font-size: .72rem; }
.boot-line { min-height: 1.4rem; color: var(--emerald); font: 500 clamp(1rem, 2vw, 1.45rem) var(--font-mono); }
.boot-line::after, .typing::after, #finalLine::after { content: "▌"; animation: blink .8s steps(1) infinite; color: var(--emerald); }

.acetate-title {
  grid-column: 1 / 4;
  grid-row: 2;
  z-index: 4;
  padding: 2vw 3vw;
  width: min(980px, 80vw);
  background: rgba(232,222,200,.08);
  border: 1px solid rgba(232,222,200,.35);
  backdrop-filter: blur(5px);
  transform: translateX(-115%) rotate(-3deg);
  animation: stampIn 1.1s cubic-bezier(.2,.9,.15,1) 1.9s forwards;
}

.stamp { color: var(--ruby); font-size: .8rem; }
h1, h2 { margin: 0; font-family: var(--font-sans); font-weight: 850; letter-spacing: -.07em; line-height: .78; }
h1 { font-size: clamp(5rem, 17vw, 17rem); text-shadow: .06em .06em 0 rgba(109,59,255,.8), -.025em -.025em 0 rgba(0,194,122,.7); }

.photo-flicker {
  grid-column: 2 / 4;
  grid-row: 1 / 4;
  position: relative;
  justify-self: end;
  width: min(620px, 54vw);
  height: 72vh;
  transform: rotate(4deg);
  border: 12px solid rgba(232,222,200,.72);
  box-shadow: -30px 38px 0 rgba(109,59,255,.28), 0 0 80px rgba(0,194,122,.2);
  overflow: hidden;
}

.photo-layer, .archival-image {
  position: absolute;
  inset: 0;
  background-blend-mode: multiply, screen, normal;
  filter: grayscale(1) contrast(1.35) sepia(.2);
}

.photo-layer { animation: flicker 6s steps(1) infinite; }
.photo-layer.soot { background: radial-gradient(circle at 30% 30%, #E8DEC8, transparent 10%), repeating-linear-gradient(18deg, #222 0 12px, #050505 12px 24px), linear-gradient(#C83A5A, #103B7A); }
.photo-layer.diamond { background: linear-gradient(135deg, transparent 0 20%, #fff 20% 22%, transparent 22% 45%, #ddd 45% 48%, transparent 48%), radial-gradient(circle, #E8DEC8, #103B7A); animation-delay: 2s; }
.photo-layer.leaf { background: radial-gradient(ellipse at 45% 48%, transparent 0 18%, #111 19% 20%, transparent 21%), repeating-linear-gradient(76deg, #E8DEC8 0 2px, #103B7A 2px 8px), linear-gradient(#00C27A, #08070B); animation-delay: 4s; }
.hex-ring { position: absolute; inset: 12%; fill: none; stroke: var(--emerald); stroke-width: 2; filter: drop-shadow(0 0 12px var(--emerald)); stroke-dasharray: 760; stroke-dashoffset: 760; animation: trace 3s ease 1.2s forwards; }
.brass-rule { position: absolute; left: 8vw; bottom: 12vh; width: 42vw; height: 6px; background: var(--brass); transform: rotate(-8deg); }

.index-room { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, minmax(58px, auto)); gap: 1rem; }
.room-number { grid-column: 2 / 5; color: var(--emerald); font-size: .85rem; }
h2 { grid-column: 2 / 10; grid-row: 2 / 4; z-index: 5; font-size: clamp(4.2rem, 11vw, 12rem); color: var(--marble); }
h2 span { display: block; font: 700 clamp(1.5rem, 3vw, 3rem) var(--font-serif); letter-spacing: .02em; color: var(--brass); }

.wiki-slab, .drawer-card, blockquote, .encyclopedia-plate {
  background: rgba(232,222,200,.92);
  color: var(--carbon);
  box-shadow: 0 28px 70px rgba(0,0,0,.38);
  border: 1px solid rgba(214,168,79,.55);
}
.wiki-slab { padding: clamp(1.3rem, 3vw, 2.4rem); font-size: clamp(1.1rem, 2vw, 1.55rem); line-height: 1.35; }
.wide { grid-column: 3 / 8; grid-row: 5 / 7; transform: rotate(-2deg); }
.typed-fragment { min-height: 5rem; }
.typing { color: var(--carbon); }

.photo-plate { position: relative; margin: 0; min-height: 300px; background: var(--sapphire); border: 10px solid var(--marble); box-shadow: 18px 18px 0 rgba(200,58,90,.45); overflow: hidden; }
.photo-plate figcaption { position: absolute; left: 1rem; bottom: 1rem; right: 1rem; padding: .55rem; color: var(--marble); background: rgba(8,7,11,.75); font-size: .72rem; }
.circle { border-radius: 50% 45% 50% 42%; }
.atom-photo { grid-column: 8 / 12; grid-row: 3 / 7; transform: rotate(5deg); }
.graphite { background: repeating-linear-gradient(92deg, #101010 0 17px, #575757 17px 22px, #151515 22px 35px), linear-gradient(135deg, #6D3BFF, #E8DEC8); }

.pedestal { position: absolute; z-index: 6; width: 170px; height: 280px; filter: drop-shadow(0 24px 24px rgba(0,0,0,.4)); }
.bust-one { right: 7vw; bottom: 5vh; transform: rotate(-7deg); }
.bust-two { left: 13vw; bottom: 6vh; transform: rotate(8deg); }
.bust-head { width: 95px; height: 112px; margin: auto; border-radius: 48% 48% 42% 42%; background: radial-gradient(circle at 35% 32%, #fff4dc, #E8DEC8 38%, #9d927d); }
.column { width: 145px; height: 145px; margin: -4px auto 0; background: repeating-linear-gradient(90deg, #d7cbb3 0 12px, #f2ead8 12px 18px); clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); }
.visor { position: absolute; top: 42px; left: 48px; width: 92px; height: 22px; background: var(--amethyst); box-shadow: 0 0 20px var(--amethyst); transform: rotate(-8deg); }
.antenna { position: absolute; top: 7px; left: 82px; width: 52px; height: 52px; border: 2px solid var(--emerald); border-radius: 50%; box-shadow: 0 0 16px var(--emerald); }

.fact-ribbon { grid-column: 1 / 3; grid-row: 4 / 8; display: flex; flex-direction: column; gap: 1rem; transform: rotate(-90deg) translateX(-45%); transform-origin: center; color: var(--emerald); font: 600 .95rem var(--font-mono); }
.fact-ribbon span { background: rgba(8,7,11,.8); border: 1px solid var(--emerald); padding: .5rem .8rem; }

.soot-room { background: radial-gradient(circle at 20% 25%, rgba(200,58,90,.22), transparent 30%), var(--carbon); }
.soot-photo { grid-column: 2 / 7; grid-row: 2 / 7; transform: rotate(-4deg); clip-path: polygon(2% 0, 100% 4%, 95% 94%, 6% 100%, 0 42%); }
.soot-img { background: radial-gradient(circle at 45% 45%, rgba(232,222,200,.8), transparent 9%), radial-gradient(circle at 48% 58%, #111 0 18%, transparent 19%), repeating-radial-gradient(circle, #26201f 0 5px, #060507 5px 13px), linear-gradient(#C83A5A, #103B7A); }
.drawer-card { grid-column: 7 / 12; grid-row: 4 / 7; padding: 2rem; transform: rotate(3deg); }
.ruby-card { background: linear-gradient(135deg, rgba(200,58,90,.95), rgba(232,222,200,.94)); }
.brass-tab { position: absolute; top: -1.2rem; right: 2rem; border: 0; padding: .8rem 1.2rem; background: var(--brass); color: var(--carbon); font: 800 .8rem var(--font-mono); text-transform: uppercase; cursor: pointer; transform-origin: bottom; transition: transform .35s ease; }
.brass-tab.flipped { transform: rotateX(180deg); }
.carbon-paper { grid-column: 6 / 10; grid-row: 2 / 4; display: flex; gap: .35rem; transform: rotate(8deg); font: 900 7rem var(--font-sans); color: rgba(16,59,122,.35); }
.correction-tape { grid-column: 2 / 6; grid-row: 7; padding: .8rem 1rem; background: var(--ruby); color: var(--marble); font: 600 .9rem var(--font-mono); transform: rotate(2deg); }

.marble-room { background: linear-gradient(105deg, rgba(232,222,200,.09), transparent 35%), var(--carbon); }
.marble-slab { grid-column: 5 / 13; grid-row: 1 / 9; background: linear-gradient(115deg, rgba(232,222,200,.92), rgba(214,168,79,.3)), repeating-linear-gradient(130deg, transparent 0 24px, rgba(16,59,122,.14) 24px 26px); transform: rotate(5deg) translateX(3vw); z-index: -1; }
blockquote { grid-column: 2 / 7; grid-row: 4 / 6; margin: 0; padding: 2rem; font: 700 clamp(1.4rem, 3vw, 3.2rem) var(--font-serif); line-height: 1.05; transform: rotate(-3deg); }
.argument-card { grid-column: 7 / 12; grid-row: 6 / 8; transform: rotate(2deg); }
.bond-veins { grid-column: 7 / 12; grid-row: 3 / 6; width: 100%; stroke: var(--emerald); fill: rgba(109,59,255,.55); stroke-width: 3; filter: drop-shadow(0 0 12px var(--emerald)); transform: rotate(-8deg); }

.diamond-room { background: radial-gradient(circle at 70% 30%, rgba(109,59,255,.28), transparent 32%), var(--carbon); }
.switchboard { grid-column: 2 / 7; grid-row: 4 / 7; display: grid; grid-template-columns: repeat(2, minmax(120px, 1fr)); gap: 1rem; transform: rotate(-2deg); }
.switchboard button { min-height: 110px; border: 2px solid var(--brass); background: radial-gradient(circle at 35% 30%, #fff, var(--amethyst) 18%, var(--sapphire) 62%); color: var(--marble); font: 850 1rem var(--font-sans); text-transform: uppercase; letter-spacing: .1em; clip-path: polygon(50% 0, 100% 35%, 82% 100%, 18% 100%, 0 35%); cursor: pointer; transition: transform .25s ease, filter .25s ease; }
.switchboard button:hover, .switchboard button.active { transform: translateY(-8px) scale(1.04); filter: brightness(1.35) drop-shadow(0 0 20px var(--amethyst)); }
.gem-note { grid-column: 7 / 12; grid-row: 5 / 7; transform: rotate(3deg); }
.diamond-photo { grid-column: 8 / 12; grid-row: 2 / 5; transform: rotate(6deg); }
.diamond-img { background: conic-gradient(from 45deg, #E8DEC8, #6D3BFF, #103B7A, #fff, #C83A5A, #E8DEC8); }
.jewel-fractures i { position: absolute; width: 3px; height: 38vh; background: var(--emerald); transform: rotate(35deg); box-shadow: 0 0 15px var(--emerald); }
.jewel-fractures i:nth-child(1) { left: 20%; top: 15%; } .jewel-fractures i:nth-child(2) { left: 76%; top: 18%; height: 52vh; background: var(--ruby); } .jewel-fractures i:nth-child(3) { left: 58%; top: 60%; height: 24vh; } .jewel-fractures i:nth-child(4) { left: 34%; top: 70%; height: 18vh; background: var(--brass); }

.future-room { background: radial-gradient(circle at 30% 45%, rgba(0,194,122,.2), transparent 28%), linear-gradient(160deg, var(--carbon), #071b18); }
.fossil-photo { grid-column: 2 / 7; grid-row: 2 / 7; transform: rotate(4deg); }
.leaf-img { background: linear-gradient(90deg, transparent 48%, rgba(8,7,11,.8) 49% 51%, transparent 52%), repeating-linear-gradient(35deg, #E8DEC8 0 4px, #103B7A 4px 12px), radial-gradient(ellipse, #00C27A, #08070B); }
.future-card { grid-column: 7 / 12; grid-row: 3 / 5; background: linear-gradient(135deg, rgba(0,194,122,.88), rgba(232,222,200,.96)); transform: rotate(-3deg); }
.encyclopedia-plate { grid-column: 5 / 11; grid-row: 6 / 8; padding: 2rem; transform: rotate(1deg); }
.encyclopedia-plate span { color: var(--ruby); font-size: .8rem; }
#finalLine { margin: .8rem 0 0; font: 800 clamp(2rem, 5vw, 5.5rem) var(--font-serif); line-height: .95; color: var(--carbon); }
.catalog-rails { position: absolute; right: 6vw; top: 14vh; width: 28vw; height: 70vh; border-left: 8px solid var(--brass); border-right: 8px solid var(--brass); opacity: .6; transform: rotate(-8deg); }

.revealed { animation: drawerShift .7s cubic-bezier(.2,.8,.2,1) both; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes stampIn { to { transform: translateX(0) rotate(-3deg); } }
@keyframes trace { to { stroke-dashoffset: 0; } }
@keyframes flicker { 0%, 32% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes drawerShift { from { opacity: .25; transform: translateY(45px) rotate(var(--tilt, 0deg)); } to { opacity: 1; } }
@keyframes drift { from { transform: translateY(105vh) rotate(0deg); } to { transform: translateY(-10vh) rotate(360deg); } }

@media (max-width: 850px) {
  .side-index { display: none; }
  .room { padding: 5rem 1.2rem; }
  .opening, .index-room { display: block; }
  .photo-flicker, .photo-plate, .wiki-slab, .drawer-card, blockquote, .encyclopedia-plate { width: 100%; margin: 1.2rem 0; transform: none; }
  .photo-flicker { height: 48vh; }
  h1 { font-size: 22vw; }
  h2 { font-size: 18vw; margin: 1rem 0; }
  .pedestal, .fact-ribbon, .carbon-paper, .marble-slab, .bond-veins, .catalog-rails { display: none; }
}