/* ============================================================================
   案X3「実演（ホーム寄り）＋ 4つの追加」— (src/_lp/botch-x3/botch-x3.css)
   ----------------------------------------------------------------------------
   ★ 案X2（src/_lp/botch-x2/botch-x2.css）の複製から始めた。X2 は無傷。

   【Ryo さん 2026-08-04 の4つ — どこに入っているか】
     ① Inside botch を「流れている風」に ……………………… §3b
     ② 拡大表示（ライトボックス）……………………………… §19（＋ JS §F）
     ③ 現れて、通り過ぎたら薄れる ……………………………… §15b（＋ §15 / §16）
     ④ How it works に投稿の再現 ……………………………… §9
   【あわせて変えた1行】
     §15 の入場の fill-mode を **both → backwards** にした。
     both のままだと入場アニメが終わったあとも opacity:1 を押さえ続けて、
     ③ の「薄れる」が1つも効かない。理由は §15 の注記に書いた。
   【常時ループの数は変えていない】
     breathe-dot（公開しました。の点）＝ **1本**。
     （2026-08-09 に x-glow＝ワードマークの呼吸 を削除。ポータルの
       «常時動くのは点ひとつだけ» と完全に同じ数になった。）
     足した動きは ①④ とも「画面に入ったとき一度きり ＋ 押したらもう一度」。
     ③ は animation ではなく **opacity の transition** なので数に入らない。

   読み込み順は tokens.css → shell.css → themes.css → **このファイル**。
   themes.css の html[data-app="botch"]（0,1,1）と同じ詳細度で、後から読まれる
   ぶんだけ勝つ。だから §1 は同じセレクタで書いてある。
   このファイルは /_lp/botch-x3/ 配下の4ページからしか読まれないので、
   現行の /botch にも 案B/C/B1/B2/X/Y にも1バイトも届かない。

   【この案の出自】
   　案X（src/_lp/botch-x/）の複製から始めて、Ryo さん 2026-08-04
   　「**Xをベースにもっとホームの雰囲気に寄せたい**」に応えた版。
   　案X は無傷でそのまま残してある（見比べるため）。

   【測って分かったこと ＝ この改修の根拠】
   　　　　　　　　　　　　　ポータル /      案X
   　常時ループ（infinite）      1つ         7つ
   　節ラベル                横組みの罫つき  縦組みの背骨（vertical-rl）
   　版面                     1120px・左端 72.5px   幕ごとに独自
   　portal.css には「**常時動くのは点ひとつだけ**」と明記してある。
   　**その抑制がホームの雰囲気の正体。**

   【案X から変えた4つ】
   ① ★本命★ 常時ループを 7 → **1（＋シェルの点1つ ＝ 計2つ）**
        残した常時ループ … 「公開しました。」の点 breathe-dot（shell.css §6）
                             ＝ ポータルの「点ひとつ」に相当する身振り
        一度きりにした   … 雑踏（x-drift → **x-settle**）§3
                           （こぼれ光 x-spill は 2026-08-09 に削除）
                           渡る光（x-pass）§8
                           呟きの一生（x-travel / x-mote / x-drain）§9
                           ★ 案X3 でこのうち x-travel / x-mote を
                             **投稿の再現**（x3-type / x3-send / x3-fly /
                             x3-flyo / x3-land）へ置き換えた。x-drain は
                             1行も触っていない。一度きりであることも同じ。
        引き金は portal.js §A2 とまったく同じ手 ＝ IntersectionObserver で
        .is-lit を付け、**animation-fill-mode: none**（shorthand に fill を
        書かない）で「終われば必ず素の姿へ戻る」を **構造で** 担保する。
        JS の後始末が失敗しても、タイマーが間引かれても、貼り付かない。
        unobserve するので1枚につき生涯1回。
        ★★ **一度きりにしたものは全部、素の宣言そのものが「止まったあとの
          静止姿」になるように書いてある。**どれも「消えて何も無くならない」:
            雑踏   … 流れてきて **置かれて止まる**（opacity: var(--o) で静止）
            こぼれ光 … 滴って戻る（transform: none ＝ ロゴの素の姿）
            渡る光 … 渡りきって消える（opacity:0。器の板・番号・文は残る）
            一生   … 光は渡りきって消え、残り時間の帯は空になる。
                     **軌道の罫・空の樋・3つの番号と文は残る**
        ★ 再演の引き金は **pointerup**（§9 の軌道と §10 の引き算）。
          pointerdown はスワイプ開始で発火してスクロールのたびに走り直す
          （案Y がその事故を起こしている）。
   ② 節ラベルを **縦組みの背骨 → 横組みの罫つき見出し**（§6）。
      portal.css §4c の .dw-sec__head / .dw-sec__h を **値ごと写した**
      （あちらは .page--portal スコープなので LP には1つも届かない）。
   ③ 版面と左端をポータルへ（§2）。--shell-max-wide（1120px）＋ --gutter で
      1280px の節見出しの左端が **72.5px** ＝ シェルのサイト名と同じ位置。
      節と節も clamp(56px, 7vw, 88px)（ポータルの間合い）に統一した。
   ④ 実画面を **ポータルの図版と同じ扱い**へ（§5）。「上から切り取って下端を
      mask で溶かした切れ端」をやめ、角丸 10px ＋ 0 0 0 1px --rule-hair ＋
      0 2px 8px rgba(0,0,0,.08)、キャプション 11.5px / --fg-3。

   【案X から1つも変えていないもの ＝ この案の核】
   　・**引き算の実演**（§10）。尺・曲線・時差・キーフレームを1つも触っていない。
   　  5語が同時に消えている時間（約0.45秒）もそのまま。
   　・**呟きの一生**の見立て（§9）。--x-cycle 9s も、後半のちょうど半分が
   　  4.5秒（＝「約45秒で、静かに消える」）という対応も、位相も同じ。
   　・**琥珀**（§1・§4）。色も opacity も案X の実測値のまま。
   　  こぼれ光を **transform でだけ** 動かす（opacity に触らない）ので、
   　  「呼吸の底でも 3:1 以上」の実測表が1行も無効にならない。
   　・--accent には琥珀を入れない。shell.css の strong / a / :focus-visible /
   　　.dot が全部 --accent を読んでいる。入れた瞬間に全面が琥珀になる。
   ============================================================================ */


/*! ===========================================================================
 * 以下の §3 / §5 / §8 / §9 / §10 / §15 には yui540/css-animations 由来の
 * パターンから起こした @keyframes が含まれています。
 * Portions of the sections below are derived from yui540/css-animations.
 *   https://github.com/yui540/css-animations
 *
 * 以下の @keyframes が該当します:
 *   x-settle, x-pass, x-sign, x-unspell, x-arrow,
 *   x3-type, x3-send, x3-land, x3-lb-in, x3-lb-swap
 * （2026-08-09: x-glow / x-spill / x-subtract / x3-flow は
 *   この案から削除したのでリストからも外した）
 * （原典から改変して使用しています / modified from the original）
 * また shell.css §7 の dw-tile-in / dw-pop / dw-fade-up / dw-rise を
 * 定義し直さずに借りています（あちらにも同じ表示があります）。
 *
 * ---------------------------------------------------------------------------
 * MIT License
 *
 * Copyright (c) 2026 yui540
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 * ========================================================================= */


/* ═══ §1  テーマトークン ═══════════════════════════════════════════════════
   themes.css の botch（夜藍＋琥珀・17トークン）を、ポータルの無彩へ丸ごと
   置き換える。値は tokens.css §2 の :root / html[data-app="portal"] の
   **完全な写し**（1つも変えていない）。そこへ琥珀の派生値と X 固有の間合いを足す。
   ★ tokens.css §1 のシェルトークン（--sp-* / --fs-* / --lift / --hair / --ease …）は
     **1つも再定義していない。**X 固有の値は全部 --x-* / --x3-* という別名で持つ。
   ======================================================================== */

html[data-app="botch"]{
  color-scheme: light;

  --bg          : #F3F3F3;
  --surface     : #FFFFFF;
  --surface-2   : #E7E7E7;
  --fg-1        : #101010;
  --fg-2        : #4A4A4A;
  --fg-3        : #656565;
  --rule        : rgba(16,16,16,.12);
  --rule-2      : rgba(16,16,16,.07);
  --rule-hair   : rgba(0,0,0,.08);
  --accent      : #101010;          /* ★ 琥珀を入れない。壁は無彩 */
  --accent-2    : #656565;
  --accent-soft : rgba(16,16,16,.05);
  --accent-line : rgba(16,16,16,.22);
  --accent-ink  : #F3F3F3;
  --shadow-card : 0 4px 18px rgba(0,0,0,.07);
  --shadow-flat : 0 1px 3px rgba(0,0,0,.05);
  --shadow-lift : 0 6px 18px rgba(0,0,0,.10), 0 2px 5px rgba(0,0,0,.05);
  --shadow-lift-hi: 0 16px 34px rgba(0,0,0,.16), 0 4px 10px rgba(0,0,0,.07);
  --font-display: var(--font-body);   /* 見出しは共通のゴシック。丸ゴは §4 だけ */
  --font-num    : var(--font-body);
  --btn-r       : var(--r-md);

  /* --- 琥珀のトークンは 2026-08-09 に **全部落とした** ------------------
     ワードマークの b（灯り玉とこぼれ光3粒）だけが読んでいて、その b を
     文字に置き換えたので読む相手が居なくなった。
     （--amber-lit-0/1/2・--amber-spill・--spill-o1/2/3 の7つ。
       明暗それぞれに在った。値と実測表は案X2 の §1 に残っている。） */

  /* --- ワードマークの丸ゴ（--font-display には入れない）------------------ */
  --x-mark-font : "Zen Maru Gothic","Hiragino Maru Gothic ProN",system-ui,sans-serif;
  /* --x-mark（b の svg と otch の級数）は 2026-08-09 に削除。
     --x-mark-font（丸ゴ）は ACT 4 の bocchi→botch でまだ使うので残す。 */

  /* --- ★ ③ ポータルの節の段（portal.css §4c / §9 と同値）--------------- */
  --x3-sec-gap  : clamp(56px,  7vw, 88px);   /* 節と節（portal .dw-diary の上）*/
  --x3-head-pad : clamp(12px, 1.4vw, 18px);  /* 見出しの字 → 罫 */
  --x3-head-gap : clamp(28px, 3.4vw, 44px);  /* 罫 → 中身 */

  /* --- ★ ④ 図版の高さ（幅は 1080/2400 の実寸比から決まる）-------------- */
  --x3-shot-h   : clamp(260px, 26vw, 360px);

  /* --- 列の間 ------------------------------------------------------------ */
  --x-gap-x     : clamp(16px,  3vw, 36px);   /* 列の間 */
  --x-gap-xx    : clamp(28px,  4vw, 64px);   /* 大きい2段組の谷 */

  /* --- 級数（h1 が最大、という関係は崩さない）---------------------------- */
  --x-fs-minus  : clamp(23px, 1.05rem + 2.10vw, 38px);   /* 引き算の1文 */
  --x-fs-morph  : clamp(26px, 1.10rem + 2.40vw, 42px);   /* bocchi → botch */

  /* --- 実演と一度きりの尺 -----------------------------------------------
     ★★ --x-cycle は「呟きの一生」1周。**後半のちょうど半分（4.5秒）が
       『約45秒で、静かに消える』の見立て**。ここを変えると §9 の
       軌道と残り時間の帯の対応が崩れる（2つは同じ変数で同期している）。
       案X から1ミリも変えていない。常時ループを一度きりにしただけ。
     ★ --x-pass は §8 の「渡る光」。案X は --x-cycle(9s) の 0→62% だけを
       使って残り 38% を無音で待っていた。一度きりにしたので待つ必要が
       無くなり、**尺を 9s×.62 ＝ 5.58 ≒ 5.6s に詰めてキーフレームを
       同じ比率で伸ばした**（絶対時間の動きは案X と同一）。 */
  --x-cycle     : 9s;
  --x-pass      : 5.6s;
  --x-play      : 2.2s;    /* 引き算の実演1語ぶん */
  --x-play-step : .16s;    /* 　　〃　　 語と語の時差 */
}

