.moon-motion-help {
 box-sizing: border-box;
 width: min(520px, calc(100vw - 32px));
 max-width: none;
 max-height: calc(100vh - 32px);
 max-height: calc(100dvh - 32px);
 margin: auto;
 padding: 24px;
 overflow-y: auto;
 border: 2px solid #d9ab67;
 border-radius: 20px;
 background: #fff7e9;
 color: #292b49;
 font: 500 18px/1.5 system-ui, sans-serif;
 text-align: left;
}
.moon-motion-help::backdrop { background: rgb(12 16 42 / 72%); }
.moon-motion-help h2 { margin: 0 0 12px; color: #292b49; font: 800 28px/1.2 'Baloo 2', system-ui, sans-serif; }
.moon-motion-help p { margin: 12px 0; color: inherit; font: inherit; }
.moon-motion-help ol { margin: 12px 0; padding-left: 26px; }
.moon-motion-help li { margin: 5px 0; }
.moon-motion-help .moon-motion-note { font-size: 16px; }
.moon-motion-help [role=status]:empty { display: none; }
.moon-motion-help [role=status] { font-weight: 700; }
.moon-motion-actions { display: grid; gap: 10px; margin-top: 18px; }
.moon-motion-help button {
 box-sizing: border-box;
 width: 100%;
 min-width: 44px;
 min-height: 48px;
 padding: 10px 16px;
 border: 2px solid #584773;
 border-radius: 12px;
 background: #fff7e9;
 color: #292b49;
 font: 700 17px/1.3 system-ui, sans-serif;
 cursor: pointer;
}
.moon-motion-help #motion-help-reload { background: #584773; color: #fff; }
.moon-motion-help button:focus-visible { outline: 3px solid #176176; outline-offset: 3px; }
@media (max-height: 750px) {
 .moon-motion-help { padding: 18px; font-size: 17px; line-height: 1.35; }
 .moon-motion-help h2 { font-size: 26px; }
 .moon-motion-help p { margin: 9px 0; }
 .moon-motion-help li { margin: 3px 0; }
 .moon-motion-actions { gap: 8px; margin-top: 12px; }
}