diff --git a/docs/index.html b/docs/index.html
index 54cbb61..30ae3d7 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -4,7 +4,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="Token Meterは、Claude CodeとCodexの利用状況をメニューバーとウィジェットで確認できるmacOSアプリです。" data-i18n-content="metaDescription">
-  <meta name="theme-color" content="#f5f7f9">
+  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
   <meta property="og:title" content="Token Meter for macOS">
   <meta property="og:description" content="Claude CodeとCodexの残量を、作業を止めずに確認。" data-i18n-content="ogDescription">
   <meta property="og:type" content="website">
@@ -13,98 +14,119 @@
   <title>Token Meter - Claude CodeとCodexの利用状況をひと目で</title>
   <link rel="icon" href="assets/token-meter-icon.png">
   <link rel="apple-touch-icon" href="assets/token-meter-icon.png">
-  <link rel="stylesheet" href="styles.css">
-  <script src="localization.js?v=1.2.6-2" defer></script>
+  <script>document.documentElement.classList.add("js");</script>
+  <link rel="stylesheet" href="styles.css?v=1.2.6-3">
+  <script src="localization.js?v=1.2.6-3" defer></script>
+  <script src="interactions.js?v=1.2.6-3" defer></script>
 </head>
 <body>
+  <a class="skip-link" href="#top" data-i18n="skipToContent">本文へスキップ</a>
+
   <nav class="site-nav" aria-label="メインナビゲーション" data-i18n-aria-label="mainNavAria">
-    <a class="site-brand" href="#top" aria-label="Token Meter トップへ" data-i18n-aria-label="topAria">
+    <a class="site-brand" href="#top" aria-label="Token Meter トップへ" data-i18n-aria-label="topAria" data-press>
       <img src="assets/token-meter-icon.png" alt="" width="24" height="24">
       <span>Token Meter</span>
     </a>
-    <a class="header-download" href="https://github.com/TakeruF/token_meter/releases/download/v1.2.6/TokenMeter-1.2.6.zip" data-i18n="navDownload">ダウンロード</a>
+    <div class="nav-links">
+      <a class="nav-link" href="#overview" data-i18n="navAbout" data-press>概要</a>
+      <a class="nav-link" href="#widget" data-i18n="widgetLabel" data-press>デスクトップウィジェット</a>
+      <a class="nav-link" href="#privacy" data-i18n="navPrivacy" data-press>プライバシー</a>
+      <a class="nav-link" href="releases.html" data-i18n="navReleases" data-press>リリースノート</a>
+    </div>
+    <a class="header-download" href="https://github.com/TakeruF/token_meter/releases/download/v1.2.6/TokenMeter-1.2.6.zip" data-i18n="navDownload" data-press>ダウンロード</a>
   </nav>
 
   <main id="top">
     <section class="hero" aria-labelledby="hero-title">
-      <img
-        class="hero-media"
-        src="screenshots/onboarding-welcome.png"
-        alt="ClaudeとCodexの残り利用可能量を表示するToken Meterの画面"
-        data-i18n-alt="heroImageAlt"
-        width="1520"
-        height="1144"
-      >
-      <div class="hero-veil" aria-hidden="true"></div>
       <div class="hero-content">
-        <p class="eyebrow" data-i18n="eyebrow">macOS メニューバーユーティリティ</p>
-        <h1 id="hero-title">Token Meter</h1>
-        <p class="hero-copy" data-i18n-html="heroCopy">Claude CodeとCodexの利用状況を、<br>作業を止めずに確認。</p>
-        <div class="hero-actions">
-          <a class="button button-primary" href="https://github.com/TakeruF/token_meter/releases/download/v1.2.6/TokenMeter-1.2.6.zip" data-i18n="downloadVersion">Token Meter 1.2.6をダウンロード</a>
-          <a class="text-link" href="releases.html"><span data-i18n="viewReleases">リリースノートを見る</span> <span aria-hidden="true">→</span></a>
+        <p class="eyebrow reveal" data-i18n="eyebrow">macOS メニューバーユーティリティ</p>
+        <h1 id="hero-title" class="reveal" style="--i: 1">Token Meter</h1>
+        <p class="hero-copy lede reveal" style="--i: 2" data-i18n-html="heroCopy">Claude CodeとCodexの利用状況を、<br>作業を止めずに確認。</p>
+        <div class="hero-actions reveal" style="--i: 3">
+          <a class="button button-primary" href="https://github.com/TakeruF/token_meter/releases/download/v1.2.6/TokenMeter-1.2.6.zip" data-i18n="downloadVersion" data-press>Token Meter 1.2.6をダウンロード</a>
+          <a class="text-link" href="releases.html" data-press><span data-i18n="viewReleases">リリースノートを見る</span> <span aria-hidden="true">→</span></a>
         </div>
-        <p class="release-meta" data-i18n="heroReleaseMeta">macOS 14以降 · Apple Silicon / Intel · 署名・公証済み</p>
+        <p class="release-meta reveal" style="--i: 3" data-i18n="heroReleaseMeta">macOS 14以降 · Apple Silicon / Intel · 署名・公証済み</p>
       </div>
     </section>
 
     <section class="summary-band" aria-label="Token Meterの概要" data-i18n-aria-label="summaryAria">
-      <div>
+      <div class="reveal">
         <strong data-i18n="providersTitle">3プロバイダー</strong>
         <span>Claude Code / Codex / Copilot</span>
       </div>
-      <div>
+      <div class="reveal" style="--i: 1">
         <strong data-i18n="localTitle">ローカルファースト</strong>
         <span data-i18n="localBody">履歴はこのMacに保存</span>
       </div>
-      <div>
+      <div class="reveal" style="--i: 2">
         <strong data-i18n="nativeTitle">4言語対応</strong>
         <span data-i18n="nativeBody">日本語 / English / 中文 / 한국어</span>
       </div>
     </section>
 
     <section class="intro" id="overview">
-      <p class="section-label" data-i18n="introLabel">ひと目で確認</p>
-      <h2 data-i18n-html="introTitle">必要な数字だけを、<br>いつでも見える場所に。</h2>
-      <p data-i18n="introBody">メニューバーでは残量をすばやく確認。詳しく見たいときはダッシュボードとウィジェットから、5時間枠、週次枠、今日のトークン数を追えます。ダッシュボードは最長90日間の推移と、前日・前7日・前30日・前90日との比較にも対応します。</p>
+      <p class="section-label reveal" data-i18n="introLabel">ひと目で確認</p>
+      <h2 class="reveal" style="--i: 1" data-i18n-html="introTitle">必要な数字だけを、<br>いつでも見える場所に。</h2>
+      <p class="body-copy reveal" style="--i: 2" data-i18n="introBody">メニューバーでは残量をすばやく確認。詳しく見たいときはダッシュボードとウィジェットから、5時間枠、週次枠、今日のトークン数を追えます。ダッシュボードは最長90日間の推移と、前日・前7日・前30日・前90日との比較にも対応します。</p>
     </section>
 
-    <section class="promo-strip" aria-label="Token Meterの画面" data-i18n-aria-label="promoAria">
-      <figure class="promo-shot">
-        <img src="screenshots/promo-at-a-glance.jpg" alt="メニューバーのポップオーバーと3サイズのウィジェットでClaudeとCodexの残量を表示するMac" data-i18n-alt="promoGlanceAlt" width="2000" height="1250" loading="lazy" decoding="async">
-        <figcaption data-i18n="promoGlanceCaption">メニューバーとウィジェットで、残量をひと目で。</figcaption>
-      </figure>
-      <figure class="promo-shot">
-        <img src="screenshots/promo-dashboard.jpg" alt="日別の推移、トークン内訳、モデル別使用量を表示するToken Meterのダッシュボード" data-i18n-alt="promoDashboardAlt" width="2000" height="1250" loading="lazy" decoding="async">
-        <figcaption data-i18n="promoDashboardCaption">ダッシュボードで、日別・モデル別の内訳まで。</figcaption>
-      </figure>
-      <figure class="promo-shot">
-        <img src="screenshots/promo-languages.jpg" alt="英語・日本語・中国語・韓国語を選べるToken Meterの設定画面" data-i18n-alt="promoLanguagesAlt" width="2000" height="1250" loading="lazy" decoding="async">
-        <figcaption data-i18n="promoLanguagesCaption">日本語 / English / 中文 / 한국어に対応。</figcaption>
-      </figure>
+    <section class="promo-strip reveal" aria-label="Token Meterの画面" data-i18n-aria-label="promoAria" data-carousel>
+      <div class="promo-viewport" data-carousel-viewport>
+        <ul class="promo-track" data-carousel-track>
+          <li class="promo-slide">
+            <figure class="promo-shot">
+              <img src="screenshots/promo-at-a-glance.jpg" alt="メニューバーのポップオーバーと3サイズのウィジェットでClaudeとCodexの残量を表示するMac" data-i18n-alt="promoGlanceAlt" width="2000" height="1250" loading="lazy" decoding="async">
+              <figcaption data-i18n="promoGlanceCaption">メニューバーとウィジェットで、残量をひと目で。</figcaption>
+            </figure>
+          </li>
+          <li class="promo-slide">
+            <figure class="promo-shot">
+              <img src="screenshots/promo-dashboard.jpg" alt="日別の推移、トークン内訳、モデル別使用量を表示するToken Meterのダッシュボード" data-i18n-alt="promoDashboardAlt" width="2000" height="1250" loading="lazy" decoding="async">
+              <figcaption data-i18n="promoDashboardCaption">ダッシュボードで、日別・モデル別の内訳まで。</figcaption>
+            </figure>
+          </li>
+          <li class="promo-slide">
+            <figure class="promo-shot">
+              <img src="screenshots/promo-languages.jpg" alt="英語・日本語・中国語・韓国語を選べるToken Meterの設定画面" data-i18n-alt="promoLanguagesAlt" width="2000" height="1250" loading="lazy" decoding="async">
+              <figcaption data-i18n="promoLanguagesCaption">日本語 / English / 中文 / 한국어に対応。</figcaption>
+            </figure>
+          </li>
+        </ul>
+      </div>
+      <div class="promo-controls">
+        <button class="promo-arrow" type="button" data-carousel-prev aria-label="前の画面" data-i18n-aria-label="promoPrev" data-press>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 5 8 12l7 7"></path></svg>
+        </button>
+        <div class="promo-dots" data-carousel-dots></div>
+        <button class="promo-arrow" type="button" data-carousel-next aria-label="次の画面" data-i18n-aria-label="promoNext" data-press>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 5 7 7-7 7"></path></svg>
+        </button>
+      </div>
+      <p class="promo-hint" data-i18n="promoHint">ドラッグまたはスワイプで切り替え</p>
     </section>
 
     <section class="showcase" aria-label="アプリ画面と機能" data-i18n-aria-label="showcaseAria">
       <article class="feature-row">
