@import url('https://fonts.googleapis.com/css2?family=Teko:wght@400;500;600;700&display=swap');

/* =========================================================
   VFPrep / NewTop 共通スタイル（棄損なし置換版）
   ---------------------------------------------------------
   // 要点
   // 1) ヘッダー：上端/下端を厳密一致。「準備/Prep」だけ水色、他は白。
   //    右側3アイコンは外寸を統一し、言語ピル（JP/EN）の下端を左側に合わせる。
   // 2) Hero：高さ 27vh（min 165px）。ガラス台は小型、ドットは画像直下・□形状。
   // 3) リンク色は常にテーマカラー（visited も同色）。
   // 4) プロフィール：右寄せ固定。背景パネルなし。**2行固定・全文表示**。
   //    右端は“アップデートカードの内側（=パディング＋ボーダー）”と厳密一致。
   // 5) アップデート：見出しはカード外。日付はテーマ色（下線なし）。
   //    直近3件以外はCSSで非表示（.updates.is-collapsed）。
   //    「もっと見る」は**M1の続きを読む形式に統一**（右寄せ/下線なし）。
   // 6) ハンバーガー：右からドロワーが出る（左基準→右基準）。
   // 7) モジュール画像パス（M1/M2/M3）を正規化し404を防止。
   // 8) 右端合わせの基準を完全一致させるため --card-pad-x と
   //    --card-border-w を新設。プロフィールの margin-right を calc() で統一。
   // 9) --edge-nudge-x = 44px（プロフィール右端の最終微調整）
   // 10) .updates .more は**廃止** → .readmore-actions/.readmore-link を使用。
   ========================================================= */

/* -------------------- CSS変数 -------------------- */
:root{
  --w-container: 1120px;

  --ink: #e9f0f6;
  --ink-weak: #c6d2dc;
  --muted: #9fb3c3;
  --bg: #0c1217;
  --surface: #101820;
  --surface-2: #121d27;

  --accent: #5bc3f5;      /* 「準備/Prep」や現在ドット用の水色 */
  --accent-weak: #9bdcfb;

  --card-radius: 16px;
  --card-shadow: 0 10px 24px rgba(0,0,0,.35);

  --border-soft: rgba(255,255,255,.06);
  --dot-inactive: #ffffff;
  --dot-active: var(--accent);

  /* ★ 右上3ボタンの外寸を少しだけ大きく（max を 36px → 40px） */
  --btn-size: clamp(30px, 2.6vw + 24px, 40px);  /* 右上3ボタンの外寸（流体） */
  --icon-size: calc(var(--btn-size) * 0.5);      /* アイコン内寸を外寸比で統一 */
  --lang-nudge-y: 0px;                           /* 下端ズレ防止のため 0 に統一 */

  --header-h: 56px;                              /* ヘッダー行高の基準 */

  --hero-h: clamp(165px, 27vh, 240px);           /* Hero 高さ */

  --avatar: 48px;                                 /* プロフィール画像の一辺 */
  --profile-text-w: 96px;                         /* テキスト枠幅（HTML側で上書き可） */

  --card-pad-x: 10px;                             /* カードの左右パディング基準 */
  --card-border-w: 1px;                           /* ★ カードの枠線幅（右端一致用） */

  --edge-nudge-x: 44px;                           /* ★ 右端の最終微調整（今回 44px） */
}

:root[data-theme="light"]{
  --ink: #0d1a22;
  --ink-weak: #3c5566;
  --muted: #557181;
  --bg: #f7fbff;
  --surface: #ffffff;
  --surface-2: #f3f7fb;
  --border-soft: rgba(0,0,0,.08);
  --dot-inactive: #2a2a2a;
}

/* -------------------- Reset 最小限 -------------------- */
*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,"Noto Sans JP","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* リンクは常にテーマカラー（visitedも同色） */
a, a:visited{ color: var(--accent); }
a:hover{ color: var(--accent-weak); }

/* -------------------- レイアウト共通 -------------------- */
.container{
  width:min(100% - 32px, var(--w-container));
  margin-inline:auto;
}
.section-title{
  margin:28px 0 12px;
  font-size:20px;
  font-weight:700;
  letter-spacing:.2px;
  /* ★ アクセントバーぶんだけ左に余白をつける */
  position: relative;
  padding-left: 0.9em;
}
/* ★ 全セクションタイトル共通：左側に水色の縦バー */
.section-title::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width:4px;
  height:1.3em;
  border-radius:999px;
  background: var(--accent);
  box-shadow:0 0 8px rgba(91,195,245,.55);
}
.section-title.is-major{ margin-top:8px; }

/* -------------------- Header -------------------- */
.site-header{
  position: sticky;
  top:0;
  z-index:1000;
  /* ヘッダーと背景の差を強める濃いめグラデーション（dark 基本） */
  background:
    linear-gradient(
      to bottom,
      rgba(4,8,12,.96) 0%,
      rgba(4,8,12,.8) 42%,
      rgba(4,8,12,0) 100%
    );
  backdrop-filter: blur(6px);
  margin-top: 0;
  margin-bottom: 36px;
  padding-top: 22px;                 /* 上の余白 */
  padding-bottom: 6px;
  box-shadow: 0 12px 26px rgba(0,0,0,.55); /* 下方向の影だけ残す */
}
.header-inner{
  display:flex;
  justify-content:space-between;
  gap:clamp(6px, 1.6vw, 16px);
  min-height: var(--header-h);   /* 行高の基準。必要なら伸びてよい */
  align-items:flex-end;          /* 子要素の「下端」を揃える */
  padding: 0;
  min-width: 0;
}

/* 左：ロゴ＋タグライン */
.brand,
.header-actions{
  display:flex;
  align-items:center;
  min-width: 0;
}

.brand{
  gap:clamp(6px, 1.6vw, 10px);
  text-decoration:none;
  color:inherit;
}

.brand-logo{
  display:block;
  inline-size: var(--header-h);   /* 幅 = 高さ = ヘッダー基準 */
  block-size:  var(--header-h);
  border-radius:10px;
  aspect-ratio: 1 / 1;            /* 縦横比 1:1 を厳守 */
  object-fit: contain;            /* 比率を壊さず収める */
  box-shadow:0 6px 16px rgba(0,0,0,.35);
}

/* テキストロゴ：2行を中央寄せ */
.tagline{
  display:flex;
  flex-direction:column;
  justify-content:center;
  margin:0;
  padding:0;
  line-height:1.12;
  /* ★ 文字を一段階大きく（ヘッダー高さは据え置き） */
  font-size: clamp(18px, 2.5vw + 11px, 24px);
  font-weight:800;
  letter-spacing:.5px;
  white-space:nowrap;
  overflow:visible;
  text-overflow:ellipsis;
  /* ★ ロゴと同じ高さ枠にして上下を厳密に揃える */
  height: var(--header-h);
}
.tagline .accent{ color:var(--accent); } /* 「準備/Prep」だけ水色 */
.tagline :not(.accent){ color:#fff; }     /* 残りは白 */

/* ★ Light 時はロゴ文字を濃いインク色にして飛びを防ぐ */
:root[data-theme="light"] .tagline .accent{
  color: var(--accent);
}
:root[data-theme="light"] .tagline :not(.accent){
  color: var(--ink-main);
}

/* 右：言語ピル / テーマ / バーガー。外寸統一＋ボタン感強化 */
.header-actions{
  gap:10px;
  align-items:flex-end; /* ★ 3ボタンの下端を厳密に揃える */
}

.lang-pill,
.btn-icon{
  inline-size: var(--btn-size);
  block-size:  var(--btn-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.28));
  border:1px solid rgba(255,255,255,.12);
  color:var(--ink);
  border-radius:16px;
  box-shadow:
    0 3px 10px rgba(0,0,0,.35),
    inset 0 10px 16px rgba(255,255,255,.05),
    inset 0 -8px 12px rgba(0,0,0,.25);
  cursor:pointer;
  user-select:none;
  transition:
    transform .1s ease,
    box-shadow .15s ease,
    background .15s ease,
    border-color .15s ease;
}

/* ★ JP/EN テキストピル：高さは他と共通・中身は中央寄せ */
.lang-pill{
  transform: translateY(var(--lang-nudge-y));
  width:auto;
  padding:0 10px;
  gap:6px;
  font-weight:700;
  letter-spacing:.3px;
  line-height:1;
}

/* ★ hover 時の浮き上がり（全ボタン共通） */
.lang-pill:hover,
.btn-icon:hover{
  transform: translateY(calc(var(--lang-nudge-y, 0px) - 1px));
  box-shadow:
    0 6px 16px rgba(0,0,0,.45),
    inset 0 12px 18px rgba(255,255,255,.06),
    inset 0 -8px 14px rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.18);
}

