:root {
  --cool: #2A6F7F;
  --pressure: #8F1D18;
  --melt: #FF5A1F;
  --bloom: #FFD447;
  --afterglass: #17101F;
  --cinder: #050303;
  --obsidian: #17101F;
  --core: #FFF1C2;
  --orange: #FF5A1F;
  --yellow: #FFD447;
  --red: #8F1D18;
  --blue: #2A6F7F;
  --Interface-labels-settings: "small caps tabular settings";
  --heat: var(--orange);
  --state-blur: 0px;
  --state-radius: 12px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--cinder); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--core);
  font-family: "Fraunces", serif;
  background:
    radial-gradient(circle at 48% 20%, rgba(143, 29, 24, 0.25), transparent 28vw),
    linear-gradient(180deg, #050303 0%, #17101F 42%, #050303 100%);
  overflow-x: hidden;
}

body[data-temp="cool"] { --heat: var(--cool); --state-blur: 0.4px; --state-radius: 8px; }
body[data-temp="pressure"] { --heat: var(--pressure); --state-blur: 1px; --state-radius: 16px; }
body[data-temp="melt"] { --heat: var(--melt); --state-blur: 1.8px; --state-radius: 42px; }
body[data-temp="bloom"] { --heat: var(--bloom); --state-blur: 0.8px; --state-radius: 50%; }
body[data-temp="afterglass"] { --heat: var(--blue); --state-blur: 0px; --state-radius: 4px; }

.filters { position: fixed; pointer-events: none; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: 0.18;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 241, 194, 0.3) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 42%, rgba(255, 90, 31, 0.25) 0 1px, transparent 1px),
    radial-gradient(circle at 38% 83%, rgba(255, 212, 71, 0.18) 0 1px, transparent 1px);
  background-size: 37px 41px, 53px 47px, 71px 67px;
}

.cursor-heat {
  position: fixed;
  width: 16rem;
  height: 16rem;
  margin: -8rem 0 0 -8rem;
  border-radius: 50%;
  pointer-events: none;
  z-index: 70;
  opacity: 0;
  background: radial-gradient(circle, rgba(255, 212, 71, 0.16), rgba(255, 90, 31, 0.07) 38%, transparent 68%);
  filter: blur(14px) url(#heat-warp);
  transition: opacity 300ms ease;
}

.ash-field, .drip-field { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.ash, .drip { position: absolute; left: var(--x); opacity: var(--o); }
.ash {
  bottom: -2rem;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--core);
  animation: ashRise var(--d) linear infinite;
  animation-delay: var(--delay);
}
.drip {
  top: -3rem;
  width: 3px;
  height: var(--h);
  border-radius: 0 0 100% 100%;
  background: linear-gradient(var(--yellow), var(--orange), transparent);
  box-shadow: 0 0 16px rgba(255, 90, 31, 0.7);
  animation: dripFall var(--d) linear infinite;
  animation-delay: var(--delay);
}

.chamber-marks {
  position: fixed;
  top: 50%;
  right: 1.1rem;
  transform: translateY(-50%);
  z-index: 50;
  display: grid;
  gap: 1rem;
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
}

.chamber-marks a {
  color: rgba(255, 241, 194, 0.52);
  text-decoration: none;
  writing-mode: vertical-rl;
  padding: 0.6rem 0.25rem;
  border-left: 1px solid rgba(255, 241, 194, 0.16);
  transition: color 250ms ease, border-color 250ms ease, text-shadow 250ms ease;
}

.chamber-marks a.active { color: var(--heat); border-color: var(--heat); text-shadow: 0 0 16px var(--heat); }

.containment { position: relative; z-index: 5; }

.chamber {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(2rem, 6vw, 6rem);
  isolation: isolate;
  border-bottom: 1px solid rgba(255, 241, 194, 0.08);
}

.chamber::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 35%), color-mix(in srgb, var(--heat) 34%, transparent), transparent 18rem),
    linear-gradient(90deg, rgba(255, 241, 194, 0.04), transparent 18%, transparent 82%, rgba(255, 241, 194, 0.03));
  filter: blur(var(--state-blur));
  transition: background 400ms ease;
}