@media (prefers-color-scheme: dark){
  html[data-app="botch"]{
    color-scheme: dark;
    --bg          : #0F0F0F;
    --surface     : #191919;
    --surface-2   : #242424;
    --fg-1        : #F2F2F2;
    --fg-2        : #AEAEAE;
    --fg-3        : #8C8C8C;
    --rule        : rgba(242,242,242,.14);
    --rule-2      : rgba(242,242,242,.08);
    --rule-hair   : rgba(255,255,255,.10);
    --accent      : #F2F2F2;
    --accent-2    : #8C8C8C;
    --accent-soft : rgba(242,242,242,.07);
    --accent-line : rgba(242,242,242,.24);
    --accent-ink  : #0F0F0F;
    --shadow-card : 0 10px 30px rgba(0,0,0,.55);
    --shadow-flat : 0 1px 4px rgba(0,0,0,.35);
    --shadow-lift : 0 10px 26px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.40);
    --shadow-lift-hi: 0 20px 40px rgba(0,0,0,.62), 0 5px 12px rgba(0,0,0,.45);

    /* 暗モードは **原典の琥珀がそのまま使える**（#0F0F0F 上で 8〜16:1）。
       粒の α だけ .85/.62/.55（原典 .6/.38/.2 は静止で最小 1.57:1 で落ちる）。 */
  }
}


/* ═══ §2  ★③ 版面と、節の段 ═══════════════════════════════════════════════
   ★★ 版面は **--shell-max-wide（1120px）**。案X も同じ幅だったが、
     案X は幕ごとに背骨（26px の列 ＋ clamp(16px,2.4vw,38px) の谷）を挟んで
     いたので、**中身の左端はポータルより 64px 内側にあった**。
     §6 で背骨をやめたので、節見出しと中身の左端が版面の左端そのものになる。

   1280px の実測（縦スクロールバーぶんを含む・レイアウト幅 1265px）
     --gutter = clamp(20px, 5vw, 40px) → 5vw = 63.25px なので 40px にクランプ
     器の幅   = 1120 + 40*2 = 1200px
     左の余り = (1265 - 1200) / 2 = 32.5px
     節見出しの左端 = 32.5 + 40 = **72.5px**（＝シェルのヘッダーのサイト名と同じ）
   ★ 900px（--shell-max）にすると 182.5px。110px ずれてポータルと別物になる。

   ★ 節と節も **ポータルの間合い（clamp(56px, 7vw, 88px)）に統一した。**
     案X は幕ごとに 96 / 136 / 190px と変えて「調子が変わる合図」にしていたが、
     ポータルは3つの節が全部同じ間隔で並ぶ。**位が同じものに違う間合いを
     与えると、読む人はその差の意味を探す。**同じにしておくのがホームの作法。
   ======================================================================== */

.page--lp main{ padding-top: clamp(10px, 1.6vw, 20px); }
.page--legal main{ padding-top: clamp(24px, 3.4vw, 40px); }

.lpx3 > .x-stage,
.lpx3 > .x-act{
  max-width: calc(var(--shell-max-wide) + var(--gutter)*2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 幕と幕。**全部同じ**（ポータルの3つの節と同じ間合い）。 */
.lpx3 > .x-act{ margin-block-start: var(--x3-sec-gap); }


/* ═══ §3  ★① ACT 0 の背景 — 雑踏（**一度きり**）═════════════════════════
   匿名の呟きを **文字を持たない帯** で表す（本文に無い文字列を書かないため）。
   ★★ 案X は 9〜15秒の infinite が12本、負の delay で「読み込んだ瞬間から
     途中」を作って永久に流れていた。案X3 は **画面に入ったとき一度だけ
     下から流れてきて、置かれて、止まる。**
   ★★ **止まったあとの静止姿 ＝ 素の宣言そのもの**（opacity: var(--o) /
     transform: none）。地に置かれた無彩の呟きの群れとして、そこに在り続ける。
     消えて何も無くならない。fill-mode は書いていない（＝ none）ので、
     走り終われば規則ごと外れて必ずこの姿に戻る。
   ★ 遅延は **0**。.is-lit が付いてから animation が始まるまでのあいだは
     素の宣言（＝止まったあとの姿）が見えてしまうので、遅延を持たせると
     「置かれてから消えて、また出る」になる。ばらけは尺（--u 1.18〜1.88s）
     の違いだけで作ってある。全部 2秒未満（＝入場の作法の中）。
   ★ JS が死んでいる／IO が無い環境では .is-lit が付かないので、
     **静止姿のまま最初から出る**（下の :not(.is-lit) が html.js の中に
     あるので、.js が付かなければ1本も当たらない）。
   ★ 帯の面は --surface（明 #FFFFFF ／ 暗 #191919）。地（--bg #F3F3F3 / #0F0F0F）
     より **必ずコントラストが上がる側**なので、上に載る字のコントラストは
     下がらない。いちばん薄い字（--fg-3 10.5px）で
       明: 地の上 5.25:1 → 帯の上 5.6〜5.8:1
       暗: 地の上 5.70:1 → 帯の上 5.4〜5.7:1
     どちらも 4.5:1 を割らない。
   ★ 動かすのは transform（translate3d ＋ scale）と opacity だけ。
   ★ 帯は左右のガター分だけ版面からはみ出す。はみ出しは .x-stage の
     overflow: clip が受ける（横スクロールは出ない）。
   ======================================================================== */

.lpx3 .x-crowd{
  position: absolute;
  inset-block: 0;
  inset-inline: calc(var(--gutter) * -1);
  overflow: clip;
  pointer-events: none;
}
.lpx3 .x-bub{
  position: absolute;
  inset-inline-start: var(--l);
  inset-block-start: var(--t);
  inline-size: var(--w);
  max-inline-size: 44vw;
  block-size: clamp(8px, 1.1vw, 12px);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: var(--hair) solid var(--rule-2);
  opacity: var(--o);            /* ★★ 止まったあとの静止姿。ここが素の姿 */
}
/* ★ 2本目の短い帯。1本だけだと「線」に見えるが、長短2本が寄り添うと
   **文字を持たないまま「短い呟き」に見える。**アニメーションは足していない
   （親の transform に乗るだけ。動く要素は12個のまま）。 */
.lpx3 .x-bub::after{
  content: "";
  position: absolute;
  inset-block-start: calc(100% + 5px);
  inset-inline-start: 0;
  inline-size: 58%;
  block-size: 100%;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: var(--hair) solid var(--rule-2);
}
/* 光る前は伏せておく。**JS がある環境だけ。** */
html.js .lpx3 .x-crowd:not(.is-lit) .x-bub{ opacity: 0; }
/* ★ fill-mode を書かない ＝ none。走り終われば上の素の宣言へ必ず戻る。 */
html.js .lpx3 .x-crowd.is-lit .x-bub{
  animation: x-settle var(--u) var(--ease-inout);
}
/* 出典: yui540/css-animations 2026-04-25 tips-1 slide-in を改変。
   案X の x-drift（下から上へ抜けてループする）を、
   **抜けずに置かれて止まる**ように終端を素の姿へ着地させたもの。
   着地は行き過ぎて戻る（-4px → 0、scale 1.015 → 1）。 */
@keyframes x-settle{
  0%  { opacity: 0;        transform: translate3d(var(--dx), 30px, 0) scale(.94); }
  58% { opacity: var(--o); }
  82% {                    transform: translate3d(0, -4px, 0) scale(1.015); }
  100%{ opacity: var(--o); transform: none; }
}


/* ═══ §3b  ① Inside botch の «流れ» — **2026-08-09 に廃止** ══════════════
   Ryo さん「Inside botch の投稿はボツで。そのまま画像だけでOKです。」
   .x3-flow / .x3-fl と @keyframes x3-flow をここから消した（3117 バイト）。
   実画面は静止画のまま置く。拡大表示（§19）はそのまま残る。
   ★ .x-frame（§5）は残す。§19 のライトボックスが <img> を <button> で
     包むときの受け皿として要る。 */

/* ═══ §4  ワードマーク ═══════════════════════════════════════════════════
   2026-08-09 から **ただの文字**（Pareidol 案と同値）。
   もとはインライン SVG の「b」＋ 丸ゴの "otch" で、このページで唯一
   色（琥珀）が入る場所だった。隣にアプリのアイコンを置いた結果
   «同じ b が色違いで2つ» になったので、印はアイコンへ集約した。
   ★ これで .lpx3 の中に彩度のある色は1つも無い（アイコンの画像を除く）。
   ======================================================================== */

/* ★★★ 2026-08-09: **b のインライン SVG をやめて、ただの文字にした。**
   隣にアプリのアイコン（＝ b の印そのもの）を置いたら、同じ b が色違いで
   2つ並んだため。印はアイコンに任せ、名前は Pareidol 案と **同じ値** で組む
   （font-size / weight / 字間 / 色）。
   ★ 一緒に落としたもの: .wordmark svg ／ .otch ／ .glyph-b__stem / __bowl ／
     .lit-0/1/2 ／ .glyph-b__spill 一式 ／ @keyframes x-glow ／
     @keyframes x-spill ／ 琥珀のトークン（§1）。
   ★★ これで **本文から彩度のある色が1つも無くなった。**
     色を持つのはアプリのアイコンの画像だけ。 */
.lpx3 .wordmark{
  display: inline-block;
  font-size: clamp(19px, 1.1vw + 13px, 24px);
  font-weight: 500;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--fg-1);
  text-decoration: none;
}


/* ═══ §5  ★ ACT 0 — 舞台 ══════════════════════════════════════════════════
   ★ position: relative だけを置く（雑踏の基準）。
     transform / filter / opacity<1 / will-change / contain は書かない
     （tokens.css の禁則。ここは main の子孫だが、癖を作らない）。
   ======================================================================== */

.lpx3 .x-stage{
  position: relative;
  overflow: clip;
  /* ★③ 下は 0。ACT 0 と ACT 1 のあいだも §2 の節の間合い（88px）が持つ。 */
  padding-block: clamp(18px, 3vw, 40px) 0;
}
.lpx3 .x-stage__in{
  position: relative;         /* ★ 雑踏の上に立たせる */
  z-index: 1;
}
.lpx3 .x-stage__top{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-5);
}

/* ★ アプリのアイコンと名前（2026-08-09 追加）。
   ★★ 中は align-items: center。外側の .x-stage__top は baseline なので、
     アイコンを直接そこへ置くと «アイコンの下端» が otch の文字の足に
     揃ってしまい、半分沈んで見える。1段包んで、包みの baseline
     （＝ otch の baseline）だけを外へ渡す。
   ★ 枠の規則は icons.json の frame に合わせる（3案共通）:
     角丸 22.5% ／ overflow: hidden ／ object-fit: cover。
     8本のアイコンは角丸も余白も地の色も揃っていないので、箱の側で吸収する。 */
