:root {
  color-scheme: dark;
  --gold: #ffd66c;
  --bright: #fff4c2;
  --amber: #f49b30;
  --spine-shift: 172px;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: #03050c;
}

body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  color: #f7efdc;
  font-family: Georgia, "Times New Roman", serif;
}

.scene {
  position: relative;
  isolation: isolate;
  width: min(1180px, 100vw);
  height: min(780px, 100svh);
  min-height: 570px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 78%, rgba(41, 91, 174, .31), transparent 32%),
    radial-gradient(circle at 50% 33%, #273a63, #101931 40%, #050814 79%);
}

.nebula {
  position: absolute;
  inset: -25%;
  background: conic-gradient(from 110deg, transparent, rgba(97, 53, 130, .15), transparent 31%, rgba(62, 119, 191, .14), transparent 68%);
  filter: blur(34px);
  animation: rotate-slow 27s linear infinite;
}

.stars,
.stars::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .15;
  background-image: radial-gradient(circle, #fff 0 1px, transparent 1.4px);
  background-size: 93px 77px;
  animation: star-drift 19s linear infinite;
}

.stars::before {
  transform: translate(43px, 28px);
  background-size: 137px 109px;
  opacity: .48;
}

.mastery-panel {
  position: absolute;
  z-index: 20;
  top: 25px;
  left: 50%;
  width: min(530px, calc(100% - 30px));
  transform: translateX(-50%);
  opacity: 0;
}

.scene.playing .mastery-panel {
  animation: panel-in .55s .06s both;
}

.heading {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 12px;
  margin: 0 7px 9px;
  text-transform: uppercase;
}

.heading h1 {
  margin: 0;
  color: #e4cb83;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .3em;
  white-space: nowrap;
}

.heading small {
  color: #7682a8;
  font: 600 9px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .17em;
}

.heading small:last-child { text-align: right; }

.hand-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 42px;
  margin: 5px 0;
  padding: 0 17px;
  border: 1px solid rgba(220, 226, 247, .1);
  border-radius: 7px;
  color: rgba(237, 234, 224, .42);
  background: linear-gradient(90deg, rgba(31, 41, 72, .82), rgba(7, 11, 24, .92));
  font-size: 13px;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hand-row b {
  font: 700 11px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .08em;
}

.active-row {
  grid-template-columns: 20px 1fr auto;
}

.active-row i {
  opacity: 0;
  color: var(--gold);
  font-size: 9px;
  font-style: normal;
}

.old-level,
.new-level {
  grid-column: 3;
  grid-row: 1;
}

.new-level {
  opacity: 0;
  color: var(--bright);
}

.scene.playing .active-row {
  animation: row-impact .58s 3.24s both;
}

.scene.playing .active-row i {
  animation: appear .2s 3.24s both;
}

.scene.playing .old-level {
  animation: old-out .27s 3.31s both;
}

.scene.playing .new-level {
  animation: new-in .44s 3.33s both;
}

.tome-stage {
  position: absolute;
  z-index: 12;
  isolation: isolate;
  left: 50%;
  bottom: 30px;
  width: min(660px, 96vw);
  height: 440px;
  transform: translateX(-50%);
  pointer-events: none;
}

.book {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -3px;
  width: 500px;
  height: 500px;
  transform: translateX(-50%) translateY(58px) scale(.64) rotateX(5deg);
  transform-origin: 50% 82%;
  transform-style: preserve-3d;
  perspective: 1500px;
  opacity: 0;
}

.scene.playing .book {
  animation: book-rise 4.4s .16s both;
}

.open-layer,
.closed-base,
.cover-plane {
  position: absolute;
  inset: 0;
}

.open-layer {
  z-index: 2;
  opacity: 0;
  transform: scaleX(.72) scaleY(.9);
  filter: brightness(.68);
}

.open-layer img,
.closed-base img,
.cover-front img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.open-layer img {
  translate: var(--open-x, 0px) var(--open-y, 0px);
  scale: var(--open-art-scale, 1);
}

.scene.playing .open-layer {
  animation: open-reveal 1.32s .79s cubic-bezier(.18, .7, .17, 1) both;
}

.closed-base {
  z-index: 5;
  opacity: 1;
}

.hinge-cover,
.spread-half {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter, clip-path;
}

.hinge-cover {
  z-index: 8;
  transform: translateX(0) rotateY(0deg) translateZ(8px);
  transform-origin: 17% 50%;
  backface-visibility: hidden;
}

.hinge-cover img,
.spread-half img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.hinge-cover img {
  filter: drop-shadow(11px 14px 15px rgba(0, 0, 0, .55));
  backface-visibility: hidden;
}

