@charset "UTF-8";
/* ==========================================================================
   Crypto Depth — theme.css  v1.1
   2026-08-10。ビルド工程を持たない（SCSS も Tailwind も使わない）。

   世界観: 「水面の下へ潜る」。
     - ページの地は水柱である。スクロールするほど深くなる（§3）
     - マリンスノーが漂う（§3-b・canvas）
     - 記事の4レンズが、そのまま深度の目盛りになる（§8 深度計）
     - 水中なので、すべての動きは遅い（.6〜.7s）
     - 水色は「光」である。面として薄く敷き、点として灯す

   色の出どころ: ロゴ（濃色の地・白いD・水色の水面線）と、
   旧日本語版ブログの abyss 三段（#0a0e1a / #1a1f2e / #030508）。
   アクセント #4A9EFF はスコアボード清書仕様書 §0 の水色と同一。

   ※「水色は2箇所まで」はスコアボード（1200×675の画像1枚）の規律であり、
     サイトの規律ではない。ただし全幅の水面線だけは1画面に1本を守る。
   ========================================================================== */

/* ==========================================================================
   §1 フォント — 自前配信。外部 CDN に繋がない
   Inter / SIL Open Font License 1.1。欧文と数字を担当する。
   和文は OS 内蔵のゴシックに任せる（和文 webfont は数MBになるため）。
   ========================================================================== */
