@layer narrative {
  .token-section { padding-block: clamp(3.5rem, 6vw, 6rem) 3rem; }
  .token-section > .section-wrap { container: living-network / inline-size; }
  .token-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 4rem; margin-block-end: 1.5rem; }
  .token-heading h2 { font: 500 clamp(2.25rem, 2rem + 1.2vw, 3rem)/1.1 var(--display); letter-spacing: -.04em; }
  .token-heading p { margin: 0; color: var(--ink); font: 450 clamp(1.25rem, 1.1rem + .6vw, 1.75rem)/1.25 var(--display); letter-spacing: -.03em; }
  .token-heading p > span { display: block; }
  .settlement-flow { margin: 0; }
  .weave-utility-picker { display: flex; flex-wrap: wrap; justify-content: end; gap: .25rem 2rem; }
  .weave-utility-picker button, .weave-scope-picker button, .weave-ai-picker button { background: transparent; border: 0; border-radius: 0; color: var(--muted); min-block-size: 2.75rem; padding: .4rem 0; font-size: 1rem; text-align: start; text-underline-offset: .4em; text-decoration-thickness: 1px; }
  .weave-utility-picker button[aria-pressed='true'], .weave-scope-picker button[aria-pressed='true'], .weave-ai-picker button[aria-pressed='true'] { color: var(--accent); text-decoration-line: underline; }
  .context-stage { position: relative; min-inline-size: 0; margin-block: .5rem 2rem; }
  .weave-canvas { position: relative; }
  .weave-review { position: absolute; inset-inline-start: var(--review-x, 61.42%); inset-block-start: calc(var(--review-top, 294) / 1200 * 100cqi); transform: translate(-50%, -50%); min-block-size: 2.75rem; min-inline-size: 2.75rem; padding: .4rem .5rem; border: 0; border-radius: 0; background: var(--paper); color: var(--accent); font-size: .9375rem; white-space: nowrap; text-decoration: underline; text-underline-offset: .4em; text-decoration-thickness: 1px; }
  .context-weave { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 12 / 7; overflow: visible; }
  .weave-legend { display: grid; grid-template-columns: 54fr 16fr 30fr; column-gap: 1.5rem; align-items: start; text-align: center; margin-block-start: -1.25rem; }
  .weave-legend > span { min-inline-size: 0; font: 450 1.0625rem/1.4 var(--display); letter-spacing: -.02em; }
  .weave-legend small { display: block; margin-block-start: .35rem; color: var(--muted); font: 400 .875rem/1.5 var(--body); letter-spacing: 0; }
  .weave-static { display: block; inline-size: 100%; block-size: auto; }
  .weave-scope-picker, .weave-ai-picker { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1.5rem; }
  .weave-scope-picker button { min-inline-size: 2.75rem; }
  .weave-scope-picker > span, .weave-ai-picker > span { min-inline-size: 6rem; color: var(--muted); font-size: .875rem; }
  .weave-ai-picker { margin-block-start: .25rem; }
  .commission-context { margin-block-start: 2rem; }
  #commission-title { max-inline-size: 42rem; color: var(--ink); font: 450 clamp(1.5rem, 1.25rem + .8cqi, 2rem)/1.2 var(--display); letter-spacing: -.03em; }
  .commission-source { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 2rem; margin-block: .75rem 1.5rem; color: var(--muted); font-size: .875rem; line-height: 1.5; }
  .utility-readings { margin-block: .75rem .25rem; }
  .utility-reading { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: .5rem 2rem; align-items: baseline; }
  .utility-reading h4 { color: var(--accent); font: 450 1.1875rem/1.4 var(--display); letter-spacing: -.02em; }
  .utility-reading > p { max-inline-size: 50rem; color: var(--muted); font-size: 1rem; line-height: 1.55; }
  .settlement-flow[data-utility='settlement'] [data-utility-reading='settlement'],
  .settlement-flow[data-utility='payments'] [data-utility-reading='payments'],
  .settlement-flow[data-utility='bonds'] [data-utility-reading='bonds'],
  .settlement-flow[data-utility='governance'] [data-utility-reading='governance'] { display: grid; }
  .settlement-flow > figcaption { max-inline-size: 59rem; margin-block-start: 1.5rem; color: var(--muted); font-size: .875rem; line-height: 1.6; }
  .settlement-flow > figcaption > span { display: block; }
  .token-intro { max-inline-size: 52rem; margin-block: 2rem .75rem; color: var(--muted); font-size: 1rem; line-height: 1.7; }
  .token-proposals > summary, .work-composition-details > summary, .settlement-evidence > summary { inline-size: fit-content; max-inline-size: 100%; min-block-size: 2.75rem; padding-block: .5rem; color: var(--accent); font-size: .9375rem; cursor: pointer; text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; }
  .token-rows { max-inline-size: 53rem; padding-block: .5rem 1rem; }
  .token-use + .token-use { margin-block-start: .25rem; }
  .token-use > summary { display: block; min-block-size: 2.75rem; padding-block: .65rem; list-style: none; color: var(--ink); }
  .token-use > summary::-webkit-details-marker { display: none; }
  .token-use > summary h3 { display: block; inline-size: auto; font: 450 1.125rem/1.4 var(--display); letter-spacing: -.025em; }
  .token-use[open] > summary { color: var(--accent); }
  .token-use-copy { max-inline-size: 50rem; padding-block: 0 .75rem; color: var(--muted); font-size: 1rem; line-height: 1.65; }
  .service-composition { max-inline-size: 53rem; padding-block: .5rem 1rem; }
  .service-work { padding-block: .75rem; }
  .work-description h4 { font: 450 1.125rem/1.4 var(--display); letter-spacing: -.025em; }
  .work-description p { margin-block: .25rem; color: var(--muted); font-size: 1rem; }
  [data-work-owner] { color: var(--muted); font-size: .875rem; }
  .token-principle { max-inline-size: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 1.25rem 3rem; margin-block-start: 2rem; padding-block-start: 1.75rem; border-block-start: 1px solid var(--line); }
  .token-principle > h3 { max-inline-size: 18rem; color: var(--ink); font: 450 1.625rem/1.25 var(--display); letter-spacing: -.03em; }
  .token-principle > p { max-inline-size: 45rem; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.7; }
  .settlement-evidence { max-inline-size: 52rem; margin-block-start: 1rem; }
  .settlement-evidence ol { margin: 0; padding-inline-start: 1.4rem; padding-block: .75rem 0; }
  .settlement-evidence li { padding-inline-start: .35rem; padding-block: .5rem .75rem; }
  .settlement-evidence h3 { margin-block-end: .3rem; font: 450 1.125rem/1.3 var(--display); letter-spacing: -.025em; }
  .settlement-evidence p { max-inline-size: 43rem; color: var(--muted); font-size: 1rem; line-height: 1.6; }
  .no-js .context-weave, .no-js .weave-review, .no-js .weave-utility-picker, .no-js .weave-scope-picker, .no-js .weave-ai-picker { display: none; }
  .no-js .utility-reading { display: grid; margin-block-start: 1rem; }
  @container living-network (max-width: 650px) {
    .token-heading { display: block; margin-block-end: 1.25rem; }
    .token-heading h2 { font-size: 2.375rem; }
    .token-heading p { margin-block-start: .75rem; font-size: 1.375rem; }
    .weave-utility-picker { justify-content: start; gap: .2rem 1.25rem; }
    .weave-utility-picker button { font-size: .9375rem; }
    .context-stage { margin-block: .5rem 1.75rem; }
    .weave-scope-picker, .weave-ai-picker { gap: .15rem 1.25rem; }
    .weave-scope-picker > span, .weave-ai-picker > span { min-inline-size: 0; inline-size: 100%; }
    .weave-scope-picker button, .weave-ai-picker button { font-size: .9375rem; }
    .weave-ai-picker { margin-block-start: .75rem; }
    .weave-review { font-size: .875rem; }
    .commission-context { margin-block-start: 1.5rem; }
    #commission-title { font-size: 1.5rem; }
    .commission-source { display: block; margin-block-end: 1.25rem; }
    #commission-stage { margin-block-start: .4rem; }
    .utility-readings { margin-block-start: .75rem; }
    .utility-reading { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
    .utility-reading h4 { font-size: 1.125rem; }
    .token-principle { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .token-principle br { display: none; }
  }
  @media (hover: hover) and (pointer: fine) {
    .weave-utility-picker button, .weave-scope-picker button, .weave-ai-picker button { transition: color .2s ease-out; }
    .weave-utility-picker button:hover, .weave-scope-picker button:hover, .weave-ai-picker button:hover { color: var(--accent); }
    .token-proposals > summary:hover, .work-composition-details > summary:hover, .settlement-evidence > summary:hover { text-decoration-thickness: 2px; }
  }
  @media (max-width: 740px) {
    .context-weave { aspect-ratio: 7 / 10; }
    .weave-legend { display: contents; }
    .weave-legend > span { position: absolute; inset-inline-start: 0; inline-size: clamp(5.75rem, 31cqi, 7rem); font-size: .9375rem; line-height: 1.4; text-align: start; overflow-wrap: normal; }
    .weave-legend > span:first-child { inset-block-start: 13%; }
    .weave-legend > #weave-ai-label { inset-block-start: 57%; transform: translateY(-50%); }
    .weave-legend > span:last-child { inset-block-end: 0; }
    .weave-legend small { margin-block-start: .35rem; font-size: .875rem; line-height: 1.45; }
    .weave-review { position: static; display: inline-flex; align-items: center; inset: auto; transform: none; margin-block-start: .25rem; max-inline-size: 100%; padding-inline: 0; background: transparent; font-size: .875rem; white-space: normal; }
  }
  @media (prefers-color-scheme: dark) { .context-weave, .weave-static { filter: brightness(1.4); } }
  .weave-stratum { transition: opacity .18s ease-out; }
  .settlement-flow:has([data-weave-scope='sleep']:focus-visible) [data-stratum]:not([data-stratum='sleep']),
  .settlement-flow:has([data-weave-scope='activity']:focus-visible) [data-stratum]:not([data-stratum='activity']),
  .settlement-flow:has([data-weave-scope='report']:focus-visible) [data-stratum]:not([data-stratum='report']) { opacity: .6; }
  @media (hover: hover) and (pointer: fine) {
    .settlement-flow:has([data-weave-scope='sleep']:hover) [data-stratum]:not([data-stratum='sleep']),
    .settlement-flow:has([data-weave-scope='activity']:hover) [data-stratum]:not([data-stratum='activity']),
    .settlement-flow:has([data-weave-scope='report']:hover) [data-stratum]:not([data-stratum='report']) { opacity: .6; }
  }
  @media (prefers-reduced-motion: reduce) { .weave-stratum { transition: none; } }
  @media (prefers-reduced-motion: reduce) { .weave-utility-picker button, .weave-scope-picker button, .weave-ai-picker button { transition: none; } }
  @media (forced-colors: active) {
    .context-weave { forced-color-adjust: none; }
    .weave-utility-picker button[aria-pressed='true'], .weave-scope-picker button[aria-pressed='true'], .weave-ai-picker button[aria-pressed='true'] { color: Highlight; }
  }
}