-        <div class="feature-copy">
+        <div class="feature-copy reveal">
           <p class="feature-number">01</p>
           <h3 data-i18n="featureOneTitle">3つのAIを、同じ場所で。</h3>
-          <p data-i18n="featureOneBody">Claude CodeとCodexを並べて表示。GitHub Copilot CLIにも対応します（トークン数のみの集計、デフォルトはオフ）。使うプロバイダーだけを選べます。</p>
+          <p class="body-copy" data-i18n="featureOneBody">Claude CodeとCodexを並べて表示。GitHub Copilot CLIにも対応します（トークン数のみの集計、デフォルトはオフ）。使うプロバイダーだけを選べます。</p>
         </div>
-        <figure class="product-shot">
-          <img src="screenshots/onboarding-providers.png" alt="ClaudeとCodexを選択するプロバイダー設定画面" data-i18n-alt="providersImageAlt" width="1520" height="1144">
+        <figure class="product-shot reveal" style="--i: 1">
+          <img src="screenshots/onboarding-providers.png" alt="ClaudeとCodexを選択するプロバイダー設定画面" data-i18n-alt="providersImageAlt" width="1472" height="1144" loading="lazy" decoding="async">
           <figcaption data-i18n="providersCaption">プロバイダー選択</figcaption>
         </figure>
       </article>
 
       <article class="feature-row feature-row-reverse">
-        <div class="feature-copy">
+        <div class="feature-copy reveal">
           <p class="feature-number">02</p>
           <h3 data-i18n="featureTwoTitle">メニューバーは、あなたの見やすさで。</h3>
-          <p data-i18n="featureTwoBody">Full、Compact、Icon onlyから選択。残量は5時間枠を基本に、週次枠へ切り替えられます。5時間枠が提供されていない場合は週次枠を自動表示します。</p>
+          <p class="body-copy" data-i18n="featureTwoBody">Full、Compact、Icon onlyから選択。残量は5時間枠を基本に、週次枠へ切り替えられます。5時間枠が提供されていない場合は週次枠を自動表示します。</p>
         </div>
-        <figure class="product-shot">
-          <img src="screenshots/onboarding-display.png" alt="メニューバーの表示形式を選択する画面" data-i18n-alt="displayImageAlt" width="1520" height="1144">
+        <figure class="product-shot reveal" style="--i: 1">
+          <img src="screenshots/onboarding-display.png" alt="メニューバーの表示形式を選択する画面" data-i18n-alt="displayImageAlt" width="1472" height="1144" loading="lazy" decoding="async">
           <figcaption data-i18n="displayCaption">Full / Compact / アイコンのみ</figcaption>
         </figure>
       </article>
@@ -112,10 +134,10 @@ <h3 data-i18n="featureTwoTitle">メニューバーは、あなたの見やすさ
 
     <section class="widget-promo" id="widget" aria-labelledby="widget-title">
       <div class="widget-promo-inner">
-        <div class="widget-promo-copy">
+        <div class="widget-promo-copy reveal">
           <p class="section-label" data-i18n="widgetLabel">デスクトップウィジェット</p>
           <h2 id="widget-title" data-i18n-html="widgetTitle">残量を、<br>デスクトップの<br>定位置に。</h2>
-          <p data-i18n="widgetBody">Claude CodeとCodexの残量、5時間枠のリセット、今日のトークン数を、アプリを開かずに確認できます。</p>
+          <p class="body-copy" data-i18n="widgetBody">Claude CodeとCodexの残量、5時間枠のリセット、今日のトークン数を、アプリを開かずに確認できます。</p>
           <dl class="widget-points">
             <div>
               <dt data-i18n="widgetSizesTitle">3つのサイズ</dt>
@@ -128,54 +150,53 @@ <h2 id="widget-title" data-i18n-html="widgetTitle">残量を、<br>デスクト
           </dl>
         </div>
 
-        <figure class="widget-shot">
-          <img src="screenshots/widget-large.png" alt="ClaudeとCodexの利用状況を折れ線グラフで表示するToken Meterウィジェット" data-i18n-alt="widgetImageAlt" width="688" height="688">
+        <figure class="widget-shot reveal" style="--i: 1">
+          <img src="screenshots/widget-large.png" alt="ClaudeとCodexの利用状況を折れ線グラフで表示するToken Meterウィジェット" data-i18n-alt="widgetImageAlt" width="688" height="688" loading="lazy" decoding="async">
           <figcaption data-i18n="widgetCaption">Largeウィジェット · 7日間の利用推移</figcaption>
         </figure>
       </div>
     </section>
 
     <section class="privacy-band" id="privacy">
-      <div class="privacy-heading">
+      <div class="privacy-heading reveal">
         <p class="section-label" data-i18n="privacyLabel">初期設定からプライバシー重視</p>
         <h2 data-i18n-html="privacyTitle">使用履歴は、<br>このMacから出さない。</h2>
       </div>
-      <div class="privacy-details">
+      <div class="privacy-details reveal" style="--i: 1">
         <p data-i18n="privacyBodyOne">ローカルのセッションログから、トークン数・日時・モデル名だけを集計します。プロンプト本文や応答本文、認証情報は保存しません。</p>
         <p data-i18n="privacyBodyTwo">Claude Pro / Maxの残量確認は任意です。有効にした場合のみ、Claude Codeのサインイン情報を使ってAnthropicの使用量エンドポイントへ問い合わせます。</p>
-        <a class="text-link light" href="https://github.com/TakeruF/token_meter/blob/main/docs/privacy.md" target="_blank" rel="noreferrer"><span data-i18n="privacyLink">プライバシーポリシーを読む</span> <span aria-hidden="true">→</span></a>
+        <a class="text-link light" href="https://github.com/TakeruF/token_meter/blob/main/docs/privacy.md" target="_blank" rel="noreferrer" data-press><span data-i18n="privacyLink">プライバシーポリシーを読む</span> <span aria-hidden="true">→</span></a>
       </div>
     </section>
 
     <section class="gallery" aria-labelledby="gallery-title">
-      <div class="gallery-heading">
+      <div class="gallery-heading reveal">
         <p class="section-label" data-i18n="setupLabel">セットアップ</p>
         <h2 id="gallery-title" data-i18n="setupTitle">数分で準備完了。</h2>
-        <p class="gallery-copy" data-i18n="setupBody">初期設定では、選んだプロバイダーの使用量を実際に読み取れるかまで確認します。読み取れない場合は、未ログインやセッションログ未作成など、直すべき点を具体的に表示。今は設定を終えて、あとから接続しても構いません。</p>
-        <a class="text-link" href="https://github.com/TakeruF/token_meter/blob/main/docs/claude-sign-in.md" target="_blank" rel="noreferrer"><span data-i18n="setupManualLink">Claude Codeのサインインとキーチェーン許可を手動で行う</span> <span aria-hidden="true">→</span></a>
+        <p class="gallery-copy body-copy" data-i18n="setupBody">初期設定では、選んだプロバイダーの使用量を実際に読み取れるかまで確認します。読み取れない場合は、未ログインやセッションログ未作成など、直すべき点を具体的に表示。今は設定を終えて、あとから接続しても構いません。</p>
+        <a class="text-link" href="https://github.com/TakeruF/token_meter/blob/main/docs/claude-sign-in.md" target="_blank" rel="noreferrer" data-press><span data-i18n="setupManualLink">Claude Codeのサインインとキーチェーン許可を手動で行う</span> <span aria-hidden="true">→</span></a>
       </div>
-      <figure class="gallery-shot gallery-shot-wide">
-        <img src="screenshots/onboarding-ready.png" alt="初期設定の完了を示すToken Meterの画面" data-i18n-alt="readyImageAlt" width="1520" height="1144">
-      </figure>
-      <figure class="gallery-shot gallery-shot-detail">
-        <img src="screenshots/onboarding-welcome.png" alt="ClaudeとCodexの残量を表示する初期画面" data-i18n-alt="welcomeImageAlt" width="1520" height="1144">
+      <figure class="gallery-shot gallery-shot-wide reveal" style="--i: 1">
+        <img src="screenshots/onboarding-ready.png" alt="初期設定の完了を示すToken Meterの画面" data-i18n-alt="readyImageAlt" width="1472" height="1144" loading="lazy" decoding="async">
       </figure>
     </section>
 
     <section class="download-section" id="download">
-      <p class="section-label" data-i18n="downloadLabel">ダウンロード</p>
-      <h2 data-i18n-html="downloadTitle">一目で<br>残量確認を。</h2>
-      <p class="download-copy" data-i18n="downloadBody">ZIPを展開し、Token Meter.appをアプリケーションフォルダへ移動してください。</p>
-      <a class="button button-primary" href="https://github.com/TakeruF/token_meter/releases/download/v1.2.6/TokenMeter-1.2.6.zip" data-i18n="downloadVersion">Token Meter 1.2.6をダウンロード</a>
-      <p class="release-meta" data-i18n="downloadMeta">macOS 14以降 · 約5.6 MB · Developer ID署名・Apple公証済み</p>
-      <a class="text-link" href="https://github.com/TakeruF/token_meter/blob/main/CODE_SIGNING.md" target="_blank" rel="noreferrer">Code signing policy <span aria-hidden="true">→</span></a>
+      <p class="section-label reveal" data-i18n="downloadLabel">ダウンロード</p>
+      <h2 class="reveal" style="--i: 1" data-i18n-html="downloadTitle">一目で<br>残量確認を。</h2>
+      <p class="download-copy body-copy reveal" style="--i: 2" data-i18n="downloadBody">ZIPを展開し、Token Meter.appをアプリケーションフォルダへ移動してください。</p>
+      <div class="reveal" style="--i: 2">
+        <a class="button button-primary" href="https://github.com/TakeruF/token_meter/releases/download/v1.2.6/TokenMeter-1.2.6.zip" data-i18n="downloadVersion" data-press>Token Meter 1.2.6をダウンロード</a>
+        <p class="release-meta" data-i18n="downloadMeta">macOS 14以降 · 約5.6 MB · Developer ID署名・Apple公証済み</p>
+        <a class="text-link" href="https://github.com/TakeruF/token_meter/blob/main/CODE_SIGNING.md" target="_blank" rel="noreferrer" data-press>Code signing policy <span aria-hidden="true">→</span></a>
+      </div>
     </section>
   </main>
 
   <footer class="site-footer">
     <div class="footer-inner">
       <nav class="footer-links" aria-label="フッターナビゲーション">
