:root {
  color-scheme: light;
  --paper: #e8e2d6;
  --paper-light: #f5f0e7;
  --ink: #30332e;
  --muted: #70746b;
  --sage: #768577;
  --clay: #a47861;
  --ochre: #b59b6a;
  --line: rgba(48, 51, 46, .15);
  --frame-tone-a: #4b220b;
  --frame-tone-b: #7c451c;
  --frame-line: rgba(235, 206, 151, .34);
  --frame-text: #efd9aa;
  --ui: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  --serif: 'Songti SC', 'STSong', 'SimSun', Georgia, serif;
  --calligraphy: 'Ma Shan Zheng', 'STKaiti', 'KaiTi', serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); overflow-x: hidden; scroll-behavior: auto; scrollbar-width: none; -ms-overflow-style: none; }
html.is-loading, html.is-loading body { overflow: hidden; }
body { margin: 0; min-width: 1120px; color: var(--ink); background: var(--paper); font-family: var(--serif); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(circle at 21% 18%, rgba(255,255,255,.53), transparent 31%), radial-gradient(circle at 79% 72%, rgba(119,133,127,.08), transparent 34%); }
body::after { content: ''; position: fixed; right: 0; bottom: 0; left: 0; z-index: 88; height: calc(56px / 3); pointer-events: none; background: linear-gradient(90deg, var(--frame-tone-a), var(--frame-tone-b) 56%, var(--frame-tone-a)); transition: background .55s ease, opacity .35s ease; }
a, button { color: inherit; }
button { font: inherit; cursor: pointer; }

html.fonts-loading body { opacity: 0; pointer-events: none; }
html.fonts-ready body { animation: page-in .35s ease-out both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

.showcase-loader { position: fixed; inset: 0; z-index: 2000; display: grid; place-content: center; justify-items: center; gap: .55rem; background: var(--paper); transition: opacity .75s ease, visibility 0s linear .75s; }
.showcase-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-seal { display: grid; place-items: center; width: 4rem; height: 4rem; border: 1px solid rgba(118,133,119,.5); border-radius: 50%; color: var(--sage); font-family: var(--calligraphy); font-size: 2rem; animation: seal-breathe 1.6s ease-in-out infinite alternate; }
.showcase-loader p { margin: .2rem 0 0; font-family: var(--calligraphy); font-size: 1.25rem; letter-spacing: .12em; }
.showcase-loader span { color: var(--muted); font-family: var(--ui); font-size: .7rem; letter-spacing: .16em; }
.loader-progress { width: min(22rem, 54vw); height: .28rem; margin-top: .25rem; overflow: hidden; border-radius: 999px; background: rgba(118,133,119,.18); box-shadow: inset 0 0 0 1px rgba(118,133,119,.12); }
.loader-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--frame-tone-a), var(--frame-tone-b), var(--ochre)); transition: width .24s ease; }
.showcase-loader > strong { color: #68533d; font-family: var(--ui); font-size: .72rem; font-weight: 700; letter-spacing: .12em; }
@keyframes seal-breathe { from { transform: scale(.94); opacity: .52; } to { transform: scale(1.04); opacity: .92; } }

.showcase-topbar { position: fixed; inset: 0 0 auto; z-index: 100; height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 4.2vw; border-bottom: 1px solid var(--frame-line); color: var(--frame-text); background: linear-gradient(90deg, var(--frame-tone-a), var(--frame-tone-b) 56%, var(--frame-tone-a)); backdrop-filter: blur(12px); transition: background .55s ease, border-color .55s ease, color .55s ease, opacity .5s ease, transform .65s cubic-bezier(.22,.68,.18,1); }
html.is-finale .showcase-topbar { opacity: 0; pointer-events: none; transform: translateY(-100%); }
.showcase-brand { display: inline-flex; align-items: baseline; gap: .8rem; width: max-content; text-decoration: none; }
.showcase-brand span { font-family: var(--calligraphy); font-size: 1.06rem; letter-spacing: .08em; white-space: nowrap; }
.showcase-brand small { color: rgba(239,217,170,.78); font-family: var(--ui); font-size: .66rem; letter-spacing: .16em; }
.topbar-center { display: flex; align-items: center; gap: .9rem; color: rgba(239,217,170,.82); font-family: var(--ui); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; }
.topbar-center i { display: block; width: 2rem; height: 1px; background: rgba(239,217,170,.32); }
.topbar-tools { display: flex; justify-content: flex-end; align-items: center; gap: 1.3rem; font-family: var(--ui); font-size: .68rem; letter-spacing: .12em; }
.old-home-link { color: var(--muted); text-decoration: none; }
.old-home-link:hover { color: var(--ink); }
.topbar-tools button { padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.15); font-family: var(--ui); font-size: .66rem; letter-spacing: .12em; }
.topbar-tools button:hover { background: rgba(255,255,255,.58); }

.chapter-rail { position: fixed; top: 50%; right: 3.1vw; z-index: 80; display: grid; justify-items: center; gap: .8rem; transform: translateY(-50%); }
.rail-line { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(48,51,46,.17); }
.rail-line span { position: absolute; top: 0; left: -.5px; width: 2px; height: 9.09%; background: var(--sage); transform-origin: top; transition: height .28s ease; }
#chapter-dots { display: grid; gap: .7rem; }
.chapter-dot { position: relative; z-index: 1; width: .65rem; height: .65rem; padding: 0; border: 1px solid rgba(48,51,46,.35); border-radius: 50%; background: var(--paper); transition: transform .35s ease, background-color .35s ease, border-color .35s ease; }
.chapter-dot.is-active { border-color: var(--sage); background: var(--sage); transform: scale(1.45); }
.chapter-dot span { position: absolute; right: 1.15rem; top: 50%; white-space: nowrap; color: var(--muted); font-family: var(--ui); font-size: .58rem; letter-spacing: .08em; opacity: 0; pointer-events: none; transform: translateY(-50%) translateX(4px); transition: opacity .2s ease, transform .2s ease; }
.chapter-dot:hover span, .chapter-dot.is-active span { opacity: 1; transform: translateY(-50%) translateX(0); }

