/* masao-media — 記事ページの型 (子テーマと見本記事が共有する唯一の CSS)
   正本: design-dna/tokens.json → tokens.css (生成物) / 正本画 bench/CANON-L1.png「白い玉座」(light テーマベース、まさおさんの確認 2026-10-07)
   材質: uiux-design-harness effects/uiux-effects.css (@1d3f064) の .fx-glass .fx-wet を --fx-* でまさお色に
   禁則 (design-dna/intake/brand-anti-vision.md): F1 金色なし / F2 純原色の赤なし /
     F3 虹 (spectrum) は床の caustic (写真素材) と 1px 以下の hairline だけ / F5 blur 単独のガラスなし / F6 Plex 以外の書体なし
   対象の markup: WordPress のブロック (wp-block-heading / wp-block-table / wp-block-quote / wp-block-code / wp-block-embed)
     と、ブロック変換前の生 HTML (h2 h3 p ul ol li a strong em code pre blockquote table) の両方 */

:root {
  --fx-hi: #e6f7ff;     /* 濡れた稜線: primary を白へ寄せた最明部 */
  --fx-mid: var(--color-pigment-3);
  --fx-deep: var(--color-pigment-4);
  --fx-plum: var(--color-pigment-2); /* 絵の具の混色 (canon-L1 の中間の段) */
  --fx-ink: var(--color-ink);
  --fx-light-from: 210deg;
  --spectrum: linear-gradient(90deg in oklab, var(--color-spectrum-1), var(--color-spectrum-2), var(--color-spectrum-3), var(--color-spectrum-4), var(--color-spectrum-5), var(--color-spectrum-6));
  --spectrum-v: linear-gradient(180deg in oklab, var(--color-spectrum-1), var(--color-spectrum-2), var(--color-spectrum-3), var(--color-spectrum-4), var(--color-spectrum-5), var(--color-spectrum-6));
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.2' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M10 5.6v5.4' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.1' r='1.05'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.2 10.4l3.1 3.1 6.5-6.9' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11.4M11 5.6l4.4 4.4-4.4 4.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.8v14.4a.8.8 0 0 0 1.2.7l11.3-7.2a.8.8 0 0 0 0-1.4L8.2 4.1A.8.8 0 0 0 7 4.8z'/%3E%3C/svg%3E");
  --icon-bang: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2.2v4.6' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='6' cy='9.6' r='1.05'/%3E%3C/svg%3E");
  --ease: cubic-bezier(.2, .7, .2, 1);
  --content: 720px;
  --toc: 260px;
  --nav-h: 64px;
}

/* ---------- 地 ---------- */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); }
body.masao {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--font-body-size);
  line-height: var(--font-body-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.masao a { color: var(--color-primary-deep); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.masao a:hover { text-decoration-thickness: 2px; }
.masao :focus-visible { outline: 2px solid var(--color-primary-deep); outline-offset: 3px; }

/* ---------- ナビ (白いギャラリーの上に浮く透明な帯。sticky は外側の header に付ける) ---------- */
.masao .skip-link { position: absolute; left: 16px; top: -72px; z-index: 30; padding: 10px 16px; border-radius: 10px; background: var(--color-surface); color: var(--color-text); font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 8px 24px -12px rgba(20,20,20,.4); transition: top 180ms var(--ease); }
.masao .skip-link:focus { top: 12px; }
.site-header { position: sticky; top: 0; z-index: 20; margin: 0; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--nav-h); padding: 0 clamp(20px, 4vw, 48px);
  background: color-mix(in oklab, var(--color-surface) 92%, transparent);   /* コードの黒い面が下を通っても、補足色のリンクが 4.5:1 を保つ濃さ */
  color: var(--color-text);
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--color-text) 7%, transparent), 0 10px 30px -28px rgba(20,20,20,.35);
}
/* F5: blur は実屈折 (url) の前段としてだけ出す。fx-refract.js が注入に成功した時だけ有効 */
html.fx-refract-on .nav {
  backdrop-filter: url(#fxRefract) blur(14px) saturate(1.4);
  -webkit-backdrop-filter: url(#fxRefract) blur(14px) saturate(1.4);
}
/* 題帯の上にいる間はナビの面を透かし、壁の光がナビの裏まで続く 1 つの部屋に見せる (正本画。2026-10-08 の審査 r5)。
   題帯を過ぎたら白い帯に戻る (コードの黒い面の上でも読める濃さ)。切り替えは masao.js が html.at-top で付ける */
.nav { transition: background-color 240ms var(--ease), box-shadow 240ms var(--ease); }
html.at-top .nav { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.masao .nav__brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
@media (max-width: 389px) { .nav__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }   /* 389px 以下ではボタンの文字を欠かさないため名前を隠す (読み上げには残す) */
/* ロゴの印は絵の具の写真の小さな円 (注意枠・元動画の時刻と同じ)。ライオンは著者欄で一度だけ (憲章 5 行目、2026-10-08 にナビから外した) */
.nav__mark { flex: none; width: 22px; height: 22px; border-radius: 50%; background: url("../img/ink.webp") 64% 50% / 700% auto no-repeat, var(--color-pigment-4); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px color-mix(in oklab, var(--color-primary-deep) 30%, transparent), 0 4px 10px -4px color-mix(in oklab, var(--color-pigment-4) 60%, transparent); }
.nav__links { display: flex; gap: 28px; font-size: 14px; }
.masao .nav__links a { color: var(--color-muted); text-decoration: none; white-space: nowrap; }
.masao .nav .btn { flex-shrink: 0; }
.masao .nav__links a:hover { color: var(--color-text); }

/* 研究部ボタン: ブランドの水色をガラスにして、中に水色の絵の具を溶かしたカプセル (題のガラス板と同じ材質の家族)。
   正本: uiux-design-harness reference/liquid-glass-pink-ink.md (L3 濡れた稜線 / L4 色は tint / L6 絵の具の物質感 / L7 濡れ光沢)。
   縁は線で描かない (光で作る)。絵の具は写真素材 ink-btn.webp を乗算で溶かす (材質を gradient で写さない)。
   文字は on-primary #060b12 (pigment-1〜3 の上で 7.5:1 以上)。2026-10-07 岡島さんが A/B/C から C を選択 */
.masao .btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px;
  border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: .03em; line-height: 1; text-decoration: none; white-space: nowrap;
  color: var(--color-on-primary);
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  background:
    linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.18) 34%, rgba(255,255,255,0) 48%),
    radial-gradient(80% 120% at 92% 125%, rgba(2,104,239,.32), transparent 60%),
    url("../img/ink-btn.webp") 100% 52% / cover no-repeat,
    linear-gradient(180deg in oklab, var(--color-pigment-1), var(--color-pigment-2) 58%, var(--color-pigment-3));
  background-blend-mode: screen, multiply, multiply, normal;
  box-shadow:
    inset 0 1px .5px #fff, inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(255,255,255,.45), inset 0 -12px 18px -12px rgba(2,89,201,.5),
    inset 12px 0 18px -14px rgba(255,255,255,.8),
    0 1px 2px rgba(2,89,201,.25), 0 10px 22px -12px rgba(2,104,239,.7), 0 24px 44px -26px rgba(0,178,255,.7);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background-position 900ms var(--ease);
}
/* 光源 (左上) 側のグリント: 濡れたガラスの鏡面の点 */
.masao .btn::before {
  content: ""; position: absolute; z-index: -1; left: 9%; top: 3px; width: 34%; height: 38%; border-radius: 999px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,0));
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
  opacity: .8;
}
/* 縁の光: 光源側から回り込む細い明るみ (線ではなく conic の光) */
.masao .btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from 210deg, #fff, rgba(255,255,255,.1) 22%, rgba(2,104,239,.45) 50%, rgba(255,255,255,.1) 78%, #fff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .85;
}
.masao .btn:hover {
  transform: translateY(-1px); text-decoration: none; background-position: 0 0, 0 0, 86% 40%, 0 0;
  box-shadow:
    inset 0 1px .5px #fff, inset 0 0 0 1px rgba(255,255,255,.7), inset 0 -1px 0 rgba(255,255,255,.55), inset 0 -12px 18px -12px rgba(2,89,201,.55),
    inset 12px 0 18px -14px rgba(255,255,255,.9),
    0 1px 2px rgba(2,89,201,.3), 0 14px 28px -12px rgba(2,104,239,.8), 0 30px 54px -28px rgba(0,178,255,.85);
}
.masao .btn:hover::before { opacity: 1; transform: translateX(6%); }
.masao .btn:active { transform: translateY(1px); box-shadow: inset 0 1px .5px rgba(255,255,255,.8), inset 0 0 0 1px rgba(255,255,255,.45), inset 0 -6px 12px -8px rgba(2,89,201,.6), 0 4px 10px -6px rgba(2,104,239,.7); }
.masao .btn--lg { min-height: 54px; padding: 0 30px; font-size: 16px; }