@font-face{
  font-family:"Inter CD"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/inter-latin-400.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter CD"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/inter-latin-700.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   §2 トークン
   ========================================================================== */
:root{
  /* 水柱の三段。上が水面直下、下が最深部 */
  --cd-shallow:  #0E1420;
  --cd-mid:      #0A0F18;
  --cd-abyss:    #04070C;

  --cd-ground:   var(--cd-shallow);
  --cd-ink:      #E9EEF4;
  --cd-ink-2:    #A7B2C0;
  --cd-muted:    #78849A;
  --cd-accent:   #4A9EFF;

  /* 水色を薄めた層。旧デザインの /5 /10 /20 /30 にあたる */
  --cd-water-04: rgba(74,158,255,.04);
  --cd-water-08: rgba(74,158,255,.08);
  --cd-water-14: rgba(74,158,255,.14);
  --cd-water-28: rgba(74,158,255,.28);
  --cd-glow:     0 0 24px rgba(74,158,255,.22);
  --cd-glow-lg:  0 0 40px rgba(74,158,255,.30);

  --cd-hair:      rgba(233,238,244,.12);
  --cd-hair-soft: rgba(233,238,244,.06);
  --cd-glass:     rgba(10,15,24,.86);
  --cd-reflect:   #4E5666;

  /* 書体 */
  --cd-font:"Inter CD", Arial, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
            "Yu Gothic Medium", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;

  /* 文字の段 */
  --cd-fs-xs:.75rem; --cd-fs-sm:.8125rem; --cd-fs-md:.9375rem;
  --cd-fs-body:1.0625rem; --cd-fs-lg:1.125rem; --cd-fs-xl:1.375rem;
  --cd-fs-2xl:1.75rem; --cd-fs-3xl:2.25rem;

  --cd-lh-prose:2.0; --cd-lh-ui:1.75; --cd-lh-head:1.4;

  --cd-measure:40em; --cd-wide:74rem;
  --cd-gutter:clamp(20px,5vw,44px);

  /* 角丸。硬さを抜く。ピルは 999px */
  --cd-r:14px; --cd-r-lg:20px; --cd-r-pill:999px;

  /* 水中の動き。速い動きは水の中では起きない */
  --cd-slow:.7s cubic-bezier(.4,0,.2,1);
  --cd-med:.45s cubic-bezier(.4,0,.2,1);

  /* 潜航の深さ 0〜1。depth.js がスクロールに応じて書き換える */
  --cd-depth:0;
}

/* ==========================================================================
   §3 水柱 — ページの地
   固定レイヤーを2枚重ねる。1枚目は水の色（深さで濃くなる）、
   2枚目は水面から差し込む光（潜るほど弱くなる）。
   どちらも fixed なので、スクロールしても画面いっぱいに水がある。
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; background:var(--cd-abyss); }
body{
  margin:0; position:relative; min-height:100vh;
  background:transparent;
  color:var(--cd-ink);
  font-family:var(--cd-font);
  font-size:var(--cd-fs-md); font-weight:400; line-height:var(--cd-lh-ui);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* 水そのもの */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--cd-shallow) calc((1 - var(--cd-depth)) * 100%), var(--cd-abyss)) 0%,
      color-mix(in srgb, var(--cd-mid) calc((1 - var(--cd-depth)) * 100%), var(--cd-abyss)) 55%,
      var(--cd-abyss) 100%
    );
  transition:background var(--cd-med);
}
/* 水面から差し込む光。潜るほど弱くなる */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% -14%, rgba(74,158,255,.16), transparent 62%),
    radial-gradient(80% 40% at 12% -6%, rgba(74,158,255,.10), transparent 60%);
  opacity:calc(1 - var(--cd-depth) * .85);
  transition:opacity var(--cd-med);
}
/* §3-b マリンスノー。JS が描く。動きを嫌う設定なら止める */
#cd-snow{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.55;
}
@media (prefers-reduced-motion:reduce){ #cd-snow{ display:none; } }

/* ==========================================================================
   §4 下ごしらえ
   ========================================================================== */
img,svg,video{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4,h5,h6{ margin:0; font-weight:700; line-height:var(--cd-lh-head);
                   text-wrap:balance; font-feature-settings:"palt" 1; }
p,ul,ol,figure,blockquote{ margin:0; }
a{ color:inherit; text-underline-offset:.22em; }
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--cd-accent); outline-offset:3px;
}
::selection{ background:var(--cd-accent); color:#04070C; }
.cd-visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden;
                     clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.cd-skip{ position:absolute; left:-9999px; top:0; z-index:100;
          background:var(--cd-accent); color:#04070C; padding:12px 18px; }
.cd-skip:focus{ left:0; }

.cd-shell{ min-height:100vh; display:flex; flex-direction:column; position:relative; z-index:1; }
.cd-main{ flex:1; }
.cd-wrap{ max-width:var(--cd-wide); margin-inline:auto; padding-inline:var(--cd-gutter); }
.cd-prose-wrap{ max-width:calc(var(--cd-measure) + var(--cd-gutter) * 2);
                margin-inline:auto; padding-inline:var(--cd-gutter); }

/* 全幅の水面線。1画面に1本だけ。上に光をにじませる */
.cd-waterline{
  border:0; margin:0; height:3px; background:var(--cd-accent);
  box-shadow:0 0 18px rgba(74,158,255,.45), 0 -1px 30px rgba(74,158,255,.18);
}

/* ==========================================================================
   §5 深度バー（画面最上部）— いまページのどこまで潜ったか
   ========================================================================== */
.cd-gauge{ position:fixed; inset-inline:0; top:0; height:2px;
           background:var(--cd-water-08); z-index:60; }
.cd-gauge__fill{
  height:100%; width:calc(var(--cd-depth) * 100%);
  background:linear-gradient(to right, rgba(74,158,255,.35), var(--cd-accent));
  box-shadow:0 0 12px rgba(74,158,255,.6);
  transition:width .12s linear;
}

/* ==========================================================================
   §6 ヘッダー・フッター
   ========================================================================== */
.cd-header{
  position:sticky; top:0; z-index:50;
  background:var(--cd-glass); border-bottom:1px solid var(--cd-water-14);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .cd-header{ -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
}
.cd-header__inner{ display:flex; align-items:center; justify-content:space-between;
                   gap:24px; padding-block:16px; }
.cd-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.cd-brand__mark{ color:var(--cd-ink); flex:none;
                 filter:drop-shadow(0 0 10px rgba(74,158,255,.35));
                 transition:filter var(--cd-slow); }
.cd-brand:hover .cd-brand__mark{ filter:drop-shadow(0 0 18px rgba(74,158,255,.6)); }
.cd-brand__mark .cd-d-top{ fill:currentColor; }
.cd-brand__mark .cd-d-reflect{ fill:var(--cd-reflect); }
.cd-brand__mark .cd-d-water{ fill:var(--cd-accent); }
.cd-brand__name{ font-size:1.0625rem; font-weight:700; letter-spacing:-.01em; }
.cd-nav{ display:flex; gap:clamp(14px,2.6vw,28px); font-size:var(--cd-fs-md); }
.cd-nav a{ color:var(--cd-ink-2); text-decoration:none; transition:color var(--cd-med); }
.cd-nav a:hover{ color:var(--cd-accent); }
.cd-nav a[aria-current]{ color:var(--cd-ink); font-weight:700; }

.cd-footer{ margin-top:120px; border-top:1px solid var(--cd-water-14);
            padding-block:40px 64px; font-size:var(--cd-fs-sm); color:var(--cd-muted);
            background:linear-gradient(to bottom, transparent, rgba(4,7,12,.6)); }
.cd-footer__row{ display:flex; flex-wrap:wrap; gap:12px 28px; align-items:baseline; }
.cd-footer a{ color:inherit; text-decoration:none; transition:color var(--cd-med); }
.cd-footer a:hover{ color:var(--cd-accent); }
.cd-footer__tag{ margin-left:auto; letter-spacing:.16em; color:var(--cd-accent);
                 text-shadow:0 0 18px rgba(74,158,255,.5); }

/* ==========================================================================
   §7 トップ
   ========================================================================== */
.cd-kicker{ font-size:var(--cd-fs-xs); letter-spacing:.06em; color:var(--cd-muted); }
.cd-hero{ padding-block:clamp(64px,12vw,132px) clamp(44px,8vw,80px); }
.cd-hero__title{ font-size:clamp(1.7rem,5vw,2.75rem); margin-top:16px; letter-spacing:-.02em; }
.cd-hero__lede{ margin-top:22px; max-width:var(--cd-measure);
                font-size:var(--cd-fs-body); line-height:var(--cd-lh-prose); color:var(--cd-ink-2); }
.cd-section-label{ padding-block:34px 0; }

/* -- 帯。トップはこの帯を縦に積む -- */
.cd-band{ padding-block:clamp(40px,7vw,72px); }
.cd-band__label{ margin-bottom:24px; }
.cd-band__head{ margin-bottom:28px; }
.cd-band__title{ font-size:clamp(1.3rem,2.8vw,1.75rem); letter-spacing:-.012em; }
.cd-band__note{ margin-top:8px; font-size:var(--cd-fs-md); color:var(--cd-muted); }
.cd-band__foot{ margin-top:26px; font-size:var(--cd-fs-md); color:var(--cd-muted); }
.cd-band__foot strong{ color:var(--cd-ink); font-weight:700; }

/* ==========================================================================
   §7-b カード — 大・中・小で同じ部品を使い回す
   絵／分類・日付・読了／見出し／導入／読む。差はサイズだけで、部品は同じ。
   ========================================================================== */
/* hover は動かさない。水の中で物は跳ねない。
   応えるのは光だけ——枠が明るくなり、外にやわらかい輪が灯る。 */
.cd-card{
  display:block; text-decoration:none; color:inherit; position:relative;
  border:1px solid var(--cd-water-14); background:var(--cd-water-04);
  border-radius:var(--cd-r); overflow:hidden;
  transition:border-color var(--cd-slow), background var(--cd-slow),
             box-shadow var(--cd-slow);
}
.cd-card:hover,
.cd-card:focus-visible{
  border-color:var(--cd-accent);
  background:var(--cd-water-08);
  box-shadow:0 0 0 1px var(--cd-water-28), 0 0 38px rgba(74,158,255,.20);
}
.cd-card__art{ display:block; overflow:hidden; position:relative; }
.cd-card__art .cd-art{ width:100%; height:auto; display:block; }
/* 絵の上に、水面から差す光をひとすじ足す。位置も大きさも動かさない */
.cd-card__art::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 50% at 50% 0%, rgba(74,158,255,.22), transparent 70%);
  opacity:0; transition:opacity var(--cd-slow);
}
.cd-card:hover .cd-card__art::after{ opacity:1; }
.cd-card__body{ display:flex; flex-direction:column; gap:10px; padding:22px 22px 24px; }
.cd-card__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px;
                font-size:var(--cd-fs-xs); color:var(--cd-muted);
                font-variant-numeric:tabular-nums; }