.lpx3 .x-brand{
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.5vw, 18px);
}
.lpx3 .x-appicon{
  flex: 0 0 auto;
  /* * Pareidol 案と同値（2026-08-09）。ワードマークが 24px の文字に
     なったので、--x-mark（55px）基準では大きすぎる。 */
  inline-size: clamp(38px, 3.4vw, 48px);
  block-size: clamp(38px, 3.4vw, 48px);
  border-radius: 22.5%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--rule-hair);
}
.lpx3 .x-appicon img{
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* * b の呼吸（x-glow）とこぼれ光（x-spill）は 2026-08-09 に落とした
   （1897 バイト）。ワードマークが文字になったので、動かす相手が居ない。
   ** これで **常時ループはシェルの「公開しました。」の点 1本だけ**になった。
     ポータルの «常時動くのは点ひとつだけ» と完全に同じ数。 */

.lpx3 .tagline,
.lpx3 .naming-en{
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  color: var(--fg-3);
  text-transform: lowercase;
  line-height: 1.6;
  margin: 0;
}

/* --- h1。3つの言い切りに割ってある（<span> で包んだだけ）---------------
   ★★ 色は **動かさない**。前の2つ（引き算されるもの）を --fg-2、
     最後の1つ（残るもの）を --fg-1 に置くだけ。静止の階調で
     「何が引かれて、何が残るのか」を先に見せる。 */
.lpx3 .x-h1{
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  margin: clamp(20px, 3vw, 40px) 0 clamp(20px, 3vw, 36px);
}
/* ★★ max-inline-size: 100% は **必須**。inline-block の幅は shrink-to-fit で、
   その下限は min-content。日本語＋word-break: auto-phrase では min-content が
   「いちばん長い文節」になるので、390px で "でも、ひとりぼっちじゃない。" の箱が
   380px に膨らみ、版面を 30px はみ出した（実測）。100% で箱を止めると
   中で普通に折り返す。 */
.lpx3 .x-h1__c{ display: inline-block; max-inline-size: 100%; }
.lpx3 .x-h1__c.is-gone{ color: var(--fg-2); }   /* 引かれるもの  7.99:1 */
.lpx3 .x-h1__c.is-left{ color: var(--fg-1); }   /* 残るもの     17.15:1 */

/* --- 一言と導線を1本の帯に。縦に積まない。-------------------------------
   ★③ 下の margin は 0（節の間合いは .x-stage__see 側が §2 の値で持つ）。 */
.lpx3 .x-stage__bar{
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-5) var(--x-gap-x);
  padding-block-end: clamp(18px, 2.4vw, 30px);
  border-block-end: var(--hair) solid var(--rule);
  margin-block-end: 0;
}
.lpx3 .x-stage .lead{
  font-size: var(--fs-lead);
  color: var(--fg-2);
  max-width: 22em;
  margin: 0;
}

.lpx3 .cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* --- ★④ 実画面2枚。**ポータルの図版（portal.css .dw-shot）と同じ扱い。**
   案X の「上から横長に切り取って下端を mask で溶かした切れ端」をやめた。
     角丸 10px ／ 0 0 0 1px var(--rule-hair) ／ 0 2px 8px rgba(0,0,0,.08)
     キャプション 11.5px / 1.6 / .02em / --fg-3 ／ 上 10px
   ★ mask を外したので box-shadow が正しく回る（mask の外に影が描かれて
     溶けたはずの下端に四角い輪郭が残る、という案X の禁則も消えた）。
   ★ 幅は実寸比 1080/2400 から決める（HTML の width/height と同じ比）。
     block-size: auto ＝ 画像を切らない。ポータルの図版と同じ。
   ★ .x-stage__see は grid をやめて素のブロック（背骨の列が消えたため）。
     ここが「節見出しの左端＝版面の左端＝72.5px」を成立させている。 */
.lpx3 .x-stage__see{
  min-inline-size: 0;
  margin-block-start: var(--x3-sec-gap);
}
.lpx3 .x-shots{
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2.4vw, 28px);
  flex-wrap: wrap;
}
.lpx3 .x-shot{
  flex: none;
  margin: 0;
  inline-size: calc(var(--x3-shot-h) * 1080 / 2400);
}
.lpx3 .x-shot img{
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: 10px;
  background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--rule-hair), 0 2px 8px rgba(0,0,0,.08);
}
.lpx3 .x-shot .caption{
  margin-block-start: 10px;
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: var(--fg-3);
}


/* ═══ §6  ★② 節見出し（横組み・罫つき）════════════════════════════════════
   ★★ 案X は名札を版面の外の背骨へ **縦に立てて**いた
     （writing-mode: vertical-rl / 12px / .26em / --fg-3）。
     いちばん「ふつうの LP ではない」部分だったが、同時に
     **ポータルとまったく違う語彙**でもあった。ここをポータルへ戻す。

   値は portal.css §4c の .dw-sec__head / .dw-sec__h を **写しただけ**
   （あちらは .page--portal スコープなので LP には1つも届かない）:
     見出し   13px / weight 500 / letter-spacing .18em / line-height 1.6 / --fg-1
     器       display:flex / flex-wrap:wrap / align-items:baseline / gap 8px 18px
     字→罫   padding-block-end  clamp(12px, 1.4vw, 18px)
     罫       border-block-end 1px solid var(--rule)
     罫→中身 margin-block-end  clamp(28px, 3.4vw, 44px)
   ★ 本文（Inside botch / Concept / How it works / The name）は1文字も
     変えていない。役どころだけ戻した。
   ★ h2 なので shell.css §3 の h1..h4（--fs-h2 / --font-display / 600 /
     --ls-head）が当たる。ここは (0,2,0) で勝つ。!important は要らない。
   ★ コントラスト: 13px --fg-1 は 明 17.15:1 ／ 暗 17.12:1。
   ======================================================================== */

.lpx3 .sec-head{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  padding-block-end: var(--x3-head-pad);
  border-block-end: var(--hair) solid var(--rule);
  margin-block-end: var(--x3-head-gap);
}
.lpx3 .sec-head__h{
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .18em;
  line-height: 1.6;
  color: var(--fg-1);
}


/* ═══ §7  ボタン ══════════════════════════════════════════════════════════
   shell.css §5 の .btn（46px / --btn-r / --fs-body / weight 500）が土台。
   ★ :hover は門番の中。:focus-visible は shell.css §3 が門番の外で持つ。
   ======================================================================== */

.lpx3 .btn{
  transition: transform var(--dur-1) var(--ease),
              opacity   var(--dur-1) var(--ease),
              color     var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.lpx3 .btn-primary{
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.lpx3 .btn-ghost{
  background: var(--surface);
  border-color: var(--rule);
  color: var(--fg-1);
  box-shadow: var(--shadow-flat);
}
.lpx3 .btn-quiet{
  background: transparent;
  border-color: var(--rule-2);
  color: var(--fg-2);
}
@media (hover: hover) and (pointer: fine){
  .lpx3 .btn-primary:hover{ opacity: .9; }
  .lpx3 .btn-ghost:hover  { border-color: var(--accent-line); }
  .lpx3 .btn-quiet:hover  { color: var(--fg-1); border-color: var(--rule); }
}


/* ═══ §8  ★① ACT 1 — 三つの声（渡る光は**一度きり**）═════════════════════
   ★ 3つの声が **縦に、少しずつ右へずれながら、時間差で届く**。
   ★ 01 の行だけ、上を光が左から右へ渡る。渡りきる前に薄れて消える。
     ＝「呟きは、いまオンラインの誰かにふっと流れて、数分で消える。」を
     文字に触らずに演じている（光は字の **後ろ** を通る）。
   ★★ 案X は infinite（9秒ごとに何度でも）。案X3 は
     **画面に入ったとき一度だけ**（押せばもう一度＝pointerup）。
     止まったあとの静止姿は素の宣言（opacity: 0）＝「渡りきって、もう無い」。
     器の板・番号・文はそのまま残るので、消えて何も無くならない。
   ======================================================================== */

.lpx3 .x-say__list{
  display: grid;
  row-gap: clamp(18px, 2.6vw, 30px);
  min-inline-size: 0;
}
.lpx3 .x-voice{
  position: relative;
  overflow: clip;                       /* 光を箱の中に閉じる */
  max-inline-size: min(100%, 34em);
  padding: clamp(16px, 2.2vw, 26px) clamp(18px, 2.4vw, 30px);
  border-radius: var(--r-md);
  background: var(--surface);
  border: var(--hair) solid var(--rule-2);
  box-shadow: var(--shadow-flat);
}
/* 少しずつ右へ。3つ並んで「流れ」に見える。
   ★ 720px 以下では段差を付けない。390px で付けると3枚目の行長だけが
     303px（1枚目は 350px）に縮んで、同じ大きさの声に見えなくなる。 */
@media (min-width: 721px){
  .lpx3 .x-voice + .x-voice           { margin-inline-start: clamp(24px,  6vw,  88px); }
  .lpx3 .x-voice + .x-voice + .x-voice{ margin-inline-start: clamp(48px, 12vw, 176px); }
}

.lpx3 .x-voice__n{
  position: relative;
  z-index: 1;
  display: block;
  font-size: var(--fs-note);
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--sp-3);
}
.lpx3 .x-voice__t{
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--fs-lead);
  color: var(--fg-1);
  line-height: var(--lh-body);
}

/* ★ 渡って、消える光。器の中だけを走る。--accent-soft は無彩の 5% なので、
   下を通っても字のコントラストは実質変わらない（明 17.15 → 16.4:1）。 */
.lpx3 .x-voice__pass{
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 38%;
  pointer-events: none;
  opacity: 0;              /* ★★ 止まったあとの静止姿（＝渡りきって、もう無い）*/
}
html.js .lpx3 .x-voice.is-lit .x-voice__pass{
  animation: x-pass var(--x-pass) var(--ease-inout);   /* ← fill 無し（none） */
}
/* 出典: yui540/css-animations 2026-04-17 tips-1 の走る光沢を、
   「渡りきる前に薄れる」ように後半で opacity を落として改変。
   ★ 案X は --x-cycle(9s) の 0→62% だけを使って残りを無音で待っていた。
     尺を 5.6s（＝ 9s × .62）に詰めて、割合を 1/.62 倍に伸ばしただけ。
     **絶対時間で見た動きは案X と同じ。** */
@keyframes x-pass{
  0%  { opacity: 0; transform: translateX(-110%); }
  16% { opacity: 1; }
  71% { opacity: 1; }
  100%{ opacity: 0; transform: translateX(190%); }
}


/* ═══ §9  ★④ ACT 2 — 投稿の再現（約45秒・**一度きり**）═══════════════════
   ★★ 案X2 は **1本の軌道を光の玉が渡る** だった（x-travel / x-mote）。
     Ryo さん 2026-08-04「How it works も実際に投稿をしたときのイメージ映像的な
     ものがほしい」に応えて、同じ横1本の帯を **投稿の一部始終** へ開いた。
     ・入力欄に何かが入る → 送られる → 相手の画面に現れる → 薄れて消える
     ・置き換えたのは軌道（.x-track__rail / .x-mote）だけ。
       **3つの番号と文・残り時間の帯（.x-drain）は1行も触っていない。**
   ★★ **周期 --x-cycle（9s）も位相も案X2 のまま。**
     後半のちょうど半分（50% → 100% ＝ **4.5秒**）が
     「約45秒で、静かに消える」の見立て。案X2 の x-mote と同じ尺・同じ位相。
     ステップ3の下の帯（.x-drain）も同じ 50% → 100% で空になるので、
     2つは同じ 4.5 秒を指したまま。
   ★ 帯だけ linear。時間の経過を ease で描くと嘘になる（残り時間の帯は
     等速でなければならない）。他は全部 ease-in-out。
   ★ 動かすのは transform（scaleX / scale / translateX）と opacity だけ。

   ★★ **止まったあとの静止姿**（＝素の宣言・fill-mode は none）:
       ・入力欄の枠／送りの丸／渡る線の罫／相手の画面の枠 …… 残る
       ・入力欄の中身 ……………… scaleX(0)  ＝「空の入力欄」
       ・渡る帯 …………………… opacity: 0 ＝「渡り終えて、もう無い」
                                  ★ 「もう無い」は **opacity だけ** で言う。
                                    帯を載せている透明な棒（.x3-post__fly）は
                                    線と同じ幅なので、静止姿を translateX(88%)
                                    にすると **透明な棒が版面の右へはみ出して
                                    横スクロールが出る。**棒は 0 に置く。
       ・着いた帯 ………………… opacity: 0 ＝「4.5秒かけて消えたあと」
       ・残り時間の帯 ……………… **空の樋（--rule の3px）だけが残り、
                                    中身（--fg-1）は scaleX(0)**
                                    ＝「残り時間はもう無い」
       ・3つの番号・3つの文 ……… 残る（動かしていない）
     案X の .x-drain は「満杯で静止」だったが、一度きりにすると
     「空になったのに最後だけ満杯へ跳ね返る」ことになる。
     **樋と中身を分けて**（.x-drain / .x-drain::before）、
     中身の素の姿を空（scaleX(0)）にした。樋が残るので何も無くならない。
   ======================================================================== */

