.ys-pose-story {
  --pose-ink: #183f31;
  --pose-muted: #5d7066;
  --pose-mint: #dfede3;
  position: relative;
  margin: 70px 0 100px;
  color: var(--pose-ink);
  font-family: Centra, sans-serif;
}
.ys-pose-sticky { padding: 48px 0 32px; }
.ys-pose-heading { max-width: 780px; margin: 0 auto 30px; text-align: center; }
.ys-pose-heading h2 { margin: 0 0 12px; font: 500 clamp(30px, 4vw, 48px)/1.1 Centra, sans-serif; letter-spacing: -1.5px; color: var(--pose-ink); }
.ys-pose-heading p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--pose-muted); }
.ys-pose-device {
  --hero-height: 395px;
  --photo-size: min(330px, calc((100vw - 182px) * .43));
  --photo-x: 40px;
  --photo-y: 28px;
  --name-x: calc(78px + var(--photo-size));
  --name-y: 94px;
  --name-size: 52px;
  --intro-opacity: 1;
  --body-shift: 0px;
  position: relative;
  padding: 10px;
  border-radius: 32px;
  background: linear-gradient(145deg, #64736b, #19251e 26%, #405044 75%, #879087);
  border: 1px solid #839286;
  box-shadow: 0 28px 60px -28px #234b3555, inset 0 0 0 2px #bbc4b25c;
}
.ys-pose-device::before { content: ''; position: absolute; top: 50%; left: 3px; width: 4px; height: 4px; border-radius: 50%; background: #111a14; }
.ys-pose-screen { position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: #fff; }
.ys-pose-appbar { flex: none; height: 43px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf0eb; font-size: 12px; }
.ys-pose-wordmark { font-weight: 700; letter-spacing: -.3px; }
.ys-pose-back { display: flex; align-items: center; gap: 7px; color: var(--pose-muted); }
.ys-pose-back svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ys-pose-hero { position: relative; flex: none; height: var(--hero-height); z-index: 2; background: #fff; border-bottom: 1px solid #e6ece6; }
.ys-pose-photo { position: absolute; left: var(--photo-x); top: var(--photo-y); width: var(--photo-size); height: var(--photo-size); margin: 0; border-radius: 10px; overflow: hidden; }
.ys-pose-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ys-pose-name { position: absolute; top: var(--name-y); left: var(--name-x); right: 22px; }
.ys-pose-name h3 { margin: 0; font: 500 var(--name-size)/1.06 Centra, sans-serif; letter-spacing: -1.8px; color: var(--pose-ink); }
.ys-pose-name > p { margin: 8px 0 0; color: var(--pose-muted); font-size: 14px; line-height: 1.4; }
.ys-pose-intro { margin-top: 24px; opacity: var(--intro-opacity); }
.ys-pose-intro p { margin: 0 0 20px; font-size: 16px; line-height: 1.65; max-width: 370px; color: #40584b; }
.ys-pose-facts { display: flex; flex-wrap: wrap; gap: 7px; }
.ys-pose-facts span { background: #edf3ee; border-radius: 20px; padding: 7px 11px; color: #3e5a49; font-size: 11px; line-height: 1.3; }
.ys-pose-viewport { position: relative; flex: 0 0 395px; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #b0c5b5 #f5f8f4; }
.ys-pose-content { position: relative; }
.is-static-story .ys-pose-device { --hero-height: 92px; --photo-size: 68px; --photo-x: 24px; --photo-y: 10px; --name-x: 110px; --name-y: 30px; --name-size: 30px; --intro-opacity: 0; }
.is-static-story .ys-pose-name > p, .is-static-story .ys-pose-intro { display: none; }
.ys-pose-chapter { padding: 32px 42px 40px; color: var(--pose-ink); }
.ys-pose-chapter h4 { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font: 500 28px/1.15 Centra, sans-serif; letter-spacing: -.8px; color: var(--pose-ink); }
.ys-pose-icon { flex: none; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; }
.ys-pose-chapter > p { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: var(--pose-muted); max-width: 600px; }
.ys-pose-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 34px; counter-reset: pose-step; }
.ys-pose-steps li { counter-increment: pose-step; display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
.ys-pose-steps li::before { content: counter(pose-step, decimal-leading-zero); color: #6c8976; font-size: 12px; padding-top: 5px; font-variant-numeric: tabular-nums; }
.ys-pose-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 13px; max-width: 740px; }
.ys-pose-list li { position: relative; padding-left: 24px; font-size: 16px; line-height: 1.5; }
.ys-pose-list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #7c9c86; position: absolute; left: 2px; top: 10px; }
.ys-pose-note { margin-top: 22px !important; padding: 12px 16px; border-radius: 10px; background: #edf4ed; color: #35523e !important; font-size: 14px !important; }
.ys-pose-chapters { flex: none; display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; padding: 6px 16px; background: #f7f9f5; }
.ys-pose-chapters button { appearance: none; min-height: 44px; white-space: nowrap; border: 1px solid transparent; padding: 9px 15px; border-radius: 30px; background: transparent; color: var(--pose-muted); font: 400 13px/1.3 Centra, sans-serif; cursor: pointer; transition: background .2s, color .2s; }
.ys-pose-chapters button[aria-current="step"] { background: #dae9de; color: #173e2c; }
.ys-pose-chapters button:hover { background: #e5ede5; color: #173e2c; }
.ys-pose-chapters button:focus-visible, .ys-pose-viewport:focus-visible { outline: 2px solid #397f5e; outline-offset: 3px; }
.ys-pose-screen .ys-pose-progress { display: block; flex: none; width: 100%; height: 2px; margin: 0; background: #e5ece3; overflow: hidden; }
.ys-pose-progress::before { content: ''; display: block; height: 100%; width: var(--pose-progress, 0%); background: #477457; border-radius: inherit; }
.ys-pose-story.is-scroll-story { height: 470svh; }
.is-scroll-story .ys-pose-sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.is-scroll-story .ys-pose-device { width: min(100%, 1060px); margin: 0 auto; }
.is-scroll-story .ys-pose-screen { height: min(590px, calc(100svh - 255px)); min-height: 420px; }
.is-scroll-story .ys-pose-viewport { flex: 1 1 auto; overflow: hidden; }
.is-scroll-story .ys-pose-content { transform: translate3d(0, var(--body-shift), 0); will-change: transform; }
.is-scroll-story .ys-pose-chapter { min-height: var(--chapter-height, 440px); }
.is-scroll-story .ys-pose-name > p { opacity: var(--intro-opacity); }
.is-scroll-story .ys-pose-hero { overflow: hidden; }
@media (max-width: 749px) {
  .ys-pose-story { margin: 30px 0 65px; }
  .ys-pose-sticky { padding: 22px 0 80px; }
  .ys-pose-heading { margin-bottom: 20px; text-align: left; }
  .ys-pose-heading h2 { font-size: 30px; letter-spacing: -1px; }
  .ys-pose-heading p { font-size: 15px; line-height: 1.5; }
  .ys-pose-device { --hero-height: 340px; --photo-size: 220px; --photo-x: calc(50% - 110px); --photo-y: 10px; --name-x: 22px; --name-y: 242px; --name-size: 32px; padding: 7px; border-radius: 28px; }
  .is-static-story .ys-pose-device { --hero-height: 75px; --photo-size: 55px; --photo-x: 14px; --name-x: 82px; --name-y: 25px; --name-size: 24px; }
  .ys-pose-screen { border-radius: 21px; }
  .ys-pose-appbar { height: 37px; padding: 0 19px; font-size: 10px; }
  .ys-pose-name h3 { letter-spacing: -1px; }
  .ys-pose-name > p { font-size: 12px; margin-top: 4px; }
  .ys-pose-intro { margin-top: 10px; }
  .ys-pose-intro p { display: none; }
  .ys-pose-facts span { font-size: 10px; padding: 5px 8px; }
  .ys-pose-chapter { padding: 23px 22px 30px; }
  .ys-pose-chapter h4 { font-size: 25px; gap: 11px; }
  .ys-pose-icon { width: 38px; height: 38px; }
  .ys-pose-chapter > p { font-size: 13px; line-height: 1.5; margin-bottom: 18px; }
  .ys-pose-steps { grid-template-columns: 1fr; gap: 13px; }
  .ys-pose-steps li, .ys-pose-list li { font-size: 14px; line-height: 1.5; }
  .ys-pose-steps li { gap: 10px; }
  .ys-pose-list { gap: 11px; }
  .ys-pose-note { font-size: 12px !important; padding: 10px 12px; margin-top: 17px !important; }
  .ys-pose-chapters { gap: 0; padding: 3px 6px; }
  .ys-pose-chapters button { flex: 1; padding: 8px 7px; font-size: 11px; }
  .is-scroll-story .ys-pose-screen { height: calc(100svh - 285px); min-height: 400px; max-height: 590px; }
  .ys-pose-story.is-scroll-story { height: 460svh; }
}
@media (max-width: 360px) {
  .ys-pose-heading h2 { font-size: 27px; }
  .ys-pose-heading p { font-size: 14px; }
  .ys-pose-chapter { padding: 20px 17px 25px; }
  .ys-pose-chapter h4 { font-size: 23px; }
  .ys-pose-chapters button { padding: 8px 4px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce), (max-height: 740px) {
  .ys-pose-story.is-scroll-story { height: auto; }
  .is-scroll-story .ys-pose-sticky { position: relative; height: auto; }
  .is-scroll-story .ys-pose-content { transform: none; will-change: auto; }
  .ys-pose-chapters button { transition: none; }
}