/* Keyboard access and the image viewer. The original theme controls the layout. */
/* Scroll with the list, but keep the menu in the header of an open help panel. */
.header_toggle:not(.active) { position: relative; }
.main:has(.how_to_contents.active) > .header_toggle { position: sticky; }
.header_toggle i.icon_menu { top: 0; width: 50px; height: 50px; transform: translateX(-50%); }
.header_toggle i.icon_menu::before { background-image: url('/assets/ico_header_menu.png'); background-size: contain; filter: brightness(0) invert(1); }
.header_menu_label { position: absolute; bottom: 4px; left: 0; width: 100%; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; text-align: center; }
.header_toggle.active .header_menu_label { display: none; }
/* Move by exactly one rendered tile so each animation cycle joins seamlessly. */
.background { animation-name: busyohou-background-scroll; }
.background.main_bg { --background-tile-width: calc(70vh * 1242 / 2544); background-size: var(--background-tile-width) 100%; }
.background.footer_bg { --background-tile-width: calc(70px * 620 / 300); background-size: var(--background-tile-width) 100%; }
@keyframes busyohou-background-scroll {
  from { background-position-x: 0px; }
  to { background-position-x: var(--background-tile-width); }
}
[role="button"]:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #124b70; outline-offset: 4px; }
.image-viewer { border: 0; border-radius: 8px; padding: 40px 16px 16px; max-width: min(94vw, 960px); max-height: 94dvh; background: #fff; color: #333; }
.image-viewer::backdrop { background: rgba(0, 0, 0, .82); }
.image-viewer img { display: block; max-width: 100%; max-height: 76dvh; width: auto; height: auto; margin: auto; }
.image-viewer p { text-align: center; margin: 8px 0 0; }
.image-viewer-close { position: absolute; top: 0; right: 8px; font-size: 32px; background: transparent; border: 0; cursor: pointer; line-height: 40px; color: #333; }
.not-found { padding: 24px; }