.spread-half {
  z-index: 7;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.spread-half img {
  translate: var(--open-x, 0px) var(--open-y, 0px);
  scale: var(--open-art-scale, 1);
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

.spread-left {
  clip-path: inset(-28% 46% -28% -28%);
}

.spread-right {
  clip-path: inset(-28% -28% -28% 46%);
}

.scene.playing .closed-base {
  animation: closed-base-out .58s .82s both;
}

.cover-plane {
  z-index: 10;
  transform-origin: 13% 50%;
  transform-style: preserve-3d;
}

.scene.playing .cover-plane {
  animation: cover-hinge 1.15s .69s cubic-bezier(.22, .67, .16, 1) both;
}

.cover-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}

.cover-front {
  filter: drop-shadow(9px 14px 14px rgba(0, 0, 0, .5));
}

.cover-back {
  display: grid;
  place-items: center;
  transform: rotateY(180deg);
  clip-path: inset(5% 9% 5% 10% round 12px);
  color: rgba(136, 81, 27, .36);
  background:
    radial-gradient(circle at 62% 36%, rgba(255, 255, 255, .2), transparent 34%),
    radial-gradient(circle at 25% 78%, color-mix(in srgb, var(--page-base, #eadfd1) 82%, #b98d73), transparent 52%),
    linear-gradient(90deg, color-mix(in srgb, var(--page-base, #eadfd1) 86%, #75543f), var(--page-base, #eadfd1) 14%, color-mix(in srgb, var(--page-base, #eadfd1) 92%, white));
  font-size: 36px;
}

.page-aura {
  position: absolute;
  inset: 13% 4% 13%;
  opacity: 0;
  background: radial-gradient(circle at 65% 45%, rgba(255, 249, 199, .75), transparent 30%);
  mix-blend-mode: screen;
  filter: blur(8px);
}

.scene.playing .page-aura {
  animation: aura 1.12s 1.76s both;
}

.page-sheet {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 18%;
  width: 42%;
  height: 65%;
  display: grid;
  place-items: center;
  transform-origin: 0 50%;
  border: 1px solid rgba(112, 68, 22, .45);
  border-radius: 2px 15px 15px 2px;
  opacity: 0;
  color: color-mix(in srgb, var(--page-base, #eadfd1) 48%, #805638);
  background:
    radial-gradient(circle at 71% 28%, rgba(255, 255, 255, .28), transparent 31%),
    radial-gradient(circle at 26% 74%, color-mix(in srgb, var(--page-base, #eadfd1) 84%, #b88770), transparent 49%),
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--page-base, #eadfd1) 82%, #72503b),
      var(--page-base, #eadfd1) 12%,
      color-mix(in srgb, var(--page-base, #eadfd1) 94%, white) 72%,
      var(--page-base, #eadfd1)
    );
  box-shadow:
    inset 12px 0 19px rgba(85, 57, 42, .13),
    inset -2px 0 4px rgba(115, 80, 58, .09),
    5px 5px 13px rgba(35, 17, 4, .28);
  font-size: 22px;
  letter-spacing: .2em;
}

.art-leaf {
  position: absolute;
  z-index: 9;
  top: -20%;
  left: 50%;
  width: 75%;
  height: 140%;
  overflow: hidden;
  opacity: 0;
  transform: rotateY(0deg) translateZ(5px);
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  backface-visibility: visible;
  will-change: transform, opacity, filter;
}

.art-leaf img {
  position: absolute;
  top: 100px;
  left: -250px;
  width: 500px;
  height: 500px;
  max-width: none;
  display: block;
  object-fit: contain;
  translate: var(--open-x, 0px) var(--open-y, 0px);
  scale: var(--open-art-scale, 1);
  transform-origin: 50% 50%;
  backface-visibility: visible;
}

.spine-softener {
  position: absolute;
  z-index: 11;
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 22px;
  transform: translateX(-50%);
  border-radius: 50%;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--page-base, #eadfd1) 88%, white) 36%,
    color-mix(in srgb, var(--page-base, #eadfd1) 92%, white) 50%,
    color-mix(in srgb, var(--page-base, #eadfd1) 88%, white) 64%,
    transparent
  );
  filter: blur(1.2px);
  pointer-events: none;
}

.scene.playing .sheet-one {
  animation: page-turn .48s 1.54s cubic-bezier(.28, .06, .19, 1) both;
}

.scene.playing .sheet-two {
  animation: page-turn .48s 1.75s cubic-bezier(.28, .06, .19, 1) both;
}

.scene.playing .sheet-three {
  animation: page-turn .52s 1.96s cubic-bezier(.28, .06, .19, 1) both;
}

.spine-flare {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 18%;
  width: 10px;
  height: 65%;
  transform: translateX(-50%) scaleY(.08);
  transform-origin: 50% 72%;
  opacity: 0;
  background: linear-gradient(to bottom, transparent, #fff6bd 28%, #f6a12e 62%, transparent);
  filter: blur(5px);
}

.scene.playing .spine-flare {
  animation: spine-light .76s 1.82s both;
}

.floor-glow {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 470px;
  height: 82px;
  transform: translateX(-50%) scale(.4);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(ellipse, rgba(255, 204, 77, .52), rgba(50, 100, 192, .18) 44%, transparent 72%);
  filter: blur(13px);
}

.scene.playing .floor-glow {
  animation: floor-pulse 3.4s .38s both;
}

.light-beam {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 52px;
  width: 390px;
  height: 300px;
  transform: translateX(-50%) scale(.72);
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 78%, rgba(255, 218, 116, .38), rgba(106, 153, 224, .12) 36%, transparent 70%);
  filter: blur(24px);
  mix-blend-mode: screen;
}

.scene.playing .light-beam {
  animation: beam 1.08s 1.82s both;
}

.rune {
  position: absolute;
  z-index: 25;
  left: 50%;
  bottom: 104px;
  width: 76px;
  height: 76px;
  transform: translate(-50%, 50%) scale(.2);
  opacity: 0;
  color: var(--bright);
  text-shadow: 0 0 8px #fff, 0 0 22px var(--gold), 0 0 45px var(--amber);
}

.rune span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 51px;
}

.rune i {
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold);
  border-radius: 50%;
}

.scene.playing .rune {
  animation: rune-rise .78s 2.62s cubic-bezier(.18, .7, .2, 1) both;
}

.scene.playing .rune i {
  animation: rotate-slow .75s linear infinite;
}

.transfer {
  position: absolute;
  z-index: 22;
  left: 50%;
  bottom: 126px;
  width: 7px;
  height: 224px;
  transform: translateX(-50%) scaleY(0);
  transform-origin: bottom;
  opacity: 0;
  background: linear-gradient(to top, transparent, #fff9c8 34%, var(--gold) 70%, transparent);
  filter: blur(4px);
  box-shadow: 0 0 16px var(--gold);
}

.scene.playing .transfer {
  animation: transfer .5s 2.92s both;
}

.particle {
  position: absolute;
  z-index: 23;
  left: 50%;
  bottom: 115px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  opacity: 0;
  background: var(--color);
  box-shadow: 0 0 9px var(--color);
}

.scene.playing .particle {
  animation: particle var(--duration) var(--delay) ease-out both;
}

.result {
  position: absolute;
  z-index: 35;
  top: 62%;
  left: 50%;
  width: min(620px, calc(100% - 36px));
  transform: translate(-50%, calc(-50% + 13px)) scale(.92);
  opacity: 0;
  text-align: center;
  text-transform: uppercase;
}

.scene.playing .result {
  animation: result-in .66s 3.46s both;
}

.result small {
  display: block;
  margin-bottom: 3px;
  color: #d5b45c;
  font: 700 10px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .42em;
}

.result strong {
  color: var(--bright);
  font-size: clamp(31px, 5vw, 52px);
  font-weight: 600;
  letter-spacing: .17em;
  text-shadow: 0 2px #874811, 0 0 12px #fff0a8, 0 0 30px rgba(255, 174, 42, .72);
}

.result > span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  vertical-align: 8px;
  color: #d5bd7c;
  font: 700 9px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .12em;
}

.result b {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: #241504;
  background: linear-gradient(#fff1a7, #d79628);
  box-shadow: 0 0 17px rgba(255, 202, 76, .72);
  font-size: 16px;
}

.controls {
  position: absolute;
  z-index: 80;
  right: 17px;
  bottom: 16px;
  display: flex;
  align-items: end;
  gap: 10px;
}

.controls label {
  display: grid;
  gap: 5px;
  color: #7782a5;
  font: 700 9px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.controls select {
  min-height: 41px;
  padding: 0 34px 0 12px;
  border: 1px solid #4d5778;
  border-radius: 7px;
  color: #d8dded;
  background: #10162a;
  font: 700 11px/1 ui-sans-serif, system-ui, sans-serif;
}

.controls button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid #d5a53b;
  border-radius: 7px;
  color: #291704;
  background: linear-gradient(#ffe897, #c98a25);
  box-shadow: 0 5px 0 #67400e, 0 10px 24px rgba(0, 0, 0, .42);
  cursor: pointer;
  font: 800 12px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.controls button:hover { filter: brightness(1.1); }
.controls button:active { transform: translateY(4px); box-shadow: 0 1px 0 #67400e; }
.controls button:focus-visible,
.controls select:focus-visible { outline: 3px solid var(--bright); outline-offset: 3px; }

.dev-panel[hidden] { display: none !important; }

.dev-panel {
  position: absolute;
  z-index: 120;
  top: 12px;
  right: 12px;
  width: min(326px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  padding: 13px;
  overflow: auto;
  border: 1px solid rgba(239, 190, 74, .52);
  border-radius: 12px;
  color: #e9edf9;
  background: linear-gradient(145deg, rgba(17, 24, 45, .97), rgba(5, 8, 18, .96));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .58), inset 0 1px rgba(255, 255, 255, .06);
  backdrop-filter: blur(16px);
  font: 600 11px/1.25 ui-sans-serif, system-ui, sans-serif;
}

.dev-header,
.dev-context,
.dev-running-title,
.dev-speed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dev-header {
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(133, 145, 181, .2);
}

.dev-header > div { display: grid; gap: 3px; }

.dev-header small,
.dev-running-title,
.dev-speed > span {
  color: #8793b4;
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.dev-header strong {
  color: #ffe6a0;
  font-size: 13px;
  letter-spacing: .04em;
}

.dev-panel button {
  border: 1px solid #4b587f;
  border-radius: 7px;
  color: #dce3fa;
  background: #151d36;
  cursor: pointer;
  font: 700 10px/1 ui-sans-serif, system-ui, sans-serif;
}

.dev-panel button:hover { border-color: #d6a73e; color: #fff0b5; }
.dev-panel button:focus-visible,
.dev-panel input:focus-visible { outline: 2px solid #ffdc77; outline-offset: 2px; }

#devClose {
  width: 29px;
  height: 29px;
  padding: 0;
  font-size: 18px;
}

.dev-context {
  margin: 10px 0 8px;
  color: #ffdb75;
}

.dev-context span { color: #9ba6c7; font-weight: 600; }

.dev-clock {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(90, 111, 165, .43);
  border-radius: 9px;
  background: rgba(4, 8, 20, .78);
}

#devTime {
  color: #fff3c5;
  font: 700 28px/.9 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}

#devPhase { color: #70cdf7; font-size: 10px; text-align: right; }

.dev-speed {
  display: grid;
  grid-template-columns: 1fr auto;
  margin-top: 11px;
}

#devSpeedValue {
  color: #ffda75;
  font: 800 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

#devSpeed {
  grid-column: 1 / -1;
  width: 100%;
  margin: 9px 0 3px;
  accent-color: #eab842;
  cursor: ew-resize;
}

.dev-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.dev-actions button { min-height: 34px; padding: 0 10px; }
.dev-actions button:first-child { border-color: #9a7330; }

.dev-running {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid rgba(133, 145, 181, .2);
}

.dev-running-title small { color: #69d3a3; font-size: 9px; letter-spacing: .04em; }

#devAnimationList {
  display: grid;
  gap: 3px;
  max-height: 155px;
  margin: 7px 0 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
}

#devAnimationList li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 5px 7px;
  border-radius: 5px;
  color: #b9c4e3;
  background: rgba(39, 51, 83, .52);
  font: 600 9px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

#devAnimationList li span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#devAnimationList li span:last-child { color: #ffcf63; font-variant-numeric: tabular-nums; }
#devAnimationList .dev-empty { display: block; color: #7f8aa8; }

.dev-hint {
  margin: 9px 0 0;
  color: #697694;
  font-size: 9px;
  text-align: center;
}

.dev-hint kbd,
.dev-hint code {
  color: #bac4df;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.impact-flash {
  position: absolute;
  z-index: 50;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 34%, rgba(255, 246, 185, .68), rgba(255, 164, 30, .1) 28%, transparent 58%);
  mix-blend-mode: screen;
}

.scene.playing .impact-flash {
  animation: flash .3s 3.2s both;
}

.vignette {
  position: absolute;
  z-index: 70;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 170px 46px rgba(0, 0, 0, .82);
}

.version-switcher {
  position: absolute;
  z-index: 82;
  left: 17px;
  bottom: 16px;
  width: min(760px, calc(100% - 380px));
}

.version-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.version-buttons button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 37px;
  padding: 0 11px 0 8px;
  border: 1px solid #3d486c;
  border-radius: 7px;
  color: #9ba5c4;
  background: rgba(12, 18, 37, .9);
  box-shadow: 0 5px 15px rgba(0, 0, 0, .28);
  cursor: pointer;
  font: 700 10px/1 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .06em;
  transition: border-color .16s, color .16s, background .16s, transform .16s;
}

.version-buttons button:hover {
  color: #e5e8f3;
  border-color: #6f7ca6;
  transform: translateY(-1px);
}

.version-buttons button[aria-pressed="true"] {
  color: #ffecaa;
  border-color: #c89a38;
  background: linear-gradient(180deg, rgba(90, 64, 19, .94), rgba(40, 30, 16, .94));
  box-shadow: 0 0 17px rgba(255, 193, 64, .16);
}

.version-buttons b {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 1px solid currentColor;
  border-radius: 5px;
  font-size: 9px;
}

.version-switcher p {
  margin: 7px 0 0 2px;
  color: #687395;
  font: 500 9px/1.3 ui-sans-serif, system-ui, sans-serif;
  letter-spacing: .06em;
}

.burst-ring {
  position: absolute;
  z-index: 27;
  left: 50%;
  bottom: 118px;
  width: 36px;
  height: 36px;
  transform: translate(-50%, 50%) scale(.1);
  border: 2px solid var(--bright);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 11px var(--gold);
}

.orbit-halo {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 72px;
  width: 390px;
  height: 390px;
  transform: translateX(-50%) scale(.5) rotate(-25deg);
  border: 1px solid rgba(255, 218, 112, .66);
  border-radius: 50%;
  opacity: 0;
  box-shadow:
    inset 0 0 22px rgba(255, 190, 61, .12),
    0 0 24px rgba(255, 188, 55, .18);
}

.orbit-halo::before,
.orbit-halo::after {
  content: "✦　　　•　　　　✧　　　•";
  position: absolute;
  inset: 30px;
  display: grid;
  place-items: start center;
  border: 1px solid rgba(121, 174, 255, .4);
  border-radius: 50%;
  color: #ffe69a;
  font-size: 13px;
  letter-spacing: .12em;
  text-shadow: 0 0 8px currentColor;
}

.orbit-halo::after {
  inset: 76px;
  content: "•　✦　•";
  transform: rotate(140deg);
  border-color: rgba(255, 211, 101, .34);
}

.light-curtain {
  position: absolute;
  z-index: 26;
  left: 50%;
  bottom: 72px;
  width: 18px;
  height: 360px;
  transform: translateX(-50%) scaleX(.05);
  opacity: 0;
  background: linear-gradient(to bottom, transparent, #fffce0 22%, #ffd56b 70%, transparent);
  filter: blur(4px);
  box-shadow: 0 0 16px #fff2ab, 0 0 54px rgba(255, 167, 38, .72);
  mix-blend-mode: screen;
}

/* Version C: a clean seam of light replaces the book with no page geometry. */
.scene[data-version="light"] .cover-plane,
.scene[data-version="light"] .page-sheet,
.scene[data-version="light"] .art-leaf {
  display: none;
}

.scene[data-version="light"].playing .closed-base {
  animation: light-closed 1.2s .2s both;
}

.scene[data-version="light"].playing .open-layer {
  animation: light-open 1.14s 1s cubic-bezier(.18, .75, .18, 1) both;
}

.scene[data-version="light"].playing .light-curtain {
  animation: light-curtain .72s .86s both;
}

.scene[data-version="light"].playing .burst-ring {
  animation: burst-ring .64s 1.18s both;
}

.scene[data-version="light"].playing .rune {
  animation: rune-rise .76s 2.34s cubic-bezier(.18, .7, .2, 1) both;
}

.scene[data-version="light"].playing .transfer {
  animation: transfer .48s 2.61s both;
}

.scene[data-version="light"].playing .active-row {
  animation: row-impact .54s 2.91s both;
}

.scene[data-version="light"].playing .active-row i {
  animation: appear .18s 2.91s both;
}

.scene[data-version="light"].playing .old-level {
  animation: old-out .25s 2.97s both;
}

.scene[data-version="light"].playing .new-level {
  animation: new-in .42s 2.99s both;
}

.scene[data-version="light"].playing .result {
  animation: result-in .62s 3.18s both;
}

.scene[data-version="light"].playing .impact-flash {
  animation: flash .28s 2.87s both;
}

.scene[data-version="light"].playing {
  animation: rumble .28s 2.87s both;
}

/* C+: preserve the exact final dimensions and soften the transition seam. */
.scene[data-version="light-polish"] .cover-plane,
.scene[data-version="light-polish"] .page-sheet,
.scene[data-version="light-polish"] .art-leaf {
  display: none;
}

.scene[data-version="light-polish"].playing .closed-base {
  animation: light-polish-closed 1.24s .2s both;
}

.scene[data-version="light-polish"].playing .open-layer {
  animation: light-polish-open 1.2s 1.02s cubic-bezier(.18, .75, .18, 1) both;
}

.scene[data-version="light-polish"].playing .light-curtain {
  animation: light-polish-curtain .78s .9s both;
}

.scene[data-version="light-polish"].playing .burst-ring {
  animation: burst-ring .64s 1.22s both;
}

.scene[data-version="light-polish"].playing .rune {
  animation: rune-rise .76s 2.36s cubic-bezier(.18, .7, .2, 1) both;
}

.scene[data-version="light-polish"].playing .transfer {
  animation: transfer .48s 2.63s both;
}

.scene[data-version="light-polish"].playing .active-row {
  animation: row-impact .54s 2.93s both;
}

.scene[data-version="light-polish"].playing .active-row i {
  animation: appear .18s 2.93s both;
}

.scene[data-version="light-polish"].playing .old-level {
  animation: old-out .25s 2.99s both;
}

.scene[data-version="light-polish"].playing .new-level {
  animation: new-in .42s 3.01s both;
}

.scene[data-version="light-polish"].playing .result {
  animation: result-in .62s 3.2s both;
}

.scene[data-version="light-polish"].playing .impact-flash {
  animation: flash .28s 2.89s both;
}

.scene[data-version="light-polish"].playing {
  animation: rumble .28s 2.89s both;
}

/* C++: keep the clean swap, then add a controlled arcane bloom. */
.scene[data-version="light-bloom"] .cover-plane,
.scene[data-version="light-bloom"] .page-sheet,
.scene[data-version="light-bloom"] .art-leaf {
  display: none;
}

.scene[data-version="light-bloom"].playing .closed-base {
  animation: light-bloom-closed 1.32s .2s both;
}

.scene[data-version="light-bloom"].playing .open-layer {
  animation: light-bloom-open 1.3s 1.06s cubic-bezier(.18, .75, .18, 1) both;
}

.scene[data-version="light-bloom"].playing .light-curtain {
  animation: light-bloom-curtain .9s .86s both;
}

.scene[data-version="light-bloom"].playing .orbit-halo {
  animation: light-bloom-halo 1.62s .7s both;
}

.scene[data-version="light-bloom"].playing .burst-ring {
  animation: burst-ring .8s 1.2s both;
}

.scene[data-version="light-bloom"].playing .rune {
  animation: rune-rise .78s 2.44s cubic-bezier(.18, .7, .2, 1) both;
}

.scene[data-version="light-bloom"].playing .transfer {
  animation: transfer .5s 2.72s both;
}

.scene[data-version="light-bloom"].playing .active-row {
  animation: row-impact .56s 3.02s both;
}

.scene[data-version="light-bloom"].playing .active-row i {
  animation: appear .18s 3.02s both;
}

.scene[data-version="light-bloom"].playing .old-level {
  animation: old-out .25s 3.08s both;
}

.scene[data-version="light-bloom"].playing .new-level {
  animation: new-in .42s 3.1s both;
}

.scene[data-version="light-bloom"].playing .result {
  animation: result-in .64s 3.28s both;
}

.scene[data-version="light-bloom"].playing .impact-flash {
  animation: flash .3s 2.98s both;
}

.scene[data-version="light-bloom"].playing {
  animation: rumble .3s 2.98s both;
}

/* Version F: a short flutter of real, illustrated page textures. */
.scene[data-version="real-flutter"] .cover-plane,
.scene[data-version="real-flutter"] .page-sheet {
  display: none;
}

.scene[data-version="real-flutter"].playing .closed-base {
  animation: cascade-closed 1.5s .18s both;
}

.scene[data-version="real-flutter"].playing .open-layer {
  animation: cascade-open 1.56s 1.08s cubic-bezier(.17, .73, .18, 1) both;
}

.scene[data-version="real-flutter"].playing .art-leaf-one {
  animation: art-page-turn .64s 1.3s cubic-bezier(.2, .04, .18, 1) both;
}

.scene[data-version="real-flutter"].playing .art-leaf-two {
  animation: art-page-turn .66s 1.54s cubic-bezier(.2, .04, .18, 1) both;
}

.scene[data-version="real-flutter"].playing .art-leaf-three {
  animation: art-page-turn .68s 1.78s cubic-bezier(.2, .04, .18, 1) both;
}

.scene[data-version="real-flutter"].playing .burst-ring {
  animation: burst-ring .7s 1.4s both;
}

.scene[data-version="real-flutter"].playing .particle {
  animation-delay: calc(var(--delay) + .34s);
}

.scene[data-version="real-flutter"].playing .rune {
  animation: rune-rise .78s 2.72s cubic-bezier(.18, .7, .2, 1) both;
}

.scene[data-version="real-flutter"].playing .transfer {
  animation: transfer .5s 3.02s both;
}

.scene[data-version="real-flutter"].playing .active-row {
  animation: row-impact .58s 3.33s both;
}

.scene[data-version="real-flutter"].playing .active-row i {
  animation: appear .2s 3.33s both;
}

.scene[data-version="real-flutter"].playing .old-level {
  animation: old-out .27s 3.39s both;
}

.scene[data-version="real-flutter"].playing .new-level {
  animation: new-in .44s 3.41s both;
}

.scene[data-version="real-flutter"].playing .result {
  animation: result-in .66s 3.58s both;
}

.scene[data-version="real-flutter"].playing .impact-flash {
  animation: flash .3s 3.29s both;
}

.scene[data-version="real-flutter"].playing {
  animation: rumble .3s 3.29s both;
}

/* F+: two full-size illustrated leaves with a quieter, silkier cadence. */
.scene[data-version="silk-flutter"] .cover-plane,
.scene[data-version="silk-flutter"] .page-sheet,
.scene[data-version="silk-flutter"] .art-leaf-three {
  display: none;
}

.scene[data-version="silk-flutter"].playing .closed-base {
  animation: flutter-soft-closed 1.5s .18s both;
}

.scene[data-version="silk-flutter"].playing .open-layer {
  animation: flutter-soft-open 1.62s 1.04s cubic-bezier(.17, .73, .18, 1) both;
}

.scene[data-version="silk-flutter"].playing .art-leaf-one {
  animation: art-page-turn-silk .76s 1.32s cubic-bezier(.18, .04, .16, 1) both;
}

.scene[data-version="silk-flutter"].playing .art-leaf-two {
  animation: art-page-turn-silk .8s 1.68s cubic-bezier(.18, .04, .16, 1) both;
}

.scene[data-version="silk-flutter"].playing .burst-ring {
  animation: burst-ring .72s 1.46s both;
}

.scene[data-version="silk-flutter"].playing .particle {
  animation-delay: calc(var(--delay) + .26s);
}

.scene[data-version="silk-flutter"].playing .rune {
  animation: rune-rise .78s 2.76s cubic-bezier(.18, .7, .2, 1) both;
}

.scene[data-version="silk-flutter"].playing .transfer {
  animation: transfer .5s 3.06s both;
}

.scene[data-version="silk-flutter"].playing .active-row {
  animation: row-impact .58s 3.37s both;
}

.scene[data-version="silk-flutter"].playing .active-row i {
  animation: appear .2s 3.37s both;
}

.scene[data-version="silk-flutter"].playing .old-level {
  animation: old-out .27s 3.43s both;
}

.scene[data-version="silk-flutter"].playing .new-level {
  animation: new-in .44s 3.45s both;
}

.scene[data-version="silk-flutter"].playing .result {
  animation: result-in .66s 3.62s both;
}

.scene[data-version="silk-flutter"].playing .impact-flash {
  animation: flash .3s 3.33s both;
}

.scene[data-version="silk-flutter"].playing {
  animation: rumble .3s 3.33s both;
}

/* F++: three full-size illustrated leaves with a tighter hero rhythm. */
.scene[data-version="hero-flutter"] .cover-plane,
.scene[data-version="hero-flutter"] .page-sheet {
  display: none;
}

.scene[data-version="hero-flutter"].playing .closed-base {
  animation: flutter-hero-closed 1.46s .18s both;
}

.scene[data-version="hero-flutter"].playing .open-layer {
  animation: flutter-hero-open 1.54s 1s cubic-bezier(.17, .73, .18, 1) both;
}

.scene[data-version="hero-flutter"].playing .art-leaf-one {
  animation: art-page-turn-hero .62s 1.24s cubic-bezier(.2, .03, .15, 1) both;
}

.scene[data-version="hero-flutter"].playing .art-leaf-two {
  animation: art-page-turn-hero .66s 1.45s cubic-bezier(.2, .03, .15, 1) both;
}

.scene[data-version="hero-flutter"].playing .art-leaf-three {
  animation: art-page-turn-hero .7s 1.67s cubic-bezier(.2, .03, .15, 1) both;
}

.scene[data-version="hero-flutter"].playing .spine-flare {
  animation: spine-light .86s 1.56s both;
}

.scene[data-version="hero-flutter"].playing .burst-ring {
  animation: burst-ring .76s 1.34s both;
}

.scene[data-version="hero-flutter"].playing .particle {
  animation-delay: calc(var(--delay) + .2s);
}

.scene[data-version="hero-flutter"].playing .rune {
  animation: rune-rise .78s 2.68s cubic-bezier(.18, .7, .2, 1) both;
}

.scene[data-version="hero-flutter"].playing .transfer {
  animation: transfer .5s 2.98s both;
}

.scene[data-version="hero-flutter"].playing .active-row {
  animation: row-impact .58s 3.29s both;
}

.scene[data-version="hero-flutter"].playing .active-row i {
  animation: appear .2s 3.29s both;
}

.scene[data-version="hero-flutter"].playing .old-level {
  animation: old-out .27s 3.35s both;
}

.scene[data-version="hero-flutter"].playing .new-level {
  animation: new-in .44s 3.37s both;
}

.scene[data-version="hero-flutter"].playing .result {
  animation: result-in .66s 3.54s both;
}

.scene[data-version="hero-flutter"].playing .impact-flash {
  animation: flash .3s 3.25s both;
}

.scene[data-version="hero-flutter"].playing {
  animation: rumble .3s 3.25s both;
}

/* The focused G family shares one short payoff and exactly one seam transfer. */
.scene[data-version="center-unfold"] {
  --rune-at: 2.12s;
  --transfer-at: 2.35s;
  --row-at: 2.62s;
  --old-at: 2.68s;
  --new-at: 2.7s;
  --result-at: 2.88s;
  --impact-at: 2.58s;
  --particle-shift: -.15s;
  --book-duration: 3.55s;
}

.scene[data-version="center-settle"] {
  --rune-at: 2.22s;
  --transfer-at: 2.45s;
  --row-at: 2.72s;
  --old-at: 2.78s;
  --new-at: 2.8s;
  --result-at: 2.98s;
  --impact-at: 2.68s;
  --particle-shift: -.1s;
  --book-duration: 3.65s;
}

.scene[data-version="weighted-unfold"] {
  --rune-at: 2.18s;
  --transfer-at: 2.41s;
  --row-at: 2.68s;
  --old-at: 2.74s;
  --new-at: 2.76s;
  --result-at: 2.94s;
  --impact-at: 2.64s;
  --particle-shift: -.12s;
  --book-duration: 3.65s;
}

.scene[data-version="flutter-unfold"] {
  --rune-at: 2.18s;
  --transfer-at: 2.41s;
  --row-at: 2.68s;
  --old-at: 2.74s;
  --new-at: 2.76s;
  --result-at: 2.94s;
  --impact-at: 2.64s;
  --particle-shift: -.12s;
  --book-duration: 3.65s;
}

.scene[data-version="quick-unfold"] {
  --rune-at: 1.82s;
  --transfer-at: 2.05s;
  --row-at: 2.3s;
  --old-at: 2.36s;
  --new-at: 2.38s;
  --result-at: 2.56s;
  --impact-at: 2.26s;
  --particle-shift: -.55s;
  --book-duration: 3.25s;
}

.scene[data-version="left-lead-unfold"] {
  --rune-at: 2.14s;
  --transfer-at: 2.37s;
  --row-at: 2.64s;
  --old-at: 2.7s;
  --new-at: 2.72s;
  --result-at: 2.9s;
  --impact-at: 2.6s;
  --particle-shift: -.15s;
  --book-duration: 3.58s;
}

.scene[data-version="bloom-unfold"] {
  --rune-at: 2.2s;
  --transfer-at: 2.43s;
  --row-at: 2.7s;
  --old-at: 2.76s;
  --new-at: 2.78s;
  --result-at: 2.96s;
  --impact-at: 2.66s;
  --particle-shift: -.1s;
  --book-duration: 3.62s;
}

.scene[data-version="snap-unfold"] {
  --rune-at: 1.98s;
  --transfer-at: 2.21s;
  --row-at: 2.46s;
  --old-at: 2.52s;
  --new-at: 2.54s;
  --result-at: 2.72s;
  --impact-at: 2.42s;
  --particle-shift: -.35s;
  --book-duration: 3.35s;
}

.scene:is(
  [data-version="center-unfold"],
  [data-version="center-settle"],
  [data-version="weighted-unfold"],
  [data-version="flutter-unfold"],
  [data-version="quick-unfold"],
  [data-version="left-lead-unfold"],
  [data-version="bloom-unfold"],
  [data-version="snap-unfold"]
) .spine-flare {
  display: none;
}

/* Once the physical page blocks have opened, the intact artwork crosses above
   them. This hides their temporary 3D edge without cutting any part of the book. */
.scene:is(
  [data-version="center-unfold"],
  [data-version="center-settle"],
  [data-version="weighted-unfold"],
  [data-version="flutter-unfold"],
  [data-version="quick-unfold"],
  [data-version="left-lead-unfold"],
  [data-version="bloom-unfold"],
  [data-version="snap-unfold"]
) .open-layer {
  z-index: 8;
}

.scene:is(
  [data-version="center-unfold"],
  [data-version="center-settle"],
  [data-version="weighted-unfold"],
  [data-version="quick-unfold"],
  [data-version="left-lead-unfold"],
  [data-version="bloom-unfold"],
  [data-version="snap-unfold"]
) .art-leaf,
.scene[data-version="flutter-unfold"] .art-leaf-two,
.scene[data-version="flutter-unfold"] .art-leaf-three {
  display: none;
}

.scene:is(
  [data-version="center-unfold"],
  [data-version="center-settle"],
  [data-version="weighted-unfold"],
  [data-version="flutter-unfold"],
  [data-version="quick-unfold"],
  [data-version="left-lead-unfold"],
  [data-version="bloom-unfold"],
  [data-version="snap-unfold"]
).playing .book {
  animation: book-rise var(--book-duration) .14s both;
}

.scene:is(
  [data-version="center-unfold"],
  [data-version="center-settle"],
  [data-version="weighted-unfold"],
  [data-version="flutter-unfold"],
  [data-version="quick-unfold"],
  [data-version="left-lead-unfold"],
  [data-version="bloom-unfold"],
  [data-version="snap-unfold"]
).playing .rune {
  animation: rune-rise .68s var(--rune-at) cubic-bezier(.18, .7, .2, 1) both;
}

.scene:is(
  [data-version="center-unfold"],
  [data-version="center-settle"],
  [data-version="weighted-unfold"],
  [data-version="flutter-unfold"],
  [data-version="quick-unfold"],
  [data-version="left-lead-unfold"],
  [data-version="bloom-unfold"],
  [data-version="snap-unfold"]
).playing .transfer {
  animation: transfer .42s var(--transfer-at) both;
}

.scene:is(
  [data-version="center-unfold"],
  [data-version="center-settle"],
  [data-version="weighted-unfold"],
  [data-version="flutter-unfold"],
  [data-version="quick-unfold"],
  [data-version="left-lead-unfold"],
  [data-version="bloom-unfold"],
  [data-version="snap-unfold"]
).playing .particle {
  animation-delay: calc(var(--delay) + var(--particle-shift));
}

.scene:is(
  [data-version="center-unfold"],
  [data-version="center-settle"],
  [data-version="weighted-unfold"],
  [data-version="flutter-unfold"],
  [data-version="quick-unfold"],
  [data-version="left-lead-unfold"],
  [data-version="bloom-unfold"],
  [data-version="snap-unfold"]
).playing .active-row {
  animation: row-impact .5s var(--row-at) both;
}

.scene:is(
  [data-version="center-unfold"],
  [data-version="center-settle"],
  [data-version="weighted-unfold"],
  [data-version="flutter-unfold"],
  [data-version="quick-unfold"],
  [data-version="left-lead-unfold"],
  [data-version="bloom-unfold"],
  [data-version="snap-unfold"]
).playing .active-row i {
  animation: appear .18s var(--row-at) both;
}

.scene:is(
  [data-version="center-unfold"],
  [data-version="center-settle"],
  [data-version="weighted-unfold"],
  [data-version="flutter-unfold"],
  [data-version="quick-unfold"],
  [data-version="left-lead-unfold"],
  [data-version="bloom-unfold"],
  [data-version="snap-unfold"]
).playing .old-level {
  animation: old-out .23s var(--old-at) both;
}

.scene:is(
  [data-version="center-unfold"],
  [data-version="center-settle"],
  [data-version="weighted-unfold"],
  [data-version="flutter-unfold"],
  [data-version="quick-unfold"],
  [data-version="left-lead-unfold"],
  [data-version="bloom-unfold"],
  [data-version="snap-unfold"]
).playing .new-level {
  animation: new-in .38s var(--new-at) both;
}

.scene:is(
  [data-version="center-unfold"],
  [data-version="center-settle"],
  [data-version="weighted-unfold"],
  [data-version="flutter-unfold"],
  [data-version="quick-unfold"],
  [data-version="left-lead-unfold"],
  [data-version="bloom-unfold"],
  [data-version="snap-unfold"]
).playing .result {
  animation: result-in .56s var(--result-at) both;
}

.scene:is(
  [data-version="center-unfold"],
  [data-version="center-settle"],
  [data-version="weighted-unfold"],
  [data-version="flutter-unfold"],
  [data-version="quick-unfold"],
  [data-version="left-lead-unfold"],
  [data-version="bloom-unfold"],
  [data-version="snap-unfold"]
).playing .impact-flash {
  animation: flash .26s var(--impact-at) both;
}

.scene:is(
  [data-version="center-unfold"],
  [data-version="center-settle"],
  [data-version="weighted-unfold"],
  [data-version="flutter-unfold"],
  [data-version="quick-unfold"],
  [data-version="left-lead-unfold"],
  [data-version="bloom-unfold"],
  [data-version="snap-unfold"]
).playing {
  animation: rumble .26s var(--impact-at) both;
}

/* G1: balanced and natural. */
.scene[data-version="center-unfold"].playing .closed-base { animation: center-unfold-closed 1.28s .14s both; }
.scene[data-version="center-unfold"].playing .open-layer { animation: center-unfold-final .96s 1.08s cubic-bezier(.16, .7, .16, 1) both; }
.scene[data-version="center-unfold"].playing .spread-left,
.scene[data-version="center-unfold"].playing .spread-right { animation: center-wing-left 1.08s .62s cubic-bezier(.16, .68, .18, 1) both; }
.scene[data-version="center-unfold"].playing .spread-right { animation-name: center-wing-right; }
.scene[data-version="center-unfold"].playing .spine-softener { animation: soften-spine .8s .62s both; }

/* G2: a soft left/right stagger. */
.scene[data-version="center-settle"].playing .closed-base { animation: center-unfold-closed 1.38s .14s both; }
.scene[data-version="center-settle"].playing .open-layer { animation: center-unfold-final 1.02s 1.12s cubic-bezier(.14, .72, .16, 1) both; }
.scene[data-version="center-settle"].playing .spread-left { animation: center-wing-left 1.18s .56s cubic-bezier(.14, .7, .16, 1) both; }
.scene[data-version="center-settle"].playing .spread-right { animation: center-wing-right 1.18s .72s cubic-bezier(.14, .7, .16, 1) both; }
.scene[data-version="center-settle"].playing .spine-softener { animation: soften-spine .9s .64s both; }

/* G3: compact weight and landing dip. */
.scene[data-version="weighted-unfold"].playing .book { animation-name: book-rise-weighted; }
.scene[data-version="weighted-unfold"].playing .closed-base { animation: weighted-unfold-closed 1.28s .14s both; }
.scene[data-version="weighted-unfold"].playing .open-layer { animation: weighted-unfold-final .98s 1.08s cubic-bezier(.14, .72, .14, 1) both; }
.scene[data-version="weighted-unfold"].playing .spread-left { animation: weighted-wing-left 1.1s .6s cubic-bezier(.13, .72, .13, 1) both; }
.scene[data-version="weighted-unfold"].playing .spread-right { animation: weighted-wing-right 1.1s .66s cubic-bezier(.13, .72, .13, 1) both; }
.scene[data-version="weighted-unfold"].playing .spine-softener { animation: soften-spine .8s .72s both; }

/* G4: one compact real-art page flutter. */
.scene[data-version="flutter-unfold"].playing .closed-base { animation: center-unfold-closed 1.18s .14s both; }
.scene[data-version="flutter-unfold"].playing .open-layer { animation: center-unfold-final .82s .92s cubic-bezier(.16, .72, .16, 1) both; }
.scene[data-version="flutter-unfold"].playing .spread-left { animation: center-wing-left .9s .5s cubic-bezier(.16, .7, .16, 1) both; }
.scene[data-version="flutter-unfold"].playing .spread-right { animation: center-wing-right .9s .56s cubic-bezier(.16, .7, .16, 1) both; }
.scene[data-version="flutter-unfold"].playing .art-leaf-one { animation: art-page-turn-hero .28s 1.56s cubic-bezier(.2, .03, .13, 1) both; }
.scene[data-version="flutter-unfold"].playing .spine-softener { animation: soften-spine .72s .55s both; }

/* G5: shortest readable center opening. */
.scene[data-version="quick-unfold"].playing .closed-base { animation: center-unfold-closed 1s .12s both; }
.scene[data-version="quick-unfold"].playing .open-layer { animation: center-unfold-final .68s .68s cubic-bezier(.18, .76, .15, 1) both; }
.scene[data-version="quick-unfold"].playing .spread-left { animation: center-wing-left .72s .38s cubic-bezier(.18, .76, .15, 1) both; }
.scene[data-version="quick-unfold"].playing .spread-right { animation: center-wing-right .72s .42s cubic-bezier(.18, .76, .15, 1) both; }
.scene[data-version="quick-unfold"].playing .spine-softener { animation: soften-spine .6s .42s both; }

/* G6: the left page block leads like a physical cover. */
.scene[data-version="left-lead-unfold"].playing .closed-base { animation: center-unfold-closed 1.22s .14s both; }
.scene[data-version="left-lead-unfold"].playing .open-layer { animation: center-unfold-final .92s 1.02s cubic-bezier(.16, .72, .16, 1) both; }
.scene[data-version="left-lead-unfold"].playing .spread-left { animation: center-wing-left 1.12s .45s cubic-bezier(.15, .72, .16, 1) both; }
.scene[data-version="left-lead-unfold"].playing .spread-right { animation: center-wing-right .94s .7s cubic-bezier(.17, .74, .16, 1) both; }
.scene[data-version="left-lead-unfold"].playing .spine-softener { animation: soften-spine .75s .58s both; }

/* G7: no extra seam effect, only a soft bloom behind the book. */
.scene[data-version="bloom-unfold"].playing .closed-base { animation: center-unfold-closed 1.25s .14s both; }
.scene[data-version="bloom-unfold"].playing .open-layer { animation: center-unfold-final .95s 1.05s cubic-bezier(.16, .72, .16, 1) both; }
.scene[data-version="bloom-unfold"].playing .spread-left { animation: center-wing-left 1.05s .58s cubic-bezier(.16, .7, .16, 1) both; }
.scene[data-version="bloom-unfold"].playing .spread-right { animation: center-wing-right 1.05s .62s cubic-bezier(.16, .7, .16, 1) both; }
.scene[data-version="bloom-unfold"].playing .page-aura { animation: aura .88s 1.14s both; }
.scene[data-version="bloom-unfold"].playing .floor-glow { animation: floor-pulse 2.7s .28s both; }
.scene[data-version="bloom-unfold"].playing .spine-softener { animation: soften-spine .76s .6s both; }

/* G8: fast compression and crisp settle. */
.scene[data-version="snap-unfold"].playing .book { animation: book-rise-snap var(--book-duration) .12s both; }
.scene[data-version="snap-unfold"].playing .closed-base { animation: snap-unfold-closed .98s .12s both; }
.scene[data-version="snap-unfold"].playing .open-layer { animation: snap-unfold-final .72s .8s cubic-bezier(.18, .82, .14, 1) both; }
.scene[data-version="snap-unfold"].playing .spread-left { animation: snap-wing-left .78s .42s cubic-bezier(.18, .82, .14, 1) both; }
.scene[data-version="snap-unfold"].playing .spread-right { animation: snap-wing-right .78s .46s cubic-bezier(.18, .82, .14, 1) both; }
.scene[data-version="snap-unfold"].playing .spine-softener { animation: soften-spine .62s .46s both; }

/* Final Quick family: the chosen motion, a faster cut, and a richer payoff. */
.scene[data-version="quick-fast"] {
  --rune-at: 1.46s;
  --transfer-at: 1.65s;
  --row-at: 1.86s;
  --old-at: 1.91s;
  --new-at: 1.93s;
  --result-at: 2.06s;
  --impact-at: 1.82s;
  --particle-shift: -.88s;
  --book-duration: 2.72s;
}

.scene[data-version="quick-pizzazz"] {
  --rune-at: 1.12s;
  --transfer-at: 1.29s;
  --row-at: 1.5s;
  --old-at: 1.55s;
  --new-at: 1.57s;
  --result-at: 1.7s;
  --impact-at: 1.46s;
  --particle-shift: -1.22s;
  --book-duration: 2.25s;
}

.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-fast"],
  [data-version="quick-pizzazz"]
) .spine-flare,
.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-fast"],
  [data-version="quick-pizzazz"]
) .art-leaf {
  display: none;
}

.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-fast"],
  [data-version="quick-pizzazz"]
) .open-layer {
  z-index: 8;
}

.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-pizzazz"]
).playing .closed-base { animation: quick-closed-out 1s .12s both; }

.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-pizzazz"]
).playing .open-layer { animation: center-unfold-final .68s .68s cubic-bezier(.18, .76, .15, 1) both; }

.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-pizzazz"]
).playing .spread-left { animation: center-wing-left .72s .38s cubic-bezier(.18, .76, .15, 1) both; }

.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-pizzazz"]
).playing .spread-right { animation: center-wing-right .72s .42s cubic-bezier(.18, .76, .15, 1) both; }

.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-pizzazz"]
).playing .spine-softener { animation: soften-spine .6s .42s both; }

.scene[data-version="quick-fast"].playing .closed-base { animation: quick-closed-out .8s .1s both; }
.scene[data-version="quick-fast"].playing .open-layer { animation: center-unfold-final .48s .52s cubic-bezier(.18, .8, .13, 1) both; }
.scene[data-version="quick-fast"].playing .spread-left { animation: center-wing-left .54s .28s cubic-bezier(.18, .8, .13, 1) both; }
.scene[data-version="quick-fast"].playing .spread-right { animation: center-wing-right .54s .31s cubic-bezier(.18, .8, .13, 1) both; }
.scene[data-version="quick-fast"].playing .spine-softener { animation: soften-spine .44s .3s both; }

.scene[data-version="quick-pizzazz"].playing .closed-base { animation: quick-closed-out .62s .08s both; }
.scene[data-version="quick-pizzazz"].playing .open-layer { animation: center-unfold-final .38s .36s cubic-bezier(.18, .84, .12, 1) both; }
.scene[data-version="quick-pizzazz"].playing .spread-left { animation: center-wing-left .42s .18s cubic-bezier(.18, .84, .12, 1) both; }
.scene[data-version="quick-pizzazz"].playing .spread-right { animation: center-wing-right .42s .2s cubic-bezier(.18, .84, .12, 1) both; }
.scene[data-version="quick-pizzazz"].playing .spine-softener { animation: soften-spine .34s .2s both; }

.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-fast"],
  [data-version="quick-pizzazz"]
).playing .book {
  animation: book-rise var(--book-duration) .12s both;
}

.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-fast"],
  [data-version="quick-pizzazz"]
).playing .rune {
  animation: rune-rise .68s var(--rune-at) cubic-bezier(.18, .7, .2, 1) both;
}

.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-fast"],
  [data-version="quick-pizzazz"]
).playing .transfer { animation: transfer .42s var(--transfer-at) both; }

.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-fast"],
  [data-version="quick-pizzazz"]
).playing .particle { animation-delay: calc(var(--delay) + var(--particle-shift)); }

.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-fast"],
  [data-version="quick-pizzazz"]
).playing .active-row { animation: row-impact .5s var(--row-at) both; }

.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-fast"],
  [data-version="quick-pizzazz"]
).playing .active-row i { animation: appear .18s var(--row-at) both; }

.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-fast"],
  [data-version="quick-pizzazz"]
).playing .old-level { animation: old-out .23s var(--old-at) both; }

.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-fast"],
  [data-version="quick-pizzazz"]
).playing .new-level { animation: new-in .38s var(--new-at) both; }

.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-fast"],
  [data-version="quick-pizzazz"]
).playing .result { animation: result-in .56s var(--result-at) both; }

.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-fast"],
  [data-version="quick-pizzazz"]
).playing .impact-flash { animation: flash .26s var(--impact-at) both; }

.scene:is(
  [data-version="quick-unfold"],
  [data-version="quick-fast"],
  [data-version="quick-pizzazz"]
).playing { animation: rumble .26s var(--impact-at) both; }

.scene[data-version="quick-pizzazz"] .page-aura {
  inset: 8% -4% 8%;
  background: radial-gradient(circle at 50% 52%, rgba(255, 250, 204, .94), rgba(255, 188, 53, .34) 31%, transparent 68%);
  filter: blur(12px);
}

.scene[data-version="quick-pizzazz"].playing .page-aura { animation: quick-pizzazz-aura .78s .4s both; }
.scene[data-version="quick-pizzazz"].playing .light-beam { animation: quick-pizzazz-beam .88s .34s both; }
.scene[data-version="quick-pizzazz"].playing .floor-glow { animation: floor-pulse 1.82s .1s both; }
.scene[data-version="quick-pizzazz"].playing .impact-flash { animation: flash .38s var(--impact-at) both; }
.scene[data-version="quick-pizzazz"].playing .result strong { animation: quick-pizzazz-title .72s var(--result-at) both; }

.scene.playing {
  animation: rumble .3s 3.2s both;
}

@keyframes rotate-slow { to { transform: rotate(360deg); } }
@keyframes star-drift { to { transform: translateY(43px); } }

@keyframes panel-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); filter: blur(7px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); filter: blur(0); }
}