/* 言語ピル：JP / EN（スラッシュ自動挿入） */
.lang-pill span{
  font-size:12px;
  opacity:.95;
  line-height:1;
}
.lang-pill span + span{
  position:relative;
  padding-left:10px;
}
.lang-pill span + span::before{
  content:"/";
  position:absolute;
  left:2px;
  top:0;
  opacity:.9;
}

/* テーマ：月/太陽 */
.btn-icon.theme{ padding:0; }
.icon-theme{
  width:var(--icon-size);
  height:var(--icon-size);
  display:block;
  background:currentColor;
}
:root[data-theme="dark"] .icon-theme{
  -webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='black' d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 1 0 21 12.79z'/></svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='black' d='M21 12.79A9 9 0 1 1 11.21 3 7 7 0 1 0 21 12.79z'/></svg>") no-repeat center/contain;
}
:root[data-theme="light"] .icon-theme{
  -webkit-mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g fill='black' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='4'/><line x1='12' y1='1' x2='12' y2='5'/><line x1='12' y1='19' x2='12' y2='23'/><line x1='1' y1='12' x2='5' y2='12'/><line x1='19' y1='12' x2='23' y2='12'/><line x1='4.2' y1='4.2' x2='6.8' y2='6.8'/><line x1='17.2' y1='17.2' x2='19.8' y2='19.8'/><line x1='4.2' y1='19.8' x2='6.8' y2='17.2'/><line x1='17.2' y1='6.8' x2='19.8' y2='4.2'/></g></svg>") no-repeat center/contain;
          mask: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g fill='black' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='4'/><line x1='12' y1='1' x2='12' y2='5'/><line x1='12' y1='19' x2='12' y2='23'/><line x1='1' y1='12' x2='5' y2='12'/><line x1='19' y1='12' x2='23' y2='12'/><line x1='4.2' y1='4.2' x2='6.8' y2='6.8'/><line x1='17.2' y1='17.2' x2='19.8' y2='19.8'/><line x1='4.2' y1='19.8' x2='6.8' y2='17.2'/><line x1='17.2' y1='6.8' x2='19.8' y2='4.2'/></g></svg>") no-repeat center/contain;
}
/* バーガー内SVGのサイズ統一 */
.btn-icon svg{
  width:var(--icon-size);
  height:var(--icon-size);
  display:block;
}

/* -------------------- ナビドロワー（右から出す） -------------------- */
.nav-drawer{
  position:fixed;
  inset:0 0 0 auto;
  width:260px;
  transform:translateX(100%);
  background:var(--surface);
  color:var(--ink);
  padding:18px;
  z-index:9500;
  box-shadow:-8px 0 24px rgba(0,0,0,.45);
  transition:transform .25s ease;
}
.nav-drawer.is-open{ transform:translateX(0); }
.nav-drawer .vfp-link{
  display:block;
  padding:10px 6px;
  border-radius:10px;
  color:var(--ink);
  text-decoration:none;
}
.nav-drawer .vfp-link:hover{
  background:rgba(255,255,255,.06);
}

/* ドロワー背面のディム */
.nav-dim{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.65);
  opacity:0;
  pointer-events:none;
  z-index:9400;
  transition:opacity .2s ease;
}
.nav-dim.is-show{
  opacity:1;
  pointer-events:auto;
}

/* -------------------- Hero（27vh・ドット直下） -------------------- */
.hero{
  position:relative;
  margin-top:6px;
  border-radius:22px;
  overflow:hidden;
  background:var(--surface-2);
  box-shadow:var(--card-shadow);
  /* ★ ヘッダー以外フル幅禁止：Hero もコンテナ幅に揃える */
  width: min(100% - 32px, var(--w-container));
  margin-inline: auto;
}
.hero-track{
  display:flex;
  gap:0;
  inline-size:100%;
  block-size:var(--hero-h);
  overflow:hidden;
  scroll-snap-type:x mandatory;
}
.hero-slide{
  position:relative;
  min-inline-size:100%;
  block-size:100%;
  scroll-snap-align:center;
  display:grid;
  grid-template-columns:1fr;
}

/* 背景画像（3枚） */
.hero-slide::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background: center/cover no-repeat;
  filter: brightness(.92) saturate(1.05);
}
.hero-slide.is-1::before{ background-image:url("../images/hero/hero1.webp"); }
.hero-slide.is-2::before{ background-image:url("../images/hero/hero2.webp"); }
.hero-slide.is-3::before{ background-image:url("../images/hero/hero3.webp"); }

/* 斜めストライプのデコ（背景の上、ガラスの下） */
.hero .decor{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(255,255,255,.045) 0 14px,
      rgba(0,0,0,.045) 14px 28px
    );
}

/* ガラス台（小型化） */
.hero-copy{
  position:absolute;
  inset:auto clamp(10px,3vw,14px) 18px clamp(10px,3vw,14px);
  z-index:2;
  padding:14px 16px;
  color:#fff;
  background: linear-gradient(180deg, rgba(18,24,32,.35), rgba(18,24,32,.65));
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  box-shadow: 0 16px 30px rgba(0,0,0,.35);
  backdrop-filter: blur(8px) saturate(1.05);
  font-size: clamp(13px, 1.2vw + 10px, 15px);
  max-inline-size: min(92%, 680px);
  overflow-wrap:anywhere;
}
.hero-copy h1{
  margin:0 0 4px;
  font-size: clamp(18px, 1.8vw + 12px, 20px);
  font-weight:800;
  letter-spacing:.3px;
}
.hero-copy p{
  margin:0 0 6px;
  color:#e9f2fa;
}
.hero-ctas{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* ドット：画像の直下（重ねない）／□形状 */
.hero .dots{
  position: static;
  transform: none;
  margin: 8px auto 6px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: auto;
}
.hero .dot{
  width:clamp(8px, 1.4vw, 10px);
  height:clamp(8px, 1.4vw, 10px);
  border-radius:3px;
  background:var(--dot-inactive);
  border:1px solid rgba(0,0,0,.25);
  box-shadow:0 2px 6px rgba(0,0,0,.25) inset;
  opacity:.95;
}
.hero .dot.is-active{ background:var(--dot-active); }

/* -------------------- グリッド/カード -------------------- */
.grid-2{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

.card{
  background:var(--surface);
  border: var(--card-border-w) solid var(--border-soft);
  border-radius:var(--card-radius);
  box-shadow:var(--card-shadow);
  padding:10px var(--card-pad-x);
}

/* M1と共通の “続きを読む” UI（右寄せ／下線なし） */
.readmore{
  --lh:1.55;
  --lines:2.5;
  line-height:var(--lh);
  overflow:hidden;
  position:relative;
  margin-top:12px;
}
.readmore::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2.2em;
  background:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.45) 70%,
    rgba(0,0,0,.7) 100%
  );
}
:root[data-theme="light"] .readmore::after{
  background:linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,255,255,.65) 70%,
    rgba(255,255,255,.9) 100%
  );
}
.readmore.is-open{
  max-height:none;
}
.readmore.is-open::after{
  display:none;
}

/* アップデート専用：最新2件を文章の途中で切らずに表示する。max-heightはJSで --rm-items-max をセット */
.readmore[data-mode="items"]{
  max-height: var(--rm-items-max, 160px);
}

.readmore[data-mode="items"]::after{
  display:none;
}

/* 右寄せリンク（下線なし） */
.readmore-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:6px;
}
.readmore-link{
  display:inline-block;
  color:var(--accent);
  text-decoration:none;
  line-height:1.2;
}
.readmore-link:hover{
  color:var(--accent-weak);
}

.updates-section{
  margin-bottom:10px;
}

.card.updates{
  padding:14px 16px;
  text-align:left !important;
}

.updates-readmore{
  margin-top:0;
}

.updates-feed{
  display:grid;
  gap:0;
  text-align:left !important;
}

.update-entry{
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left !important;
}

.update-entry:first-child{
  padding-top:0;
}

.update-entry:last-child{
  padding-bottom:0;
  border-bottom:none;
}

.update-entry-date{
  display:block;
  margin-bottom:8px;
  font-size:13px;
  font-weight:800;
  letter-spacing:.03em;
  color:var(--accent);
  text-align:left !important;
}

.update-entry-copy{
  margin:0;
  font-size:15px;
  line-height:1.65;
  color:var(--ink);
  text-align:left !important;
  text-wrap:pretty;
  overflow-wrap:anywhere;
}

.card.updates,
.updates-readmore,
.updates-feed,
.update-entry{
  width:100%;
}

.updates-section .card.updates,
.updates-section .updates-readmore,
.updates-section .updates-feed,
.updates-section .update-entry,
.updates-section .update-entry-date,
.updates-section .update-entry-copy,
.updates-section .update-entry-copy a{
  text-align:left !important;
}

