/* Motion page: live title in code */
.mo { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-areas: 'stage ctl' 'tl ctl'; gap: 12px clamp(16px, 2.4vw, 32px); align-items: start; }
.mo-stage {
  --mo-bg: #0b0b0c; --mo-ink: #f1efea; --mo-acc: #ff453a; --mo-w: 600;
  grid-area: stage; position: relative; display: grid; place-items: center; height: clamp(380px, 62vh, 680px);
  border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); overflow: hidden;
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1.5px); background-size: 22px 22px;
}
.mo-stage canvas { max-width: calc(100% - 28px); max-height: calc(100% - 56px); width: auto; height: auto; aspect-ratio: var(--ar, 16 / 9); border-radius: 6px; box-shadow: 0 30px 70px -36px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--line); }
.mo-stage canvas { width: 100%; height: auto; }
.mo-read { position: absolute; left: 14px; bottom: 10px; right: 14px; font-size: 11px; color: var(--muted); letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mo-tl { grid-area: tl; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.mo-play { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--btn-bg); color: var(--btn-ink); display: grid; place-items: center; cursor: pointer; }
.mo-play svg { width: 18px; height: 18px; fill: currentColor; }
.mo-scrub { position: relative; height: 48px; border-radius: 8px; background: #141416; border: 1px solid var(--line); cursor: ew-resize; touch-action: none; overflow: hidden; }
.mo-ticks { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 1px, transparent 1px 20%) left bottom / 100% 14px no-repeat, repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 2%) left bottom / 100% 7px no-repeat; }
.mo-keys { position: absolute; inset: 0; }
.mo-keys i { position: absolute; top: 12px; width: 10px; height: 10px; margin-left: -5px; background: var(--mo-acc, #d0609a); transform: rotate(45deg); border-radius: 2px; opacity: 0.85; background: #d0609a; }
.mo-ph { position: absolute; left: 0; top: 0; bottom: 0; width: 0; will-change: transform; }
.mo-ph i { position: absolute; left: -1px; top: 0; bottom: 0; width: 2px; background: var(--rec); box-shadow: 0 0 8px var(--rec); }
.mo-ph i::before { content: ''; position: absolute; left: -5px; top: 0; width: 12px; height: 10px; background: var(--rec); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
.mo-scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mo-tc { font-size: 13px; font-variant-numeric: tabular-nums; min-width: 5ch; }
.mo-ctl { grid-area: ctl; display: grid; gap: 18px; padding: clamp(16px, 2vw, 24px); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.mo-field { display: grid; gap: 8px; }
.mo-field input {
  width: 100%; min-height: 56px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--text);
  font-family: var(--f-display); font-weight: var(--display-w); font-variation-settings: var(--display-vs); font-size: 22px; letter-spacing: var(--display-ls);
}
.mo-field input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: transparent; }
.mo-group { display: grid; gap: 8px; }
.mo-seg { display: flex; flex-wrap: wrap; border-radius: 12px; }
.mo-seg button { flex: 1 1 auto; justify-content: center; min-height: 38px; font-size: 13px; }
.mo-seg button[aria-checked='true'] { background: var(--text); color: var(--bg); }
.mo-out { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; border-top: 1px solid var(--line); padding-top: 16px; }
.mo-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rec); }
#moRec.on { border-color: var(--rec); color: var(--rec); }
#moRec.on .mo-dot { animation: modot 1s steps(2) infinite; }
@keyframes modot { 50% { opacity: 0.15; } }

@media (max-width: 900px) {
  .mo { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'stage' 'tl' 'ctl'; }
  .mo-stage { height: auto; min-height: 260px; padding: 12px 12px 34px; }
  .mo-stage canvas { max-height: 62svh; width: auto; max-width: 100%; }
  .mo-field input { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) { #moRec.on .mo-dot { animation: none; } }