/* Hallmark · shape: control room, a lit swarm diagram first, then the method in the order it runs · genre: modern-minimal · theme: custom · job: join · idea: "the site is BeesBuild's own control room, every colour on it is a product signal, and amber only ever means a human is needed" · vibe: "graphite control room, quiet, exact, live"
 * paper: oklch(14.6% 0.004 265) · accent: oklch(81.5% 0.165 75) · display: IBM Plex Sans JP · body: Inter with IBM Plex Sans JP · hero: copy on the left six columns, the waterfall-to-swarm diagram running on the right six · nav: the product's own top bar, mark and wordmark left, seven links, the amber Camp action right, hairline under · footer: the Camp recruitment panel (heading, three points, two actions, the ten-day line) over a five-group index and a legal bar · imagery: the product, BeesBuild screen designs captured from the design canvas · signature: a waterfall of design steps that splits into a honeycomb of blocks and fills in parallel
 * axes: dark/sans/amber · posture: signal, amber reserved for the human action and kept under five percent of any viewport · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V4 · weakest: H, the product screens are dense; each one sits alone in a figure with one caption while the section head carries the point */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- 共通：飛ばすリンク ---------- */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-md);
  inset-block-start: var(--space-xs);
  z-index: var(--z-modal);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  border-radius: var(--radius-2);
  transform: translateY(-160%);
  transition: transform var(--dur-short) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---------- 共通：ボタン ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding: 0 var(--space-lg);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-2);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn:active { background: var(--color-accent-press); border-color: var(--color-accent-press); transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.btn-quiet {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-rule-strong);
}
.btn-quiet:hover { background: var(--color-paper-3); border-color: var(--color-muted); }
.btn-quiet:active { background: var(--color-hover); border-color: var(--color-muted); }
.btn-sm { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }

.text-link {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-rule-strong);
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.text-link:hover { text-decoration-color: var(--color-ink); }
.text-link:active { color: var(--color-ink-2); }
.text-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-1); }

/* 小さな操作（再生・止める・切り替え） */
.ctl {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: 0 var(--space-md);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-2);
  background: var(--color-paper-2);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  white-space: nowrap;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.ctl:hover { background: var(--color-paper-3); color: var(--color-ink); border-color: var(--color-rule-strong); }
.ctl:active { background: var(--color-hover); }
.ctl:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ctl:disabled { opacity: 0.5; cursor: not-allowed; }
.ctl[aria-pressed="true"] { color: var(--color-ink); border-color: var(--color-muted); background: var(--color-paper-3); }
.ctl svg { width: 14px; height: 14px; flex: none; }
.ctl-icon { fill: currentColor; }

/* ---------- 上の帯（ナビ） ---------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-nav);
  background: color-mix(in oklab, var(--color-paper) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid var(--color-rule);
}
.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  height: var(--nav-height);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-ink);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  border-radius: var(--radius-1);
}
.brand:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.brand:hover .brand-word { color: var(--color-ink); }
.brand:active { opacity: 0.85; }
.mark { width: 24px; height: 24px; flex: none; }
.mark-core { fill: var(--color-gold); }
.mark-cell { fill: none; stroke: var(--color-silver); stroke-width: 0.9; }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  list-style: none;
  margin-inline-end: auto;
}
.nav-links a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-2);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.nav-links a:hover { color: var(--color-ink); background: var(--color-paper-2); }
.nav-links a:active { background: var(--color-paper-3); }
.nav-links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }
.nav-links a[aria-current="page"], .nav-links a[aria-current="true"] { color: var(--color-ink); background: var(--color-paper-3); }
.nav-actions { display: flex; align-items: center; gap: var(--space-sm); }
.nav-menu { display: none; }
@media (max-width: 68rem) {
  .nav-links { display: none; }
  .nav-actions .btn { display: none; }
  .nav-inner { justify-content: space-between; }
  .nav-menu { display: block; }
}
.nav-menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: 0 var(--space-md);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-2);
  color: var(--color-ink);
  font-size: var(--text-sm);
  cursor: pointer;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary:hover { background: var(--color-paper-2); }
.nav-menu > summary:active { background: var(--color-paper-3); }
.nav-menu > summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nav-menu[open] > summary { background: var(--color-paper-3); }
.nav-panel {
  position: absolute;
  inset-inline: 0;
  top: var(--nav-height);
  max-height: calc(100dvh - var(--nav-height));
  overflow-y: auto;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-rule);
  padding: var(--space-md) var(--gutter) var(--space-xl);
}
.nav-panel ul { list-style: none; display: grid; gap: var(--space-2xs); }
.nav-panel a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-2);
  color: var(--color-ink);
  text-decoration: none;
  font-size: var(--text-lg);
}
.nav-panel a:not(.btn):hover { background: var(--color-paper-2); }
.nav-panel a:not(.btn):focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }
.nav-panel .btn { width: 100%; margin-top: var(--space-md); }

/* ---------- 文字の型 ---------- */
.display {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: 600;
}
.display-s {
  font-size: var(--text-display-s);
  line-height: var(--leading-display);
  font-weight: 600;
}
.section-title {
  font-size: var(--text-section);
  line-height: var(--leading-head);
  font-weight: 600;
}
.item-title {
  font-size: var(--text-title);
  line-height: var(--leading-head);
  font-weight: 600;
}
.lead {
  font-size: var(--text-lead);
  line-height: 1.8;
  color: var(--color-ink-2);
  max-width: 36em;
}
.body-2 { color: var(--color-ink-2); }
.small { font-size: var(--text-sm); line-height: 1.7; color: var(--color-ink-2); }
.caption { font-size: var(--text-xs); line-height: 1.6; color: var(--color-muted); }
.mono { font-family: var(--font-mono); font-feature-settings: "zero" 1; }
.line { display: block; }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-md); }
.prose h2 { font-size: var(--text-section); line-height: var(--leading-head); margin-top: var(--space-2xl); }
.prose h3 { font-size: var(--text-title); line-height: var(--leading-head); margin-top: var(--space-xl); }
.prose ul, .prose ol { padding-inline-start: 1.4em; }
.prose li + li { margin-top: var(--space-2xs); }
.prose li::marker { color: var(--color-muted); }

/* 信号の色の文字（図の凡例と状態の表示だけ） */
.sig-human { color: var(--color-human); }
.sig-ai { color: var(--color-ai); }
.sig-review { color: var(--color-review); }
.sig-done { color: var(--color-done); }
.sig-failed { color: var(--color-failed); }

/* ---------- 区切りと枠 ---------- */
main { display: block; }
.section { padding-block: var(--section-gap); }
.section-s { padding-block: var(--section-gap-s); }
.section-l { padding-block: var(--section-gap-l); }
.section + .section-ruled, .ruled { border-top: 1px solid var(--color-rule); }
.band { background: var(--color-paper-2); border-block: 1px solid var(--color-rule); }
.band-deep { background: var(--color-paper); }
.section-head {
  display: grid;
  gap: var(--space-md);
  max-width: 52rem;
  margin-bottom: var(--space-2xl);
}
.section-head.wide { max-width: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--gap-columns); }
.section-head.wide .lead { justify-self: start; }
@media (max-width: 60rem) { .section-head.wide { grid-template-columns: minmax(0, 1fr); } }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap-columns);
}
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: 1 / -1; }
@media (max-width: 60rem) {
  .grid-12 > [class*="span-"] { grid-column: 1 / -1; }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl) var(--gap-columns);
  align-items: center;
}
.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.flip > :first-child { order: 2; }
.split.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split.top { align-items: start; }
@media (max-width: 60rem) {
  .split, .split.flip, .split.even { grid-template-columns: minmax(0, 1fr); }
  .split.flip > :first-child { order: 0; }
}
.stack { display: grid; gap: var(--space-md); align-content: start; }
.stack-lg { display: grid; gap: var(--space-lg); align-content: start; }
.stack-xl { display: grid; gap: var(--space-xl); align-content: start; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); }

/* ---------- 画面の写し（product capture） ---------- */
.shot {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}
.shot-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-3);
  background: var(--color-paper-2);
  box-shadow: var(--shadow-card);
  aspect-ratio: 1440 / 920;
}
.shot-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.shot figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-muted);
}
.shot figcaption strong { color: var(--color-ink-2); font-weight: 500; }
.shot-crop .shot-frame { aspect-ratio: 16 / 9; }
.shot-tall .shot-frame { aspect-ratio: 4 / 3; }
.shot-bleed { margin-inline-end: calc(var(--gutter) * -1); }
.shot-bleed .shot-frame { border-start-end-radius: 0; border-end-end-radius: 0; border-inline-end: 0; }
@media (max-width: 60rem) { .shot-bleed { margin-inline-end: 0; } .shot-bleed .shot-frame { border-radius: var(--radius-3); border-inline-end: 1px solid var(--color-rule); } }

/* 画面の小さな並び */
.shot-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-columns);
}
.shot-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 60rem) { .shot-row, .shot-row.two { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 一覧と表 ---------- */
.tick-list { list-style: none; display: grid; gap: var(--space-md); }
.tick-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
}
.tick-list svg { width: 20px; height: 20px; margin-top: var(--space-2xs); }
.hex-mark { fill: none; stroke: var(--color-muted); stroke-width: 1.4; }
.hex-mark.done { stroke: var(--color-done); }
.hex-mark.ai { stroke: var(--color-ai); }
.hex-mark.human { stroke: var(--color-human); }
.hex-mark.review { stroke: var(--color-review); }

.def-list { display: grid; gap: 0; border-top: 1px solid var(--color-rule); }
.def-list > div {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-lg);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-rule);
}
.def-list dt { font-weight: 600; font-family: var(--font-display); }
.def-list dd { margin: 0; color: var(--color-ink-2); }
@media (max-width: 40rem) { .def-list > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); } }

