:root{
  --tt-paper:#eee2c9;
  --tt-paper-light:#f8f2e5;
  --tt-xuan:#f4ead5;
  --tt-moon-white:#d9e4de;
  --tt-ink:#242826;
  --tt-smoke:#4d524e;
  --tt-soot:#172321;
  --tt-indigo:#233d49;
  --tt-indigo-deep:#101f25;
  --tt-stone-blue:#315e6b;
  --tt-flower-blue:#3f6674;
  --tt-stone-green:#6e8779;
  --tt-cinnabar:#8e3d31;
  --tt-rouge:#8b4452;
  --tt-ochre:#a16f47;
  --tt-rattan:#d0a24d;
  --tt-gold:#b18a4a;
  --tt-celadon:#7c9185;
  --tt-line:rgba(63,60,51,.22);
  --tt-sans:"Noto Sans TC","Noto Sans CJK TC","PingFang TC","Microsoft JhengHei",sans-serif;
  --tt-serif:"Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--tt-paper)}
body.tt-page{margin:0;background:radial-gradient(circle at 18% 8%,rgba(49,94,107,.08),transparent 24%),radial-gradient(circle at 88% 28%,rgba(161,111,71,.07),transparent 28%),var(--tt-paper-light);color:var(--tt-ink);font-family:var(--tt-sans);font-size:16px;line-height:1.9;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body.tt-opening-active{overflow:hidden}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit}
.tt-shell{width:min(1180px,calc(100% - 44px));margin-inline:auto}
.tt-reading-progress{position:fixed;z-index:200;top:0;left:0;width:100%;height:3px;background:rgba(19,31,34,.14)}
.tt-reading-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--tt-cinnabar),var(--tt-gold));box-shadow:0 0 9px rgba(177,138,74,.55)}
.tt-skip-link{position:fixed;z-index:500;top:10px;left:10px;transform:translateY(-150%);padding:9px 14px;background:#fff;color:#172d34;border-radius:6px;text-decoration:none}
.tt-skip-link:focus{transform:none}

/* Opening: an original paper-shadow prologue, silent and skippable. */
.tt-opening{position:fixed;z-index:400;inset:0;display:grid;place-items:center;overflow:hidden;background:#161d1e;color:#f8eed7;transition:opacity .8s ease,visibility .8s ease}
.tt-opening.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.tt-opening::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,16,17,.94) 0%,rgba(20,27,27,.45) 48%,rgba(10,14,15,.84) 100%),url("./art/tian-tian-ink-paper-documentary-20260815.webp") center/cover no-repeat;filter:saturate(.68) contrast(1.05);transform:scale(1.035);animation:tt-opening-camera 22s ease-out both}
.tt-opening::after{content:"";position:absolute;inset:18px;border:1px solid rgba(209,174,105,.35);box-shadow:inset 0 0 0 7px rgba(12,18,19,.3),inset 0 0 90px rgba(0,0,0,.42);pointer-events:none}
.tt-stage{position:relative;z-index:2;width:min(1080px,calc(100% - 54px));min-height:min(650px,82vh);display:grid;grid-template-columns:minmax(210px,.58fr) minmax(0,1.25fr);align-items:end;gap:44px;padding:50px clamp(24px,5vw,70px);border:1px solid rgba(226,190,117,.28);background:linear-gradient(120deg,rgba(15,23,24,.84),rgba(25,34,33,.28));box-shadow:0 35px 100px rgba(0,0,0,.45)}
.tt-stage-craft{position:relative;height:360px;filter:drop-shadow(21px 18px 10px rgba(0,0,0,.45))}
.tt-puppet{position:absolute;bottom:10px;width:142px;height:300px;transform-origin:50% 90%;animation:tt-puppet-breathe 4.2s ease-in-out infinite}
.tt-puppet--girl{left:7%;transform:scale(.72);opacity:.78;animation-delay:-1.1s}
.tt-puppet--scribe{right:0;transform:scale(.93) rotate(2deg)}
.tt-puppet i,.tt-puppet b,.tt-puppet span{position:absolute;display:block;background:#141819;border:1px solid rgba(188,135,62,.8)}
.tt-puppet i{top:0;left:48px;width:50px;height:58px;border-radius:48% 48% 42% 42%;box-shadow:inset 7px 0 rgba(142,61,49,.56)}
.tt-puppet b{top:52px;left:34px;width:76px;height:132px;clip-path:polygon(15% 0,85% 0,100% 100%,0 100%);background:linear-gradient(90deg,#18272b,#3d2924 72%)}
.tt-puppet span{top:175px;left:24px;width:96px;height:112px;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);background:#182225}
.tt-puppet::before,.tt-puppet::after{content:"";position:absolute;z-index:-1;top:78px;width:104px;height:7px;background:#171b1b;border:1px solid rgba(180,129,59,.7);transform-origin:7px 50%}
.tt-puppet::before{left:6px;transform:rotate(28deg)}
.tt-puppet::after{left:87px;transform:rotate(-17deg)}
.tt-stage-copy{align-self:center;min-width:0}
.tt-opening-kicker{margin:0 0 18px;color:#d7b36c;font-size:10px;font-weight:800;letter-spacing:.22em;text-transform:uppercase}
.tt-opening-lines{position:relative;min-height:240px}
.tt-opening-line{position:absolute;inset:0;margin:0;opacity:0;transform:translateY(17px);transition:opacity .75s ease,transform .75s ease;pointer-events:none}
.tt-opening-line.is-active{opacity:1;transform:none;pointer-events:auto}
.tt-opening-line strong{display:block;margin-bottom:17px;color:#d9ad58;font-size:12px;letter-spacing:.16em}
.tt-opening-line span{display:block;font-family:var(--tt-serif);font-size:clamp(21px,3vw,34px);font-weight:700;line-height:1.75;text-wrap:balance;text-shadow:0 3px 22px rgba(0,0,0,.75)}
.tt-opening-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:24px}
.tt-opening-controls button{cursor:pointer;border:1px solid rgba(221,183,106,.45);border-radius:999px;padding:9px 17px;background:rgba(13,19,20,.66);color:#f8eed8;font-weight:700}
.tt-opening-controls button:first-child{background:#c19a51;color:#172328}
.tt-opening-steps{display:flex;gap:7px;margin-left:auto}
.tt-opening-steps button{width:26px;height:4px;min-width:0;padding:0;border:0;border-radius:4px;background:rgba(255,255,255,.22)}
.tt-opening-steps button.is-active{background:#d8ae61}
.tt-opening-note{position:absolute;z-index:3;right:30px;bottom:28px;color:rgba(247,237,216,.68);font-size:10px;letter-spacing:.12em}
@keyframes tt-opening-camera{from{transform:scale(1.09) translateX(-1.5%)}to{transform:scale(1.02) translateX(0)}}
@keyframes tt-puppet-breathe{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -5px;rotate:.8deg}}

/* Documentary header and language controls. */
.tt-topbar{position:sticky;z-index:120;top:0;border-bottom:1px solid rgba(70,63,49,.18);background:rgba(246,239,224,.92);backdrop-filter:blur(14px)}
.tt-topbar-inner{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.tt-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#263b42;font-weight:800;line-height:1.25}
.tt-brand img{width:39px;height:39px;border-radius:50%;object-fit:cover}
.tt-brand small{display:block;color:#927546;font-size:8px;letter-spacing:.13em}
.tt-language{display:flex;align-items:center;gap:4px;padding:3px;border:1px solid rgba(127,100,52,.34);border-radius:999px;background:rgba(255,252,244,.75)}
.tt-language a{min-width:34px;padding:5px 7px;border-radius:999px;text-align:center;text-decoration:none;color:#5c665f;font-size:12px;font-weight:800}
.tt-language a[aria-current="true"],.tt-language a:hover{background:var(--tt-indigo);color:#fff}
.tt-breadcrumb{padding-top:18px;color:#777467;font-size:11px}
.tt-breadcrumb a{text-decoration:none;color:#4f6870}

/* Hero: observational wide shot with editorial focus marks. */
.tt-hero{position:relative;overflow:hidden;padding:38px 0 86px;background:radial-gradient(circle at 84% 16%,rgba(177,138,74,.16),transparent 30%),linear-gradient(180deg,#f5eddd,#ece0c8)}
.tt-hero::after{content:"";position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(transparent,rgba(40,43,39,.08));pointer-events:none}
.tt-hero-grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(430px,1.16fr);gap:48px;align-items:center}
.tt-hero-copy{position:relative;z-index:2}
.tt-kicker{color:#8a6d3e;font-size:10px;font-weight:900;letter-spacing:.16em}
.tt-hero h1{margin:13px 0 2px;color:#1f3338;font-family:var(--tt-serif);font-size:clamp(52px,7vw,91px);line-height:1.05;letter-spacing:.02em}
.tt-subtitle{margin:10px 0 18px;color:var(--tt-cinnabar);font-family:var(--tt-serif);font-size:clamp(22px,3vw,38px);font-weight:800;line-height:1.35}
.tt-deck{max-width:660px;margin:0;color:#4e5653;font-size:17px;line-height:1.9;text-wrap:pretty}
.tt-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:22px}
.tt-meta>span{padding:5px 9px;border:1px solid rgba(88,76,54,.2);border-radius:999px;background:rgba(255,255,255,.45);color:#625e52;font-size:10px;font-weight:800;letter-spacing:.05em}
.tt-view-counter.home-view-counter{width:max-content;margin-top:14px;padding:7px 11px;border-color:rgba(123,97,53,.28);background:rgba(255,251,241,.65);box-shadow:none;color:#46575b}
.tt-view-counter .home-view-counter-label{font-size:10px;letter-spacing:.07em}
.tt-view-counter .home-view-counter-value{font-size:12px}
.tt-hero-art{position:relative;margin:0;border:1px solid rgba(94,76,44,.28);background:#352f29;box-shadow:0 28px 70px rgba(43,37,26,.22);transform:rotate(.35deg)}
.tt-hero-art::before,.tt-hero-art::after{content:"";position:absolute;z-index:2;width:54px;height:54px;border-color:rgba(236,213,164,.78);pointer-events:none}
.tt-hero-art::before{top:14px;left:14px;border-top:1px solid;border-left:1px solid}
.tt-hero-art::after{right:14px;bottom:72px;border-right:1px solid;border-bottom:1px solid}
.tt-hero-art img{width:100%;aspect-ratio:16/9;object-fit:cover;will-change:transform;transition:transform .25s linear}
.tt-hero-art figcaption{padding:13px 16px;background:#222b2c;color:#c7c2b5;font-size:10px;line-height:1.65}
.tt-hero-art figcaption b{color:#d4aa5a;letter-spacing:.12em}
.tt-timecode{position:absolute;z-index:3;top:16px;right:18px;padding:3px 7px;background:rgba(14,21,22,.62);color:#e8dcc3;font:700 9px/1.4 ui-monospace,monospace;letter-spacing:.08em}

/* Reading map. */
.tt-guide{position:relative;z-index:4;margin-top:-38px;padding-bottom:58px}
.tt-guide-card{display:grid;grid-template-columns:minmax(250px,.62fr) minmax(0,1.38fr);gap:30px;padding:28px;border:1px solid var(--tt-line);background:rgba(251,247,238,.96);box-shadow:0 19px 55px rgba(48,43,31,.11)}
.tt-guide-copy small{color:#9a7940;font-size:9px;font-weight:900;letter-spacing:.18em}
.tt-guide-copy h2{margin:4px 0 9px;font-family:var(--tt-serif);font-size:30px;color:#24383d}
.tt-guide-copy p{margin:0;color:#6c6d65;font-size:12px;line-height:1.7}
.tt-guide-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.tt-guide-links a{display:grid;grid-template-columns:28px 1fr;gap:7px;align-items:center;padding:10px 11px;border:1px solid rgba(92,79,57,.14);background:#f3ead8;text-decoration:none;color:#405155;font-size:11px;line-height:1.45}
.tt-guide-links a:hover{border-color:#a8884e;background:#eee0c6}
.tt-guide-links b{color:#a14638;font-family:Georgia,serif}

/* Chapters and evidence language. */
.tt-content{position:relative;background:linear-gradient(90deg,rgba(46,59,58,.025) 1px,transparent 1px),var(--tt-paper-light);background-size:30px 30px}
.tt-chapter{padding:74px 0;opacity:0;transform:translateY(18px);transition:opacity .85s ease,transform .85s ease}
.tt-chapter.is-visible{opacity:1;transform:none}
.tt-chapter-grid{display:grid;grid-template-columns:150px minmax(0,780px);gap:42px;justify-content:center}
.tt-chapter-mark{position:sticky;top:112px;align-self:start;padding-top:7px;color:#987846}
.tt-chapter-mark small{display:block;font-size:8px;font-weight:900;letter-spacing:.17em;line-height:1.55}
.tt-chapter-mark b{display:block;margin-top:6px;color:rgba(142,61,49,.72);font:400 61px/1 Georgia,serif}
.tt-prose h2{margin:0 0 19px;color:#23373c;font-family:var(--tt-serif);font-size:clamp(31px,4vw,48px);line-height:1.32;text-wrap:balance}
.tt-prose h3{margin:30px 0 10px;color:#304a50;font-family:var(--tt-serif);font-size:23px}
.tt-prose p{margin:0 0 17px;color:#454c49;font-size:16px;line-height:2;text-wrap:pretty}
.tt-prose .tt-lead{font-size:19px;color:#3d4d4e}
.tt-classic{margin:28px 0;padding:22px 26px;border-block:1px solid rgba(146,113,59,.3);color:#493f31;text-align:center;font-family:var(--tt-serif);font-size:22px;font-weight:700;line-height:1.8}
.tt-classic small{display:block;color:#9a7d4a;font-family:var(--tt-sans);font-size:9px;letter-spacing:.13em}
.tt-box{margin:22px 0;padding:19px 21px;border:1px solid rgba(63,80,80,.2);border-left:4px solid var(--tt-indigo);background:rgba(232,237,232,.62)}
.tt-box[data-kind="allegation"]{border-left-color:#9a713c;background:rgba(241,231,210,.7)}
.tt-box[data-kind="forensic"]{border-left-color:var(--tt-cinnabar);background:rgba(239,226,218,.72)}
.tt-box[data-kind="question"]{border-left-color:var(--tt-celadon);background:rgba(226,234,228,.72)}
.tt-box[data-kind="literary"]{border-left-color:#a77c73;background:rgba(238,227,222,.62)}
.tt-box-label{display:block;margin-bottom:7px;color:#526b70;font-size:9px;font-weight:900;letter-spacing:.14em}
.tt-box p:last-child{margin-bottom:0}
.tt-fact-grid,.tt-verdict-grid,.tt-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:24px 0}
.tt-fact-grid article,.tt-verdict-card,.tt-action-grid article{padding:20px;border:1px solid rgba(82,74,59,.18);background:rgba(250,246,237,.84);box-shadow:0 8px 0 rgba(178,161,132,.12)}
.tt-fact-grid small,.tt-verdict-card small,.tt-action-grid small{display:block;color:#9b7641;font-size:9px;font-weight:900;letter-spacing:.12em}
.tt-fact-grid strong,.tt-verdict-card strong,.tt-action-grid strong{display:block;margin:5px 0;color:#2f474c;font-family:var(--tt-serif);font-size:19px;line-height:1.5}
.tt-fact-grid p,.tt-verdict-card p,.tt-action-grid p{margin:4px 0 0;font-size:13px;line-height:1.75}
.tt-timeline{position:relative;margin:27px 0;padding-left:23px;border-left:1px solid rgba(142,61,49,.4)}
.tt-timeline article{position:relative;padding:0 0 24px 20px}
.tt-timeline article::before{content:"";position:absolute;top:9px;left:-28px;width:9px;height:9px;border:2px solid var(--tt-paper-light);border-radius:50%;background:var(--tt-cinnabar);box-shadow:0 0 0 1px rgba(142,61,49,.45)}
.tt-timeline time{display:block;color:#9d7941;font:800 10px/1.4 ui-monospace,monospace;letter-spacing:.08em}
.tt-timeline strong{display:block;margin:4px 0;color:#30484d;font-size:17px}
.tt-timeline p{margin:0;font-size:13px;line-height:1.75}
.tt-verdict-card{position:relative;overflow:hidden}
.tt-verdict-card::after{content:"判";position:absolute;right:-7px;bottom:-34px;color:rgba(142,61,49,.07);font-family:var(--tt-serif);font-size:115px;font-weight:900}
.tt-verdict-card.is-dark{background:#25383b;color:#eef0e9}
.tt-verdict-card.is-dark strong,.tt-verdict-card.is-dark p{color:#edf0e9}
.tt-questions{counter-reset:ttq;display:grid;gap:10px;margin:25px 0;padding:0;list-style:none}
.tt-questions li{counter-increment:ttq;position:relative;padding:17px 18px 17px 61px;border:1px solid rgba(81,75,61,.18);background:rgba(249,244,233,.76);color:#35474a;line-height:1.75}
.tt-questions li::before{content:counter(ttq,decimal-leading-zero);position:absolute;left:17px;color:var(--tt-cinnabar);font:800 13px/1.8 Georgia,serif}
.tt-editorial-rule{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:26px 0}
.tt-editorial-rule span{padding:11px;border:1px solid rgba(74,70,59,.15);background:#efe5d2;color:#5b5e57;font-size:10px;text-align:center;font-weight:800}

/* Every chapter has a visible scroll transition. */
.tt-transition{position:relative;min-height:210px;display:grid;place-items:center;overflow:hidden;border-block:1px solid rgba(87,76,56,.18);background:linear-gradient(90deg,#1c292b,#394849 48%,#202c2e);color:#f5ead1;opacity:.7;transition:opacity .9s ease}
.tt-transition.is-visible{opacity:1}
.tt-transition::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 28% 50%,rgba(210,168,84,.19),transparent 25%),linear-gradient(100deg,transparent 0 18%,rgba(9,13,14,.48) 18.2% 19%,transparent 19.2%);transform:translateX(-7%);transition:transform 1.5s ease}
.tt-transition.is-visible::before{transform:none}
.tt-transition-inner{position:relative;z-index:2;width:min(780px,calc(100% - 46px));display:grid;grid-template-columns:84px 1fr;gap:24px;align-items:center}
.tt-transition-puppet{position:relative;width:72px;height:112px;border:1px solid rgba(205,158,74,.55);clip-path:polygon(34% 0,66% 0,75% 22%,66% 35%,86% 100%,14% 100%,34% 35%,25% 22%);background:linear-gradient(#11191a,#392925);filter:drop-shadow(12px 8px 6px rgba(0,0,0,.4));transform:translateX(-22px) rotate(-3deg);transition:transform 1.3s ease}
.tt-transition.is-visible .tt-transition-puppet{transform:none}
.tt-transition small{display:block;color:#d4ab5e;font-size:9px;font-weight:900;letter-spacing:.17em}
.tt-transition p{margin:5px 0 0;font-family:var(--tt-serif);font-size:clamp(18px,2.4vw,27px);line-height:1.75;text-wrap:balance}

/* Sources and ending. */
.tt-sources{padding:70px 0;background:#dfd3bd}
.tt-sources h2{margin:0 0 18px;color:#2c4145;font-family:var(--tt-serif);font-size:31px}
.tt-source-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.tt-source-grid a{padding:17px;border:1px solid rgba(73,66,53,.19);background:rgba(248,243,232,.76);text-decoration:none;color:#4a5350;font-size:11px;line-height:1.7}
.tt-source-grid a:hover{border-color:#9e7940;background:#f7efdf}
.tt-source-grid strong{display:block;color:#2d474c;font-size:13px}
.tt-source-note{margin:19px 0 0;color:#6f6b60;font-size:11px;line-height:1.8}
.tt-ending{position:relative;min-height:82vh;display:grid;align-items:end;overflow:hidden;background:#1d292a;color:#f5ecd8}
.tt-ending::before{content:"";position:absolute;inset:-2%;background:linear-gradient(0deg,rgba(12,18,19,.92),rgba(18,25,26,.18) 55%,rgba(16,23,24,.52)),url("./art/tian-tian-ink-paper-documentary-20260815.webp") center/cover no-repeat;filter:saturate(.68);transform:scale(1.03);transition:transform 6s ease}
.tt-ending.is-visible::before{transform:scale(1)}
.tt-ending-copy{position:relative;z-index:2;max-width:850px;padding-block:90px}
.tt-ending small{color:#d2ab61;font-size:10px;font-weight:900;letter-spacing:.18em}
.tt-ending h2{margin:10px 0 18px;font-family:var(--tt-serif);font-size:clamp(42px,7vw,77px);line-height:1.22;text-wrap:balance}
.tt-ending p{max-width:750px;margin:0;color:#d8d8ce;font-size:18px;line-height:2}
.tt-ending-question{display:block;margin:28px 0;color:#e3bd72;font-family:var(--tt-serif);font-size:clamp(21px,3vw,34px);font-weight:800}
.tt-ending-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.tt-ending-actions a,.tt-replay{border:1px solid rgba(218,179,101,.5);border-radius:999px;padding:9px 15px;background:rgba(14,21,22,.45);color:#f5ead2;text-decoration:none;font-size:12px;font-weight:800}
.tt-replay{position:fixed;z-index:130;right:16px;bottom:16px;cursor:pointer;background:#263a3d;box-shadow:0 8px 25px rgba(0,0,0,.24)}

/* Art direction v2: mineral pigments, paper-shadow, velvet flowers and handcraft. */
.tt-opening{background:var(--tt-soot)}
.tt-opening::before{background:linear-gradient(90deg,rgba(10,18,19,.96),rgba(31,47,47,.38) 48%,rgba(10,15,16,.9)),radial-gradient(circle at 72% 18%,rgba(208,162,77,.2),transparent 24%),url("./art/tian-tian-ink-paper-documentary-20260815.webp") center/cover no-repeat;filter:saturate(.78) sepia(.08) contrast(1.06)}
.tt-stage{isolation:isolate;background:linear-gradient(122deg,rgba(17,34,36,.92),rgba(59,74,68,.28) 52%,rgba(77,47,42,.3));box-shadow:0 35px 100px rgba(0,0,0,.52),inset 0 0 75px rgba(16,28,29,.55)}
.tt-stage::before{content:"";position:absolute;z-index:-1;inset:12px;border:1px solid rgba(217,184,113,.25);background:linear-gradient(90deg,transparent 49.8%,rgba(217,184,113,.16) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,rgba(217,184,113,.1) 50%,transparent 50.2%);background-size:84px 84px;mask-image:linear-gradient(90deg,#000,transparent 50%,#000)}
.tt-stage::after{content:"";position:absolute;z-index:3;top:34px;left:37px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#d7a74f 0 9%,transparent 10%),radial-gradient(ellipse at 50% 18%,var(--tt-rouge) 0 15%,transparent 16%),radial-gradient(ellipse at 82% 50%,var(--tt-cinnabar) 0 15%,transparent 16%),radial-gradient(ellipse at 50% 82%,#9f4b42 0 15%,transparent 16%),radial-gradient(ellipse at 18% 50%,#723b44 0 15%,transparent 16%);filter:drop-shadow(0 5px 4px rgba(0,0,0,.35));opacity:.86;animation:tt-velvet-bloom 2.8s ease-in-out infinite alternate}
.tt-stage-craft::before{content:"";position:absolute;left:-10%;right:-7%;bottom:3px;height:1px;background:linear-gradient(90deg,transparent,rgba(219,183,108,.75) 14% 86%,transparent);box-shadow:0 -46px rgba(219,183,108,.08),0 -92px rgba(219,183,108,.06)}
.tt-puppet i,.tt-puppet b,.tt-puppet span{background-color:#152021;background-image:radial-gradient(circle,rgba(217,174,91,.4) 0 1px,transparent 1.5px),linear-gradient(115deg,transparent 43%,rgba(139,68,82,.5) 44% 55%,transparent 56%);background-size:13px 13px,100% 100%;box-shadow:inset 0 0 0 1px rgba(220,180,101,.16)}
.tt-puppet::before,.tt-puppet::after{height:5px;background:linear-gradient(90deg,#151b1b,#bb8b43 46% 51%,#151b1b)}
.tt-opening[data-scene="2"] .tt-puppet--scribe,.tt-opening[data-scene="4"] .tt-puppet--scribe{animation-duration:3.25s;filter:drop-shadow(28px 14px 8px rgba(0,0,0,.52))}
.tt-opening[data-scene="3"] .tt-puppet--girl{opacity:.92;filter:drop-shadow(0 0 18px rgba(211,167,81,.22))}
.tt-opening[data-scene="5"] .tt-stage::after{animation:tt-velvet-bloom 1.5s cubic-bezier(.2,.8,.2,1) both;filter:drop-shadow(0 0 13px rgba(209,163,77,.38))}

.tt-topbar{background:rgba(244,234,213,.92);border-bottom-color:rgba(49,94,107,.23)}
.tt-reading-progress i{background:linear-gradient(90deg,var(--tt-stone-blue),var(--tt-rouge) 43%,var(--tt-rattan) 72%,var(--tt-stone-green))}
.tt-hero{isolation:isolate;background:radial-gradient(circle at 86% 14%,rgba(208,162,77,.21),transparent 27%),radial-gradient(ellipse at 11% 72%,rgba(49,94,107,.14),transparent 36%),linear-gradient(143deg,#f6eddb 0 46%,#e5ddc7 72%,#d3ddd5)}
.tt-hero::before{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 22% 103%,rgba(23,35,33,.16),transparent 35%),radial-gradient(ellipse at 62% 104%,rgba(63,102,116,.15),transparent 30%),radial-gradient(ellipse at 92% 98%,rgba(110,135,121,.17),transparent 31%);filter:blur(2px);opacity:.9}
.tt-hero-grid{position:relative;z-index:1}
.tt-kicker{color:#81653f}.tt-hero h1{color:#19343a;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.tt-subtitle{color:var(--tt-rouge)}
.tt-hero-art{isolation:isolate;border-color:rgba(127,85,49,.42);background:var(--tt-soot);box-shadow:0 30px 75px rgba(35,50,47,.25),11px 12px 0 rgba(161,111,71,.09)}
.tt-hero-art::before{border-color:rgba(223,187,112,.88)}
.tt-hero-art::after{border-color:rgba(217,228,222,.72)}
.tt-hero-art img{filter:saturate(.83) sepia(.08) hue-rotate(-4deg) contrast(1.045)}
.tt-hero-art figcaption{background:linear-gradient(90deg,#172729,#263b3a 60%,#3e3430);color:#d4d4c8}
.tt-craft-key{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}
.tt-craft-key span{--swatch:var(--tt-stone-blue);display:inline-flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid rgba(56,65,59,.15);border-radius:999px;background:rgba(255,251,241,.56);color:#53625f;font-size:9px;font-weight:850;letter-spacing:.07em;white-space:nowrap}
.tt-craft-key span::before{content:"";width:10px;height:10px;border-radius:50% 42% 58% 45%;background:var(--swatch);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.tt-craft-key [data-pigment="moon"]{--swatch:var(--tt-moon-white)}
.tt-craft-key [data-pigment="blue"]{--swatch:var(--tt-stone-blue)}
.tt-craft-key [data-pigment="green"]{--swatch:var(--tt-stone-green)}
.tt-craft-key [data-pigment="rouge"]{--swatch:var(--tt-rouge)}
.tt-craft-key [data-pigment="ochre"]{--swatch:var(--tt-ochre)}
.tt-craft-key [data-pigment="yellow"]{--swatch:var(--tt-rattan)}

.tt-guide-card{background:linear-gradient(132deg,rgba(252,247,236,.98),rgba(235,239,229,.94));box-shadow:0 19px 55px rgba(37,56,52,.12),inset 5px 0 var(--tt-stone-blue)}
.tt-guide-links a{background:linear-gradient(135deg,#f4ead6,#ece5d2);border-color:rgba(64,89,84,.17)}
.tt-content{background:radial-gradient(ellipse at 7% 15%,rgba(49,94,107,.065),transparent 23%),radial-gradient(ellipse at 94% 42%,rgba(139,68,82,.055),transparent 26%),linear-gradient(90deg,rgba(46,59,58,.028) 1px,transparent 1px),linear-gradient(rgba(46,59,58,.02) 1px,transparent 1px),var(--tt-paper-light);background-size:auto,auto,30px 30px,30px 30px,auto}
.tt-chapter{--tt-chapter-accent:var(--tt-stone-blue);position:relative;overflow:hidden;isolation:isolate}
.tt-chapter::before{content:"";position:absolute;z-index:-1;width:min(620px,72vw);height:310px;right:-12%;top:8%;border-radius:50%;background:radial-gradient(ellipse,var(--tt-chapter-accent),transparent 67%);filter:blur(38px);opacity:.055;transform:translateX(8%) scale(.94);transition:transform 1.8s ease,opacity 1.2s ease}
.tt-chapter.is-visible::before{opacity:.105;transform:none}
#before{--tt-chapter-accent:var(--tt-moon-white)}
#out-of-sight{--tt-chapter-accent:var(--tt-stone-blue)}
#behind-door{--tt-chapter-accent:var(--tt-ochre)}
#last-morning{--tt-chapter-accent:var(--tt-rouge)}
#court{--tt-chapter-accent:var(--tt-indigo)}
#after-verdict{--tt-chapter-accent:var(--tt-rattan)}
#record{--tt-chapter-accent:var(--tt-soot)}
#questions{--tt-chapter-accent:var(--tt-flower-blue)}
#protection{--tt-chapter-accent:var(--tt-stone-green)}
.tt-chapter-mark{color:color-mix(in srgb,var(--tt-chapter-accent) 72%,#806c4b)}
.tt-chapter-mark b{color:color-mix(in srgb,var(--tt-chapter-accent) 78%,var(--tt-cinnabar))}
.tt-prose h2{position:relative;padding-bottom:17px}
.tt-prose h2::after{content:"";position:absolute;left:0;bottom:0;width:min(310px,64%);height:8px;border-radius:70% 25% 65% 35%;background:linear-gradient(90deg,var(--tt-chapter-accent),color-mix(in srgb,var(--tt-chapter-accent) 55%,transparent),transparent);filter:saturate(.78);transform:scaleX(.05);transform-origin:left;opacity:.72;transition:transform 1.25s cubic-bezier(.2,.8,.18,1) .15s}
.tt-chapter.is-visible .tt-prose h2::after{transform:scaleX(1)}
.tt-fact-grid article,.tt-verdict-card,.tt-action-grid article{background:linear-gradient(135deg,rgba(252,248,239,.92),rgba(237,238,225,.84));border-color:rgba(63,85,80,.19)}

.tt-classic{position:relative;overflow:hidden;margin:32px 0;padding:26px 30px 24px;border:1px solid rgba(135,101,56,.28);border-block-width:1px 3px;background:linear-gradient(105deg,rgba(246,232,204,.88),rgba(248,245,235,.86) 52%,rgba(218,229,220,.68));text-align:left;box-shadow:inset 8px 0 rgba(161,111,71,.1),0 11px 0 rgba(161,111,71,.055)}
.tt-classic::before{content:"";position:absolute;right:24px;top:19px;width:36px;height:36px;border:2px solid rgba(142,61,49,.34);border-radius:4px;transform:rotate(2deg);box-shadow:inset 0 0 0 3px rgba(142,61,49,.06)}
.tt-classic::after{content:"古";position:absolute;right:32px;top:20px;color:rgba(142,61,49,.38);font-family:var(--tt-serif);font-size:22px;font-weight:800}
.tt-classic>small{display:block;margin:0 58px 8px 0;color:#8b6b3f;font-family:var(--tt-sans);font-size:9px;font-weight:900;letter-spacing:.14em}
.tt-classic blockquote{margin:0 55px 15px 0;color:#3f3a31;font-family:var(--tt-serif);font-size:clamp(21px,2.5vw,27px);font-weight:800;line-height:1.8}
.tt-classic-explain{margin:0!important;padding-top:15px;border-top:1px solid rgba(98,90,72,.17);color:#5a615d!important;font-family:var(--tt-sans);font-size:13px!important;font-weight:500;line-height:1.85!important;text-align:left}
.tt-classic-explain b{display:inline-block;margin-right:8px;color:var(--tt-rouge);font-size:9px;letter-spacing:.12em}

.tt-transition{--tt-craft-accent:var(--tt-stone-blue);min-height:250px;isolation:isolate;border-color:rgba(207,184,137,.2);background:linear-gradient(112deg,#132527,#2f4745 48%,#243739 68%,#352c2a);opacity:.62;box-shadow:inset 0 1px rgba(244,229,195,.06),inset 0 -1px rgba(8,14,15,.48);transition:opacity .8s ease}
.tt-transition.is-visible{opacity:1}
.tt-transition::before{content:"";position:absolute;z-index:-1;inset:-30%;background:radial-gradient(ellipse at 27% 50%,color-mix(in srgb,var(--tt-craft-accent) 42%,transparent),transparent 30%),radial-gradient(ellipse at 76% 45%,rgba(208,162,77,.12),transparent 27%),linear-gradient(96deg,transparent 16%,rgba(8,15,16,.48) 16.4% 17%,transparent 17.4%);filter:blur(.2px);transform:translateX(-18%) scaleX(.65);opacity:.15;transition:none}
.tt-transition.is-visible::before{animation:tt-ink-unfurl 1.65s cubic-bezier(.18,.8,.18,1) both}
.tt-transition::after{content:attr(data-craft-label);position:absolute;right:clamp(18px,5vw,76px);bottom:16px;padding:3px 8px;border:1px solid rgba(218,181,105,.24);color:rgba(243,229,198,.64);font-size:8px;font-weight:850;letter-spacing:.16em;opacity:0;transform:translateY(8px);transition:opacity .75s ease 1s,transform .75s ease 1s}
.tt-transition.is-visible::after{opacity:1;transform:none}
.tt-transition-inner{width:min(860px,calc(100% - 46px));grid-template-columns:96px 1fr;gap:29px;opacity:.12;transform:translateY(12px);transition:opacity .85s ease .25s,transform .85s ease .25s}
.tt-transition.is-visible .tt-transition-inner{opacity:1;transform:none}
.tt-transition-inner::before{content:"";position:absolute;z-index:-1;left:33px;top:50%;width:88px;height:1px;background:linear-gradient(90deg,rgba(204,157,76,.8),rgba(204,157,76,.12));transform:rotate(-16deg);transform-origin:left;box-shadow:0 0 0 1px rgba(7,12,13,.18)}
.tt-transition-inner::after{content:"";position:absolute;z-index:-1;right:-34px;top:50%;width:118px;height:118px;border:1px solid color-mix(in srgb,var(--tt-craft-accent) 55%,transparent);border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tt-craft-accent) 18%,transparent),transparent 64%);opacity:.42;transform:translateY(-50%) scale(.55) rotate(-12deg);transition:transform 1.5s cubic-bezier(.2,.8,.18,1) .35s,opacity 1.2s ease .35s}
.tt-transition.is-visible .tt-transition-inner::after{opacity:.78;transform:translateY(-50%) scale(1) rotate(0)}
.tt-transition-puppet{width:79px;height:124px;border-color:rgba(218,176,94,.72);background:radial-gradient(circle at 50% 17%,rgba(225,184,97,.32) 0 3%,transparent 4%),radial-gradient(circle,rgba(219,173,85,.35) 0 1px,transparent 1.5px),linear-gradient(148deg,#111a1b 0 46%,var(--tt-craft-accent) 47% 68%,#322622 69%);background-size:auto,13px 13px,auto;box-shadow:inset 0 0 0 2px rgba(15,23,23,.35);filter:drop-shadow(15px 9px 7px rgba(0,0,0,.48));transform:translateX(-30px) rotate(-5deg) scale(.94);transition:transform 1.25s cubic-bezier(.2,.8,.18,1) .15s}
.tt-transition.is-visible .tt-transition-puppet{transform:none}
.tt-transition small{color:#dfb968}.tt-transition p{color:#f1e7d2;text-shadow:0 2px 15px rgba(0,0,0,.34)}
.tt-transition[data-craft="paper-cut"]{--tt-craft-accent:var(--tt-rouge);background-image:linear-gradient(112deg,#15282a,#3e4d47 48%,#3b2b2c)}
.tt-transition[data-craft="lattice"]{--tt-craft-accent:var(--tt-ochre);background-image:linear-gradient(90deg,transparent 47%,rgba(218,184,116,.08) 48% 52%,transparent 53%),linear-gradient(transparent 47%,rgba(218,184,116,.06) 48% 52%,transparent 53%),linear-gradient(112deg,#172729,#384844,#2b3231);background-size:62px 62px,62px 62px,auto}
.tt-transition[data-craft="lantern"]{--tt-craft-accent:var(--tt-rattan);background-image:radial-gradient(circle at 23% 48%,rgba(208,162,77,.23),transparent 21%),linear-gradient(112deg,#132526,#314543,#392f2b)}
.tt-transition[data-craft="scroll"]{--tt-craft-accent:var(--tt-moon-white);background-image:linear-gradient(90deg,rgba(222,226,214,.08),transparent 16% 84%,rgba(222,226,214,.08)),linear-gradient(112deg,#18292a,#3b4944,#253638)}
.tt-transition[data-craft="seal"]{--tt-craft-accent:var(--tt-cinnabar);background-image:radial-gradient(circle at 76% 48%,rgba(142,61,49,.24),transparent 19%),linear-gradient(112deg,#192729,#3b4642,#33282a)}
.tt-transition[data-craft="woodblock"]{--tt-craft-accent:var(--tt-soot);background-image:repeating-radial-gradient(ellipse at 77% 46%,rgba(223,207,171,.045) 0 1px,transparent 2px 9px),linear-gradient(112deg,#142526,#374743,#213233)}
.tt-transition[data-craft="embroidery"]{--tt-craft-accent:var(--tt-flower-blue);background-image:repeating-linear-gradient(112deg,transparent 0 14px,rgba(210,229,220,.035) 15px 16px),linear-gradient(112deg,#14282b,#364c49,#263438)}
.tt-transition[data-craft="velvet-flower"]{--tt-craft-accent:var(--tt-rouge);background-image:radial-gradient(circle at 77% 48%,rgba(139,68,82,.21),transparent 23%),linear-gradient(112deg,#132728,#334944,#342a2c)}
.tt-transition[data-craft="seal"] .tt-transition-inner::after{border-radius:5px;transform:translateY(-50%) scale(.55) rotate(9deg);box-shadow:inset 0 0 0 5px rgba(142,61,49,.09)}
.tt-transition[data-craft="seal"].is-visible .tt-transition-inner::after{transform:translateY(-50%) scale(1) rotate(-2deg)}
.tt-transition[data-craft="scroll"] .tt-transition-inner::after{width:148px;height:76px;border-radius:2px;background:linear-gradient(90deg,rgba(221,227,214,.18),rgba(255,249,232,.08));box-shadow:-8px 0 0 rgba(184,137,72,.15),8px 0 0 rgba(184,137,72,.15)}
.tt-transition[data-craft="embroidery"] .tt-transition-inner::after{border-style:dashed;box-shadow:0 0 0 8px rgba(208,222,214,.025)}
.tt-transition[data-craft="velvet-flower"] .tt-transition-inner::after{border:0;background:radial-gradient(circle at 50% 50%,#d5a24b 0 8%,transparent 9%),radial-gradient(ellipse at 50% 15%,rgba(139,68,82,.72) 0 17%,transparent 18%),radial-gradient(ellipse at 85% 50%,rgba(158,67,61,.66) 0 17%,transparent 18%),radial-gradient(ellipse at 50% 85%,rgba(113,57,69,.72) 0 17%,transparent 18%),radial-gradient(ellipse at 15% 50%,rgba(151,72,80,.7) 0 17%,transparent 18%);filter:drop-shadow(0 7px 7px rgba(0,0,0,.34))}

.tt-sources{background:linear-gradient(135deg,#dfd1b8,#d8ddcf 75%,#c8d5cf)}
.tt-ending{isolation:isolate;min-height:92vh;background:var(--tt-soot)}
.tt-ending::before{z-index:-3;background:linear-gradient(0deg,rgba(10,17,18,.95),rgba(15,25,25,.35) 55%,rgba(15,28,29,.6)),linear-gradient(100deg,rgba(49,94,107,.24),transparent 44%,rgba(139,68,82,.13)),url("./art/tian-tian-ink-paper-documentary-20260815.webp") center/cover no-repeat;filter:saturate(.78) sepia(.09);transform:scale(1.095) translateX(-1.3%);transition:transform 8s cubic-bezier(.18,.8,.18,1),filter 5s ease}
.tt-ending.is-visible::before{transform:scale(1.01);filter:saturate(.92) sepia(.04)}
.tt-ending::after{content:"";position:absolute;z-index:-1;inset:0;background:radial-gradient(circle at 75% 24%,rgba(208,162,77,.16),transparent 18%),linear-gradient(90deg,rgba(9,16,17,.78),transparent 25% 75%,rgba(9,16,17,.7));opacity:.35;transition:opacity 4s ease 1s}
.tt-ending.is-visible::after{opacity:1}
.tt-ending-craft{position:absolute;z-index:0;inset:0;pointer-events:none}
.tt-ending-scroll{position:absolute;left:8%;right:8%;bottom:11%;height:72%;border:1px solid rgba(225,196,135,.2);background:linear-gradient(90deg,rgba(224,219,196,.06),rgba(215,229,219,.025) 47%,rgba(236,216,180,.07));box-shadow:-12px 0 rgba(181,135,69,.08),12px 0 rgba(181,135,69,.08),inset 0 0 80px rgba(5,11,12,.42);transform:scaleX(.035);opacity:.18;transition:transform 2.6s cubic-bezier(.2,.8,.18,1),opacity 1.8s ease;transform-origin:center}
.tt-ending.is-visible .tt-ending-scroll{transform:scaleX(1);opacity:.62}
.tt-ending-lantern{position:absolute;bottom:-60px;width:24px;height:34px;border:1px solid rgba(228,186,100,.65);border-radius:45% 45% 38% 38%;background:radial-gradient(circle,rgba(242,199,104,.82),rgba(139,68,82,.58) 62%,rgba(54,32,31,.75));box-shadow:0 0 22px rgba(222,174,80,.18);opacity:0}
.tt-ending-lantern::before{content:"";position:absolute;left:50%;top:-17px;width:1px;height:17px;background:rgba(223,190,125,.48)}
.tt-ending-lantern::after{content:"";position:absolute;left:50%;bottom:-15px;width:1px;height:15px;background:rgba(223,190,125,.5);box-shadow:-3px 6px rgba(223,190,125,.28),3px 8px rgba(223,190,125,.28)}
.tt-ending-lantern--one{left:73%}.tt-ending-lantern--two{left:84%;transform:scale(.72)}
.tt-ending.is-visible .tt-ending-lantern--one{animation:tt-lantern-rise 7.8s ease-out 1.2s both}
.tt-ending.is-visible .tt-ending-lantern--two{animation:tt-lantern-rise 8.8s ease-out 2.15s both}
.tt-ending-flower{position:absolute;right:9%;bottom:12%;width:66px;height:66px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#d2a24e 0 8%,transparent 9%),radial-gradient(ellipse at 50% 14%,rgba(139,68,82,.88) 0 17%,transparent 18%),radial-gradient(ellipse at 86% 50%,rgba(157,70,60,.8) 0 17%,transparent 18%),radial-gradient(ellipse at 50% 86%,rgba(112,57,70,.86) 0 17%,transparent 18%),radial-gradient(ellipse at 14% 50%,rgba(149,75,84,.82) 0 17%,transparent 18%);filter:drop-shadow(0 8px 7px rgba(0,0,0,.42));opacity:0;transform:scale(.18) rotate(-20deg)}
.tt-ending-flower--two{right:4.5%;bottom:8%;width:38px;height:38px;filter:saturate(.75) drop-shadow(0 5px 5px rgba(0,0,0,.4))}
.tt-ending.is-visible .tt-ending-flower--one{animation:tt-velvet-open 1.7s cubic-bezier(.2,.8,.18,1) 3.1s both}
.tt-ending.is-visible .tt-ending-flower--two{animation:tt-velvet-open 1.6s cubic-bezier(.2,.8,.18,1) 3.75s both}
.tt-ending-copy{z-index:2;max-width:880px}
.tt-ending-copy>*{opacity:0;transform:translateY(16px)}
.tt-ending.is-visible .tt-ending-copy>*{animation:tt-ending-copy .9s ease both}
.tt-ending.is-visible .tt-ending-copy>small{animation-delay:1.15s}
.tt-ending.is-visible .tt-ending-copy>h2{animation-delay:1.35s}
.tt-ending.is-visible .tt-ending-copy>p{animation-delay:1.65s}
.tt-ending.is-visible .tt-ending-copy>.tt-ending-question{animation-delay:2.15s}
.tt-ending.is-visible .tt-ending-copy>.tt-ending-seal{animation:tt-seal-stamp .65s cubic-bezier(.15,.85,.2,1.25) 2.85s both}
.tt-ending.is-visible .tt-ending-copy>.tt-ending-actions{animation-delay:3.2s}
.tt-ending-question{position:relative;width:max-content;max-width:100%;padding-bottom:12px}
.tt-ending-question::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--tt-rattan),var(--tt-rouge),transparent);transform:scaleX(0);transform-origin:left}
.tt-ending.is-visible .tt-ending-question::after{animation:tt-brush-draw 1.4s ease 2.65s both}
.tt-ending-seal{display:grid;place-items:center;width:50px;height:50px;margin:19px 0 0;border:2px solid rgba(203,94,73,.76);color:#d77b66!important;font-family:var(--tt-serif);font-size:24px;font-weight:900;line-height:1;transform:scale(1.7) rotate(-7deg);opacity:0;box-shadow:inset 0 0 0 3px rgba(154,61,48,.17)}

@keyframes tt-ink-unfurl{0%{opacity:.1;transform:translateX(-18%) scaleX(.65);filter:blur(10px)}55%{opacity:.82}100%{opacity:1;transform:translateX(0) scaleX(1);filter:blur(.2px)}}
@keyframes tt-velvet-bloom{from{transform:scale(.88) rotate(-5deg)}to{transform:scale(1.06) rotate(3deg)}}
@keyframes tt-ending-copy{to{opacity:1;transform:none}}
@keyframes tt-brush-draw{to{transform:scaleX(1)}}
@keyframes tt-seal-stamp{0%{opacity:0;transform:scale(1.7) rotate(-7deg)}70%{opacity:.9;transform:scale(.88) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes tt-lantern-rise{0%{opacity:0;translate:0 0;rotate:-4deg}12%{opacity:.75}75%{opacity:.5}100%{opacity:0;translate:18px -72vh;rotate:6deg}}
@keyframes tt-velvet-open{0%{opacity:0;transform:scale(.18) rotate(-20deg)}72%{opacity:.92;transform:scale(1.08) rotate(4deg)}100%{opacity:.86;transform:scale(1) rotate(0)}}

/* Four-language typography. */
html[lang="zh-Hans"] .tt-page{--tt-sans:"Microsoft YaHei UI","Microsoft YaHei","Noto Sans SC","Source Han Sans SC","PingFang SC",sans-serif;--tt-serif:"Noto Serif SC","Source Han Serif SC","SimSun",serif;font-family:var(--tt-sans);font-synthesis:none}
html[lang="en"] .tt-page{--tt-sans:"Noto Sans",Arial,"Helvetica Neue",sans-serif;--tt-serif:Georgia,"Times New Roman",serif;line-height:1.78}
html[lang="ja"] .tt-page{--tt-sans:"Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;--tt-serif:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;line-break:strict;word-break:normal}
html[lang="en"] .tt-hero h1{font-size:clamp(43px,5.3vw,72px);letter-spacing:-.035em;line-height:1.05}
html[lang="en"] .tt-subtitle{font-size:clamp(21px,2.4vw,31px)}
html[lang="en"] .tt-prose h2{font-size:clamp(29px,3.7vw,43px);letter-spacing:-.02em}
html[lang="en"] .tt-opening-line span{font-size:clamp(19px,2.4vw,29px);line-height:1.62}
html[lang="en"] .tt-prose :where(p,li),html[lang="en"] .tt-deck{hyphens:auto;overflow-wrap:break-word}
html[lang="ja"] .tt-hero h1{font-size:clamp(39px,5vw,65px);line-height:1.25;letter-spacing:0}
html[lang="ja"] .tt-subtitle{font-size:clamp(21px,2.5vw,31px);line-height:1.55}
html[lang="ja"] .tt-prose h2{font-size:clamp(29px,3.6vw,42px);line-height:1.55}
html[lang="ja"] .tt-opening-line span{font-size:clamp(19px,2.4vw,28px);line-height:1.78}
html[lang="ja"] .tt-prose :where(p,li),html[lang="ja"] .tt-deck{line-break:strict;overflow-wrap:break-word}

@media(max-width:900px){
  .tt-stage{grid-template-columns:1fr;align-items:center;min-height:84vh;padding-top:38px}
  .tt-stage-craft{display:none}
  .tt-opening-lines{min-height:260px}
  .tt-hero-grid{grid-template-columns:1fr;gap:28px}
  .tt-hero-art{max-width:720px}
  .tt-guide-card{grid-template-columns:1fr}
  .tt-chapter-grid{grid-template-columns:100px minmax(0,1fr);gap:25px}
  .tt-source-grid{grid-template-columns:1fr 1fr}
  .tt-ending-flower{right:5%}.tt-ending-lantern--one{left:82%}.tt-ending-lantern--two{left:91%}
}
@media(max-width:620px){
  body.tt-page{font-size:15px}
  .tt-shell{width:min(100% - 28px,1180px)}
  .tt-topbar-inner{min-height:64px}
  .tt-brand span{font-size:12px}.tt-brand small{display:none}
  .tt-language a{min-width:31px;padding-inline:5px}
  .tt-breadcrumb{padding-top:12px;overflow-wrap:anywhere}
  .tt-opening::after{inset:8px}
  .tt-stage{width:calc(100% - 22px);padding:30px 21px;min-height:88vh}
  .tt-opening-kicker{letter-spacing:.13em}
  .tt-opening-lines{min-height:330px}
  .tt-opening-line span{font-size:21px;line-height:1.72}
  .tt-opening-controls{align-items:flex-start}.tt-opening-steps{width:100%;margin:8px 0 0}.tt-opening-steps button{flex:1}
  .tt-opening-note{right:18px;bottom:15px}
  .tt-hero{padding-top:25px;padding-bottom:65px}
  .tt-hero h1{font-size:clamp(44px,15vw,63px)}
  html[lang="en"] .tt-hero h1{font-size:clamp(36px,11.5vw,48px);line-height:1.1}
  html[lang="ja"] .tt-hero h1{font-size:clamp(33px,10vw,43px);line-height:1.35}
  .tt-subtitle{font-size:23px}.tt-deck{font-size:15px;line-height:1.9}
  .tt-craft-key{gap:5px}.tt-craft-key span{padding:4px 7px;font-size:8px}
  .tt-guide{margin-top:-25px}.tt-guide-card{padding:20px}.tt-guide-links{grid-template-columns:1fr 1fr}
  .tt-chapter{padding:56px 0}.tt-chapter-grid{grid-template-columns:1fr;gap:13px}
  .tt-chapter-mark{position:static;display:flex;align-items:center;gap:10px;padding:0}.tt-chapter-mark b{font-size:33px}.tt-chapter-mark small{max-width:160px}
  .tt-prose h2{font-size:31px;line-height:1.45}.tt-prose p{font-size:15px;line-height:1.95}.tt-prose .tt-lead{font-size:17px}
  html[lang="en"] .tt-prose h2{font-size:29px;line-height:1.35}
  html[lang="ja"] .tt-prose h2{font-size:28px;line-height:1.55}
  .tt-fact-grid,.tt-verdict-grid,.tt-action-grid{grid-template-columns:1fr}
  .tt-editorial-rule{grid-template-columns:1fr}
  .tt-classic{padding:22px 20px}.tt-classic::before{right:16px}.tt-classic::after{right:24px}.tt-classic blockquote{margin-right:46px;font-size:21px}.tt-classic-explain{font-size:12px!important}
  .tt-transition{min-height:215px}.tt-transition-inner{grid-template-columns:54px 1fr;gap:16px}.tt-transition-puppet{width:50px;height:85px}.tt-transition p{font-size:18px}.tt-transition-inner::before{left:22px;width:54px}.tt-transition-inner::after{right:-54px;width:90px;height:90px}.tt-transition::after{right:14px;bottom:9px;font-size:7px}
  .tt-source-grid{grid-template-columns:1fr}
  .tt-ending{min-height:92vh}.tt-ending-copy{padding-block:70px 92px}.tt-ending h2{font-size:42px}.tt-ending p{font-size:16px}.tt-ending-flower{right:-8px;bottom:7%;width:48px;height:48px}.tt-ending-flower--two{display:none}.tt-ending-lantern--one{left:86%}.tt-ending-lantern--two{display:none}.tt-ending-scroll{left:3%;right:3%}
  .tt-replay{right:10px;bottom:10px;padding:8px 12px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tt-opening{display:none}
  .tt-chapter,.tt-transition{opacity:1;transform:none}
  .tt-hero-art img{transform:none!important}
  .tt-chapter::before,.tt-prose h2::after,.tt-transition::before,.tt-transition::after,.tt-transition-inner,.tt-transition-puppet,.tt-transition-inner::after,.tt-ending-scroll,.tt-ending-copy>*,.tt-ending-question::after,.tt-ending-seal{opacity:1!important;transform:none!important}
  .tt-ending-lantern{display:none!important}.tt-ending-flower{opacity:.75!important;transform:none!important}
}
@media print{
  .tt-opening,.tt-reading-progress,.tt-topbar,.tt-replay,.tt-transition{display:none!important}
  body.tt-page{background:#fff;color:#000}
  .tt-hero,.tt-content,.tt-sources{background:#fff}
  .tt-chapter{opacity:1;transform:none;break-inside:avoid}
  .tt-shell{width:100%}
  .tt-ending{min-height:auto;background:#fff;color:#000}.tt-ending::before{display:none}.tt-ending p{color:#000}.tt-ending-craft{display:none}.tt-ending-copy>*{opacity:1;transform:none}
}

/* Art direction v3: One Lantern, Eight Acts — original shadow theatre. */
.tt-chapter,.tt-transition-inner,.tt-ending-copy>*{opacity:1;transform:none}
.tt-transition{opacity:1}
html.tt-motion-ready .tt-chapter:not(.is-visible){opacity:0;transform:translateY(18px)}
html.tt-motion-ready .tt-transition:not(.is-visible){opacity:.68}
html.tt-motion-ready .tt-transition:not(.is-visible) .tt-transition-inner{opacity:.12;transform:translateY(12px)}
html.tt-motion-ready .tt-ending:not(.is-visible) .tt-ending-copy>*{opacity:0;transform:translateY(16px)}

.tt-transition[data-shadow-scene]{
  --tt-stage-amber:#d8a85e;
  --tt-stage-light:#f2d49a;
  --tt-stage-red:#8b302e;
  --tt-stage-green:#526f5c;
  min-height:clamp(390px,54vh,520px);
  background:
    linear-gradient(90deg,rgba(22,15,12,.96),rgba(63,39,27,.44) 27%,rgba(84,50,31,.22) 52%,rgba(41,26,21,.55) 76%,rgba(17,13,12,.96)),
    radial-gradient(ellipse at 30% 49%,#d5a25d 0,#9b6039 34%,#39251d 66%,#171311 100%);
  border-color:rgba(232,190,111,.28);
  box-shadow:inset 0 1px rgba(255,231,182,.12),inset 0 -1px rgba(4,2,2,.72),0 18px 52px rgba(35,24,18,.12);
}
.tt-transition[data-shadow-scene]::before{
  z-index:0;
  inset:0;
  background:
    repeating-linear-gradient(92deg,rgba(255,246,220,.025) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(3deg,rgba(40,24,17,.035) 0 1px,transparent 1px 7px),
    radial-gradient(ellipse at 27% 50%,rgba(244,205,139,.22),transparent 41%);
  opacity:.55;
  transform:none;
  filter:none;
}
.tt-transition[data-shadow-scene].is-visible::before{animation:tt-shadow-screen-glow 7.2s ease both}
.tt-transition[data-shadow-scene]::after{z-index:5;right:clamp(15px,3vw,42px);bottom:12px;border-color:rgba(239,198,119,.34);background:rgba(34,22,17,.32);color:rgba(251,225,171,.72)}
.tt-transition[data-shadow-scene] .tt-transition-inner{
  z-index:2;
  width:min(1100px,calc(100% - 44px));
  grid-template-columns:minmax(270px,350px) minmax(0,1fr);
  gap:clamp(28px,5vw,70px);
  align-items:center;
}
.tt-transition[data-shadow-scene] .tt-transition-inner::before,.tt-transition[data-shadow-scene] .tt-transition-inner::after{display:none}

.tt-shadow-stage{
  position:relative;
  width:100%;
  height:300px;
  contain:layout paint;
  isolation:isolate;
  overflow:hidden;
  border:1px solid rgba(64,38,24,.8);
  background:radial-gradient(ellipse at 45% 46%,#f0d39b 0,#d3a05b 38%,#8f5734 69%,#2b1d18 100%);
  box-shadow:inset 0 0 0 7px rgba(40,24,17,.2),inset 0 0 72px rgba(24,13,9,.78),18px 22px 32px rgba(8,5,4,.28);
}
.tt-shadow-screen,.tt-shadow-vignette,.tt-shadow-props,.tt-shadow-stage i,.tt-shadow-stage svg,.tt-shadow-figure{position:absolute;display:block}
.tt-shadow-screen{z-index:-3;inset:0;background:repeating-linear-gradient(91deg,rgba(255,247,220,.06) 0 1px,transparent 1px 4px),repeating-linear-gradient(0deg,rgba(66,39,24,.035) 0 1px,transparent 1px 6px);mix-blend-mode:soft-light;opacity:.7}
.tt-shadow-vignette{z-index:8;inset:-2px;box-shadow:inset 0 0 68px 25px rgba(25,14,10,.66);pointer-events:none}
.tt-shadow-props{z-index:1;inset:0}
.tt-shadow-line{inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tt-shadow-line path{fill:none;stroke:rgba(117,39,35,.84);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;vector-effect:non-scaling-stroke;filter:drop-shadow(4px 4px 2px rgba(39,19,12,.25))}

.tt-shadow-figure{
  --tt-figure-dress:rgba(126,43,42,.9);
  --tt-figure-trim:rgba(197,143,65,.88);
  z-index:4;
  bottom:10px;
  width:58px;
  height:136px;
  opacity:.92;
  transform-origin:50% 94%;
  filter:drop-shadow(15px 9px 5px rgba(35,18,12,.52));
}
.tt-shadow-figure--woman{left:7%}
.tt-shadow-figure--scribe{right:7%;--tt-figure-dress:rgba(42,76,77,.94);--tt-figure-trim:rgba(181,135,62,.82);transform:scale(.94) rotate(2deg)}
.tt-shadow-figure i{border:1px solid rgba(71,39,24,.88);box-shadow:inset 0 0 0 1px rgba(235,188,100,.14)}
.tt-shadow-cast{z-index:-2;left:23px;top:15px;width:91px;height:126px;border:0!important;background:rgba(39,20,14,.3);clip-path:polygon(5% 6%,35% 0,54% 26%,66% 41%,100% 100%,18% 88%);transform:skewX(10deg) scaleX(1.12);filter:blur(2px)}
.tt-shadow-crown{z-index:3;left:13px;top:-1px;width:34px;height:20px;background:linear-gradient(90deg,var(--tt-figure-trim),rgba(31,25,22,.95));clip-path:polygon(0 100%,11% 30%,29% 65%,45% 0,60% 62%,84% 22%,100% 100%)}
.tt-shadow-head{z-index:4;left:18px;top:12px;width:25px;height:29px;border-radius:48% 45% 54% 46%;background:radial-gradient(circle at 64% 42%,rgba(226,183,91,.82) 0 4%,transparent 5%),linear-gradient(112deg,rgba(236,183,88,.75),rgba(73,39,29,.96) 55%)}
.tt-shadow-head::after{content:"";position:absolute;right:-8px;top:8px;width:9px;height:10px;border-top:1px solid rgba(47,24,18,.9);transform:rotate(18deg)}
.tt-shadow-body{z-index:2;left:9px;top:38px;width:43px;height:51px;background:linear-gradient(135deg,rgba(38,29,26,.98),var(--tt-figure-dress) 48%,rgba(52,37,29,.96));clip-path:polygon(19% 0,83% 0,100% 95%,0 100%)}
.tt-shadow-body::after{content:"";position:absolute;inset:8px 9px 11px;border:1px solid var(--tt-figure-trim);background:repeating-linear-gradient(45deg,transparent 0 6px,rgba(224,171,76,.22) 6px 7px)}
.tt-shadow-skirt{z-index:1;left:3px;top:83px;width:54px;height:51px;background:linear-gradient(90deg,rgba(34,27,25,.98),var(--tt-figure-dress) 55%,rgba(37,28,25,.98));clip-path:polygon(15% 0,85% 0,100% 100%,0 100%)}
.tt-shadow-arm{z-index:5;height:8px;border-radius:8px;background:linear-gradient(90deg,var(--tt-figure-dress),rgba(45,30,26,.98));transform-origin:4px 50%}
.tt-shadow-arm--upper{left:34px;top:46px;width:38px;transform:rotate(-18deg)}
.tt-shadow-arm--lower{left:65px;top:35px;width:32px;transform:rotate(-48deg)}
.tt-shadow-arm--lower::after{content:"";position:absolute;right:-5px;top:-2px;width:6px;height:10px;border-radius:50%;background:rgba(197,147,71,.82)}
.tt-shadow-rod{z-index:-1;width:104px;height:2px;border:0!important;background:linear-gradient(90deg,rgba(42,25,18,.86),rgba(42,25,18,.2));transform-origin:left center;box-shadow:0 1px rgba(243,195,109,.08)}
.tt-shadow-rod--front{left:65px;top:38px;transform:rotate(-12deg)}
.tt-shadow-rod--rear{left:31px;top:70px;transform:rotate(13deg)}

.tt-shadow-dialogue{min-width:0}
.tt-shadow-dialogue>small{display:block;margin-bottom:12px;color:#efc474;font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.tt-shadow-dialogue>p{
  margin:0 0 10px;
  color:#f4e8ce;
  font-family:var(--tt-serif);
  font-size:clamp(15px,1.45vw,19px);
  line-height:1.78;
  text-shadow:0 2px 16px rgba(0,0,0,.58);
  text-wrap:pretty;
  opacity:1;
  transform:none;
}
.tt-shadow-dialogue>p b{display:block;margin-bottom:1px;color:#e2af58;font-family:var(--tt-sans);font-size:10px;font-weight:900;letter-spacing:.13em;line-height:1.55}
.tt-shadow-dialogue>p[data-speaker="scribe"] b{color:#c8d7ce}
.tt-shadow-dialogue>p[data-speaker="together"]{padding-top:7px;border-top:1px solid rgba(237,193,111,.2);color:#f7d999}
html.tt-motion-ready .tt-transition:not(.is-visible) .tt-shadow-dialogue>p{opacity:0;transform:translateY(10px)}
.tt-transition.is-visible .tt-shadow-dialogue>p{animation:tt-shadow-dialogue-rise .8s ease both}
.tt-transition.is-visible .tt-shadow-dialogue>p:nth-of-type(1){animation-delay:.75s}
.tt-transition.is-visible .tt-shadow-dialogue>p:nth-of-type(2){animation-delay:1.55s}
.tt-transition.is-visible .tt-shadow-dialogue>p:nth-of-type(3){animation-delay:2.35s}
html[lang="en"] .tt-shadow-dialogue>p{font-size:clamp(14px,1.2vw,17px);line-height:1.68}
html[lang="ja"] .tt-shadow-dialogue>p{font-size:clamp(14px,1.25vw,17px);line-height:1.82}
html[lang="en"] .tt-shadow-dialogue>small,html[lang="en"] .tt-shadow-dialogue>p b{letter-spacing:.1em}

/* Act I: the kite thread travels beyond the roofs. */
.tt-shadow-roof{left:0;right:0;bottom:-1px;height:74px;background:linear-gradient(155deg,transparent 0 14%,rgba(50,30,22,.88) 14.5% 23%,transparent 23.5% 30%,rgba(44,27,21,.9) 30.5% 47%,transparent 47.5% 55%,rgba(50,29,22,.86) 55.5% 73%,transparent 73.5%),linear-gradient(0deg,rgba(39,25,20,.95) 0 38%,transparent 39%);opacity:.78}
.tt-shadow-kite{z-index:3;left:42%;top:36px;width:43px;height:48px;background:linear-gradient(135deg,rgba(139,48,46,.92),rgba(202,145,65,.72) 49%,rgba(55,86,73,.8) 50%);clip-path:polygon(50% 0,100% 48%,52% 100%,0 52%);filter:drop-shadow(12px 8px 4px rgba(48,24,16,.38));transform:rotate(-10deg)}
.tt-shadow-kite::before{content:"";position:absolute;inset:8px;border:1px solid rgba(54,29,21,.62);transform:rotate(45deg)}
.tt-shadow-kite::after{content:"";position:absolute;left:20px;top:42px;width:4px;height:50px;background:repeating-linear-gradient(180deg,rgba(102,35,34,.9) 0 7px,transparent 7px 11px);transform:rotate(13deg);transform-origin:top}
.tt-shadow-thread{z-index:2}
.tt-transition[data-shadow-scene="wind-kite"].is-visible .tt-shadow-kite{animation:tt-kite-cross 6.5s cubic-bezier(.2,.7,.2,1) both}
.tt-transition[data-shadow-scene="wind-kite"].is-visible .tt-shadow-thread path{animation:tt-line-draw 2.5s ease .45s both,tt-thread-loosen 2.5s ease 3.1s both}

/* Act II: ten knots appear while the joined door closes to one slit. */
.tt-shadow-door{z-index:1;left:24%;right:24%;top:22px;bottom:5px;border:2px solid rgba(66,39,27,.7);box-shadow:inset 0 0 30px rgba(60,31,22,.26)}
.tt-shadow-door::before,.tt-shadow-door::after{content:"";position:absolute;top:0;bottom:0;width:49%;border:1px solid rgba(82,47,29,.72);background:linear-gradient(90deg,rgba(49,35,28,.88),rgba(117,60,38,.53)),repeating-linear-gradient(0deg,transparent 0 25px,rgba(229,178,92,.12) 26px 27px);box-shadow:inset 0 0 18px rgba(28,16,12,.5)}
.tt-shadow-door::before{left:0}.tt-shadow-door::after{right:0}
.tt-shadow-lattice{z-index:2;left:27%;right:27%;top:32px;bottom:16px;background:linear-gradient(90deg,transparent 47%,rgba(52,32,25,.76) 48% 52%,transparent 53%),linear-gradient(transparent 47%,rgba(52,32,25,.72) 48% 52%,transparent 53%);background-size:38px 38px;opacity:.78;transform:scale(.94)}
.tt-shadow-knot-cord{z-index:4;left:11%;right:11%;top:48px;height:18px;border-top:2px solid rgba(126,39,37,.76);display:flex!important;justify-content:space-between}
.tt-shadow-knot{position:relative!important;top:-5px;width:9px;height:9px;border:2px solid rgba(130,41,39,.88)!important;border-radius:50%;background:rgba(202,146,68,.7);opacity:.88;transform:scale(1)}
.tt-transition[data-shadow-scene="ten-knot-door"].is-visible .tt-shadow-door::before{animation:tt-door-left 4.8s cubic-bezier(.2,.75,.2,1) both}
.tt-transition[data-shadow-scene="ten-knot-door"].is-visible .tt-shadow-door::after{animation:tt-door-right 4.8s cubic-bezier(.2,.75,.2,1) both}
.tt-transition[data-shadow-scene="ten-knot-door"].is-visible .tt-shadow-lattice{animation:tt-lattice-lock 4.6s ease both}
.tt-transition[data-shadow-scene="ten-knot-door"].is-visible .tt-shadow-knot{animation:tt-knot-light .65s ease calc(.55s + var(--tt-delay-knot)) both}

/* Act III: a painted lantern trembles while frost enters the screen. */
.tt-shadow-lantern{z-index:3;left:43%;top:57px;width:48px;height:68px;border:2px solid rgba(78,42,27,.82);border-radius:46% 46% 38% 38%;background:radial-gradient(circle at 50% 46%,rgba(246,207,119,.94),rgba(181,82,47,.76) 47%,rgba(77,42,32,.9) 76%);box-shadow:0 0 28px rgba(235,178,77,.35);transform-origin:50% -30px}
.tt-shadow-lantern::before{content:"";position:absolute;left:50%;top:-31px;width:1px;height:31px;background:rgba(62,34,24,.8)}
.tt-shadow-lantern::after{content:"";position:absolute;left:8px;right:8px;bottom:10px;height:1px;background:rgba(78,40,27,.7);box-shadow:0 -20px rgba(78,40,27,.56)}
.tt-shadow-wick{z-index:4;left:calc(43% + 21px);top:81px;width:7px;height:17px;border:0!important;border-radius:50% 50% 45% 45%;background:linear-gradient(#fff0bd,#db8e43 70%,transparent);filter:drop-shadow(0 0 7px rgba(249,205,112,.8));transform-origin:50% 100%}
.tt-shadow-frost{z-index:5;inset:0;background:repeating-radial-gradient(circle at 9% 14%,transparent 0 19px,rgba(222,231,218,.22) 20px 21px,transparent 22px 34px),linear-gradient(115deg,rgba(223,234,226,.17),transparent 27% 73%,rgba(218,228,219,.16));opacity:.62;clip-path:polygon(0 0,28% 0,18% 22%,33% 37%,14% 55%,28% 70%,0 100%,100% 100%,100% 75%,87% 64%,100% 49%,88% 31%,100% 17%,100% 0)}
.tt-shadow-date{z-index:4;left:39%;bottom:35px;width:82px;height:1px;background:rgba(63,37,27,.58)}
.tt-shadow-date::before,.tt-shadow-date::after{position:absolute;top:-18px;color:rgba(63,37,27,.75);font:700 12px/1 Georgia,serif;letter-spacing:.1em}
.tt-shadow-date::before{content:"21";left:9px}.tt-shadow-date::after{content:"12";right:9px}
.tt-transition[data-shadow-scene="frost-lantern"].is-visible .tt-shadow-lantern{animation:tt-lantern-tremble 5.8s ease both}
.tt-transition[data-shadow-scene="frost-lantern"].is-visible .tt-shadow-wick{animation:tt-wick-fade 5.8s ease both}
.tt-transition[data-shadow-scene="frost-lantern"].is-visible .tt-shadow-frost{animation:tt-frost-enter 5.4s ease .25s both}
.tt-transition[data-shadow-scene="frost-lantern"].is-visible .tt-shadow-date{animation:tt-date-mark 1.2s ease 2.5s both}

/* Act IV: the long scroll separates allegation, opinion, finding and sentence. */
.tt-shadow-scroll{z-index:1;left:15%;right:15%;top:42px;height:154px;border:1px solid rgba(86,56,36,.6);background:linear-gradient(90deg,rgba(104,57,36,.85) 0 10px,rgba(237,213,166,.62) 11px calc(100% - 11px),rgba(104,57,36,.85) calc(100% - 10px));box-shadow:-8px 0 rgba(67,40,29,.32),8px 0 rgba(67,40,29,.32),inset 0 0 22px rgba(83,48,29,.26);transform-origin:center}
.tt-shadow-record-line{z-index:2;left:28%;width:44%;height:5px;border:0!important;background:linear-gradient(90deg,rgba(43,42,36,.7),rgba(87,55,36,.44),transparent);top:var(--tt-record-top);transform-origin:left}
.tt-shadow-seal{z-index:3;right:24%;bottom:61px;width:43px;height:43px;border:3px double rgba(139,47,43,.72)!important;background:repeating-linear-gradient(45deg,rgba(137,43,40,.18) 0 3px,transparent 3px 7px);transform:rotate(-5deg)}
.tt-shadow-bars{z-index:0;left:16%;right:16%;top:26px;height:190px;background:repeating-linear-gradient(90deg,transparent 0 40px,rgba(42,29,23,.3) 41px 43px);transform:skewX(-7deg);opacity:.55}
.tt-transition[data-shadow-scene="court-scroll"].is-visible .tt-shadow-scroll{animation:tt-scroll-open 2.1s cubic-bezier(.2,.8,.18,1) both}
.tt-transition[data-shadow-scene="court-scroll"].is-visible .tt-shadow-record-line{animation:tt-record-ink 1.1s ease calc(1.15s + var(--tt-delay-block)) both}
.tt-transition[data-shadow-scene="court-scroll"].is-visible .tt-shadow-seal{animation:tt-shadow-seal 1s cubic-bezier(.15,.85,.2,1.2) 3.05s both}
.tt-transition[data-shadow-scene="court-scroll"].is-visible .tt-shadow-bars{animation:tt-bars-rise 4s ease .5s both}

/* Act V: the stamp becomes a road home and a paper flower follows. */
.tt-shadow-stamp{z-index:4;left:28%;top:46px;width:64px;height:17px;border:0!important;border-radius:3px;background:rgba(57,37,29,.92);transform:rotate(-12deg);transform-origin:13px 50%;box-shadow:41px -27px 0 -2px rgba(49,32,26,.9)}
.tt-shadow-stamp::before{content:"";position:absolute;left:4px;top:13px;width:19px;height:54px;background:rgba(51,33,27,.94);transform:rotate(36deg);transform-origin:top;border-radius:2px}
.tt-shadow-stamp::after{content:"";position:absolute;right:-14px;top:-11px;width:32px;height:38px;border:2px solid rgba(113,39,36,.75);background:rgba(143,50,45,.25)}
.tt-shadow-road{z-index:1}.tt-shadow-road path{stroke:rgba(117,50,42,.72);stroke-width:4}
.tt-shadow-paper-flower{z-index:4;left:31%;bottom:44px;width:34px;height:34px;border:0!important;background:radial-gradient(circle,#d4a456 0 8%,transparent 9%),radial-gradient(ellipse at 50% 12%,rgba(224,224,206,.9) 0 20%,transparent 21%),radial-gradient(ellipse at 88% 50%,rgba(224,224,206,.84) 0 20%,transparent 21%),radial-gradient(ellipse at 50% 88%,rgba(224,224,206,.88) 0 20%,transparent 21%),radial-gradient(ellipse at 12% 50%,rgba(224,224,206,.84) 0 20%,transparent 21%);filter:drop-shadow(5px 5px 3px rgba(43,25,18,.35))}
.tt-shadow-roof-home{z-index:2;right:13%;bottom:19px;width:76px;height:67px;background:linear-gradient(151deg,transparent 0 34%,rgba(52,33,27,.9) 35% 52%,transparent 53%),linear-gradient(90deg,transparent 15%,rgba(53,35,29,.88) 16% 84%,transparent 85%);clip-path:polygon(0 33%,50% 0,100% 33%,90% 35%,90% 100%,10% 100%,10% 35%)}
.tt-transition[data-shadow-scene="seal-road"].is-visible .tt-shadow-stamp{animation:tt-stamp-fall 1.35s cubic-bezier(.2,.8,.2,1) both}
.tt-transition[data-shadow-scene="seal-road"].is-visible .tt-shadow-road path{animation:tt-line-draw 2.5s ease 1.05s both}
.tt-transition[data-shadow-scene="seal-road"].is-visible .tt-shadow-paper-flower{animation:tt-flower-home 4.8s ease 1.25s both}
.tt-transition[data-shadow-scene="seal-road"].is-visible .tt-shadow-roof-home{animation:tt-home-light 2.8s ease 2.5s both}

/* Act VI: four woodblocks print in sequence, separated from blurred conjecture. */
.tt-shadow-block{z-index:3;width:66px;height:59px;border:4px double rgba(62,42,31,.76)!important;background:repeating-linear-gradient(45deg,rgba(52,49,39,.5) 0 2px,transparent 2px 8px),rgba(172,126,68,.32);box-shadow:7px 8px 0 rgba(48,30,23,.22)}
.tt-shadow-block:nth-child(1){left:19%;top:48px}.tt-shadow-block:nth-child(2){left:45%;top:48px}.tt-shadow-block:nth-child(3){left:19%;top:130px}.tt-shadow-block:nth-child(4){left:45%;top:130px}
.tt-shadow-boundary{z-index:4;left:69%;top:27px;bottom:26px;width:3px;border:0!important;background:linear-gradient(rgba(68,48,35,.14),rgba(61,48,36,.86),rgba(68,48,35,.14));transform-origin:top}
.tt-shadow-blurred-record{z-index:1;right:8%;top:62px;width:18%;height:130px;border:0!important;background:repeating-linear-gradient(0deg,rgba(63,45,34,.35) 0 5px,transparent 5px 18px);filter:blur(3px);opacity:.38}
.tt-transition[data-shadow-scene="evidence-blocks"].is-visible .tt-shadow-block{animation:tt-block-print .72s cubic-bezier(.15,.85,.2,1.15) calc(.45s + var(--tt-delay-block)) both}
.tt-transition[data-shadow-scene="evidence-blocks"].is-visible .tt-shadow-boundary{animation:tt-boundary-draw 1.4s ease 2.35s both}
.tt-transition[data-shadow-scene="evidence-blocks"].is-visible .tt-shadow-blurred-record{animation:tt-blur-recede 3.4s ease 1.5s both}

/* Act VII: seven open stitches orbit a moon, leaving a question-thread. */
.tt-shadow-moon{z-index:1;left:50%;top:39px;width:138px;height:138px;margin-left:-69px;border:1px solid rgba(72,57,41,.35);border-radius:50%;background:radial-gradient(circle at 42% 38%,rgba(244,225,175,.82),rgba(198,178,135,.58) 58%,rgba(89,66,45,.28) 70%,transparent 71%);box-shadow:0 0 34px rgba(239,204,131,.25);transform-origin:center}
.tt-shadow-stitches{z-index:3}.tt-shadow-stitches path{stroke:rgba(105,43,45,.86);stroke-width:1.7;stroke-dashoffset:0}
.tt-shadow-hanging-thread{z-index:3;left:50%;top:164px;width:1px;height:116px;border:0!important;background:linear-gradient(rgba(119,46,47,.8),transparent);transform-origin:top}
.tt-transition[data-shadow-scene="seven-moon"].is-visible .tt-shadow-moon{animation:tt-moon-rise 3.2s ease both}
.tt-transition[data-shadow-scene="seven-moon"].is-visible .tt-shadow-stitches path{animation:tt-line-draw .8s ease calc(.45s + var(--tt-delay-stitch)) both}
.tt-transition[data-shadow-scene="seven-moon"].is-visible .tt-shadow-hanging-thread{animation:tt-hanging-thread 1.3s ease 3.05s both}

/* Act VIII: four hands guard the lamp while velvet petals open toward spring. */
.tt-shadow-open-door{z-index:1;right:8%;top:25px;width:94px;height:225px;perspective:300px;border:2px solid rgba(66,39,29,.72)!important;background:linear-gradient(90deg,rgba(48,31,26,.92) 0 48%,rgba(235,195,118,.14) 49% 51%,rgba(48,31,26,.92) 52%)}
.tt-shadow-open-door::before,.tt-shadow-open-door::after{content:"";position:absolute;top:0;bottom:0;width:48%;background:linear-gradient(90deg,rgba(59,39,31,.94),rgba(110,60,39,.56));border:1px solid rgba(55,34,27,.8)}
.tt-shadow-open-door::before{left:0;transform-origin:left}.tt-shadow-open-door::after{right:0;transform-origin:right}
.tt-shadow-guard-lantern{z-index:5;left:48%;top:89px;width:42px;height:58px;border:2px solid rgba(80,43,27,.8)!important;border-radius:45% 45% 36% 36%;background:radial-gradient(circle,rgba(250,217,133,.96),rgba(183,75,47,.8) 58%,rgba(67,39,30,.9));box-shadow:0 0 33px rgba(240,185,82,.48)}
.tt-shadow-guard-lantern::before{content:"";position:absolute;left:50%;top:-40px;width:1px;height:40px;background:rgba(58,35,27,.76)}
.tt-shadow-hand{z-index:4;left:var(--tt-hand-left);bottom:35px;width:78px;height:18px;border-radius:80% 20% 55% 45%;background:linear-gradient(90deg,rgba(51,33,27,.95),rgba(137,66,45,.75));transform:rotate(var(--tt-hand-angle));transform-origin:left center;opacity:.88}
.tt-shadow-hand::after{content:"";position:absolute;right:-11px;top:0;width:22px;height:8px;border-radius:50%;background:rgba(93,51,37,.86);box-shadow:1px 5px rgba(93,51,37,.78),2px 10px rgba(93,51,37,.72)}
.tt-shadow-bloom{z-index:5;right:15%;top:49px;width:72px;height:72px;border:0!important}
.tt-shadow-petal{left:29px;top:4px;width:15px;height:32px;border:0!important;border-radius:70% 30% 70% 30%;background:linear-gradient(rgba(143,52,57,.92),rgba(193,104,68,.72));transform:rotate(var(--tt-petal-angle));transform-origin:50% 32px;filter:drop-shadow(3px 4px 2px rgba(45,26,19,.25))}
.tt-shadow-bloom::after{content:"";position:absolute;left:28px;top:28px;width:17px;height:17px;border-radius:50%;background:#d4a34f;box-shadow:0 0 0 4px rgba(114,51,43,.18)}
.tt-transition[data-shadow-scene="guarded-lamp"].is-visible .tt-shadow-open-door::before{animation:tt-open-left 4.5s ease 1.1s both}
.tt-transition[data-shadow-scene="guarded-lamp"].is-visible .tt-shadow-open-door::after{animation:tt-open-right 4.5s ease 1.1s both}
.tt-transition[data-shadow-scene="guarded-lamp"].is-visible .tt-shadow-guard-lantern{animation:tt-guard-lantern 5.8s ease .35s both}
.tt-transition[data-shadow-scene="guarded-lamp"].is-visible .tt-shadow-hand{animation:tt-hand-reach 1.45s ease calc(.45s + var(--tt-delay-knot)) both}
.tt-transition[data-shadow-scene="guarded-lamp"].is-visible .tt-shadow-petal{animation:tt-petal-open 1.1s cubic-bezier(.2,.8,.2,1.2) calc(2.2s + var(--tt-delay-petal)) both}

/* Shared puppet choreography. */
.tt-transition.is-visible .tt-shadow-figure--woman{animation:tt-shadow-woman 6.8s cubic-bezier(.2,.75,.2,1) both}
.tt-transition.is-visible .tt-shadow-figure--scribe{animation:tt-shadow-scribe 6.8s cubic-bezier(.2,.75,.2,1) .16s both}
.tt-transition.is-visible .tt-shadow-figure--woman .tt-shadow-arm--upper{animation:tt-woman-upper 3.8s ease .65s both}
.tt-transition.is-visible .tt-shadow-figure--woman .tt-shadow-arm--lower{animation:tt-woman-lower 3.8s ease .82s both}
.tt-transition.is-visible .tt-shadow-figure--scribe .tt-shadow-arm--upper{animation:tt-scribe-upper 4.1s ease 1.18s both}
.tt-transition.is-visible .tt-shadow-figure--scribe .tt-shadow-arm--lower{animation:tt-scribe-lower 4.1s ease 1.35s both}

@keyframes tt-shadow-screen-glow{0%{opacity:.34}38%{opacity:.72}100%{opacity:.55}}
@keyframes tt-shadow-dialogue-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes tt-shadow-woman{0%{opacity:0;transform:translateX(-32px) rotate(-6deg)}22%{opacity:.94;transform:translateX(0) rotate(1deg)}68%{transform:translateX(2px) rotate(-.7deg)}100%{opacity:.92;transform:none}}
@keyframes tt-shadow-scribe{0%{opacity:0;transform:translateX(33px) scale(.94) rotate(7deg)}24%{opacity:.9;transform:translateX(0) scale(.94) rotate(1deg)}70%{transform:translateX(-2px) scale(.94) rotate(2.5deg)}100%{opacity:.9;transform:scale(.94) rotate(2deg)}}
@keyframes tt-woman-upper{0%{transform:rotate(-33deg)}45%,100%{transform:rotate(-18deg)}}
@keyframes tt-woman-lower{0%{transform:rotate(-70deg)}52%,100%{transform:rotate(-48deg)}}
@keyframes tt-scribe-upper{0%{transform:rotate(-2deg)}45%,100%{transform:rotate(-18deg)}}
@keyframes tt-scribe-lower{0%{transform:rotate(-25deg)}52%,100%{transform:rotate(-48deg)}}
@keyframes tt-line-draw{from{stroke-dashoffset:1;opacity:.15}to{stroke-dashoffset:0;opacity:1}}
@keyframes tt-kite-cross{0%{opacity:0;transform:translate(-92px,37px) rotate(-28deg) scale(.75)}18%{opacity:1}52%{transform:translate(24px,-10px) rotate(9deg) scale(1)}76%{transform:translate(53px,-2px) rotate(-4deg)}100%{opacity:.88;transform:translate(72px,13px) rotate(14deg) scale(.94)}}
@keyframes tt-thread-loosen{0%,42%{transform:none;opacity:1}100%{transform:translateY(12px) rotate(2deg);opacity:.64}}
@keyframes tt-door-left{0%{transform:translateX(-72%)}60%,100%{transform:none}}
@keyframes tt-door-right{0%{transform:translateX(72%)}60%,100%{transform:none}}
@keyframes tt-lattice-lock{0%{opacity:0;transform:scale(1.22)}55%,100%{opacity:.78;transform:scale(.94)}}
@keyframes tt-knot-light{0%{opacity:0;transform:scale(.2)}65%{opacity:1;transform:scale(1.25)}100%{opacity:.88;transform:scale(1)}}
@keyframes tt-lantern-tremble{0%{opacity:0;transform:rotate(-8deg) translateY(9px)}18%{opacity:1}32%{transform:rotate(5deg)}49%{transform:rotate(-4deg)}66%{transform:rotate(2deg)}100%{opacity:.78;transform:rotate(0)}}
@keyframes tt-wick-fade{0%{opacity:0;transform:scale(.65)}20%{opacity:1}68%{opacity:.9;transform:scale(1)}100%{opacity:.35;transform:scale(.55)}}
@keyframes tt-frost-enter{0%{opacity:0;transform:scale(1.1)}100%{opacity:.62;transform:none}}
@keyframes tt-date-mark{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}
@keyframes tt-scroll-open{0%{opacity:.2;transform:scaleX(.05)}100%{opacity:1;transform:scaleX(1)}}
@keyframes tt-record-ink{from{opacity:0;transform:scaleX(.08)}to{opacity:1;transform:scaleX(1)}}
@keyframes tt-shadow-seal{0%{opacity:0;transform:scale(1.8) rotate(-11deg)}70%{opacity:1;transform:scale(.88) rotate(-2deg)}100%{opacity:.9;transform:scale(1) rotate(-5deg)}}
@keyframes tt-bars-rise{0%{opacity:0;transform:translateY(26px) skewX(-7deg)}100%{opacity:.55;transform:skewX(-7deg)}}
@keyframes tt-stamp-fall{0%{opacity:0;transform:translateY(-58px) rotate(-20deg)}72%{opacity:1;transform:translateY(6px) rotate(-8deg)}100%{opacity:.92;transform:rotate(-12deg)}}
@keyframes tt-flower-home{0%{opacity:0;transform:translate(-42px,-35px) rotate(-28deg) scale(.55)}18%{opacity:1}100%{opacity:.92;transform:translate(142px,-22px) rotate(15deg) scale(1)}}
@keyframes tt-home-light{from{opacity:.25;filter:brightness(.72)}to{opacity:1;filter:brightness(1.13)}}
@keyframes tt-block-print{0%{opacity:0;transform:translateY(-35px) scale(1.16)}70%{opacity:1;transform:translateY(5px) scale(.96)}100%{opacity:.9;transform:none}}
@keyframes tt-boundary-draw{from{opacity:0;transform:scaleY(.05)}to{opacity:1;transform:scaleY(1)}}
@keyframes tt-blur-recede{0%{opacity:0;transform:translateX(34px)}55%{opacity:.5}100%{opacity:.26;transform:none}}
@keyframes tt-moon-rise{0%{opacity:0;transform:translateY(45px) scale(.72)}100%{opacity:1;transform:none}}
@keyframes tt-hanging-thread{from{opacity:0;transform:scaleY(.05)}to{opacity:.85;transform:scaleY(1)}}
@keyframes tt-open-left{0%{transform:rotateY(0)}100%{transform:rotateY(-72deg)}}
@keyframes tt-open-right{0%{transform:rotateY(0)}100%{transform:rotateY(72deg)}}
@keyframes tt-guard-lantern{0%{opacity:0;transform:translateX(-64px) scale(.72)}24%{opacity:1}72%{transform:translateX(8px) scale(1)}100%{opacity:.96;transform:translateX(44px) scale(.92)}}
@keyframes tt-hand-reach{from{opacity:0;translate:0 27px}to{opacity:.88;translate:0 0}}
@keyframes tt-petal-open{from{opacity:0;scale:.15}to{opacity:.94;scale:1}}
@keyframes tt-ending-copy{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media(max-width:900px){
  .tt-transition[data-shadow-scene] .tt-transition-inner{grid-template-columns:minmax(230px,310px) minmax(0,1fr);gap:26px}
  .tt-shadow-stage{height:270px}
  .tt-shadow-figure{scale:.88}
}
@media(max-width:620px){
  .tt-transition[data-shadow-scene]{min-height:auto;padding:27px 0 42px}
  .tt-transition[data-shadow-scene] .tt-transition-inner{width:min(100% - 28px,520px);grid-template-columns:1fr;gap:18px}
  .tt-shadow-stage{width:min(100%,360px);height:188px;margin-inline:auto;box-shadow:inset 0 0 0 5px rgba(40,24,17,.2),inset 0 0 48px rgba(24,13,9,.72),10px 13px 21px rgba(8,5,4,.22)}
  .tt-shadow-figure{bottom:-6px;scale:.68}.tt-shadow-figure--woman{left:4%}.tt-shadow-figure--scribe{right:4%}
  .tt-shadow-vignette{box-shadow:inset 0 0 40px 13px rgba(25,14,10,.6)}
  .tt-shadow-dialogue>small{margin-bottom:8px;font-size:8px;line-height:1.5}
  .tt-shadow-dialogue>p,html[lang="en"] .tt-shadow-dialogue>p,html[lang="ja"] .tt-shadow-dialogue>p{margin-bottom:8px;font-size:14px;line-height:1.72}
  .tt-shadow-dialogue>p b{font-size:8px}
  .tt-transition[data-shadow-scene]::after{right:10px;bottom:7px;max-width:calc(100% - 20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tt-shadow-roof{height:50px}.tt-shadow-kite{top:24px;scale:.78}.tt-shadow-knot-cord{top:31px}.tt-shadow-door{top:13px}.tt-shadow-lattice{top:21px}
  .tt-shadow-lantern{top:31px;scale:.76}.tt-shadow-wick{top:51px;scale:.76}.tt-shadow-date{bottom:20px}
  .tt-shadow-scroll{top:25px;height:104px}.tt-shadow-record-line{top:var(--tt-record-top-mobile)}.tt-shadow-seal{bottom:37px;scale:.72}.tt-shadow-bars{top:13px;height:140px}
  .tt-shadow-stamp{top:28px;scale:.75}.tt-shadow-paper-flower{bottom:24px;scale:.78}.tt-shadow-roof-home{bottom:8px;scale:.78}.tt-shadow-block{scale:.72}.tt-shadow-block:nth-child(1),.tt-shadow-block:nth-child(2){top:23px}.tt-shadow-block:nth-child(3),.tt-shadow-block:nth-child(4){top:89px}.tt-shadow-boundary{top:15px;bottom:16px}.tt-shadow-blurred-record{top:37px;height:90px}
  .tt-shadow-moon{top:20px;scale:.78}.tt-shadow-hanging-thread{top:118px;height:65px}.tt-shadow-open-door{top:13px;height:151px;scale:.8;transform-origin:top right}.tt-shadow-guard-lantern{top:48px;scale:.76}.tt-shadow-hand{bottom:18px;scale:.76}.tt-shadow-bloom{top:20px;scale:.76}
}
@media(prefers-reduced-motion:reduce){
  .tt-shadow-stage,.tt-shadow-stage *,.tt-shadow-dialogue>p{animation:none!important;transition:none!important}
  .tt-shadow-dialogue>p,.tt-shadow-stage i,.tt-shadow-stage path,.tt-shadow-figure{opacity:1!important;transform:none!important;translate:none!important;stroke-dashoffset:0!important}
  .tt-shadow-figure--scribe{transform:scale(.94) rotate(2deg)!important}
  .tt-shadow-door::before,.tt-shadow-door::after,.tt-shadow-open-door::before,.tt-shadow-open-door::after{transform:none!important}
}

/* Art direction v4: full-scale translucent-leather shadow theatre and opt-in soundscape. */
.tt-opening::before{
  background:
    linear-gradient(90deg,rgba(13,8,6,.84) 0%,rgba(31,18,12,.2) 27%,rgba(20,12,8,.16) 73%,rgba(10,7,6,.88) 100%),
    linear-gradient(0deg,rgba(10,7,6,.78),transparent 42%,rgba(15,9,6,.24)),
    url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 50%/cover no-repeat;
  filter:saturate(.96) contrast(1.04) sepia(.06);
}
.tt-stage{
  width:min(1480px,calc(100% - 42px));
  min-height:min(760px,88vh);
  grid-template-columns:1fr;
  align-items:center;
  padding:clamp(32px,5vw,72px);
  border-color:rgba(241,195,109,.38);
  background:radial-gradient(ellipse at 50% 50%,rgba(57,29,17,.08),rgba(17,10,8,.7) 82%);
  box-shadow:0 35px 100px rgba(0,0,0,.58),inset 0 0 82px rgba(16,8,5,.42);
}
.tt-stage-craft{display:none}
.tt-stage-copy{
  width:min(690px,60vw);
  margin-inline:auto;
  padding:clamp(24px,3.4vw,46px);
  border:1px solid rgba(234,187,99,.33);
  background:linear-gradient(135deg,rgba(25,14,10,.88),rgba(38,20,13,.72));
  box-shadow:0 22px 55px rgba(10,5,3,.42),inset 0 0 38px rgba(224,167,72,.045);
  backdrop-filter:blur(5px);
}
.tt-opening-kicker{color:#efc878}
.tt-opening-controls [data-tt-audio]::before,.tt-audio-floating::before{content:"♫";display:inline-block;margin-right:7px;color:#efc878}
.tt-opening-controls [data-tt-audio]{background:rgba(40,22,15,.78);border-color:rgba(235,189,101,.58)}

.tt-transition[data-shadow-scene]{
  min-height:clamp(620px,78vh,790px);
  padding:clamp(30px,4vw,54px) 0;
  background:
    repeating-linear-gradient(93deg,rgba(255,235,191,.018) 0 1px,transparent 1px 6px),
    radial-gradient(ellipse at 50% 47%,#b7783e 0,#5e351f 48%,#1a100c 86%);
  box-shadow:inset 0 0 110px rgba(10,5,3,.58),0 24px 58px rgba(38,22,14,.14);
}
.tt-transition[data-shadow-scene]::before{
  inset:0;
  z-index:0;
  background:linear-gradient(90deg,rgba(5,3,2,.72),transparent 19% 81%,rgba(5,3,2,.74));
  opacity:.55;
}
.tt-transition[data-shadow-scene] .tt-transition-inner{
  width:min(1480px,calc(100% - 34px));
  min-height:clamp(540px,68vh,700px);
  display:grid;
  grid-template:1fr/1fr;
  gap:0;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(79,43,24,.92);
  background:#21120d;
  box-shadow:inset 0 0 0 8px rgba(45,23,13,.3),0 28px 54px rgba(8,4,3,.38);
}
.tt-transition[data-shadow-scene] .tt-shadow-stage,
.tt-transition[data-shadow-scene] .tt-shadow-dialogue{grid-area:1/1}
.tt-transition[data-shadow-scene] .tt-shadow-stage{
  position:relative;
  z-index:0;
  width:100%;
  height:100%;
  min-height:clamp(540px,68vh,700px);
  border:0;
  background:
    linear-gradient(0deg,rgba(14,7,4,.56),transparent 34%,rgba(18,9,5,.08)),
    url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 50%/106% auto no-repeat,
    #2a160d;
  box-shadow:inset 0 0 0 10px rgba(42,20,11,.23),inset 0 0 110px 24px rgba(15,7,4,.62);
  filter:saturate(.98) contrast(1.035);
}
.tt-transition.is-visible .tt-shadow-stage{animation:tt-stage-camera-v4 8s cubic-bezier(.18,.75,.2,1) both}
.tt-shadow-screen{display:none}
.tt-transition[data-shadow-scene] .tt-shadow-vignette{z-index:8;box-shadow:inset 0 0 86px 28px rgba(22,10,5,.64)}
.tt-transition[data-shadow-scene] .tt-shadow-figure{display:none}
.tt-transition[data-shadow-scene] .tt-shadow-props{
  z-index:3;
  transform:scale(1.28);
  transform-origin:50% 16%;
  opacity:.76;
  filter:drop-shadow(10px 9px 5px rgba(34,15,8,.34));
}
.tt-transition[data-shadow-scene] .tt-shadow-dialogue{
  position:relative;
  z-index:12;
  align-self:end;
  justify-self:center;
  width:min(730px,58%);
  margin:0 0 clamp(30px,5vh,58px);
  padding:clamp(20px,2.5vw,32px) clamp(22px,3vw,38px);
  border:1px solid rgba(239,195,108,.4);
  background:linear-gradient(135deg,rgba(25,13,9,.91),rgba(43,22,13,.79));
  box-shadow:0 19px 48px rgba(9,4,2,.46),inset 0 0 35px rgba(233,175,78,.055);
  backdrop-filter:blur(6px);
}
.tt-transition[data-shadow-scene] .tt-shadow-dialogue::before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(237,194,110,.09);
  pointer-events:none;
}
.tt-shadow-dialogue>small{color:#f2c879;font-size:11px}
.tt-shadow-dialogue>p{font-size:clamp(16px,1.35vw,19px);line-height:1.82}
html[lang="en"] .tt-shadow-dialogue>p{font-size:clamp(15px,1.15vw,17px);line-height:1.72}
html[lang="ja"] .tt-shadow-dialogue>p{font-size:clamp(15px,1.18vw,17px);line-height:1.86}
.tt-shadow-dialogue--prologue{max-width:650px;text-align:center}
.tt-shadow-dialogue--prologue>p{margin:6px 0 0;font-size:clamp(20px,2.05vw,28px);line-height:1.78;text-wrap:balance}
.tt-transition[data-shadow-scene]::after{z-index:20;bottom:17px;background:rgba(29,14,8,.72);border-color:rgba(239,198,119,.5);color:#e9c278}
@keyframes tt-stage-camera-v4{
  from{background-size:100% 100%,112% auto;background-position:50% 50%,49% 50%}
  to{background-size:100% 100%,106% auto;background-position:50% 50%,50% 50%}
}
@keyframes tt-stage-light-v4{from{filter:saturate(.84) brightness(.88)}to{filter:saturate(1) brightness(1)}}

.tt-ending{min-height:100svh;background:#160d09}
.tt-ending::before{
  background:
    linear-gradient(0deg,rgba(11,6,4,.97) 0%,rgba(17,8,5,.76) 35%,rgba(17,8,5,.14) 68%,rgba(14,7,4,.44) 100%),
    linear-gradient(90deg,rgba(7,4,3,.7),transparent 22% 78%,rgba(7,4,3,.72)),
    url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 50%/cover no-repeat;
  filter:saturate(.84) contrast(1.04) sepia(.06);
}
.tt-ending.is-visible::before{filter:saturate(.98) contrast(1.03);transform:scale(1.005)}
.tt-ending-copy{max-width:790px;margin-inline:auto;text-align:center;text-shadow:0 3px 22px rgba(0,0,0,.82)}
.tt-ending p{margin-inline:auto}.tt-ending-actions{justify-content:center}.tt-ending-seal{margin-inline:auto}

.tt-audio-toggle{
  cursor:pointer;
  border:1px solid rgba(218,179,101,.56);
  border-radius:999px;
  padding:9px 14px;
  background:rgba(26,38,39,.94);
  color:#f5ead2;
  font-size:12px;
  font-weight:800;
  box-shadow:0 8px 25px rgba(0,0,0,.24);
}
.tt-audio-floating{position:fixed;z-index:131;right:16px;bottom:62px}
body.tt-audio-active .tt-audio-toggle{border-color:rgba(239,195,105,.86);background:#74342c;box-shadow:0 8px 28px rgba(0,0,0,.32),0 0 0 3px rgba(209,157,67,.1)}
.tt-audio-toggle:focus-visible,.tt-replay:focus-visible,.tt-opening-controls button:focus-visible{outline:3px solid #f0ca7a;outline-offset:3px}
.tt-audio-toggle:disabled,.tt-opening-controls [data-tt-audio]:disabled{cursor:not-allowed;opacity:.55}

@media(max-width:900px){
  .tt-stage-copy{width:min(720px,78vw)}
  .tt-transition[data-shadow-scene]{min-height:auto;padding:34px 0 52px}
  .tt-transition[data-shadow-scene] .tt-transition-inner{width:min(100% - 24px,960px);min-height:620px}
  .tt-transition[data-shadow-scene] .tt-shadow-stage{min-height:620px;background-size:100% 100%,contain;background-color:#21110b}
  .tt-transition.is-visible .tt-shadow-stage{animation:tt-stage-light-v4 6.8s ease-out both}
  .tt-transition[data-shadow-scene] .tt-shadow-dialogue{width:min(710px,74%)}
}

@media(max-width:720px){
  .tt-opening::before{background:radial-gradient(ellipse at 50% 24%,#4a2816,#160c08 58%,#090605);filter:none}
  .tt-stage{width:calc(100% - 14px);min-height:94svh;display:flex;flex-direction:column;justify-content:center;padding:12px;overflow:auto}
  .tt-stage::before{content:"";position:relative;z-index:1;inset:auto;display:block;flex:0 0 clamp(180px,53vw,230px);width:100%;margin-bottom:10px;border:1px solid rgba(233,183,91,.35);background:url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 50%/contain no-repeat,#1c0f0a;mask-image:none;box-shadow:inset 0 0 34px rgba(10,5,3,.45)}
  .tt-stage::after{display:none}
  .tt-stage-copy{width:100%;padding:22px 18px;background:rgba(25,13,9,.84)}
  .tt-opening-lines{min-height:315px}
  .tt-opening-line span{font-size:clamp(19px,5.6vw,23px);line-height:1.7}
  .tt-opening-controls{gap:7px}.tt-opening-controls button{padding:8px 12px;font-size:12px}
  .tt-opening-controls [data-tt-audio]{width:100%}
  .tt-opening-note{left:16px;right:16px;bottom:10px;text-align:center;letter-spacing:.06em}
  .tt-transition[data-shadow-scene]{padding:12px 0 44px}
  .tt-transition[data-shadow-scene] .tt-transition-inner{
    width:calc(100% - 12px);
    min-height:0;
    grid-template:auto auto/1fr;
    gap:12px;
    overflow:visible;
    border:0;
    background:transparent;
    box-shadow:none;
  }
  .tt-transition[data-shadow-scene] .tt-shadow-stage,
  .tt-transition[data-shadow-scene] .tt-shadow-dialogue{grid-area:auto}
  .tt-transition[data-shadow-scene] .tt-shadow-stage{
    width:100%;
    height:clamp(240px,62vw,310px);
    min-height:0;
    margin:0;
    border:1px solid rgba(76,39,22,.9);
    background-size:100% 100%,contain;
    background-color:#21110b;
    box-shadow:inset 0 0 0 5px rgba(42,20,11,.25),inset 0 0 48px 7px rgba(15,7,4,.55),0 14px 28px rgba(8,4,3,.3);
  }
  .tt-transition[data-shadow-scene] .tt-shadow-props{transform:scale(.9);transform-origin:50% 8%;opacity:.72}
  .tt-transition[data-shadow-scene] .tt-shadow-vignette{box-shadow:inset 0 0 42px 12px rgba(22,10,5,.55)}
  .tt-transition[data-shadow-scene] .tt-shadow-dialogue{
    width:100%;
    margin:0;
    padding:19px 18px 21px;
    background:linear-gradient(135deg,rgba(25,13,9,.96),rgba(44,23,14,.91));
    backdrop-filter:none;
  }
  .tt-shadow-dialogue>small{font-size:9px;line-height:1.55}
  .tt-shadow-dialogue>p,html[lang="en"] .tt-shadow-dialogue>p,html[lang="ja"] .tt-shadow-dialogue>p{font-size:15px;line-height:1.78;overflow-wrap:anywhere}
  .tt-shadow-dialogue--prologue>p{font-size:20px;line-height:1.72}
  .tt-transition[data-shadow-scene]::after{right:8px;bottom:8px;max-width:calc(100% - 16px)}
  .tt-ending-copy{padding:72px 20px 96px}.tt-ending h2{font-size:clamp(38px,12vw,52px)}
  .tt-audio-floating{right:10px;bottom:56px;padding:8px 12px}
}

@media(prefers-reduced-motion:reduce){
  .tt-transition[data-shadow-scene] .tt-shadow-stage{animation:none!important;background-size:100% 100%,106% auto;background-position:center}
  .tt-transition[data-shadow-scene] .tt-shadow-props{display:none!important}
  .tt-transition[data-shadow-scene] .tt-shadow-dialogue>p{opacity:1!important;transform:none!important}
}

@media print{
  .tt-audio-toggle{display:none!important}
}

/* Art direction v5: empty-screen shadow theatre, articulated paper-cut puppets. */
.tt-opening::before{
  background:
    linear-gradient(90deg,rgba(11,6,4,.88),rgba(38,20,12,.13) 25%,rgba(42,23,13,.1) 74%,rgba(9,5,4,.9)),
    linear-gradient(0deg,rgba(10,5,3,.78),transparent 40%,rgba(21,11,6,.18)),
    url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 50%/cover no-repeat;
  filter:saturate(.98) contrast(1.045) sepia(.055);
}
.tt-stage{
  grid-template-columns:minmax(390px,.92fr) minmax(480px,1.08fr);
  gap:clamp(34px,5vw,78px);
  background:
    linear-gradient(90deg,rgba(18,9,6,.66),rgba(31,16,9,.08) 36% 66%,rgba(17,9,6,.58)),
    url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 50%/cover no-repeat,
    #1a0d08;
  box-shadow:0 38px 110px rgba(0,0,0,.62),inset 0 0 0 8px rgba(59,29,14,.2),inset 0 0 96px 20px rgba(13,6,4,.62);
}
.tt-stage-craft{
  display:block;
  width:100%;
  height:clamp(430px,56vh,570px);
  align-self:center;
  filter:drop-shadow(25px 19px 10px rgba(18,8,4,.56));
}
.tt-stage-copy{width:100%;max-width:720px;margin-inline:auto}
.tt-stage-craft::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:5% -5% 0;
  border:1px solid rgba(235,188,99,.22);
  background:radial-gradient(ellipse at 50% 48%,rgba(248,213,145,.09),transparent 66%);
  box-shadow:inset 0 0 64px rgba(20,9,5,.48);
}

/* Opening figures: pierced paper/leather colour, visible joints and rods. */
.tt-puppet{
  --tt-open-scale:1;
  --tt-open-rest:0deg;
  bottom:clamp(18px,4vh,42px);
  opacity:.96;
  animation:none;
  transform:scale(var(--tt-open-scale)) rotate(var(--tt-open-rest));
}
.tt-puppet--girl{--tt-open-scale:.9;--tt-open-rest:-1deg;left:5%}
.tt-puppet--scribe{--tt-open-scale:1.04;--tt-open-rest:2deg;right:2%}
.tt-puppet i,.tt-puppet b,.tt-puppet span{
  border-color:rgba(91,44,24,.94);
  background-color:rgba(55,28,20,.98);
  background-image:
    radial-gradient(circle,rgba(247,207,120,.9) 0 1.2px,transparent 1.7px),
    repeating-linear-gradient(135deg,transparent 0 9px,rgba(211,147,63,.2) 10px 11px),
    linear-gradient(120deg,rgba(33,25,22,.98),rgba(139,48,46,.9) 48%,rgba(65,94,72,.88));
  background-size:10px 10px,100% 100%,100% 100%;
  background-blend-mode:screen,normal,normal;
  box-shadow:inset 0 0 0 1px rgba(246,199,104,.19),inset 0 0 18px rgba(18,8,5,.34);
}
.tt-puppet--scribe i,.tt-puppet--scribe b,.tt-puppet--scribe span{
  background-image:
    radial-gradient(circle,rgba(247,207,120,.86) 0 1.2px,transparent 1.7px),
    repeating-linear-gradient(45deg,transparent 0 9px,rgba(196,143,68,.2) 10px 11px),
    linear-gradient(120deg,rgba(31,26,22,.98),rgba(48,82,76,.92) 50%,rgba(128,48,43,.84));
}
.tt-puppet i::before{
  content:"";
  position:absolute;
  left:-17px;
  top:-17px;
  width:82px;
  height:28px;
  border:1px solid rgba(87,42,24,.92);
  background:radial-gradient(circle at 50% 78%,#d9a650 0 8%,transparent 9%),repeating-radial-gradient(circle,rgba(239,193,98,.62) 0 1px,transparent 1.5px 6px),linear-gradient(90deg,#51231f,#9a3c36 52%,#365d50);
  clip-path:polygon(0 100%,8% 43%,22% 75%,35% 4%,49% 66%,65% 0,76% 72%,94% 35%,100% 100%);
  transform-origin:50% 90%;
}
.tt-puppet i::after{
  content:"";
  position:absolute;
  right:-13px;
  top:18px;
  width:15px;
  height:11px;
  border-top:2px solid rgba(54,27,19,.92);
  border-radius:50%;
  transform:rotate(17deg);
}
.tt-puppet b::before,.tt-puppet span::before{
  content:"";
  position:absolute;
  inset:13px 16px;
  border:1px solid rgba(236,187,91,.52);
  background:radial-gradient(circle at 30% 35%,rgba(246,204,112,.65) 0 2px,transparent 2.6px),radial-gradient(circle at 70% 65%,rgba(246,204,112,.58) 0 2px,transparent 2.6px);
  background-size:17px 17px;
  clip-path:polygon(50% 0,62% 32%,100% 50%,64% 64%,50% 100%,36% 65%,0 50%,36% 34%);
}
.tt-puppet span::after{
  content:"";
  position:absolute;
  left:10%;right:10%;bottom:9px;height:10px;
  border-block:1px solid rgba(235,184,84,.5);
  background:repeating-linear-gradient(90deg,rgba(232,176,76,.55) 0 2px,transparent 2px 8px);
}
.tt-puppet::before,.tt-puppet::after{
  z-index:-1;
  width:clamp(128px,11vw,178px);
  height:3px;
  border-color:rgba(76,35,19,.78);
  background:linear-gradient(90deg,#2b170f,#c08a42 43% 48%,#2c180f 49% 72%,rgba(44,24,15,.2));
  box-shadow:0 1px rgba(250,211,129,.12),18px 10px 4px rgba(31,14,8,.22);
}
.tt-opening[data-scene="1"] .tt-puppet--girl{animation:tt-v5-open-girl-enter 4.1s cubic-bezier(.18,.78,.18,1) both}
.tt-opening[data-scene="1"] .tt-puppet--scribe{animation:tt-v5-open-scribe-wait 4.1s ease both}
.tt-opening[data-scene="2"] .tt-puppet--girl{animation:tt-v5-open-girl-listen 4.1s ease both}
.tt-opening[data-scene="2"] .tt-puppet--scribe{animation:tt-v5-open-scribe-speak 4.1s cubic-bezier(.2,.74,.2,1) both}
.tt-opening[data-scene="3"] .tt-puppet--girl{animation:tt-v5-open-girl-ask 4.1s cubic-bezier(.2,.74,.2,1) both}
.tt-opening[data-scene="3"] .tt-puppet--scribe{animation:tt-v5-open-scribe-listen 4.1s ease both}
.tt-opening[data-scene="4"] .tt-puppet--girl{animation:tt-v5-open-girl-listen 4.1s ease both}
.tt-opening[data-scene="4"] .tt-puppet--scribe{animation:tt-v5-open-scribe-record 4.1s cubic-bezier(.2,.74,.2,1) both}
.tt-opening[data-scene="5"] .tt-puppet--girl{animation:tt-v5-open-bow-girl 4.1s cubic-bezier(.2,.74,.2,1) both}
.tt-opening[data-scene="5"] .tt-puppet--scribe{animation:tt-v5-open-bow-scribe 4.1s cubic-bezier(.2,.74,.2,1) both}
.tt-puppet--girl i{animation:tt-v5-open-head-girl 4.9s ease-in-out infinite}
.tt-puppet--scribe i{animation:tt-v5-open-head-scribe 5.3s ease-in-out infinite}
.tt-puppet b{transform-origin:50% 10%;animation:tt-v5-open-body 5.6s ease-in-out infinite}
.tt-puppet span{transform-origin:50% 4%;animation:tt-v5-open-skirt 4.8s ease-in-out infinite}
.tt-puppet--girl::before{animation:tt-v5-open-rod-girl-front 4.2s ease-in-out infinite}
.tt-puppet--girl::after{animation:tt-v5-open-rod-girl-rear 4.2s ease-in-out infinite}
.tt-puppet--scribe::before{animation:tt-v5-open-rod-scribe-front 4.55s ease-in-out infinite}
.tt-puppet--scribe::after{animation:tt-v5-open-rod-scribe-rear 4.55s ease-in-out infinite}

/* One empty theatre screen now carries all nine transitions. */
.tt-transition[data-shadow-scene]{
  --tt-v5-duration:7s;
  --tt-v5-delay:.05s;
  --tt-v5-head-turn:-6deg;
  --tt-v5-body-lean:2deg;
  --tt-v5-upper:-39deg;
  --tt-v5-lower:-69deg;
  --tt-v5-rod-front:-24deg;
  --tt-v5-rod-rear:18deg;
  min-height:clamp(630px,79vh,810px);
  background:
    repeating-linear-gradient(93deg,rgba(255,235,191,.018) 0 1px,transparent 1px 6px),
    radial-gradient(ellipse at 50% 47%,#b7783e 0,#5e351f 48%,#1a100c 86%);
}
.tt-transition[data-shadow-scene] .tt-transition-inner{min-height:clamp(550px,69vh,720px)}
.tt-transition[data-shadow-scene] .tt-shadow-stage{
  min-height:clamp(550px,69vh,720px);
  background:
    linear-gradient(0deg,rgba(13,6,4,.54),transparent 31%,rgba(18,9,5,.05)),
    linear-gradient(90deg,rgba(12,6,4,.3),transparent 17% 83%,rgba(12,6,4,.34)),
    url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 50%/cover no-repeat,
    #26130c;
  box-shadow:inset 0 0 0 10px rgba(42,20,11,.24),inset 0 0 126px 28px rgba(15,7,4,.68);
}
.tt-transition.is-visible .tt-shadow-stage{
  animation:tt-v5-stage-lantern 8s cubic-bezier(.18,.75,.2,1) both;
}
@keyframes tt-v5-stage-lantern{
  0%{filter:saturate(.86) contrast(1.02) brightness(.88)}
  48%{filter:saturate(1.01) contrast(1.045) brightness(1.025)}
  100%{filter:saturate(.97) contrast(1.035) brightness(1)}
}
.tt-shadow-screen{
  display:block;
  z-index:1;
  background:repeating-linear-gradient(91deg,rgba(255,247,220,.045) 0 1px,transparent 1px 5px),repeating-linear-gradient(2deg,rgba(66,39,24,.025) 0 1px,transparent 1px 7px);
  mix-blend-mode:soft-light;
  opacity:.66;
}
.tt-transition[data-shadow-scene] .tt-shadow-props{z-index:3;opacity:.72}

/* Restored articulated narrators, enlarged to theatre scale. */
.tt-transition[data-shadow-scene] .tt-shadow-figure{
  --tt-v5-scale:2.08;
  --tt-v5-entry-scale:1.9;
  --tt-v5-rest:0deg;
  --tt-v5-entry-x:-76px;
  display:block;
  z-index:5;
  bottom:clamp(38px,6vh,68px);
  opacity:.97;
  filter:drop-shadow(22px 14px 7px rgba(30,13,7,.56));
  transform:scale(var(--tt-v5-scale)) rotate(var(--tt-v5-rest));
}
.tt-transition[data-shadow-scene] .tt-shadow-figure--woman{left:7%}
.tt-transition[data-shadow-scene] .tt-shadow-figure--scribe{
  --tt-v5-scale:1.98;
  --tt-v5-entry-scale:1.82;
  --tt-v5-rest:2deg;
  --tt-v5-entry-x:76px;
  --tt-v5-head-turn:7deg;
  --tt-v5-body-lean:-2deg;
  --tt-v5-upper:-5deg;
  --tt-v5-lower:-25deg;
  --tt-v5-rod-front:3deg;
  --tt-v5-rod-rear:6deg;
  right:7%;
}
.tt-shadow-figure>:is(.tt-shadow-crown,.tt-shadow-head,.tt-shadow-body,.tt-shadow-skirt,.tt-shadow-arm){
  border-color:rgba(79,37,21,.94);
  background-color:rgba(67,31,22,.98);
  background-image:
    radial-gradient(circle,rgba(247,207,120,.92) 0 1.05px,transparent 1.55px),
    repeating-linear-gradient(135deg,transparent 0 7px,rgba(218,154,70,.24) 8px 9px),
    linear-gradient(125deg,rgba(37,27,23,.98),var(--tt-figure-dress) 51%,rgba(62,93,71,.86));
  background-size:9px 9px,100% 100%,100% 100%;
  background-blend-mode:screen,normal,normal;
  box-shadow:inset 0 0 0 1px rgba(244,194,96,.18),inset 0 0 10px rgba(20,8,5,.3);
}
.tt-shadow-figure--scribe>:is(.tt-shadow-crown,.tt-shadow-head,.tt-shadow-body,.tt-shadow-skirt,.tt-shadow-arm){
  background-image:
    radial-gradient(circle,rgba(244,204,115,.9) 0 1.05px,transparent 1.55px),
    repeating-linear-gradient(45deg,transparent 0 7px,rgba(204,150,70,.22) 8px 9px),
    linear-gradient(125deg,rgba(35,27,23,.98),rgba(44,86,78,.96) 50%,rgba(132,49,44,.85));
}
.tt-shadow-head::before{
  content:"";
  position:absolute;
  left:-10px;
  top:-10px;
  width:45px;
  height:17px;
  border:1px solid rgba(74,34,20,.92);
  background:radial-gradient(circle,#d9a650 0 7%,transparent 8%),repeating-radial-gradient(circle,rgba(239,193,98,.7) 0 1px,transparent 1.5px 5px),linear-gradient(90deg,#54231f,#963a34 52%,#365d50);
  clip-path:polygon(0 100%,10% 36%,25% 73%,42% 0,58% 68%,75% 12%,88% 73%,100% 42%,100% 100%);
  transform-origin:52% 90%;
}
.tt-shadow-crown::after{
  content:"";
  position:absolute;
  right:-9px;
  top:6px;
  width:12px;
  height:28px;
  border-right:1px solid rgba(193,136,60,.8);
  background:repeating-linear-gradient(180deg,rgba(139,47,43,.85) 0 3px,transparent 3px 7px);
  transform:rotate(-8deg);
  transform-origin:top;
}
.tt-shadow-body::before{
  content:"";
  position:absolute;
  inset:7px 9px 10px;
  border:1px solid rgba(235,184,84,.56);
  background:radial-gradient(circle at 50% 50%,transparent 0 18%,rgba(240,190,89,.55) 19% 23%,transparent 24%);
  clip-path:polygon(50% 0,63% 34%,100% 50%,65% 64%,50% 100%,35% 65%,0 50%,36% 34%);
}
.tt-shadow-skirt::before{
  content:"";
  position:absolute;
  left:8px;right:8px;top:10px;bottom:9px;
  border:1px solid rgba(236,187,87,.45);
  background:radial-gradient(circle,rgba(242,193,91,.7) 0 1.3px,transparent 1.8px);
  background-size:11px 11px;
  clip-path:polygon(50% 0,62% 35%,100% 50%,63% 64%,50% 100%,37% 64%,0 50%,38% 35%);
}
.tt-shadow-skirt::after{
  content:"";
  position:absolute;
  left:7%;right:7%;bottom:6px;height:5px;
  border-block:1px solid rgba(237,184,82,.5);
  background:repeating-linear-gradient(90deg,rgba(234,176,74,.58) 0 1px,transparent 1px 5px);
}
.tt-shadow-arm::before{
  content:"";
  position:absolute;
  left:-3px;
  top:0;
  width:7px;
  height:7px;
  border:1px solid rgba(68,31,18,.9);
  border-radius:50%;
  background:radial-gradient(circle,#f0bd67 0 26%,#6b3424 29% 58%,#d29b4f 61%);
  box-shadow:0 0 0 1px rgba(240,187,93,.13);
}
.tt-shadow-rod{height:1.5px;background:linear-gradient(90deg,#25130c,#b57d3b 40% 44%,#28150d 45% 74%,rgba(42,21,13,.18));box-shadow:0 1px rgba(247,207,122,.1),15px 9px 3px rgba(34,14,7,.25)}

/* Each act changes tempo and gesture without changing the documentary restraint. */
.tt-transition[data-shadow-scene="scroll-prologue"]{--tt-v5-duration:8.2s;--tt-v5-delay:.22s;--tt-v5-head-turn:-5deg;--tt-v5-body-lean:2deg;--tt-v5-upper:-35deg;--tt-v5-lower:-61deg;--tt-v5-rod-front:-20deg}
.tt-transition[data-shadow-scene="wind-kite"]{--tt-v5-duration:6.2s;--tt-v5-delay:0s;--tt-v5-head-turn:-8deg;--tt-v5-upper:-47deg;--tt-v5-lower:-78deg;--tt-v5-rod-front:-30deg}
.tt-transition[data-shadow-scene="ten-knot-door"]{--tt-v5-duration:7.8s;--tt-v5-delay:.18s;--tt-v5-head-turn:-3deg;--tt-v5-body-lean:1deg;--tt-v5-upper:-31deg;--tt-v5-lower:-57deg}
.tt-transition[data-shadow-scene="frost-lantern"]{--tt-v5-duration:8.4s;--tt-v5-delay:.3s;--tt-v5-head-turn:-10deg;--tt-v5-body-lean:4deg;--tt-v5-upper:-35deg;--tt-v5-lower:-64deg}
.tt-transition[data-shadow-scene="court-scroll"]{--tt-v5-duration:6.8s;--tt-v5-delay:.08s;--tt-v5-head-turn:-4deg;--tt-v5-upper:-42deg;--tt-v5-lower:-70deg}
.tt-transition[data-shadow-scene="seal-road"]{--tt-v5-duration:7.2s;--tt-v5-delay:.15s;--tt-v5-head-turn:-7deg;--tt-v5-body-lean:3deg;--tt-v5-upper:-45deg;--tt-v5-lower:-75deg}
.tt-transition[data-shadow-scene="evidence-blocks"]{--tt-v5-duration:5.8s;--tt-v5-delay:0s;--tt-v5-head-turn:-2deg;--tt-v5-upper:-28deg;--tt-v5-lower:-50deg}
.tt-transition[data-shadow-scene="seven-moon"]{--tt-v5-duration:8.8s;--tt-v5-delay:.28s;--tt-v5-head-turn:-11deg;--tt-v5-body-lean:4deg;--tt-v5-upper:-48deg;--tt-v5-lower:-81deg}
.tt-transition[data-shadow-scene="guarded-lamp"]{--tt-v5-duration:7.5s;--tt-v5-delay:.12s;--tt-v5-head-turn:-5deg;--tt-v5-upper:-38deg;--tt-v5-lower:-65deg}
.tt-transition.is-visible .tt-shadow-figure--woman{animation:tt-v5-woman-enter var(--tt-v5-duration) cubic-bezier(.2,.75,.2,1) var(--tt-v5-delay) both}
.tt-transition.is-visible .tt-shadow-figure--scribe{animation:tt-v5-scribe-enter var(--tt-v5-duration) cubic-bezier(.2,.75,.2,1) calc(var(--tt-v5-delay) + .2s) both}
.tt-transition.is-visible .tt-shadow-figure--woman .tt-shadow-head{animation:tt-v5-woman-head var(--tt-v5-duration) ease-in-out calc(var(--tt-v5-delay) + .35s) both}
.tt-transition.is-visible .tt-shadow-figure--scribe .tt-shadow-head{animation:tt-v5-scribe-head var(--tt-v5-duration) ease-in-out calc(var(--tt-v5-delay) + .55s) both}
.tt-transition.is-visible .tt-shadow-figure--woman .tt-shadow-body{animation:tt-v5-woman-body var(--tt-v5-duration) ease-in-out var(--tt-v5-delay) both}
.tt-transition.is-visible .tt-shadow-figure--scribe .tt-shadow-body{animation:tt-v5-scribe-body var(--tt-v5-duration) ease-in-out calc(var(--tt-v5-delay) + .15s) both}
.tt-transition.is-visible .tt-shadow-figure .tt-shadow-skirt{animation:tt-v5-skirt-sway var(--tt-v5-duration) ease-in-out var(--tt-v5-delay) both}
.tt-transition.is-visible .tt-shadow-figure--woman .tt-shadow-arm--upper{animation:tt-v5-woman-upper var(--tt-v5-duration) ease-in-out calc(var(--tt-v5-delay) + .25s) both}
.tt-transition.is-visible .tt-shadow-figure--woman .tt-shadow-arm--lower{animation:tt-v5-woman-lower var(--tt-v5-duration) ease-in-out calc(var(--tt-v5-delay) + .25s) both}
.tt-transition.is-visible .tt-shadow-figure--scribe .tt-shadow-arm--upper{animation:tt-v5-scribe-upper var(--tt-v5-duration) ease-in-out calc(var(--tt-v5-delay) + .5s) both}
.tt-transition.is-visible .tt-shadow-figure--scribe .tt-shadow-arm--lower{animation:tt-v5-scribe-lower var(--tt-v5-duration) ease-in-out calc(var(--tt-v5-delay) + .5s) both}
.tt-transition.is-visible .tt-shadow-figure--woman .tt-shadow-rod--front{animation:tt-v5-woman-rod-front var(--tt-v5-duration) ease-in-out calc(var(--tt-v5-delay) + .25s) both}
.tt-transition.is-visible .tt-shadow-figure--woman .tt-shadow-rod--rear{animation:tt-v5-woman-rod-rear var(--tt-v5-duration) ease-in-out calc(var(--tt-v5-delay) + .25s) both}
.tt-transition.is-visible .tt-shadow-figure--scribe .tt-shadow-rod--front{animation:tt-v5-scribe-rod-front var(--tt-v5-duration) ease-in-out calc(var(--tt-v5-delay) + .5s) both}
.tt-transition.is-visible .tt-shadow-figure--scribe .tt-shadow-rod--rear{animation:tt-v5-scribe-rod-rear var(--tt-v5-duration) ease-in-out calc(var(--tt-v5-delay) + .5s) both}

/* Ending: existing craft layer can support two whole paper silhouettes, but not full joints. */
.tt-ending{background:#150a06}
.tt-ending::before{
  background:
    linear-gradient(0deg,rgba(10,5,3,.97),rgba(17,8,5,.78) 34%,rgba(17,8,5,.13) 69%,rgba(12,6,4,.43)),
    linear-gradient(90deg,rgba(6,3,2,.72),transparent 22% 78%,rgba(6,3,2,.74)),
    url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 50%/cover no-repeat;
  filter:saturate(.9) contrast(1.045) sepia(.05);
}
.tt-ending-craft::before,.tt-ending-craft::after{
  content:"";
  position:absolute;
  z-index:1;
  bottom:4%;
  width:88px;
  height:226px;
  border:1px solid rgba(72,32,18,.9);
  background:
    radial-gradient(circle,rgba(246,204,110,.88) 0 1.2px,transparent 1.7px) 0 0/10px 10px,
    repeating-linear-gradient(135deg,transparent 0 9px,rgba(220,151,66,.24) 10px 11px),
    linear-gradient(115deg,#211713,#8c322f 50%,#3d6655);
  background-blend-mode:screen,normal,normal;
  clip-path:polygon(35% 0,66% 0,78% 10%,70% 18%,80% 37%,73% 47%,100% 100%,0 100%,28% 48%,19% 38%,31% 18%,23% 10%);
  filter:drop-shadow(18px 11px 6px rgba(24,10,5,.52));
  opacity:0;
  transform-origin:50% 92%;
}
.tt-ending-craft::before{left:9%}
.tt-ending-craft::after{right:9%;transform:scaleX(-1)}
.tt-ending.is-visible .tt-ending-craft::before{animation:tt-v5-ending-bow-left 7.2s cubic-bezier(.2,.72,.2,1) 3.65s both}
.tt-ending.is-visible .tt-ending-craft::after{animation:tt-v5-ending-bow-right 7.2s cubic-bezier(.2,.72,.2,1) 3.85s both}

@keyframes tt-v5-open-girl-enter{0%{opacity:0;transform:translateX(-90px) scale(var(--tt-open-scale)) rotate(-7deg)}28%{opacity:.96;transform:translateX(0) scale(var(--tt-open-scale)) rotate(1deg)}100%{opacity:.96;transform:scale(var(--tt-open-scale)) rotate(-1deg)}}
@keyframes tt-v5-open-scribe-wait{0%{opacity:0;transform:translateX(78px) scale(var(--tt-open-scale)) rotate(7deg)}32%{opacity:.94;transform:translateX(0) scale(var(--tt-open-scale)) rotate(1deg)}100%{opacity:.96;transform:scale(var(--tt-open-scale)) rotate(2deg)}}
@keyframes tt-v5-open-girl-listen{0%,100%{transform:scale(var(--tt-open-scale)) rotate(-1deg)}46%{transform:scale(var(--tt-open-scale)) rotate(2deg) translateY(-3px)}}
@keyframes tt-v5-open-scribe-speak{0%,100%{transform:scale(var(--tt-open-scale)) rotate(2deg)}38%{transform:scale(var(--tt-open-scale)) rotate(-2deg) translateX(-5px)}62%{transform:scale(var(--tt-open-scale)) rotate(1deg) translateX(-2px)}}
@keyframes tt-v5-open-girl-ask{0%,100%{transform:scale(var(--tt-open-scale)) rotate(-1deg)}34%{transform:scale(var(--tt-open-scale)) rotate(-4deg) translateX(5px)}64%{transform:scale(var(--tt-open-scale)) rotate(2deg)}}
@keyframes tt-v5-open-scribe-listen{0%,100%{transform:scale(var(--tt-open-scale)) rotate(2deg)}44%{transform:scale(var(--tt-open-scale)) rotate(5deg) translateY(2px)}}
@keyframes tt-v5-open-scribe-record{0%,100%{transform:scale(var(--tt-open-scale)) rotate(2deg)}32%{transform:scale(var(--tt-open-scale)) rotate(-3deg) translateY(4px)}58%{transform:scale(var(--tt-open-scale)) rotate(1deg)}}
@keyframes tt-v5-open-bow-girl{0%,28%{opacity:.96;transform:scale(var(--tt-open-scale)) rotate(-1deg)}58%,72%{transform:scale(var(--tt-open-scale)) rotate(11deg) translateY(6px)}100%{opacity:.9;transform:scale(var(--tt-open-scale)) rotate(0)}}
@keyframes tt-v5-open-bow-scribe{0%,30%{opacity:.96;transform:scale(var(--tt-open-scale)) rotate(2deg)}60%,74%{transform:scale(var(--tt-open-scale)) rotate(-10deg) translateY(6px)}100%{opacity:.9;transform:scale(var(--tt-open-scale)) rotate(1deg)}}
@keyframes tt-v5-open-head-girl{0%,100%{transform:rotate(0)}42%{transform:rotate(-7deg)}58%{transform:rotate(3deg)}}
@keyframes tt-v5-open-head-scribe{0%,100%{transform:rotate(0)}38%{transform:rotate(6deg)}57%{transform:rotate(-3deg)}}
@keyframes tt-v5-open-body{0%,100%{transform:skewX(0)}50%{transform:skewX(-2deg)}}
@keyframes tt-v5-open-skirt{0%,100%{transform:skewX(-1deg) rotate(0)}44%{transform:skewX(3deg) rotate(1deg)}72%{transform:skewX(-2deg) rotate(-.6deg)}}
@keyframes tt-v5-open-rod-girl-front{0%,100%{transform:rotate(28deg)}45%{transform:rotate(15deg)}68%{transform:rotate(22deg)}}
@keyframes tt-v5-open-rod-girl-rear{0%,100%{transform:rotate(-17deg)}45%{transform:rotate(-29deg)}68%{transform:rotate(-22deg)}}
@keyframes tt-v5-open-rod-scribe-front{0%,100%{transform:rotate(28deg)}42%{transform:rotate(36deg)}65%{transform:rotate(31deg)}}
@keyframes tt-v5-open-rod-scribe-rear{0%,100%{transform:rotate(-17deg)}42%{transform:rotate(-8deg)}65%{transform:rotate(-13deg)}}

@keyframes tt-v5-woman-enter{0%{opacity:0;transform:translateX(var(--tt-v5-entry-x)) scale(var(--tt-v5-entry-scale)) rotate(-8deg)}22%{opacity:.97}36%{transform:translateX(0) scale(var(--tt-v5-scale)) rotate(2deg)}68%{transform:scale(var(--tt-v5-scale)) rotate(var(--tt-v5-body-lean))}100%{opacity:.97;transform:scale(var(--tt-v5-scale)) rotate(var(--tt-v5-rest))}}
@keyframes tt-v5-scribe-enter{0%{opacity:0;transform:translateX(var(--tt-v5-entry-x)) scale(var(--tt-v5-entry-scale)) rotate(9deg)}24%{opacity:.96}39%{transform:translateX(0) scale(var(--tt-v5-scale)) rotate(-1deg)}69%{transform:scale(var(--tt-v5-scale)) rotate(var(--tt-v5-body-lean))}100%{opacity:.96;transform:scale(var(--tt-v5-scale)) rotate(var(--tt-v5-rest))}}
@keyframes tt-v5-woman-head{0%,24%,100%{transform:rotate(0)}39%{transform:rotate(var(--tt-v5-head-turn))}52%{transform:rotate(3deg)}72%{transform:rotate(-2deg)}}
@keyframes tt-v5-scribe-head{0%,27%,100%{transform:rotate(0)}43%{transform:rotate(var(--tt-v5-head-turn))}56%{transform:rotate(-3deg)}75%{transform:rotate(2deg)}}
@keyframes tt-v5-woman-body{0%,28%,100%{transform:rotate(0)}48%{transform:rotate(var(--tt-v5-body-lean))}66%{transform:rotate(-1deg)}}
@keyframes tt-v5-scribe-body{0%,30%,100%{transform:rotate(0)}50%{transform:rotate(var(--tt-v5-body-lean))}68%{transform:rotate(1deg)}}
@keyframes tt-v5-skirt-sway{0%,25%,100%{transform:skewX(0) rotate(0)}44%{transform:skewX(4deg) rotate(1deg)}64%{transform:skewX(-3deg) rotate(-.8deg)}82%{transform:skewX(1.5deg)}}
@keyframes tt-v5-woman-upper{0%,22%,100%{transform:rotate(-18deg)}43%,58%{transform:rotate(var(--tt-v5-upper))}76%{transform:rotate(-24deg)}}
@keyframes tt-v5-woman-lower{0%,22%,100%{transform:rotate(-48deg)}43%,58%{transform:rotate(var(--tt-v5-lower))}76%{transform:rotate(-56deg)}}
@keyframes tt-v5-scribe-upper{0%,25%,100%{transform:rotate(-18deg)}46%,61%{transform:rotate(var(--tt-v5-upper))}78%{transform:rotate(-12deg)}}
@keyframes tt-v5-scribe-lower{0%,25%,100%{transform:rotate(-48deg)}46%,61%{transform:rotate(var(--tt-v5-lower))}78%{transform:rotate(-35deg)}}
@keyframes tt-v5-woman-rod-front{0%,22%,100%{transform:rotate(-12deg)}43%,58%{transform:rotate(var(--tt-v5-rod-front))}76%{transform:rotate(-17deg)}}
@keyframes tt-v5-woman-rod-rear{0%,22%,100%{transform:rotate(13deg)}43%,58%{transform:rotate(var(--tt-v5-rod-rear))}76%{transform:rotate(15deg)}}
@keyframes tt-v5-scribe-rod-front{0%,25%,100%{transform:rotate(-12deg)}46%,61%{transform:rotate(var(--tt-v5-rod-front))}78%{transform:rotate(-8deg)}}
@keyframes tt-v5-scribe-rod-rear{0%,25%,100%{transform:rotate(13deg)}46%,61%{transform:rotate(var(--tt-v5-rod-rear))}78%{transform:rotate(9deg)}}
@keyframes tt-v5-ending-bow-left{0%{opacity:0;transform:translateX(-90px) rotate(-8deg) scale(.9)}20%{opacity:.82;transform:translateX(0) rotate(0) scale(1)}48%{transform:rotate(0)}62%,72%{opacity:.82;transform:rotate(13deg) translateY(7px)}100%{opacity:0;transform:translateX(-120px) rotate(5deg) scale(.92)}}
@keyframes tt-v5-ending-bow-right{0%{opacity:0;transform:translateX(90px) rotate(8deg) scaleX(-1) scale(.9)}22%{opacity:.8;transform:translateX(0) rotate(0) scaleX(-1)}50%{transform:scaleX(-1)}64%,74%{opacity:.8;transform:rotate(-13deg) translateY(7px) scaleX(-1)}100%{opacity:0;transform:translateX(120px) rotate(-5deg) scaleX(-1) scale(.92)}}

@media(max-width:980px){
  .tt-stage{grid-template-columns:1fr;gap:16px;align-content:center;overflow:auto}
  .tt-stage-craft{display:block;width:min(720px,100%);height:clamp(280px,37vh,390px);margin-inline:auto}
  .tt-stage-copy{width:min(720px,100%)}
  .tt-puppet--girl{--tt-open-scale:.76;left:10%}.tt-puppet--scribe{--tt-open-scale:.88;right:10%}
}

@media(max-width:720px){
  .tt-opening::before{
    background:linear-gradient(0deg,rgba(9,5,3,.72),rgba(20,10,6,.08) 45%,rgba(10,5,3,.34)),url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 50%/cover no-repeat;
    filter:saturate(.95) contrast(1.03);
  }
  .tt-stage{
    display:flex;
    min-height:94svh;
    gap:9px;
    background:linear-gradient(0deg,rgba(14,7,4,.72),rgba(25,13,8,.12)),url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 38%/cover no-repeat,#180c08;
  }
  .tt-stage::before{display:none}
  .tt-stage-craft{display:block;flex:0 0 clamp(250px,68vw,310px);width:100%;height:clamp(250px,68vw,310px);margin:0}
  .tt-stage-craft::after{inset:2% 0 0}
  .tt-stage-copy{flex:0 0 auto;width:100%;padding:20px 17px}
  .tt-puppet{bottom:-10px}.tt-puppet--girl{--tt-open-scale:.61;left:2%}.tt-puppet--scribe{--tt-open-scale:.68;right:0}
  .tt-puppet::before,.tt-puppet::after{width:120px}

  .tt-transition[data-shadow-scene]{min-height:auto;padding:12px 0 46px}
  .tt-transition[data-shadow-scene] .tt-transition-inner{min-height:0}
  .tt-transition[data-shadow-scene] .tt-shadow-stage{
    height:clamp(250px,70vw,315px);
    min-height:250px;
    background-size:100% 100%,100% 100%,contain,auto;
    background-position:center;
    background-repeat:no-repeat;
  }
  .tt-transition[data-shadow-scene] .tt-shadow-figure{--tt-v5-scale:1.15;--tt-v5-entry-scale:1.03;bottom:20px;filter:drop-shadow(12px 8px 4px rgba(30,13,7,.5))}
  .tt-transition[data-shadow-scene] .tt-shadow-figure--woman{left:5%}
  .tt-transition[data-shadow-scene] .tt-shadow-figure--scribe{--tt-v5-scale:1.1;--tt-v5-entry-scale:1;right:5%}
  .tt-transition[data-shadow-scene] .tt-shadow-props{transform:scale(.88);transform-origin:50% 7%}
  .tt-ending-craft::before,.tt-ending-craft::after{bottom:5%;width:55px;height:144px}
  .tt-ending-craft::before{left:2%}.tt-ending-craft::after{right:2%}
}

@media(prefers-reduced-motion:reduce){
  .tt-opening::before,.tt-stage-craft,.tt-stage-craft *,.tt-transition[data-shadow-scene] .tt-shadow-stage,.tt-shadow-stage *,.tt-ending-craft::before,.tt-ending-craft::after{animation:none!important;transition:none!important}
  .tt-stage-craft{display:block!important}
  .tt-puppet--girl{opacity:.96!important;transform:scale(var(--tt-open-scale)) rotate(-1deg)!important}
  .tt-puppet--scribe{opacity:.96!important;transform:scale(var(--tt-open-scale)) rotate(2deg)!important}
  .tt-puppet i,.tt-puppet b{transform:none!important}
  .tt-puppet span{transform:skewX(-1deg)!important}
  .tt-puppet--girl::before,.tt-puppet--scribe::before{transform:rotate(28deg)!important}
  .tt-puppet--girl::after,.tt-puppet--scribe::after{transform:rotate(-17deg)!important}

  .tt-transition[data-shadow-scene] .tt-shadow-stage{
    background-size:100% 100%,100% 100%,cover,auto!important;
    background-position:center!important;
    filter:saturate(.96) contrast(1.03)!important;
  }
  .tt-transition[data-shadow-scene] .tt-shadow-props{display:block!important;opacity:.72!important}
  .tt-transition[data-shadow-scene] .tt-shadow-figure--woman{opacity:.97!important;transform:scale(var(--tt-v5-scale)) rotate(0)!important}
  .tt-transition[data-shadow-scene] .tt-shadow-figure--scribe{opacity:.96!important;transform:scale(var(--tt-v5-scale)) rotate(2deg)!important}
  .tt-shadow-stage .tt-shadow-cast{transform:skewX(10deg) scaleX(1.12)!important}
  .tt-shadow-stage .tt-shadow-head,.tt-shadow-stage .tt-shadow-body{transform:none!important}
  .tt-shadow-stage .tt-shadow-skirt{transform:skewX(0)!important}
  .tt-shadow-figure--woman .tt-shadow-arm--upper,.tt-shadow-figure--scribe .tt-shadow-arm--upper{transform:rotate(-18deg)!important}
  .tt-shadow-figure--woman .tt-shadow-arm--lower,.tt-shadow-figure--scribe .tt-shadow-arm--lower{transform:rotate(-48deg)!important}
  .tt-shadow-stage .tt-shadow-rod--front{transform:rotate(-12deg)!important}
  .tt-shadow-stage .tt-shadow-rod--rear{transform:rotate(13deg)!important}
  .tt-shadow-stage .tt-shadow-kite{transform:rotate(-10deg)!important}
  .tt-shadow-stage .tt-shadow-lattice{transform:scale(.94)!important}
  .tt-shadow-stage .tt-shadow-stamp{transform:rotate(-12deg)!important}
  .tt-shadow-stage .tt-shadow-hand{transform:rotate(var(--tt-hand-angle))!important}
  .tt-shadow-stage .tt-shadow-petal{transform:rotate(var(--tt-petal-angle))!important}
  .tt-shadow-line path{stroke-dashoffset:0!important}
  .tt-shadow-open-door::before{transform:rotateY(-72deg)!important}
  .tt-shadow-open-door::after{transform:rotateY(72deg)!important}
  .tt-ending-craft::before{opacity:.76!important;transform:rotate(7deg)!important}
  .tt-ending-craft::after{opacity:.76!important;transform:scaleX(-1) rotate(-7deg)!important}
}

/* v5 ending articulation: replace the temporary whole-silhouette stand-ins. */
.tt-ending-craft::before,.tt-ending-craft::after{
  content:none!important;
  display:none!important;
  animation:none!important;
}
.tt-ending .tt-shadow-figure--ending{
  --tt-end-scale:1.92;
  display:block;
  z-index:1;
  bottom:clamp(42px,7vh,78px);
  opacity:0;
  filter:drop-shadow(22px 14px 7px rgba(25,10,5,.58));
  transform-origin:50% 94%;
}
.tt-ending .tt-shadow-figure--ending.tt-shadow-figure--woman{left:8%;transform:scale(var(--tt-end-scale))}
.tt-ending .tt-shadow-figure--ending.tt-shadow-figure--scribe{right:8%;scale:-1 1;transform:scale(var(--tt-end-scale)) rotate(2deg)}
.tt-ending.is-visible .tt-shadow-figure--ending.tt-shadow-figure--woman{animation:tt-v5-ending-woman-exit 8.6s cubic-bezier(.2,.72,.2,1) 3.55s both}
.tt-ending.is-visible .tt-shadow-figure--ending.tt-shadow-figure--scribe{animation:tt-v5-ending-scribe-exit 8.6s cubic-bezier(.2,.72,.2,1) 3.78s both}
.tt-ending.is-visible .tt-shadow-figure--ending.tt-shadow-figure--woman .tt-shadow-head{animation:tt-v5-ending-woman-look 8.6s ease-in-out 3.55s both}
.tt-ending.is-visible .tt-shadow-figure--ending.tt-shadow-figure--scribe .tt-shadow-head{animation:tt-v5-ending-scribe-look 8.6s ease-in-out 3.78s both}
.tt-ending.is-visible .tt-shadow-figure--ending .tt-shadow-body{animation:tt-v5-ending-body-bow 8.6s ease-in-out 3.6s both}
.tt-ending.is-visible .tt-shadow-figure--ending .tt-shadow-skirt{animation:tt-v5-ending-skirt 8.6s ease-in-out 3.6s both}
.tt-ending.is-visible .tt-shadow-figure--ending.tt-shadow-figure--woman .tt-shadow-arm--upper{animation:tt-v5-ending-woman-upper 8.6s ease-in-out 3.55s both}
.tt-ending.is-visible .tt-shadow-figure--ending.tt-shadow-figure--woman .tt-shadow-arm--lower{animation:tt-v5-ending-woman-lower 8.6s ease-in-out 3.55s both}
.tt-ending.is-visible .tt-shadow-figure--ending.tt-shadow-figure--scribe .tt-shadow-arm--upper{animation:tt-v5-ending-scribe-upper 8.6s ease-in-out 3.78s both}
.tt-ending.is-visible .tt-shadow-figure--ending.tt-shadow-figure--scribe .tt-shadow-arm--lower{animation:tt-v5-ending-scribe-lower 8.6s ease-in-out 3.78s both}
.tt-ending.is-visible .tt-shadow-figure--ending.tt-shadow-figure--woman .tt-shadow-rod--front{animation:tt-v5-ending-woman-rod-front 8.6s ease-in-out 3.55s both}
.tt-ending.is-visible .tt-shadow-figure--ending.tt-shadow-figure--woman .tt-shadow-rod--rear{animation:tt-v5-ending-woman-rod-rear 8.6s ease-in-out 3.55s both}
.tt-ending.is-visible .tt-shadow-figure--ending.tt-shadow-figure--scribe .tt-shadow-rod--front{animation:tt-v5-ending-scribe-rod-front 8.6s ease-in-out 3.78s both}
.tt-ending.is-visible .tt-shadow-figure--ending.tt-shadow-figure--scribe .tt-shadow-rod--rear{animation:tt-v5-ending-scribe-rod-rear 8.6s ease-in-out 3.78s both}

@keyframes tt-v5-ending-woman-exit{
  0%{opacity:0;transform:translateX(-92px) scale(1.7) rotate(-7deg)}
  18%{opacity:.94;transform:translateX(0) scale(var(--tt-end-scale)) rotate(1deg)}
  39%{transform:scale(var(--tt-end-scale)) rotate(0)}
  50%,59%{transform:scale(var(--tt-end-scale)) rotate(12deg) translateY(8px)}
  69%{opacity:.94;transform:scale(var(--tt-end-scale)) rotate(-2deg)}
  79%{transform:translateX(-12px) scale(var(--tt-end-scale)) rotate(-5deg)}
  100%{opacity:0;transform:translateX(-176px) scale(1.76) rotate(-8deg)}
}
@keyframes tt-v5-ending-scribe-exit{
  0%{opacity:0;transform:translateX(-92px) scale(1.7) rotate(7deg)}
  20%{opacity:.93;transform:translateX(0) scale(var(--tt-end-scale)) rotate(-1deg)}
  40%{transform:scale(var(--tt-end-scale)) rotate(0)}
  51%,60%{transform:scale(var(--tt-end-scale)) rotate(-12deg) translateY(8px)}
  70%{opacity:.93;transform:scale(var(--tt-end-scale)) rotate(2deg)}
  80%{transform:translateX(-12px) scale(var(--tt-end-scale)) rotate(5deg)}
  100%{opacity:0;transform:translateX(-176px) scale(1.76) rotate(8deg)}
}
@keyframes tt-v5-ending-woman-look{0%,31%{transform:rotate(0)}43%{transform:rotate(-8deg)}58%{transform:rotate(6deg)}70%{transform:rotate(-12deg)}82%,100%{transform:rotate(-5deg)}}
@keyframes tt-v5-ending-scribe-look{0%,32%{transform:rotate(0)}44%{transform:rotate(8deg)}59%{transform:rotate(-6deg)}71%{transform:rotate(12deg)}83%,100%{transform:rotate(5deg)}}
@keyframes tt-v5-ending-body-bow{0%,38%{transform:rotate(0)}49%,59%{transform:rotate(7deg) translateY(2px)}69%{transform:rotate(-1deg)}100%{transform:rotate(2deg)}}
@keyframes tt-v5-ending-skirt{0%,28%{transform:skewX(0) rotate(0)}43%{transform:skewX(4deg) rotate(1deg)}55%{transform:skewX(-3deg) rotate(-1deg)}69%{transform:skewX(2deg)}100%{transform:skewX(-5deg) rotate(-2deg)}}
@keyframes tt-v5-ending-woman-upper{0%,31%{transform:rotate(-18deg)}43%,59%{transform:rotate(-48deg)}70%{transform:rotate(-25deg)}100%{transform:rotate(-12deg)}}
@keyframes tt-v5-ending-woman-lower{0%,31%{transform:rotate(-48deg)}43%,59%{transform:rotate(-82deg)}70%{transform:rotate(-56deg)}100%{transform:rotate(-40deg)}}
@keyframes tt-v5-ending-scribe-upper{0%,32%{transform:rotate(-18deg)}44%,60%{transform:rotate(-3deg)}71%{transform:rotate(-13deg)}100%{transform:rotate(-24deg)}}
@keyframes tt-v5-ending-scribe-lower{0%,32%{transform:rotate(-48deg)}44%,60%{transform:rotate(-20deg)}71%{transform:rotate(-36deg)}100%{transform:rotate(-58deg)}}
@keyframes tt-v5-ending-woman-rod-front{0%,31%{transform:rotate(-12deg)}43%,59%{transform:rotate(-31deg)}70%{transform:rotate(-18deg)}100%{transform:rotate(-8deg)}}
@keyframes tt-v5-ending-woman-rod-rear{0%,31%{transform:rotate(13deg)}43%,59%{transform:rotate(21deg)}70%{transform:rotate(15deg)}100%{transform:rotate(9deg)}}
@keyframes tt-v5-ending-scribe-rod-front{0%,32%{transform:rotate(-12deg)}44%,60%{transform:rotate(6deg)}71%{transform:rotate(-7deg)}100%{transform:rotate(-17deg)}}
@keyframes tt-v5-ending-scribe-rod-rear{0%,32%{transform:rotate(13deg)}44%,60%{transform:rotate(4deg)}71%{transform:rotate(10deg)}100%{transform:rotate(17deg)}}

@media(max-width:720px){
  .tt-ending .tt-shadow-figure--ending{--tt-end-scale:1.08;bottom:24px;filter:drop-shadow(12px 8px 4px rgba(25,10,5,.52))}
  .tt-ending .tt-shadow-figure--ending.tt-shadow-figure--woman{left:2%}
  .tt-ending .tt-shadow-figure--ending.tt-shadow-figure--scribe{right:2%}
}

@media(prefers-reduced-motion:reduce){
  .tt-ending .tt-shadow-figure--ending,.tt-ending .tt-shadow-figure--ending *{animation:none!important;transition:none!important}
  .tt-ending .tt-shadow-figure--ending.tt-shadow-figure--woman{opacity:.88!important;transform:scale(var(--tt-end-scale)) rotate(0)!important}
  .tt-ending .tt-shadow-figure--ending.tt-shadow-figure--scribe{opacity:.88!important;scale:-1 1!important;transform:scale(var(--tt-end-scale)) rotate(2deg)!important}
  .tt-ending .tt-shadow-figure--ending .tt-shadow-head,.tt-ending .tt-shadow-figure--ending .tt-shadow-body{transform:none!important}
  .tt-ending .tt-shadow-figure--ending .tt-shadow-skirt{transform:skewX(0)!important}
  .tt-ending .tt-shadow-figure--ending .tt-shadow-arm--upper{transform:rotate(-18deg)!important}
  .tt-ending .tt-shadow-figure--ending .tt-shadow-arm--lower{transform:rotate(-48deg)!important}
  .tt-ending .tt-shadow-figure--ending .tt-shadow-rod--front{transform:rotate(-12deg)!important}
  .tt-ending .tt-shadow-figure--ending .tt-shadow-rod--rear{transform:rotate(13deg)!important}
}

/* Art direction v6: the male and female shadow puppets are a fixed tableau. */
.tt-opening::before{
  animation:none!important;
  transform:none!important;
  background:
    linear-gradient(90deg,rgba(8,4,3,.76),rgba(30,15,9,.04) 26% 74%,rgba(8,4,3,.78)),
    linear-gradient(0deg,rgba(8,4,3,.68),transparent 42%,rgba(20,10,6,.16)),
    url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 50%/cover no-repeat;
  filter:saturate(.96) contrast(1.035) sepia(.04);
}
.tt-stage{
  grid-template-columns:1fr;
  gap:0;
  background:
    linear-gradient(90deg,rgba(12,6,4,.48),transparent 22% 78%,rgba(12,6,4,.5)) 0 0/100% 100% no-repeat,
    linear-gradient(0deg,rgba(10,5,3,.56),transparent 35%,rgba(16,8,5,.06)) 0 0/100% 100% no-repeat,
    url("./art/tian-tian-shadow-theatre-static-duet-20260814.webp") 50% 50%/contain no-repeat,
    #170d09;
  background-position:center!important;
  transform:none!important;
}
.tt-stage-craft,
.tt-stage-craft .tt-puppet,
.tt-transition[data-shadow-scene] .tt-transition-puppet,
.tt-transition[data-shadow-scene] .tt-shadow-figure,
.tt-ending .tt-shadow-figure--ending{
  display:none!important;
  animation:none!important;
  transform:none!important;
}
.tt-ending-craft::before,
.tt-ending-craft::after{
  content:none!important;
  display:none!important;
  animation:none!important;
}
.tt-stage-copy{
  position:relative;
  z-index:4;
  width:min(720px,56vw);
  margin-inline:auto;
}
.tt-transition[data-shadow-scene] .tt-shadow-stage{
  background:
    linear-gradient(0deg,rgba(13,6,4,.5),transparent 31%,rgba(18,9,5,.04)) 0 0/100% 100% no-repeat,
    linear-gradient(90deg,rgba(12,6,4,.22),transparent 16% 84%,rgba(12,6,4,.24)) 0 0/100% 100% no-repeat,
    url("./art/tian-tian-shadow-theatre-static-duet-20260814.webp") 50% 50%/contain no-repeat,
    #21130d;
  background-position:center!important;
  transform:none!important;
}
.tt-transition.is-visible .tt-shadow-stage{
  animation:tt-v6-fixed-tableau-light 8s ease-out both;
}
@keyframes tt-v6-fixed-tableau-light{
  0%{filter:saturate(.87) contrast(1.02) brightness(.9)}
  48%{filter:saturate(.99) contrast(1.04) brightness(1.02)}
  100%{filter:saturate(.96) contrast(1.035) brightness(1)}
}
.tt-ending::before{
  background:
    linear-gradient(0deg,rgba(9,4,3,.97),rgba(16,8,5,.72) 34%,rgba(16,8,5,.08) 70%,rgba(10,5,3,.38)) 0 0/100% 100% no-repeat,
    linear-gradient(90deg,rgba(6,3,2,.62),transparent 20% 80%,rgba(6,3,2,.64)) 0 0/100% 100% no-repeat,
    url("./art/tian-tian-shadow-theatre-static-duet-20260814.webp") 50% 50%/contain no-repeat,
    #120906;
  background-position:center!important;
  transform:none!important;
}
.tt-ending.is-visible::before{
  transform:none!important;
  animation:tt-v6-ending-lamp 7.5s ease-out both;
}
@keyframes tt-v6-ending-lamp{
  0%{filter:saturate(.78) contrast(1.035) brightness(.73)}
  55%{filter:saturate(.91) contrast(1.045) brightness(.94)}
  100%{filter:saturate(.84) contrast(1.04) brightness(.84)}
}

@media(max-width:980px){
  .tt-stage-copy{width:min(700px,74vw)}
}

@media(max-width:720px){
  .tt-opening::before{
    background:
      linear-gradient(0deg,rgba(8,4,3,.8),rgba(19,9,6,.04) 38%,rgba(9,4,3,.32)),
      url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 8%/100% auto no-repeat,
      #120906;
  }
  .tt-stage{
    min-height:94svh;
    justify-content:flex-start;
    padding-top:clamp(224px,57vw,286px);
    background:
      linear-gradient(0deg,rgba(13,6,4,.86),rgba(20,10,6,.04) 50%,rgba(9,4,3,.2)) 0 0/100% 100% no-repeat,
      url("./art/tian-tian-shadow-theatre-static-duet-20260814.webp") 50% 8px/100% auto no-repeat,
      #150a07;
    background-position:center top!important;
  }
  .tt-stage-copy{width:100%;margin-top:0}
  .tt-transition[data-shadow-scene] .tt-shadow-stage{
    height:clamp(250px,70vw,315px);
    min-height:250px;
    background:
      linear-gradient(0deg,rgba(13,6,4,.46),transparent 36%,rgba(18,9,5,.03)) 0 0/100% 100% no-repeat,
      url("./art/tian-tian-shadow-theatre-static-duet-20260814.webp") 50% 50%/contain no-repeat,
      #21130d;
    background-position:center!important;
  }
  .tt-ending::before{
    background:
      linear-gradient(0deg,rgba(9,4,3,.98),rgba(16,8,5,.78) 43%,rgba(16,8,5,.07) 72%,rgba(10,5,3,.3)) 0 0/100% 100% no-repeat,
      url("./art/tian-tian-shadow-theatre-static-duet-20260814.webp") 50% 10%/100% auto no-repeat,
      #120906;
    background-position:center top!important;
  }
  .tt-ending-copy{
    padding-top:clamp(265px,70vw,330px);
  }
}

/* v9 story choreography: each interlude now follows the order of its
   dialogue. The original puppet designs stay untouched; pose, light, prop and
   camera beats create the dramatic action around them. */
.tt-pose-layer--transition{--tt-pose-duration:var(--tt-act-duration,8s)}
.tt-transition[data-shadow-scene="scroll-prologue"]{--tt-act-duration:7.2s;--tt-cam-from:108% auto;--tt-cam-to:102% auto;--tt-story-light:rgba(235,194,118,.34)}
.tt-transition[data-shadow-scene="wind-kite"]{--tt-act-duration:8s;--tt-cam-from:102% auto;--tt-cam-to:105% auto;--tt-story-light:rgba(241,201,120,.36)}
.tt-transition[data-shadow-scene="ten-knot-door"]{--tt-act-duration:8.2s;--tt-cam-from:101% auto;--tt-cam-to:105% auto;--tt-story-light:rgba(213,140,82,.32)}
.tt-transition[data-shadow-scene="frost-lantern"]{--tt-act-duration:8s;--tt-cam-from:106% auto;--tt-cam-to:101% auto;--tt-story-light:rgba(190,219,211,.3)}
.tt-transition[data-shadow-scene="court-scroll"]{--tt-act-duration:8.4s;--tt-cam-from:103% auto;--tt-cam-to:101% auto;--tt-story-light:rgba(235,184,103,.31)}
.tt-transition[data-shadow-scene="seal-road"]{--tt-act-duration:8.6s;--tt-cam-from:104% auto;--tt-cam-to:101% auto;--tt-story-light:rgba(222,164,104,.32)}
.tt-transition[data-shadow-scene="evidence-blocks"]{--tt-act-duration:8.2s;--tt-cam-from:101% auto;--tt-cam-to:101% auto;--tt-story-light:rgba(210,191,144,.3)}
.tt-transition[data-shadow-scene="seven-moon"]{--tt-act-duration:9s;--tt-cam-from:106% auto;--tt-cam-to:102% auto;--tt-story-light:rgba(190,211,213,.34)}
.tt-transition[data-shadow-scene="guarded-lamp"]{--tt-act-duration:9.2s;--tt-cam-from:106% auto;--tt-cam-to:100% auto;--tt-story-light:rgba(247,203,113,.4)}

/* A hand-lit pool follows the current speaker: left for the woman, right for
   the scribe, and centre when both voices join. It sits below craft props and
   puppets, so no face, garment or control rod is washed out. */
.tt-shadow-stage::before{
  content:"";
  position:absolute;
  z-index:2;
  top:-14%;
  bottom:-14%;
  left:18%;
  right:18%;
  background:radial-gradient(ellipse at 50% 57%,var(--tt-story-light,rgba(239,199,122,.34)) 0,rgba(239,199,122,.12) 27%,transparent 66%);
  filter:blur(11px);
  mix-blend-mode:screen;
  opacity:0;
  pointer-events:none;
  will-change:transform,opacity;
}
.tt-transition.is-visible[data-tt-story-flow="woman-scribe"] .tt-shadow-stage::before{animation:tt-story-light-woman-scribe var(--tt-story-duration,var(--tt-act-duration,8s)) ease-in-out both}
.tt-transition.is-visible[data-tt-story-flow="scribe-woman"] .tt-shadow-stage::before{animation:tt-story-light-scribe-woman var(--tt-story-duration,var(--tt-act-duration,8s)) ease-in-out both}
.tt-transition.is-visible[data-tt-story-flow="woman-scribe-together"] .tt-shadow-stage::before{animation:tt-story-light-three var(--tt-story-duration,var(--tt-act-duration,9.2s)) ease-in-out both}
.tt-transition.is-visible[data-tt-story-flow="together"] .tt-shadow-stage::before{animation:tt-story-light-together var(--tt-story-duration,var(--tt-act-duration,7.2s)) ease-in-out both}
@keyframes tt-story-light-woman-scribe{
  0%{opacity:0;transform:translate3d(-49%,1%,0) scale(.88)}
  13%,42%{opacity:.78;transform:translate3d(-49%,0,0) scale(1)}
  52%{opacity:.38;transform:translate3d(0,0,0) scale(.94)}
  62%,90%{opacity:.72;transform:translate3d(49%,0,0) scale(1)}
  100%{opacity:.16;transform:translate3d(49%,1%,0) scale(.96)}
}
@keyframes tt-story-light-scribe-woman{
  0%{opacity:0;transform:translate3d(49%,1%,0) scale(.88)}
  13%,42%{opacity:.76;transform:translate3d(49%,0,0) scale(1)}
  52%{opacity:.38;transform:translate3d(0,0,0) scale(.94)}
  62%,90%{opacity:.72;transform:translate3d(-49%,0,0) scale(1)}
  100%{opacity:.16;transform:translate3d(-49%,1%,0) scale(.96)}
}
@keyframes tt-story-light-three{
  0%{opacity:0;transform:translate3d(-49%,1%,0) scale(.88)}
  12%,34%{opacity:.78;transform:translate3d(-49%,0,0) scale(1)}
  43%,64%{opacity:.72;transform:translate3d(49%,0,0) scale(1)}
  73%,94%{opacity:.8;transform:translate3d(0,-1%,0) scale(1.18)}
  100%{opacity:.22;transform:translate3d(0,0,0) scale(1.05)}
}
@keyframes tt-story-light-together{
  0%{opacity:0;transform:scale(.82)}
  18%,78%{opacity:.72;transform:scale(1.12)}
  100%{opacity:.2;transform:scale(1)}
}

/* Dialogue appears in the same rhythm as the puppet gestures instead of all
   lines arriving together. */
.tt-transition.is-visible[data-tt-story-flow="together"] .tt-shadow-dialogue>p:nth-of-type(1){animation-delay:.9s}
.tt-transition.is-visible:is([data-tt-story-flow="woman-scribe"],[data-tt-story-flow="scribe-woman"]) .tt-shadow-dialogue>p:nth-of-type(1){animation-delay:.72s}
.tt-transition.is-visible:is([data-tt-story-flow="woman-scribe"],[data-tt-story-flow="scribe-woman"]) .tt-shadow-dialogue>p:nth-of-type(2){animation-delay:3.55s}
.tt-transition.is-visible[data-tt-story-flow="woman-scribe-together"] .tt-shadow-dialogue>p:nth-of-type(1){animation-delay:.68s}
.tt-transition.is-visible[data-tt-story-flow="woman-scribe-together"] .tt-shadow-dialogue>p:nth-of-type(2){animation-delay:3.05s}
.tt-transition.is-visible[data-tt-story-flow="woman-scribe-together"] .tt-shadow-dialogue>p:nth-of-type(3){animation-delay:5.95s}

/* Scene-specific stage business: doors answer the knock, hands arrive before
   the door opens, then velvet petals bloom only after both narrators speak. */
.tt-transition[data-shadow-scene="ten-knot-door"].is-visible .tt-shadow-door::before,
.tt-transition[data-shadow-scene="ten-knot-door"].is-visible .tt-shadow-door::after{animation-delay:1s}
.tt-transition[data-shadow-scene="ten-knot-door"].is-visible .tt-shadow-lattice{animation-delay:.9s}
.tt-transition[data-shadow-scene="guarded-lamp"].is-visible .tt-shadow-open-door::before,
.tt-transition[data-shadow-scene="guarded-lamp"].is-visible .tt-shadow-open-door::after{animation-delay:1.7s}
.tt-transition[data-shadow-scene="guarded-lamp"].is-visible .tt-shadow-hand{animation-delay:calc(.8s + var(--tt-delay-knot))}
.tt-transition[data-shadow-scene="guarded-lamp"].is-visible .tt-shadow-petal{animation-delay:calc(4.1s + var(--tt-delay-petal))}
.tt-transition.is-visible .tt-shadow-screen{animation:tt-story-paper-breathe var(--tt-story-duration,var(--tt-act-duration,8s)) ease-in-out both}
@keyframes tt-story-paper-breathe{0%{opacity:.42}42%{opacity:.78}78%{opacity:.62}100%{opacity:.52}}

@media(min-width:721px){
  .tt-transition.is-visible .tt-pose-actor--woman{animation:tt-story-actor-woman var(--tt-story-duration,var(--tt-act-duration,8s)) cubic-bezier(.2,.72,.2,1) both}
  .tt-transition.is-visible .tt-pose-actor--scribe{animation:tt-story-actor-scribe var(--tt-story-duration,var(--tt-act-duration,8s)) cubic-bezier(.2,.72,.2,1) both}
  .tt-transition[data-shadow-scene="frost-lantern"].is-visible .tt-pose-actor--woman{animation-name:tt-story-lament-woman}
  .tt-transition[data-shadow-scene="guarded-lamp"].is-visible .tt-pose-actor--woman{animation-name:tt-story-gather-woman}
  .tt-transition[data-shadow-scene="guarded-lamp"].is-visible .tt-pose-actor--scribe{animation-name:tt-story-gather-scribe}
  @keyframes tt-story-actor-woman{0%{opacity:.7;transform:translate3d(-2.8%,1.2%,0) rotate(-.35deg)}22%{opacity:1;transform:translate3d(0,0,0)}68%{transform:translate3d(1.1%,-.35%,0) rotate(.2deg)}100%{opacity:.98;transform:none}}
  @keyframes tt-story-actor-scribe{0%{opacity:.7;transform:translate3d(2.8%,1.2%,0) rotate(.35deg)}22%{opacity:1;transform:translate3d(0,0,0)}68%{transform:translate3d(-1.1%,-.35%,0) rotate(-.2deg)}100%{opacity:.98;transform:none}}
  @keyframes tt-story-lament-woman{0%{opacity:.72;transform:translate3d(-2%,0,0)}28%{opacity:1;transform:none}58%,78%{transform:translate3d(.5%,1.7%,0) rotate(.45deg)}100%{opacity:.96;transform:translate3d(0,1%,0)}}
  @keyframes tt-story-gather-woman{0%{opacity:.75;transform:translate3d(-2%,1%,0)}28%{opacity:1;transform:none}72%,92%{transform:translate3d(3.2%,0,0)}100%{opacity:.98;transform:translate3d(2.1%,0,0)}}
  @keyframes tt-story-gather-scribe{0%{opacity:.75;transform:translate3d(2%,1%,0)}28%{opacity:1;transform:none}72%,92%{transform:translate3d(-3.2%,0,0)}100%{opacity:.98;transform:translate3d(-2.1%,0,0)}}
}

@media(min-width:901px){
  html.tt-pose-ready .tt-transition.is-visible .tt-shadow-stage{
    animation:tt-act-camera var(--tt-act-duration,8s) cubic-bezier(.18,.75,.2,1) both,tt-v6-fixed-tableau-light var(--tt-act-duration,8s) ease-out both;
  }
  @keyframes tt-act-camera{
    from{background-size:100% 100%,100% 100%,var(--tt-cam-from,103% auto)}
    to{background-size:100% 100%,100% 100%,var(--tt-cam-to,101% auto)}
  }
}

@media(prefers-reduced-motion:reduce){
  .tt-shadow-stage::before{display:none!important;animation:none!important}
  .tt-transition.is-visible .tt-shadow-stage,
  .tt-transition.is-visible .tt-shadow-screen,
  .tt-transition.is-visible .tt-pose-actor{animation:none!important;transform:none!important}
  .tt-transition .tt-shadow-dialogue>p{opacity:1!important;transform:none!important;animation:none!important}
}

@media(prefers-reduced-motion:reduce){
  .tt-opening::before,
  .tt-stage,
  .tt-transition[data-shadow-scene] .tt-shadow-stage,
  .tt-ending::before{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
}

/* Art direction v7: preserve the reference designs; animate them with a six-pose paper-shadow sheet. */
.tt-stage-craft,
.tt-stage-craft .tt-puppet,
.tt-transition[data-shadow-scene] .tt-transition-puppet,
.tt-transition[data-shadow-scene] .tt-shadow-figure,
.tt-ending .tt-shadow-figure--ending{
  display:none!important;
  animation:none!important;
  transform:none!important;
}

html.tt-motion-ready .tt-transition[data-shadow-scene] .tt-transition-inner{
  transform:none!important;
}

.tt-pose-layer{
  position:absolute;
  z-index:5;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  opacity:0;
}
html.tt-pose-ready .tt-pose-layer{opacity:1}
.tt-stage>.tt-pose-layer{z-index:2}
.tt-shadow-stage>.tt-pose-layer{z-index:5}
.tt-ending>.tt-pose-layer{z-index:1}
.tt-pose-layer--opening{--tt-pose-duration:3.55s}
.tt-pose-layer--transition{--tt-pose-duration:6.8s}
.tt-pose-layer--ending{--tt-pose-duration:8.6s}

.tt-pose-actor{
  position:absolute;
  bottom:0;
  width:min(48%,700px);
  height:auto;
  aspect-ratio:1;
  filter:drop-shadow(22px 15px 8px rgba(28,12,6,.56));
  transform-origin:50% 94%;
}
.tt-pose-actor--woman{left:-1.5%}
.tt-pose-actor--scribe{right:-1.5%}
.tt-pose-sprite{
  position:absolute;
  inset:0;
  display:block;
  background-color:transparent;
  background-image:var(--tt-pose-sheet);
  background-repeat:no-repeat;
  background-size:300% 200%;
  background-position:var(--tt-pose-start,0% 0%);
  mix-blend-mode:multiply;
  filter:brightness(1.08) saturate(.98);
  will-change:background-position;
}
.tt-pose-actor--woman{--tt-pose-sheet:url("./art/tian-tian-shadow-woman-poses-20260815.webp")}
.tt-pose-actor--scribe{--tt-pose-sheet:url("./art/tian-tian-shadow-scribe-poses-20260815.webp")}

.tt-pose-layer.is-playing .tt-pose-sprite,
.tt-pose-actor.is-playing .tt-pose-sprite,
.tt-transition.is-visible .tt-pose-sprite,
.tt-ending.is-visible .tt-pose-sprite{
  animation:tt-pose-sequence var(--tt-pose-duration,7s) steps(1,end) both;
}
@keyframes tt-pose-sequence{
  0%,20%{background-position:var(--tt-pose-start,0% 0%)}
  20.01%,43%{background-position:var(--tt-pose-mid,50% 0%)}
  43.01%,78%{background-position:var(--tt-pose-action,100% 0%)}
  78.01%,100%{background-position:var(--tt-pose-end,0% 100%)}
}

/* Keep the baked duet as a robust no-JS/loading fallback. Once both pose sheets
   are ready, the empty screen replaces it in the same state change. */
html.tt-pose-ready .tt-stage{
  background:
    linear-gradient(90deg,rgba(12,6,4,.48),transparent 22% 78%,rgba(12,6,4,.5)) 0 0/100% 100% no-repeat,
    linear-gradient(0deg,rgba(10,5,3,.56),transparent 35%,rgba(16,8,5,.06)) 0 0/100% 100% no-repeat,
    url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 50%/cover no-repeat,
    #170d09;
  background-position:center!important;
}
html.tt-pose-ready .tt-transition[data-shadow-scene] .tt-shadow-stage{
  background:
    linear-gradient(0deg,rgba(13,6,4,.5),transparent 31%,rgba(18,9,5,.04)) 0 0/100% 100% no-repeat,
    linear-gradient(90deg,rgba(12,6,4,.22),transparent 16% 84%,rgba(12,6,4,.24)) 0 0/100% 100% no-repeat,
    url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 50%/cover no-repeat,
    #21130d;
  background-position:center!important;
}
.tt-ending::before{inset:0!important}
html.tt-pose-ready .tt-ending::before{
  inset:0!important;
  background:
    linear-gradient(0deg,rgba(9,4,3,.97),rgba(16,8,5,.72) 34%,rgba(16,8,5,.08) 70%,rgba(10,5,3,.38)) 0 0/100% 100% no-repeat,
    linear-gradient(90deg,rgba(6,3,2,.62),transparent 20% 80%,rgba(6,3,2,.64)) 0 0/100% 100% no-repeat,
    url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 50%/cover no-repeat,
    #120906;
  background-position:center!important;
}

@media(max-width:980px){
  .tt-pose-actor{width:min(49%,610px)}
}

@media(max-width:720px){
  .tt-stage{
    padding-top:clamp(222px,58vw,286px);
  }
  .tt-pose-layer--opening,
  .tt-pose-layer--ending{
    inset:0 0 auto;
    width:100%;
    height:auto;
    aspect-ratio:16/9;
  }
  .tt-transition[data-shadow-scene] .tt-shadow-stage{
    width:100%;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:16/9;
  }
  .tt-pose-actor{
    bottom:0;
    width:56.25%;
    height:auto;
    filter:drop-shadow(10px 7px 4px rgba(28,12,6,.52));
  }
  .tt-pose-actor--woman{left:-2%}
  .tt-pose-actor--scribe{right:-2%}
  html.tt-pose-ready .tt-stage{
    background:
      linear-gradient(0deg,rgba(13,6,4,.86),rgba(20,10,6,.04) 50%,rgba(9,4,3,.2)) 0 0/100% 100% no-repeat,
      url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 8px/100% auto no-repeat,
      #150a07;
    background-position:center top!important;
  }
  html.tt-pose-ready .tt-transition[data-shadow-scene] .tt-shadow-stage{
    background:
      linear-gradient(0deg,rgba(13,6,4,.46),transparent 36%,rgba(18,9,5,.03)) 0 0/100% 100% no-repeat,
      url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 50%/cover no-repeat,
      #21130d;
    background-position:center!important;
  }
  html.tt-pose-ready .tt-ending::before{
    background:
      linear-gradient(0deg,rgba(9,4,3,.98),rgba(16,8,5,.78) 43%,rgba(16,8,5,.07) 72%,rgba(10,5,3,.3)) 0 0/100% 100% no-repeat,
      url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 0/100% auto no-repeat,
      #120906;
    background-position:center top!important;
  }
  .tt-ending-copy{padding-top:clamp(226px,62vw,304px)}
}

@media(prefers-reduced-motion:reduce){
  .tt-pose-layer,
  .tt-pose-actor,
  .tt-pose-sprite{
    animation:none!important;
    transition:none!important;
    transform:none!important;
  }
  html.tt-pose-ready .tt-pose-layer{opacity:1!important}
  .tt-pose-sprite{
    background-position:var(--tt-pose-action,var(--tt-pose-start,0% 0%))!important;
    will-change:auto;
  }
}

/* Art direction v8: full-height desktop theatre, high-resolution puppets and
   a richer vocabulary of papercutting, velvet flower and Suzhou embroidery. */
.tt-hero-art{overflow:hidden}
.tt-hero-art img{position:relative;z-index:1}
.tt-hero-art figcaption{
  position:relative;
  z-index:7;
  min-height:76px;
  padding:16px 18px;
  background:linear-gradient(100deg,#152628 0%,#263b39 62%,#3b302c 100%);
  color:#e0ddd0;
  font-size:11px;
  line-height:1.8;
  box-shadow:0 -1px rgba(223,187,112,.28),0 -12px 28px rgba(16,24,23,.18);
}
.tt-hero-art figcaption b{display:inline-block;margin-right:.35em}
.tt-hero-art::after{top:14px;bottom:auto}

/* Xuan-paper fibres and quiet handcraft details continue between chapters. */
.tt-content{isolation:isolate}
.tt-content::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(7deg,transparent 0 19px,rgba(68,79,72,.025) 20px 21px),
    repeating-linear-gradient(97deg,transparent 0 31px,rgba(138,98,57,.022) 32px 33px);
  mix-blend-mode:multiply;
}
.tt-chapter-grid{position:relative;z-index:1}
.tt-guide-card{position:relative;overflow:hidden;isolation:isolate}
.tt-guide-card>*{position:relative;z-index:1}
.tt-guide-card::after{
  content:"";
  position:absolute;
  z-index:0;
  right:-34px;
  top:-38px;
  width:132px;
  height:132px;
  border:1px solid rgba(139,68,82,.16);
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(208,162,77,.38) 0 6%,transparent 7%),
    repeating-conic-gradient(from 22.5deg,rgba(139,68,82,.2) 0 8deg,transparent 9deg 44deg);
  filter:drop-shadow(0 6px 5px rgba(83,52,34,.12));
  opacity:.72;
}
.tt-box{position:relative;overflow:hidden}
.tt-box::after{
  content:"";
  position:absolute;
  right:-20px;
  top:-23px;
  width:70px;
  height:70px;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(208,162,77,.32) 0 8%,transparent 9%),
    repeating-conic-gradient(from 0deg,rgba(139,68,82,.12) 0 12deg,transparent 13deg 44deg);
  opacity:.62;
  pointer-events:none;
}
.tt-fact-grid article,.tt-action-grid article{position:relative;overflow:hidden}
.tt-fact-grid article::before,.tt-action-grid article::before{
  content:"";
  position:absolute;
  right:11px;
  top:10px;
  width:48px;
  height:28px;
  border-top:1px dashed rgba(63,102,116,.24);
  border-right:1px dashed rgba(139,68,82,.2);
  border-radius:0 16px 0 0;
  pointer-events:none;
}
.tt-chapter-mark::after{
  content:"";
  display:block;
  width:38px;
  height:38px;
  margin-top:16px;
  border:1px dashed color-mix(in srgb,var(--tt-chapter-accent) 48%,transparent);
  border-radius:50%;
  box-shadow:inset 0 0 0 5px rgba(255,255,255,.24);
  background:repeating-conic-gradient(from 12deg,color-mix(in srgb,var(--tt-chapter-accent) 18%,transparent) 0 5deg,transparent 6deg 42deg);
}
.tt-source-grid a{
  background-image:
    repeating-linear-gradient(90deg,rgba(63,102,116,.06) 0 2px,transparent 2px 11px),
    linear-gradient(135deg,rgba(248,243,232,.88),rgba(229,232,217,.76));
  background-size:100% 3px,auto;
  background-repeat:no-repeat;
  background-position:0 0,0 0;
}

/* The craft plaque itself becomes a small moving piece of traditional work. */
.tt-transition[data-shadow-scene]::after{
  min-height:32px;
  display:flex;
  align-items:center;
  padding:7px 13px 7px 43px;
  border-radius:2px;
  background-color:rgba(29,14,8,.84);
  background-repeat:no-repeat;
  background-position:11px 50%;
  background-size:23px 23px;
  box-shadow:0 7px 20px rgba(8,4,3,.24),inset 0 0 0 1px rgba(244,214,153,.05);
  font-size:9px;
  letter-spacing:.13em;
  opacity:0;
  transform:translateX(38px);
  transition:opacity .8s ease .85s,transform 1.05s cubic-bezier(.2,.8,.18,1) .75s;
}
.tt-transition[data-shadow-scene].is-visible::after{opacity:1;transform:none}
.tt-transition[data-craft="paper-cut"]::after{
  background-image:repeating-conic-gradient(from 22.5deg,rgba(201,85,72,.92) 0 8deg,transparent 9deg 44deg);
}
.tt-transition[data-craft="lattice"]::after{
  background-image:linear-gradient(45deg,transparent 43%,rgba(216,174,91,.86) 44% 56%,transparent 57%),linear-gradient(-45deg,transparent 43%,rgba(216,174,91,.72) 44% 56%,transparent 57%);
  background-size:23px 23px,23px 23px;
}
.tt-transition[data-craft="lantern"]::after{
  background-image:radial-gradient(ellipse at 50% 50%,rgba(231,178,82,.95) 0 24%,rgba(139,48,46,.82) 25% 58%,transparent 60%);
}
.tt-transition[data-craft="scroll"]::after{
  background-image:linear-gradient(90deg,rgba(171,112,55,.92) 0 14%,rgba(237,217,173,.88) 15% 85%,rgba(171,112,55,.92) 86%);
  background-size:25px 15px;
}
.tt-transition[data-craft="seal"]::after{
  background-image:repeating-linear-gradient(45deg,rgba(153,55,46,.9) 0 2px,transparent 2px 5px);
  background-size:22px 22px;
  box-shadow:0 7px 20px rgba(8,4,3,.24),inset 0 0 0 1px rgba(244,214,153,.05);
}
.tt-transition[data-craft="woodblock"]::after{
  background-image:repeating-linear-gradient(135deg,rgba(193,142,76,.8) 0 2px,rgba(53,39,30,.82) 2px 5px);
}
.tt-transition[data-craft="embroidery"]::after{
  background-image:repeating-conic-gradient(from 8deg,rgba(94,144,151,.9) 0 7deg,transparent 8deg 28deg);
  border-style:dashed;
}
.tt-transition[data-craft="velvet-flower"]::after{
  background-image:
    radial-gradient(circle at 50% 50%,#d6a24c 0 9%,transparent 10%),
    radial-gradient(ellipse at 50% 17%,rgba(167,68,72,.95) 0 19%,transparent 20%),
    radial-gradient(ellipse at 83% 50%,rgba(139,68,82,.9) 0 19%,transparent 20%),
    radial-gradient(ellipse at 50% 83%,rgba(166,75,63,.9) 0 19%,transparent 20%),
    radial-gradient(ellipse at 17% 50%,rgba(113,62,74,.94) 0 19%,transparent 20%);
  background-size:23px 23px;
}

/* High-density sprite sheets: one 1024px source cell per pose. */
.tt-pose-sprite{
  image-rendering:auto;
  backface-visibility:hidden;
  transform:translateZ(0);
  filter:brightness(1.075) saturate(1.01) contrast(1.035);
}
.tt-pose-actor--woman{--tt-pose-sheet:url("./art/tian-tian-shadow-woman-poses-20260815.webp")}
.tt-pose-actor--scribe{--tt-pose-sheet:url("./art/tian-tian-shadow-scribe-poses-20260815.webp")}

/* The final curtain resolves into the opening documentary visual while the
   shadow narrators, lanterns and craft layer remain above it. */
.tt-ending::before,
html.tt-pose-ready .tt-ending::before{
  inset:0!important;
  background:
    linear-gradient(0deg,rgba(10,5,4,.97) 0%,rgba(18,9,6,.82) 32%,rgba(18,9,6,.3) 66%,rgba(12,6,4,.5) 100%),
    linear-gradient(90deg,rgba(7,4,3,.72),transparent 24% 76%,rgba(7,4,3,.74)),
    url("./art/tian-tian-ink-paper-documentary-20260815.webp") 50% 50%/cover no-repeat;
  background-position:center,center,50% 50%!important;
  filter:saturate(.72) sepia(.08) contrast(1.045) brightness(.82);
}
.tt-ending.is-visible::before{
  animation:tt-v8-ending-hero 10s cubic-bezier(.18,.75,.2,1) both!important;
}
@keyframes tt-v8-ending-hero{
  from{background-position:center,center,48% 53%;filter:saturate(.58) sepia(.14) contrast(1.055) brightness(.65)}
  to{background-position:center,center,50% 50%;filter:saturate(.8) sepia(.05) contrast(1.035) brightness(.86)}
}
.tt-ending-seal{width:64px;height:52px;font-size:18px;letter-spacing:.06em}

@media(min-width:901px){
  /* Keep the opening narrators on the outer thirds so the script panel never
     hides their full paper silhouettes. */
  .tt-stage{min-height:min(720px,88vh);padding-inline:clamp(24px,3vw,48px)}
  .tt-stage-copy{width:min(590px,44%);padding:clamp(24px,2.6vw,38px)}
  .tt-stage>.tt-pose-layer .tt-pose-actor{bottom:4%;width:min(33%,500px)}
  .tt-stage>.tt-pose-layer .tt-pose-actor--woman{left:0}
  .tt-stage>.tt-pose-layer .tt-pose-actor--scribe{right:0}

  /* Desktop transitions become a true two-tier theatre: the complete stage
     above, the dialogue manuscript below. Nothing covers the performers. */
  .tt-transition[data-shadow-scene]{min-height:0;padding:clamp(42px,5vw,66px) 0}
  .tt-transition[data-shadow-scene] .tt-transition-inner{
    width:min(1180px,calc(100% - 48px));
    min-height:0;
    grid-template:auto auto/1fr;
    overflow:hidden;
  }
  .tt-transition[data-shadow-scene] .tt-shadow-stage{
    grid-area:1/1!important;
    min-height:0;
    height:auto;
    aspect-ratio:16/9;
  }
  .tt-transition[data-shadow-scene] .tt-shadow-dialogue{
    grid-area:2/1!important;
    align-self:stretch;
    justify-self:stretch;
    width:100%;
    margin:0;
    padding:24px clamp(34px,5.4vw,82px) 28px;
    border:0;
    border-top:1px solid rgba(239,195,108,.34);
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(28px,4vw,66px);
    background:
      repeating-linear-gradient(90deg,rgba(231,189,110,.04) 0 1px,transparent 1px 12px),
      linear-gradient(135deg,rgba(24,12,8,.98),rgba(48,25,15,.96));
    backdrop-filter:none;
  }
  .tt-shadow-dialogue>small{grid-column:1/-1}
  .tt-shadow-dialogue>p[data-speaker="together"]{grid-column:1/-1}
  .tt-shadow-dialogue--prologue{grid-template-columns:1fr!important;max-width:none!important;text-align:center}
  .tt-shadow-dialogue--prologue>small,.tt-shadow-dialogue--prologue>p{grid-column:1}
  .tt-transition[data-shadow-scene] .tt-shadow-props{
    display:block!important;
    z-index:7;
    opacity:.94!important;
    transform:none!important;
    transform-origin:50% 11%!important;
    filter:drop-shadow(10px 9px 5px rgba(34,15,8,.36)) contrast(1.05);
  }
  .tt-transition[data-shadow-scene] .tt-pose-layer{z-index:8;overflow:visible}
  .tt-transition[data-shadow-scene] .tt-pose-actor{bottom:0;width:min(36%,480px)}
  .tt-transition[data-shadow-scene] .tt-pose-actor--woman{left:0}
  .tt-transition[data-shadow-scene] .tt-pose-actor--scribe{right:0}
  .tt-transition[data-shadow-scene] .tt-shadow-vignette{z-index:9}

  .tt-transition[data-shadow-scene]::after{
    top:calc(clamp(42px,5vw,66px) + 12px);
    right:clamp(30px,5vw,78px);
    bottom:auto;
  }

  /* Enlarge the chapter craft itself, rather than scaling and clipping the
     whole prop layer. Each object keeps a clear central silhouette. */
  .tt-shadow-kite{left:46%;top:62px;width:70px;height:78px}
  .tt-shadow-kite::after{left:33px;top:70px;height:74px}
  .tt-shadow-door{left:30%;right:30%;top:58px;bottom:76px}
  .tt-shadow-lattice{left:32%;right:32%;top:68px;bottom:88px;background-size:52px 52px}
  .tt-shadow-knot-cord{left:20%;right:20%;top:74px}
  .tt-shadow-lantern{left:47%;top:82px;width:72px;height:102px}
  .tt-shadow-wick{left:calc(47% + 32px);top:120px;scale:1.28}
  .tt-shadow-date{left:43%;bottom:92px;width:104px}
  .tt-shadow-scroll{left:21%;right:21%;top:72px;height:218px}
  .tt-shadow-record-line{left:31%;width:38%}
  .tt-shadow-seal{right:29%;bottom:154px;width:58px;height:58px}
  .tt-shadow-bars{left:22%;right:22%;top:52px;height:270px}
  .tt-shadow-stamp{left:34%;top:83px;scale:1.22}
  .tt-shadow-paper-flower{left:36%;bottom:110px;width:48px;height:48px}
  .tt-shadow-roof-home{right:22%;bottom:64px;width:102px;height:90px}
  .tt-shadow-block{width:88px;height:78px}
  .tt-shadow-block:nth-child(1){left:25%;top:78px}.tt-shadow-block:nth-child(2){left:44%;top:78px}
  .tt-shadow-block:nth-child(3){left:25%;top:178px}.tt-shadow-block:nth-child(4){left:44%;top:178px}
  .tt-shadow-boundary{left:67%;top:58px;bottom:84px}
  .tt-shadow-blurred-record{right:13%;top:92px;width:16%;height:180px}
  .tt-shadow-moon{top:74px;width:188px;height:188px;margin-left:-94px}
  .tt-shadow-hanging-thread{top:244px;height:145px}
  .tt-shadow-open-door{left:37%;right:37%;top:78px;bottom:76px}
  .tt-shadow-guard-lantern{left:calc(50% - 38px);top:104px;scale:1.35}
  .tt-shadow-hand{top:300px;scale:1.22}
  .tt-shadow-bloom{right:22%;top:92px;width:96px;height:96px}

  .tt-ending>.tt-pose-layer .tt-pose-actor{bottom:2%;width:min(31%,500px)}
  .tt-ending>.tt-pose-layer .tt-pose-actor--woman{left:0}
  .tt-ending>.tt-pose-layer .tt-pose-actor--scribe{right:0}

  .tt-ending-copy{
    z-index:4;
    width:min(660px,calc(100% - 56px));
    max-width:660px;
    margin-bottom:clamp(34px,5vh,64px);
    padding:clamp(30px,3.2vw,44px) clamp(32px,4vw,54px) clamp(34px,3.5vw,48px);
    border:1px solid rgba(235,195,116,.34);
    background:
      repeating-linear-gradient(95deg,rgba(246,226,183,.025) 0 1px,transparent 1px 7px),
      linear-gradient(135deg,rgba(19,10,7,.91),rgba(42,22,14,.84));
    box-shadow:0 24px 60px rgba(8,4,3,.42),inset 0 0 48px rgba(227,173,78,.04);
    backdrop-filter:blur(4px);
  }
}

/* v8.1 QA: keep corner craft above the image, while the protected copy remains foremost. */
.tt-ending-craft{z-index:3}
.tt-ending-copy{z-index:4}

@media(max-width:900px){
  .tt-hero-art figcaption{min-height:0;font-size:10px;line-height:1.72}
  .tt-chapter-mark::after{display:none}
}

@media(max-width:720px){
  .tt-transition[data-shadow-scene]::after{
    min-height:26px;
    padding:4px 8px 4px 32px;
    background-position:7px 50%;
    background-size:17px 17px;
    font-size:7px;
    letter-spacing:.09em;
  }
  .tt-ending::before,
  html.tt-pose-ready .tt-ending::before{
    background:
      linear-gradient(0deg,rgba(10,5,4,.98) 0%,rgba(18,9,6,.85) 43%,rgba(18,9,6,.26) 72%,rgba(12,6,4,.44) 100%),
      url("./art/tian-tian-ink-paper-documentary-20260815.webp") 50% 0/auto 58% no-repeat,
      #120906;
    background-position:center,50% 0,center!important;
  }
  .tt-ending-copy{padding-top:clamp(245px,68vw,322px)}
}

@media(prefers-reduced-motion:reduce){
  .tt-ending.is-visible::before{animation:none!important}
  .tt-transition[data-shadow-scene]::after{opacity:1!important;transform:none!important}
  .tt-transition[data-shadow-scene] .tt-shadow-props{display:block!important}
}

/* v8.2 ending legibility: a translucent Xuan-paper glass pane protects the
   copy without laying an opaque rectangle over the child in the hero image. */
.tt-ending-copy{
  isolation:isolate;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.tt-ending-copy::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  border:1px solid rgba(238,201,128,.38);
  background:
    repeating-linear-gradient(96deg,rgba(247,226,183,.035) 0 1px,transparent 1px 8px),
    linear-gradient(135deg,rgba(14,8,6,.82),rgba(37,19,12,.76));
  box-shadow:0 22px 56px rgba(7,3,2,.32),inset 0 0 44px rgba(226,173,82,.035);
  pointer-events:none;
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .tt-ending-copy::before{
    background:
      repeating-linear-gradient(96deg,rgba(247,226,183,.04) 0 1px,transparent 1px 8px),
      linear-gradient(135deg,rgba(14,8,6,.66),rgba(37,19,12,.58));
    backdrop-filter:blur(7px) brightness(.4) saturate(.72);
    -webkit-backdrop-filter:blur(7px) brightness(.4) saturate(.72);
  }
}
.tt-ending h2{color:#fff7e7;text-shadow:0 3px 18px rgba(0,0,0,.92)}
.tt-ending p{color:#f0ede4;text-shadow:0 2px 12px rgba(0,0,0,.9)}
.tt-ending-question{color:#f0cb7d;text-shadow:0 2px 12px rgba(0,0,0,.94)}

@media(min-width:901px){
  .tt-ending-copy{
    width:min(600px,46vw);
    max-width:600px;
    margin-right:clamp(30px,6vw,98px);
    margin-left:auto;
    padding:clamp(28px,3vw,40px) clamp(30px,3.6vw,48px) clamp(32px,3.2vw,44px);
  }
}

@media(max-width:900px){
  .tt-ending::before,
  html.tt-pose-ready .tt-ending::before{
    background:
      linear-gradient(0deg,rgba(10,5,4,.98) 0%,rgba(18,9,6,.78) 38%,rgba(18,9,6,.15) 72%,rgba(12,6,4,.28) 100%),
      url("./art/tian-tian-ink-paper-documentary-20260815.webp") 50% 0/auto clamp(300px,55vw,430px) no-repeat,
      #120906;
    background-position:center,50% 0,center!important;
  }
  .tt-ending-copy{
    width:min(100% - 24px,680px);
    max-width:680px;
    margin:0 auto 18px;
    padding:clamp(330px,62vw,470px) clamp(18px,5vw,34px) 82px;
  }
  .tt-ending-copy::before{
    top:clamp(318px,60vw,454px);
    right:0;
    bottom:42px;
    left:0;
  }
}

/* Keep the scene-defined duration after all legacy pose defaults. */
.tt-pose-layer--transition{--tt-pose-duration:var(--tt-act-duration,8s)}

/* v9.1 ending typography: the final image and both shadow figures remain
   unobstructed. Legibility comes from the letterforms, never a panel. */
.tt-ending-copy{
  isolation:auto;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.tt-ending-copy::before{
  content:none!important;
  display:none!important;
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.tt-ending-copy small,
.tt-ending-copy h2,
.tt-ending-copy p,
.tt-ending-copy .tt-ending-question{
  -webkit-text-stroke:.24px rgba(7,4,3,.72);
  paint-order:stroke fill;
  text-shadow:0 1px 2px rgba(4,2,2,.94),0 0 10px rgba(5,3,2,.62);
}
.tt-ending-copy h2{
  color:#fff8e9;
  text-shadow:0 2px 3px rgba(3,2,1,.98),0 0 16px rgba(4,2,2,.72);
}
.tt-ending-copy p{
  color:#f5f0e7;
  letter-spacing:.012em;
  text-wrap:pretty;
}
.tt-ending-copy .tt-ending-question{
  width:auto;
  max-width:100%;
  color:#f3cf82;
  line-height:1.55;
  text-wrap:pretty;
  text-shadow:0 1px 2px rgba(3,2,1,1),0 0 12px rgba(4,2,2,.68);
}

@media(min-width:901px){
  .tt-ending-copy{
    align-self:start;
    width:min(640px,47vw);
    max-width:640px;
    margin-top:clamp(20px,3vh,34px);
    margin-right:clamp(28px,5vw,82px);
    margin-bottom:0;
    margin-left:auto;
    padding:24px 20px 30px;
  }
  .tt-ending-copy h2{
    margin-block:8px 16px;
    line-height:1.16;
  }
  .tt-ending-copy p{
    max-width:100%;
    font-size:clamp(15.5px,1.18vw,17px);
    line-height:1.9;
  }
  .tt-ending-copy .tt-ending-question{
    margin-block:22px;
    font-size:clamp(20px,1.75vw,26px);
  }
  html[lang="zh-Hant"] .tt-ending-copy h2,
  html[lang="zh-Hans"] .tt-ending-copy h2{
    white-space:nowrap;
    font-size:clamp(42px,4vw,56px);
    letter-spacing:.035em;
  }
  html[lang="zh-Hant"] .tt-ending-copy p,
  html[lang="zh-Hans"] .tt-ending-copy p{
    text-align:justify;
    text-align-last:left;
    text-justify:inter-ideograph;
    letter-spacing:.045em;
  }
  html[lang="zh-Hant"] .tt-ending-copy .tt-ending-question,
  html[lang="zh-Hans"] .tt-ending-copy .tt-ending-question{white-space:nowrap}
  html[lang="en"] .tt-ending-copy h2{font-size:clamp(36px,3.55vw,50px)}
  html[lang="en"] .tt-ending-copy p{
    text-align:left;
    hyphens:auto;
    overflow-wrap:break-word;
  }
  html[lang="ja"] .tt-ending-copy h2{
    font-size:clamp(34px,3.25vw,45px);
    line-height:1.25;
    letter-spacing:.015em;
  }
  html[lang="ja"] .tt-ending-copy p{
    text-align:justify;
    text-align-last:left;
    text-justify:inter-character;
    letter-spacing:.035em;
  }
}

@media print{
  .tt-ending-copy small,
  .tt-ending-copy h2,
  .tt-ending-copy p,
  .tt-ending-copy .tt-ending-question{
    color:#000!important;
    -webkit-text-stroke:0!important;
    text-shadow:none!important;
  }
}

@media(max-width:900px){
  .tt-ending-copy{
    width:min(100% - 24px,680px);
    max-width:680px;
    margin:0 auto 18px;
    padding:clamp(330px,62vw,470px) clamp(18px,5vw,34px) 82px;
    text-align:left;
  }
  .tt-ending-copy small{display:block;text-align:center}
  .tt-ending-copy h2{
    margin:8px 0 16px;
    font-size:clamp(34px,9vw,46px);
    line-height:1.24;
    text-align:center;
  }
  .tt-ending-copy p{
    max-width:620px;
    margin-inline:auto;
    font-size:clamp(15px,4vw,17px);
    line-height:1.9;
  }
  .tt-ending-copy .tt-ending-question{
    display:block;
    max-width:620px;
    margin:22px auto;
    font-size:clamp(19px,5.25vw,25px);
    line-height:1.55;
  }
  .tt-ending-copy .tt-ending-seal{margin-inline:auto}
  .tt-ending-copy .tt-ending-actions{justify-content:center}
  html[lang="zh-Hant"] .tt-ending-copy h2,
  html[lang="zh-Hans"] .tt-ending-copy h2{white-space:nowrap;letter-spacing:.025em}
  html[lang="zh-Hant"] .tt-ending-copy p,
  html[lang="zh-Hans"] .tt-ending-copy p{
    text-align:justify;
    text-align-last:left;
    text-justify:inter-ideograph;
    letter-spacing:.035em;
  }
  html[lang="en"] .tt-ending-copy p{
    text-align:left;
    hyphens:auto;
    overflow-wrap:break-word;
  }
  html[lang="ja"] .tt-ending-copy p{
    text-align:justify;
    text-align-last:left;
    text-justify:inter-character;
    letter-spacing:.025em;
  }
}

/* v9.2 mobile typography audit: keep all four language presentations readable
   without loosening the documentary layout. */
@media(max-width:720px){
  .tt-hero-art figcaption{font-size:12px;line-height:1.72}
  .tt-guide-copy p{font-size:13px;line-height:1.75}
  .tt-guide-links a{font-size:12px;line-height:1.5}
  .tt-source-note{font-size:12px;line-height:1.82}
  .tt-transition[data-shadow-scene]::after{font-size:10px;letter-spacing:.08em}
  .tt-opening-note{max-width:min(680px,calc(100% - 32px));line-height:1.55;text-wrap:pretty}
  .tt-classic blockquote{margin-right:36px;font-size:20px;line-height:1.68}
  .tt-classic-explain b{display:block;margin:0 0 4px}
  html[lang="en"] .tt-ending-copy h2{font-size:clamp(31px,8.5vw,40px);line-height:1.14}
  html[lang="en"] .tt-ending-copy p{line-height:1.74}
  html[lang="ja"] .tt-ending-copy h2{font-size:clamp(29px,7.8vw,38px);line-height:1.38}
  html[lang="ja"] .tt-ending-copy p{line-height:1.9;line-break:strict;word-break:normal;overflow-wrap:normal}
  html[lang="en"] .tt-shadow-dialogue>p{hyphens:auto;word-break:normal;overflow-wrap:break-word}
  html[lang="ja"] .tt-shadow-dialogue>p{line-break:strict;word-break:normal;overflow-wrap:normal}
}

@media(max-width:480px){
  .tt-guide-links{grid-template-columns:1fr}
}

/* v9.3 language-specific rhythm and line-breaking. */
html[lang="en"] .tt-deck{line-height:1.72}
html[lang="en"] .tt-prose p{line-height:1.76}

@media(min-width:901px){
  html[lang="en"] .tt-prose{width:100%;max-width:72ch}
}

@media(max-width:620px){
  html[lang="en"] .tt-breadcrumb{
    hyphens:auto;
    overflow-wrap:normal;
    word-break:normal;
  }
  html[lang="ja"] .tt-breadcrumb{
    overflow-wrap:normal;
    word-break:normal;
    line-break:strict;
  }
}

@media(max-width:380px){
  html[lang="en"] .tt-brand>span,
  html[lang="ja"] .tt-brand>span{display:none}
}

/* v9.4 mobile opening framing: reserve real headroom inside the 16:9 theatre
   and show the documentary artwork at its intrinsic ratio. */
@media(max-width:720px){
  .tt-stage{
    padding-top:clamp(246px,60vw,336px);
  }
  .tt-pose-layer--opening{
    --tt-opening-puppet-size:clamp(176px,47vw,270px);
    height:calc(var(--tt-opening-puppet-size) + clamp(28px,8vw,48px));
    aspect-ratio:auto;
  }
  .tt-pose-layer--opening .tt-pose-actor{
    bottom:0;
    width:var(--tt-opening-puppet-size);
  }
}

@media(max-width:900px){
  .tt-hero-art img{
    height:auto;
    aspect-ratio:auto;
    object-fit:contain;
    object-position:50% 50%;
    transform:none!important;
  }
}

/* v10 scroll prologue: a visible craft tableau for the line “lower the case
   file”.  The JS owns the 7.2-second choreography; these rules provide the
   paper-cut, mounting-scroll and velvet-flower forms at every viewport size. */
.tt-shadow-stage--scroll-prologue .tt-shadow-props{
  display:block!important;
  opacity:.96!important;
}
.tt-shadow-prologue-cloud{
  z-index:1;
  inset:2% auto auto 16%;
  width:68%;
  height:31%;
  opacity:.68;
}
.tt-shadow-prologue-cloud path{
  stroke:rgba(132,43,39,.86);
  stroke-width:2.2;
  filter:drop-shadow(4px 5px 2px rgba(44,21,13,.28));
}
.tt-shadow-prologue-ornament{
  z-index:2;
  top:8%;
  width:clamp(64px,7.8vw,102px);
  aspect-ratio:1;
  border:0!important;
  clip-path:polygon(50% 0,63% 18%,86% 14%,82% 37%,100% 50%,82% 63%,86% 86%,63% 82%,50% 100%,37% 82%,14% 86%,18% 63%,0 50%,18% 37%,14% 14%,37% 18%);
  background:
    radial-gradient(circle at 50% 50%,transparent 0 16%,rgba(225,183,97,.9) 17% 21%,transparent 22% 31%,rgba(119,42,38,.92) 32% 38%,transparent 39%),
    repeating-conic-gradient(from 22.5deg,rgba(137,44,40,.92) 0 8deg,rgba(226,177,88,.74) 8deg 15deg,transparent 15deg 45deg),
    rgba(78,39,31,.2);
  filter:drop-shadow(7px 8px 3px rgba(42,20,13,.35));
}
.tt-shadow-prologue-ornament::before,
.tt-shadow-prologue-ornament::after{
  content:"";
  position:absolute;
  inset:20%;
  border:1px solid rgba(242,208,136,.76);
  clip-path:polygon(50% 0,62% 36%,100% 50%,62% 64%,50% 100%,38% 64%,0 50%,38% 36%);
}
.tt-shadow-prologue-ornament::after{
  inset:34%;
  border:0;
  border-radius:50%;
  background:radial-gradient(circle,#d5a44e 0 26%,#7d2c2d 27% 52%,transparent 53%);
}
.tt-shadow-prologue-ornament--left{left:18%}
.tt-shadow-prologue-ornament--right{right:18%}

.tt-shadow-scroll--prologue{
  z-index:3;
  left:24%;
  right:24%;
  top:11%;
  height:37%;
  border:1px solid rgba(91,54,32,.78)!important;
  background:
    repeating-linear-gradient(91deg,rgba(93,55,34,.06) 0 1px,transparent 1px 9px),
    linear-gradient(90deg,#6f352b 0 13px,rgba(238,213,164,.92) 14px calc(100% - 14px),#6f352b calc(100% - 13px));
  box-shadow:
    -10px 0 0 rgba(61,31,23,.42),
    10px 0 0 rgba(61,31,23,.42),
    inset 0 0 34px rgba(94,54,29,.25),
    0 13px 20px rgba(48,23,15,.23);
  transform-origin:50% 0;
}
.tt-shadow-scroll--prologue::before,
.tt-shadow-scroll--prologue::after{
  content:"";
  position:absolute;
  top:-5px;
  bottom:-5px;
  width:10px;
  border-radius:7px;
  background:linear-gradient(90deg,#40221c,#b37045 48%,#45231c);
  box-shadow:0 0 0 1px rgba(43,22,16,.52);
}
.tt-shadow-scroll--prologue::before{left:-8px}
.tt-shadow-scroll--prologue::after{right:-8px}
.tt-shadow-record-line--prologue{
  z-index:4;
  left:32%;
  width:36%;
  height:5px;
  border:0!important;
  background:linear-gradient(90deg,rgba(42,43,36,.82),rgba(102,61,37,.64) 72%,transparent);
  box-shadow:0 7px 0 rgba(87,54,35,.05);
}
.tt-shadow-seal--prologue{
  z-index:5;
  top:31%;
  right:31%;
  bottom:auto;
  width:clamp(38px,4.2vw,56px);
  height:clamp(38px,4.2vw,56px);
}
.tt-shadow-paper-flower--prologue{
  z-index:6;
  left:21%;
  bottom:13%;
  width:clamp(38px,4.2vw,55px);
  height:clamp(38px,4.2vw,55px);
}
.tt-shadow-bloom--prologue{
  z-index:6;
  top:auto;
  right:20%;
  bottom:12%;
  width:clamp(66px,7vw,94px);
  height:clamp(66px,7vw,94px);
}
.tt-shadow-prologue-name-space{
  --tt-prologue-child-width:clamp(56px,6.4vw,82px);
  z-index:6;
  left:50%;
  bottom:5%;
  width:var(--tt-prologue-child-width);
  height:clamp(91px,10.5vw,136px);
  margin-left:calc(var(--tt-prologue-child-width) * -.5);
  border:0!important;
  background:none!important;
  filter:drop-shadow(8px 9px 4px rgba(46,23,15,.34));
}
.tt-shadow-prologue-name-space::before,
.tt-shadow-prologue-name-space::after{
  content:"";
  position:absolute;
  display:block;
  background:
    repeating-linear-gradient(96deg,rgba(101,61,37,.08) 0 1px,transparent 1px 7px),
    linear-gradient(145deg,rgba(248,225,177,.94),rgba(207,171,106,.84));
  box-shadow:inset 0 0 0 1px rgba(91,54,33,.42);
}
.tt-shadow-prologue-name-space::before{
  top:3%;
  left:34%;
  width:32%;
  aspect-ratio:1;
  border-radius:50%;
}
.tt-shadow-prologue-name-space::after{
  top:27%;
  right:10%;
  bottom:0;
  left:10%;
  clip-path:polygon(39% 0,61% 0,72% 15%,80% 38%,100% 100%,0 100%,20% 38%,28% 15%);
}

@media(max-width:720px){
  .tt-shadow-stage--scroll-prologue .tt-pose-actor{
    width:50%;
  }
  .tt-shadow-prologue-cloud{
    inset:1% auto auto 15%;
    width:70%;
    height:34%;
  }
  .tt-shadow-prologue-cloud path{stroke-width:1.45}
  .tt-shadow-prologue-ornament{
    top:6%;
    width:clamp(27px,9vw,42px);
  }
  .tt-shadow-prologue-ornament--right{right:19%}
  .tt-shadow-prologue-ornament--left{left:19%}
  .tt-shadow-scroll--prologue{
    left:27%;
    right:27%;
    top:11%;
    height:47%;
    box-shadow:-5px 0 rgba(61,31,23,.38),5px 0 rgba(61,31,23,.38),inset 0 0 17px rgba(94,54,29,.22),0 7px 12px rgba(48,23,15,.2);
  }
  .tt-shadow-scroll--prologue::before,
  .tt-shadow-scroll--prologue::after{top:-3px;bottom:-3px;width:6px}
  .tt-shadow-scroll--prologue::before{left:-5px}
  .tt-shadow-scroll--prologue::after{right:-5px}
  .tt-shadow-record-line--prologue{
    left:32%;
    width:36%;
    height:3px;
  }
  .tt-shadow-seal--prologue{
    top:34%;
    right:30%;
    width:clamp(24px,7.2vw,34px);
    height:clamp(24px,7.2vw,34px);
    scale:1;
  }
  .tt-shadow-paper-flower--prologue{
    left:18%;
    bottom:9%;
    width:clamp(24px,7vw,34px);
    height:clamp(24px,7vw,34px);
    scale:1;
  }
  .tt-shadow-bloom--prologue{
    right:15%;
    bottom:7%;
    width:clamp(38px,11vw,52px);
    height:clamp(38px,11vw,52px);
    scale:1;
  }
  .tt-shadow-bloom--prologue .tt-shadow-petal{
    left:calc(50% - 7px);
    top:2px;
    width:14px;
    height:calc(50% - 2px);
    transform-origin:50% 100%;
  }
  .tt-shadow-bloom--prologue::after{
    left:calc(50% - 7px);
    top:calc(50% - 7px);
    width:14px;
    height:14px;
  }
  .tt-shadow-prologue-name-space{
    --tt-prologue-child-width:clamp(32px,9vw,43px);
    bottom:4%;
    height:clamp(53px,15vw,72px);
  }
}

@media(prefers-reduced-motion:reduce){
  .tt-shadow-stage--scroll-prologue [data-tt-story-prop]{
    opacity:.86!important;
    animation:none!important;
  }
  .tt-shadow-prologue-cloud path{stroke-dashoffset:0!important}
}

/* v11.1 / 2026-08-17: four original Ronghua designs.
   Blue-white branch, moon-white lotus, phoenix and peony-butterfly ornaments
   stay decorative, behind the narrators, and never carry case information. */
.tt-ronghua,
.tt-transition[data-craft="velvet-flower"] .tt-shadow-stage::after{
  --tt-ronghua-opacity:.58;
  --tt-ronghua-start:translate3d(0,18px,0) scale(.72) rotate(-7deg);
  --tt-ronghua-over:translate3d(0,-2px,0) scale(1.035) rotate(1deg);
  --tt-ronghua-rest:translate3d(0,0,0) scale(1) rotate(0deg);
  position:absolute;
  display:block;
  aspect-ratio:3/2;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:0;
  pointer-events:none;
  user-select:none;
  transform:var(--tt-ronghua-start);
  transform-origin:50% 76%;
  image-rendering:auto;
  will-change:opacity,transform;
}
.tt-ronghua--opening{
  background-image:url("./art/tian-tian-ronghua-blue-branch-20260817.svg");
}
.tt-ronghua--hero{
  background-image:url("./art/tian-tian-ronghua-lotus-20260817.svg");
}
.tt-ronghua--guide{
  background-image:url("./art/tian-tian-ronghua-phoenix-20260817.svg");
}
.tt-ronghua--ending{
  background-image:url("./art/tian-tian-ronghua-peony-butterfly-20260817.svg");
}
@keyframes tt-ronghua-reveal{
  0%{opacity:0;transform:var(--tt-ronghua-start)}
  72%{opacity:var(--tt-ronghua-opacity);transform:var(--tt-ronghua-over)}
  100%{opacity:var(--tt-ronghua-opacity);transform:var(--tt-ronghua-rest)}
}

/* The final opening scene receives a quiet bloom behind the paper narrators. */
.tt-ronghua--opening{
  --tt-ronghua-opacity:.5;
  --tt-ronghua-start:translate3d(-12px,20px,0) scale(.68) rotate(-11deg);
  --tt-ronghua-over:translate3d(0,-2px,0) scale(1.04) rotate(-4deg);
  --tt-ronghua-rest:translate3d(0,0,0) scale(1) rotate(-5deg);
  z-index:1;
  left:-1%;
  bottom:1.5%;
  width:min(390px,31vw);
  filter:saturate(.86) brightness(.87) drop-shadow(0 13px 11px rgba(8,4,3,.42));
}
.tt-opening[data-scene="5"] .tt-ronghua--opening{
  animation:tt-ronghua-reveal 1.75s cubic-bezier(.18,.78,.2,1) .2s both;
}

/* The moon-white lotus frames the hero corner, away from the anonymous child. */
.tt-ronghua--hero{
  --tt-ronghua-opacity:.68;
  --tt-ronghua-start:translate3d(-22px,14px,0) scale(.7) rotate(-15deg);
  --tt-ronghua-over:translate3d(0,0,0) scale(1.035) rotate(-8deg);
  --tt-ronghua-rest:translate3d(0,0,0) scale(1) rotate(-9deg);
  z-index:4;
  left:-10%;
  top:-7%;
  width:44%;
  filter:saturate(.9) brightness(.95) drop-shadow(0 10px 9px rgba(14,25,26,.38));
  animation:tt-ronghua-reveal 1.65s cubic-bezier(.18,.8,.18,1) .35s both;
}

/* A visible but restrained phoenix watermark carries the craft language into navigation. */
.tt-guide-card>.tt-ronghua--guide{
  --tt-ronghua-opacity:.24;
  --tt-ronghua-start:translate3d(18px,-8px,0) scale(.74) rotate(9deg);
  --tt-ronghua-over:translate3d(0,0,0) scale(1.025) rotate(4deg);
  --tt-ronghua-rest:translate3d(0,0,0) scale(1) rotate(4deg);
  position:absolute;
  z-index:0;
  right:-48px;
  top:-38px;
  width:250px;
  filter:saturate(.82) sepia(.03);
  animation:tt-ronghua-reveal 1.5s cubic-bezier(.2,.78,.2,1) .5s both;
}

/* Four distinct ornaments remain visible together beneath the reading map. */
.tt-ronghua-gallery{
  position:relative;
  z-index:2;
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-top:2px;
  padding:18px 4px 0;
  border-top:1px solid rgba(63,102,116,.18);
  pointer-events:none;
}
.tt-ronghua-gallery>span{
  --tt-ronghua-art:none;
  min-height:118px;
  border:1px solid rgba(94,76,44,.16);
  border-radius:52% 48% 50% 46%/44% 52% 48% 56%;
  background-image:
    var(--tt-ronghua-art),
    radial-gradient(ellipse at 50% 52%,rgba(248,242,229,.96),rgba(217,228,222,.52) 58%,rgba(63,102,116,.08) 100%);
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain,auto;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.18),0 8px 22px rgba(46,61,57,.08);
  filter:saturate(.92) contrast(1.02);
  opacity:.96;
  transform-origin:50% 70%;
  animation:tt-ronghua-swatch-in .9s cubic-bezier(.18,.8,.18,1) both;
}
.tt-ronghua-gallery>span:nth-child(2){animation-delay:.08s}
.tt-ronghua-gallery>span:nth-child(3){animation-delay:.16s}
.tt-ronghua-gallery>span:nth-child(4){animation-delay:.24s}
.tt-ronghua-gallery>[data-ronghua="blue-branch"]{--tt-ronghua-art:url("./art/tian-tian-ronghua-blue-branch-20260817.svg")}
.tt-ronghua-gallery>[data-ronghua="lotus"]{--tt-ronghua-art:url("./art/tian-tian-ronghua-lotus-20260817.svg")}
.tt-ronghua-gallery>[data-ronghua="phoenix"]{--tt-ronghua-art:url("./art/tian-tian-ronghua-phoenix-20260817.svg")}
.tt-ronghua-gallery>[data-ronghua="peony-butterfly"]{--tt-ronghua-art:url("./art/tian-tian-ronghua-peony-butterfly-20260817.svg")}
@keyframes tt-ronghua-swatch-in{
  from{opacity:0;transform:translateY(10px) scale(.86)}
  to{opacity:.96;transform:none}
}

/* Act VIII blooms inside the theatre, behind its props and paper narrators. */
.tt-transition[data-craft="velvet-flower"] .tt-shadow-stage::after{
  --tt-ronghua-opacity:.46;
  --tt-ronghua-start:translate3d(18px,12px,0) scale(.55) rotate(-12deg);
  --tt-ronghua-over:translate3d(0,0,0) scale(1.04) rotate(-5deg);
  --tt-ronghua-rest:translate3d(0,0,0) scale(1) rotate(-6deg);
  content:"";
  z-index:2;
  right:-6%;
  top:1.5%;
  width:clamp(240px,29vw,400px);
  background-image:url("./art/tian-tian-ronghua-peony-butterfly-20260817.svg");
  filter:saturate(.9) brightness(.94) drop-shadow(0 13px 10px rgba(7,3,2,.48));
}
.tt-transition[data-craft="velvet-flower"].is-visible .tt-shadow-stage::after{
  animation:tt-ronghua-reveal 1.9s cubic-bezier(.16,.82,.18,1) 4.05s both;
}

/* The closing peony and butterfly remain in the upper-left safe area; copy stays clear. */
.tt-ronghua--ending{
  --tt-ronghua-opacity:.48;
  --tt-ronghua-start:translate3d(-18px,18px,0) scale(.66) rotate(-13deg);
  --tt-ronghua-over:translate3d(0,0,0) scale(1.035) rotate(-6deg);
  --tt-ronghua-rest:translate3d(0,0,0) scale(1) rotate(-7deg);
  left:-2%;
  top:1.5%;
  width:min(470px,29vw);
  filter:saturate(.82) brightness(.9) drop-shadow(0 14px 12px rgba(5,3,2,.48));
}
.tt-ending.is-visible .tt-ronghua--ending{
  animation:tt-ronghua-reveal 1.9s cubic-bezier(.18,.8,.18,1) 2.7s both;
}

@media(max-width:900px){
  .tt-ronghua--opening{left:-4%;bottom:1%;width:min(330px,42vw)}
  .tt-ronghua--hero{left:-15%;top:-4%;width:54%}
  .tt-guide-card>.tt-ronghua--guide{right:-66px;top:-24px;width:205px}
  .tt-transition[data-craft="velvet-flower"] .tt-shadow-stage::after{right:-13%;top:2%;width:48vw}
  .tt-ronghua--ending{left:-10%;top:5px;width:40vw}
}

@media(max-width:720px){
  .tt-ronghua-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding-top:14px}
  .tt-ronghua-gallery>span{min-height:104px}
}

@media(max-width:480px){
  .tt-ronghua--opening{--tt-ronghua-opacity:.38;left:-8%;width:44vw}
  .tt-ronghua--hero{--tt-ronghua-opacity:.57;left:-22%;top:-2%;width:62%}
  .tt-guide-card>.tt-ronghua--guide{--tt-ronghua-opacity:.13;right:-73px;top:-10px;width:168px}
  .tt-transition[data-craft="velvet-flower"] .tt-shadow-stage::after{--tt-ronghua-opacity:.35;right:-22%;top:3%;width:58vw}
  .tt-ronghua--ending{--tt-ronghua-opacity:.38;left:-18%;top:8px;width:47vw}
  .tt-ronghua-gallery{gap:7px;padding-inline:0}
  .tt-ronghua-gallery>span{min-height:88px;border-radius:20px}
}

@media(prefers-reduced-motion:reduce){
  .tt-ronghua{
    animation:none!important;
    transition:none!important;
    opacity:var(--tt-ronghua-opacity)!important;
    transform:var(--tt-ronghua-rest)!important;
    will-change:auto;
  }
  .tt-transition[data-craft="velvet-flower"] .tt-shadow-stage::after{
    animation:none!important;
    transition:none!important;
    opacity:var(--tt-ronghua-opacity)!important;
    transform:var(--tt-ronghua-rest)!important;
    will-change:auto;
  }
  .tt-ronghua--opening{opacity:0!important}
  .tt-opening[data-scene="5"] .tt-ronghua--opening{opacity:var(--tt-ronghua-opacity)!important}
  .tt-ronghua-gallery>span{animation:none!important;opacity:.96!important;transform:none!important}
}

@media print{
  .tt-ronghua,.tt-ronghua-gallery{display:none!important}
  .tt-transition[data-craft="velvet-flower"] .tt-shadow-stage::after{content:none!important;display:none!important}
}

/* v11.2 paper-shadow curtains and the four-line epilogue.
   The prologue opens before its scroll copy. The ending alternates the two
   original narrators, closes the curtain, then reveals the established copy. */
.tt-stage-curtain{
  position:absolute;
  overflow:hidden;
  pointer-events:none;
  isolation:isolate;
}
.tt-stage-curtain-panel{
  position:absolute;
  z-index:2;
  top:0;
  bottom:0;
  width:52.5%;
  background:
    linear-gradient(90deg,rgba(255,229,171,.06),transparent 10% 18%,rgba(8,2,2,.18) 25%,transparent 33% 42%,rgba(255,226,164,.07) 50%,transparent 58% 67%,rgba(6,2,2,.22) 75%,transparent 84%),
    repeating-linear-gradient(90deg,#4b171c 0 8%,#70272d 8% 16%,#3a1217 16% 24%);
  box-shadow:inset 0 0 42px rgba(7,2,2,.55),0 0 24px rgba(5,2,2,.62);
  filter:saturate(.9) contrast(1.04);
  will-change:transform;
}
.tt-stage-curtain-panel::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:7px;
  background:linear-gradient(90deg,#6e421f,#e0b567 44%,#70431f);
  box-shadow:0 0 10px rgba(231,187,101,.32);
}
.tt-stage-curtain-panel--left{left:0;border-right:1px solid rgba(238,197,112,.48)}
.tt-stage-curtain-panel--left::after{right:0}
.tt-stage-curtain-panel--right{right:0;border-left:1px solid rgba(238,197,112,.48)}
.tt-stage-curtain-panel--right::after{left:0}
.tt-stage-curtain-valance{
  position:absolute;
  z-index:4;
  top:0;
  right:-2%;
  left:-2%;
  height:16%;
  border-bottom:5px double rgba(225,177,88,.8);
  background:
    radial-gradient(ellipse at 10% 100%,#7b2c31 0 36%,transparent 38%) 0 0/20% 100%,
    linear-gradient(#2b0e13,#6f252b 70%,#3a1116);
  box-shadow:0 9px 18px rgba(8,2,2,.54),inset 0 -9px 18px rgba(15,4,5,.42);
  transform-origin:50% 0;
}

/* The scroll prologue uses the same 16:9 safe area as the generated stage. */
.tt-transition--prologue .tt-transition-inner{isolation:isolate}
.tt-transition--prologue .tt-stage-curtain--opening{
  z-index:18;
  inset:0;
}
.tt-transition--prologue .tt-shadow-dialogue--prologue{opacity:0}
.tt-transition--prologue.is-visible .tt-stage-curtain--opening .tt-stage-curtain-panel--left{
  animation:tt-curtain-open-left 1.9s cubic-bezier(.55,.04,.2,1) .22s both;
}
.tt-transition--prologue.is-visible .tt-stage-curtain--opening .tt-stage-curtain-panel--right{
  animation:tt-curtain-open-right 1.9s cubic-bezier(.55,.04,.2,1) .22s both;
}
.tt-transition--prologue.is-visible .tt-stage-curtain--opening .tt-stage-curtain-valance{
  animation:tt-curtain-valance-settle 1.25s cubic-bezier(.18,.8,.2,1) .12s both;
}
.tt-transition--prologue.is-visible .tt-shadow-dialogue--prologue{
  animation:tt-prologue-copy-after-curtain .82s ease 2.15s both;
}
@keyframes tt-curtain-open-left{from{transform:translateX(0)}to{transform:translateX(-101%)}}
@keyframes tt-curtain-open-right{from{transform:translateX(0)}to{transform:translateX(101%)}}
@keyframes tt-curtain-valance-settle{0%{opacity:0;transform:translateY(-34%) scaleY(.7)}100%{opacity:1;transform:none}}
@keyframes tt-prologue-copy-after-curtain{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media(min-width:901px), (max-width:720px){
  .tt-transition--prologue .tt-stage-curtain--opening{
    right:0;
    bottom:auto;
    left:0;
    height:auto;
    aspect-ratio:16/9;
  }
}

/* Ending theatre: static duet is the loading fallback; when the two original
   pose sheets are ready, the empty stage and animated pose cells take over. */
.tt-ending-theatre{
  position:absolute;
  z-index:10;
  inset:0;
  min-height:100%;
  overflow:hidden;
  background:#130806;
  opacity:0;
  pointer-events:none;
}
.tt-ending.is-visible .tt-ending-theatre{opacity:1}
.tt-ending-theatre-stage{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:
    linear-gradient(0deg,rgba(12,5,3,.78),transparent 42%,rgba(16,7,4,.12)),
    linear-gradient(90deg,rgba(8,3,2,.68),transparent 20% 80%,rgba(8,3,2,.7)),
    url("./art/tian-tian-shadow-theatre-static-duet-20260814.webp") 50% 50%/contain no-repeat,
    #1a0c08;
}
html.tt-pose-ready .tt-ending-theatre-stage{
  background:
    linear-gradient(0deg,rgba(12,5,3,.78),transparent 42%,rgba(16,7,4,.12)),
    linear-gradient(90deg,rgba(8,3,2,.68),transparent 20% 80%,rgba(8,3,2,.7)),
    url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp") 50% 50%/cover no-repeat,
    #1a0c08;
}
.tt-ending-theatre-light{
  position:absolute;
  z-index:2;
  top:-12%;
  bottom:12%;
  left:25%;
  width:50%;
  background:radial-gradient(ellipse at 50% 54%,rgba(247,211,135,.33),rgba(217,157,72,.1) 35%,transparent 70%);
  filter:blur(12px);
  opacity:0;
}
.tt-ending.is-visible .tt-ending-theatre-light{animation:tt-ending-speaker-light 20s ease-in-out both}
.tt-ending-theatre-bloom{
  position:absolute;
  z-index:3;
  top:5%;
  left:50%;
  width:clamp(220px,25vw,390px);
  aspect-ratio:1200/760;
  background:url("./art/tian-tian-ronghua-lotus-20260817.svg") center/contain no-repeat;
  filter:saturate(.82) brightness(.88) drop-shadow(0 13px 10px rgba(7,3,2,.5));
  opacity:0;
  transform:translateX(-50%) scale(.62) rotate(-4deg);
}
.tt-ending.is-visible .tt-ending-theatre-bloom{animation:tt-ending-spring-bloom 12.7s cubic-bezier(.18,.8,.2,1) 2.8s both}
.tt-ending-theatre-puppet{
  position:absolute;
  z-index:5;
  bottom:13%;
  width:min(35vw,520px);
  aspect-ratio:1;
  opacity:0;
  filter:drop-shadow(22px 15px 8px rgba(28,12,6,.6));
  transform-origin:50% 94%;
}
html.tt-pose-ready .tt-ending-theatre-puppet{opacity:1}
.tt-ending-theatre-puppet--woman{left:-1%}
.tt-ending-theatre-puppet--scribe{right:-1%}
.tt-ending-theatre-puppet>i{
  position:absolute;
  inset:0;
  display:block;
  background-color:transparent;
  background-repeat:no-repeat;
  background-size:300% 200%;
  background-position:0 0;
  mix-blend-mode:multiply;
  filter:brightness(1.08) saturate(.98);
  will-change:background-position;
}
.tt-ending-theatre-puppet--woman>i{background-image:url("./art/tian-tian-shadow-woman-poses-20260815.webp")}
.tt-ending-theatre-puppet--scribe>i{background-image:url("./art/tian-tian-shadow-scribe-poses-20260815.webp")}
.tt-ending.is-visible .tt-ending-theatre-puppet--woman{animation:tt-ending-woman-presence 20s ease-in-out both}
.tt-ending.is-visible .tt-ending-theatre-puppet--scribe{animation:tt-ending-scribe-presence 20s ease-in-out both}
.tt-ending.is-visible .tt-ending-theatre-puppet--woman>i{animation:tt-ending-woman-poses 20s steps(1,end) both}
.tt-ending.is-visible .tt-ending-theatre-puppet--scribe>i{animation:tt-ending-scribe-poses 20s steps(1,end) both}

.tt-ending-theatre .tt-stage-curtain--ending{
  z-index:12;
  inset:0;
}
.tt-ending.is-visible .tt-stage-curtain--ending .tt-stage-curtain-panel--left{
  animation:tt-ending-curtain-left 20s cubic-bezier(.55,.04,.2,1) both;
}
.tt-ending.is-visible .tt-stage-curtain--ending .tt-stage-curtain-panel--right{
  animation:tt-ending-curtain-right 20s cubic-bezier(.55,.04,.2,1) both;
}
.tt-ending.is-visible .tt-stage-curtain--ending .tt-stage-curtain-valance{
  animation:tt-curtain-valance-settle 1.3s cubic-bezier(.18,.8,.2,1) .15s both;
}

.tt-ending-theatre-script{
  position:absolute;
  z-index:13;
  right:5%;
  bottom:5.5%;
  left:5%;
  min-height:142px;
  pointer-events:none;
}
.tt-ending-theatre-script>small{
  position:absolute;
  right:0;
  bottom:calc(100% + 10px);
  left:0;
  color:#efc573;
  text-align:center;
  text-shadow:0 2px 10px rgba(5,2,2,.92);
  opacity:0;
}
.tt-ending.is-visible .tt-ending-theatre-script>small{animation:tt-ending-script-title 20s ease both}
.tt-ending-theatre-script>p{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  max-width:min(820px,86vw);
  min-height:112px;
  margin:auto!important;
  padding:20px clamp(22px,4vw,48px);
  border:1px solid rgba(234,193,112,.42);
  background:
    repeating-linear-gradient(96deg,rgba(246,225,180,.025) 0 1px,transparent 1px 8px),
    linear-gradient(135deg,rgba(22,10,7,.94),rgba(52,25,15,.9));
  box-shadow:0 18px 42px rgba(6,2,2,.5),inset 0 0 38px rgba(235,178,82,.04);
  color:#f7efdf;
  font-family:var(--tt-serif);
  font-size:clamp(18px,2vw,27px);
  line-height:1.72;
  text-align:center;
  text-wrap:balance;
  opacity:0;
  transform:translateY(12px);
}
.tt-ending-theatre-script>p b{
  flex:0 0 auto;
  margin-right:.35em;
  color:#efc16d;
  font-family:var(--tt-sans);
  font-size:.62em;
  letter-spacing:.08em;
}
.tt-ending.is-visible .tt-ending-theatre-script>p:nth-of-type(1){animation:tt-ending-line 3.1s ease 3.65s both}
.tt-ending.is-visible .tt-ending-theatre-script>p:nth-of-type(2){animation:tt-ending-line 3.1s ease 6.55s both}
.tt-ending.is-visible .tt-ending-theatre-script>p:nth-of-type(3){animation:tt-ending-line 2.9s ease 9.45s both}
.tt-ending.is-visible .tt-ending-theatre-script>p:nth-of-type(4){animation:tt-ending-line-final 3.7s ease 12.15s both}

/* The existing memorial copy waits until the curtain has fully closed. */
.tt-ending .tt-ending-copy{
  z-index:20!important;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
.tt-ending.is-visible .tt-ending-copy{
  animation:tt-ending-copy-after-curtain 1.25s ease 18.65s both!important;
}

@keyframes tt-ending-speaker-light{
  0%,14%{opacity:0;transform:none}
  18%,30%{opacity:.9;transform:translateX(-39%)}
  34%,44%{opacity:.86;transform:translateX(39%)}
  48%,57%{opacity:.9;transform:translateX(-39%)}
  61%,78%{opacity:.9;transform:translateX(39%)}
  84%,100%{opacity:0;transform:none}
}
@keyframes tt-ending-spring-bloom{
  0%{opacity:0;transform:translateX(-50%) scale(.62) rotate(-4deg)}
  18%,82%{opacity:.66;transform:translateX(-50%) scale(1) rotate(0)}
  100%{opacity:0;transform:translateX(-50%) scale(.92) rotate(3deg)}
}
@keyframes tt-ending-woman-presence{
  0%,11%{transform:translateX(-4%) rotate(-.5deg)}
  20%,31%{transform:translateX(1.5%) rotate(.3deg)}
  46%,59%{transform:translateX(2.5%) rotate(-.25deg)}
  80%,100%{transform:translateX(0) rotate(0)}
}
@keyframes tt-ending-scribe-presence{
  0%,25%{transform:translateX(4%) rotate(.5deg)}
  34%,45%{transform:translateX(-1.5%) rotate(-.3deg)}
  61%,79%{transform:translateX(-2.5%) rotate(.25deg)}
  82%,100%{transform:translateX(0) rotate(0)}
}
@keyframes tt-ending-woman-poses{
  0%,15%{background-position:0 0}
  15.01%,31%{background-position:50% 0}
  31.01%,44%{background-position:0 0}
  44.01%,59%{background-position:100% 0}
  59.01%,100%{background-position:0 100%}
}
@keyframes tt-ending-scribe-poses{
  0%,30%{background-position:0 0}
  30.01%,46%{background-position:50% 0}
  46.01%,58%{background-position:0 0}
  58.01%,80%{background-position:100% 0}
  80.01%,100%{background-position:0 100%}
}
@keyframes tt-ending-curtain-left{
  0%,8%{transform:translateX(0)}
  18%,80%{transform:translateX(-101%)}
  92%,100%{transform:translateX(0)}
}
@keyframes tt-ending-curtain-right{
  0%,8%{transform:translateX(0)}
  18%,80%{transform:translateX(101%)}
  92%,100%{transform:translateX(0)}
}
@keyframes tt-ending-script-title{
  0%,10%{opacity:0;transform:translateY(6px)}
  18%,77%{opacity:1;transform:none}
  82%,100%{opacity:0;transform:translateY(-4px)}
}
@keyframes tt-ending-line{
  0%{opacity:0;transform:translateY(12px)}
  12%,82%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-8px)}
}
@keyframes tt-ending-line-final{
  0%{opacity:0;transform:translateY(12px)}
  10%,86%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-6px)}
}
@keyframes tt-ending-copy-after-curtain{
  0%{visibility:hidden;opacity:0;transform:translateY(14px);pointer-events:none}
  1%{visibility:visible;opacity:0;transform:translateY(14px);pointer-events:none}
  100%{visibility:visible;opacity:1;transform:none;pointer-events:auto}
}

@media(max-width:900px){
  .tt-ending-theatre-bloom{top:8%;width:clamp(190px,38vw,310px)}
  .tt-ending-theatre-puppet{bottom:18%;width:min(45vw,430px)}
  .tt-ending-theatre-puppet--woman{left:-5%}
  .tt-ending-theatre-puppet--scribe{right:-5%}
  .tt-ending-theatre-script{right:3%;bottom:4%;left:3%;min-height:132px}
  .tt-ending-theatre-script>p{max-width:720px;min-height:106px;font-size:clamp(17px,2.8vw,23px)}
}

@media(max-width:620px){
  .tt-stage-curtain-valance{height:13%}
  .tt-ending-theatre-bloom{top:12%;width:47vw}
  .tt-ending-theatre-puppet{bottom:25%;width:58vw}
  .tt-ending-theatre-puppet--woman{left:-11%}
  .tt-ending-theatre-puppet--scribe{right:-11%}
  .tt-ending-theatre-script{right:10px;bottom:4.5%;left:10px;min-height:132px}
  .tt-ending-theatre-script>small{bottom:calc(100% + 7px);font-size:8px;letter-spacing:.12em}
  .tt-ending-theatre-script>p{
    min-height:112px;
    padding:16px 17px;
    font-size:clamp(15px,4.4vw,19px);
    line-height:1.68;
  }
  html[lang="en"] .tt-ending-theatre-script>p{font-size:clamp(14px,3.9vw,17px);line-height:1.55;text-wrap:pretty}
  html[lang="ja"] .tt-ending-theatre-script>p{font-size:clamp(14px,4vw,17px);line-height:1.7;line-break:strict}
}

@media(prefers-reduced-motion:reduce){
  .tt-transition--prologue .tt-stage-curtain--opening .tt-stage-curtain-panel--left{transform:translateX(-101%)!important}
  .tt-transition--prologue .tt-stage-curtain--opening .tt-stage-curtain-panel--right{transform:translateX(101%)!important}
  .tt-transition--prologue .tt-stage-curtain--opening :where(.tt-stage-curtain-panel,.tt-stage-curtain-valance),
  .tt-transition--prologue .tt-shadow-dialogue--prologue{animation:none!important}
  .tt-transition--prologue .tt-shadow-dialogue--prologue{opacity:1!important;transform:none!important}

  .tt-ending{display:block!important;min-height:auto!important}
  .tt-ending-theatre{
    position:relative;
    inset:auto;
    min-height:clamp(650px,92svh,800px);
    display:grid;
    align-content:end;
    padding:clamp(250px,42vw,390px) 16px 24px;
    opacity:1!important;
  }
  .tt-ending-theatre :where(.tt-ending-theatre-light,.tt-ending-theatre-bloom,.tt-ending-theatre-puppet,.tt-stage-curtain-panel,.tt-stage-curtain-valance,.tt-ending-theatre-script>small,.tt-ending-theatre-script>p){animation:none!important;transition:none!important}
  .tt-ending-theatre-light{opacity:.48!important;transform:none!important}
  .tt-ending-theatre-bloom{opacity:.58!important;transform:translateX(-50%) scale(.9)!important}
  .tt-ending-theatre-puppet>i{animation:none!important;background-position:100% 0!important}
  .tt-ending-theatre .tt-stage-curtain-panel--left{transform:translateX(-101%)!important}
  .tt-ending-theatre .tt-stage-curtain-panel--right{transform:translateX(101%)!important}
  .tt-ending-theatre-script{
    position:relative;
    z-index:13;
    right:auto;
    bottom:auto;
    left:auto;
    display:grid;
    gap:8px;
    min-height:0;
  }
  .tt-ending-theatre-script>small{position:relative;right:auto;bottom:auto;left:auto;margin-bottom:2px;opacity:1!important;transform:none!important}
  .tt-ending-theatre-script>p{
    position:relative;
    inset:auto;
    min-height:0;
    padding:11px 14px;
    font-size:clamp(14px,3vw,18px);
    opacity:1!important;
    transform:none!important;
  }
  .tt-ending .tt-ending-copy{visibility:visible!important;opacity:1!important;pointer-events:auto!important;animation:none!important}
  .tt-ending .tt-ending-copy>*{opacity:1!important;transform:none!important;animation:none!important}
}

@media print{
  .tt-stage-curtain,.tt-ending-theatre{display:none!important}
  .tt-ending .tt-ending-copy{visibility:visible!important;opacity:1!important;pointer-events:auto!important;animation:none!important}
}

/* v11.7 nine large, high-detail chapter-specific ronghua; skippable epilogue; supplied snow-landscape ending panorama. */
.tt-chapter{isolation:isolate}
.tt-chapter>.tt-chapter-grid{position:relative;z-index:1}
.tt-ronghua-scatter{
  --tt-ronghua-opacity:.25;
  --tt-ronghua-rotate:0deg;
  --tt-ronghua-enter:36px;
  position:absolute;
  z-index:0;
  display:block;
  width:clamp(380px,43vw,700px);
  aspect-ratio:3/2;
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  opacity:0;
  pointer-events:none;
  filter:saturate(.9) contrast(1.025) drop-shadow(0 16px 18px rgba(44,56,52,.16));
  transform-origin:50% 72%;
  transform:translate3d(var(--tt-ronghua-enter),18px,0) rotate(var(--tt-ronghua-rotate)) scale(.92);
  transition:opacity 1.4s ease .12s,transform 1.8s cubic-bezier(.2,.72,.2,1) .12s;
}
.tt-chapter.is-visible>.tt-ronghua-scatter{
  opacity:var(--tt-ronghua-opacity);
  transform:translate3d(0,0,0) rotate(var(--tt-ronghua-rotate)) scale(1);
}
.tt-ronghua-scatter--ch00{
  --tt-ronghua-opacity:.28;
  --tt-ronghua-rotate:-9deg;
  --tt-ronghua-enter:-36px;
  top:2%;
  left:max(-82px,-4.8vw);
  background-image:url("./art/tian-tian-ronghua-refined-blue-branch-20260818.webp");
}
.tt-ronghua-scatter--ch01{
  --tt-ronghua-opacity:.27;
  --tt-ronghua-rotate:6deg;
  right:max(-86px,-5vw);
  bottom:1%;
  background-image:url("./art/tian-tian-ronghua-refined-snow-magnolia-20260818.webp");
}
.tt-ronghua-scatter--ch02{
  --tt-ronghua-opacity:.25;
  --tt-ronghua-rotate:-3deg;
  --tt-ronghua-enter:-34px;
  top:3%;
  left:max(-70px,-4vw);
  background-image:url("./art/tian-tian-ronghua-refined-ten-knot-camellia-20260818.webp");
}
.tt-ronghua-scatter--ch03{
  --tt-ronghua-opacity:.24;
  --tt-ronghua-rotate:3deg;
  right:max(-76px,-4.4vw);
  bottom:0;
  background-image:url("./art/tian-tian-ronghua-refined-frost-chrysanthemum-20260818.webp");
}
.tt-ronghua-scatter--ch04{
  --tt-ronghua-opacity:.27;
  --tt-ronghua-rotate:-7deg;
  --tt-ronghua-enter:-36px;
  top:6%;
  left:max(-88px,-5.2vw);
  background-image:url("./art/tian-tian-ronghua-refined-moon-lotus-20260818.webp");
}
.tt-ronghua-scatter--ch05{
  --tt-ronghua-opacity:.28;
  --tt-ronghua-rotate:5deg;
  right:max(-68px,-4vw);
  bottom:1%;
  background-image:url("./art/tian-tian-ronghua-refined-osmanthus-crescent-20260818.webp");
}
.tt-ronghua-scatter--ch06{
  --tt-ronghua-opacity:.23;
  --tt-ronghua-rotate:-2deg;
  --tt-ronghua-enter:-34px;
  top:4%;
  left:max(-72px,-4.2vw);
  background-image:url("./art/tian-tian-ronghua-refined-four-evidence-20260818.webp");
}
.tt-ronghua-scatter--ch07{
  --tt-ronghua-opacity:.22;
  --tt-ronghua-rotate:4deg;
  right:max(-104px,-6vw);
  bottom:1%;
  width:clamp(440px,48vw,760px);
  background-image:url("./art/tian-tian-ronghua-refined-vermilion-phoenix-20260818.webp");
}
.tt-ronghua-scatter--ch08{
  --tt-ronghua-opacity:.27;
  --tt-ronghua-rotate:-5deg;
  --tt-ronghua-enter:-34px;
  top:4%;
  left:max(-78px,-4.6vw);
  background-image:url("./art/tian-tian-ronghua-refined-peony-butterfly-20260818.webp");
}

/* The theatre remains above the memorial image until the curtain has closed,
   then dissolves to reveal the supplied snow-landscape panorama. */
.tt-ending.is-visible .tt-ending-theatre{
  animation:tt-ending-theatre-dismiss 1.05s ease 18.4s both;
}
.tt-ending-panorama{
  position:absolute;
  z-index:9;
  inset:0;
  margin:0;
  overflow:hidden;
  background:#0d1b21;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}
.tt-ending-panorama::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0 45%,rgba(8,15,17,.12) 58%,rgba(7,13,15,.62) 100%);
  pointer-events:none;
}
.tt-ending-panorama img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
}
.tt-ending.is-visible .tt-ending-panorama{
  animation:tt-ending-panorama-reveal 1.3s ease 18.35s both;
}

.tt-ending-theatre-skip{
  position:absolute;
  z-index:30;
  top:clamp(14px,2.5vw,32px);
  right:clamp(14px,2.8vw,38px);
  border:1px solid rgba(239,198,119,.62);
  border-radius:999px;
  padding:9px 15px;
  background:rgba(21,10,7,.86);
  color:#f7e9cb;
  font-family:var(--tt-sans);
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  box-shadow:0 9px 24px rgba(7,3,2,.36);
  opacity:0;
  cursor:pointer;
  backdrop-filter:blur(4px);
}
.tt-ending-theatre-skip:hover{background:#703139;border-color:#efc778}
.tt-ending-theatre-skip:focus-visible{outline:3px solid #f0ca7a;outline-offset:3px}
.tt-ending-theatre-skip[hidden]{display:none!important}
.tt-ending.is-visible .tt-ending-theatre-skip{animation:tt-ending-skip-lifecycle 20s linear both}

.tt-ending.is-epilogue-skipped .tt-ending-theatre{display:none!important;animation:none!important}
.tt-ending.is-epilogue-skipped .tt-ending-theatre-skip{display:none!important}
.tt-ending.is-epilogue-skipped .tt-ending-panorama{
  visibility:visible!important;
  opacity:1!important;
  animation:none!important;
}
.tt-ending.is-epilogue-skipped .tt-ending-copy{
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  animation:none!important;
}
.tt-ending.is-epilogue-skipped .tt-ending-copy>*{
  opacity:1!important;
  transform:none!important;
  animation:none!important;
}

@keyframes tt-ending-theatre-dismiss{
  0%{visibility:visible;opacity:1}
  99%{visibility:visible;opacity:0}
  100%{visibility:hidden;opacity:0}
}
@keyframes tt-ending-panorama-reveal{
  0%{visibility:visible;opacity:0;filter:saturate(.72) brightness(.72)}
  100%{visibility:visible;opacity:1;filter:saturate(1) brightness(1)}
}
@keyframes tt-ending-skip-lifecycle{
  0%{visibility:visible;opacity:0;transform:translateY(-5px)}
  2%,78%{visibility:visible;opacity:1;transform:none}
  82%,100%{visibility:hidden;opacity:0;transform:translateY(-4px)}
}

@media(max-width:900px){
  .tt-ronghua-scatter{--tt-ronghua-opacity:.20;width:clamp(330px,72vw,520px)}
  .tt-ronghua-scatter--ch00,.tt-ronghua-scatter--ch02,.tt-ronghua-scatter--ch04,.tt-ronghua-scatter--ch06,.tt-ronghua-scatter--ch08{left:-16vw}
  .tt-ronghua-scatter--ch01,.tt-ronghua-scatter--ch03,.tt-ronghua-scatter--ch05,.tt-ronghua-scatter--ch07{right:-16vw}
  .tt-ronghua-scatter--ch06{--tt-ronghua-opacity:.18}
  .tt-ronghua-scatter--ch07{--tt-ronghua-opacity:.18;width:clamp(360px,78vw,560px)}
  .tt-ending-panorama{
    right:0;
    bottom:auto;
    left:0;
    height:clamp(300px,55vw,430px);
  }
  .tt-ending-panorama::after{background:linear-gradient(0deg,rgba(8,15,17,.2),transparent 38%)}
  .tt-ending-panorama img{object-fit:contain;object-position:50% 0}
}

@media(max-width:480px){
  .tt-ronghua-scatter{--tt-ronghua-opacity:.19;width:clamp(320px,92vw,430px)}
  .tt-ronghua-scatter--ch00,.tt-ronghua-scatter--ch02,.tt-ronghua-scatter--ch04,.tt-ronghua-scatter--ch06,.tt-ronghua-scatter--ch08{left:-24vw}
  .tt-ronghua-scatter--ch01,.tt-ronghua-scatter--ch03,.tt-ronghua-scatter--ch05,.tt-ronghua-scatter--ch07{right:-24vw}
  .tt-ronghua-scatter--ch06,.tt-ronghua-scatter--ch07{--tt-ronghua-opacity:.17}
  .tt-ronghua-scatter--ch07{width:clamp(350px,98vw,460px)}
  .tt-ending-theatre-skip{top:10px;right:10px;padding:8px 12px;font-size:11px;letter-spacing:.03em}
}

@media(prefers-reduced-motion:reduce){
  .tt-ronghua-scatter{
    opacity:var(--tt-ronghua-opacity)!important;
    transform:rotate(var(--tt-ronghua-rotate)) scale(1)!important;
    transition:none!important;
  }
  .tt-ending.is-visible .tt-ending-theatre{animation:none!important}
  .tt-ending-theatre-skip,
  .tt-ending.is-visible .tt-ending-theatre-skip{
    visibility:visible!important;
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
  .tt-ending-panorama,
  .tt-ending.is-visible .tt-ending-panorama{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    visibility:visible!important;
    opacity:1!important;
    filter:none!important;
    animation:none!important;
  }
  .tt-ending-panorama img{height:auto;aspect-ratio:16/9;object-fit:contain}
}

@media print{
  .tt-ronghua-scatter,.tt-ending-theatre-skip{display:none!important}
  .tt-ending-panorama{
    position:relative!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:16/9;
    visibility:visible!important;
    opacity:1!important;
  }
  .tt-ending-panorama img{height:auto!important;object-fit:contain!important}
}

/* v12.0 GSAP progressive enhancement.
   GSAP owns coordinated transforms and opacity only after both the core and
   ScrollTrigger have loaded. Without them, every established CSS animation
   above remains the complete visual fallback. */
html.tt-gsap-ready .tt-opening-line{transition:none}
html.tt-gsap-ready .tt-chapter,
html.tt-gsap-ready .tt-transition{
  opacity:1;
  transform:none;
  transition:none;
}
html.tt-gsap-ready .tt-transition .tt-transition-inner{
  opacity:1;
  transform:none;
  transition:none;
}
html.tt-gsap-ready .tt-chapter>.tt-ronghua-scatter{
  transition:none;
}

/* Avoid a CSS/GSAP transform race while preserving the decorative pseudo
   elements and pose-sheet frame changes that do not share those properties. */
html.tt-gsap-ready .tt-transition.is-visible .tt-shadow-stage,
html.tt-gsap-ready .tt-transition.is-visible .tt-shadow-screen,
html.tt-gsap-ready .tt-transition.is-visible .tt-pose-actor,
html.tt-gsap-ready .tt-transition.is-visible .tt-shadow-figure,
html.tt-gsap-ready .tt-transition.is-visible .tt-shadow-props *,
html.tt-gsap-ready .tt-transition.is-visible .tt-shadow-dialogue>p,
html.tt-gsap-ready .tt-transition--prologue.is-visible .tt-stage-curtain--opening .tt-stage-curtain-panel,
html.tt-gsap-ready .tt-transition--prologue.is-visible .tt-stage-curtain--opening .tt-stage-curtain-valance,
html.tt-gsap-ready .tt-transition--prologue.is-visible .tt-shadow-dialogue--prologue{
  animation:none!important;
  transition:none!important;
}

/* The final four-line duet, curtain close and panorama reveal are one GSAP
   timeline. The old keyframes remain available whenever enhancement fails. */
html.tt-gsap-ready .tt-ending.is-visible .tt-ending-theatre,
html.tt-gsap-ready .tt-ending.is-visible .tt-ending-theatre-light,
html.tt-gsap-ready .tt-ending.is-visible .tt-ending-theatre-bloom,
html.tt-gsap-ready .tt-ending.is-visible .tt-ending-theatre-puppet,
html.tt-gsap-ready .tt-ending.is-visible .tt-ending-theatre-puppet>i,
html.tt-gsap-ready .tt-ending.is-visible .tt-stage-curtain--ending .tt-stage-curtain-panel,
html.tt-gsap-ready .tt-ending.is-visible .tt-stage-curtain--ending .tt-stage-curtain-valance,
html.tt-gsap-ready .tt-ending.is-visible .tt-ending-theatre-script>small,
html.tt-gsap-ready .tt-ending.is-visible .tt-ending-theatre-script>p,
html.tt-gsap-ready .tt-ending.is-visible .tt-ending-theatre-skip,
html.tt-gsap-ready .tt-ending.is-visible .tt-ending-panorama,
html.tt-gsap-ready .tt-ending.is-visible .tt-ending-copy,
html.tt-gsap-ready .tt-ending.is-visible .tt-ending-copy>*{
  animation:none!important;
  transition:none!important;
}

html.tt-gsap-ready .tt-hero-art,
html.tt-gsap-ready .tt-hero-art img,
html.tt-gsap-ready .tt-shadow-stage,
html.tt-gsap-ready .tt-ending-theatre,
html.tt-gsap-ready .tt-ending-panorama img{
  backface-visibility:hidden;
}
html.tt-gsap-ready .tt-guide-links a,
html.tt-gsap-ready .tt-source-grid a,
html.tt-gsap-ready .tt-ending-actions a{
  transform:translateZ(0);
}

html.tt-gsap-ready .tt-ending.is-gsap-complete .tt-ending-theatre,
html.tt-gsap-ready .tt-ending.is-epilogue-skipped .tt-ending-theatre{
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
html.tt-gsap-ready .tt-ending.is-gsap-complete .tt-ending-panorama,
html.tt-gsap-ready .tt-ending.is-gsap-complete .tt-ending-copy,
html.tt-gsap-ready .tt-ending.is-epilogue-skipped .tt-ending-panorama,
html.tt-gsap-ready .tt-ending.is-epilogue-skipped .tt-ending-copy{
  visibility:visible!important;
  opacity:1!important;
}
html.tt-gsap-ready .tt-ending.is-gsap-complete .tt-ending-copy,
html.tt-gsap-ready .tt-ending.is-epilogue-skipped .tt-ending-copy{
  pointer-events:auto!important;
}

@media(prefers-reduced-motion:reduce){
  html.tt-gsap-reduced .tt-hero-art,
  html.tt-gsap-reduced .tt-hero-art img,
  html.tt-gsap-reduced .tt-ronghua-scatter{
    will-change:auto!important;
  }
}

/* v12.1 CHAPTER 00 critical-content safety.
   The prologue's stage artwork and transcript must never depend on an
   animation reaching its final frame. Curtains, puppets and props still move,
   while the documentary background and words remain readable immediately. */
.tt-transition--prologue .tt-shadow-stage{
  visibility:visible!important;
  opacity:1!important;
  background-image:
    linear-gradient(0deg,rgba(13,6,4,.5),transparent 31%,rgba(18,9,5,.04)),
    linear-gradient(90deg,rgba(12,6,4,.22),transparent 16% 84%,rgba(12,6,4,.24)),
    url("./art/tian-tian-shadow-theatre-empty-stage-20260814.webp")!important;
  background-color:#21130d!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%,100% 100%,cover!important;
}
.tt-transition--prologue .tt-shadow-dialogue--prologue,
.tt-transition--prologue .tt-shadow-dialogue--prologue>small,
.tt-transition--prologue .tt-shadow-dialogue--prologue>p{
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
}
.tt-transition--prologue .tt-stage-curtain--opening .tt-stage-curtain-panel{
  opacity:.82!important;
}