:root {
  color-scheme: light;
  --ink: #3f5d70;
  --title-ink: #514b7b;
  --label-ink: #426b73;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
  font-family: "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

body {
  display: grid;
  place-items: center;
}

.deck {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.stage {
  position: absolute;
  width: 1600px;
  height: 900px;
  left: 50%;
  top: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(var(--deck-scale, 1));
  overflow: hidden;
  user-select: none;
  touch-action: manipulation;
  background: #fffaf2;
}

.deck-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.slide {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

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

.cover-slide {
  overflow: hidden;
  background: #d9fbf5;
}

.cover-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}

.cover-title {
  position: absolute;
  left: 350px;
  top: 184px;
  width: 900px;
  height: 122px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #514b7b;
  font-size: 72px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 2px;
  white-space: nowrap;
  text-align: center;
  text-shadow:
    0 3px 0 rgba(255, 255, 255, .95),
    0 9px 18px rgba(92, 84, 138, .18);
}

.title-strip,
.text-card,
.center-question,
.original-star,
.page-mark {
  position: absolute;
  color: var(--ink);
}

.title-strip,
.text-card,
.center-question,
.picture-frame {
  z-index: 2;
}

.title-strip {
  left: 130px;
  top: 118px;
  width: 330px;
  height: 104px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  color: var(--title-ink);
  font-size: 38px;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.original-star {
  right: 118px;
  top: 164px;
  width: 24px;
  height: 24px;
  color: #c9b7ff;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
}

.page-mark {
  right: 165px;
  bottom: 101px;
  color: #b7a6c7;
  font-size: 10px;
  line-height: 1;
}

.picture-frame {
  position: absolute;
  padding: 0;
  background: transparent;
  overflow: visible;
}

.picture-frame img {
  position: absolute;
  display: block;
}

.picture-content {
  left: 5%;
  top: 5%;
  z-index: 1;
  width: 90%;
  height: 90%;
  object-fit: cover;
}

.picture-frame-art {
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.chat-frame-left {
  left: 110px;
  top: 185px;
  width: 480px;
  height: 671px;
}

.chat-frame-right {
  left: 900px;
  top: 177px;
  width: 490px;
  height: 696px;
}

.chat-frame .picture-content {
  left: 12%;
  top: 50%;
  z-index: 1;
  width: 76%;
  height: auto;
  transform: translateY(-50%);
  object-fit: contain;
  border-radius: 18px;
}

.chat-frame .picture-frame-art {
  z-index: 2;
}

.text-card,
.center-question,
.title-strip {
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.text-card {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-align: center;
}

.question-card {
  left: 675px;
  top: 415px;
  width: 750px;
  height: 150px;
  padding: 0 55px;
  font-size: 31px;
  line-height: 1.3;
}

.now-card {
  left: 155px;
  top: 325px;
  width: 420px;
  height: 160px;
  padding: 0 48px;
  font-size: 35px;
}

.definition-card {
  left: 145px;
  top: 555px;
  width: 700px;
  height: 145px;
  padding: 0 52px;
  font-size: 28px;
  line-height: 1.35;
}

.center-question {
  left: 225px;
  top: 350px;
  width: 1150px;
  height: 220px;
  padding: 0 95px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 51px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  color: var(--title-ink);
}

[data-slide="0"] .title-strip,
[data-slide="1"] .title-strip {
  left: 165px;
}

.atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.atmosphere i {
  position: absolute;
  display: block;
  opacity: 0.12;
}

.deco-bubble {
  border: 7px solid #6bcfc8;
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(198, 185, 246, 0.7);
}

.deco-star {
  width: 62px;
  height: 62px;
  background: linear-gradient(145deg, #ff9ea8, #c6b6f5);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 35%);
}

.deco-chat {
  width: 138px;
  height: 88px;
  border: 7px solid #aaa0ee;
  border-radius: 30px;
}

.deco-chat::after {
  content: "";
  position: absolute;
  left: 24px;
  bottom: -24px;
  width: 30px;
  height: 30px;
  border-left: 7px solid #aaa0ee;
  transform: skew(-32deg);
}

.deco-face {
  width: 94px;
  height: 94px;
  border: 7px solid #f1bd55;
  border-radius: 50%;
}

.deco-face::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 28px;
  width: 8px;
  height: 11px;
  border-radius: 50%;
  background: #836f92;
  box-shadow: 34px 0 0 #836f92;
}

.deco-face::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 48px;
  width: 38px;
  height: 20px;
  border-bottom: 6px solid #836f92;
  border-radius: 0 0 40px 40px;
}

.visual-connector {
  height: 0;
  border-top: 6px dotted #76d5cd;
}

.visual-connector::before,
.visual-connector::after {
  content: "";
  position: absolute;
  top: -12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #b8aaf1;
}

.visual-connector::before { left: 28%; }
.visual-connector::after { right: 16%; }

.atmosphere-1 .bubble-a { left: 610px; top: 278px; width: 62px; height: 62px; }
.atmosphere-1 .bubble-b { right: 170px; bottom: 175px; width: 42px; height: 42px; }
.atmosphere-1 .star-a { right: 210px; top: 270px; }
.atmosphere-1 .chat-a { right: 260px; bottom: 160px; transform: rotate(-8deg); }
.atmosphere-1 .connector-1 { left: 575px; top: 492px; width: 125px; }

.atmosphere-2 .bubble-c { left: 705px; top: 250px; width: 76px; height: 76px; }
.atmosphere-2 .star-b { left: 740px; bottom: 128px; transform: rotate(18deg); }
.atmosphere-2 .chat-b { left: 625px; top: 400px; transform: rotate(7deg); }
.atmosphere-2 .face-a { left: 785px; bottom: 170px; transform: rotate(-8deg); }

.atmosphere-3 .chat-c { left: 145px; top: 275px; transform: rotate(-11deg); }
.atmosphere-3 .chat-d { right: 130px; bottom: 220px; transform: rotate(10deg) scale(0.82); }
.atmosphere-3 .face-b { left: 150px; bottom: 205px; transform: rotate(-9deg); }
.atmosphere-3 .face-c { right: 155px; top: 260px; transform: rotate(12deg) scale(0.82); }
.atmosphere-3 .bubble-d { right: 330px; top: 250px; width: 54px; height: 54px; }
.atmosphere-3 .star-c { left: 360px; bottom: 230px; transform: rotate(15deg) scale(0.78); }

.meme-frame {
  top: 270px;
  width: 335px;
  height: 335px;
}

.meme-1 {
  left: 93px;
  height: 339px;
}

.meme-2 {
  left: 443px;
  height: 334px;
}

.meme-3 {
  left: 793px;
}

.meme-4 {
  left: 1143px;
  height: 334px;
}

.meme-frame .picture-content {
  left: 9%;
  top: 9%;
  width: 82%;
  height: 82%;
  border-radius: 16px;
}

.label {
  top: 672px;
  color: var(--label-ink);
  font-size: 27px;
}

.label-1 {
  left: 166px;
  width: 190px;
  height: 71px;
  padding: 0 29px;
}

.label-2 {
  left: 516px;
  width: 190px;
  height: 66px;
  padding: 0 27px;
}

.label-3 {
  left: 866px;
  width: 190px;
  height: 81px;
  padding: 0 34px;
}

.label-4 {
  left: 1216px;
  width: 190px;
  height: 73px;
  padding: 0 31px;
}

.frame-text-01 { background-image: url("assets/frames/text-01.webp"); }
.frame-text-02 { background-image: url("assets/frames/text-02.webp"); }
.frame-text-03 { background-image: url("assets/frames/text-03.webp"); }
.frame-text-04 { background-image: url("assets/frames/text-04.webp"); }
.frame-text-05 { background-image: url("assets/frames/text-05.webp"); }
.frame-text-06 { background-image: url("assets/frames/text-06.webp"); }
.frame-text-07 { background-image: url("assets/frames/text-07.webp"); }
.frame-text-08 { background-image: url("assets/frames/text-08.webp"); }
.frame-title-selected {
  background-image: url("assets/frames/title-frame-v10.webp");
  background-size: contain;
}

.frame-image-01 { background-image: url("assets/frames/image-01.webp"); }
.frame-image-02 { background-image: url("assets/frames/image-02.webp"); }
.frame-image-03 { background-image: url("assets/frames/image-03.webp"); }
.frame-image-04 { background-image: url("assets/frames/image-04.webp"); }
.frame-image-05 { background-image: url("assets/frames/image-05.webp"); }
.frame-image-06 { background-image: url("assets/frames/image-06.webp"); }
.frame-image-07 { background-image: url("assets/frames/image-07.webp"); }
.frame-image-08 { background-image: url("assets/frames/image-08.webp"); }

[data-animate] {
  visibility: hidden;
  opacity: 0;
}

[data-animate].is-visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 500ms ease;
}

.nav {
  position: absolute;
  z-index: 20;
  top: 50%;
  width: 46px;
  height: 72px;
  margin-top: -36px;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: rgb(255 255 255 / 26%);
  opacity: 0.42;
  cursor: pointer;
  transition: opacity 160ms ease, background 160ms ease;
}

.nav:hover,
.nav:focus-visible {
  opacity: 0.92;
  background: rgb(255 255 255 / 62%);
  outline: none;
}

.nav::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 15px;
  height: 15px;
  border-top: 4px solid #5a4d72;
  border-right: 4px solid #5a4d72;
}

.nav-prev {
  left: 12px;
}

.nav-prev::before {
  transform: translate(-34%, -50%) rotate(-135deg);
}

.nav-next {
  right: 12px;
}

.nav-next::before {
  transform: translate(-66%, -50%) rotate(45deg);
}

.nav[disabled] {
  visibility: hidden;
  pointer-events: none;
}

.fullscreen-button {
  position: absolute;
  z-index: 24;
  left: 50%;
  bottom: 17px;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 58%);
  box-shadow: 0 4px 12px rgb(75 59 89 / 18%);
  cursor: pointer;
  transform: translateX(-50%);
  opacity: 0.72;
  transition: opacity 160ms ease, transform 160ms ease;
}

.fullscreen-button:hover,
.fullscreen-button:focus-visible {
  opacity: 1;
  transform: translateX(-50%) scale(1.06);
  outline: none;
}

.fullscreen-button span,
.fullscreen-button span::before,
.fullscreen-button span::after {
  position: absolute;
  inset: 0;
  content: "";
}

.fullscreen-button span::before {
  left: 11px;
  top: 11px;
  width: 8px;
  height: 8px;
  border-left: 3px solid var(--ink);
  border-top: 3px solid var(--ink);
  box-shadow: 12px 0 0 -3px transparent;
}

.fullscreen-button span::after {
  right: 11px;
  bottom: 11px;
  left: auto;
  top: auto;
  width: 8px;
  height: 8px;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}

.fullscreen-button::before,
.fullscreen-button::after {
  position: absolute;
  width: 8px;
  height: 8px;
  content: "";
}

.fullscreen-button::before {
  right: 11px;
  top: 11px;
  border-right: 3px solid var(--ink);
  border-top: 3px solid var(--ink);
}

.fullscreen-button::after {
  left: 11px;
  bottom: 11px;
  border-left: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}


/* Slides 5-35: original PPT content fitted into the established 3D-card frame. */
.ppt-layer {
  position: absolute;
  left: 80px;
  top: 45px;
  z-index: 2;
  width: 1440px;
  height: 810px;
  pointer-events: none;
}

.ppt-base,
.ppt-animation {
  position: absolute;
  display: block;
  image-rendering: auto;
}

.ppt-base {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.ppt-animation {
  z-index: 3;
  object-fit: fill;
}

.ppt-title {
  z-index: 5;
  font-size: 30px;
  line-height: 1.12;
  white-space: normal;
}

.ppt-title.title-long {
  font-size: 23px;
}

/* v2 object-level slide styling */

.page-mark { display: none; }

.title-strip {
  width: 820px;
  font-size: 38px;
  white-space: nowrap;
}

.ppt-title {
  z-index: 50;
  font-size: 38px;
  line-height: 1;
  white-space: nowrap;
}

/* Interactive expression matching */
.matching-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: visible;
  pointer-events: none;
}

.matching-lines path {
  fill: none;
  stroke: #42cfc3;
  stroke-width: 9;
  stroke-linecap: round;
  filter: drop-shadow(0 3px 4px rgba(82, 81, 135, .28));
  animation: matchingLineDraw .55s ease both;
}

.match-target {
  cursor: pointer;
  transition: transform .18s ease, filter .18s ease;
  outline: none;
}

.match-target:hover,
.match-target:focus-visible,
.match-target.is-selected {
  transform: translateY(-3px) scale(1.035);
  filter: drop-shadow(0 0 10px rgba(91, 213, 201, .8));
}

.match-target.is-matched {
  cursor: default;
  filter: drop-shadow(0 0 12px rgba(82, 215, 163, .9));
}

.match-target.match-correct-flash {
  animation: matchCorrectPulse .72s ease;
}

.match-target.match-error-flash {
  animation: matchErrorShake .48s ease;
  filter: drop-shadow(0 0 13px rgba(255, 105, 126, .95));
}

.match-spark {
  position: absolute;
  width: 16px;
  height: 16px;
  z-index: 8;
  pointer-events: none;
  border-radius: 50%;
  background: #ffe16d;
  box-shadow: 0 0 12px rgba(255, 218, 94, .9);
  animation: matchSparkBurst .72s ease-out forwards;
}

@keyframes matchingLineDraw {
  from { stroke-dashoffset: var(--line-length); }
  to { stroke-dashoffset: 0; }
}

@keyframes matchCorrectPulse {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.09) rotate(-1deg); }
}

