/* ============================================================
   Works v2 — 作品ページ
   方針：強弱は文字の大きさ・太さ・余白でつける。枠や飾りは増やさない。
   色は意味で使い分ける：シアン＝データ・仕組み／黄＝自分・プレイヤー／
   緑＝地形・成功／赤＝問題。console.css のトークンを前提とする。
   ============================================================ */

/* ---------- ページ冒頭：作品の一覧 ---------- */

.wk-index {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin: 36px 0 12px;
}
.wk-index a { display: block; color: inherit; text-decoration: none; }
.wk-index img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 3px;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}
.wk-index a:hover img { opacity: 1; }
.wk-index .n { display: block; margin: 14px 0 2px; font-family: var(--mono); font-size: 12px; color: var(--ps-dim); }
.wk-index b { display: block; font-family: var(--prose); font-size: 18px; color: var(--ps-white); }
.wk-index a:hover b { color: var(--ps-yellow); }
.wk-index .d { display: block; margin-top: 6px; font-family: var(--prose); font-size: 13.5px; line-height: 1.75; color: var(--ps-muted); }

/* ---------- 作品の冒頭（全作品共通） ---------- */

.w-lede {
  max-width: 840px;
  margin: 6px 0 30px;
  font-family: var(--prose);
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 800;
  line-height: 1.65;
  color: var(--ps-white);
}
.w-cover { margin: 0; }
.w-cover img, .w-cover .video-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 3px;
  background: var(--ps-blue-deeper);
  cursor: zoom-in;
}
.w-cover .video-thumb { cursor: pointer; }
/* 縦長のウィンドウなど、16:9に切ると中身が欠ける画面写真はそのままの比率で出す */
.w-cover.natural img { width: auto; max-width: 100%; max-height: 640px; aspect-ratio: auto; }
.w-cover .video-thumb img { aspect-ratio: auto; height: 100%; border-radius: 3px; }
/* 見えたら js/yt.js がプレーヤーに差し替える。読み込むまではサムネイルが下に見えている */
.video-thumb.is-embed { position: relative; overflow: hidden; cursor: auto; }
.video-thumb.is-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.w-cover figcaption { margin-top: 8px; font-family: var(--prose); font-size: 12.5px; color: var(--ps-muted); }

.bignums { display: flex; flex-wrap: wrap; gap: 18px 56px; margin: 34px 0 0; }
.bignums div { display: flex; flex-direction: column; }
.bignums b { font-family: var(--mono); font-size: clamp(30px, 4.2vw, 44px); font-weight: 700; line-height: 1.05; color: var(--ps-white); }
.bignums b em { margin-left: 3px; font-style: normal; font-size: 0.45em; color: var(--ps-muted); }
.bignums span { margin-top: 6px; font-family: var(--prose); font-size: 13px; color: var(--ps-muted); }
.bignums .me b { color: var(--ps-yellow); }

.w-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.w-meta {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ps-muted);
}
.w-meta li + li::before { content: "·"; margin: 0 10px; color: var(--ps-dim); }
.w-meta b { font-weight: 600; color: var(--ps-gray); }
.w-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.w-actions .keycap { padding: 9px 16px; font-size: 14px; }

/* ---------- セクション ---------- */

.w-sec { margin-top: 96px; }
.w-h {
  margin: 0 0 12px;
  font-family: var(--prose);
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 800;
  line-height: 1.5;
  color: var(--ps-white);
}
.w-sub {
  max-width: 720px;
  margin: 0 0 32px;
  font-family: var(--prose);
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--ps-gray);
}
.w-sub strong, .w-p strong { color: var(--ps-white); }
.w-p {
  max-width: 720px;
  margin: 0 0 14px;
  font-family: var(--prose);
  font-size: 15px;
  line-height: 1.95;
  color: var(--ps-gray);
}
.w-note { margin: 18px 0 0; font-family: var(--prose); font-size: 13.5px; line-height: 1.9; color: var(--ps-muted); max-width: 720px; }
.w-sub code, .w-p code, .w-note code, .w-t code, .w-col code, .layers code, .steps code {
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(111, 218, 218, 0.1);
  color: var(--ps-cyan);
  font-family: var(--mono);
  font-size: 0.88em;
}

/* 段組み：内容に合わせて比率を選ぶ */
.cols { display: grid; gap: 48px; align-items: start; }
.cols.c2 { grid-template-columns: 1fr 1fr; }
.cols.c2-wide { grid-template-columns: 1.35fr 1fr; }
.cols.c2-narrow { grid-template-columns: 1fr 1.35fr; }
.cols.c3 { grid-template-columns: repeat(3, 1fr); gap: 40px; }
.w-col h4 { margin: 0 0 8px; font-family: var(--prose); font-size: 16px; font-weight: 700; color: var(--ps-white); }
.w-col p { margin: 0 0 16px; font-family: var(--prose); font-size: 14px; line-height: 1.9; color: var(--ps-muted); }
.w-col p.w-rule { margin: 0 0 10px; font-family: var(--mono); font-size: clamp(26px, 3.2vw, 34px); line-height: 1.1; color: var(--ps-white); }

/* 短い箇条書き */
.w-list { margin: 0; padding: 0; list-style: none; max-width: 720px; }
.w-list li {
  position: relative;
  padding: 7px 0 7px 18px;
  font-family: var(--prose);
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--ps-gray);
}
.w-list li::before { content: "–"; position: absolute; left: 0; color: var(--ps-dim); }

/* 番号つきの手順（縦） */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: st; }
.steps li {
  display: grid;
  grid-template-columns: 34px 1fr;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
  counter-increment: st;
  font-family: var(--prose);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ps-muted);
}
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li::before { content: counter(st); font-family: var(--mono); font-size: 14px; color: var(--ps-yellow); }
.steps li b { display: block; font-size: 15.5px; color: var(--ps-white); }

/* 大きく見せる1行（規則や引用） */
.w-rule { margin: 0 0 8px; font-family: var(--mono); font-size: clamp(24px, 3.4vw, 36px); color: var(--ps-white); }
.w-rule em { font-style: normal; color: var(--ps-yellow); }
.w-quote {
  max-width: 820px;
  margin: 28px 0 18px;
  font-family: var(--prose);
  font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 800;
  line-height: 1.7;
  color: var(--ps-white);
}

/* ---------- 画像 ---------- */

.shot { margin: 0; }
.shot img, .shot .video-thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background: var(--ps-blue-deeper);
  cursor: zoom-in;
}
.shot .video-thumb { cursor: pointer; }
.shot .video-thumb img { aspect-ratio: auto; height: 100%; }
.shot figcaption { margin-top: 8px; font-family: var(--prose); font-size: 12.5px; color: var(--ps-muted); }

/* 画面写真がまだない作品の仮置き。何が入るかだけを書く */
.ph {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  padding: 16px;
  border: 1px dashed #3a5f96;
  border-radius: 3px;
  background: var(--ps-blue-deeper);
  font-family: var(--prose);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
  color: var(--ps-dim);
}
.wk-index .ph { aspect-ratio: 16 / 10; }
/* 画面のない作品は、一覧でその作品を表す数字を見せる */
.wk-index .ph.num { flex-direction: column; gap: 6px; border-style: solid; border-color: var(--line); color: var(--ps-muted); }
.wk-index .ph.num b { font-family: var(--mono); font-size: 34px; font-weight: 700; color: var(--ps-white); }
.wk-index .ph.num b em { margin-left: 3px; font-style: normal; font-size: 0.45em; color: var(--ps-muted); }

/* エディタのタブの並び（実際の画面の構成を写したもの） */
.tabbar { display: flex; flex-wrap: wrap; margin: 0 0 20px; border-bottom: 1px solid var(--line); }
.tabbar span {
  margin-bottom: -1px;
  padding: 9px 14px;
  border-bottom: 2px solid transparent;
  font-family: var(--prose);
  font-size: 13px;
  color: var(--ps-muted);
}
.tabbar span.on { color: var(--ps-white); border-bottom-color: var(--ps-yellow); }

/* 縦長の写真は、幅を抑えて置く */
.shot.portrait { max-width: 420px; }

/* ---------- 図（SVG） ---------- */

.fig { margin: 0; }
.fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig figcaption { margin-top: 14px; max-width: 720px; font-family: var(--prose); font-size: 13px; line-height: 1.8; color: var(--ps-muted); }