@keyframes book-rise {
  0% { opacity: 0; transform: translateX(-50%) translateY(58px) scale(.64) rotateX(5deg); }
  9% { opacity: 1; transform: translateX(-50%) translateY(0) scale(.9) rotateX(4deg); }
  86% { opacity: 1; transform: translateX(-50%) translateY(0) scale(.9) rotateX(4deg); }
  100% { opacity: .3; transform: translateX(-50%) translateY(-5px) scale(.92) rotateX(4deg); filter: blur(1px); }
}

@keyframes book-rise-weighted {
  0% { opacity: 0; transform: translateX(-50%) translateY(62px) scale(.62) rotateX(8deg); }
  9% { opacity: 1; transform: translateX(-50%) translateY(-3px) scale(.91) rotateX(6deg); }
  16% { opacity: 1; transform: translateX(-50%) translateY(7px) scale(.92, .88) rotateX(5deg); }
  24%, 86% { opacity: 1; transform: translateX(-50%) translateY(0) scale(.9) rotateX(4deg); }
  100% { opacity: .3; transform: translateX(-50%) translateY(-5px) scale(.92) rotateX(4deg); filter: blur(1px); }
}

@keyframes book-rise-snap {
  0% { opacity: 0; transform: translateX(-50%) translateY(54px) scale(.66) rotateX(6deg); }
  9% { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(.92) rotateX(5deg); }
  15% { opacity: 1; transform: translateX(-50%) translateY(5px) scale(.93, .87) rotateX(4deg); }
  21%, 86% { opacity: 1; transform: translateX(-50%) translateY(0) scale(.9) rotateX(4deg); }
  100% { opacity: .3; transform: translateX(-50%) translateY(-5px) scale(.92) rotateX(4deg); filter: blur(1px); }
}

@keyframes open-reveal {
  0% { opacity: 0; transform: scaleX(.72) scaleY(.9); filter: brightness(.68) blur(3px); }
  35% { opacity: .55; }
  68% { opacity: 1; transform: scaleX(1.02) scaleY(1); filter: brightness(1.12) blur(0); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@keyframes closed-base-out {
  0%, 25% { opacity: 1; transform: scale(1); filter: brightness(1); }
  100% { opacity: 0; transform: scale(.86, .76); filter: brightness(1.9) blur(3px); }
}

@keyframes center-unfold-closed {
  0% { opacity: 0; transform: translateY(25px) scale(.82); filter: blur(3px); }
  24%, 42% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1) blur(0); }
  62% { opacity: .42; transform: translateY(-2px) scale(.985, 1); filter: brightness(1.1); }
  72%, 100% { opacity: 0; transform: translateY(-4px) scale(.96, 1); filter: brightness(1.35) blur(3px); }
}

@keyframes quick-closed-out {
  0% { opacity: 0; transform: translateY(25px) scale(.82); filter: blur(3px); }
  20%, 30% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1) blur(0); }
  40%, 100% { opacity: 0; transform: translateY(-2px) scale(.985, 1); filter: brightness(1.08) blur(1px); }
}

@keyframes center-unfold-final {
  0% { opacity: 0; transform: scale(1); clip-path: inset(-28% 43% -28% 43%); filter: brightness(.94) blur(2px); }
  6% { opacity: 1; transform: scale(1); clip-path: inset(-28% -28% -28% -28%); filter: brightness(1.04) blur(0); }
  100% { opacity: 1; transform: scale(1); clip-path: inset(-28% -28% -28% -28%); filter: brightness(1); }
}

@keyframes center-wing-left {
  0% { opacity: 0; transform: rotateY(86deg) translateZ(2px); filter: brightness(.9); }
  12% { opacity: 1; }
  56% { opacity: 1; transform: rotateY(-5deg) translateZ(16px); filter: brightness(1.05); }
  68% { opacity: .42; transform: rotateY(-.5deg) translateZ(6px); filter: brightness(1); }
  76%, 100% { opacity: 0; transform: rotateY(0deg) translateZ(2px); }
}

@keyframes center-wing-right {
  0% { opacity: 0; transform: rotateY(-86deg) translateZ(2px); filter: brightness(.9); }
  12% { opacity: 1; }
  56% { opacity: 1; transform: rotateY(5deg) translateZ(16px); filter: brightness(1.05); }
  68% { opacity: .42; transform: rotateY(.5deg) translateZ(6px); filter: brightness(1); }
  76%, 100% { opacity: 0; transform: rotateY(0deg) translateZ(2px); }
}

@keyframes weighted-unfold-closed {
  0% { opacity: 0; transform: translateY(28px) scale(.8); filter: blur(3px); }
  24%, 42% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1) blur(0); }
  60% { opacity: .45; transform: translateY(6px) scale(1.005, .98); filter: brightness(1.05); }
  72%, 100% { opacity: 0; transform: translateY(3px) scale(.98, .995); filter: brightness(1.3) blur(3px); }
}

@keyframes weighted-unfold-final {
  0% { opacity: 0; transform: translateY(7px) scale(1); clip-path: inset(-28% 43% -28% 43%); filter: brightness(.92) blur(2px); }
  6% { opacity: 1; transform: translateY(5px) scale(1.01, .98); clip-path: inset(-28% -28% -28% -28%); filter: brightness(1.04) blur(0); }
  84% { opacity: 1; transform: translateY(-1px) scale(.997, 1.004); }
  100% { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(-28% -28% -28% -28%); filter: brightness(1); }
}

@keyframes weighted-wing-left {
  0% { opacity: 0; transform: translateY(8px) rotateY(83deg) translateZ(1px); filter: brightness(.88); }
  11% { opacity: 1; }
  54% { opacity: 1; transform: translateY(6px) rotateY(-6deg) translateZ(17px); filter: brightness(1.04); }
  68% { opacity: .4; transform: translateY(0) rotateY(-.5deg) translateZ(6px); }
  76%, 100% { opacity: 0; transform: translateY(0) rotateY(0deg) translateZ(2px); filter: brightness(1); }
}

@keyframes weighted-wing-right {
  0% { opacity: 0; transform: translateY(8px) rotateY(-83deg) translateZ(1px); filter: brightness(.88); }
  11% { opacity: 1; }
  54% { opacity: 1; transform: translateY(6px) rotateY(6deg) translateZ(17px); filter: brightness(1.04); }
  68% { opacity: .4; transform: translateY(0) rotateY(.5deg) translateZ(6px); }
  76%, 100% { opacity: 0; transform: translateY(0) rotateY(0deg) translateZ(2px); filter: brightness(1); }
}

@keyframes weighted-hinge-shadow {
  0% { opacity: 0; transform: translateX(-50%) scaleY(.18); }
  34% { opacity: .72; transform: translateX(-50%) scaleY(.86); }
  68% { opacity: .9; transform: translateX(-50%) scaleY(1.02); filter: blur(4px); }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1.06); filter: blur(7px); }
}

@keyframes snap-unfold-closed {
  0% { opacity: 0; transform: translateY(20px) scale(.84); filter: blur(2px); }
  26%, 52% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1) blur(0); }
  72% { opacity: .9; transform: translateY(4px) scale(1.02, .93); filter: brightness(1.1); }
  100% { opacity: 0; transform: translateY(-2px) scale(.96, 1); filter: brightness(1.5) blur(3px); }
}

@keyframes snap-unfold-final {
  0% { opacity: 0; transform: scale(1); clip-path: inset(-28% 41% -28% 41%); filter: brightness(.94) blur(2px); }
  6% { opacity: 1; transform: scale(1.025, .975); clip-path: inset(-28% -28% -28% -28%); filter: brightness(1.08) blur(0); }
  70% { opacity: 1; transform: scale(.992, 1.008); }
  100% { opacity: 1; transform: scale(1); clip-path: inset(-28% -28% -28% -28%); filter: brightness(1); }
}

@keyframes snap-wing-left {
  0% { opacity: 0; transform: rotateY(82deg) translateZ(2px); filter: brightness(.9); }
  10% { opacity: 1; }
  52% { opacity: 1; transform: rotateY(-7deg) translateZ(21px); filter: brightness(1.07); }
  82% { opacity: 1; transform: rotateY(2deg) translateZ(7px); filter: brightness(1); }
  100% { opacity: 0; transform: rotateY(0deg) translateZ(2px); }
}

@keyframes snap-wing-right {
  0% { opacity: 0; transform: rotateY(-82deg) translateZ(2px); filter: brightness(.9); }
  10% { opacity: 1; }
  52% { opacity: 1; transform: rotateY(7deg) translateZ(21px); filter: brightness(1.07); }
  82% { opacity: 1; transform: rotateY(-2deg) translateZ(7px); filter: brightness(1); }
  100% { opacity: 0; transform: rotateY(0deg) translateZ(2px); }
}

@keyframes spine-align-base {
  0% { opacity: 0; transform: translateX(0) translateY(24px) scale(.82); filter: blur(3px); }
  24%, 40% { opacity: 1; transform: translateX(0) translateY(0) scale(1); filter: blur(0); }
  64% { opacity: 1; transform: translateX(var(--spine-shift)) translateY(0) scale(1); filter: brightness(1); }
  100% { opacity: 0; transform: translateX(var(--spine-shift)) translateY(-2px) scale(1); filter: brightness(1.28) blur(2px); }
}

