/* * Bilingual EN/JA slide toggle * * Wrap parallel content: * ::: {.lang-en} * English text here. * ::: * ::: {.lang-ja} * 日本語のテキスト。 * ::: * * Default: EN visible, JA hidden. * When has class `show-ja`: JA visible, EN hidden. * Toggle key: L (handled in lang-toggle.js). * Choice persists via localStorage key `hml-slide-lang`. */ /* Load Noto Sans JP as a web font so Japanese renders even on systems without a CJK font installed (headless renderers, minimal Linux). */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&display=swap'); /* Apply Japanese-capable font fallback to .lang-ja content. Browser chooses Noto Sans JP for CJK code points and falls through to the theme font for ASCII. */ .lang-ja, .lang-ja * { font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", Inter, sans-serif; } /* Hide the inactive language — works for block divs AND inline spans. `display: none` removes the element from layout entirely, so flex children, list items, and headings behave correctly regardless of whether the wrapper is a

or . */ .lang-ja { display: none; } body.show-ja .lang-en { display: none; } /* Restore the DEFAULT display type when JA is active — this lets spans stay inline and divs stay block, so flex layouts (e.g. the agenda list items) aren't broken by our toggle. */ body.show-ja .lang-ja { display: revert; } /* Floating language badge — bottom-right corner, muted */ .lang-badge { position: fixed; bottom: 0.6em; right: 0.6em; z-index: 100; padding: 0.25em 0.6em; font-size: 0.65rem; font-family: Inter, sans-serif; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.45); background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.25em; pointer-events: none; user-select: none; } .lang-badge .lang-hint { color: rgba(255, 255, 255, 0.3); margin-left: 0.5em; }