:root {
  color-scheme: dark;
  --ink: #f7f4ea;
  --muted: rgba(231, 242, 240, 0.62);
  --cyan: #62e2db;
  --gold: #ffc86b;
  --night: #020609;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; background: var(--night); }

body {
  overflow: hidden;
  color: var(--ink);
  font-family: "Noto Serif SC", "Songti SC", "STSong", serif;
  -webkit-tap-highlight-color: transparent;
}

button, input { font: inherit; }
button { color: inherit; }

.experience, .scene { width: 100%; height: 100svh; min-height: 560px; }

.scene {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1.1s ease, visibility 1.1s;
}

.scene.is-active { opacity: 1; visibility: visible; pointer-events: auto; }

.opening { background: #010203; }

.opening::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 18vh;
  top: 0;
  background: linear-gradient(transparent, rgba(89, 219, 208, .42), transparent);
  animation: breathe 4s ease-in-out infinite;
}

.opening-grain {
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image: radial-gradient(rgba(255,255,255,.24) .45px, transparent .55px);
  background-size: 6px 6px;
  mask-image: radial-gradient(circle at center, #000, transparent 72%);
}

.opening-for {
  position: absolute;
  top: max(11vh, 64px);
  margin: 0;
  color: rgba(255,255,255,.66);
  font-family: system-ui, sans-serif;
  font-size: .75rem;
  letter-spacing: .35em;
}

.enter-button {
  position: relative;
  min-width: 132px;
  padding: 13px 20px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  font-family: system-ui, sans-serif;
  font-size: .82rem;
  letter-spacing: .14em;
  cursor: pointer;
  transition: border-color .3s, background .3s, transform .3s;
}

.enter-button:hover, .enter-button:focus-visible {
  border-color: rgba(98,226,219,.78);
  background: rgba(98,226,219,.08);
  transform: translateY(-2px);
  outline: none;
}

.enter-button i {
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(98,226,219,.12);
  border-radius: inherit;
  animation: button-ring 2.6s ease-out infinite;
}

.opening-note {
  position: absolute;
  bottom: max(5vh, 30px);
  margin: 0;
  color: rgba(255,255,255,.24);
  font: 500 .62rem/1 system-ui, sans-serif;
  letter-spacing: .24em;
}

.laboratory { background: #031016; overflow: hidden; }

.lab-backdrop {
  position: absolute;
  inset: -30px;
  background: url("lab-background.png") center / cover;
  filter: blur(22px) brightness(.45);
  transform: scale(1.08);
}

.lab-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .8;
}

.lab-vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,4,8,.32), rgba(0,8,12,.05) 48%, rgba(0,3,5,.5)),
    radial-gradient(circle at 50% 42%, transparent 16%, rgba(0,2,4,.24) 76%);
}

.particle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.experiment-card, .conclusion-card {
  position: relative;
  z-index: 3;
  width: min(88vw, 520px);
  padding: clamp(24px, 5vw, 38px);
  border: 1px solid rgba(185,242,236,.2);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(4,17,24,.82), rgba(4,11,16,.66));
  box-shadow: 0 24px 80px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.07);
  backdrop-filter: blur(18px) saturate(115%);
  transition: opacity .6s ease, transform .6s ease;
}

.experiment-header { display: flex; justify-content: space-between; align-items: center; }
.experiment-header p, .experiment-header span, .conclusion-index {
  margin: 0;
  color: rgba(208,244,240,.5);
  font: 600 .66rem/1 system-ui, sans-serif;
  letter-spacing: .18em;
}

.experiment-header span { letter-spacing: .08em; }
.lab-label { margin: 38px 0 14px; color: var(--muted); font-size: .88rem; letter-spacing: .18em; }

.experiment-card h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin: 0 0 26px;
  font-size: clamp(1.18rem, 5vw, 1.65rem);
  font-weight: 500;
  line-height: 1.55;
}

.experiment-card h1 i { color: var(--cyan); font-style: normal; opacity: .65; }
.experiment-card h1 b { width: 100%; color: var(--gold); font-family: system-ui, sans-serif; font-size: 1.35em; font-weight: 300; }

.choices { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.choices legend { width: 100%; margin-bottom: 4px; color: rgba(255,255,255,.5); font: .75rem/1.5 system-ui, sans-serif; }
.choices label { cursor: pointer; }
.choices input { position: absolute; opacity: 0; pointer-events: none; }
.choices span {
  display: block;
  padding: 10px 15px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  font-family: system-ui, sans-serif;
  font-size: .84rem;
  transition: .25s ease;
}

.choices input:checked + span { color: #031216; border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 22px rgba(98,226,219,.25); }
.choices input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }

.equation-result { min-height: 24px; margin: 17px 0 20px; color: var(--gold); font-size: .83rem; line-height: 1.6; }

.heat-button, .continue-button {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255,203,105,.5);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,168,68,.16), rgba(98,226,219,.12));
  font-family: system-ui, sans-serif;
  font-size: .9rem;
  letter-spacing: .12em;
  cursor: pointer;
  transition: .25s ease;
}