.update-entry-copy .update-feature-link{
  display:inline !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  appearance:none;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  line-height:inherit;
  cursor:pointer;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.18em;
}

.update-entry-list{
  padding:0;
  list-style:none;
  display:grid;
  gap:4px;
}

.update-entry-list li{
  display:block;
  position:relative;
  padding-left:1.1em;
}

.update-entry-list li::before{
  content:"・";
  position:absolute;
  left:0;
}

/* -------------------- 自己紹介（右寄せ固定・2行表示・全文） -------------------- */
aside[aria-label="自己紹介と連絡先"]{
  justify-self:end;
  place-self:start end;
  margin-left:auto;
  margin-right: calc(var(--card-pad-x) + var(--card-border-w) - var(--edge-nudge-x));
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: grid;
  grid-template-columns: var(--avatar) var(--profile-text-w);
  align-items: center;
  column-gap: 10px;
  padding: 2px 0 8px 0 !important;
  margin-top: 10px;
}
aside[aria-label="自己紹介と連絡先"] img{
  inline-size: var(--avatar);
  block-size:  var(--avatar);
  border-radius: 12px;
  object-fit: cover;
  display:block;
}
aside[aria-label="自己紹介と連絡先"] p{
  inline-size: var(--profile-text-w);
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  white-space: normal;
  overflow: visible;
}
aside[aria-label="自己紹介と連絡先"] p a{
  color: var(--accent);
  text-decoration: underline;
}

/* -------------------- モジュール区切り（M1/M2/M3） -------------------- */

/* アップデートとモジュール題字＋背景との距離を少し詰める */
.modules-row{
  margin-top: 16px; /* 旧 24px 相当から少しだけ短縮 */
}

/* ★ モジュールカードもアップデートカードと同じ横幅感に統一 */
.actions.single{
  padding:10px var(--card-pad-x);
}
.actions .ph-img{
  block-size:160px;
  border-radius:12px;
  background:#0b131a center/cover no-repeat;
  border:1px solid var(--border-soft);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
.actions .ph-img.sec-1{ background-image:url("../images/modules/M1/M1.png"); }
.actions .ph-img.sec-2{ background-image:url("../images/modules/M2/M2.png"); }
.actions .ph-img.sec-3{ background-image:url("../images/modules/M3/M3.png"); }

.actions .btns{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content: space-between;
  margin:12px 0 6px;
}
.actions .desc{
  margin-top:6px;
  color:var(--ink);
}
.actions .desc p{
  margin:6px 0;
}

/* -------------------- フッター -------------------- */
footer{
  color: var(--muted);
}

/* -------------------- スクロールバー（控えめ） -------------------- */
*::-webkit-scrollbar{
  width:10px;
  height:10px;
}
*::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.12);
  border-radius:10px;
}
*::-webkit-scrollbar-track{
  background:rgba(0,0,0,.12);
  border-radius:10px;
}

/* ========================================================================
   Patch 2025-11-11（サブピクセル対策＋Drawer微調整）
   ======================================================================== */
.header-inner{
  align-items:flex-end;
}

/* Drawer：説明テキストの明度差＋Close右寄せ */
.nav-drawer .vfp-link strong{
  display:block;
  margin-bottom:2px;
  font-weight:700;
  opacity:.98;
}
.nav-drawer .vfp-link .sub{
  display:block;
  font-size:.92rem;
  opacity:.66;
}
.nav-drawer .drawer-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:8px;
}

/* ========================================================================
   Patch 2025-11-12: Hero 2/3 非表示対策 + scrollLeft 対応
   ======================================================================== */
.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  pointer-events:none;
}
.hero-track{
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.hero-track::-webkit-scrollbar{ display:none; }
.hero-track{
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hero-slide{
  flex: 0 0 100%;
}

/* Drawer：Back to Top を他メニューと同じトーンに */
.nav-drawer .drawer-actions .vfp-btn{
  background: none;
  color: var(--ink);
  border: none;
  box-shadow: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-weight: 600;
}
.nav-drawer .drawer-actions .vfp-btn:hover{
  background: rgba(255,255,255,0.06);
}

/* =========================================================
   M4: 公式リソース（Official Resources）
   ---------------------------------------------------------
   // 要点
   // 1) 3つの公式画像を縦1列で並べる（PC/モバイル共通）。
   // 2) 画像の縦横比は維持しつつ、同じ横幅のボックスに収める。
   // 3) 画像全体がクリック可能なリンク領域になる。
   ========================================================= */

/* M4 全体のリストコンテナ */
.vfp-m4-resources {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;           /* 画像ボタン同士の縦間隔 */
}

/* 各画像ボタン（リンク） */
.vfp-m4-resource-link {
  display: block;
  text-decoration: none;
}

/* 画像を入れる共通ボックス
   - 横幅はカードに合わせて100%
   - 高さは固定（比率そのまま縮小／余白は出てOK）
*/
.vfp-m4-resource-imgWrap {
  width: 100%;
  height: 110px;          /* 仮値：大きすぎ/小さすぎなら後で微調整 */
  border-radius: 0.5rem;  /* 角丸（既存カードと馴染ませる） */
  overflow: hidden;       /* 画像がはみ出さないように */
}

/* 実際の画像
   - 縦横比を維持しつつボックス内に収める
   - 黒帯or余白が出てもOKな「contain」を採用
*/
.vfp-m4-resource-imgWrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;    /* ★ここで縦横比を維持してリサイズ */
}

/* =========================================================
   VFPrep / NewTop Light Theme Layout Overrides
   ---------------------------------------------------------
   // 要点
   // 1) ヘッダー / 本編 / モジュール / フッターの背景と文字色だけを上書き。
   // 2) data-theme="dark" の見た目は変えない（ベースCSSはそのまま）。
   // 3) スティッキーフッターはヘッダーと同系色のバーで上下を挟むイメージ。
   ========================================================= */

/* ---- Light theme tokens --------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  /* Base / text */
  --bg-page: #f5f6fa;
  --ink-main: #151922;
  --ink-sub:  #4a4f59;

  /* Header */
  --bg-header: #eef1f7;
  --bg-header-border: #d2d7e3;

  /* Modules / cards */
  --bg-module: #ffffff;
  --bg-module-soft: #f8f9fc;

  /* Footer */
  --bg-footer: #f5f6fa;
  --bg-footer-sticky: #eef1f7;
  --footer-border-top: #d2d7e3;
}

/* ---- Page background / base text ------------------------ */
:root[data-theme="light"] body {
  background-color: var(--bg-page);
  color: var(--ink-main);
}

/* ---- Header background ---------------------------------- */
:root[data-theme="light"] .site-header {
  background: var(--bg-header); /* グラデをやめてフラットに */
  color: var(--ink-main);
  border-bottom: 1px solid var(--bg-header-border);
  box-shadow: 0 6px 14px rgba(15,23,42,0.12); /* 境目の影を軽くして不自然さを軽減 */
}

/* ---- Updates / cards / modules 背景 ---------------------- */
/* アップデートや汎用カード */
:root[data-theme="light"] .card {
  background-color: var(--bg-module);
  color: var(--ink-main);
}

/* ---- Footer (リーガル側) -------------------------------- */
:root[data-theme="light"] .vfp-footer {
  background-color: var(--bg-footer);
  color: var(--ink-sub);
}

/* ---- Sticky footer (©バー) ------------------------------ */
/* インラインstyleの background / border を上書きするため !important を付与 */
:root[data-theme="light"] .vfp-footer-sticky {
  background-color: var(--bg-footer-sticky) !important;
  border-top: 1px solid var(--footer-border-top) !important;
  color: var(--ink-sub);
}

/* ========================================================================
   Patch: IndexGemini3 Integration & Design Refinement (Consolidated Final)
   ======================================================================== */

/* --- 1. ヘッダー微調整 --- */
.header-inner {
  align-items: flex-end !important;
  padding-bottom: 10px !important;
}
.tagline {
  height: var(--header-h) !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  text-align: left !important;
  padding: 4px 0 !important;
  line-height: 1 !important;
}
.header-actions {
  align-self: flex-end !important;
  padding-bottom: 0px !important;
}
.lang-pill, .btn-icon {
  transform: none !important;
  margin-bottom: 0 !important;
}

/* --- 2. メイン画面レイアウト調整 --- */
#main-screen {
  padding-top: 0 !important;
  min-height: auto !important;
  height: auto !important;
  padding-bottom: 60px !important;
}
#main-screen > .container:first-child {
  margin-top: 0 !important; 
}
.site-header {
  margin-bottom: 40px !important;
}
footer.vfp-footer {
  position: static !important;
  width: auto !important;
  background: transparent !important;
}