@keyframes matchErrorShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-12px) rotate(-2deg); }
  40% { transform: translateX(11px) rotate(2deg); }
  60% { transform: translateX(-8px); }
  80% { transform: translateX(6px); }
}

@keyframes matchSparkBurst {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(.2); }
}

/* PPT slide 13: preserve the original four-layer timed fade sequence. */
.diffusion-stack.is-visible {
  visibility: visible;
  transition: none;
  animation: diffusionStackFade var(--stack-duration) linear var(--stack-delay) both;
  will-change: opacity;
  backface-visibility: hidden;
}

/* v32: keep the original slow image-reveal timing while advancing each image manually. */
.diffusion-overlay.is-visible {
  visibility: visible;
  transition: none;
  animation: diffusionOverlayFade var(--overlay-duration, 2s) linear both;
  will-change: opacity;
  backface-visibility: hidden;
}

@keyframes diffusionOverlayFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes diffusionStackFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.end-slide-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  pointer-events: none;
}

.ppt-layer {
  position: absolute;
  left: 80px;
  top: 45px;
  z-index: 2;
  width: 1440px;
  height: 810px;
  pointer-events: none;
}

.ppt-base,
.ppt-shape-step {
  position: absolute;
  display: block;
  object-fit: fill;
}

.ppt-base { inset: 0; width: 100%; height: 100%; }
.ppt-shape-step { z-index: 8; }

