:root { --xx-ink: #18272e; --xx-blue: #263d48; --xx-ivory: #f3ebdd; --xx-rose: #c97973; --xx-lotus: #a67f8e; --xx-mist: #87969c; --xx-apricot: #d9b99b; --xx-gold: #c6a15b; --xx-charcoal: #302f2d; }
* { box-sizing: border-box; }
.xx-page { margin: 0px; background: var(--xx-ivory); color: var(--xx-charcoal); font-family: "Noto Serif TC", "Source Han Serif TC", "Noto Serif JP", Georgia, serif; font-synthesis: none; line-height: 1.85; text-rendering: optimizelegibility; }
.xx-page a { color: inherit; }
.xx-page p { margin-top: 0px; text-wrap: pretty; }
.xx-skip { position: absolute; left: -9999px; }
.xx-skip:focus { left: 1rem; top: 1rem; z-index: 30; background: rgb(255, 255, 255); padding: 0.7rem 1rem; }
.xx-progress { position: fixed; z-index: 24; inset: 0px auto auto 0px; width: 0px; height: 2px; background: linear-gradient(90deg,var(--xx-rose),var(--xx-gold)); box-shadow: rgba(240, 207, 145, 0.65) 0px 0px 12px; pointer-events: none; }
.xx-topbar { position: fixed; inset: 0px 0px auto; z-index: 22; background: rgba(24, 39, 46, 0.94); color: rgb(255, 255, 255); border-bottom: 1px solid rgba(198, 161, 91, 0.35); backdrop-filter: blur(12px); }
.xx-nav { max-width: 1180px; margin: auto; padding: 0.7rem 1.2rem; display: flex; align-items: center; gap: 1rem; }
.xx-brand { font-weight: 700; text-decoration: none; letter-spacing: 0.08em; white-space: nowrap; }
.xx-navlinks { margin-left: auto; display: flex; align-items: center; gap: 0.35rem; }
.xx-navlinks a { font-family: system-ui, sans-serif; font-size: 0.78rem; line-height: 1.2; text-decoration: none; padding: 0.4rem 0.55rem; border: 1px solid transparent; border-radius: 999px; }
.xx-navlinks a:hover, .xx-navlinks a:focus-visible, .xx-navlinks a[aria-current="true"] { border-color: var(--xx-gold); color: rgb(246, 217, 149); outline: none; }
.xx-hero { min-height: 100svh; display: grid; align-items: end; position: relative; overflow: hidden; background: var(--xx-ink); color: rgb(255, 255, 255); }
.xx-hero::before { content: ""; position: absolute; z-index: 1; inset: 0px; background: radial-gradient(circle at 77% 28%, rgba(198, 161, 91, 0.15), transparent 26%), repeating-linear-gradient(90deg, transparent 0px, transparent 9.8%, rgba(255, 255, 255, 0.024) 10%); }
.xx-hero::after { content: ""; position: absolute; z-index: 1; inset: 0px; background: linear-gradient(90deg, rgba(24, 39, 46, 0.97) 0%, rgba(24, 39, 46, 0.77) 48%, rgba(24, 39, 46, 0.2)), linear-gradient(0deg, rgba(24, 39, 46, 0.9), transparent 58%); }
.xx-hero img { position: absolute; inset: -2%; width: 104%; height: 104%; object-fit: cover; object-position: center center; opacity: 0.72; animation: 15s ease-out 0s 1 normal both running xxOpening; will-change: transform; }
.xx-hero-copy { position: relative; z-index: 2; max-width: 1180px; width: 100%; margin: auto; padding: 9rem 1.3rem 4rem; animation: 1.15s ease-out 0.15s 1 normal both running xxCopyIn; }
.xx-kicker { font: 700 0.72rem / 1.55 system-ui, sans-serif; letter-spacing: 0.18em; color: rgb(240, 207, 145); text-transform: uppercase; }
.xx-hero h1 { max-width: 830px; margin: 0.75rem 0px 1rem; font-size: clamp(2.65rem, 7vw, 6.15rem); line-height: 1.05; letter-spacing: 0.015em; text-wrap: balance; }
.xx-deck { max-width: 790px; font-size: clamp(1.02rem, 2vw, 1.38rem); line-height: 1.65; color: rgb(243, 234, 220); }
.xx-status { display: inline-flex; gap: 0.7rem; align-items: center; margin-top: 0.8rem; padding: 0.65rem 0.85rem; border: 1px solid rgba(255, 255, 255, 0.35); font: 600 0.78rem / 1.45 system-ui, sans-serif; background: rgba(12, 26, 33, 0.24); }
.xx-status i { flex: 0 0 auto; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--xx-rose); box-shadow: rgba(201, 121, 115, 0.18) 0px 0px 0px 0.35rem; animation: 2.2s ease 0s infinite normal none running xxPulse; }
.xx-view-counter { margin-top: 1rem; max-width: fit-content; background: rgba(12, 28, 36, 0.72) !important; border-color: rgba(240, 207, 145, 0.34) !important; color: rgb(255, 255, 255) !important; }
.xx-view-counter .home-view-counter-label { color: rgb(226, 207, 171); }
.xx-view-counter .home-view-counter-value { color: rgb(255, 255, 255); }
.xx-method { padding: 6rem 1.3rem; background: rgb(237, 227, 213); position: relative; overflow: hidden; }
.xx-method::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(135deg, rgba(38, 61, 72, 0.05) 25%, transparent 25%) 0px 0px / 22px 22px; mask-image: linear-gradient(90deg, rgb(0, 0, 0), transparent 38%); pointer-events: none; }
.xx-method-inner { position: relative; max-width: 1180px; margin: auto; }
.xx-method h2 { max-width: 820px; margin: 0.6rem 0px 1.3rem; color: var(--xx-ink); font-size: clamp(2rem, 4.7vw, 4.3rem); line-height: 1.15; }
.xx-method-inner > div:first-child > p { max-width: 880px; font-size: 1.05rem; }
.xx-method-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 1px; margin: 2.3rem 0px; background: rgba(38, 61, 72, 0.2); border: 1px solid rgba(38, 61, 72, 0.2); }
.xx-method-grid article { background: rgba(243, 235, 221, 0.95); padding: 1.5rem; }
.xx-method-grid span { font: 700 0.72rem system-ui, sans-serif; letter-spacing: 0.18em; color: var(--xx-rose); }
.xx-method-grid strong { display: block; margin: 0.5rem 0px; color: var(--xx-blue); font-size: 1.05rem; }
.xx-method-grid p { margin: 0px; font-size: 0.9rem; line-height: 1.7; }
.xx-evidence { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 1.5rem; }
.xx-evidence span { padding: 0.4rem 0.7rem; border: 1px solid rgba(38, 61, 72, 0.24); background: rgba(255, 255, 255, 0.45); font: 700 0.72rem system-ui, sans-serif; letter-spacing: 0.06em; }
.xx-evidence span:nth-child(1) { border-color: rgb(100, 128, 109); }
.xx-evidence span:nth-child(2) { border-color: rgb(156, 123, 85); }
.xx-evidence span:nth-child(3) { border-style: dashed; border-color: rgb(154, 100, 100); }
.xx-craft-note { border-left: 3px solid var(--xx-gold); padding: 1.1rem 1.4rem; background: rgba(255, 255, 255, 0.42); }
.xx-craft-note strong { color: var(--xx-blue); font-size: 1.05rem; }
.xx-craft-note p { margin: 0.35rem 0px 0px; font-size: 0.94rem; line-height: 1.8; }
.xx-principle { background: var(--xx-blue); color: rgb(255, 255, 255); padding: 4.3rem 1.3rem; text-align: center; position: relative; }
.xx-principle::before, .xx-principle::after { content: ""; position: absolute; top: 50%; width: min(14vw, 180px); height: 1px; background: linear-gradient(90deg,transparent,var(--xx-gold)); }
.xx-principle::before { left: 0px; }
.xx-principle::after { right: 0px; transform: scaleX(-1); }
.xx-principle p { max-width: 920px; margin: auto; font-size: clamp(1.35rem, 3.2vw, 2.55rem); line-height: 1.5; }
.xx-principle strong { color: rgb(240, 207, 145); }
.xx-chapter { position: relative; min-height: 88vh; display: grid; align-items: center; padding: 5.4rem 1.3rem; overflow: hidden; }
.xx-chapter:nth-of-type(2n) { background: rgb(233, 223, 210); }
.xx-chapter::after { content: ""; position: absolute; right: -8rem; bottom: -8rem; width: 18rem; height: 18rem; border: 1px solid rgba(198, 161, 91, 0.2); border-radius: 48% 52% 45% 55%; transform: rotate(18deg); pointer-events: none; }
.xx-wrap { max-width: 1180px; width: 100%; margin: auto; display: grid; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1.12fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.xx-chapter:nth-of-type(2n) .xx-art { order: 2; }
.xx-art { margin: 0px; position: relative; }
.xx-art img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: rgba(24, 39, 46, 0.18) 0px 1.3rem 3.5rem; transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1.1s; }
.is-visible .xx-art img { transform: scale(1.015); }
.xx-art::before { content: ""; position: absolute; inset: -12px 12px 12px -12px; border: 1px solid var(--xx-gold); z-index: -1; }
.xx-art figcaption { margin-top: 0.75rem; font: 500 0.75rem / 1.55 system-ui, sans-serif; color: rgb(91, 98, 97); letter-spacing: 0.025em; }
.xx-number { font: 700 0.72rem / 1.5 system-ui, sans-serif; letter-spacing: 0.2em; color: var(--xx-rose); }
.xx-copy h2 { font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1.18; margin: 0.5rem 0px 1.1rem; color: var(--xx-ink); text-wrap: balance; }
.xx-copy p { font-size: 1.04rem; }
.xx-question { border-left: 3px solid var(--xx-gold); padding: 0.4rem 0px 0.4rem 1.15rem; margin-top: 1.6rem; font-weight: 700; color: var(--xx-blue); }
.xx-petals { display: flex; gap: 0.45rem; margin-top: 1.3rem; }
.xx-petals span { width: 1.45rem; height: 1.45rem; border-radius: 70% 30% 65% 35%; background: var(--xx-rose); transform: rotate(calc(var(--i)*72deg)); opacity: calc(.25 + var(--i)*.14); transition: transform .7s calc(var(--i)*80ms) ease; }
.is-visible .xx-petals span { transform: rotate(calc(var(--i)*72deg)) scale(1.08); }
.xx-petals span:last-child { background: transparent; border: 1px dashed var(--xx-rose); opacity: 1; }
.xx-ending { background: var(--xx-ink); color: rgb(255, 255, 255); padding: 7rem 1.3rem; position: relative; overflow: hidden; }
.xx-ending::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(circle at 82% 32%, rgba(198, 161, 91, 0.14), transparent 30%), linear-gradient(115deg, transparent 54%, rgba(255, 255, 255, 0.024) 54%, rgba(255, 255, 255, 0.024) 55%, transparent 55%); }
.xx-ending-grid { position: relative; max-width: 1180px; margin: auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: center; }
.xx-ending h2 { font-size: clamp(2.3rem, 5vw, 4.5rem); line-height: 1.12; margin: 0.5rem 0px 1.3rem; text-wrap: balance; }
.xx-ending strong { color: rgb(240, 207, 145); }
.xx-ending img { width: 100%; box-shadow: rgba(0, 0, 0, 0.34) 0px 1rem 3rem; transition: transform 1.2s, filter 1.2s; }
.xx-ending .is-visible img { transform: translateY(-6px); filter: brightness(1.06); }
.xx-watch { margin: 1.8rem 0px; padding: 1.2rem; border: 1px solid rgba(198, 161, 91, 0.5); background: rgba(255, 255, 255, 0.05); }
.xx-watch small { font: 700 0.7rem system-ui, sans-serif; letter-spacing: 0.15em; color: rgb(240, 207, 145); }
.xx-watch p { margin: 0.35rem 0px 0px; }
.xx-legal { position: relative; max-width: 850px; margin: 3rem auto 0px; color: rgb(200, 208, 210); font: 400 0.8rem / 1.75 system-ui, sans-serif; }
.xx-footer { background: rgb(16, 28, 33); color: rgb(203, 210, 211); text-align: center; padding: 1.3rem; font: 500 0.75rem system-ui, sans-serif; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s, transform 0.9s; }
.reveal.is-visible { opacity: 1; transform: none; }
html[lang="zh-Hans"] .xx-page { font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "Microsoft YaHei", serif; font-synthesis: none; }
html[lang="zh-Hans"] .xx-navlinks a, html[lang="zh-Hans"] .xx-kicker, html[lang="zh-Hans"] .xx-status, html[lang="zh-Hans"] .xx-number, html[lang="zh-Hans"] .xx-art figcaption, html[lang="zh-Hans"] .xx-method-grid span, html[lang="zh-Hans"] .xx-evidence span, html[lang="zh-Hans"] .xx-watch small, html[lang="zh-Hans"] .xx-legal { font-family: "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif; }
html[lang="en"] .xx-page { font-family: "Source Serif 4", "Iowan Old Style", Georgia, serif; }
html[lang="en"] .xx-hero h1 { max-width: 940px; font-size: clamp(2.55rem, 6.7vw, 5.9rem); line-height: 1.02; hyphens: auto; overflow-wrap: anywhere; }
html[lang="en"] .xx-method h2, html[lang="en"] .xx-copy h2, html[lang="en"] .xx-ending h2 { hyphens: auto; overflow-wrap: anywhere; }
html[lang="en"] .xx-copy p, html[lang="en"] .xx-method p { line-height: 1.76; }
html[lang="ja"] .xx-page { font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif; line-break: strict; word-break: normal; }
html[lang="ja"] .xx-hero h1 { max-width: 1000px; font-size: clamp(2.35rem, 6vw, 5.35rem); line-height: 1.16; }
html[lang="ja"] .xx-method h2, html[lang="ja"] .xx-copy h2, html[lang="ja"] .xx-ending h2 { line-break: strict; overflow-wrap: anywhere; }
html[lang="ja"] .xx-copy p, html[lang="ja"] .xx-method p { line-height: 1.95; }
@keyframes xxPulse { 
  50% { box-shadow: rgba(201, 121, 115, 0) 0px 0px 0px 0.7rem; }
}
@keyframes xxOpening { 
  0% { transform: scale(1.07); filter: saturate(0.72) brightness(0.78); }
  100% { transform: scale(1); filter: saturate(0.9) brightness(1); }
}
@keyframes xxCopyIn { 
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  .xx-method-grid { grid-template-columns: 1fr; }
  .xx-method-grid article { padding: 1.2rem 1.25rem; }
  .xx-hero h1 { max-width: 92%; }
}
@media (max-width: 780px) {
  .xx-nav { align-items: center; padding: 0.62rem 0.8rem; }
  .xx-brand { font-size: 0.78rem; letter-spacing: 0.04em; }
  .xx-navlinks { gap: 0.05rem; }
  .xx-navlinks a { font-size: 0.7rem; padding: 0.35rem 0.4rem; }
  .xx-navlinks .xx-home { display: none; }
  .xx-hero { min-height: 92svh; }
  .xx-hero::after { background: linear-gradient(0deg, rgba(24, 39, 46, 0.97) 0%, rgba(24, 39, 46, 0.76) 58%, rgba(24, 39, 46, 0.22)); }
  .xx-hero img { object-position: 64% center; }
  .xx-hero-copy { padding: 7.4rem 1rem 2.7rem; }
  .xx-kicker { font-size: 0.64rem; letter-spacing: 0.13em; }
  .xx-hero h1 { max-width: 100%; font-size: clamp(2.35rem, 11.6vw, 4rem); line-height: 1.08; }
  .xx-deck { font-size: 0.96rem; line-height: 1.65; }
  .xx-status { font-size: 0.7rem; }
  .xx-view-counter { width: 100%; max-width: 100%; padding: 0.68rem 0.8rem !important; }
  .xx-method { padding: 4.3rem 1rem; }
  .xx-method h2 { font-size: clamp(2rem, 9.5vw, 3.2rem); }
  .xx-method-inner > div:first-child > p { font-size: 0.96rem; }
  .xx-craft-note { padding: 1rem; }
  .xx-principle { padding: 3.3rem 1rem; }
  .xx-principle::before, .xx-principle::after { display: none; }
  .xx-wrap, .xx-ending-grid { grid-template-columns: 1fr; }
  .xx-chapter { min-height: auto; padding: 4.2rem 1rem; }
  .xx-chapter:nth-of-type(2n) .xx-art { order: 0; }
  .xx-art img { aspect-ratio: 16 / 11; }
  .xx-copy h2 { font-size: clamp(2rem, 9.5vw, 3.15rem); }
  .xx-ending { padding: 5rem 1rem; }
  .xx-ending-grid { gap: 2.4rem; }
  .xx-ending h2 { font-size: clamp(2.2rem, 10vw, 3.5rem); }
  html[lang="en"] .xx-hero h1 { font-size: clamp(2.25rem, 10.7vw, 3.7rem); line-height: 1.04; }
  html[lang="en"] .xx-method h2 { font-size: clamp(1.9rem, 9vw, 3rem); }
  html[lang="ja"] .xx-hero h1 { font-size: clamp(2.08rem, 9.5vw, 3.4rem); line-height: 1.2; }
  html[lang="ja"] .xx-copy h2 { font-size: clamp(1.92rem, 8.7vw, 3rem); }
}
@media (max-width: 430px) {
  .xx-brand { max-width: 8rem; white-space: normal; line-height: 1.25; }
  .xx-navlinks a { padding: 0.32rem 0.34rem; }
  .xx-hero-copy { padding-top: 7rem; }
  .xx-hero h1 br { display: none; }
  .xx-status { align-items: flex-start; }
  .xx-method-grid p { font-size: 0.86rem; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .xx-status i, .xx-hero img, .xx-hero-copy { animation: auto ease 0s 1 normal none running none; }
  .xx-progress { display: none; }
  .xx-art img, .xx-ending img, .xx-petals span { transition: none !important; }
}
.xx-sources { padding: 5.5rem 1.3rem; background: rgb(220, 225, 223); color: var(--xx-ink); border-top: 1px solid rgba(38, 61, 72, 0.14); }
.xx-sources-inner { max-width: 1180px; margin: auto; }
.xx-sources h2 { margin: 0.55rem 0px 0.8rem; font-size: clamp(2rem, 4.2vw, 3.7rem); line-height: 1.15; }
.xx-sources-inner > p { max-width: 900px; }
.xx-source-links { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 1px; margin-top: 2rem; background: rgba(38, 61, 72, 0.22); border: 1px solid rgba(38, 61, 72, 0.22); }
.xx-source-links a { display: flex; min-height: 150px; flex-direction: column; padding: 1.25rem; background: rgb(244, 238, 227); text-decoration: none; transition: background 0.25s, transform 0.25s; }
.xx-source-links a:hover, .xx-source-links a:focus-visible { background: rgb(255, 249, 238); transform: translateY(-3px); outline: 2px solid var(--xx-gold); outline-offset: -2px; }
.xx-source-links small { font: 700 0.68rem system-ui, sans-serif; letter-spacing: 0.12em; color: var(--xx-rose); text-transform: uppercase; }
.xx-source-links strong { margin: 0.55rem 0px; color: var(--xx-blue); line-height: 1.5; }
.xx-source-links span { margin-top: auto; font: 600 0.72rem system-ui, sans-serif; color: rgb(104, 114, 118); }
html[lang="zh-Hans"] .xx-source-links small, html[lang="zh-Hans"] .xx-source-links span { font-family: "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif; }
html[lang="en"] .xx-sources h2 { hyphens: auto; overflow-wrap: anywhere; }
html[lang="ja"] .xx-sources h2 { line-break: strict; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .xx-source-links { grid-template-columns: 1fr; }
  .xx-source-links a { min-height: 0px; }
}
@media (max-width: 780px) {
  .xx-sources { padding: 4.5rem 1rem; }
  .xx-sources h2 { font-size: clamp(2rem, 9vw, 3rem); }
}
.xx-page { --xx-indigo: #142d35; --xx-indigo-2: #1d3d46; --xx-moon: #f4efe4; --xx-cinnabar: #9f4a45; --xx-tea: #725c4c; --xx-rattan: #c49a5a; --xx-tenghuang: #d2aa55; --xx-lotus-gray: #8f7f87; --xx-malachite: #516e65; background-color: var(--xx-moon); background-image: radial-gradient(circle at 12% 18%, rgba(159, 74, 69, 0.043), transparent 24%), linear-gradient(90deg, rgba(20, 45, 53, 0.02) 1px, transparent 1px); background-size: auto, 28px 28px; }
.xx-scale-line { width: fit-content; max-width: min(760px, 92vw); margin: 1rem 0px 0px; padding: 0.55rem 0.85rem; border-left: 3px solid var(--xx-tenghuang); background: rgba(7, 22, 27, 0.42); color: rgb(247, 223, 173); font-size: clamp(0.88rem, 1.5vw, 1.08rem); letter-spacing: 0.04em; }
.xx-hero-intro { max-width: 750px; color: rgb(230, 226, 218); font-size: 0.96rem; line-height: 1.82; }
.xx-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem; margin-top: 1rem; }
.xx-case-jump { display: inline-flex; align-items: center; gap: 0.65rem; min-height: 44px; margin-top: 1rem; padding: 0.62rem 1rem; border: 1px solid rgba(240, 207, 145, 0.7); background: rgb(240, 207, 145); font: 800 0.78rem / 1.35 system-ui, sans-serif; letter-spacing: 0.035em; text-decoration: none; box-shadow: rgba(7, 22, 27, 0.28) 0.4rem 0.4rem 0px; transition: background 0.2s, color 0.2s, transform 0.2s; color: rgb(20, 45, 53) !important; }
.xx-case-jump span { font-size: 1rem; line-height: 1; }
.xx-case-jump:hover, .xx-case-jump:focus-visible { background: var(--xx-cinnabar); outline: rgb(255, 255, 255) solid 2px; outline-offset: 3px; transform: translateY(-2px); color: rgb(255, 255, 255) !important; }
.xx-audio-toggle, .xx-replay { min-height: 44px; border: 1px solid rgba(240, 207, 145, 0.55); background: rgba(9, 28, 34, 0.72); color: rgb(255, 241, 207); padding: 0.62rem 0.9rem; font: 700 0.76rem / 1.35 system-ui, sans-serif; letter-spacing: 0.025em; cursor: pointer; transition: background 0.25s, border-color 0.25s, transform 0.25s; }
.xx-audio-toggle { display: inline-flex; align-items: center; gap: 0.55rem; }
.xx-audio-toggle span { font-size: 1rem; }
.xx-audio-toggle b { font: inherit; }
.xx-audio-toggle:hover, .xx-audio-toggle:focus-visible, .xx-replay:hover, .xx-replay:focus-visible { background: rgba(159, 74, 69, 0.82); border-color: rgb(245, 220, 162); outline: none; transform: translateY(-2px); }
.xx-audio-toggle[aria-pressed="true"] { background: rgba(81, 110, 101, 0.9); border-color: rgb(205, 224, 206); }
.xx-audio-state { font: 500 0.7rem / 1.5 system-ui, sans-serif; color: rgb(215, 212, 204); }
.xx-opening-frame, .xx-opera-stage { position: absolute; inset: 0px; z-index: 1; pointer-events: none; overflow: hidden; }
.xx-opening-frame { z-index: 2; }
.xx-stage-beam { position: absolute; z-index: 4; inset: 4.2rem 0px auto; height: clamp(22px, 4vw, 54px); background: linear-gradient(rgb(59, 41, 35), rgb(23, 25, 24) 34%, rgb(107, 73, 52) 38%, rgb(23, 25, 24) 52%, rgb(155, 108, 62) 55%, rgb(36, 28, 25) 62%); border-block: 1px solid rgba(225, 177, 89, 0.6); box-shadow: rgba(0, 0, 0, 0.62) 0px 0.7rem 2rem; }
.xx-stage-beam::after { content: ""; position: absolute; inset: 20% 3%; background: repeating-linear-gradient(90deg, transparent 0px, transparent 7%, rgba(212, 170, 85, 0.45) 7.4%, rgba(212, 170, 85, 0.45) 7.8%, transparent 8.2%, transparent 13%); opacity: 0.75; }
.xx-stage-column { position: absolute; z-index: 4; top: 4.2rem; bottom: 0px; width: clamp(20px, 4.2vw, 64px); background: linear-gradient(90deg, rgb(21, 24, 23), rgb(91, 59, 43) 35%, rgb(178, 125, 67) 50%, rgb(43, 33, 29) 66%, rgb(16, 20, 19)); border-inline: 1px solid rgba(231, 188, 101, 0.48); box-shadow: rgba(0, 0, 0, 0.52) 0px 0px 1.2rem; }
.xx-stage-column.is-left { left: 0px; }
.xx-stage-column.is-right { right: 0px; }
.xx-curtain { position: absolute; z-index: 3; top: 4.2rem; bottom: 0px; width: 51%; background: linear-gradient(90deg, rgb(11, 23, 27), rgb(25, 60, 70) 18%, rgb(13, 34, 41) 33%, rgb(36, 77, 86) 49%, rgb(16, 40, 49) 65%, rgb(27, 63, 72) 82%, rgb(8, 22, 27)); box-shadow: rgba(212, 170, 85, 0.22) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.62) 0px 0px 2rem; transform-origin: center top; }
.xx-curtain::after { content: ""; position: absolute; inset: 0px; background: radial-gradient(at 50% 12%, rgba(210, 170, 85, 0.18), transparent 38%), repeating-linear-gradient(90deg, transparent 0px, transparent 12%, rgba(244, 239, 228, 0.035) 12.5%, rgba(244, 239, 228, 0.035) 13.4%); mix-blend-mode: screen; }
.xx-curtain.is-left { left: 0px; clip-path: polygon(0px 0px, 100% 0px, 92% 100%, 0px 100%); }
.xx-curtain.is-right { right: 0px; clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 8% 100%); }
.xx-scene.is-active .xx-curtain.is-left { animation: 2.4s cubic-bezier(0.65, 0, 0.18, 1) 0.2s 1 normal both running xxCurtainLeft; }
.xx-scene.is-active .xx-curtain.is-right { animation: 2.4s cubic-bezier(0.65, 0, 0.18, 1) 0.2s 1 normal both running xxCurtainRight; }
.xx-opening-frame .xx-curtain { opacity: 0.93; }
.xx-opera-sleeve { position: absolute; z-index: 3; top: 23%; width: 30%; height: 15%; border: 1px solid rgba(218, 178, 94, 0.42); background: linear-gradient(100deg, rgba(244, 239, 228, 0.08), rgba(244, 239, 228, 0.62), rgba(20, 45, 53, 0.5)); filter: drop-shadow(rgba(0, 0, 0, 0.4) 0px 1rem 1.3rem); opacity: 0; }
.xx-opera-sleeve.is-left { left: -8%; clip-path: polygon(0px 22%, 100% 0px, 72% 100%, 8% 78%); }
.xx-opera-sleeve.is-right { right: -8%; transform: scaleX(-1); clip-path: polygon(0px 22%, 100% 0px, 72% 100%, 8% 78%); }
.xx-scene.is-active .xx-opera-sleeve.is-left { animation: 3.6s ease-in-out 1.6s 1 normal both running xxSleeveLeft; }
.xx-scene.is-active .xx-opera-sleeve.is-right { animation: 3.6s ease-in-out 1.8s 1 normal both running xxSleeveRight; }
.xx-opening-lamp { position: absolute; z-index: 4; left: calc(29% + var(--lamp)*10.5%); bottom: 26%; width: 9px; height: 17px; border: 1px solid rgb(232, 197, 118); background: rgb(255, 233, 173); box-shadow: rgb(245, 200, 110) 0px 0px 8px, rgba(245, 200, 110, 0.6) 0px 0px 28px; opacity: 0; }
.xx-scene.is-active .xx-opening-lamp { animation: xxLampIn 1.1s calc(2.2s + var(--lamp)*.42s) ease-out both; }
.xx-prologue { position: relative; overflow: hidden; padding: clamp(5rem, 10vw, 9rem) 1.3rem; background: rgb(232, 221, 204); color: rgb(45, 52, 52); }
.xx-prologue::before { content: ""; position: absolute; inset: 0px; background: radial-gradient(circle at 82% 24%, rgba(159, 74, 69, 0.14), transparent 20%), repeating-linear-gradient(135deg, rgba(20, 45, 53, 0.035) 0px, rgba(20, 45, 53, 0.035) 1px, transparent 1px, transparent 18px); mask-image: linear-gradient(90deg, transparent, rgb(0, 0, 0) 35%, rgb(0, 0, 0)); }
.xx-prologue-inner { position: relative; max-width: 1040px; margin: auto; }
.xx-prologue h2 { max-width: 850px; margin: 0.65rem 0px 1.5rem; color: var(--xx-indigo); font-size: clamp(2.2rem, 5.4vw, 4.8rem); line-height: 1.14; }
.xx-prologue-copy { max-width: 820px; margin-left: auto; padding: clamp(1.2rem, 4vw, 3rem); border: 1px solid rgba(114, 92, 76, 0.25); background: rgba(244, 239, 228, 0.68); box-shadow: rgba(20, 45, 53, 0.043) 1.5rem 1.5rem 0px; }
.xx-prologue-copy p { font-size: 1.05rem; }
.xx-page .xx-chapter { background: var(--xx-moon); }
.xx-page .xx-chapter .xx-art { order: 0; }
.xx-page .xx-chapter.is-reversed { background: rgb(233, 223, 210); }
.xx-page .xx-chapter.is-reversed .xx-art { order: 2; }
.xx-copy { min-width: 0px; }
.xx-copy > p { max-width: 66ch; }
.xx-dialect-pair { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 1rem; margin: 1.7rem 0px; }
.xx-proverb { position: relative; margin: 0px; padding: 1.15rem 1.2rem 1.2rem; border: 1px solid rgba(20, 45, 53, 0.17); background: rgba(255, 252, 245, 0.75); box-shadow: rgba(20, 45, 53, 0.06) 0px 0.55rem 1.4rem; overflow: hidden; }
.xx-proverb::after { content: ""; position: absolute; right: -2.5rem; bottom: -2.5rem; width: 6rem; height: 6rem; border: 1px solid rgba(210, 170, 85, 0.22); transform: rotate(45deg); }
.xx-proverb.is-minnan { border-top: 3px solid var(--xx-cinnabar); }
.xx-proverb.is-hakka { border-top: 3px solid var(--xx-malachite); background: linear-gradient(145deg, rgba(255, 252, 245, 0.92), rgba(43, 73, 80, 0.07)); }
.xx-proverb > span { font: 700 0.68rem / 1.4 system-ui, sans-serif; letter-spacing: 0.12em; color: var(--xx-tea); }
.xx-proverb blockquote { margin: 0.65rem 0px 0.8rem; color: var(--xx-indigo); font-size: clamp(1.08rem, 1.8vw, 1.28rem); font-weight: 700; line-height: 1.65; text-wrap: balance; }
.xx-proverb p { position: relative; margin: 0px; line-height: 1.75; color: rgb(79, 85, 83); font-size: 0.86rem !important; }
.xx-proverb b { color: var(--xx-cinnabar); }
html[lang="zh-Hans"] .xx-proverb blockquote { font-family: "Noto Serif TC", "Source Han Serif TC", PMingLiU, serif; font-synthesis: none; }
.xx-interlude { position: relative; min-height: clamp(560px, 78svh, 920px); display: grid; align-items: end; overflow: hidden; background: rgb(7, 23, 28); color: rgb(255, 255, 255); isolation: isolate; }
.xx-interlude::before { content: ""; position: absolute; z-index: 1; inset: 0px; background: linear-gradient(90deg, rgba(7, 20, 24, 0.9), rgba(7, 20, 24, 0.32) 54%, rgba(7, 20, 24, 0.62)), linear-gradient(0deg, rgba(7, 20, 24, 0.96), transparent 60%); }
.xx-interlude::after { content: ""; position: absolute; z-index: 2; inset: 4.2rem clamp(20px, 4.2vw, 64px) 0px; border: 1px solid rgba(210, 170, 85, 0.35); box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 5rem inset; pointer-events: none; }
.xx-interlude-bg { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; filter: saturate(0.68) brightness(0.56) contrast(1.07); transform: scale(1.1) translate3d(-1.5%, 1.5%, 0px); }
.xx-scene.is-active .xx-interlude-bg { animation: 9s cubic-bezier(0.2, 0.65, 0.2, 1) 0s 1 normal both running xxDolly; }
.xx-interlude-copy { position: relative; z-index: 6; width: min(1180px, 100%); margin: auto; padding: 7rem 1.5rem 4rem; opacity: 0; transform: translateY(28px); }
.xx-scene.is-active .xx-interlude-copy { animation: 1.2s ease-out 2.15s 1 normal both running xxStageCopy; }
.xx-interlude-copy small { font: 700 0.72rem / 1.4 system-ui, sans-serif; letter-spacing: 0.18em; color: rgb(240, 207, 145); text-transform: uppercase; }
.xx-interlude-copy h2 { max-width: 850px; margin: 0.7rem 0px 1rem; font-size: clamp(2.25rem, 5.7vw, 5rem); line-height: 1.12; text-wrap: balance; text-shadow: rgba(0, 0, 0, 0.62) 0px 0.3rem 1.6rem; }
.xx-interlude-copy p { max-width: 720px; color: rgb(230, 225, 216); font-size: 1rem; }
.xx-interlude-copy .xx-replay { margin-top: 0.7rem; }
.xx-puppet { --xx-entry: 0; --xx-drift: 0; --xx-turn: 0deg; --xx-settle-turn: 0deg; --xx-accent-turn: 0deg; --xx-delay: 1.45s; position: absolute; z-index: 2; bottom: -2%; display: block; width: auto; height: min(69svh, 740px); max-width: min(46vw, 660px); object-fit: contain; object-position: center bottom; opacity: 0; filter: drop-shadow(rgba(0, 0, 0, 0.68) 0px 1.5rem 1.35rem) saturate(0.92) brightness(0.82); transform-origin: 50% 88%; will-change: transform, opacity, filter; }
.xx-puppet.is-left { --xx-entry: -42vw; --xx-drift: -2.4vw; --xx-turn: -5deg; --xx-settle-turn: -1deg; --xx-accent-turn: 2deg; --xx-delay: 1.35s; left: clamp(1rem, 4vw, 5rem); }
.xx-puppet.is-right { --xx-entry: 42vw; --xx-drift: 2.4vw; --xx-turn: 5deg; --xx-settle-turn: 1deg; --xx-accent-turn: -2deg; --xx-delay: 1.62s; right: clamp(1rem, 4vw, 5rem); }
.xx-puppet.is-solo { height: min(73svh, 790px); max-width: min(54vw, 760px); }
.xx-puppet--messenger { height: min(67svh, 715px); }
.xx-puppet--examiner { height: min(72svh, 780px); }
.xx-puppet--guide { height: min(70svh, 750px); }
.xx-scene.is-active .xx-puppet { animation: xxPuppetEnter 7.4s var(--xx-delay) cubic-bezier(.2,.72,.24,1) both; }
.xx-scene.is-active .xx-puppet.xx-motion-point { animation-name: xxPuppetPoint; }
.xx-scene.is-active .xx-puppet.xx-motion-receive { animation-name: xxPuppetReceive; }
.xx-scene.is-active .xx-puppet.xx-motion-weigh { animation-name: xxPuppetWeigh; }
.xx-scene.is-active .xx-puppet.xx-motion-thread { animation-name: xxPuppetThread; }
.xx-scene.is-active .xx-puppet.xx-motion-pause { animation-name: xxPuppetPause; }
.xx-scene.is-active .xx-puppet.xx-motion-finale { animation-name: xxPuppetFinale; }
.xx-gold-thread, .xx-indigo-stitch { position: absolute; z-index: 2; left: 17%; right: 17%; top: 54%; height: 2px; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, rgb(210, 170, 85) 0px, rgb(210, 170, 85) 74%, transparent 74%); filter: drop-shadow(rgb(210, 170, 85) 0px 0px 6px); }
.xx-indigo-stitch { height: 4px; background: repeating-linear-gradient(90deg, rgb(225, 190, 112) 0px, rgb(225, 190, 112) 12px, transparent 12px, transparent 23px); }
.xx-scene.is-active .xx-gold-thread, .xx-scene.is-active .xx-indigo-stitch { animation: 3.5s ease-out 2.2s 1 normal both running xxThread; }
.xx-seal { position: absolute; z-index: 2; left: 50%; top: 42%; width: 90px; aspect-ratio: 1 / 1; border: 5px double rgba(180, 65, 58, 0.82); transform: translate(-50%, -180%) rotate(-8deg); opacity: 0; }
.xx-scene.is-active .xx-seal { animation: 1.3s cubic-bezier(0.2, 0.85, 0.25, 1) 2.6s 1 normal both running xxSeal; }
.xx-scale { position: absolute; z-index: 2; left: 50%; top: 45%; width: min(38vw, 420px); height: 4px; background: rgb(210, 170, 85); transform: translateX(-50%) rotate(-7deg); opacity: 0; box-shadow: rgb(210, 170, 85) -150px 55px 0px -1px, rgb(210, 170, 85) 150px 19px 0px -1px; }
.xx-scale::before { content: ""; position: absolute; left: 50%; top: -70px; width: 2px; height: 145px; background: rgb(210, 170, 85); }
.xx-scene.is-active .xx-scale { animation: 4s ease-in-out 2.1s 1 normal both running xxScale; }
.xx-clock-hand { position: absolute; z-index: 2; left: 50%; top: 35%; width: 3px; height: 135px; background: rgb(227, 194, 124); transform-origin: 50% 0px; opacity: 0; }
.xx-scene.is-active .xx-clock-hand { animation: 3.8s cubic-bezier(0.4, 0, 0.5, 1) 1.8s 1 normal both running xxClock; }
.xx-mosaic-piece { position: absolute; z-index: 2; width: 58px; height: 58px; background: linear-gradient(135deg, rgb(159, 74, 69), rgb(210, 170, 85) 42%, rgb(81, 110, 101) 43%, rgb(81, 110, 101) 64%, rgb(230, 216, 189) 65%); clip-path: polygon(50% 0px, 100% 38%, 79% 100%, 22% 88%, 0px 33%); opacity: 0; }
.xx-mosaic-piece.p1 { left: 34%; top: 41%; }
.xx-mosaic-piece.p2 { left: 42%; top: 49%; }
.xx-mosaic-piece.p3 { left: 50%; top: 39%; }
.xx-mosaic-piece.p4 { left: 58%; top: 48%; }
.xx-mosaic-piece.p5 { left: 48%; top: 55%; background: transparent; border: 1px dashed rgb(210, 170, 85); }
.xx-scene.is-active .xx-mosaic-piece { animation: xxPiece 1s calc(1.4s + var(--piece,0)*.35s) ease-out both; }
.xx-mosaic-piece.p1 { --piece: 0; }
.xx-mosaic-piece.p2 { --piece: 1; }
.xx-mosaic-piece.p3 { --piece: 2; }
.xx-mosaic-piece.p4 { --piece: 3; }
.xx-mosaic-piece.p5 { --piece: 4; }
.xx-court-door { position: absolute; z-index: 2; left: 50%; top: 27%; width: 110px; height: 150px; border: 4px double rgb(199, 158, 86); background: rgba(5, 15, 18, 0.74); transform: translateX(-50%); box-shadow: rgba(20, 45, 53, 0.62) 0px 0px 0px 18px, rgba(210, 170, 85, 0.3) 0px 0px 45px; opacity: 0; }
.xx-scene.is-active .xx-court-door { animation: 3.2s ease-out 2.3s 1 normal both running xxDoor; }
.xx-finale-transition .xx-curtain.is-left, .xx-finale-transition .xx-curtain.is-right { animation-direction: reverse !important; animation-fill-mode: both !important; }
.xx-finale-lamp { position: absolute; z-index: 5; left: 50%; bottom: 28%; width: 18px; height: 33px; border: 2px solid rgb(240, 207, 145); background: rgb(255, 229, 164); box-shadow: rgb(244, 197, 104) 0px 0px 15px, rgba(244, 197, 104, 0.66) 0px 0px 60px; transform: translateX(-50%); opacity: 0; }
.xx-scene.is-active .xx-finale-lamp { animation: 6.5s ease-in-out 1.2s 1 normal both running xxFinalLamp; }
.xx-language-sources { margin-top: 2rem; padding: 1.2rem 1.35rem; border-left: 3px solid var(--xx-malachite); background: rgba(255, 255, 255, 0.48); }
.xx-language-sources h3 { margin: 0px 0px 0.45rem; color: var(--xx-indigo); }
.xx-language-sources p { margin: 0px; font-size: 0.86rem; line-height: 1.8; }
.xx-language-sources a { text-decoration-color: rgba(159, 74, 69, 0.55); text-underline-offset: 0.16em; }
.xx-ending-line { margin: 1.4rem 0px; color: rgb(240, 207, 145); font-size: clamp(1.15rem, 2.1vw, 1.5rem); font-weight: 700; }
@keyframes xxCurtainLeft { 
  0% { transform: translateX(0px) scaleX(1); }
  100% { transform: translateX(-72%) scaleX(0.62); }
}
@keyframes xxCurtainRight { 
  0% { transform: translateX(0px) scaleX(1); }
  100% { transform: translateX(72%) scaleX(0.62); }
}
@keyframes xxSleeveLeft { 
  0% { opacity: 0; transform: translateX(-30%) rotate(-10deg); }
  35%, 72% { opacity: 0.82; transform: translateX(26%) rotate(4deg); }
  100% { opacity: 0; transform: translateX(48%) rotate(10deg); }
}
@keyframes xxSleeveRight { 
  0% { opacity: 0; transform: scaleX(-1) translateX(-30%) rotate(-10deg); }
  35%, 72% { opacity: 0.82; transform: scaleX(-1) translateX(26%) rotate(4deg); }
  100% { opacity: 0; transform: scaleX(-1) translateX(48%) rotate(10deg); }
}
@keyframes xxLampIn { 
  0% { opacity: 0; transform: translateY(15px) scale(0.7); }
  70% { opacity: 1; transform: translateY(0px) scale(1.15); }
  100% { opacity: 0.92; transform: scale(1); }
}
@keyframes xxDolly { 
  0% { transform: scale(1.1) translate3d(-1.5%, 1.5%, 0px); }
  100% { transform: scale(1.01) translate3d(0px, 0px, 0px); }
}
@keyframes xxStageCopy { 
  100% { opacity: 1; transform: none; }
}
@keyframes xxPuppetEnter { 
  0% { opacity: 0; transform: translate3d(var(--xx-entry),8%,0) rotate(var(--xx-turn)) scale(.94); filter: drop-shadow(rgba(0, 0, 0, 0.68) 0px 1.5rem 1.35rem) saturate(0.72) brightness(0.58); }
  28% { opacity: 0.9; transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(1); filter: drop-shadow(rgba(0, 0, 0, 0.68) 0px 1.5rem 1.35rem) saturate(0.98) brightness(0.9); }
  68% { opacity: 0.88; transform: translate3d(0,-1.2%,0) rotate(var(--xx-accent-turn)) scale(1.015); }
  100% { opacity: 0.76; transform: translate3d(var(--xx-drift),0,0) rotate(var(--xx-settle-turn)) scale(1); }
}
@keyframes xxPuppetPoint { 
  0% { opacity: 0; transform: translate3d(var(--xx-entry),7%,0) rotate(var(--xx-turn)) scale(.93); }
  26% { opacity: 0.92; transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(1); }
  48% { transform: translate3d(0,-1.8%,0) rotate(var(--xx-accent-turn)) scale(1.025); }
  72% { opacity: 0.9; transform: translate3d(0px, -0.7%, 0px) rotate(0deg) scale(1.01); }
  100% { opacity: 0.78; transform: translate3d(var(--xx-drift),0,0) rotate(var(--xx-settle-turn)) scale(1); }
}
@keyframes xxPuppetReceive { 
  0% { opacity: 0; transform: translate3d(var(--xx-entry),5%,0) rotate(var(--xx-turn)) scale(.94); }
  30% { opacity: 0.9; transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(1); }
  52% { transform: translate3d(0,-2.2%,0) rotate(var(--xx-accent-turn)) scale(1.02); }
  78% { opacity: 0.9; transform: translate3d(0px, -0.8%, 0px) rotate(0deg) scale(1.01); }
  100% { opacity: 0.76; transform: translate3d(var(--xx-drift),0,0) rotate(var(--xx-settle-turn)) scale(1); }
}
@keyframes xxPuppetWeigh { 
  0% { opacity: 0; transform: translate3d(var(--xx-entry),10%,0) rotate(var(--xx-turn)) scale(.94); }
  30% { opacity: 0.92; transform: translate3d(0,0,0) rotate(var(--xx-settle-turn)) scale(1); }
  48% { transform: translate3d(0,-1.2%,0) rotate(var(--xx-accent-turn)) scale(1.01); }
  66% { transform: translate3d(0,-.5%,0) rotate(var(--xx-settle-turn)) scale(1.01); }
  100% { opacity: 0.79; transform: translate3d(var(--xx-drift),0,0) rotate(.45deg) scale(1); }
}
@keyframes xxPuppetThread { 
  0% { opacity: 0; transform: translate3d(var(--xx-entry),6%,0) rotate(var(--xx-turn)) scale(.93); }
  29% { opacity: 0.92; transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(1); }
  54% { transform: translate3d(0,-1.6%,0) rotate(var(--xx-accent-turn)) scale(1.018); }
  75% { opacity: 0.9; transform: translate3d(0px, -0.6%, 0px) rotate(0deg) scale(1.01); }
  100% { opacity: 0.77; transform: translate3d(var(--xx-drift),0,0) rotate(var(--xx-settle-turn)) scale(1); }
}
@keyframes xxPuppetPause { 
  0% { opacity: 0; transform: translate3d(var(--xx-entry),12%,0) rotate(var(--xx-turn)) scale(.92); }
  32% { opacity: 0.9; transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(1); }
  58%, 76% { opacity: 0.88; transform: translate3d(0px, -1%, 0px) rotate(0deg) scale(1.01); }
  100% { opacity: 0.74; transform: translate3d(var(--xx-drift),0,0) rotate(var(--xx-settle-turn)) scale(1); }
}
@keyframes xxPuppetFinale { 
  0% { opacity: 0; transform: translate3d(var(--xx-entry),7%,0) rotate(var(--xx-turn)) scale(.94); }
  30%, 68% { opacity: 0.86; transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(1); }
  100% { opacity: 0.2; transform: translate3d(var(--xx-entry),5%,0) rotate(var(--xx-turn)) scale(.92); }
}
@keyframes xxThread { 
  100% { transform: scaleX(1); }
}
@keyframes xxSeal { 
  0% { opacity: 0; transform: translate(-50%, -180%) rotate(-8deg); }
  72% { opacity: 0.92; transform: translate(-50%, 0px) rotate(-8deg); }
  100% { opacity: 0.5; transform: translate(-50%, -4%) rotate(-8deg); }
}
@keyframes xxScale { 
  0% { opacity: 0; transform: translateX(-50%) rotate(-7deg); }
  35% { opacity: 0.85; }
  65% { transform: translateX(-50%) rotate(6deg); }
  100% { opacity: 0.58; transform: translateX(-50%) rotate(-2deg); }
}
@keyframes xxClock { 
  0% { opacity: 0; transform: rotate(-22deg); }
  20% { opacity: 0.8; }
  42% { transform: rotate(22deg); }
  64% { transform: rotate(-16deg); }
  78%, 100% { opacity: 0.5; transform: rotate(5deg); }
}
@keyframes xxPiece { 
  0% { opacity: 0; transform: translateY(-90px) rotate(-45deg); }
  75% { opacity: 0.9; transform: translateY(5px) rotate(3deg); }
  100% { opacity: 0.72; transform: none; }
}
@keyframes xxDoor { 
  0% { opacity: 0; filter: brightness(0.3); }
  100% { opacity: 0.75; filter: brightness(1); }
}
@keyframes xxFinalLamp { 
  0% { opacity: 0; transform: translateX(-50%) scale(0.6); }
  30%, 80% { opacity: 1; transform: translateX(-50%) scale(1.08); }
  100% { opacity: 0.72; transform: translateX(-50%) scale(1); }
}
html[lang="en"] .xx-interlude-copy h2 { max-width: 950px; font-size: clamp(2rem, 5vw, 4.45rem); hyphens: auto; overflow-wrap: anywhere; }
html[lang="en"] .xx-proverb p { line-height: 1.68; }
html[lang="ja"] .xx-interlude-copy h2 { max-width: 1000px; font-size: clamp(2rem, 4.8vw, 4.1rem); line-break: strict; word-break: normal; }
html[lang="ja"] .xx-proverb blockquote, html[lang="ja"] .xx-proverb p { line-break: strict; word-break: normal; }
@media (max-width: 900px) {
  .xx-dialect-pair { grid-template-columns: 1fr; }
  .xx-proverb { padding: 1rem; }
}
@media (max-width: 780px) {
  .xx-scale-line { font-size: 0.8rem; line-height: 1.6; }
  .xx-hero-intro { font-size: 0.88rem; line-height: 1.72; }
  .xx-controls { align-items: stretch; }
  .xx-audio-toggle { flex: 1 1 100%; justify-content: center; }
  .xx-controls > .xx-replay { flex: 1 1 0%; }
  .xx-audio-state { align-self: center; }
  .xx-stage-beam { top: 3.8rem; }
  .xx-stage-column, .xx-curtain { top: 3.8rem; }
  .xx-opening-lamp { left: calc(22% + var(--lamp)*14%); bottom: 31%; }
  .xx-prologue { padding: 4.6rem 1rem; }
  .xx-prologue h2 { font-size: clamp(2rem, 10vw, 3.6rem); }
  .xx-prologue-copy { padding: 1.15rem; box-shadow: rgba(20, 45, 53, 0.043) 0.75rem 0.75rem 0px; }
  .xx-prologue-copy p { font-size: 0.94rem; }
  .xx-page .xx-chapter.is-reversed .xx-art { order: 0; }
  .xx-interlude { min-height: max(760px, 100svh); }
  .xx-interlude::after { inset: 3.8rem 18px 0px; }
  .xx-interlude-copy { padding: clamp(28rem, 61svh, 34rem) 1.15rem 2.8rem; }
  .xx-interlude-copy h2 { font-size: clamp(2rem, 10vw, 3.45rem); }
  .xx-interlude-copy p { font-size: 0.88rem; }
  .xx-puppet { top: 4.7rem; bottom: auto; height: min(46svh, 410px); max-width: 72vw; filter: drop-shadow(rgba(0, 0, 0, 0.72) 0px 1rem 1rem) saturate(0.92) brightness(0.8); }
  .xx-puppet.is-left { left: -12%; }
  .xx-puppet.is-right { right: -12%; }
  .xx-puppet.is-solo { height: min(53svh, 470px); max-width: 88vw; }
  .xx-puppet.is-solo.is-left { left: 1%; }
  .xx-puppet.is-solo.is-right { right: 1%; }
  .xx-mosaic-piece { width: 42px; height: 42px; }
  .xx-court-door { width: 72px; height: 105px; }
}
@media (max-width: 430px) {
  .xx-hero-copy { padding-bottom: 1.5rem; }
  .xx-hero-intro { display: none; }
  .xx-controls .xx-replay { padding-inline: 0.65rem; }
  .xx-audio-state { width: 100%; text-align: center; }
  .xx-opening-frame .xx-opera-sleeve { display: none; }
  .xx-proverb blockquote { font-size: 1.06rem; line-height: 1.72; }
  .xx-interlude { min-height: 780px; }
  .xx-interlude-copy { padding-top: 29rem; }
  .xx-puppet { top: 4.4rem; height: 360px; max-width: 78vw; }
  .xx-puppet.is-left { left: -20%; }
  .xx-puppet.is-right { right: -20%; }
  .xx-puppet.is-solo { height: 405px; max-width: 94vw; }
  .xx-puppet.is-solo.is-left { left: -4%; }
  .xx-puppet.is-solo.is-right { right: -4%; }
  .xx-interlude-copy h2 br { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .xx-scene * { animation: auto ease 0s 1 normal none running none !important; transition: none !important; }
  .xx-curtain.is-left { transform: translateX(-72%) scaleX(0.62); }
  .xx-curtain.is-right { transform: translateX(72%) scaleX(0.62); }
  .xx-interlude-bg { transform: none; }
  .xx-interlude-copy { opacity: 1; transform: none; }
  .xx-opening-lamp, .xx-finale-lamp { opacity: 0.82; }
  .xx-puppet { opacity: 0.78; transform: translate3d(0px, 0px, 0px) rotate(0deg) scale(1); filter: drop-shadow(rgba(0, 0, 0, 0.6) 0px 1rem 1rem) saturate(0.92) brightness(0.84); }
  .xx-audio-toggle, .xx-replay { display: none; }
}
.xx-case-record { position: relative; isolation: isolate; overflow: hidden; padding: clamp(5rem, 9vw, 8rem) 1.3rem; background: radial-gradient(circle at 88% 7%, rgba(159, 74, 69, 0.14), transparent 22rem), radial-gradient(circle at 4% 38%, rgba(81, 110, 101, 0.12), transparent 25rem), rgb(241, 233, 220); color: var(--xx-charcoal); border-block: 1px solid rgba(20, 45, 53, 0.15); }
.xx-case-record::before { content: ""; position: absolute; z-index: -1; inset: 0px; background: linear-gradient(90deg, transparent 0px, transparent 49.7%, rgba(20, 45, 53, 0.024) 49.8%, rgba(20, 45, 53, 0.024) 50.2%, transparent 50.3%), repeating-linear-gradient(135deg, transparent 0px, transparent 20px, rgba(114, 92, 76, 0.027) 20px, rgba(114, 92, 76, 0.027) 21px); mask-image: linear-gradient(90deg, rgb(0, 0, 0), transparent 45%, rgb(0, 0, 0)); pointer-events: none; }
.xx-case-record::after { content: ""; position: absolute; z-index: -1; top: 3.5rem; right: clamp(-7rem, -4vw, -2rem); width: clamp(13rem, 23vw, 22rem); aspect-ratio: 1 / 1; border: 1px solid rgba(159, 74, 69, 0.2); border-radius: 48% 52% 44% 56%; box-shadow: rgba(198, 161, 91, 0.035) 0px 0px 0px 1.2rem, rgba(81, 110, 101, 0.027) 0px 0px 0px 2.4rem; transform: rotate(27deg); pointer-events: none; }
.xx-case-record-inner { position: relative; max-width: 1180px; margin: auto; min-width: 0px; }
.xx-case-record .xx-kicker { color: var(--xx-cinnabar); }
.xx-case-record-head { max-width: 930px; }
.xx-case-record h2 { max-width: 930px; margin: 0.65rem 0px 1.35rem; color: var(--xx-indigo); font-size: clamp(2.25rem, 5.2vw, 4.8rem); line-height: 1.12; text-wrap: balance; }
.xx-content-note, .xx-legal-caution, .xx-policy-note { position: relative; max-width: 920px; margin: 1.4rem 0px; padding: 1.05rem 1.2rem 1.05rem 1.35rem; border-top: 1px solid rgba(20, 45, 53, 0.18); border-right: 1px solid rgba(20, 45, 53, 0.18); border-bottom: 1px solid rgba(20, 45, 53, 0.18); border-image: none; border-left: 4px solid var(--xx-cinnabar); background: rgba(255, 252, 246, 0.7); box-shadow: rgba(20, 45, 53, 0.035) 0.55rem 0.55rem 0px; }
.xx-content-note strong, .xx-legal-caution strong, .xx-policy-note strong { display: block; color: var(--xx-indigo); font-size: 1rem; }
.xx-content-note p, .xx-legal-caution p, .xx-policy-note p { margin: 0.3rem 0px 0px; font-size: 0.9rem; line-height: 1.75; }
.xx-legal-caution { border-left-color: var(--xx-gold); background: rgba(244, 239, 228, 0.88); }
.xx-policy-note { max-width: none; border-left-color: var(--xx-malachite); background: rgba(81, 110, 101, 0.075); }
.xx-case-facts { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 1px; margin: 2.2rem 0px; padding: 1px; background: rgba(20, 45, 53, 0.2); border: 1px solid rgba(20, 45, 53, 0.2); }
.xx-case-facts > div { min-width: 0px; padding: 1.25rem; background: rgba(250, 246, 238, 0.94); }
.xx-case-facts dt, .xx-case-facts small { font: 700 0.66rem / 1.45 system-ui, sans-serif; letter-spacing: 0.1em; }
.xx-case-facts dt { color: var(--xx-cinnabar); text-transform: uppercase; }
.xx-case-facts dd { margin: 0.4rem 0px 0.3rem; color: var(--xx-indigo); font-size: clamp(1.05rem, 1.7vw, 1.3rem); font-weight: 700; line-height: 1.45; }
.xx-case-facts small { display: block; color: rgb(98, 103, 101); font-weight: 500; letter-spacing: 0.02em; }
.xx-case-summary { max-width: 880px; margin: 2rem 0px; }
.xx-case-summary p { font-size: 1.05rem; line-height: 1.9; }
.xx-record-nav { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 1px; margin: 3.2rem 0px 0px; padding: 1px; background: rgba(210, 170, 85, 0.4); border: 1px solid rgba(210, 170, 85, 0.44); }
.xx-record-nav a { min-width: 0px; padding: 0.9rem 0.75rem; background: var(--xx-indigo); color: rgb(247, 238, 220); font: 700 0.78rem / 1.45 system-ui, sans-serif; letter-spacing: 0.035em; text-align: center; text-decoration: none; overflow-wrap: anywhere; transition: background 0.2s, color 0.2s; }
.xx-record-nav a:hover, .xx-record-nav a:focus-visible { background: var(--xx-cinnabar); color: rgb(255, 255, 255); outline: rgb(255, 255, 255) solid 2px; outline-offset: -4px; }
.xx-record-block { padding: clamp(4rem, 7vw, 6.2rem) 0px; border-top: 1px solid rgba(20, 45, 53, 0.18); scroll-margin-top: 5rem; }
.xx-record-nav + .xx-record-block { border-top: 0px; }
.xx-record-block h3 { max-width: 900px; margin: 0.55rem 0px 0.8rem; color: var(--xx-indigo); font-size: clamp(1.8rem, 3.8vw, 3.4rem); line-height: 1.2; text-wrap: balance; }
.xx-block-lede { max-width: 850px; color: rgb(83, 91, 90); font-size: 1rem; }
.xx-timeline { position: relative; list-style: none; margin: 2.6rem 0px 0px; padding: 0px; }
.xx-timeline::before { content: ""; position: absolute; top: 0.45rem; bottom: 0.45rem; left: 190px; width: 1px; background: linear-gradient(var(--xx-cinnabar),var(--xx-gold),var(--xx-malachite)); }
.xx-timeline li { position: relative; display: grid; grid-template-columns: 160px minmax(0px, 1fr); gap: 2.4rem; min-width: 0px; padding: 0px 0px 2.25rem; }
.xx-timeline li::before { content: ""; position: absolute; top: 0.45rem; left: 184px; width: 11px; height: 11px; border: 3px solid rgb(241, 233, 220); border-radius: 50%; background: var(--xx-cinnabar); box-shadow: rgba(20, 45, 53, 0.25) 0px 0px 0px 1px; }
.xx-timeline time { padding-top: 0.05rem; color: var(--xx-indigo); font: 700 0.78rem / 1.55 system-ui, sans-serif; letter-spacing: 0.03em; text-align: right; }
.xx-timeline li > div { min-width: 0px; padding: 0px 0px 1.1rem 1rem; border-bottom: 1px solid rgba(20, 45, 53, 0.1); }
.xx-timeline h4 { margin: 0.6rem 0px 0.3rem; color: var(--xx-indigo); font-size: 1.12rem; line-height: 1.5; }
.xx-timeline p { max-width: 760px; margin: 0px; font-size: 0.94rem; line-height: 1.8; }
.xx-evidence-tag { display: inline-block; max-width: 100%; padding: 0.28rem 0.52rem; border: 1px solid; color: rgb(112, 65, 62); background: rgba(159, 74, 69, 0.06); font: 700 0.64rem / 1.4 system-ui, sans-serif; letter-spacing: 0.065em; text-transform: uppercase; overflow-wrap: anywhere; }
.xx-evidence-tag.is-agency { color: rgb(52, 89, 102); background: rgba(52, 89, 102, 0.06); }
.xx-evidence-tag.is-judicial { color: rgb(54, 89, 78); background: rgba(54, 89, 78, 0.06); }
.xx-evidence-tag.is-policy { color: rgb(118, 93, 39); background: rgba(198, 161, 91, 0.09); }
.xx-evidence-tag.is-unresolved { color: rgb(98, 103, 101); background: rgba(98, 103, 101, 0.04); border-style: dashed; }
.xx-sensitive-details { max-width: 880px; margin: 1rem 0px 0px; border: 1px solid rgba(159, 74, 69, 0.28); background: rgba(255, 252, 246, 0.68); }
.xx-sensitive-details summary { padding: 1rem 1.15rem; color: var(--xx-indigo); font: 700 0.86rem / 1.55 system-ui, sans-serif; cursor: pointer; list-style-position: inside; }
.xx-sensitive-details summary:hover, .xx-sensitive-details summary:focus-visible { background: rgba(159, 74, 69, 0.075); outline: 2px solid var(--xx-cinnabar); outline-offset: -2px; }
.xx-sensitive-details > div { padding: 0px 1.15rem 1.1rem; border-top: 1px solid rgba(159, 74, 69, 0.18); }
.xx-sensitive-details p { margin: 1rem 0px 0px; font-size: 0.9rem; line-height: 1.8; }
.xx-signal-grid { counter-reset: xx-signal 0; display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); gap: 1px; list-style: none; margin: 2.2rem 0px 0px; padding: 1px; background: rgba(20, 45, 53, 0.18); border: 1px solid rgba(20, 45, 53, 0.18); }
.xx-signal-grid li { min-width: 0px; padding: 1.2rem; background: rgba(250, 246, 238, 0.93); }
.xx-signal-grid span, .xx-policy-grid article > span { font: 700 0.68rem / 1 system-ui, sans-serif; letter-spacing: 0.16em; color: var(--xx-cinnabar); }
.xx-signal-grid h4, .xx-policy-grid h4 { margin: 0.65rem 0px 0.4rem; color: var(--xx-indigo); font-size: 1rem; line-height: 1.5; }
.xx-signal-grid p, .xx-policy-grid p { margin: 0px; font-size: 0.86rem; line-height: 1.75; }
.xx-policy-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 1rem; margin: 2.1rem 0px; }
.xx-policy-grid article { position: relative; min-width: 0px; padding: 1.4rem 1.45rem; border: 1px solid rgba(20, 45, 53, 0.16); background: linear-gradient(145deg, rgba(255, 252, 246, 0.94), rgba(81, 110, 101, 0.07)); box-shadow: rgba(20, 45, 53, 0.035) 0.65rem 0.65rem 0px; }
.xx-justice-block { display: grid; grid-template-columns: minmax(0px, 1.45fr) minmax(240px, 0.55fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.xx-justice-block > div:first-child { min-width: 0px; }
.xx-justice-block > div:first-child p { max-width: 720px; }
.xx-justice-status { position: relative; display: flex; flex-direction: column; gap: 0.55rem; min-width: 0px; padding: 1.55rem; border: 1px solid rgba(210, 170, 85, 0.48); background: var(--xx-indigo); color: rgb(244, 239, 228); box-shadow: rgba(159, 74, 69, 0.1) 1rem 1rem 0px; }
.xx-justice-status::before { content: ""; position: absolute; inset: 0.45rem; border: 1px solid rgba(210, 170, 85, 0.18); pointer-events: none; }
.xx-justice-status small { position: relative; color: rgb(240, 207, 145); font: 700 0.65rem / 1.4 system-ui, sans-serif; letter-spacing: 0.16em; }
.xx-justice-status strong { position: relative; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.3; }
.xx-justice-status span { position: relative; padding-top: 0.5rem; border-top: 1px solid rgba(244, 239, 228, 0.15); font: 500 0.8rem / 1.6 system-ui, sans-serif; }
html[lang="zh-Hans"] .xx-case-facts dt, html[lang="zh-Hans"] .xx-case-facts small, html[lang="zh-Hans"] .xx-case-jump, html[lang="zh-Hans"] .xx-record-nav a, html[lang="zh-Hans"] .xx-timeline time, html[lang="zh-Hans"] .xx-evidence-tag, html[lang="zh-Hans"] .xx-sensitive-details summary, html[lang="zh-Hans"] .xx-signal-grid span, html[lang="zh-Hans"] .xx-policy-grid article > span, html[lang="zh-Hans"] .xx-justice-status small, html[lang="zh-Hans"] .xx-justice-status span { font-family: "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif; }
html[lang="en"] .xx-case-record h2, html[lang="en"] .xx-record-block h3, html[lang="en"] .xx-timeline h4, html[lang="en"] .xx-signal-grid h4, html[lang="en"] .xx-policy-grid h4 { hyphens: auto; overflow-wrap: anywhere; }
html[lang="en"] .xx-case-summary p, html[lang="en"] .xx-record-block p { line-height: 1.78; }
html[lang="ja"] .xx-case-record h2, html[lang="ja"] .xx-record-block h3, html[lang="ja"] .xx-timeline h4, html[lang="ja"] .xx-signal-grid h4, html[lang="ja"] .xx-policy-grid h4 { line-break: strict; word-break: normal; overflow-wrap: anywhere; }
html[lang="ja"] .xx-case-summary p, html[lang="ja"] .xx-record-block p { line-height: 1.95; }
@media (max-width: 1000px) {
  .xx-case-facts { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .xx-signal-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .xx-signal-grid li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 780px) {
  .xx-case-record { padding: 4.5rem 1rem; }
  .xx-case-record h2 { font-size: clamp(2rem, 9.4vw, 3.35rem); }
  .xx-case-summary p { font-size: 0.96rem; }
  .xx-record-nav { grid-template-columns: repeat(2, minmax(0px, 1fr)); margin-top: 2.5rem; }
  .xx-record-block { padding: 3.8rem 0px; scroll-margin-top: 4rem; }
  .xx-record-block h3 { font-size: clamp(1.75rem, 8.5vw, 2.8rem); }
  .xx-timeline::before { left: 7px; }
  .xx-timeline li { grid-template-columns: 1fr; gap: 0.35rem; padding: 0px 0px 2rem 2rem; }
  .xx-timeline li::before { left: 1px; top: 0.42rem; border-color: rgb(241, 233, 220); }
  .xx-timeline time { text-align: left; }
  .xx-timeline li > div { padding: 0px 0px 1rem; }
  .xx-policy-grid, .xx-justice-block { grid-template-columns: 1fr; }
  .xx-justice-status { max-width: 520px; }
}
@media (max-width: 480px) {
  .xx-case-facts, .xx-signal-grid { grid-template-columns: 1fr; }
  .xx-signal-grid li:last-child { grid-column: auto; }
  .xx-record-nav { grid-template-columns: 1fr; }
  .xx-record-nav a { padding: 0.78rem 0.65rem; }
  .xx-content-note, .xx-legal-caution, .xx-policy-note { padding: 0.95rem 1rem; }
  .xx-policy-grid article { padding: 1.15rem; }
}
.xx-case-record.reveal { opacity: 1; transform: none; }

/* 2026-08-17｜臺灣絨花敘事層
   五朵花對應五個可能介入時點；金線缺瓣維持未完成狀態。
   僅使用 .xx- 專頁命名空間，不影響首頁與全站導覽。 */
.xx-prologue,
.xx-method,
.xx-chapter,
.xx-ending {
  isolation: isolate;
}

.xx-prologue-inner,
.xx-method-inner,
.xx-chapter > .xx-wrap,
.xx-ending-grid,
.xx-ending .xx-legal {
  position: relative;
  z-index: 2;
}

.xx-prologue::after,
.xx-method::after,
.xx-chapter::before,
.xx-case-record-inner::before {
  content: "";
  position: absolute;
  width: clamp(250px, 34vw, 510px);
  aspect-ratio: 1;
  background: url("art/xuanxuan-ronghua/indigo-ronghua-corner-20260817.webp") center / contain no-repeat;
  opacity: 0.26;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(ellipse at 45% 58%, #000 43%, rgba(0, 0, 0, 0.86) 58%, transparent 79%);
  mask-image: radial-gradient(ellipse at 45% 58%, #000 43%, rgba(0, 0, 0, 0.86) 58%, transparent 79%);
  pointer-events: none;
  user-select: none;
}

.xx-prologue::after {
  top: -7rem;
  right: -5rem;
  transform: rotate(5deg);
}

.xx-prologue.is-visible::after {
  animation: xxRonghuaUnfurl 1.8s 0.2s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.xx-method::after {
  right: -8rem;
  bottom: -10rem;
  opacity: 0.19;
  transform: rotate(-9deg) scaleX(-1);
}

.xx-method.is-visible::after {
  animation: xxRonghuaUnfurlMirror 1.8s 0.35s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.xx-chapter::before {
  top: clamp(1rem, 6vw, 5rem);
  right: clamp(-10rem, -7vw, -4rem);
  width: clamp(220px, 25vw, 390px);
  opacity: 0.13;
  transform: rotate(8deg);
}

.xx-chapter.is-reversed::before {
  right: auto;
  left: clamp(-10rem, -7vw, -4rem);
  transform: rotate(-8deg) scaleX(-1);
}

.xx-case-record-inner {
  isolation: isolate;
}

.xx-case-record-inner::before {
  z-index: -1;
  top: -5rem;
  right: -7rem;
  width: clamp(260px, 31vw, 470px);
  opacity: 0.17;
  transform: rotate(4deg);
}

.xx-interlude-copy {
  isolation: isolate;
}

.xx-interlude-copy > * {
  position: relative;
  z-index: 2;
}

.xx-interlude-copy::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: clamp(-7rem, -3vw, -2rem);
  bottom: 0.4rem;
  width: clamp(260px, 35vw, 520px);
  aspect-ratio: 3 / 2;
  background: url("art/xuanxuan-ronghua/five-warning-ronghua-dark-20260817.webp") center / contain no-repeat;
  opacity: 0;
  mix-blend-mode: screen;
  filter: saturate(0.76) brightness(0.86);
  -webkit-mask-image: radial-gradient(ellipse at 58% 58%, #000 36%, rgba(0, 0, 0, 0.82) 58%, transparent 83%);
  mask-image: radial-gradient(ellipse at 58% 58%, #000 36%, rgba(0, 0, 0, 0.82) 58%, transparent 83%);
  transform: translate3d(28px, 18px, 0) rotate(2deg) scale(0.94);
  pointer-events: none;
}

.xx-interlude.is-active .xx-interlude-copy::after {
  animation: xxRonghuaScene 2.4s 0.8s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

.xx-ending::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: clamp(-12rem, -8vw, -4rem);
  bottom: clamp(-8rem, -5vw, -3rem);
  width: clamp(430px, 55vw, 840px);
  aspect-ratio: 3 / 2;
  background: url("art/xuanxuan-ronghua/five-warning-ronghua-dark-20260817.webp") center / contain no-repeat;
  opacity: 0.28;
  mix-blend-mode: screen;
  filter: saturate(0.68) brightness(0.78);
  -webkit-mask-image: radial-gradient(ellipse at 60% 55%, #000 38%, rgba(0, 0, 0, 0.84) 62%, transparent 84%);
  mask-image: radial-gradient(ellipse at 60% 55%, #000 38%, rgba(0, 0, 0, 0.84) 62%, transparent 84%);
  transform: rotate(-3deg);
  pointer-events: none;
}

@keyframes xxRonghuaUnfurl {
  from { opacity: 0; transform: translate3d(26px, -12px, 0) rotate(8deg) scale(0.94); }
  to { opacity: 0.26; transform: translate3d(0, 0, 0) rotate(5deg) scale(1); }
}

@keyframes xxRonghuaUnfurlMirror {
  from { opacity: 0; transform: translate3d(28px, 18px, 0) rotate(-12deg) scaleX(-1) scale(0.94); }
  to { opacity: 0.19; transform: translate3d(0, 0, 0) rotate(-9deg) scaleX(-1) scale(1); }
}

@keyframes xxRonghuaScene {
  0% { opacity: 0; transform: translate3d(28px, 18px, 0) rotate(2deg) scale(0.94); }
  52% { opacity: 0.2; }
  100% { opacity: 0.16; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

@media (max-width: 780px) {
  .xx-prologue::after,
  .xx-method::after,
  .xx-chapter::before,
  .xx-case-record-inner::before {
    width: clamp(180px, 58vw, 300px);
  }

  .xx-prologue::after {
    top: -2.5rem;
    right: -6.5rem;
    opacity: 0.21;
  }

  .xx-method::after {
    right: -7rem;
    bottom: -5rem;
    opacity: 0.15;
  }

  .xx-case-record-inner::before {
    top: -2rem;
    right: -7.5rem;
    opacity: 0.12;
  }

  .xx-chapter::before,
  .xx-chapter.is-reversed::before {
    top: 1.2rem;
    right: -7rem;
    left: auto;
    opacity: 0.1;
    transform: rotate(7deg);
  }

  .xx-interlude-copy::after {
    right: -4.5rem;
    bottom: 2.2rem;
    width: min(74vw, 330px);
  }

  .xx-ending::after {
    right: -12rem;
    bottom: -2.5rem;
    width: min(118vw, 620px);
    opacity: 0.2;
  }
}

@media (max-width: 480px) {
  .xx-prologue::after {
    right: -8rem;
  }

  .xx-interlude-copy::after {
    right: -6rem;
    bottom: 3.2rem;
    opacity: 0.12;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xx-prologue::after,
  .xx-method::after,
  .xx-interlude-copy::after {
    animation: none !important;
  }

  .xx-prologue::after { opacity: 0.26; transform: rotate(5deg); }
  .xx-method::after { opacity: 0.19; transform: rotate(-9deg) scaleX(-1); }
  .xx-interlude-copy::after { opacity: 0.16; transform: none; }
}

/* 2026-08-17｜臺灣絨花敘事層 V2
   四款不同花型分幕輪替：五瓣未竟梅、客家藍染茶花、粉白菊簪、朱砂金線鳳尾花。
   僅作用於 .xx- 萱萱專頁命名空間，不修改全站導覽、計數器、音樂或共用互動。 */

/* 01｜五瓣未竟梅：開場、第一／五章與結尾，保留未完成的第五瓣。 */
.xx-prologue::after,
#chapter-01::before,
#chapter-05::before,
.xx-ending::after {
  background: url("art/xuanxuan-ronghua/ronghua-five-warning-unfinished-20260817.webp") center / contain no-repeat;
  aspect-ratio: 3 / 2;
  mix-blend-mode: normal;
  -webkit-mask-image: none;
  mask-image: none;
  filter: saturate(0.88) contrast(0.96);
}

.xx-prologue::after {
  top: -3.4rem;
  right: -2.2rem;
  width: clamp(360px, 44vw, 680px);
  opacity: 0.42;
  transform: rotate(3deg);
}

.xx-prologue.is-visible::after {
  animation: xxRonghuaV2Branch 2.2s 0.18s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

#chapter-01::before,
#chapter-05::before {
  top: clamp(1rem, 5vw, 4rem);
  width: clamp(330px, 34vw, 560px);
  opacity: 0.28;
}

#chapter-01::before {
  right: clamp(-8rem, -5vw, -3rem);
  left: auto;
  transform: rotate(7deg);
}

#chapter-05::before {
  right: auto;
  left: clamp(-8rem, -5vw, -3rem);
  transform: rotate(-7deg) scaleX(-1);
}

.xx-ending::after {
  right: clamp(-8rem, -4vw, -2rem);
  bottom: clamp(-5rem, -3vw, -1.5rem);
  width: clamp(500px, 62vw, 940px);
  opacity: 0.34;
  transform: rotate(-2deg);
}

/* 02｜客家藍染茶花：閱讀方法與跨城章節。 */
.xx-method::after,
#chapter-03::before {
  background: url("art/xuanxuan-ronghua/ronghua-hakka-indigo-camellia-20260817.webp") center / contain no-repeat;
  aspect-ratio: 1;
  mix-blend-mode: multiply;
  filter: saturate(0.86) contrast(1.04);
  -webkit-mask-image: radial-gradient(circle at 42% 60%, #000 45%, rgba(0, 0, 0, 0.9) 61%, transparent 82%);
  mask-image: radial-gradient(circle at 42% 60%, #000 45%, rgba(0, 0, 0, 0.9) 61%, transparent 82%);
}

.xx-method::after {
  right: -4.2rem;
  bottom: -5.4rem;
  width: clamp(310px, 35vw, 540px);
  opacity: 0.36;
  transform: rotate(-8deg);
}

.xx-method.is-visible::after {
  animation: xxRonghuaV2Indigo 2s 0.3s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

#chapter-03::before {
  top: clamp(2rem, 7vw, 6rem);
  right: auto;
  left: clamp(-7rem, -4vw, -2.5rem);
  width: clamp(280px, 28vw, 450px);
  opacity: 0.3;
  transform: rotate(-6deg);
}

/* 03｜粉白菊簪：案件經過、分類、確認與責任章。 */
.xx-case-record-inner::before,
#chapter-02::before,
#chapter-04::before,
#chapter-06::before {
  background: url("art/xuanxuan-ronghua/ronghua-powder-chrysanthemum-20260817.webp") center / contain no-repeat;
  aspect-ratio: 5 / 4;
  mix-blend-mode: multiply;
  filter: saturate(0.84) contrast(1.03);
  -webkit-mask-image: radial-gradient(ellipse at 60% 48%, #000 46%, rgba(0, 0, 0, 0.9) 64%, transparent 84%);
  mask-image: radial-gradient(ellipse at 60% 48%, #000 46%, rgba(0, 0, 0, 0.9) 64%, transparent 84%);
}

.xx-case-record-inner::before {
  z-index: 0;
  top: -3.8rem;
  right: -4.8rem;
  width: clamp(330px, 38vw, 590px);
  opacity: 0.31;
  transform: rotate(5deg);
}

.xx-case-record-inner > * {
  position: relative;
  z-index: 1;
}

#chapter-02::before,
#chapter-04::before,
#chapter-06::before {
  top: clamp(2rem, 7vw, 6rem);
  right: clamp(-7rem, -4vw, -2.5rem);
  left: auto;
  width: clamp(310px, 29vw, 470px);
  opacity: 0.27;
  transform: rotate(6deg);
}

#chapter-04::before {
  right: auto;
  left: clamp(-7rem, -4vw, -2.5rem);
  transform: rotate(-6deg) scaleX(-1);
}

/* 04｜朱砂金線鳳尾花：深色戲臺轉場與終曲，以 screen 消去黑底。 */
.xx-interlude[data-xx-scene="chapter-02"] .xx-interlude-copy::after,
.xx-interlude[data-xx-scene="chapter-04"] .xx-interlude-copy::after,
.xx-interlude[data-xx-scene="chapter-06"] .xx-interlude-copy::after,
.xx-interlude[data-xx-scene="finale"] .xx-interlude-copy::after {
  right: clamp(-2.5rem, -1vw, -0.5rem);
  bottom: -1rem;
  width: clamp(260px, 30vw, 460px);
  aspect-ratio: 4 / 5;
  background: url("art/xuanxuan-ronghua/ronghua-vermilion-phoenix-tail-20260817.webp") center / contain no-repeat;
  mix-blend-mode: screen;
  filter: saturate(0.82) brightness(0.9);
  -webkit-mask-image: radial-gradient(ellipse at 54% 58%, #000 51%, rgba(0, 0, 0, 0.9) 67%, transparent 86%);
  mask-image: radial-gradient(ellipse at 54% 58%, #000 51%, rgba(0, 0, 0, 0.9) 67%, transparent 86%);
}

.xx-interlude[data-xx-scene="chapter-01"] .xx-interlude-copy::after,
.xx-interlude[data-xx-scene="chapter-03"] .xx-interlude-copy::after,
.xx-interlude[data-xx-scene="chapter-05"] .xx-interlude-copy::after {
  right: clamp(-5rem, -3vw, -2rem);
  bottom: 0.2rem;
  width: clamp(340px, 39vw, 600px);
  aspect-ratio: 3 / 2;
  background: url("art/xuanxuan-ronghua/ronghua-five-warning-unfinished-20260817.webp") center / contain no-repeat;
  mix-blend-mode: normal;
  filter: saturate(0.8) brightness(0.88);
  -webkit-mask-image: none;
  mask-image: none;
}

.xx-interlude.is-active .xx-interlude-copy::after {
  animation: xxRonghuaV2Stage 2.35s 0.65s cubic-bezier(0.2, 0.72, 0.2, 1) both;
}

@keyframes xxRonghuaV2Branch {
  from { opacity: 0; transform: translate3d(36px, -12px, 0) rotate(6deg) scale(0.92); }
  to { opacity: 0.42; transform: translate3d(0, 0, 0) rotate(3deg) scale(1); }
}

@keyframes xxRonghuaV2Indigo {
  from { opacity: 0; transform: translate3d(26px, 20px, 0) rotate(-12deg) scale(0.9); }
  to { opacity: 0.36; transform: translate3d(0, 0, 0) rotate(-8deg) scale(1); }
}

@keyframes xxRonghuaV2Stage {
  0% { opacity: 0; transform: translate3d(32px, 18px, 0) rotate(3deg) scale(0.92); }
  58% { opacity: 0.3; }
  100% { opacity: 0.24; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}

@media (max-width: 780px) {
  .xx-prologue::after {
    top: 0.5rem;
    right: -7.5rem;
    width: min(92vw, 460px);
    opacity: 0.34;
  }

  .xx-method::after {
    right: -5.8rem;
    bottom: -2.5rem;
    width: min(76vw, 350px);
    opacity: 0.31;
  }

  .xx-case-record-inner::before {
    top: -1rem;
    right: -6.2rem;
    width: min(88vw, 430px);
    opacity: 0.25;
  }

  #chapter-01::before,
  #chapter-05::before {
    top: 1.4rem;
    right: -8rem;
    left: auto;
    width: min(92vw, 430px);
    opacity: 0.22;
    transform: rotate(5deg);
  }

  #chapter-02::before,
  #chapter-03::before,
  #chapter-04::before,
  #chapter-06::before {
    top: 1.5rem;
    right: -6.5rem;
    left: auto;
    width: min(73vw, 340px);
    opacity: 0.23;
    transform: rotate(5deg);
  }

  .xx-interlude[data-xx-scene] .xx-interlude-copy::after {
    right: -4.6rem;
    bottom: 2.8rem;
    width: min(66vw, 340px);
  }

  .xx-interlude[data-xx-scene="chapter-01"] .xx-interlude-copy::after,
  .xx-interlude[data-xx-scene="chapter-03"] .xx-interlude-copy::after,
  .xx-interlude[data-xx-scene="chapter-05"] .xx-interlude-copy::after {
    right: -7rem;
    width: min(92vw, 430px);
  }

  .xx-ending::after {
    right: -9rem;
    bottom: -1rem;
    width: min(116vw, 650px);
    opacity: 0.28;
  }
}

@media (max-width: 480px) {
  .xx-prologue::after { right: -9rem; }
  .xx-method::after { right: -7rem; }
  .xx-case-record-inner::before { right: -8rem; }

  .xx-interlude[data-xx-scene] .xx-interlude-copy::after {
    right: -6.5rem;
    opacity: 0.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xx-prologue::after,
  .xx-method::after,
  .xx-interlude-copy::after {
    animation: none !important;
  }

  .xx-prologue::after { opacity: 0.42; transform: rotate(3deg); }
  .xx-method::after { opacity: 0.36; transform: rotate(-8deg); }
  .xx-interlude-copy::after { opacity: 0.24; transform: none; }
}

/* 2026-08-19: three additional narrative poses for each opera puppet. */
.xx-puppet {
  clip-path: inset(0 0 0 0);
  transition: clip-path 190ms cubic-bezier(0.55, 0, 0.45, 1);
}

.xx-puppet.is-pose-switching {
  clip-path: inset(0 50% 0 50%);
}

@media (prefers-reduced-motion: reduce) {
  .xx-puppet {
    clip-path: none;
    transition: none;
  }
}

/* 2026-08-19: GSAP progressive enhancement. CSS keyframes remain as an offline fallback. */
html.xx-gsap-ready .xx-hero > img,
html.xx-gsap-ready .xx-hero-copy,
html.xx-gsap-ready .xx-scene.is-active .xx-interlude-bg,
html.xx-gsap-ready .xx-scene.is-active .xx-interlude-copy,
html.xx-gsap-ready .xx-scene.is-active .xx-opening-frame *,
html.xx-gsap-ready .xx-scene.is-active .xx-opera-stage * {
  animation: none !important;
}

html.xx-gsap-ready .reveal,
html.xx-gsap-ready .xx-art img,
html.xx-gsap-ready .xx-ending img,
html.xx-gsap-ready .xx-puppet {
  transition: none !important;
}

html.xx-gsap-ready .xx-progress {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

html.xx-gsap-ready .xx-interlude-bg,
html.xx-gsap-ready .xx-puppet,
html.xx-gsap-ready .xx-curtain,
html.xx-gsap-ready .xx-hero > img {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

@media (max-width: 780px) {
  html.xx-gsap-ready .xx-interlude-bg,
  html.xx-gsap-ready .xx-puppet,
  html.xx-gsap-ready .xx-hero > img {
    will-change: auto;
  }
}