/* --- 3. セクションタイトル --- */
.section-title {
  font-size: 23px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em;
  line-height: 1.3 !important;
  padding-left: 0.7em !important;
  color: var(--ink) !important;
}
.section-title::before {
  height: 1em !important;
  width: 5px !important;
  border-radius: 4px !important;
  top: 52% !important;
  transform: translateY(-50%) !important;
}

/* --- 4. モジュールカード（モニター風エフェクト適用） --- */
.mod-frame .mod-img {
  /* サイズ強制 */
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  object-position: center top !important;

  /* モニター風エフェクト（強め） */
  filter: contrast(1.1) brightness(1.1) saturate(1.1);
  border: 1px solid rgba(91, 195, 245, 0.6) !important;
  
  /* 発光と影 */
  box-shadow: 
    0 0 0 1px #000,
    0 0 12px rgba(91, 195, 245, 0.4),
    0 20px 50px rgba(0, 0, 0, 0.7) !important;
  
  border-radius: 6px;
  image-rendering: -webkit-optimize-contrast;
}

/* ライトモード時の調整 */
:root[data-theme="light"] .mod-frame .mod-img {
  border-color: rgba(21, 25, 34, 0.2) !important;
  box-shadow: 
    0 0 0 1px rgba(255,255,255,0.5),
    0 4px 12px rgba(0,0,0,0.15) !important;
  filter: contrast(1.05) brightness(1.02);
}

/* メインボタン復元 */
.actions.single .btns .vfp-btn:not(.ghost) {
  background: linear-gradient(135deg, #5ec3f5 0%, #3a7bd5 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(94,195,245,0.35);
  border: none !important;
}

/* --- 6. 公式リソース (M4) --- */
.vfp-m4-resource-imgWrap img {
  object-fit: contain !important; 
  background-color: var(--bg-module); 
}
.vfp-m4-resource-imgWrap--logo {
  background-color: #ffffff !important;
}

/* --- 7. ドロワーメニュー --- */
.nav-drawer .vfp-link {
  text-align: left !important;
  padding: 12px 20px !important;
  margin-bottom: 6px;
}
.nav-drawer .vfp-link strong {
  font-size: 18px;
}
:root[data-theme="light"] .nav-drawer .vfp-link:hover {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* --- 8. 背景・ヘッダー透過 --- */
:root[data-theme="light"] body::before {
  background-color: rgba(245, 247, 250, 0.92) !important;
  backdrop-filter: none !important;
}
:root[data-theme="light"] .site-header {
  background: linear-gradient(
    to bottom,
    rgba(238, 241, 247, 0.90) 0%,
    rgba(238, 241, 247, 0.75) 100%
  ) !important;
  backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(210, 215, 227, 0.6) !important;
}
/* =========================================================
   Patch: サブページ（機能ページ）統合用のリセット設定
   ========================================================= */
/* ヘッダー下の強制余白をゼロにする */
body.subpage .site-header {
  margin-bottom: 0 !important;
}

/* もし既存ページ側で body に padding-top を入れている場合、それを打ち消す */
body.subpage {
  padding-top: 0 !important;
}

/* 必要であればメインコンテナの余白も調整（状況に応じて有効化してください） */
/* body.subpage main,
body.subpage .container {
  margin-top: 0 !important;
}
*/

/* =========================================================
   Top Utility Row / Update Diff / Universal Search
   ========================================================= */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.top-utility-row{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:12px;
  align-items:stretch;
  margin:0 0 18px;
}

.top-utility-row.is-banner-hidden{
  gap:0;
}

.hero-carousel{
  position:relative;
  width:100%;
}

.hero-carousel[hidden]{
  display:none !important;
}

.hero-carousel-viewport{
  width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}

.hero-carousel-viewport::-webkit-scrollbar{
  display:none;
}

.hero-carousel.is-multiple .hero-carousel-viewport{
  cursor:grab;
}

.hero-carousel-viewport.is-dragging{
  cursor:grabbing;
  scroll-behavior:auto;
  scroll-snap-type:none;
  user-select:none;
}

.hero-carousel-viewport:focus-visible{
  outline:3px solid rgba(91,195,245,.28);
  outline-offset:4px;
  border-radius:20px;
}

.hero-carousel-track{
  display:flex;
  align-items:stretch;
  gap:12px;
}

.hero-carousel.is-multiple .update-hub-banner{
  flex-basis:76%;
}

@media (min-width:1600px){
  .hero-carousel.is-multiple .update-hub-banner{
    flex-basis:68%;
  }
}

.update-hub-banner{
  flex:0 0 100%;
  width:auto;
  min-height:76px;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  padding:18px 20px;
  border-radius:18px;
  border:1px solid rgba(91,195,245,.3);
  background-image:
    linear-gradient(90deg, rgba(4,10,20,.8), rgba(4,10,20,.46)),
    var(--hero-image-dark, linear-gradient(120deg, #07111f, #0c2840 52%, #08131f));
  background-position:center 50%;
  background-size:cover;
  background-repeat:no-repeat;
  background-color:#06101d;
  box-shadow:0 12px 28px rgba(0,0,0,.34);
  color:var(--ink);
  cursor:pointer;
  text-align:center;
  overflow:hidden;
  scroll-snap-align:start;
  scroll-snap-stop:always;
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    filter .22s ease,
    background-position .28s ease;
}

.update-hub-banner.is-archive-banner{
  background-image:
    linear-gradient(90deg, rgba(4,10,20,.78), rgba(4,10,20,.36)),
    radial-gradient(100% 220% at 86% 44%, rgba(48,156,209,.24), transparent 54%),
    linear-gradient(120deg, #07111f, #0c2840 52%, #08131f);
}

.update-hub-banner.is-crossroads-banner{
  background-image:
    linear-gradient(90deg, rgba(2,7,12,.04), rgba(2,7,12,0)),
    var(--hero-image-dark);
  background-position:center, center 50%;
  background-size:100% 100%, cover;
  background-repeat:no-repeat;
  background-color:#03070c;
  filter:none;
  cursor:grab;
}

.hero-carousel-viewport.is-dragging .is-crossroads-banner{
  cursor:grabbing;
}

.hero-carousel-arrow{
  position:absolute;
  z-index:3;
  top:38px;
  width:34px;
  height:34px;
  padding:0;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  border:1px solid rgba(157,228,255,.3);
  border-radius:999px;
  background:rgba(3,10,19,.8);
  color:#eefaff;
  box-shadow:0 8px 20px rgba(0,0,0,.26);
  cursor:pointer;
  font:700 28px/1 system-ui, sans-serif;
  transition:opacity .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.hero-carousel-arrow--prev{
  left:-17px;
}

.hero-carousel-arrow--next{
  right:-17px;
}

.hero-carousel-arrow:hover,
.hero-carousel-arrow:focus-visible{
  border-color:rgba(179,237,255,.62);
  background:rgba(8,25,39,.96);
  outline:none;
}

.hero-carousel-arrow:active{
  transform:translateY(-50%) scale(.94);
}

.hero-carousel-arrow:disabled{
  opacity:.25;
  cursor:default;
}

.hero-carousel-dots{
  min-height:18px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:7px;
}

.hero-carousel-dot{
  width:7px;
  height:7px;
  margin:0;
  padding:0;
  border:0;
  border-radius:999px;
  background:rgba(197,229,242,.32);
  cursor:pointer;
  transition:width .2s ease, background .2s ease;
}

.hero-carousel-dot[aria-current="true"]{
  width:20px;
  background:rgba(94,213,255,.9);
}

.hero-carousel-dot:focus-visible{
  outline:2px solid rgba(126,221,255,.72);
  outline-offset:3px;
}

.update-hub-banner::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  transition:opacity .22s ease, background .22s ease;
}

.update-hub-banner::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
  transition:border-color .22s ease, box-shadow .22s ease, opacity .22s ease;
}

.update-hub-banner[hidden],
.update-diff-section[hidden],
.utility-search-message[hidden],
.utility-search-candidates[hidden]{
  display:none !important;
}

.update-banner-title{
  font-size:clamp(18px, 4.4vw, 24px);
  font-weight:800;
  letter-spacing:.04em;
  color:#f3fbff;
  text-shadow:0 2px 12px rgba(0,0,0,.45);
  position:relative;
  z-index:1;
  transition:transform .18s ease, text-shadow .22s ease, color .22s ease, letter-spacing .18s ease;
}

@media (hover:hover){
  .update-hub-banner:hover{
    transform:translateY(-2px) scale(1.01);
    border-color:rgba(121,218,255,.48);
    box-shadow:
      0 18px 34px rgba(0,0,0,.34),
      0 0 28px rgba(91,195,245,.18);
    background-position:center 47%;
  }

  .update-hub-banner:hover::before{
    opacity:1;
    background:
      linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 42%, rgba(255,255,255,0)),
      radial-gradient(60% 120% at 18% 50%, rgba(93,215,255,.14), transparent 62%),
      radial-gradient(60% 120% at 82% 50%, rgba(93,215,255,.14), transparent 62%);
  }

  .update-hub-banner:hover::after{
    border-color:rgba(200,243,255,.28);
    box-shadow:
      inset 0 0 20px rgba(121,218,255,.12),
      inset 0 1px 0 rgba(255,255,255,.18);
  }

  .update-hub-banner:hover .update-banner-title{
    transform:scale(1.02);
    letter-spacing:.05em;
    text-shadow:
      0 3px 14px rgba(0,0,0,.44),
      0 0 18px rgba(90,214,255,.16);
  }
}

.update-hub-banner:focus-visible{
  outline:none;
  transform:translateY(-2px) scale(1.01);
}

.update-hub-banner:focus-visible::after{
  border-color:rgba(207,245,255,.52);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 0 0 3px rgba(91,195,245,.18);
}

.update-hub-banner:focus-visible .update-banner-title{
  letter-spacing:.05em;
}

.update-hub-banner:active{
  transform:translateY(0) scale(.992);
}

.utility-search-shell{
  justify-self:stretch;
  width:100%;
}

.data-search-row{
  width:min(100%, 980px);
  margin:0 auto 18px;
}

.utility-search-shell--data{
  max-width:100%;
}

.utility-search-form{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  gap:8px;
  align-items:center;
  width:100%;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(14,22,34,.92), rgba(8,14,22,.78));
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}

.utility-search-form.voice-disabled{
  grid-template-columns:auto minmax(0, 1fr);
}

.utility-mode-select,
.utility-search-input,
.utility-search-mic{
  min-height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.1);
  color:var(--ink);
}

.utility-mode-select{
  min-width:108px;
  padding:0 12px;
  background:rgba(255,255,255,.05);
}

.utility-search-input{
  width:100%;
  padding:0 14px;
  background:rgba(255,255,255,.04);
}

.utility-search-input::placeholder{
  color:var(--muted);
}

.utility-search-mic{
  min-width:60px;
  padding:0 12px;
  background:rgba(91,195,245,.12);
  cursor:pointer;
  font-weight:800;
  letter-spacing:.04em;
}

.utility-search-mic[hidden]{
  display:none !important;
}

.utility-search-mic[data-state="listening"]{
  color:#fff4f4;
  background:rgba(255,96,96,.24);
  border-color:rgba(255,120,120,.45);
  box-shadow:0 0 0 3px rgba(255,96,96,.12);
  animation:mic-pulse 1.2s ease-in-out infinite;
}

.utility-search-mic[data-state="processing"]{
  color:#f5fbff;
  background:rgba(91,195,245,.28);
  border-color:rgba(91,195,245,.38);
  box-shadow:0 0 0 3px rgba(91,195,245,.14);
}

.utility-search-mic:disabled{
  opacity:.45;
  cursor:not-allowed;
}

@keyframes mic-pulse{
  0%, 100%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(255,96,96,.18);
  }
  50%{
    transform:scale(1.04);
    box-shadow:0 0 0 6px rgba(255,96,96,.05);
  }
}

