.sfi-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  color: #151515;
  background-color: var(--sfi-background, #fff);
  background-image: var(--sfi-background-image, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--sfi-background-fit, cover);
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 420ms ease,
    visibility 0s linear 420ms;
}

.sfi-intro-pending .sfi-intro,
.sfi-intro.is-active {
  display: grid;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

html.sfi-intro-open,
html.sfi-intro-open body {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.sfi-intro.is-closing {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.sfi-skip {
  position: absolute;
  z-index: 4;
  top: max(20px, env(safe-area-inset-top));
  right: max(20px, env(safe-area-inset-right));
  appearance: none;
  border: 1px solid rgb(20 20 20 / 18%);
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--sfi-skip-color, #151515);
  background: var(--sfi-skip-bg, #fff);
  background: color-mix(in srgb, var(--sfi-skip-bg, #fff) 82%, transparent);
  box-shadow: 0 8px 28px rgb(0 0 0 / 8%);
  font: 600 var(--sfi-skip-size, 14px)/1.2 system-ui, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.sfi-skip--top-left { right: auto; left: max(20px, env(safe-area-inset-left)); }
.sfi-skip--bottom-left { top: auto; right: auto; bottom: max(20px, env(safe-area-inset-bottom)); left: max(20px, env(safe-area-inset-left)); }
.sfi-skip--bottom-right { top: auto; bottom: max(20px, env(safe-area-inset-bottom)); }

.sfi-preview-badge {
  position: absolute;
  z-index: 4;
  top: max(20px, env(safe-area-inset-top));
  left: max(20px, env(safe-area-inset-left));
  padding: 8px 12px;
  border-radius: 999px;
  color: #081e2d;
  background: #fdc41b;
  box-shadow: 0 8px 28px rgb(0 0 0 / 10%);
  font: 800 11px/1.2 system-ui, sans-serif;
  letter-spacing: 0.08em;
}

.sfi-skip:hover,
.sfi-skip:focus-visible {
  border-color: rgb(20 20 20 / 45%);
}

.sfi-sticker-layer,
.sfi-reveal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding:
    max(72px, env(safe-area-inset-top))
    max(24px, env(safe-area-inset-right))
    max(44px, env(safe-area-inset-bottom))
    max(24px, env(safe-area-inset-left));
}

.sfi-sticker-layer {
  z-index: 2;
  grid-template-rows: 1fr auto 1fr;
  transition:
    opacity 360ms ease,
    transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sfi-sticker-composition {
  grid-row: 2;
  position: relative;
  width: min(var(--sfi-sticker-width, 620px), 88vw);
  height: min(var(--sfi-sticker-height, 440px), 58vh);
  min-height: 260px;
  --sfi-hint-gap: clamp(6px, 1.2vw, 12px);
  --sfi-visual-left: 7%;
  --sfi-visual-top: 11%;
  --sfi-visual-right: 93%;
  --sfi-visual-bottom: 89%;
  --sfi-visual-width: 86%;
  --sfi-visual-height: 78%;
  --sfi-visual-center-y: 50%;
  --sfi-hint-max-width: 360px;
}

.sfi-sticker-target {
  width: 100%;
  height: 100%;
  touch-action: none;
}

.sfi-sticker-target canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  outline: none;
}

.sfi-hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: calc(var(--sfi-visual-bottom) + var(--sfi-hint-gap));
  bottom: auto;
  width: max-content;
  max-width: min(var(--sfi-hint-max-width), 78vw);
  margin: 0;
  box-sizing: border-box;
  padding: 10px 15px;
  color: var(--sfi-hint-color, #333);
  font: var(--sfi-hint-weight, 500) clamp(11px, 1.2vw, var(--sfi-hint-size, 14px))/1.35 system-ui, sans-serif;
  text-align: var(--sfi-hint-align, center);
  overflow-wrap: anywhere;
  transform: translate(calc(-50% + var(--sfi-hint-x, 0)), var(--sfi-hint-y, 0));
}

.sfi-hint--plain { padding: 5px 9px; }

.sfi-hint--balloon,
.sfi-hint--thought,
.sfi-hint--shout {
  border: var(--sfi-hint-border-width, 3px) solid var(--sfi-hint-border-color, #111);
  color: var(--sfi-hint-color, #111);
  background: var(--sfi-hint-background, #fff);
  box-shadow: 5px 6px 0 rgb(0 0 0 / 16%);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  font-weight: 800;
}

.sfi-hint--balloon { border-radius: 48% 52% 45% 55% / 54% 45% 55% 46%; }
.sfi-hint--balloon::after {
  content: "";
  position: absolute;
  top: -17px;
  left: 45%;
  width: 22px;
  height: 22px;
  border-top: var(--sfi-hint-border-width, 3px) solid var(--sfi-hint-border-color, #111);
  border-left: var(--sfi-hint-border-width, 3px) solid var(--sfi-hint-border-color, #111);
  background: var(--sfi-hint-background, #fff);
  transform: rotate(45deg);
}

.sfi-hint--thought { border-radius: 999px; }
.sfi-hint--thought::before,
.sfi-hint--thought::after {
  content: "";
  position: absolute;
  border: var(--sfi-hint-border-width, 3px) solid var(--sfi-hint-border-color, #111);
  border-radius: 50%;
  background: var(--sfi-hint-background, #fff);
}
.sfi-hint--thought::before { top: -19px; left: 34%; width: 13px; height: 13px; }
.sfi-hint--thought::after { top: -31px; left: 29%; width: 7px; height: 7px; }

.sfi-hint--shout {
  border-radius: 4px;
  clip-path: polygon(0 19%, 8% 22%, 4% 6%, 18% 15%, 24% 0, 34% 14%, 49% 3%, 55% 17%, 72% 4%, 75% 19%, 94% 10%, 89% 28%, 100% 35%, 91% 48%, 100% 63%, 87% 67%, 91% 87%, 75% 78%, 67% 100%, 55% 83%, 42% 97%, 36% 81%, 18% 94%, 20% 75%, 2% 82%, 10% 61%, 0 51%, 10% 38%);
  padding: 22px 30px;
}

.sfi-hint--comic-caption {
  left: var(--sfi-visual-left);
  max-width: min(430px, 92vw);
  border: var(--sfi-hint-border-width, 3px) solid var(--sfi-hint-border-color, #111);
  border-radius: 2px;
  color: var(--sfi-hint-color, #111);
  background: var(--sfi-hint-background, #fff2a8);
  box-shadow: 5px 5px 0 var(--sfi-hint-border-color, #111);
  font-family: Georgia, serif;
  font-style: italic;
  transform: translate(var(--sfi-hint-x, 0), var(--sfi-hint-y, 0)) rotate(-1deg);
}

.sfi-hint-position--top,
.sfi-auto-hint-top .sfi-hint-position--auto {
  top: auto;
  bottom: calc(100% - var(--sfi-visual-top) + var(--sfi-hint-gap));
}
.sfi-hint--balloon.sfi-hint-position--top::after {
  top: auto;
  bottom: -17px;
  border: 0;
  border-right: var(--sfi-hint-border-width, 3px) solid var(--sfi-hint-border-color, #111);
  border-bottom: var(--sfi-hint-border-width, 3px) solid var(--sfi-hint-border-color, #111);
}
.sfi-auto-hint-top .sfi-hint--balloon.sfi-hint-position--auto::after {
  top: auto;
  bottom: -17px;
  border: 0;
  border-right: var(--sfi-hint-border-width, 3px) solid var(--sfi-hint-border-color, #111);
  border-bottom: var(--sfi-hint-border-width, 3px) solid var(--sfi-hint-border-color, #111);
}
.sfi-hint--thought.sfi-hint-position--top::before,
.sfi-auto-hint-top .sfi-hint--thought.sfi-hint-position--auto::before { top: auto; bottom: -19px; }
.sfi-hint--thought.sfi-hint-position--top::after,
.sfi-auto-hint-top .sfi-hint--thought.sfi-hint-position--auto::after { top: auto; bottom: -31px; }
.sfi-hint-position--right { top: var(--sfi-visual-center-y); right: auto; bottom: auto; left: calc(var(--sfi-visual-right) + var(--sfi-hint-gap)); transform: translate(var(--sfi-hint-x, 0), calc(-50% + var(--sfi-hint-y, 0))); }
.sfi-hint--balloon.sfi-hint-position--right::after {
  top: 42%;
  left: -13px;
}
.sfi-hint-position--left { top: var(--sfi-visual-center-y); right: calc(100% - var(--sfi-visual-left) + var(--sfi-hint-gap)); bottom: auto; left: auto; transform: translate(var(--sfi-hint-x, 0), calc(-50% + var(--sfi-hint-y, 0))); }
.sfi-hint--balloon.sfi-hint-position--left::after {
  top: 42%;
  right: -13px;
  left: auto;
  border: 0;
  border-top: var(--sfi-hint-border-width, 3px) solid var(--sfi-hint-border-color, #111);
  border-right: var(--sfi-hint-border-width, 3px) solid var(--sfi-hint-border-color, #111);
}
.sfi-hint-position--bottom { top: calc(var(--sfi-visual-bottom) + var(--sfi-hint-gap)); bottom: auto; }

.sfi-accessible-reveal {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.sfi-accessible-reveal:focus {
  z-index: 5;
  bottom: 24px;
  left: 50%;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: 11px 16px;
  border: 2px solid #111;
  border-radius: 8px;
  background: #fff;
  transform: translateX(-50%);
}

.sfi-reveal {
  z-index: 1;
  align-content: center;
  gap: 24px;
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.97);
  transition:
    opacity 450ms ease 150ms,
    transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1) 100ms,
    visibility 0s linear 650ms;
}

.sfi-reveal--top { align-content: start; padding-top: max(100px, 12vh); }
.sfi-reveal--bottom { align-content: end; padding-bottom: max(80px, 10vh); }

.sfi-intro.is-revealed .sfi-sticker-layer {
  pointer-events: none;
  opacity: 0;
  transform: scale(1.035);
}

.sfi-intro.is-revealed .sfi-reveal {
  z-index: 3;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition-delay: 100ms, 100ms, 0s;
}

.sfi-reveal-copy {
  width: min(var(--sfi-reveal-max-width, 760px), 90vw);
  color: var(--sfi-body-color, #151515);
  font: var(--sfi-body-weight, 400) var(--sfi-body-size, 20px)/var(--sfi-body-line-height, 1.55) var(--sfi-body-font, system-ui, sans-serif);
  text-align: var(--sfi-reveal-align, center);
  translate: var(--sfi-reveal-x, 0) var(--sfi-reveal-y, 0);
}

.sfi-reveal-primary {
  position: relative;
  display: grid;
  max-width: 100%;
  place-items: center;
}

.sfi-reveal-content-link {
  position: absolute;
  z-index: 2;
  inset: 0;
  border-radius: 14px;
  cursor: pointer;
}

.sfi-reveal-content-link:focus-visible {
  outline: 4px solid #fdc41b;
  outline-offset: 6px;
}

.sfi-reveal-video-link {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 20px;
  color: #fff;
  background: #111;
  font: 700 14px/1.2 system-ui, sans-serif;
  text-decoration: none;
}

.sfi-reveal-copy > :first-child {
  margin-top: 0;
}

.sfi-reveal-copy > :last-child {
  margin-bottom: 0;
}

.sfi-reveal-copy h1,
.sfi-reveal-copy h2,
.sfi-reveal-copy h3 {
  color: var(--sfi-heading-color, #151515);
  font-family: var(--sfi-heading-font, system-ui, sans-serif);
  font-size: clamp(24px, 5vw, var(--sfi-heading-size, 48px));
  font-weight: var(--sfi-heading-weight, 800);
  line-height: 1.1;
  text-wrap: balance;
}

.sfi-reveal-copy[data-heading-effect="fade"] h1,
.sfi-reveal-copy[data-heading-effect="fade"] h2,
.sfi-reveal-copy[data-heading-effect="fade"] h3 { animation: sfi-fade-in 700ms backwards; }
.sfi-reveal-copy[data-heading-effect="rise"] h1,
.sfi-reveal-copy[data-heading-effect="rise"] h2,
.sfi-reveal-copy[data-heading-effect="rise"] h3 { animation: sfi-rise-in 700ms backwards; }
.sfi-reveal-copy[data-heading-effect="scale"] h1,
.sfi-reveal-copy[data-heading-effect="scale"] h2,
.sfi-reveal-copy[data-heading-effect="scale"] h3 { animation: sfi-scale-in 650ms backwards; }
.sfi-reveal-copy[data-heading-effect="blur"] h1,
.sfi-reveal-copy[data-heading-effect="blur"] h2,
.sfi-reveal-copy[data-heading-effect="blur"] h3 { animation: sfi-blur-in 750ms backwards; }
.sfi-reveal-copy[data-heading-effect="glow"] h1,
.sfi-reveal-copy[data-heading-effect="glow"] h2,
.sfi-reveal-copy[data-heading-effect="glow"] h3 { animation: sfi-glow 1.6s ease-in-out backwards; }
.sfi-reveal-copy[data-heading-effect="pulse"] h1,
.sfi-reveal-copy[data-heading-effect="pulse"] h2,
.sfi-reveal-copy[data-heading-effect="pulse"] h3 { animation: sfi-pulse 1.4s ease-in-out backwards; }

.sfi-reveal-image,
.sfi-reveal-video {
  display: block;
  width: auto;
  max-width: min(1000px, 90vw);
  height: auto;
  max-height: min(68vh, 760px);
  border-radius: 14px;
  object-fit: contain;
  box-shadow: 0 24px 80px rgb(0 0 0 / 14%);
}

.sfi-reveal-embed {
  position: relative;
  width: min(1000px, 90vw);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 24px 80px rgb(0 0 0 / 14%);
}

.sfi-reveal-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.sfi-enter {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  border-radius: var(--sfi-button-radius, 999px);
  padding: 12px 24px;
  color: var(--sfi-button-color, #fff);
  background: var(--sfi-button-bg, #111);
  box-shadow: 0 10px 28px rgb(0 0 0 / 16%);
  font: var(--sfi-button-weight, 700) var(--sfi-button-size, 15px)/1.2 system-ui, sans-serif;
  text-decoration: none;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease;
  translate: var(--sfi-button-x, 0) var(--sfi-button-y, 0);
}

.sfi-effect-fade { animation: sfi-fade-in 700ms backwards; }
.sfi-effect-rise { animation: sfi-rise-in 700ms backwards; }
.sfi-effect-scale { animation: sfi-scale-in 650ms backwards; }
.sfi-effect-blur { animation: sfi-blur-in 750ms backwards; }
.sfi-effect-glow { animation: sfi-glow 1.6s ease-in-out backwards; }
.sfi-effect-pulse { animation: sfi-pulse 1.4s ease-in-out backwards; }
.sfi-effect-cartoon-pop { animation: sfi-cartoon-pop 720ms cubic-bezier(.18,1.5,.45,1) backwards; }
.sfi-effect-wobble { animation: sfi-wobble 900ms ease-in-out backwards; }
.sfi-effect-ink { animation: sfi-ink 850ms ease-out backwards; }
.sfi-effect-halftone { background-image: radial-gradient(circle, rgb(0 0 0 / 14%) 1px, transparent 1.5px); background-size: 6px 6px; }

@keyframes sfi-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sfi-rise-in { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes sfi-scale-in { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
@keyframes sfi-blur-in { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: blur(0); } }
@keyframes sfi-glow { 0% { opacity: 0; text-shadow: none; } 60% { opacity: 1; text-shadow: 0 0 28px currentColor; } 100% { text-shadow: none; } }
@keyframes sfi-pulse { 0% { opacity: 0; scale: .9; } 55% { opacity: 1; scale: 1.04; } 100% { scale: 1; } }
@keyframes sfi-cartoon-pop { 0% { opacity: 0; scale: .35; rotate: -8deg; } 65% { opacity: 1; scale: 1.08; rotate: 2deg; } 100% { scale: 1; rotate: 0; } }
@keyframes sfi-wobble { 0% { opacity: 0; rotate: -7deg; } 35% { opacity: 1; rotate: 5deg; } 65% { rotate: -2deg; } 100% { rotate: 0; } }
@keyframes sfi-ink { from { opacity: 0; filter: contrast(3) blur(7px); clip-path: inset(45% 45%); } to { opacity: 1; filter: none; clip-path: inset(0); } }
.sfi-enter:hover,
.sfi-enter:focus-visible {
  color: var(--sfi-button-color, #fff);
  box-shadow: 0 14px 34px rgb(0 0 0 / 22%);
  transform: translateY(-2px);
}

@media (max-width: 600px) {
  .sfi-intro { background-image: var(--sfi-background-image-mobile, var(--sfi-background-image, none)); }

  .sfi-sticker-composition {
    width: 94vw;
    height: min(390px, 55vh);
    min-height: 230px;
  }

  .sfi-hint-position--auto,
  .sfi-hint-position--right,
  .sfi-hint-position--left {
    top: calc(var(--sfi-visual-bottom) + var(--sfi-hint-gap));
    right: auto;
    bottom: auto;
    left: 50%;
    transform: translate(calc(-50% + var(--sfi-hint-x, 0)), var(--sfi-hint-y, 0));
  }

  .sfi-hint--balloon.sfi-hint-position--right::after,
  .sfi-hint--balloon.sfi-hint-position--left::after {
    top: -17px;
    right: auto;
    left: 45%;
    border: 0;
    border-top: var(--sfi-hint-border-width, 3px) solid var(--sfi-hint-border-color, #111);
    border-left: var(--sfi-hint-border-width, 3px) solid var(--sfi-hint-border-color, #111);
  }

  .sfi-auto-hint-top .sfi-hint-position--auto {
    top: auto;
    bottom: calc(100% - var(--sfi-visual-top) + var(--sfi-hint-gap));
  }

  .sfi-skip {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
  }

  .sfi-skip--top-left { right: auto; left: max(12px, env(safe-area-inset-left)); }
  .sfi-skip--bottom-left { top: auto; right: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); }
  .sfi-skip--bottom-right { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); }

  .sfi-reveal-image,
  .sfi-reveal-video {
    max-width: 92vw;
    max-height: 62vh;
  }
}

@media (min-width: 601px) and (max-width: 1024px) {
  .sfi-intro { background-image: var(--sfi-background-image-tablet, var(--sfi-background-image, none)); }
  .sfi-sticker-composition { width: min(var(--sfi-sticker-width, 620px), 82vw); height: min(var(--sfi-sticker-height, 440px), 54vh); }
}

@media (prefers-reduced-motion: reduce) {
  .sfi-effect-fade,
  .sfi-effect-rise,
  .sfi-effect-scale,
  .sfi-effect-blur,
  .sfi-effect-glow,
  .sfi-effect-pulse,
  .sfi-effect-cartoon-pop,
  .sfi-effect-wobble,
  .sfi-effect-ink,
  .sfi-reveal-copy[data-heading-effect] h1,
  .sfi-reveal-copy[data-heading-effect] h2,
  .sfi-reveal-copy[data-heading-effect] h3 { animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sfi-intro,
  .sfi-sticker-layer,
  .sfi-reveal,
  .sfi-enter {
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
  }
}