.table-wrap { overflow-x: auto; border: 1px solid var(--color-rule); border-radius: var(--radius-3); }
.table { font-size: var(--text-sm); min-width: 640px; }
.table th, .table td { text-align: start; vertical-align: top; padding: var(--space-md); border-bottom: 1px solid var(--color-rule); }
.table thead th { color: var(--color-ink-2); font-weight: 500; background: var(--color-paper-2); }
.table tbody tr:last-child th, .table tbody tr:last-child td { border-bottom: 0; }
.table tbody th { font-weight: 600; color: var(--color-ink); font-family: var(--font-display); }
.table td { color: var(--color-ink-2); }
.table .hl { color: var(--color-ink); background: color-mix(in oklab, var(--color-done) 6%, transparent); }

/* 数字（実数だけ） */
.figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--color-rule);
}
.figures > div { padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-bottom: 1px solid var(--color-rule); }
.figures > div + div { padding-inline-start: var(--space-lg); border-inline-start: 1px solid var(--color-rule); }
.figure-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-figure);
  line-height: 1.05;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.figure-num small { font-size: 0.42em; font-weight: 500; margin-inline-start: var(--space-2xs); letter-spacing: 0; }
.figure-label { display: block; margin-top: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-sm); }
@media (max-width: 60rem) {
  .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figures > div:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
}

/* ---------- カード（入れ子にしない） ---------- */
.card {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-3);
  background: var(--color-paper-2);
  min-width: 0;
}
a.card { color: inherit; text-decoration: none; transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
a.card:hover { border-color: var(--color-rule-strong); background: var(--color-paper-3); }
a.card:active { background: var(--color-hover); }
a.card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.card .item-title { font-size: var(--text-lg); }
.card p { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.75; }
.card-meta { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

/* 状態の札（図の凡例・段の名前） */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 24px;
  padding: 0 var(--space-xs);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-1);
  font-size: var(--text-xs);
  line-height: 1;
  color: var(--color-ink-2);
  white-space: nowrap;
}
.tag.human { color: var(--color-human); border-color: color-mix(in oklab, var(--color-human) 40%, transparent); }
.tag.ai { color: var(--color-ai); border-color: color-mix(in oklab, var(--color-ai) 40%, transparent); }
.tag.review { color: var(--color-review); border-color: color-mix(in oklab, var(--color-review) 40%, transparent); }
.tag.done { color: var(--color-done); border-color: color-mix(in oklab, var(--color-done) 40%, transparent); }

/* 凡例 */
.legend { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); list-style: none; font-size: var(--text-xs); color: var(--color-ink-2); }
.legend li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.legend svg { width: 12px; height: 12px; }
.lg-hex { fill: none; stroke-width: 2; }
.lg-hex.human { stroke: var(--color-human); }
.lg-hex.ai { stroke: var(--color-ai); }
.lg-hex.review { stroke: var(--color-review); }
.lg-hex.done { stroke: var(--color-done); }
.lg-hex.failed { stroke: var(--color-failed); }
.lg-hex.idle { stroke: var(--color-idle); }

/* ---------- 下層ページの頭 ---------- */
.crumbs { padding-top: var(--space-xl); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; font-size: var(--text-xs); color: var(--color-muted); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.crumbs li + li::before { content: "/"; color: var(--color-rule-strong); }
.crumbs a { color: var(--color-ink-2); text-decoration: none; border-radius: var(--radius-1); }
.crumbs a:hover { color: var(--color-ink); text-decoration: underline; }
.crumbs a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.page-hero { padding-block: var(--space-2xl) var(--section-gap-s); }
.page-hero .display-s { max-width: 18em; }
.page-hero .lead { margin-top: var(--space-lg); }
.page-hero .actions { margin-top: var(--space-xl); }
.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-2xl) var(--gap-columns);
  align-items: center;
}
@media (max-width: 60rem) { .page-hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 下層への行き先 ---------- */
.next-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-columns);
}
@media (max-width: 60rem) { .next-grid { grid-template-columns: minmax(0, 1fr); } }
.next-link {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--color-rule);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.next-link:hover { border-top-color: var(--color-ink); }
.next-link:active { opacity: 0.85; }
.next-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-1); }
.next-link strong { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.next-link span { color: var(--color-ink-2); font-size: var(--text-sm); }

/* ---------- 一つだけの出方（JS がある時だけ隠す） ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- 下の帯：Camp の募集・目次・運営 ---------- */
.site-footer { border-top: 1px solid var(--color-rule); background: var(--color-paper); }
.camp { padding-block: var(--section-gap-s); background: var(--color-paper-2); border-bottom: 1px solid var(--color-rule); }
.camp-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--space-2xl) var(--gap-columns);
  align-items: center;
}
@media (max-width: 60rem) { .camp-grid { grid-template-columns: minmax(0, 1fr); } }
.camp-title { font-size: var(--text-section); line-height: var(--leading-head); }
.camp-lead { margin-top: var(--space-md); font-family: var(--font-display); font-size: var(--text-title); line-height: 1.5; color: var(--color-ink); font-weight: 500; }
.camp-body { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 34em; }
.camp-points { list-style: none; display: grid; gap: var(--space-md); margin-top: var(--space-xl); }
.camp-points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-sm); }
.camp-points svg { width: 20px; height: 20px; margin-top: var(--space-2xs); }
.camp-points strong { display: block; font-weight: 600; }
.camp-points span { display: block; color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.7; }
.camp .actions { margin-top: var(--space-xl); }

/* Camp の日程の図（日ごとの升） */
.camp-line { container: camp-line / inline-size; display: grid; gap: var(--space-md); padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-3); background: var(--color-paper); }
.camp-line-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); }
.camp-line-head strong { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.camp-days { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--space-2xs); list-style: none; }
.camp-day { display: grid; gap: var(--space-xs); justify-items: center; }
.camp-cell { width: 100%; aspect-ratio: 1 / 1.155; }
.camp-cell polygon { fill: var(--color-paper-3); stroke: var(--color-rule-strong); stroke-width: 1.5; transition: fill var(--dur-long) var(--ease-out), stroke var(--dur-long) var(--ease-out); }
.camp-day.p-design .camp-cell polygon { stroke: var(--color-ink); }
.camp-day.p-build .camp-cell polygon { stroke: var(--color-ai); }
.camp-day.p-review .camp-cell polygon { stroke: var(--color-review); }
.camp-day.p-release .camp-cell polygon { stroke: var(--color-done); fill: var(--color-done-wash); }
.camp-day-n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.camp-phases { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--space-2xs); list-style: none; }
.camp-phase { border-top: 2px solid var(--color-rule-strong); padding-top: var(--space-xs); font-size: var(--text-xs); line-height: 1.5; color: var(--color-ink-2); }
.camp-phase.p-design { border-top-color: var(--color-ink); }
.camp-phase.p-build { border-top-color: var(--color-ai); }
.camp-phase.p-review { border-top-color: var(--color-review); }
.camp-phase.p-release { border-top-color: var(--color-done); }
.camp-phase strong { display: block; color: var(--color-ink); font-weight: 600; font-size: var(--text-sm); }
.js .camp-line[data-anim] .camp-cell polygon { fill: var(--color-paper); stroke: var(--color-rule); }
.js .camp-line[data-anim].is-in .camp-day .camp-cell polygon { transition-delay: calc(var(--i) * 90ms); }
.js .camp-line[data-anim].is-in .camp-day.p-design .camp-cell polygon { stroke: var(--color-ink); fill: var(--color-paper-3); }
.js .camp-line[data-anim].is-in .camp-day.p-build .camp-cell polygon { stroke: var(--color-ai); fill: var(--color-paper-3); }
.js .camp-line[data-anim].is-in .camp-day.p-review .camp-cell polygon { stroke: var(--color-review); fill: var(--color-paper-3); }
.js .camp-line[data-anim].is-in .camp-day.p-release .camp-cell polygon { stroke: var(--color-done); fill: var(--color-done-wash); }
@media (prefers-reduced-motion: reduce) {
  .js .camp-line[data-anim] .camp-cell polygon { transition: none; }
}
@media (max-width: 40rem) {
  .camp-line { padding: var(--space-lg) var(--space-md); }
}
/* 図が狭い時は、段の名前を日の升の下にそろえず、2 列の凡例にする（「リリース」は 1 日分の升に入りきらないため） */
@container camp-line (max-width: 42.5rem) {
  .camp-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm) var(--space-md); }
  .camp-phase { grid-column: auto !important; }
}

.footer-index {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 2fr));
  gap: var(--space-xl) var(--gap-columns);
  padding-block: var(--space-3xl) var(--space-2xl);
}
@media (max-width: 68rem) { .footer-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
.footer-brand { display: grid; gap: var(--space-md); align-content: start; }
.footer-brand p { color: var(--color-ink-2); font-size: var(--text-sm); max-width: 24em; }
.footer-motto { font-family: var(--font-display); color: var(--color-ink) !important; font-size: var(--text-lg) !important; line-height: 1.6; }
.footer-group h2 { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink); letter-spacing: 0; }
.footer-group ul { list-style: none; display: grid; gap: var(--space-2xs); margin-top: var(--space-sm); }
.footer-group a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  text-decoration: none;
  border-radius: var(--radius-1);
  transition: color var(--dur-micro) var(--ease-out);
}
.footer-group a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.25em; }
.footer-group a:active { color: var(--color-muted); }
.footer-group a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md) var(--space-xl);
  padding-block: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--color-rule);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); list-style: none; }
.footer-bottom a { color: var(--color-ink-2); text-decoration: none; border-radius: var(--radius-1); }
.footer-bottom a:hover { color: var(--color-ink); text-decoration: underline; }
.footer-bottom a:active { color: var(--color-muted); }
.footer-bottom a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- 間の小物 ---------- */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mt-3xl { margin-top: var(--space-3xl); }
.nav-main { margin-inline-end: auto; }
@media (max-width: 68rem) { .nav-main { display: none; } }