.cd-card__pill{ background:var(--cd-water-08); border:1px solid var(--cd-water-28);
                border-radius:var(--cd-r-pill); padding:4px 12px;
                color:var(--cd-accent); letter-spacing:.02em; }
.cd-card__dot{ width:4px; height:4px; border-radius:50%; background:var(--cd-water-28); }
.cd-card__sample{ border:1px dashed var(--cd-hair); border-radius:var(--cd-r-pill);
                  padding:3px 10px; letter-spacing:.06em; }
.cd-card__title{ font-size:1.125rem; font-weight:700; line-height:1.5;
                 letter-spacing:-.01em; transition:color var(--cd-slow); }
.cd-card:hover .cd-card__title{ color:var(--cd-accent); }
.cd-card__lede{ font-size:var(--cd-fs-sm); color:var(--cd-muted); line-height:1.85;
                display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
                overflow:hidden; }
.cd-card__more{ margin-top:2px; font-size:var(--cd-fs-sm); color:var(--cd-accent);
                display:inline-flex; align-items:center; gap:8px; }
.cd-card__arrow{ transition:transform var(--cd-slow); }
.cd-card:hover .cd-card__arrow{ transform:translateX(4px); }

/* 大 — 最新の判定 */
.cd-card--hero .cd-card__body{ padding:30px clamp(24px,4vw,40px) 34px; gap:14px; }
.cd-card--hero .cd-card__title{ font-size:clamp(1.4rem,3.4vw,2rem); }
.cd-card--hero .cd-card__lede{ font-size:var(--cd-fs-md); -webkit-line-clamp:3; max-width:44em; }

