.motion-preview { margin: 20px 0 36px; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: #1c1c19; }
.motion-stage { box-sizing: border-box; height: 540px; display: flex; align-items: center; justify-content: center; padding: 32px 24px 24px; }
.motion-frame-holder { position: relative; width: 402px; height: 616px; flex: none; }
.motion-frame { position: relative; width: 402px; height: 616px; overflow: hidden; isolation: isolate; border-radius: 42px; background: linear-gradient(to top, rgb(244.268 237.851 212.184), rgb(255 253.717 248.157)); transform-origin: top left; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif; }
.prose .motion-glow { position: absolute; left: -99px; top: 483px; max-width: none; margin: 0; border: 0; border-radius: 0; pointer-events: none; }
.motion-stack { position: absolute; inset: 0; }
.motion-card { position: absolute; left: 0; top: 0; margin: 0; box-sizing: content-box; overflow: hidden; border: 4px solid white; border-radius: 16px; box-shadow: 0 2px 12px rgb(0 0 0 / 10%); background: white; transform-origin: center; backface-visibility: hidden; will-change: transform, width, height, filter; }
/* Keep animated photos inside their card, overriding the reader's important intrinsic-image sizing. */
.prose .motion-card img { display: block; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0; object-fit: cover; border: 0; border-radius: 12px; pointer-events: none; user-select: none; }
.motion-caption { position: absolute; left: 200px; top: 407px; transform: translateX(-50%); display: flex; align-items: center; width: max-content; font-size: 20px; font-weight: 400; line-height: 28px; letter-spacing: -.26px; white-space: nowrap; color: #1a1a1a; }
.motion-prefix { white-space: pre; flex: none; }
.motion-words { position: relative; display: block; height: 28px; flex: none; }
.motion-word { position: absolute; left: 0; top: 0; opacity: 0; }
.motion-word[data-topic='life'] { opacity: 1; }
.motion-trace { position: absolute; left: 121px; top: 463px; width: 160px; height: 52px; padding: 12px 20px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 99px; background: black; color: white; font-size: 17px; font-weight: 590; line-height: 22px; letter-spacing: -.43px; box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 8px rgb(0 0 0 / 9%), 0 18px 11px rgb(0 0 0 / 5%), 0 32px 13px rgb(0 0 0 / 1%); cursor: pointer; }
.prose .motion-trace img { width: 22px; height: 18px; margin: 0; border: 0; border-radius: 0; }
.motion-controls { width: calc(100% - 48px); margin: 0 auto; padding-bottom: 16px; color: #a7a79b; }
.motion-control-row { display: flex; align-items: center; gap: 8px; }
.motion-control-row button { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #e4e3dc; cursor: pointer; }
.motion-control-row [data-motion='restart'] { margin-left: -8px; margin-right: 8px; }
.motion-control-row button svg { display: block; width: 18px; height: 18px; pointer-events: none; }
.motion-control-row [data-motion-icon='pause'] { display: none; }
.motion-control-row [data-playing='true'] [data-motion-icon='play'] { display: none; }
.motion-control-row [data-playing='true'] [data-motion-icon='pause'] { display: block; }
.motion-control-row button:hover { background: #30302a; }
.motion-control-row button:disabled { opacity: .5; cursor: default; }
.motion-control-row output { flex: none; min-width: 90px; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.motion-scrubber { flex: 1 1 0; min-width: 0; width: 0; margin: 0; accent-color: #dedbc9; cursor: pointer; }
.prose .motion-error { margin: 8px 0 0; color: #a7a79b; font-size: 11px; line-height: 18px; text-align: center; }
.motion-preview button:focus-visible, .motion-preview input:focus-visible { outline: 2px solid #a1bde1; outline-offset: 4px; }
.motion-prompt { margin: 20px 0 36px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-app); }
.motion-prompt-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border-soft); font-size: 13px; color: var(--text-muted); }
.motion-prompt-header > span, .motion-source-heading > span { color: var(--text-main); font-size: 15px; font-weight: 600; }
.motion-prompt-actions { display: flex; align-items: center; gap: 8px; }
.motion-prompt-language { display: inline-flex; align-items: center; gap: 5px; }
.motion-prompt-language span { color: var(--text-muted); }
.motion-prompt-language .is-active { color: var(--text-main); font-weight: 600; }
/* Prompt and source controls share one size spec, including desktop. */
.motion-prompt-header button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 36px; min-height: 36px; max-height: 36px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-reader, white); color: var(--text-main); font: inherit; line-height: 18px; cursor: pointer; white-space: nowrap; }
.motion-prompt-header button:hover { background: var(--control); }
.motion-prompt-text { padding: 20px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: var(--reader-line-height); }
.motion-source { container: motion-source / inline-size; min-width: 0; margin: 20px 0 36px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-app); }
.motion-source .motion-prompt-header { flex-wrap: wrap; }
.motion-source-heading { display: flex; flex: none; align-items: center; flex-wrap: nowrap; gap: 10px; }
.motion-source-heading > span { white-space: nowrap; }
.motion-source .motion-prompt-actions { flex: none; }
.motion-prompt-header .motion-source-unlock { color: #ac502e; background: #fbede4; border-color: #edd2c3; transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease; }
.motion-prompt-header .motion-source-unlock:hover { color: #934225; background: #f7e1d3; border-color: #dfb39a; }
.motion-prompt-header .motion-source-unlock:active { color: #823a20; background: #f2d5c2; border-color: #d29b7e; }
.motion-source-unlock:focus-visible { outline: 2px solid #bf6845; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .motion-source-unlock { transition: none; } }
.motion-source-unlock svg, .motion-source-copy svg { width: 13px; height: 13px; flex: none; }
.motion-source-copy { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.motion-prompt-header .motion-source-copy:disabled { color: var(--text-muted); background: var(--bg-app); cursor: not-allowed; opacity: .65; }
.motion-source-body { position: relative; --motion-source-code-line: 20.4px; }
/* Show all twenty public rows at every viewport size; fade text, not the background. */
.motion-source.is-locked .motion-source-scroll { height: auto; max-height: none; line-height: var(--motion-source-code-line); overflow: hidden; user-select: none; pointer-events: none; }
.motion-source-mask { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 20px 20px; background: var(--bg-reader, white); }
.prose .motion-source-mask p { margin: 0; color: var(--text-muted); font-size: 13px; text-align: center; }
.motion-source-mask button { padding: 5px 12px; border: 1px solid var(--border); border-radius: 6px; color: var(--text-main); background: var(--bg-reader, white); font: inherit; font-size: 13px; cursor: pointer; }
.prose .motion-source-scroll { box-sizing: border-box; max-width: 100%; max-height: 420px; margin: 0; padding: 16px 20px; overflow: auto; overscroll-behavior: contain; border: 0; border-radius: 0; background: var(--bg-reader, white); white-space: pre; overflow-wrap: normal; font-size: 12px; line-height: 1.7; tab-size: 4; }
.motion-source-text { font: inherit; color: var(--text-main); }
.motion-source-scroll:focus-visible { outline: 2px solid #a1bde1; outline-offset: -2px; }
@media (max-width: 700px) { .prose .motion-source-scroll { max-height: 320px; padding: 16px; } }
@media (max-width: 700px) {
  /* Size from this module's width, not the viewport or the global article gutters. */
  .motion-stage { width: 100%; height: auto; max-height: 540px; aspect-ratio: 402 / 616; padding: 16px; }
  .motion-controls { width: calc(100% - 24px); padding-bottom: 12px; }
  .motion-control-row button { width: 44px; height: 44px; }
  .motion-scrubber { height: 44px; touch-action: pan-y; }
  .motion-prompt-header { padding: 12px; flex-wrap: wrap; gap: 8px; }
  .motion-prompt-text { padding: 16px; }
  .motion-prompt-header button { padding-inline: 10px; }
  .motion-prompt-actions { margin-left: auto; gap: 6px; }
  .motion-source .motion-prompt-actions { justify-content: flex-end; }
  .motion-source-mask { padding-inline: 16px; }
}
/* Only spacing changes with module width. Label visibility is measured from
   actual full-label widths in mountMotionSourceLayout, never this breakpoint. */
@container motion-source (max-width: 460px) {
  .motion-source .motion-prompt-header { padding: 10px; gap: 4px; }
  .motion-source-heading { flex-wrap: nowrap; gap: 4px; }
  .motion-source-heading > span { white-space: nowrap; }
  .motion-source .motion-prompt-actions { flex: 0 0 auto; margin-left: auto; gap: 4px; }
}
.motion-source.is-unlock-icon-only .motion-source-unlock { justify-content: center; flex: none; width: 44px; padding: 0; }
.motion-source.is-unlock-icon-only .motion-source-unlock-label { display: none; }
@media (max-width: 400px) {
  .motion-control-row { gap: 4px; }
  .motion-control-row [data-motion='restart'] { margin-left: -4px; margin-right: 0; }
  .motion-control-row output { min-width: 74px; font-size: 11px; }
  .motion-prompt-header button { padding-inline: 8px; }
}