/* ---------- トップ：最初の画面 ---------- */
.hero {
  min-height: calc(100svh - var(--nav-height));
  max-height: 980px;
  display: grid;
  align-items: center;
  padding-block: var(--space-xl);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--space-xl) var(--gap-columns);
  align-items: center;
}
.hero-copy { display: grid; gap: var(--space-lg); align-content: center; }
.hero-copy .display { font-size: var(--text-display); }
.hero-sub { font-size: var(--text-lead); line-height: 1.75; color: var(--color-ink-2); max-width: 28em; word-break: auto-phrase; }
.nw { white-space: nowrap; }
@media (max-width: 25rem) { .nw { white-space: normal; } } /* とても狭い画面では、はみ出すより折り返す */
.hero-copy .actions { margin-top: var(--space-xs); }
.hero-beta { font-size: var(--text-sm); color: var(--color-ink-2); }
.hero-beta strong { color: var(--color-ink); font-weight: 600; }
@media (max-width: 60rem) {
  .hero { min-height: 0; max-height: none; padding-block: var(--space-2xl) var(--space-3xl); }
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
}

/* 図：滝と群れ */
.hero-visual { display: grid; gap: var(--space-md); min-width: 0; }
.swarm { width: 100%; height: auto; overflow: visible; }
.swarm text { font-family: var(--font-body); }
.sw-step rect { fill: var(--color-paper-2); stroke: var(--color-rule-strong); stroke-width: 1; }
.sw-step-label { fill: var(--color-ink); font-size: 15px; font-weight: 600; font-family: var(--font-display); }
.sw-step-sub { fill: var(--color-ink-2); font-size: 13px; }
.sw-decide { fill: var(--color-human); }
.sw-drop { stroke: var(--color-rule-strong); stroke-width: 1.5; fill: none; }
.sw-branch { stroke: var(--color-rule-strong); stroke-width: 1; fill: none; stroke-dasharray: 100; stroke-dashoffset: 0; }
.sw-hex { fill: var(--color-paper-2); stroke: var(--color-rule-strong); stroke-width: 1; }
.sw-rim { fill: none; stroke: var(--color-done); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 0; stroke-linejoin: round; }
.sw-pr-ai { fill: var(--color-ai); }
.sw-pr-done { fill: var(--color-done); }
.sw-id { fill: var(--color-ink-2); font-size: 12.5px; font-family: var(--font-mono) !important; }
.sw-id-core { fill: var(--color-ink); font-family: var(--font-display) !important; font-size: 13px; }
.sw-fly { fill: var(--color-ai); opacity: 0; }
.sw-note { fill: var(--color-ink-2); font-size: 13px; }
.sw-human-mark { fill: var(--color-human); }
.sw-human-text { fill: var(--color-human); font-size: 13px; }
.sw-mainline { stroke: var(--color-done); stroke-width: 2; }
.sw-main-label { fill: var(--color-ink-2); font-size: 13px; font-family: var(--font-mono) !important; }
.sw-ship { fill: var(--color-done); font-size: 15px; font-weight: 600; }
@media (max-width: 40rem) {
  .sw-step-sub, .sw-note, .sw-human, .sw-main-label, .sw-id { display: none; }
  .sw-step-label { font-size: 21px; }
  .sw-ship { font-size: 20px; }
}

/* 動かす前の形（JS がある時だけ。.on で現れる） */
.swarm .sw-step, .swarm .sw-decide, .swarm .sw-hex, .swarm .sw-pr, .swarm .sw-drop, .swarm .sw-note, .swarm .sw-human, .swarm .sw-ship, .swarm .sw-id {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out);
}
.swarm .sw-drop { transform-origin: top; }
.swarm .sw-branch { transition: stroke-dashoffset 520ms var(--ease-out); }
.swarm .sw-rim { transition: stroke-dashoffset 260ms var(--ease-out), stroke 380ms var(--ease-out); }
.swarm .sw-pr-done { transition: opacity 380ms var(--ease-out); }
.swarm .sw-mainline { transition: stroke 420ms var(--ease-out); }
.is-armed .sw-step:not(.on) { opacity: 0; transform: translateX(-10px); }
.is-armed .sw-decide:not(.on) { opacity: 0; transform: scale(0.3); }
.is-armed .sw-drop:not(.on) { opacity: 0; transform: scaleY(0); }
.is-armed .sw-branch:not(.on) { stroke-dashoffset: 100; }
.is-armed .sw-hex:not(.on), .is-armed .sw-id:not(.on) { opacity: 0; transform: scale(0.86); }
.is-armed .sw-rim { stroke: var(--color-ai); stroke-dashoffset: calc(100 - var(--p, 0)); }
.is-armed .sw-block.review .sw-rim { stroke: var(--color-review); }
.is-armed .sw-block.done .sw-rim { stroke: var(--color-done); }
.is-armed .sw-pr:not(.on) { opacity: 0; transform: scale(0.2); }
.is-armed .sw-pr-done { opacity: 0; }
.is-armed .sw-block.done .sw-pr-done { opacity: 1; }
.is-armed .sw-note:not(.on), .is-armed .sw-human:not(.on), .is-armed .sw-ship:not(.on) { opacity: 0; transform: translateY(4px); }
.is-armed .sw-mainline { stroke: var(--color-rule-strong); }
.is-armed .sw-main.on .sw-mainline { stroke: var(--color-done); }
.sw-fly.go { animation: sw-fly 900ms var(--ease-in) forwards; }
@keyframes sw-fly {
  0% { opacity: 0; transform: translateY(0); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--fly, 60px)); }
}
.is-paused .sw-fly.go { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .sw-fly.go { animation: none; }
  .swarm .sw-step, .swarm .sw-decide, .swarm .sw-hex, .swarm .sw-pr, .swarm .sw-drop, .swarm .sw-branch, .swarm .sw-rim, .swarm .sw-pr-done { transition: none; }
}

.hero-visual-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.stages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xs); list-style: none; flex: 1 1 320px; max-width: 460px; }
.stages li {
  padding-top: var(--space-xs);
  border-top: 2px solid var(--color-done);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  transition: border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.is-armed .stages li { border-top-color: var(--color-rule-strong); color: var(--color-muted); }
.is-armed .stages li.done { border-top-color: var(--color-done); color: var(--color-ink-2); }
.is-armed .stages li[aria-current="step"] { border-top-color: var(--color-ink); color: var(--color-ink); }
.swarm-ctl { display: flex; gap: var(--space-xs); }

/* ---------- 3 つの作り方の比べ ---------- */
.compare { display: grid; gap: var(--space-lg); }
/* 1 回目・2 回目の切り替え（JS がある時だけ出す） */
.cmp-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
.cmp-act {
  display: grid;
  gap: var(--space-xs);
  align-content: end;
  min-height: 44px;
  padding: var(--space-xs) 0 0;
  border: 0;
  background: none;
  text-align: start;
  color: var(--color-muted);
  font-size: var(--text-sm);
  transition: color var(--dur-micro) var(--ease-out);
}
.cmp-act-n { font-family: var(--font-mono); font-size: var(--text-xs); margin-inline-end: var(--space-sm); }
.cmp-act-bar { display: block; height: 2px; background: var(--color-rule); overflow: hidden; }
.cmp-act-bar > span { display: block; height: 100%; background: var(--color-ink); transform-origin: 0 50%; transform: scaleX(0); }
.cmp-act[aria-pressed="true"] { color: var(--color-ink); }
.cmp-act:hover { color: var(--color-ink); }
.cmp-act:active { color: var(--color-ink-2); }
.cmp-act:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-1); }

