/* JavaScript seeks one paused clock; without it the first reading page is static. */
.workflow-section {
  --demo-duration: 10s;
  --demo-reader-height: calc(154cqw - 64px);
  position: relative;
  padding-top: 68px;
  padding-bottom: 88px;
  border-top: 1px solid #dce0e9;
}
.demo-layout { grid-template-columns: minmax(0, 356px) minmax(0, 520px); column-gap: clamp(112px, 16vw, 224px); justify-content: center; }
.demo-copy { grid-column: 2; grid-row: 1; width: 100%; min-width: 0; max-width: none; }
.demo-copy h2 { max-width: 18ch; }
.demo-description { margin-top: 24px; color: #536078; line-height: 1.85; }
.demo-description-stages { display: none; }
.demo-ready .demo-description-summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.demo-ready .demo-description-stages { display: block; }
.demo-description-stages > span { opacity: 0; }
.demo-figure { grid-column: 1; grid-row: 1; width: 100%; margin: 0; min-width: 0; }
.demo-device { container-type: inline-size; position: relative; width: min(100%, 356px); margin: 0; padding: 6px; border: 1px solid #c4cad7; border-radius: 36px; background: #fff; box-shadow: 0 18px 40px -24px #28356345; }
.demo-screen { position: relative; aspect-ratio: 338 / 630; overflow: hidden; border-radius: 32px; isolation: isolate; background: #f7f2e3; color: #283563; font-family: var(--sans, -apple-system, BlinkMacSystemFont, sans-serif); }
.demo-icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; width: 6cqw; height: 6cqw; }
.demo-status { position: absolute; left: 7cqw; right: 7cqw; top: 3.4cqw; height: 6cqw; display: flex; align-items: center; justify-content: space-between; font-size: 3.2cqw; font-weight: 650; z-index: 3; }
.demo-status > div { display: flex; align-items: center; gap: 2cqw; }
.demo-signal { width: 4cqw; height: 3cqw; background: currentColor; clip-path: polygon(0 75%, 16% 75%, 16% 100%, 25% 100%, 25% 50%, 41% 50%, 41% 100%, 50% 100%, 50% 25%, 66% 25%, 66% 100%, 75% 100%, 75% 0, 100% 0, 100% 100%, 0 100%); }
.demo-battery { position: relative; width: 6cqw; height: 3cqw; border: 1px solid currentColor; border-radius: .8cqw; }
.demo-battery::before { content: ""; position: absolute; inset: .4cqw; border-radius: .25cqw; background: currentColor; }
.demo-battery::after { content: ""; position: absolute; right: -1.1cqw; top: .65cqw; height: 1.2cqw; width: .65cqw; background: currentColor; border-radius: 1px; }
.demo-home-indicator { position: absolute; z-index: 5; pointer-events: none; width: 31cqw; height: 1.1cqw; border-radius: 10px; background: #283563; bottom: 2.4cqw; left: 50%; transform: translateX(-50%); opacity: .7; }
.demo-scene-home, .demo-scene-reader { position: absolute; inset: 0; }
.demo-scene-home { opacity: 0; animation: demo-home-scene var(--demo-duration) linear 1 both paused; }
.demo-wallpaper { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.demo-home-wash { position: absolute; inset: 0; background: linear-gradient(#fffffff0, #ffffff00 33%); }
.demo-home-nav, .demo-reader-nav { position: absolute; top: 13cqw; left: 6cqw; right: 6cqw; display: flex; justify-content: space-between; align-items: center; gap: 3cqw; min-height: 10cqw; font-size: 3.5cqw; }
.demo-home-nav > div { margin-left: auto; }
.demo-home-nav > div, .demo-reader-nav > div { display: flex; align-items: center; gap: 5cqw; }
.demo-home-card { position: absolute; left: 4.5cqw; right: 4.5cqw; bottom: calc(7cqw + 64px); padding: 5.3cqw; background: #ffffffdf; border: 1px solid #ffffffcf; border-radius: 7cqw; box-shadow: 0 6px 22px #17243e17; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.demo-card-title { font-family: var(--serif, Georgia, serif); font-size: 5.7cqw; line-height: 1.4; font-weight: 600; margin-bottom: 5cqw; }
.demo-url-row { display: flex; align-items: center; justify-content: space-between; gap: 2.5cqw; font-size: 3.3cqw; font-weight: 600; margin-bottom: 3cqw; }
.demo-url-row > span { display: inline-flex; align-items: center; gap: 1.4cqw; }
.demo-url-row .demo-icon { width: 4.4cqw; height: 4.4cqw; }
.demo-paste { background: #2835630d; padding: 1.6cqw 2cqw; border-radius: 2cqw; animation: demo-paste-cue var(--demo-duration) linear 1 both paused; }
.demo-url-field { position: relative; display: grid; align-items: center; min-height: 12cqw; padding: 3cqw; background: #ffffffbd; border: 1px solid #28356329; border-radius: 2.8cqw; font-size: 3.4cqw; line-height: 1.4; overflow: hidden; }
.demo-url-placeholder, .demo-url-value { grid-area: 1 / 1; }
.demo-url-placeholder { color: #677287; animation: demo-placeholder var(--demo-duration) linear 1 both paused; }
.demo-url-value { font-size: 3cqw; overflow-wrap: anywhere; opacity: 0; animation: demo-url-pasted var(--demo-duration) linear 1 both paused; }
.demo-open { display: grid; min-height: 12cqw; align-items: center; justify-items: center; margin-top: 3.5cqw; padding: 2.8cqw; border-radius: 3cqw; color: white; background: #283563; font-size: 3.7cqw; line-height: 1.35; font-weight: 600; text-align: center; animation: demo-open-cue var(--demo-duration) linear 1 both paused; }
.demo-open-text, .demo-loading-text { grid-area: 1 / 1; }
.demo-open-text { animation: demo-open-label var(--demo-duration) linear 1 both paused; }
.demo-loading-text { display: inline-flex; align-items: center; justify-content: center; gap: 2cqw; font-size: 3.1cqw; opacity: 0; animation: demo-loading-label var(--demo-duration) linear 1 both paused; }
.demo-loading-ring { flex: none; width: 3.4cqw; height: 3.4cqw; border: 1.5px solid #ffffff55; border-top-color: white; border-right-color: white; border-radius: 50%; animation: demo-loading-turn var(--demo-duration) linear 1 both paused; }
.demo-scene-reader { background: #f7f2e3; opacity: 1; animation: demo-reader-scene var(--demo-duration) linear 1 both paused; }
.demo-reader-nav { z-index: 2; top: 12.5cqw; min-height: 11cqw; padding-bottom: 2cqw; }
.demo-reader-nav::after { content: ""; position: absolute; left: -6cqw; right: -6cqw; bottom: -3.5cqw; height: 3.5cqw; background: linear-gradient(#f7f2e3, #f7f2e300); }
.demo-back { display: inline-flex; align-items: center; gap: .2cqw; min-width: 0; font-size: 3.3cqw; }
.demo-back .demo-icon { width: 5cqw; height: 5cqw; }
.demo-reader-nav > div { gap: 4.5cqw; }
.demo-reader-nav > div > span { display: flex; }
.demo-reader-viewport { position: absolute; top: 27cqw; left: 0; right: 0; height: var(--demo-reader-height); overflow: hidden; }
.demo-reading-stream { padding: 3cqw 7cqw 6cqw; animation: demo-continuous-scroll var(--demo-duration) linear 1 both paused; }
.demo-ready .demo-reading-stream { will-change: transform; }
.demo-chapter { min-height: 141cqw; padding-top: 6cqw; padding-bottom: 10cqw; color: #342f28; font-family: var(--serif, Georgia, serif); }
.demo-chapter + .demo-chapter { border-top: 1px solid #342f2822; }
.demo-chapter h3 { font: 600 6cqw/1.45 var(--serif, Georgia, serif); letter-spacing: -.02em; margin: 0 0 6cqw; overflow-wrap: break-word; }
.demo-chapter p { font: 400 4.6cqw/1.9 var(--serif, Georgia, serif); margin: 0; overflow-wrap: break-word; }
.demo-chapter p + p { margin-top: 5.3cqw; }
.demo-timeline { position: absolute; z-index: 4; left: 7cqw; right: 7cqw; bottom: 5cqw; isolation: isolate; }
.demo-timeline::before { content: ""; position: absolute; z-index: -1; inset: -14px -7cqw -5cqw; background: linear-gradient(#f7f2e300, #f7f2e3 22px); pointer-events: none; }
.demo-timeline[hidden] { display: none; }
.demo-timeline-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.demo-range { display: block; appearance: none; -webkit-appearance: none; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 0; cursor: ew-resize; background: transparent; color: #6c675d; touch-action: pan-y; }
.demo-range::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: #342f2838; }
.demo-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 13px; height: 13px; margin-top: -5px; border: 1px solid #f7f2e3; border-radius: 50%; background: #6c675d; box-shadow: 0 0 0 1px #6c675d; }
.demo-range::-moz-range-track { height: 3px; border-radius: 3px; background: #342f2838; }
.demo-range::-moz-range-thumb { width: 13px; height: 13px; border: 1px solid #f7f2e3; border-radius: 50%; background: #6c675d; box-shadow: 0 0 0 1px #6c675d; }
.demo-range:focus-visible { outline: 2px solid #283563; outline-offset: 2px; border-radius: 6px; }
.demo-timeline-meta { display: flex; justify-content: space-between; margin-top: -5px; color: #756f62; font-size: 10px; line-height: 1.4; font-variant-numeric: tabular-nums; pointer-events: none; }
.workflow-section:not(.demo-ready) .demo-device *,
.workflow-section:not(.demo-ready) .demo-device *::before,
.workflow-section:not(.demo-ready) .demo-device *::after { animation: none; }

/* Paste at 1s, enter reading around 3s, scroll from 3.7s to 8.6s, then hold the final page until 10s. */
@keyframes demo-home-scene { 0%, 28.8% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes demo-reader-scene { 0%, 28.8% { opacity: 0; } 32%, 100% { opacity: 1; } }
@keyframes demo-paste-cue { 0%, 6.4%, 14.4%, 100% { background-color: #2835630d; transform: scale(1); } 8.96%, 11.2% { background-color: #28356328; transform: scale(.97); } }
@keyframes demo-placeholder { 0%, 9.9984% { opacity: 1; } 10%, 100% { opacity: 0; } }
@keyframes demo-url-pasted { 0%, 9.9984% { opacity: 0; } 10%, 100% { opacity: 1; } }
@keyframes demo-open-cue { 0%, 10% { opacity: .48; transform: scale(1); } 12.8%, 20.8%, 27.2%, 100% { opacity: 1; transform: scale(1); } 24% { opacity: 1; transform: scale(.97); } }
@keyframes demo-open-label { 0%, 24.8% { opacity: 1; } 25.6%, 100% { opacity: 0; } }
@keyframes demo-loading-label { 0%, 24.8% { opacity: 0; } 25.6%, 100% { opacity: 1; } }
@keyframes demo-loading-turn { 0%, 24.8% { transform: rotate(0); } 32.8%, 100% { transform: rotate(360deg); } }
@keyframes demo-continuous-scroll { 0%, 37% { transform: translateY(0); } 86%, 100% { transform: translateY(calc(-100% + var(--demo-reader-height))); } }

@media (max-width: 900px) {
  .workflow-section { padding-top: 48px; padding-bottom: 64px; }
  .demo-layout { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 36px; }
  .demo-copy { grid-column: 1; grid-row: 1; }
  .demo-figure { grid-column: 1; grid-row: 2; }
  .demo-device { margin-inline: auto; }
  .demo-copy h2 { max-width: 24ch; }
  .demo-description { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Animations remain paused and seekable; demo.js suppresses automatic motion. */
  .demo-reading-stream { will-change: auto; }
}

@media (forced-colors: active) {
  .demo-timeline::before { background: Canvas; }
  .demo-range { appearance: auto; -webkit-appearance: auto; accent-color: Highlight; }
  .demo-range::-webkit-slider-runnable-track { background: CanvasText; }
  .demo-range::-webkit-slider-thumb { background: Highlight; border-color: Canvas; box-shadow: none; }
  .demo-range::-moz-range-track { background: CanvasText; }
  .demo-range::-moz-range-thumb { background: Highlight; border-color: Canvas; box-shadow: none; }
  .demo-timeline-meta { color: CanvasText; }
}