/* 中 — 横並び2件。画面が狭いときは縦に積む */
.cd-pair{ display:grid; gap:16px; margin-top:16px; }
@media (min-width:900px){ .cd-pair{ grid-template-columns:1fr 1fr; } }
@media (min-width:560px){
  .cd-card--wide{ display:grid; grid-template-columns:minmax(0,44%) 1fr; align-items:stretch; }
  .cd-card--wide .cd-card__art{ height:100%; }
  .cd-card--wide .cd-card__art .cd-art{ height:100%; object-fit:cover; }
  .cd-card--wide .cd-card__body{ padding:20px 22px; justify-content:center; }
}
.cd-card--wide .cd-card__title{ font-size:1.0625rem; }

/* 小 — グリッド */
.cd-grid{ display:grid; gap:16px; }
@media (min-width:640px){ .cd-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .cd-grid{ grid-template-columns:repeat(3,1fr); } }

/* -- カードの絵（判定そのものを描く） --
   合格は水面まで届く柱、不合格は途中で止まる柱。棒の高さが判定そのもの。 */
.cd-art__token{ fill:#E9EEF4; font-weight:700; letter-spacing:-2; }
.cd-art__kicker{ fill:#8FA0B5; font-size:15px; }
.cd-art__val{ fill:#E9EEF4; font-size:21px; }
.cd-art__key{ fill:#78849A; font-size:13px; text-anchor:middle; }
.cd-art__bar{ fill:rgba(233,238,244,.16); }
.cd-art__bar.is-fail{ fill:rgba(233,238,244,.30); }
.cd-art__bar.is-pass{ fill:#4A9EFF; filter:drop-shadow(0 0 10px rgba(74,158,255,.7)); }
.cd-art text{ font-family:var(--cd-font); }

/* ==========================================================================
   §7-c 4つのレンズ — 記事ではなく「見方」への入口
   番号を振るのは、順番そのものが決まっているから（飾りの連番ではない）
   ========================================================================== */
.cd-lenses{ display:grid; gap:1px; background:var(--cd-water-14);
            border:1px solid var(--cd-water-14); border-radius:var(--cd-r); overflow:hidden; }
@media (min-width:680px){ .cd-lenses{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1060px){ .cd-lenses{ grid-template-columns:repeat(4,1fr); } }
.cd-lens{ background:var(--cd-ground); padding:26px 24px 28px;
          display:flex; flex-direction:column; gap:8px;
          transition:background var(--cd-slow); }
.cd-lens:hover{ background:var(--cd-water-04); }
.cd-lens__n{ font-size:var(--cd-fs-sm); color:var(--cd-accent);
             font-variant-numeric:tabular-nums; letter-spacing:.1em; }
.cd-lens__name{ font-size:1.25rem; letter-spacing:-.01em; }
.cd-lens__q{ font-size:var(--cd-fs-md); color:var(--cd-ink-2); }
.cd-lens__d{ font-size:var(--cd-fs-sm); color:var(--cd-muted); line-height:1.9; }

/* ==========================================================================
   §7-d 玄関の帯 — 看板記事へ、下部で大きく
   ========================================================================== */
.cd-gate{
  display:block; position:relative; text-decoration:none; color:inherit;
  border:1px solid var(--cd-water-14); overflow:hidden; border-radius:var(--cd-r-lg);
  transition:border-color var(--cd-slow), box-shadow var(--cd-slow);
}
.cd-gate:hover{ border-color:var(--cd-accent);
                box-shadow:0 0 0 1px var(--cd-water-28), 0 0 54px rgba(74,158,255,.22); }
.cd-gate__art{ position:absolute; inset:0; z-index:0; }
.cd-gate__art svg{ width:100%; height:100%; }
.cd-gate__body{
  position:relative; z-index:1; display:flex; flex-direction:column; gap:12px;
  padding:clamp(32px,6vw,64px) clamp(24px,5vw,56px);
  background:linear-gradient(to right, rgba(4,7,12,.86) 0%, rgba(4,7,12,.5) 70%, transparent 100%);
}
.cd-gate__title{ font-size:clamp(1.35rem,3.2vw,1.95rem); font-weight:700;
                 letter-spacing:-.015em; line-height:1.4;
                 transition:color var(--cd-slow); }
.cd-gate:hover .cd-gate__title{ color:var(--cd-accent); }
.cd-gate__lede{ font-size:var(--cd-fs-md); color:var(--cd-ink-2);
                line-height:1.9; max-width:36em; }
.cd-gate:hover .cd-card__arrow{ transform:translateX(4px); }

.cd-badge{ display:inline-block; font-size:var(--cd-fs-xs); letter-spacing:.06em;
           border:1px solid var(--cd-water-14); border-radius:var(--cd-r-pill);
           padding:4px 12px; color:var(--cd-muted); }
.cd-pips{ display:flex; gap:6px; margin-top:6px; }
.cd-pip{ flex:1; height:5px; background:var(--cd-hair); }
.cd-pip--pass{ background:var(--cd-accent); box-shadow:0 0 10px rgba(74,158,255,.6); }
.cd-pip--fail{ background:rgba(233,238,244,.30); }
.cd-pips__key{ font-size:var(--cd-fs-xs); color:var(--cd-muted); }

/* ==========================================================================
   §8 記事 — 深度計つき
   ========================================================================== */
.cd-article{ padding-block:clamp(44px,7vw,72px) 0; position:relative; }
.cd-article__crumb{ font-size:var(--cd-fs-xs); color:var(--cd-muted); }
.cd-article__crumb a{ color:inherit; text-decoration:none; }
.cd-article__crumb a:hover{ color:var(--cd-accent); }
.cd-article__title{ font-size:clamp(1.55rem,4vw,2.25rem); margin-top:16px; letter-spacing:-.018em; }
.cd-article__meta{ margin-top:22px; padding-top:16px; border-top:1px solid var(--cd-hair-soft);
                   display:flex; flex-wrap:wrap; gap:8px 24px;
                   font-size:var(--cd-fs-xs); color:var(--cd-muted);
                   font-variant-numeric:tabular-nums; }

/* -- 深度計。記事の h2 が目盛りになる。飾りではなく、記事の構造そのもの -- */
.cd-sounding{ display:none; }
@media (min-width:1180px){
  .cd-sounding{
    display:block; position:fixed; left:max(24px,calc((100vw - var(--cd-wide)) / 2 - 8px));
    top:50%; transform:translateY(-50%); z-index:40;
    width:190px; font-size:var(--cd-fs-xs);
  }
}
.cd-sounding__h{ color:var(--cd-muted); letter-spacing:.14em; text-transform:uppercase;
                 margin-bottom:14px; }
.cd-sounding__list{ list-style:none; margin:0; padding:0;
                    border-left:1px solid var(--cd-water-14); }
.cd-sounding__item{ position:relative; padding:9px 0 9px 18px; color:var(--cd-muted);
                    line-height:1.5; transition:color var(--cd-slow); }
.cd-sounding__item::before{
  content:""; position:absolute; left:-3px; top:16px;
  width:5px; height:5px; border-radius:50%;
  background:var(--cd-water-28); transition:all var(--cd-slow);
}
.cd-sounding__item.is-here{ color:var(--cd-ink); }
.cd-sounding__item.is-here::before{
  background:var(--cd-accent); box-shadow:0 0 12px rgba(74,158,255,.8);
  width:7px; height:7px; left:-4px;
}
.cd-sounding__item a{ color:inherit; text-decoration:none; }

/* -- 本文 -- */
.cd-prose{ max-width:var(--cd-measure); font-size:var(--cd-fs-body);
           line-height:var(--cd-lh-prose); color:var(--cd-ink-2);
           line-break:strict; overflow-wrap:break-word; }
.cd-prose > * + *{ margin-top:1.55em; }
.cd-prose strong{ font-weight:700; color:var(--cd-ink); }
.cd-prose h2,.cd-prose h3{ position:relative; color:var(--cd-ink); scroll-margin-top:90px; }
.cd-prose h2::before,.cd-prose h3::before{
  content:""; position:absolute; left:0; top:.7em; transform:translateY(-50%);
  background:var(--cd-accent); box-shadow:0 0 12px rgba(74,158,255,.55);
}
/* h2 は縦棒、h3 は丸。段が目で分かる */
.cd-prose h2{ font-size:var(--cd-fs-xl); margin-top:2.8em; padding-left:1.25rem; }
.cd-prose h2::before{ width:4px; height:1.5rem; border-radius:var(--cd-r-pill); }
.cd-prose h3{ font-size:var(--cd-fs-lg); margin-top:2.2em; padding-left:1.25rem; }
.cd-prose h3::before{ width:9px; height:9px; border-radius:50%; left:1px; }

/* -- 本文中のデータパネル。数字を並べるときはここに入れる -- */
.cd-data{
  margin-block:2em; padding:24px 26px 26px;
  background:var(--cd-water-04); border:1px solid var(--cd-water-14);
  border-radius:var(--cd-r);
}
.cd-data__head{ display:flex; align-items:baseline; justify-content:space-between;
                gap:16px; margin-bottom:20px; }
.cd-data__title{ font-size:var(--cd-fs-lg); font-weight:700; color:var(--cd-ink); }
.cd-data__note{ font-size:var(--cd-fs-xs); color:var(--cd-muted); }
.cd-data__row + .cd-data__row{ margin-top:16px; }
.cd-data__label{ display:flex; justify-content:space-between; align-items:baseline;
                 gap:12px; font-size:var(--cd-fs-md); color:var(--cd-ink-2); }
.cd-data__value{ color:var(--cd-accent); font-weight:700;
                 font-variant-numeric:tabular-nums; }
.cd-data__track{ margin-top:8px; height:6px; border-radius:var(--cd-r-pill);
                 background:var(--cd-water-08); overflow:hidden; }
.cd-data__fill{ height:100%; border-radius:var(--cd-r-pill); background:var(--cd-accent);
                box-shadow:0 0 10px rgba(74,158,255,.5); }
.cd-data__fill.is-muted{ background:rgba(233,238,244,.28); box-shadow:none; }
.cd-data__foot{ margin-top:18px; font-size:var(--cd-fs-xs); color:var(--cd-muted);
                line-height:1.8; }
.cd-prose a{ color:var(--cd-accent); text-decoration:none; transition:color var(--cd-med); }
.cd-prose a:hover{ text-decoration:underline; }
.cd-prose ul,.cd-prose ol{ padding-left:1.4em; }
.cd-prose li + li{ margin-top:.5em; }
.cd-prose li::marker{ color:var(--cd-accent); }
.cd-prose blockquote{ border-left:2px solid var(--cd-accent); padding-left:1.2em;
                      color:var(--cd-muted); }
.cd-verdict-tag{ margin-left:.6em; font-size:var(--cd-fs-sm); font-weight:400; color:var(--cd-muted); }

/* -- 覆る条件。全判定に置く（反証の規律） -- */
.cd-falsify{
  margin-top:2.8em; padding:24px 26px;
  background:linear-gradient(135deg, var(--cd-water-08), transparent 70%);
  border:1px solid var(--cd-water-14); border-left:3px solid var(--cd-accent);
  border-radius:var(--cd-r);
}
.cd-falsify__h{ font-size:var(--cd-fs-xs); letter-spacing:.16em; text-transform:uppercase;
                color:var(--cd-accent); }
.cd-falsify p{ margin-top:12px; font-size:var(--cd-fs-md); line-height:1.95; color:var(--cd-ink-2); }
.cd-falsify p + p{ margin-top:1em; }

.cd-sources{ margin-top:2.8em; border-top:1px solid var(--cd-hair); padding-top:20px; }
.cd-sources__h{ font-size:var(--cd-fs-xs); letter-spacing:.16em; text-transform:uppercase;
                color:var(--cd-muted); }
.cd-sources ol{ margin-top:12px; padding-left:1.4em; font-size:var(--cd-fs-sm);
                color:var(--cd-muted); line-height:1.95; }

.cd-figure{ margin-block:2.4em; }
.cd-figure__frame{ border:1px solid var(--cd-water-14); background:var(--cd-water-04);
                   border-radius:var(--cd-r); overflow:hidden; }
.cd-figure figcaption{ margin-top:12px; font-size:var(--cd-fs-sm); color:var(--cd-muted); }

/* ==========================================================================
   §9 図解 SVG（旧 spec v0.3 の骨格を継ぎ、色を水中へ差し替えた v1.0）
   ========================================================================== */
.cd-diagram{ width:100%; height:auto; display:block; }
.cd-diagram .svg-root{ font-family:var(--cd-font); fill:var(--cd-ink); }
.cd-diagram .fs-14{ font-size:14px; } .cd-diagram .fs-16{ font-size:16px; }
.cd-diagram .fs-18{ font-size:18px; } .cd-diagram .fs-22{ font-size:22px; }
.cd-diagram .fs-26{ font-size:26px; } .cd-diagram .fs-30{ font-size:30px; }
.cd-diagram .fs-36{ font-size:36px; } .cd-diagram .fs-56{ font-size:56px; }
.cd-diagram .fw-400{ font-weight:400; } .cd-diagram .fw-700{ font-weight:700; }
.cd-diagram .ta-start{ text-anchor:start; } .cd-diagram .ta-middle{ text-anchor:middle; }
.cd-diagram .ta-end{ text-anchor:end; }
.cd-diagram .panel{ fill:var(--cd-water-04); stroke:var(--cd-water-14); stroke-width:1.5; }
.cd-diagram .panel-soft{ fill:var(--cd-water-08); stroke:var(--cd-water-14); stroke-width:1.5; }
.cd-diagram .line{ stroke:var(--cd-ink-2); stroke-width:1.5; fill:none; }
.cd-diagram .line-soft{ stroke:var(--cd-hair); stroke-width:1; fill:none; }
.cd-diagram .text-muted{ fill:var(--cd-muted); }
.cd-diagram .waterline{ fill:var(--cd-accent); }
.cd-diagram .stroke-water{ stroke:var(--cd-accent); stroke-width:3; fill:none; }
.cd-diagram .num{ font-variant-numeric:tabular-nums; }

/* ==========================================================================
   §10 横断比較の表
   ========================================================================== */
.cd-table-scroll{ overflow-x:auto; }
.cd-table{ width:100%; border-collapse:collapse; font-size:var(--cd-fs-md); min-width:640px; }
.cd-table th,.cd-table td{ text-align:left; padding:14px;
                           border-bottom:1px solid var(--cd-hair); white-space:nowrap; }
.cd-table thead th{ font-size:var(--cd-fs-xs); letter-spacing:.12em; text-transform:uppercase;
                    font-weight:400; color:var(--cd-muted);
                    border-bottom:1px solid var(--cd-water-28); }
.cd-table td.is-token{ font-weight:700; }
.cd-table td.is-num{ font-variant-numeric:tabular-nums; }
.cd-mark-pass{ color:var(--cd-accent); font-weight:700; }
.cd-mark-fail{ color:var(--cd-ink-2); opacity:.6; }
.cd-mark-none{ color:var(--cd-muted); }

/* ==========================================================================
   §11 その他
   ========================================================================== */
.cd-page{ padding-block:clamp(44px,7vw,72px) 0; }
.cd-page__title{ font-size:clamp(1.55rem,3.6vw,2rem); }
/* -- ボタン -- */
.cd-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 24px; border-radius:var(--cd-r-pill);
  border:1px solid var(--cd-hair); background:transparent; color:var(--cd-ink-2);
  font-family:inherit; font-size:var(--cd-fs-md); cursor:pointer; text-decoration:none;
  transition:all var(--cd-med);
}
.cd-btn:hover{ border-color:var(--cd-water-28); color:var(--cd-ink); }
.cd-btn--primary{
  border-color:var(--cd-accent); color:var(--cd-accent);
  background:var(--cd-water-08); box-shadow:var(--cd-glow);
}
.cd-btn--primary:hover{ background:var(--cd-water-14); box-shadow:var(--cd-glow-lg); }

/* ==========================================================================
   §12 見つからなかったとき
   数字だけを大きく光らせ、あとは静かにする。水中で見失った合図。
   ========================================================================== */
.cd-lost{
  max-width:56rem; margin-inline:auto;
  padding:clamp(56px,11vw,120px) var(--cd-gutter) 96px; text-align:center;
}
.cd-lost__num{
  font-size:clamp(6rem,20vw,13rem); font-weight:700; line-height:1;
  color:var(--cd-accent); letter-spacing:-.04em;
  text-shadow:0 0 60px rgba(74,158,255,.55), 0 0 140px rgba(74,158,255,.3);
}
/* この1行だけセリフ体を使う。ほかのどこにも出さない */
.cd-lost__en{
  margin-top:18px; font-weight:400; letter-spacing:.01em;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(1.6rem,4.6vw,2.5rem); color:var(--cd-ink);
}
.cd-lost__jp{ margin-top:20px; color:var(--cd-muted); font-size:var(--cd-fs-md); line-height:2; }
.cd-lost__acts{ margin-top:38px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cd-lost__panel{
  margin-top:60px; padding:28px 26px 30px; text-align:left;
  border:1px solid var(--cd-water-14); border-radius:var(--cd-r-lg);
  background:var(--cd-water-04);
}
.cd-lost__panel-h{
  text-align:center; font-size:var(--cd-fs-xs); letter-spacing:.2em;
  text-transform:uppercase; color:var(--cd-accent); margin-bottom:22px;
}
.cd-lost__links{ display:grid; gap:12px; }
@media (min-width:640px){ .cd-lost__links{ grid-template-columns:1fr 1fr; } }
.cd-lost__link{
  display:flex; flex-direction:column; gap:4px; padding:16px 18px;
  border:1px solid var(--cd-hair); border-radius:var(--cd-r);
  text-decoration:none; transition:all var(--cd-med);
}
.cd-lost__link:hover{ border-color:var(--cd-water-28); background:var(--cd-water-08); }
.cd-lost__link-t{ font-size:var(--cd-fs-md); font-weight:700; color:var(--cd-ink); }
.cd-lost__link-s{ font-size:var(--cd-fs-xs); color:var(--cd-muted); }
.cd-lost__status{
  margin-top:40px; font-size:var(--cd-fs-xs); letter-spacing:.16em;
  color:var(--cd-muted); opacity:.65; font-variant-numeric:tabular-nums;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* 紙に出すときだけ白へ落とす */
@media print{
  html,body{ background:#fff; color:#0F1115; }
  body::before,body::after,#cd-snow,.cd-gauge,.cd-sounding,.cd-header,.cd-footer{ display:none; }
  .cd-prose{ color:#0F1115; }
  .cd-prose a{ color:#0F1115; }
}