.motion-tool { margin-block: 32px; }
.motion-tool h2 { margin: 0 0 16px; }
.motion-tool p { max-width: 76ch; }
.motion-tool [hidden] { display: none !important; }
.motion-tool-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-block: 24px; }
.motion-tool fieldset { min-width: 0; padding: 0; border: 0; margin: 0; }
.motion-tool legend { font-weight: 700; margin-bottom: 12px; }
.motion-tool fieldset label { display: flex; align-items: center; gap: 10px; padding: 12px; margin-bottom: 8px; min-height: 48px; border: 1px solid #444134; border-radius: 12px; cursor: pointer; color: #ddd8ca; }
.motion-tool fieldset label:has(input:checked) { background: #2c281a; border-color: #cfb361; color: #ffe7a3; }
.motion-tool input[type=radio] { accent-color: #dcc174; width: 18px; height: 18px; flex: 0 0 18px; }
.motion-tool-extra { display: block; font-weight: 700; margin: 20px 0 10px; }
.motion-tool-extra span { font-size: 13px; font-weight: 400; color: #b9b3a5; margin-left: 8px; }
.motion-tool input[type=text], .motion-tool textarea { box-sizing: border-box; width: 100%; max-width: 100%; padding: 16px; border: 1px solid #514b38; border-radius: 14px; font: inherit; line-height: 1.6; color: #eee9dd; background: #10110e; }
.motion-tool textarea { resize: vertical; min-height: 210px; }
.motion-tool :is(input, textarea, button, a):focus-visible { outline: 2px solid #ead082; outline-offset: 4px; }
.motion-tool-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.motion-tool-actions .button { white-space: normal; text-align: center; min-height: 48px; }
.motion-tool [role=status] { color: #ead082; min-height: 1.5em; margin-block: 10px; }
.motion-tool #motion-hint { font-size: 14px; line-height: 1.6; color: #b9b3a5; }
@media (max-width: 700px) { .motion-tool-options { grid-template-columns: 1fr; } .motion-tool-actions .button { width: 100%; } .motion-tool-extra span { display: block; margin: 4px 0 0; } }