#app.how-scroll {
  --ink: #292331;
  --muted: #62596f;
  --page: #e6dff1;
  --phone-height: min(80svh, 760px, calc((100vw - 48px) * .26 * 2760 / 1350));
  --phone-width: calc(var(--phone-height) * 1350 / 2760);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", sans-serif;
  color: var(--ink);
  background: var(--page);
  font-synthesis: none;
}
#app.how-scroll * { box-sizing: border-box; }
#app.how-scroll .hs-intro { padding: 134px 24px 60px; text-align: center; }
#app.how-scroll .hs-intro h2 { font-size: 48px; font-weight: 650; line-height: 1.2; letter-spacing: -.04em; margin: 0 0 20px; }
#app.how-scroll .hs-intro p { font-size: 17px; line-height: 1.85; color: var(--muted); margin: 0; }
#app.how-scroll .hs-story { position: relative; margin: 0 24px; }
#app.how-scroll .hs-panel { position: relative; border-radius: 32px; overflow: hidden; min-height: 100svh; }
#app.how-scroll .hs-panel + .hs-panel { margin-top: 16px; }
#app.how-scroll .hs-panel-connect { background: radial-gradient(ellipse at 83% 55%, #e4daf4 0%, transparent 62%), #faf8fd; }
#app.how-scroll .hs-panel-curve { background: radial-gradient(ellipse at 78% 40%, #d7c3f0 0%, transparent 65%), linear-gradient(135deg, #f1ebfa, #e8dcf7); }
#app.how-scroll .hs-copy { position: relative; z-index: 2; padding: 64px 7vw 24px; }
#app.how-scroll .hs-copy h3 { display: flex; align-items: center; gap: 16px; margin: 0 0 32px; font-size: clamp(32px, 3.5vw, 48px); line-height: 1.3; font-weight: 640; letter-spacing: -.045em; }
#app.how-scroll .hs-step-number { display: inline-grid; place-items: center; flex: 0 0 32px; height: 32px; border: 1px solid #b5a1d2; font-size: 16px; font-weight: 500; letter-spacing: 0; border-radius: 50%; color: #7b5e9d; }
#app.how-scroll .hs-copy p, #app.how-scroll .hs-copy li { font-size: 17px; line-height: 1.85; color: var(--muted); }
#app.how-scroll .hs-copy p { margin: 0 0 24px; }
#app.how-scroll .hs-copy ul { list-style: none; padding: 0; margin: 0 0 30px; }
#app.how-scroll .hs-copy li { position: relative; padding-left: 20px; margin: 9px 0; }
#app.how-scroll .hs-copy li::before { content: ""; position: absolute; left: 0; top: .82em; width: 5px; height: 5px; border-radius: 50%; background: #a58abc; }
#app.how-scroll .hs-copy .hs-note { font-size: 14px; color: #786b85; margin-bottom: 0; }
#app.how-scroll .hs-copy .hs-keyline { font-weight: 600; color: #3f324f; }
#app.how-scroll .hs-device-slot { position: relative; padding: 12px 20px 56px; }
#app.how-scroll .hs-phone-layer { width: min(280px, 100%); margin: auto; }
#app.how-scroll .hs-phone { position: relative; width: 100%; aspect-ratio: 1350 / 2760; }
#app.how-scroll .hs-phone-display { position: absolute; left: 5.185185%; top: 2.173913%; width: 89.62963%; height: 95.57971%; border-radius: 15.7% / 7.2%; overflow: hidden; background: #f1e9fb; }
#app.how-scroll .hs-phone-display iframe { display: block; width: 400px; height: 872.066116px; max-width: none; border: 0; transform: scale(var(--device-scale, .6274)); transform-origin: top left; pointer-events: none; }
#app.how-scroll .hs-bezel { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
#app.how-scroll .hs-health-flow { position: absolute; inset: 0; background: #cecece; overflow: hidden; }
#app.how-scroll .hs-health-flow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
#app.how-scroll .hs-health-selected, #app.how-scroll .hs-health-window, #app.how-scroll .hs-health-scroll { position: absolute; inset: 0; }
#app.how-scroll .hs-health-selected { opacity: 0; }
#app.how-scroll .hs-health-window { clip-path: inset(15.2% 0 0); }
#app.how-scroll .hs-health-upper { clip-path: inset(0 0 24%); }
#app.how-scroll .hs-health-lower { transform: translateY(56.4%); clip-path: inset(19.6% 0 0); }
#app.how-scroll .hs-health-header { clip-path: inset(0 0 84.8%); }
#app.how-scroll .hs-health-touch { position: absolute; left: 23%; top: 49.9%; width: 12%; aspect-ratio: 1; margin: -6%; border: 2px solid #208af2b3; border-radius: 50%; background: #208af229; opacity: 0; }
#app.how-scroll .hs-health-flow::after { content: ""; position: absolute; z-index: 3; left: 37%; top: 2.2%; width: 26%; height: 3.8%; border-radius: 999px; background: #050506; }
#app.how-scroll .hs-device-track { display: none; }
#app.how-scroll .hs-watch-layer { width: 174px; margin: 24px auto 0; pointer-events: none; }
#app.how-scroll .hs-watch { display: block; width: 100%; height: auto; overflow: visible; }
#app.how-scroll .hs-watch-display { width: 436px; height: 530px; overflow: hidden; background: #fff; }
#app.how-scroll .hs-watch-display iframe { display: block; width: 179px; height: 218px; border: 0; transform: scale(2.435754); transform-origin: top left; pointer-events: none; }
@media (min-width: 821px) and (min-height: 600px) {
#app.how-scroll.hs-desktop .hs-panel { display: flex; align-items: center; }
#app.how-scroll.hs-desktop .hs-copy { width: 53%; max-width: 760px; padding: 64px 0 64px clamp(48px, 6vw, 100px); }
#app.how-scroll.hs-desktop .hs-copy h3 { white-space: nowrap; }
#app.how-scroll.hs-desktop .hs-copy p { max-width: 26em; }
#app.how-scroll.hs-desktop .hs-device-slot { display: none; }
#app.how-scroll.hs-desktop .hs-device-track { display: block; position: absolute; inset: 0; pointer-events: none; z-index: 1; }
#app.how-scroll.hs-desktop .hs-device-stage { position: sticky; top: 0; height: 100svh; }
#app.how-scroll.hs-desktop .hs-phone-layer { position: absolute; width: var(--phone-width); height: var(--phone-height); top: calc((100svh - var(--phone-height)) / 2); left: 70%; margin: 0; transform: translateX(-50%); }
#app.how-scroll.hs-desktop .hs-phone-curve { z-index: 1; mask-image: linear-gradient(to bottom, transparent var(--wipe-start, 100%), #000 var(--wipe-end, 100%)); }
#app.how-scroll.hs-desktop .hs-watch-layer { position: absolute; left: calc(70% + var(--phone-width) * .46); top: calc(50% - var(--phone-height) * .02); width: calc(var(--phone-width) * .55); margin: 0; z-index: 2; opacity: var(--watch-reveal, 0); }
#app.how-scroll.hs-desktop .hs-watch-motion { transform: translate(calc((1 - var(--watch-reveal, 0)) * 12px), calc((1 - var(--watch-reveal, 0)) * 26px)); }
}
@media (max-width: 820px), (max-height: 599px) {
#app.how-scroll .hs-intro { padding: 112px 24px 42px; }
#app.how-scroll .hs-intro h2 { font-size: 36px; }
#app.how-scroll .hs-intro p { font-size: 15px; }
#app.how-scroll .hs-story { margin-inline: 12px; }
#app.how-scroll .hs-panel { border-radius: 24px; min-height: 0; }
#app.how-scroll .hs-panel + .hs-panel { margin-top: 16px; }
#app.how-scroll .hs-copy { padding: 40px 28px 20px; }
#app.how-scroll .hs-copy h3 { font-size: 30px; gap: 12px; margin-bottom: 26px; letter-spacing: -.04em; }
#app.how-scroll .hs-step-number { flex-basis: 26px; height: 26px; font-size: 14px; }
#app.how-scroll .hs-copy p, #app.how-scroll .hs-copy li { font-size: 16px; }
#app.how-scroll .hs-copy .hs-note { font-size: 13px; }
#app.how-scroll .hs-desktop-break { display: none; }
#app.how-scroll .hs-phone-layer { width: min(274px, 90%); }
#app.how-scroll .hs-device-slot { padding-top: 28px; }
#app.how-scroll .hs-curve-slot .hs-phone-layer { margin-left: 0; margin-bottom: 140px; }
#app.how-scroll .hs-curve-slot .hs-watch-layer { position: absolute; width: min(126px, 40%); bottom: 8px; right: 18px; margin: 0; }
}
@media (max-width: 370px) {
#app.how-scroll .hs-copy { padding-inline: 22px; }
#app.how-scroll .hs-copy h3 { font-size: 26px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
#app.how-scroll .hs-health-selected { opacity: 1; }
#app.how-scroll .hs-health-scroll { transform: translateY(-56.4%); }
#app.how-scroll .hs-health-touch { display: none; }
#app.how-scroll.hs-desktop .hs-watch-motion { transform: none; }
}

/* Navigation-safe stage; these overrides are confined to the third chapter. */
#app.how-scroll { display:block; position:relative; padding:0 0 24px; overflow:visible; isolation:isolate; line-height:normal; --stage-height:calc(100svh - 80px); --phone-height:min(80svh, calc(var(--stage-height) - 64px), 760px, calc((100vw - 48px) * .26 * 2760 / 1350)); }
#app.how-scroll .hs-intro { padding-top:112px; }
@media (min-width:821px) and (min-height:600px) {
#app.how-scroll.hs-desktop .hs-device-stage { top:80px; height:var(--stage-height); }
#app.how-scroll.hs-desktop .hs-phone-layer { top:calc((var(--stage-height) - var(--phone-height)) / 2); }
#app.how-scroll.hs-desktop .hs-watch-layer { top:calc(var(--stage-height) / 2 - var(--phone-height) * .02); }
}