.motion-guide{max-width:1100px;margin:0 auto;padding:24px 20px 56px}.motion-guide h1{font-size:clamp(24px,3vw,34px);font-weight:700}.motion-guide h2{font-size:21px;font-weight:700;margin:0 0 18px}.motion-guide h3{font-size:18px;font-weight:700}.motion-guide p{margin:12px 0}.motion-guide .motion-intro{max-width:72ch}.motion-panel{background:var(--cl-surface);border:1px solid var(--cl-line);border-radius:12px;padding:24px;margin:24px 0}.motion-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.motion-task{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:14px 8px;background:var(--cl-surface);color:var(--cl-ink);border:1px solid var(--cl-border);border-radius:9px;cursor:pointer;line-height:1.5}.motion-task strong{font-size:17px}.motion-task span{font-size:11pt}.motion-task svg{width:80px;height:56px;fill:var(--cl-soft);stroke:var(--cl-accent);stroke-width:3;stroke-linejoin:round}.motion-task[aria-pressed=true]{border:2px solid var(--cl-primary);background:var(--cl-soft)}.motion-task:focus-visible,.motion-route-link:focus-visible{outline:3px solid var(--cl-focus);outline-offset:3px}.motion-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.motion-fields label{display:flex;flex-direction:column;gap:8px;font-weight:700;min-width:0}.motion-fields select{width:100%;min-height:46px;background:var(--cl-input);color:var(--cl-ink);border:1px solid var(--cl-border);padding:9px 10px;border-radius:7px;font-size:12pt}.motion-guide [hidden]{display:none!important}.motion-guide ul,.motion-guide ol{padding-left:23px}.motion-steps{list-style:none;padding:0!important;display:grid;gap:12px}.motion-route-link{display:flex;flex-direction:column;gap:7px;padding:18px;color:var(--cl-ink);text-decoration:none;border:1px solid var(--cl-border);border-left:5px solid var(--cl-primary);border-radius:8px;background:var(--cl-surface);min-height:44px}.motion-route-link:hover{background:var(--cl-hover)}.motion-route-link strong{font-size:18px;text-decoration:underline;text-underline-offset:4px}.motion-notes li{margin:12px 0}.motion-prepare{background:var(--cl-soft);padding:14px 18px;border-radius:8px}.motion-empty{padding:18px;border-left:4px solid var(--cl-accent)}.motion-scope{border-top:1px solid var(--cl-line);padding-top:16px;color:var(--cl-muted)}.calc-motion-entry{margin:12px 0}.calc-motion-entry a{display:inline-block;min-height:44px;line-height:1.6;padding:10px 14px;border:1px solid var(--cl-border);border-radius:6px;font-weight:700;text-underline-offset:4px}.diagram-only .calc-motion-entry{display:none}
.unit-site main.motion-guide{display:block;width:100%;box-sizing:border-box}.motion-guide>h1,.motion-guide>.motion-intro{margin-left:0;text-align:left}.motion-guide .motion-intro{width:auto}
@media(max-width:760px){.motion-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.motion-fields{grid-template-columns:1fr}.motion-panel{padding:18px}.motion-guide{padding:16px 14px 40px}.motion-task{min-height:135px}}
.motion-guide .motion-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.motion-guide .motion-task{min-height:205px;padding:16px 10px;justify-content:flex-start}.motion-guide .motion-task svg{width:120px;height:90px;flex-shrink:0;fill:none;stroke:none}.motion-guide .motion-task strong{font-size:18px}.motion-guide .motion-task span{line-height:1.6}
@media(max-width:1000px){.motion-guide .motion-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.motion-guide .motion-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.motion-guide .motion-task{min-height:205px;padding:12px 6px}.motion-guide .motion-task svg{width:110px;height:83px}.motion-guide .motion-task strong{font-size:17px}}
@media(max-width:360px){.motion-guide .motion-grid{grid-template-columns:1fr}.motion-guide .motion-task{min-height:180px}}
#motion-options,#motion-tasks-card{scroll-margin-top:20px}.motion-change{display:inline-block;margin-bottom:16px;min-height:44px;padding:7px 0;font-size:11pt;text-underline-offset:4px}
html[data-color-mode=dark] .motion-task svg [fill="#176da6"]{fill:#8bbde8}html[data-color-mode=dark] .motion-task svg [stroke="#176da6"]{stroke:#8bbde8}
.motion-learn-link{display:inline-block;font-weight:700;min-height:44px;margin:4px 8px 6px;padding:9px 8px;text-underline-offset:4px}