/* index.html の中にあった見た目（シミュレーション）。CSP で <style> を許可しないため、ファイルに分けた（2026-11-04） */
  /* =========================================================
     全画面の見た目：「夜の練習部屋 × 8色のピック」（2026-10-09 シミュレーション）
     ・地＝クルミ材の暗い茶（#16110e）。カードは動画が透ける「すりガラス」＋細い髪の毛線
     ・8色は「舞台の灯り」：暗い地の上では塗りの色そのものを文字・線に使える（各 5.5:1 以上）
     ・押せる厚み（ポップ）は残し、塗りのボタンに色の光を足す
     ・欧文と数字は Bricolage Grotesque、和文は Zen Maru Gothic のまま
     ・背景動画は全画面に敷く。ホームは上 66svh で再生、ほかの画面は上 46svh に暗く敷いて止める（読む画面で動きが気を散らさないように）
     クラス：sim-dark は <html> に常に付ける（全画面）。sim-home はスクリプトがホーム表示中だけ付ける（ホームの並び）
     ========================================================= */
  .sim-dark {
    --bg: #16110e;
    --glass: rgba(33, 26, 21, .86);
    --hair: rgba(255, 232, 205, .14);       /* 装飾の髪の毛線 */
    --surface: rgba(255, 232, 205, .06);
    --surface-2: rgba(255, 232, 205, .11);
    --line: rgba(255, 232, 205, .18);
    --field: #a39482;                        /* 入力欄の枠：カードの上で 3:1 以上 */
    --text: #f6eee4;                         /* 純白にしない。生成りの白 */
    --muted: #c4b6a6;
    --danger: #ff9b9b; --danger-soft: rgba(255, 120, 120, .14);
    --focus: #f6eee4;
    --c-fill: #bda7fe; --c-deep: #8e71d6; --c-ink: #bda7fe; --c-soft: #2c2433;
    --font-display: "Bricolage Grotesque", "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
    color-scheme: dark;
    /* 地：動画の下は木の色が残ったような、ほのかなアンバーの灯り */
    background: #16110e radial-gradient(120% 60% at 50% 100%, rgba(201, 122, 48, .14), transparent 70%) fixed;
  }
  /* 8色：暗い地では ink＝塗りの色、soft＝塗りを 16% 混ぜた暗い面 */
  .sim-dark [data-c] { --c-ink: var(--c-fill); --c-soft: color-mix(in oklab, var(--c-fill) 16%, #1d1612); }
  /* レッスン（講師の色）：白い地では墨だったので、暗い地では反転して「生成りの紙」にする */
  .sim-dark [data-c="lesson"] { --c-fill: #f1e4cf; --c-deep: #a8936f; --c-ink: #f1e4cf; --on-fill: #1d1a2e; --c-soft: color-mix(in oklab, #f1e4cf 12%, #1d1612); }

  .sim-dark body { background: transparent; color: var(--text); }
  .sim-dark ::selection { background: rgba(189, 167, 254, .4); }

  /* ---------- 背景動画 ---------- */
  .bg-video { display: none; }
  .sim-dark .bg-video {
    display: block; position: fixed; left: 0; right: 0; z-index: -1; overflow: hidden;
    top: 0; height: 46svh; /* ヘッダーの裏から敷く（ヘッダーもすりガラス） */
  }
  .sim-home .bg-video { height: 100svh; }   /* ホーム：1画面目は動画だけのイントロ。画面いっぱいに敷く */
  .bg-video video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; filter: brightness(.72) contrast(1.08) saturate(1.05); }
  .sim-dark:not(.sim-home) .bg-video video { filter: brightness(.6) contrast(1.08) saturate(1.05); }
  /* ホーム以外：見出しの乗る帯を暗めにして、下に向かって地の色へ溶かす */
  .sim-dark .bg-video::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(22,17,14,.45) 0%, rgba(22,17,14,.5) 22%, rgba(22,17,14,.72) 48%, rgba(22,17,14,.92) 76%, #16110e 98%);
  }
  /* ホーム：イントロは動画を見せる。上はヘッダー、下はあいさつの文字が乗るので、そこだけ暗くする */
  .sim-home .bg-video::after {
    background: linear-gradient(to bottom, rgba(22,17,14,.4) 0%, rgba(22,17,14,0) 14%, rgba(22,17,14,0) 46%, rgba(22,17,14,.55) 66%, rgba(22,17,14,.88) 88%, rgba(22,17,14,.94) 100%);
  }
  /* スクロールしたら動画を止め、静止画を暗く沈めて、上に乗るカードと文字を読みやすくする（sim-scrolled はスクリプトが付ける） */
  .sim-dark .bg-video::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: rgba(22, 17, 14, .78); opacity: 0; transition: opacity 500ms ease;
  }
  .sim-dark .bg-video::after { z-index: 1; }
  .sim-home.sim-scrolled .bg-video::before { opacity: 1; }

  /* ---------- ヘッダーとタブバー（すりガラス） ---------- */
  .sim-dark .app-header { background: rgba(22, 17, 14, .5); border-bottom: 1px solid var(--hair); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
  .sim-dark .app-header__brand { color: var(--text); font-weight: 800; letter-spacing: .16em; }
  .sim-dark .chip { background: rgba(22, 17, 14, .55); box-shadow: inset 0 0 0 1px var(--hair); font-weight: 800; }
  .sim-dark .tabbar { background: rgba(22, 17, 14, .88); border-top: 1px solid var(--hair); }
  .sim-dark .tabbar__item { color: var(--muted); }
  .sim-dark .tabbar__item[aria-current="page"] { color: var(--c-ink); }

  /* ---------- 文字 ---------- */
  .sim-dark :is(.eyebrow, .continue__eyebrow, .lesson-card__eyebrow, .ticket__eyebrow, .stage__eyebrow, .path__eyebrow, .explain-first__label, .note__label) { font-weight: 800; letter-spacing: .14em; }
  .sim-dark .section__title { font-size: 1.25rem; gap: var(--space-3); }
  .sim-dark .section__title .icon { width: 22px; height: 22px; }
  .sim-dark :is(.pct, .streak__value, .progress, .stepper__value, .timer, .mm__bpm, .chord__name, .menu__go, .lesson-card__go) { font-weight: 800; }

  /* ---------- ボタン：厚みは残し、色の光を足す ---------- */
  .sim-dark .btn { border-radius: 18px; box-shadow: 0 var(--press) 0 var(--c-deep), 0 14px 30px -10px color-mix(in oklab, var(--c-fill) 70%, transparent); }
  .sim-dark .btn:active { box-shadow: 0 0 0 var(--c-deep), 0 6px 16px -10px color-mix(in oklab, var(--c-fill) 70%, transparent); }
  .sim-dark .btn--ghost { background: rgba(255, 232, 205, .06); color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(255, 232, 205, .42), 0 var(--press) 0 rgba(255, 232, 205, .14); }
  .sim-dark .btn--ghost:active { box-shadow: inset 0 0 0 1.5px rgba(255, 232, 205, .42), 0 0 0 transparent; }
  .sim-dark .btn--danger { background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1.5px var(--danger), 0 var(--press) 0 rgba(255, 120, 120, .3); }
  .sim-dark .btn--danger:active { box-shadow: inset 0 0 0 1.5px var(--danger), 0 0 0 transparent; }

  /* ---------- 押せるカード：色つき（レッスン・メモ）と、すりガラス（メニュー・助け） ---------- */
  .sim-dark :is(.lesson-card, .note--link) { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--c-fill) 60%, transparent), 0 var(--press) 0 color-mix(in oklab, var(--c-deep) 70%, #000); }
  .sim-dark :is(.lesson-card, .note--link):active { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--c-fill) 60%, transparent), 0 0 0 transparent; }
  .sim-dark :is(.menu__item, .help-link) {
    border-radius: 20px; background: rgba(33, 26, 21, .82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    box-shadow: inset 0 0 0 1px var(--hair), 0 var(--press) 0 rgba(0, 0, 0, .45);
  }
  .sim-dark :is(.menu__item, .help-link):active { box-shadow: inset 0 0 0 1px var(--hair), 0 0 0 transparent; }
  /* アイコンは色の丸＋光 */
  .sim-dark :is(.menu__icon, .help-link > .icon) { border-radius: 50%; background: var(--c-fill); color: var(--on-fill); box-shadow: 0 0 18px -4px color-mix(in oklab, var(--c-fill) 80%, transparent); }

  /* ---------- 練習ダイアリー・目標曲・心のチューニング・ライナーノーツ（ホーム・目標曲の画面） ---------- */
  .sim-dark .streak { background: radial-gradient(120% 120% at 0% 100%, color-mix(in oklab, var(--c-fill) 24%, transparent), transparent 70%), var(--surface); box-shadow: inset 0 0 0 1px var(--hair); }
  .sim-dark .streak__value b { font-size: 3.5rem; letter-spacing: -.02em; }
  .sim-dark .heat__cell { border-radius: 9px; }
  .sim-dark .heat__cell.is-hit { box-shadow: inset 0 -3px 0 var(--c-deep), 0 0 14px -2px color-mix(in oklab, var(--c-fill) 60%, transparent); }
  .sim-dark :is(.logged, .pace--ok, .status--done) { background: rgba(104, 211, 111, .16); color: #8fe596; }
  .sim-dark .pace--mid { background: rgba(244, 206, 35, .16); color: #f4ce23; }
  .sim-dark .pace--low { background: rgba(255, 149, 142, .16); color: #ff958e; }
  /* 現在地の図は「生成りの紙」に描く（図の線の色は白い地向けなので、紙の上だけ明るい地の値に戻す） */
  .sim-dark .figure-card--map { background: #f6eee4; box-shadow: none; --text: #1d1a2e; --muted: #5d5a72; --surface-2: #e7ddcf; --bg: #fffaf3; --focus: #1d1a2e; }
  .sim-dark .ticket { background: linear-gradient(135deg, rgba(189, 167, 254, .14), rgba(255, 138, 207, .08) 60%, rgba(255, 155, 82, .1)); box-shadow: inset 0 0 0 1px var(--hair); }
  .sim-dark .ticket__title { font-size: 1.625rem; }
  .sim-dark .ticket__stub { border-top: 1.5px dashed var(--line); }
  .sim-dark .mindset__item { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-fill) 22%, transparent); }
  .sim-dark .track { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--c-fill) 70%, transparent); background: color-mix(in oklab, var(--c-fill) 6%, transparent); }
  .sim-dark .closing__big { font-weight: 800; }

  /* ---------- 練習カレンダー（2026-10-11）：その他の欄と、ホームで「今日の練習を記録する」を押した直後 ---------- */
  .cal { display: grid; gap: var(--space-3); }
  .cal__streak { display: flex; align-items: center; gap: 6px; font: 700 var(--text-sm)/1.2 var(--font); color: var(--muted); }
  .cal__streak b { font: 800 2rem/1 var(--font-display); color: var(--text); }
  .cal__flame .icon { width: 30px; height: 30px; color: var(--field); }
  .cal__flame.is-lit .icon { color: var(--c-deep); fill: var(--c-fill); filter: drop-shadow(0 0 8px color-mix(in oklab, var(--c-fill) 70%, transparent)); }
  .view--home #diary .diary__action .btn { width: 100%; }
  .view--home #diary .logged { display: flex; justify-content: center; }
  /* 押した直後：カレンダーが開き、マスが古い日から順に並び、最後に今日のマスに判を押す */
  @media (prefers-reduced-motion: no-preference) {
    html:not(.no-anim) .cal--stamp { animation: cal-open 520ms cubic-bezier(.16, 1, .3, 1) both; transform-origin: 50% 0; }
    html:not(.no-anim) .cal--stamp .heat__cell { animation: cal-cell 380ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i) * 14ms + 160ms); }
    html:not(.no-anim) .cal--stamp .heat__cell.is-today { animation: cal-stamp 760ms cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: 820ms; }
    html:not(.no-anim) .cal--stamp .cal__flame.is-lit .icon { animation: cal-flame 900ms ease-out 900ms both; }
    @keyframes cal-open { from { opacity: 0; transform: translateY(-10px) scaleY(.92); } }
    @keyframes cal-cell { from { opacity: 0; transform: scale(.4); } }
    @keyframes cal-stamp {
      0% { opacity: 0; transform: scale(2.4) rotate(-14deg); }
      55% { opacity: 1; transform: scale(.88) rotate(2deg); }
      100% { transform: none; box-shadow: inset 0 -3px 0 var(--c-deep), 0 0 0 3px var(--text), 0 0 24px 2px color-mix(in oklab, var(--c-fill) 80%, transparent); }
    }
    @keyframes cal-flame { 40% { transform: scale(1.35); } }
  }

  /* ---------- 入力欄・スイッチ ---------- */
  .sim-dark .field__input { background: rgba(0, 0, 0, .28); color: var(--text); border-width: 1.5px; }
  .sim-dark .field__input::placeholder { color: #9d8f80; }
  .sim-dark .switches { border-radius: 20px; box-shadow: inset 0 0 0 1px var(--line); }
  .sim-dark .switches li + li { border-top: 1px solid var(--line); }
  .sim-dark .switch__input:checked { box-shadow: 0 0 14px -2px color-mix(in oklab, var(--c-fill) 70%, transparent); }

  /* ---------- 画面の外側の小物（暗い地では反転） ---------- */
  .sim-dark .toast, .sim-dark .mini-player { background: #f6eee4; color: #16110e; }
  .sim-dark .mini-player__btn { background: rgba(22, 17, 14, .1); color: #16110e; }
  .sim-dark .mini-player__link { color: #16110e; }
  .sim-dark .band { box-shadow: 0 6px 0 var(--c-deep), 0 0 48px -6px color-mix(in oklab, var(--c-fill) 70%, transparent); }
  .sim-dark .band__actions .btn { color: #16110e; }
  .sim-dark .band__icon .pick__mark { stroke: var(--c-deep); }

  /* =========================================================
     ホームの並びとカード（sim-home のときだけ）
     ========================================================= */
  /* 1画面目は動画のイントロ（あいさつだけ）。スクロールすると「直近7日 → 続きから → レッスン → 練習ダイアリー → 弾き語りの理由」 */
  .sim-home .view--home { display: flex; flex-direction: column; gap: var(--space-4); }
  .sim-home .view--home > * { margin-top: 0; }
  .sim-home .view--home > .sim-intro { order: 0; }
  .sim-home .view--home > .sim-start { order: 1; }
  .sim-home .view--home > .sim-week { order: 2; }
  .sim-home .view--home > :is(.hero, .continue) { order: 3; }
  .sim-home .view--home > .hint { order: 5; }
  .sim-home .view--home > .lesson-card { order: 6; }
  .sim-home .view--home > .install { order: 7; }   /* 大事だが主役ではないので、続きからの下へ */
  .sim-home .view--home > .section { order: 8; }
  .sim-home .view--home > .btn-row { order: 9; justify-content: center; }

  .sim-home .view--home > :is(.hero, .section, .install, .continue) {
    padding: var(--space-5); border-radius: 28px;
    background: var(--glass);
    backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
    box-shadow: inset 0 0 0 1px var(--hair), 0 20px 44px -12px rgba(0, 0, 0, .55);
  }
  /* 続きから：今のステップの色の灯りが左上から差す */
  .sim-home .view--home > .continue {
    background:
      radial-gradient(140% 90% at 0% 0%, color-mix(in oklab, var(--c-fill) 30%, transparent), transparent 62%),
      var(--glass);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-fill) 45%, transparent), 0 20px 44px -12px rgba(0, 0, 0, .55);
  }
  /* ピックは右上に置き、本文を全幅に使う（左に置くと本文の幅が 6 割になり、次の一歩が窮屈になる） */
  .sim-home .view--home > .continue { grid-template-columns: 1fr; }
  .sim-home .continue__pick { position: absolute; top: var(--space-5); right: var(--space-5); }
  .sim-home .continue__pick .pick { width: 52px; height: 57px; transform: rotate(8deg); }
  .sim-home .continue__eyebrow, .sim-home .continue__title { padding-right: 64px; }
  .sim-home .continue__title { font-size: 1.625rem; }
  .sim-home .continue__estimate { color: var(--muted); font-size: var(--text-sm); }
  .sim-home .continue .progress__bar { background: var(--surface-2); }
  .sim-home .view--home > .hero { background: radial-gradient(130% 80% at 100% 0%, rgba(255, 149, 142, .22), transparent 60%), var(--glass); }
  .sim-home .hero__title { font-size: clamp(1.625rem, 7vw, 2rem); line-height: 1.4; letter-spacing: .01em; word-break: auto-phrase; }
  .sim-home .install { font-size: var(--text-sm); }
  .sim-home .install__title { font-size: var(--text-md); }
  .sim-home .view--home > .lesson-card { background: color-mix(in oklab, #f1e4cf 14%, rgba(29, 22, 18, .92)); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }

  /* =========================================================
     ホーム以外の画面
     ========================================================= */
  /* 見出しから始まる画面（コース・ツール・その他・設定・目標曲）：見出しを動画の帯に乗せる */
  .sim-dark .view:not(.view--home):not(:has(> .stage)) { padding-top: 8svh; }
  .sim-eyebrow { font: 800 var(--text-sm)/1 var(--font-display); letter-spacing: .22em; color: #f1e4cf; text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
  .sim-dark .sim-eyebrow + .page-title { margin-top: var(--space-2); }
  .sim-dark .back + .sim-eyebrow { margin-top: var(--space-5); }
  .sim-dark .page-title { font-size: 1.75rem; color: #fff8ef; text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
  .sim-dark .page-lead { color: #e9dccb; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); }
  .sim-dark .back { background: rgba(22, 17, 14, .55); color: var(--text); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--line), 0 3px 0 rgba(0, 0, 0, .45); }
  .sim-dark .back:active { box-shadow: inset 0 0 0 1px var(--line), 0 0 0 transparent; }
  /* ひとことの案内：すりガラスの帯（ホームはさらに下でピルにする） */
  .sim-dark .view > .hint { padding: var(--space-3) var(--space-4); border-radius: 16px; background: rgba(22, 17, 14, .6); box-shadow: inset 0 0 0 1px var(--hair); }
  .sim-dark .view > .hint a { color: var(--text); font-weight: 700; }
  .sim-home .view--home > .hint { align-self: center; padding: var(--space-2) var(--space-4); border-radius: var(--r-pill); }

  /* すりガラスのカード（ホームの欄と同じ）：コースの進み具合と道、設定・目標曲・レッスンの欄、ツール */
  .sim-dark :is(.course-progress, .path, .tool),
  .sim-dark :is(.view--settings, .view--song, .view--lesson, .view--course, .view--mindset, .view--more) .section {
    padding: var(--space-5); border-radius: 28px;
    background: var(--glass);
    backdrop-filter: blur(22px) saturate(1.3); -webkit-backdrop-filter: blur(22px) saturate(1.3);
    box-shadow: inset 0 0 0 1px var(--hair), 0 20px 44px -12px rgba(0, 0, 0, .55);
  }
  .sim-dark .path { padding: var(--space-6) var(--space-3) var(--space-3); }

  /* ---------- コース：ピックの道 ---------- */
  .sim-dark .path__item--current .path__link { background: radial-gradient(120% 120% at 0% 50%, color-mix(in oklab, var(--c-fill) 26%, transparent), transparent 70%), var(--c-soft); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--c-fill) 70%, transparent); }
  .sim-dark .path__item--current .pick, .sim-dark .path__item--done .pick { filter: drop-shadow(0 0 10px color-mix(in oklab, var(--c-fill) 55%, transparent)); }
  .sim-dark :is(.path__bubble, .status--current) { color: #16110e; }
  .sim-dark .path__disc { box-shadow: inset 0 0 0 1.5px var(--c-fill), 0 4px 0 rgba(0, 0, 0, .45); }

  /* ---------- ステップ・レッスン：見出しは動画が透けるすりガラスに、その色の灯り ---------- */
  .sim-dark .stage__head {
    border-radius: 28px;
    background: radial-gradient(140% 100% at 0% 0%, color-mix(in oklab, var(--c-fill) 28%, transparent), transparent 65%), rgba(29, 22, 18, .72);
    backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-fill) 40%, transparent), 0 20px 44px -16px rgba(0, 0, 0, .6);
  }
  .sim-dark .stage__head .progress__bar { background: var(--surface-2); }
  .sim-dark .stage__title { font-size: 1.625rem; }
  .sim-dark .stage__pick .pick { filter: drop-shadow(0 0 14px color-mix(in oklab, var(--c-fill) 55%, transparent)); }
  .sim-dark .stage__disc { box-shadow: 0 4px 0 var(--c-deep), 0 0 22px -4px color-mix(in oklab, var(--c-fill) 70%, transparent); }
  .sim-dark :is(.explain, .explain-first, .fact, .figure-card:not(.figure-card--map)) { border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hair); }
  .sim-dark .explain-first { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--c-fill) 70%, transparent), 0 var(--press) 0 color-mix(in oklab, var(--c-deep) 70%, #000), 0 0 22px -8px color-mix(in oklab, var(--c-fill) 60%, transparent); }
  .sim-dark .point .explain { border-radius: 16px; background: rgba(22, 17, 14, .55); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--c-fill) 70%, transparent), 0 var(--press) 0 color-mix(in oklab, var(--c-deep) 70%, #000); }
  .sim-dark .explain-first__icon { background: var(--c-fill); color: var(--on-fill); box-shadow: 0 0 18px -4px color-mix(in oklab, var(--c-fill) 80%, transparent); }
  .sim-dark .explain-more { border-top-color: var(--hair); }
  .sim-dark .step-back { border-top-color: var(--hair); }
  .sim-dark .point { border-radius: 20px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-fill) 30%, transparent); }
  .sim-dark .point__label { box-shadow: 0 0 16px -2px color-mix(in oklab, var(--c-fill) 70%, transparent); }
  .sim-dark .chord { background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px var(--hair); }
  .sim-dark .mm { border-radius: 20px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-fill) 30%, transparent); }
  .sim-dark .mm.is-playing { box-shadow: inset 0 0 0 1.5px var(--c-fill), 0 0 30px -8px color-mix(in oklab, var(--c-fill) 60%, transparent); }
  /* 図（コード図・パーツ図・早見表）：白い地向けの淡い線を、暗い地で同じくらい目立たない明るさにする */
  .sim-dark .figure-card:not(.figure-card--map) :is(.fig-string, .fig-fret) { stroke: rgba(246, 238, 228, .38); }
  .sim-dark .figure-card:not(.figure-card--map) :is(.fig-body, .fig-hole, .fig-note:not(.fig-note--open)) { stroke: rgba(246, 238, 228, .4); }
  .sim-dark .figure-card:not(.figure-card--map) .fig-body { fill: rgba(255, 232, 205, .04); }
  .sim-dark .figure-card:not(.figure-card--map) :is(.fig-hole, .fig-note:not(.fig-note--open)) { fill: rgba(0, 0, 0, .25); }

  /* チェックリスト：押せる厚みは黒い影、チェック済みはその色の灯り */
  .sim-dark .task { border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 var(--press) 0 rgba(0, 0, 0, .45); }
  .sim-dark .task__box { background: rgba(0, 0, 0, .25); }
  .sim-dark .task.is-done { background: var(--c-soft); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--c-fill) 70%, transparent), 0 var(--press) 0 color-mix(in oklab, var(--c-deep) 70%, #000); }
  .sim-dark .task.is-done .task__box { background: var(--c-fill); box-shadow: 0 3px 0 var(--c-deep), 0 0 14px -2px color-mix(in oklab, var(--c-fill) 70%, transparent); }

  /* つまずき解消・卒業 */
  .sim-dark .video-block { border-radius: 20px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c-fill) 30%, transparent); }
  .sim-dark .accordion { border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line); }
  .sim-dark .accordion[open] { background: var(--surface); }
  .sim-dark .celebration { border-radius: 28px; box-shadow: inset 0 0 0 1.5px var(--c-fill), 0 0 60px -12px color-mix(in oklab, var(--c-fill) 60%, transparent); }

  /* ---------- 練習ツール：ツールごとの色（スクリプトで data-c を付ける） ---------- */
  .sim-dark .tool { padding: var(--space-5) var(--space-4) var(--space-4); background: radial-gradient(120% 70% at 50% 0%, color-mix(in oklab, var(--c-fill) 20%, transparent), transparent 62%), var(--glass); }
  .sim-dark .tool::before { left: 28px; right: 28px; height: 3px; border-radius: 0 0 3px 3px; box-shadow: 0 0 18px 1px var(--c-fill); }
  .sim-dark .tool.is-playing { box-shadow: inset 0 0 0 1.5px var(--c-fill), 0 0 44px -10px color-mix(in oklab, var(--c-fill) 60%, transparent), 0 20px 44px -12px rgba(0, 0, 0, .55); }
  .sim-dark .tool__title { font-size: 1.25rem; }
  .sim-dark .stepper__btn { box-shadow: inset 0 0 0 1.5px var(--c-fill), 0 var(--press) 0 color-mix(in oklab, var(--c-deep) 70%, #000); }
  .sim-dark .stepper__btn:active { box-shadow: inset 0 0 0 1.5px var(--c-fill), 0 0 0 transparent; }
  .sim-dark .stepper__value { text-shadow: 0 0 24px color-mix(in oklab, var(--c-fill) 50%, transparent); }
  .sim-dark .beat.is-on { box-shadow: 0 0 0 6px var(--c-soft), 0 0 18px 2px var(--c-fill); }
  .sim-dark .segmented__item { box-shadow: inset 0 0 0 1.5px var(--line); }
  .sim-dark .segmented__item:has(input:checked) { box-shadow: 0 3px 0 var(--c-deep), 0 0 18px -4px color-mix(in oklab, var(--c-fill) 70%, transparent); }
  .sim-dark :is(.preset, .ref-tone) { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line), 0 3px 0 rgba(0, 0, 0, .45); }
  .sim-dark :is(.preset, .ref-tone):active { box-shadow: inset 0 0 0 1.5px var(--line), 0 0 0 transparent; }
  .sim-dark :is(.preset[aria-pressed="true"], .preset[aria-checked="true"], .ref-tone[aria-pressed="true"]) { background: var(--c-fill); color: var(--on-fill); box-shadow: 0 3px 0 var(--c-deep), 0 0 18px -4px color-mix(in oklab, var(--c-fill) 70%, transparent); }
  .sim-dark .tuner__note { box-shadow: inset 0 0 0 3px var(--c-fill), 0 0 36px -8px color-mix(in oklab, var(--c-fill) 60%, transparent); }
  .sim-dark .tuner[data-state="ok"] .tuner__note { box-shadow: 0 0 0 8px rgba(104, 211, 111, .2), 0 0 36px rgba(104, 211, 111, .5); }
  .sim-dark .tuner__zone { background: rgba(104, 211, 111, .45); }
  .sim-dark .tuner__needle[data-state="ok"] { background: #8fe596; }
  .sim-dark .tuner__needle[data-state="near"] { background: #f4ce23; }
  .sim-dark .tuner__needle[data-state="off"] { background: #ff958e; }

  /* =========================================================
     追加した部品（シミュレーション）：あいさつと直近7日・次の一歩・すぐ使うツール（ホーム）
     ========================================================= */
  /* 動画の再生／一時停止（イントロの右上）。自動再生できない端末でも、押せば流せる。止めたい人も止められる（WCAG 2.2.2） */
  .sim-vctl {
    position: absolute; top: var(--space-2); right: 0; display: grid; place-items: center; width: 44px; height: 44px;
    border: 0; border-radius: 50%; background: rgba(22, 17, 14, .45); color: #fff8ef; cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(255, 232, 205, .3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .sim-vctl svg { width: 20px; height: 20px; fill: currentColor; }
  .sim-vctl .sim-vctl__pause, .sim-vctl.is-playing .sim-vctl__play { display: none; }
  .sim-vctl.is-playing .sim-vctl__pause { display: block; }
  /* 自動再生を断られた端末では、押せることが分かるよう縁を明るくする */
  .sim-video-blocked .sim-vctl:not(.is-playing) { background: rgba(22, 17, 14, .6); box-shadow: inset 0 0 0 2px #fff8ef; }
  /* イントロ：ヘッダーとタブバーの間の1画面ぶん。動画を見せ、あいさつは下の暗くした帯に置く */
  .sim-intro {
    position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2);
    min-height: calc(100svh - var(--tabbar-h) - env(safe-area-inset-bottom, 0px) - 96px);
    padding-bottom: var(--space-2);
    color: #fff8ef; text-shadow: 0 1px 14px rgba(0, 0, 0, .55);
  }
  .sim-intro__hello { font: 800 var(--text-sm)/1 var(--font-display); letter-spacing: .22em; color: #f1e4cf; }
  .sim-intro__line { word-break: auto-phrase; font-size: 1.75rem; font-weight: 700; line-height: 1.4; font-feature-settings: "palt"; letter-spacing: .02em; }
  /* 下へ進む合図：押してもスクロールしても進める */
  .sim-cue {
    align-self: center; display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
    min-height: 56px; margin-top: var(--space-5); padding: 6px var(--space-5); border: 0; border-radius: var(--r-pill);
    background: rgba(22, 17, 14, .42); color: #fff8ef; box-shadow: inset 0 0 0 1px rgba(255, 232, 205, .3);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    font: 700 var(--text-sm)/1.4 var(--font); text-shadow: none; cursor: pointer;
  }
  .sim-cue .icon { width: 22px; height: 22px; transform: rotate(-90deg); }
  @media (prefers-reduced-motion: no-preference) {
    html:not(.no-anim) .sim-cue .icon { animation: sim-cue 1.6s ease-in-out infinite; }
    @keyframes sim-cue { 50% { transform: rotate(-90deg) translateX(-5px); } }
  }
  /* スクロールしたあとの最初の位置（ヘッダーの下にそろう：html の scroll-padding-top が効く） */
  .sim-start { display: block; height: 0; }
  .sim-week { display: flex; align-items: center; gap: var(--space-3); }
  .sim-week__days { display: flex; align-items: flex-end; gap: 10px; }
  .sim-week li { display: grid; justify-items: center; gap: 4px; font: 700 var(--text-sm)/1 var(--font); color: #e9dccb; }
  .sim-week i {
    display: block; width: 20px; height: 23px;
    border-radius: 46% 46% 50% 50% / 32% 32% 68% 68%;   /* ピックの形（ロゴと同じ） */
    box-shadow: inset 0 0 0 1.5px rgba(255, 240, 225, .5);
  }
  .sim-week .is-hit i { background: var(--c-fill); box-shadow: 0 0 12px -1px color-mix(in oklab, var(--c-fill) 70%, transparent); }
  .sim-week .is-today { color: #fff; }
  .sim-week .is-today span { padding: 2px 6px; border-radius: var(--r-pill); background: rgba(255, 248, 239, .16); }
  .sim-week__sum { margin-left: auto; align-self: center; font: 700 var(--text-sm)/1.4 var(--font); color: #e9dccb; text-align: right; }
  .sim-week__sum b { font: 800 1.5rem/1 var(--font-display); color: #fff8ef; margin-right: 2px; }

  /* 次の一歩：続きからのカードの中。次にチェックするタスクを2行まで */
  .sim-next { margin-top: var(--space-3) !important; padding: var(--space-3) var(--space-4); border-radius: 16px; background: rgba(0, 0, 0, .24); box-shadow: inset 0 0 0 1px var(--hair); }
  .sim-next__label { display: flex; justify-content: space-between; gap: var(--space-2); font: 800 var(--text-sm)/1.3 var(--font-display); letter-spacing: .12em; color: var(--c-ink); }
  .sim-next__label span { letter-spacing: .02em; color: var(--muted); font-family: var(--font); font-weight: 700; }
  .sim-next__text { margin-top: 4px; font-size: var(--text-sm); font-weight: 700; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }


  /* 出てくる動き：画面を開いたときに1回だけ（640ms）。動きを減らす設定では出さない */
  @media (prefers-reduced-motion: no-preference) {
    html:not(.no-anim) .view--home.is-enter > .sim-intro > * { animation: sim-rise 800ms cubic-bezier(.16, 1, .3, 1) both; }
    html:not(.no-anim) .view--home.is-enter > .sim-intro > :nth-child(2) { animation-delay: 120ms; }
    html:not(.no-anim) .view--home.is-enter > .sim-intro > .sim-cue { animation-delay: 600ms; }
    html:not(.no-anim) .view.is-enter :is(.sim-eyebrow, .stage__head) { animation: sim-rise 640ms cubic-bezier(.16, 1, .3, 1) both; }
    @keyframes sim-rise { from { opacity: 0; transform: translateY(18px); } }
  }

  /* 強制カラー（ハイコントラスト）では動画を出さず、追加の部品に線を引く */
  @media (forced-colors: active) {
    .sim-dark .bg-video { display: none; }
    .sim-intro { min-height: 0; }   /* 動画を出さないので、イントロの余白も詰める */
    .sim-next, .sim-cue { border: 2px solid CanvasText; }
    .sim-vctl { display: none; }
    .sim-week i { border: 2px solid CanvasText; }
    .sim-week .is-hit i { background: Highlight; }
    .sim-dark .path { border: 2px solid CanvasText; }
  }