.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.app-demo { --demo-duration: 18s; position: relative; display: grid; width: min(100%, 390px); margin: 0; justify-self: center; color: #16181b; }
.demo-pause { grid-area: 2 / 1; justify-self: end; align-self: center; width: 44px; height: 44px; margin: 19px max(0px, calc((100% - 365px) / 2)) 0 0; opacity: 0; position: relative; z-index: 1; cursor: pointer; }
.demo-phone { grid-area: 1 / 1; container-type: inline-size; width: min(100%, 334px); aspect-ratio: 352 / 680; margin-inline: auto; padding: 7px; border: 1px solid #657075; border-radius: 43px; background: #263034; box-shadow: 0 3px 2px #fff7 inset, 0 28px 65px -20px #143d443d, 0 3px 8px #12343b26; }
.demo-display { position: relative; height: 100%; overflow: hidden; border-radius: 35px; background: #f2f2f7; font-size: 4.1cqw; line-height: 1.3; isolation: isolate; }
.demo-symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.demo-icon { width: 6.8cqw; height: 6.8cqw; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.demo-statusbar { position: relative; z-index: 3; height: 15cqw; display: flex; align-items: center; gap: 2cqw; padding: 0 7.5cqw; font-size: 4.3cqw; font-weight: 650; color: #0c1012; }
.demo-island { position: absolute; width: 27cqw; height: 7.5cqw; border-radius: 20px; top: 3.5cqw; left: 36.5cqw; background: #172125; }
.demo-reception { display: flex; align-items: end; gap: .7cqw; height: 3.5cqw; margin-left: auto; }
.demo-reception i { width: 1cqw; border-radius: .3cqw; background: currentColor; height: 40%; }
.demo-reception i:nth-child(2) { height: 60%; }
.demo-reception i:nth-child(3) { height: 80%; }
.demo-reception i:nth-child(4) { height: 100%; }
.demo-battery { position: relative; width: 6.5cqw; height: 3.4cqw; margin-left: 1cqw; border: 1px solid #7f8184; border-radius: 1cqw; }
.demo-battery::before { content: ""; position: absolute; inset: 1px; right: 2px; border-radius: .5cqw; background: currentColor; }
.demo-battery::after { content: ""; position: absolute; right: -3px; top: 25%; width: 2px; height: 50%; border-radius: 1px; background: #7f8184; }
.demo-page { position: absolute; inset: 17.5cqw 0 0; padding: 0 4.5cqw; }
.demo-section-label { margin: 0 0 2cqw 4cqw; color: #60636b; font-size: 3.8cqw; font-weight: 550; }
.demo-group { overflow: hidden; background: #fff; border-radius: 5.5cqw; }
.demo-connection { display: flex; align-items: center; gap: 3cqw; padding: 4cqw; }
.demo-service-icon { display: grid; place-items: center; width: 9.5cqw; height: 9.5cqw; flex: none; border-radius: 2.4cqw; background: #fc4c02; color: #fff; font-size: 6.2cqw; font-style: italic; font-weight: 850; }
.demo-connection strong, .demo-rule-copy strong { display: block; font-size: 4.25cqw; font-weight: 630; }
.demo-connection small { display: block; margin-top: .5cqw; color: #72757b; font-size: 3.4cqw; }
.demo-connected { margin-left: auto; margin-right: 1cqw; color: #078666; font-size: 5.2cqw; }
.demo-auto-row { display: flex; align-items: center; gap: 3cqw; min-height: 21cqw; padding: 3.5cqw 4cqw; border-top: 1px solid #ebecef; }
.demo-auto-row > .demo-icon { color: #087b90; }
.demo-auto-row > span:nth-child(2) { flex: 1; font-size: 3.85cqw; line-height: 1.35; }
.demo-switch { position: relative; display: block; flex: none; width: 12.5cqw; height: 7.6cqw; border-radius: 12cqw; background: #e4e5e9; }
.demo-switch::after { content: ""; position: absolute; top: .55cqw; left: .55cqw; width: 6.5cqw; height: 6.5cqw; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px #0002; }
.demo-switch-cycling { animation: demo-cycling-switch var(--demo-duration) linear infinite; }
.demo-switch-cycling::after { animation: demo-cycling-knob var(--demo-duration) ease-in-out infinite; }
.demo-switch-auto { animation: demo-auto-switch var(--demo-duration) linear infinite; }
.demo-switch-auto::after { animation: demo-auto-knob var(--demo-duration) ease-in-out infinite; }
.demo-rules-label { margin-top: 8cqw; }
.demo-rule { display: flex; align-items: center; gap: 2cqw; min-height: 23cqw; padding: 3cqw; }
.demo-rule + .demo-rule { border-top: 1px solid #ebecef; }
.demo-rule > .demo-icon { margin-right: 1cqw; color: #858991; }
.demo-cycling-rule > .demo-icon { animation: demo-rule-accent var(--demo-duration) linear infinite; }
.demo-rule-copy { flex: 1; }
.demo-rule-copy small { display: block; white-space: nowrap; margin-top: 1.5cqw; color: #72757b; font-size: 3.1cqw; }
.demo-chevron { color: #aaaeb4; font-size: 5cqw; font-weight: 500; }
.demo-more { color: #60636b; font-weight: 700; font-size: 4cqw; margin-left: 1cqw; }
.demo-add-rule { display: flex; align-items: center; gap: 3cqw; padding: 3.3cqw 4cqw; border-top: 1px solid #ebecef; color: #087b90; font-size: 4cqw; }
.demo-add-rule > span { font-size: 6cqw; line-height: 1; }
.demo-rules-page { animation: demo-rules-page var(--demo-duration) ease-in-out infinite; }
.demo-workouts-page { top: 15cqw; opacity: 0; animation: demo-workouts-page var(--demo-duration) ease-in-out infinite; }
.demo-search { padding: 2.7cqw 4cqw; margin-bottom: 3cqw; }
.demo-search-text { color: #60636b; display: block; font-size: 4cqw; padding-bottom: 2cqw; }
.demo-filters { display: flex; justify-content: space-between; gap: 2cqw; padding-top: 2cqw; border-top: 1px solid #e6e7eb; font-size: 3.5cqw; font-weight: 580; }
.demo-filters > span { background: #f4f4f6; border-radius: 8cqw; padding: 1.2cqw 3cqw; }
.demo-filters > span:first-child { color: #076d80; background: #e0f1f4; }
.demo-feed { padding: 0 3.5cqw; }
.demo-date { padding: 2cqw 0; font-size: 3.9cqw; font-weight: 560; }
.demo-map { width: 100%; height: auto; aspect-ratio: 1014 / 720; border-radius: 3cqw; }
.demo-workout { padding: 3cqw 0; }
.demo-workout-name { display: flex; align-items: center; gap: 1.8cqw; }
.demo-workout-name .demo-icon { color: #087b90; width: 5.5cqw; height: 5.5cqw; }
.demo-workout-name strong { font-size: 4.25cqw; font-weight: 650; }
.demo-workout-name > span { margin-left: auto; color: #60636b; font-size: 3cqw; }
.demo-workout p { margin: 1.5cqw 0 2.5cqw; color: #73767e; font-size: 3.5cqw; }
.demo-workout p > span { margin-inline: 1.3cqw; color: #b7bac0; }
.demo-upload-state { display: grid; height: 6cqw; align-items: center; }
.demo-upload-state > span { grid-area: 1 / 1; justify-self: start; display: inline-flex; align-items: center; gap: 1cqw; font-size: 3.15cqw; font-weight: 570; border-radius: 6cqw; padding: 1cqw 2.5cqw; }
.demo-upload-state .demo-icon { width: 3.7cqw; height: 3.7cqw; }
.demo-upload-waiting { color: #60636b; background: #f1f2f4; animation: demo-waiting var(--demo-duration) linear infinite; }
.demo-upload-progress { color: #076d80; background: #e5f2f5; opacity: 0; animation: demo-uploading var(--demo-duration) linear infinite; }
.demo-upload-progress .demo-icon { animation: demo-spinner 1.3s linear infinite; }
.demo-upload-complete { color: #167950; background: #e4f5eb; opacity: 0; animation: demo-uploaded var(--demo-duration) linear infinite; }
.demo-run-workout { border-top: 1px solid #e9eaed; }
.demo-run-workout .demo-icon { color: #969aa2; }
.demo-not-uploaded { display: inline-block; padding: 1cqw 2.5cqw; border-radius: 6cqw; font-size: 3.15cqw; font-weight: 540; color: #60636b; background: #f1f2f4; }
.demo-tabs { position: absolute; z-index: 4; bottom: 7cqw; left: 8cqw; right: 8cqw; display: grid; grid-template-columns: repeat(3, 1fr); padding: 1.5cqw; border: 1px solid #e2e3e5; border-radius: 12cqw; background: #fffffff5; box-shadow: 0 3px 15px #193c4310; }
.demo-tab { display: flex; flex-direction: column; align-items: center; gap: 1.5cqw; padding: 2.5cqw 0; border-radius: 10cqw; font-size: 3.2cqw; font-weight: 570; }
.demo-tab .demo-icon { width: 6.4cqw; height: 6.4cqw; }
.demo-tab-rules { color: #076d80; background: #e7ecee; animation: demo-rules-tab var(--demo-duration) linear infinite; }
.demo-tab-workouts { animation: demo-workouts-tab var(--demo-duration) linear infinite; }
.demo-tap { position: absolute; z-index: 6; width: 12cqw; height: 12cqw; border: 2px solid #087b90; border-radius: 50%; background: #087b9012; opacity: 0; pointer-events: none; }
.demo-tap-cycling { top: 66.8cqw; right: 14.9cqw; animation: demo-tap-cycling var(--demo-duration) ease-out infinite; }
.demo-tap-auto { top: 30cqw; right: 8.75cqw; animation: demo-tap-auto var(--demo-duration) ease-out infinite; }
.demo-tap-tab { bottom: 10.5cqw; left: 17cqw; animation: demo-tap-tab var(--demo-duration) ease-out infinite; }
.demo-notification { position: absolute; z-index: 8; top: 15cqw; left: 2.5cqw; right: 2.5cqw; display: flex; align-items: center; gap: 3cqw; padding: 3.5cqw; border: 1px solid #fff9; border-radius: 6cqw; background: #f9fafbf7; box-shadow: 0 10px 26px #122f3f25; opacity: 0; animation: demo-notification var(--demo-duration) cubic-bezier(.2,.75,.2,1) infinite; }
.demo-notification > div { flex: 1; min-width: 0; }
.demo-notification .demo-service-icon { width: 11cqw; height: 11cqw; font-size: 7cqw; border-radius: 2.7cqw; }
.demo-notification-app { display: flex; align-items: center; justify-content: space-between; font-size: 2.8cqw; color: #60636b; }
.demo-notification-app strong { font-weight: 600; letter-spacing: .03em; }
.demo-notification-title { display: block; font-size: 3.8cqw; font-weight: 660; margin-top: 1cqw; }
.demo-notification-body { display: block; font-size: 3.45cqw; margin-top: .7cqw; color: #484d55; }
.demo-home-indicator { position: absolute; bottom: 2.5cqw; height: 1.25cqw; width: 31cqw; left: 34.5cqw; border-radius: 4cqw; background: #242b2f; }
.demo-controls { grid-area: 2 / 1; display: flex; align-items: center; gap: 10px; width: min(100%, 365px); margin: 19px auto 0; min-height: 44px; }
.demo-story { display: grid; flex: 1; margin: 0; color: #3d5d63; font-size: .86rem; font-weight: 600; line-height: 1.35; }
.demo-story > span { grid-area: 1 / 1; align-self: center; }
.demo-story-rules { animation: demo-story-rules var(--demo-duration) linear infinite; }
.demo-story-sync { opacity: 0; animation: demo-story-sync var(--demo-duration) linear infinite; }
.demo-story-done { opacity: 0; animation: demo-story-done var(--demo-duration) linear infinite; }
.demo-playback { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 1px solid #cbdad6; border-radius: 50%; color: #3d5d63; cursor: pointer; font-size: 15px; background: #f5f8f7; transition: background .15s; }
.demo-playback:hover { background: #e6eeeb; }
.demo-play-label { display: none; margin-left: 2px; font-size: 12px; }
.demo-pause:checked ~ .demo-controls .demo-pause-label { display: none; }
.demo-pause:checked ~ .demo-controls .demo-play-label { display: inline; }
.demo-pause:focus-visible ~ .demo-controls .demo-playback { outline: 3px solid #078ba0; outline-offset: 4px; }
.demo-pause:checked ~ .demo-phone *, .demo-pause:checked ~ .demo-phone *::after, .demo-pause:checked ~ .demo-controls * { animation-play-state: paused; }
.app-demo figcaption { grid-area: 3 / 1; width: min(100%, 365px); margin: 7px auto 0; color: #526b70; font-size: .75rem; line-height: 1.45; }

@keyframes demo-cycling-switch { 0%, 12%, 100% { background: #e4e5e9; } 14%, 98% { background: #087b90; } }
@keyframes demo-cycling-knob { 0%, 12%, 100% { transform: translateX(0); } 14%, 98% { transform: translateX(4.9cqw); } }
@keyframes demo-auto-switch { 0%, 24%, 100% { background: #e4e5e9; } 26%, 98% { background: #087b90; } }
@keyframes demo-auto-knob { 0%, 24%, 100% { transform: translateX(0); } 26%, 98% { transform: translateX(4.9cqw); } }
@keyframes demo-rule-accent { 0%, 12%, 100% { color: #858991; } 14%, 98% { color: #087b90; } }
@keyframes demo-rules-page { 0%, 36%, 100% { opacity: 1; transform: translateX(0); } 40%, 96% { opacity: 0; transform: translateX(-8%); } }
@keyframes demo-workouts-page { 0%, 36%, 100% { opacity: 0; transform: translateX(8%); } 40%, 96% { opacity: 1; transform: translateX(0); } }
@keyframes demo-waiting { 0%, 44%, 100% { opacity: 1; } 46%, 98% { opacity: 0; } }
@keyframes demo-uploading { 0%, 44%, 60%, 100% { opacity: 0; } 46%, 58% { opacity: 1; } }
@keyframes demo-uploaded { 0%, 59%, 100% { opacity: 0; } 61%, 97% { opacity: 1; } }
@keyframes demo-spinner { to { transform: rotate(360deg); } }
@keyframes demo-rules-tab { 0%, 36%, 100% { color: #076d80; background: #e7ecee; } 39%, 97% { color: #16181b; background: transparent; } }
@keyframes demo-workouts-tab { 0%, 36%, 100% { color: #16181b; background: transparent; } 39%, 97% { color: #076d80; background: #e7ecee; } }
@keyframes demo-tap-cycling { 0%, 8%, 16%, 100% { opacity: 0; transform: scale(1.3); } 10%, 12% { opacity: .7; transform: scale(.75); } 15% { opacity: 0; transform: scale(1.45); } }
@keyframes demo-tap-auto { 0%, 20%, 28%, 100% { opacity: 0; transform: scale(1.3); } 22%, 24% { opacity: .7; transform: scale(.75); } 27% { opacity: 0; transform: scale(1.45); } }
@keyframes demo-tap-tab { 0%, 32%, 40%, 100% { opacity: 0; transform: scale(1.3); } 34%, 36% { opacity: .7; transform: scale(.75); } 39% { opacity: 0; transform: scale(1.45); } }
@keyframes demo-notification { 0%, 64%, 100% { opacity: 0; transform: translateY(-145%); } 69%, 92% { opacity: 1; transform: translateY(0); } 96% { opacity: 0; transform: translateY(-145%); } }
@keyframes demo-story-rules { 0%, 36%, 100% { opacity: 1; } 40%, 96% { opacity: 0; } }
@keyframes demo-story-sync { 0%, 36%, 66%, 100% { opacity: 0; } 40%, 62% { opacity: 1; } }
@keyframes demo-story-done { 0%, 62%, 100% { opacity: 0; } 66%, 96% { opacity: 1; } }

@media (max-width: 700px) {
  .app-demo { width: min(100%, 360px); align-self: center; }
  .demo-phone { width: min(100%, 322px); }
  .demo-story { font-size: .79rem; }
}
@media (prefers-reduced-motion: reduce) {
  .app-demo *, .app-demo *::after { animation: none !important; }
  .demo-rules-page { opacity: 1; transform: none; }
  .demo-workouts-page, .demo-notification, .demo-tap, .demo-story-sync, .demo-story-done, .demo-playback, .demo-pause { display: none; }
  .demo-switch-cycling, .demo-switch-auto { background: #087b90; }
  .demo-switch-cycling::after, .demo-switch-auto::after { transform: translateX(4.9cqw); }
  .demo-cycling-rule > .demo-icon { color: #087b90; }
  .demo-story-rules { opacity: 1; }
}