/* ───────────────────────────────────────────────────────────────
 * 色と立体は Stripe のデザインシステムから (open-design, Apache-2.0)。
 * 構造とリズムは和文コーポレートサイトの型から借りた:
 *   和文見出し + 英語副題 / 細い罫線 + 丸い矢印 / 全面帯 / 広い余白
 * ★ 縦書きと写真は借りない。技術文書では読みにくく、写真は持っていない。
 *   代わりに「描画した実物」を全面帯に置く。
 * ─────────────────────────────────────────────────────────────── */
:root{
  --bg:#ffffff; --surface:#ffffff; --surface-warm:#f6f9fc;
  --fg:#061b31; --fg-2:#273951; --muted:#64748d;
  --border:#e5edf5;
  --accent:#533afd; --accent-on:#ffffff; --accent-hover:#4434d4;
  --radius-sm:4px; --radius-md:6px; --radius-lg:10px;  /* ★ 面はすべて lg */
  --shadow-card:0 2px 5px -1px rgba(50,50,93,.25), 0 1px 3px -1px rgba(0,0,0,.3);
  --shadow-lift:0 13px 27px -5px rgba(50,50,93,.25), 0 8px 16px -8px rgba(0,0,0,.3);
  --font-body:"Helvetica Neue","Hiragino Kaku Gothic ProN","Noto Sans JP",
              "Yu Gothic",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --w:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* ── 地 ──────────────────────────────────────────────────────
 * ★ 真っ白のベタでは素人臭く、模様を入れれば文章が読みにくい。
 *   ヒーローで当の .bas を敷いたのと同じ手を使う ── **地に敷くのは
 *   表計算のセルの目 (方眼)**。飾りではなく、この道具が扱っているもの。
 *   素材もライセンスも要らず、主題と一致するので「形で選ぶ」失敗が起きない。
 * ★ 濃さは目分量で決めない。下の qa_contrast で実際の画素を読んで、
 *   本文とのコントラスト比が落ちないことを確かめてある。
 * ─────────────────────────────────────────────────────────── */
/* ★ background-attachment:fixed は端末によって挙動が怪しい。
   地は全部「固定した層」に持たせ、body 自身は無地にする。 */
body{margin:0;color:var(--fg);font-family:var(--font-body);
     font-size:16.5px;line-height:1.9;-webkit-font-smoothing:antialiased;
     background:var(--bg);
     /* ★ 日本語を文節で折り返す。既定だと「そのまま」が「そ／のままに」と
        語の途中で割れる（実機で Namakoo が指摘）。auto-phrase は文節境界で
        改行する（Chromium 対応・非対応ブラウザは従来の折り返しに劣化）。 */
     word-break:auto-phrase}
/* 方眼。固定して置くので、送っても地が流れず落ち着いている。
   ★ 明るい節の面は .5 まで薄めてある。濃いと方眼がそこだけ消え、
   地が別物になる (実測: 線と紙の差が 1.335 → 1.115 まで落ちていた)。 */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(90deg,rgba(6,27,49,.058) 1px,transparent 1px),
    linear-gradient(180deg,rgba(6,27,49,.058) 1px,transparent 1px);
  background-size:44px 44px}
/* 暗いヒーローから明るい本文へ落ちる境目に、ごく薄い accent の光。
   ★ 単色の面が続くのを切るのが目的なので、見えるか見えないかの濃さで置く */