.ppt-text {
  position: absolute;
  display: flex;
  padding: 2px 8px;
  overflow: hidden;
  color: var(--ink);
  line-height: 1.25;
  white-space: pre-wrap;
}

.ppt-text.is-bold { font-weight: 700; }

.ppt-layer > .ppt-text { box-sizing: border-box; }

.ppt-text-model,
.ppt-picture-model,
.ppt-picture-transparent {
  position: absolute;
  overflow: hidden;
}

.ppt-picture-transparent { overflow: visible; }

.picture-media-transparent {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.text-frame-art-model,
.picture-frame-art-model {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.text-frame-content-model {
  position: absolute;
  left: 7%;
  top: 7%;
  z-index: 4;
  width: 86%;
  height: 86%;
  padding: 0 3%;
  color: var(--ink);
}

.prompt-frame-tight .text-frame-content-model {
  left: 4.5%;
  top: 6%;
  width: 91%;
  height: 88%;
  padding: 0 1.5%;
  line-height: 1.45;
}

.speech-frame-content { left: 9%; top: 9%; width: 82%; height: 72%; }
.accept-button-content { left: 8%; top: 8%; width: 84%; height: 84%; }

.lesson-element {
  position: absolute;
  z-index: 18;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 3px 5px rgba(91, 74, 121, .14));
  pointer-events: none;
}

.generated-text-button {
  position: absolute;
  overflow: visible;
}

.generated-text-button img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: drop-shadow(0 5px 7px rgba(61, 72, 105, .18));
}

