: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}
}

/* 2026-08-26: Chinese animation craft pass — mineral-pigment landscape,
   pierced-leather silhouettes and a visibly physical lamp-lit screen. */
.tt-shadow-atmosphere{
  position:absolute;z-index:1;inset:8% 7% 10%;display:block;overflow:hidden;
  border:1px solid rgba(117,59,31,.42);
  background:
    radial-gradient(ellipse at 50% 44%,rgba(255,231,171,.24),transparent 52%),
    linear-gradient(180deg,rgba(228,190,119,.12),rgba(72,112,91,.09) 58%,rgba(65,34,22,.2));
  box-shadow:inset 0 0 70px rgba(41,18,9,.35),0 0 0 5px rgba(37,17,10,.18);
  pointer-events:none;
}
.tt-shadow-atmosphere::before,.tt-shadow-atmosphere::after{
  content:"";position:absolute;z-index:7;inset:0;pointer-events:none;
}
.tt-shadow-atmosphere::before{
  background:repeating-linear-gradient(93deg,rgba(255,244,213,.045) 0 1px,transparent 1px 5px);
  mix-blend-mode:screen;
}
.tt-shadow-atmosphere::after{
  border:9px solid transparent;border-image:repeating-linear-gradient(45deg,#5b271e 0 7px,#b97936 7px 10px,#294d48 10px 16px) 12;
  opacity:.62;
}
.tt-shadow-atmosphere>i{position:absolute;display:block}
.tt-shadow-sun-disc{z-index:0;right:17%;top:10%;width:clamp(54px,7vw,96px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 42% 38%,#f5d98c,#c9743c 62%,rgba(126,43,34,.58));box-shadow:0 0 32px rgba(235,171,75,.28);filter:saturate(.86)}
.tt-shadow-cloud{z-index:2;width:34%;height:20%;opacity:.65;background:linear-gradient(90deg,transparent,rgba(239,217,165,.72) 20% 78%,transparent);clip-path:polygon(0 54%,12% 39%,22% 47%,34% 23%,48% 44%,61% 18%,76% 48%,88% 38%,100% 58%,87% 67%,70% 62%,55% 78%,36% 63%,18% 74%)}
.tt-shadow-cloud--near{left:8%;top:14%;filter:drop-shadow(7px 7px 3px rgba(48,24,16,.22))}
.tt-shadow-cloud--far{right:7%;top:29%;scale:.68;opacity:.42;filter:blur(.35px)}
.tt-shadow-mountain{bottom:13%;height:48%;clip-path:polygon(0 100%,0 83%,9% 62%,16% 72%,28% 33%,37% 57%,48% 19%,58% 53%,67% 38%,76% 67%,88% 44%,100% 75%,100% 100%)}
.tt-shadow-mountain--rear{z-index:0;left:2%;width:96%;background:linear-gradient(180deg,rgba(49,82,76,.36),rgba(32,53,48,.52));filter:blur(.4px)}
.tt-shadow-mountain--front{z-index:1;left:-2%;width:83%;height:38%;background:linear-gradient(180deg,rgba(46,69,57,.58),rgba(37,31,25,.78));transform:scaleX(-1);opacity:.76}
.tt-shadow-water{z-index:2;left:5%;right:5%;bottom:7%;height:24%;background:repeating-linear-gradient(174deg,transparent 0 8px,rgba(203,176,112,.2) 9px 10px),linear-gradient(180deg,rgba(55,93,88,.08),rgba(31,56,54,.36));clip-path:polygon(0 18%,20% 9%,43% 20%,65% 6%,100% 18%,100% 100%,0 100%)}
.tt-shadow-footlights{z-index:6;left:5%;right:5%;bottom:1.5%;height:8px;background:radial-gradient(circle,rgba(255,218,132,.92) 0 2px,transparent 3px) 0 0/9.09% 8px repeat-x;filter:drop-shadow(0 0 6px rgba(240,174,72,.8))}
.tt-shadow-stage .tt-pose-layer{z-index:5;filter:drop-shadow(12px 10px 5px rgba(28,12,7,.5)) saturate(1.08)}
.tt-shadow-stage .tt-pose-actor::after{content:"";position:absolute;inset:6% 14% 8%;border-radius:46%;background:radial-gradient(circle,rgba(248,208,111,.7) 0 1.2px,transparent 1.8px) 0 0/12px 12px;mix-blend-mode:screen;opacity:.3;pointer-events:none}
.tt-transition[data-shadow-scene="frost-lantern"] .tt-shadow-atmosphere{filter:saturate(.62) hue-rotate(10deg)}
.tt-transition[data-shadow-scene="court-scroll"] .tt-shadow-atmosphere,.tt-transition[data-shadow-scene="evidence-blocks"] .tt-shadow-atmosphere{filter:saturate(.58) brightness(.82)}
.tt-transition[data-shadow-scene="seal-road"] .tt-shadow-atmosphere,.tt-transition[data-shadow-scene="guarded-lamp"] .tt-shadow-atmosphere{filter:saturate(1.06) brightness(1.06)}
.tt-transition.is-visible .tt-shadow-cloud--near{animation:tt-cloud-drift-near 9s ease-in-out both}
.tt-transition.is-visible .tt-shadow-cloud--far{animation:tt-cloud-drift-far 11s ease-in-out both}
.tt-transition.is-visible .tt-shadow-water{animation:tt-water-breathe 4.8s ease-in-out 1s infinite alternate}
@keyframes tt-cloud-drift-near{from{translate:-7% 2%;opacity:.24}to{translate:8% -2%;opacity:.68}}
@keyframes tt-cloud-drift-far{from{translate:8% 0;opacity:.18}to{translate:-6% 3%;opacity:.45}}
@keyframes tt-water-breathe{from{filter:brightness(.82);translate:0 1px}to{filter:brightness(1.12);translate:0 -1px}}

@media(max-width:720px){
  .tt-shadow-atmosphere{inset:6% 4% 8%}
  .tt-shadow-sun-disc{right:15%;top:8%;width:48px}
  .tt-shadow-cloud{width:42%;height:24%}
  .tt-shadow-mountain{bottom:11%}
  .tt-shadow-footlights{left:4%;right:4%}
  .tt-shadow-stage .tt-pose-layer{filter:drop-shadow(7px 6px 3px rgba(28,12,7,.48)) saturate(1.08)}
}

@media(prefers-reduced-motion:reduce){
  .tt-shadow-cloud,.tt-shadow-water{animation:none!important}
  .tt-shadow-atmosphere{opacity:1!important;transform: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;
}

/* 2026-08-26 / scene-craft pass.
   A restrained finishing layer gives every act its own material vocabulary:
   bookbinding, wind traces, door hardware, frost etching, document tabs,
   route marks, registration colour, stitch points and protective lamp arcs. */
.tt-scene-craft{
  position:absolute;
  z-index:2;
  inset:7% 6% 9%;
  display:block;
  overflow:hidden;
  pointer-events:none;
  opacity:.92;
  filter:drop-shadow(4px 5px 2px rgba(39,18,11,.23));
}
.tt-scene-craft>i{
  position:absolute;
  display:block;
  box-sizing:border-box;
  pointer-events:none;
}

/* Chapter 00 — case-file binding and two hanging end knots. */
.tt-craft-scroll-frame{
  left:22%;right:22%;top:8%;height:42%;
  border:1px solid rgba(216,165,82,.56);
  outline:1px solid rgba(108,43,36,.28);
  outline-offset:6px;
  background:repeating-linear-gradient(90deg,rgba(116,46,38,.22) 0 2px,transparent 2px 13px);
  clip-path:polygon(0 0,46% 0,50% 4%,54% 0,100% 0,100% 100%,54% 100%,50% 96%,46% 100%,0 100%);
}
.tt-craft-binding-stitch{
  left:calc(31% + var(--tt-craft-i) * 9.5%);
  top:6.5%;
  width:14px;height:7px;
  border:1px solid rgba(121,43,39,.78);
  border-radius:50%;
  background:rgba(224,178,91,.22);
  box-shadow:0 0 0 2px rgba(239,205,128,.06);
}
.tt-craft-tassel{
  left:calc(21% + var(--tt-craft-i) * 58%);
  top:12%;
  width:11px;height:62px;
  border-left:2px solid rgba(122,42,39,.64);
  background:repeating-linear-gradient(90deg,transparent 0 2px,rgba(205,142,63,.48) 2px 3px) 0 31px/9px 31px no-repeat;
  transform-origin:50% 0;
}

/* Chapter 01 — three broad currents, seven clipped wind marks. */
.tt-craft-wind-ribbon{
  left:8%;
  top:calc(13% + var(--tt-craft-i) * 14%);
  width:calc(26% + var(--tt-craft-i) * 8%);
  height:16px;
  border-top:2px solid rgba(127,50,45,.6);
  border-radius:50%;
  box-shadow:0 -4px 0 -3px rgba(222,178,93,.64);
  transform:rotate(calc(-7deg + var(--tt-craft-i) * 5deg));
  transform-origin:0 50%;
}
.tt-craft-wind-mark{
  left:calc(12% + var(--tt-craft-i) * 10.5%);
  top:calc(39% + var(--tt-craft-i) * 4.8%);
  width:12px;height:12px;
  border-top:2px solid rgba(49,89,79,.64);
  border-right:2px solid rgba(197,137,61,.7);
  transform:rotate(34deg);
}
.tt-craft-edge-streamer{
  left:calc(17% + var(--tt-craft-i) * 67%);
  top:5%;
  width:9px;height:55px;
  border-left:2px solid rgba(136,47,43,.58);
  border-radius:45%;
  box-shadow:4px 0 rgba(206,149,70,.2);
  transform-origin:50% 0;
}

/* Chapter 02 — paired vermilion bosses and layered thresholds. */
.tt-craft-door-stud{
  width:10px;height:10px;
  border:1px solid rgba(247,199,108,.58);
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#d8a653 0 20%,#8f3432 23% 66%,#4b2922 70%);
  box-shadow:2px 3px 2px rgba(43,20,13,.3);
}
.tt-craft-door-stud:nth-child(-n+6){left:36%}
.tt-craft-door-stud:nth-child(n+7){right:36%}
.tt-craft-door-stud:nth-child(1),.tt-craft-door-stud:nth-child(7){top:21%}
.tt-craft-door-stud:nth-child(2),.tt-craft-door-stud:nth-child(8){top:31%}
.tt-craft-door-stud:nth-child(3),.tt-craft-door-stud:nth-child(9){top:41%}
.tt-craft-door-stud:nth-child(4),.tt-craft-door-stud:nth-child(10){top:51%}
.tt-craft-door-stud:nth-child(5),.tt-craft-door-stud:nth-child(11){top:61%}
.tt-craft-door-stud:nth-child(6),.tt-craft-door-stud:nth-child(12){top:71%}
.tt-craft-rosette{
  left:calc(39% + var(--tt-craft-i) * 21%);
  top:45%;
  width:22px;height:22px;
  border:4px double rgba(206,148,65,.72);
  border-radius:50%;
  background:radial-gradient(circle,#742c2d 0 23%,transparent 25%);
  box-shadow:0 0 0 2px rgba(103,42,34,.34);
}
.tt-craft-threshold{
  left:30%;right:30%;
  bottom:calc(11% + var(--tt-craft-i) * 3.2%);
  height:2px;
  background:linear-gradient(90deg,transparent,#6d352c 12% 88%,transparent);
  box-shadow:0 1px rgba(228,181,92,.28);
  transform-origin:50% 50%;
}

/* Chapter 03 — etched ice marks and breath passing the lantern. */
.tt-craft-ice-mark{
  left:calc(6% + var(--tt-craft-i) * 12.5%);
  top:calc(8% + var(--tt-craft-i) * 7.7%);
  width:17px;height:17px;
  background:
    linear-gradient(90deg,transparent 46%,rgba(222,236,226,.74) 47% 53%,transparent 54%),
    linear-gradient(transparent 46%,rgba(222,236,226,.74) 47% 53%,transparent 54%);
  filter:drop-shadow(0 0 3px rgba(218,235,225,.4));
}
.tt-craft-cold-breath{
  left:12%;
  top:calc(36% + var(--tt-craft-i) * 12%);
  width:24%;height:13px;
  border-top:2px solid rgba(215,230,223,.4);
  border-radius:50%;
  transform:rotate(calc(-5deg + var(--tt-craft-i) * 4deg));
  transform-origin:0 50%;
}
.tt-craft-frost-corner{
  top:5%;
  width:19%;height:27%;
  border-top:2px solid rgba(218,233,225,.4);
  border-left:2px solid rgba(218,233,225,.34);
  background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(223,235,228,.16) 9px 10px);
}
.tt-craft-frost-corner:nth-last-child(2){left:3%}
.tt-craft-frost-corner:last-child{right:3%;transform:scaleX(-1)}

/* Chapter 04 — document indexing and a level rule behind the judgment. */
.tt-craft-document-tab{
  right:22%;
  top:calc(25% + var(--tt-craft-i) * 13%);
  width:34px;height:16px;
  border:1px solid rgba(101,53,37,.54);
  background:linear-gradient(90deg,rgba(221,187,119,.68),rgba(139,70,44,.46));
  box-shadow:4px 4px rgba(55,28,20,.18);
}
.tt-craft-balance-rule{
  left:31%;right:31%;top:67%;height:3px;
  background:linear-gradient(90deg,transparent,#9a4138 9% 45%,#d4a65a 46% 54%,#9a4138 55% 91%,transparent);
  box-shadow:0 5px 0 -2px rgba(50,86,76,.44);
  transform-origin:50% 50%;
}
.tt-craft-court-column{
  left:calc(22% + var(--tt-craft-i) * 56%);
  top:13%;bottom:16%;width:9px;
  border:1px solid rgba(193,139,65,.46);
  background:repeating-linear-gradient(0deg,#5a3028 0 7px,#a05a3d 7px 10px);
  opacity:.6;
  transform-origin:50% 100%;
}

/* Chapter 05 — measured route marks and an amber destination field. */
.tt-craft-route-marker{
  left:calc(29% + var(--tt-craft-i) * 17%);
  top:calc(63% - var(--tt-craft-i) * 8%);
  width:17px;height:17px;
  border:3px double rgba(134,47,43,.72);
  border-radius:50%;
  background:rgba(222,175,86,.34);
  box-shadow:0 0 0 3px rgba(63,99,84,.1);
}
.tt-craft-track{
  left:calc(22% + var(--tt-craft-i) * 9%);
  top:calc(72% - var(--tt-craft-i) * 5.5%);
  width:18%;height:7px;
  border-top:2px solid rgba(118,49,42,.38);
  transform:rotate(-10deg);
  transform-origin:0 50%;
}
.tt-craft-home-glow{
  right:13%;bottom:8%;width:24%;height:31%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(241,194,93,.34),rgba(204,125,55,.12) 46%,transparent 72%);
  mix-blend-mode:screen;
}

/* Chapter 06 — printing registration and four mineral ink references. */
.tt-craft-registration-mark{
  width:16px;height:16px;
  border-top:2px solid rgba(226,190,110,.6);
  border-left:2px solid rgba(226,190,110,.6);
  box-shadow:-2px -2px rgba(113,48,40,.42);
}
.tt-craft-registration-mark:nth-child(1){left:18%;top:21%}
.tt-craft-registration-mark:nth-child(2){left:49%;top:21%;transform:scaleX(-1)}
.tt-craft-registration-mark:nth-child(3){left:18%;top:62%;transform:scaleY(-1)}
.tt-craft-registration-mark:nth-child(4){left:49%;top:62%;transform:scale(-1)}
.tt-craft-ink-pad{
  left:calc(22% + var(--tt-craft-i) * 13%);
  bottom:7%;
  width:22px;height:9px;
  border:1px solid rgba(56,31,24,.5);
  border-radius:50%;
  box-shadow:0 3px rgba(50,26,20,.2),inset 0 1px rgba(245,220,157,.22);
}
.tt-craft-ink-pad:nth-child(5){background:#8d3737}
.tt-craft-ink-pad:nth-child(6){background:#c1954e}
.tt-craft-ink-pad:nth-child(7){background:#41685c}
.tt-craft-ink-pad:nth-child(8){background:#473f37}
.tt-craft-evidence-rule{
  left:68%;top:13%;bottom:13%;width:2px;
  background:repeating-linear-gradient(0deg,rgba(231,190,107,.58) 0 7px,transparent 7px 13px);
  box-shadow:4px 0 rgba(122,45,40,.2);
  transform-origin:50% 0;
}

/* Chapter 07 — seven punctures and an outer field of thread-light. */
.tt-scene-craft--seven-moon{--tt-stitch-radius:clamp(66px,11vw,118px)}
.tt-craft-stitch-point,.tt-craft-orbit-dot{
  left:50%;top:45%;
  border-radius:50%;
  transform-origin:50% 50%;
}
.tt-craft-stitch-point{
  width:9px;height:9px;
  margin:-4px 0 0 -4px;
  border:2px solid rgba(143,49,48,.8);
  background:#d4a657;
  box-shadow:0 0 0 3px rgba(239,211,145,.1);
  transform:rotate(calc(var(--tt-craft-i) * 51.428deg)) translateY(calc(var(--tt-stitch-radius) * -1));
}
.tt-craft-orbit-dot{
  width:5px;height:5px;
  margin:-2px 0 0 -2px;
  background:rgba(224,195,127,.72);
  box-shadow:0 0 6px rgba(231,196,115,.52);
  transform:rotate(calc(25deg + var(--tt-craft-i) * 60deg)) translateY(calc(var(--tt-stitch-radius) * -.72));
}
.tt-craft-needle-glint{
  left:57%;top:27%;width:66px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(236,213,165,.9) 35% 72%,transparent);
  box-shadow:0 0 6px rgba(235,207,142,.42);
  transform:rotate(-17deg);
  transform-origin:50% 50%;
}

/* Chapter 08 — concentric protection, spring colour and a widening doorway. */
.tt-craft-safe-arc{
  left:calc(33% - var(--tt-craft-i) * 4%);
  top:calc(28% - var(--tt-craft-i) * 4%);
  width:calc(34% + var(--tt-craft-i) * 8%);
  aspect-ratio:1;
  border:1px solid rgba(215,164,76,.34);
  border-bottom-color:rgba(128,46,42,.5);
  border-radius:50%;
  box-shadow:inset 0 0 15px rgba(235,184,84,.05);
}
.tt-craft-spring-dot{
  left:calc(15% + var(--tt-craft-i) * 9.7%);
  bottom:calc(8% + var(--tt-craft-i) * .6%);
  width:10px;height:10px;
  border-radius:50% 12% 50% 12%;
  background:linear-gradient(135deg,#b84e4f,#dc9b57);
  box-shadow:0 0 0 2px rgba(205,156,75,.12);
  transform:rotate(calc(18deg + var(--tt-craft-i) * 14deg));
}
.tt-craft-door-glow{
  right:4%;top:9%;width:25%;height:78%;
  background:linear-gradient(90deg,transparent,rgba(245,204,111,.12) 38%,rgba(246,213,138,.34) 50%,rgba(245,204,111,.1) 62%,transparent);
  clip-path:polygon(32% 0,68% 0,100% 100%,0 100%);
  mix-blend-mode:screen;
  transform-origin:50% 50%;
}

@media(min-width:901px){
  .tt-transition[data-shadow-scene] .tt-scene-craft{z-index:5}
}

@media(max-width:720px){
  .tt-scene-craft{inset:5% 4% 7%;z-index:2;opacity:.7;filter:drop-shadow(2px 3px 1px rgba(39,18,11,.2))}
  .tt-craft-scroll-frame{left:25%;right:25%;height:51%}
  .tt-craft-binding-stitch{left:calc(30% + var(--tt-craft-i) * 10%);width:9px;height:5px}
  .tt-craft-tassel{height:38px}
  .tt-craft-wind-ribbon{width:calc(22% + var(--tt-craft-i) * 7%)}
  .tt-craft-edge-streamer,.tt-craft-court-column{display:none!important}
  .tt-craft-door-stud{width:7px;height:7px}
  .tt-craft-rosette{width:15px;height:15px;border-width:2px}
  .tt-craft-ice-mark{width:11px;height:11px}
  .tt-craft-document-tab{right:19%;width:24px;height:11px}
  .tt-craft-route-marker{width:12px;height:12px;border-width:2px}
  .tt-craft-ink-pad{width:16px;height:7px}
  .tt-scene-craft--seven-moon{--tt-stitch-radius:clamp(48px,18vw,72px)}
  .tt-craft-stitch-point{width:7px;height:7px;margin:-3px 0 0 -3px}
  .tt-craft-orbit-dot{width:4px;height:4px}
  .tt-craft-needle-glint{width:38px}
  .tt-craft-safe-arc{opacity:.34}
  .tt-craft-spring-dot{width:7px;height:7px}
}

@media(prefers-reduced-motion:reduce){
  .tt-scene-craft,.tt-scene-craft>i{
    animation:none!important;
    transition:none!important;
  }
  .tt-scene-craft{opacity:.74!important}
  .tt-shadow-stage .tt-scene-craft--seven-moon .tt-craft-stitch-point{
    transform:rotate(calc(var(--tt-craft-i) * 51.428deg)) translateY(calc(var(--tt-stitch-radius) * -1))!important;
  }
  .tt-shadow-stage .tt-scene-craft--seven-moon .tt-craft-orbit-dot{
    transform:rotate(calc(25deg + var(--tt-craft-i) * 60deg)) translateY(calc(var(--tt-stitch-radius) * -.72))!important;
  }
}

html.tt-gsap-ready .tt-transition.is-visible .tt-scene-craft>i{
  animation:none!important;
  transition:none!important;
}

/* 2026-08-26 / tactile paper-sculpture atlas.
   One transparent 3 × 3 source gives each act its own museum-craft paper
   sculpture. Existing geometric marks remain as quiet motion accents and a
   resilient fallback if the raster asset is unavailable. */
.tt-scene-craft>i:not(.tt-paper-cut-atlas){
  z-index:1;
  filter:opacity(.34) saturate(.78);
}
.tt-paper-cut-atlas{
  z-index:0;
  inset:0;
  display:grid!important;
  place-items:center;
  overflow:visible;
}
.tt-paper-cut-atlas-image{
  position:relative;
  display:block;
  height:112%;
  aspect-ratio:1;
  background-image:url("./art/tian-tian-paper-cut-scene-atlas-20260826.webp");
  background-repeat:no-repeat;
  background-size:300% 300%;
  background-position:var(--tt-paper-atlas-x,0%) var(--tt-paper-atlas-y,0%);
  opacity:var(--tt-paper-atlas-opacity,.78);
  transform-origin:50% 56%;
  filter:drop-shadow(9px 12px 6px rgba(35,15,9,.34)) saturate(.96) brightness(.98);
}
.tt-scene-craft--scroll-prologue{--tt-paper-atlas-x:0%;--tt-paper-atlas-y:0%;--tt-paper-atlas-opacity:.78}
.tt-scene-craft--wind-kite{--tt-paper-atlas-x:50%;--tt-paper-atlas-y:0%;--tt-paper-atlas-opacity:.76}
.tt-scene-craft--ten-knot-door{--tt-paper-atlas-x:100%;--tt-paper-atlas-y:0%;--tt-paper-atlas-opacity:.8}
.tt-scene-craft--frost-lantern{--tt-paper-atlas-x:0%;--tt-paper-atlas-y:50%;--tt-paper-atlas-opacity:.72}
.tt-scene-craft--court-scroll{--tt-paper-atlas-x:50%;--tt-paper-atlas-y:50%;--tt-paper-atlas-opacity:.74}
.tt-scene-craft--seal-road{--tt-paper-atlas-x:100%;--tt-paper-atlas-y:50%;--tt-paper-atlas-opacity:.76}
.tt-scene-craft--evidence-blocks{--tt-paper-atlas-x:0%;--tt-paper-atlas-y:100%;--tt-paper-atlas-opacity:.72}
.tt-scene-craft--seven-moon{--tt-paper-atlas-x:50%;--tt-paper-atlas-y:100%;--tt-paper-atlas-opacity:.78}
.tt-scene-craft--guarded-lamp{--tt-paper-atlas-x:100%;--tt-paper-atlas-y:100%;--tt-paper-atlas-opacity:.8}

@media(max-width:720px){
  .tt-scene-craft{opacity:.88}
  .tt-scene-craft>i:not(.tt-paper-cut-atlas){filter:opacity(.22) saturate(.72)}
  .tt-paper-cut-atlas-image{
    height:118%;
    opacity:.72;
    filter:drop-shadow(5px 7px 3px rgba(35,15,9,.32)) saturate(.94) brightness(.96);
  }
}

@media(prefers-reduced-motion:reduce){
  .tt-paper-cut-atlas-image{
    opacity:var(--tt-paper-atlas-opacity,.78)!important;
    transform:none!important;
    filter:drop-shadow(7px 9px 4px rgba(35,15,9,.3)) saturate(.96) brightness(.98)!important;
    will-change:auto;
  }
}

/* 2026-08-26 / carved-timber theatre direction.
   The former red fabric curtains read too close to a circus proscenium. A
   single transparent, hand-carved timber frame now carries the opening, all
   nine chapter tableaux and the epilogue. The lit mulberry-paper screen stays
   quiet behind the existing puppets and paper-sculpture motifs. */
.tt-stage-curtain{
  display:none!important;
}

.tt-stage::before,
.tt-stage::after{
  content:none!important;
  display:none!important;
}

.tt-carved-stage-frame{
  position:absolute;
  inset:-.25%;
  display:block;
  background:
    linear-gradient(180deg,rgba(57,29,16,.97),rgba(116,71,35,.95)) 50% 88.45%/71.8% .65% no-repeat,
    url("./art/tian-tian-carved-wood-stage-frame-20260826.webp") center/100% 100% no-repeat;
  filter:drop-shadow(0 12px 10px rgba(12,5,2,.58)) drop-shadow(0 1px 1px rgba(241,191,91,.16));
  opacity:1;
  transform-origin:50% 50%;
  pointer-events:none;
}
.tt-carved-stage-frame--opening{z-index:3}
.tt-carved-stage-frame--transition{z-index:10;will-change:transform,opacity}
.tt-carved-stage-frame--ending{z-index:11}

.tt-stage,
.tt-transition[data-shadow-scene] .tt-shadow-stage,
.tt-ending-theatre-stage{
  border-color:rgba(61,34,20,.94)!important;
  background:
    linear-gradient(0deg,rgba(24,10,5,.7),transparent 24%,rgba(31,14,7,.05) 70%,rgba(16,7,4,.24)) 0 0/100% 100% no-repeat,
    repeating-linear-gradient(93deg,rgba(91,55,31,.045) 0 1px,transparent 1px 6px) 0 0/100% 100% no-repeat,
    url("./art/tian-tian-shadow-theatre-static-duet-20260814.webp") 50% 50%/contain no-repeat,
    radial-gradient(ellipse at 50% 47%,#f0d69a 0%,#d2a463 45%,#7c5032 76%,#28160d 100%) 0 0/100% 100% no-repeat!important;
  background-position:center!important;
  box-shadow:inset 0 0 82px rgba(31,14,7,.52),0 22px 48px rgba(9,4,2,.36)!important;
}

html.tt-pose-ready .tt-stage,
html.tt-pose-ready .tt-transition[data-shadow-scene] .tt-shadow-stage,
.tt-transition--prologue .tt-shadow-stage,
html.tt-pose-ready .tt-ending-theatre-stage{
  background:
    linear-gradient(0deg,rgba(24,10,5,.7),transparent 24%,rgba(31,14,7,.05) 70%,rgba(16,7,4,.24)) 0 0/100% 100% no-repeat,
    repeating-linear-gradient(93deg,rgba(91,55,31,.045) 0 1px,transparent 1px 6px) 0 0/100% 100% no-repeat,
    radial-gradient(ellipse at 50% 47%,#f0d69a 0%,#d2a463 45%,#7c5032 76%,#28160d 100%) 0 0/100% 100% no-repeat!important;
  background-position:center!important;
}

.tt-transition.is-visible .tt-carved-stage-frame--transition{
  animation:tt-carved-stage-settle 1.25s cubic-bezier(.2,.72,.2,1) both;
}
@keyframes tt-carved-stage-settle{
  from{opacity:.72;transform:scale(1.018);filter:drop-shadow(0 8px 7px rgba(12,5,2,.42)) saturate(.88)}
  to{opacity:1;transform:none;filter:drop-shadow(0 12px 10px rgba(12,5,2,.58)) drop-shadow(0 1px 1px rgba(241,191,91,.16)) saturate(1)}
}
html.tt-gsap-ready .tt-transition.is-visible .tt-carved-stage-frame--transition{
  animation:none!important;
}

@media(max-width:720px){
  .tt-carved-stage-frame{
    filter:drop-shadow(0 7px 5px rgba(12,5,2,.54)) drop-shadow(0 1px 1px rgba(241,191,91,.14));
  }
  .tt-carved-stage-frame--opening{
    right:0;
    bottom:auto;
    left:0;
    width:100%;
    height:auto;
    aspect-ratio:1672/941;
  }
  .tt-stage{
    background:
      linear-gradient(0deg,rgba(25,10,5,.86),rgba(31,14,7,.08) 42%,rgba(16,7,4,.22)) 0 0/100% 100% no-repeat,
      repeating-linear-gradient(93deg,rgba(91,55,31,.04) 0 1px,transparent 1px 6px) 0 0/100% 100% no-repeat,
      url("./art/tian-tian-shadow-theatre-static-duet-20260814.webp") 50% 0/100% auto no-repeat,
      radial-gradient(ellipse at 50% 17%,#efd494 0%,#c89457 31%,#512e1c 57%,#1b0d08 100%) 0 0/100% 100% no-repeat!important;
    background-position:center top!important;
  }
  html.tt-pose-ready .tt-stage{
    background:
      linear-gradient(0deg,rgba(25,10,5,.86),rgba(31,14,7,.08) 42%,rgba(16,7,4,.22)) 0 0/100% 100% no-repeat,
      repeating-linear-gradient(93deg,rgba(91,55,31,.04) 0 1px,transparent 1px 6px) 0 0/100% 100% no-repeat,
      radial-gradient(ellipse at 50% 17%,#efd494 0%,#c89457 31%,#512e1c 57%,#1b0d08 100%) 0 0/100% 100% no-repeat!important;
    background-position:center top!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .tt-carved-stage-frame{
    animation:none!important;
    transition:none!important;
    opacity:1!important;
    transform:none!important;
    will-change:auto;
  }
}

/* Browser QA polish: keep the new timber proscenium visually singular and
   replace the former striped water treatment with a quiet paper-cut wash. */
.tt-opening::before{
  background:
    linear-gradient(90deg,rgba(8,4,3,.78),rgba(29,15,9,.08) 28%,rgba(29,15,9,.08) 72%,rgba(8,4,3,.8)),
    radial-gradient(ellipse at 50% 43%,rgba(232,188,111,.28),rgba(117,69,38,.12) 42%,transparent 68%),
    linear-gradient(180deg,#28170f 0%,#170c08 58%,#0d0705 100%)!important;
  background-position:center!important;
  background-size:100% 100%!important;
  filter:none!important;
}

.tt-shadow-water{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(204,181,126,.13),transparent 58%),
    linear-gradient(180deg,rgba(69,103,91,.06),rgba(31,56,52,.3))!important;
  box-shadow:inset 0 1px rgba(231,205,145,.08);
}

.tt-shadow-atmosphere::after{
  border:0!important;
  border-image:none!important;
  opacity:0!important;
}