.compare-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
@media (max-width: 60rem) { .compare-panels { grid-template-columns: minmax(0, 1fr); } }
.cmp-panel {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
  padding: var(--space-lg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-3);
  background: var(--color-paper);
  min-width: 0;
}
.cmp-swarm { border-color: color-mix(in oklab, var(--color-done) 45%, var(--color-rule)); }
.cmp-name { font-size: var(--text-lg); line-height: 1.4; }
.cmp-svg { width: 100%; height: auto; overflow: visible; }
.cmp-svg text { font-family: var(--font-body); }
.cmp-ground { stroke: var(--color-rule-strong); stroke-width: 1; }
.cmp-brick rect { fill: var(--color-paper-3); stroke: var(--color-ink-2); stroke-width: 1; }
.cmp-brick[data-patch] rect { stroke: var(--color-muted); stroke-dasharray: 3 2; }
.cmp-brick[data-crack] rect { stroke: var(--color-failed); fill: var(--color-failed-wash); }
.cmp-crack { fill: none; stroke: var(--color-failed); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.cmp-tilt { transform-box: fill-box; transform-origin: 50% 100%; transform: rotate(-3.5deg); }
.cmp-doc { fill: var(--color-paper-3); stroke: var(--color-muted); stroke-width: 1; }
.cmp-doc-label { fill: var(--color-muted); font-size: 11px; }
.cmp-hex-plan { fill: none; stroke: var(--color-done); stroke-width: 1; }
.cmp-hex-fill { fill: var(--color-done-wash); stroke: var(--color-done); stroke-width: 1; }
/* 公開までの日数：数字・日数の線・目盛り */
.cmp-count-num { font-family: var(--font-display); font-size: 42px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; fill: var(--color-ink); }
.cmp-count-unit { font-size: 14px; font-weight: 500; fill: var(--color-ink-2); }
.cmp-count.is-released .cmp-count-num, .cmp-count.is-released .cmp-count-unit { fill: var(--color-done); }
.cmp-axis-base { stroke: var(--color-rule-strong); stroke-width: 1; }
.cmp-seg { stroke-width: 3; stroke-linecap: butt; }
.cmp-seg-design { stroke: var(--color-idle); }
.cmp-seg-build { stroke: var(--color-ai); }
.cmp-tick { fill: none; stroke: var(--color-muted); stroke-width: 1; }
.cmp-tick-label { fill: var(--color-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.cmp-scale-end { fill: var(--color-ink-2); font-weight: 600; }
.cmp-flag line { stroke: var(--color-done); stroke-width: 1.5; }
.cmp-flag polygon { fill: var(--color-done); }
.cmp-head { stroke: var(--color-ink); stroke-width: 1.5; opacity: 0; }
.cmp-status { min-height: 3.4em; font-family: var(--font-display); font-weight: 500; line-height: 1.7; color: var(--color-ink); }
.cmp-spec { list-style: none; display: grid; gap: var(--space-2xs); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-ink-2); }

/* 動かす時（JS が付ける .cmp-armed の下だけ）。1 回目は日数を隠し、2 回目に出す */
.cmp-armed .cmp-axis, .cmp-armed .cmp-count { transition: opacity var(--dur-long) var(--ease-out); }
.cmp-armed[data-showing="1"] .cmp-axis, .cmp-armed[data-showing="1"] .cmp-count { opacity: 0; }
.cmp-armed[data-showing="2"] .cmp-head { opacity: 1; }
.cmp-armed .cmp-count-num, .cmp-armed .cmp-count-unit { transition: fill var(--dur-short) var(--ease-out); }
.cmp-armed .cmp-brick, .cmp-armed .cmp-doc, .cmp-armed .cmp-doc-label, .cmp-armed .cmp-hex { transition: opacity var(--dur-short) var(--ease-out); }
.cmp-armed .cmp-brick:not(.on), .cmp-armed .cmp-doc:not(.on), .cmp-armed .cmp-doc-label:not(.on), .cmp-armed .cmp-hex:not(.on) { opacity: 0; }
.cmp-armed .cmp-brick[data-crack]:not(.cracked) rect { stroke: var(--color-ink-2); fill: var(--color-paper-3); }
.cmp-armed .cmp-brick[data-patch]:not(.cracked) rect { stroke: var(--color-muted); }
.cmp-armed .cmp-brick:not(.cracked) .cmp-crack { opacity: 0; }
.cmp-armed .cmp-tilt { transform: none; transition: transform 700ms var(--ease-out); }
.cmp-armed .cmp-tilt.tilted { transform: rotate(-3.5deg); }
.cmp-armed .cmp-hex .cmp-hex-plan { stroke: var(--color-muted); stroke-dasharray: 3 2.5; }
.cmp-armed .cmp-hex .cmp-hex-fill { opacity: 0; transition: opacity var(--dur-short) var(--ease-out), fill var(--dur-short) var(--ease-out), stroke var(--dur-short) var(--ease-out); }
.cmp-armed .cmp-hex.building .cmp-hex-fill { opacity: 1; fill: var(--color-ai-wash); stroke: var(--color-ai); }
.cmp-armed .cmp-hex.built .cmp-hex-plan { stroke: var(--color-done); stroke-dasharray: none; }
.cmp-armed .cmp-hex.built .cmp-hex-fill { opacity: 1; fill: var(--color-done-wash); stroke: var(--color-done); }
.cmp-armed .cmp-flag { transition: opacity var(--dur-short) var(--ease-out); }
.cmp-armed .cmp-flag:not(.on) { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .cmp-armed .cmp-brick, .cmp-armed .cmp-doc, .cmp-armed .cmp-doc-label, .cmp-armed .cmp-hex, .cmp-armed .cmp-tilt, .cmp-armed .cmp-hex .cmp-hex-fill, .cmp-armed .cmp-flag,
  .cmp-armed .cmp-axis, .cmp-armed .cmp-count, .cmp-armed .cmp-count-num, .cmp-armed .cmp-count-unit, .cmp-act { transition: none; }
}

.compare-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-xl); }
.cmp-range { display: inline-flex; align-items: center; gap: var(--space-sm); flex: 1 1 280px; max-width: 520px; min-height: 44px; }
.cmp-range-label { font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; }
.cmp-range input { flex: 1; min-width: 0; height: 44px; accent-color: var(--color-ai); background: transparent; cursor: pointer; }
.cmp-range input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-1); }
.cmp-range input:hover { accent-color: var(--color-ink); }
.cmp-range input:active { accent-color: var(--color-ink); }
.cmp-range input:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- メタハーネスの構成図 ---------- */
.mh { display: grid; gap: 0; }
.mh-row { display: grid; grid-template-columns: var(--label-col) minmax(0, 1fr); gap: var(--space-lg); align-items: center; }
.mh-label { font-size: var(--text-sm); color: var(--color-muted); }
.mh-human, .mh-core, .mh-ports, .mh-hives {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-3);
  background: var(--color-paper);
  padding: var(--space-md) var(--space-lg);
}
.mh-human { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-lg); border-color: color-mix(in oklab, var(--color-human) 55%, var(--color-rule)); background: var(--color-human-wash); }
.mh-human strong { font-family: var(--font-display); font-weight: 600; }
.mh-human span { color: var(--color-human); font-size: var(--text-sm); }
.mh-core { padding: 0; background: var(--color-paper-2); border-color: var(--color-rule-strong); }
.mh-core-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-lg); padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.mh-core-head strong { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.mh-core-head span { color: var(--color-ink-2); font-size: var(--text-sm); }
.mh-modules { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mh-modules li { display: grid; gap: var(--space-3xs); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-rule); border-inline-start: 1px solid var(--color-rule); }
.mh-modules li:nth-child(-n + 4) { border-top: 0; }
.mh-modules li:nth-child(4n + 1) { border-inline-start: 0; }
.mh-modules strong { font-weight: 600; font-size: var(--text-sm); }
.mh-modules span { color: var(--color-muted); font-size: var(--text-xs); line-height: 1.6; }
.mh-ports { display: grid; gap: var(--space-sm); }
.mh-ports ol { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-2xs); }
.mh-ports li { display: grid; gap: var(--space-3xs); padding: var(--space-xs) var(--space-xs); border-top: 2px solid var(--color-ai); font-size: var(--text-xs); line-height: 1.5; color: var(--color-ink); }
.mh-ports li .mono { color: var(--color-muted); }
.mh-engines { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }
.mh-engines li { display: grid; gap: var(--space-3xs); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-3); background: var(--color-paper); }
.mh-engines li:last-child { border-style: dashed; }
.mh-engines strong { font-weight: 600; }
.mh-engines span { color: var(--color-muted); font-size: var(--text-xs); }
.mh-hives { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); align-items: baseline; border-color: color-mix(in oklab, var(--color-done) 40%, var(--color-rule)); }
.mh-hives strong { font-family: var(--font-display); font-weight: 600; }
.mh-hives span { color: var(--color-ink-2); font-size: var(--text-sm); }
.mh-wire { display: flex; justify-content: center; gap: var(--space-2xl); height: 36px; margin-inline-start: calc(var(--label-col) + var(--space-lg)); }
.mh-wire i { position: relative; display: block; width: 1px; height: 100%; background: var(--color-rule-strong); overflow: hidden; }
.mh-wire i::after { content: ""; position: absolute; inset-inline: -1px; top: 0; height: 10px; background: var(--color-ai); opacity: 0; }
.mh.is-in .mh-wire i::after { animation: mh-pulse 1600ms var(--ease-in-out) 2; }
.mh.is-in .mh-wire i:nth-child(2)::after { animation-delay: 260ms; }
.mh.is-in .mh-wire i:nth-child(3)::after { animation-delay: 520ms; }
@keyframes mh-pulse {
  0% { opacity: 0; transform: translateY(-10px); }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(36px); }
}
@media (prefers-reduced-motion: reduce) { .mh.is-in .mh-wire i::after { animation: none; } }
@media (max-width: 60rem) {
  .mh-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }
  .mh-wire { margin-inline-start: 0; }
  .mh-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mh-modules li:nth-child(-n + 4) { border-top: 1px solid var(--color-rule); }
  .mh-modules li:nth-child(-n + 2) { border-top: 0; }
  .mh-modules li:nth-child(4n + 1) { border-inline-start: 1px solid var(--color-rule); }
  .mh-modules li:nth-child(odd) { border-inline-start: 0; }
  .mh-ports ol { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mh-engines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 5 つの階層 ---------- */
.ladder { display: grid; gap: var(--space-lg); }
.ladder-row { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-columns); align-items: end; }
.ladder-item { display: grid; gap: var(--space-md); }
.ladder-pic { display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 1 / 1; border-bottom: 1px solid var(--color-rule); }
.ladder-pic img { width: 100%; height: auto; transform: scale(var(--s, 1)); transform-origin: 50% 100%; }
.ladder-text { display: grid; gap: var(--space-3xs); }
.ladder-text strong { font-family: var(--font-display); font-weight: 600; }
.ladder-crown { font-size: var(--text-xs); color: var(--color-gold); }
.ladder-text span:last-child { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.6; }
.js .ladder[data-anim] .ladder-pic img { opacity: 0; transform: translateY(16px) scale(var(--s, 1)); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i) * 110ms); }
.js .ladder[data-anim].is-in .ladder-pic img { opacity: 1; transform: scale(var(--s, 1)); }
@media (prefers-reduced-motion: reduce) { .js .ladder[data-anim] .ladder-pic img { opacity: 1; transform: scale(var(--s, 1)); transition: none; } }
@media (max-width: 60rem) { .ladder-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ladder-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- AI の机の命令 ---------- */
.cli { display: grid; gap: var(--space-md); padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-3); background: var(--color-paper); min-width: 0; }
.cli-ask { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); align-items: baseline; font-family: var(--font-display); font-weight: 500; }
.cli-who { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-muted); }
.cli-cmds { list-style: none; display: grid; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--radius-2); background: var(--color-paper-2); border: 1px solid var(--color-rule-2); overflow-x: auto; }
.cli-cmds code { display: block; white-space: pre; font-size: 0.8125rem; line-height: 1.7; color: var(--color-ai); }
.cli-prompt { color: var(--color-muted); margin-inline-end: var(--space-xs); }
.cli-done { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-sm); align-items: baseline; font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.7; }
.js .cli[data-anim] .cli-cmds li, .js .cli[data-anim] .cli-done { opacity: 0; transform: translateY(6px); transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out); transition-delay: calc(300ms + var(--i) * 420ms); }
.js .cli[data-anim].is-in .cli-cmds li, .js .cli[data-anim].is-in .cli-done { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .cli[data-anim] .cli-cmds li, .js .cli[data-anim] .cli-done { opacity: 1; transform: none; transition: none; } }