.utility-search-message{
  margin:8px 4px 0;
  font-size:13px;
  color:var(--muted);
  text-align:right;
}

.utility-search-candidates{
  margin-top:10px;
  display:grid;
  gap:8px;
}

.utility-search-candidate{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px;
  align-items:center;
}

.utility-search-candidate-main,
.utility-search-candidate-video{
  min-height:52px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(16,24,36,.9);
  color:var(--ink);
}

.utility-search-candidate-main{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:3px;
  padding:10px 14px;
  text-align:left;
}

.utility-search-candidate-title{
  font-size:14px;
  font-weight:700;
}

.utility-search-candidate-meta{
  font-size:12px;
  color:var(--muted);
}

.utility-search-candidate-video{
  min-width:52px;
  padding:0 14px;
}

.update-diff-section{
  margin-top:16px;
}

.update-diff-card{
  display:grid;
  width:100%;
  max-width:800px;
  margin-inline:auto;
  gap:clamp(14px, 1.8vw, 18px);
  padding:clamp(10px, 2.4vw, 24px);
}

#update-diff-inline-summary,
#update-diff-inline-list,
#update-diff-summary,
#update-diff-list{
  display:grid;
  gap:12px;
}

.update-diff-source{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  font-size:13px;
  padding:0 2px;
}

.update-diff-source-label{
  color:var(--muted);
  font-weight:700;
}

.update-diff-source-link{
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:2px;
  word-break:break-all;
}

.update-version-list{
  display:grid;
  gap:14px;
}

#update-diff-summary .update-diff-source{
  padding:4px 2px 0;
  justify-content:center;
  text-align:center;
  font-size:14px;
}

.update-version-entry{
  border:1px solid rgba(91,195,245,.18);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(18,34,56,.96), rgba(10,20,35,.92));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 14px 30px rgba(0,0,0,.2);
  overflow:hidden;
}

.update-version-entry + .update-version-entry{
  margin-top:0;
}

.update-version-summary{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:18px 18px 14px;
  min-height:118px;
  cursor:pointer;
  list-style:none;
  transition:background-color .18s ease, transform .22s ease, box-shadow .22s ease;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.05);
  overflow:visible;
  position:relative;
}

.update-version-summary::-webkit-details-marker{
  display:none;
}

.update-version-summary::marker{
  content:"";
  font-size:0;
}

.update-version-entry[open] .update-version-summary{
  background:rgba(255,255,255,.04);
}

.update-version-summary-main{
  display:flex;
  align-items:flex-start;
  min-width:0;
  flex-direction:column;
  gap:10px;
  flex:1 1 auto;
  transition:transform .22s ease;
  overflow:visible;
  width:100%;
}

.update-version-topline{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}

.update-version-title-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex:0 0 auto;
  white-space:nowrap;
  z-index:3;
}

.update-version-hero-row{
  width:100%;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:14px;
  min-width:0;
  min-height:88px;
}

.update-version-number-wrap{
  flex:0 0 auto;
  min-width:max-content;
  min-height:100%;
  display:flex;
  align-items:flex-start;
}

.update-version-prefix{
  display:inline-block;
  color:rgba(255,255,255,.46);
  font-size:12px;
  line-height:1;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-family:'Teko', 'Arial Narrow', 'Segoe UI', sans-serif;
}

.update-version-number{
  display:inline-block;
  font-size:clamp(68px, 13vw, 96px);
  line-height:1.02;
  font-weight:600;
  letter-spacing:-0.02em;
  white-space:nowrap;
  padding-right:.06em;
  padding-bottom:.08em;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(149,214,255,.48));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 10px 28px rgba(3,10,20,.18);
  opacity:.96;
  font-family:'Teko', 'Arial Narrow', 'Segoe UI', sans-serif;
}

.update-version-preview{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1 1 auto;
  min-width:0;
  max-width:none;
  min-height:auto;
  justify-content:flex-start;
  align-items:flex-end;
  margin-left:auto;
  position:relative;
  z-index:3;
  align-self:flex-start;
}

.update-version-status{
  display:flex;
  flex:1 1 auto;
  min-width:0;
  max-width:none;
  justify-content:flex-end;
  margin-left:auto;
  position:relative;
  z-index:3;
  align-self:flex-start;
}

.update-version-status-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(120,217,255,.18);
  background:rgba(17,34,54,.72);
  color:rgba(255,255,255,.88);
  font-size:12px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.04em;
  white-space:nowrap;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 22px rgba(0,0,0,.2);
  transition:transform .22s ease, border-color .18s ease, background-color .18s ease;
}

.update-version-preview-item{
  display:inline-grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
  min-height:36px;
  width:auto;
  max-width:100%;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(120,217,255,.16);
  background:rgba(17,34,54,.72);
  color:rgba(255,255,255,.9);
  font-size:12px;
  line-height:1.3;
  backdrop-filter:blur(10px);
  box-shadow:0 10px 22px rgba(0,0,0,.2);
  transition:transform .22s ease, border-color .18s ease, background-color .18s ease;
}

.update-version-preview-label{
  font-weight:700;
  color:rgba(255,255,255,.7);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:left;
}

.update-version-preview-value{
  font-weight:800;
  color:var(--ink);
  white-space:nowrap;
  text-align:right;
  font-size:13px;
}

.update-version-meta-text{
  color:rgba(255,255,255,.7);
  font-size:12px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.12em;
  flex:0 0 auto;
  text-align:right;
  white-space:nowrap;
  transition:transform .22s ease, color .18s ease;
}

.update-version-toggle{
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:20px;
  min-height:20px;
  font-size:18px;
  line-height:1;
  transform:rotate(-90deg) translateY(-1px);
  transition:transform .22s ease, color .18s ease, text-shadow .22s ease;
}