/* ---------- 舞台 = 白い無限背景 (題帯)。光の帯とガラスは hero-gl.js が描く。ここは描けない環境の静的版 ---------- */
.stage {
  position: relative; overflow: hidden; isolation: isolate;
  margin: calc(var(--nav-h) * -1) 0 0;
  --stage-pb: clamp(48px, 4.4vw, 64px);
  --plate-shift: 0px;   /* 広い画面で板を本文の段の真上に寄せる量 (下の @media) */
  padding: calc(var(--nav-h) + clamp(14px, 1.6vw, 22px)) clamp(20px, 4vw, 48px) var(--stage-pb);
  background: linear-gradient(180deg in oklab, var(--color-surface) 0%, var(--color-bg) 52%, var(--color-gallery) 100%);
  color: var(--color-text);
}
/* 本文へのつなぎ: 床の下端を地の色へ溶かす */
.stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--color-bg));
}

/* 床にこぼれる虹: 板の下辺に接する細い帯 (正本画の、磨いた床にこぼれた屈折光)。素材は実写の caustic を縦につぶして使う
   (assets-src/rekey_caustic.py。F3 の許可面。CSS の gradient で描かない)。板の面には描かない */
.floor-light {
  position: absolute; left: 50%; top: calc(100% - var(--stage-pb) + 1px); z-index: 0; pointer-events: none;
  width: min(600px, 62%); height: 24px; transform: translateX(calc(-50% + var(--plate-shift)));
  background: url("../img/caustic.webp") center top / 100% 100% no-repeat;
  opacity: .9;
}