-        <a href="#top">About</a>
+        <a href="#top" data-i18n="navAbout">概要</a>
         <a href="https://github.com/TakeruF/token_meter/blob/main/docs/privacy.md" target="_blank" rel="noreferrer" data-i18n="footerPrivacy">プライバシー</a>
         <a href="https://github.com/TakeruF/token_meter/blob/main/CODE_SIGNING.md" target="_blank" rel="noreferrer">Code signing policy</a>
         <a href="https://github.com/TakeruF/token_meter/releases" target="_blank" rel="noreferrer" data-i18n="footerReleases">リリース</a>
@@ -190,10 +211,10 @@ <h2 data-i18n-html="downloadTitle">一目で<br>残量確認を。</h2>
         </a>
       </div>
       <div class="language-switcher" role="group" aria-label="言語を選択" data-i18n-aria-label="languageAria">
-        <button type="button" lang="ja" data-language="ja" aria-pressed="true">日本語</button>
-        <button type="button" lang="en" data-language="en" aria-pressed="false">English</button>
-        <button type="button" lang="zh-CN" data-language="zh-CN" aria-pressed="false">中文</button>
-        <button type="button" lang="ko" data-language="ko" aria-pressed="false">한국어</button>
+        <button type="button" lang="ja" data-language="ja" aria-pressed="true" data-press>日本語</button>
+        <button type="button" lang="en" data-language="en" aria-pressed="false" data-press>English</button>
+        <button type="button" lang="zh-CN" data-language="zh-CN" aria-pressed="false" data-press>中文</button>
+        <button type="button" lang="ko" data-language="ko" aria-pressed="false" data-press>한국어</button>
       </div>
       <p class="footer-domain">takeruf.github.io/token_meter</p>
       <p class="footer-copyright">© 2026 Takeru Fujii · Apache License 2.0</p>
diff --git a/docs/interactions.js b/docs/interactions.js
new file mode 100644
index 0000000..fa5d15e
--- /dev/null
+++ b/docs/interactions.js
@@ -0,0 +1,446 @@
+/*
+ * Token Meter — interaction layer.
+ *
+ * Everything here follows the same three rules:
+ *   1. Feedback lands on pointer-down, never on release.
+ *   2. Motion is spring-based, so it always starts from the value that is
+ *      currently on screen and can be grabbed and reversed mid-flight.
+ *   3. A gesture hands its release velocity to the spring, and the landing
+ *      point is projected from that velocity — not snapped from where the
+ *      finger happened to stop.
+ */
+(() => {
+  "use strict";
+
+  const motionQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+
+  /* ----------------------------------------------------------------------
+   * Spring — critically damped by default. Parameterised the way Apple
+   * parameterises them: damping ratio + response (seconds), not mass /
+   * stiffness / friction.
+   * -------------------------------------------------------------------- */
+  class Spring {
+    constructor({ value = 0, damping = 1, response = 0.4 } = {}) {
+      this.value = value;
+      this.target = value;
+      this.velocity = 0;
+      this.damping = damping;
+      this.response = response;
+    }
+
+    step(dt) {
+      const omega = (2 * Math.PI) / this.response;
+      const stiffness = omega * omega;
+      const friction = 2 * this.damping * omega;
+      // Fixed sub-steps keep the integration stable through a fast flick.
+      const steps = Math.max(1, Math.ceil(dt * 240));
+      const h = dt / steps;
+      for (let i = 0; i < steps; i += 1) {
+        const accel = -stiffness * (this.value - this.target) - friction * this.velocity;
+        this.velocity += accel * h;
+        this.value += this.velocity * h;
+      }
+    }
+
+    get settled() {
+      return Math.abs(this.velocity) < 0.5 && Math.abs(this.value - this.target) < 0.5;
+    }
+
+    snap() {
+      this.value = this.target;
+      this.velocity = 0;
+    }
+  }
+
+  /* Apple's momentum projection (UIScrollView deceleration), not v²/2a. */
+  const projectMomentum = (velocity, decelerationRate = 0.998) =>
+    ((velocity / 1000) * decelerationRate) / (1 - decelerationRate);
+
+  /* Progressive resistance past a boundary instead of a hard stop. */
+  const rubberband = (overshoot, dimension, constant = 0.55) =>
+    (overshoot * dimension * constant) / (dimension + constant * Math.abs(overshoot));
+
+  /* ----------------------------------------------------------------------
+   * Press feedback — the instant the pointer goes down.
+   * -------------------------------------------------------------------- */
+  function setupPressFeedback() {
+    let pressed = null;
+
+    const release = () => {
+      if (!pressed) return;
+      pressed.classList.remove("is-pressing");
+      pressed = null;
+    };
+
+    document.addEventListener(
+      "pointerdown",
+      (event) => {
+        const target = event.target.closest("[data-press]");
+        if (!target) return;
+        release();
+        pressed = target;
+        target.classList.add("is-pressing");
+      },
+      { passive: true }
+    );
+
+    ["pointerup", "pointercancel", "pointerleave", "blur"].forEach((type) => {
+      document.addEventListener(type, release, { passive: true, capture: true });
+    });
+  }
+
+  /* ----------------------------------------------------------------------
+   * Scroll edge effect — the nav only materialises once content is under it.
+   * -------------------------------------------------------------------- */
+  function setupScrollEdge() {
+    const sentinel = document.createElement("div");
+    sentinel.setAttribute("aria-hidden", "true");
+    sentinel.style.cssText =
+      "position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none;";
+    document.body.prepend(sentinel);
+
+    if (!("IntersectionObserver" in window)) return;
+    new IntersectionObserver(([entry]) => {
+      document.body.classList.toggle("is-scrolled", !entry.isIntersecting);
+    }).observe(sentinel);
+  }
+
+  /* ----------------------------------------------------------------------
+   * Scroll reveal.
+   * -------------------------------------------------------------------- */
+  function setupReveals() {
+    const items = document.querySelectorAll(".reveal");
+    if (!("IntersectionObserver" in window)) {
+      items.forEach((item) => item.classList.add("is-in"));
+      return;
+    }
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) return;
+          entry.target.classList.add("is-in");
+          observer.unobserve(entry.target);
+        });
+      },
+      { rootMargin: "0px 0px -8% 0px", threshold: 0.08 }
+    );
+
+    items.forEach((item) => observer.observe(item));
+  }
+
+  /* ----------------------------------------------------------------------
+   * Promo carousel — 1:1 tracking, velocity handoff, momentum projection,
+   * rubber-banded edges, interruptible at any frame.
+   * -------------------------------------------------------------------- */
+  function setupCarousel(root) {
+    const viewport = root.querySelector("[data-carousel-viewport]");
+    const track = root.querySelector("[data-carousel-track]");
+    const dotsHost = root.querySelector("[data-carousel-dots]");
+    const prevButton = root.querySelector("[data-carousel-prev]");
+    const nextButton = root.querySelector("[data-carousel-next]");
+    if (!viewport || !track) return;
+
+    const slides = Array.from(track.children);
+    if (slides.length < 2) return;
+
+    root.classList.add("is-carousel");
+    root.setAttribute("role", "group");
+    root.setAttribute("aria-roledescription", "carousel");
+    viewport.tabIndex = 0;
+
+    const spring = new Spring({ damping: 1, response: 0.4 });
+    let index = 0;
+    let step = 0;
+    let frame = 0;
+    let lastFrameTime = 0;
+    let running = false;
+    let dragging = false;
+    let axis = null;
+    let activePointer = null;
+    let startX = 0;
+    let startY = 0;
+    let base = 0;
+    let dragStartIndex = 0;
+    let wheelTimer = 0;
+    const history = [];
+
+    const minValue = () => -(slides.length - 1) * step;
+    const reduced = () => motionQuery.matches;
+
+    const dots = slides.map((slide, i) => {
+      slide.setAttribute("role", "group");
+      slide.setAttribute("aria-roledescription", "slide");
+      slide.setAttribute("aria-label", `${i + 1} / ${slides.length}`);
+
+      const dot = document.createElement("button");
+      dot.type = "button";
+      dot.className = "promo-dot";
+      dot.dataset.press = "";
+      dot.setAttribute("aria-label", `${i + 1} / ${slides.length}`);
+      dot.addEventListener("click", () => goTo(i));
+      if (dotsHost) dotsHost.append(dot);
+      return dot;
+    });
+
+    function render() {
+      track.style.transform = `translate3d(${spring.value.toFixed(2)}px, 0, 0)`;
+      if (reduced() || step === 0) return;
+      // Neighbours sit slightly back, so a partial drag already telegraphs
+      // which slide is arriving.
+      const center = -spring.value / step;
+      slides.forEach((slide, i) => {
+        const distance = Math.min(1, Math.abs(i - center));
+        slide.style.transform = `scale(${(1 - 0.05 * distance).toFixed(4)})`;
+        slide.style.opacity = (1 - 0.4 * distance).toFixed(3);
+      });
+    }
+
+    function tick(now) {
+      const dt = clamp((now - lastFrameTime) / 1000, 0.001, 0.032);
+      lastFrameTime = now;
+      spring.step(dt);
+      render();
+      if (spring.settled) {
+        spring.snap();
+        render();
+        running = false;
+        track.style.willChange = "";
+        return;
+      }
+      frame = requestAnimationFrame(tick);
+    }
+
+    function startLoop() {
+      if (running) return;
+      running = true;
+      track.style.willChange = "transform";
+      lastFrameTime = performance.now();
+      frame = requestAnimationFrame(tick);
+    }
+
+    function stopLoop() {
+      cancelAnimationFrame(frame);
+      running = false;
+    }
+
+    function updateControls() {
+      dots.forEach((dot, i) => {
+        if (i === index) dot.setAttribute("aria-current", "true");
+        else dot.removeAttribute("aria-current");
+      });
+      if (prevButton) prevButton.disabled = index === 0;
+      if (nextButton) nextButton.disabled = index === slides.length - 1;
+    }
+
+    function goTo(next, velocity = 0) {
+      index = clamp(next, 0, slides.length - 1);
+      spring.target = -index * step;
+      updateControls();
+      if (reduced()) {
+        // Sliding a whole viewport across is the largest spatial motion on the
+        // page. Reduced motion means it should not travel at all — land on the
+        // slide instead. Dragging stays 1:1: that is the finger, not animation.
+        spring.snap();
+        render();
+        return;
+      }
+      spring.velocity = velocity;
+      // Overshoot is earned by momentum: a flick bounces, a tap does not.
+      spring.damping = Math.abs(velocity) > 300 ? 0.8 : 1;
+      spring.response = 0.4;
+      startLoop();
+    }
+
+    // A gesture that never became a drag still stopped the loop on pointerdown.
+    // Put the pending motion back so the track can never be left parked between
+    // two slides while the dots claim it has arrived.
+    function resumePending() {
+      if (Math.abs(spring.value - spring.target) < 0.5) {
+        spring.snap();
+        render();
+        return;
+      }
+      if (reduced()) {
+        spring.snap();
+        render();
+        return;
+      }
+      startLoop();
+    }
+
+    function measure() {
+      const gap = parseFloat(getComputedStyle(track).columnGap) || 0;
+      // The viewport is never transformed; a slide's own scale would skew its rect.
+      const width = viewport.getBoundingClientRect().width;
+      if (!width) return;
+      step = width + gap;
+      if (dragging) return;
+      stopLoop();
+      spring.target = -index * step;
+      spring.snap();
+      render();
+    }
+
+    function constrain(value) {
+      const max = 0;
+      const min = minValue();
+      const width = viewport.getBoundingClientRect().width || 1;
+      if (value > max) return max + rubberband(value - max, width);
+      if (value < min) return min - rubberband(min - value, width);
+      return value;
+    }
+
+    viewport.addEventListener("dragstart", (event) => event.preventDefault());
+
+    viewport.addEventListener(
+      "pointerdown",
+      (event) => {
+        if (event.pointerType === "mouse" && event.button !== 0) return;
+        activePointer = event.pointerId;
+        axis = null;
+        startX = event.clientX;
+        startY = event.clientY;
+        // Grab the presentation value, so an in-flight slide is caught
+        // exactly where it is rather than jumping to its target.
+        stopLoop();
+        base = spring.value;
+        dragStartIndex = index;
+        spring.velocity = 0;
+        history.length = 0;
+        history.push({ x: event.clientX, t: event.timeStamp });
+      },
+      { passive: true }
+    );
+
+    viewport.addEventListener(
+      "pointermove",
+      (event) => {
+        if (event.pointerId !== activePointer) return;
+        const dx = event.clientX - startX;
+        const dy = event.clientY - startY;
+
+        if (!axis) {
+          if (Math.hypot(dx, dy) < 10) return; // hysteresis before committing
+          if (Math.abs(dy) > Math.abs(dx)) {
+            activePointer = null; // vertical intent: leave the page alone
+            resumePending();
+            return;
+          }
+          axis = "x";
+          dragging = true;
+          base -= dx; // absorb the hysteresis so tracking stays 1:1
+          viewport.classList.add("is-dragging");
+          if (viewport.setPointerCapture) viewport.setPointerCapture(event.pointerId);
+          track.style.willChange = "transform";
+        }
+
+        history.push({ x: event.clientX, t: event.timeStamp });
+        if (history.length > 6) history.shift();
+
+        spring.value = constrain(base + dx);
+        render();
+      },
+      { passive: true }
+    );
+
+    function endDrag(event) {
+      if (event.pointerId !== activePointer) return;
+      activePointer = null;
+      if (!dragging) {
+        resumePending(); // a tap that never crossed the hysteresis
+        return;
+      }
+      dragging = false;
+      viewport.classList.remove("is-dragging");
+
+      let velocity = 0;
+      const recent = history.filter((point) => event.timeStamp - point.t < 120);
+      if (recent.length > 1) {
+        const first = recent[0];
+        const last = recent[recent.length - 1];
+        const dt = (last.t - first.t) / 1000;
+        if (dt > 0) velocity = (last.x - first.x) / dt;
+      }
+
+      // Land where the gesture was going, then hand the velocity over.
+      const projected = Math.round(-(spring.value + projectMomentum(velocity)) / step);
+      let target = Math.round(-spring.value / step);
+      if (Math.abs(velocity) > 400) {
+        // A deliberate flick commits in the direction it was thrown, even if it
+        // was short: the sign of the velocity decides, not where the finger
+        // stopped. Momentum can still carry it further than one slide.
+        const flicked = dragStartIndex + (velocity < 0 ? 1 : -1);
+        target = velocity < 0 ? Math.max(flicked, projected) : Math.min(flicked, projected);
+      } else {
+        target = projected;
+      }
+      goTo(target, velocity);
+    }
+
+    viewport.addEventListener("pointerup", endDrag, { passive: true });
+    viewport.addEventListener("pointercancel", endDrag, { passive: true });
+
+    // Trackpad: a two-finger horizontal swipe is the same gesture.
+    viewport.addEventListener(
+      "wheel",
+      (event) => {
+        if (Math.abs(event.deltaX) <= Math.abs(event.deltaY)) return;
+        event.preventDefault();
+        stopLoop();
+        spring.value = constrain(spring.value - event.deltaX);
+        spring.velocity = 0;
+        render();
+        clearTimeout(wheelTimer);
+        wheelTimer = window.setTimeout(() => {
+          goTo(Math.round(-spring.value / step));
+        }, 110);
+      },
+      { passive: false }
+    );
+
+    viewport.addEventListener("keydown", (event) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        goTo(index - 1);
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault();
+        goTo(index + 1);
+      }
+    });
+
+    if (prevButton) prevButton.addEventListener("click", () => goTo(index - 1));
+    if (nextButton) nextButton.addEventListener("click", () => goTo(index + 1));
+
+    if ("ResizeObserver" in window) {
+      new ResizeObserver(measure).observe(viewport);
+    } else {
+      window.addEventListener("resize", measure);
+    }
+    window.addEventListener("load", measure);
+    motionQuery.addEventListener?.("change", () => {
+      slides.forEach((slide) => {
+        slide.style.transform = "";
+        slide.style.opacity = "";
+      });
+      render();
+    });
+
+    measure();
+    updateControls();
+  }
+
+  function init() {
+    setupPressFeedback();
+    setupScrollEdge();
+    setupReveals();
+    document.querySelectorAll("[data-carousel]").forEach(setupCarousel);
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", init);
+  } else {
+    init();
+  }
+})();
diff --git a/docs/localization.js b/docs/localization.js
index d0387a3..fdab61c 100644
--- a/docs/localization.js
+++ b/docs/localization.js
@@ -31,6 +31,10 @@
       introTitle: "必要な数字だけを、<br>いつでも見える場所に。",
       introBody: "メニューバーでは残量をすばやく確認。詳しく見たいときはダッシュボードとウィジェットから、5時間枠、週次枠、今日のトークン数を追えます。ダッシュボードは最長90日間の推移と、前日・前7日・前30日・前90日との比較にも対応します。",
       promoAria: "Token Meterの画面",