.chamber::after {
  content: "";
  position: absolute;
  inset: 1rem 7vw;
  border: 1px solid rgba(255, 241, 194, 0.08);
  border-top-width: 0;
  border-bottom-width: 0;
  pointer-events: none;
  z-index: -1;
}

.label {
  margin: 0 0 1rem;
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  font-variant-caps: all-small-caps;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2em;
  font-size: clamp(0.64rem, 1vw, 0.82rem);
  color: var(--yellow);
}

h1, h2 {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  line-height: 0.82;
  margin: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(5.4rem, 17vw, 17rem);
  color: rgba(255, 241, 194, 0.2);
  text-shadow: 0 0 18px rgba(255, 90, 31, 0.38), 0 0 42px rgba(143, 29, 24, 0.28);
  transform: scaleY(1.28);
}

h2 { font-size: clamp(4.5rem, 13vw, 14rem); }

.story, .begin {
  max-width: 38rem;
  font-size: clamp(1.05rem, 2vw, 1.65rem);
  line-height: 1.28;
  color: rgba(255, 241, 194, 0.82);
}

.surface { display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 50% 72%, rgba(143,29,24,0.32), transparent 22rem), #050303; }
.heat-shimmer { filter: url(#heat-warp); }
.begin { margin: 2rem auto 0; color: rgba(255, 241, 194, 0.7); }
.warning-line {
  position: absolute;
  top: 51%;
  left: 12vw;
  right: 12vw;
  height: 2px;
  background: rgba(143, 29, 24, 0.72);
  box-shadow: 0 0 16px rgba(255, 90, 31, 0.5);
  transform-origin: center;
  transition: border-radius 400ms ease, height 400ms ease, transform 400ms ease;
}
.warning-line span {
  position: absolute;
  left: 50%;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 24px var(--orange);
  opacity: 0;
  transition: opacity 300ms ease, transform 900ms cubic-bezier(.2,.8,.1,1);
}
.warning-line.falling { height: 7px; border-radius: 999px; transform: scaleX(0.72) translateY(15vh); filter: url(#soft-melt); }
.warning-line.falling span { opacity: 1; transform: translateY(34vh) scale(1.8, 2.6); }
.kiln-ring { position: absolute; border: 1px solid rgba(255, 241, 194, 0.08); border-radius: 50%; filter: blur(0.4px); }
.ring-one { width: 56vw; height: 56vw; top: 14vh; left: -18vw; }
.ring-two { width: 38vw; height: 38vw; right: -10vw; bottom: 5vh; border-color: rgba(42, 111, 127, 0.18); }
.edge-coordinate { position: absolute; left: 1rem; bottom: 2rem; writing-mode: vertical-rl; font-family: "IBM Plex Mono", monospace; color: rgba(255, 241, 194, 0.32); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.65rem; }

.quest-core {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 2.2rem;
  height: 2.2rem;
  margin: -1.1rem;
  z-index: 25;
  border-radius: var(--state-radius);
  background: radial-gradient(circle at 35% 28%, var(--core), var(--yellow) 23%, var(--orange) 55%, var(--red) 82%);
  box-shadow: 0 0 24px rgba(255, 90, 31, 0.88), 0 0 70px rgba(255, 90, 31, 0.34);
  filter: url(#soft-melt);
  transform: translate3d(var(--core-x, 0px), var(--core-y, 0px), 0) scale(var(--core-scale, 1));
  transition: border-radius 450ms ease, background 450ms ease;
}
.quest-core span { position: absolute; inset: 35% 42% -42% 42%; border-radius: 0 0 999px 999px; background: var(--orange); opacity: var(--tail, 0); }

.pressure { background: linear-gradient(#17101F, #050303 58%, #8F1D18 160%); display: flex; align-items: center; }
.clamp { position: absolute; left: 0; right: 0; height: 4.5rem; background: linear-gradient(90deg, transparent, rgba(255, 241, 194, 0.16), transparent), #050303; border-block: 1px solid rgba(255, 90, 31, 0.35); box-shadow: 0 0 34px rgba(143,29,24,0.42); }
.top-clamp { top: 12vh; }.bottom-clamp { bottom: 13vh; }
.pressure-copy { width: min(75rem, 82vw); margin-left: 4vw; transform: skewY(-2deg); }
.pressure h2 { color: var(--core); text-shadow: 0 1.2rem 0 rgba(143, 29, 24, 0.55); transform: scaleY(1.18) scaleX(0.9); }
.pressure .story { margin-left: auto; margin-top: 2rem; padding: 1.25rem; border: 1px solid rgba(255, 90, 31, 0.4); border-radius: 24px 8px 38px 10px; background: rgba(5,3,3,0.62); }
.blister { display: inline-block; padding: 0.55rem 0.8rem; background: rgba(143,29,24,0.45); border-radius: 999px 999px 18px 999px; box-shadow: inset 0 -10px 18px rgba(255,90,31,0.15); }
.sticker { position: absolute; width: 13rem; padding: 0.8rem; font-family: "IBM Plex Mono", monospace; text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.12em; color: #050303; background: #FFD447; box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
.sticker::after { content: ""; position: absolute; right: 0; top: 0; border-style: solid; border-width: 0 0 24px 24px; border-color: transparent transparent rgba(5,3,3,0.35) transparent; }
.sticker-left { left: 8vw; bottom: 18vh; transform: rotate(-9deg) skewX(-6deg); }
.sticker-right { right: 11vw; top: 23vh; transform: rotate(7deg) skewX(5deg); }
.calibration-strip { position: absolute; right: 6vw; bottom: 4rem; width: 2px; height: 54vh; display: grid; align-content: space-between; }
.calibration-strip span { width: 5rem; height: 1px; background: rgba(255,241,194,0.32); transform: translateX(-2.5rem); }

.liquefaction { background: radial-gradient(circle at 62% 48%, rgba(255,90,31,0.36), transparent 22rem), linear-gradient(135deg, #050303, #17101F 50%, #050303); }
.molten-river { position: absolute; left: -10vw; top: 43%; width: 120vw; height: 15rem; transform: rotate(-17deg); border-radius: 70% 32% 61% 38%; background: linear-gradient(90deg, transparent, #8F1D18 12%, #FF5A1F 34%, #FFD447 50%, #FF5A1F 66%, #8F1D18 88%, transparent); filter: url(#soft-melt); box-shadow: 0 0 55px rgba(255,90,31,0.58); }
.bubble { position: absolute; border-radius: 50%; border: 1px solid rgba(255,241,194,0.55); background: rgba(255,241,194,0.16); box-shadow: inset 0 0 18px rgba(255,212,71,0.4); animation: bubbleWobble 5s ease-in-out infinite; }
.b1 { width: 3rem; height: 3rem; left: 22%; top: 32%; }.b2 { width: 1.4rem; height: 1.4rem; left: 47%; top: 12%; animation-delay: -1s; }.b3 { width: 4.4rem; height: 4.4rem; right: 28%; top: 46%; animation-delay: -2s; }.b4 { width: 2rem; height: 2rem; right: 16%; top: 20%; animation-delay: -3s; }
.crust-island { position: absolute; max-width: 34rem; padding: 1.4rem; background: linear-gradient(135deg, rgba(23,16,31,0.94), rgba(5,3,3,0.85)); border: 1px solid rgba(255,90,31,0.36); box-shadow: inset 0 0 0 1px rgba(255,241,194,0.05), 0 18px 44px rgba(0,0,0,0.35); }
.island-one { left: 8vw; top: 17vh; border-radius: 52% 12% 18% 28%; transform: rotate(-3deg); }.island-two { right: 10vw; bottom: 14vh; border-radius: 18% 44% 28% 12%; transform: rotate(4deg); }
.liquefaction h2 { color: #FFD447; text-shadow: 0 0 30px rgba(255,90,31,0.6); }
.liquid-arrow { position: absolute; left: 48%; bottom: 8vh; font-family: "Bebas Neue", sans-serif; font-size: 8rem; color: #FF5A1F; filter: url(#soft-melt); animation: arrowDrip 2.6s ease-in-out infinite; }
.thermal-lines { position: absolute; inset: 10vh 8vw; pointer-events: none; }
.thermal-lines i { position: absolute; border: 1px solid rgba(255,212,71,0.18); border-radius: 48% 52% 43% 57%; transform: rotate(var(--r)); }
.thermal-lines i:nth-child(1){ inset: 8% 20%; --r: 12deg; }.thermal-lines i:nth-child(2){ inset: 18% 12%; --r: -8deg; }.thermal-lines i:nth-child(3){ inset: 28% 26%; --r: 18deg; }.thermal-lines i:nth-child(4){ inset: 4% 4%; --r: -17deg; }.thermal-lines i:nth-child(5){ inset: 38% 8%; --r: 4deg; }

.bloom { display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, rgba(255,212,71,0.18), transparent 24rem), #050303; }
.reactor-flower { position: relative; width: clamp(20rem, 48vw, 40rem); height: clamp(20rem, 48vw, 40rem); animation: bloomTurn 26s linear infinite; }
.petal { position: absolute; left: 50%; top: 50%; width: 22%; height: 47%; transform-origin: 50% 100%; border-radius: 62% 38% 52% 48%; background: radial-gradient(circle at 40% 22%, rgba(255,241,194,0.75), rgba(255,212,71,0.28) 24%, rgba(255,90,31,0.18) 56%, rgba(42,111,127,0.18)); border: 1px solid rgba(255,241,194,0.22); box-shadow: inset 0 -24px 40px rgba(143,29,24,0.3), 0 0 26px rgba(255,90,31,0.2); }
.p1{ transform: translate(-50%,-100%) rotate(0deg); }.p2{ transform: translate(-50%,-100%) rotate(45deg); }.p3{ transform: translate(-50%,-100%) rotate(90deg); }.p4{ transform: translate(-50%,-100%) rotate(135deg); }.p5{ transform: translate(-50%,-100%) rotate(180deg); }.p6{ transform: translate(-50%,-100%) rotate(225deg); }.p7{ transform: translate(-50%,-100%) rotate(270deg); }.p8{ transform: translate(-50%,-100%) rotate(315deg); }
.core-eye { position: absolute; inset: 39%; border-radius: 50%; background: radial-gradient(circle, #FFF1C2, #FFD447 26%, #FF5A1F 58%, #050303 80%); box-shadow: 0 0 70px rgba(255,212,71,0.55); }
.bloom-copy { position: absolute; left: 7vw; bottom: 7vh; max-width: 41rem; padding: 1.5rem; background: rgba(5,3,3,0.52); border-radius: 28px 8px 60px 12px; border: 1px solid rgba(255,212,71,0.28); }
.bloom h2 { font-size: clamp(3.8rem, 9vw, 9rem); color: #FFF1C2; }
.crack-net span { position: absolute; left: 50%; top: 50%; width: 1px; height: var(--h); background: linear-gradient(#FFF1C2, rgba(255,90,31,0.5), transparent); transform-origin: top; transform: rotate(var(--r)); box-shadow: 0 0 12px rgba(255,241,194,0.4); }
.crack-net span:nth-child(1){ --h: 34vh; --r: 24deg; }.crack-net span:nth-child(2){ --h: 42vh; --r: 98deg; }.crack-net span:nth-child(3){ --h: 28vh; --r: 162deg; }.crack-net span:nth-child(4){ --h: 39vh; --r: 231deg; }.crack-net span:nth-child(5){ --h: 31vh; --r: 306deg; }

.afterglass { background: radial-gradient(circle at 50% 100%, rgba(42,111,127,0.24), transparent 26rem), linear-gradient(#050303, #17101F 72%, #050303); }
.archive-header { max-width: 58rem; padding-top: 6vh; }
.afterglass h2 { color: rgba(255,241,194,0.9); text-shadow: 0 0 24px rgba(42,111,127,0.42); }
.shard-field { position: relative; height: 46vh; margin-top: 5vh; }
.shard { position: absolute; width: clamp(8rem, 16vw, 16rem); height: clamp(12rem, 24vw, 22rem); border: 1px solid rgba(255,241,194,0.18); color: rgba(255,241,194,0.72); font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: 0.12em; background: linear-gradient(145deg, rgba(255,90,31,0.18), rgba(42,111,127,0.24) 48%, rgba(5,3,3,0.78)); clip-path: polygon(44% 0, 100% 22%, 74% 100%, 7% 78%, 0 18%); box-shadow: inset 0 0 30px rgba(255,241,194,0.04), 0 28px 60px rgba(0,0,0,0.45); cursor: pointer; transition: transform 300ms ease, filter 300ms ease, background 800ms ease; }
.shard:hover { transform: translateY(-1rem) rotate(var(--rot)) scale(1.04); filter: brightness(1.25); background: linear-gradient(145deg, rgba(255,90,31,0.34), rgba(42,111,127,0.42) 58%, rgba(5,3,3,0.84)); }
.shard span { position: absolute; left: 50%; bottom: 1.3rem; transform: translateX(-50%); }
.shard-a { left: 8%; top: 4%; --rot: -7deg; transform: rotate(-7deg); }.shard-b { left: 33%; top: 18%; --rot: 5deg; transform: rotate(5deg); }.shard-c { right: 26%; top: 0; --rot: -3deg; transform: rotate(-3deg); }.shard-d { right: 7%; top: 20%; --rot: 8deg; transform: rotate(8deg); }
.memory-readout { min-height: 2rem; margin: 0; font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: 0.11em; color: #2A6F7F; }
.final-core { position: absolute; right: 12vw; bottom: 8vh; width: 5rem; height: 7rem; background: linear-gradient(145deg, #FF5A1F, #2A6F7F 40%, #050303 72%); clip-path: polygon(45% 0, 92% 18%, 70% 100%, 16% 82%, 0 25%); box-shadow: 0 0 34px rgba(42,111,127,0.42); animation: coolShard 9s ease-in-out infinite alternate; }

@keyframes ashRise { to { transform: translateY(-112vh) translateX(var(--drift)); opacity: 0; } }
@keyframes dripFall { to { transform: translateY(112vh); opacity: 0; } }
@keyframes bubbleWobble { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(1rem,-0.6rem) scale(1.13,0.92); } }
@keyframes arrowDrip { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(1.2rem) scaleY(1.28); } }
@keyframes bloomTurn { to { transform: rotate(360deg); } }
@keyframes coolShard { from { filter: hue-rotate(0deg) brightness(1.2); } to { filter: hue-rotate(55deg) brightness(0.75); } }

@media (max-width: 760px) {
  .chamber { padding: 4.5rem 1.2rem; }
  .chamber-marks { right: 0.25rem; font-size: 0.55rem; }
  h1 { font-size: 5rem; }
  h2 { font-size: 4.2rem; }
  .quest-core { display: none; }
  .sticker, .calibration-strip { display: none; }
  .crust-island { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 12vh 0; }
  .bloom-copy { position: relative; left: auto; bottom: auto; }
  .shard-field { height: 62vh; }
  .shard { width: 8rem; height: 12rem; }
}