/* 題のガラス板: 透明な器に水色の絵の具が溶けて沈む。絵の具は右へ寄せ、題の下は明るく保つ (読める) */
.plate {
  position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box;  /* WordPress のグループは border-box。見本も同じにする */
  /* 本文の段の真上に立ち、左右に --plate-pad だけはみ出す。横の余白も同じ値にして、板の中の文字の左端を本文の左端にそろえる */
  --plate-pad: clamp(24px, 3.2vw, 44px);
  max-width: calc(var(--col, var(--content)) + 2 * var(--plate-pad)); margin: 0 auto; translate: var(--plate-shift) 0;
  padding: clamp(18px, 1.8vw, 26px) var(--plate-pad);
  border-radius: 24px;
  background: linear-gradient(115deg in oklab,
    color-mix(in oklab, var(--color-pigment-1) 34%, transparent) 0%,
    color-mix(in oklab, var(--color-pigment-1) 44%, transparent) 55%,
    color-mix(in oklab, var(--color-pigment-2) 40%, transparent) 100%);
}
.plate::before { /* 絵の具 (写真素材を乗算で溶かす) */
  content: ""; position: absolute; inset: -12%; z-index: -1; pointer-events: none;
  background: url("../img/ink.webp") 80% 50% / cover no-repeat;
  mix-blend-mode: multiply; opacity: .92;
  -webkit-mask-image: linear-gradient(100deg, transparent 46%, rgba(0,0,0,.2) 70%, #000 94%);   /* 文字の右端より外から (副題の地 4.5:1。2026-10-08 の審査 r5) */
          mask-image: linear-gradient(100deg, transparent 46%, rgba(0,0,0,.2) 70%, #000 94%);
}
.plate.fx-glass { box-shadow:
  inset 0 1px 0 #fff,
  inset 0 0 0 1px color-mix(in oklab, #ffffff 55%, transparent),
  inset 0 -20px 44px -28px color-mix(in oklab, var(--color-pigment-4) 45%, transparent),
  inset 18px 0 40px -34px color-mix(in oklab, #ffffff 90%, transparent),
  0 2px 0 -1px color-mix(in oklab, var(--color-pigment-1) 80%, transparent),
  0 4px 4px -3px color-mix(in oklab, var(--color-ink) 22%, transparent); }
html.fx-refract-on .plate.fx-glass {
  backdrop-filter: url(#fxRefract) blur(10px) saturate(1.25);
  -webkit-backdrop-filter: url(#fxRefract) blur(10px) saturate(1.25);
}
.plate > * { position: relative; max-width: 30em; }

.eyebrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary-deep); }
.masao .eyebrow a { color: var(--color-primary-deep); text-decoration: none; }
.plate h1, .plate .wp-block-post-title {
  margin: 10px 0 0; color: var(--color-text);
  font-size: clamp(27px, 2.8vw, 40px); font-weight: var(--font-display-weight);
  line-height: var(--font-display-lh); letter-spacing: -.01em; text-wrap: balance; word-break: auto-phrase;
}
.plate .title-sub { display: block; margin-top: .3em; font-size: max(.5em, 16px); font-weight: 500; line-height: 1.55; letter-spacing: 0; color: color-mix(in oklab, var(--color-text) 80%, var(--color-muted)); }
/* 著者と日付の行: 本文の頭 (板には分類と題だけを載せる。正本画の細い板) */
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 0 0 28px; font-size: 13px; line-height: 1.6; color: var(--color-muted); }
.meta > * { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.meta img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.meta .meta-video:empty { display: none; }
.meta .meta-label { margin-right: .45em; }

/* ---------- 題帯の GPU 版: hero-gpu.js が描けた時だけ html.masao-gpu が付く (描けない環境は上の静的版のまま) ---------- */
.stage-gpu { position: absolute; inset: 0; z-index: -1; display: block; width: 100%; height: 100%; pointer-events: none; }
/* WordPress の段組みの CSS (流れの段組みの最初の子の上の余白を 0 にする規則) が、.stage と同じ強さで後から読まれて食い込みを消す。
   一段強くして、題帯を透かしたナビの裏から始める (見本と同じ。0.2.1 までは本番で板が 64px 下がっていた) */
.masao .stage { margin-block-start: calc(var(--nav-h) * -1); }
html.masao-gpu .stage { background: var(--color-gallery); }
html.masao-gpu .plate.fx-glass { background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
html.masao-gpu .plate::before, html.masao-gpu .plate.fx-wet::after { display: none; }

/* ---------- 本文の段 ---------- */
.layout {
  display: grid; grid-template-columns: minmax(0, var(--content)) var(--toc); gap: 56px;
  justify-content: center; padding: clamp(16px, 2.5vw, 32px) clamp(20px, 4vw, 48px) 120px;
}
.layout > .col { min-width: 0; grid-column: 1; grid-row: 1; }
.layout > .toc { grid-column: 2; grid-row: 1; }  /* 目次は DOM では本文の前 (狭い画面で見た目の順と Tab の順を揃える)。広い画面では右の列 */
:is(.article, .is-root-container) { counter-reset: masao-sec; line-break: strict; }
:is(.article, .is-root-container) > :first-child { margin-top: 0; }
:is(.article, .is-root-container) p { margin: 0 0 1.5em; text-wrap: pretty; }
/* 見出し: 上に 56px × 1px の青の細線と 2 桁の章番号 (虹は床・CTA・フッターの 3 か所だけにする)。
   「、」「：」「。」の後の答えの句は masao.js が .h2-tail に包む。答えのある見出しは、問い (主題) を小さい頭の行に、答えを大きい見出しにする
   (答えを先に読ませる。2026-10-08 の審査 r5 の認知負荷の席と赤の席。文字は変えない。目次には主題を出す) */
:is(.article, .is-root-container) { --h2: var(--font-h2-size); }
:is(.article, .is-root-container) h2 {
  counter-increment: masao-sec;
  margin: calc(var(--h2) * 2.6) 0 calc(var(--h2) * .9); padding-top: 28px;
  background: linear-gradient(var(--color-primary-deep) 0 0) left top / 56px 1px no-repeat;
  font-size: var(--h2); font-weight: var(--font-h2-weight); line-height: var(--font-h2-lh); letter-spacing: -.005em; text-wrap: balance; word-break: auto-phrase;
}
:is(.article, .is-root-container) h2:has(> .h2-tail) { font-size: 15.5px; font-weight: 500; line-height: 1.6; letter-spacing: .01em; color: color-mix(in oklab, var(--color-text) 72%, var(--color-muted)); }
:is(.article, .is-root-container) h2 > .h2-tail { display: block; margin-top: .2em; font-size: var(--h2); font-weight: var(--font-h2-weight); line-height: var(--font-h2-lh); letter-spacing: -.005em; color: var(--color-text); }
:is(.article, .is-root-container) h2.is-end { counter-increment: none; }
:is(.article, .is-root-container) h2.is-end::before { content: none; }
:is(.article, .is-root-container) h2::before { content: counter(masao-sec, decimal-leading-zero); display: block;
  }
:is(.article, .is-root-container) h2[data-total]::before { content: counter(masao-sec, decimal-leading-zero) " / " attr(data-total); margin-bottom: 6px; font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: .1em; color: var(--color-primary-deep); }
:is(.article, .is-root-container) h3 { position: relative; margin: 2.6em 0 .7em; padding-left: 18px; font-size: calc(var(--font-h3-size) + 1px); font-weight: 600; line-height: var(--font-h3-lh); text-wrap: balance; word-break: auto-phrase; }
/* h3 の左の印: 絵の具の色の小さな四角 (要点の印と同じ語彙)。用語集に見えないよう、上の余白を 2.6em に */
:is(.article, .is-root-container) h3::before { content: ""; position: absolute; left: 0; top: .52em; width: 8px; height: 8px; border-radius: 2px; background: var(--color-primary-deep); }
/* h3 の直後の段落は 1 行目を太く (用語の節で「一言でいうと」の読み方を作る。文字は変えない。N1 の 2 巡目) */
:is(.article, .is-root-container) h3 + p::first-line { font-weight: 600; }
/* 手順の項目の頭 (masao.js の .step-head): 太く 1 行、説明はその下に一回り小さく */
:is(.article, .is-root-container) .is-style-steps > li .step-head { display: block; font-weight: 600; font-size: 1.02em; margin-bottom: 2px; }
:is(.article, .is-root-container) .is-style-steps > li:has(> .step-head) { font-size: 15.5px; line-height: 1.75; }
:is(.article, .is-root-container) ul, :is(.article, .is-root-container) ol { margin: 0 0 1.6em; padding-left: 1.4em; }
:is(.article, .is-root-container) li { margin: .7em 0; padding-left: .2em; text-wrap: pretty; }
:is(.article, .is-root-container) li::marker { color: var(--color-primary-deep); font-family: var(--font-mono); font-size: .9em; }
/* 番号つきの箇条も、見出し・手順と同じ等幅の 2 桁 (01) にそろえる */
@counter-style masao-2d { system: extends decimal-leading-zero; suffix: "  "; }
:is(.article, .is-root-container) ol:not(.is-style-steps) { list-style-type: masao-2d; padding-left: 2.1em; }
:is(.article, .is-root-container) strong { font-weight: 600; }
:is(.article, .is-root-container) :not(pre) > code { font-family: var(--font-mono); font-size: .86em; padding: .12em .4em; border-radius: 6px; background: var(--color-neutral-2); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:is(.article, .is-root-container) pre, :is(.article, .is-root-container) .wp-block-code {
  margin: 0 0 1.8em; padding: 22px 24px; overflow-x: auto; border: 0; border-radius: 12px;
  background: var(--color-ink); color: var(--color-on-ink);
  font-family: var(--font-mono); font-size: 15px; line-height: 1.7; white-space: pre; overflow-wrap: normal;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 40px -26px rgba(6,11,18,.6);
}
:is(.article, .is-root-container) pre code { padding: 0; background: none; font: inherit; color: inherit; }
/* 折り返した続きは 2 字下げる (masao.js が行ごとに .line で包む) */
:is(.article, .is-root-container) pre .line { display: block; min-height: 1lh; }

/* 表: 不透明な白い面。頭は地の色で一段沈める (正本画の頭 #efefed ≒ bg) */
:is(.article, .is-root-container) .wp-block-table, :is(.article, .is-root-container) .table-wrap {
  margin: 0 0 1.9em; overflow-x: auto; border-radius: 12px; background: var(--color-surface);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 0 0 1px var(--color-neutral-2), 0 12px 32px -24px rgba(6,11,18,.45);
}
:is(.article, .is-root-container) table { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: 15px; line-height: 1.75; }
:is(.article, .is-root-container) > table { display: block; overflow-x: auto; margin: 0 0 1.9em; border-radius: 12px; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-neutral-2); }
:is(.article, .is-root-container) thead { border: 0; }
:is(.article, .is-root-container) th {
  text-align: left; font-weight: 600; padding: 14px 18px; white-space: nowrap; border: 0;
  background: var(--color-bg);
}
:is(.article, .is-root-container) td { padding: 14px 18px; vertical-align: top; border: 0; border-top: 1px solid var(--color-neutral-2); word-break: auto-phrase; text-wrap: pretty; }
:is(.article, .is-root-container) tbody tr:hover td { background: color-mix(in oklab, var(--color-primary) 4%, transparent); }
:is(.article, .is-root-container) .wp-block-table figcaption { padding: 10px 18px 14px; font-size: 13px; color: var(--color-muted); }

/* 引用 (動画で話した言葉など): 箱にしない。左に青の縦線と一段大きい字 */
:is(.article, .is-root-container) blockquote, :is(.article, .is-root-container) .wp-block-quote {
  margin: 0 0 1.9em; padding: 2px 0 2px 24px; border: 0; border-radius: 0;
  font-size: 1.08em; font-style: normal; font-weight: 500; line-height: 1.85;
  background: linear-gradient(var(--color-primary) 0 0) left top / 2px 100% no-repeat;
}
:is(.article, .is-root-container) blockquote p:last-child { margin-bottom: 0; }
:is(.article, .is-root-container) blockquote cite { display: block; margin-top: 8px; font-size: 13px; font-style: normal; font-weight: 400; color: var(--color-muted); }
/* 注意・ヒント (is-style-warning / is-style-note): 平らな淡い水色の面と 1px の水色の縁、上縁に細い光 (正本画。絵の具は CSS で写さない)。注意だけ平らな線の印 */
:is(.article, .is-root-container) :is(.is-style-note, .is-style-warning) {
  position: relative; padding: 22px 26px; border-radius: 14px;
  font-size: 16.5px; font-weight: 400; line-height: 1.9;
  background: var(--color-neutral-4);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px color-mix(in oklab, var(--color-primary) 22%, transparent), 0 14px 34px -26px color-mix(in oklab, var(--color-primary-deep) 70%, transparent);
}
:is(.article, .is-root-container) :is(.is-style-note, .is-style-warning) { padding-left: 60px; }
/* ヒントは紙の面と細い線にして、注意 (淡い水色の面と濃い縁) と同じ箱に見せない (2026-10-08 の審査 r5)。頭の語は太字の札 (masao.js) */
:is(.article, .is-root-container) .is-style-note { background: var(--color-surface); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--color-neutral-2), 0 14px 34px -28px rgba(6,11,18,.3); }
:is(.article, .is-root-container) :is(.is-style-note, .is-style-warning) .callout-label { font-weight: 700; }
:is(.article, .is-root-container) .is-style-warning .callout-label { color: var(--color-primary-deep); }
:is(.article, .is-root-container) :is(.is-style-note, .is-style-warning)::before {
  content: ""; position: absolute; left: 24px; top: calc(22px + .95em - 10px); width: 20px; height: 20px; border-radius: 50%;
  background: url("../img/ink-btn.webp") 58% 46% / 640% auto no-repeat, var(--color-pigment-1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 0 0 1px color-mix(in oklab, var(--color-primary) 30%, transparent), 0 4px 10px -4px color-mix(in oklab, var(--color-pigment-4) 55%, transparent);
}
:is(.article, .is-root-container) .is-style-warning::before { background: var(--color-pigment-4); }   /* 白い「!」と 3:1 以上 (写真の濃淡では届かない。2026-10-08 の審査 r5) */
:is(.article, .is-root-container) .is-style-warning { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px color-mix(in oklab, var(--color-primary-deep) 40%, transparent), 0 14px 34px -26px color-mix(in oklab, var(--color-primary-deep) 70%, transparent); }
:is(.article, .is-root-container) .is-style-warning::after {
  content: ""; position: absolute; left: 24px; top: calc(22px + .95em - 10px); width: 20px; height: 20px;
  background: #fff; -webkit-mask: var(--icon-bang) center / 15px 15px no-repeat; mask: var(--icon-bang) center / 15px 15px no-repeat;
}

/* 吹き出し (is-style-speech、2026-10-08): 本人の一言。SEO の上位記事のブログ風の型 (raid/2026-10-08-seo-format-clone の anchor A-1 = LANY)。
   左にアイコンと名前、右に紙の面の箱と小さな尻尾。本文は左寄せ。中央寄せのカードは使わない (本人 10/8 10:04)。
   1 段落目は言い切り、2 段落目 (speech__sub) は直前・直後の具体の 1 行 (N1 の r6: 言い切りだけだと標語)。cite は名前と出典 */
:is(.article, .is-root-container) blockquote.is-style-speech {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: start;
  margin: 0 0 1.9em; padding: 0; border: 0; border-radius: 0; background: none;
  font-size: 16.5px; font-weight: 500; line-height: 1.85;
}
:is(.article, .is-root-container) blockquote.is-style-speech::before {
  content: ""; grid-row: 1 / span 3; width: 56px; height: 56px; border-radius: 50%;
  background: url("../img/masao-avatar.webp") center / cover no-repeat;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px color-mix(in oklab, var(--color-primary) 35%, transparent);
}
:is(.article, .is-root-container) blockquote.is-style-speech > p {
  grid-column: 2; position: relative; margin: 0; padding: 14px 18px; text-align: left;
  background: var(--color-surface); border-radius: 14px;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--color-neutral-2), 0 10px 28px -24px rgba(6,11,18,.35);
}
:is(.article, .is-root-container) blockquote.is-style-speech > p:first-of-type::before,
:is(.article, .is-root-container) blockquote.is-style-speech > p:first-of-type::after {
  content: ""; position: absolute; top: 20px; width: 12px; height: 16px; clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
:is(.article, .is-root-container) blockquote.is-style-speech > p:first-of-type::before { left: -12px; background: var(--color-neutral-2); }
:is(.article, .is-root-container) blockquote.is-style-speech > p:first-of-type::after { left: -10.5px; background: var(--color-surface); }
:is(.article, .is-root-container) blockquote.is-style-speech > p + p { margin-top: 8px; }
:is(.article, .is-root-container) blockquote.is-style-speech > p.speech__sub { font-size: 14.5px; font-weight: 400; color: var(--color-muted); background: none; box-shadow: none; padding: 0 4px; }
:is(.article, .is-root-container) blockquote.is-style-speech > cite {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12.5px; font-style: normal; font-weight: 500; color: var(--color-muted);
}
:is(.article, .is-root-container) blockquote.is-style-speech > cite .speech__who { width: 56px; text-align: center; }
:is(.article, .is-root-container) blockquote.is-style-speech > cite .speech__src a { color: var(--color-primary-deep); }

/* 元動画の時刻 (is-style-timestamp): 字幕の時刻が合った章の h2 の直後に、変換器が置く (components/handoff/chapters.ts)。
   印は注意枠と同じ濃い絵の具の写真の円に白い再生の印。字は等幅の青 */
:is(.article, .is-root-container) p.is-style-timestamp { margin: -.35em 0 1.6em; font-family: var(--font-mono), var(--font-primary); font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: .03em; }
:is(.article, .is-root-container) p.is-style-timestamp a { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 28px; color: var(--color-primary-deep); text-decoration: none; }
:is(.article, .is-root-container) p.is-style-timestamp a:hover { text-decoration: underline; text-underline-offset: 3px; }
:is(.article, .is-root-container) p.is-style-timestamp a::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: url("../img/ink.webp") 64% 50% / 700% auto no-repeat, var(--color-pigment-4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px color-mix(in oklab, var(--color-primary-deep) 30%, transparent), 0 4px 10px -4px color-mix(in oklab, var(--color-pigment-4) 60%, transparent);
}
:is(.article, .is-root-container) p.is-style-timestamp a::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 22px; height: 22px; margin-top: -11px;
  background: #fff; -webkit-mask: var(--icon-play) 58% 50% / 10px 10px no-repeat; mask: var(--icon-play) 58% 50% / 10px 10px no-repeat;
}

/* 埋め込み (YouTube): ブロックの figure と、生 HTML の oEmbed iframe */
:is(.article, .is-root-container) .wp-block-embed { margin: 0 0 1.9em; }
/* YouTube の顔 (functions.php の render_block_core/embed): 元動画のサムネイルとガラスの再生ボタン。押すと masao.js が再生画面に替える */
:is(.article, .is-root-container) .masao-yt { margin: 0 0 2em; }
.masao-yt__link { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--color-gallery); box-shadow: 0 0 0 1px var(--color-neutral-2), 0 24px 48px -30px rgba(6,11,18,.5); }
.masao-yt__link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.masao-yt__link:hover img { transform: scale(1.02); }
/* ガラスの再生の印 (YouTube の顔と、本文の「元の動画」の画像で共通) */
.masao-yt__play, :is(.article, .is-root-container) .wp-block-image.is-style-video a::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 1; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  background: url("../img/ink-btn.webp") 50% 50% / 400% auto no-repeat, var(--color-pigment-2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 0 0 1px rgba(255,255,255,.35), 0 14px 30px -12px color-mix(in oklab, var(--color-pigment-4) 75%, transparent);
  transition: transform 220ms var(--ease); }
.masao-yt__play::after, :is(.article, .is-root-container) .wp-block-image.is-style-video a::after {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 2; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  background: #fff; -webkit-mask: var(--icon-play) 56% 50% / 26px 26px no-repeat; mask: var(--icon-play) 56% 50% / 26px 26px no-repeat; transition: transform 220ms var(--ease); }
.masao-yt__play::after { left: 0; top: 0; margin: 0; }
.masao-yt__link:hover .masao-yt__play, :is(.article, .is-root-container) .wp-block-image.is-style-video a:hover::before, :is(.article, .is-root-container) .wp-block-image.is-style-video a:hover::after { transform: scale(1.06); }
/* 本文の「元の動画」(is-style-video): 元動画のサムネイルを 16:9 で (4:3 の上下の黒帯は cover で切る)、元動画へのリンク。添え書きは本人の動画の題と公開日 */
:is(.article, .is-root-container) .wp-block-image.is-style-video a { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--color-gallery); box-shadow: 0 0 0 1px var(--color-neutral-2), 0 24px 48px -30px rgba(6,11,18,.5); }
:is(.article, .is-root-container) .wp-block-image.is-style-video img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; }
:is(.article, .is-root-container) .wp-block-image figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.7; color: var(--color-muted); text-align: left; }
/* 冒頭の元動画は、本文幅の絵でなく出典の組み: 左にサムネイル (青焼きの 2 色。触れると元の色)、右に動画の題と公開日。
   本人のサムネイルの原色と極太の文字が、本文の静けさとぶつかるため (2026-10-08 の審査 r5)。2 色のフィルタ #masao-cyanotype は functions.php が出す */
:is(.article, .is-root-container) .wp-block-image.is-style-video { --play: 52px; display: grid; grid-template-columns: minmax(112px, 40%) minmax(0, 1fr); column-gap: 22px; align-items: center; margin: 0 0 2.2em; }
:is(.article, .is-root-container) .wp-block-image.is-style-video a { border-radius: 12px; box-shadow: 0 0 0 1px var(--color-neutral-2), 0 18px 36px -26px rgba(6,11,18,.45); }
:is(.article, .is-root-container) .wp-block-image.is-style-video img, .masao-yt__link img { filter: url(#masao-cyanotype); transition: filter 400ms var(--ease), transform 400ms var(--ease); }
:is(.article, .is-root-container) .wp-block-image.is-style-video a:is(:hover, :focus-visible) img, .masao-yt__link:is(:hover, :focus-visible) img { filter: none; }
:is(.article, .is-root-container) .wp-block-image.is-style-video a::before, :is(.article, .is-root-container) .wp-block-image.is-style-video a::after { width: var(--play); height: var(--play); margin: calc(var(--play) / -2) 0 0 calc(var(--play) / -2); }
:is(.article, .is-root-container) .wp-block-image.is-style-video a::after { -webkit-mask-size: calc(var(--play) * .34); mask-size: calc(var(--play) * .34); }
:is(.article, .is-root-container) .wp-block-image.is-style-video figcaption { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.7; color: var(--color-text); word-break: auto-phrase; line-break: strict; overflow-wrap: anywhere; text-wrap: pretty; }
:is(.article, .is-root-container) .wp-block-image.is-style-video .video-date { display: none; }   /* 公開日は著者の行の「動画版 YYYY.MM.DD」の 1 か所に (日付が 3 回並んでいた。r5 の赤の席) */
@media (max-width: 600px) {
  :is(.article, .is-root-container) .wp-block-image.is-style-video { --play: 34px; column-gap: 14px; }
  :is(.article, .is-root-container) .wp-block-image.is-style-video figcaption { font-size: 13.5px; line-height: 1.6; }
}
/* 末尾の同じ動画は、リンク一覧の 1 行に畳む (functions.php の render_block_core/embed)。次の一覧と線が二重にならないように */
:is(.article, .is-root-container) .masao-yt-row { margin-bottom: 0; }
:is(.article, .is-root-container) .masao-yt-row + .is-style-links { border-top: 0; }
/* 「用語：説明」の箇条は、用語の行と説明の行に分ける (masao.js が .is-term を付け、コロンを見た目だけ隠す。チャット AI の要約の型に見えていた) */
:is(.article, .is-root-container) li.is-term > strong:first-child { display: block; margin-bottom: .1em; }
/* コードのコピーのボタン (masao.js が付ける) */
.masao .code-wrap { position: relative; }
.masao .code-copy { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 5px 10px; border: 0; border-radius: 8px; font: 500 12px/1.4 var(--font-mono), var(--font-primary); color: var(--color-on-ink); background: color-mix(in oklab, var(--color-on-ink) 14%, transparent); cursor: pointer; }
.masao .code-copy:hover { background: color-mix(in oklab, var(--color-on-ink) 24%, transparent); }
/* 和文と欧文の間のアキは、手打ちの空白の有無にかかわらず CSS でそろえる (対応しないブラウザでは何も起きない) */
.masao { text-autospace: normal; }
/* 見た目では隠し、コピーと読み上げには残す */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.masao-yt figcaption { margin-top: 10px; font-size: 13.5px; line-height: 1.7; color: var(--color-muted); }
:is(.article, .is-root-container) .masao-yt iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; }
/* 読み込み前の面は、読み込み後のプレーヤーと同じ墨 (地とほぼ同じ gallery だと空いた枠に見える) */
:is(.article, .is-root-container) .wp-block-embed__wrapper, :is(.article, .is-root-container) iframe { border-radius: 14px; overflow: hidden; background: var(--color-ink); }
:is(.article, .is-root-container) iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; box-shadow: 0 24px 48px -30px rgba(6,11,18,.6); }

/* 本文の画像 (記事ごとのキービジュアル。変換器が冒頭の答えの直後に置く) */
:is(.article, .is-root-container) .wp-block-image { margin: 0 0 2em; }
:is(.article, .is-root-container) .wp-block-image img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 0 0 1px var(--color-neutral-2), 0 24px 48px -30px rgba(6,11,18,.45); }