.lpx3 .x-track{ min-inline-size: 0; }

/* ── ★★④ 投稿の再現（案X2 の「軌道を光が渡る」の発展形）─────────────────
   案X2 は **1本の罫の上を光の玉が渡る** だった。抽象なので「投稿」には
   読めない。案X3 は同じ横1本の帯を **3つに割って**、投稿の一部始終にした:

     ┌ 自分の入力欄 ┐──── 渡る線 ────┌ 相手の画面 ┐
     │ ▬▬▬▬▬▬  ● │       ▬▬▬→      │  ▬▬▬▬▬   │
     └──────────┘                 └──────────┘

   ★★ **周期も位相も案X2 の --x-cycle（9s）のまま。**割り当てだけを変えた:
       0 → 18%   入力欄に罫が伸びる     … 「なにか、こぼしてみる」
      19 → 30%   送りの丸が沈んで戻る
      21 → 24%   入力欄が空になる（送られた）
      24 → 44%   線の上を帯が渡る       … 「いまオンラインの誰かの画面に、
      42 → 50%   相手の画面に現れる        ふっと現れる」（行き過ぎて戻る）
      50 → 100%  **4.5秒かけて薄れる**  … 「約45秒で、静かに消える」
     ＝ 案X2 の x-mote（50% で opacity 1 → 100% で 0）と **1ミリも同じ尺**。
       下の残り時間の帯（.x-drain）は1行も触っていないので、
       「帯が空になる 4.5秒」と「投稿が消える 4.5秒」は同期したまま。

   ★ 文字を1つも足していない。入力欄の中身は **1本の罫**、投稿は **1本の帯**。
   ★ 動かすのは transform（scaleX / scale / translateX）と opacity だけ。
   ★ fill-mode は書いていない（＝ none）。走り終われば規則ごと外れて、
     下の素の宣言（＝止まったあとの姿）へ必ず戻る:
       入力欄の枠・送りの丸・渡る線の罫・相手の画面の枠 …… 残る
       入力欄の中身 scaleX(0)／渡る帯 opacity 0／着いた帯 opacity 0
     ＝「こぼして、渡って、消えたあと」。器は何ひとつ無くならない。
   ★ 常時ループにしない。引き金は案X2 の .x-track.is-lit のまま
     （画面に入ったとき一度きり ＋ pointerup で再演）。JS も無改造。
   ────────────────────────────────────────────────────────────────────── */

.lpx3 .x3-post{
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 16px);
  margin-block-end: clamp(22px, 3vw, 38px);
}

/* --- 両端の器 ---------------------------------------------------------- */
.lpx3 .x3-post__end{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-inline-size: 0;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: var(--hair) solid var(--rule);
  box-shadow: var(--shadow-flat);
}
.lpx3 .x3-post__end--me { inline-size: clamp(196px, 26vw, 300px); }
.lpx3 .x3-post__end--you{
  inline-size: clamp(168px, 22vw, 260px);
  justify-content: flex-start;
}

/* 入力欄。枠は常に見えていて、**中の文だけ** が打たれて、送られて、空になる。 */
.lpx3 .x3-post__field{
  position: relative;
  flex: 1 1 auto;
  min-inline-size: 0;
  overflow: hidden;
  padding: 4px 8px;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: var(--hair) solid var(--rule-2);
}
/* 見本の投稿。**折り返さない**（1行の入力欄なので）。溢れたら切る。 */
.lpx3 .x3-post__text{
  display: block;
  font-size: clamp(10.5px, .95vw, 12px);
  line-height: 1.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  color: var(--fg-2);
}
/* ★★ 打つ動きは «覆い» で作る。文字の幅も入力欄の幅も1pxも動かさない。
   （width や ch を動かすと毎フレーム レイアウトが走る。transform なら
   合成だけで済む。ホームと同じ「transform と opacity しか動かさない」作法。）
   ★ 地の色は入力欄と同じ var(--bg)。ずれると «帯» に見えてしまう。
   ★ 素の姿は scaleX(1) ＝ 全部覆っている ＝ **入力欄は空**。 */
.lpx3 .x3-post__cover{
  position: absolute;
  inset: 0;
  background: var(--bg);
  transform: scaleX(1);
  transform-origin: right center;
}
/* 送りの丸（実画面の「流す」に当たる）。沈んで、行き過ぎて、戻る。 */
.lpx3 .x3-post__send{
  flex: 0 0 auto;
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: var(--fg-1);       /* ★ 静止姿: そこに在る */
}

/* --- 渡る線 -------------------------------------------------------------
   ★★ **横のはみ出しの栓**（案X2 の .x-track__rail と同じ理由・同じ手）。
     下の .x3-post__fly は線と同じ幅の透明な棒で、走っているあいだ
     右へ 88% ずれる。栓が無いと版面の右へはみ出して
     **documentElement に横スクロールが出る。**
   ★ 縦は塞がない。この罫は 1px しかないので両軸 clip にすると
     6px の帯が 1px に切られて消える。`overflow-x: clip` ＋
     `overflow-y: visible` は同時指定できる唯一の組み合わせ。
   ★ 12px の逃げ幅は帯の box-shadow（blur 10px ＋ spread 1px）の分。
     12px < --gutter の下限 20px なので、逃げた分も版面の外へは出ない。 */
.lpx3 .x3-post__wire{
  position: relative;
  flex: 1 1 auto;
  min-inline-size: 24px;
  block-size: var(--hair);
  background: var(--rule);
  overflow-x: clip;
  overflow-y: visible;
  overflow-clip-margin: 12px;
}
/* ★ 幅 100% の透明な棒。translateX の % が **線の幅** を基準にする
   （帯そのものに % を当てると帯の幅が基準になってしまう）。
   ★★ 素の transform は translateX(0)。右へずらした姿を素にすると
     透明な棒が常に版面からはみ出す。**渡り終えたことは opacity で言う。** */
.lpx3 .x3-post__fly{
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: 0;
  transform: translateX(0);
}
.lpx3 .x3-post__fly::before{
  content: "";
  position: absolute;
  inset-block-start: -3px;
  inset-inline-start: 0;
  inline-size: 26px;
  max-inline-size: 46%;
  block-size: 6px;
  border-radius: var(--r-pill);
  background: var(--fg-1);
  box-shadow: 0 0 10px 1px var(--accent-line);
  opacity: 0;                    /* ★ 静止姿: 渡り終えて、もう無い */
}

/* --- 相手の画面に出る吹き出し ------------------------------------------
   ★ 地は --fg-1、字は --bg。明でも暗でも «反転した札» になり、
     コントラストは本文と同じだけ確保される（明 17.1:1 ／ 暗 16.4:1）。
   ★ 角の1つだけ小さい（12/12/12/4）＝ 受け取った側の吹き出しの形。 */
.lpx3 .x3-post__bub{
  flex: 0 1 auto;
  min-inline-size: 0;
  max-inline-size: 100%;
  padding: 5px 10px;
  border-radius: 12px 12px 12px 4px;
  background: var(--fg-1);
  color: var(--bg);
  font-size: clamp(10.5px, .95vw, 12px);
  line-height: 1.55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform-origin: left center;
  opacity: 0;                    /* ★ 静止姿: 4.5秒かけて消えたあと */
}

/* --- 4本の @keyframes。全部 fill 無し（none）--------------------------- */
html.js .lpx3 .x-track.is-lit .x3-post__cover {
  animation: x3-type var(--x-cycle) var(--ease-inout);
}
html.js .lpx3 .x-track.is-lit .x3-post__send{
  animation: x3-send var(--x-cycle) var(--ease-inout);
}
html.js .lpx3 .x-track.is-lit .x3-post__fly {
  animation: x3-fly var(--x-cycle) var(--ease-inout);
}
html.js .lpx3 .x-track.is-lit .x3-post__fly::before{
  animation: x3-flyo var(--x-cycle) var(--ease-inout);
}
html.js .lpx3 .x-track.is-lit .x3-post__bub{
  animation: x3-land var(--x-cycle) var(--ease-inout);
}

/* ★★ 打つ動き。覆いを **右へ畳んで** 文字を出す（scaleX 1 → 0）。
   ★ 0%→18% の区切りだけ steps(12) にしてある。等速で滑らかに開くと
     «幕が上がった» に見えて、«打っている» に見えない。12 は見本の文の
     字数（12字）で、1字ずつ現れる。文を差し替えたらここも合わせること。
   ★ 21%→24% で覆いが戻る ＝ 送られて入力欄が空になる。こちらは
     宣言側の ease-in-out のまま（一息に消える）。
   出典: yui540/css-animations 2026-04-25 tips-1 slide-in の伸長成分を
   scaleX に読み替え、刻みを steps に置き換えたもの。 */
@keyframes x3-type{
  0%, 2%  { transform: scaleX(1); animation-timing-function: steps(12, end); }
  18%     { transform: scaleX(0); }   /* 打ち終わり */
  21%     { transform: scaleX(0); }
  24%     { transform: scaleX(1); }   /* 送られて、空になる */
  100%    { transform: scaleX(1); }
}
/* 出典: 2026-06-09 tips-2 seed-pop の押し込みだけを取り出した。 */
@keyframes x3-send{
  0%, 19% { transform: scale(1); }
  22%     { transform: scale(.76); }   /* 沈んで */
  26%     { transform: scale(1.14); }  /* 行き過ぎて */
  30%     { transform: scale(1); }     /* 戻る */
  100%    { transform: scale(1); }
}
@keyframes x3-fly{
  0%, 24% { transform: translateX(0); }
  44%     { transform: translateX(88%); }
  100%    { transform: translateX(88%); }
}
@keyframes x3-flyo{
  0%, 23% { opacity: 0; transform: scale(.62); }
  27%     { opacity: 1; transform: scale(1); }
  40%     { opacity: 1; transform: scale(1); }
  46%     { opacity: 0; transform: scale(.92); }
  100%    { opacity: 0; transform: scale(.92); }
}
/* ★★ **50% → 100% ＝ 4.5秒**。「約45秒で、静かに消える」の見立て。
   案X2 の x-mote（50% opacity 1 → 100% opacity 0）と同じ尺・同じ位相。
   出典: 2026-04-17 tips-1 popup を反転せずに使い、尾だけ長く引いたもの。 */
@keyframes x3-land{
  0%, 42%{ opacity: 0; transform: scale(.92); }
  47%    { opacity: 1; transform: scale(1.04); }    /* ★ 行き過ぎて */
  50%    { opacity: 1; transform: scale(1); }       /* ★ 戻る */
  100%   { opacity: 0; transform: scale(1); }       /* ← ここが 4.5 秒 */
}

/* ★★ 細い画面では **縦に積む**（2026-08-09 追加）。
   横一列に必要な幅は 196 ＋ 24 ＋ 168 ＋ 隙間 16 ＝ 404px。
   版面はいちばん狭い端末（390px）で 350px しかないので入らない。
   ここで «入力欄 → 下向きの線 → 相手の画面» に組み替える。
   ★ 線は縦になるので、渡る帯も縦に動かす（animation-name を差し替え）。
   ★ 栓は両軸の `overflow: clip` ＋ `overflow-clip-margin: 6px`。
     線は 1px 幅なので、6px の逃げ幅があれば 6px の帯は横に出せて、
     縦は 30 ＋ 6 ＝ 36px で切れる。 */