.update-version-entry[open] .update-version-toggle{
  transform:rotate(0deg);
}

@media (hover:hover) and (pointer:fine){
  .update-version-summary:hover,
  .update-version-summary:focus-visible{
    background:rgba(91,195,245,.08);
    transform:translateY(-1px);
    box-shadow:
      inset 0 -1px 0 rgba(255,255,255,.05),
      0 12px 24px rgba(5,12,24,.18);
  }

  .update-version-summary:hover .update-version-summary-main,
  .update-version-summary:focus-visible .update-version-summary-main{
    transform:translateX(3px);
  }

  .update-version-summary:hover .update-version-preview-item,
  .update-version-summary:hover .update-version-status-chip,
  .update-version-summary:hover .update-version-meta-text,
  .update-version-summary:focus-visible .update-version-preview-item,
  .update-version-summary:focus-visible .update-version-status-chip,
  .update-version-summary:focus-visible .update-version-meta-text{
    transform:translateX(1px);
  }

  .update-version-entry:not([open]) .update-version-summary:hover .update-version-toggle,
  .update-version-entry:not([open]) .update-version-summary:focus-visible .update-version-toggle{
    color:#9de7ff;
    text-shadow:0 0 16px rgba(91,195,245,.24);
    transform:rotate(-90deg) translateX(3px) scale(1.06);
  }

  .update-version-entry[open] .update-version-summary:hover .update-version-toggle,
  .update-version-entry[open] .update-version-summary:focus-visible .update-version-toggle{
    color:#9de7ff;
    text-shadow:0 0 16px rgba(91,195,245,.24);
    transform:rotate(0deg) translateY(2px) scale(1.06);
  }

  :root[data-theme="light"] .update-version-summary:hover,
  :root[data-theme="light"] .update-version-summary:focus-visible{
    background:rgba(91,195,245,.12);
    box-shadow:
      inset 0 -1px 0 rgba(13,26,34,.06),
      0 12px 24px rgba(13,26,34,.1);
  }
}

@media (prefers-reduced-motion: reduce){
  .update-version-summary,
  .update-version-summary-main,
  .update-version-status-chip,
  .update-version-preview-item,
  .update-version-meta-text,
  .update-version-toggle{
    transition:none;
  }

  .update-version-summary:hover,
  .update-version-summary:focus-visible,
  .update-version-summary:hover .update-version-summary-main,
  .update-version-summary:hover .update-version-preview-item,
  .update-version-summary:hover .update-version-status-chip,
  .update-version-summary:hover .update-version-meta-text,
  .update-version-summary:hover .update-version-toggle,
  .update-version-summary:focus-visible .update-version-summary-main,
  .update-version-summary:focus-visible .update-version-preview-item,
  .update-version-summary:focus-visible .update-version-status-chip,
  .update-version-summary:focus-visible .update-version-meta-text,
  .update-version-summary:focus-visible .update-version-toggle{
    transform:none;
    text-shadow:none;
  }
}

.update-version-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.76);
  font-size:11px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.04em;
  white-space:nowrap;
}

.update-version-body{
  display:grid;
  gap:14px;
  padding:16px;
  border-top:1px solid rgba(255,255,255,.05);
  background:linear-gradient(180deg, rgba(6,14,26,.44), rgba(6,14,26,.28));
}

.update-version-placeholder{
  margin:0;
  padding:16px 18px;
  border:1px dashed rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(255,255,255,.03);
  color:var(--ink-weak);
  font-size:15px;
  line-height:1.6;
}

.update-diff-meta{
  display:grid;
  gap:6px;
}

.update-diff-note{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

.update-diff-version{
  margin:0;
  color:var(--accent);
  font-size:24px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:-0.02em;
}

.update-diff-preview-note{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

.update-diff-group + .update-diff-group{
  margin-top:18px;
}

.update-diff-section-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:0 0 10px;
  padding:12px 14px;
  border:1px solid var(--border-soft);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(15,31,49,.78), rgba(9,18,32,.72));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 8px 20px rgba(0,0,0,.16);
}

.update-diff-section-title{
  margin:0;
  font-size:14px;
  line-height:1.3;
  font-weight:800;
}

.update-diff-section-count{
  color:rgba(255,255,255,.66);
  font-size:11px;
  line-height:1.3;
  white-space:nowrap;
}

.update-diff-common-section{
  border:1px solid var(--border-soft);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(15,31,49,.9), rgba(9,18,32,.84));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 24px rgba(0,0,0,.18);
  overflow:hidden;
}

.update-diff-common-section + .update-diff-common-section{
  margin-top:10px;
}

.update-diff-character-section{
  border:1px solid var(--border-soft);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(15,31,49,.9), rgba(9,18,32,.84));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 24px rgba(0,0,0,.18);
  overflow:hidden;
}

.update-diff-character-section .update-diff-section-header{
  margin:0;
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.04);
}

.update-diff-section-summary{
  cursor:pointer;
  list-style:none;
  position:relative;
  padding-right:42px;
  min-height:60px;
  align-items:center;
}

.update-diff-section-summary::-webkit-details-marker{
  display:none;
}

.update-diff-section-summary::marker{
  content:"";
  font-size:0;
}

.update-diff-section-summary::after{
  content:'▾';
  position:absolute;
  right:14px;
  top:50%;
  color:var(--accent);
  font-size:22px;
  line-height:1;
  transform:translateY(-50%) rotate(0deg);
  transition:transform .18s ease, color .18s ease;
}

.update-diff-character-section:not([open]) .update-diff-section-summary::after{
  transform:translateY(-50%) rotate(-90deg);
}

.update-diff-character-section .update-diff-section-title{
  font-size:16px;
}

.update-diff-character-section .update-diff-section-count{
  font-size:12px;
}

.update-diff-character-section-body{
  display:grid;
  gap:10px;
  padding:12px;
  border-top:1px solid rgba(255,255,255,.05);
  background:linear-gradient(180deg, rgba(5,12,22,.58), rgba(5,11,21,.4));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.update-diff-character-section:not([open]) .update-diff-character-section-body{
  display:none;
}

.update-diff-common-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:12px 42px 12px 14px;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.04);
  cursor:pointer;
  list-style:none;
  position:relative;
  min-height:60px;
}

.update-diff-common-header::-webkit-details-marker{
  display:none;
}

.update-diff-common-header::marker{
  content:"";
  font-size:0;
}

.update-diff-common-header::after{
  content:'▾';
  position:absolute;
  right:14px;
  top:50%;
  color:var(--accent);
  font-size:22px;
  line-height:1;
  transform:translateY(-50%) rotate(0deg);
  transition:transform .18s ease, color .18s ease;
}

.update-diff-common-section:not([open]) .update-diff-common-header::after{
  transform:translateY(-50%) rotate(-90deg);
}

.update-diff-common-title{
  margin:0;
  font-size:16px;
  line-height:1.3;
  font-weight:800;
  display:flex;
  align-items:center;
}

.update-diff-common-count{
  color:rgba(255,255,255,.66);
  font-size:12px;
  line-height:1.3;
  white-space:nowrap;
  display:flex;
  align-items:center;
}

.update-diff-common-section:not([open]) .update-diff-item-list{
  display:none;
}

.update-diff-character{
  border:1px solid var(--border-soft);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(15,31,49,.9), rgba(9,18,32,.84));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.03),
    0 10px 24px rgba(0,0,0,.18);
  overflow:hidden;
}

.update-diff-character + .update-diff-character{
  margin-top:10px;
}

.update-diff-character summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  cursor:pointer;
  list-style:none;
  position:relative;
  transition:background-color .18s ease;
  min-height:60px;
  padding-right:42px;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.04);
}

.update-diff-character summary::-webkit-details-marker{
  display:none;
}

.update-diff-character summary::marker{
  content:"";
  font-size:0;
}

.update-diff-character summary::after{
  content:'▾';
  position:absolute;
  right:14px;
  top:50%;
  color:var(--accent);
  font-size:22px;
  line-height:1;
  transform:translateY(-50%) rotate(-90deg);
  transition:transform .18s ease, color .18s ease;
}

.update-diff-character[open] summary{
  background:rgba(255,255,255,.04);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06);
}

.update-diff-character[open] summary::after{
  transform:translateY(-50%) rotate(0deg);
}

.update-diff-character-ident{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.update-diff-character-portrait{
  width:40px;
  height:40px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  flex:0 0 auto;
}

.update-diff-character-name{
  font-weight:800;
  font-size:14px;
  line-height:1.2;
  display:flex;
  align-items:center;
}

.update-diff-character-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
  margin-right:10px;
  min-width:0;
}

.update-diff-character-count{
  color:rgba(255,255,255,.66);
  font-size:11px;
  line-height:1.3;
  text-align:right;
  white-space:nowrap;
  display:flex;
  align-items:center;
}

