/* Content keeps the presentation canvas, then opens into a quiet reading flow. */
.motion-prototype[data-view="content"] {
  --content-width: 1280px;
  --content-reading: 760px;
  --content-gap: clamp(32px, 6vw, 96px);
}
.motion-prototype[data-view="content"] :is(.detail, .reading-detail, .about-page) {
  max-width: none;
  margin: 0;
  padding: 0 0 64px;
}
.motion-prototype[data-view="content"] .detail-intro {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(300px, 1fr) auto;
  min-height: calc(100svh - 88px);
  padding: 20px var(--gutter) 52px;
  overflow: clip;
}
.motion-prototype[data-view="content"] .detail-top {
  position: relative;
  z-index: 2;
  grid-area: 1 / 1;
  border: 0;
  padding: 0;
  font-size: 13px;
}
.motion-prototype[data-view="content"] .detail-top > span { color: var(--muted); }
.motion-prototype[data-view="content"] .back-link { gap: 10px; min-height: 44px; }
.motion-prototype[data-view="content"] .detail-heading {
  position: relative;
  z-index: 1;
  grid-area: 3 / 1;
  padding: 0;
  max-width: min(640px, 70%);
}
.motion-prototype[data-view="content"] .detail-heading h1 {
  font-size: var(--theme-title-size);
  font-weight: var(--theme-title-weight);
  line-height: var(--theme-title-cjk-leading);
  letter-spacing: var(--theme-title-cjk-tracking);
}
.motion-prototype[data-view="content"] .tool-detail .detail-heading h1 { line-height: var(--theme-title-leading); letter-spacing: var(--theme-title-tracking); }
.motion-prototype[data-view="content"] .tool-detail .detail-heading h1 { view-transition-name: project-title; }
.motion-prototype[data-view="content"] .eyebrow { font-size: var(--theme-caption-size); letter-spacing: .03em; margin-bottom: 14px; }
.motion-prototype[data-view="content"] .lead {
  margin-top: 14px;
  max-width: 600px;
  font-size: var(--theme-body-size);
  line-height: 1.7;
  color: var(--theme-body-ink);
}
.motion-prototype[data-view="content"] .content-continue {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  min-height: 44px;
  margin-top: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 13px;
  cursor: pointer;
}
.motion-prototype[data-view="content"] .content-continue:hover span { transform: translateY(3px); }
.motion-prototype[data-view="content"] .content-continue span { transition: transform 180ms ease; }
.motion-prototype[data-view="content"] .detail-hero {
  grid-area: 1 / 1 / 4;
  z-index: 0;
  display: grid;
  place-items: center;
  align-self: stretch;
  min-width: 0;
  height: auto;
  min-height: 0;
  max-height: none;
  background: transparent;
  padding: 48px 0 205px;
  pointer-events: none;
}
.motion-prototype[data-view="content"] .detail-hero > img {
  width: min(100%, 1100px);
  height: min(51svh, 600px);
  max-height: none;
  object-fit: contain;
}
.motion-prototype[data-view="content"] .tool-detail .detail-hero { view-transition-name: project-visual; }
.motion-prototype[data-view="content"] .detail-hero figcaption {
  position: absolute;
  right: var(--gutter);
  bottom: 54px;
  width: auto;
  max-width: 200px;
  padding: 0;
  font-size: var(--theme-caption-size);
  color: var(--muted);
  text-align: right;
}
.motion-prototype[data-view="content"] .detail-banknote { width: min(100%, 1240px); height: min(54svh, 620px); }
.motion-prototype[data-view="content"] .detail-banknote .banknote-svg { width: 100%; height: 100%; }
:root[data-reading-mode="study"] .motion-prototype[data-view="content"] .detail-banknote { --banknote-line-ink: #e5e0d9; --banknote-ink-filter: none; }
:root[data-reading-mode="study"] .motion-prototype[data-view="content"] .detail-banknote :is(.banknote-paper, .banknote-print) { opacity: 0; }
.motion-prototype[data-view="content"] .detail-project-symbol { display: grid; place-items: center; width: min(36vw, 360px); aspect-ratio: 1; }
.motion-prototype[data-view="content"] .detail-project-symbol span { grid-area: 1 / 1; display: block; width: 72%; aspect-ratio: 1; border: 1px solid currentColor; border-radius: 50%; opacity: .26; }
.motion-prototype[data-view="content"] .detail-project-symbol span:nth-child(2) { transform: translateX(-18%); }
.motion-prototype[data-view="content"] .detail-project-symbol span:nth-child(3) { transform: translateX(18%); }
.motion-prototype[data-view="content"] :is(.detail-information, .content-flow, .detail > .content-review, .detail > .next-step) {
  width: min(var(--content-width), calc(100% - 2 * var(--gutter)));
  margin-inline: auto;
}
.motion-prototype[data-view="content"] .detail-information { padding-block: 72px 32px; scroll-margin-top: 112px; }
.motion-prototype[data-view="content"] .detail-description { max-width: var(--content-reading); font-size: clamp(20px, 1.8vw, 27px); line-height: 1.6; letter-spacing: var(--theme-title-cjk-tracking); }
.motion-prototype[data-view="content"] .facts { border: 0; padding-block: 40px 8px; gap: 24px; }
.motion-prototype[data-view="content"] .facts dt { font-size: var(--theme-caption-size); margin-bottom: 8px; }
.motion-prototype[data-view="content"] .facts dd { font-size: var(--theme-ui-size); color: var(--theme-body-ink); }
.motion-prototype[data-view="content"] .content-flow { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr); gap: var(--content-gap); }
.motion-prototype[data-view="content"] .content-index { position: sticky; top: 116px; align-self: start; display: grid; gap: 2px; padding-top: 58px; }
.motion-prototype[data-view="content"] .content-index button {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  padding: 6px 0;
  border: 0;
  background: transparent;
  text-align: left;
  color: var(--muted);
  font-size: var(--theme-caption-size);
  cursor: pointer;
}
.motion-prototype[data-view="content"] .content-index button span { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .7; }
.motion-prototype[data-view="content"] .content-index button:is(:hover, [aria-current="true"]) { color: var(--ink); }
.motion-prototype[data-view="content"] .content-sections { min-width: 0; }
.motion-prototype[data-view="content"] .chapter { display: block; padding-block: 56px 64px; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.motion-prototype[data-view="content"] .chapter-label { display: flex; align-items: baseline; gap: 16px; margin-bottom: 28px; }
.motion-prototype[data-view="content"] .chapter-label > span { margin: 0; font-size: 11px; }
.motion-prototype[data-view="content"] .chapter-label h2 { font-size: clamp(22px, 2vw, 28px); line-height: 1.4; letter-spacing: var(--theme-title-cjk-tracking); }
.motion-prototype[data-view="content"] .chapter-body > p { font-size: var(--theme-body-size); line-height: var(--theme-body-leading); max-width: var(--content-reading); color: var(--theme-body-ink); }
.motion-prototype[data-view="content"] .chapter-body > .body-intro { font-size: 20px; line-height: 1.65; }
.motion-prototype[data-view="content"] :is(.content-caption, .chapter-body > .content-caption) { font-size: var(--theme-caption-size); color: var(--muted); }
.motion-prototype[data-view="content"] .comparison { gap: 24px; margin-block: 32px; }
.motion-prototype[data-view="content"] .media img { background: var(--surface); }
.motion-prototype[data-view="content"] .media figcaption { font-size: var(--theme-caption-size); margin-top: 14px; }
.motion-prototype[data-view="content"] .use-list { gap: 24px; }
.motion-prototype[data-view="content"] .use-list h3 { font-size: 18px; margin-block: 12px; }
.motion-prototype[data-view="content"] .use-list p { font-size: var(--theme-ui-size); line-height: var(--theme-body-leading); }
.motion-prototype[data-view="content"] .text-link { border: 0; font-size: var(--theme-ui-size); gap: 16px; }
.motion-prototype[data-view="content"] :is(.research-material, .content-review) { border-top: 1px solid var(--line); }
.motion-prototype[data-view="content"] .research-material { margin-top: 32px; }
.motion-prototype[data-view="content"] :is(.research-material, .content-review) > summary { padding-block: 20px; font-size: 13px; cursor: pointer; }
.motion-prototype[data-view="content"] .research-material > summary { display: flex; justify-content: space-between; list-style: none; }
.motion-prototype[data-view="content"] .research-material > summary::-webkit-details-marker { display: none; }
.motion-prototype[data-view="content"] .research-material[open] > summary > span { transform: rotate(45deg); }
.motion-prototype[data-view="content"] .research-material > div { font-size: var(--theme-ui-size); line-height: var(--theme-body-leading); color: var(--theme-body-ink); padding-bottom: 20px; }
.motion-prototype[data-view="content"] .research-material .facts { padding-block: 8px 24px; }
.motion-prototype[data-view="content"] .content-review { color: var(--muted); font-size: var(--theme-caption-size); line-height: var(--theme-body-leading); margin-top: 56px; }
.motion-prototype[data-view="content"] .content-review > div { max-width: 800px; padding-bottom: 24px; }
.motion-prototype[data-view="content"] .content-review .facts { padding-top: 0; }
.motion-prototype[data-view="content"] .content-review ul { margin-bottom: 0; padding-left: 20px; }
.motion-prototype[data-view="content"] .project-state { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 28px; color: var(--muted); font-size: var(--theme-caption-size); }
.motion-prototype[data-view="content"] .project-progress { list-style: none; margin: 0; padding: 0; }
.motion-prototype[data-view="content"] .project-progress li { position: relative; padding: 0 0 32px 24px; border-left: 1px solid var(--line); }
.motion-prototype[data-view="content"] .project-progress li::before { content: ''; position: absolute; width: 5px; height: 5px; border-radius: 50%; top: 9px; left: -3px; background: var(--muted); }
.motion-prototype[data-view="content"] .project-progress li:last-child { padding-bottom: 0; }
.motion-prototype[data-view="content"] .project-progress h3 { font-size: var(--theme-body-size); margin-bottom: 6px; }
.motion-prototype[data-view="content"] .project-progress p { font-size: var(--theme-ui-size); color: var(--muted); }
.motion-prototype[data-view="content"] .study-availability { margin-top: 24px; }
.motion-prototype[data-view="content"] [data-study-only] { display: none; }
:root[data-reading-mode="study"] .motion-prototype[data-view="content"] [data-study-only] { display: block; }
.motion-prototype[data-view="content"] .next-step { padding-top: 40px; justify-content: space-between; }
.motion-prototype[data-view="content"] .reading-detail,
.motion-prototype[data-view="content"] .about-page { width: min(var(--content-width), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.motion-prototype[data-view="content"] .reading-detail .detail-top { padding-top: 20px; }
.motion-prototype[data-view="content"] .reading-detail .detail-heading { max-width: 900px; padding-block: clamp(64px, 9vw, 128px); }
.motion-prototype[data-view="content"] .reading-body { width: min(100%, var(--content-reading)); }
.motion-prototype[data-view="content"] .reading-body h2 { font-size: 24px; }
.motion-prototype[data-view="content"] .reading-body p { font-size: var(--theme-body-size); line-height: 1.9; color: var(--theme-body-ink); }
.motion-prototype[data-view="content"] .source-note { margin-top: 64px; }
.motion-prototype[data-view="content"] .source-note p { color: var(--muted); }
.motion-prototype[data-view="content"] .about-intro { padding-block: clamp(72px, 11vw, 156px); }
.motion-prototype[data-view="content"] .about-intro h1 { font-size: var(--theme-title-size); line-height: 1.25; font-weight: var(--theme-title-weight); letter-spacing: var(--theme-title-cjk-tracking); }
.motion-prototype[data-view="content"] .about-layout { grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr); gap: var(--content-gap); }
.motion-prototype[data-view="content"] .chapter-nav { top: 116px; }
.motion-prototype[data-view="content"] .about-body > section { scroll-margin-top: 110px; }
.motion-prototype[data-view="content"] .about-body h2 { font-size: 28px; line-height: 1.45; }
.motion-prototype[data-view="content"] .editor-note summary { cursor: pointer; }
.motion-prototype[data-view="content"] .editor-note p { margin-top: 12px; }
.motion-prototype[data-view="content"] .reading-order { display: none; }
.motion-prototype[data-view="content"] .list-page { width: min(var(--content-width), calc(100% - 2 * var(--gutter))); max-width: none; padding: 64px 0; }
.motion-prototype[data-view="content"] .list-page h1 { font-size: var(--theme-title-size); font-weight: var(--theme-title-weight); line-height: var(--theme-title-cjk-leading); letter-spacing: var(--theme-title-cjk-tracking); }
/* The refined tool and work pages keep their own media and editorial rhythm. */
.motion-prototype[data-view="content"] .detail-page-v2 .detail-description { max-width: 800px; }
.motion-prototype[data-view="content"] .detail-page-v2 :is(.detail-availability, .detail-discipline) { margin-top: 24px; color: var(--muted); font-size: var(--theme-caption-size); }
.motion-prototype[data-view="content"] .detail-page-v2 .detail-availability span { margin-inline: 10px; }
.motion-prototype[data-view="content"] .detail-page-v2 .detail-media { min-width: 0; margin: 0; }
.motion-prototype[data-view="content"] .detail-page-v2 .detail-media :is(img, video) { display: block; width: 100%; height: auto; }
.motion-prototype[data-view="content"] .detail-page-v2 .detail-media figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; margin-top: 14px; color: var(--muted); font-size: var(--theme-caption-size); line-height: 1.7; }
.motion-prototype[data-view="content"] .detail-page-v2 .detail-media figcaption > span { color: var(--theme-body-ink); }
.motion-prototype[data-view="content"] .detail-page-v2 .detail-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-block: 32px 20px; }
.motion-prototype[data-view="content"] .detail-page-v2 .detail-comparison img { aspect-ratio: 1.21; object-fit: contain; background: #f4f4f2; }
.motion-prototype[data-view="content"] .detail-page-v2 .detail-source { margin-top: 20px; color: var(--muted); font-size: var(--theme-caption-size); line-height: 1.7; }
.motion-prototype[data-view="content"] .detail-page-v2 .workspace-reading { margin-top: 32px; }
.motion-prototype[data-view="content"] .detail-page-v2 .workspace-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 32px; }
.motion-prototype[data-view="content"] .detail-page-v2 .workspace-key > div > span { font-size: 11px; color: var(--muted); }
.motion-prototype[data-view="content"] .detail-page-v2 .workspace-key h3 { font-size: 17px; margin-block: 10px; }
.motion-prototype[data-view="content"] .detail-page-v2 .workspace-key p { color: var(--muted); font-size: var(--theme-ui-size); line-height: var(--theme-body-leading); }
.motion-prototype[data-view="content"] .detail-page-v2 .workspace-reading--portrait { display: grid; grid-template-columns: minmax(0, 3fr) minmax(180px, 2fr); gap: 40px; align-items: center; }
.motion-prototype[data-view="content"] .detail-page-v2 .workspace-reading--portrait .workspace-key { grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 0; }
.motion-prototype[data-view="content"] .detail-page-v2 .input-output { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 24px; align-items: center; padding-block: 0 32px; border-bottom: 1px solid var(--line); }
.motion-prototype[data-view="content"] .detail-page-v2 .input-output > div > span { color: var(--muted); font-size: var(--theme-caption-size); }
.motion-prototype[data-view="content"] .detail-page-v2 .input-output p { font-size: var(--theme-body-size); line-height: 1.7; margin-top: 10px; }
.motion-prototype[data-view="content"] .detail-page-v2 .input-output > span { color: var(--muted); font-size: 20px; }
.motion-prototype[data-view="content"] .detail-page-v2 .operation-list { list-style: none; padding: 0; margin: 32px 0 0; }
.motion-prototype[data-view="content"] .detail-page-v2 .operation-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 16px; margin-top: 28px; }
.motion-prototype[data-view="content"] .detail-page-v2 .operation-list li > span { color: var(--muted); font-size: 11px; padding-top: 4px; }
.motion-prototype[data-view="content"] .detail-page-v2 .operation-list h3 { font-size: 18px; margin-bottom: 10px; }
.motion-prototype[data-view="content"] .detail-page-v2 .operation-list p { max-width: 660px; color: var(--theme-body-ink); font-size: 15px; line-height: 1.85; }
.motion-prototype[data-view="content"] .detail-page-v2 .task-list > div { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 3fr); gap: 24px; padding-block: 22px; border-bottom: 1px solid var(--line); }
.motion-prototype[data-view="content"] .detail-page-v2 .task-list > div:first-child { padding-top: 0; }
.motion-prototype[data-view="content"] .detail-page-v2 .task-list h3 { font-size: 17px; }
.motion-prototype[data-view="content"] .detail-page-v2 .task-list p { max-width: 600px; color: var(--theme-body-ink); font-size: 15px; line-height: var(--theme-body-leading); }
.motion-prototype[data-view="content"] .detail-page-v2 .tool-boundary { margin-top: 40px; padding-left: 24px; border-left: 1px solid var(--muted); }
.motion-prototype[data-view="content"] .detail-page-v2 .tool-boundary h3 { font-size: 13px; margin-bottom: 12px; }
.motion-prototype[data-view="content"] .detail-page-v2 .tool-boundary p { max-width: 660px; font-size: var(--theme-ui-size); line-height: 1.85; color: var(--muted); }
.motion-prototype[data-view="content"] .detail-page-v2 .tool-access { margin-top: 56px; }
.motion-prototype[data-view="content"] .detail-page-v2 .tool-access > span { color: var(--muted); font-size: var(--theme-caption-size); }
.motion-prototype[data-view="content"] .detail-page-v2 .tool-access h3 { font-size: 24px; line-height: 1.5; margin-block: 14px; letter-spacing: var(--theme-title-cjk-tracking); }
.motion-prototype[data-view="content"] .detail-page-v2 .tool-access p { max-width: 600px; color: var(--muted); font-size: var(--theme-ui-size); line-height: 1.85; }
.motion-prototype[data-view="content"] .detail-page-v2 .tool-access .text-link { margin-top: 16px; }
/* Transition pseudo-elements belong to the document root, but only this preview opts in. */
:root:has(.motion-prototype)::view-transition-group(project-title),
:root:has(.motion-prototype)::view-transition-group(project-visual) { animation-duration:var(--motion-duration-scene); animation-timing-function:var(--motion-ease-standard); }
:root:has(.motion-prototype)::view-transition { pointer-events:none; }
:root:has(.motion-prototype)::view-transition-group(root),
:root:has(.motion-prototype)::view-transition-old(root),
:root:has(.motion-prototype)::view-transition-new(root) { animation:none; }
:root:has(.motion-prototype)::view-transition-old(root) { opacity:0; }
:root[data-motion-transition="practice"]:has(.motion-prototype)::view-transition-group(project-visual) { animation-duration:var(--motion-duration-panel); }
:root:has(.motion-prototype)::view-transition-old(project-visual),
:root:has(.motion-prototype)::view-transition-new(project-visual) { mix-blend-mode:normal; animation-duration:var(--motion-duration-scene); animation-timing-function:var(--motion-ease-standard); }
:root[data-motion-transition="practice"]:has(.motion-prototype)::view-transition-old(project-visual) { animation:none; opacity:1; }
:root[data-motion-transition="practice"]:has(.motion-prototype)::view-transition-new(project-visual) { animation:practice-artwork-blend var(--motion-duration-panel) var(--motion-ease-standard) both; }
@keyframes practice-artwork-blend { from { opacity:0; } to { opacity:1; } }
/* Selected references: image-led continuity and short editorial chapters. */
.motion-prototype[data-view="content"] .practice-detail {
  --practice-edge: clamp(24px, 3.34vw, 48px);
  --practice-space: clamp(40px, 5vw, 72px);
  width: min(1592px, calc(100% - 2 * var(--practice-edge)));
  margin-inline: auto;
  padding-block: 20px 64px;
  color: var(--theme-body-ink);
}
.motion-prototype[data-view="content"] .practice-top { display:flex; align-items:center; min-height:44px; margin-bottom:24px; font-size:14px; }
.motion-prototype[data-view="content"] .practice-hero { margin:0; view-transition-name:project-visual; }
.motion-prototype[data-view="content"] .practice-hero :is(img, video) { display:block; width:100%; height:auto; object-fit:contain; }
.motion-prototype[data-view="content"] .practice-hero video { aspect-ratio:16 / 9; }
.motion-prototype[data-view="content"] .practice-introduction { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); gap:48px; padding-block:var(--practice-space); align-items:start; }
.motion-prototype[data-view="content"] .practice-identity h1 { margin:0; max-width:16em; font-size:clamp(28px, 3vw, 42px); font-weight:400; line-height:1.3; letter-spacing:0; view-transition-name:project-title; }
.motion-prototype[data-view="content"] .practice-kind { margin:16px 0 0; color:var(--muted); font-size:13px; line-height:20px; letter-spacing:0; }
.motion-prototype[data-view="content"] .practice-description p { margin:0; max-width:40em; font-size:16px; line-height:26px; letter-spacing:0; }
.motion-prototype[data-view="content"] .practice-story { display:grid; gap:clamp(64px, 6vw, 112px); }
.motion-prototype[data-view="content"] .practice-story-heading { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); gap:48px; align-items:start; margin-bottom:32px; }
.motion-prototype[data-view="content"] .practice-story-heading h2 { margin:0; font-size:clamp(23px, 2vw, 28px); font-weight:400; line-height:1.4; letter-spacing:0; }
.motion-prototype[data-view="content"] .practice-story-heading p { max-width:40em; margin:0; font-size:16px; line-height:26px; letter-spacing:0; }
.motion-prototype[data-view="content"] .practice-story-media { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:24px; }
.motion-prototype[data-view="content"] .practice-story-media--wide { grid-template-columns:minmax(0, 1fr); }
.motion-prototype[data-view="content"] .practice-story-media--mixed > .practice-figure:first-child { grid-column:1 / -1; }
.motion-prototype[data-view="content"] .practice-placeholder { position:relative; display:grid; place-items:center; aspect-ratio:4 / 3; background:#f3f3f2; color:#949490; }
.motion-prototype[data-view="content"] :is(.practice-story-media--wide,.practice-story-media--mixed) > .practice-figure:first-child .practice-placeholder { aspect-ratio:16 / 9; }
.motion-prototype[data-view="content"] .practice-placeholder-number { position:absolute; top:20px; left:24px; font-size:12px; line-height:20px; font-variant-numeric:tabular-nums; }
.motion-prototype[data-view="content"] .practice-placeholder-copy { display:grid; justify-items:center; gap:10px; padding:24px; font-size:15px; line-height:24px; }
.motion-prototype[data-view="content"] .practice-placeholder-copy > span + span { color:#adada8; font-size:12px; line-height:20px; }
.motion-prototype[data-view="content"] .practice-figure { min-width:0; margin:0; }
.motion-prototype[data-view="content"] .practice-figure img { display:block; width:100%; height:auto; object-fit:contain; }
.motion-prototype[data-view="content"] .practice-figure figcaption { margin-top:12px; font-size:13px; line-height:20px; color:var(--muted); letter-spacing:0; }
.motion-prototype[data-view="content"] .practice-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 32px; margin-top:28px; }
.motion-prototype[data-view="content"] .practice-chapters { min-width:0; }
.motion-prototype[data-view="content"] .practice-chapter { padding-bottom:var(--practice-space); }
.motion-prototype[data-view="content"] :is(.practice-chapter > header,.practice-record-source) { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); gap:48px; align-items:start; }
.motion-prototype[data-view="content"] .practice-chapter h2,
.motion-prototype[data-view="content"] .practice-record-source h2 { margin:0 0 16px; font-size:24px; font-weight:400; line-height:32px; letter-spacing:0; }
.motion-prototype[data-view="content"] .practice-chapter header p,
.motion-prototype[data-view="content"] .practice-record-source p { max-width:40em; margin:0; font-size:16px; line-height:26px; letter-spacing:0; }
.motion-prototype[data-view="content"] .practice-chapter header p + p { margin-top:16px; }
.motion-prototype[data-view="content"] .practice-media-group { display:grid; grid-template-columns:minmax(0, 1fr); margin-top:32px; gap:24px; }
.motion-prototype[data-view="content"] .practice-media-group--pair { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.motion-prototype[data-view="content"] .practice-media-group:not(.practice-media-group--pair) > .practice-figure { grid-column:1 / -1; width:calc((100% - 24px) / 2); justify-self:center; }
.motion-prototype[data-view="content"] .practice-figure--diagram { width:100%; }
.motion-prototype[data-view="content"] .practice-figure--diagram img { aspect-ratio:16 / 15; background:#fff; border:1px solid var(--line); }
.motion-prototype[data-view="content"] .practice-record-source { padding-bottom:32px; }
.motion-prototype[data-view="content"] .practice-record-source p { color:var(--muted); }
.motion-prototype[data-view="content"] .practice-record-source a { margin-top:20px; }
@media (max-width:767px) {
  .motion-prototype[data-view="content"] .practice-detail { padding-top:8px; padding-bottom:40px; }
  .motion-prototype[data-view="content"] .practice-top { margin-bottom:16px; }
  .motion-prototype[data-view="content"] .practice-introduction { grid-template-columns:minmax(0, 1fr); gap:24px; }
  .motion-prototype[data-view="content"] .practice-identity h1 { font-size:30px; }
  .motion-prototype[data-view="content"] .practice-story-heading { grid-template-columns:minmax(0, 1fr); gap:16px; margin-bottom:24px; }
  .motion-prototype[data-view="content"] .practice-story-media { grid-template-columns:minmax(0, 1fr); gap:20px; }
  .motion-prototype[data-view="content"] .practice-placeholder-number { top:12px; left:16px; }
  .motion-prototype[data-view="content"] :is(.practice-chapter > header,.practice-record-source) { grid-template-columns:minmax(0, 1fr); gap:8px; }
  .motion-prototype[data-view="content"] .practice-media-group { grid-template-columns:minmax(0, 1fr); gap:28px; margin-top:24px; }
  .motion-prototype[data-view="content"] .practice-media-group:not(.practice-media-group--pair) > .practice-figure { width:100%; }
  .motion-prototype[data-view="content"] .practice-figure--diagram { max-width:none; }
}

@media (max-width: 1023px) {
  .motion-prototype[data-view="content"] .detail-intro { min-height: calc(100svh - 88px); }
  .motion-prototype[data-view="content"] .detail-hero { padding-bottom: 230px; }
  .motion-prototype[data-view="content"] .detail-heading { max-width: 75%; }
  .motion-prototype[data-view="content"] .content-flow { grid-template-columns: 130px minmax(0, 1fr); gap: 32px; }
  .motion-prototype[data-view="content"] .use-list { grid-template-columns: 1fr; }
  .motion-prototype[data-view="content"] .detail-page-v2 .workspace-reading--portrait { gap: 28px; grid-template-columns: minmax(0, 1fr); }
  .motion-prototype[data-view="content"] .detail-page-v2 .workspace-reading--portrait .detail-media { max-width: 520px; }
  .motion-prototype[data-view="content"] .detail-page-v2 .workspace-reading--portrait .workspace-key { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 767px) {
  .motion-prototype[data-view="content"] .detail-intro { min-height: calc(100svh - 80px); padding: 8px var(--gutter) 28px; grid-template-rows: auto minmax(220px, 1fr) auto; }
  .motion-prototype[data-view="content"] .detail-top { font-size: var(--theme-caption-size); }
  .motion-prototype[data-view="content"] .detail-heading { max-width: 100%; }
  .motion-prototype[data-view="content"] .detail-heading h1 { font-size: var(--theme-mobile-title); }
  .motion-prototype[data-view="content"] .lead { font-size: var(--theme-ui-size); margin-top: 12px; }
  .motion-prototype[data-view="content"] .detail-hero { grid-area: 2 / 1; padding: 16px 0 28px; }
  .motion-prototype[data-view="content"] .detail-hero > img { height: auto; max-height: 42svh; }
  .motion-prototype[data-view="content"] .detail-banknote { height: min(50vw, 290px); }
  .motion-prototype[data-view="content"] .detail-hero figcaption { display: none; font-size: var(--theme-caption-size); }
  .motion-prototype[data-view="content"] .detail-information { padding-block: 48px 12px; }
  .motion-prototype[data-view="content"] .detail-description { font-size: 21px; }
  .motion-prototype[data-view="content"] .content-flow { display: block; }
  .motion-prototype[data-view="content"] .content-index { position: static; display: flex; flex-wrap: wrap; gap: 0 24px; padding-block: 20px; border-bottom: 1px solid var(--line); }
  .motion-prototype[data-view="content"] .content-index button { min-height: 44px; font-size: var(--theme-caption-size); gap: 8px; }
  .motion-prototype[data-view="content"] .chapter { padding-block: 40px; }
  .motion-prototype[data-view="content"] .chapter-label h2 { font-size: 23px; }
  .motion-prototype[data-view="content"] .chapter-body > p { font-size: var(--theme-body-size); }
  .motion-prototype[data-view="content"] .chapter-body > .body-intro { font-size: 18px; }
  .motion-prototype[data-view="content"] :is(.use-list p, .research-material > div, .project-progress p, .detail-page-v2 .workspace-key p, .detail-page-v2 .operation-list p, .detail-page-v2 .task-list p, .detail-page-v2 .tool-boundary p, .detail-page-v2 .tool-access p) { font-size: var(--theme-body-size); }
  .motion-prototype[data-view="content"] .comparison { grid-template-columns: minmax(0, 1fr); }
  .motion-prototype[data-view="content"] .reading-detail .detail-heading { padding-block: 52px; }
  .motion-prototype[data-view="content"] .reading-body h2 { font-size: 21px; }
  .motion-prototype[data-view="content"] .about-intro { padding-block: 64px; }
  .motion-prototype[data-view="content"] .about-intro h1 { font-size: 34px; }
  .motion-prototype[data-view="content"] .about-layout { display: block; }
  .motion-prototype[data-view="content"] .chapter-nav { position: static; }
  .motion-prototype[data-view="content"] .about-body h2 { font-size: 24px; }
  .motion-prototype[data-view="content"] .detail-page-v2 .detail-comparison { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .motion-prototype[data-view="content"] .detail-page-v2 .workspace-key,
  .motion-prototype[data-view="content"] .detail-page-v2 .workspace-reading--portrait .workspace-key { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .motion-prototype[data-view="content"] .detail-page-v2 .input-output { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .motion-prototype[data-view="content"] .detail-page-v2 .input-output > span { transform: rotate(90deg); justify-self: start; }
  .motion-prototype[data-view="content"] .detail-page-v2 .operation-list li { grid-template-columns: 24px minmax(0, 1fr); gap: 12px; }
  .motion-prototype[data-view="content"] .detail-page-v2 .task-list > div { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .motion-prototype[data-view="content"] .detail-page-v2 .tool-access h3 { font-size: 22px; }
  .motion-prototype[data-view="content"] .detail-page-v2 .next-step { flex-wrap: wrap; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  :root:has(.motion-prototype)::view-transition-group(project-title),
  :root:has(.motion-prototype)::view-transition-group(project-visual) { animation-duration: 0s; }
  .motion-prototype[data-view="content"] .content-continue span { transition: none; }
}