/* One playful case, with genuine app pixels and a compact chapter tour. */
.app-demo-section{display:block;padding-top:40px;padding-bottom:48px}
.app-demo{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(40px,7vw,110px);align-items:center}
.app-demo-copy{min-width:0;max-width:520px}
.app-demo-copy h2{font-size:clamp(42px,4.8vw,70px);margin:0 0 18px;line-height:1.05}
.app-demo-copy .demo-intro{font-size:16px;line-height:1.65;margin:0 0 26px;max-width:34ch}
.demo-chapters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px;scrollbar-width:thin;scrollbar-color:var(--coral-dark) transparent}
.demo-chapter{flex:0 0 auto;min-height:44px;padding:10px 14px;border:1px solid #cbaab8;border-radius:16px;font-size:14px;font-weight:650;color:var(--ink);background:transparent}
.demo-chapter[aria-selected=true]{border-color:var(--coral-dark);background:#f3e0e8;color:#743348}
@media(hover:hover) and (pointer:fine){.demo-chapter:hover{background:#f3e0e8}.demo-toolbar button:hover{background:#f3e0e8}}
.demo-caption{min-height:115px}
.demo-caption h3{font-family:Fredoka,ui-rounded,sans-serif;font-size:26px;font-weight:500;line-height:1.15;margin:0 0 12px;color:var(--ink)}
.app-demo-copy #demo-moment-copy{font-size:16px;line-height:1.65;max-width:36ch;margin:0;color:var(--muted)}
.demo-toolbar{display:flex;gap:8px;align-items:center;margin-top:16px}
.demo-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border-radius:16px;padding:10px 12px;color:var(--ink);border:1px solid #cbaab8;font-size:14px;font-weight:650}
#demo-next{width:44px;padding:10px}
.demo-media-kind{font-size:12px;line-height:1.4;color:var(--muted);margin-left:8px}
.demo-progress{height:3px;margin-top:17px;background:#eee2e9;overflow:hidden;border-radius:0}
.demo-progress-fill{display:block;height:100%;background:var(--coral-dark);transform-origin:left;transform:scaleX(0)}
.app-demo-copy .demo-proof{font-size:12px;line-height:1.5;margin:12px 0 0;color:var(--muted)}
.demo-playback-note:empty{display:none}
.app-demo-copy .demo-playback-note{font-size:14px;line-height:1.5;color:var(--coral-dark);margin:12px 0 0}
.app-demo-copy .demo-join{margin-top:22px;font-size:14px}
.app-demo-stage{display:flex;justify-content:center;min-width:0;padding:96px 0 44px;scroll-margin-top:98px}
#demo-panel{width:clamp(226px,32svh,286px);max-width:100%;outline-offset:12px;border-radius:48px}
.demo-bunny{--phone-angle:0deg;width:100%;animation:demo-phone-breathe 8s ease-in-out infinite}
.demo-bunny .bunny-ear{height:108px;width:52px}
.demo-bunny .ear-right{height:121px}
.demo-bunny .phone-face{height:44px;min-height:44px;bottom:5px}
.demo-bunny .phone-speech{left:50%;right:auto;top:calc(100% + 8px);bottom:auto;width:230px;text-align:center;font-size:23px;box-shadow:none;padding:0;transform:translate(-50%,6px);background:transparent}
.demo-bunny.is-chatty .phone-speech,.demo-bunny[data-mood=happy] .phone-speech{transform:translate(-50%,0)}
.demo-bunny[data-demo-motion=off],.demo-bunny[data-demo-motion=off] .phone-eyes,.demo-bunny[data-demo-motion=off] .bunny-ear{animation-play-state:paused}
.demo-screen{isolation:isolate}
.demo-native-still,.demo-recording{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.demo-native-still{z-index:2;background:var(--paper)}
.demo-screen.is-design-preview .demo-native-still{background:#29261e}
.demo-recording{z-index:1}
.demo-recording[hidden]{display:none}
.demo-screen.has-recording .demo-native-still,.demo-screen.show-native-controls .demo-native-still{visibility:hidden}
.demo-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes demo-phone-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(max-width:767px){
 .app-demo-section{padding-top:16px;padding-bottom:16px}
 .app-demo{display:grid;grid-template-columns:minmax(0,1fr) 96px;gap:6px 12px;align-items:center;width:100%}
 .app-demo-copy{display:contents}
 .app-demo-copy h2{grid-column:1/-1;grid-row:1;font-size:34px;margin:0 0 4px}
 .app-demo-copy .demo-intro,.demo-caption,.app-demo-copy .demo-join{display:none}
 .demo-chapters{grid-column:2;grid-row:2;flex-direction:column;flex-wrap:nowrap;align-self:center;overflow:visible;gap:6px;margin:0;padding:0}
 .demo-chapter{font-size:12px;padding:10px 8px;min-height:44px;width:100%;white-space:normal;line-height:1.25}
 .demo-toolbar{grid-column:1/-1;grid-row:3;margin-top:0;justify-content:center}
 .demo-toolbar button{font-size:13px}
 .demo-progress{grid-column:1/-1;grid-row:4;margin-top:0}
 .demo-media-kind{font-size:12px}
 .app-demo-copy .demo-proof{grid-column:1/-1;grid-row:5;font-size:12px;margin:0;text-align:center}
 .app-demo-copy .demo-playback-note{grid-column:1/-1;grid-row:6;margin:0}
 .app-demo-stage{grid-column:1;grid-row:2;width:100%;padding:74px 0 48px;scroll-margin-top:90px}
 #demo-panel{width:min(220px,100%)}
 .demo-bunny .bunny-ear{height:86px;width:43px}
 .demo-bunny .ear-right{height:98px}
 .demo-bunny .phone-speech{font-size:20px;width:220px}
}
@media(prefers-reduced-motion:reduce){.demo-bunny,.demo-bunny .bunny-ear,.demo-bunny .phone-eyes{animation:none;transform:none}}

.demo-screen.is-loading .demo-native-still{visibility:hidden}
.demo-screen-status{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;background:var(--paper);color:var(--plum);font-size:18px;line-height:1.4}
.demo-screen-status[hidden]{display:none}