/* ---------- トップの各段 ---------- */
.points3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.points3 > div { display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.points3 .item-title { font-size: var(--text-title); }
@media (max-width: 60rem) { .points3 { grid-template-columns: minmax(0, 1fr); } }

.cases-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
@media (max-width: 60rem) { .cases-top { grid-template-columns: minmax(0, 1fr); } }
.case-top { display: grid; gap: var(--space-md); align-content: start; padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-3); background: var(--color-paper-2); }
.case-top .item-title { font-size: var(--text-section); font-family: var(--font-body); letter-spacing: -0.02em; }
.case-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--space-sm) 0; border-top: 1px solid var(--color-rule); }
.case-figs > div { padding-top: var(--space-md); }
.case-figs > div + div { padding-inline-start: var(--space-lg); border-inline-start: 1px solid var(--color-rule); }
.case-figs dt { font-size: var(--text-sm); color: var(--color-ink-2); }
.case-figs dd { margin: var(--space-2xs) 0 0; }
.case-top .text-link { justify-self: start; }

.who-list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); }
.who-list a {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-sm);
  height: 100%;
  padding: var(--space-lg) 0 var(--space-md);
  border-top: 2px solid var(--color-rule-strong);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--dur-micro) var(--ease-out);
}
.who-list a:hover { border-top-color: var(--color-ink); }
.who-list a:active { opacity: 0.85; }
.who-list a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-1); }
.who-list strong { font-family: var(--font-display); font-size: var(--text-title); font-weight: 600; line-height: 1.4; }
.who-list span { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.75; }
.who-list em { font-style: normal; font-size: var(--text-xs); color: var(--color-muted); }
@media (max-width: 68rem) { .who-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .who-list { grid-template-columns: minmax(0, 1fr); } }

.beta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg) var(--space-2xl); }
.beta-band .section-title { max-width: 22em; }

/* ======================================================================
 * 下層ページの部品
 * ==================================================================== */

/* 動きを減らす設定の時は、遅れも無くして最後の形をすぐ見せる */
@media (prefers-reduced-motion: reduce) {
  [data-anim] *, [data-anim] *::before, [data-anim] *::after, .reveal { transition-delay: 0s !important; animation-delay: 0s !important; }
}
.replay { display: none; }
.js .replay { display: inline-flex; }
.tag.failed { color: var(--color-failed); border-color: color-mix(in oklab, var(--color-failed) 40%, transparent); }
.stage-tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; }

/* ---------- 文の並び ---------- */
.cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
@media (max-width: 68rem) { .cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 60rem) { .cols-2, .cols-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .cols-4 { grid-template-columns: minmax(0, 1fr); } }
.col-item { display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); min-width: 0; }
.col-item .item-title { font-size: var(--text-title); }
.col-item .text-link { justify-self: start; }
.col-n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.quote { margin: 0; font-family: var(--font-display); font-size: var(--text-title); line-height: 1.75; color: var(--color-ink); max-width: 30em; font-weight: 500; }
.quote-by { display: block; margin-top: var(--space-sm); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; color: var(--color-ink-2); }
.note { padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-3); background: var(--color-paper-2); font-size: var(--text-sm); line-height: 1.75; color: var(--color-ink-2); }
.note strong { color: var(--color-ink); font-weight: 600; }
.section-foot { margin-top: var(--space-xl); }

/* ---------- 順に進む物の並び ---------- */
.flow { display: grid; gap: var(--space-md); }
.flow-list { list-style: none; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: var(--space-lg); }
.flow-item { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-md); border-top: 2px solid var(--color-rule-strong); min-width: 0; }
.flow-item.human { border-top-color: var(--color-human); }
.flow-item.ai { border-top-color: var(--color-ai); }
.flow-item.review { border-top-color: var(--color-review); }
.flow-item.done { border-top-color: var(--color-done); }
.flow-head { display: flex; align-items: center; gap: var(--space-xs); min-height: 20px; }
.flow-head svg { width: 18px; height: 18px; flex: none; }
.flow-n { font-size: var(--text-xs); color: var(--color-muted); }
.flow-meta { font-size: var(--text-xs); color: var(--color-ink-2); }
.flow-item strong { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.45; }
.flow-text { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.7; }
@media (max-width: 60rem) { .flow-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .flow-list { grid-template-columns: minmax(0, 1fr); } }
.flow-item { transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out), border-color 480ms var(--ease-out); transition-delay: calc(var(--i) * 140ms); }
.js .flow[data-anim]:not(.is-in) .flow-item { opacity: 0; transform: translateY(10px); border-top-color: var(--color-rule); }