/* 図 (components/handoff/figures が 540px で組んだ 2 倍の PNG。節の図・画面の注記・グラレコ)。表と同じ紙の面に載せ、添え書き (出典) を面の下の帯に置く。
   画像は 540px より広げない (字の大きさを図の中で決めているため。広げると字だけが大きくなる)。スマホでは段の幅に縮み、一番小さい字で 14px 相当 */
:is(.article, .is-root-container) .wp-block-image:is(.is-style-diagram, .is-style-annotated, .is-style-grareco) {
  margin: .4em 0 2.2em; border-radius: 14px; overflow: hidden; background: var(--color-surface);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 0 0 1px var(--color-neutral-2), 0 12px 32px -24px rgba(6,11,18,.45);
}
:is(.article, .is-root-container) .wp-block-image:is(.is-style-diagram, .is-style-annotated, .is-style-grareco) img { width: 100%; max-width: 540px; margin: 0 auto; border-radius: 0; box-shadow: none; }
:is(.article, .is-root-container) .wp-block-image.is-style-annotated { padding: 18px 18px 0; }
:is(.article, .is-root-container) .wp-block-image.is-style-annotated img { border-radius: 8px; box-shadow: 0 0 0 1px var(--color-neutral-2); }
:is(.article, .is-root-container) .wp-block-image:is(.is-style-diagram, .is-style-annotated, .is-style-grareco) figcaption { margin: 0; padding: 10px 18px 12px; font-size: 13px; }
:is(.article, .is-root-container) .wp-block-image:is(.is-style-diagram, .is-style-annotated, .is-style-grareco) figcaption a { color: inherit; text-underline-offset: .2em; }
@media (max-width: 600px) { :is(.article, .is-root-container) .wp-block-image.is-style-annotated { padding: 10px 10px 0; } }
/* 元動画の切り抜き (core/video + clip): 図と同じ紙の面。音を消して自動で回し (スマホの自動再生の条件)、押すと音が出る。添え書きは出典 */
:is(.article, .is-root-container) .wp-block-video.is-style-clip { margin: .4em 0 2.2em; border-radius: 14px; overflow: hidden; background: var(--color-surface); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 0 0 1px var(--color-neutral-2), 0 12px 32px -24px rgba(6,11,18,.45); }
:is(.article, .is-root-container) .wp-block-video.is-style-clip video { display: block; width: 100%; max-width: 540px; margin: 0 auto; background: var(--color-ink); }
:is(.article, .is-root-container) .wp-block-video.is-style-clip figcaption { margin: 0; padding: 10px 18px 12px; font-size: 13px; color: var(--color-muted); text-align: left; }
:is(.article, .is-root-container) .wp-block-video.is-style-clip figcaption a { color: inherit; text-underline-offset: .2em; }
@media (prefers-reduced-motion: reduce) { :is(.article, .is-root-container) .wp-block-video.is-style-clip video { /* 自動再生は masao.js が止める */ } }