@media (max-width: 519.98px){
  .lpx3 .x3-post{ flex-direction: column; align-items: stretch; gap: 10px; }
  .lpx3 .x3-post__end--me,
  .lpx3 .x3-post__end--you{ inline-size: auto; }
  .lpx3 .x3-post__wire{
    align-self: center;
    inline-size: var(--hair);
    /* ★ 横並びのときの `min-inline-size: 24px` を必ず外すこと。
       残すと «1px の線» のはずが 24px 幅の板になる（実際に踏んだ）。 */
    min-inline-size: 0;
    block-size: 30px;
    flex: 0 0 auto;
    overflow: clip;
    overflow-clip-margin: 6px;
  }
  .lpx3 .x3-post__fly{
    inset-inline: auto;
    inset-inline-start: 50%;
    inset-block: 0;
    inline-size: 0;
    block-size: 100%;
    transform: translateY(0);
  }
  .lpx3 .x3-post__fly::before{
    inset-block-start: 0;
    inset-inline-start: -3px;
    inline-size: 6px;
    max-inline-size: none;
    block-size: 18px;
    max-block-size: none;
  }
  html.js .lpx3 .x-track.is-lit .x3-post__fly{ animation-name: x3-fly-v; }
}
@keyframes x3-fly-v{
  0%, 24% { transform: translateY(0); }
  44%     { transform: translateY(66%); }
  100%    { transform: translateY(66%); }
}

.lpx3 .x-track__steps{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.lpx3 .x-step{
  min-inline-size: 0;
  padding-inline-end: var(--x-gap-x);
}
.lpx3 .x-step.is-last{ padding-inline-end: 0; }
.lpx3 .x-step__n{
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background: var(--surface);
  border: var(--hair) solid var(--rule);
  box-shadow: var(--shadow-flat);
  font-family: var(--font-num);
  font-size: var(--fs-note);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--sp-4);
}
.lpx3 .x-step__t{
  margin: 0;
  font-size: var(--fs-body);
  color: var(--fg-1);
  line-height: var(--lh-body);
}
/* ★ 残り時間の帯。軌道の光と同じ周期・同じ位相で空になる。
   ★ 樋（.x-drain）は常に見えている ＝ 走り終わっても何も無くならない。
   ★ position: relative はここだけ。フォームのハニーポットの祖先ではない
     （あちらは §13。.beta / .beta-main / .beta-signup / .signup-row / form の
      どれにも position を付けない、は守っている）。 */
.lpx3 .x-drain{
  display: block;
  position: relative;
  overflow: hidden;
  margin-block-start: clamp(14px, 2vw, 22px);
  block-size: 3px;
  border-radius: 2px;
  background: var(--rule);              /* ★ 空の樋。静止姿の骨 */
}
.lpx3 .x-drain::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: var(--fg-1);
  transform: scaleX(0);                 /* ★ 静止姿: 残り時間はもう無い */
  transform-origin: left center;
}
html.js .lpx3 .x-track.is-lit .x-drain::before{
  animation: x-drain var(--x-cycle) linear;   /* ← fill 無し（none） */
}
@keyframes x-drain{
  0%, 40%{ opacity: 0; transform: scaleX(0); }
  41%    { opacity: 1; }
  49%    { transform: scaleX(1); }
  50%    { opacity: 1; transform: scaleX(1); }
  100%   { opacity: 1; transform: scaleX(0); }
}

@media (max-width: 720px){
  /* ★ 3列では字が入らないので縦に積む。投稿の再現はそのまま横に残す
     （狭い画面では「入力欄 → 線 → 相手の画面」という **その帯だけの読み** に
     なる。ステップの列と揃える必要はもともと無い）。
   ★ 390px の実測: 版面 350px − 器 118+100 − gap 8×2 ＝ 線が 116px。
     .x3-post__wire の min-inline-size(24px) を割らないので折り返さない。 */
  .lpx3 .x-track__steps{
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-6);
  }
  .lpx3 .x-step{ padding-inline-end: 0; }
}


/* ═══ §10  ★★ ACT 3 — 引き算（この案の芯・**案X から1文字も変えていない**）
   ★★ 「SNSの疲れる要素——いいね・フォロワー・承認・比較・"後に残る恐怖"——を
     全部引き算した。」の **引き算される語が、順に消える。**
     文字列は原文のまま並んでいる（<span> で包んで opacity を落としただけ。
     タグを剥がすと1バイト一致する）。
   ★ 5語が同時に消えているのは **約0.45秒**（5語目が消え終わる 0.99s から
     1語目が戻り始める 1.41s まで）。読めなくなる時間を最小にしてある。
   ★ 消えているあいだ、左上のマイナス記号（文字ではなく1本の罫）が引かれる。
     引き算という語を **記号で** 見せる。DOM のテキストは1文字も増えていない。
   ★ 引き金は2本、**どちらもホバーではない**（JS が .is-play を付ける）。
       1. 画面に入ったとき（1回目）
       2. 押したとき（何度でも・pointerup）
     ＝ iPhone でも必ず走る。門番（matchMedia / @media）は1つも要らない。
   ★ fill-mode 無し（none）。走り終われば規則ごと外れて素の姿（opacity 1）へ
     必ず戻る。JS の後始末が失敗しても、語が消えたまま貼り付くことはない。
   ======================================================================== */

.lpx3 .x-minus__line{
  position: relative;
  margin: 0;
  max-inline-size: 21em;
  font-size: var(--x-fs-minus);
  font-weight: 400;
  color: var(--fg-1);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-head);
  padding-block-start: clamp(28px, 3.4vw, 46px);   /* マイナス記号のぶん */
}
.lpx3 strong{ color: var(--fg-1); font-weight: 600; }

/* 語。transform を効かせるため inline-block（中の文字は箱の中で折り返す）。 */
.lpx3 .x-w{ display: inline-block; }

/* ★★★ 2026-08-09: **5つの語が消えて戻る実演（x-subtract）を外した。**
   Ryo さん「ここがスクロールすると 表示されている→消える→再表示される
   という流れになっていて、なぜ一度消えた？という状況になってしまっている。」

   案X から案X3 まで、この幕の芯は「いいね・フォロワー・承認・比較・
   "後に残る恐怖" の5語が実際に引かれて、少し置いて戻る」だった。
   ページ全体がスクロールに連れて薄くなる作りにしたことで、
   **«消える» が2種類**になり、こちらが «不具合» と読めてしまった。
   意味を運べていない動きなので、残さず外す。

   ★ 語（.x-w）に当たる animation はもう1つも無い。`display: inline-block`
     だけ残してあるのは、戻したくなったときに包みが要るため。
   ★ 復活させるなら、この @keyframes と
     `.lpx3 .x-minus.is-play .x-w{ animation: x-subtract ... }` を戻し、
     §16 と JS §C1 の RUN（3200ms）はそのまま使える。
     ただし «全体の薄れ» と見分けが付く形（例: 引かれた語に罫を残す）に
     しないと同じことになる。 */

/* マイナス記号。文字ではなく1本の罫（本文に字を1つも足さないため）。 */
.lpx3 .x-minus__sign{
  position: absolute;
  inset-block-start: clamp(6px, 1vw, 14px);
  inset-inline-start: 0;
  inline-size: clamp(30px, 3.4vw, 46px);
  block-size: 3px;
  border-radius: 2px;
  background: var(--fg-1);
  /* ★ 2026-08-09: 素の姿を scaleX(1) ＝ **引かれたまま残る** に変えた。
     語が戻る実演を外したので、記号だけ引かれて消える必要が無くなった。
     JS が動かない環境でも「−」が最初から在る。 */
  transform: scaleX(1);
  transform-origin: left center;
}
.lpx3 .x-minus.is-play .x-minus__sign{
  animation: x-sign var(--x-play) var(--ease-inout);
}
/* 引いて、行き過ぎて、収まる。**戻さない**（fill none なので素の scaleX(1) へ返る）。 */
@keyframes x-sign{
  0%  { transform: scaleX(0); }
  24% { transform: scaleX(1.06); }   /* ★ 行き過ぎて */
  32% { transform: scaleX(1); }      /* ★ 収まる */
  100%{ transform: scaleX(1); }
}


/* ═══ §11  ★ ACT 4 — 名前 ═════════════════════════════════════════════════
   ★ bocchi は **1字ずつ薄れ**、botch は **1字ずつ立ち上がる**。
     「綴り損じた」を字の動きで演じる。文字列は "bocchi" / "botch" のまま。
   ★ bocchi 側の字は inline のまま（inline-block にすると親の line-through が
     途切れる。atomic inline には装飾が伝播しない）。だから opacity だけ動かす。
     botch 側は line-through を持たないので inline-block にして立ち上げる。
   ======================================================================== */

.lpx3 .x-name__in{ min-inline-size: 0; }

.lpx3 .x-morph{
  font-family: var(--x-mark-font);
  font-weight: 700;
  font-size: var(--x-fs-morph);
  letter-spacing: var(--ls-head);
  line-height: var(--lh-head);
  margin: 0 0 var(--sp-7);
}
.lpx3 .x-morph .from{
  color: var(--fg-3);
  text-decoration: line-through;
  text-decoration-color: var(--accent-line);
}
.lpx3 .x-morph .arrow{
  display: inline-block;
  color: var(--fg-3);
  margin: 0 .5em;
  font-weight: 400;
}
.lpx3 .x-morph .to{ color: var(--fg-1); }
.lpx3 .x-morph .to .x-ch{ display: inline-block; }

.lpx3 .x-name__body{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--x-gap-xx);
  align-items: start;
}
@media (max-width: 860px){
  .lpx3 .x-name__body{ grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-5); }
}
.lpx3 .x-name .body{
  font-size: var(--fs-body);
  color: var(--fg-2);
  line-height: var(--lh-body);
  margin: 0;
}
.lpx3 .x-name .naming-en{
  grid-column: 1 / -1;
  margin: var(--sp-5) 0 0;
}


/* ═══ §12  ACT 5 — 扉 ═════════════════════════════════════════════════════
   ★ ここだけ動かさない。押す場所の周りで何かが動いていると、押し間違える。
     入場のフェードすら当てていない（[data-in] を1つも置いていない）。
   ★ 唯一の例外が「公開しました。」の点（shell.css §6 の breathe-dot）。
     **ポータルの「常時動く点ひとつ」とまったく同じ身振り**なので残した。
     常時ループはこれと §5 の呼吸の計2つ。
   ======================================================================== */

.lpx3 .beta{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  column-gap: var(--x-gap-xx);
  align-items: start;
  background: var(--surface);
  border: var(--hair) solid var(--rule-2);
  border-radius: var(--card-r);
  box-shadow: var(--shadow-lift);
  padding: clamp(24px, 3.6vw, 48px);
}
@media (max-width: 860px){
  .lpx3 .beta{ grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-7); }
}
.lpx3 .beta-main{ min-inline-size: 0; }

.lpx3 .beta .status-dot{
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--bg);
  border: var(--hair) solid var(--rule);
  font-size: var(--fs-note);
  color: var(--fg-2);
  letter-spacing: var(--ls-body);
  margin-block-end: var(--sp-5);
}
/* 滲みだけ --accent-line へ落とす（明モードで真っ黒のハローが出るのを避ける）。
   @keyframes breathe-dot は shell.css §6 の共通定義をそのまま使う。 */
.lpx3 .beta .status-dot .dot{
  box-shadow: 0 0 10px 1px var(--accent-line);
}

.lpx3 .beta h2{
  font-size: var(--fs-h2);
  font-weight: 500;
  color: var(--fg-1);
  line-height: var(--lh-head);
  margin: 0 0 var(--sp-4);
}
.lpx3 .beta p{
  font-size: var(--fs-body);
  color: var(--fg-2);
  line-height: var(--lh-body);
  max-width: 34em;
  margin: 0;
}