+      promoHint: "ドラッグまたはスワイプで切り替え",
+      promoPrev: "前の画面",
+      promoNext: "次の画面",
+      skipToContent: "本文へスキップ",
       promoGlanceAlt: "メニューバーのポップオーバーと3サイズのウィジェットでClaudeとCodexの残量を表示するMac",
       promoGlanceCaption: "メニューバーとウィジェットで、残量をひと目で。",
       promoDashboardAlt: "日別の推移、トークン内訳、モデル別使用量を表示するToken Meterのダッシュボード",
@@ -111,6 +115,10 @@
       introTitle: "Only the numbers you need,<br>always within sight.",
       introBody: "Check remaining usage in the menu bar. Open the dashboard or widget for the 5-hour limit, weekly limit, and today's token count. The dashboard goes back up to 90 days and compares any period against the one before it.",
       promoAria: "Token Meter screenshots",
+      promoHint: "Drag or swipe to browse",
+      promoPrev: "Previous screen",
+      promoNext: "Next screen",
+      skipToContent: "Skip to content",
       promoGlanceAlt: "A Mac showing the Token Meter menu bar popover and widgets with Claude and Codex usage",
       promoGlanceCaption: "Menu bar and widgets — usage at a glance.",
       promoDashboardAlt: "The Token Meter dashboard showing daily trends, a token breakdown, and per-model usage",
@@ -191,6 +199,10 @@
       introTitle: "只看需要的数据，<br>随时尽收眼底。",
       introBody: "在菜单栏快速查看剩余用量，需要详情时，可通过仪表盘和小组件查看 5 小时限额、每周限额和今日 Token 数量。仪表盘最长可回溯 90 天，并支持与前一日、前 7 天、前 30 天、前 90 天对比。",
       promoAria: "Token Meter 界面截图",
+      promoHint: "拖动或滑动切换",
+      promoPrev: "上一张",
+      promoNext: "下一张",
+      skipToContent: "跳到正文",
       promoGlanceAlt: "Mac 上显示 Token Meter 菜单栏弹窗和小组件中的 Claude 与 Codex 用量",
       promoGlanceCaption: "菜单栏与小组件，用量一目了然。",
       promoDashboardAlt: "Token Meter 仪表盘显示每日趋势、Token 明细和各模型用量",
@@ -271,6 +283,10 @@
       introTitle: "필요한 수치만,<br>언제나 한눈에.",
       introBody: "메뉴 막대에서 잔여량을 빠르게 확인하세요. 자세한 내용은 대시보드와 위젯에서 5시간 한도, 주간 한도, 오늘의 토큰 수를 확인할 수 있습니다. 대시보드는 최대 90일 추이와 함께 전일, 이전 7일, 이전 30일, 이전 90일 대비 비교를 지원합니다.",
       promoAria: "Token Meter 화면 스크린샷",
+      promoHint: "드래그하거나 스와이프해서 넘기기",
+      promoPrev: "이전 화면",
+      promoNext: "다음 화면",
+      skipToContent: "본문으로 건너뛰기",
       promoGlanceAlt: "Token Meter 메뉴 막대 팝오버와 위젯에 Claude와 Codex 잔여량이 표시된 Mac",
       promoGlanceCaption: "메뉴 막대와 위젯으로 잔여량을 한눈에.",
       promoDashboardAlt: "일별 추이, 토큰 내역, 모델별 사용량을 보여 주는 Token Meter 대시보드",
