@font-face {
  font-family: "Funnel Display";
  src: url("../fonts/FunnelDisplay.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

@font-face {
  font-family: "Funnel Sans";
  src: url("../fonts/FunnelSans.ttf") format("truetype");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

:root {
  --ink: #0a0b10;
  --paper: #f7f2e8;
  --red: #ed193a;
  --blue: #1646a0;
  --teal: #007a80;
}

* {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
p {
  margin: 0;
}

h1,
h2,
h3 {
  font-size: inherit;
  font-weight: inherit;
}

button,
input {
  padding: 0;
  border: 0;
  margin: 0;
  background: transparent;
  color: inherit;
}

img,
svg,
audio {
  display: block;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: inherit;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Funnel Sans", Arial, Helvetica, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

button:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 4px;
}

.site-shell {
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ink);
}

.experience {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--ink);
}

.reel {
  position: absolute;
  inset: -2%;
  z-index: 1;
  width: 104%;
  height: 104%;
}

.reel {
  overflow: hidden;
}

.flag-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.reel-frame,
.flag-image {
  display: block;
  object-fit: cover;
  opacity: 0;
  user-select: none;
  will-change: opacity;
}

.reel-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.reel-frame.image-outdoor {
  object-position: center 58%;
  opacity: 1;
}

.reel-frame.fragment-red {
  object-position: center center;
}

.reel-frame.fragment-party {
  object-position: center 38%;
}

.reel-frame.fragment-laugh {
  object-position: center center;
}

.reel-frame.image-cafe {
  object-position: center center;
}

.reel-frame.image-close {
  object-position: center 42%;
}

.flag-image {
  position: absolute;
  top: -12%;
  left: -16%;
  width: 122%;
  max-width: none;
  height: 124%;
  object-fit: cover;
  object-position: 68% 45%;
}

.reel-scrim {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: block;
  background: linear-gradient(180deg, rgba(6, 8, 12, 0.04), rgba(6, 8, 12, 0.2));
  pointer-events: none;
}

.experience:not(.is-ready) .reel-frame,
.experience:not(.is-ready) .flag-image,
.experience:not(.is-ready) .hero-word,
.experience:not(.is-ready) .problem-strike,
.experience:not(.is-ready) .stripe-curtain,
.experience:not(.is-ready) .neet-context,
.experience:not(.is-ready) .story-fact,
.experience:not(.is-ready) .final-message-stage,
.experience:not(.is-ready) .final-message,
.experience:not(.is-ready) .closing-page,
.experience:not(.is-ready) .closing-tint,
.experience:not(.is-ready) .closing-logo,
.experience:not(.is-ready) .closing-copy,
.experience:not(.is-ready) .closing-question,
.experience:not(.is-ready) .closing-point,
.experience:not(.is-ready) .ai-closing-stage,
.experience:not(.is-ready) .ai-primary,
.experience:not(.is-ready) .ai-understanding,
.experience:not(.is-ready) .final-actions,
.experience:not(.is-ready) .ai-proof-note,
.experience:not(.is-ready) .progress-bar {
  animation-play-state: paused !important;
}

.experience.is-paused,
.experience.is-paused *,
.experience.is-paused *::before,
.experience.is-paused *::after {
  animation-play-state: paused !important;
}

.experience.is-resetting *,
.experience.is-resetting *::before,
.experience.is-resetting *::after {
  animation: none !important;
}

.image-layer,
.fragment {
  position: absolute;
  inset: -2%;
  z-index: 1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
  will-change: opacity, transform, clip-path, filter;
}

.image-layer::after,
.fragment::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(6, 8, 12, 0.06), rgba(6, 8, 12, 0.22));
}

.image-outdoor {
  background-image: url("../images/open-outdoor.jpg");
  background-position: center 58%;
}

.fragment-red {
  background-image: url("../images/neet-red.webp");
}

.fragment-party {
  background-image: url("../images/movement-party.jpg");
  background-position: center 38%;
}

.fragment-laugh {
  background-image: url("../images/geralt-eam-10171012.jpg");
}

.image-cafe {
  background-image: url("../images/cafe-selfie.jpg");
}

.image-close {
  background-image: url("../images/close-group.jpg");
  background-position: center 42%;
}

.image-flag {
  background-image: url("../images/union-flag.jpg");
  background-position: center 45%;
}

.experience-line .image-outdoor {
  animation: lineOutdoor 9.4s linear both;
}