/* 入口ふたつ。Apple の公式バッジは無加工（改色・変形・比率変更は違反）。
   ★ .badge-link に .btn を絶対に当てないこと（shell.css §5 の規約）。 */
.lpx3 .doors{
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-block-start: var(--sp-6);
}
.lpx3 .doors .door-badge img{ display: block; height: 62px; width: auto; }
.lpx3 .doors .door{
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 62px;
  padding: 0 22px;
  border-radius: var(--r-sm);
  border: var(--hair) solid var(--rule);
  background: var(--bg);
  color: var(--fg-1);
  transition: transform var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.lpx3 .doors .door .small{
  font-size: var(--fs-note);
  color: var(--fg-2);
  line-height: 1.3;
}
.lpx3 .doors .door .big{
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.25;
}
@media (hover: hover) and (pointer: fine){
  .lpx3 .doors .door-badge:hover{ transform: translateY(var(--lift)); }
  .lpx3 .doors .door:hover{
    transform: translateY(var(--lift));
    border-color: var(--accent-line);
  }
}

.lpx3 .beta .platforms{
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-note);
  color: var(--fg-2);
  line-height: var(--lh-body);
}
.lpx3 .beta .testflight-note{
  margin-block-start: var(--sp-5);
  padding-block-start: var(--sp-5);
  border-block-start: var(--hair) solid var(--rule-2);
  font-size: var(--fs-note);
  color: var(--fg-3);
  line-height: var(--lh-body);
  max-width: 40em;
}
.lpx3 .beta .testflight-note strong{ color: var(--fg-2); font-weight: 600; }


/* ═══ §13  Android版の先行登録フォーム ════════════════════════════════════
   ★★ HTML 側の5つの ID（beta-signup-form / -email / -website / -submit /
     -status）とエンドポイントは1文字も変えていない。
   ★★ .beta / .beta-main / .beta-signup / .signup-row / form のどれにも
     **position を付けないこと。**ハニーポットの position:absolute は
     初期包含ブロックを基準にして left:-9999px へ逃げている。囲むと中に
     閉じ込められて可視化する。
     （display:grid は包含ブロックを作らないので §12 の grid は安全。）
   ★ input:focus に outline:none を書かない（キーボードのリングを消さない）。
   ======================================================================== */