#practice-story { position: relative; z-index: 1; }
.practice-canvas-shell { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: linear-gradient(155deg, #e6e9e5 0%, #e9e4d9 52%, #dfd5c7 100%); }
#practice-canvas { display: block; width: 100%; height: 100%; }
.canvas-wash, .canvas-grain, .canvas-haze { position: absolute; inset: 0; pointer-events: none; }
.canvas-wash { background: radial-gradient(ellipse at 53% 45%, rgba(255,255,255,.16), transparent 57%), linear-gradient(90deg, rgba(255,255,255,.08), transparent 20%, transparent 80%, rgba(90,104,93,.08)); mix-blend-mode: screen; }
.canvas-grain { opacity: .18; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.canvas-haze { background: linear-gradient(180deg, rgba(246,242,234,.25), transparent 32%, transparent 70%, rgba(111,122,112,.08)); }

.practice-chapter { position: relative; z-index: 2; min-height: 100vh; padding: 18vh 12vw 12vh 11vw; display: flex; align-items: center; isolation: isolate; }
.practice-chapter::after { content: attr(data-index); position: absolute; left: 5.2vw; bottom: 6vh; color: rgba(48,51,46,.2); font-family: var(--ui); font-size: .68rem; letter-spacing: .15em; }
.chapter-copy { width: min(31rem, 42vw); opacity: .12; transform: translate3d(-1.3vw, 1vh, 0); transition: opacity .58s ease, transform .78s cubic-bezier(.22,.68,.18,1); }
.practice-chapter.is-current .chapter-copy { opacity: 1; transform: translate3d(0, -1vh, 0); }
.chapter-copy--title { width: 35rem; }
.chapter-copy--wide { width: min(46rem, 52vw); }
.chapter-eyebrow { margin: 0 0 1.2rem; color: #647066; font-family: var(--ui); font-size: .78rem; font-weight: 500; letter-spacing: .18em; }
h1, h2 { margin: 0; font-family: var(--calligraphy); font-weight: 400; line-height: 1.1; letter-spacing: .08em; }
h1 { color: #46584a; font-size: clamp(5.2rem, 10vw, 9.4rem); }
.chapter-title-project { font-size: clamp(4.2rem, 7.6vw, 7rem); }
.chapter--title { background: linear-gradient(180deg, transparent 0 80%, #5a2b0d 80% 100%); }
html:has(#chapter-0.is-current) .showcase-topbar { color: #e2c17f; border-bottom-color: rgba(226,193,127,.34); background: linear-gradient(90deg, var(--frame-tone-a), var(--frame-tone-b) 56%, var(--frame-tone-a)); }
html:has(#chapter-0.is-current) .showcase-topbar .showcase-brand small,
html:has(#chapter-0.is-current) .showcase-topbar .topbar-center { color: rgba(226,193,127,.78); }
body:has(#chapter-0.is-current) { --frame-tone-a: #4b220b; --frame-tone-b: #7c451c; }
body:has(#chapter-1.is-current) { --frame-tone-a: #543016; --frame-tone-b: #8a5a2e; }
body:has(#chapter-2.is-current) { --frame-tone-a: #4c2a16; --frame-tone-b: #80603b; }
body:has(#chapter-3.is-current) { --frame-tone-a: #542e14; --frame-tone-b: #8e6944; }
body:has(#chapter-4.is-current) { --frame-tone-a: #61361c; --frame-tone-b: #a7794e; }
body:has(#chapter-survey.is-current) { --frame-tone-a: #563018; --frame-tone-b: #93653e; }
body:has(#chapter-5.is-current) { --frame-tone-a: #4c260e; --frame-tone-b: #77512b; }
body:has(#chapter-6.is-current) { --frame-tone-a: #40301d; --frame-tone-b: #6c6d4c; }
body:has(#chapter-7.is-current) { --frame-tone-a: #46301d; --frame-tone-b: #7c7051; }
body:has(#chapter-8.is-current) { --frame-tone-a: #563116; --frame-tone-b: #95683a; }
body:has(#chapter-9.is-current) { --frame-tone-a: #4a2811; --frame-tone-b: #81502a; }
body:has(#chapter-11.is-current) { --frame-tone-a: #4b220b; --frame-tone-b: #7c451c; }
html.is-finale body::after { opacity: 0; }
.chapter--title .chapter-copy--title { position: absolute; top: 12vh; left: 4vw; z-index: 4; width: 38vw; height: 82vh; }
.chapter--title .chapter-eyebrow { display: none; }
.chapter--title .chapter-title-project { display: flex; flex-direction: column; align-items: flex-start; gap: 0; color: #050403; font-size: clamp(4.9rem, 8.4vw, 8.8rem); line-height: .9; letter-spacing: .03em; }
.chapter--title .chapter-title-project span:nth-child(2) { margin-left: 8.5vw; }
.chapter--title .chapter-title-project span:nth-child(4) { margin-left: 10vw; }
.chapter--title .chapter-subtitle { position: absolute; top: 62vh; left: 0; margin: 0; color: #a05018; font-family: var(--serif); font-size: clamp(1.3rem, 1.8vw, 2rem); font-weight: 600; line-height: 1.2; letter-spacing: .08em; white-space: nowrap; }
.title-seal { position: absolute; top: .5vh; left: 29vw; display: block; width: clamp(3.4rem, 5vw, 5.6rem); height: auto; }
.title-meta { position: absolute; left: 0; bottom: -1vh; display: grid; gap: 1.25rem; color: #d5ae6b; font-family: var(--serif); font-size: clamp(1.15rem, 1.65vw, 1.85rem); line-height: 1; letter-spacing: .08em; }
.title-meta p { display: flex; align-items: center; gap: 2.2rem; margin: 0; white-space: nowrap; }
.title-meta span { display: inline-block; min-width: 8.8rem; padding: .36rem .72rem; border: 1px solid #d2b36f; color: #d2b36f; background: rgba(62,29,8,.5); }
.title-meta strong { font-family: var(--serif); font-size: 1em; font-weight: 400; }
.chapter--title .scroll-hint { display: none; }
.title-collage { --collage-w: 58.5vw; --collage-h: 86vh; position: absolute; top: 7vh; right: 3.6%; z-index: 3; width: var(--collage-w); height: var(--collage-h); transform: scaleX(-1); transform-origin: center; }
.title-collage__slice { position: absolute; display: block; width: 24.04%; background-image: url("assets/practice-showcase/title-illustration.small.webp"); background-repeat: no-repeat; background-size: var(--collage-w) var(--collage-h); }
.title-collage__slice--1 { top: 16%; left: 0; height: 76%; background-position: 0 -13.76vh; }
.title-collage__slice--2 { top: 0; left: 25.32%; height: 74%; background-position: -14.8125vw 0; }
.title-collage__slice--3 { top: 5%; left: 50.64%; height: 86%; background-position: -29.625vw -4.3vh; }
.title-collage__slice--4 { top: 3%; left: 75.96%; height: 79%; background-position: -44.4375vw -2.58vh; }
h2 { color: #3f4b40; font-size: clamp(3.1rem, 6.4vw, 6.7rem); }
#chapter-1 { background: linear-gradient(90deg, rgba(10,7,4,.76) 0%, rgba(16,10,6,.61) 43%, rgba(13,9,6,.2) 71%, rgba(10,7,4,.38) 100%), url("assets/practice-showcase/background-kite-whistles.small.webp") center / cover no-repeat; }
#chapter-1 h2 { color: #f1dba8; font-size: clamp(4.7rem, 7.6vw, 8rem); line-height: .94; text-shadow: 0 2px 18px rgba(0,0,0,.4); }
#chapter-1 .chapter-background-lead { margin: 1.2rem 0 0; color: #f5ead3; font-family: var(--calligraphy); font-size: clamp(1.9rem, 3.15vw, 3.35rem); font-weight: 400; line-height: 1.16; letter-spacing: .08em; text-shadow: 0 2px 16px rgba(0,0,0,.38); }
#chapter-1 .chapter-subtitle { color: #fff0cb; font-size: clamp(1.4rem, 1.82vw, 1.95rem); font-weight: 750; line-height: 1.56; text-shadow: 0 1px 10px rgba(0,0,0,.42); }
#chapter-1 .chapter-background-questions { max-width: 48rem; margin: 1.8rem 0 0; padding-left: 1.25rem; border-left: 1px solid rgba(244,218,163,.72); color: #fff1cc; font-family: var(--ui); font-size: clamp(1.75rem, 2.5vw, 2.7rem); font-weight: 800; line-height: 1.58; letter-spacing: .035em; text-shadow: 0 2px 16px rgba(0,0,0,.45); }
#chapter-1 .chapter-side-note { color: rgba(244,226,188,.74); }
.chapter-subtitle { margin: 1.7rem 0 0; color: #475149; font-family: var(--ui); font-size: clamp(1.25rem, 1.68vw, 1.7rem); font-weight: 600; line-height: 1.86; letter-spacing: .06em; }
.chapter-subtitle--long { font-size: clamp(1.15rem, 1.42vw, 1.45rem); line-height: 1.74; letter-spacing: .04em; }
.chapter-note { max-width: 34rem; margin: 2rem 0 0; padding-left: 1.15rem; border-left: 1px solid rgba(96,113,100,.72); color: #59635a; font-family: var(--ui); font-size: clamp(1rem, 1.18vw, 1.13rem); font-weight: 600; line-height: 1.8; letter-spacing: .05em; }
.chapter-note--dense { max-width: 44rem; font-size: clamp(.95rem, 1.12vw, 1.07rem); line-height: 1.76; letter-spacing: .03em; }
.chapter-side-note { position: absolute; right: 9vw; bottom: 9.6vh; color: rgba(48,51,46,.48); font-family: var(--ui); font-size: .63rem; letter-spacing: .2em; writing-mode: vertical-rl; opacity: .16; transform: translate3d(0, .8rem, 0); transition: opacity .5s ease .12s, transform .7s cubic-bezier(.22,.68,.18,1) .12s; }
.practice-chapter.is-current .chapter-side-note { opacity: 1; transform: translate3d(0, 0, 0); }
.chapter--title .chapter-side-note { right: 13vw; bottom: 13vh; }
.scroll-hint { display: flex; align-items: center; gap: .8rem; margin: 4.2rem 0 0; color: var(--muted); font-family: var(--ui); font-size: .68rem; letter-spacing: .15em; }
.scroll-hint span { display: inline-block; width: 2rem; height: 1px; background: var(--sage); animation: hint-line 1.8s ease-in-out infinite; transform-origin: left; }
@keyframes hint-line { 0%,100% { transform: scaleX(.45); opacity: .35; } 50% { transform: scaleX(1); opacity: 1; } }

#chapter-2 h2 { transform: translateY(-.35rem); }
#chapter-2 .chapter-copy,
#chapter-3 .chapter-copy,
#chapter-4 .chapter-copy { margin-left: -3.5vw; }
#chapter-2 .chapter-eyebrow,
#chapter-3 .chapter-eyebrow,
#chapter-4 .chapter-eyebrow { position: relative; top: -11.5vh; left: -2.5vw; margin-bottom: .55rem; color: #3f4b40; font-family: var(--calligraphy); font-size: clamp(3rem, 4vw, 4.8rem); font-weight: 400; line-height: 1.02; letter-spacing: .08em; white-space: nowrap; }
#chapter-2 h2,
#chapter-3 h2,
#chapter-4 h2 { position: relative; top: -10.6vh; max-width: none; font-size: clamp(1.6rem, 2.25vw, 2.7rem); line-height: 1.08; white-space: nowrap; }
#chapter-2 .chapter-note,
#chapter-3 .chapter-note,
#chapter-4 .chapter-note { font-family: var(--ui); font-size: clamp(1.18rem, 1.38vw, 1.45rem); font-weight: 700; line-height: 1.84; }
#chapter-2 .chapter-note { font-size: clamp(1.4rem, 1.72vw, 1.85rem); line-height: 1.72; }
#chapter-2 .note-emphasis { color: #9a4f24; font-weight: 900; }
#chapter-2 .chapter-subtitle { font-size: clamp(1.32rem, 1.7vw, 1.75rem); line-height: 1.82; }
#chapter-2 .chapter-note { max-width: 35rem; font-family: var(--ui); font-size: clamp(1.18rem, 1.38vw, 1.45rem); font-weight: 700; line-height: 1.84; }
#chapter-2 .artisan-callout { position: absolute; top: 37vh; left: 39vw; z-index: 4; display: flex; flex-direction: column; gap: .28rem; color: #3f4b40; font-family: var(--ui); opacity: .08; transform: translate3d(-.8rem, .4rem, 0); transition: opacity .58s ease .1s, transform .78s cubic-bezier(.22,.68,.18,1) .1s; }
#chapter-2.is-current .artisan-callout { opacity: 1; transform: translate3d(0, 0, 0); }
#chapter-2 .artisan-callout::before { content: ''; position: absolute; top: 62%; left: calc(100% + .85rem); width: clamp(3.2rem, 5.6vw, 7rem); height: 1px; background: rgba(96,113,100,.72); transform: rotate(-12deg); transform-origin: left center; }
#chapter-2 .artisan-callout::after { content: ''; position: absolute; top: calc(62% - .18rem); left: calc(100% + clamp(3.2rem, 5.6vw, 7rem) + .55rem); width: .36rem; height: .36rem; border-radius: 50%; background: #768577; }
#chapter-2 .artisan-callout span { font-size: clamp(1rem, 1.25vw, 1.25rem); font-weight: 600; letter-spacing: .08em; }
#chapter-2 .artisan-callout strong { font-family: var(--calligraphy); font-size: clamp(1.65rem, 2.35vw, 2.45rem); font-weight: 400; letter-spacing: .12em; }
#chapter-3 .chapter-copy { position: relative; z-index: 5; width: min(32rem, 37vw); }
#chapter-3 h2 { max-width: none; font-size: clamp(1.6rem, 2.25vw, 2.7rem); white-space: nowrap; }
#chapter-3 .chapter-eyebrow { top: -1.3vh; }
#chapter-3 h2 { top: -.4vh; }
#chapter-3 .chapter-subtitle,
#chapter-3 .chapter-note { max-width: 27rem; }
#chapter-3 .chapter-subtitle,
#chapter-3 .chapter-note { position: relative; top: -.4vh; }
#chapter-3 .chapter-note { line-height: 1.76; }
#chapter-3 .museum-emphasis { color: #914b2b; font-weight: 900; }
#chapter-3 .museum-callout { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: .25rem; color: #3f4b40; font-family: var(--ui); opacity: .08; transform: translate3d(-.8rem, .4rem, 0); transition: opacity .58s ease .1s, transform .78s cubic-bezier(.22,.68,.18,1) .1s; }
#chapter-3.is-current .museum-callout { opacity: 1; transform: translate3d(0, 0, 0); }
#chapter-3 .museum-callout::before { content: ''; position: absolute; top: 62%; left: calc(100% + .8rem); width: clamp(2.5rem, 4.5vw, 5.5rem); height: 1px; background: rgba(96,113,100,.72); transform: rotate(-10deg); transform-origin: left center; }
#chapter-3 .museum-callout::after { content: ''; position: absolute; top: calc(62% - .18rem); left: calc(100% + clamp(2.5rem, 4.5vw, 5.5rem) + .45rem); width: .36rem; height: .36rem; border-radius: 50%; background: #768577; }
#chapter-3 .museum-callout span { font-size: clamp(.86rem, 1.02vw, 1.05rem); font-weight: 600; letter-spacing: .06em; }
#chapter-3 .museum-callout strong { font-family: var(--calligraphy); font-size: clamp(1.45rem, 1.95vw, 2.05rem); font-weight: 400; letter-spacing: .1em; }
#chapter-3 .museum-callout--guide { top: 13vh; left: 48vw; }
#chapter-3 .museum-callout--xu { top: 51vh; left: 47vw; }
#chapter-3 .museum-callout--yan { top: 50vh; right: 1.6vw; left: auto; align-items: flex-end; text-align: right; }
#chapter-3 .museum-callout--guide::before,
#chapter-3 .museum-callout--xu::before { transform: rotate(18deg); }
#chapter-3 .museum-callout--guide::after,
#chapter-3 .museum-callout--xu::after { top: calc(62% + 1.15rem); }
#chapter-3 .museum-callout--yan::before { right: calc(100% + .8rem); left: auto; transform: rotate(-6deg); transform-origin: right center; }
#chapter-3 .museum-callout--yan::after { right: calc(100% + clamp(2.5rem, 4.5vw, 5.5rem) + .45rem); left: auto; top: calc(62% + .15rem); }
#chapter-4 .chapter-copy { width: min(45rem, 57vw); }
#chapter-4 .chapter-subtitle { max-width: 100%; margin-top: 1.45rem; font-size: clamp(1.08rem, 1.32vw, 1.34rem); line-height: 1.68; }
#chapter-4 .community-note { max-width: 38rem; display: flex; flex-direction: column; gap: .75rem; margin-top: 1.4rem; padding-left: 1rem; font-size: clamp(1.02rem, 1.12vw, 1.15rem); line-height: 1.55; }
#chapter-4 .community-note__item { display: block; min-width: 0; }
#chapter-4 .community-emphasis { color: #914b2b; font-weight: 900; }
#chapter-4 .community-callout { position: absolute; top: 80vh; left: 62vw; z-index: 4; display: flex; flex-direction: column; gap: .25rem; color: #3f4b40; font-family: var(--ui); opacity: .08; transform: translate3d(-.8rem, .4rem, 0); transition: opacity .58s ease .1s, transform .78s cubic-bezier(.22,.68,.18,1) .1s; }
#chapter-4.is-current .community-callout { opacity: 1; transform: translate3d(0, 0, 0); }
#chapter-4 .community-callout::before { content: ''; position: absolute; top: 24%; left: calc(100% + .8rem); width: clamp(5rem, 8vw, 9rem); height: 1px; background: rgba(96,113,100,.72); transform: rotate(-28deg); transform-origin: left center; }
#chapter-4 .community-callout::after { content: ''; position: absolute; top: calc(24% - clamp(2.35rem, 3.75vw, 4.2rem)); left: calc(100% + clamp(5rem, 8vw, 9rem) + .35rem); width: .36rem; height: .36rem; border-radius: 50%; background: #768577; }
#chapter-4 .community-callout span { font-size: clamp(.86rem, 1.02vw, 1.05rem); font-weight: 600; letter-spacing: .06em; white-space: nowrap; }
#chapter-4 .community-callout strong { font-family: var(--calligraphy); font-size: clamp(1.45rem, 1.95vw, 2.05rem); font-weight: 400; letter-spacing: .1em; }

#chapter-9 { background: linear-gradient(90deg, rgba(241,237,227,.9) 0%, rgba(241,237,227,.74) 45%, rgba(241,237,227,.26) 100%), url("assets/practice-showcase/future-background.small.webp") center / cover no-repeat; }

.chapter--survey { padding: 9vh 5vw 6vh; align-items: stretch; background: linear-gradient(145deg, rgba(247,243,234,.9), rgba(224,216,201,.78)); }
.survey-results { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; }
.chapter--survey .chapter-eyebrow { margin: 0 0 .15rem; color: #8c5a34; font-family: var(--ui); font-size: clamp(.72rem, .82vw, .9rem); font-weight: 700; letter-spacing: .22em; }
.chapter--survey h2 { color: #3f4b40; font-size: clamp(2.8rem, 4.5vw, 4.8rem); line-height: 1; white-space: nowrap; }
.survey-results__summary { margin: .45rem 0 .35rem; color: #59635a; font-family: var(--ui); font-size: clamp(.9rem, 1.08vw, 1.16rem); font-weight: 650; letter-spacing: .04em; }
.survey-results__summary span { color: #914b2b; font-weight: 900; }
.survey-results__insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem; margin: 0; }
.survey-results__insights p { margin: 0; padding: 0 .45rem; color: #914b2b; font-family: var(--ui); font-size: clamp(1rem, 1.25vw, 1.32rem); font-weight: 800; letter-spacing: .035em; text-align: left; white-space: nowrap; }
.survey-results__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.35rem; width: 100%; max-width: 100%; height: 63vh; margin-top: .65rem; overflow: hidden; }
.survey-results__grid figure { width: 100%; max-width: 100%; min-width: 0; min-height: 0; margin: 0; padding: .45rem; overflow: hidden; border: 1px solid rgba(112,92,67,.16); border-radius: .55rem; background: rgba(255,255,255,.82); box-shadow: 0 .8rem 2rem rgba(72,55,36,.1); }
.survey-results__grid img { display: block; width: 100%; max-width: 100%; height: 100%; max-height: 100%; object-fit: contain; object-position: center; }

.chapter--video-finale { overflow: hidden; align-items: flex-end; padding: 0 0 10vh; background: #101410; }
.chapter--video-finale::after { display: none; }
.finale-video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; background: #101410; opacity: 0; transform: scale(1.018); transition: opacity .75s ease, transform 1.4s cubic-bezier(.22,.68,.18,1); }
.chapter--video-finale.is-current .finale-video { opacity: 1; transform: scale(1); }
.finale-video-wash { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(14,20,16,.72) 0%, rgba(14,20,16,.4) 35%, rgba(14,20,16,.08) 67%, rgba(14,20,16,.18) 100%), linear-gradient(0deg, rgba(10,14,11,.42), transparent 52%); opacity: 0; }
.chapter--video-finale.is-current .finale-video-wash { animation: finale-video-wash-reveal 3s ease both; }
@keyframes finale-video-wash-reveal { 0%, 18%, 74% { opacity: 1; } 100% { opacity: 0; } }
.finale-video-intro { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding-bottom: 5vh; color: rgba(255,255,255,.94); font-family: var(--calligraphy); font-size: clamp(2.4rem, 5.2vw, 5rem); letter-spacing: .24em; text-shadow: 0 2px 22px rgba(0,0,0,.42); opacity: 0; pointer-events: none; }
.chapter--video-finale.is-current .finale-video-intro { animation: finale-video-intro-reveal 3s ease both; }
@keyframes finale-video-intro-reveal { 0% { opacity: 0; transform: translateY(.55rem); } 18% { opacity: 1; transform: translateY(0); } 74% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-.45rem); } }
.chapter--video-finale .chapter-copy { position: relative; z-index: 2; width: min(44rem, 58vw); margin-left: 8vw; color: rgba(250,248,240,.94); text-shadow: 0 2px 20px rgba(0,0,0,.28); }
.chapter--video-finale h2,
.chapter--video-finale .chapter-eyebrow,
.chapter--video-finale .chapter-subtitle,
.chapter--video-finale .chapter-note { color: inherit; }
.chapter--video-finale .chapter-side-note { z-index: 2; color: rgba(255,255,255,.68); }
html.is-finale .chapter-nav button { color: rgba(255,255,255,.72); text-shadow: 0 1px 8px rgba(0,0,0,.48); }
html.is-finale .chapter-nav button:hover:not(:disabled) { color: #fff; }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

.chapter--media { overflow: hidden; padding: 0; align-items: stretch; }
.chapter--media::after { z-index: 8; left: 4.4vw; bottom: 4.8vh; }
.chapter--media .chapter-side-note { display: none; }
.media-outcomes { position: absolute; inset: 57px 0 0; width: 100%; margin: 0; overflow: hidden; background: rgba(247,246,242,.96); perspective: 1050px; }
.media-outcomes::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: linear-gradient(180deg, rgba(247,246,242,.9), rgba(247,246,242,0) 10%, rgba(247,246,242,0) 86%, rgba(247,246,242,.96)), linear-gradient(90deg, rgba(247,246,242,.9), rgba(247,246,242,0) 8%, rgba(247,246,242,0) 91%, rgba(247,246,242,.94)); }
.media-outcomes > .chapter-eyebrow { position: absolute; top: 1.35rem; left: 3.8vw; z-index: 8; margin: 0; padding: 0; color: #3f4b40; background: transparent; font-family: var(--calligraphy); font-size: clamp(1.9rem, 2.55vw, 3rem); font-weight: 400; line-height: 1.08; letter-spacing: .1em; }
.media-outcomes-summary { position: absolute; top: clamp(4.2rem, 8.4vh, 5.7rem); left: 3.8vw; z-index: 8; margin: 0; color: rgba(78,91,81,.8); font-family: var(--ui); font-size: clamp(.76rem, .92vw, 1rem); font-weight: 650; letter-spacing: .04em; }
.media-outcomes-summary span { color: #914b2b; font-weight: 900; }
.media-outcome-grid { --media-card-width: clamp(17rem, 24vw, 31rem); --media-card-gap: clamp(.9rem, 2.1vh, 1.35rem); position: absolute; inset: 1vh -1vw -14vh; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 2.75rem); width: auto; height: auto; margin: 0; padding: clamp(4.8rem, 10vh, 6.2rem) 3vw 3rem; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; isolation: isolate; transform-style: preserve-3d; transform-origin: center 42%; opacity: .12; transform: rotateX(3deg) rotateY(-7deg) rotateZ(-3deg) scale(1.05) translate3d(0, 2rem, 0); transition: opacity .7s ease, transform 1.05s cubic-bezier(.22,.68,.18,1); }
.chapter--media.is-current .media-outcome-grid { opacity: 1; transform: rotateX(3deg) rotateY(-7deg) rotateZ(-3deg) scale(1.08) translate3d(0, 0, 0); }
.media-outcome { position: relative; z-index: 1; display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; min-height: 0; opacity: .08; transform: translate3d(0, 2.1rem, 0) scale(.985); transition: opacity .62s ease, transform .82s cubic-bezier(.22,.68,.18,1); }
.chapter--media.is-current .media-outcome { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.chapter--media.is-current .media-outcome:nth-child(2) { transition-delay: .08s; }
.chapter--media.is-current .media-outcome:nth-child(3) { transition-delay: .16s; }
.media-outcome header { position: relative; z-index: 4; display: flex; align-items: flex-start; justify-content: center; gap: .55rem; min-height: 2.45rem; margin: 0 0 1rem; }
.media-outcome header > div { min-width: 0; max-width: calc(100% - 1.25rem); text-align: left; }
.media-outcome header span { margin-top: .25rem; color: rgba(87,99,89,.52); font-family: var(--ui); font-size: .62rem; font-weight: 600; letter-spacing: .14em; }
.media-outcome h3 { margin: 0; color: #3f4b40; font-family: var(--calligraphy); font-size: clamp(2.3rem, 3.2vw, 3.45rem); font-weight: 400; line-height: 1; letter-spacing: .08em; }
.media-outcome header p { max-width: 100%; margin: .38rem 0 0; color: rgba(78,91,81,.78); font-family: var(--ui); font-size: clamp(.82rem, .98vw, 1.02rem); font-weight: 600; line-height: 1.35; letter-spacing: .015em; white-space: normal; }
.media-outcome header p strong { color: #26372b; font-weight: 800; }
.media-outcome--push header { transform: translateX(clamp(-2.2rem, -2.3vw, -1.2rem)); }
.media-outcome--push header > div { max-width: min(18rem, calc(100% - 1.25rem)); }
.media-marquee-viewport { position: relative; min-height: 0; overflow: hidden; }
.media-marquee-viewport::before, .media-marquee-viewport::after { content: ''; position: absolute; right: 0; left: 0; z-index: 2; height: 12%; pointer-events: none; }
.media-marquee-viewport::before { top: 0; background: linear-gradient(180deg, rgba(242,239,231,.92), rgba(242,239,231,0)); }
.media-marquee-viewport::after { bottom: 0; background: linear-gradient(0deg, rgba(242,239,231,.92), rgba(242,239,231,0)); }
.media-marquee-track { display: flex; flex-direction: column; will-change: transform; animation: media-marquee-flow 27s linear infinite; animation-play-state: paused; }
.chapter--media.is-current .media-marquee-track { animation-play-state: running; }
.media-outcome--promo .media-marquee-track { animation-direction: reverse; animation-duration: 31s; animation-delay: -8s; }
.media-outcome--push .media-marquee-track { animation-duration: 29s; animation-delay: -15s; }
.media-marquee-set { display: flex; flex-direction: column; align-items: center; gap: var(--media-card-gap); padding-bottom: var(--media-card-gap); }
.media-marquee-card { width: var(--media-card-width); flex: 0 0 auto; padding: .62rem; border: 1px solid rgba(91,104,92,.17); border-radius: .9rem; background: rgba(255,255,255,.88); box-shadow: 0 16px 34px rgba(58,70,61,.12); }
.media-marquee-card figure { margin: 0; overflow: hidden; border-radius: .48rem; background: rgba(226,218,200,.24); }
.media-marquee-card img { display: block; width: 100%; height: auto; max-width: 100%; filter: saturate(.78) contrast(.94) sepia(.05); }
.media-marquee-card p { margin: .62rem .16rem .1rem; overflow: hidden; color: #4e5b51; font-family: var(--ui); font-size: clamp(.78rem, .95vw, .95rem); font-weight: 600; line-height: 1.38; letter-spacing: .025em; text-overflow: ellipsis; white-space: nowrap; }
@keyframes media-marquee-flow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -25%, 0); } }

.chapter--digital { overflow: hidden; padding: 0; align-items: stretch; background: #ebe6dc; }
.digital-page-wall { position: absolute; inset: 56px 0 calc(56px / 3); overflow: hidden; perspective: 1200px; background: #e9e4da; }
.digital-page-wall::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: rgba(242,238,229,.55); }
.digital-page-grid { position: absolute; inset: -8vh -3vw -15vh; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.7rem, 1.4vw, 1.7rem); transform-style: preserve-3d; transform-origin: center 42%; opacity: .12; transform: rotateX(2deg) rotateY(-5deg) rotateZ(-3deg) scale(1.04) translate3d(0, 2rem, 0); transition: opacity .7s ease, transform 1.05s cubic-bezier(.22,.68,.18,1); }
.chapter--digital.is-current .digital-page-grid { opacity: .42; transform: rotateX(2deg) rotateY(-5deg) rotateZ(-3deg) scale(1.08) translate3d(0, 0, 0); }
.digital-page-card { position: relative; min-width: 0; height: 116vh; margin: 0; overflow: hidden; border: 1px solid rgba(61,72,63,.18); border-radius: .9rem; background: #f6f2e9; box-shadow: 0 1.3rem 3rem rgba(48,45,38,.18); }
.digital-page-card:nth-child(2), .digital-page-card:nth-child(4) { transform: translateY(6vh); }
.digital-page-card iframe { display: block; width: 100%; height: 100%; border: 0; background: #f6f2e9; pointer-events: none; }
.digital-page-card figcaption { position: absolute; top: 1rem; left: 1rem; z-index: 2; padding: .42rem .7rem; border-radius: 999px; color: #f4e3bd; background: rgba(50,29,15,.76); font-family: var(--ui); font-size: clamp(.68rem, .78vw, .82rem); font-weight: 700; letter-spacing: .08em; backdrop-filter: blur(8px); }
.digital-page-message { position: absolute; top: 50%; left: 50%; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: .65rem; width: max-content; color: #344239; text-align: center; transform: translate(-50%, -50%); text-shadow: 0 2px 18px rgba(248,244,235,.96); }
.digital-page-message span { font-family: var(--calligraphy); font-size: clamp(3rem, 5vw, 5.4rem); line-height: 1; letter-spacing: .08em; white-space: nowrap; }
.digital-page-message strong { font-family: var(--calligraphy); font-size: clamp(2rem, 3.3vw, 3.6rem); font-weight: 400; line-height: 1; letter-spacing: .1em; white-space: nowrap; }
.digital-page-message p { margin: .25rem 0 0; font-family: var(--ui); font-size: clamp(1.05rem, 1.5vw, 1.6rem); font-weight: 700; line-height: 1.4; letter-spacing: .05em; white-space: nowrap; }
.digital-page-message p span { color: #914b2b; font-weight: 900; }

.chapter-action, .film-controls button, .pet-controls button { margin-top: 1.7rem; padding: .75rem 1.1rem; border: 1px solid rgba(118,133,119,.62); border-radius: 999px; color: #536453; background: rgba(246,242,234,.28); font-family: var(--ui); font-size: .72rem; letter-spacing: .12em; transition: background .25s ease, transform .25s ease, box-shadow .25s ease; }
.chapter-action:hover, .film-controls button:hover, .pet-controls button:hover { background: rgba(246,242,234,.74); box-shadow: 0 8px 24px rgba(68,80,68,.1); transform: translateY(-2px); }
.chapter-action span { margin-left: .55rem; }
.film-controls, .pet-controls { display: flex; gap: .6rem; }
.film-controls button, .pet-controls button { margin-top: 1.25rem; padding: .55rem .8rem; font-size: .63rem; }
.component-label { position: absolute; right: 10vw; top: 19vh; color: rgba(48,51,46,.44); font-family: var(--ui); font-size: .62rem; letter-spacing: .19em; }
.component-label--film { top: auto; bottom: 12vh; }
.restart-link { display: inline-block; margin-top: 2.5rem; color: #536453; font-family: var(--ui); font-size: .75rem; letter-spacing: .12em; text-decoration: none; }
.restart-link:hover { text-decoration: underline; text-underline-offset: .3rem; }

.chapter--spectrum .chapter-copy,
.chapter--pet .chapter-copy { position: relative; z-index: 3; width: min(30rem, 30vw); }
.chapter--spectrum .chapter-copy { position: absolute; top: 11vh; left: 4vw; width: min(48rem, 46vw); padding: 0; border: 0; color: #eaf4fa; background: transparent; backdrop-filter: none; text-align: left; text-shadow: 0 2px 14px rgba(2,12,20,.72); }
.chapter--spectrum .chapter-eyebrow { margin: 0; color: #eaf4fa; font-family: var(--calligraphy); font-size: clamp(2.5rem, 3.7vw, 4.2rem); font-weight: 400; line-height: 1.05; letter-spacing: .07em; white-space: nowrap; }
.chapter--spectrum h2 { margin-top: 1rem; color: rgba(190,225,242,.95); font-size: clamp(2.15rem, 3.1vw, 3.35rem); line-height: 1; white-space: nowrap; }
.chapter--spectrum .chapter-subtitle { width: min(21rem, 25vw); max-width: 21rem; color: rgba(220,236,246,.88); }

.chapter--pet { overflow: hidden; background: linear-gradient(90deg, rgba(244,243,238,.92), rgba(244,243,238,.72) 48%, rgba(244,243,238,.42)), url("assets/practice-showcase/pet-platform-background.small.webp") center / cover no-repeat; }
.chapter--pet .chapter-copy { position: absolute; top: 12vh; left: 5vw; z-index: 4; width: min(58rem, 57vw); }
.chapter--pet .chapter-eyebrow { margin: 0; color: #3f4b40; font-family: var(--calligraphy); font-size: clamp(2.8rem, 4.25vw, 4.7rem); font-weight: 400; line-height: 1.05; letter-spacing: .07em; white-space: nowrap; }
.chapter--pet h2 { margin-top: 1.5rem; color: #466057; font-size: clamp(2.2rem, 3.4vw, 3.7rem); line-height: 1; white-space: nowrap; }
.chapter--pet .chapter-subtitle { margin-top: 1.05rem; color: #8f4e2c; font-family: var(--ui); font-size: clamp(1.25rem, 1.75vw, 1.9rem); font-weight: 800; letter-spacing: .08em; }
.chapter--pet .pet-result-copy { max-width: 30rem; margin: 1.35rem 0 0; color: #4b574f; font-family: var(--ui); font-size: clamp(1.05rem, 1.35vw, 1.45rem); font-weight: 700; line-height: 1.65; letter-spacing: .04em; }
.chapter--pet .pet-result-copy span { color: #9a4f24; font-weight: 900; }

.original-component-frame { position: absolute; z-index: 2; overflow: hidden; opacity: 0; pointer-events: none; transform: translate3d(1.4rem, .65rem, 0) scale(.985); transition: opacity .58s ease .12s, transform .82s cubic-bezier(.22,.68,.18,1) .12s; }
.practice-chapter.is-current .original-component-frame.is-ready { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.original-component-frame iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.original-component-frame--sound { inset: 56px 0 calc(56px / 3); width: auto; height: auto; background: #07131d; box-shadow: none; }
.original-component-frame--pet { top: 29vh; right: 4.5vw; width: min(45vw, 48rem); height: 64vh; background: transparent; }

.chapter-nav { position: fixed; right: 4.2vw; bottom: 2.25rem; z-index: 90; display: flex; gap: .35rem; }
.chapter-nav button { width: 1.55rem; height: 1.55rem; padding: 0; border: 0; color: rgba(48,51,46,.5); background: transparent; font-family: var(--ui); font-size: .78rem; line-height: 1; transition: color .25s ease, transform .25s ease, opacity .25s ease; }
.chapter-nav button:hover:not(:disabled) { color: var(--ink); transform: translateY(-1px); }
.chapter-nav button:disabled { cursor: default; opacity: .32; }
.screen-curtain { position: fixed; inset: 0; z-index: 1000; background: #090a09; }
.screen-curtain.is-white { background: #fff; }
.noscript-note { position: fixed; inset: 1rem; z-index: 800; padding: 1rem; background: var(--paper-light); font-family: var(--ui); }

@media (max-height: 820px) {
  .media-outcomes > .chapter-eyebrow { top: .9rem; }
  .media-outcome-grid { inset: 1vh -1vw -15vh; padding-top: 4.1rem; }
  .media-outcome header { margin-bottom: .65rem; }
  .media-outcome h3 { font-size: clamp(2rem, 3vw, 2.8rem); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } }