/* 15-second mobile learning-flow preview inside the phone frame. */
.phone-demo { position: relative; width: 280px; max-width: 92%; aspect-ratio: 1 / 2; flex: none; filter: drop-shadow(0 20px 22px rgba(94,75,29,.17)); }
.phone-demo-screen { position: absolute; left: 6.666667%; top: 3%; width: 86.666667%; height: 94%; overflow: hidden; background: #fff; border-radius: 10% / 5%; }
.phone-demo-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
.feature-reel { position: relative; width: 100%; height: 100%; overflow: hidden; background: #faf9f5; color: #292720; font-family: "Microsoft YaHei",sans-serif; }
.reel-scene { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity .36s ease, visibility .36s; }
.reel-scene.is-active { opacity: 1; visibility: visible; }
.reel-shot { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center 15%; background: #fff; }
.reel-step { position: absolute; z-index: 2; bottom: 2.5%; left: 50%; transform: translateX(-50%); padding: 3px 8px; border: 1px solid #e5ddca; border-radius: 999px; background: rgba(255,253,248,.94); color: #7d725d; font-size: clamp(8px,2.15vw,10px); line-height: 1.35; letter-spacing: .02em; white-space: nowrap; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.phone-demo-control { position:absolute;left:50%;bottom:-34px;transform:translateX(-50%);padding:5px 12px;border:1px solid #e5ddca;border-radius:999px;background:#fffdf8;color:#7d725d;font:11px/1.5 "Microsoft YaHei",sans-serif;white-space:nowrap;cursor:pointer;opacity:0;transition:opacity .2s; }
.phone-demo:hover .phone-demo-control,.phone-demo:focus-within .phone-demo-control,.phone-demo.is-paused .phone-demo-control { opacity:1; }
.phone-demo-control:focus-visible { outline:2px solid #b78a18;outline-offset:3px; }
.download-visual { min-height: 575px; }
@media (max-width:650px) { .phone-demo { width:250px; } .download-visual { min-height:555px; } }
@media (hover:none) { .phone-demo-control { opacity:1; } }
@media (prefers-reduced-motion:reduce) { .reel-scene { transition:none; } .phone-demo-control { transition:none; } }