@keyframes spine-cover-open {
  0% { opacity: 0; transform: translateX(0) rotateY(0deg) translateZ(8px); filter: brightness(.96); }
  8%, 34% { opacity: 1; transform: translateX(0) rotateY(0deg) translateZ(8px); filter: brightness(1); }
  55% { opacity: 1; transform: translateX(var(--spine-shift)) rotateY(0deg) translateZ(8px); }
  74% { opacity: 1; transform: translateX(var(--spine-shift)) rotateY(-56deg) translateZ(24px); filter: brightness(1.08); }
  91% { opacity: .78; transform: translateX(var(--spine-shift)) rotateY(-86deg) translateZ(15px); filter: brightness(.92); }
  100% { opacity: 0; transform: translateX(var(--spine-shift)) rotateY(-92deg) translateZ(6px); filter: brightness(.82) blur(2px); }
}

@keyframes spine-open-reveal {
  0% { opacity: 0; transform: scale(1); clip-path: inset(-28% 49% -28% 49%); filter: brightness(.7) blur(5px); }
  34% { opacity: .3; clip-path: inset(-28% 38% -28% 38%); }
  72% { opacity: 1; transform: scale(1); clip-path: inset(-28% -12% -28% -12%); filter: brightness(1.12) blur(0); }
  100% { opacity: 1; transform: scale(1); clip-path: inset(-28% -28% -28% -28%); filter: brightness(1); }
}

@keyframes hinge-shadow-open {
  0% { opacity: 0; transform: translateX(-50%) scaleY(.18); }
  34% { opacity: .62; transform: translateX(-50%) scaleY(.82); }
  72% { opacity: .78; transform: translateX(-50%) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1.04); }
}

@keyframes page-block-closed {
  0% { opacity: 0; transform: translateY(24px) scale(.82); filter: blur(3px); }
  25%, 50% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  72% { opacity: .62; transform: translateY(-3px) scale(.98); filter: brightness(1.16); }
  100% { opacity: 0; transform: translateY(-6px) scale(.96); filter: brightness(1.6) blur(4px); }
}

@keyframes page-block-final {
  0%, 34% { opacity: 0; transform: scale(1); clip-path: inset(-28% 48% -28% 48%); filter: brightness(.8); }
  72% { opacity: 1; clip-path: inset(-28% -8% -28% -8%); filter: brightness(1.08); }
  100% { opacity: 1; transform: scale(1); clip-path: inset(-28% -28% -28% -28%); filter: brightness(1); }
}

@keyframes page-block-left {
  0% { opacity: 0; transform: rotateY(88deg) translateZ(1px); filter: brightness(.68); }
  10% { opacity: 1; }
  58% { opacity: 1; transform: rotateY(-8deg) translateZ(24px); filter: brightness(1.14); }
  82% { opacity: 1; transform: rotateY(2deg) translateZ(9px); filter: brightness(1.02); }
  100% { opacity: 0; transform: rotateY(0deg) translateZ(2px); }
}

@keyframes page-block-right {
  0% { opacity: 0; transform: rotateY(-82deg) translateZ(1px); filter: brightness(.72); }
  10% { opacity: 1; }
  58% { opacity: 1; transform: rotateY(7deg) translateZ(21px); filter: brightness(1.12); }
  82% { opacity: 1; transform: rotateY(-1.5deg) translateZ(8px); filter: brightness(1.01); }
  100% { opacity: 0; transform: rotateY(0deg) translateZ(2px); }
}

@keyframes cover-hinge {
  0%, 14% { opacity: 1; transform: rotateY(0deg) translateZ(3px); }
  38% { opacity: 1; transform: rotateY(-28deg) translateX(3%) scale(.92, .86) translateZ(8px); }
  76% { opacity: .92; transform: rotateY(-112deg) translateX(8%) scale(.72, .77) translateZ(12px); }
  94% { opacity: .32; transform: rotateY(-167deg) translateX(12%) scale(.62, .76) translateZ(5px); }
  100% { opacity: 0; transform: rotateY(-178deg) translateX(12%) scale(.6, .76); }
}

@keyframes page-turn {
  0% { opacity: 0; transform: rotateY(0deg) translateZ(8px); }
  8% { opacity: 1; }
  48% { opacity: 1; transform: rotateY(-92deg) translateZ(19px); filter: brightness(1.15); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: rotateY(-178deg) translateZ(2px); filter: brightness(.86); }
}

@keyframes aura {
  0% { opacity: 0; transform: scale(.75); }
  42% { opacity: .88; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}

@keyframes spine-light {
  0% { opacity: 0; transform: translateX(-50%) scaleY(.08); }
  44% { opacity: 1; transform: translateX(-50%) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1.08); }
}

@keyframes soften-spine {
  0%, 36% { opacity: 0; }
  62% { opacity: .9; }
  100% { opacity: .82; }
}

@keyframes floor-pulse {
  0% { opacity: 0; transform: translateX(-50%) scale(.4); }
  34% { opacity: .55; transform: translateX(-50%) scale(.82); }
  66% { opacity: 1; transform: translateX(-50%) scale(1.12); }
  100% { opacity: .15; transform: translateX(-50%) scale(1.28); }
}

@keyframes beam {
  0% { opacity: 0; transform: translateX(-50%) scale(.72); }
  38% { opacity: .46; transform: translateX(-50%) scale(.94); }
  72% { opacity: .32; transform: translateX(-50%) scale(1.04); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.12); }
}

@keyframes rune-rise {
  0% { opacity: 0; transform: translate(-50%, 50%) scale(.2) rotate(-30deg); }
  18% { opacity: 1; transform: translate(-50%, 25%) scale(1) rotate(0); }
  72% { opacity: 1; transform: translate(-50%, -235px) scale(.42) rotate(155deg); }
  100% { opacity: 0; transform: translate(-50%, -255px) scale(.1) rotate(210deg); }
}

@keyframes transfer {
  0% { opacity: 0; transform: translateX(-50%) scaleY(0); }
  38% { opacity: 1; transform: translateX(-50%) scaleY(1); }
  100% { opacity: 0; transform: translateX(-50%) scaleY(1.05); }
}

@keyframes particle {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.2); }
  17% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), var(--y)) scale(.05); }
}

@keyframes row-impact {
  0% { transform: scale(1); }
  42% {
    transform: scale(1.075);
    color: #fff8df;
    border-color: var(--gold);
    background: linear-gradient(90deg, rgba(121, 75, 17, .93), rgba(28, 26, 30, .98));
    box-shadow: 0 0 18px rgba(255, 215, 99, .9), 0 0 48px rgba(255, 151, 28, .4);
  }
  100% {
    transform: scale(1);
    color: #f8e6ac;
    border-color: #ca9c3d;
    background: linear-gradient(90deg, rgba(67, 51, 23, .93), rgba(16, 19, 31, .97));
    box-shadow: 0 0 13px rgba(255, 198, 72, .24);
  }
}

@keyframes appear { to { opacity: 1; } }
@keyframes old-out { to { opacity: 0; transform: translateY(-12px); } }

@keyframes new-in {
  0% { opacity: 0; transform: translateY(12px) scale(.7); }
  62% { opacity: 1; transform: translateY(-2px) scale(1.25); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes result-in {
  0% { opacity: 0; transform: translate(-50%, calc(-50% + 13px)) scale(.92); filter: blur(6px); }
  62% { opacity: 1; transform: translate(-50%, calc(-50% - 2px)) scale(1.04); filter: blur(0); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}

@keyframes quick-pizzazz-aura {
  0% { opacity: 0; transform: scale(.62); }
  34% { opacity: 1; transform: scale(.94); }
  68% { opacity: .7; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.18); }
}

@keyframes quick-pizzazz-beam {
  0% { opacity: 0; transform: translateX(-50%) scale(.62); }
  32% { opacity: .72; transform: translateX(-50%) scale(.93); }
  70% { opacity: .42; transform: translateX(-50%) scale(1.08); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.2); }
}

@keyframes quick-pizzazz-title {
  0% { filter: brightness(1); }
  42% { filter: brightness(1.65); text-shadow: 0 2px #874811, 0 0 18px #fff7ce, 0 0 52px #f5a72d; }
  100% { filter: brightness(1); }
}

@keyframes flash {
  0% { opacity: 0; }
  35% { opacity: .9; }
  100% { opacity: 0; }
}

@keyframes rumble {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(-3px, 1px); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, -1px); }
}

@keyframes ritual-closed {
  0% { opacity: 0; transform: translateY(28px) scale(.78); filter: brightness(.75) blur(3px); }
  24%, 66% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1) blur(0); }
  78% { opacity: 1; transform: translateY(2px) scale(.96); filter: brightness(1.15) blur(0); }
  100% { opacity: 0; transform: translateY(-2px) scale(1.12); filter: brightness(2.5) blur(6px); }
}