/* ---------- ビーズビルディングの段の図 ---------- */
.rail { display: grid; gap: var(--space-md); }
.rail-svg { width: 100%; height: auto; overflow: visible; }
.rail-svg text { font-family: var(--font-body); }
.rl-step rect, .rl-lane rect, .rl-ship rect { fill: var(--color-paper-2); stroke: var(--color-rule-strong); stroke-width: 1; }
.rl-lane-a rect { stroke: var(--color-ai); }
.rl-ship rect { stroke: var(--color-done); fill: var(--color-done-wash); }
.rl-n { fill: var(--color-muted); font-family: var(--font-mono) !important; font-size: 14px; }
.rl-label { fill: var(--color-ink); font-family: var(--font-display) !important; font-size: 17px; font-weight: 600; }
.rl-drop, .rl-link { stroke: var(--color-rule-strong); stroke-width: 1.5; }
.rl-gate polygon { fill: var(--color-human); }
.rl-gate-label { fill: var(--color-ink); font-size: 15px; font-weight: 600; font-family: var(--font-display) !important; }
.rl-gate-sub { fill: var(--color-human); font-size: 13px; }
.rl-branch, .rl-merge { fill: none; stroke: var(--color-rule-strong); stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 0; }
.rl-cell { fill: var(--color-done-wash); stroke: var(--color-done); stroke-width: 1.2; }
.rl-item { fill: var(--color-paper-3); stroke: var(--color-ink-2); stroke-width: 1; }
.rl-loop { fill: none; stroke: var(--color-muted); stroke-width: 1.5; stroke-dasharray: 5 6; }
.rl-arrowhead { fill: var(--color-muted); }
.rl-loop-label { fill: var(--color-ink-2); font-size: 14px; }
@media (max-width: 60rem) { .rail { display: none; } }
.rail .rl-step, .rail .rl-gate, .rail .rl-lane, .rail .rl-ship, .rail .rl-loop, .rail .rl-loop-label, .rail .rl-link, .rail .rl-item {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.rail .rl-branch, .rail .rl-merge { transition: stroke-dashoffset 600ms var(--ease-out); }
.rail .rl-step { transition-delay: calc(var(--i) * 140ms); }
.rail .rl-link { transition-delay: 700ms; }
.rail .rl-gate { transition-delay: 780ms; }
.rail .rl-branch { transition-delay: 980ms; }
.rail .rl-lane { transition-delay: 1200ms; }
.rail .rl-item { transition-delay: calc(1400ms + var(--j) * 160ms); }
.rail .rl-merge { transition-delay: 2500ms; }
.rail .rl-ship { transition-delay: 2800ms; }
.rail .rl-loop, .rail .rl-loop-label { transition-duration: 700ms; transition-delay: 3100ms; }
.js .rail[data-anim]:not(.is-in) .rl-step { opacity: 0; transform: translateX(-10px); }
.js .rail[data-anim]:not(.is-in) .rl-link, .js .rail[data-anim]:not(.is-in) .rl-lane, .js .rail[data-anim]:not(.is-in) .rl-item, .js .rail[data-anim]:not(.is-in) .rl-loop, .js .rail[data-anim]:not(.is-in) .rl-loop-label { opacity: 0; }
.js .rail[data-anim]:not(.is-in) .rl-gate { opacity: 0; transform: scale(0.4); }
.js .rail[data-anim]:not(.is-in) .rl-branch, .js .rail[data-anim]:not(.is-in) .rl-merge { stroke-dashoffset: 100; }
.js .rail[data-anim]:not(.is-in) .rl-ship { opacity: 0; transform: translateX(-8px); }
.js .rail[data-anim]:not(.is-in) .rl-cell { opacity: 0; }
.js .rail[data-anim].is-in .rl-cell { animation: rl-cell 1400ms var(--ease-out) both; animation-delay: calc(1300ms + var(--j) * 120ms); }
@keyframes rl-cell {
  0% { opacity: 0; fill: var(--color-ai-wash); stroke: var(--color-ai); }
  20% { opacity: 1; fill: var(--color-ai-wash); stroke: var(--color-ai); }
  70% { opacity: 1; fill: var(--color-ai-wash); stroke: var(--color-ai); }
  100% { opacity: 1; fill: var(--color-done-wash); stroke: var(--color-done); }
}

/* 段の一覧（図の下。狭い画面ではこれだけ） */
.stage-list { list-style: none; display: grid; border-top: 1px solid var(--color-rule); }
.stage-list > li { display: grid; grid-template-columns: 56px minmax(0, 4fr) minmax(0, 7fr) minmax(0, 3fr); gap: var(--space-md) var(--space-lg); align-items: baseline; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.stage-list .mono { color: var(--color-muted); font-size: var(--text-sm); }
.stage-list strong { font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); line-height: 1.4; }
.stage-list p { color: var(--color-ink-2); }
.stage-list .text-link { white-space: nowrap; font-size: var(--text-sm); justify-self: end; }
.stage-list li.is-human strong { color: var(--color-ink); }
@media (max-width: 60rem) {
  .stage-list > li { grid-template-columns: 40px minmax(0, 1fr); }
  .stage-list > li > p, .stage-list > li > .text-link { grid-column: 2; }
  .stage-list .text-link { justify-self: start; }
}

/* ---------- 群れの進み（ブロックごとの PR） ---------- */
.lanes { display: grid; gap: var(--space-md); padding: var(--space-xl); border: 1px solid var(--color-rule); border-radius: var(--radius-3); background: var(--color-paper); min-width: 0; }
.lanes-list { list-style: none; display: grid; gap: var(--space-sm); }
.lane { --s: 520ms; display: grid; grid-template-columns: 48px minmax(0, 13em) minmax(0, 1fr); align-items: center; gap: var(--space-md); }
.lane.is-base { --s: 0ms; }
.lane-id { font-size: var(--text-xs); color: var(--color-muted); }
.lane-name { font-size: var(--text-sm); color: var(--color-ink); }
.lane.is-base .lane-name { font-weight: 600; }
.lane-track { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.lane-track i { display: block; width: 18px; height: 20px; background: var(--color-done); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.lanes-main { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); font-size: var(--text-xs); color: var(--color-ink-2); }
.lanes-main .mono { color: var(--color-muted); }
.lanes-main b { display: block; height: 2px; background: var(--color-done); transition: background-color 600ms var(--ease-out) 2700ms; }
.lanes-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.js .lanes[data-anim]:not(.is-in) .lane-track i { opacity: 0; }
.js .lanes[data-anim]:not(.is-in) .lanes-main b { background: var(--color-rule-strong); transition: none; }
.js .lanes[data-anim].is-in .lane-track i { animation: pr-fill 1100ms var(--ease-out) both; animation-delay: calc(var(--s) + var(--j) * 200ms + var(--i) * 45ms); }
@keyframes pr-fill {
  0% { opacity: 0; transform: scale(0.4); background: var(--color-ai); }
  25% { opacity: 1; transform: none; background: var(--color-ai); }
  70% { opacity: 1; transform: none; background: var(--color-ai); }
  100% { opacity: 1; transform: none; background: var(--color-done); }
}
@media (max-width: 40rem) {
  .lanes { padding: var(--space-lg) var(--space-md); }
  .lane { grid-template-columns: 40px minmax(0, 1fr); }
  .lane-track { grid-column: 2; }
  .lanes-main { grid-template-columns: 40px minmax(0, 1fr); }
  .lanes-main span:last-child { grid-column: 2; }
}

/* ---------- ブロックの地図 ---------- */
.bmap { display: grid; gap: var(--space-md); }
.bmap-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl) var(--gap-columns); align-items: center; }
@media (max-width: 60rem) { .bmap-grid { grid-template-columns: minmax(0, 1fr); } }
.bmap-svg { width: 100%; max-width: 520px; height: auto; overflow: visible; justify-self: center; }
.bmap-svg text { font-family: var(--font-body); }
.bm-hex { fill: var(--color-paper-2); stroke: var(--color-rule); stroke-width: 1; }
.bm-block.is-base .bm-hex { fill: var(--color-paper-3); }
.bm-rim { fill: none; stroke: var(--color-done); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p)); }
.bm-id { fill: var(--color-muted); font-family: var(--font-mono) !important; font-size: 12px; }
.bm-name { fill: var(--color-ink); font-family: var(--font-display) !important; font-size: 15px; font-weight: 600; }
.bm-sub { fill: var(--color-ink-2); font-size: 11.5px; }
.bm-fog { opacity: 0.6; }
.bm-fog-line { stroke: var(--color-idle); stroke-width: 2; }
.bm-wall { stroke-width: 2.5; stroke-linecap: round; }
.bm-wall.real { stroke: var(--color-ink-2); }
.bm-wall.mock { stroke: var(--color-muted); stroke-dasharray: 5 5; }
.bm-wall.clash { stroke: var(--color-failed); }
.bmap-legend { list-style: none; display: grid; gap: var(--space-md); }
.bmap-legend li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-sm); align-items: center; font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.6; }
.bmap-legend svg { width: 40px; height: 12px; }
.bmap-legend strong { color: var(--color-ink); font-weight: 600; margin-inline-end: var(--space-xs); }
.bm-key { stroke-width: 2.5; stroke-linecap: round; }
.bm-key.real { stroke: var(--color-ink-2); }
.bm-key.mock { stroke: var(--color-muted); stroke-dasharray: 5 5; }
.bm-key.clash { stroke: var(--color-failed); }
.bm-key.rim { stroke: var(--color-done); }
.bm-key-fog { stroke: var(--color-rule); }
.bm-block { transform-box: fill-box; transform-origin: center; transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); transition-delay: calc(var(--i) * 80ms); }
.bm-rim { transition: stroke-dashoffset 1200ms var(--ease-out); transition-delay: calc(700ms + var(--i) * 90ms); }
.bm-wall { transition: opacity 300ms var(--ease-out); transition-delay: calc(1100ms + var(--i) * 70ms); }
.bm-fog { transition: opacity 600ms var(--ease-out) 2600ms; }
.js .bmap[data-anim]:not(.is-in) .bm-block { opacity: 0; transform: scale(0.9); }
.js .bmap[data-anim]:not(.is-in) .bm-rim { stroke-dashoffset: 100; }
.js .bmap[data-anim]:not(.is-in) .bm-wall, .js .bmap[data-anim]:not(.is-in) .bm-fog { opacity: 0; }
.js .bmap[data-anim].is-in .bm-wall.clash { animation: bm-clash 900ms var(--ease-out) 2200ms both; }
@keyframes bm-clash { 0% { opacity: 0; stroke-width: 2.5; } 30% { opacity: 1; stroke-width: 5; } 100% { opacity: 1; stroke-width: 2.5; } }

/* ---------- 出して回す輪 ---------- */
.loop { display: grid; gap: var(--space-md); }
.loop-svg { width: 100%; max-width: 600px; height: auto; overflow: visible; justify-self: center; }
.loop-svg text { font-family: var(--font-body); }
.lp-track { fill: none; stroke: var(--color-rule); stroke-width: 2; }
.lp-run { fill: none; stroke: var(--color-ink-2); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 2600ms linear; }
.lp-node circle { fill: var(--color-paper); stroke: var(--color-ink-2); stroke-width: 2; }
.lp-node.ai circle { stroke: var(--color-ai); fill: var(--color-ai-wash); }
.lp-node.human circle { stroke: var(--color-human); fill: var(--color-human); }
.lp-node.done circle { stroke: var(--color-done); fill: var(--color-done-wash); }
.lp-node text { fill: var(--color-ink); font-size: 15px; font-family: var(--font-display) !important; font-weight: 500; }
.lp-node.human text { fill: var(--color-human); }
.lp-core-title { fill: var(--color-ink); font-family: var(--font-display) !important; font-size: 22px; font-weight: 600; }
.lp-core-sub { fill: var(--color-ink-2); font-size: 14px; }
.lg-dot { stroke-width: 2; }
.lg-dot.ai { stroke: var(--color-ai); fill: var(--color-ai-wash); }
.lg-dot.human { stroke: var(--color-human); fill: var(--color-human); }
.lg-dot.done { stroke: var(--color-done); fill: var(--color-done-wash); }
.loop-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-md) var(--space-xl); }
.lp-node { transition: opacity 300ms var(--ease-out); transition-delay: calc(var(--i) * 371ms); }
.lp-core { transition: opacity 600ms var(--ease-out) 2600ms; }
.js .loop[data-anim]:not(.is-in) .lp-run { stroke-dashoffset: 100; transition: none; }
.js .loop[data-anim]:not(.is-in) .lp-node { opacity: 0.25; transition: none; }
.js .loop[data-anim]:not(.is-in) .lp-core { opacity: 0; transition: none; }
@media (max-width: 40rem) { .lp-node text { font-size: 19px; } .lp-core-sub { display: none; } .lp-core-title { font-size: 26px; } }

/* おまかせの範囲（低・中・高） */
.risk { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.risk li { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-md); border-top: 2px solid var(--color-rule-strong); }
.risk li.low { border-top-color: var(--color-ai); }
.risk li.mid { border-top-color: var(--color-review); }
.risk li.high { border-top-color: var(--color-human); }
.risk strong { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }
.risk span { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.7; }
@media (max-width: 60rem) { .risk { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 止める 3 段 ---------- */
.stops { display: grid; gap: var(--space-md); }
.stops-list { list-style: none; display: grid; gap: var(--space-sm); }
.stop { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); gap: var(--space-md) var(--space-lg); align-items: center; padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-3); background: var(--color-paper); }
.stop-2 { margin-inline: var(--space-xl); }
.stop-3 { margin-inline: var(--space-2xl); border-color: color-mix(in oklab, var(--color-human) 50%, var(--color-rule)); background: var(--color-human-wash); }
.stop-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); }
.stop-n { font-size: var(--text-xs); color: var(--color-muted); }
.stop-head strong { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }
.stop-who { font-size: var(--text-xs); color: var(--color-ink-2); }
.stop-text { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.7; }
.stop-ex { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); min-width: 0; }
.stop-op { font-size: var(--text-xs); color: var(--color-ai); background: var(--color-paper-2); border: 1px solid var(--color-rule-2); border-radius: var(--radius-1); padding: var(--space-2xs) var(--space-xs); overflow-wrap: anywhere; }
@media (max-width: 60rem) { .stop { grid-template-columns: minmax(0, 1fr); } .stop-2, .stop-3 { margin-inline: 0; } }
.stop { transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); transition-delay: calc(var(--i) * 260ms); }
.stop-ex .tag { transition: opacity 300ms var(--ease-out); transition-delay: calc(520ms + var(--i) * 260ms); }
.js .stops[data-anim]:not(.is-in) .stop { opacity: 0; transform: translateY(-8px); }
.js .stops[data-anim]:not(.is-in) .stop-ex .tag { opacity: 0; }