.lpx3 .beta-signup{
  min-inline-size: 0;
  padding: var(--card-pad);
  border-radius: var(--r-md);
  background: var(--bg);
  border: var(--hair) solid var(--rule-2);
}
.lpx3 .beta-signup .signup-head{
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--fg-1);
  line-height: var(--lh-head);
  margin: 0 0 var(--sp-2);
}
.lpx3 .beta-signup .signup-desc{
  font-size: var(--fs-note);
  color: var(--fg-2);
  line-height: var(--lh-body);
  margin: 0 0 var(--sp-4);
  max-width: none;
}
.lpx3 .beta-signup .signup-row{
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.lpx3 .beta-signup input[type="email"]{
  flex: 1 1 180px;
  min-inline-size: 0;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  border: var(--hair) solid var(--rule);
  background: var(--surface);
  color: var(--fg-1);
  font-size: var(--fs-body);
  font-family: inherit;
  transition: border-color var(--dur-1) var(--ease);
}
.lpx3 .beta-signup input[type="email"]::placeholder{ color: var(--fg-3); }
.lpx3 .beta-signup input[type="email"]:focus{ border-color: var(--fg-2); }

.lpx3 .beta-signup .honeypot-field{
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lpx3 .beta-signup button{
  flex: 0 0 auto;
  padding: 12px 22px;
  border-radius: var(--r-sm);
  border: var(--hair) solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-body);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: opacity var(--dur-1) var(--ease),
              transform var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
.lpx3 .beta-signup button:disabled{ opacity: .55; cursor: default; transform: none; }
@media (hover: hover) and (pointer: fine){
  .lpx3 .beta-signup button:hover:not(:disabled){
    transform: translateY(var(--lift));
    opacity: .9;
  }
}

.lpx3 .beta-signup .signup-status{
  margin-block-start: var(--sp-3);
  font-size: var(--fs-note);
  color: var(--fg-2);
  min-height: 1.4em;
}
/* ★ 完全無彩なのでエラーも赤にしない。文言そのものが誤りを述べているので、
   色は唯一の手掛かりではない（WCAG 1.4.1）。明度と字面で立てる。 */
.lpx3 .beta-signup .signup-status.error{
  color: var(--fg-1);
  font-weight: 500;
}
.lpx3 .beta-signup .signup-note{
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-note);
  color: var(--fg-3);
  line-height: var(--lh-body);
  max-width: none;
}
.lpx3 .beta-signup .signup-note a{
  color: var(--fg-1);
  text-decoration-color: var(--accent-line);
}


/* ═══ §14  日本語の折り返し ═══════════════════════════════════════════════
   word-break: auto-phrase … 文節を見て折り返す（Chrome 119+）。非対応は無害
   text-wrap: pretty       … 最終行に1文字だけ残るのを減らす
   ★ 固有名詞（ワードマーク・bocchi/botch・英字の tagline・節見出しの
     Inside botch / Concept / How it works / The name）には当てない。
   ======================================================================== */

.lpx3 .x-h1,
.lpx3 .x-stage .lead,
.lpx3 .x-voice__t,
.lpx3 .x-step__t,
.lpx3 .x-minus__line,
.lpx3 .x-name .body,
.lpx3 .x-shot .caption,
.lpx3 .beta h2,
.lpx3 .beta p,
.lpx3 .beta .testflight-note,
.lpx3 .beta .platforms,
.lpx3 .beta-signup .signup-desc,
.lpx3 .beta-signup .signup-note,
.lpx3 .beta-signup .signup-status,
.doc p,
.doc li{
  word-break: auto-phrase;
  text-wrap: pretty;
}


/* ═══ §15  入場 ═══════════════════════════════════════════════════════════
   shell.css §7 の @keyframes（dw-fade-up / dw-tile-in / dw-rise）を借りる。
   **再定義はしない**（キーフレーム名は文書全体で global）。
   尺は --dur-in（.58s）／時差は --dur-step（.065s）／曲線は --ease-inout。
   ★ html.js のときだけ隠す。JS が死んでいる環境では素で出る。
   ★ JS（botch-x3.js §A）が画面に入った順に .is-in を付ける。
     ＝ **ホバーに一切依存しない**ので、タッチ端末でも必ず入場が見える。
   ★ 保険は JS 側に2枚（IO 非対応なら即時表示・3秒発火しなければ全部表示）。
   ★ 節見出し（.sec-head）もポータルと同じく入場する
     （portal.css §4c の `html.js .page--portal .dw-sec__head.is-in` と同じ形）。
   ======================================================================== */

/* ★★★ fill-mode は **backwards**（案X2 は both だった。2026-08-04 に変えた）。
   理由は §15b の「通り過ぎたら薄れる」と噛み合わせるため。
   both のままだと入場が終わったあとも @keyframes の 100%（opacity: 1）を
   **animation が押さえ続ける**。アニメーションは宣言より強いので、
   §15b の薄さが **1つも効かない**（実際に踏んだ）。
   ★ 2026-08-09 追記: §15b が両方持つ要素の入場を `animation: none` で
     切ったので、いまその要素に限ればこの理由は当てはまらない。ただし
     [data-in] だけを持つ要素にはそのまま効いているので backwards のまま。
   backwards なら
     ・遅延のあいだ …… 0%（opacity 0）を適用 ＝ ちらつかない（both と同じ）
     ・走り終わったあと … 何も適用しない ＝ 値は宣言（opacity: 1）へ返る
   ＝ 入場の見え方は1フレームも変わらないまま、終わったあとの値を
     カスケードへ返す。§15b はその返ってきた値を上書きする。
   ★ この案の「終われば素の姿へ戻る」という作法とも、backwards のほうが揃う。 */
html.js .lpx3 [data-in]{ opacity: 0; }
html.js .lpx3 [data-in].is-in{
  opacity: 1;
  animation: dw-fade-up var(--dur-in) var(--ease-inout) backwards;
}

/* ACT 0 の並び。左上から順に立ち上がる。 */
html.js .lpx3 .tagline.is-in { animation-delay: calc(var(--dur-step) * 1); }
html.js .lpx3 .x-h1__c.is-in { animation-delay: calc(var(--dur-step) * (2 + var(--i))); }
html.js .lpx3 .x-stage .lead.is-in   { animation-delay: calc(var(--dur-step) * 5); }
html.js .lpx3 .x-stage .cta-row.is-in{ animation-delay: calc(var(--dur-step) * 6); }

/* 実画面2枚と三つの声は「弾んで置かれる」（dw-tile-in）。 */
html.js .lpx3 .x-shot.is-in,
html.js .lpx3 .x-voice.is-in{
  animation-name: dw-tile-in;
  animation-duration: var(--dur-in);
}
html.js .lpx3 .x-shot--sub.is-in{ animation-delay: calc(var(--dur-step) * 2); }
html.js .lpx3 .x-voice.is-in    { animation-delay: calc(var(--dur-step) * var(--i)); }

/* ACT 4。bocchi は薄れ、→ が滑り込み、botch が1字ずつ立ち上がる。 */
html.js .lpx3 .x-morph.is-in .from .x-ch{
  animation: x-unspell .5s var(--ease-inout) calc(var(--i) * .05s) backwards;
}
html.js .lpx3 .x-morph.is-in .arrow{
  animation: x-arrow .5s var(--ease-inout) .24s backwards;
}
html.js .lpx3 .x-morph.is-in .to .x-ch{
  animation: dw-rise .5s var(--ease-inout) calc(.36s + var(--i) * .055s) backwards;
}
/* 出典: yui540/css-animations 2026-06-09 tips-2 breathe の opacity 成分だけを
   取り出して、行って戻る1往復にしたもの。 */
@keyframes x-unspell{
  0%  { opacity: 1; }
  50% { opacity: .34; }
  100%{ opacity: 1; }
}
/* 出典: 2026-04-25 tips-1 slide-in を横向きにし、着地で 3px 行き過ぎてから戻す。 */
@keyframes x-arrow{
  0%  { opacity: 0; transform: translateX(-9px); }
  60% { opacity: 1; transform: translateX(3px); }
  100%{ opacity: 1; transform: translateX(0); }
}


/* ═══ §15b  ★★★③ スクロールに連れて濃くなり、薄くなる ═══════════════════
   Ryo さん 2026-08-04「それぞれの文字とかもスクロールにあわせて全体的に
   ふっとでてくるようなアニメーションがほしいかも。通り過ぎたら消えていく
   ような感じ」。「どこまで消すか」→ **薄く残す**。

   ★★★ 2026-08-09 に作り直した。Ryo さん:
     「スクロールしたときに、消えて表示されるみたいな感じになってる。
      そうじゃなくて、スクロールで見えなくなるときに自然と消えるような
      感じにしたい。逆に見えてくると自然に表示されるような。」

   【前の作りと、なぜ «跳ねて» 見えたか】
     `.is-past` というクラスを付け外しし、付いたら opacity .25、
     外れたら 1、あいだを transition .45s で繋いでいた。
     クラスが付くのは「要素が完全に画面の上へ出た」瞬間**だけ**なので
       下へ送るとき … 端まで濃いまま。薄くなるのは画面の外で、見えない。
       上へ戻すとき … 画面に入った瞬間に .25 → 1 が 0.45 秒で走る。
     ＝ 段階が2つしか無い。transition を長くしても «跳ね» は消えない。

   【いまの作り】
     §E がスクロールのたびに **要素ごとの opacity を計算して inline に書く**。
     画面の上端と下端に «ぼかし代»（画面の高さの 18%・96〜200px）を置き、
     その中に居るあいだだけ滑らかに 1 ↔ .10 を行き来する。
     真ん中に居るあいだは必ず 1。入るときも出るときも同じ形でぼける。
     ★ 一度きりの入場（§15 の dw-fade-up）は、両方持つ要素では **切る**
       （下の animation: none）。走っているあいだ animation が opacity を
       握って inline より強くなり、そこだけ連動が飛ぶため。

   ★★★★ 読めないページにしないための安全策。

   ① **reduce では薄くしない。**§16 の `[data-fade]{ opacity: 1 !important }`。
      **author の !important は author の inline style より強い**ので、
      §E が何を書いていても必ず勝つ。門番は §16 の1枚だけに保つ。

   ② **JS が落ちても薄くならない。**薄さは inline style にしか無く、
      CSS の素の宣言は下の `opacity: 1`。observer も transition も
      挟まっていないので «薄い状態で固まる» が起こらない。
      素の HTML（html.no-js）も当然 opacity 1。

   ③ **読んでいる最中の字は濃い。**ぼけるのは画面の上端・下端から
      B px（390×844 で 152px）の帯の中だけ。真ん中の 540px は常に 1。
      ★ ここは前の作りより «弱い» 保証になった。前は「画面内なら必ず 1」
        だったが、Ryo さんのご要望が «端で自然に薄くなること» なので、
        端の帯の中では意図的に薄くする。読む位置（画面の中央）は 1 のまま。

   ④ **印刷・検索・読み上げに影響しない。**opacity なので DOM からは消えない
      （display / visibility / content-visibility は1つも使っていない）。
      印刷だけは紙に薄い字が出ると困るので、下の @media print で 1 に戻す。

   ★ 詳細度の注意。下の `html.js .lpx3 [data-fade]` は (0,3,1) で、
     §15 の `html.js .lpx3 [data-in]` と **同値**。
     だから §15 より **後ろ** に置いてある。§15b を §15 の前へ動かすと、
     両方持つ要素（見出し・段落）だけ opacity: 0 のまま出てこない。
   ★ 動かすのは opacity だけ（GPU に載る）。transform には触らない。
   ======================================================================== */

/* ★★★ 2026-08-09: 二値（.is-past の付け外し ＋ transition）をやめた。
   いまは §E が **毎フレーム inline の opacity を書く**。ここが持つのは
   «素の姿» だけ ＝ **濃い**。
   ★★ この宣言が「JS が落ちても読める」の本体。inline が1つも書かれない
     ＝ opacity: 1。observer も transition も挟まっていないので、
     途中で止まっても «薄いまま固まる» が起こらない。
   ★★ 詳細度は (0,3,1) で §15 の `html.js .lpx3 [data-in]` と同値。
     §15 より **後ろ**に置いてあるので、両方持つ要素ではこちらが勝ち、
     [data-in] の opacity: 0 は当たらない。 */
html.js .lpx3 [data-fade]{ opacity: 1; }

/* ★★ 両方持つ要素では **一度きりの入場を切る**。
   dw-fade-up は走っているあいだ opacity を 0→1 で握るので、
   §E が書く inline より強い（animation > inline）。切らないと
   入場の 0.5 秒だけスクロール連動が飛ぶ ＝ そこで «跳ねて» 見える。
   ★ 入場の «ふっと出る» は、いまはスクロール連動そのものが担っている。
   ★ 詳細度 (0,4,1) は §15 の .is-in (0,3,1) に勝つ。 */
html.js .lpx3 [data-fade][data-in],
html.js .lpx3 [data-fade][data-in].is-in{ animation: none; }

/* ④ 紙には薄い字を出さない。
   ★ [data-in] も一緒に戻すこと（2026-08-09 追加）。§15 の
     `html.js .lpx3 [data-in]{ opacity: 0 }` は、入場の観測子が
     **その要素まで読者がスクロールして初めて** .is-in を付ける作りなので、
     読者が下まで見ていない要素は opacity 0 のまま残る。
     JS 側の3秒の保険は「観測子が一度も何も返さなかったとき」しか動かないので、
     ここを戻しておかないと **紙に白紙のブロックが出る**。
     （案X2 以前から在る作りで、今回入った不具合ではない。画面には影響しない。） */
@media print{
  /* ★ §E が書くのは opacity だけ（2026-08-09 に持ち上げ＝ translateY を
     やめたので、transform は1つも書かない）。だから戻すのも opacity だけ。 */
  html.js .lpx3 [data-fade]{ opacity: 1 !important; }
  html.js .lpx3 [data-in],
  html.js .lpx3 [data-in].is-in{
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}


/* ═══ §16  ★ prefers-reduced-motion: reduce ═══════════════════════════════
   ★★ ここがこの案でいちばん事故りやすいところ。動きが説明を代行している
     ぶん、動きを止めたときに **本文が全部読めること** を構造で担保する。
   ① .lpx3 の中の animation と transition を **まとめて外す**。
      shell.css §6 は duration を .01ms へ潰すだけなので、規則としては
      「fill-mode:both で 0%（opacity:0）から始まる animation」が残る。
      実ブラウザなら1フレームで終端へ行くが、アニメーションを走らせない環境
      （プリレンダ／検証ペイン）では **本文が opacity:0 のまま消える**。
      見せるためのページでそのリスクは取らない。
   ② 入場で隠していた [data-in] を明示的に開ける（!important）。
   ③ 一度きりにした4つは「動きが終わったあとの姿」が素の宣言なので、
      止めるとその姿で出る。**そのままでは意味が通らない2つだけ**、
      「動きが始まる前の姿」を静止値として与える:
        ・雑踏 …… 素は「html.js のとき opacity:0（＝流れてくる前）」。
                   ここで **置かれたあとの姿**（var(--o)）へ戻す。
                   ★ 同じ詳細度の規則を後ろに置いて勝たせている
                     （!important は要らない）。
        ・呟きの一生 … 素は「渡りきって消えたあと」。動きを見られない人には
                   意味が伝わらないので、**生まれる前の姿**で置く
                   （光は最初の停留所に灯り、残り時間の帯は満杯）。
   ④ 動きが担っていた「静止の姿」を持たない2つに静止値を与える:
        ・マイナス記号 … 素は scaleX(0)（＝見えない）。scaleX(1) で置く
        ・b の呼吸     … 素は .82 の底。いちばん明るい 1 で置く
      こぼれ光3粒と渡る光はここで何も書かなくてよい
      （こぼれ光の opacity に触らないのが肝。触ると §1 の琥珀の
       コントラスト実測が無効になる）。
   ======================================================================== */

@media (prefers-reduced-motion: reduce){
  html .lpx3,
  html .lpx3 *,
  html .lpx3 *::before,
  html .lpx3 *::after{
    animation: none !important;
    animation-delay: 0s !important;
    transition: none !important;
  }
  html.js .lpx3 [data-in],
  html.js .lpx3 [data-in].is-in{
    opacity: 1 !important;
    transform: none !important;
  }
  /* ③ 雑踏は「置かれたあと」で静止（消さない） */
  html.js .lpx3 .x-crowd:not(.is-lit) .x-bub{ opacity: var(--o); }

  /* ③ ★④ 投稿の再現は **一部始終が同時に見えている1枚の絵** で静止させる。
     素の姿（＝走り終わったあと）は「入力欄は空・帯はどこにも無い」なので、
     動きを見られない人には器だけが並んで意味が通らない。
     ここで4つ全部を «在る» 側に置くと、動かなくても
       入力欄に何か書いてある → 線の上を何かが渡っている →
       相手の画面に何かが載っている → 残り時間はまだ満ちている
     という、3つのステップの文とそのまま対応する絵になる。 */
  html .lpx3 .x3-post__cover{ transform: scaleX(0); }   /* 文が打ってある */
  html .lpx3 .x3-post__fly::before{ opacity: 1; }
  html .lpx3 .x3-post__bub{ opacity: 1; }
  html .lpx3 .x-drain::before{ transform: scaleX(1); }

  /* ★① 流れの層（.x3-fl）の打ち消しはここに在ったが、2026-08-09 に
     層そのものを廃止したので不要になった（§3b の注記を参照）。 */

  /* ★★★③ **薄くしない。**これが §15b の安全策①。
     ★★ §E は reduce でも inline の opacity を書き続けるが、
       **author の !important は author の inline より強い**ので
       ここが必ず勝つ。門番を1つに保つため、JS 側では reduce を見ない。 */
  /* ★ §E が書くのは opacity だけ（2026-08-09 に持ち上げ＝ translateY を
     やめたので、transform は1つも書かない）。だから戻すのも opacity だけ。 */
  html.js .lpx3 [data-fade]{ opacity: 1 !important; }

  /* ★★② ライトボックスは **動かさずに、瞬時に開閉する。**
     開閉そのものは dialog の showModal()/close() が持っていて animation は
     上乗せでしかないので、全部切っても「押すと開く・Escape で閉じる・
     ← → で移る」は必ず成立する。
     ★ ::backdrop は別行に置く。`html .lpx3 *` は擬似要素に当たらないので、
       まとめて書くと幕だけ shell.css §6 の .01ms のまま 0% で固まる。 */
  html.js .lpx3 .x3-lb,
  html.js .lpx3 .x3-lb.is-open,
  html.js .lpx3 .x3-lb.is-shut,
  html.js .lpx3 .x3-lb .x3-lb__box,
  html.js .lpx3 .x3-lb .x3-lb__img,
  html.js .lpx3 .x3-lb .x3-lb__img.is-swap{
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  html.js .lpx3 .x3-lb.is-open::backdrop,
  html.js .lpx3 .x3-lb.is-shut::backdrop{
    animation: none !important;
    opacity: 1 !important;
  }

  /* ④ 動きしか姿を持たない2つ */
  html .lpx3 .x-minus__sign{ transform: scaleX(1); }
}


/* ═══ §17  法務3ページ（.doc）═════════════════════════════════════════════
   ★★ 条文には1文字も触っていない。ここで替えるのは枠と組版だけ。
   組版の実体は shell.css §6 の .doc が全部持っていて、色は §1 の
   17トークン差し替えで自動的に無彩になる。
   ★ 法務ページには琥珀を1滴も置かない。強調は太さで作る。
   ★ 法務ページに入場アニメは付けない（[data-in] を1つも置いていない）。
   ======================================================================== */

.doc h2{
  border-top-color: var(--rule);
  letter-spacing: var(--ls-head);
}
.doc ul > li::before{ color: var(--fg-3); }
.doc strong{ color: var(--fg-1); font-weight: 600; }
.doc .updated{ border-top: var(--hair) solid var(--rule-2); padding-top: var(--sp-4); }


/* ═══ §18  シェルの家具にひとつだけ残っていた色 ═══════════════════════════
   フッターの「次のアプリ」の点（.next-work__swatch）は shell.css §4 で
   `background: var(--n-accent, var(--fg-3))` と書かれていて、--n-accent は
   app-lp.njk が **要素のインライン style** で渡してくる（次が Pareidol なので
   rgb(93,143,196) の青）。§1 の17トークン差し替えでは奪えないので、
   **background 宣言そのもの** を取り返す。
   ★ html[data-app="botch"]（0,1,1）は shell.css §4 の .next-work__swatch
     （0,1,0）より詳細度が高いので !important は要らない。
   ======================================================================== */

html[data-app="botch"] .next-work__swatch{ background: var(--fg-3); }


/* ═══ §19  ★★② 拡大表示（ライトボックス）═════════════════════════════════
   Ryo さん 2026-08-04「あと拡大表示もできるように」。
   **ホームのライトボックス（portal.css §10 / portal.js §C）をそのまま写した。**
   あちらは .page--portal スコープなので、この LP には1つも届かない。

   ★★ 器は <dialog> ＋ showModal()。自前のオーバーレイを組まない。
     ネイティブだからただで付いてくるものが4つあり、どれも自前だと必ず破れる:
       1. ::backdrop（幕）
       2. トップレイヤー（z-index の積み木にも overflow にも縛られない）
       3. 焦点の閉じ込め（Tab がダイアログの中で循環する）
       4. 外側の inert 化（背後を押せない・読み上げも入らない）
   ★ **段階的強化。**<dialog> が無い環境では JS が button を1つも作らない
     （HTML に button を書くと、JS が落ちた環境で「押すと大きくなる」と嘘をつく）。
   ★ **Escape の二段階は要らない**（この LP に引き出しは無い）。
     ただし cancel を preventDefault して自前で閉じるのは残した。
     閉じの動き（x3-lb-out）を見せてから close() したいだけで、
     Escape 1打で必ず閉じることは変わらない。
   ★ **フォーカスは押した画像へ戻す。**JS が showModal() の **前に**
     押した画像へ焦点を置いている（dialog のネイティブ復帰先と一致させる）。
   ★ 拡大時の追加通信は **0 バイト**。帯と同じ src をそのまま使う。
     実画面は 1080×2400 と十分に大きいので、拡大用の別版は作っていない。
   ★ 幕の上の字は **明暗どちらのモードでも明るい色**。幕そのものが暗いので
     var(--fg-*) を使うと明モードで黒い字が暗い幕に乗って読めなくなる。
     ここだけ地の色に依らない直値を置く（対比は下に実測を書いた）。
   ======================================================================== */

html[data-app="botch"]{
  /* ★ 拡大画像の高さの上限。素材は 1080×2400 なので 900px でも
     引き伸ばしにならない（実寸の 37.5%）。 */
  --x3-lb-h: min(86dvh, 900px);
}

/* --- 帯のサムネ側。JS が <img> を包んだ <button> ------------------------
   ★ 見た目は素の <img> のときと1pxも変えない。押せることは
     カーソル（zoom-in）と、キーボードのときの focus-visible だけで示す。 */
.lpx3 .x3-shot__btn{
  display: block;
  inline-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: inherit;
  -webkit-appearance: none;
          appearance: none;
  border-radius: 10px;          /* .x-shot img と同じ。焦点枠の形を合わせる */
  cursor: zoom-in;
}
.lpx3 .x3-shot__btn:focus{ outline: none; }
.lpx3 .x3-shot__btn:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* --- dialog 本体 ＝ 画面いっぱいの透明な器 ------------------------------
   幕は ::backdrop が描く。この要素自体は透明で、余白を押しても閉じられる
   ように画面いっぱいに広げてある（JS が e.target === dialog を見る）。 */
.lpx3 .x3-lb{
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  border: 0;
  padding: clamp(14px, 3vw, 40px);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  overscroll-behavior: contain;
}
/* 閉じているあいだは display:none（dialog の既定）を取り戻す。
   上の display:flex がそのままだと、閉じていても居座る。 */
.lpx3 .x3-lb:not([open]){ display: none; }

/* 幕。★ 色は var() を使わず直値。::backdrop がおおもとの要素から
   カスタムプロパティを継承するのは Chrome 122 以降で、それ以前は :root から
   継承する＝未定義になって幕が透明になる。ここだけ直値で書く。
   対比の実測（最悪ケース＝背後が明モードの地 #F3F3F3）:
     幕の合成色 rgba(10,10,10,.72) on #F3F3F3 → #4B4B4B
       #F7F7F7               → 8.2:1   ← 17px のキャプション
       rgba(255,255,255,.78) → 6.1:1   ← 12.5px の説明
       rgba(255,255,255,.70) → 5.3:1   ← 11.5px の位置表示
   いずれも AA 4.5:1 を超える。 */
.lpx3 .x3-lb::backdrop{ background: rgba(10,10,10,.72); }
@media (prefers-color-scheme: dark){
  .lpx3 .x3-lb::backdrop{ background: rgba(0,0,0,.82); }
}
html.js .lpx3 .x3-lb.is-open::backdrop{ animation: x3-lb-veil-in  .40s var(--ease-inout) both; }
html.js .lpx3 .x3-lb.is-shut::backdrop{ animation: x3-lb-veil-out .22s var(--ease-inout) both; }

/* --- 中身の器 ---------------------------------------------------------- */
.lpx3 .x3-lb__box{
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  max-inline-size: 100%;
}
.lpx3 .x3-lb__box:focus{ outline: none; }
.lpx3 .x3-lb__box:focus-visible{
  outline: 2px solid rgba(255,255,255,.8);
  outline-offset: 10px;
}
html.js .lpx3 .x3-lb.is-open .x3-lb__box{ animation: x3-lb-in  .40s var(--ease-inout) both; }
html.js .lpx3 .x3-lb.is-shut .x3-lb__box{ animation: x3-lb-out .22s var(--ease-inout) both; }

/* 横に並ぶのは、画像の横に説明を置く余地があるときだけ。
   実画面は 0.45 の縦長なので、1120px の画面では横に大きく余る。 */
@media (min-width: 820px){
  .lpx3 .x3-lb__box{ flex-direction: row; align-items: center; }
  /* ★★ flex-basis は **横並びのときだけ**（2026-08-09 に移した）。
     flex-basis は「主軸方向の初期寸法」なので、器が column のあいだ
     `flex: 0 1 26em` は **高さ 403px の下駄** になる。中身は 136px しか
     無いのに 403px を占め、390×844 では器が 906px ＝ 画面より高くなって
     <dialog> に内部スクロールが出る（拡大画像が上端に貼り付き、
     ボタンの下に 267px の空白が残る）。
     ★ ホームの portal.css §10（.dw-lb__side）は同じ書き方のままなので、
       ホーム側にも同じ振る舞いが残っている。ここを採用するなら
       ホームにも同じ移動を入れること。 */
  .lpx3 .x3-lb__side{ flex: 0 1 26em; }
}

/* --- 拡大した画像 -------------------------------------------------------
   ★★ 幅を **確定値** で与える。inline-size:auto ＋ max-block-size だけだと、
     画像がまだ読み込まれていないあいだ 0×0 に潰れる（置換要素の既定サイズは
     読み込み前 0×0 で、width/height 属性から出るのは比だけ）。
   ★★ flex は **0 0 auto（縮まない）**。縮む設定にすると、器の幅が
     「中身から決まる」のに「中身は器の幅を見て縮む」という循環に入り、
     余白が有り余っているのに画像だけ1割ほど小さく出る。
   ★ --w / --h は JS が <img> の width/height 属性から入れる（1080/2400）。 */
.lpx3 .x3-lb__img{
  display: block;
  flex: 0 0 auto;
  inline-size: calc(var(--x3-lb-h) * var(--w, 1080) / var(--h, 2400));
  max-inline-size: 100%;
  block-size: auto;
  max-block-size: var(--x3-lb-h);
  aspect-ratio: var(--w, 1080) / var(--h, 2400);
  border-radius: 12px;
  background: var(--surface-2);
  box-shadow: 0 20px 54px rgba(0,0,0,.45);
}
/* 前後へ移ったときだけ付く（JS が付け外しする）。開いた直後には付けない
   ＝ 器の入場（x3-lb-in）と二重に動かさない。 */
html.js .lpx3 .x3-lb__img.is-swap{ animation: x3-lb-swap .30s var(--ease-inout) both; }

/* 縦に積む幅では画像の下に説明と導線が続く。高さの上限を落として、
   小さい画面でも器ごとスクロールしなくても済むようにする。
   ★ 値は 390×844 の実測から出した（2026-08-09 に 58dvh から上げた）。
     幕の内側 14px×2 ＋ 画像と説明のあいだ 14px ＋ 説明の列 136px を引くと
     画像に使えるのは 666px。70dvh ＝ 590.8px なので 75px 余る
     （説明が4行ぶん伸びても器ごとスクロールしない）。
     このとき画像は 265.9px 幅 ＝ 素の 117px の **2.27倍**で、
     PC（1280 で 2.33倍）とほぼ同じ拡大率になる。
   ★ 幅ではなく高さが効く。実画面は 1080×2400（0.45）の縦長なので、
     幅を 390 いっぱいに使うと高さが 804px になって画面に入らない。 */
@media (max-width: 819.98px){
  .lpx3 .x3-lb{ --x3-lb-h: min(70dvh, 900px); }
}

/* --- 説明と導線の列 ----------------------------------------------------- */
.lpx3 .x3-lb__side{
  min-inline-size: 0;
  max-inline-size: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lpx3 .x3-lb__live{ display: flex; flex-direction: column; gap: 8px; }

.lpx3 .x3-lb__pos{
  margin: 0;
  font-size: 11.5px;
  font-weight: 300;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.70);
}
.lpx3 .x3-lb__pos-i{ font-weight: 700; color: rgba(255,255,255,.92); }

.lpx3 .x3-lb__cap{
  margin: 0;
  font-size: clamp(15px, .9rem + .3vw, 17px);
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: .02em;
  color: #F7F7F7;
}
.lpx3 .x3-lb__screen{
  margin: 0;
  font-size: 12.5px;
  line-height: 1.85;
  letter-spacing: .02em;
  color: rgba(255,255,255,.78);
}

.lpx3 .x3-lb__nav{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 4px 0 0;
}
/* 1枚しか無いときは前後の導線ごと消す（押せない導線を出さない）。 */
.lpx3 .x3-lb__nav[data-single="1"] .x3-lb__arw{ display: none; }

.lpx3 .x3-lb__btn{
  font: 500 12.5px/1 var(--font-body);
  letter-spacing: .04em;
  color: rgba(255,255,255,.92);
  background: transparent;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 999px;
  padding: 10px 15px;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
/* ★ 門番あり。囲わないと、← → を押すたびにそのボタンが明るいまま残り、
   「いまどちらを押したか」ではなく「最後に触ったのはどれか」を指してしまう。 */
@media (hover: hover) and (pointer: fine){
  .lpx3 .x3-lb__btn:hover{
    border-color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.09);
  }
}
.lpx3 .x3-lb__btn:focus{ outline: none; }
.lpx3 .x3-lb__btn:focus-visible{
  outline: 2px solid rgba(255,255,255,.85);
  outline-offset: 3px;
}
.lpx3 .x3-lb__btn-g{ font-variant-numeric: tabular-nums; }
.lpx3 .x3-lb__arw--prev .x3-lb__btn-g{ margin-inline-end: .45em; }
.lpx3 .x3-lb__arw--next .x3-lb__btn-g{ margin-inline-start: .45em; }
/* 閉じるは行の右端。前後とは離して置く（押し間違いを減らす）。 */
.lpx3 .x3-lb__x{ margin-inline-start: auto; }
.lpx3 .x3-lb__x-g{ margin-inline-start: .5em; font-size: 14px; line-height: 0; }

.lpx3 .x3-lb__cap,
.lpx3 .x3-lb__screen{
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* --- ライトボックスの4本 ＋ 入れ替えの1本 -------------------------------
   ★★ ここに @keyframes を足したら **§16 に必ず登録すること。**
     §16 に animation:none を書き忘れると shell.css §6 の
     animation-duration:.01ms !important だけが残り、タイムラインが進まない
     環境（非表示ペイン）で 0% の姿のまま固まる。 */
@keyframes x3-lb-in{
  from{ opacity:0; transform: translateY(12px) scale(.955); }
  58% { opacity:1; transform: translateY(-4px) scale(1.015); }
  to  { opacity:1; transform: translateY(0)    scale(1); }
}
@keyframes x3-lb-out{
  from{ opacity:1; transform: scale(1); }
  to  { opacity:0; transform: scale(.985); }
}
@keyframes x3-lb-veil-in { from{ opacity:0 } to{ opacity:1 } }
@keyframes x3-lb-veil-out{ from{ opacity:1 } to{ opacity:0 } }
/* 前後へ移ったときの入れ替え。--sx は JS が向きで符号を変える。 */
@keyframes x3-lb-swap{
  from{ opacity:0; transform: translateX(var(--sx, 18px)); }
  60% { opacity:1; transform: translateX(calc(var(--sx, 18px) * -.14)); }
  to  { opacity:1; transform: translateX(0); }
}