.generated-down-arrow {
  position: absolute;
  z-index: 28;
  overflow: hidden;
  pointer-events: none;
}

.generated-down-arrow img {
  position: absolute;
  left: -14.5%;
  top: -7.5%;
  width: 121%;
  height: 114%;
  object-fit: fill;
  filter: drop-shadow(0 3px 4px rgba(71, 94, 126, .2));
}

.lesson-video {
  position: absolute;
  left: 9.375%;
  top: 16.66667%;
  z-index: 20;
  display: block;
  width: 81.25%;
  height: 72.22222%;
  border: 7px solid rgba(126, 218, 210, .95);
  border-radius: 24px;
  background: #000;
  box-shadow: 0 10px 24px rgba(58, 92, 116, .2), 0 0 0 3px rgba(178, 167, 231, .82);
  object-fit: contain;
  pointer-events: auto;
}

.slide[data-slide="31"] .ppt-layer { z-index: 55; }

.picture-media-model {
  position: absolute;
  z-index: 2;
  display: block;
  object-fit: cover;
}

.page-counter {
  position: absolute;
  z-index: 30;
  left: calc(50% + 18px);
  bottom: 24px;
  min-width: 58px;
  color: var(--title-ink);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-align: left;
}

.fullscreen-button { left: calc(50% - 32px); }

