/* ======================================================================= テーマトークン 見た目はすべて CSS 変数で表現し、 を切り替えると 通常スライド・プレイヤースライド・ナビまで一括で変わる。 data-theme は Markdown frontmatter の theme: を deck 起動時に適用する (lib/deck.rb の Kotoyomi::Theme)。画面での切り替え UI は無し。 ======================================================================= */ :root, [data-theme="minimal"] { --bg: #eef1f5; --surface: #ffffff; --ink: #1a1d23; --muted: #6b7280; --accent: #2563eb; --accent-ink: #ffffff; --border: #e3e7ee; --shadow: 0 10px 30px rgba(20, 30, 60, 0.08); --code-bg: #f1f3f7; --font-body: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Segoe UI", system-ui, sans-serif; --font-head: var(--font-body); --head-weight: 600; --head-spacing: -0.01em; --h1-size: clamp(2.4rem, 5vw, 4rem); --slide-radius: 16px; } [data-theme="dark"] { --bg: #0e1014; --surface: #171b22; --ink: #e9edf2; --muted: #97a0ad; --accent: #4cc2ff; --accent-ink: #07151e; --border: #28303c; --shadow: 0 12px 36px rgba(0, 0, 0, 0.55); --code-bg: #21272f; } [data-theme="default"] { --bg: #e7ebf1; --surface: #fbfcfe; --ink: #0d1117; --muted: #54607a; --accent: #ff4d5e; --accent-ink: #ffffff; --border: #d8dfe9; --shadow: 0 18px 44px rgba(20, 30, 60, 0.14); --code-bg: #eef1f6; --font-body: "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif; --head-weight: 800; --head-spacing: -0.03em; --h1-size: clamp(2rem, 5.0vw, 4rem); } /* ======================================================================= ベース ======================================================================= */ html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); transition: background 0.3s ease, color 0.3s ease; } .error { color: #b00020; background: #fff0f0; border: 1px solid #f3c5c5; padding: 0.75rem 1rem; margin: 0; white-space: pre-wrap; } /* Lilac の data-show / data-hide が付け外しする予約クラス。 */ .lil-hidden { display: none !important; } [hidden] { display: none; } /* ネイティブ controls は隠す(操作は自前ボタン + 進捗バー)。 */ audio { display: none; } /* ======================================================================= スライドビューア (deck) ======================================================================= */ .deck { display: flex; flex-direction: column; min-height: 100vh; box-sizing: border-box; /* 画面下部に固定された .deck-nav の帯を確保し、スライド本文 (特に