.av-story { margin-top: 20px; overflow: hidden; border: 1px solid #D6E7E4; border-radius: 22px; background: #FFF; }
.av-topline { display: flex; justify-content: space-between; gap: 12px; padding: 16px 20px; background: #123D43; color: #D9F4EB; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.av-picture { padding: 16px 16px 0; }
.av-picture svg { display: block; width: 100%; height: auto; }
.av-copy { padding: 20px 24px 8px; }
.av-copy .av-tag { color: #0F766E; font-size: 11px; font-weight: 700; letter-spacing: .1em; margin: 0 0 8px; }
#page-online-theme .av-copy h3 { color: #172B4D; font-size: clamp(20px,4vw,26px); line-height: 1.25; margin: 0 0 10px; }
.av-copy p { color: #475569; font-size: 15px; line-height: 1.65; margin: 0 0 12px; }
.av-copy .av-verse { color: #0F766E; font-size: 12px; margin-bottom: 8px; }
.av-controls { display: grid; grid-template-columns: 1fr .8fr 1fr; gap: 8px; padding: 8px 24px 16px; }
.av-controls button { min-height: 46px; border: 1px solid #BAD7CF; border-radius: 12px; background: white; color: #0F766E; font: inherit; font-size: 13px; font-weight: 600; padding: 8px 6px; cursor: pointer; }
.av-controls [data-av="play"] { background: #0F766E; color: white; border-color: #0F766E; }
.av-controls button:disabled { opacity: .4; cursor: default; }
.av-controls button:focus-visible { outline: 3px solid #FBBF24; outline-offset: 3px; }
.av-note { margin: 0; background: #F0F9F6; padding: 14px 24px; color: #315B53; font-size: 13px; line-height: 1.6; }
.av-counter { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.av-handoff-0 { animation: av-receive 3s ease-in-out infinite; }
.av-handoff-2 { animation: av-return 3s ease-in-out infinite; }
.av-signal { animation: av-confirm 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.av-dial { animation: av-measure 3s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom left; }
.av-story svg * { animation-play-state: paused; }
.av-story.is-playing svg * { animation-play-state: running; }
@keyframes av-receive { 0%,15% { transform: translateX(36px); } 65%,100% { transform: translateX(-36px); } }
@keyframes av-return { 0%,15% { transform: translateX(-36px); } 65%,100% { transform: translateX(36px); } }
@keyframes av-confirm { 0%,30% { opacity:.35; transform:scale(.85); } 65%,100% { opacity:1; transform:scale(1); } }
@keyframes av-measure { 0%,100% { transform:rotate(-15deg); } 50% { transform:rotate(20deg); } }
@media (max-width:400px) { .av-topline { padding:14px; font-size:10px; } .av-copy { padding:16px 16px 6px; } .av-controls { padding:8px 12px 14px; gap:6px; } .av-controls button { font-size:12px; } .av-note { padding:12px 16px; } .av-picture { padding:10px 10px 0; } }
@media (prefers-reduced-motion:reduce) { .av-story svg * { animation:none !important; } }

/* Shared activity illustrations for the other five themes. */
.av-controls [data-qv="play"] { background: #0F766E; color: white; border-color: #0F766E; }
.qv-small { font-family: system-ui,sans-serif; font-size: 11px; fill: #275965; }
.qv-bold { font-weight: 700; }
.qv-speech { animation: qv-reveal 3.5s ease-in-out infinite; }
.qv-device { animation: qv-attention 3.5s ease-in-out infinite; }
.qv-highlight, .qv-check { animation: qv-reveal 3.5s ease-in-out infinite; }
.qv-food { animation: qv-attention 3.5s ease-in-out infinite; }
.qv-connect { animation: qv-flow 3.5s linear infinite; }
@keyframes qv-reveal { 0%,15% { opacity:.45; } 50%,100% { opacity:1; } }
@keyframes qv-attention { 0%,100% { opacity:.72; } 50% { opacity:1; } }
@keyframes qv-flow { to { stroke-dashoffset:-36; } }
@media (prefers-reduced-motion:reduce) { .av-story svg * { animation:none !important; } }

.qv-scene .av-arm { animation: qv-gesture 3.5s ease-in-out infinite; transform-box:fill-box; transform-origin:top center; }
.qv-pencil { animation: qv-write 3.5s ease-in-out infinite; }
.qv-serve { animation: qv-serve-food 3.5s ease-in-out infinite; }
@keyframes qv-gesture { 0%,100% { transform:rotate(-2deg); } 50% { transform:rotate(3deg); } }
@keyframes qv-write { 0%,100% { transform:translate(0,0); } 50% { transform:translate(20px,0); } }
@keyframes qv-serve-food { 0%,15%,100% { transform:translate(0,0); } 55%,80% { transform:translate(-48px,22px); } }
@media (prefers-reduced-motion:reduce) { .av-story svg * { animation:none !important; } }

/* Large illustrated slides: text stays outside the image for mobile readability. */
.ams-slides { margin-top:20px; border:1px solid #D6E7E4; border-radius:22px; overflow:hidden; background:#FFF; }
.ams-top { display:flex; justify-content:space-between; gap:12px; padding:16px 20px; background:#123D43; color:#D9F4EB; font-size:12px; font-weight:700; letter-spacing:.05em; }
.ams-figure { margin:0; }
.ams-image { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:contain; background:#ECF4F0; }
.ams-copy { padding:22px 24px 8px; }
#page-online-theme .ams-copy h3 { color:#172B4D; font-size:clamp(22px,4.5vw,28px); line-height:1.3; margin:0 0 12px; }
.ams-copy p { font-size:17px; line-height:1.65; color:#334155; margin:0 0 16px; }
.ams-copy .ams-verse { font-size:14px; color:#0F766E; line-height:1.5; }
.ams-nav { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:12px 24px 20px; }
.ams-nav button { min-height:46px; border:1px solid #B5D5CA; border-radius:12px; background:#FFF; color:#0F766E; font:inherit; font-size:14px; font-weight:600; cursor:pointer; padding:10px 12px; }
.ams-nav > [data-ams="next"] { background:#0F766E; border-color:#0F766E; color:white; }
.ams-nav button:disabled { opacity:.4; cursor:default; }
.ams-nav button:focus-visible { outline:3px solid #FBBF24; outline-offset:3px; }
.ams-dots { display:flex; gap:5px; }
.ams-dots button { min-width:44px; padding:8px; border-color:transparent; }
.ams-dots button[aria-pressed="true"] { background:#E2F3ED; border-color:#84B6A5; }
.ams-note { margin:0; padding:16px 24px; background:#F0F9F6; color:#315B53; font-size:15px; line-height:1.6; }
.ams-announcement { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media (max-width:480px) { .ams-top { padding:14px 16px; } .ams-copy { padding:20px 18px 4px; } .ams-nav { padding:10px 16px 18px; gap:8px; } .ams-dots { order:3; flex-basis:100%; justify-content:center; } .ams-note { padding:16px 18px; } }

/* Shared static picture slides across all themes. */
.ams-nav > [data-tms="next"] { background:#0F766E; border-color:#0F766E; color:white; }