.update-diff-item-list{
  display:grid;
  gap:clamp(10px, 1.4vw, 14px);
  padding:clamp(10px, 1.4vw, 14px) clamp(12px, 1.6vw, 16px) clamp(12px, 1.6vw, 16px);
  border-top:1px solid rgba(255,255,255,.05);
  background:linear-gradient(180deg, rgba(5,12,22,.58), rgba(5,11,21,.4));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}

.update-diff-item{
  display:grid;
  gap:clamp(14px, 1.5vw, 16px);
  padding:clamp(16px, 1.8vw, 18px);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg, rgba(14,24,40,.985), rgba(10,18,32,.95));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 10px 22px rgba(0,0,0,.28);
  container-type:inline-size;
}

.update-diff-item.update-diff-item-return-flash{
  border-color:rgba(91,195,245,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03), 0 0 0 1px rgba(91,195,245,.18), 0 0 0 10px rgba(91,195,245,.05);
}

.update-diff-item-top{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:14px;
  align-items:start;
}

.update-diff-item-top.no-video{
  grid-template-columns:minmax(0, 1fr);
}

.update-diff-item-info{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  gap:2px;
  justify-content:flex-start;
  min-height:auto;
  align-self:start;
  padding:0;
  border:none;
  background:transparent;
  color:var(--ink);
  text-align:left;
}

.update-diff-item-info.is-link{
  cursor:pointer;
}

.update-diff-item-info.is-static,
.update-diff-item-info:disabled{
  cursor:default;
  opacity:1;
}

.update-diff-item-info.is-link .update-diff-item-title,
.update-diff-item-info.is-link .update-diff-item-command{
  transition:color .18s ease, text-decoration-color .18s ease;
}

@media (hover:hover){
  .update-diff-item-info.is-link:hover .update-diff-item-title,
  .update-diff-item-info.is-link:focus-visible .update-diff-item-title{
    color:var(--accent);
    text-decoration:underline;
    text-decoration-thickness:2px;
    text-underline-offset:5px;
  }

  .update-diff-item-info.is-link:hover .update-diff-item-command,
  .update-diff-item-info.is-link:focus-visible .update-diff-item-command{
    color:var(--accent);
  }
}

.update-diff-item-title{
  font-size:clamp(18px, .65vw + 15.6px, 20px);
  line-height:1.3;
  font-weight:800;
}

.update-diff-item-command{
  font-size:clamp(15px, .32vw + 13.9px, 16px);
  line-height:1.45;
  font-weight:600;
  color:var(--muted);
  letter-spacing:.01em;
}

.update-diff-change{
  display:grid;
  gap:4px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(0,0,0,.18);
  text-align:left;
}

.update-diff-change-label{
  font-size:clamp(15px, .32vw + 13.9px, 16px);
  line-height:1.45;
  font-weight:800;
  color:var(--ink);
}

.update-diff-change-text{
  margin:0;
  font-size:clamp(15px, .32vw + 13.9px, 16px);
  line-height:1.45;
  color:var(--ink-weak);
  text-wrap:pretty;
}

.update-diff-change-list{
  margin:0;
  padding-left:1.25em;
  display:grid;
  gap:8px;
  color:var(--ink-weak);
  font-size:clamp(15px, .32vw + 13.9px, 16px);
  line-height:1.45;
}

.update-diff-change-list li{
  margin:0;
}

.update-diff-change-quote{
  color:var(--ink-weak);
  font-size:clamp(15px, .32vw + 13.9px, 16px);
  line-height:1.2;
}

.update-diff-video-thumb{
  position:relative;
  width:min(100%, 360px);
  min-height:140px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  background:rgba(255,255,255,.08);
  align-self:end;
  justify-self:center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 6px 16px rgba(0,0,0,.22);
}

.update-diff-video-thumb.is-fallback{
  width:auto;
  min-width:132px;
  min-height:52px;
  padding:0 16px;
  justify-self:start;
  align-self:start;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:linear-gradient(180deg, rgba(18,34,56,.96), rgba(10,20,35,.92));
}

.update-diff-video-preview{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  filter:saturate(.72) brightness(.88);
}

.update-diff-video-poster{
  width:100%;
  height:100%;
  display:none;
  object-fit:cover;
  filter:saturate(.86) brightness(1);
}

.update-diff-video-thumb.is-fallback .update-diff-video-preview{
  display:none;
}

.update-diff-video-thumb.is-fallback .update-diff-video-poster{
  display:none;
}

.update-diff-video-thumb.is-static-poster .update-diff-video-preview{
  display:none;
}

.update-diff-video-thumb.is-static-poster .update-diff-video-poster{
  display:block;
}

.update-diff-video-thumb::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:0;
  background:linear-gradient(180deg, rgba(6,16,28,.12), rgba(6,16,28,.28));
  pointer-events:none;
}

.update-diff-video-thumb.is-static-poster::before{
  background:linear-gradient(180deg, rgba(6,16,28,.03), rgba(6,16,28,.1));
}

.update-diff-video-thumb.is-fallback::before{
  display:none;
}

.update-diff-video-overlay{
  position:absolute;
  inset:auto 10px 10px auto;
  z-index:1;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(10,18,32,.72);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  font-size:14px;
}

.update-diff-video-thumb.is-fallback .update-diff-video-overlay{
  position:static;
  inset:auto;
  width:auto;
  height:auto;
  border:none;
  background:none;
  font-size:18px;
}

.update-diff-video-fallback-label{
  position:relative;
  z-index:1;
  font-size:13px;
  line-height:1.2;
  font-weight:700;
  color:var(--ink);
  white-space:nowrap;
}

.update-diff-video-thumb:not(.is-fallback) .update-diff-video-fallback-label{
  display:none;
}

:root[data-theme="light"] .update-hub-banner{
  border-color:rgba(172,228,247,.88);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.08)),
    var(--hero-image-light, linear-gradient(120deg, #eaf7fd, #ccecf8 52%, #e8f6fb));
  background-position:center 52%;
  background-color:#edf7ff;
  box-shadow:
    0 14px 30px rgba(35,84,120,.14),
    0 6px 18px rgba(120,220,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.8),
    inset 0 1px 0 rgba(255,255,255,.56),
    0 0 0 1px rgba(137,215,246,.32);
  filter:saturate(1.02) brightness(1.01) contrast(1.02);
}

:root[data-theme="light"] .update-hub-banner.is-archive-banner{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.06)),
    radial-gradient(100% 220% at 86% 44%, rgba(48,156,209,.2), transparent 54%),
    linear-gradient(120deg, #eef9fd, #ccecf8 52%, #e7f5fb);
}

:root[data-theme="light"] .update-hub-banner.is-crossroads-banner{
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
    var(--hero-image-light);
  filter:none;
}

:root[data-theme="light"] .hero-carousel-arrow{
  border-color:rgba(39,142,184,.28);
  background:rgba(248,253,255,.9);
  color:#17445d;
  box-shadow:0 8px 20px rgba(45,93,120,.18);
}

:root[data-theme="light"] .hero-carousel-dot{
  background:rgba(38,110,143,.25);
}

:root[data-theme="light"] .hero-carousel-dot[aria-current="true"]{
  background:#238fc1;
}

@media (max-width:760px){
  .hero-carousel.is-multiple .update-hub-banner{
    flex-basis:78%;
  }

  .update-hub-banner.is-crossroads-banner{
    background-position:center, center 50%;
    background-size:100% 100%, cover;
  }

  .hero-carousel-arrow{
    display:none;
  }
}

@media (prefers-reduced-motion:reduce){
  .hero-carousel-viewport{
    scroll-behavior:auto;
  }
}

:root[data-theme="light"] .update-hub-banner::before{
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08) 42%, rgba(255,255,255,.02)),
    radial-gradient(70% 160% at 0% 50%, rgba(94,208,255,.16), transparent 62%),
    radial-gradient(70% 160% at 100% 50%, rgba(94,208,255,.18), transparent 62%),
    radial-gradient(44% 96% at 50% 50%, rgba(255,255,255,.12), transparent 72%);
}

:root[data-theme="light"] .update-hub-banner::after{
  border-color:rgba(236,249,255,.62);
  box-shadow:
    inset 0 0 18px rgba(120,220,255,.1),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -8px 16px rgba(18,58,82,.06);
}

:root[data-theme="light"] .update-banner-title{
  color:#15374d;
  text-shadow:
    0 1px 0 rgba(255,255,255,.72),
    0 2px 10px rgba(255,255,255,.42),
    0 0 16px rgba(88,210,255,.12);
}