.heat-button i { margin-left: 10px; color: var(--gold); font-style: normal; }
.heat-button:not(:disabled):hover, .continue-button:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,177,77,.15); }
.heat-button:disabled { opacity: .34; cursor: not-allowed; }

.experiment-card.is-reacting { opacity: 0; transform: translateY(-18px) scale(.97); pointer-events: none; }

.flame {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 9%;
  width: 70px;
  height: 90px;
  transform: translateX(-50%) scale(.2);
  opacity: 0;
  filter: drop-shadow(0 0 28px #ff8a18);
  transition: opacity .5s, transform .7s cubic-bezier(.2,.8,.2,1);
}

.flame i, .flame b { position: absolute; left: 50%; bottom: 0; border-radius: 48% 52% 50% 50%; transform: translateX(-50%) rotate(45deg); }
.flame i { width: 48px; height: 48px; background: #ff8d24; }
.flame b { width: 28px; height: 28px; background: #ffe07a; box-shadow: 0 0 24px #ffe07a; }
.laboratory.is-heating .flame { opacity: .9; transform: translateX(-50%) scale(1); animation: flicker .34s ease-in-out infinite alternate; }

.bubble {
  position: absolute;
  z-index: 2;
  left: calc(50% + var(--x));
  bottom: 17%;
  width: var(--size);
  aspect-ratio: 1;
  border: 1px solid rgba(133,245,238,.65);
  border-radius: 50%;
  box-shadow: inset 2px 2px rgba(255,255,255,.35), 0 0 10px rgba(98,226,219,.2);
  opacity: 0;
  animation: rise var(--duration) ease-in infinite var(--delay);
}

.conclusion-card {
  position: absolute;
  opacity: 0;
  transform: translateY(28px) scale(.96);
  pointer-events: none;
}

.conclusion-card.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.conclusion-card h2 { margin: 22px 0 14px; font-size: clamp(1.7rem, 8vw, 2.5rem); font-weight: 500; }
.conclusion-rule { width: 42px; height: 1px; margin-bottom: 22px; background: linear-gradient(90deg, var(--gold), transparent); }
.conclusion-card > p:not(.conclusion-index) { margin: 6px 0; color: rgba(249,247,238,.78); font-size: clamp(.95rem, 3.8vw, 1.08rem); line-height: 1.85; }
.conclusion-card .teachers-day { margin: 21px 0 24px !important; color: var(--gold) !important; font-size: 1.18rem !important; }

.finale { overflow: hidden; background: radial-gradient(circle at center, #08232a 0, #020709 44%, #010203 75%); }
.finale::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,215,139,.5) .7px, transparent .8px); background-size: 32px 32px; opacity: .16; }

.final-copy { position: relative; z-index: 2; width: min(82vw, 560px); text-align: center; opacity: 0; transform: translateY(18px); }
.finale.is-active .final-copy { animation: final-in 1.4s .35s ease forwards; }
.final-copy p { margin: 0 0 24px; color: var(--cyan); font: 600 .67rem/1 system-ui, sans-serif; letter-spacing: .32em; }
.final-copy h2 { margin: 0; font-size: clamp(2.25rem, 10vw, 4.7rem); font-weight: 500; line-height: 1.35; text-shadow: 0 0 42px rgba(255,200,107,.12); }
.final-copy span { display: block; margin-top: 26px; color: var(--gold); font: italic 1rem/1 Georgia, serif; letter-spacing: .12em; }

.final-orbit { position: absolute; width: min(74vw, 470px); aspect-ratio: 1; border: 1px solid rgba(98,226,219,.12); border-radius: 50%; }
.final-orbit::after { content: ""; position: absolute; width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--gold); box-shadow: 0 0 18px var(--gold); }
.orbit-one { animation: spin 19s linear infinite; }
.orbit-one::after { top: 12%; left: 15%; }
.orbit-two { width: min(48vw, 300px); animation: spin 13s linear infinite reverse; }
.orbit-two::after { right: -3px; top: 48%; background: var(--cyan); box-shadow: 0 0 18px var(--cyan); }

@keyframes breathe { 50% { opacity: .35; } }
@keyframes button-ring { from { opacity: .8; transform: scale(.96); } to { opacity: 0; transform: scale(1.18); } }
@keyframes flicker { to { transform: translateX(-50%) scale(.94, 1.06) rotate(-2deg); } }
@keyframes rise { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 15% { opacity: .8; } 100% { opacity: 0; transform: translate(var(--drift), -55vh) scale(1.2); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes final-in { to { opacity: 1; transform: none; } }

@media (max-width: 520px) {
  .lab-art { object-fit: cover; }
  .experiment-card { margin-top: -5vh; }
  .lab-label { margin-top: 28px; }
}

@media (max-height: 670px) {
  .experiment-card, .conclusion-card { padding: 20px; }
  .lab-label { margin-top: 18px; }
  .experiment-card h1 { margin-bottom: 14px; }
  .equation-result { margin: 10px 0; }
  .conclusion-card h2 { margin-top: 14px; }
  .conclusion-card > p:not(.conclusion-index) { line-height: 1.58; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}