.experience-line .fragment-red {
  animation: lineFragmentRed 9.4s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.experience-line .fragment-party {
  animation: lineFragmentParty 9.4s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.experience-line .fragment-laugh {
  animation: lineFragmentLaugh 9.4s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.experience-line .image-cafe {
  animation: lineCafe 9.4s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-line .image-close {
  animation: lineClose 9.4s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-line .image-flag {
  animation: lineFlag 9.4s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.living-flag {
  position: absolute;
  inset: -4%;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.living-panel {
  position: absolute;
  top: -4%;
  display: block;
  width: 31%;
  height: 108%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
  opacity: 0;
  transform: translateY(8%) scale(1.08);
  will-change: opacity, transform, filter;
}

.living-panel::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, rgba(8, 18, 51, 0.02), rgba(8, 18, 51, 0.28));
}

.living-panel-one {
  left: -6%;
  background-image: url("../images/open-outdoor.jpg");
  background-position: 28% center;
}

.living-panel-two {
  left: 12%;
  background-image: url("../images/neet-red.webp");
  background-position: 21% center;
}

.living-panel-three {
  left: 30%;
  background-image: url("../images/movement-party.jpg");
  background-position: 43% center;
}

.living-panel-four {
  left: 48%;
  background-image: url("../images/geralt-eam-10171012.jpg");
  background-position: 48% center;
}

.living-panel-five {
  left: 66%;
  background-image: url("../images/cafe-selfie.jpg");
  background-position: 50% center;
}

.living-panel-six {
  left: 84%;
  background-image: url("../images/close-group.jpg");
  background-position: 71% center;
}

.word-stage {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}

.word-stage::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: 43vh;
  content: "";
  background: linear-gradient(180deg, rgba(2, 4, 8, 0.2), rgba(2, 4, 8, 0));
}

.hero-word {
  position: absolute;
  z-index: 1;
  top: 8vh;
  left: 50%;
  display: block;
  width: max-content;
  transform: translateX(-50%);
  color: #ffffff;
  font-family: "Funnel Display", Arial, Helvetica, sans-serif;
  font-size: clamp(7.4rem, 19vw, 22rem);
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.78;
  text-shadow: none;
  will-change: opacity, transform, clip-path;
}

.word-problem {
}

.word-problem > span {
  display: block;
}

.problem-strike {
  position: absolute;
  top: 43%;
  left: -2%;
  display: block;
  width: 104%;
  height: clamp(1.15rem, 2.2vw, 2.8rem);
  background: var(--red);
  box-shadow: none;
  opacity: 0;
  transform: rotate(-2deg) scaleX(0);
  transform-origin: left center;
  will-change: opacity, transform;
}

.word-answer {
  opacity: 0;
}

.experience-line .word-problem {
  animation: lineProblem 9.4s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-line .word-answer {
  animation: lineAnswer 9.4s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.strike {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.strike-path {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  will-change: stroke-dashoffset, opacity;
}

.strike-blue {
  stroke: var(--blue);
  stroke-width: 88;
}

.strike-white {
  stroke: var(--paper);
  stroke-width: 61;
}

.strike-red {
  stroke: var(--red);
  stroke-width: 29;
}

.experience-line .strike-blue {
  animation: lineStrike 9.4s cubic-bezier(0.72, 0, 0.18, 1) both;
}

.experience-line .strike-white {
  animation: lineStrike 9.4s 0.035s cubic-bezier(0.72, 0, 0.18, 1) both;
}

.experience-line .strike-red {
  animation: lineStrike 9.4s 0.07s cubic-bezier(0.72, 0, 0.18, 1) both;
}

.exposure {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #ffffff;
  opacity: 0;
  pointer-events: none;
}

.exposure-one {
}

.exposure-two {
}

.experience-line .exposure-one {
  animation: lineExposureOne 9.4s linear both;
}

.experience-line .exposure-two {
  animation: lineExposureTwo 9.4s linear both;
}

.flag-geometry {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.experience-line .flag-geometry {
  animation: lineGeometry 9.4s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.band {
  position: absolute;
  top: 48%;
  left: -15%;
  display: block;
  width: 130%;
  height: 18vh;
  min-height: 120px;
  transform: rotate(-10deg) scaleX(0);
  transform-origin: left center;
}

.band-blue {
  z-index: 1;
  height: 29vh;
  min-height: 200px;
  background: var(--blue);
}

.band-white {
  z-index: 2;
  height: 20vh;
  min-height: 142px;
  background: var(--paper);
}

.band-red {
  z-index: 3;
  height: 10vh;
  min-height: 74px;
  background: var(--red);
}

.experience-line .band-blue {
  animation: lineBand 9.4s cubic-bezier(0.72, 0, 0.18, 1) both;
}

.experience-line .band-white {
  animation: lineBand 9.4s 0.04s cubic-bezier(0.72, 0, 0.18, 1) both;
}

.experience-line .band-red {
  animation: lineBand 9.4s 0.08s cubic-bezier(0.72, 0, 0.18, 1) both;
}

.final-message-stage {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  will-change: opacity;
}

.final-message {
  position: absolute;
  right: clamp(1.4rem, 4vw, 5rem);
  bottom: clamp(4.5rem, 9vh, 8rem);
  z-index: 1;
  width: min(47rem, 54vw);
  margin: 0;
  color: #ffffff;
  font-family: "Funnel Display", Arial, Helvetica, sans-serif;
  font-size: clamp(2.4rem, 4.35vw, 5.3rem);
  font-weight: 650;
  letter-spacing: -0.045em;
  line-height: 0.98;
  opacity: 0;
  text-wrap: balance;
  text-shadow: none;
  transform: translateY(42px);
}

.closing-page {
  position: absolute;
  inset: 0;
  z-index: 10;
  isolation: isolate;
  overflow: hidden;
  color: #ffffff;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  will-change: opacity;
}

.closing-flag {
  position: absolute;
  top: -12%;
  left: -16%;
  z-index: 0;
  display: block;
  width: 122%;
  max-width: none;
  height: 124%;
  object-fit: cover;
  object-position: 68% 45%;
  user-select: none;
  filter: saturate(0.72) contrast(1.04) brightness(0.82) hue-rotate(-7deg);
}

.closing-tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  background: linear-gradient(
    105deg,
    rgba(0, 74, 73, 0.91) 0%,
    rgba(0, 132, 124, 0.87) 48%,
    rgba(0, 91, 91, 0.9) 100%
  );
}

.closing-tint::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    90deg,
    rgba(0, 30, 34, 0.28) 0%,
    rgba(0, 42, 43, 0.1) 48%,
    rgba(0, 35, 36, 0.05) 100%
  );
}

.closing-logo {
  position: absolute;
  right: clamp(1.25rem, 2.4vw, 2.8rem);
  bottom: clamp(1.15rem, 2vw, 2.25rem);
  z-index: 6;
  display: block;
  width: clamp(4.4rem, 5.2vw, 6.2rem);
  height: auto;
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}

.closing-copy {
  position: absolute;
  top: clamp(19rem, 33.5vh, 24rem);
  right: clamp(1.4rem, 4vw, 5rem);
  left: 52%;
  z-index: 3;
  width: auto;
  opacity: 0;
  text-shadow: none;
  transform-origin: left top;
  will-change: opacity;
}

.closing-question {
  --question-open-top: 36vh;
  --question-open-left: 4vw;
  --question-open-width: 92vw;
  --question-open-size: clamp(3.6rem, 6.2vw, 7.6rem);
  --question-final-top: clamp(6.8rem, 11.5vh, 8.5rem);
  --question-final-width: 44vw;
  --question-final-size: clamp(1.8rem, 2.65vw, 3.25rem);
  position: absolute;
  top: var(--question-final-top);
  left: var(--question-open-left);
  z-index: 3;
  width: var(--question-final-width);
  margin: 0;
  padding-top: clamp(1rem, 1.3vw, 1.5rem);
  padding-bottom: 0.14em;
  font-family: "Funnel Display", Arial, Helvetica, sans-serif;
  font-size: var(--question-final-size);
  font-weight: 610;
  letter-spacing: -0.045em;
  line-height: 1.02;
  opacity: 0;
  overflow: visible;
  text-wrap: nowrap;
  will-change: opacity;
}

.closing-question > span {
  display: block;
}

.closing-question::before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: clamp(0.34rem, 0.48vw, 0.58rem);
  background: #ffffff;
  content: "";
}

.closing-points {
  display: grid;
  gap: clamp(0.7rem, 1.1vw, 1.3rem);
}

.closing-point {
  margin: 0;
  padding-bottom: 0.14em;
  font-family: "Funnel Display", Arial, Helvetica, sans-serif;
  font-weight: 720;
  letter-spacing: -0.052em;
  line-height: 1;
  opacity: 0;
  overflow: visible;
  text-wrap: balance;
  will-change: opacity;
}

.closing-point-1 {
  max-width: 15.5ch;
  font-size: clamp(2.5rem, 3.9vw, 4.75rem);
}

.closing-point-2 {
  max-width: 16.5ch;
  font-size: clamp(2.1rem, 3.1vw, 3.8rem);
}

.closing-point-3 {
  max-width: 28ch;
  font-size: clamp(1.15rem, 1.65vw, 2rem);
  font-weight: 580;
  letter-spacing: -0.035em;
  line-height: 1.06;
}

.ai-closing-stage {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: opacity;
}

.ai-copy {
  position: absolute;
  top: clamp(9rem, 20vh, 13.5rem);
  left: clamp(1.4rem, 4vw, 5rem);
  width: min(80rem, 72vw);
}

.ai-primary,
.ai-understanding {
  margin: 0;
  padding-bottom: 0.12em;
  color: #ffffff;
  font-family: "Funnel Display", Arial, Helvetica, sans-serif;
  opacity: 0;
  overflow: visible;
  text-wrap: balance;
  will-change: opacity;
}

.ai-primary {
  max-width: 20ch;
  font-size: clamp(3rem, 4.25vw, 5.2rem);
  font-weight: 800;
  letter-spacing: -0.058em;
  line-height: 1;
}

.ai-understanding {
  max-width: 27ch;
  margin-top: clamp(1.6rem, 2.8vw, 3.2rem);
  font-size: clamp(1.55rem, 2.3vw, 2.8rem);
  font-weight: 560;
  letter-spacing: -0.035em;
  line-height: 1.06;
}

.final-actions {
  position: absolute;
  right: clamp(5rem, 8.5vw, 8.75rem);
  bottom: clamp(9rem, 22.3vh, 13rem);
  z-index: 7;
  display: grid;
  width: clamp(9.25rem, 9.2vw, 10rem);
  grid-template-columns: 1fr;
  gap: clamp(0.65rem, 1vw, 1rem);
  opacity: 0;
  pointer-events: auto;
  transform: translateY(18px);
  will-change: opacity, transform;
}

.final-action {
  display: flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 999px;
  background: rgba(0, 38, 40, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
  font-size: clamp(0.75rem, 0.82vw, 0.86rem);
  font-weight: 560;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-align: center;
  text-decoration: none;
  backdrop-filter: blur(14px);
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.final-action:hover,
.final-action:focus-visible {
  border-color: #ffffff;
  background: #ffffff;
  color: #004f52;
  transform: translateY(-2px);
}

.final-action:focus-visible,
.audio-close:focus-visible,
.audio-play:focus-visible,
.audio-timeline input:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 4px;
}

.final-action-report {
  flex-direction: column;
  align-items: flex-start;
  padding-inline: 1.35rem;
  text-align: left;
}

.final-action-report span:last-child {
  font-weight: 690;
}

.final-action-audio {
  gap: 0.55rem;
}

.final-action-audio i {
  display: block;
  width: 1px;
  height: 1.15em;
  background: currentColor;
  opacity: 0.62;
}

.ai-proof-note {
  position: absolute;
  bottom: clamp(2rem, 6.2vh, 3.25rem);
  left: clamp(2rem, 4.8vw, 5rem);
  z-index: 7;
  max-width: min(34rem, 52vw);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.76);
  font-size: clamp(0.58rem, 0.63vw, 0.68rem);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  text-align: left;
}

.audio-modal {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  padding: clamp(1rem, 4vw, 4rem);
  place-items: center;
  background:
    radial-gradient(circle at 73% 22%, rgba(237, 25, 58, 0.16), transparent 34%),
    rgba(0, 26, 28, 0.72);
  pointer-events: auto;
  backdrop-filter: blur(24px) saturate(0.82);
  animation: audioModalIn 280ms ease-out both;
}

.audio-player-card {
  position: relative;
  width: min(49rem, 100%);
  overflow: hidden;
  padding: clamp(2rem, 4.8vw, 4.25rem);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: clamp(1.25rem, 2.2vw, 2rem);
  background:
    linear-gradient(135deg, rgba(0, 104, 107, 0.94), rgba(0, 47, 52, 0.97)),
    #004f52;
  box-shadow: 0 38px 100px rgba(0, 12, 14, 0.52);
  color: #ffffff;
}

.audio-player-card::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 38%;
  height: 0.42rem;
  background: var(--red);
  content: "";
}

.audio-close {
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 50%;
  background: rgba(0, 25, 28, 0.16);
  color: #ffffff;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.audio-close:hover {
  background: #ffffff;
  color: #004f52;
}

.audio-close svg {
  width: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.audio-kicker {
  margin: 0 0 1.25rem;
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.19em;
}

.audio-player-card h2 {
  max-width: 12ch;
  margin: 0;
  font-family: "Funnel Display", Arial, Helvetica, sans-serif;
  font-size: clamp(2.55rem, 5vw, 5rem);
  font-weight: 760;
  letter-spacing: -0.058em;
  line-height: 0.94;
}

.audio-signal {
  display: flex;
  height: clamp(3.2rem, 7vw, 5rem);
  align-items: center;
  gap: clamp(0.18rem, 0.42vw, 0.36rem);
  margin: clamp(2rem, 4vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}

.audio-signal span {
  display: block;
  min-width: 2px;
  height: 18%;
  flex: 1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  transform: scaleY(0.68);
  transform-origin: center;
}

.audio-signal span:nth-child(4n + 1) { height: 42%; }
.audio-signal span:nth-child(5n + 2) { height: 74%; }
.audio-signal span:nth-child(6n + 3) { height: 96%; }
.audio-signal span:nth-child(7n + 4) { height: 58%; }

.audio-signal.is-playing span {
  animation: audioPulse 820ms ease-in-out infinite alternate;
}

.audio-signal.is-playing span:nth-child(3n + 1) { animation-delay: -180ms; }
.audio-signal.is-playing span:nth-child(4n + 2) { animation-delay: -430ms; }
.audio-signal.is-playing span:nth-child(5n + 3) { animation-delay: -650ms; }

.audio-controls {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.audio-play {
  display: grid;
  width: clamp(3.8rem, 6vw, 4.8rem);
  height: clamp(3.8rem, 6vw, 4.8rem);
  padding: 0;
  place-items: center;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: #ffffff;
  color: #00575a;
  cursor: pointer;
  transition: transform 180ms ease;
}

.audio-play:hover {
  transform: scale(1.04);
}

.audio-play svg {
  width: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.audio-play .icon-fill {
  fill: currentColor;
  stroke: none;
}

.audio-timeline {
  min-width: 0;
}

.audio-timeline input {
  width: 100%;
  height: 1.25rem;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.audio-timeline input::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #ffffff 0 var(--audio-progress),
    rgba(255, 255, 255, 0.25) var(--audio-progress) 100%
  );
}

.audio-timeline input::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}

.audio-timeline input::-moz-range-progress {
  height: 3px;
  border-radius: 999px;
  background: #ffffff;
}

.audio-timeline input::-webkit-slider-thumb {
  width: 0.9rem;
  height: 0.9rem;
  margin-top: -0.38rem;
  appearance: none;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--red);
}

.audio-timeline input::-moz-range-thumb {
  width: 0.9rem;
  height: 0.9rem;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: var(--red);
}

.audio-times {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.audio-player-card audio {
  display: none;
}

.experience-line .closing-page,
.experience-flag .closing-page {
  animation: closingPage 51s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-line .final-message-stage,
.experience-flag .final-message-stage {
  animation: finalMessageHold 51s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-line .closing-logo,
.experience-flag .closing-logo {
  animation: closingLogo 51s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-line .closing-copy,
.experience-flag .closing-copy {
  animation: closingCopy 51s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-line .closing-tint,
.experience-flag .closing-tint {
  animation: closingTint 51s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-line .closing-question,
.experience-flag .closing-question {
  animation: closingQuestion 51s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-line .closing-point-1,
.experience-flag .closing-point-1 {
  animation: closingPointOne 51s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-line .closing-point-2,
.experience-flag .closing-point-2 {
  animation: closingPointTwo 51s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-line .closing-point-3,
.experience-flag .closing-point-3 {
  animation: closingPointThree 51s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-line .ai-closing-stage,
.experience-flag .ai-closing-stage {
  animation: aiClosingStage 51s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-line .ai-primary,
.experience-flag .ai-primary {
  animation: aiPrimary 51s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-line .ai-understanding,
.experience-flag .ai-understanding {
  animation: aiUnderstanding 51s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-line .final-actions,
.experience-flag .final-actions {
  animation: finalActions 51s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-line .ai-proof-note,
.experience-flag .ai-proof-note {
  animation: aiProofNote 51s ease both;
}

.experience.is-paused .audio-signal.is-playing span {
  animation-play-state: running !important;
}

.experience.is-paused .audio-modal {
  animation-play-state: running !important;
}

.experience-line .final-message {
  animation: lineFinal 9.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.study-label {
  position: absolute;
  top: clamp(1rem, 2.4vw, 2.4rem);
  left: clamp(1rem, 2.4vw, 2.4rem);
  z-index: 12;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #ffffff;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  mix-blend-mode: difference;
}

.study-label span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.study-label strong {
  font-weight: 650;
}

.top-controls {
  position: absolute;
  top: clamp(1rem, 2.4vw, 2.4rem);
  right: clamp(1rem, 2.4vw, 2.4rem);
  z-index: 13;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.replay-button,
.pause-button {
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(5, 8, 15, 0.18);
  color: #ffffff;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: background 180ms ease, color 180ms ease, opacity 180ms ease;
}

.replay-button {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.68rem 0.9rem 0.62rem 1rem;
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
}

.pause-button {
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  padding: 0;
  place-items: center;
  border-color: rgba(255, 255, 255, 0.58);
  border-radius: 50%;
  background: rgba(5, 8, 15, 0.13);
}

.replay-button:hover,
.pause-button:hover:not(:disabled) {
  background: #ffffff;
  color: var(--ink);
}

.pause-button:disabled {
  opacity: 0.36;
  cursor: default;
}

.replay-button svg,
.pause-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.pause-button .icon-fill {
  fill: currentColor;
  stroke: none;
}

.study-switcher {
  position: absolute;
  bottom: clamp(1rem, 2vw, 2rem);
  left: clamp(1rem, 2.4vw, 2.4rem);
  z-index: 13;
  display: flex;
  gap: 0.35rem;
}

.study-switcher button {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 999px;
  background: rgba(4, 7, 13, 0.26);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.58rem;
  letter-spacing: 0.11em;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(14px);
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.study-switcher button:hover,
.study-switcher button.is-active {
  border-color: #ffffff;
  background: #ffffff;
  color: var(--ink);
}

.study-switcher span {
  opacity: 0.68;
}

.study-switcher strong {
  font-weight: 700;
}

.progress-track {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 12;
  height: 3px;
  background: rgba(255, 255, 255, 0.22);
}

.progress-bar {
  display: block;
  width: 100%;
  height: 100%;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left center;
}

.experience-line .progress-bar {
  animation: lineProgress 9.4s linear both;
}

.experience-flag {
  background: var(--blue);
}

.experience-flag .image-outdoor {
  animation: flagOpening 9.4s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-flag .living-panel {
  animation: livingPanel 8.9s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-flag .living-panel-one { animation-delay: 0s; }
.experience-flag .living-panel-two { animation-delay: 0.1s; }
.experience-flag .living-panel-three { animation-delay: 0.2s; }
.experience-flag .living-panel-four { animation-delay: 0.3s; }
.experience-flag .living-panel-five { animation-delay: 0.4s; }
.experience-flag .living-panel-six { animation-delay: 0.5s; }

.experience-flag .image-flag {
  animation: flagResolve 9.4s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-flag .word-problem {
  animation: flagProblem 9.4s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-flag .word-answer {
  animation: flagAnswer 9.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-flag .strike-blue {
  animation: flagStrike 9.4s cubic-bezier(0.72, 0, 0.18, 1) both;
}

.experience-flag .strike-white {
  animation: flagStrike 9.4s 0.035s cubic-bezier(0.72, 0, 0.18, 1) both;
}

.experience-flag .strike-red {
  animation: flagStrike 9.4s 0.07s cubic-bezier(0.72, 0, 0.18, 1) both;
}

.experience-flag .flag-geometry {
  animation: flagGeometry 9.4s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.experience-flag .band-blue {
  animation: flagBand 9.4s cubic-bezier(0.72, 0, 0.18, 1) both;
}

.experience-flag .band-white {
  animation: flagBand 9.4s 0.04s cubic-bezier(0.72, 0, 0.18, 1) both;
}

.experience-flag .band-red {
  animation: flagBand 9.4s 0.08s cubic-bezier(0.72, 0, 0.18, 1) both;
}

.experience-flag .exposure-one {
  animation: flagFlash 9.4s linear both;
}

.experience-flag .final-message {
  animation: flagFinal 9.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-flag .progress-bar {
  animation: lineProgress 9.4s linear both;
}

.experience-exposure .image-outdoor {
  animation: exposureOutdoor 8.6s steps(1, end) both;
}

.experience-exposure .fragment-red {
  animation: exposureRed 8.6s steps(1, end) both;
}

.experience-exposure .fragment-party {
  animation: exposureParty 8.6s steps(1, end) both;
}

.experience-exposure .fragment-laugh {
  animation: exposureLaugh 8.6s steps(1, end) both;
}

.experience-exposure .image-cafe {
  animation: exposureCafe 8.6s steps(1, end) both;
}

.experience-exposure .image-close {
  animation: exposureClose 8.6s steps(1, end) both;
}

.experience-exposure .image-flag {
  animation: exposureFlag 8.6s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-exposure .word-problem {
  animation: exposureProblem 8.6s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-exposure .word-answer {
  animation: exposureAnswer 8.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-exposure .strike-blue {
  animation: exposureStrike 8.6s cubic-bezier(0.72, 0, 0.18, 1) both;
}

.experience-exposure .strike-white {
  animation: exposureStrike 8.6s 0.025s cubic-bezier(0.72, 0, 0.18, 1) both;
}

.experience-exposure .strike-red {
  animation: exposureStrike 8.6s 0.05s cubic-bezier(0.72, 0, 0.18, 1) both;
}

.experience-exposure .exposure-one {
  animation: exposureFlashOne 8.6s linear both;
}

.experience-exposure .exposure-two {
  background: var(--red);
  mix-blend-mode: screen;
  animation: exposureFlashTwo 8.6s linear both;
}

.experience-exposure .flag-geometry {
  animation: exposureGeometry 8.6s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.experience-exposure .band-blue,
.experience-exposure .band-white,
.experience-exposure .band-red {
  animation: exposureBand 8.6s cubic-bezier(0.72, 0, 0.18, 1) both;
}

.experience-exposure .final-message {
  animation: exposureFinal 8.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-exposure .progress-bar {
  animation: lineProgress 8.6s linear both;
}

.stripe-curtain {
  position: absolute;
  inset: 0;
  z-index: 7;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  pointer-events: none;
  will-change: clip-path, opacity;
}

.stripe-field {
  display: flex;
  width: 10240px;
  height: 100%;
}

.transition-stripe {
  display: block;
  flex: 0 0 20px;
  height: 100%;
}

.transition-stripe-red {
  background: var(--red);
}

.transition-stripe-white {
  background: #ffffff;
}

.transition-stripe-blue {
  background: var(--blue);
}

.neet-context {
  --context-edge-gap: clamp(1.4rem, 4vw, 5rem);
  position: absolute;
  top: 44vh;
  right: 0;
  z-index: 5;
  display: flex;
  width: min(
    calc(64rem + var(--context-edge-gap)),
    calc(67vw + var(--context-edge-gap))
  );
  flex-direction: column;
  align-items: flex-start;
  padding-right: var(--context-edge-gap);
  padding-top: clamp(0.8rem, 1.3vw, 1.45rem);
  border-top: clamp(0.42rem, 0.62vw, 0.72rem) solid var(--red);
  margin: 0;
  color: #ffffff;
  font-family: "Funnel Display", Arial, Helvetica, sans-serif;
  opacity: 0;
  text-shadow: none;
  transform: translateY(28px);
}

.neet-context::before {
  position: absolute;
  inset: 0 -4rem -3rem -9rem;
  z-index: -1;
  content: "";
  background: radial-gradient(circle at 76% 62%, rgba(2, 5, 11, 0.78), rgba(2, 5, 11, 0) 72%);
  pointer-events: none;
}

.neet-context strong {
  font-size: clamp(5rem, 8.8vw, 10.6rem);
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 0.76;
}

.neet-context span {
  max-width: 27ch;
  margin-top: 1.1rem;
  font-size: clamp(1.25rem, 2.15vw, 2.55rem);
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.neet-context span:last-child {
  width: max-content;
  margin-top: 0.65rem;
  padding: 0.12em 0.28em 0.14em;
  background: var(--red);
  color: #ffffff;
  font-size: clamp(1.65rem, 3vw, 3.65rem);
  font-weight: 780;
  letter-spacing: -0.045em;
  line-height: 0.88;
  text-shadow: none;
  transform: rotate(-1deg);
}

.fact-stage {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.story-fact {
  position: absolute;
  right: clamp(1.4rem, 4vw, 5rem);
  bottom: clamp(5.7rem, 10vh, 9rem);
  display: flex;
  width: min(79rem, 84vw);
  margin: 0;
  flex-direction: column;
  align-items: flex-end;
  padding:
    clamp(1rem, 1.6vw, 1.8rem)
    clamp(0.5rem, 0.75vw, 0.9rem)
    clamp(0.5rem, 0.75vw, 0.9rem)
    clamp(2rem, 7vw, 9rem);
  border-top: clamp(0.48rem, 0.7vw, 0.86rem) solid var(--red);
  background: linear-gradient(
    90deg,
    rgba(2, 5, 11, 0) 0%,
    rgba(2, 5, 11, 0.48) 38%,
    rgba(2, 5, 11, 0.8) 100%
  );
  color: #ffffff;
  font-family: "Funnel Display", Arial, Helvetica, sans-serif;
  opacity: 0;
  text-align: right;
  text-shadow: none;
  transform: translateY(32px);
  will-change: opacity, transform, clip-path;
}

.story-fact strong,
.story-fact span,
.story-fact em {
  display: block;
}

.story-fact strong {
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.065em;
}

.story-fact em {
  width: max-content;
  max-width: 100%;
  margin-top: clamp(0.6rem, 1vw, 1rem);
  padding: 0.13em 0.28em 0.16em;
  background: var(--red);
  color: #ffffff;
  font-size: clamp(1.7rem, 3.45vw, 4.2rem);
  font-style: normal;
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.fact-scale strong {
  font-size: clamp(4.1rem, 7.8vw, 9.4rem);
  line-height: 0.78;
}

.fact-work {
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
  gap: clamp(1rem, 2vw, 2.4rem);
}

.fact-work strong {
  font-size: clamp(7rem, 15vw, 18rem);
  line-height: 0.69;
}

.fact-work span {
  max-width: 7.2ch;
  font-size: clamp(3.5rem, 7.1vw, 8.6rem);
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 0.77;
}

.fact-chance strong {
  font-size: clamp(4.4rem, 8.7vw, 10.5rem);
  line-height: 0.76;
}

.fact-chance span {
  max-width: 13ch;
  margin-top: clamp(0.5rem, 1vw, 1rem);
  font-size: clamp(3rem, 5.7vw, 6.9rem);
  font-weight: 760;
  letter-spacing: -0.055em;
  line-height: 0.8;
}

.experience-line .image-outdoor,
.experience-flag .image-outdoor {
  animation: reelOutdoor 24s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-line .fragment-red,
.experience-flag .fragment-red {
  animation: reelRed 24s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-line .fragment-party,
.experience-flag .fragment-party {
  animation: reelParty 24s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-line .fragment-laugh,
.experience-flag .fragment-laugh {
  animation: reelLaugh 24s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-line .image-cafe,
.experience-flag .image-cafe {
  animation: reelCafe 24s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-line .image-close,
.experience-flag .image-close {
  animation: reelClose 24s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-line .image-flag,
.experience-flag .image-flag {
  animation: reelFlag 24s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-line .word-problem,
.experience-flag .word-problem {
  animation: curtainProblem 24s cubic-bezier(0.35, 0, 0.2, 1) both;
}

.experience-line .word-answer,
.experience-flag .word-answer {
  animation: curtainAnswer 24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-line .problem-strike,
.experience-flag .problem-strike {
  animation: problemStrike 24s cubic-bezier(0.72, 0, 0.18, 1) both;
}

.experience-line .stripe-curtain,
.experience-flag .stripe-curtain {
  animation: stripeCurtain 24s cubic-bezier(0.65, 0, 0.35, 1) both;
}

.experience-line .neet-context,
.experience-flag .neet-context {
  animation: reelContext 24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-line .fact-scale,
.experience-flag .fact-scale {
  animation: factScale 24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-line .fact-work,
.experience-flag .fact-work {
  animation: factWork 24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-line .fact-chance,
.experience-flag .fact-chance {
  animation: factChance 24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-line .exposure-one,
.experience-line .exposure-two,
.experience-flag .exposure-one,
.experience-flag .exposure-two {
  animation: none;
  opacity: 0;
}

.experience-line .final-message,
.experience-flag .final-message {
  animation: curtainFinal 24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.experience-line .progress-bar,
.experience-flag .progress-bar {
  animation: lineProgress 51s linear both;
}

.experience-exposure .neet-context {
  animation: exposureContext 8.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes reelOutdoor {
  0%, 13% { opacity: 1; }
  20%, 100% { opacity: 0; }
}

@keyframes reelRed {
  0%, 8% { opacity: 0; }
  13%, 25% { opacity: 1; }
  32%, 100% { opacity: 0; }
}

@keyframes reelParty {
  0%, 20% { opacity: 0; }
  25%, 37% { opacity: 1; }
  44%, 100% { opacity: 0; }
}

@keyframes reelLaugh {
  0%, 32% { opacity: 0; }
  37%, 49% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

@keyframes reelCafe {
  0%, 44% { opacity: 0; }
  49%, 61% { opacity: 1; }
  68%, 100% { opacity: 0; }
}

@keyframes reelClose {
  0%, 56% { opacity: 0; }
  61%, 88% { opacity: 1; }
  93%, 100% { opacity: 0; }
}

@keyframes reelFlag {
  0%, 91.9% { opacity: 0; }
  93%, 100% { opacity: 1; }
}

@keyframes curtainProblem {
  0%, 67% { opacity: 0; transform: translateX(-50%) translateY(-20px); clip-path: inset(0 0 100%); }
  70% { opacity: 1; transform: translateX(-50%) translateY(0); clip-path: inset(0); }
  78% { opacity: 1; transform: translateX(-50%) translateY(0); clip-path: inset(0); }
  80%, 100% { opacity: 0; transform: translateX(-50%) translateY(0); clip-path: inset(42% 0); }
}

@keyframes problemStrike {
  0%, 71% { opacity: 0; transform: rotate(-2deg) scaleX(0); }
  72% { opacity: 1; transform: rotate(-2deg) scaleX(0); }
  77% { opacity: 1; transform: rotate(-2deg) scaleX(1); }
  78% { opacity: 1; transform: rotate(-2deg) scaleX(1); }
  80%, 100% { opacity: 0; transform: rotate(-2deg) scaleX(1); }
}

@keyframes curtainAnswer {
  0%, 82% { opacity: 0; transform: translateX(-50%) translateY(24px); clip-path: inset(100% 0 0); }
  85% { opacity: 1; transform: translateX(-50%) translateY(0); clip-path: inset(0); }
  89% { opacity: 1; transform: translateX(-50%) translateY(0); clip-path: inset(0); }
  91%, 100% { opacity: 0; transform: translateX(-50%) translateY(0); clip-path: inset(44% 0); }
}

@keyframes stripeCurtain {
  0%, 89% { opacity: 0; clip-path: inset(0 100% 0 0); }
  90% { opacity: 1; clip-path: inset(0 100% 0 0); }
  93%, 94% { opacity: 1; clip-path: inset(0); }
  99% { opacity: 1; clip-path: inset(0 0 0 100%); }
  100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}

@keyframes reelContext {
  0%, 3% { opacity: 0; transform: translateY(28px); }
  7% { opacity: 1; transform: translateY(0); }
  22% { opacity: 1; transform: translateY(0); }
  25%, 100% { opacity: 0; transform: translateY(-18px); }
}

@keyframes factScale {
  0%, 26% { opacity: 0; transform: translateY(32px); clip-path: inset(100% 0 0); }
  29% { opacity: 1; transform: translateY(0); clip-path: inset(0); }
  38% { opacity: 1; transform: translateY(0); clip-path: inset(0); }
  41%, 100% { opacity: 0; transform: translateY(-18px); clip-path: inset(0 0 100%); }
}

@keyframes factWork {
  0%, 42% { opacity: 0; transform: translateY(32px); clip-path: inset(100% 0 0); }
  45% { opacity: 1; transform: translateY(0); clip-path: inset(0); }
  51% { opacity: 1; transform: translateY(0); clip-path: inset(0); }
  53%, 100% { opacity: 0; transform: translateY(-18px); clip-path: inset(0 0 100%); }
}

@keyframes factChance {
  0%, 54% { opacity: 0; transform: translateY(32px); clip-path: inset(100% 0 0); }
  57% { opacity: 1; transform: translateY(0); clip-path: inset(0); }
  63% { opacity: 1; transform: translateY(0); clip-path: inset(0); }
  66%, 100% { opacity: 0; transform: translateY(-18px); clip-path: inset(0 0 100%); }
}

@keyframes exposureContext {
  0%, 6% { opacity: 0; transform: translateY(28px); }
  12% { opacity: 1; transform: translateY(0); }
  47% { opacity: 1; transform: translateY(0); }
  55%, 100% { opacity: 0; transform: translateY(-18px); }
}

@keyframes curtainFinal {
  0%, 98% { opacity: 0; transform: translateY(46px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes finalMessageHold {
  0%, 58% { opacity: 1; }
  61.1%, 100% { opacity: 0; }
}

@keyframes closingPage {
  0%, 57.1% { opacity: 0; visibility: hidden; }
  58% { opacity: 0; visibility: visible; }
  61.1%, 100% { opacity: 1; visibility: visible; }
}

@keyframes closingCopy {
  0%, 57.5% { opacity: 0; }
  58.9% { opacity: 1; }
  80.4% { opacity: 1; }
  84%, 100% { opacity: 0.01; }
}

@keyframes closingTint {
  0%, 57.1% { opacity: 0; }
  58.4% { opacity: 0.48; }
  62.8%, 100% { opacity: 1; }
}

@keyframes closingQuestion {
  0%, 57.5% {
    opacity: 0;
    top: var(--question-open-top);
    left: var(--question-open-left);
    width: var(--question-open-width);
    font-size: var(--question-open-size);
    letter-spacing: -0.055em;
  }
  58.9% {
    opacity: 1;
    top: var(--question-open-top);
    left: var(--question-open-left);
    width: var(--question-open-width);
    font-size: var(--question-open-size);
    letter-spacing: -0.055em;
  }
  62% {
    opacity: 1;
    top: var(--question-open-top);
    left: var(--question-open-left);
    width: var(--question-open-width);
    font-size: var(--question-open-size);
    letter-spacing: -0.055em;
  }
  64.2% {
    opacity: 1;
    top: var(--question-final-top);
    left: var(--question-open-left);
    width: var(--question-open-width);
    font-size: var(--question-final-size);
    letter-spacing: -0.045em;
  }
  65.5%, 80.4% {
    opacity: 1;
    top: var(--question-final-top);
    left: var(--question-open-left);
    width: var(--question-final-width);
    font-size: var(--question-final-size);
    letter-spacing: -0.045em;
  }
  84%, 100% {
    opacity: 0.01;
    top: var(--question-final-top);
    left: var(--question-open-left);
    width: var(--question-final-width);
    font-size: var(--question-final-size);
    letter-spacing: -0.045em;
  }
}

@keyframes closingPointOne {
  0%, 64.2% { opacity: 0; }
  66.8%, 100% { opacity: 1; }
}

@keyframes closingPointTwo {
  0%, 67.3% { opacity: 0; }
  69.9%, 100% { opacity: 1; }
}

@keyframes closingPointThree {
  0%, 70.3% { opacity: 0; }
  73%, 100% { opacity: 1; }
}

@keyframes closingLogo {
  0%, 59.3% { opacity: 0; transform: translateY(12px); }
  62.8% { opacity: 0.58; transform: translateY(0); }
  80.4% { opacity: 0.58; transform: translateY(0); }
  84.4%, 100% { opacity: 0.42; transform: translateY(0); }
}

@keyframes aiClosingStage {
  0%, 79.5% { opacity: 0; visibility: hidden; }
  80.4% { opacity: 0; visibility: visible; }
  84.4%, 100% { opacity: 1; visibility: visible; }
}

@keyframes aiPrimary {
  0%, 80% { opacity: 0; }
  84.8%, 100% { opacity: 1; }
}

@keyframes aiUnderstanding {
  0%, 84.8% { opacity: 0; }
  89.2%, 100% { opacity: 1; }
}

@keyframes finalActions {
  0%, 89.5% { opacity: 0; transform: translateY(18px); }
  92.1%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes aiProofNote {
  0%, 91.1% { opacity: 0; }
  93.1%, 100% { opacity: 0.66; }
}

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

@keyframes audioPulse {
  from { transform: scaleY(0.42); opacity: 0.45; }
  to { transform: scaleY(1); opacity: 1; }
}

@keyframes lineOutdoor {
  0%, 17% { opacity: 1; transform: scale(1.02); filter: saturate(0.92) contrast(1.02); }
  24% { opacity: 0.38; transform: scale(1.045); }
  31%, 100% { opacity: 0; transform: scale(1.06); }
}

@keyframes lineFragmentRed {
  0%, 17% { opacity: 0; clip-path: inset(0 100% 0 0); }
  18% { opacity: 1; clip-path: inset(0); }
  21% { opacity: 1; clip-path: inset(0); filter: saturate(1.18) contrast(1.03); }
  23%, 100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}

@keyframes lineFragmentParty {
  0%, 20% { opacity: 0; clip-path: polygon(0 0, 0 0, 13% 100%, 13% 100%); }
  22% { opacity: 1; clip-path: polygon(0 0, 82% 0, 100% 100%, 13% 100%); }
  25% { opacity: 1; clip-path: polygon(0 0, 82% 0, 100% 100%, 13% 100%); }
  27%, 100% { opacity: 0; clip-path: polygon(87% 0, 87% 0, 100% 100%, 100% 100%); }
}

@keyframes lineFragmentLaugh {
  0%, 23% { opacity: 0; clip-path: inset(100% 0 0 0); transform: scale(1.08); }
  25% { opacity: 1; clip-path: inset(0); transform: scale(1.04); }
  28% { opacity: 1; clip-path: inset(0); }
  30%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: scale(1.01); }
}

@keyframes lineCafe {
  0%, 27% { opacity: 0; transform: scale(1.02); }
  30% { opacity: 1; transform: scale(1.02); }
  43% { opacity: 1; transform: scale(1.075); }
  52% { opacity: 0; transform: scale(1.1); }
  100% { opacity: 0; }
}

@keyframes lineClose {
  0%, 48% { opacity: 0; transform: scale(1.055); filter: saturate(1.06); }
  52% { opacity: 1; transform: scale(1.035); }
  65% { opacity: 1; transform: scale(1.01); }
  71%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes lineFlag {
  0%, 66% { opacity: 0; transform: scale(1.04); }
  72% { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes lineProblem {
  0% { opacity: 0; transform: translateX(-50%) translateY(-22px) scale(1.04); clip-path: inset(0 0 100% 0); }
  7% { opacity: 1; transform: translateX(-50%); clip-path: inset(0); }
  43% { opacity: 1; transform: translateX(-50%); clip-path: inset(0); }
  51% { opacity: 0; transform: translateX(-50%) scale(0.97); clip-path: inset(42% 0); }
  100% { opacity: 0; }
}

@keyframes lineAnswer {
  0%, 47% { opacity: 0; transform: translateX(-50%) scale(1.04); clip-path: inset(48% 0); }
  54% { opacity: 1; transform: translateX(-50%); clip-path: inset(0); }
  66% { opacity: 1; transform: translateX(-50%); }
  72%, 100% { opacity: 0; transform: translateX(-50%) scale(0.98); }
}

@keyframes lineStrike {
  0%, 42% { stroke-dashoffset: 1; opacity: 0; }
  43% { stroke-dashoffset: 1; opacity: 1; }
  54% { stroke-dashoffset: 0; opacity: 1; }
  64% { stroke-dashoffset: 0; opacity: 1; }
  70%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes lineGeometry {
  0%, 61% { opacity: 0; }
  64% { opacity: 1; }
  72% { opacity: 0.82; }
  76%, 100% { opacity: 0; }
}

@keyframes lineBand {
  0%, 62% { transform: rotate(-10deg) scaleX(0); }
  71% { transform: rotate(-10deg) scaleX(1); }
  76%, 100% { transform: rotate(-10deg) scaleX(1.08); }
}

@keyframes lineExposureOne {
  0%, 17.5% { opacity: 0; }
  18% { opacity: 0.88; }
  18.8%, 21.2% { opacity: 0; }
  22% { opacity: 0.76; }
  22.8%, 100% { opacity: 0; }
}

@keyframes lineExposureTwo {
  0%, 24% { opacity: 0; }
  24.7% { opacity: 0.82; }
  25.4%, 49% { opacity: 0; }
  50% { opacity: 0.62; }
  50.7%, 100% { opacity: 0; }
}

@keyframes lineFinal {
  0%, 82% { opacity: 0; transform: translateY(42px); }
  89%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes lineProgress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes flagOpening {
  0% { opacity: 1; transform: scale(1.035); filter: saturate(0.78) contrast(1.08); }
  13% { opacity: 1; transform: scale(1.01); }
  22%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes livingPanel {
  0%, 10% { opacity: 0; transform: translateY(9%) scale(1.1); filter: saturate(0.72); }
  18% { opacity: 1; transform: translateY(0) scale(1.055); filter: saturate(0.94); }
  42% { opacity: 1; transform: translateY(0) scale(1.015); filter: saturate(1.08); }
  56% { opacity: 1; transform: translateY(-2%) scale(1); filter: saturate(1.12); }
  66%, 100% { opacity: 0; transform: translateY(-8%) scale(0.98); }
}

@keyframes flagResolve {
  0%, 61% { opacity: 0; transform: scale(1.08); filter: saturate(1.18) contrast(1.04); }
  70% { opacity: 1; transform: scale(1.035); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes flagProblem {
  0%, 9% { opacity: 0; transform: translateX(-50%) scale(1.06); clip-path: inset(45% 0); }
  17% { opacity: 1; transform: translateX(-50%); clip-path: inset(0); }
  45% { opacity: 1; transform: translateX(-50%); clip-path: inset(0); }
  53% { opacity: 0; transform: translateX(-50%) scale(0.96); clip-path: inset(43% 0); }
  100% { opacity: 0; }
}

@keyframes flagAnswer {
  0%, 49% { opacity: 0; transform: translateX(-50%) translateY(22px); clip-path: inset(100% 0 0); }
  58% { opacity: 1; transform: translateX(-50%) translateY(0); clip-path: inset(0); }
  68% { opacity: 1; transform: translateX(-50%); }
  75%, 100% { opacity: 0; transform: translateX(-50%) scale(0.98); }
}

@keyframes flagStrike {
  0%, 40% { stroke-dashoffset: 1; opacity: 0; }
  42% { stroke-dashoffset: 1; opacity: 1; }
  52% { stroke-dashoffset: 0; opacity: 1; }
  67% { stroke-dashoffset: 0; opacity: 1; }
  73%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes flagGeometry {
  0%, 47% { opacity: 0; }
  52% { opacity: 1; }
  67% { opacity: 0.94; }
  74%, 100% { opacity: 0; }
}

@keyframes flagBand {
  0%, 46% { transform: rotate(-10deg) scaleX(0); }
  58% { transform: rotate(-10deg) scaleX(1); }
  70%, 100% { transform: rotate(-10deg) scaleX(1.12); }
}

@keyframes flagFlash {
  0%, 13.5% { opacity: 0; }
  14% { opacity: 0.82; }
  14.8%, 61% { opacity: 0; }
  62% { opacity: 0.72; }
  62.8%, 100% { opacity: 0; }
}

@keyframes flagFinal {
  0%, 82% { opacity: 0; transform: translateY(50px); }
  91%, 100% { opacity: 1; transform: translateY(0); }
}

@keyframes exposureOutdoor {
  0%, 10.8% { opacity: 1; transform: scale(1.04); filter: contrast(1.14) saturate(0.9); }
  11%, 100% { opacity: 0; }
}

@keyframes exposureRed {
  0%, 10.9% { opacity: 0; }
  11%, 21.8% { opacity: 1; transform: scale(1.025); filter: contrast(1.18) saturate(1.12); }
  22%, 100% { opacity: 0; }
}

@keyframes exposureParty {
  0%, 21.9% { opacity: 0; }
  22%, 32.8% { opacity: 1; transform: scale(1.055); filter: contrast(1.16) saturate(0.96); }
  33%, 100% { opacity: 0; }
}

@keyframes exposureLaugh {
  0%, 32.9% { opacity: 0; }
  33%, 43.8% { opacity: 1; transform: scale(1.025); filter: contrast(1.18) saturate(1.08); }
  44%, 100% { opacity: 0; }
}

@keyframes exposureCafe {
  0%, 43.9% { opacity: 0; }
  44%, 54.8% { opacity: 1; transform: scale(1.045); filter: contrast(1.16) saturate(0.98); }
  55%, 100% { opacity: 0; }
}

@keyframes exposureClose {
  0%, 54.9% { opacity: 0; }
  55%, 67.8% { opacity: 1; transform: scale(1.025); filter: contrast(1.16) saturate(1.06); }
  68%, 100% { opacity: 0; }
}

@keyframes exposureFlag {
  0%, 66% { opacity: 0; transform: scale(1.08); filter: contrast(1.08) saturate(1.22); }
  74% { opacity: 1; transform: scale(1.035); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes exposureProblem {
  0%, 5% { opacity: 0; transform: translateX(-50%) scale(1.16); }
  10% { opacity: 1; transform: translateX(-50%) scale(1); }
  48% { opacity: 1; transform: translateX(-50%) scale(1); }
  55%, 100% { opacity: 0; transform: translateX(-50%) scale(1.08); clip-path: inset(44% 0); }
}

@keyframes exposureAnswer {
  0%, 51% { opacity: 0; transform: translateX(-50%) scale(1.14); clip-path: inset(48% 0); }
  58% { opacity: 1; transform: translateX(-50%) scale(1); clip-path: inset(0); }
  69% { opacity: 1; transform: translateX(-50%) scale(1); }
  75%, 100% { opacity: 0; transform: translateX(-50%) scale(0.96); }
}

@keyframes exposureStrike {
  0%, 45% { stroke-dashoffset: 1; opacity: 0; }
  46% { stroke-dashoffset: 1; opacity: 1; }
  53% { stroke-dashoffset: 0; opacity: 1; }
  66% { stroke-dashoffset: 0; opacity: 1; }
  73%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes exposureFlashOne {
  0%, 10.5% { opacity: 0; }
  11% { opacity: 0.94; }
  11.8%, 21.5% { opacity: 0; }
  22% { opacity: 0.86; }
  22.8%, 32.5% { opacity: 0; }
  33% { opacity: 0.9; }
  33.8%, 43.5% { opacity: 0; }
  44% { opacity: 0.84; }
  44.8%, 54.5% { opacity: 0; }
  55% { opacity: 0.92; }
  55.8%, 66.5% { opacity: 0; }
  67% { opacity: 0.96; }
  67.8%, 100% { opacity: 0; }
}

@keyframes exposureFlashTwo {
  0%, 15% { opacity: 0; }
  15.4% { opacity: 0.32; }
  16%, 37% { opacity: 0; }
  37.4% { opacity: 0.28; }
  38%, 57% { opacity: 0; }
  57.5% { opacity: 0.34; }
  58.1%, 100% { opacity: 0; }
}

@keyframes exposureGeometry {
  0%, 63% { opacity: 0; }
  66% { opacity: 1; }
  73% { opacity: 0.9; }
  78%, 100% { opacity: 0; }
}

@keyframes exposureBand {
  0%, 62% { transform: rotate(-10deg) scaleX(0); }
  69% { transform: rotate(-10deg) scaleX(1); }
  77%, 100% { transform: rotate(-10deg) scaleX(1.1); }
}

@keyframes exposureFinal {
  0%, 81% { opacity: 0; transform: translateY(54px); }
  89%, 100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 720px) {
  .experience { min-height: 620px; }
  .image-outdoor { background-position: 45% center; }
  .fragment-red { background-position: 48% center; }
  .fragment-party { background-position: 31% center; }
  .fragment-laugh { background-position: 46% center; }
  .image-cafe { background-position: 57% center; }
  .image-close { background-position: 50% center; }
  .image-flag { background-position: 62% center; }

  .reel-frame.image-outdoor { object-position: 45% center; }
  .reel-frame.fragment-red { object-position: 48% center; }
  .reel-frame.fragment-party { object-position: 31% center; }
  .reel-frame.fragment-laugh { object-position: 46% center; }
  .reel-frame.image-cafe { object-position: 57% center; }
  .reel-frame.image-close { object-position: 50% center; }
  .flag-image { object-position: 72% center; }

  .hero-word {
    top: 15vh;
    font-size: clamp(5.4rem, 30vw, 9.2rem);
  }

  .strike { transform: scaleY(0.82) translateY(-2vh); }
  .strike-blue { stroke-width: 58; }
  .strike-white { stroke-width: 40; }
  .strike-red { stroke-width: 18; }

  .final-message {
    right: 1.25rem;
    bottom: 5rem;
    left: 1.25rem;
    width: auto;
    font-size: clamp(2.55rem, 10.7vw, 4.5rem);
  }

  .neet-context {
    --context-edge-gap: 1.25rem;
    top: 42vh;
    right: 0;
    left: 1.25rem;
    width: auto;
    padding-right: var(--context-edge-gap);
  }

  .neet-context strong {
    font-size: clamp(4.5rem, 20vw, 8rem);
  }

  .neet-context span {
    max-width: 19rem;
    margin-top: 0.8rem;
    font-size: clamp(1.08rem, 5.4vw, 1.6rem);
  }

  .neet-context span:last-child {
    margin-top: 0.55rem;
    font-size: clamp(1.45rem, 7vw, 2.15rem);
  }

  .story-fact {
    right: 1.25rem;
    bottom: 6.4rem;
    left: 1.25rem;
    width: auto;
    padding: 0.9rem 0.5rem 0.5rem 1.2rem;
  }

  .fact-scale strong {
    font-size: clamp(3.3rem, 16vw, 6.4rem);
  }

  .story-fact em {
    font-size: clamp(1.45rem, 7.1vw, 2.55rem);
  }

  .fact-work {
    flex-direction: column;
    gap: 0.45rem;
  }

  .fact-work strong {
    font-size: clamp(6.8rem, 32vw, 12rem);
  }

  .fact-work span {
    max-width: none;
    font-size: clamp(3.2rem, 14vw, 5.6rem);
  }

  .fact-chance strong {
    font-size: clamp(3.6rem, 17vw, 6.7rem);
  }

  .fact-chance span {
    font-size: clamp(2.7rem, 12vw, 4.8rem);
  }

  .closing-flag {
    object-position: 72% center;
  }

  .closing-tint {
    background: linear-gradient(
      115deg,
      rgba(0, 74, 73, 0.93) 0%,
      rgba(0, 132, 124, 0.9) 52%,
      rgba(0, 91, 91, 0.92) 100%
    );
  }

  .closing-logo {
    right: 1.1rem;
    bottom: 1.05rem;
    width: 4.4rem;
  }

  .closing-copy {
    top: clamp(14rem, 31vh, 17rem);
    right: 1.25rem;
    left: 1.25rem;
    width: auto;
  }

  .closing-question {
    --question-open-top: 34vh;
    --question-open-left: 1.25rem;
    --question-open-width: calc(100vw - 2.5rem);
    --question-open-size: clamp(2.7rem, 12vw, 4.4rem);
    --question-final-top: 6.3rem;
    --question-final-width: calc(100vw - 2.5rem);
    --question-final-size: clamp(1.4rem, 6.1vw, 2rem);
  }

  .closing-points {
    gap: 0.65rem;
  }

  .closing-point-1 {
    max-width: 18ch;
    font-size: clamp(2.05rem, 9.3vw, 3.2rem);
  }

  .closing-point-2 {
    max-width: 18ch;
    font-size: clamp(1.65rem, 7.2vw, 2.45rem);
  }

  .closing-point-3 {
    max-width: 30ch;
    font-size: clamp(1rem, 4.7vw, 1.45rem);
  }

  .ai-copy {
    top: 7rem;
    right: 1.25rem;
    left: 1.25rem;
    width: auto;
  }

  .ai-primary {
    max-width: 18ch;
    font-size: clamp(1.85rem, 8.5vw, 3rem);
  }

  .ai-understanding {
    max-width: 24ch;
    margin-top: 1.5rem;
    font-size: clamp(1.25rem, 5.6vw, 1.9rem);
  }

  .final-actions {
    right: 1.25rem;
    bottom: 6.2rem;
    left: auto;
    width: 9.5rem;
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }

  .final-action {
    min-height: 2.5rem;
    padding: 0.45rem 0.8rem;
    font-size: 0.76rem;
  }

  .final-action-report {
    grid-column: 1 / -1;
    align-items: center;
    padding-inline: 1rem;
    text-align: center;
  }

  .ai-proof-note {
    right: 6.5rem;
    bottom: 1rem;
    left: 1.25rem;
    max-width: none;
    padding: 0;
    font-size: 0.58rem;
  }

  .audio-modal {
    padding: 0.8rem;
  }

  .audio-player-card {
    padding: 3.6rem 1.35rem 1.6rem;
    border-radius: 1.3rem;
  }

  .audio-player-card h2 {
    max-width: 11ch;
    font-size: clamp(2.25rem, 12vw, 3.6rem);
  }

  .audio-signal {
    height: 3.25rem;
    margin-block: 1.75rem 1.35rem;
    gap: 0.17rem;
  }

  .audio-controls {
    gap: 0.9rem;
  }

  .audio-play {
    width: 3.65rem;
    height: 3.65rem;
  }

  .study-label { mix-blend-mode: normal; }

  .study-switcher {
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    justify-content: flex-start;
  }

  .study-switcher button {
    gap: 0.3rem;
    min-height: 2.15rem;
    padding: 0.48rem 0.55rem;
    font-size: 0.49rem;
  }

  .living-panel {
    width: 48%;
  }

  .living-panel-one { left: -16%; }
  .living-panel-two { left: 3%; }
  .living-panel-three { left: 22%; }
  .living-panel-four { left: 41%; }
  .living-panel-five { left: 60%; }
  .living-panel-six { left: 79%; }

  .band {
    left: -45%;
    width: 190%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .image-layer,
  .fragment,
  .reel-frame,
  .flag-image,
  .living-panel,
  .hero-word,
  .strike-path,
  .exposure,
  .flag-geometry,
  .band,
  .stripe-curtain,
  .neet-context,
  .final-message-stage,
  .closing-page,
  .closing-tint,
  .closing-logo,
  .closing-copy,
  .closing-question,
  .closing-point,
  .ai-closing-stage,
  .ai-primary,
  .ai-understanding,
  .final-actions,
  .ai-proof-note,
  .audio-signal span,
  .final-message,
  .progress-bar {
    animation: none !important;
  }

  .image-flag {
    opacity: 1;
    transform: none;
  }

  .final-message {
    opacity: 0;
    transform: none;
  }

  .final-message-stage {
    opacity: 0;
  }

  .closing-page {
    opacity: 1;
    visibility: visible;
  }

  .closing-tint {
    opacity: 1;
  }

  .closing-logo {
    opacity: 0.42;
    transform: none;
  }

  .closing-copy {
    opacity: 0.01;
  }

  .closing-question {
    opacity: 0.01;
  }

  .closing-point {
    opacity: 1;
  }

  .ai-closing-stage {
    opacity: 1;
    visibility: visible;
  }

  .ai-primary,
  .ai-understanding {
    opacity: 1;
  }

  .final-actions {
    opacity: 1;
    transform: none;
  }

  .ai-proof-note {
    opacity: 0.66;
  }

  .progress-bar { transform: scaleX(1); }
}