/* フォントはこのサーバーに置いたもの（使う文字だけに絞ってある）。外部のフォントサービスは使わない */
@font-face{font-family:"Rajdhani";font-weight:500;font-display:swap;src:url(fonts/rajdhani-500.woff2?v=20261009b) format("woff2")}
@font-face{font-family:"Rajdhani";font-weight:600;font-display:swap;src:url(fonts/rajdhani-600.woff2?v=20261009b) format("woff2")}
@font-face{font-family:"Rajdhani";font-weight:700;font-display:swap;src:url(fonts/rajdhani-700.woff2?v=20261009b) format("woff2")}
@font-face{font-family:"M PLUS Rounded 1c";font-weight:400 500;font-display:swap;src:url(fonts/mplus-500.woff2?v=20261009b) format("woff2")}
@font-face{font-family:"M PLUS Rounded 1c";font-weight:700;font-display:swap;src:url(fonts/mplus-700.woff2?v=20261009b) format("woff2")}
  /* 車の画面の世界に合わせた、暗い単一の配色（アプリの HOLO テーマと同じ色） */
  :root {
    color-scheme: dark;
    --night: #030d18;
    --panel: #0a1b2b;
    --panel-2: #0e2438;
    --line: #1d3a52;
    --cyan: #3cc8ff;
    --cyan-dim: rgba(60, 200, 255, 0.16);
    --amber: #f2a33a;
    --text: #e6f1f8;
    --sub: #8aa4b8;
    --paper: #f3eee4;
    --hud: "Rajdhani", "Arial Narrow", "Segoe UI", sans-serif;
    --jp: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    background: radial-gradient(1200px 500px at 70% -10%, rgba(60, 200, 255, 0.10), transparent 60%), var(--night);
    color: var(--text); font-family: var(--jp); font-size: 15px; line-height: 1.85;
  }
  .wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
  a { color: var(--cyan); }
  img { display: block; max-width: 100%; height: auto; }

  .label {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--hud); font-weight: 700; font-size: 13px;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan);
  }
  .label::before { content: ""; width: 10px; height: 10px; border: 2px solid var(--cyan); border-radius: 50%; flex: none; }
  .label::after {
    content: ""; flex: 0 1 140px; height: 8px;
    background: repeating-linear-gradient(-55deg, var(--cyan) 0 3px, transparent 3px 7px); opacity: 0.75;
  }

  /* ---- 目次（上に貼り付く） ---- */
  nav.toc {
    position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
    background: rgba(3, 13, 24, 0.92); backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
  }
  nav.toc .wrap { display: flex; gap: 6px; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
  nav.toc a {
    flex: none; text-decoration: none; color: var(--sub); font-size: 13px; font-weight: 500;
    padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap;
  }
  nav.toc a:hover, nav.toc a:focus-visible { color: #fff; border-color: var(--cyan); outline: none; }

  header { padding-block: 44px 20px; }
  .brand { font-family: var(--hud); font-weight: 700; font-size: clamp(40px, 7vw, 76px); line-height: 0.95; letter-spacing: 0.04em; margin: 14px 0 0; }
  .brand .tentative { font-family: var(--jp); font-weight: 700; font-size: 0.32em; letter-spacing: 0.02em; color: var(--sub); vertical-align: middle; margin-left: 0.3em; white-space: nowrap; }
  .name-note { font-size: 13px; color: var(--sub); margin: 10px 0 0; }
  .brand span { color: var(--cyan); }
  .lead { font-size: clamp(20px, 2.6vw, 28px); font-weight: 700; margin: 18px 0 6px; text-wrap: balance; line-height: 1.5; }
  .lead-sub { color: var(--sub); margin: 0; max-width: 64ch; }

  /* ---- 車の画面の枠 ---- */
  .bezel {
    border-radius: 18px; padding: 14px;
    background: linear-gradient(160deg, #13263a, #050b12 55%);
    border: 1px solid var(--line);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }
  .bezel img { border-radius: 8px; width: 100%; }
  .screen { position: relative; aspect-ratio: 1200 / 720; max-width: 100%; border-radius: 8px; overflow: hidden; background: #000; }
  .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s ease; border-radius: 0; }
  .screen img.on { opacity: 1; }
  .readout {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-top: 10px; padding-inline: 4px;
    font-family: var(--hud); font-weight: 600; font-size: 13px; letter-spacing: 0.12em; color: var(--sub); font-variant-numeric: tabular-nums;
  }
  .readout b { color: var(--cyan); font-weight: 700; }

  /* ---- 機能ごとの区切り ---- */
  section { padding-block: 64px 8px; scroll-margin-top: 60px; }
  h2 { font-size: clamp(22px, 2.8vw, 30px); margin: 12px 0 8px; line-height: 1.45; text-wrap: balance; }
  h3 { font-size: 17px; margin: 0 0 6px; line-height: 1.5; }
  /* 日本語を言葉の切れ目で折り返し、最後の行に1〜2文字だけ残らないようにする（対応していないブラウザでは今までどおり） */
  body { word-break: auto-phrase; text-wrap: pretty; overflow-wrap: break-word; }
  h1, h2, h3, .lead { text-wrap: balance; }
  h1.brand { text-wrap: wrap; }
  .nw { white-space: nowrap; }
  .section-sub { color: var(--sub); margin: 0 0 24px; max-width: 66ch; }
  .section-sub + .name-note { margin: -14px 0 24px; max-width: 66ch; }
  .split2 { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
  @media (min-width: 900px) { .split2 { grid-template-columns: 1.25fr 1fr; } .split2.rev { grid-template-columns: 1fr 1.25fr; } }
  .shot { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #000; }
  figure { margin: 0; }
  figcaption { color: var(--sub); font-size: 12px; margin-top: 8px; }

  .points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .points li { padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
  .points b { display: block; font-size: 15px; margin-bottom: 2px; }
  .points span { color: var(--sub); font-size: 14px; }

  .grid {
    display: grid; gap: 1px; background: var(--line);
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  }
  .cell { background: var(--panel); padding: 16px 18px 18px; }
  .cell .tag { font-family: var(--hud); font-weight: 700; font-size: 12px; letter-spacing: 0.2em; color: var(--cyan); }
  .cell p { margin: 0; color: var(--sub); font-size: 14px; }

  .themes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .themes button {
    font-family: var(--hud); font-weight: 700; font-size: 15px; letter-spacing: 0.1em;
    color: var(--text); background: var(--panel); border: 1px solid var(--line);
    padding: 7px 14px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  }
  .themes button i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
  .themes button[aria-pressed="true"] { border-color: var(--cyan); background: var(--cyan-dim); color: #fff; }
  .themes button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
  .theme-note { color: var(--sub); font-size: 13px; margin: 8px 0 0; min-height: 1.8em; }

  /* 右バーのボタン一覧 */
  .dock-row { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: start; }
  .dock-row img { width: 72px; border: 1px solid var(--line); border-radius: 8px; }
  .keys { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
  .keys div { display: grid; grid-template-columns: 76px 1fr; gap: 8px; padding: 8px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
  .keys b { font-family: var(--hud); letter-spacing: 0.1em; color: var(--cyan); }
  .keys span { color: var(--sub); }

  /* スマホアプリ（明るい土色の画面なので、紙のような枠で見せる） */
  .phone-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .phone-card { background: var(--paper); border-radius: 14px; padding: 10px; color: #3a3027; }
  .phone-card img { border-radius: 8px; border: 1px solid #d6cbb8; }
  .phone-card h3 { color: #3a3027; margin: 12px 6px 2px; font-size: 16px; }
  .phone-card p { margin: 0 6px 6px; color: #7b6d5d; font-size: 13.5px; }

  .callout { border-left: 3px solid var(--cyan); padding: 4px 0 4px 16px; margin: 20px 0 0; }

  .spec { width: 100%; border-collapse: collapse; font-size: 14px; }
  .spec-box { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
  .spec th, .spec td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
  .spec tr:last-child th, .spec tr:last-child td { border-bottom: none; }
  .spec th { width: 30%; color: var(--sub); font-weight: 500; background: var(--panel); white-space: nowrap; }
  .spec td { background: var(--panel-2); }

  footer { padding-block: 56px 40px; color: var(--sub); font-size: 13px; }
  .status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--amber); color: var(--amber); font-weight: 700; font-size: 13px; }
  .status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }

  @media (max-width: 560px) {
    /* スマホ：余白を詰め、札を1行に収め、表は縦に積む */
    section { padding-block: 44px 4px; }
    .label { font-size: 12px; letter-spacing: 0.14em; gap: 8px; white-space: nowrap; }
    .label::after { flex: 1 1 0; max-width: 90px; min-width: 0; }
    .lead { margin-top: 14px; }
    .section-sub { margin-bottom: 20px; }
    figure.w-300 { max-width: 220px; margin-inline: auto; }
    figure.w-300 figcaption { text-align: center; }
    .stack.w-300 { max-width: 220px; margin-inline: auto; }
    .stack.w-300 figcaption { text-align: center; }
    .spec th, .spec td { display: block; width: auto; white-space: normal; }
    .spec th { padding: 12px 16px 2px; border-bottom: none; background: var(--panel-2); font-size: 12px; }
    .spec td { padding: 0 16px 12px; }
    .bezel { padding: 8px; border-radius: 12px; }
    .dock-row { grid-template-columns: 1fr; }
    .dock-row img { display: none; }
    .keys div { grid-template-columns: 70px 1fr; }
  }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .screen img { transition: none; } }
  .c-holo{background:#3cc8ff}.c-amber{background:#f2a33a}.c-electric{background:#2fd68a}.c-rebel{background:#e8202a}.c-ink{background:#ff4fae}.c-terminal{background:#39ff6a}
  .gap-top{margin-top:24px}.w-620{max-width:620px}.w-720{max-width:720px}.w-300{max-width:300px}

  /* ---- 新機能のラベル ---- */
  .new {
    display: inline-flex; align-items: center; gap: 6px; vertical-align: 0.15em;
    font-family: var(--jp); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; line-height: 1;
    color: #1a0e02; background: var(--amber); padding: 5px 10px 5px 8px; border-radius: 999px; margin-left: 10px; white-space: nowrap;
  }
  .new::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #1a0e02; }
  h3 .new, .points b .new { font-size: 11px; padding: 4px 8px 4px 7px; margin-left: 8px; vertical-align: 0.1em; }
  nav.toc a.has-new { border-color: var(--amber); color: var(--amber); }
  .cell.is-new, .points li.is-new { box-shadow: inset 3px 0 0 var(--amber); }
  .updated { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); font-size: 13px; color: var(--sub); }
  .updated b { color: var(--text); font-weight: 700; }
  .updated a { color: var(--amber); }

  /* ---- 警告の写真の並び ---- */
  .alert-pair { display: grid; gap: 14px; grid-template-columns: 1fr; }
  @media (min-width: 760px) { .alert-pair { grid-template-columns: 1fr 1fr; } }
  .note-small { color: var(--sub); font-size: 12.5px; margin: 14px 0 0; max-width: 66ch; }

  .stack { display: grid; gap: 14px; }

  /* 更新履歴：日付ごとに、変わったところを並べる */
  .history { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
  .history > li { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 14px 18px 16px; }
  .history time { font-family: var(--hud); font-weight: 700; font-size: 15px; letter-spacing: 0.08em; color: var(--cyan); }
  .history ul { margin: 8px 0 0; padding-left: 1.2em; color: var(--sub); font-size: 14px; }
  .history ul li + li { margin-top: 4px; }
  .history a { color: var(--text); }