/* A research working page: one task, one focal change, one concrete outcome. */
.capability-demo {
  --demo-ink:var(--ink);
  --demo-copper:var(--accent);
  min-width:0;
  color:var(--demo-ink);
}
.capability-demo--hero { width:100%; max-width:620px; justify-self:end }
.capability-stage {
  position:relative;
  isolation:isolate;
  padding:26px 34px 22px;
  background:var(--surface);
  border:1px solid #d8dbd0;
  border-radius:5px;
  box-shadow:0 16px 48px -30px #253d3340,0 3px 10px -6px #253d331c;
  outline-offset:7px;
}
.capability-stage::before {
  content:"";
  position:absolute;
  inset:6px -5px -6px 5px;
  z-index:-1;
  border-right:1px solid #d8dbd0;
  border-bottom:1px solid #d8dbd0;
  border-radius:5px;
}
.capability-stage::after {
  content:"";
  position:absolute;
  top:0;
  left:34px;
  width:42px;
  height:2px;
  background:var(--demo-copper);
}
.capability-stage-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-bottom:18px;
  border-bottom:1px solid var(--rule);
  font-size:12px;
  line-height:1.5;
}
.capability-topic { color:var(--demo-ink); font-weight:500 }
.capability-stage-count { display:flex; gap:8px; font:13px/1.5 Georgia,serif; font-variant-numeric:tabular-nums }
.capability-stage-count>span:last-child { color:var(--muted) }
.capability-stage-count .capability-current-phase { font:11px/1.5 var(--sans); margin-right:8px; color:var(--muted) }
.capability-scene-space { position:relative; height:405px }
.capability-scene { position:absolute; inset:0; visibility:hidden; opacity:0; display:flex; flex-direction:column; padding-top:27px }
.capability-scene[data-scene=deliver] { visibility:visible; opacity:1 }
.capability-scene-heading { flex:none; margin-bottom:26px }
.capability-scene-heading h3 { font:500 clamp(27px,2.7vw,36px)/1.45 var(--serif); letter-spacing:-.02em; text-wrap:balance; color:var(--demo-ink) }
.capability-demo svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round }
.capability-demo strong { font-weight:500 }
.capability-input-line { display:flex; align-items:center; gap:14px; color:var(--demo-copper); margin:-4px 0 25px }
.capability-input-line>span { height:1px; background:var(--rule); flex:1 }
.capability-materials { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.capability-material { display:flex; align-items:center; gap:10px; padding:17px 12px; border:1px solid var(--rule); background:var(--paper); border-radius:2px }
.capability-material svg { width:27px; height:35px; color:#6c7e6e }
.capability-material strong { font-size:13px; display:block; white-space:nowrap }
.capability-material div>span { font-size:10px; color:var(--muted); display:block; margin-top:4px }
.capability-task-note { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); margin-top:26px }
.capability-small-mark { width:5px; height:5px; background:var(--demo-copper); border-radius:50% }
.capability-comparison { display:grid; grid-template-columns:1fr 42px 1fr; align-items:center; margin-top:-3px }
.capability-dimension { position:relative; border-top:1px solid var(--demo-ink); padding-top:14px }
.capability-dimension-index { position:absolute; right:0; top:12px; font:italic 15px/1.4 Georgia,serif; color:var(--demo-copper) }
.capability-dimension strong { font:22px/1.5 var(--serif); display:block }
.capability-dimension>span:not(.capability-dimension-index) { font-size:11px; color:var(--muted) }
.capability-relationship { display:flex; flex-direction:column; align-items:center; align-self:start; padding-top:18px; color:var(--demo-copper) }
.capability-equals { font:32px/1 Georgia,serif }
.capability-question { font:italic 14px/1 Georgia,serif; margin-top:6px }
.capability-texture { margin-top:16px; display:grid; gap:7px; padding-right:18px }
.capability-texture i { display:block; height:3px; background:#ced7c9; transform-origin:left }
.capability-texture i:nth-child(2) { width:82% }
.capability-texture i:nth-child(3) { width:61%; background:#8b9c86 }
.capability-evidence { position:relative; display:flex; align-items:center; justify-content:space-between; gap:6px; font-size:11px; margin-top:26px; padding-top:15px }
.capability-evidence-line { position:absolute; left:0; right:0; top:0; height:1px; background:var(--rule); transform-origin:left }
.capability-evidence>span:not(.capability-source-ref) { color:var(--muted) }
.capability-source-ref { font:10px/1.5 var(--sans); color:var(--demo-copper); white-space:nowrap }
.capability-bottom-note { font-size:11px; color:var(--muted); margin:19px 0 0 }
.capability-claim { display:flex; align-items:center; justify-content:center; gap:27px; padding:14px 0 20px; margin-top:-10px; border-bottom:1px solid var(--rule); font:24px/1.5 var(--serif) }
.capability-crossed-equals { position:relative; font:34px/42px Georgia,serif; width:42px; text-align:center }
.capability-crossed-equals svg { position:absolute; inset:0; width:42px; height:42px; stroke-width:2.6; color:var(--demo-copper) }
.capability-review-note { display:flex; align-items:flex-start; gap:11px; margin-top:18px; color:var(--demo-copper) }
.capability-review-note svg { width:22px; height:22px; margin-top:1px }
.capability-review-note div>span { display:block; font-size:11px; margin-bottom:3px }
.capability-review-note strong { font-size:15px; line-height:1.7 }
.capability-revision { position:relative; margin:16px 0 0 33px; padding:1px 0 0 17px }
.capability-revision-link { position:absolute; top:0; left:0; width:9px; height:15px; border-bottom:1px solid #9aa894; border-left:1px solid #9aa894 }
.capability-revision>span:not(.capability-revision-link) { font-size:10px; color:var(--muted); display:block }
.capability-revision strong { font-size:13px; display:block; margin-top:2px }
.scene-deliver .capability-scene-heading { margin-bottom:22px }
.capability-result-question>span,.capability-study-title { display:block; color:var(--muted); font-size:10px; margin-bottom:7px }
.capability-result-question p { margin:0; font-size:15px; line-height:1.85 }
.capability-study { margin-top:22px; border-top:1px solid var(--rule); padding-top:16px }
.capability-study-path { display:flex; align-items:center; justify-content:space-between; gap:8px }
.capability-study-path>span { display:flex; flex-direction:column; gap:4px }
.capability-study-path i { color:var(--demo-copper); font:italic 13px/1.5 Georgia,serif }
.capability-study-path strong { font-size:13px; white-space:nowrap }
.capability-study-path svg { width:24px; height:16px; color:#879781; margin-top:18px }
.capability-result-footer { display:flex; justify-content:space-between; gap:12px; margin-top:23px; font-size:10px; color:var(--muted); align-items:center }
.capability-page-edge { display:flex; align-items:center; height:5px; margin-top:13px }
.capability-runline { display:block; width:100%; height:2px; background:#e5e8df; overflow:hidden }
.capability-runline i { display:block; width:100%; height:100%; background:#8a9b83; transform-origin:left }
.capability-demo[data-motion=running] .capability-scene { will-change:transform,opacity }
.capability-demo--expanded { display:grid; grid-template-columns:minmax(235px,.78fr) minmax(0,1.5fr); gap:70px; align-items:center }
.capability-demo--expanded .capability-stage { padding:28px clamp(28px,5vw,68px) 24px }
.capability-demo--expanded .capability-scene-space { height:421px }
.capability-demo--expanded .capability-scene-heading h3 { font-size:36px }
.capability-demo--expanded .capability-scene-heading { margin-bottom:30px }
.capability-chapters ol { padding:0; margin:0; list-style:none }
.capability-chapters li { border-bottom:1px solid var(--rule) }
.capability-chapters li:first-child { border-top:1px solid var(--rule) }
.capability-chapters button[data-chapter] { position:relative; width:100%; display:grid; grid-template-columns:25px 1fr; gap:15px; padding:22px 0 24px; border:0; background:transparent; color:var(--muted); text-align:left; transition:color 180ms ease }
.capability-chapter-number { font:italic 15px/1.8 Georgia,serif; padding-top:2px; font-variant-numeric:tabular-nums }
.capability-chapters button[data-chapter] strong { font:21px/1.5 var(--serif); color:var(--ink) }
.capability-chapter-description { display:block; font-size:12px; line-height:1.85; margin-top:7px; max-width:23em }
.capability-chapters button[aria-pressed=true] .capability-chapter-number,.capability-chapters button[aria-pressed=true] strong,.capability-chapters button[data-chapter]:hover strong { color:var(--demo-copper) }
.capability-chapters button[data-chapter]:disabled { opacity:1; cursor:default }
.capability-chapter-progress { position:absolute; bottom:-1px; left:0; right:0; height:1px; overflow:hidden }
.capability-chapter-progress i { display:block; height:1px; background:var(--demo-copper); transform:scaleX(0); transform-origin:left }
.capability-playback:not([hidden]) { display:flex; gap:22px; margin-top:10px }
.capability-playback button { min-height:44px; padding:5px 0; border:0; background:transparent; font-size:12px; color:var(--muted); text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:5px }
.capability-playback button:hover { color:var(--ink); text-decoration-color:var(--ink) }
.capability-section-heading { display:flex; align-items:end; justify-content:space-between; gap:50px; margin-bottom:48px }
.capability-section-heading>p { max-width:27em; margin:0 0 4px; font-size:14px; color:var(--muted); line-height:1.9 }
.capability-section-end { display:flex; align-items:start; justify-content:space-between; gap:32px; margin-top:30px }
.capability-section-end .method-boundary { margin:0; border:0; padding:0; max-width:55em; font-size:11px }
.capability-section-end .text-link { white-space:nowrap; font-size:12px; margin:0 }
@media (min-width:821px) and (max-width:1050px) {
  .capability-demo--hero .capability-stage { padding-inline:24px }
  .capability-demo--hero .capability-materials { gap:8px }
  .capability-demo--hero .capability-material { padding:14px 8px; gap:6px }
  .capability-demo--hero .capability-material strong { font-size:11px }
  .capability-demo--hero .capability-result-footer { flex-wrap:wrap; gap:3px }
}
@media (max-width:1050px) {
  .capability-demo--expanded { gap:36px; grid-template-columns:minmax(220px,.8fr) minmax(0,1.35fr) }
  .capability-demo--expanded .capability-stage { padding-inline:28px }
  .capability-demo--expanded .capability-scene-heading h3 { font-size:31px }
  .capability-section-heading>p { max-width:22em }
}
@media (max-width:820px) {
  .capability-demo--hero { justify-self:center; max-width:560px; margin:8px 5px 10px 0 }
  .capability-scene-heading h3 { font-size:34px }
  .capability-demo--expanded { display:flex; flex-direction:column-reverse; gap:30px }
  .capability-demo--expanded .capability-stage { width:100%; max-width:620px; padding-inline:38px }
  .capability-chapters { width:100% }
  .capability-chapters ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-block:1px solid var(--rule); gap:18px }
  .capability-chapters li,.capability-chapters li:first-child { border:0 }
  .capability-chapters button[data-chapter] { display:flex; flex-direction:column; gap:7px; padding:12px 0 16px }
  .capability-chapters button[data-chapter] strong { font:500 14px/1.65 var(--sans) }
  .capability-chapter-description { display:none }
  .capability-chapter-number { font-size:12px }
  .capability-section-heading { align-items:start; flex-direction:column; gap:18px; margin-bottom:30px }
  .capability-section-heading>p { max-width:36em }
  .capability-section-end { flex-direction:column-reverse; gap:18px; margin-top:22px }
}
@media (max-width:480px) {
  .capability-stage,.capability-demo--expanded .capability-stage { padding:21px 22px 18px }
  .capability-stage::after { left:22px }
  .capability-stage-top { padding-bottom:14px; font-size:11px }
  .capability-scene-space,.capability-demo--expanded .capability-scene-space { height:386px }
  .capability-scene { padding-top:24px }
  .capability-scene-heading,.capability-demo--expanded .capability-scene-heading { margin-bottom:24px }
  .capability-scene-heading h3,.capability-demo--expanded .capability-scene-heading h3 { font-size:27px; line-height:1.5 }
  .capability-materials { gap:9px; grid-template-columns:1fr }
  .capability-material { padding:10px 12px }
  .capability-material div { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100% }
  .capability-material strong { font-size:12px }
  .capability-material div>span { margin:0; font-size:9px }
  .capability-material svg { width:20px; height:26px }
  .capability-input-line { margin:0 0 18px }
  .capability-task-note { margin-top:18px; font-size:11px }
  .capability-dimension strong { font-size:20px }
  .capability-comparison { grid-template-columns:1fr 36px 1fr }
  .capability-evidence { font-size:10px; gap:4px; margin-top:23px }
  .capability-claim { font-size:21px; gap:14px }
  .capability-review-note strong { font-size:13px }
  .capability-revision strong { font-size:12px }
  .capability-result-question p { font-size:13px }
  .capability-study { margin-top:19px }
  .capability-study-path strong { font-size:12px }
  .capability-study-path { gap:5px }
  .capability-study-path svg { width:18px }
  .capability-result-footer { flex-direction:column; align-items:start; gap:5px; margin-top:17px; font-size:10px }
  .capability-chapters ol { gap:12px }
  .capability-chapters button[data-chapter] strong { font-size:12px }
}
@media (prefers-reduced-motion:reduce) {
  .capability-demo *, .capability-demo *::before { transition:none!important }
}
@media (max-width:360px) {
  .capability-scene-heading h3,.capability-demo--expanded .capability-scene-heading h3 { font-size:24px }
  .capability-claim { gap:9px; font-size:19px }
  .capability-material strong { font-size:11px }
}