.thumbnail-toggle {
  position: fixed;
  left: 18px;
  top: 18px;
  z-index: 120;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid rgba(157, 238, 229, .9);
  border-radius: 14px;
  background: rgba(17, 35, 43, .9);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  cursor: pointer;
}

.thumbnail-toggle span,
.thumbnail-toggle span::before,
.thumbnail-toggle span::after {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: #91e5dc;
  content: "";
}

.thumbnail-toggle span { left: 10px; top: 10px; }
.thumbnail-toggle span::before { left: 16px; top: 0; }
.thumbnail-toggle span::after { left: 0; top: 16px; box-shadow: 16px 0 0 #b6a9e8; }

.thumbnail-panel {
  position: fixed;
  z-index: 115;
  left: 16px;
  top: 76px;
  bottom: 16px;
  width: 238px;
  padding: 14px 12px;
  overflow: hidden;
  border: 1px solid rgba(150, 232, 223, .46);
  border-radius: 18px;
  background: rgba(8, 21, 28, .94);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .46);
  opacity: 0;
  transform: translateX(calc(-100% - 34px));
  transition: transform .25s ease, opacity .2s ease;
  pointer-events: none;
}

.thumbnail-panel.is-open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.lesson-video:fullscreen,
.lesson-video:-webkit-full-screen {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
  background: #000;
  box-shadow: none;
  object-fit: contain;
}

.soft-decor-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  opacity: .065;
  filter: saturate(.72) brightness(1.04);
  pointer-events: none;
  user-select: none;
}

.slide > .soft-decor-layer { z-index: 1; }
.soft-decor-variant-2 { transform: scaleX(-1); }
.soft-decor-variant-3 { transform: scaleY(-1); opacity: .055; }

.thumbnail-list {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: #73d9d1 rgba(255, 255, 255, .08);
}

.thumbnail-item {
  position: relative;
  display: block;
  width: 204px;
  height: 122px;
  margin: 0 auto 12px;
  padding: 5px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .14);
  border-radius: 11px;
  background: #08141b;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .25);
  cursor: pointer;
}

.thumbnail-item:hover { border-color: rgba(145, 229, 220, .72); }
.thumbnail-item.is-active { border-color: #91e5dc; box-shadow: 0 0 0 2px rgba(182, 169, 232, .72); }

.thumbnail-canvas {
  position: relative;
  width: 192px;
  height: 108px;
  overflow: hidden;
  border-radius: 7px;
  background: #fffaf2;
  pointer-events: none;
}

.thumbnail-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide.thumbnail-clone {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  inset: auto !important;
  width: 1600px !important;
  height: 900px !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: scale(.12) !important;
  transform-origin: 0 0 !important;
}

.thumbnail-clone [data-animate] {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.thumbnail-number {
  position: absolute;
  right: 7px;
  bottom: 7px;
  z-index: 10;
  min-width: 24px;
  padding: 2px 5px;
  border-radius: 7px;
  color: #fff;
  background: rgba(4, 19, 25, .78);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

:fullscreen .thumbnail-toggle,
:fullscreen .thumbnail-panel {
  display: none !important;
}