/* ---------- 記事の部品 (components/v0.md)。is-style-* は変換器が付け、編集画面の「スタイル」でも切り替えられる ---------- */
/* 冒頭の答え: 本文の最初の段落 (書き手の決まりで 1 文目が検索の問いへの答え)。箱にしない */
:is(.article, .is-root-container) > p:first-child { font-size: 1.16em; line-height: 1.85; margin-bottom: 1.7em; }
/* 手順: 等幅の 2 桁の番号を縦の細線でつなぐ (番号の行の高さ = 本文の 1 行。編集画面は項目の文字を別の箱に包むので、ぶら下げでなく絶対位置で置く。線は番号の下から次の番号の上まで) */
:is(.article, .is-root-container) .is-style-steps { list-style: none; padding-left: 0; counter-reset: masao-step; }
:is(.article, .is-root-container) .is-style-steps > li { counter-increment: masao-step; position: relative; margin: 0; padding: 0 0 1.1em 52px; }
:is(.article, .is-root-container) .is-style-steps > li::before {
  content: counter(masao-step, decimal-leading-zero); position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: .72em; line-height: calc(var(--font-body-lh) / .72); font-weight: 500; letter-spacing: .08em; color: var(--color-primary-deep);
}
:is(.article, .is-root-container) .is-style-steps > li:not(:last-child)::after {
  content: ""; position: absolute; left: 8px; top: calc(var(--font-body-lh) * .5em + 12px); bottom: calc(12px - var(--font-body-lh) * .5em); width: 1px;
  background: color-mix(in oklab, var(--color-primary) 32%, transparent);
}
/* チェックリスト: 角丸の枠と平らな線のチェック */
:is(.article, .is-root-container) .is-style-checklist { list-style: none; padding-left: 0; }
:is(.article, .is-root-container) .is-style-checklist > li { position: relative; padding-left: 34px; }
:is(.article, .is-root-container) .is-style-checklist > li::before,
:is(.article, .is-root-container) .is-style-checklist > li::after { content: ""; position: absolute; left: 0; top: calc(var(--font-body-lh) * .5em - 10px); width: 20px; height: 20px; }
:is(.article, .is-root-container) .is-style-checklist > li::before { border-radius: 6px; background: var(--color-surface); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-primary) 45%, transparent); }
:is(.article, .is-root-container) .is-style-checklist > li::after { background: var(--color-primary-deep); -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat; }
/* 要点: 絵の具の色の小さな四角 (CTA の四角と同じ色。10px では写真の肌理が見えないので平らな色) */
:is(.article, .is-root-container) .is-style-key-points { list-style: none; padding: 18px 24px; border-radius: 14px; background: var(--color-neutral-4); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px color-mix(in oklab, var(--color-primary) 22%, transparent); }
:is(.article, .is-root-container) .is-style-key-points > li { position: relative; padding-left: 28px; font-weight: 500; }
:is(.article, .is-root-container) .is-style-key-points > li::before {
  content: ""; position: absolute; left: 2px; top: calc(var(--font-body-lh) * .5em - 4px); width: 8px; height: 8px; border-radius: 2px;
  background: var(--color-pigment-3);
}
/* リンク一覧 (項目がリンク 1 つだけの箇条): 細線で区切った行。行全体を押せる */
:is(.article, .is-root-container) .is-style-links { list-style: none; padding-left: 0; border-top: 1px solid var(--color-neutral-2); }
:is(.article, .is-root-container) .is-style-links > li { margin: 0; padding: 0; border-bottom: 1px solid var(--color-neutral-2); }
:is(.article, .is-root-container) .is-style-links a { position: relative; display: block; padding: 15px 36px 15px 6px; color: var(--color-text); font-size: .95em; font-weight: 500; line-height: 1.75; text-decoration: none; overflow-wrap: anywhere; }
:is(.article, .is-root-container) .is-style-links a::after { content: ""; position: absolute; right: 6px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--color-primary-deep); -webkit-mask: var(--icon-arrow) center / contain no-repeat; mask: var(--icon-arrow) center / contain no-repeat; transition: transform 180ms var(--ease); }
:is(.article, .is-root-container) .is-style-links a:hover { color: var(--color-primary-deep); }
:is(.article, .is-root-container) .is-style-links a:hover::after { transform: translateX(3px); }
/* 僕の結論 (締めの段落): 一段大きい字と、頭の行の左に絵の具の写真の小さな円 (見出しの青の細線と形を分ける。2026-10-08 の審査 r5)。
   箱にもアイコンの吹き出しにもしない (ライオンは著者欄で一度だけ) */