diff --git a/docs/releases.html b/docs/releases.html
index e487605..420aa4f 100644
--- a/docs/releases.html
+++ b/docs/releases.html
@@ -4,13 +4,15 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="Token Meterのアップデート履歴とリリースノートです。" data-i18n-content="metaDescription">
-  <meta name="theme-color" content="#f5f7f9">
+  <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
+  <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
   <title data-i18n="releasesTitle">Token Meter - リリースノート</title>
   <link rel="icon" href="assets/token-meter-icon.png">
   <link rel="apple-touch-icon" href="assets/token-meter-icon.png">
-  <link rel="stylesheet" href="styles.css">
+  <link rel="stylesheet" href="styles.css?v=1.2.6-3">
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-  <script src="localization.js?v=1.2.6-2" defer></script>
+  <script src="localization.js?v=1.2.6-3" defer></script>
+  <script src="interactions.js?v=1.2.6-3" defer></script>
   <style>
     .releases-hero {
       background: var(--surface);
@@ -119,7 +121,7 @@
       <img src="assets/token-meter-icon.png" alt="" width="24" height="24">
       <span>Token Meter</span>
     </a>
-    <a class="header-download" href="https://github.com/TakeruF/token_meter/releases/download/v1.2.6/TokenMeter-1.2.6.zip" data-i18n="navDownload">ダウンロード</a>
+    <a class="header-download" data-press href="https://github.com/TakeruF/token_meter/releases/download/v1.2.6/TokenMeter-1.2.6.zip" data-i18n="navDownload">ダウンロード</a>
   </nav>
 
   <main>
@@ -160,10 +162,10 @@ <h1 data-i18n="releasesTitle">リリースノート</h1>
         </a>
       </div>
       <div class="language-switcher" role="group" aria-label="言語を選択" data-i18n-aria-label="languageAria">
-        <button type="button" lang="ja" data-language="ja">日本語</button>
-        <button type="button" lang="en" data-language="en">English</button>
-        <button type="button" lang="zh-CN" data-language="zh-CN">中文</button>
-        <button type="button" lang="ko" data-language="ko">한국어</button>
+        <button type="button" data-press lang="ja" data-language="ja">日本語</button>
+        <button type="button" data-press lang="en" data-language="en">English</button>
+        <button type="button" data-press lang="zh-CN" data-language="zh-CN">中文</button>
+        <button type="button" data-press lang="ko" data-language="ko">한국어</button>
       </div>
       <p class="footer-domain">takeruf.github.io/token_meter</p>
       <p class="footer-copyright">© 2026 Takeru Fujii · Apache License 2.0</p>
diff --git a/docs/screenshots/onboarding-display.png b/docs/screenshots/onboarding-display.png
index b3125db..36ec6d4 100644
Binary files a/docs/screenshots/onboarding-display.png and b/docs/screenshots/onboarding-display.png differ
diff --git a/docs/screenshots/onboarding-providers.png b/docs/screenshots/onboarding-providers.png
index 3127b03..89208f5 100644
Binary files a/docs/screenshots/onboarding-providers.png and b/docs/screenshots/onboarding-providers.png differ
diff --git a/docs/screenshots/onboarding-ready.png b/docs/screenshots/onboarding-ready.png
index a3bda04..94f0ffc 100644
Binary files a/docs/screenshots/onboarding-ready.png and b/docs/screenshots/onboarding-ready.png differ
diff --git a/docs/screenshots/onboarding-welcome.png b/docs/screenshots/onboarding-welcome.png
index 8cde25e..080a553 100644
Binary files a/docs/screenshots/onboarding-welcome.png and b/docs/screenshots/onboarding-welcome.png differ
diff --git a/docs/styles.css b/docs/styles.css
index 445eb09..df4c2c0 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -1,32 +1,125 @@
+/* ==========================================================================
+   Token Meter — site styles
+   Design language follows Apple's HIG-derived rules:
+   size-specific tracking/leading, translucent materials over hard chrome,
+   spring-based motion that starts on pointer-down and stays interruptible.
+   ========================================================================== */
+
+/* --------------------------------------------------------------------------
+   1. Tokens
+   -------------------------------------------------------------------------- */
+
 :root {
-  color-scheme: light;
-  --ink: #17191c;
-  --muted: #676c73;
-  --line: #dfe3e8;
+  color-scheme: light dark;
+
+  /* Surfaces */
+  --bg: #ffffff;
   --paper: #ffffff;
-  --surface: #f4f6f8;
+  --surface: #f5f5f7;
+  --surface-2: #ebebf0;
+  --line: rgba(0, 0, 0, 0.11);
+  --hairline: rgba(0, 0, 0, 0.07);
+
+  /* Ink */
+  --ink: #1d1d1f;
+  --muted: #6e6e73;
+  --faint: #8e8e93;
+
+  /* Accents */
   --accent: #0866ff;
-  --accent-hover: #0055dc;
-  --green: #1c9a55;
-  --max: 1180px;
+  --accent-hover: #0052d6;
+  --green: #1c8f52;
+
+  /* Materials (§ translucency conveys hierarchy) */
+  --material-thin: rgba(255, 255, 255, 0.62);
+  --material-blur: blur(22px) saturate(180%);
+
+  /* Depth — bigger surfaces read as thicker */
+  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.06);
+  --shadow-md: 0 2px 6px rgba(16, 24, 40, 0.06), 0 18px 40px rgba(16, 24, 40, 0.1);
+  --shadow-lg: 0 4px 10px rgba(16, 24, 40, 0.06), 0 40px 90px rgba(16, 24, 40, 0.16);
+
+  /* Dark sections keep their own ink regardless of the page theme */
+  --deep: #1a1c1f;
+  --deep-ink: #f5f5f7;
+  --deep-muted: #a9aeb5;
+  --deep-line: rgba(255, 255, 255, 0.14);
+
+  /* Rhythm — spacing in rem so it scales with the user's text size */
+  --max: 71.25rem;      /* 1140px */
+  --gutter: clamp(1.25rem, 4vw, 3rem);
+  --section-y: clamp(4.5rem, 9vw, 8.5rem);
+  --radius-lg: 1.25rem;
+  --radius-md: 0.875rem;
+
+  /* Motion — critically damped spring, sampled as a linear() easing.
+     damping 1.0 / response ~0.39s; settle time is the duration. */
+  --ease-spring: linear(
+    0, 0.0338, 0.1126, 0.2119, 0.3166, 0.418, 0.5112, 0.594, 0.6658, 0.727,
+    0.7785, 0.8212, 0.8564, 0.8851, 0.9084, 0.9272, 0.9424, 0.9545, 0.9641,
+    0.9718, 0.9779, 0.9826, 0.9864, 0.9894, 0.9917, 0.9936, 0.995, 0.9961, 1
+  );
+  --dur-spring: 500ms;
+  --dur-press: 100ms;   /* feedback must land on the press, not after it */
+  --dur-hover: 180ms;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #000000;
+    --paper: #101012;
+    --surface: #131316;
+    --surface-2: #1c1c20;
+    --line: rgba(255, 255, 255, 0.13);
+    --hairline: rgba(255, 255, 255, 0.08);
+
+    --ink: #f5f5f7;
+    --muted: #98989d;
+    --faint: #7c7c81;
+
+    --accent: #3d8bff;
+    --accent-hover: #6aa6ff;
+    --green: #35c07a;
+
+    --material-thin: rgba(24, 24, 27, 0.62);
+
+    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
+    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.5), 0 18px 40px rgba(0, 0, 0, 0.45);
+    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.55), 0 40px 90px rgba(0, 0, 0, 0.6);
+
+    --deep-line: rgba(255, 255, 255, 0.12);
+  }
 }
 
+/* --------------------------------------------------------------------------
+   2. Base + typography
+   Tracking is size-specific: tighten as type grows, leave body near zero.
+   Leading moves inversely to size.
+   -------------------------------------------------------------------------- */
+
 * {
   box-sizing: border-box;
 }
 
 html {
   scroll-behavior: smooth;
+  scroll-padding-top: 5rem;
   overflow-x: hidden;
+  -webkit-text-size-adjust: 100%;
 }
 
 body {
   margin: 0;
-  overflow-x: hidden;
+  /* No overflow-x here: it would make <body> the scroll container and stop
+     the sticky nav from sticking. Clipping lives on <html>. */
   color: var(--ink);
-  background: var(--paper);
-  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", sans-serif;
+  background: var(--bg);
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
+    "Hiragino Sans", "Noto Sans JP", sans-serif;
+  font-size: 1rem;
+  line-height: 1.75;
   letter-spacing: 0;
+  font-optical-sizing: auto;
   -webkit-font-smoothing: antialiased;
 }
 
@@ -40,6 +133,162 @@ img {
   max-width: 100%;
 }
 