.t { font-family: var(--prose); font-size: 15px; fill: var(--ps-gray); }
.t.s { font-size: 13px; fill: var(--ps-muted); }
.t.b { font-weight: 700; fill: var(--ps-white); }
.t.cy { fill: var(--ps-cyan); }
.t.ye { fill: var(--ps-yellow); }
.t.gr { fill: var(--ps-green); }
.m { font-family: var(--mono); font-size: 13px; fill: var(--ps-dim); }
.m.cy { fill: var(--ps-cyan); }
.ln { fill: none; stroke: #4d73ab; stroke-width: 1.5; }
.ln.soft { stroke: var(--line); stroke-width: 1; }
.ln.cy { stroke: var(--ps-cyan); }
.ln.ye { stroke: var(--ps-yellow); }
.ln.gr { stroke: var(--ps-green); }
.ln.hot { stroke: var(--ps-white); stroke-width: 2.5; }
.nd { fill: var(--ps-blue); stroke: #4d73ab; stroke-width: 1.5; }

/* ---------- 表（行の罫線だけ） ---------- */

.w-t { width: 100%; border-collapse: collapse; font-family: var(--prose); font-size: 14px; }
.w-t th {
  padding: 0 20px 10px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ps-muted);
}
.w-t td {
  padding: 14px 20px 14px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  line-height: 1.8;
  color: var(--ps-gray);
}
.w-t td:first-child { color: var(--ps-white); font-weight: 600; min-width: 9em; }
.w-t .num { font-family: var(--mono); font-size: 13px; color: var(--ps-muted); }
.w-t .num b { color: var(--ps-white); font-weight: 600; }
.w-t .bad { color: var(--ps-white); }

/* ---------- 横棒（1系列） ---------- */

.bars { display: grid; grid-template-columns: max-content 1fr max-content; gap: 10px 16px; align-items: center; }
.bars .row { display: contents; }
.bars .bl { font-family: var(--prose); font-size: 13.5px; color: var(--ps-gray); }
.bars .bt { position: relative; height: 10px; background: var(--line-soft); border-radius: 0 3px 3px 0; }
.bars .bf { position: absolute; top: 0; bottom: 0; left: 0; background: var(--ps-cyan); border-radius: 0 3px 3px 0; }
.bars .bf.range { opacity: 0.55; border-radius: 3px; }
.bars .bv { font-family: var(--mono); font-size: 12.5px; color: var(--ps-muted); }
.bars .bv b { font-weight: 600; color: var(--ps-white); }
.bars .row:hover .bl, .bars .row:hover .bv b { color: var(--ps-yellow); }
.bars .axis { grid-column: 2; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: var(--ps-dim); }

/* ---------- フリップエスケイプ：担当の層 ---------- */

.layers { max-width: 900px; }
.layers .ly { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 22px 0; }
.layers .ly + .ly { border-top: 1px solid var(--line); }
.layers .who { font-family: var(--prose); font-size: 14px; font-weight: 700; color: var(--ps-gray); }
.layers .who small { display: block; margin-top: 2px; font-weight: 400; font-size: 12.5px; color: var(--ps-muted); }
.layers .what { font-family: var(--prose); font-size: 15px; line-height: 1.9; color: var(--ps-gray); }
.layers .api { border-top: 2px solid var(--ps-yellow) !important; }
.layers .api .who { color: var(--ps-yellow); }
.layers .self .who { color: var(--ps-yellow); }
.layers .parts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.layers .parts b { display: block; font-family: var(--prose); font-size: 15px; color: var(--ps-white); }
.layers .parts span { display: block; margin-top: 4px; font-family: var(--prose); font-size: 13px; line-height: 1.7; color: var(--ps-muted); }

/* ---------- コード ---------- */

.w-code { margin: 0; min-width: 0; }
.w-code figcaption { margin-bottom: 8px; font-family: var(--mono); font-size: 12px; color: var(--ps-dim); }
.w-code pre { margin: 0; overflow-x: auto; }

/* ============================================================
   画像で見せる並び
   文字を読まなくても、画像とひとことだけで流れが追えるように並べる。
   ============================================================ */

.story { display: grid; gap: 72px; margin-top: 72px; }
/* 並びの中の画像は、列の幅を超えて広がらない（仮置きの長いファイル名で押し広げられないように） */
.story figure { min-width: 0; }
/* ひとことは、本文と同じ幅で折り返す */
.story figcaption { max-width: 720px; }

/* 1枚を大きく。本文の枠いっぱいに出す */
.story .wide-shot { min-width: 0; }

/* 前と後を並べる */
.story .pair, .w-sec .pair { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); align-items: center; }
.w-sec .pair { margin-top: 28px; align-items: start; }
.w-sec .pair > .to { padding-top: 120px; }
/* 節の中の小見出し */
.w-sub-h { margin: 64px 0 10px; font-family: var(--prose); font-size: 19px; font-weight: 700; line-height: 1.6; color: var(--ps-white); }
.story .pair > .to, .w-sec .pair > .to {
  text-align: center;
  font-family: var(--mono);
  font-size: 20px;
  color: var(--ps-dim);
}

.story .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.story .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }

/* 変わる前（小）の上に、変わった後（大）を重ねる。1枚目が2枚目に「なる」ことを位置で見せる */
.story .morph { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; }
.morph > .into { grid-column: 1 / -1; grid-row: 1; }
/* 小窓：後の画像の内側に収まる。枠と影で「上に置いた」ことをはっきり見せる */
.morph > .from {
  grid-column: 1 / span 5;
  grid-row: 1;
  align-self: start;
  position: relative;
  z-index: 1;
  margin: 24px 0 0 24px;
  padding: 10px 10px 2px;
  border-radius: 8px;
  background: var(--band-gallery);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.morph > .from figcaption { max-width: none; margin-top: 8px; font-size: 14px; }
/* 後の画像の大事な部分が上にあるときは、小窓を左下に置く（下のひとことの分だけ上げる） */
.morph.inset-bottom > .from { align-self: end; margin: 0 0 88px 24px; }

/* 同じ位置から撮った2枚を、すき間なく並べて見比べる。ひとことは2枚で1つ */
.story .compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin: 0; }
.compare > figcaption { grid-column: 1 / -1; }
.compare .slot figcaption { margin-top: 8px; font-size: 13px; color: var(--ps-muted); }

/* 左から右へ、1段ずつ下がる */
.story .stairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.stairs > :nth-child(2) { margin-top: 72px; }
.stairs > :nth-child(3) { margin-top: 144px; }

/* 1本の流れを、横に3つ並べる（番号は画像の帯全体で通し番号） */
.story .seq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; counter-reset: seq; }

/* 大きい1枚と、小さい2枚 */
.story .mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; align-items: start; }
.mosaic > :first-child { grid-column: 1 / span 8; grid-row: 1 / span 2; }
.mosaic > :nth-child(2) { grid-column: 9 / -1; grid-row: 1; }
.mosaic > :nth-child(3) { grid-column: 9 / -1; grid-row: 2; }

/* 画像の横に、ひとことを大きく置く */
.story .aside { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; }
.aside > .slot, .aside > .shot { display: contents; }
.aside .slot > :not(figcaption), .aside .shot > :not(figcaption) { grid-column: 1 / span 8; grid-row: 1; }
.aside figcaption {
  grid-column: 9 / -1;
  grid-row: 1;
  align-self: end;
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  color: var(--ps-gray);
}
.aside.flip .slot > :not(figcaption), .aside.flip .shot > :not(figcaption) { grid-column: 5 / -1; grid-row: 1; }
.aside.flip figcaption { grid-column: 1 / span 4; }


/* 大小2枚を、段違いに置く */
.story .offset { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
.offset > :first-child { grid-column: 1 / span 7; }
.offset > :last-child { grid-column: 8 / -1; margin-top: 128px; }

/* 画像の差し込み口 */
.slot { margin: 0; }
.slot > img, .slot > video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background: var(--ps-blue-deeper);
}
.slot > img { cursor: zoom-in; }
.slot > audio { display: block; width: 100%; }
.slot-ph {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  aspect-ratio: 16 / 9;
  padding: 20px 24px;
  border: 1px dashed #5a82bd;
  border-radius: 3px;
  background: var(--ps-blue-deeper);
  font-family: var(--prose);
  font-size: 14px;
  line-height: 1.75;
  color: var(--ps-muted);
}
.slot-ph b { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ps-yellow); }
.slot-ph small { font-family: var(--mono); font-size: 11.5px; color: var(--ps-dim); overflow-wrap: anywhere; }
.slot-ph.tall { aspect-ratio: 4 / 5; }
.slot-ph.square { aspect-ratio: 1 / 1; }
.slot-ph.audio { aspect-ratio: auto; min-height: 96px; }

/* 画像の下のひとこと。これだけ読めば流れが分かる長さにする */
.slot figcaption, .story .shot figcaption, .compare > figcaption {
  margin-top: 12px;
  font-family: var(--prose);
  font-size: 15px;
  line-height: 1.75;
  color: var(--ps-gray);
}
.slot figcaption b, .story .shot figcaption b, .compare > figcaption b { color: var(--ps-white); }

/* ============================================================
   こだわったこと
   1つのことについて、やりたかったこと → 壁 → どう作ったか → どうなったか を順に語る。
   ============================================================ */

.kd { margin-top: 120px; padding-top: 44px; border-top: 1px solid var(--line); }
.kd-label { margin: 0 0 10px; font-family: var(--prose); font-size: 14px; font-weight: 700; color: var(--ps-yellow); }
.kd-title {
  margin: 0 0 40px;
  max-width: 860px;
  font-family: var(--prose);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  line-height: 1.55;
  color: var(--ps-white);
}
.kd-flow { display: grid; grid-template-columns: 170px 1fr; gap: 0 36px; margin: 0; }
.kd-flow > dt {
  padding: 26px 0;
  border-top: 1px solid var(--line-soft);
  font-family: var(--prose);
  font-size: 14px;
  font-weight: 700;
  color: var(--ps-muted);
}
.kd-flow > dd { margin: 0; padding: 26px 0; border-top: 1px solid var(--line-soft); min-width: 0; }
.kd-flow > dt:first-of-type, .kd-flow > dt:first-of-type + dd { border-top: 0; padding-top: 0; }
.kd-flow > dd > p {
  max-width: 720px;
  margin: 0 0 14px;
  font-family: var(--prose);
  font-size: 15.5px;
  line-height: 1.95;
  color: var(--ps-gray);
}
.kd-flow > dd > p:last-child { margin-bottom: 0; }
.kd-flow > dd > p strong { color: var(--ps-white); }
.kd-flow > dd > .shot, .kd-flow > dd > .fig, .kd-flow > dd > .slot, .kd-flow > dd > .cols, .kd-flow > dd > .w-t, .kd-flow > dd > .bars-wrap { margin-top: 24px; }
.kd-flow code {
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(111, 218, 218, 0.1);
  color: var(--ps-cyan);
  font-family: var(--mono);
  font-size: 0.88em;
}

.wk-index.two { grid-template-columns: repeat(2, 1fr); }

/* ---------- 区切り ---------- */




/* ---------- 作品の入口：作品名をいちばん大きく ---------- */