/* ---------- ペルソナで確かめる門 ---------- */
.pgate { display: grid; gap: var(--space-md); }
.pgate-table { min-width: 560px; }
.pgate-table td { vertical-align: middle; white-space: nowrap; }
.pgate-table th .tag { margin-inline-start: var(--space-xs); }
.pg-runs { display: inline-flex; gap: var(--space-2xs); margin-inline-end: var(--space-sm); vertical-align: middle; }
.pg-runs i { display: block; width: 14px; height: 16px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--color-rule-strong); transition: background-color 260ms var(--ease-out), opacity 260ms var(--ease-out); transition-delay: calc(var(--k) * 70ms); }
.pg-runs i.ok { background: var(--color-done); }
.pg-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-ink-2); }
.pgate-table tr.is-main th, .pgate-table tr.is-main td { background: color-mix(in oklab, var(--color-done) 5%, transparent); }
.pgate-gate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-3); background: var(--color-paper-2); }
.pgate-gate div { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-md); }
.pgate-gate strong { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); }
.pgate-gate div span { color: var(--color-ink-2); font-size: var(--text-sm); }
.pgate-gate .tag { white-space: normal; line-height: 1.4; min-height: 28px; transition: opacity 400ms var(--ease-out) 2100ms; }
.js .pgate[data-anim]:not(.is-in) .pg-runs i { background: var(--color-rule); opacity: 0.6; }
.js .pgate[data-anim]:not(.is-in) .pgate-gate .tag { opacity: 0; }

/* ---------- 役と段の表 ---------- */
.role-table { min-width: 860px; }
.role-table tbody th { white-space: nowrap; }
.role-table td { line-height: 1.7; }
/* 狭い画面では、役ごとに縦に積む（横に流さない） */
@media (max-width: 40rem) {
  .role-wrap { overflow: visible; border: 0; }
  .role-table { min-width: 0; }
  .role-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .role-table, .role-table tbody, .role-table tr, .role-table th, .role-table td { display: block; }
  .role-table tr { border: 1px solid var(--color-rule); border-radius: var(--radius-3); padding: var(--space-md) var(--space-lg); }
  .role-table tr + tr { margin-top: var(--space-md); }
  .role-table tbody th { padding: 0 0 var(--space-xs); border: 0; }
  .role-table td { display: grid; grid-template-columns: 6em minmax(0, 1fr); gap: var(--space-sm); padding: var(--space-xs) 0; border: 0; border-top: 1px solid var(--color-rule); background: none; }
  .role-table td::before { content: attr(data-label); color: var(--color-muted); font-size: var(--text-xs); line-height: 2; }
}

/* ---------- よくある質問 ---------- */
.faq { border-top: 1px solid var(--color-rule); }
.faq-item { border-bottom: 1px solid var(--color-rule); }
.faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 64px; padding-block: var(--space-md); cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink); border-radius: var(--radius-1); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-inline-end: var(--space-xs); border-inline-end: 1.5px solid var(--color-ink-2); border-block-end: 1.5px solid var(--color-ink-2); transform: translateY(-3px) rotate(45deg); transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.faq-item[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq-item summary:hover::after { border-color: var(--color-ink); }
.faq-item summary:active { color: var(--color-ink-2); }
.faq-item summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.faq-a { display: grid; gap: var(--space-sm); padding-bottom: var(--space-lg); color: var(--color-ink-2); max-width: var(--measure); }
.faq-group + .faq-group { margin-top: var(--space-3xl); }
.faq-group > h2 { margin-bottom: var(--space-lg); }

/* ---------- 共通の 7 つの口 ---------- */
.ports-table { list-style: none; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-sm); }
.ports-table li { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-sm); border-top: 2px solid var(--color-ai); }
.ports-table .mono { font-size: var(--text-xs); color: var(--color-muted); }
.ports-table strong { font-family: var(--font-display); font-weight: 600; }
.ports-table span:last-child { font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.7; }
@media (max-width: 68rem) { .ports-table { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .ports-table { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 機能の一覧 ---------- */
.feat-filter { display: none; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.js .feat-filter { display: flex; }
.feat-filter-label { font-size: var(--text-sm); color: var(--color-ink-2); margin-inline-end: var(--space-xs); }
.feat-count { font-size: var(--text-sm); color: var(--color-ink-2); margin-inline-start: var(--space-sm); }
.feat-group + .feat-group { margin-top: var(--space-3xl); }
.feat-group-head { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-sm) var(--gap-columns); align-items: baseline; padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.feat-group-head p { color: var(--color-ink-2); max-width: 40em; }
.feat-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap-columns); }
.feat-grid > li { border-bottom: 1px solid var(--color-rule); }
.feat-link { display: grid; gap: var(--space-xs); align-content: start; height: 100%; padding: var(--space-lg) 0; color: inherit; text-decoration: none; border-radius: var(--radius-1); }
.feat-link strong { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.feat-link > span { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.7; }
.feat-link:hover strong { text-decoration-color: var(--color-ink-2); }
.feat-link:active { opacity: 0.85; }
.feat-link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.feat-link .stage-tags { margin-top: var(--space-2xs); }
@media (max-width: 68rem) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .feat-grid { grid-template-columns: minmax(0, 1fr); } .feat-group-head { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 機能のページ ---------- */
.feat-hero-tags { margin-top: var(--space-lg); }
.feat-points { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.feat-points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-sm); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.feat-points svg { width: 20px; height: 20px; margin-top: var(--space-2xs); }
.feat-points strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); line-height: 1.4; }
.feat-points p { margin-top: var(--space-xs); color: var(--color-ink-2); }
@media (max-width: 40rem) { .feat-points { grid-template-columns: minmax(0, 1fr); } }
.stage-strip { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
.stage-strip li { display: grid; gap: var(--space-2xs); align-content: start; padding-top: var(--space-sm); border-top: 3px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); line-height: 1.6; }
.stage-strip strong { font-weight: 600; font-size: var(--text-md); }
.stage-strip li.on { color: var(--color-ink-2); }
.stage-strip li.on strong { color: var(--color-ink); }
.stage-strip li.on.design { border-top-color: var(--color-ink); }
.stage-strip li.on.build { border-top-color: var(--color-ai); }
.stage-strip li.on.review { border-top-color: var(--color-review); }
.stage-strip li.on.publish { border-top-color: var(--color-done); }
@media (max-width: 40rem) { .stage-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-md); } }

/* ---------- 事例 ---------- */
.case-hero-figs { margin-top: var(--space-2xl); }
.case-list { display: grid; gap: var(--space-3xl); }
.case-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-xl) var(--gap-columns); align-items: start; padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.case-row .item-title { font-size: var(--text-section); }
@media (max-width: 60rem) { .case-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 仕組みの図 ---------- */
.arch { display: grid; gap: var(--space-md); }
.arch-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); align-items: start; }
@media (max-width: 60rem) { .arch-cols { grid-template-columns: minmax(0, 1fr); } }
.arch-col { display: grid; gap: var(--space-md); align-content: start; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-3); background: var(--color-paper); }
.arch-col.is-local { border-color: color-mix(in oklab, var(--color-ai) 40%, var(--color-rule)); }
.arch-col.is-yours { border-style: dashed; }
.arch-col h3 { font-size: var(--text-lg); }
.arch-col ul { list-style: none; display: grid; gap: var(--space-md); }
.arch-col li { display: grid; gap: var(--space-3xs); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.arch-col li strong { font-weight: 600; }
.arch-col li span { color: var(--color-ink-2); font-size: var(--text-sm); line-height: 1.7; }
.arch-col { transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); transition-delay: calc(var(--i) * 180ms); }
.js .arch[data-anim]:not(.is-in) .arch-col { opacity: 0; transform: translateY(10px); }

/* ---------- ブランド ---------- */
.brand-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
@media (max-width: 60rem) { .brand-tiles { grid-template-columns: minmax(0, 1fr); } }
.brand-tile { display: grid; gap: var(--space-sm); align-content: start; }
.brand-tile-art { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px solid var(--color-rule); border-radius: var(--radius-3); background: var(--color-paper-2); }
.brand-tile-art.light { background: var(--color-paper-light); }
.brand-tile-art img { width: 36%; height: auto; }
.brand-tile-art .lockup { display: inline-flex; align-items: center; gap: var(--space-sm); font-family: var(--font-body); font-weight: 600; font-size: var(--text-xl); color: var(--color-ink); letter-spacing: -0.01em; }
.brand-tile-art .lockup svg { width: 40px; height: 40px; }
.brand-tile p { font-size: var(--text-sm); color: var(--color-ink-2); }
.brand-tile .text-link { font-size: var(--text-sm); justify-self: start; }
.swatches { list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-md); }
@media (max-width: 68rem) { .swatches { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.swatch { display: grid; gap: var(--space-2xs); align-content: start; }
.swatch i { display: block; aspect-ratio: 3 / 2; margin-bottom: var(--space-xs); border-radius: var(--radius-2); border: 1px solid var(--color-rule); background: var(--sw); }
.swatch strong { font-weight: 600; font-size: var(--text-sm); }
.swatch span { font-size: var(--text-xs); color: var(--color-ink-2); line-height: 1.6; }
.swatch .mono { color: var(--color-muted); }
.type-specimen { display: grid; gap: var(--space-lg); border-top: 1px solid var(--color-rule); }
.type-specimen > div { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--space-lg); align-items: baseline; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.type-specimen .caption { font-size: var(--text-sm); }
.ts-display { font-family: var(--font-display); font-weight: 600; font-size: var(--text-section); line-height: 1.3; }
.ts-body { font-family: var(--font-body); font-size: var(--text-md); color: var(--color-ink-2); max-width: 40em; }
.ts-mono { font-family: var(--font-mono); font-size: var(--text-md); color: var(--color-ai); }
@media (max-width: 40rem) { .type-specimen > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); } }