body::after{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(70% 44% at 82% 8%,rgba(83,58,253,.055),transparent 70%),
    radial-gradient(60% 40% at 8% 62%,rgba(2,128,144,.045),transparent 70%),
    linear-gradient(180deg,#fff 0%,#fbfcfe 38%,#f5f9fd 100%)}
a{color:inherit}
.wrap{max-width:var(--w);margin:0 auto;padding:0 28px}

/* ── ナビ: 細く、右端に一つだけ強い色 ───────────────────────────── */
/* ★ 半透明にすると、下を通る図版が透けて幽霊のように残る (描画して確認)。
   ぼかしだけでは隠れないので不透明にする。 */
header{position:sticky;top:0;z-index:20;background:#fff;
       border-bottom:1px solid var(--border)}
/* ★ ヘッダーは全幅に広げる（コンテンツは 1120px 中央寄せのまま）。brand が左寄り、
   nav リンクが右端に張り出して「広がり」を出す。★ 左パディングを右より大きく取り、
   brand をエッジから少し内側に置く（nav 位置は右 44px のまま不変）。 */
.nav{max-width:none;margin:0 auto;display:flex;align-items:center;
     gap:32px;padding:0 44px 0 80px;height:64px}
.brand{font-weight:700;letter-spacing:.06em;font-size:17px;margin-right:auto}
.brand small{display:block;font-weight:400;font-size:10px;color:var(--muted);
             letter-spacing:.18em}
.nav a{text-decoration:none;font-size:13.5px;color:var(--fg-2);letter-spacing:.04em}
.nav a:hover{color:var(--accent)}
.nav .cta{background:var(--accent);color:var(--accent-on);padding:9px 18px;
          border-radius:var(--radius-sm);font-weight:600}
.nav .cta:hover{background:var(--accent-hover);color:#fff}
/* ★ 言語トグル。日本語⇄English を右端に小さなピルで。★ モバイルでも消さない
   （下の :not(.lang) 参照）── 英語版から日本語版へ戻れなくなる事故を防ぐ。 */
.nav .lang{font-size:12px;color:var(--muted);border:1px solid var(--border);
  padding:5px 11px;border-radius:999px;letter-spacing:.06em}
.nav .lang:hover{color:var(--accent);border-color:var(--accent)}

/* ── ヒーロー ─────────────────────────────────────────────────
 * 参考サイトは研究室の映像で「どういう場所か」を読む前に伝えていた。
 * ★ 開発道具でそれに当たるのは、動いているコードそのもの。
 *   飾りの画像ではなく、このページが扱っている当の .bas を背後に敷く。
 *   素材も認証もライセンスも要らず、中身が主題と一致する。
 * ─────────────────────────────────────────────────────────── */
.hero{background:var(--fg);color:#fff;padding:104px 0 0;position:relative;
      overflow:hidden;isolation:isolate}
/* ★ ヒーローだけに置く光の層。本文の裏 (方眼) は静かなままにし、
   動きは「驚き」の場所にだけ置く。overflow:hidden がヒーロー外への
   漏れを断つ。z-index:-1 で文字より必ず後ろ。teal と violet を別々に
   漂わせて、同期しない緩いオーロラにする。★ 濃さは誇張気味 (.30/.26)。
   見にくければ alpha を下げるだけでよい。動き自体は下の no-preference で。 */
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;
  pointer-events:none;border-radius:50%;filter:blur(60px);will-change:transform}
.hero::before{width:52%;height:130%;left:8%;top:-30%;
  background:radial-gradient(closest-side,rgba(2,128,144,.30),transparent)}
.hero::after{width:46%;height:130%;right:6%;top:-16%;
  background:radial-gradient(closest-side,rgba(83,58,253,.26),transparent)}
/* ★ 最初は左から敷いて、文章の背後を横切って読みにくくした (描画して確認)。
   文章は左にあるので、コードは右へ寄せる。空いていた右側も同時に埋まる。 */
.hero .bgcode{position:absolute;top:0;bottom:0;right:0;width:56%;z-index:-1;
  margin:0;padding:30px 0 0 24px;
  font-family:var(--font-mono);font-size:13px;line-height:1.75;white-space:pre;
  color:#8fa3bd;opacity:.16;pointer-events:none;user-select:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 78%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 78%,transparent 100%)}
@media(max-width:820px){.hero .bgcode{display:none}}
.hero h1{font-size:clamp(27px,4.4vw,46px);line-height:1.5;margin:0 0 20px;
         letter-spacing:.04em;font-weight:700;
         /* ★ 暗い背景から浮かせて立体的に。近い硬い影＋遠い柔らかい影の二層で
            自然な奥行き（けばけばしくしない）。 */
         text-shadow:0 1px 2px rgba(0,0,0,.55), 0 8px 26px rgba(0,0,0,.38)}
/* ★ 句ごとに inline-block にして、意味の切れ目でだけ折り返させる。
   <br> を決め打ちすると幅によって変な所で割れる (スマホで実際に割れた)。 */
.hero h1 span{display:inline-block}
/* ★ 狭い画面では短い見出しに差し替える。
   句単位で折り返させても、句そのものが画面幅より長ければ中で割れる。
   390px 幅に 27px の見出しは 12 文字前後しか入らない ── 物理的に足りない。
   文言のほうを幅に合わせる。読み手には見えない前提になるので、
   意味は副題と本文が引き継ぐようにしてある。 */
.hero h1 .n{display:none}
.hero .en{font-size:12px;letter-spacing:.24em;color:#8fa3bd;margin:0 0 28px}
.hero p{max-width:56ch;color:#c3d0e0;margin:0 0 34px;font-size:15px}
.fmt{list-style:none;display:flex;gap:12px;margin:0 0 8px;padding:0;flex-wrap:wrap}
.fmt li{border:1px solid #1d3a54;border-radius:var(--radius-sm);
        padding:9px 14px;display:flex;gap:9px;align-items:baseline}
.fmt b{font-family:var(--font-mono);font-size:12.5px;color:#a99bff;letter-spacing:.04em}
.fmt span{font-size:12.5px;color:#8fa3bd}
/* ★ ヒーロー本体の行動導線。ナビの「使い方」だけだと「で、何を押す?」が弱い
   (外部レビューの指摘)。★ GitHub は未公開なので死にリンクを避け、#use へ送る。
   書式の直後・静かな AI 注記の前に置き、行動 → 注記 の順にする。 */
.hero-cta{margin:24px 0 4px;display:flex;gap:12px;flex-wrap:wrap}
.hero .go{display:inline-flex;align-items:center;gap:8px;background:var(--accent);
  color:var(--accent-on);padding:12px 24px;border-radius:var(--radius-sm);
  font-weight:600;font-size:14.5px;letter-spacing:.03em;text-decoration:none}
.hero .go:hover{background:var(--accent-hover);color:#fff}
/* ★ 二次ボタン（GitHub）。basrun 公開後に足した本物のリンク。
   一次（紫）に対してゴースト（枠だけ）で、主役を食わない静かさに。 */
.hero .go.ghost{background:transparent;color:#c3d0e0;border:1px solid #2b4a68}
.hero .go.ghost:hover{background:#122a41;color:#fff;border-color:#3a5a78}
.by{margin:26px 0 0;font-size:12.5px;color:#7d93b2;letter-spacing:.02em}
.by b{color:#c3d0e0;font-weight:600}
.by span{display:block}   /* ★ 「根拠 / は」で折れていた。二文目は行頭から */
.by a{color:#a99bff;text-decoration:none;border-bottom:1px solid rgba(169,155,255,.35)}
.by a:hover{border-bottom-color:#a99bff}
.hero .shot{margin:56px auto 0;max-width:var(--w);padding:0 28px 72px}

/* ── ヒーローの図: 変換そのもの ──────────────────────────────
 * ★ 最初は「描画した見積書」をそのまま大きく置いていた。だが**ここは実物を
 *   見せる場所ではなく、何をする道具かを一目で伝える場所** (Namakoo の指摘)。
 *   実物は下の節に 4 枚ある。しかも白い紙を暗い面に落とすので浮いて重かった。
 * ★ 撮ったものではなく、暗い面で組み直す。左のコードは実際の Amount.bas の
 *   行、右の数字は実際に basrun が入れた金額。**見た目は作るが、中身は作らない。**
 * ─────────────────────────────────────────────────────────── */
/* ★ 中央揃えにしたら、表のほうが背が高いぶんコードだけ下がって
   左右の見出しがずれた (描画して確認)。見出しは上で揃え、矢印だけ中央へ。 */
.tf{display:grid;grid-template-columns:1fr 148px 1fr;align-items:start;
  background:#0d2439;border:1px solid #1d3a54;border-radius:var(--radius-lg);
  padding:30px 32px;box-shadow:var(--shadow-lift)}
.tf .tag{display:block;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.12em;color:#7d93b2;margin-bottom:16px}
.tf .tag em{font-style:normal;color:#a99bff;margin-left:10px;letter-spacing:.04em}
.tf pre{background:none;box-shadow:none;padding:0;border-radius:0;
  font-size:11.5px;line-height:2.05;color:#8fa3bd;overflow:visible;
  white-space:pre;text-indent:0}
.tf pre b{color:#a99bff;font-weight:400}
.tf-mid{text-align:center;padding:0 12px;align-self:center}
.tf-mid span{display:block;font-family:var(--font-mono);font-size:11px;
  color:#a99bff;letter-spacing:.08em;margin-bottom:12px}
.tf-mid svg{width:100%;height:12px;overflow:visible}
/* ★ データが流れる脈動。矢印パスに沿って光の破線を 1 回だけ走らせる。
   ★ 点の translate ではなく stroke で描くのは、モバイルで矢印が 90° 回転しても
   パスに沿うから（向き非依存）。既定は不可視 (offset で外へ・opacity 0)、
   動くのは下の no-preference の中だけ。 */
.tf-mid svg .pulse{fill:none;stroke:var(--accent);stroke-width:3;
  stroke-linecap:round;stroke-dasharray:10 1000;stroke-dashoffset:10;opacity:0;
  filter:drop-shadow(0 0 3px var(--accent))}
.tf-mid path{stroke:#3d5e80;stroke-width:1.2;fill:none}
.tf-mid marker path{fill:#3d5e80;stroke:none}
.doc{width:100%;border-collapse:collapse;font-size:11.5px;
  font-family:var(--font-mono)}
.doc td{padding:8px 0;border-bottom:1px solid #16324b}
.doc .bar{display:block;height:7px;border-radius:3px;background:#22415e}
.doc .num{text-align:right;color:#6d8299;padding-left:14px}
/* ★ この列だけが basrun の出力。ここに視線が行けば図の役目は終わり。 */
.doc .out{text-align:right;color:#a99bff;padding-left:16px}
.doc tr:last-child td{border-bottom:none;border-top:1px solid #2a4a68;
  padding-top:12px;color:#c3d0e0}
.doc tr:last-child .out{font-weight:700}

/* ── 図が動く一箇所 ──────────────────────────────────────────
 * ★ 動くこと自体は目的ではない。この図が言いたいのは「平文が文書の中身に
 *   なる」なので、**入る側 (金額の列) だけ**が後から現れる。他は動かさない。
 * ★ no-preference の側に書く。opacity:0 を既定にしてアニメで戻す作りだと、
 *   動きを切っている人に **何も見えなくなる**。既定は「見えている」状態。
 * ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference){
  .doc .out{animation:fill .5s cubic-bezier(.2,.7,.3,1) both}
  .doc tr:nth-child(1) .out{animation-delay:.30s}
  .doc tr:nth-child(2) .out{animation-delay:.40s}
  .doc tr:nth-child(3) .out{animation-delay:.50s}
  .doc tr:nth-child(4) .out{animation-delay:.60s}
  .doc tr:nth-child(5) .out{animation-delay:.70s}
  .doc tr:nth-child(6) .out{animation-delay:.92s}
  .tf-mid svg path{animation:draw .8s ease-out both}
  /* ★ データフローの脈動。矢印を 1 回だけ光の破線が渡る。常時は動かさない。 */
  .tf-mid svg .pulse{animation:flow 1.05s ease-in .2s both}
  @keyframes fill{from{opacity:0;transform:translateY(-5px)}
                  to{opacity:1;transform:none}}
  @keyframes draw{from{opacity:0}to{opacity:1}}
  @keyframes flow{0%{stroke-dashoffset:10;opacity:0}
                  14%{opacity:1} 86%{opacity:1}
                  100%{stroke-dashoffset:-92;opacity:0}}
  /* ★ basrun 側の ✓ を、スクロールで上から順に点灯させる。JS は入れない ――
     各項目が自分の view() タイムラインで発火するので、勝手に段差がつく。
     ★ 非対応ブラウザ (Safari 等) では @supports が外れ、静的に全部見える。 */
  /* ★ #how の accent 破線を、ロード時に 1 度だけ流す。データが通った気配。
     既に dasharray 4 4 なので offset をずらすだけ（周期 8 の倍数で終えれば継ぎ目なし）。
     ★ 常時は動かさない ── 動きは 1 回きり、というサイトの原則に合わせる。 */
  .flow .ln.acc{animation:march 1.5s linear both}
  @keyframes march{to{stroke-dashoffset:-40}}
  /* ★ スクロールで浮かぶもの（.vs の ✓ と、各セクションのカード）。
     各要素が自分の view() タイムラインで発火 → 上から順に段差がつく。JS 無し。 */
  @supports (animation-timeline: view()){
    .vs-new .vs-item{opacity:0;transform:translateY(8px);
      animation:vsrise linear both;animation-timeline:view();
      animation-range:entry 12% entry 58%}
    .grid .card{opacity:0;transform:translateY(10px);
      animation:vsrise linear both;animation-timeline:view();
      animation-range:entry 6% entry 46%}
  }
  @keyframes vsrise{to{opacity:1;transform:none}}
  /* ★ ヒーローの 2 つの光を、別々の周期で漂わせる。26s と 34s で割り切れないので
     ずっと重なり方が変わり続ける (同期しない = 単調にならない)。transform だけを
     動かすので合成側で処理され軽い。ease-in-out+alternate で端が滑らか。 */
  .hero::before{animation:glowA 26s ease-in-out infinite alternate}
  .hero::after{animation:glowB 34s ease-in-out infinite alternate}
  @keyframes glowA{from{transform:translate3d(-6%,4%,0) scale(1)}
                   to{transform:translate3d(12%,-7%,0) scale(1.18)}}
  @keyframes glowB{from{transform:translate3d(7%,-5%,0) scale(1.12)}
                   to{transform:translate3d(-9%,9%,0) scale(.92)}}
  /* ★ 紙に出すときは待つ相手がいない。最初から最終状態にする。 */
  @media print{.doc .out,.tf-mid svg path,.hero::before,.hero::after{animation:none}}
}

/* ── 見出し: 和文 + 細い罫線 + 英語副題 ───────────────────────── */
.sec{padding:96px 0}
.sec.alt{background:linear-gradient(180deg,rgba(240,246,252,.5),rgba(236,244,251,.5));
  border-top:1px solid rgba(6,27,49,.05);border-bottom:1px solid rgba(6,27,49,.05)}
.h2{display:flex;align-items:center;gap:20px;margin:0 0 40px;flex-wrap:wrap}
.h2 b{font-size:clamp(20px,2.6vw,26px);letter-spacing:.14em;font-weight:700}
.h2 .rule{flex:0 0 56px;height:1px;background:var(--border)}
.h2 .en{font-size:11.5px;letter-spacing:.2em;color:var(--muted);
        font-family:var(--font-mono)}
.lead{max-width:62ch;color:var(--fg-2);margin:0 0 34px}

/* ── カード ──────────────────────────────────────────────────── */
.grid{display:grid;gap:22px;grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface);border:1px solid var(--border);
      border-radius:var(--radius-lg);padding:26px 24px;box-shadow:var(--shadow-card)}
.card h3{margin:0 0 10px;font-size:15.5px;letter-spacing:.04em}
.card p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.85}

/* ── 対比（埋め込みマクロ vs basrun）─────────────────────────────
   ★ 表より 2 列の視覚比較の方が「劣る道 / 優れた道」が一目で分かる。
   配色は抑制を保つ: ✗ は muted、✓ は accent。派手な赤緑にはしない。 */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
.vs-col{border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:22px 22px 10px;background:var(--surface)}
.vs-old{opacity:.92}
.vs-new{border-color:#d6cffe;box-shadow:0 0 0 3px #f1edff}   /* ★ 優れた側を静かに強調 */
.vs-cap{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  color:var(--muted);margin-bottom:6px}
.vs-new .vs-cap{color:var(--accent)}
.vs-item{display:flex;gap:12px;align-items:flex-start;padding:14px 0;
  border-top:1px solid var(--border)}
.vs-item .mk{flex:0 0 auto;width:21px;height:21px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:700;margin-top:1px}
.vs-old .mk{background:#eef2f7;color:var(--muted)}
.vs-new .mk{background:var(--accent);color:#fff}
.vs-item b{display:block;font-size:13px;letter-spacing:.03em;font-weight:600}
.vs-item p{margin:2px 0 0;font-size:13px;color:var(--muted);line-height:1.7}
@media(max-width:640px){.vs{grid-template-columns:1fr;gap:14px}}
.ic{width:30px;height:30px;color:var(--accent);display:block;margin-bottom:16px}
.card .n{display:inline-block;font-family:var(--font-mono);font-size:11px;
         color:var(--accent);letter-spacing:.14em;margin-bottom:12px}

/* ── 場面 ────────────────────────────────────────────────────
 * ★ 「.xlsx はマクロを格納できない」は仕様の話で、読み手の話になっていない。
 *   自分の状況だと気づく手掛かりが先に要る。
 * ★ 作り話の事例にはしない ── ここに出てくる見積書は、一番上の図と同じ文書で、
 *   金額は実際に basrun が入れた値。
 * ─────────────────────────────────────────────────────────── */
.scene{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);
  padding:28px 30px;margin:0 0 34px;max-width:70ch}
.scene .q{margin:0 0 18px;font-size:17px;font-weight:700;line-height:1.75;
  letter-spacing:.03em}
.scene ul{margin:0;padding-left:20px;color:var(--muted);font-size:14px}
.scene li{margin-bottom:7px}
.scene li:last-child{margin-bottom:0}
.scene b{color:var(--fg-2)}

/* ── 反復する形: セルの角 ────────────────────────────────────
 * ★ 節ごとに扱いが違うと「作り込んだ」ではなく「散らかった」に見える
 *   (HTML5 UP の 6 枚はどれも 1 つの形を最後まで繰り返していた)。
 * ★ 借りてきた「円形の切り抜き」は合わない ── こちらの図版は全部
 *   四角い文書だから。**主題から取る = 表計算で選択したセルの角。**
 *   面が変わっても、同じ大きさ・同じ位置・同じ色で必ず出る。
 * ─────────────────────────────────────────────────────────── */
.card,.scene,.mat,.limits,.tf,.profile,pre{position:relative}
.card::before,.scene::before,.mat::before,.limits::before,.tf::before,
.profile::before,pre::before{
  content:"";position:absolute;left:6px;top:6px;width:11px;height:11px;
  border-left:1.5px solid var(--accent);border-top:1.5px solid var(--accent);
  opacity:.6;pointer-events:none}
.tf::before,pre::before{border-color:#a99bff;opacity:.6}
/* ★ ヒーローの図の中のコードは、外側の図が既にしるしを持っている。二重にしない */
.tf pre::before{display:none}

/* ── コード ──────────────────────────────────────────────────── */
pre{background:var(--fg);color:#dbe6f5;border-radius:var(--radius-lg);
    padding:22px 24px;overflow-x:auto;font-family:var(--font-mono);
    font-size:13px;line-height:1.85;margin:0;box-shadow:var(--shadow-lift);
    /* ★ コードは文節でなく「長いトークンで折る」。auto-phrase を継がせない。 */
    word-break:normal}
/* ★ コメントは文章なので文節で折る（コードのトークンは pre の normal のまま）。 */
pre .c{color:#7d93b2;word-break:auto-phrase}
/* ★ 実測 (2026-08-19 playwright 320px): 本文の <code>~/.claude/projects/... が 314px の
   一本トークンで折れず、22px はみ出してページ全体が横にズレた。インライン code は
   「必要なときだけどこでも折る」。pre 内は span 方式で code タグを使わないため影響しない。 */
code{overflow-wrap:anywhere}
pre .k{color:#a99bff}

/* ── 実物の載せ方: 台紙 ──────────────────────────────────────
 * ★ 地に方眼を敷いたら、白い紙をそのまま置いた 3 枚だけが浮かなくなった
 *   (額縁が無いので、地と同じ「白い面」に見える)。台紙に載せて影を落とす。
 *   暗い面に載せる手もあるが、このページは既に暗い塊が 5 つあるので重くなる。
 * ─────────────────────────────────────────────────────────── */
.mat{margin:0;background:#fff;padding:18px;border-radius:var(--radius-lg);
  border:1px solid rgba(6,27,49,.08);line-height:0;
  box-shadow:0 26px 50px -20px rgba(6,27,49,.30),
             0 3px 8px -2px rgba(6,27,49,.08)}
.mat img{width:100%;display:block;border-radius:5px;border:1px solid var(--border)}

/* ── 全面帯: 描画した実物 ────────────────────────────────────── */
.band{max-width:var(--w);margin:0 auto;padding:0 28px;line-height:0}
.cap{font-size:12px;color:var(--muted);text-align:center;padding:14px 28px 0;
     letter-spacing:.04em}

/* ── 図解 ────────────────────────────────────────────────────
 * ★ 実物の描画が 4 枚あるが、全部「ページの絵」で種類が同じだった。
 *   仕組みは線で見せるほうが早い。色は本文のトークンをそのまま使うので
 *   配色は増えない。矢印の頭は CSS 側で塗る (marker は色を継承しない)。
 * ★ 縮めると文字が読めなくなるので、狭い画面には縦組みの別図を出す。
 *   同じ図を横スクロールさせるのは、読ませていないのと同じ。
 * ─────────────────────────────────────────────────────────── */
.flow{margin:0 0 44px}
.flow svg{width:100%;height:auto;display:block;font-family:var(--font-body)}
.flow .box{fill:var(--surface);stroke:var(--border);stroke-width:1}
.flow .box.tmp{stroke-dasharray:5 4}
.flow .t{fill:var(--fg);font-size:14px;font-weight:700;letter-spacing:.04em}
.flow .m{fill:var(--accent);font-size:12px;font-family:var(--font-mono)}
.flow .s{fill:var(--muted);font-size:11.5px}
.flow .ln{stroke:var(--muted);stroke-width:1.2;fill:none}
.flow .ln.acc{stroke:var(--accent);stroke-dasharray:4 4}
.flow .lb{fill:var(--fg-2);font-size:11.5px;letter-spacing:.06em}
.flow .lbm{fill:var(--accent);font-size:11px;font-family:var(--font-mono);
           letter-spacing:.08em}
.flow marker path{fill:var(--muted)}
.flow marker.acc path{fill:var(--accent)}
.flow--sp{display:none}

/* ── 二段組 ──────────────────────────────────────────────────── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}

/* ── 開発者ページ: 物語 + 素性の一覧 ─────────────────────────────
 * ★ about は図が無いぶん本文が左に寄り、1120px の器の右が大きく空く
 *   (Namakoo 指摘)。右に「素性の一覧」を置いて埋める ── 飾りではなく、
 *   採用担当・顧客が拾い読みするための硬い事実 (道具・資格・実物)。
 *   本文は読むため、右は拾うため。値と見た目を分けたのと同じ二本立て。
 * ─────────────────────────────────────────────────────────── */
.about{display:grid;grid-template-columns:1.55fr 1fr;gap:52px;align-items:start}
/* ★ 本文は左揃え + text-wrap:balance。両端揃え(justify)は日本語だと短い行を
   一律に引き伸ばして字間が間延びし不自然さが際立った（Namakoo 判断 2026-08-10、
   実機で justify を却下）。balance は行長を均して右端のギザギザを緩めつつ、
   字間は自然なまま（引き伸ばさない）。auto-phrase（body 継承）で語も割れない。
   非対応ブラウザ（古い Safari 等）は素の左揃えに劣化＝progressive enhancement。 */
.about-body .lead{max-width:60ch;text-wrap:balance}
/* 長い本文の間ずっと空白を作らないよう、札はスクロールに追従させる。 */
.profile{position:sticky;top:88px;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);padding:26px 26px 24px}
.profile h3{margin:0 0 6px;font-size:11.5px;letter-spacing:.2em;
  color:var(--muted);font-family:var(--font-mono);font-weight:600}
.profile .grp{margin-top:22px}
.profile .grp .k{margin:0 0 9px;font-size:11px;letter-spacing:.1em;
  color:var(--accent);font-family:var(--font-mono)}
.plist{margin:0;padding:0;list-style:none}
.plist li{font-size:13px;color:var(--fg-2);padding:7px 0;line-height:1.55;
  letter-spacing:.02em;border-top:1px solid var(--border)}
.plist li:first-child{border-top:none}
.plist li.sub{color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.chips li{border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:5px 11px;font-size:12.5px;color:var(--fg-2);letter-spacing:.02em}
.profile .plink{display:inline-flex;align-items:center;gap:8px;
  color:var(--accent);text-decoration:none;font-size:13.5px;font-weight:600}
.profile .plink:hover{color:var(--accent-hover)}
/* ★ 客観指標の図版（Findy スキル偏差値）。台紙に載せて本文の一部として置く。 */
.cred{margin:26px 0 0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:16px;box-shadow:var(--shadow-card)}
.cred img{width:100%;max-width:560px;display:block;border-radius:6px;
  border:1px solid var(--border)}
.cred figcaption{font-size:13px;color:var(--muted);margin-top:12px;letter-spacing:.02em}
.cred figcaption b{color:var(--fg-2)}

/* ── 対応表 ──────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--border)}
th{font-size:12px;letter-spacing:.14em;color:var(--muted);font-weight:600}
td code{font-family:var(--font-mono);font-size:12.5px;color:var(--accent)}

/* ── 限界の節: 誠実さを見せる場所なので目立たせる ─────────────── */
.limits{border:1px solid var(--border);border-left:3px solid var(--accent);
        border-radius:var(--radius-lg);padding:26px 28px;background:var(--surface)}
.limits h3{margin:0 0 14px;font-size:15px;letter-spacing:.06em}
.limits ul{margin:0;padding-left:20px;color:var(--muted);font-size:14px}
.limits li{margin-bottom:9px}

/* ── リンク: 細い罫線 + 丸い矢印 ─────────────────────────────── */
.link{display:flex;align-items:center;gap:16px;text-decoration:none;
      padding:18px 0;border-top:1px solid var(--border)}
.link b{font-size:15px;letter-spacing:.04em;flex:0 0 auto}
.link .note{font-size:13px;color:var(--muted)}
.link .rule{flex:1;height:1px;background:var(--border)}
.link .arrow{width:30px;height:30px;border-radius:50%;background:var(--accent);
             color:#fff;display:grid;place-items:center;font-size:13px;flex:0 0 30px}
.link:hover .arrow{background:var(--accent-hover)}

footer{background:var(--fg);color:#8fa3bd;padding:52px 0;font-size:12.5px}
footer .wrap{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
footer a{color:#c3d0e0}
/* ★ コピーライト。flex-basis:100% で独立した最終行にして左下に置く。控えめに。 */
footer .copy{flex-basis:100%;order:99;margin-top:6px;color:#5f7290;
  font-size:11.5px;letter-spacing:.04em}

@media(max-width:820px){
  /* ★ モバイルの左右余白。基底の 28px は 320px 端末で幅の 17.5% を食う（広いと実際に
     指摘された 2026-08-19）。18px に絞る。 */
  .wrap{padding:0 18px}
  /* ★ 実測 (320px): index.en の table が 2px はみ出してページを横に押していた。
     表はページでなく表の中だけを横スクロールさせる（定石）。 */
  table{display:block;overflow-x:auto}
  .hero h1 .w{display:none}
  .hero h1 .n{display:block}
  .grid{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  /* ★ about は縦に積む。本文が先、素性の札は下へ (追従は解除)。 */
  .about{grid-template-columns:1fr;gap:34px}
  .profile{position:static;top:auto}
  /* ★ 名前と説明が横で押し合って読めなくなった (描画して確認)。
     1 行目に名前と矢印、説明はその下へ落とす。罫線は幅が無いので出さない。 */
  /* ★ 3 列のままでは左のコードが潰れて読めない。縦に積んで矢印を回す。 */
  .tf{grid-template-columns:1fr;gap:22px;padding:24px}
  /* ★ 実測: 390px で 6px、320px で 76px はみ出していた。ヒーローが
     overflow:hidden なのでページ幅には出ず、**黙って切れる**。
     行を短く書き換えれば嘘になるので、折り返して字下げで続きを示す。 */
  .tf pre{white-space:pre-wrap;overflow-wrap:anywhere;
          padding-left:18px;text-indent:-18px}
  .tf-mid{padding:0}
  .tf-mid svg{height:26px;width:26px;margin:0 auto;transform:rotate(90deg)}
  .link{flex-wrap:wrap;gap:10px 14px;padding:16px 0}
  .link .rule{display:none}
  .link b{flex:1 1 auto}
  .link .note{flex:1 1 100%;order:3}
  /* ★ 電話でコードを横スクロールさせない。写して打つものなので折り返す。
     どこで折れたか分かるように、折り返し側だけ字下げする。 */
  /* ★ 長いコマンドがモバイルで折り返すとき、継続行をはっきり字下げする。
     14px（約 1 文字）では弱く、継続行が別のコマンド行に見えて「折り返しが
     崩れている」と読めた（実機で Namakoo が指摘）。2 文字ぶん下げて、
     「上の行の続き」だと一目で分かるようにする。 */
  pre{white-space:pre-wrap;overflow-wrap:anywhere;
      padding-left:44px;text-indent:-24px}
  .flow--pc{display:none} .flow--sp{display:block}
  /* ★ モバイルは nav 項目が多い(brand+相互リンク+開発者+CTA+言語=5要素)。英語は
     ラベルが長く(Developer/Get started)1行に収まらないので、2行に折り返す:
     brand を1行目に占有させ、リンク群を2行目へ。どのラベル幅でも破綻しない。
     ★ 各項目は内部で改行させない(pill が縦に潰れる事故を防ぐ)。余白は基底 .nav の
     0 44px 0 80px をモバイル向けに上書き(このブロックが後勝ちなので !important 不要)。 */
  .nav{flex-wrap:wrap;height:auto;gap:10px 14px;padding:10px 16px}
  .nav .brand{width:100%;margin-right:0}
  .nav a,.nav .lang{white-space:nowrap}
  .brand small{display:none}
  /* ★ モバイルではセクション内リンク(課題/仕組み等)は隠すが、次は残す:
     - .pg（basrun / ailine / 開発者）★ ページ間の相互リンク。全ページに [basrun ailine]
       の対があり、about もこの対でホーム(basrun)へ戻れる（旧: about ロゴが index リンク
       だったが、basrun 名の重複を嫌って brand は Namakoo に変更・非リンク span 化）。
     - .brand（各ページの識別子。index=basrun / ailine=ailine / about=Namakoo）は残す。 */
  .nav a:not(.cta):not(.pg):not(.brand):not(.lang){display:none}
  .sec{padding:64px 0}
  .hero{padding-top:64px}
}

/* ★ ページ全体のクリック波紋（cursor ripple）。ripple.js が押下位置(clientX/Y)に
   .click-ripple を1枚挿す。位置は固定(スクロールに追従しない)・クリックを邪魔しない。
   小さな円が広がって消える。色は accent。動きを抑えたい人には出さない。 */
.click-ripple{position:fixed;width:14px;height:14px;border-radius:50%;
  background:var(--accent);pointer-events:none;z-index:2147483647;
  transform:translate(-50%,-50%) scale(1);
  animation:click-ripple .6s ease-out forwards}
@keyframes click-ripple{
  from{transform:translate(-50%,-50%) scale(1);opacity:.35}
  to{transform:translate(-50%,-50%) scale(7);opacity:0}
}
@media (prefers-reduced-motion:reduce){.click-ripple{display:none}}