+figure {
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3 {
+  /* Proportional kana metrics keep large Japanese headings from looking loose. */
+  font-feature-settings: "palt" 1;
+  text-wrap: balance;
+}
+
+h1 {
+  margin-bottom: 1.25rem;
+  font-size: clamp(3rem, 1.7rem + 5.6vw, 5.5rem);
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.035em;
+}
+
+h2 {
+  margin-bottom: 1.5rem;
+  font-size: clamp(2rem, 1.25rem + 3vw, 3.375rem);
+  font-weight: 700;
+  line-height: 1.1;
+  letter-spacing: -0.028em;
+}
+
+h3 {
+  margin-bottom: 1rem;
+  font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.125rem);
+  font-weight: 660;
+  line-height: 1.22;
+  letter-spacing: -0.021em;
+}
+
+p {
+  text-wrap: pretty;
+}
+
+.eyebrow,
+.section-label {
+  margin: 0 0 1.125rem;
+  color: var(--accent);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  line-height: 1.4;
+  /* Small text wants slightly positive tracking. */
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+}
+
+.lede {
+  font-size: clamp(1.125rem, 0.95rem + 0.75vw, 1.5rem);
+  font-weight: 480;
+  line-height: 1.45;
+  letter-spacing: -0.012em;
+}
+
+.body-copy {
+  color: var(--muted);
+  font-size: 1rem;
+  line-height: 1.8;
+  letter-spacing: 0;
+}
+
+.release-meta {
+  margin: 1.125rem 0 0;
+  color: var(--faint);
+  font-size: 0.75rem;
+  line-height: 1.7;
+  letter-spacing: 0.005em;
+}
+
+.skip-link {
+  position: fixed;
+  z-index: 100;
+  top: 0.5rem;
+  left: 50%;
+  padding: 0.625rem 1.125rem;
+  color: #fff;
+  background: var(--ink);
+  border-radius: 999px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  transform: translate(-50%, -200%);
+  transition: transform var(--dur-spring) var(--ease-spring);
+}
+
+.skip-link:focus-visible {
+  transform: translate(-50%, 0);
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 3px;
+  border-radius: 4px;
+}
+
+/* --------------------------------------------------------------------------
+   3. Motion primitives
+   -------------------------------------------------------------------------- */
+
+/* Scroll reveal: opacity + transform only, so it stays on the compositor.
+   Scoped to .js so the page is fully readable without JavaScript. */
+.js .reveal {
+  opacity: 0;
+  transform: translate3d(0, 1.125rem, 0);
+  transition:
+    opacity var(--dur-spring) var(--ease-spring),
+    transform var(--dur-spring) var(--ease-spring);
+  transition-delay: calc(var(--i, 0) * 70ms);
+}
+
+.js .reveal.is-in {
+  opacity: 1;
+  transform: none;
+}
+
+/* Press feedback fires on pointer-down (see interactions.js), never on click. */
+.button,
+.header-download,
+.nav-link,
+.text-link,
+.promo-arrow,
+.promo-dot,
+.language-switcher button {
+  transition:
+    transform var(--dur-press) ease-out,
+    background-color var(--dur-hover) ease,
+    color var(--dur-hover) ease,
+    border-color var(--dur-hover) ease,
+    box-shadow var(--dur-hover) ease;
+}
+
+.is-pressing {
+  transform: scale(0.97);
+}
+
+.promo-dot.is-pressing,
+.promo-arrow.is-pressing {
+  transform: scale(0.88);
+}
+
+/* --------------------------------------------------------------------------
+   4. Navigation — a translucent layer content scrolls under,
+   with a scroll edge effect instead of a permanent divider.
+   -------------------------------------------------------------------------- */
+
 .site-nav {
   position: sticky;
   z-index: 40;
@@ -48,196 +297,199 @@ img {
   width: 100%;
   align-items: center;
   justify-content: space-between;
-  min-height: 57px;
-  padding: 12px 20px;
-  background: rgba(255, 255, 255, 0.8);
-  border-bottom: 1px solid #f1f1f2;
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
+  gap: 1rem;
+  min-height: 3.25rem;
+  padding: 0.625rem var(--gutter);
+  background: transparent;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  transition: background-color 240ms ease, backdrop-filter 240ms ease;
+}
+
+body.is-scrolled .site-nav {
+  background: var(--material-thin);
+  backdrop-filter: var(--material-blur);
+  -webkit-backdrop-filter: var(--material-blur);
+}
+
+/* The edge is a fade where content meets the floating chrome, not a 1px rule. */
+.site-nav::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  right: 0;
+  left: 0;
+  height: 1.5rem;
+  background: linear-gradient(to bottom, var(--material-thin), transparent);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 240ms ease;
+}
+
+body.is-scrolled .site-nav::after {
+  opacity: 1;
 }
 
 .site-brand {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  color: #3f3f46;
-  font-size: 14px;
-  font-weight: 650;
-  line-height: 1;
+  gap: 0.5rem;
   min-width: 0;
-  transition: color 160ms ease;
+  color: var(--ink);
+  font-size: 0.875rem;
+  font-weight: 640;
+  line-height: 1;
+  letter-spacing: -0.008em;
 }
 
-.site-brand:hover {
-  color: #18181b;
+.site-brand img {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 0.375rem;
 }
 
-.site-brand img {
-  width: 24px;
-  height: 24px;
-  border-radius: 6px;
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: clamp(1rem, 2.4vw, 2rem);
+}
+
+.nav-link {
+  color: var(--muted);
+  font-size: 0.8125rem;
+  font-weight: 550;
+  letter-spacing: 0.002em;
+}
+
+.nav-link:hover {
+  color: var(--ink);
 }
 
 .header-download {
   display: inline-flex;
+  flex: 0 0 auto;
   align-items: center;
   justify-content: center;
-  min-height: 32px;
-  padding: 6px 16px;
-  color: #fff;
-  background: #18181b;
+  min-height: 2rem;
+  padding: 0.375rem 1rem;
+  color: var(--bg);
+  background: var(--ink);
   border-radius: 999px;
-  font-size: 12px;
-  font-weight: 650;
+  font-size: 0.75rem;
+  font-weight: 640;
   line-height: 1;
-  flex: 0 0 auto;
-  transition: background-color 160ms ease, transform 160ms ease;
+  letter-spacing: 0.002em;
 }
 
 .header-download:hover {
-  background: #27272a;
+  background: var(--accent);
+  color: #fff;
 }
 
-.header-download:active {
-  transform: scale(0.97);
-}
-
-.header-download:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 3px;
-}
+/* --------------------------------------------------------------------------
+   5. Hero
+   -------------------------------------------------------------------------- */
 
 .hero {
   position: relative;
-  height: min(780px, calc(100svh - 44px));
   overflow: hidden;
-  background: var(--surface);
-}
-
-.hero-media {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center;
-  filter: saturate(0.8) contrast(0.96);
-  transform: scale(1.01);
+  padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter) clamp(2rem, 4vw, 3rem);
+  text-align: center;
+  isolation: isolate;
 }
 