:root[data-theme="light"] .data-search-row .utility-search-form,
:root[data-theme="light"] .utility-search-form,
:root[data-theme="light"] .utility-search-candidate-main,
:root[data-theme="light"] .utility-search-candidate-video,
:root[data-theme="light"] .update-version-entry,
:root[data-theme="light"] .update-diff-section-header,
:root[data-theme="light"] .update-diff-character-section,
:root[data-theme="light"] .update-diff-common-section,
:root[data-theme="light"] .update-diff-character{
  background:rgba(255,255,255,.94);
  border-color:rgba(13,26,34,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.74),
    0 10px 24px rgba(13,26,34,.07);
}

:root[data-theme="light"] .update-diff-common-header,
:root[data-theme="light"] .update-version-summary,
:root[data-theme="light"] .update-diff-character summary{
  box-shadow:inset 0 -1px 0 rgba(13,26,34,.06);
}

:root[data-theme="light"] .update-version-entry[open] .update-version-summary{
  background:rgba(13,26,34,.035);
}

:root[data-theme="light"] .update-version-body{
  border-top-color:rgba(13,26,34,.06);
  background:linear-gradient(180deg, rgba(13,26,34,.04), rgba(13,26,34,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}

:root[data-theme="light"] .update-version-badge{
  border-color:rgba(13,26,34,.08);
  background:rgba(13,26,34,.04);
  color:rgba(13,26,34,.66);
}

:root[data-theme="light"] .update-version-preview-item{
  background:rgba(255,255,255,.9);
  border-color:rgba(13,26,34,.1);
  color:rgba(13,26,34,.82);
}

:root[data-theme="light"] .update-version-status-chip{
  border-color:rgba(13,26,34,.1);
  background:rgba(255,255,255,.9);
  color:rgba(13,26,34,.66);
}

:root[data-theme="light"] .update-version-prefix{
  color:rgba(13,26,34,.38);
}

:root[data-theme="light"] .update-version-number{
  background:linear-gradient(180deg, rgba(13,26,34,.98), rgba(50,98,124,.46));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 10px 24px rgba(13,26,34,.08);
}

:root[data-theme="light"] .update-version-preview-label{
  color:rgba(13,26,34,.58);
}

:root[data-theme="light"] .update-version-meta-text{
  color:rgba(13,26,34,.58);
}

:root[data-theme="light"] .update-version-placeholder{
  border-color:rgba(13,26,34,.1);
  background:rgba(13,26,34,.03);
}

:root[data-theme="light"] .update-diff-character-section .update-diff-section-header{
  background:transparent;
  box-shadow:inset 0 -1px 0 rgba(13,26,34,.06);
}

:root[data-theme="light"] .update-diff-character-section-body{
  border-top-color:rgba(13,26,34,.06);
  background:linear-gradient(180deg, rgba(13,26,34,.04), rgba(13,26,34,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}

:root[data-theme="light"] .update-diff-character[open] summary{
  background:rgba(13,26,34,.035);
  box-shadow:inset 0 -1px 0 rgba(13,26,34,.08);
}

:root[data-theme="light"] .update-diff-item{
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(246,249,252,.97));
  border-color:rgba(13,26,34,.085);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 10px 22px rgba(13,26,34,.1);
}

:root[data-theme="light"] .update-diff-video-thumb{
  background:rgba(245,249,252,.95);
  border-color:rgba(13,26,34,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 6px 14px rgba(13,26,34,.08);
}

:root[data-theme="light"] .update-diff-item-list{
  border-top-color:rgba(13,26,34,.06);
  background:linear-gradient(180deg, rgba(13,26,34,.04), rgba(13,26,34,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}

:root[data-theme="light"] .update-diff-change{
  border-top-color:rgba(13,26,34,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
}

@media (min-width: 768px){
  #update-diff-screen{
    padding-bottom:136px !important;
  }

  #update-diff-inline-summary{
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:end;
    gap:16px 24px;
  }

  #update-diff-inline-summary .update-diff-source{
    justify-content:flex-end;
    text-align:right;
  }

  .update-version-summary{
    min-height:146px;
    padding:18px 22px;
  }

  .update-version-topline{
    gap:16px;
  }

  .update-version-preview{
    gap:2px;
    max-width:min(66%, 520px);
  }

  .update-version-status{
    max-width:min(66%, 520px);
  }

  .update-version-status-chip,
  .update-version-preview-item{
    min-height:38px;
    padding:8px 15px;
    font-size:12px;
  }

  .update-version-preview-value{
    font-size:13px;
  }

  .update-version-number{
    font-size:clamp(82px, 10vw, 112px);
  }

  .update-diff-version{
    font-size:clamp(28px, 2vw + 14px, 36px);
  }

  .update-diff-character summary{
    min-height:72px;
    padding:14px 18px;
    padding-right:48px;
  }

  .update-diff-character-ident{
    gap:12px;
  }

  .update-diff-character-portrait{
    width:46px;
    height:46px;
  }

  .update-diff-character-name{
    font-size:16px;
  }

  .update-diff-character-count{
    font-size:12px;
  }
}

@media (max-width: 400px){
  .updates-section{
    margin-bottom:14px;
  }

  .card.updates{
    padding:16px 14px;
  }

  .update-entry{
    padding:16px 0;
  }

  .update-entry-date{
    margin-bottom:10px;
    font-size:14px;
  }

  .update-entry-copy{
    font-size:16px;
    line-height:1.7;
    letter-spacing:.01em;
  }

  .data-search-row{
    margin-bottom:14px;
  }

  .utility-search-form{
    grid-template-columns:minmax(92px, auto) minmax(0, 1fr) auto;
  }

  .utility-search-form.voice-disabled{
    grid-template-columns:minmax(92px, auto) minmax(0, 1fr);
  }

  .update-version-summary{
    align-items:flex-start;
    min-height:124px;
    padding:14px 16px 12px;
  }

  .update-version-summary-main{
    gap:8px;
  }

  .update-version-topline{
    gap:8px;
    flex-wrap:wrap;
    align-items:flex-start;
  }

  .update-version-hero-row{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    min-height:auto;
  }

  .update-version-prefix{
    font-size:11px;
    letter-spacing:.18em;
  }

  .update-version-number{
    font-size:clamp(56px, 20vw, 74px);
  }

  .update-version-title-actions{
    gap:8px;
    width:100%;
    justify-content:space-between;
    white-space:normal;
  }

  .update-version-preview{
    gap:2px;
    width:100%;
    max-width:none;
    margin-left:0;
    align-items:stretch;
  }

  .update-version-status{
    width:100%;
    max-width:none;
    margin-left:0;
    justify-content:flex-start;
  }

  .update-version-status-chip{
    min-height:28px;
    padding:6px 11px;
    font-size:11px;
  }

  .update-version-preview-item{
    min-height:28px;
    font-size:11px;
    padding:6px 11px;
    width:100%;
    max-width:100%;
  }

  .update-version-preview-label{
    letter-spacing:-0.01em;
    white-space:normal;
  }

  .update-version-meta-text{
    font-size:11px;
  }

  .update-version-preview-value{
    font-size:12px;
  }

  .update-version-toggle{
    min-width:18px;
    min-height:18px;
    font-size:16px;
  }

  .update-version-badge{
    min-height:24px;
    padding:3px 8px;
    font-size:10px;
  }

  .update-version-body{
    padding:12px;
  }

  .update-version-placeholder{
    padding:14px;
    font-size:14px;
  }

  .update-diff-character summary{
    align-items:center;
  }

  .update-diff-version{
    font-size:21px;
  }

  .update-diff-character-ident{
    gap:8px;
  }

  .update-diff-character-portrait{
    width:36px;
    height:36px;
    border-radius:10px;
  }

  .update-diff-character-name{
    font-size:13px;
  }

  .update-diff-character-count{
    font-size:10px;
  }

  .update-diff-item{
    padding:14px;
  }

  .update-diff-character-meta{
    margin-right:18px;
  }

  .update-diff-item-title{
    font-size:16px;
  }

  .update-diff-item-command{
    font-size:15px;
  }

  .update-diff-change-label,
  .update-diff-change-text{
    font-size:15px;
  }

  .update-diff-video-thumb{
    min-height:120px;
  }

  .update-diff-video-thumb.is-fallback{
    min-width:120px;
    min-height:48px;
    padding:0 14px;
  }
}

@media (max-width: 480px){
  .update-version-summary{
    gap:12px;
  }

  .update-version-number-wrap{
    min-width:0;
  }

  .update-version-preview-item{
    grid-template-columns:minmax(0, 1fr);
    justify-items:start;
  }

  .update-version-preview-value{
    text-align:left;
  }
}

@media (hover:none), (pointer:coarse){
  .update-diff-item-info.is-link .update-diff-item-title::after{
    content:' ↗';
    font-size:.72em;
    font-weight:700;
    color:rgba(91,195,245,.8);
    vertical-align:top;
  }
}