/* "Watch it work": five looping scenes. Each scene is a figure with one .playing class; demos.js adds it while the
   scene is on screen. Without that class (no JS, off screen, reduced motion) a scene shows its final frame.
   Sizes inside a scene are container-query units (cqw) so the mini window scales down to a 360px phone.
   No inline styles anywhere (the CSP forbids them); every moving part has a class. */

.demos { padding-top: clamp(0.5rem, 2vw, 1.5rem); }
.demo-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 44rem) {
  .demo-grid { grid-template-columns: 1fr 1fr; }
  .demo:last-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 0.5rem); }
}
@media (min-width: 64rem) {
  .demo-grid { grid-template-columns: repeat(6, 1fr); }
  .demo { grid-column: span 2; }
  .demo:nth-child(n + 4) { grid-column: span 3; }
  .demo:last-child { justify-self: stretch; width: auto; }
}

.demo {
  position: relative; margin: 0; padding: 0.8rem 0.8rem 1.15rem;
  background: var(--stage); color: var(--linen);
  border: 1px solid rgba(246, 241, 234, 0.12); border-radius: 26px;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.demo :focus-visible { outline-color: var(--saffron); }
.demo figcaption { padding-inline: 0.5rem; font-size: 0.98rem; line-height: 1.5; color: #e4ddd0; max-width: 34rem; }
.demo figcaption strong { display: block; margin-bottom: 0.1rem; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.25; color: var(--linen); }

.demo-body { display: flex; flex-direction: column; gap: 0.2rem; }
.stage-demo {
  position: relative; aspect-ratio: 100 / 62; container-type: inline-size; overflow: hidden;
  border-radius: 16px; background: color-mix(in srgb, #000 30%, var(--stage));
}
.stage-demo::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 80% at 15% 0%, rgba(242, 179, 61, 0.18), transparent 60%);
}

/* The mini Mac window: always a light surface, in light and dark mode. */
.win {
  position: absolute; display: flex; flex-direction: column; overflow: hidden;
  background: #fbf8f3; color: #2a1a33; border-radius: 2.4cqw;
  box-shadow: 0 1.4cqw 3.6cqw rgba(0, 0, 0, 0.4);
}
.in-std { left: 5cqw; top: 5cqw; width: 90cqw; height: 52cqw; }
.tb { flex: none; display: flex; align-items: center; gap: 1.3cqw; height: 6.5cqw; padding-left: 2.6cqw; background: #ece5dc; }
.tb i { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; }
.tb .r { background: var(--persimmon); }
.tb .y { background: var(--saffron); }
.tb .g { background: var(--velvet-soft); }
.wb { position: relative; flex: 1; overflow: hidden; padding: 3cqw; font-size: 4cqw; line-height: 1.35; }
.nlbl { font-size: 3cqw; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6b6074; }
.sk { height: 2.4cqw; margin: 2.4cqw 0; border-radius: 1.2cqw; background: #e3dce8; }
.sw30 { width: 30%; } .sw50 { width: 50%; } .sw60 { width: 60%; } .sw70 { width: 70%; } .sw80 { width: 80%; } .sw90 { width: 90%; }
.chip, .snap-chip, .zchips span {
  background: #2a1a33; color: #fbf8f3; border-radius: 999px; font-weight: 700; white-space: nowrap;
}

/* a. Copy and paste (final frame: pasted) */
.line { position: relative; display: inline-block; margin: 1.6cqw 0 1cqw; font-size: 4.4cqw; }
.sel { position: absolute; inset: -0.5cqw -1cqw; border-radius: 0.9cqw; background: rgba(242, 179, 61, 0.6); transform-origin: left center; }
.txt { position: relative; }
.drop { position: relative; display: flex; align-items: center; min-height: 11.5cqw; margin-top: 1.5cqw; padding: 0 3cqw; border: 0.5cqw dashed #b8aec4; border-radius: 2.2cqw; }
.hint { position: absolute; left: 3cqw; font-size: 3.6cqw; color: #6b6074; opacity: 0; }
.paste-t { font-size: 4.4cqw; }
.chip { position: absolute; right: 3cqw; top: 2.6cqw; padding: 0.6cqw 2.2cqw; font-size: 3.2cqw; opacity: 0; }

/* b. Make text bigger (final frame: 150%) */
.zoomp { margin: 0; max-width: none; font-size: 5.7cqw; line-height: 1.3; font-weight: 600; }
.url { display: flex; align-items: center; justify-content: space-between; flex: 1; margin: 0 2.6cqw 0 2cqw; height: 4.6cqw; padding: 0 1.6cqw; border-radius: 1.2cqw; background: #fbf7f1; font-size: 2.7cqw; line-height: 1; color: #6b6074; }
.url-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zchips { position: relative; flex: none; width: 7.4cqw; height: 3.4cqw; }
.zchips span { position: absolute; right: 0; top: 0; padding: 0.4cqw 1.2cqw; font-size: 2.6cqw; opacity: 0; }
.zchips .z150 { opacity: 1; }

/* c. Snap windows (final frame: filled) */
.snapwin { left: 3cqw; top: 3cqw; width: 94cqw; height: 56cqw; }
.snap-chip { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); padding: 0.9cqw 2.8cqw; font-size: 3.8cqw; opacity: 0; }
.snap-chip.sc-f { opacity: 1; }

/* d. Talk instead of type (final frame: all words typed) */
.field { margin-top: 1.6cqw; min-height: 16cqw; padding: 2.4cqw 2.6cqw; border: 0.5cqw solid #cfc6d6; border-radius: 2cqw; background: #fff; font-size: 3.9cqw; line-height: 1.4; }
.tw { display: inline-block; }
.mic-row { display: flex; align-items: center; gap: 2.2cqw; margin-top: 3cqw; }
.mic { position: relative; flex: none; width: 5cqw; height: 5cqw; border-radius: 50%; border: 0.5cqw solid #8a7d96; }
.mic-on { position: absolute; inset: -0.5cqw; border-radius: 50%; background: var(--persimmon); }
.mic-on b { position: absolute; inset: 0; border-radius: 50%; border: 0.5cqw solid var(--persimmon); opacity: 0; }
.wave { display: flex; align-items: center; gap: 1cqw; height: 6cqw; }
.wave i { width: 1.2cqw; height: 100%; border-radius: 1cqw; background: #2a1a33; }
.wave i:nth-child(1) { transform: scaleY(0.5); }
.wave i:nth-child(2) { transform: scaleY(0.95); animation-delay: -0.2s; }
.wave i:nth-child(3) { transform: scaleY(0.7); animation-delay: -0.4s; }
.wave i:nth-child(4) { transform: scaleY(0.4); animation-delay: -0.1s; }
.mic-lab { font-size: 3.2cqw; color: #6b6074; }

/* e. Point, click, scroll (final frame: clicked) */
.scroll { position: absolute; inset: 0; padding: 3cqw; }
.h { font-family: var(--font-display); font-size: 4.8cqw; font-weight: 800; line-height: 1.2; }
.btn-play {
  position: absolute; left: 61cqw; top: 2.5cqw; width: 22cqw; height: 8.5cqw; display: grid; place-items: center;
  border: 0.5cqw solid #197075; border-radius: 2cqw; background-color: #197075; color: #fff; font-size: 3.8cqw; font-weight: 800;
}
.ripple { position: absolute; left: 72cqw; top: 6.75cqw; width: 14cqw; height: 14cqw; border-radius: 50%; border: 0.6cqw solid #197075; opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
.rows { position: absolute; left: 3cqw; right: 6cqw; top: 13cqw; }
.row { display: flex; align-items: center; gap: 2.2cqw; height: 8cqw; border-bottom: 0.3cqw solid #ece5dc; font-size: 3.8cqw; }
.row i { flex: none; width: 4.4cqw; height: 4.4cqw; border-radius: 1cqw; background: var(--velvet-soft); }
.row:nth-child(3n + 2) i { background: var(--saffron); }
.row:nth-child(3n) i { background: var(--persimmon); }
.row .sk { width: 18cqw; margin: 0 0 0 auto; }
.vtrack { position: absolute; right: 0.8cqw; top: 2cqw; bottom: 2cqw; width: 1.2cqw; border-radius: 1cqw; background: rgba(42, 26, 51, 0.1); }
.thumb { position: absolute; left: 0; right: 0; top: 0; height: 26cqw; border-radius: 1cqw; background: rgba(42, 26, 51, 0.45); }
.ptr { position: absolute; z-index: 3; left: 70cqw; top: 7.2cqw; width: 4.2cqw; height: 6cqw; fill: #2a1a33; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; }

/* The controller strip under each window. The lit button is saffron, gets a halo and a dark symbol, so it never
   relies on colour alone. */
.pad { display: flex; justify-content: center; padding-top: 0.6rem; }
.strip { display: block; height: 4.5rem; width: auto; max-width: 100%; overflow: visible; }
.strip .shape { fill: #46305a; stroke: rgba(246, 241, 234, 0.6); stroke-width: 1.5; }
.strip .well { fill: none; stroke: rgba(246, 241, 234, 0.4); stroke-width: 1.5; stroke-dasharray: 3 3; }
.strip .sy { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.strip .sy.thin { stroke-width: 1.8; }
.strip .k-base .sy, .strip .k-static .sy { stroke: var(--linen); }
.strip .k-on .sy { stroke: var(--plum); }
.strip .tx { stroke: none; font-family: var(--font-display); font-weight: 800; font-size: 12px; }
.strip .k-base .tx { fill: var(--linen); }
.strip .k-on .tx { fill: var(--plum); }
.strip .lab { fill: #ece4f2; font-family: var(--font-body); font-weight: 700; font-size: 11.5px; }
.strip .k-on { opacity: 0; }
.strip .is-lit .k-on { opacity: 1; }
.strip .fill { fill: var(--saffron); stroke: var(--linen); stroke-width: 1.5; }
.strip .arm { stroke-linejoin: round; }
.strip .halo { fill: none; stroke: var(--saffron); stroke-width: 2.5; opacity: 0.75; }
.strip .dotc { fill: var(--plum); }
.strip .pdot { fill: var(--linen); stroke: var(--plum); stroke-width: 1.5; }

/* Replay: hidden until hover or focus, always there on touch screens and for reduced motion. */
.replay {
  position: absolute; z-index: 4; top: 1.4rem; right: 1.4rem; display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 2.25rem; padding: 0.2rem 0.8rem 0.2rem 0.65rem; border: 1px solid rgba(246, 241, 234, 0.55); border-radius: 999px;
  background: rgba(42, 26, 51, 0.92); color: var(--linen); font-family: var(--font-display); font-weight: 800; font-size: 0.92rem;
  cursor: pointer; opacity: 0; transition: opacity 160ms var(--ease-out), background-color 140ms ease;
}
.replay:hover { background: #46305a; }
.demo:hover .replay, .demo:focus-within .replay, .replay:focus-visible { opacity: 1; }
@media (hover: none) { .replay { opacity: 1; min-height: 2.75rem; } }

/* ---- The timelines (generated from the scene scripts; every scene is one .playing class) ---- */
@keyframes wave-bar { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
@keyframes mic-halo { from { transform: scale(0.6); opacity: 0.8; } to { transform: scale(2.1); opacity: 0; } }
@keyframes demo-fade { from { opacity: 0; } to { opacity: 1; } }

@keyframes d-copy-sel {
  0% { transform: scaleX(0); }
  9.47% { transform: scaleX(0); }
  22.11% { transform: scaleX(1); animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  100% { transform: scaleX(1); }
}
@keyframes d-copy-chip {
  0% { opacity: 0; }
  35.79% { opacity: 0; }
  37.05% { opacity: 1; }
  52.63% { opacity: 1; }
  54.95% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-copy-hint {
  0% { opacity: 1; }
  54.21% { opacity: 1; }
  56.84% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-copy-paste {
  0% { opacity: 0; transform: translateY(-3cqw); }
  54.74% { opacity: 0; transform: translateY(-3cqw); animation-timing-function: cubic-bezier(0.3, 1.5, 0.5, 1); }
  61.58% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes d-copy-l2 {
  0% { opacity: 0; }
  26.32% { opacity: 0; }
  27.58% { opacity: 1; }
  67.37% { opacity: 1; }
  69.68% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-copy-cross {
  0% { opacity: 0; }
  32.63% { opacity: 0; }
  33.89% { opacity: 1; }
  40% { opacity: 1; }
  42.32% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-copy-circle {
  0% { opacity: 0; }
  51.58% { opacity: 0; }
  52.84% { opacity: 1; }
  58.95% { opacity: 1; }
  61.26% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-copy-veil {
  0% { opacity: 0; }
  3.16% { opacity: 1; }
  95.26% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes d-zoom-size {
  0% { font-size: 3.8cqw; }
  12.38% { font-size: 3.8cqw; }
  16.67% { font-size: 4.75cqw; }
  25.71% { font-size: 4.75cqw; }
  30% { font-size: 5.7cqw; }
  47.62% { font-size: 5.7cqw; }
  51.9% { font-size: 4.75cqw; }
  62.86% { font-size: 4.75cqw; }
  67.62% { font-size: 3.8cqw; }
  100% { font-size: 3.8cqw; }
}
@keyframes d-zoom-c100 {
  0% { opacity: 1; }
  14.29% { opacity: 1; }
  16.38% { opacity: 0; }
  67.14% { opacity: 0; }
  68.29% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes d-zoom-c125 {
  0% { opacity: 0; }
  15.24% { opacity: 0; }
  16.38% { opacity: 1; }
  27.62% { opacity: 1; }
  29.71% { opacity: 0; }
  50.48% { opacity: 0; }
  51.62% { opacity: 1; }
  65.71% { opacity: 1; }
  67.81% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-zoom-c150 {
  0% { opacity: 0; }
  29.05% { opacity: 0; }
  30.19% { opacity: 1; }
  49.52% { opacity: 1; }
  51.62% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-zoom-l2 {
  0% { opacity: 0; }
  10.48% { opacity: 0; }
  11.62% { opacity: 1; }
  32.38% { opacity: 1; }
  34.48% { opacity: 0; }
  44.76% { opacity: 0; }
  45.9% { opacity: 1; }
  55.24% { opacity: 1; }
  57.33% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-zoom-square {
  0% { opacity: 0; }
  12.38% { opacity: 0; }
  13.52% { opacity: 1; }
  19.05% { opacity: 1; }
  21.14% { opacity: 0; }
  25.71% { opacity: 0; }
  26.86% { opacity: 1; }
  32.38% { opacity: 1; }
  34.48% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-zoom-triangle {
  0% { opacity: 0; }
  47.62% { opacity: 0; }
  48.76% { opacity: 1; }
  54.29% { opacity: 1; }
  56.38% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-zoom-pad {
  0% { opacity: 0; }
  62.86% { opacity: 0; }
  64% { opacity: 1; }
  72.38% { opacity: 1; }
  74.48% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-zoom-dl {
  0% { transform: translateX(0); }
  61.9% { transform: translateX(0); }
  68.57% { transform: translateX(8px); }
  73.33% { transform: translateX(8px); }
  76.19% { transform: translateX(0); }
  100% { transform: translateX(0); }
}
@keyframes d-zoom-dr {
  0% { transform: translateX(0); }
  61.9% { transform: translateX(0); }
  68.57% { transform: translateX(-8px); }
  73.33% { transform: translateX(-8px); }
  76.19% { transform: translateX(0); }
  100% { transform: translateX(0); }
}
@keyframes d-zoom-veil {
  0% { opacity: 0; }
  2.86% { opacity: 1; }
  95.71% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes d-snap-win {
  0% { left: 22cqw; top: 12cqw; width: 56cqw; height: 36cqw; }
  12.86% { left: 22cqw; top: 12cqw; width: 56cqw; height: 36cqw; animation-timing-function: cubic-bezier(0.3, 1.3, 0.5, 1); }
  20.48% { left: 3cqw; top: 3cqw; width: 45cqw; height: 56cqw; }
  36.67% { left: 3cqw; top: 3cqw; width: 45cqw; height: 56cqw; animation-timing-function: cubic-bezier(0.3, 1.3, 0.5, 1); }
  44.29% { left: 52cqw; top: 3cqw; width: 45cqw; height: 56cqw; }
  59.52% { left: 52cqw; top: 3cqw; width: 45cqw; height: 56cqw; animation-timing-function: cubic-bezier(0.3, 1.3, 0.5, 1); }
  67.14% { left: 3cqw; top: 3cqw; width: 94cqw; height: 56cqw; }
  100% { left: 3cqw; top: 3cqw; width: 94cqw; height: 56cqw; }
}
@keyframes d-snap-cl {
  0% { opacity: 0; }
  20% { opacity: 0; }
  21.14% { opacity: 1; }
  36.19% { opacity: 1; }
  38.29% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-snap-cr {
  0% { opacity: 0; }
  43.81% { opacity: 0; }
  44.95% { opacity: 1; }
  59.05% { opacity: 1; }
  61.14% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-snap-cf {
  0% { opacity: 0; }
  66.67% { opacity: 0; }
  67.81% { opacity: 1; }
  100% { opacity: 1; }
}
@keyframes d-snap-l2 {
  0% { opacity: 0; }
  6.67% { opacity: 0; }
  7.81% { opacity: 1; }
  75.24% { opacity: 1; }
  77.33% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-snap-dl {
  0% { opacity: 0; }
  11.43% { opacity: 0; }
  12.57% { opacity: 1; }
  18.1% { opacity: 1; }
  20.19% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-snap-dr {
  0% { opacity: 0; }
  35.24% { opacity: 0; }
  36.38% { opacity: 1; }
  41.9% { opacity: 1; }
  44% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-snap-cross {
  0% { opacity: 0; }
  58.1% { opacity: 0; }
  59.24% { opacity: 1; }
  64.76% { opacity: 1; }
  66.86% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-snap-veil {
  0% { opacity: 0; }
  2.86% { opacity: 1; }
  95.71% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes d-talk-w1 {
  0% { opacity: 0; transform: translateY(0.9cqw); }
  19% { opacity: 0; transform: translateY(0.9cqw); }
  22% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes d-talk-w2 {
  0% { opacity: 0; transform: translateY(0.9cqw); }
  26% { opacity: 0; transform: translateY(0.9cqw); }
  29% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes d-talk-w3 {
  0% { opacity: 0; transform: translateY(0.9cqw); }
  31% { opacity: 0; transform: translateY(0.9cqw); }
  34% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes d-talk-w4 {
  0% { opacity: 0; transform: translateY(0.9cqw); }
  39% { opacity: 0; transform: translateY(0.9cqw); }
  42% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes d-talk-w5 {
  0% { opacity: 0; transform: translateY(0.9cqw); }
  43.5% { opacity: 0; transform: translateY(0.9cqw); }
  46.5% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes d-talk-w6 {
  0% { opacity: 0; transform: translateY(0.9cqw); }
  48% { opacity: 0; transform: translateY(0.9cqw); }
  51% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes d-talk-w7 {
  0% { opacity: 0; transform: translateY(0.9cqw); }
  53% { opacity: 0; transform: translateY(0.9cqw); }
  56% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes d-talk-tri {
  0% { opacity: 0; }
  10% { opacity: 0; }
  11.2% { opacity: 1; }
  62% { opacity: 1; }
  64.2% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-talk-cmd {
  0% { opacity: 0; }
  10% { opacity: 0; }
  11.2% { opacity: 1; }
  62% { opacity: 1; }
  64.2% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-talk-mic {
  0% { opacity: 0; }
  10% { opacity: 0; }
  11.2% { opacity: 1; }
  62% { opacity: 1; }
  64.2% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-talk-gate {
  0% { transform: scaleY(0.12); }
  10% { transform: scaleY(0.12); }
  13.5% { transform: scaleY(1); }
  62% { transform: scaleY(1); }
  65.5% { transform: scaleY(0.12); }
  100% { transform: scaleY(0.12); }
}
@keyframes d-talk-veil {
  0% { opacity: 0; }
  3% { opacity: 1; }
  95.5% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes d-point-ptr {
  0% { left: 9cqw; top: 36cqw; }
  7.27% { left: 9cqw; top: 36cqw; animation-timing-function: linear; }
  7.55% { left: 11.41cqw; top: 30.3cqw; animation-timing-function: linear; }
  8.45% { left: 14.31cqw; top: 25.2cqw; animation-timing-function: linear; }
  10% { left: 17.69cqw; top: 20.7cqw; animation-timing-function: linear; }
  12.09% { left: 21.56cqw; top: 16.8cqw; animation-timing-function: linear; }
  14.82% { left: 25.91cqw; top: 13.5cqw; animation-timing-function: linear; }
  18.18% { left: 30.75cqw; top: 10.8cqw; animation-timing-function: linear; }
  21.55% { left: 36.08cqw; top: 8.7cqw; animation-timing-function: linear; }
  24.27% { left: 41.89cqw; top: 7.2cqw; animation-timing-function: linear; }
  26.36% { left: 48.19cqw; top: 6.3cqw; animation-timing-function: linear; }
  27.91% { left: 54.97cqw; top: 6cqw; animation-timing-function: linear; }
  28.82% { left: 62.24cqw; top: 6.3cqw; animation-timing-function: linear; }
  29.09% { left: 70cqw; top: 7.2cqw; animation-timing-function: linear; }
  100% { left: 70cqw; top: 7.2cqw; }
}
@keyframes d-point-btn {
  0% { background-color: transparent; color: #0e4b4f; transform: scale(1); }
  31.82% { background-color: transparent; color: #0e4b4f; transform: scale(1); }
  33.45% { background-color: #197075; color: #fff; transform: scale(0.93); }
  36.82% { background-color: #197075; color: #fff; transform: scale(1); }
  100% { background-color: #197075; color: #fff; transform: scale(1); }
}
@keyframes d-point-rip {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  32.27% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.2); }
  40% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}
@keyframes d-point-scroll {
  0% { transform: translateY(0); }
  48.18% { transform: translateY(0); }
  69.09% { transform: translateY(-23cqw); }
  100% { transform: translateY(-23cqw); }
}
@keyframes d-point-thumb {
  0% { transform: translateY(0); }
  48.18% { transform: translateY(0); }
  69.09% { transform: translateY(15cqw); }
  100% { transform: translateY(15cqw); }
}
@keyframes d-point-ls {
  0% { opacity: 0; }
  6.36% { opacity: 0; }
  7.45% { opacity: 1; }
  31.82% { opacity: 1; }
  33.82% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-point-cross {
  0% { opacity: 0; }
  31.82% { opacity: 0; }
  32.91% { opacity: 1; }
  38.18% { opacity: 1; }
  40.18% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-point-rs {
  0% { opacity: 0; }
  45.45% { opacity: 0; }
  46.55% { opacity: 1; }
  71.82% { opacity: 1; }
  73.82% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes d-point-lt {
  0% { transform: translate(0, 0); }
  6.36% { transform: translate(0, 0); }
  10% { transform: translate(6px, -5px); }
  27.27% { transform: translate(6px, -5px); }
  30.91% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}
@keyframes d-point-rt {
  0% { transform: translate(0, 0); }
  45.45% { transform: translate(0, 0); }
  49.09% { transform: translate(0, 7px); }
  69.09% { transform: translate(0, 7px); }
  72.73% { transform: translate(0, 0); }
  100% { transform: translate(0, 0); }
}
@keyframes d-point-veil {
  0% { opacity: 0; }
  2.73% { opacity: 1; }
  95.91% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .d-copy.playing .sel { animation: d-copy-sel 9.5s linear infinite; }
  .d-copy.playing .chip { animation: d-copy-chip 9.5s var(--ease-out) infinite; }
  .d-copy.playing .hint { animation: d-copy-hint 9.5s var(--ease-out) infinite; }
  .d-copy.playing .paste-t { animation: d-copy-paste 9.5s linear infinite; }
  .d-copy.playing .g-l2 .k-on { animation: d-copy-l2 9.5s var(--ease-out) infinite; }
  .d-copy.playing .g-cross .k-on { animation: d-copy-cross 9.5s var(--ease-out) infinite; }
  .d-copy.playing .g-circle .k-on { animation: d-copy-circle 9.5s var(--ease-out) infinite; }
  .d-copy.playing .demo-body { animation: d-copy-veil 9.5s linear infinite; }
  .d-zoom.playing .zoomp { animation: d-zoom-size 10.5s var(--ease-out) infinite; }
  .d-zoom.playing .z100 { animation: d-zoom-c100 10.5s var(--ease-out) infinite; }
  .d-zoom.playing .z125 { animation: d-zoom-c125 10.5s var(--ease-out) infinite; }
  .d-zoom.playing .z150 { animation: d-zoom-c150 10.5s var(--ease-out) infinite; }
  .d-zoom.playing .g-l2 .k-on { animation: d-zoom-l2 10.5s var(--ease-out) infinite; }
  .d-zoom.playing .g-square .k-on { animation: d-zoom-square 10.5s var(--ease-out) infinite; }
  .d-zoom.playing .g-triangle .k-on { animation: d-zoom-triangle 10.5s var(--ease-out) infinite; }
  .d-zoom.playing .g-pad .k-on { animation: d-zoom-pad 10.5s var(--ease-out) infinite; }
  .d-zoom.playing .dl { animation: d-zoom-dl 10.5s ease-in-out infinite; }
  .d-zoom.playing .dr { animation: d-zoom-dr 10.5s ease-in-out infinite; }
  .d-zoom.playing .demo-body { animation: d-zoom-veil 10.5s linear infinite; }
  .d-snap.playing .snapwin { animation: d-snap-win 10.5s linear infinite; }
  .d-snap.playing .sc-l { animation: d-snap-cl 10.5s var(--ease-out) infinite; }
  .d-snap.playing .sc-r { animation: d-snap-cr 10.5s var(--ease-out) infinite; }
  .d-snap.playing .sc-f { animation: d-snap-cf 10.5s var(--ease-out) infinite; }
  .d-snap.playing .g-l2 .k-on { animation: d-snap-l2 10.5s var(--ease-out) infinite; }
  .d-snap.playing .g-dl .k-on { animation: d-snap-dl 10.5s var(--ease-out) infinite; }
  .d-snap.playing .g-dr .k-on { animation: d-snap-dr 10.5s var(--ease-out) infinite; }
  .d-snap.playing .g-cross .k-on { animation: d-snap-cross 10.5s var(--ease-out) infinite; }
  .d-snap.playing .demo-body { animation: d-snap-veil 10.5s linear infinite; }
  .d-talk.playing .tw1 { animation: d-talk-w1 10s var(--ease-out) infinite; }
  .d-talk.playing .tw2 { animation: d-talk-w2 10s var(--ease-out) infinite; }
  .d-talk.playing .tw3 { animation: d-talk-w3 10s var(--ease-out) infinite; }
  .d-talk.playing .tw4 { animation: d-talk-w4 10s var(--ease-out) infinite; }
  .d-talk.playing .tw5 { animation: d-talk-w5 10s var(--ease-out) infinite; }
  .d-talk.playing .tw6 { animation: d-talk-w6 10s var(--ease-out) infinite; }
  .d-talk.playing .tw7 { animation: d-talk-w7 10s var(--ease-out) infinite; }
  .d-talk.playing .g-tri .k-on { animation: d-talk-tri 10s var(--ease-out) infinite; }
  .d-talk.playing .g-cmd .k-on { animation: d-talk-cmd 10s var(--ease-out) infinite; }
  .d-talk.playing .mic-on { animation: d-talk-mic 10s var(--ease-out) infinite; }
  .d-talk.playing .wave { animation: d-talk-gate 10s var(--ease-out) infinite; }
  .d-talk.playing .demo-body { animation: d-talk-veil 10s linear infinite; }
  .d-talk.playing .wave i { animation: wave-bar 0.62s ease-in-out infinite alternate; }
  .d-talk.playing .mic-on b { animation: mic-halo 1.1s ease-out infinite; }
  .d-point.playing .ptr { animation: d-point-ptr 11s linear infinite; }
  .d-point.playing .btn-play { animation: d-point-btn 11s var(--ease-out) infinite; }
  .d-point.playing .ripple { animation: d-point-rip 11s cubic-bezier(0.2, 0.7, 0.3, 1) infinite; }
  .d-point.playing .scroll { animation: d-point-scroll 11s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
  .d-point.playing .thumb { animation: d-point-thumb 11s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
  .d-point.playing .g-ls .k-on { animation: d-point-ls 11s var(--ease-out) infinite; }
  .d-point.playing .g-cross .k-on { animation: d-point-cross 11s var(--ease-out) infinite; }
  .d-point.playing .g-rs .k-on { animation: d-point-rs 11s var(--ease-out) infinite; }
  .d-point.playing .g-ls .head { animation: d-point-lt 11s var(--ease-out) infinite; }
  .d-point.playing .g-rs .head { animation: d-point-rt 11s var(--ease-out) infinite; }
  .d-point.playing .demo-body { animation: d-point-veil 11s linear infinite; }
}

/* Reduced motion: nothing autoplays, the scene shows its final frame, and Replay is one short fade. */
@media (prefers-reduced-motion: reduce) {
  .demo.playing .demo-body { animation: demo-fade 0.6s ease-out both; }
  .replay { opacity: 1; }
}

/* "Presets and combos": a controller picker, four preset cards and a strip of combos. The picker swaps the button
   names in every card (demos.js sets data-pad on the section). No inline styles (CSP): everything is a class. */
.presets .head { margin-bottom: 1.6rem; }
.picker { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 2.2rem; }
.ptabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; width: 100%; max-width: 26rem; padding: 0.3rem; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.ptab {
  min-height: 2.75rem; padding: 0.5rem 0.3rem; font: inherit; font-weight: 700; font-size: 0.95rem; color: var(--fg);
  background: transparent; border: 0; border-radius: 12px; cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.ptab:hover { background: color-mix(in srgb, var(--fg) 8%, transparent); }
.ptab[aria-pressed="true"] { background: var(--plum); color: var(--linen); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ptab[aria-pressed="true"] { background: var(--saffron); color: var(--plum); } }
.ptab:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pstage { width: 100%; max-width: 26rem; padding: 1rem 1.2rem 0.6rem; background: var(--stage); border-radius: 26px; }
.cart { display: block; width: 100%; height: auto; }
.cart[hidden] { display: none; }
.honest { margin: 0; max-width: 34rem; text-align: center; color: var(--muted); font-size: 0.98rem; }

.pcards { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 44rem) { .pcards { grid-template-columns: 1fr 1fr; } }
.pcard { padding: 1.3rem 1.3rem 1.1rem; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: 22px; }
.pcard h3 { margin: 0; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.2; }
.pcard .who { margin: 0.3rem 0 0.9rem; color: var(--muted); font-size: 0.98rem; line-height: 1.45; }
.prows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.prow { display: grid; grid-template-columns: 5.2rem 6.4rem 1fr; align-items: center; gap: 0.5rem; min-height: 2rem; }
.prow[hidden] { display: none; }
.chip { justify-self: start; padding: 0.1rem 0.55rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.5; color: var(--plum); background: var(--saffron); border-radius: 999px; white-space: nowrap; }
.chip-base { color: var(--fg); background: transparent; border: 1px solid var(--line); }
.glyph { justify-self: start; padding: 0.15rem 0.6rem; font-size: 0.88rem; font-weight: 700; color: var(--linen); background: var(--stage); border-radius: 9px; white-space: nowrap; }
.act { font-size: 1rem; line-height: 1.3; }
@media (max-width: 30rem) {
  .prow { grid-template-columns: auto 1fr; grid-template-areas: "g a" "c c"; row-gap: 0.15rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--line); }
  .prow .glyph { grid-area: g; }
  .prow .act { grid-area: a; }
  .prow .chip { grid-area: c; }
  .prow:last-child { border-bottom: 0; }
}

.combos-h { margin: 2.6rem 0 1rem; font-family: var(--font-display); font-size: 1.5rem; }
.combos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.8rem; }
@media (min-width: 40rem) { .combos { grid-template-columns: 1fr 1fr; } }
@media (min-width: 72rem) { .combos { grid-template-columns: repeat(4, 1fr); } }
.ccard { padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.ccard h4 { margin: 0 0 0.3rem; font-family: var(--font-display); font-size: 1.1rem; line-height: 1.25; }
.ccard p { margin: 0; color: var(--muted); font-size: 0.96rem; line-height: 1.45; }
.ps-tag { display: inline-block; margin-top: 0.5rem; padding: 0.05rem 0.5rem; font-size: 0.74rem; font-weight: 700; color: var(--fg); border: 1px solid var(--line); border-radius: 999px; }
.presets:not([data-pad="ps"]) .ccard.ps-only { opacity: 0.55; }

/* Switching pads: the cards lift in once. Reduced motion gets no movement at all. */
@keyframes pad-lift { from { opacity: 0.4; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.presets.swapped .pcard, .presets.swapped .cart:not([hidden]) { animation: pad-lift 0.32s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .presets.swapped .pcard, .presets.swapped .cart:not([hidden]) { animation: none; }
  .ptab { transition: none; }
}