soulmate-mobile-studio {
  --studio-width: 360px;
  --studio-radius: 22px;
  --studio-gutter: 20px;
  --studio-transition: 180ms;
  --studio-opacity: 1;
  display: block;
  position: relative;
  padding: 42px max(var(--studio-gutter), env(safe-area-inset-right, 0px)) 100px max(var(--studio-gutter), env(safe-area-inset-left, 0px));
  color: #faf6fa;
  scroll-margin-top: calc(100px + env(safe-area-inset-top, 0px));
}
soulmate-mobile-studio *, soulmate-mobile-studio *::before, soulmate-mobile-studio *::after { box-sizing: border-box; }
.sm-studio-section { opacity: var(--studio-opacity); }
.sm-studio-heading { max-width: 400px; margin: 0 auto 28px; text-align: center; }
.sm-studio-title { margin: 0; font: 800 clamp(1.55rem, 7vw, 2rem)/1.08 var(--font-primary); letter-spacing: -.045em; }
.sm-studio-intro { max-width: 34ch; margin: 14px auto 0; color: #bfb4c7; font: 400 .9375rem/1.55 var(--font-primary); text-wrap: balance; }
.sm-studio-story { position: relative; width: min(100%, var(--studio-width)); aspect-ratio: 9 / 16; margin-inline: auto; overflow: hidden; isolation: isolate; border-radius: var(--studio-radius); background: #211c29; box-shadow: 0 18px 42px #0004, 0 0 0 1px #d6cfe71c; touch-action: pan-y pinch-zoom; -webkit-tap-highlight-color: transparent; }
.sm-studio-story:focus-visible { outline: 2px solid #a8eeee; outline-offset: 4px; }
.sm-studio-media, .sm-studio-panel, .sm-studio-visual { position: absolute; inset: 0; width: 100%; height: 100%; }
.sm-studio-panel { opacity: 0; z-index: 0; transition: opacity var(--studio-transition) ease; }
.sm-studio-panel[data-active] { opacity: 1; z-index: 2; }
.sm-studio-visual { display: block; object-fit: cover; pointer-events: none; }
.sm-studio-story::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(#05040999, transparent 25%, transparent 65%, #09070bd9); border: 1px solid #e5f6ff24; border-radius: inherit; }
.sm-studio-top { position: absolute; z-index: 4; inset: 13px 13px auto; pointer-events: none; }
.sm-studio-progress { display: flex; gap: 4px; width: 100%; }
.sm-studio-bar { display: block; min-width: 0; flex: 1; height: 2px; border-radius: 2px; overflow: hidden; background: #fff5; }
.sm-studio-bar-fill { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: #fffafc; }
.sm-studio-brand { margin: 15px 2px 0; font: 600 .8125rem/1.3 var(--font-primary); letter-spacing: .01em; text-shadow: 0 1px 10px #0006; }
.sm-studio-caption { position: absolute; inset: auto 24px 28px; z-index: 4; margin: 0; font: 750 clamp(1.55rem, 7vw, 1.95rem)/1.05 var(--font-primary); letter-spacing: -.035em; text-wrap: balance; pointer-events: none; text-shadow: 0 2px 12px #0005; }
.sm-studio-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 1023px) {
  soulmate-mobile-studio {
    --studio-feature-width: 80vw;
    --studio-side-offset: calc(var(--studio-feature-width) * .98);
  }
  .sm-studio-story {
    width: 100vw;
    max-width: none;
    height: calc(var(--studio-feature-width) * 16 / 9);
    aspect-ratio: auto;
    margin-left: calc(50% - 50vw);
    overflow: clip;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .sm-studio-story::after { content: none; }
  .sm-studio-panel {
    inset: 0 auto auto 50%;
    width: var(--studio-feature-width);
    height: 100%;
    overflow: hidden;
    border-radius: var(--studio-radius);
    box-shadow: 0 18px 42px #0004, 0 0 0 1px #d6cfe71c;
    transform: translate3d(-50%, 0, 0) scale(.9);
    opacity: 0;
    pointer-events: none;
    transition: transform 420ms cubic-bezier(.22, 1, .36, 1), opacity 320ms ease;
  }
  .sm-studio-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(#05040999, transparent 25%, transparent 65%, #09070bd9);
    border: 1px solid #e5f6ff24;
    border-radius: inherit;
    pointer-events: none;
  }
  .sm-studio-panel[data-previous], .sm-studio-panel[data-next] {
    z-index: 1;
    opacity: .5;
    filter: blur(1px);
    pointer-events: auto;
    cursor: pointer;
  }
  .sm-studio-panel[data-previous] { transform: translate3d(calc(-50% - var(--studio-side-offset)), 0, 0) scale(.9); }
  .sm-studio-panel[data-next] { transform: translate3d(calc(-50% + var(--studio-side-offset)), 0, 0) scale(.9); }
  .sm-studio-panel[data-active] {
    z-index: 2;
    transform: translate3d(-50%, 0, 0) scale(1);
    opacity: 1;
    filter: none;
    pointer-events: auto;
  }
  .sm-studio-top { inset: 13px auto auto calc(50% - var(--studio-feature-width) / 2 + 13px); width: calc(var(--studio-feature-width) - 26px); }
  .sm-studio-caption { inset: auto auto 28px calc(50% - var(--studio-feature-width) / 2 + 24px); width: calc(var(--studio-feature-width) - 48px); }
}
@media (min-width: 430px) and (max-width: 599px) {
  soulmate-mobile-studio { --studio-feature-width: 78vw; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  soulmate-mobile-studio { --studio-feature-width: min(54vw, 440px, calc((100svh - 110px) * .5625)); }
}
@media (min-width: 1024px) {
  soulmate-mobile-studio {
    --studio-feature-width: min(clamp(380px, 29vw, 440px), calc((100svh - 110px) * .5625));
    --studio-side-offset: min(calc(var(--studio-feature-width) * .91), calc((100vw - 48px - var(--studio-feature-width) * .8) / 2));
    padding-block: 38px 88px;
    overflow: clip;
    isolation: isolate;
  }
  .sm-studio-heading, .sm-studio-story { position: relative; }
  .sm-studio-heading { margin-bottom: 26px; }
  .sm-studio-story {
    width: 100%;
    max-width: 1300px;
    height: calc(var(--studio-feature-width) * 16 / 9);
    aspect-ratio: auto;
    overflow: visible;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .sm-studio-story::after { content: none; }
  .sm-studio-media { position: relative; inset: auto; }
  .sm-studio-panel {
    inset: 0 auto auto 50%;
    width: var(--studio-feature-width);
    height: 100%;
    overflow: hidden;
    border-radius: var(--studio-radius);
    box-shadow: 0 18px 42px #0004, 0 0 0 1px #d6cfe71c;
    transform: translate3d(-50%, 0, 0) scale(.8);
    opacity: 0;
    pointer-events: none;
    transition: transform 580ms cubic-bezier(.22, 1, .36, 1), opacity 480ms ease, filter 480ms ease;
  }
  .sm-studio-panel::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(#05040999, transparent 25%, transparent 65%, #09070bd9);
    border: 1px solid #e5f6ff24;
    border-radius: inherit;
    pointer-events: none;
  }
  .sm-studio-panel[data-previous] {
    z-index: 1;
    transform: translate3d(calc(-50% - var(--studio-side-offset)), 0, 0) scale(.8);
    opacity: .46;
    filter: blur(1.5px);
    pointer-events: auto;
    cursor: pointer;
  }
  .sm-studio-panel[data-next] {
    z-index: 1;
    transform: translate3d(calc(-50% + var(--studio-side-offset)), 0, 0) scale(.8);
    opacity: .46;
    filter: blur(1.5px);
    pointer-events: auto;
    cursor: pointer;
  }
  .sm-studio-panel[data-active] {
    z-index: 2;
    transform: translate3d(-50%, 0, 0) scale(1);
    opacity: 1;
    filter: none;
    pointer-events: auto;
  }
  .sm-studio-top { inset: 13px auto auto calc(50% - var(--studio-feature-width) / 2 + 13px); width: calc(var(--studio-feature-width) - 26px); }
  .sm-studio-caption { inset: auto auto 28px calc(50% - var(--studio-feature-width) / 2 + 24px); width: calc(var(--studio-feature-width) - 48px); }
  .sm-studio-story:focus-visible { outline: none; }
  .sm-studio-story:focus-visible .sm-studio-panel[data-active] { outline: 2px solid #a8eeee; outline-offset: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .sm-studio-section { opacity: 1; }
  .sm-studio-panel { transition: none; }
}