@keyframes ritual-open {
  0% { opacity: 0; transform: scale(.66, .84); filter: brightness(.7) blur(5px); }
  22% { opacity: .35; }
  48% { opacity: 1; transform: scale(1.035, .98); filter: brightness(1.18) blur(0); }
  68%, 100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@keyframes snap-closed {
  0% { opacity: 0; transform: translateY(30px) scale(.76); filter: blur(3px); }
  28%, 66% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  78% { opacity: 1; transform: scale(1.05, .9) rotate(-1deg); filter: brightness(1.2); }
  100% { opacity: 0; transform: scale(.25, 1.04) rotate(1deg); filter: brightness(3) blur(3px); }
}

@keyframes snap-open {
  0% { opacity: 0; transform: scale(.18, .94); filter: brightness(2.1) blur(3px); }
  42% { opacity: 1; transform: scale(1.08, .96); filter: brightness(1.22) blur(0); }
  68% { transform: scale(.98, 1.02); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@keyframes cascade-closed {
  0% { opacity: 0; transform: translateY(26px) scale(.8); filter: blur(3px); }
  25%, 62% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-12px) scale(.88); filter: brightness(1.7) blur(8px); }
}

@keyframes cascade-open {
  0% { opacity: 0; transform: translateY(12px) scale(.78, .88); filter: brightness(.72) blur(5px); }
  40% { opacity: .6; }
  66% { opacity: 1; transform: translateY(0) scale(1.03, .98); filter: brightness(1.16) blur(0); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@keyframes soft-page-turn {
  0% { opacity: 0; transform: rotateY(0deg) translateZ(8px); }
  8% { opacity: 1; }
  48% { opacity: 1; transform: rotateY(-92deg) translateZ(17px); filter: brightness(1.12); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: rotateY(-178deg) translateZ(2px); filter: brightness(.88); }
}

@keyframes cascade-page {
  0% { opacity: 0; transform: translate(17%, 26%) rotateY(8deg) rotateZ(4deg) scale(.65); }
  18% { opacity: 1; }
  54% { opacity: 1; transform: translate(-22%, -5%) rotateY(-96deg) rotateZ(-2deg) scale(1.05); filter: brightness(1.15); }
  100% { opacity: 0; transform: translate(-62%, -22%) rotateY(-176deg) rotateZ(-7deg) scale(.88); filter: brightness(.86); }
}

@keyframes light-closed {
  0% { opacity: 0; transform: translateY(26px) scale(.8); filter: blur(3px); }
  26%, 66% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1) blur(0); }
  82% { opacity: 1; transform: scale(.98); filter: brightness(1.2); }
  100% { opacity: 0; transform: scale(.86, 1.02); filter: brightness(2.4) blur(5px); }
}

@keyframes light-open {
  0% { opacity: 0; transform: scale(.76, .92); filter: brightness(2) blur(5px); }
  35% { opacity: .62; }
  68% { opacity: 1; transform: scale(1.025, .985); filter: brightness(1.14) blur(0); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@keyframes light-curtain {
  0% { opacity: 0; transform: translateX(-50%) scaleX(.05); }
  38% { opacity: 1; transform: translateX(-50%) scaleX(1); }
  72% { opacity: .78; transform: translateX(-50%) scaleX(15); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(29); }
}

@keyframes light-polish-closed {
  0% { opacity: 0; transform: translateY(22px) scale(.82); filter: blur(3px); }
  28%, 70% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1) blur(0); }
  100% { opacity: 0; transform: translateY(-2px) scale(1); filter: brightness(2.2) blur(5px); }
}

@keyframes light-polish-open {
  0% { opacity: 0; transform: scale(1); filter: brightness(2.15) blur(7px); }
  42% { opacity: .62; }
  72% { opacity: 1; transform: scale(1); filter: brightness(1.08) blur(0); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@keyframes light-polish-curtain {
  0% { opacity: 0; transform: translateX(-50%) scaleX(.04); }
  36% { opacity: .95; transform: translateX(-50%) scaleX(.9); }
  72% { opacity: .62; transform: translateX(-50%) scaleX(10); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(19); }
}

@keyframes light-bloom-closed {
  0% { opacity: 0; transform: translateY(24px) scale(.82); filter: blur(3px); }
  26%, 68% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1) blur(0); }
  84% { opacity: .88; transform: translateY(-1px) scale(1); filter: brightness(1.28); }
  100% { opacity: 0; transform: translateY(-4px) scale(1); filter: brightness(2.7) blur(7px); }
}

@keyframes light-bloom-open {
  0% { opacity: 0; transform: translateY(3px) scale(1); filter: brightness(2.5) blur(8px); }
  38% { opacity: .58; }
  68% { opacity: 1; transform: translateY(-1px) scale(1); filter: brightness(1.18) blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes light-bloom-curtain {
  0% { opacity: 0; transform: translateX(-50%) scaleX(.04); }
  31% { opacity: 1; transform: translateX(-50%) scaleX(1.2); }
  68% { opacity: .86; transform: translateX(-50%) scaleX(14); filter: blur(7px); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(31); filter: blur(13px); }
}

@keyframes light-bloom-halo {
  0% { opacity: 0; transform: translateX(-50%) scale(.38) rotate(-18deg); }
  34% { opacity: .55; transform: translateX(-50%) scale(.82) rotate(0); }
  72% { opacity: .32; transform: translateX(-50%) scale(1.04) rotate(22deg); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.16) rotate(34deg); }
}

@keyframes orbit-closed {
  0% { opacity: 0; transform: translateY(28px) scale(.78) rotate(-2deg); filter: blur(3px); }
  22%, 57% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0); }
  76% { opacity: .92; transform: translateY(-4px) scale(.96) rotate(1.2deg); filter: brightness(1.12); }
  100% { opacity: 0; transform: translateY(-10px) scale(.82) rotate(3deg); filter: brightness(1.55) blur(7px); }
}

@keyframes orbit-open {
  0% { opacity: 0; transform: translateY(12px) scale(.76, .88) rotate(-1deg); filter: brightness(.72) blur(5px); }
  38% { opacity: .54; }
  68% { opacity: 1; transform: translateY(-2px) scale(1.025, .99) rotate(.4deg); filter: brightness(1.13) blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: brightness(1); }
}

@keyframes orbit-halo {
  0% { opacity: 0; transform: translateX(-50%) scale(.5) rotate(-25deg); }
  28% { opacity: .72; transform: translateX(-50%) scale(.92) rotate(0); }
  72% { opacity: .45; transform: translateX(-50%) scale(1.04) rotate(35deg); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.12) rotate(58deg); }
}

@keyframes art-page-turn {
  0% { opacity: 0; transform: rotateY(0deg) translateZ(5px); filter: brightness(.94); }
  7% { opacity: 1; }
  48% { opacity: 1; transform: rotateY(-91deg) translateZ(21px); filter: brightness(1.16); }
  90% { opacity: 1; }
  100% { opacity: 0; transform: rotateY(-178deg) translateZ(2px); filter: brightness(.84); }
}

@keyframes art-page-turn-silk {
  0% { opacity: 0; transform: rotateY(2deg) translateZ(5px); filter: brightness(.96); }
  8% { opacity: 1; }
  44% { opacity: 1; transform: rotateY(-82deg) translateZ(18px); filter: brightness(1.1); }
  72% { opacity: 1; transform: rotateY(-132deg) translateZ(12px); filter: brightness(.98); }
  100% { opacity: 0; transform: rotateY(-178deg) translateZ(2px); filter: brightness(.88); }
}

@keyframes art-page-turn-hero {
  0% { opacity: 0; transform: rotateY(0deg) translateZ(5px); filter: brightness(.92); }
  6% { opacity: 1; }
  42% { opacity: 1; transform: rotateY(-88deg) translateZ(24px); filter: brightness(1.2); }
  68% { opacity: 1; transform: rotateY(-139deg) translateZ(13px); filter: brightness(1.02); }
  100% { opacity: 0; transform: rotateY(-179deg) translateZ(2px); filter: brightness(.82); }
}

@keyframes flutter-soft-closed {
  0% { opacity: 0; transform: translateY(24px) scale(.82); filter: blur(3px); }
  25%, 64% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-7px) scale(.96); filter: brightness(1.55) blur(6px); }
}

@keyframes flutter-soft-open {
  0% { opacity: 0; transform: translateY(8px) scale(.9, .94); filter: brightness(.78) blur(4px); }
  40% { opacity: .62; }
  70% { opacity: 1; transform: translateY(0) scale(1.012, .995); filter: brightness(1.08) blur(0); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

@keyframes flutter-hero-closed {
  0% { opacity: 0; transform: translateY(26px) scale(.8); filter: blur(3px); }
  25%, 62% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  78% { opacity: .9; transform: translateY(-3px) scale(.98); filter: brightness(1.16); }
  100% { opacity: 0; transform: translateY(-10px) scale(.93); filter: brightness(1.85) blur(7px); }
}

@keyframes flutter-hero-open {
  0% { opacity: 0; transform: translateY(10px) scale(.86, .92); filter: brightness(.74) blur(5px); }
  38% { opacity: .62; }
  68% { opacity: 1; transform: translateY(-1px) scale(1.02, .99); filter: brightness(1.14) blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes art-page-unfold {
  0% { opacity: 0; transform: rotateY(-176deg) translateZ(2px); filter: brightness(.8); }
  10% { opacity: 1; }
  56% { opacity: 1; transform: rotateY(11deg) translateZ(20px); filter: brightness(1.14); }
  82% { opacity: 1; transform: rotateY(-3deg) translateZ(8px); filter: brightness(1.02); }
  100% { opacity: 0; transform: rotateY(0deg) translateZ(3px); filter: brightness(1); }
}

@keyframes storybook-closed {
  0% { opacity: 0; transform: translateY(34px) scale(.74) rotate(-2deg); filter: blur(4px) brightness(.72); }
  24%, 58% { opacity: 1; transform: translateY(0) scale(1) rotate(0); filter: blur(0) brightness(1); }
  76% { opacity: 1; transform: translateY(2px) scale(.98, .94) rotate(.6deg); filter: brightness(1.08); }
  100% { opacity: 0; transform: translateY(-5px) scale(.9, .82) rotate(1.6deg); filter: blur(4px) brightness(1.72); }
}

@keyframes storybook-open {
  0% { opacity: 0; transform: translateY(9px) scale(.54, .84); filter: blur(5px) brightness(.74); }
  28% { opacity: .52; }
  58% { opacity: 1; transform: translateY(-2px) scale(1.025, .985); filter: blur(0) brightness(1.12); }
  78% { transform: translateY(1px) scale(.992, 1.008); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes rotate-reverse {
  to { transform: rotate(-220deg); }
}

@keyframes burst-ring {
  0% { opacity: 1; transform: translate(-50%, 50%) scale(.1); }
  100% { opacity: 0; transform: translate(-50%, 50%) scale(15); }
}

@media (max-height: 680px) {
  .mastery-panel { top: 14px; }
  .hand-row { min-height: 36px; }
  .tome-stage { bottom: 4px; transform: translateX(-50%) scale(.83); transform-origin: bottom center; }
  .result { top: 62%; }
}

@media (max-width: 650px) {
  .scene { min-height: 540px; }
  .mastery-panel { top: 15px; width: calc(100% - 24px); }
  .heading { grid-template-columns: 1fr; justify-items: center; }
  .heading small { display: none; }
  .hand-row { min-height: 39px; }
  .tome-stage { bottom: 36px; transform: translateX(-50%) scale(.69); transform-origin: bottom center; }
  .result { top: 62%; }
  .controls { right: 10px; bottom: 10px; left: 10px; justify-content: flex-end; }
  .controls label { max-width: 170px; }
  .controls select { width: 100%; }
  .version-switcher {
    left: 10px;
    bottom: 68px;
    width: calc(100% - 20px);
  }
  .version-buttons {
    justify-content: center;
  }
  .version-buttons button {
    flex: 1 1 28%;
    justify-content: center;
    padding-inline: 6px;
  }
  .version-switcher p {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene *,
  .scene::before,
  .scene::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
  }

  .mastery-panel,
  .book,
  .open-layer,
  .result {
    opacity: 1;
  }

  .book { transform: translateX(-50%) scale(.9); }
  .closed-base,
  .cover-plane,
  .page-sheet,
  .old-level { display: none; }
  .new-level { opacity: 1; }
}