.reference-player{font-family:system-ui,sans-serif;color:#172b42;max-width:880px;margin:1rem auto;padding:0 1rem}.reference-player h1{font-size:1.5rem;margin:.5rem 0}.reference-player p{font-size:.9rem;line-height:1.5}.reference-stage{display:block;width:100%;border:1px solid #dbe3ea;border-radius:10px;background:#f7f9fc}.player-controls{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.player-controls button,.player-controls select{font:inherit;padding:.5rem .75rem;border:1px solid #8d9bad;border-radius:6px;background:white}.player-controls button:focus-visible{outline:3px solid #3484d2}.player-status{color:#516278}.reference-player a{color:#175faa}.reference-player li{margin:.5rem 0}
.motion-steps{list-style:disc;margin:.75rem 0;padding:.25rem 0 .25rem 1.4rem;display:grid;gap:.3rem}.motion-steps li{padding:.35rem .55rem;border-radius:.45rem;color:#516278;transition:background-color .18s ease,color .18s ease}.motion-steps li.is-current{background:#e8f5ef;color:#145f50;font-weight:700;box-shadow:inset 3px 0 #16806c}
.touch-screen-stage{max-width:720px;margin-inline:auto}.touch-phone{max-width:440px}