-.hero-veil {
+/* A soft material ground rather than a washed-out screenshot behind the words. */
+.hero::before {
+  content: "";
   position: absolute;
-  inset: 0;
-  background: rgba(246, 248, 250, 0.78);
+  z-index: -1;
+  inset: -20% -10% auto;
+  height: 130%;
+  background:
+    radial-gradient(60% 55% at 50% 0%, rgba(8, 102, 255, 0.14), transparent 70%),
+    radial-gradient(45% 40% at 12% 18%, rgba(120, 90, 255, 0.1), transparent 70%),
+    radial-gradient(50% 45% at 88% 12%, rgba(0, 190, 160, 0.09), transparent 70%);
+  /* Dissolve the tint into the page: the section edge must not read as a seam. */
+  -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
+  mask-image: linear-gradient(to bottom, #000 40%, transparent 100%);
+  pointer-events: none;
 }
 
 .hero-content {
-  position: relative;
-  z-index: 2;
-  display: flex;
-  width: min(calc(100% - 48px), var(--max));
-  height: 100%;
-  margin: 0 auto;
-  padding-top: 120px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-}
-
-.eyebrow,
-.section-label {
-  margin: 0 0 18px;
-  color: var(--accent);
-  font-size: 12px;
-  font-weight: 750;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-h1,
-h2,
-h3,
-p {
-  margin-top: 0;
-}
-
-h1 {
-  max-width: 780px;
-  margin-bottom: 22px;
-  font-size: 78px;
-  line-height: 0.96;
-  letter-spacing: 0;
+  width: min(100%, 52rem);
+  margin-inline: auto;
 }
 
 .hero-copy {
-  max-width: 680px;
-  margin-bottom: 34px;
-  font-size: 28px;
-  font-weight: 560;
-  line-height: 1.5;
+  max-width: 34rem;
+  margin: 0 auto 2rem;
+  color: var(--muted);
 }
 
 .hero-actions {
   display: flex;
   align-items: center;
-  gap: 24px;
+  justify-content: center;
+  gap: clamp(1rem, 2.5vw, 1.75rem);
+  flex-wrap: wrap;
 }
 
 .button {
   display: inline-flex;
-  min-height: 48px;
+  min-height: 3rem;
   align-items: center;
   justify-content: center;
-  padding: 0 22px;
-  border-radius: 6px;
-  font-size: 14px;
-  font-weight: 700;
-  transition: background-color 160ms ease, transform 160ms ease;
+  padding: 0 1.5rem;
+  border-radius: 999px;
+  font-size: 0.9375rem;
+  font-weight: 640;
+  letter-spacing: -0.004em;
 }
 
 .button-primary {
-  color: white;
+  color: #fff;
   background: var(--accent);
+  box-shadow: var(--shadow-sm);
 }
 
 .button-primary:hover {
   background: var(--accent-hover);
-  transform: translateY(-1px);
 }
 
 .text-link {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  color: var(--ink);
-  font-size: 13px;
-  font-weight: 700;
-  border-bottom: 1px solid currentColor;
-  padding-bottom: 3px;
+  gap: 0.4375rem;
+  color: var(--accent);
+  font-size: 0.9375rem;
+  font-weight: 550;
+  letter-spacing: -0.004em;
 }
 
-.text-link:hover {
-  color: var(--accent);
+.text-link span[aria-hidden] {
+  transition: transform var(--dur-spring) var(--ease-spring);
 }
 
-.release-meta {
-  margin: 18px 0 0;
-  color: var(--muted);
-  font-size: 12px;
-  line-height: 1.6;
+.text-link:hover span[aria-hidden] {
+  transform: translateX(0.1875rem);
 }
 
+/* --------------------------------------------------------------------------
+   6. Spec rail
+   -------------------------------------------------------------------------- */
+
 .summary-band {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  color: white;
-  background: var(--ink);
+  width: min(100% - (var(--gutter) * 2), var(--max));
+  margin: clamp(1rem, 2vw, 1.5rem) auto 0;
+  border-top: 1px solid var(--hairline);
+  border-bottom: 1px solid var(--hairline);
 }
 
 .summary-band > div {
-  min-height: 128px;
-  padding: 36px 5vw;
-  border-right: 1px solid rgba(255, 255, 255, 0.14);
+  padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 2rem);
+  border-right: 1px solid var(--hairline);
 }
 
 .summary-band > div:last-child {
@@ -250,53 +502,64 @@ h1 {
 }
 
 .summary-band strong {
-  margin-bottom: 7px;
-  font-size: 17px;
+  margin-bottom: 0.375rem;
+  font-size: 1.0625rem;
+  font-weight: 620;
+  letter-spacing: -0.014em;
 }
 
 .summary-band span {
-  color: #aeb3ba;
-  font-size: 12px;
+  color: var(--muted);
+  font-size: 0.8125rem;
+  line-height: 1.6;
+  letter-spacing: 0.004em;
 }
 
+/* --------------------------------------------------------------------------
+   7. Intro
+   -------------------------------------------------------------------------- */
+
 .intro {
-  width: min(calc(100% - 48px), 880px);
-  margin: 0 auto;
-  padding: 100px 0 80px;
+  width: min(100% - (var(--gutter) * 2), 48rem);
+  margin-inline: auto;
+  padding: var(--section-y) 0 clamp(2.5rem, 5vw, 4rem);
   text-align: center;
 }
 
-.intro h2,
-.privacy-band h2,
-.download-section h2 {
-  margin-bottom: 30px;
-  font-size: 52px;
-  line-height: 1.2;
-  letter-spacing: 0;
-}
-
-.intro > p:last-child {
-  max-width: 650px;
+.intro .body-copy {
+  max-width: 38rem;
   margin: 0 auto;
-  color: var(--muted);
-  font-size: 16px;
-  line-height: 1.9;
 }
 
+/* --------------------------------------------------------------------------
+   8. Promo carousel — direct manipulation
+   No-JS fallback is the plain stacked strip; JS upgrades it in place.
+   -------------------------------------------------------------------------- */
+
 .promo-strip {
+  width: min(100% - (var(--gutter) * 2), var(--max));
+  margin-inline: auto;
+  padding-bottom: var(--section-y);
+}
+
+.promo-track {
   display: grid;
-  gap: 48px;
-  width: min(calc(100% - 48px), var(--max));
-  margin: 0 auto;
-  padding: 0 0 100px;
+  gap: clamp(1.5rem, 3vw, 2.5rem);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.promo-slide {
+  min-width: 0;
 }
 
 .promo-shot {
   overflow: hidden;
-  border: 1px solid #d7dce2;
-  border-radius: 14px;
   background: var(--surface);
-  box-shadow: 0 24px 70px rgba(25, 35, 48, 0.12);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-md);
 }
 
 .promo-shot img {
@@ -305,32 +568,136 @@ h1 {
 }
 
 .promo-shot figcaption {
-  padding: 14px 18px;
+  padding: 0.875rem 1.125rem;
   color: var(--muted);
-  background: white;
-  border-top: 1px solid var(--line);
-  font-size: 13px;
+  background: var(--paper);
+  border-top: 1px solid var(--hairline);
+  font-size: 0.8125rem;
   line-height: 1.6;
   text-align: center;
 }
 
+.promo-controls {
+  display: none;
+}
+
+/* --- carousel mode (added by interactions.js) --- */
+
+.promo-strip.is-carousel .promo-viewport {
+  overflow: hidden;
+  /* Vertical page scrolling stays native; only horizontal is ours. */
+  touch-action: pan-y;
+  cursor: grab;
+  padding-block: 0.5rem;
+  margin-block: -0.5rem;
+}
+
+.promo-strip.is-carousel .promo-viewport.is-dragging {
+  cursor: grabbing;
+}
+
+.promo-strip.is-carousel .promo-track {
+  display: flex;
+  gap: clamp(1rem, 2.5vw, 2rem);
+  will-change: transform;
+}
+
+.promo-strip.is-carousel .promo-slide {
+  flex: 0 0 100%;
+  /* scale/opacity are written per frame so the drag reads as depth, not a slide */
+  transform-origin: center;
+}
+
+.promo-strip.is-carousel .promo-slide img {
+  -webkit-user-drag: none;
+  user-select: none;
+}
+
+.promo-strip.is-carousel .promo-controls {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: clamp(1.25rem, 2.5vw, 2rem);
+}
+
+.promo-arrow {
+  display: inline-flex;
+  width: 2.25rem;
+  height: 2.25rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  color: var(--ink);
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.promo-arrow:hover:not(:disabled) {
+  background: var(--surface-2);
+}
+
+.promo-arrow:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+.promo-dots {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.promo-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+  background: var(--line);
+  border: 0;
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+.promo-dot[aria-current="true"] {
+  width: 1.375rem;
+  background: var(--accent);
+}
+
+.promo-hint {
+  margin: 0.75rem 0 0;
+  color: var(--faint);
+  font-size: 0.75rem;
+  letter-spacing: 0.01em;
+  text-align: center;
+}
+
+.promo-strip:not(.is-carousel) .promo-hint {
+  display: none;
+}
+
+/* --------------------------------------------------------------------------
+   9. Feature rows
+   -------------------------------------------------------------------------- */
+
 .showcase {
-  border-top: 1px solid var(--line);
+  border-top: 1px solid var(--hairline);
 }
 
 .feature-row {
   display: grid;
-  grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
-  gap: 64px;
+  grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.28fr);
+  gap: clamp(2rem, 4vw, 4rem);
   align-items: center;
-  width: min(calc(100% - 48px), var(--max));
-  margin: 0 auto;
-  padding: 80px 0;
-  border-bottom: 1px solid var(--line);
+  width: min(100% - (var(--gutter) * 2), var(--max));
+  margin-inline: auto;
+  padding: clamp(3.5rem, 7vw, 5.5rem) 0;
+  border-bottom: 1px solid var(--hairline);
 }
 
 .feature-row-reverse {
-  grid-template-columns: minmax(0, 1.28fr) minmax(240px, 0.72fr);
+  grid-template-columns: minmax(0, 1.28fr) minmax(15rem, 0.72fr);
 }
 
 .feature-row-reverse .feature-copy {
@@ -344,36 +711,35 @@ h1 {
 }
 
 .feature-number {
-  margin-bottom: 34px;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
   color: var(--green);
-  font-size: 12px;
-  font-weight: 800;
-}
-
-.feature-copy h3 {
-  margin-bottom: 20px;
-  font-size: 32px;
-  line-height: 1.35;
-  letter-spacing: 0;
+  font-size: 0.6875rem;
+  font-weight: 750;
+  letter-spacing: 0.09em;
 }
 
-.feature-copy > p:last-child {
-  color: var(--muted);
-  font-size: 14px;
-  line-height: 1.9;
+.feature-number::after {
+  content: "";
+  width: 1.75rem;
+  height: 1px;
+  background: currentColor;
+  opacity: 0.5;
 }
 
-figure {
-  margin: 0;
+.feature-copy .body-copy {
+  font-size: 0.9375rem;
 }
 
 .product-shot,
 .gallery-shot {
   overflow: hidden;
-  border: 1px solid #d7dce2;
-  border-radius: 8px;
   background: var(--surface);
-  box-shadow: 0 24px 70px rgba(25, 35, 48, 0.12);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
 }
 
 .product-shot img,
@@ -383,101 +749,109 @@ figure {
 }
 
 .product-shot figcaption {
-  padding: 11px 14px;
-  color: var(--muted);
-  background: white;
-  border-top: 1px solid var(--line);
-  font-size: 10px;
+  padding: 0.6875rem 0.875rem;
+  color: var(--faint);
+  background: var(--paper);
+  border-top: 1px solid var(--hairline);
+  font-size: 0.625rem;
+  letter-spacing: 0.06em;
   text-align: right;
   text-transform: uppercase;
 }
 
+/* --------------------------------------------------------------------------
+   10. Widget band
+   -------------------------------------------------------------------------- */
+
 .widget-promo {
-  padding: 90px max(24px, calc((100vw - var(--max)) / 2));
-  background: #e5ece8;
-  border-bottom: 1px solid #d4ddd8;
+  padding: var(--section-y) var(--gutter);
+  background:
+    radial-gradient(70% 60% at 78% 20%, rgba(28, 143, 82, 0.14), transparent 68%),
+    var(--surface);
+  border-top: 1px solid var(--hairline);
+  border-bottom: 1px solid var(--hairline);
 }
 
 .widget-promo-inner {
   display: grid;
-  grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
-  gap: 60px;
+  grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
+  gap: clamp(2.5rem, 5vw, 4rem);
   align-items: center;
   max-width: var(--max);
-  margin: 0 auto;
-}
-
-.widget-promo-copy h2 {
-  margin-bottom: 24px;
-  font-size: 44px;
-  line-height: 1.22;
+  margin-inline: auto;
 }
 
-.widget-promo-copy > p:not(.section-label) {
-  margin-bottom: 34px;
-  color: #56615b;
-  font-size: 15px;
-  line-height: 1.9;
+.widget-promo-copy .body-copy {
+  margin-bottom: 2rem;
+  font-size: 0.9375rem;
 }
 
 .widget-points {
   margin: 0;
-  border-top: 1px solid #bdc9c2;
+  border-top: 1px solid var(--line);
 }
 
 .widget-points > div {
   display: grid;
   grid-template-columns: 0.9fr 1.1fr;
-  gap: 18px;
-  padding: 16px 0;
-  border-bottom: 1px solid #bdc9c2;
+  gap: 1.125rem;
+  padding: 0.875rem 0;
+  border-bottom: 1px solid var(--line);
 }
 
 .widget-points dt,
 .widget-points dd {
   margin: 0;
-  font-size: 12px;
+  font-size: 0.8125rem;
   line-height: 1.5;
+  letter-spacing: 0.004em;
 }
 
 .widget-points dt {
-  font-weight: 750;
+  font-weight: 640;
 }
 
 .widget-points dd {
-  color: #66716b;
+  color: var(--muted);
 }
 
 .widget-shot {
-  width: min(100%, 560px);
+  width: min(100%, 34rem);
   justify-self: center;
 }
 
 .widget-shot img {
-  display: block;
   width: 100%;
   height: auto;
-  filter: drop-shadow(0 24px 34px rgba(44, 61, 52, 0.16));
+  filter: drop-shadow(0 1.5rem 2.25rem rgba(20, 40, 30, 0.22));
 }
 
 .widget-shot figcaption {
-  margin-top: 16px;
-  color: #66716b;
-  font-size: 10px;
+  margin-top: 1rem;
+  color: var(--faint);
+  font-size: 0.625rem;
+  letter-spacing: 0.06em;
   text-align: right;
   text-transform: uppercase;
 }
 
+/* --------------------------------------------------------------------------
+   11. Privacy band — a deliberately darker material to separate the region
+   -------------------------------------------------------------------------- */
+
 .privacy-band {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 80px;
-  padding: 90px max(24px, calc((100vw - var(--max)) / 2));
-  color: white;
-  background: #20272d;
+  gap: clamp(2.5rem, 5vw, 5rem);
+  padding: var(--section-y) max(var(--gutter), calc((100vw - var(--max)) / 2));
+  color: var(--deep-ink);
+  background: var(--deep);
+  border-top: 1px solid var(--deep-line);
+  border-bottom: 1px solid var(--deep-line);
 }
 
 .privacy-band .section-label {
+  /* Vibrancy: on a dark material, lift contrast and weight instead of graying out. */
   color: #6aa6ff;
 }
 
@@ -486,79 +860,79 @@ figure {
 }
 
 .privacy-details p {
-  margin-bottom: 22px;
-  color: #c3c9cf;
-  font-size: 14px;
-  line-height: 1.9;
+  margin-bottom: 1.375rem;
+  color: var(--deep-muted);
+  font-size: 0.9375rem;
+  line-height: 1.85;
 }
 
 .text-link.light {
-  margin-top: 12px;
-  color: white;
+  margin-top: 0.75rem;
+  color: #fff;
 }
 
+/* --------------------------------------------------------------------------
+   12. Setup gallery
+   -------------------------------------------------------------------------- */
+
 .gallery {
-  position: relative;
   display: grid;
-  grid-template-columns: 1.25fr 0.75fr;
-  gap: 32px;
-  width: min(calc(100% - 48px), var(--max));
-  margin: 0 auto;
-  padding: 100px 0;
-}
-
-.gallery-heading {
-  grid-column: 1 / -1;
-  margin-bottom: 30px;
+  grid-template-columns: minmax(15rem, 0.85fr) minmax(0, 1.15fr);
+  gap: clamp(2rem, 4vw, 4rem);
+  align-items: center;
+  width: min(100% - (var(--gutter) * 2), var(--max));
+  margin-inline: auto;
+  padding: var(--section-y) 0;
 }
 
 .gallery-heading h2 {
-  margin: 0;
-  font-size: 40px;
+  margin-bottom: 0;
+  font-size: clamp(1.875rem, 1.3rem + 2vw, 2.75rem);
 }
 
 .gallery-copy {
-  max-width: 620px;
-  margin: 20px 0 0;
-  color: var(--muted);
-  font-size: 15px;
-  line-height: 1.8;
+  max-width: 40rem;
+  margin: 1.25rem 0 1.5rem;
 }
 
-.gallery-shot-detail {
-  align-self: end;
-  margin-bottom: -54px;
-}
+/* --------------------------------------------------------------------------
+   13. Download
+   -------------------------------------------------------------------------- */
 
 .download-section {
-  padding: 100px 24px;
+  padding: var(--section-y) var(--gutter);
   text-align: center;
   background: var(--surface);
-  border-top: 1px solid var(--line);
+  border-top: 1px solid var(--hairline);
 }
 
 .download-copy {
-  max-width: 560px;
-  margin: 0 auto 32px;
-  color: var(--muted);
-  font-size: 15px;
-  line-height: 1.8;
+  max-width: 34rem;
+  margin: 0 auto 2rem;
 }
 
+.download-section .release-meta {
+  margin-bottom: 1.25rem;
+}
+
+/* --------------------------------------------------------------------------
+   14. Footer
+   -------------------------------------------------------------------------- */
+
 .site-footer {
-  padding: 40px 24px;
-  border-top: 1px solid #f1f1f2;
+  padding: 2.5rem var(--gutter);
+  border-top: 1px solid var(--hairline);
 }
 
 .footer-inner {
   display: flex;
-  max-width: 448px;
-  margin: 0 auto;
+  max-width: 28rem;
+  margin-inline: auto;
   flex-direction: column;
   align-items: center;
-  gap: 16px;
-  color: #a1a1aa;
-  font-size: 12px;
+  gap: 1rem;
+  color: var(--faint);
+  font-size: 0.75rem;
   line-height: 1.5;
   text-align: center;
 }
@@ -567,32 +941,29 @@ figure {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  column-gap: 20px;
-  row-gap: 8px;
+  column-gap: 1.25rem;
+  row-gap: 0.5rem;
 }
 
-.footer-links a {
-  transition: color 160ms ease;
+.footer-links a,
+.footer-icons a {
+  transition: color var(--dur-hover) ease;
 }
 
-.footer-links a:hover {
-  color: #52525b;
+.footer-links a:hover,
+.footer-icons a:hover {
+  color: var(--ink);
 }
 
 .footer-icons {
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 1rem;
 }
 
 .footer-icons a {
   display: inline-flex;
-  color: #a1a1aa;
-  transition: color 160ms ease;
-}
-
-.footer-icons a:hover {
-  color: #52525b;
+  color: var(--faint);
 }
 
 .language-switcher {
@@ -600,18 +971,18 @@ figure {
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  gap: 16px;
+  gap: 1rem;
 }
 
 .language-switcher button {
-  padding: 3px 0;
+  padding: 0.1875rem 0;
   color: var(--muted);
   background: transparent;
   border: 0;
   border-bottom: 1px solid transparent;
   border-radius: 0;
   font: inherit;
-  font-size: 11px;
+  font-size: 0.6875rem;
   line-height: 1.4;
   cursor: pointer;
 }
@@ -622,62 +993,34 @@ figure {
   border-bottom-color: currentColor;
 }
 
-.language-switcher button:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 4px;
-}
-
 .footer-domain {
   margin: 0;
-  color: #d4d4d8;
+  color: var(--faint);
+  opacity: 0.65;
 }
 
 .footer-copyright {
   margin: 0;
 }
 
-@media (max-width: 800px) {
-  .hero {
-    height: calc(100svh - 32px);
-    max-height: 720px;
-  }
-
-  .hero-media {
-    object-position: 60% center;
-  }
-
-  .hero-veil {
-    background: rgba(246, 248, 250, 0.84);
-  }
-
-  .hero-content {
-    width: calc(100% - 40px);
-    padding-top: 84px;
-  }
-
-  h1 {
-    font-size: 52px;
-  }
-
-  .hero-copy {
-    font-size: 21px;
-  }
+/* --------------------------------------------------------------------------
+   15. Responsive
+   -------------------------------------------------------------------------- */
 
-  .hero-actions {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 18px;
+@media (max-width: 60rem) {
+  .nav-links {
+    display: none;
   }
+}
 
+@media (max-width: 50rem) {
   .summary-band {
     grid-template-columns: 1fr;
   }
 
   .summary-band > div {
-    min-height: 94px;
-    padding: 25px 24px;
     border-right: 0;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
+    border-bottom: 1px solid var(--hairline);
   }
 
   .summary-band > div:last-child {
@@ -685,33 +1028,17 @@ figure {
   }
 
   .intro {
-    width: calc(100% - 40px);
-    padding: 100px 0 90px;
     text-align: left;
   }
 
-  .intro h2,
-  .privacy-band h2,
-  .download-section h2 {
-    font-size: 36px;
-  }
-
-  .promo-strip {
-    gap: 36px;
-    width: calc(100% - 40px);
-    padding-bottom: 90px;
-  }
-
-  .promo-shot figcaption {
-    font-size: 12px;
+  .intro .body-copy {
+    margin-inline: 0;
   }
 
   .feature-row,
   .feature-row-reverse {
     grid-template-columns: 1fr;
-    gap: 44px;
-    width: calc(100% - 40px);
-    padding: 84px 0;
+    gap: 2.25rem;
   }
 
   .feature-row-reverse .feature-copy,
@@ -720,105 +1047,85 @@ figure {
     grid-row: auto;
   }
 
-  .feature-row-reverse .feature-copy {
-    order: 1;
-  }
-
-  .feature-row-reverse .product-shot {
-    order: 2;
-  }
-
-  .feature-copy h3 {
-    font-size: 28px;
-  }
-
-  .widget-promo {
-    padding: 90px 20px;
-  }
-
-  .widget-promo-inner {
-    grid-template-columns: 1fr;
-    gap: 56px;
-  }
-
-  .widget-promo-copy {
-    max-width: 620px;
-  }
-
-  .widget-promo-copy h2 {
-    font-size: 36px;
-  }
-
-  .privacy-band {
-    grid-template-columns: 1fr;
-    gap: 42px;
-    padding: 90px 20px;
-  }
-
+  .widget-promo-inner,
+  .privacy-band,
   .gallery {
     grid-template-columns: 1fr;
-    width: calc(100% - 40px);
-    padding: 100px 0;
   }
 
-  .gallery-heading,
-  .gallery-shot-wide,
-  .gallery-shot-detail {
+  .gallery-shot-wide {
     grid-column: 1;
   }
+}
 
-  .gallery-shot-detail {
-    margin: 0;
+@media (max-width: 30rem) {
+  .hero-actions .button {
+    width: 100%;
   }
+}
+
+/* --------------------------------------------------------------------------
+   16. Accessibility preferences
+   -------------------------------------------------------------------------- */
 
-  .download-section {
-    padding: 100px 20px;
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
   }
 
-  .language-switcher {
-    gap: 14px;
+  .js .reveal {
+    transform: none;
+    transition: opacity 200ms ease;
   }
-}
 
-@media (max-width: 580px) {
-  .site-nav {
-    gap: 12px;
-    padding-right: 16px;
-    padding-left: 16px;
+  .skip-link {
+    transition: none;
   }
 
-  .header-download {
-    padding-right: 12px;
-    padding-left: 12px;
+  .is-pressing {
+    transform: none;
+    opacity: 0.7;
   }
 
-  .widget-shot {
-    width: min(100%, 430px);
+  .text-link:hover span[aria-hidden] {
+    transform: none;
   }
 }
 
-@media (max-width: 390px) {
-  .button {
-    width: 100%;
-    padding: 0 14px;
-    font-size: 13px;
+@media (prefers-reduced-transparency: reduce) {
+  body.is-scrolled .site-nav {
+    background: var(--bg);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+    border-bottom: 1px solid var(--line);
   }
 
-  h1 {
-    font-size: 46px;
+  .site-nav::after {
+    display: none;
   }
+}
 
-  .hero-copy {
-    font-size: 19px;
+@media (prefers-contrast: more) {
+  :root {
+    --muted: #43434a;
+    --faint: #43434a;
+    --line: rgba(0, 0, 0, 0.4);
+    --hairline: rgba(0, 0, 0, 0.28);
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  html {
-    scroll-behavior: auto;
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --muted: #d8d8dd;
+      --faint: #d8d8dd;
+      --line: rgba(255, 255, 255, 0.45);
+      --hairline: rgba(255, 255, 255, 0.3);
+    }
   }
 
-  .button {
-    transition: none;
+  .promo-shot,
+  .product-shot,
+  .gallery-shot,
+  .promo-arrow {
+    border-width: 2px;
   }
 }