:is(.article, .is-root-container) .is-style-conclusion {
  position: relative; margin: 2.4em 0 1.6em; padding-left: 30px; font-size: 1.1em; font-weight: 500; line-height: 1.85;
}
:is(.article, .is-root-container) .is-style-conclusion::before {
  content: ""; position: absolute; left: 2px; top: calc(1.85em / 2 - 7px); width: 14px; height: 14px; border-radius: 50%;
  background: url("../img/ink.webp") 64% 50% / 700% auto no-repeat, var(--color-pigment-4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 0 1px color-mix(in oklab, var(--color-primary-deep) 30%, transparent), 0 3px 8px -3px color-mix(in oklab, var(--color-pigment-4) 60%, transparent);
}

/* ---------- 目次 (sticky。白い紙の面 = role surface。正本画どおり水色を溶かさない) ---------- */
.toc { position: sticky; top: calc(var(--nav-h) + 32px); align-self: start; }
.toc__panel { padding: 22px 20px; border-radius: 16px;
  background: var(--color-surface);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--color-neutral-2), 0 20px 44px -30px rgba(6,11,18,.45); }
.toc__title { margin: 0 0 12px; font-family: var(--font-mono), var(--font-primary); font-size: 12.5px; letter-spacing: .2em; color: var(--color-muted); text-transform: uppercase; list-style: none; cursor: default; }
.toc__title::-webkit-details-marker { display: none; }
.toc ol { position: relative; list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc ol::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 1px; background: var(--color-neutral-3); }
.toc li { counter-increment: toc; margin: 0; }
.masao .toc a { position: relative; display: block; padding: 7px 10px 7px 32px; border-radius: 8px; font-size: 13.5px; line-height: 1.6; color: var(--color-muted); text-decoration: none; transition: background 180ms var(--ease), color 180ms var(--ease); }
.toc a > span { word-break: auto-phrase; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* 文節改行の代替 (Safari・Firefox): masao.js が <wbr> を入れた要素だけ。字間の改行を止め、入り切らない文節だけ折る */
.masao .is-phrase { word-break: keep-all; overflow-wrap: break-word; }
.masao .nobr { white-space: nowrap; }
/* 短い読み物の段 (CTA・著者欄・引用・リンク一覧) も文節で折り、小書きの仮名を行頭に置かない。本文の段落は字単位のまま */
.masao :is(.cta__body, .author__bio), :is(.article, .is-root-container) :is(blockquote, .is-style-links a) { word-break: auto-phrase; line-break: strict; text-wrap: balance; }
.masao .article td.is-phrase { overflow-wrap: anywhere; }   /* 表のセルは最小幅まで縮める (Safari の keep-all で表がはみ出さない) */
.toc a::before { content: ""; position: absolute; left: 10px; top: calc(7px + 1.6em / 2 - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--color-surface); box-shadow: inset 0 0 0 1.5px var(--color-neutral-3); }
.masao .toc a:hover { color: var(--color-text); background: color-mix(in oklab, var(--color-primary) 6%, transparent); }
.masao .toc a[aria-current="location"] { color: var(--color-primary-deep); font-weight: 600; background: color-mix(in oklab, var(--color-primary) 11%, transparent); }
.toc a[aria-current="location"]::before { background: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 24%, transparent); }
.toc__progress { height: 2px; margin: 16px 10px 0; border-radius: 2px; background: var(--color-neutral-2); overflow: hidden; }
.toc__progress i { display: block; height: 100%; width: 0; background: var(--color-primary-deep); transition: width 120ms linear; }

/* ---------- 著者と CTA ---------- */
.author { display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: center; margin: 72px 0 32px; padding: 24px; border-radius: 16px; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-neutral-2); }
.author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--color-gallery); }
.author__name { margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.5; }
.author__bio { margin: 0; font-size: 14px; line-height: 1.8; color: var(--color-muted); }

.cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 96px 1fr auto; gap: 28px; align-items: center;
  margin: 0; padding: 32px 36px; border-radius: 22px; color: var(--color-text);
  background: var(--color-neutral-4);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px color-mix(in oklab, var(--color-pigment-2) 35%, transparent), 0 28px 56px -40px color-mix(in oklab, var(--color-pigment-4) 60%, transparent);
}
.cta::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 0; height: 1px; background: var(--spectrum); opacity: .7; }
.cta__ink { width: 96px; height: 96px; border-radius: 20px; background: url("../img/ink.webp") 40% 50% / 300% auto no-repeat, var(--color-surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.5), 0 14px 30px -18px color-mix(in oklab, var(--color-pigment-4) 70%, transparent); }
.cta__kicker { margin: 0 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--color-primary-deep); }
.cta__title { margin: 0 0 8px; font-size: 22px; font-weight: 600; line-height: 1.5; color: var(--color-text); text-wrap: balance; word-break: auto-phrase; }
.cta__body { margin: 0; color: var(--color-muted); font-size: 15px; line-height: 1.8; }
/* CTA v2 (2026-10-08): 中身の札 (特典 5 つ・最近の限定記事 3 本・本人の一言・初学者への一言) と、右の値段と押す所。文は本人の公開の文だけ */
.cta--v2 { grid-template-columns: 96px minmax(0, 1fr); align-items: start; row-gap: 22px; }
.cta__count { display: inline-block; margin-left: 10px; padding: 2px 10px; border-radius: 999px; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-neutral-2); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--color-text); vertical-align: middle; }
.cta__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; font-size: 14px; line-height: 1.6; color: var(--color-text); }
.cta__list li { position: relative; padding-left: 28px; }
.cta__list li::before, .cta__list li::after { content: ""; position: absolute; left: 0; top: .1em; width: 18px; height: 18px; }
.cta__list li::before { border-radius: 5px; background: var(--color-surface); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-primary) 45%, transparent); }
.cta__list li::after { background: var(--color-primary-deep); -webkit-mask: var(--icon-check) center / contain no-repeat; mask: var(--icon-check) center / contain no-repeat; }
.cta__inside-label { margin: 18px 0 6px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; color: var(--color-muted); }
.cta__inside { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cta__inside li { padding: 9px 12px; border-radius: 10px; background: var(--color-surface); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 0 0 1px var(--color-neutral-2); font-size: 13.5px; line-height: 1.55; font-weight: 500; word-break: auto-phrase; }
.cta__voice { margin: 18px 0 0; padding: 2px 0 2px 16px; border: 0; border-left: 3px solid var(--color-primary-deep); font-size: 16px; font-weight: 500; line-height: 1.7; color: var(--color-text); }
.cta__voice p { margin: 0; }
.cta__voice footer { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--color-muted); }
.cta__voice footer img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff; }
.cta__note { margin: 14px 0 0; font-size: 13px; line-height: 1.7; color: var(--color-muted); }
.cta__side { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 20px; padding: 18px 22px; border-radius: 16px; background: var(--color-surface); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--color-neutral-2); }
.cta__price { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.cta__yen { font-family: var(--font-mono); font-size: 34px; font-weight: 500; letter-spacing: -.02em; color: var(--color-text); }
.cta__per { font-size: 14px; color: var(--color-muted); }
.cta__side .btn { grid-column: 2; grid-row: 1; justify-self: end; }
.cta__src { grid-column: 1 / -1; margin: 0; font-size: 11.5px; line-height: 1.6; color: var(--color-muted); }
@media (max-width: 760px) { .cta--v2 { grid-template-columns: 1fr; } .cta__list { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .cta__side { grid-template-columns: 1fr; } .cta__side .btn { grid-column: 1; grid-row: auto; justify-self: stretch; } }

.footer { position: relative; margin: 0; padding: 48px clamp(20px, 4vw, 48px) 56px; background: var(--color-bg); color: var(--color-muted); font-size: 13px; text-align: center; }
.footer .hair { width: 120px; height: 1px; margin: 0 auto 20px; background: var(--spectrum); }
.footer p { margin: 0; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin: 0 0 14px; font-size: 13.5px; }
.masao .footer__links a { padding: 4px 2px; color: var(--color-muted); text-decoration: none; }
.masao .footer__links a:hover { color: var(--color-text); }

/* ---------- 小さい画面 ---------- */
@media (min-width: 1081px) {
  /* 2 列の間は本文の段が 720px より狭くなる。板の幅を実際の段の幅 (--col) から決める */
  .stage { --plate-shift: calc((var(--toc) + 56px) / -2); --col: min(var(--content), 100vw - 2 * clamp(20px, 4vw, 48px) - var(--toc) - 56px); }
}
/* 広い画面では本文の段をページの中心に置き、目次を右の余白に吊る。板はページの中心に立つ (正本画の構図。2026-10-08 の審査 r5) */
@media (min-width: 1440px) {
  .stage { --plate-shift: 0px; }
  .layout { grid-template-columns: 1fr minmax(0, var(--content)) 1fr; column-gap: 48px; }
  .layout > .col { grid-column: 2; }
  .layout > .toc { grid-column: 3; justify-self: start; width: var(--toc); }
}
@media (max-width: 1080px) {
  .layout { grid-template-columns: minmax(0, var(--content)); }
  .layout > .col, .layout > .toc { grid-column: auto; grid-row: auto; }
  .toc { position: static; }
  .toc__progress { display: none; }
  .toc__panel { padding: 0; }   /* 押せる範囲を見た目の箱にそろえる (余白は summary が持つ) */
  .toc__panel .toc__title { padding: 22px 20px; }
  .toc__panel ol { margin: 0 20px; padding-bottom: 18px; }
  .toc__title { display: flex; justify-content: space-between; align-items: center; margin: 0; cursor: pointer; }
  .toc__title::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 180ms var(--ease); }
  .toc__panel[open] .toc__title { margin-bottom: 0; padding-bottom: 12px; }
  .toc__panel[open] .toc__title::after { transform: rotate(-135deg) translateY(-2px); }
}
@media (max-width: 600px) {
  body.masao { font-size: 17px; }
  /* 縦長の板: 絵の具は文字の段の下へ沈める (GPU 版の ink-plate-tall と同じ縦長の写真素材)。帯の高さ = 下の余白なので、文字にかからない */
  .plate { padding-bottom: 64px; }
  .plate::before {
    inset: auto 0 0; height: 64px;
    background: url("../img/ink-plate-tall.webp") 50% 100% / 100% auto no-repeat;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 60%);
            mask-image: linear-gradient(180deg, transparent, #000 60%);
  }
  .floor-light { width: 60%; height: 16px; }
  :is(.article, .is-root-container) table { min-width: 32em; }
  :is(.article, .is-root-container) :is(th, td):first-child { white-space: nowrap; }
  :is(.article, .is-root-container) { --h2: 24px; }
  :is(.article, .is-root-container) h2:has(> .h2-tail) { font-size: 14.5px; }
  .plate h1, .plate .wp-block-post-title { font-size: clamp(24px, 6.6vw, 28px); }   /* 360px でも「エンジニアリングとは？」が 1 行に入る (WebKit で「？」が一人で落ちていた) */
  :is(.article, .is-root-container) .is-style-steps > li { padding-left: 44px; }
  :is(.article, .is-root-container) :is(.is-style-note, .is-style-warning) { padding-left: 54px; }
  :is(.article, .is-root-container) :is(.is-style-note, .is-style-warning)::before, :is(.article, .is-root-container) .is-style-warning::after { left: 20px; }
  .cta { grid-template-columns: 1fr; padding: 28px 24px; }
  .cta__ink { width: 64px; height: 64px; border-radius: 16px; }
  .author { grid-template-columns: 56px 1fr; }
  .author img { width: 56px; height: 56px; }
  .nav { gap: 12px; }
  .masao .nav .btn { padding: 0 14px; }
}

/* ナビのリンクは 720px 以下で隠す (同じ行き先はフッターにある。601〜720px で帯からはみ出していた) */
@media (max-width: 720px) { .nav__links { display: none; } }
/* 狭い画面の表: 横に送れる時だけ、右端 (と左端) に影を出す。影は構造なので CSS で描く */
/* スマホの表: 横に送らず、行を 1 枚の札にして縦に積む。各セルの頭に列の名前 (masao.js が th の字を data-label に写す)。4 列までの表だけ */
@media (max-width: 600px) {
  :is(.article, .is-root-container) .wp-block-table.is-stack { overflow: visible; background: transparent; box-shadow: none; }
  :is(.article, .is-root-container) .is-stack table { min-width: 0; display: block; }
  :is(.article, .is-root-container) .is-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  :is(.article, .is-root-container) .is-stack tbody, :is(.article, .is-root-container) .is-stack tr, :is(.article, .is-root-container) .is-stack td { display: block; }
  :is(.article, .is-root-container) .is-stack tr { margin: 0 0 12px; padding: 4px 16px 12px; border-radius: 12px; background: var(--color-surface); box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 0 0 1px var(--color-neutral-2); }
  :is(.article, .is-root-container) .is-stack td { padding: 8px 0 2px; border: 0; white-space: normal; }
  :is(.article, .is-root-container) .is-stack td + td { border-top: 1px solid var(--color-neutral-2); }
  :is(.article, .is-root-container) .is-stack td::before { content: attr(data-label); display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; color: var(--color-muted); }
  :is(.article, .is-root-container) .is-stack td:first-child { font-weight: 600; }
  :is(.article, .is-root-container) .is-stack tbody tr:hover td { background: transparent; }
}
@media (max-width: 600px) {
  :is(.article, .is-root-container) .wp-block-table:not(.is-stack) { background:
    linear-gradient(to right, var(--color-surface) 40%, transparent) left / 28px 100% no-repeat local,
    linear-gradient(to left, var(--color-surface) 40%, transparent) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(6,11,18,.18), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(6,11,18,.18), transparent) right / 14px 100% no-repeat scroll,
    var(--color-surface); }
}