/* ---------- 404 ---------- */
.lost { min-height: 50vh; display: grid; align-content: center; gap: var(--space-lg); padding-block: var(--space-3xl); }
.figures dt.figure-label { margin: 0 0 var(--space-xs); }
.figures dd { margin: 0; }
.figures.figures-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.figures.figures-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 60rem) { .figures.figures-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 40rem) {
  .figures.figures-3 { grid-template-columns: minmax(0, 1fr); }
  .figures.figures-3 > div { padding-inline-start: 0; border-inline-start: 0; }
}
.figure-note { display: block; margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); line-height: 1.6; }
@media (max-width: 60rem) and (min-width: 40.01rem) { .figures.figures-3 > div:nth-child(3) { padding-inline-start: var(--space-lg); border-inline-start: 1px solid var(--color-rule); } }
.risk.risk-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.risk li.human { border-top-color: var(--color-human); }
.risk li.ai { border-top-color: var(--color-ai); }
.risk li.review { border-top-color: var(--color-review); }
.risk li.done { border-top-color: var(--color-done); }
@media (max-width: 68rem) { .risk.risk-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .risk.risk-4 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 7 つの決まり ---------- */
.rules { list-style: none; display: grid; border-top: 1px solid var(--color-rule); }
.rule { display: grid; grid-template-columns: 72px minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-md) var(--gap-columns); align-items: start; padding-block: var(--space-xl); border-bottom: 1px solid var(--color-rule); }
.rule-n { font-size: var(--text-sm); color: var(--color-muted); padding-top: var(--space-sm); }
.rule-body { display: grid; gap: var(--space-sm); }
.rule-title { font-size: var(--text-section); line-height: var(--leading-head); }
.rule-bb { display: grid; gap: var(--space-xs); justify-items: start; padding-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); line-height: 1.7; }
@media (max-width: 60rem) { .rule { grid-template-columns: 48px minmax(0, 1fr); } .rule-bb { grid-column: 2; } }

/* ---------- 小さな直し（2026-11-06） ---------- */
.def-list dt.mono { font-family: var(--font-mono); font-weight: 500; }
@media (max-width: 60rem) { .rail + .stage-list { margin-top: 0; } }

/* 狭い画面では、表を行ごとのカードに積む（.table-wrap.stack-sm、td に data-label） */
@media (max-width: 40rem) {
  .table-wrap.stack-sm { overflow: visible; border: 0; border-radius: 0; }
  .table-wrap.stack-sm .table { min-width: 0; }
  .table-wrap.stack-sm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-wrap.stack-sm table, .table-wrap.stack-sm tbody, .table-wrap.stack-sm tr, .table-wrap.stack-sm th, .table-wrap.stack-sm td { display: block; }
  .table-wrap.stack-sm tr { border: 1px solid var(--color-rule); border-radius: var(--radius-3); padding: var(--space-md) var(--space-lg); }
  .table-wrap.stack-sm tr + tr { margin-top: var(--space-md); }
  .table-wrap.stack-sm tbody th { padding: 0 0 var(--space-xs); border: 0; }
  .table-wrap.stack-sm td { padding: var(--space-sm) 0; border: 0; border-top: 1px solid var(--color-rule); background: none; }
  .table-wrap.stack-sm td.hl { color: var(--color-ink); }
  .table-wrap.stack-sm td.hl::before { color: var(--color-done); }
  .table-wrap.stack-sm td::before { content: attr(data-label); display: block; color: var(--color-muted); font-size: var(--text-xs); line-height: 1.8; }
}

/* ---------- 価値の順のフェーズ（誰に × どこまで） ---------- */
.pmap { display: grid; gap: var(--space-md); }
.pmap-grid { display: grid; grid-template-columns: minmax(8rem, 2fr) repeat(2, minmax(0, 5fr)); gap: var(--space-sm); }
.pmap-corner { display: grid; align-content: end; gap: 2px; padding: 0 var(--space-sm) var(--space-xs) 0; font-size: var(--text-xs); color: var(--color-muted); }
.pmap-corner span:first-child::after { content: " ↑"; }
.pmap-corner span:last-child::after { content: " →"; }
.pmap-col, .pmap-row { display: grid; gap: 2px; font-size: var(--text-sm); min-width: 0; }
.pmap-col { align-content: end; padding-bottom: var(--space-xs); border-bottom: 1px solid var(--color-rule-strong); }
.pmap-row { align-content: center; padding-right: var(--space-sm); border-right: 1px solid var(--color-rule-strong); }
.pmap-col strong, .pmap-row strong { font-weight: 600; color: var(--color-ink); }
.pmap-col small, .pmap-row small { font-size: var(--text-xs); color: var(--color-muted); }
.pmap-cell { position: relative; display: grid; gap: var(--space-2xs); align-content: start; min-height: 8.5rem; padding: var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-3); background: var(--color-paper); min-width: 0; }
.pmap-cell.is-mvp { border-color: var(--color-done); background: var(--color-done-wash); }
.pmap-cell.is-empty { border-style: dashed; border-color: var(--color-rule); background: none; }
.pmap-n { font-size: var(--text-xs); color: var(--color-muted); }
.pmap-cell.is-mvp .pmap-n { color: var(--color-done); }
.pmap-cell strong { font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); line-height: 1.45; }
.pmap-text { font-size: var(--text-sm); line-height: 1.7; color: var(--color-ink-2); }
.pmap-where { display: none; font-size: var(--text-xs); color: var(--color-muted); }
.pmap-tag { position: absolute; top: var(--space-md); right: var(--space-md); padding: 0 6px; border: 1px solid var(--color-done); border-radius: var(--radius-1); font-size: var(--text-xs); line-height: 1.6; color: var(--color-done); }
.pmap-cell:not(.is-empty) { transition: opacity 480ms var(--ease-out), transform 480ms var(--ease-out); transition-delay: calc((var(--n) - 1) * 220ms); }
.js .pmap[data-anim]:not(.is-in) .pmap-cell:not(.is-empty) { opacity: 0; transform: translateY(10px); }
@media (max-width: 40rem) {
  .pmap-grid { grid-template-columns: minmax(0, 1fr); }
  .pmap-corner, .pmap-col, .pmap-row, .pmap-cell.is-empty { display: none; }
  .pmap-cell { order: var(--n); min-height: 0; }
  .pmap-where { display: block; }
}

/* ---------- 作りやすい順と、価値の順 ---------- */
.lyr { display: grid; gap: var(--space-md); }
.lyr-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); }
@media (max-width: 48rem) { .lyr-pair { grid-template-columns: minmax(0, 1fr); } }
.lyr-panel { display: grid; gap: var(--space-md); align-content: start; padding: var(--space-lg); border: 1px solid var(--color-rule); border-radius: var(--radius-3); background: var(--color-paper); min-width: 0; }
.lyr-panel.is-value { border-color: color-mix(in oklab, var(--color-done) 45%, var(--color-rule)); }
.lyr-title { font-size: var(--text-lg); line-height: 1.4; }
.lyr-stack, .lyr-value { display: grid; gap: var(--space-xs); height: 12rem; }
.lyr-stack { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.lyr-value { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 2fr) minmax(0, 1fr); }
.lyr-bar, .lyr-base, .lyr-col { display: flex; align-items: center; gap: var(--space-sm); padding: 0 var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-2); background: var(--color-paper-3); font-size: var(--text-sm); color: var(--color-ink-2); min-width: 0; }
.lyr-bar .mono, .lyr-col .mono { font-size: var(--text-xs); color: var(--color-muted); }
.lyr-base { grid-column: 1 / -1; grid-row: 2; }
.lyr-col { grid-row: 1; align-items: flex-start; padding-top: var(--space-sm); border-style: dashed; background: none; }
.lyr-col.is-first { border-style: solid; border-color: var(--color-done); background: var(--color-done-wash); }
.lyr-col.is-first .mono { color: var(--color-done); }
.lyr-note { font-size: var(--text-sm); line-height: 1.75; color: var(--color-ink-2); }
.lyr-bar, .lyr-base, .lyr-col { transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); transition-delay: calc(var(--i) * 200ms); }
.js .lyr[data-anim]:not(.is-in) .lyr-bar, .js .lyr[data-anim]:not(.is-in) .lyr-base, .js .lyr[data-anim]:not(.is-in) .lyr-col { opacity: 0; transform: translateY(8px); }

/* ---------- 成長体験：離れる道と、積み上がる道 ---------- */
.grow-path { display: grid; gap: var(--space-sm); align-content: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); min-width: 0; }
.grow-path.is-grow { border-top-color: var(--color-done); }
.grow-svg { max-width: 100%; height: auto; overflow: visible; }
.grow-cell { fill: none; stroke: var(--color-muted); stroke-width: 1.4; }
.is-drop .grow-cell:nth-child(3) { stroke-dasharray: 3 3; }
.grow-gone { stroke: var(--color-rule-strong); stroke-width: 1.4; stroke-dasharray: 2 4; }
.grow-x { fill: var(--color-muted); font-family: var(--font-body); font-size: 12px; }
.is-grow .grow-cell { fill: var(--color-done-wash); stroke: var(--color-done); }
.grow-cell { transition: opacity 360ms var(--ease-out), fill 360ms var(--ease-out), stroke 360ms var(--ease-out); transition-delay: calc(var(--i) * 180ms); }
.js .grow[data-anim]:not(.is-in) .grow-cell { opacity: 0; }
.js .grow[data-anim]:not(.is-in) .is-grow .grow-cell { fill: none; stroke: var(--color-muted); }

@media (prefers-reduced-motion: reduce) {
  .pmap-cell, .lyr-bar, .lyr-base, .lyr-col, .grow-cell { transition: none; }
}

/* 暗い地だけのサイトなので、入力欄とスクロールバーも暗くする */
:root { color-scheme: dark; }