.project-detail > .chapter { padding-top: 104px; margin-bottom: 28px; }
.project-detail .chapter-heading { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.project-detail .chapter-num { padding: 0; border: 0; font-size: 13px; color: var(--ps-dim); }
.project-detail .chapter-title {
  font-size: clamp(38px, 5.6vw, 64px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.project-detail .chapter-cmd { font-size: 13.5px; }
.w-lede { font-size: clamp(19px, 2.2vw, 24px); font-weight: 700; line-height: 1.75; color: #e3e9f6; }

/* ============================================================
   帯：読む場所ごとに背景を変える
   1つの作品は「入口 → 1 画面 → 2 作品の詳細 → 3 こだわったこと」
   の順に読む。帯の色はどれもコンソールの青の濃淡で、方眼はすべての帯に通す。
   入口と「作品の詳細」はページの地のまま。画像は暗く沈め、こだわったことは一段明るく浮かせる。
   帯は本文の枠のまま、背景だけを画面の端まで伸ばす。
   ============================================================ */

/* 作品ページの線は、トップページより一段はっきりさせる */
.subpage-main { --line: #34598f; --line-soft: #2a4c80; }
.subpage-main [stroke="#2e558c"] { stroke: #4d73ab; }
.subpage-main [fill="#2e558c"] { fill: #4d73ab; }

:root {
  --read: #cfd7ec;          /* 長い文章の文字色。gray より一段明るく */
  --band-gallery: #010e24;
  --band-kd: #0c3470;
  --line-strong: #5a7fb8;   /* 帯の見出しなど、区切りをはっきり見せる線 */
  --grid: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
}

/* 帯の背景は、本文の枠の外まで伸ばした疑似要素で塗る（横スクロールは html で切る）。
   方眼は body と同じ間隔で、すべての帯に通す */
html, body { overflow-x: clip; }
.story, .kd { position: relative; isolation: isolate; }
.story::before, .kd::before {
  content: "";
  position: absolute;
  inset: 0 -100vmax;
  z-index: -1;
  background-color: var(--band);
  background-image: var(--grid);
  background-size: 96px 96px;
}

/* 目次から飛んだとき、固定の帯に隠れないように */
.project-detail [id] { scroll-margin-top: 24px; }

/* ---------- 帯の見出し：いま何段目かを示す ---------- */

.band-h {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--prose);
  font-size: 15px;
  font-weight: 700;
  color: var(--ps-white);
}
.band-h span {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  color: var(--ps-yellow);
}
.band-h::after { content: ""; flex: 1; height: 2px; background: var(--line-strong); }

/* ---------- 1 画面 ---------- */

.story {
  margin-top: 72px;
  padding: 56px 0 104px;
  --band: var(--band-gallery);
  counter-reset: shot;
}
.story > .band-h { margin-bottom: -16px; }
.story .slot-ph { background: #0a2150; border-color: #5579b3; }
.story .slot > img, .story .slot > video, .story .shot img { background: #0a2150; }
.story .slot figcaption, .story .shot figcaption, .story .compare > figcaption {
  font-size: 16px;
  line-height: 1.8;
  color: var(--read);
}
.story .aside figcaption { font-size: 16px; line-height: 1.85; color: var(--read); }
.story .aside figcaption b { display: block; margin-bottom: 6px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; line-height: 1.5; color: var(--ps-white); }

/* 画像の並びがどう変わっても、読む順番は番号で分かる。
   見比べる2枚（.compare）は2枚で1つと数える */
.story figure:not(.compare .slot):not(.compare) > figcaption,
.story .compare > figcaption { counter-increment: shot; position: relative; padding-left: 1.9em; }
.story figure:not(.compare .slot):not(.compare) > figcaption::before,
.story .compare > figcaption::before {
  content: counter(shot);
  position: absolute;
  top: 0.1em;
  left: 0;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--ps-yellow);
}
.story .aside figcaption { padding-left: 0; }
.story .aside figcaption::before { position: static; display: block; margin: 0 0 6px; font-size: 16px; }

/* ---------- 2 作品の詳細（ページの地のまま） ---------- */

.w-body { padding: 72px 0 128px; counter-reset: sec; }
.w-body > .band-h + *, .w-body > .band-h + .w-sec { margin-top: 56px; }
.w-body .w-sec { margin-top: 112px; }

/* 解説の見出しに、目次と同じ番号をつける */
.w-body .w-h { counter-increment: sec; font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 16px; }
.w-body .w-h::before {
  content: "2-" counter(sec);
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ps-yellow);
}

/* 長い文章は大きく、明るく、字間を少し空ける */
.w-sub, .w-p, .kd-flow > dd > p {
  font-size: 16.5px;
  line-height: 2;
  letter-spacing: 0.02em;
  color: var(--read);
}
.w-col p { font-size: 15px; color: var(--ps-gray); }
.w-list li, .steps li { font-size: 15.5px; }
.steps li { color: var(--ps-gray); }
.w-note { font-size: 14px; color: var(--ps-gray); }
.w-t { font-size: 15px; }
.fig figcaption { font-size: 14px; }

/* ---------- 読み方の地図（作品の入口に置く目次） ---------- */

.w-toc { margin-top: 40px; }
.w-toc > ol {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr) minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.w-toc > ol > li { position: relative; padding: 20px 24px 4px 0; }
.w-toc > ol > li + li { padding-left: 24px; border-left: 1px solid var(--line); }
/* 段と段のあいだに、進む向きを示す */
.w-toc > ol > li + li::before {
  content: "→";
  position: absolute;
  top: 18px;
  left: -9px;
  padding: 0 2px;
  background: var(--ps-blue);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--ps-dim);
}
.w-toc .t-step {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--prose);
  font-size: 16px;
  font-weight: 700;
  color: var(--ps-white);
  text-decoration: none;
}
.w-toc .t-step span { font-family: var(--mono); font-size: 20px; color: var(--ps-yellow); }
.w-toc p { margin: 8px 0 0; font-family: var(--prose); font-size: 13.5px; line-height: 1.8; color: var(--ps-muted); }
.w-toc li ol { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: sub; }
.w-toc li ol li { counter-increment: sub; }
.w-toc li ol a {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  font-family: var(--prose);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ps-gray);
  text-decoration: none;
}
.w-toc li ol a::before { content: "2-" counter(sub); flex-shrink: 0; min-width: 2.2em; font-family: var(--mono); font-size: 12px; color: var(--ps-dim); }
.w-toc .kd-step p a { font-weight: 700; color: var(--ps-yellow); text-decoration: none; }
.w-toc a:hover, .w-toc .t-step:hover { color: var(--ps-yellow); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 3 こだわったこと：一段明るい青の帯 ---------- */

.kd {
  --band: var(--band-kd);
  --ps-muted: #a3b0d0;
  --ps-dim: #9aa8cc;
  --line: color-mix(in srgb, var(--accent, #4a74b4) 45%, var(--band-kd));
  --line-soft: color-mix(in srgb, var(--accent, #3d67a6) 30%, var(--band-kd));
  --ps-blue: var(--band-kd);
  margin-top: 0;
  padding: 56px 0 120px;
  border-top: 0;
}
.kd > .band-h { margin-bottom: 40px; }
.kd-label.band-h { font-size: 15px; }
.kd-title { margin-bottom: 56px; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.5; }

/* 4つの段を、番号つきの縦の流れにする */
.kd-flow { counter-reset: kd; grid-template-columns: 200px minmax(0, 1fr); }
.kd-flow > dt { counter-increment: kd; font-size: 15px; color: var(--ps-white); }
.kd-flow > dt::before {
  content: "3-" counter(kd);
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--ps-yellow);
}
.kd-flow > dt, .kd-flow > dd { padding: 36px 0; }
.kd-flow > dt:first-of-type, .kd-flow > dt:first-of-type + dd { padding-top: 0; }

/* 帯の上の図：SVGに直接書いた地の色を、帯の色に合わせる */
.kd [fill="#012456"] { fill: var(--band-kd); }
.kd .slot-ph { border-color: #6a8fc6; }

/* ---------- 作品の区切り ---------- */

/* 前の作品の「こだわったこと」の帯のすぐ下に、はっきりした線を引いて次の作品を始める */
.project-detail + .project-detail { border-top: 2px solid var(--line-strong); }

/* ---------- 作品のタブ（上に固定される） ----------
   ターミナルのタブ列にならう。1作品が1タブ。読んでいる作品のタブだけが
   ページと同じ地の色になって本文とつながり、上の線がその作品を読んだ分だけ伸びる。
   右端には、いま読んでいる段と見出しを出す。 */

.reading-nav {
  position: sticky;
  top: var(--stick-tabs, 115px);
  z-index: 17;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0 24px;
  margin: 32px 0 0;
  padding: 0;
  border: 0;
  background: none;
  backdrop-filter: none;
  font-size: 14px;
}
.reading-nav::before {
  content: "";
  position: absolute;
  inset: 0 -100vmax;
  z-index: -1;
  background: var(--ps-blue-deeper);
  border-bottom: 1px solid var(--line);
}
.reading-nav .jump {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.reading-nav .jump::-webkit-scrollbar { display: none; }
.reading-nav .jump a,
.reading-nav .jump a.is-current {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 13px 18px 12px;
  border-radius: 0;
  border-right: 1px solid var(--line-soft);
  background: none;
  font-family: var(--prose);
  font-weight: 500;
  white-space: nowrap;
  color: var(--ps-muted);
  text-decoration: none;
}
.reading-nav .jump a:first-child { border-left: 1px solid var(--line-soft); }
.reading-nav .jump a span { margin: 0; font-family: var(--mono); font-size: 12px; opacity: 1; color: var(--ps-dim); }
.reading-nav .jump a:hover { color: var(--ps-white); }

/* 読んでいる作品のタブ：地の色でページとつながる。上の線が読んだ分だけ伸びる */
.reading-nav .jump a.is-reading {
  margin-bottom: -1px;
  background: var(--ps-blue);
  font-weight: 700;
  color: var(--ps-white);
}
.reading-nav .jump a.is-reading span { color: var(--ps-yellow); }
.reading-nav .jump a.is-reading::before,
.reading-nav .jump a.is-reading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
}
.reading-nav .jump a.is-reading::before { background: var(--line-strong); }
.reading-nav .jump a.is-reading::after {
  background: var(--ps-yellow);
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
}

/* いま読んでいる段と見出し */
.reading-nav .where {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 44%;
  font-family: var(--prose);
  font-size: 13px;
  white-space: nowrap;
}
.reading-nav .where[hidden] { display: none; }
.reading-nav .where span { flex-shrink: 0; font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--ps-yellow); }
.reading-nav .where b { overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--ps-gray); }


/* ============================================================
   作品ごとの色
   その作品の画面から1色をとり、画像の帯・こだわったことの帯・番号をその色で染める。
   構造は全作品で同じまま、どの作品を読んでいるかが色で分かる。
   黄色は「自分が担当したこと」の印として残し、番号には使わない。
   ============================================================ */

#wiki-golf, [href="#wiki-golf"]                 { --accent: #86d99a; --band-gallery: #04160c; --band-kd: #0f3a24; }
#flip-escape, [href="#flip-escape"]             { --accent: #ff9a80; --band-gallery: #170606; --band-kd: #431414; }
#slinky, [href="#slinky"]                       { --accent: #c8a8ff; --band-gallery: #0e0a1c; --band-kd: #2b1f50; }
#creator-kousien, [href="#creator-kousien"]     { --accent: #ff9f8a; --band-gallery: #170a07; --band-kd: #44211a; }
#collectlight, [href="#collectlight"]           { --accent: #ffd166; --band-gallery: #110d04; --band-kd: #3b2d0c; }
#sorosoro, [href="#sorosoro"]                   { --accent: #a9aeff; --band-gallery: #07081b; --band-kd: #202552; }
#one-more-plank, [href="#one-more-plank"]       { --accent: #6fe3f0; --band-gallery: #031519; --band-kd: #0b3a44; }
#desktop-organizer, [href="#desktop-organizer"] { --accent: #bdb9ff; --band-gallery: #0c0b20; --band-kd: #2a2860; }
#simple-zipper, [href="#simple-zipper"]         { --accent: #7ddc8f; --band-gallery: #04140a; --band-kd: #0e3a1d; }
#git-tooljp, [href="#git-tooljp"]               { --accent: #ffae7a; --band-gallery: #150b05; --band-kd: #40230e; }
#boyscout-tajimi, [href="#boyscout-tajimi"]     { --accent: #9ad88f; --band-gallery: #07140a; --band-kd: #1b3a18; }
#downloadex, [href="#downloadex"]               { --accent: #80bfff; --band-gallery: #04101e; --band-kd: #0d2e52; }

/* 番号・段の見出しは作品の色で */
.project-detail .chapter-num,
.band-h span,
.w-toc .t-step span,
.w-toc .kd-step p a,
.project-detail .kd-label,
.w-body .w-h::before,
.kd-flow > dt::before,
.story figure:not(.compare .slot):not(.compare) > figcaption::before,
.story .compare > figcaption::before { color: var(--accent, var(--ps-yellow)); }

/* 作品名の下に、作品の色の太い線を1本 */
.project-detail .chapter-title { padding-bottom: 14px; border-bottom: 4px solid var(--accent, var(--line-strong)); }
.project-detail .chapter-heading { align-items: flex-start; }

/* 帯の見出しの線も作品の色に寄せる */
.band-h::after { background: color-mix(in srgb, var(--accent, #5a7fb8) 55%, transparent); }

/* 画像の仮置きも、帯の色になじませる */
.story .slot-ph {
  background: color-mix(in srgb, var(--accent, #5579b3) 9%, var(--band-gallery));
  border-color: color-mix(in srgb, var(--accent, #5579b3) 45%, transparent);
}
.story .slot-ph b { color: var(--accent, var(--ps-yellow)); }
.kd .slot-ph { border-color: color-mix(in srgb, var(--accent, #6a8fc6) 55%, transparent); }

/* ページ冒頭の作品一覧：上に作品の色の線、番号も同じ色 */
.wk-index a { border-top: 3px solid var(--accent, var(--line)); padding-top: 12px; }
.wk-index .n { color: var(--accent, var(--ps-dim)); }
.wk-index a:hover b { color: var(--accent, var(--ps-yellow)); }

/* 上のタブ：読んでいる作品の色で、読んだ分の線を伸ばす */
.reading-nav .jump a.is-reading span { color: var(--accent, var(--ps-yellow)); }
.reading-nav .jump a.is-reading::after { background: var(--accent, var(--ps-yellow)); }


/* ============================================================
   作品の入口：作品ごとに並べ方を変える
   部品（作品名・リード・表紙・数字・情報）は全作品で同じ。
   並べ方と数字の見せ方を、その作品の中身にちなんで変える。
   ============================================================ */

.w-entry { display: grid; column-gap: 56px; align-items: start; grid-template-areas: "t" "l" "c" "n" "b"; }
.w-entry > .chapter { grid-area: t; }
.w-entry > .w-lede { grid-area: l; }
.w-entry > .w-cover { grid-area: c; min-width: 0; }
.w-entry > .bignums { grid-area: n; }
.w-entry > .w-bar { grid-area: b; }

/* --- WikiGOLF：数字をスコアカードに --- */
[data-entry="scorecard"] .bignums {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 2px solid var(--accent);
  border-radius: 4px;
}
[data-entry="scorecard"] .bignums > div { flex-direction: column-reverse; justify-content: flex-end; padding: 0 20px 18px; }
[data-entry="scorecard"] .bignums > div + div { border-left: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
[data-entry="scorecard"] .bignums span {
  margin: 0 -20px 14px;
  padding: 8px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  font-weight: 700;
  color: var(--ps-white);
}

/* --- フリップエスケイプ：大きな絵の上に、作品名の板を重ねる --- */
[data-entry="poster"] .w-entry { grid-template-areas: "c" "l" "n" "b"; }
[data-entry="poster"] .w-entry > .w-cover { margin-top: 72px; }
/* 作品名の板は、表紙の画像の左下に、画像からはみ出さずに載せる */
[data-entry="poster"] .w-entry > .chapter {
  grid-area: c;
  position: relative;
  z-index: 2;
  align-self: end;
  justify-self: start;
  max-width: calc(100% - 64px);
  margin: 0 0 76px 32px;
  padding: 22px 30px 18px;
  border-radius: 6px;
  background: var(--ps-blue);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}
[data-entry="poster"] .w-entry > .w-lede { margin-top: 32px; }
[data-entry="poster"] .w-entry > .chapter::before { display: none; }
[data-entry="poster"] .chapter-title { border-bottom: 0; padding-bottom: 0; }

/* --- SLINKY：作品名も数字も、1段ずつ下りていく --- */
[data-entry="stairs"] .w-entry { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "t c" "l c" "n n" "b b"; }
[data-entry="stairs"] .w-entry > .w-cover { margin-top: 104px; }
[data-entry="stairs"] .chapter-title { border-bottom: 0; }
[data-entry="stairs"] .chapter-title > span { display: inline-block; }
[data-entry="stairs"] .chapter-title > span:nth-child(2) { transform: translateY(0.14em); }
[data-entry="stairs"] .chapter-title > span:nth-child(3) { transform: translateY(0.28em); }
[data-entry="stairs"] .chapter-title > span:nth-child(4) { transform: translateY(0.42em); }
[data-entry="stairs"] .chapter-title > span:nth-child(5) { transform: translateY(0.56em); }
[data-entry="stairs"] .chapter-title > span:nth-child(6) { transform: translateY(0.70em); }
[data-entry="stairs"] .chapter-heading { margin-bottom: 0.9em; }
[data-entry="stairs"] .bignums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: start; }
[data-entry="stairs"] .bignums > div { padding: 14px 18px 0; border-top: 3px solid var(--accent); }
[data-entry="stairs"] .bignums > div:nth-child(2) { margin-top: 28px; }
[data-entry="stairs"] .bignums > div:nth-child(3) { margin-top: 56px; }
[data-entry="stairs"] .bignums > div:nth-child(4) { margin-top: 84px; }

/* --- CreatorKousien：表紙と実績の数字 --- */
[data-entry="numbers"] .w-entry { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-areas: "t c" "l c" "n n" "b b"; }
[data-entry="numbers"] .w-entry > .w-cover { margin-top: 104px; }
[data-entry="numbers"] .bignums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
[data-entry="numbers"] .bignums b { font-size: clamp(36px, 4.2vw, 64px); }
[data-entry="numbers"] .bignums > div { padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); }

/* --- コレクライト：暗いダンジョンの画面を左に大きく --- */
[data-entry="lantern"] .w-entry { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-areas: "c t" "c l" "n n" "b b"; }
[data-entry="lantern"] .w-entry > .w-cover { margin-top: 104px; }

/* --- そろそろ帰ろう：映画のタイトルカードのように、真ん中に --- */
[data-entry="titlecard"] .w-entry { text-align: center; }
[data-entry="titlecard"] .chapter-heading { align-items: center; }
[data-entry="titlecard"] .chapter-title { font-size: clamp(44px, 8vw, 104px); letter-spacing: 0.08em; border-bottom: 0; }
[data-entry="titlecard"] .chapter::before { right: 50%; transform: translateX(50%); }
[data-entry="titlecard"] .w-lede { max-width: 760px; margin-left: auto; margin-right: auto; }
[data-entry="titlecard"] .bignums { justify-content: center; }
[data-entry="titlecard"] .bignums > div { align-items: center; }
[data-entry="titlecard"] .w-bar { text-align: left; }

/* --- ONE MORE PLANK：数字を、高さの違う板に載せる --- */
[data-entry="planks"] .w-entry { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "t c" "l c" "n n" "b b"; }
[data-entry="planks"] .w-entry > .w-cover { margin-top: 104px; }
[data-entry="planks"] .bignums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; align-items: end; min-height: 170px; }
[data-entry="planks"] .bignums > div { padding: 0 4px 10px; border-bottom: 10px solid color-mix(in srgb, var(--accent) 55%, var(--ps-blue)); }
[data-entry="planks"] .bignums > div:nth-child(1) { margin-bottom: 40px; }
[data-entry="planks"] .bignums > div:nth-child(3) { margin-bottom: 64px; }
[data-entry="planks"] .bignums > div:nth-child(4) { margin-bottom: 20px; }

/* --- DesktopOrganizer：数字を、アプリの棚と同じ見た目に --- */
[data-entry="shelves"] .w-entry { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "t t" "c l" "n n" "b b"; }
[data-entry="shelves"] .w-entry > .w-lede { margin-top: 0; }
[data-entry="shelves"] .bignums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
[data-entry="shelves"] .bignums > div {
  flex-direction: column-reverse;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(30, 30, 36, 0.8);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
[data-entry="shelves"] .bignums span { margin: 0; padding: 7px 12px; background: color-mix(in srgb, var(--accent) 16%, transparent); font-size: 12.5px; color: var(--ps-gray); }
[data-entry="shelves"] .bignums b { padding: 16px 12px 18px; }

/* --- SimpleZipper：縦長のウィンドウを左に、数字はログのように1行ずつ --- */
[data-entry="window"] .w-entry { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); grid-template-areas: "c t" "c l" "c n" "b b"; }
[data-entry="window"] .w-entry > .w-cover { margin-top: 104px; }
[data-entry="window"] .bignums { flex-direction: column; gap: 0; }
[data-entry="window"] .bignums > div { flex-direction: row; align-items: baseline; gap: 18px; padding: 10px 0; border-top: 1px solid var(--line); }
[data-entry="window"] .bignums b { min-width: 4.6em; font-size: clamp(24px, 2.8vw, 34px); }
[data-entry="window"] .bignums span { margin: 0; font-size: 14px; }

/* --- GitPR Fluent：数字を、gitのログのように1本の線でつなぐ --- */
[data-entry="gitlog"] .w-entry { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-areas: "t t" "l l" "c n" "b b"; }
[data-entry="gitlog"] .bignums { flex-direction: column; gap: 0; margin-top: 0; padding-left: 28px; border-left: 2px solid var(--accent); }
[data-entry="gitlog"] .bignums > div { position: relative; padding: 4px 0 22px; }
[data-entry="gitlog"] .bignums > div::before {
  content: "";
  position: absolute;
  top: 14px;
  left: -36px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--ps-blue);
}
[data-entry="gitlog"] .bignums b { font-size: clamp(26px, 3vw, 36px); }

/* --- boyscout：表紙をブラウザの枠に入れる --- */
[data-entry="site"] .w-cover { overflow: hidden; border-radius: 8px; background: #e9eaed; box-shadow: 0 0 0 1px #d3d3d3; }
[data-entry="site"] .w-cover::before {
  content: attr(data-url);
  display: block;
  margin: 8px 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #fff;
  font-family: var(--mono);
  font-size: 12.5px;
  color: #3c4043;
}
[data-entry="site"] .w-cover img { border-radius: 0; }
[data-entry="site"] .w-cover figcaption { margin: 0; padding: 8px 14px 10px; background: var(--ps-blue); }

/* --- DownloadEx：縦長の設定画面を右に、数字はフォルダの木のように --- */
[data-entry="folders"] .w-entry { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); grid-template-areas: "t c" "l c" "n c" "b b"; }
[data-entry="folders"] .w-entry > .w-cover { margin-top: 104px; }
[data-entry="folders"] .bignums { flex-direction: column; gap: 6px; }
[data-entry="folders"] .bignums > div { flex-direction: row; align-items: baseline; gap: 14px; }
[data-entry="folders"] .bignums > div::before { content: "├─"; font-family: var(--mono); color: var(--accent); }
[data-entry="folders"] .bignums > div:last-child::before { content: "└─"; }
[data-entry="folders"] .bignums b { min-width: 3.4em; font-size: clamp(24px, 2.8vw, 34px); }
[data-entry="folders"] .bignums span { margin: 0; font-size: 14px; }


/* 左右2列の入口では、作品名を一回り小さくして、1語が途中で折れないようにする */
[data-entry="stairs"] .chapter-title, [data-entry="lantern"] .chapter-title, [data-entry="planks"] .chapter-title,
[data-entry="window"] .chapter-title, [data-entry="folders"] .chapter-title,
[data-entry="numbers"] .chapter-title { font-size: clamp(32px, 3.9vw, 54px); overflow-wrap: normal; }


/* ============================================================
   動き
   スクロールしてその場所に来たときに一度だけ動く（js/play.js が .is-in を付ける）。
   動きは中身に合わせる：順番のあるものは順に、階段は下へ、板は上から置く。
   動きを減らす設定のときは、play.js が何もしないので最初から完成形で出る。
   ============================================================ */

.js-play .story > :not(.band-h),
.js-play .w-entry > .w-cover,
.js-play .w-entry > .w-lede,
.js-play .kd-title,
.js-play .w-body .w-sec {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0, 1);
}
.js-play .is-in.is-in { opacity: 1; transform: none; }

/* 横に並ぶ画像は、左から順に */
.js-play :is(.seq, .trio, .duo, .mosaic, .compare, .offset) > * { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0, 1); }
.js-play .is-in:is(.seq, .trio, .duo, .mosaic, .compare, .offset) > * { opacity: 1; transform: none; }
.js-play .is-in:is(.seq, .trio, .duo, .mosaic, .compare, .offset) > :nth-child(2) { transition-delay: 0.14s; }
.js-play .is-in:is(.seq, .trio, .duo, .mosaic, .compare, .offset) > :nth-child(3) { transition-delay: 0.28s; }

/* 階段の並びは、上の段から順に下りてくる */
.js-play .stairs > * { opacity: 0; transform: translateY(-48px); transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.3, 1.35, 0.5, 1); }
.js-play .stairs.is-in > * { opacity: 1; transform: none; }
.js-play .stairs.is-in > :nth-child(2) { transition-delay: 0.22s; }
.js-play .stairs.is-in > :nth-child(3) { transition-delay: 0.44s; }

/* 小窓は、後の画像が出てから横から滑り込む */
.js-play .morph > .from { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s ease 0.35s, transform 0.9s cubic-bezier(0.2, 0.7, 0, 1) 0.35s; }
.js-play .morph.is-in > .from { opacity: 1; transform: none; }

/* 帯の見出しの線は、左から引かれる */
.js-play .band-h::after { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(0.2, 0.7, 0, 1) 0.1s; }
.js-play .band-h.is-in::after { transform: none; }

/* こだわったことの4段は、上から順に */
.js-play .kd-flow > dt, .js-play .kd-flow > dd { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0, 1); }
.js-play .kd-flow > .is-in { opacity: 1; transform: none; }

/* 棒グラフは、左から伸びる */
.js-play .bars .bf { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0, 1); }
.js-play .bars.is-in .bf { transform: none; }
.js-play .bars.is-in .row:nth-child(2) .bf { transition-delay: 0.08s; }
.js-play .bars.is-in .row:nth-child(3) .bf { transition-delay: 0.16s; }
.js-play .bars.is-in .row:nth-child(4) .bf { transition-delay: 0.24s; }
.js-play .bars.is-in .row:nth-child(5) .bf { transition-delay: 0.32s; }
.js-play .bars.is-in .row:nth-child(6) .bf { transition-delay: 0.40s; }

/* --- 入口ごとの動き --- */

/* 数字は順に出て、JS で 0 から数え上がる */
.js-play .w-entry .bignums > div { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0, 1); }
.js-play .w-entry .bignums.is-in > div { opacity: 1; transform: none; }
.js-play .w-entry .bignums.is-in > div:nth-child(2) { transition-delay: 0.12s; }
.js-play .w-entry .bignums.is-in > div:nth-child(3) { transition-delay: 0.24s; }
.js-play .w-entry .bignums.is-in > div:nth-child(4) { transition-delay: 0.36s; }

/* SLINKY：文字が1文字ずつ、跳ねながら自分の段に下りる */
[data-entry="stairs"] .chapter-title > span:nth-child(1) { --y: 0em; }
[data-entry="stairs"] .chapter-title > span:nth-child(2) { --y: 0.14em; }
[data-entry="stairs"] .chapter-title > span:nth-child(3) { --y: 0.28em; }
[data-entry="stairs"] .chapter-title > span:nth-child(4) { --y: 0.42em; }
[data-entry="stairs"] .chapter-title > span:nth-child(5) { --y: 0.56em; }
[data-entry="stairs"] .chapter-title > span:nth-child(6) { --y: 0.70em; }
[data-entry="stairs"] .chapter-title > span { transform: translateY(var(--y)); }
.js-play [data-entry="stairs"] .chapter-title > span { opacity: 0; transform: translateY(calc(var(--y) - 0.9em)); transition: opacity 0.3s ease, transform 0.7s cubic-bezier(0.3, 1.6, 0.5, 1); }
.js-play [data-entry="stairs"] .chapter-title.is-in > span { opacity: 1; transform: translateY(var(--y)); }
.js-play [data-entry="stairs"] .chapter-title.is-in > span:nth-child(2) { transition-delay: 0.12s; }
.js-play [data-entry="stairs"] .chapter-title.is-in > span:nth-child(3) { transition-delay: 0.24s; }
.js-play [data-entry="stairs"] .chapter-title.is-in > span:nth-child(4) { transition-delay: 0.36s; }
.js-play [data-entry="stairs"] .chapter-title.is-in > span:nth-child(5) { transition-delay: 0.48s; }
.js-play [data-entry="stairs"] .chapter-title.is-in > span:nth-child(6) { transition-delay: 0.60s; }
.js-play [data-entry="stairs"] .bignums.is-in > div { transition-timing-function: ease, cubic-bezier(0.3, 1.5, 0.5, 1); }
.js-play [data-entry="stairs"] .bignums > div { transform: translateY(-36px); }

/* ONE MORE PLANK：板が上から置かれる */
.js-play [data-entry="planks"] .bignums > div { transform: translateY(-70px); transition: opacity 0.4s ease, transform 0.8s cubic-bezier(0.3, 1.5, 0.5, 1); }
.js-play [data-entry="planks"] .bignums.is-in > div { transform: none; }
.js-play [data-entry="planks"] .bignums.is-in > div:nth-child(2) { transition-delay: 0.25s; }
.js-play [data-entry="planks"] .bignums.is-in > div:nth-child(3) { transition-delay: 0.5s; }
.js-play [data-entry="planks"] .bignums.is-in > div:nth-child(4) { transition-delay: 0.75s; }

/* GitPR Fluent：線が下へ伸び、コミットの丸が順に打たれる */
.js-play [data-entry="gitlog"] .bignums { clip-path: inset(0 0 100% 0); transition: clip-path 1.4s cubic-bezier(0.2, 0.7, 0, 1); }
.js-play [data-entry="gitlog"] .bignums.is-in { clip-path: inset(0 -40px 0 -40px); }
.js-play [data-entry="gitlog"] .bignums > div::before { transform: scale(0); transition: transform 0.4s cubic-bezier(0.3, 1.8, 0.5, 1); }
.js-play [data-entry="gitlog"] .bignums.is-in > div::before { transform: none; }
.js-play [data-entry="gitlog"] .bignums.is-in > div:nth-child(2)::before { transition-delay: 0.3s; }
.js-play [data-entry="gitlog"] .bignums.is-in > div:nth-child(3)::before { transition-delay: 0.6s; }
.js-play [data-entry="gitlog"] .bignums.is-in > div:nth-child(4)::before { transition-delay: 0.9s; }

/* DownloadEx：数字がフォルダの木に1行ずつ振り分けられていく */
.js-play [data-entry="folders"] .bignums > div { transform: translateX(-28px); }

/* DesktopOrganizer：棚がぽんと置かれる */
.js-play [data-entry="shelves"] .bignums > div { transform: scale(0.9); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.3, 1.5, 0.5, 1); }

/* そろそろ帰ろう：作品名が、ゆっくり詰まりながら浮かび上がる */
.js-play [data-entry="titlecard"] .chapter-title { opacity: 0; letter-spacing: 0.5em; transition: opacity 1.6s ease, letter-spacing 2.2s cubic-bezier(0.2, 0.7, 0, 1); }
.js-play [data-entry="titlecard"] .chapter-title.is-in { opacity: 1; letter-spacing: 0.08em; }

/* フリップエスケイプ：絵が少し引いて、作品名の板が下から上がる */
.js-play [data-entry="poster"] .w-cover img { transform: scale(1.08); transition: transform 1.8s cubic-bezier(0.2, 0.7, 0, 1); }
.js-play [data-entry="poster"] .w-cover.is-in img { transform: none; }
.js-play [data-entry="poster"] .w-cover { overflow: hidden; }
.js-play [data-entry="poster"] .w-entry > .chapter { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease 0.4s, transform 0.9s cubic-bezier(0.2, 0.7, 0, 1) 0.4s; }
.js-play [data-entry="poster"] .w-entry > .chapter.is-in { opacity: 1; transform: none; }

/* WikiGOLF：スコアカードの欄が左から埋まる */
.js-play [data-entry="scorecard"] .bignums > div { transform: none; }
.js-play [data-entry="scorecard"] .bignums > div b { display: inline-block; transform: translateY(12px); transition: transform 0.6s cubic-bezier(0.3, 1.5, 0.5, 1); }
.js-play [data-entry="scorecard"] .bignums.is-in > div b { transform: none; }


/* ============================================================
   動かして確かめる仕掛け（js/widgets.js）
   本文で説明した仕組みを、その場で動かして確かめられるようにする。
   ============================================================ */

.wg {
  margin-top: 28px;
  padding: 22px 24px 22px;
  border: 1px solid color-mix(in srgb, var(--accent, #5a7fb8) 40%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent, #5a7fb8) 7%, transparent);
}
.wg:empty { display: none; }
.wg-label { margin: 0 0 4px; font-family: var(--prose); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--accent, var(--ps-yellow)); }
.wg-title { margin: 0 0 16px; font-family: var(--prose); font-size: 16px; font-weight: 700; color: var(--ps-white); }
.wg-out { margin: 14px 0 0; font-family: var(--prose); font-size: 15px; line-height: 1.85; color: var(--read); }
.wg-out b { color: var(--ps-white); }
.wg-out span { margin-left: 6px; color: var(--ps-muted); }
.wg-note { margin: 12px 0 0; font-family: var(--prose); font-size: 13px; color: var(--ps-muted); }
.wg input[type="range"] { width: 100%; accent-color: var(--accent, var(--ps-yellow)); }
.wg-btn {
  padding: 9px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--ps-blue-deep);
  font-family: var(--prose);
  font-size: 14px;
  font-weight: 600;
  color: var(--ps-white);
  cursor: pointer;
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.12s ease;
}
.wg-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--accent, #5a7fb8) 22%, var(--ps-blue-deep)); }
.wg-btn:active:not(:disabled) { transform: translateY(1px); }
.wg-btn:disabled { opacity: 0.32; cursor: not-allowed; }
.wg-btn.primary { margin-top: 16px; border-color: var(--accent); }

/* そろそろ帰ろう：針と判定 */
.wg-dial { margin-top: 14px; }
.wg-needle { stroke: var(--ps-white); stroke-width: 3; stroke-linecap: round; }
.wg-needle-tip { fill: var(--accent, var(--ps-yellow)); }
[data-widget="dial"] svg path { transition: fill 0.25s ease; }
[data-widget="dial"]:not(.is-back) svg path:nth-of-type(1) { fill: rgba(111, 218, 218, 0.34); }
[data-widget="dial"].is-back svg path:nth-of-type(2) { fill: rgba(245, 215, 107, 0.42); }
.wg-out strong.is-front { color: var(--ps-cyan); }
.wg-out strong.is-back { color: var(--ps-yellow); }

/* ONE MORE PLANK：波形 */
.wg-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.wg-tabs button {
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  font-family: var(--prose);
  font-size: 13.5px;
  color: var(--ps-gray);
  cursor: pointer;
}
.wg-tabs button.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--ps-white); }
.wg-wave { display: block; width: 100%; height: auto; }
.wg-wave path { fill: color-mix(in srgb, var(--accent, #6fe3f0) 55%, transparent); transition: d 0.6s ease; }
.wg-axis { stroke: var(--line-strong); stroke-width: 1; }

/* GitPR Fluent：スイッチとボタン */
.wg-git { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.wg-switches { display: grid; gap: 10px; }
.wg-switches label { display: flex; align-items: center; gap: 12px; font-family: var(--prose); font-size: 14.5px; color: var(--read); cursor: pointer; }
.wg-switches input { width: 18px; height: 18px; accent-color: var(--accent, var(--ps-yellow)); }
.wg-switches code { display: inline-block; min-width: 7.4em; margin-right: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--ps-cyan); }
.wg-panel { display: grid; gap: 10px; padding: 16px; border-radius: 6px; background: #f3f3f3; }
.wg-panel .wg-btn { border-color: #c9c9c9; background: #e1e1e1; color: #1c1c1c; font-weight: 500; }
.wg-panel .wg-btn.green { border-color: #2ea44f; background: #2ea44f; color: #fff; font-weight: 700; }
.wg-panel .wg-btn.red { border-color: #cb2431; background: #cb2431; color: #fff; }
.wg-panel .wg-btn:disabled { opacity: 0.45; }
.wg-warn { margin: 0; padding: 10px 12px; border: 1px solid #f0d77a; border-radius: 4px; background: #fff6d0; font-family: var(--prose); font-size: 13.5px; font-weight: 700; color: #7a5a00; }

/* DesktopOrganizer：2つのモニターと棚 */
.wg-mon { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: end; height: 250px; }
.wg-screen { position: relative; height: 100%; border: 2px solid var(--ps-gray); border-radius: 6px; background: rgba(142, 140, 216, 0.22); transition: opacity 0.4s ease, border-color 0.4s ease; }
.wg-screen.ext { height: 86%; }
.wg-screen.off { border-style: dashed; border-color: var(--line-strong); background: none; opacity: 0.45; }
.wg-screen-name { position: absolute; left: 10px; bottom: -26px; font-family: var(--prose); font-size: 12.5px; color: var(--ps-muted); }
.wg-shelf {
  position: absolute;
  z-index: 2;
  padding: 5px 7px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(30, 30, 36, 0.88);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #bdb9ff) 45%, transparent);
  font-family: var(--prose);
  font-size: 11.5px;
  color: var(--ps-gray);
  transition: left 0.9s cubic-bezier(0.3, 1.2, 0.5, 1), top 0.9s cubic-bezier(0.3, 1.2, 0.5, 1), width 0.9s ease, height 0.9s ease;
}
.wg-shelf.moved { color: var(--ps-white); box-shadow: inset 0 0 0 2px var(--accent, var(--ps-yellow)); }
.wg-mon + .wg-btn { margin-top: 40px; }

/* DownloadEx：保存先 */
.wg-rules { margin: 0 0 16px; padding: 0; list-style: none; font-family: var(--prose); font-size: 14px; color: var(--ps-gray); }
.wg-rules li { padding: 4px 0; }
.wg-rules code { font-family: var(--mono); font-size: 12.5px; color: var(--ps-cyan); }
.wg-form { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 14px; }
.wg-form label { display: grid; gap: 6px; font-family: var(--prose); font-size: 12.5px; color: var(--ps-muted); }
.wg-form input {
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--ps-blue-deeper);
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--ps-white);
}
.wg-form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.wg-path { padding: 12px 14px; border-radius: 6px; background: var(--ps-blue-deeper); font-family: var(--mono); font-size: 14px; overflow-wrap: anywhere; }

/* WikiGOLF：地面ごとの転がり */
.wg-lanes { display: grid; gap: 10px; }
.wg-lane { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 14px; }
.wg-lane-name { font-family: var(--prose); font-size: 14px; font-weight: 700; color: var(--ps-white); }
.wg-lane-name small { margin-left: 6px; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--ps-muted); }
.wg-track { position: relative; height: 22px; border-radius: 11px; }
.wg-track.g-0 { background: #b8e3f0; }
.wg-track.g-1 { background: #3f9b4f; }
.wg-track.g-2 { background: #62c46f; }
.wg-track.g-3 { background: #2b6b33; }
.wg-track.g-4 { background: #d9c38a; }
.wg-ball { position: absolute; top: 4px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.wg-ball.over::after { content: "→"; position: absolute; left: 20px; top: -4px; font-family: var(--mono); font-size: 14px; color: #0b3a44; }

/* WikiGOLF：双方向の探索が、両側から1手ずつ広がって真ん中で出会う */
.js-play svg[data-anim="bfs"] :is(.s1, .s2, .s3) { opacity: 0; transition: opacity 0.5s ease; }
.js-play svg[data-anim="bfs"] .s4 { opacity: 0; }
.js-play svg[data-anim="bfs"] polyline.s4 { opacity: 1; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1) 2s; }
.js-play .is-in svg[data-anim="bfs"] .s1 { opacity: 1; transition-delay: 0.3s; }
.js-play .is-in svg[data-anim="bfs"] .s2 { opacity: 1; transition-delay: 0.9s; }
.js-play .is-in svg[data-anim="bfs"] .s3 { opacity: 1; transition-delay: 1.5s; }
.js-play .is-in svg[data-anim="bfs"] polyline.s4 { stroke-dashoffset: 0; }
.js-play .is-in svg[data-anim="bfs"] text.s4 { opacity: 1; transition: opacity 0.5s ease 3.2s; }

/* ---------- Responsive ---------- */

@media (max-width: 860px) {
  .wk-index, .wk-index.two { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .wk-index a { display: grid; grid-template-columns: 128px 1fr; column-gap: 14px; align-items: start; }
  .wk-index img { grid-row: span 3; }
  .wk-index .n { margin-top: 0; }
  /* 横長の図は縮めすぎると文字が読めないので、最小幅を保って横スクロールにする */
  .fig { overflow-x: auto; }
  .fig svg.wide { min-width: 680px; }
  .cols.c2, .cols.c2-wide, .cols.c2-narrow, .cols.c3 { grid-template-columns: 1fr; gap: 32px; }
  .layers .ly { grid-template-columns: 1fr; gap: 10px; }
  .layers .parts { grid-template-columns: 1fr 1fr; }
  .w-sec { margin-top: 72px; }
  .story { gap: 40px; margin-top: 56px; }
  .story .pair, .w-sec .pair { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .story .pair > .to, .w-sec .pair > .to { transform: rotate(90deg); padding-top: 0; }
  .story .trio, .story .duo, .story .seq { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .story .morph { grid-template-columns: minmax(0, 1fr); }
  .morph > .from { grid-column: 1; grid-row: 1; width: 70%; margin: 12px 0 0 12px; padding: 6px 6px 0; }
  .morph > .into { grid-column: 1; grid-row: 1; }
  .morph > .from figcaption { font-size: 12.5px; }
  .morph.inset-bottom > .from { margin: 0 0 76px 12px; }
  .story .compare { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .story .stairs { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .stairs > * { width: 80%; }
  .stairs > :nth-child(2) { margin: 0 0 0 10%; }
  .stairs > :nth-child(3) { margin: 0 0 0 20%; }
  .story .mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .mosaic > :first-child { grid-column: 1 / -1; grid-row: 1; }
  .mosaic > :nth-child(2) { grid-column: 1; grid-row: 2; }
  .mosaic > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .story .aside { grid-template-columns: minmax(0, 1fr); }
  .story .offset { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .offset > :first-child { grid-column: 1; }
  .offset > :last-child { grid-column: 1; margin: 0 0 0 14%; }
  .project-detail > .chapter { padding-top: 72px; }
  .project-detail .chapter-title { font-size: clamp(32px, 9vw, 40px); }
  .aside .slot > :not(figcaption), .aside .shot > :not(figcaption),
  .aside.flip .slot > :not(figcaption), .aside.flip .shot > :not(figcaption) { grid-column: 1; grid-row: 1; }
  .aside figcaption, .aside.flip figcaption { grid-column: 1; grid-row: 2; margin-top: 12px; font-size: 16px; }
  .w-body .w-sec { margin-top: 80px; }
  .kd { padding: 40px 0 80px; }
  .story { padding: 40px 0 64px; }
  .w-body { padding: 48px 0 88px; }
  .w-toc > ol { grid-template-columns: minmax(0, 1fr); }
  .w-toc > ol > li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line-soft); }
  .w-toc > ol > li + li::before { content: "↓"; top: -10px; left: 0; }
  .kd-title { margin-bottom: 36px; }
  .kd-flow { grid-template-columns: minmax(0, 1fr); }
  .kd-flow > dt { padding: 28px 0 8px; display: flex; align-items: baseline; gap: 12px; }
  .kd-flow > dt::before { display: inline; margin: 0; }
  .kd-flow > dd { padding: 0 0 8px; }
  .w-sub, .w-p, .kd-flow > dd > p { font-size: 16px; }
  .story .aside figcaption b { font-size: 20px; }
  .w-toc a { font-size: 13.5px; }
  .reading-nav { margin-top: 20px; flex-direction: row; align-items: stretch; }
  .wg { padding: 18px 16px; }
  .wg-git, .wg-form { grid-template-columns: minmax(0, 1fr); }
  .wg-mon { height: 180px; gap: 16px; }
  .wg-lane { grid-template-columns: 84px minmax(0, 1fr); gap: 10px; }
  .project-detail .w-entry { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "l" "c" "n" "b"; }
  .project-detail .w-entry > .w-cover { margin-top: 0; }
  [data-entry="poster"] .w-entry { grid-template-areas: "c" "t" "l" "n" "b"; }
  [data-entry="poster"] .w-entry > .w-cover { margin-top: 56px; }
  [data-entry="poster"] .w-entry > .chapter { grid-area: t; align-self: start; max-width: none; margin: 20px 0 0; padding: 0; background: none; box-shadow: none; }
  [data-entry="poster"] .w-entry { grid-template-areas: "c" "t" "l" "n" "b"; }
  [data-entry="scorecard"] .bignums, [data-entry="stairs"] .bignums, [data-entry="planks"] .bignums, [data-entry="shelves"] .bignums, [data-entry="numbers"] .bignums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-entry="scorecard"] .bignums > div:nth-child(3) { border-left: 0; }
  [data-entry="scorecard"] .bignums > div:nth-child(n+3) { border-top: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
  [data-entry="stairs"] .bignums > div:nth-child(3) { margin-top: 0; }
  [data-entry="stairs"] .bignums > div:nth-child(4) { margin-top: 28px; }
  [data-entry="planks"] .bignums { row-gap: 24px; min-height: 0; }
  [data-entry="numbers"] .bignums, [data-entry="gitlog"] .bignums { margin-top: 32px; }
  .reading-nav .where { display: none; }
  .reading-nav .jump a, .reading-nav .jump a.is-current { padding: 12px 14px 11px; font-size: 13px; }
  .kd-flow > dt { padding-bottom: 6px; }
  .kd-flow > dd { border-top: 0; padding-top: 0; }
  .bignums { gap: 16px 32px; }
  /* 表は1行ずつ縦に積む。列名は各セルの data-label から出す */
  .w-t thead { display: none; }
  .w-t, .w-t tbody, .w-t tr, .w-t td { display: block; width: 100%; }
  .w-t tr { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
  .w-t td { padding: 3px 0; border: 0; min-width: 0; }
  .w-t td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--prose);
    font-size: 11.5px;
    font-weight: 400;
    color: var(--ps-dim);
  }
}

/* ============================================================
   読み物の足し算 — 余白の注釈、たたんだ話、専門用語の一行説明
   ============================================================ */

/* ---------- 余白の注釈 ----------
   広い画面では本文（720px）の右の余白に置き、狭い画面では段落の下に出す。 */
.noted { position: relative; }
.side-note {
  margin: 14px 0 0;
  padding: 2px 0 2px 14px;
  border-left: 2px solid color-mix(in srgb, var(--accent, var(--ps-cyan)) 60%, transparent);
  max-width: 720px;
  font-family: var(--prose);
  font-size: 13px;
  line-height: 1.85;
  color: var(--ps-muted);
}
.side-note p { margin: 0; }
.side-note b { color: var(--ps-gray); font-weight: 700; }
@media (min-width: 1120px) {
  .side-note {
    position: absolute;
    top: 4px;
    left: 760px;
    width: min(250px, calc(100% - 760px));
    margin: 0;
  }
}

/* ---------- たたんだ話（つまずいたところ／要になったコード） ---------- */
/* 「こだわったこと」の本文の列（見出しの列 200px + 間隔 36px の右）にそろえる */
/* 列を minmax(0, 1fr) にしておかないと、開いたときに長いコード行の幅まで列が広がる */
.folds { margin: 56px 0 0 236px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 720px; }
@media (max-width: 860px) { .folds { margin-left: 0; max-width: none; } }
.fold {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--band-gallery, #010e24) 55%, transparent);
}
.fold[open] { border-color: color-mix(in srgb, var(--accent, var(--ps-cyan)) 50%, var(--line)); }
.fold > summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 4px 16px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  border-radius: 6px;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { background: rgba(255, 255, 255, 0.04); }
.fold > summary:focus-visible { outline: 2px solid var(--ps-cyan); outline-offset: 2px; }
.fold-kind {
  font-family: var(--prose);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent, var(--ps-cyan));
  white-space: nowrap;
}
.fold-title {
  font-family: var(--prose);
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ps-white);
}
/* 開いているかどうかは、右端の ＋ と － で示す */
.fold > summary::after {
  content: "";
  align-self: center;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(var(--ps-gray), var(--ps-gray)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--ps-gray), var(--ps-gray)) center / 1.5px 12px no-repeat;
  transition: transform 0.2s ease;
}
.fold[open] > summary::after {
  background: linear-gradient(var(--ps-gray), var(--ps-gray)) center / 12px 1.5px no-repeat;
}
.fold-body { padding: 4px 20px 22px; }
.fold-body > p,
.fold-steps dd p {
  margin: 0 0 12px;
  max-width: 720px;
  font-family: var(--prose);
  font-size: 15px;
  line-height: 1.95;
  color: var(--read);
}
.fold-body code:not(pre code),
.fold-steps code:not(pre code) {
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(111, 218, 218, 0.1);
  color: var(--ps-cyan);
  font-family: var(--mono);
  font-size: 0.86em;
}
.fold-steps { display: grid; grid-template-columns: 96px 1fr; gap: 0 20px; margin: 0; }
.fold-steps dt {
  padding: 14px 0 0;
  font-family: var(--prose);
  font-size: 13px;
  font-weight: 700;
  color: var(--ps-muted);
}
.fold-steps dd { margin: 0; padding: 12px 0 2px; min-width: 0; }
.fold-steps dt + dd ~ dt, .fold-steps dt + dd ~ dt + dd { border-top: 1px solid var(--line-soft); }
.fold pre { margin: 6px 0 16px; font-size: 12.5px; }
.fold pre code { font-size: 12.5px; }
/* 要になる行だけに印を付ける（自分の書いた核心 = 黄色） */
.fold pre mark {
  display: inline-block;
  min-width: calc(100% + 36px); /* 左右の -18px ぶんを足して、コード欄の端まで塗る */
  margin: 0 -18px;
  padding: 0 18px;
  background: rgba(245, 215, 107, 0.12);
  box-shadow: inset 2px 0 0 var(--ps-yellow);
  color: var(--ps-text);
}
.fold-file { margin: 4px 0 6px; font-family: var(--mono); font-size: 12.5px; color: var(--ps-dim); overflow-wrap: anywhere; }
.fold-file a { color: var(--ps-cyan); text-decoration: underline; text-underline-offset: 3px; }
.fold-meta { margin: 8px 0 0 !important; font-size: 13px !important; color: var(--ps-muted) !important; }
.fold-meta a { color: var(--ps-cyan); font-family: var(--mono); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .fold > summary { grid-template-columns: 1fr auto; }
  .fold-kind { grid-column: 1; }
  .fold-title { grid-column: 1; grid-row: 2; }
  .fold > summary::after { grid-column: 2; grid-row: 1 / span 2; }
  .fold-steps { grid-template-columns: 1fr; }
  .fold-steps dt + dd ~ dt + dd { border-top: 0; }
}
/* 開くときに、高さをなめらかに広げる（対応ブラウザだけ） */
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .fold { interpolate-size: allow-keywords; }
    .fold::details-content {
      height: 0;
      overflow: clip;
      transition: height 0.28s cubic-bezier(0.2, 0, 0, 1), content-visibility 0.28s allow-discrete;
    }
    .fold[open]::details-content { height: auto; }
  }
}

/* ---------- 専門用語の一行説明 ---------- */
.term {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, currentColor 55%, transparent);
  cursor: help;
  border-radius: 2px;
}
.term:focus-visible { outline: 2px solid var(--ps-cyan); outline-offset: 2px; }
.term-tip {
  position: fixed;
  z-index: 900;
  max-width: min(320px, calc(100vw - 24px));
  padding: 10px 13px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--ps-blue-deeper);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  font-family: var(--prose);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ps-gray);
  pointer-events: none;
}
.term-tip[hidden] { display: none; }
.term-tip b { display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 12.5px; color: var(--ps-cyan); }
/* 横いっぱいの段組のあとは、余白がないので下に置く */
.side-note.is-inline { position: static; width: auto; margin: 22px 0 0; }

/* ============================================================
   要約と「詳しく読む」
   どの作品も、入口のすぐ下に「担当」と「見どころ」を置き、ここだけで作品の要点が分かるようにする。
   深い説明（設計・つまずき・コード）は <details class="w-more"> にたたみ、読みたい人だけが開く。
   ============================================================ */

.w-sum { margin-top: 40px; max-width: 760px; }
.w-role { margin: 0 0 22px; font-family: var(--prose); font-size: 16px; line-height: 1.9; color: var(--read); }
.w-role b, .w-sum-h {
  margin-right: 12px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent, var(--ps-yellow));
}
.w-sum-h { display: block; margin: 0 0 6px; }
.w-points { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.w-points li { border-bottom: 1px solid var(--line-soft); }
.w-points a {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  font-family: var(--prose);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--ps-white);
  text-decoration: none;
}
.w-points a::before { content: "→"; flex-shrink: 0; font-family: var(--mono); color: var(--accent, var(--ps-yellow)); }
.w-points a:hover { color: var(--ps-yellow); text-decoration: underline; text-underline-offset: 4px; }

/* 「詳しく読む」の開閉。開いているかどうかは右端の ＋ と － で示す（.fold と同じ） */
.w-more { margin-top: 40px; }
.w-more > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  font-family: var(--prose);
  font-size: 16px;
  font-weight: 700;
  color: var(--ps-white);
  cursor: pointer;
  list-style: none;
}
.w-more > summary::-webkit-details-marker { display: none; }
.w-more > summary:hover { background: rgba(255, 255, 255, 0.04); }
.w-more > summary:focus-visible { outline: 2px solid var(--ps-cyan); outline-offset: 2px; }
.w-more > summary::after {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  background:
    linear-gradient(var(--ps-gray), var(--ps-gray)) center / 12px 1.5px no-repeat,
    linear-gradient(var(--ps-gray), var(--ps-gray)) center / 1.5px 12px no-repeat;
}
.w-more[open] > summary { border-color: color-mix(in srgb, var(--accent, var(--ps-cyan)) 60%, var(--line)); }
.w-more[open] > summary::after { background: linear-gradient(var(--ps-gray), var(--ps-gray)) center / 12px 1.5px no-repeat; }

/* 帯の中でたたんだ画面写真：開いたら、並びどうしの間を帯と同じだけ空ける */
.story > .w-more { margin-top: 0; }
.story > .w-more[open] > :not(summary) { margin-top: 72px; }
/* 帯の直下の並びだけが動きの対象（js/play.js）。たたんだ中の並びは最初から完成形で出す */
.js-play .story > .w-more :is(.seq, .trio, .duo, .mosaic, .compare, .offset, .stairs) > *,
.js-play .story > .w-more .morph > .from { opacity: 1; transform: none; }

/* 「作品の詳細」の続き */
.w-body > .w-more { margin-top: 112px; }

@media (max-width: 860px) {
  .story > .w-more[open] > :not(summary) { margin-top: 40px; }
  .w-body > .w-more { margin-top: 80px; }
  .w-more > summary { padding: 14px 16px; font-size: 15px; }
}

/* 作品の最後に置く「詳しく読む」は、その作品の帯の色で囲み、作品名を添える。
   地の色のままだと、すぐ下から始まる次の作品の一部に見えてしまうため。
   帯は summary の外側へ伸ばし、上下の余白を details の padding で確保する。
   帯が summary 自身の色より下に来るよう、重なりの基準は details にする */
.project-detail > .w-more { position: relative; isolation: isolate; margin-top: 40px; padding: 28px 0 44px; }
.project-detail > .story + .w-more { margin-top: 0; }   /* プレイ画面の帯とつなげる */
.project-detail > .w-more > summary {
  position: relative;
  border-color: color-mix(in srgb, var(--accent, var(--ps-cyan)) 60%, var(--line));
  background: color-mix(in srgb, var(--accent, var(--ps-cyan)) 12%, transparent);
}
.project-detail > .w-more > summary::before {
  content: "";
  position: absolute;
  inset: -29px -100vmax -45px;
  z-index: -1;
  pointer-events: none;
  background-color: var(--band-gallery);
  background-image: var(--grid);
  background-size: 96px 96px;
}
.project-detail > .w-more > summary:hover { background: color-mix(in srgb, var(--accent, var(--ps-cyan)) 20%, transparent); }
.w-more-of { color: var(--accent, var(--ps-yellow)); }
/* 開いたとき、すぐ下のプレイ画面の帯と隙間なくつなげる（帯の下への伸び 45px と同じだけ空ける） */
.project-detail > .w-more[open] > summary + .story { margin-top: 45px; }