/* ---------- 退避 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .masao .btn, .masao .btn::before, .masao .toc a, .toc__progress i, .toc__title::after, .masao .skip-link, :is(.article, .is-root-container) .is-style-links a::after, .masao-yt__link img, .masao-yt__play, .masao-yt__play::after, :is(.article, .is-root-container) .wp-block-image.is-style-video a::before, :is(.article, .is-root-container) .wp-block-image.is-style-video a::after { transition: none; }
}
@media (forced-colors: active), (prefers-contrast: more) {
  .plate { background: var(--color-surface); }
  .plate::before { display: none; }
  html.at-top .nav { background: var(--color-surface); }
}
@media (prefers-reduced-transparency: reduce) {
  .nav, html.at-top .nav { background: var(--color-surface); }
  html.fx-refract-on .nav, html.fx-refract-on .plate.fx-glass { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .plate { background: var(--color-surface); }
  .plate::before { opacity: .45; }
}

/* 0.3.1（2026-10-08、DNA「図の枠・比較表・関連リンク」）: 図の PNG は白地・細い枠なので、外側の影つきの角丸を外して二重の箱をやめる。切り抜き（clip）は動画なので面を残す */
:is(.article, .is-root-container) .wp-block-image:is(.is-style-diagram, .is-style-annotated, .is-style-grareco) { margin: .4em 0 2em; border-radius: 0; overflow: visible; background: none; box-shadow: none; padding: 0; }
:is(.article, .is-root-container) .wp-block-image:is(.is-style-diagram, .is-style-annotated, .is-style-grareco) img { margin: 0; }
:is(.article, .is-root-container) .wp-block-image:is(.is-style-diagram, .is-style-annotated, .is-style-grareco) figcaption { padding: 6px 0 0; text-align: left; color: var(--color-muted); }
/* 比較表: 影を外して縁だけ。スマホでは詰め、見出しのセルも折り返し、1 列目を太字に */
:is(.article, .is-root-container) .wp-block-table { border-radius: 10px; box-shadow: 0 0 0 1px var(--color-neutral-2); }
:is(.article, .is-root-container) td:first-child { font-weight: 600; }
@media (max-width: 600px) {
  :is(.article, .is-root-container) table { font-size: 14px; line-height: 1.6; }
  :is(.article, .is-root-container) :is(th, td) { padding: 9px 10px; }
  :is(.article, .is-root-container) th { white-space: normal; }
}
/* 関連リンクのカード: 左にサムネ（functions.php が入れる .links__thumb）、右に題と出どころの札。サムネが無い行は今の 1 行のまま */
:is(.article, .is-root-container) .is-style-links { border-top: 0; display: grid; gap: 10px; }
:is(.article, .is-root-container) .is-style-links > li { border: 0; }
:is(.article, .is-root-container) .is-style-links a:has(.links__thumb) { display: grid; grid-template-columns: 112px 1fr; gap: 12px; align-items: center; padding: 10px 36px 10px 10px; border-radius: 12px; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-neutral-2); }
:is(.article, .is-root-container) .is-style-links .links__thumb { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; background: var(--color-gallery); }
:is(.article, .is-root-container) .is-style-links .links__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.55; }
:is(.article, .is-root-container) .is-style-links .links__src { display: block; margin-top: 4px; font-size: 12px; font-weight: 500; color: var(--color-muted); }
:is(.article, .is-root-container) .is-style-links > li:not(:has(.links__thumb)) { border-bottom: 1px solid var(--color-neutral-2); }
/* 縦積みの札（is-stack、スマホ）を詰める: 1 列目は札の題にして列名を出さず、残りは列名を同じ行の頭に。影を外して縁だけ（N1 r9: h2=1 の表が 398px で 2 番目に低い画面） */
@media (max-width: 600px) {
  :is(.article, .is-root-container) .is-stack tr { margin: 0 0 8px; padding: 9px 12px 10px; box-shadow: 0 0 0 1px var(--color-neutral-2); }
  :is(.article, .is-root-container) .is-stack td { padding: 3px 0 0; font-size: 14px; line-height: 1.6; }
  :is(.article, .is-root-container) .is-stack td + td { border-top: 0; }
  :is(.article, .is-root-container) .is-stack td:first-child { padding: 0 0 3px; font-size: 15px; }
  :is(.article, .is-root-container) .is-stack td:first-child::before { display: none; }
  :is(.article, .is-root-container) .is-stack td:not(:first-child)::before { display: inline; margin: 0 .6em 0 0; }
}
/* N1 r10・r11（Rubble の提案、2026-10-08）: (1)「語：説明」の箇条は語を小見出しに、説明を少し小さく詰め、項目の間を広げる。(2) メンバーシップの「初学者へのサポート」の一文は売り文句の直後に、本文と同じ濃さで（article-cta.php で位置を移した）。(3) スマホで背の高い段落は 1 行目を少し太く（masao.js が .is-tall を付ける） */
:is(.article, .is-root-container) li.is-term { margin-bottom: .8em; font-size: .94em; line-height: 1.7; }
:is(.article, .is-root-container) li.is-term > strong:first-child { font-size: 1.06em; }
.masao .cta__note { margin: .2em 0 1em; font-size: 15px; line-height: 1.75; color: var(--color-text); }
@media (max-width: 600px) { :is(.article, .is-root-container) p.is-tall::first-line { font-weight: 600; } }
/* 0.3.3: 関連リンクのカードが 320px で 18px はみ出した（題の列の最小幅が文節の長さで決まっていた）。題の列を 0 まで縮められるようにし、360px 以下ではサムネを 88px に */
:is(.article, .is-root-container) .is-style-links a:has(.links__thumb) { grid-template-columns: 112px minmax(0, 1fr); }
:is(.article, .is-root-container) .is-style-links .links__text { overflow-wrap: anywhere; }
@media (max-width: 360px) {
  :is(.article, .is-root-container) .is-style-links a:has(.links__thumb) { grid-template-columns: 88px minmax(0, 1fr); }
  :is(.article, .is-root-container) .is-style-links .links__thumb { width: 88px; }
}
/* 0.3.4（DNA「メンバーシップの枠と題の板」）: 末尾が SaaS の料金ページの型に見えた（巡 1 の 2 席）。特典はチェックの箱をやめて本文と同じ小さな青い点、限定記事の題は箱を並べず細線の一覧、価格は面と影を外して字だけ。ボタン C・文・下辺の虹は変えない */
.cta__list li { padding-left: 16px; }
.cta__list li::before { top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary-deep); box-shadow: none; }
.cta__list li::after { content: none; }
.cta__inside { gap: 0; border-top: 1px solid var(--color-neutral-2); }
.cta__inside li { padding: 10px 2px; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid var(--color-neutral-2); }
.cta__side { padding: 4px 0 0; border-radius: 0; background: none; box-shadow: none; }
/* 0.3.5 文字の装飾（本人 10/8 17:15、DNA「文字の装飾」）: 太字に青の蛍光ペンの帯、em は青い字、注意の枠の中の太字は帯でなく青字と下線。見出し・表・リンク・吹き出しには帯を付けない */
:is(.article, .is-root-container) :is(p, li) strong {
  font-weight: 600; padding: 0 .08em;
  background: linear-gradient(transparent 58%, color-mix(in oklab, var(--color-primary) 26%, transparent) 58%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
:is(.article, .is-root-container) :is(p, li) em { font-style: normal; font-weight: 600; color: var(--color-primary-deep); }
:is(.article, .is-root-container) :is(.is-style-warning, .is-style-note, blockquote, td, th, .is-style-links) strong,
:is(.article, .is-root-container) li > strong:first-child,   /* 箇条の頭の太字は語や手順の見出しなので帯を付けない */
:is(.article, .is-root-container) :is(p, li) a strong { background: none; padding: 0; }
:is(.article, .is-root-container) .is-style-warning strong { color: var(--color-primary-deep); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
/* 0.3.6: コードが語の途中で折れていた（「ho/oks」、巡 4）。WordPress 本体の .wp-block-code code { white-space: break-spaces; overflow-wrap: break-word } が子テーマの pre の white-space: pre を上書きしていた。コードは折らずに横に送る（コピーのボタンあり） */
:is(.article, .is-root-container) pre code, :is(.article, .is-root-container) pre .line { white-space: pre; overflow-wrap: normal; word-break: normal; }
/* 0.3.8: 0.3.6 の横送りではスマホでコマンドの要が右端で切れた（巡 5）。語の途中では折らず、空白とパスの / の後（masao.js の wbr）だけで折り、続きは 2 字下げる */
:is(.article, .is-root-container) pre code, :is(.article, .is-root-container) pre .line { white-space: pre-wrap; overflow-wrap: normal; word-break: normal; }
:is(.article, .is-root-container) pre .line { padding-left: 2ch; text-indent: -2ch; }
/* 0.3.8: 表のまま置く表は、スマホで見出しの字を一段小さくして「タイミン/グ」の折れを避ける（巡 5。nowrap は本文の列が細くなり逆効果だった） */
@media (max-width: 600px) { :is(.article, .is-root-container) .wp-block-table:not(.is-stack) th { font-size: 12.5px; letter-spacing: 0; } }
/* 長いコードを畳む（masao.js の .is-folded と .code-more）。10 行分だけ見せ、下を地の色へぼかす */
.masao .code-wrap.is-folded pre { max-height: calc(10 * 1.7em + 44px); overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.masao .code-more { display: block; margin: -1.2em 0 1.8em; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--color-neutral-2); color: var(--color-text); font: 600 13px/1.4 var(--font-primary); cursor: pointer; }
.masao .code-more:focus-visible { outline: 2px solid var(--color-primary-deep); outline-offset: 2px; }