/* ================================================================
   Airlight Editorial UI · Keynote Deck
   Warm paper · serif italics · ambient orb glow · editorial calm
   ================================================================ */

:root{
 /* === Surface · warm paper (提亮：让光透过来) === */
 --bg:#fcfbf8;
 --bg2:rgba(252,251,248,0.74);
 --bg3:rgba(253,252,250,0.86);
 --paper:#fdfcfa;

 /* === Ink === */
 --ink:#191d24;
 --ink2:rgba(25,29,36,.78);
 --mute:rgba(72,78,90,.64);
 --faint:rgba(72,78,90,.42);

 /* === Rules === */
 --rule:rgba(31,35,43,.12);
 --ruleS:rgba(31,35,43,.24);

 /* === Accents · sunset family (保留品牌色 · 仅用于 italic 强调) === */
 --accent:#d97343;        /* warm terracotta — for italic emphasis */
 --accent-soft:#e89668;
 --blue-soft:#a5c2ff;
 --peach:#ffa675;
 --warm-glow:rgba(255,206,130,.30);

 /* === Typography === */
 --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
 --serifCN:"Noto Serif SC","Songti SC","Source Han Serif SC",Georgia,serif;
 --sans:"Manrope","Avenir Next","Helvetica Neue",-apple-system,"PingFang SC",sans-serif;
 --mono:"JetBrains Mono","SF Mono",monospace;

 /* === Cursor glow tracking === */
 --pointer-x:50vw;
 --pointer-y:35vh;
 --glow-shift-x:0px;
 --glow-shift-y:0px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--sans);color:var(--ink);
 background:var(--bg);
 -webkit-font-smoothing:antialiased;overflow:hidden;letter-spacing:-.003em;isolation:isolate}

/* === Airlight shell · paper + noise + cursor glow + ambient orbs === */
.shell{position:fixed;inset:0;pointer-events:none;z-index:0}
.shell::before{content:"";position:absolute;inset:0;pointer-events:none;
 opacity:.04;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}

.cursor-glow{position:fixed;top:0;left:0;width:220px;height:220px;
 pointer-events:none;mix-blend-mode:screen;opacity:.32;filter:blur(28px);
 background:radial-gradient(circle, rgba(255,180,160,.22), rgba(255,158,128,.14) 48%, rgba(189,178,255,.10) 74%, transparent 100%);
 transition:opacity 280ms ease;
 transform:translate3d(var(--pointer-x), var(--pointer-y), 0);z-index:1}

.global-glow{position:fixed;border-radius:50%;filter:blur(110px);opacity:.42;
 pointer-events:none;z-index:0}
/* Sun (top-right) — pastel candy: peach-coral → salmon → lavender */
.glow-a{top:-6vh;right:-6vw;width:clamp(420px,46vw,720px);height:clamp(420px,46vw,720px);
 background:radial-gradient(circle, rgba(255,214,165,.62), rgba(255,158,128,.42) 38%, rgba(255,107,107,.26) 62%, rgba(189,178,255,.18) 84%, transparent 100%);
 transform:translate3d(var(--glow-shift-x), var(--glow-shift-y), 0)}
/* Moon (bottom-left) — pastel candy: sky-blue → lavender → cherry-blossom */
.glow-b{bottom:-8vh;left:-6vw;width:clamp(380px,40vw,640px);height:clamp(380px,40vw,640px);
 background:radial-gradient(circle, rgba(160,196,255,.40), rgba(189,178,255,.28) 42%, rgba(255,198,255,.20) 72%, transparent 100%);
 transform:translate3d(calc(var(--glow-shift-x) * -.7), calc(var(--glow-shift-y) * -.7), 0)}

/* Cover · breathing dots webgl background — visible only on .s01 */
#webgl-container{position:fixed;inset:0;z-index:0;pointer-events:none;
 opacity:0;transition:opacity 600ms ease;visibility:hidden}
#webgl-container.is-visible{opacity:.65;visibility:visible;mix-blend-mode:multiply}

/* === deck & slides === */
.deck{position:relative;height:100vh;width:100vw;z-index:2}
.slide{position:absolute;inset:0;padding:clamp(40px,6vh,84px) clamp(40px,5vw,108px);
 display:grid;grid-template-rows:auto 1fr auto;gap:clamp(20px,2.4vh,38px);
 opacity:0;transform:translateY(14px);
 transition:opacity 380ms cubic-bezier(.4,0,.2,1),transform 380ms cubic-bezier(.4,0,.2,1);
 pointer-events:none;visibility:hidden}
.slide.active{opacity:1;transform:none;pointer-events:auto;visibility:visible}

.s-head{display:flex;justify-content:space-between;align-items:baseline;
 font-family:var(--sans);font-size:11px;font-weight:600;
 letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.s-head .chp{color:var(--ink)}
.s-head .pg{font-variant-numeric:tabular-nums}
.s-head .pg strong{color:var(--ink);font-weight:700}

.s-foot{display:flex;justify-content:space-between;align-items:baseline;
 font-family:var(--sans);font-size:11px;font-weight:500;
 letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
 border-top:1px solid var(--rule);padding-top:14px}

.s-body{display:grid;align-content:center;position:relative}

/* === typography === */
.eyebrow{font-family:var(--sans);font-size:11px;font-weight:600;
 letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.lede{font-family:var(--serif);font-weight:500;
 font-size:clamp(56px,8vw,128px);line-height:.94;letter-spacing:-.02em}
.lede em{font-style:italic;color:var(--accent)}
.statement{font-family:var(--serif);font-weight:500;
 font-size:clamp(38px,5.4vw,88px);line-height:1.02;letter-spacing:-.018em;max-width:22ch}
.statement em{font-style:italic;color:var(--accent)}
.statement-cn{font-family:var(--serifCN);font-weight:500;
 font-size:clamp(34px,4.8vw,76px);line-height:1.16;max-width:22ch;color:var(--ink)}
.body-text{font-family:var(--sans);font-size:clamp(15px,1.2vw,17px);
 line-height:1.62;color:var(--ink2);max-width:58ch;font-weight:400}
.body-text + .body-text{margin-top:.85em}
.body-text em{font-style:italic;color:var(--accent);font-family:var(--serif);
 font-size:1.02em;font-weight:500}
.tiny{font-family:var(--sans);font-size:11px;font-weight:600;
 letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
.en-quote{font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:clamp(18px,1.8vw,26px);line-height:1.46;color:var(--mute);max-width:46ch}
.en-quote::before{content:"\201C "}.en-quote::after{content:" \201D"}

/* === primitives === */
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,64px)}
.row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,56px)}
.row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2vw,40px)}
.vline{border-left:1px solid var(--rule);padding-left:clamp(18px,2vw,32px)}
.hairline{border-top:1px solid var(--rule)}

/* === video slot === */
.video-slot{position:relative;width:100%;aspect-ratio:16/9;background:var(--bg2);
 display:grid;place-items:center;overflow:hidden;border:1px solid var(--rule)}
.video-slot video{width:100%;height:100%;object-fit:cover}

/* === cavalry canvas layer === */
.cavalry{position:absolute;inset:0;pointer-events:none}

/* === live demo iframe slot === */
.demo-frame{position:relative;width:100%;aspect-ratio:16/9;background:var(--bg2);
 border:1px solid var(--rule);overflow:hidden;display:flex;flex-direction:column;
 box-shadow:0 22px 44px rgba(106,117,137,.08)}
.demo-frame iframe{width:100%;height:100%;border:0;flex:1;display:block;background:var(--bg2)}
/* When demo-frame hosts a <video>, fit the entire video inside the frame
   (no cropping) — videos rarely match a strict 16:9 aspect-ratio. */
.demo-frame:has(video){aspect-ratio:auto}
.demo-frame video{width:100%;height:auto;display:block;background:#0d0c0a;object-fit:contain}
.demo-frame .demo-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;
 padding:9px 14px;display:flex;justify-content:space-between;align-items:center;
 background:linear-gradient(180deg,transparent,rgba(25,29,36,.06));color:var(--ink);
 font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
 pointer-events:none}
.demo-frame .demo-tag{color:var(--accent);font-weight:700;letter-spacing:.22em}
.demo-frame::before{content:"";position:absolute;top:0;left:0;width:34px;height:34px;
 border-left:1px solid var(--ruleS);border-top:1px solid var(--ruleS);z-index:2;pointer-events:none}
.demo-frame::after{content:"";position:absolute;bottom:36px;right:0;width:34px;height:34px;
 border-right:1px solid var(--ruleS);border-bottom:1px solid var(--ruleS);z-index:2;pointer-events:none}

/* ================================================================
   per-slide
   ================================================================ */

/* ---- S01 cover · Editorial poster · giant serif + meta column ---- */
.s01 .s-foot{display:none}
.s01 .s-body{grid-template-rows:1fr;gap:0;align-content:stretch;padding:0;justify-items:stretch;position:relative}
.s01 .cover-stage{position:relative;width:100%;height:100%;
 display:grid;grid-template-columns:1.35fr .8fr;
 column-gap:clamp(32px,5vw,96px);
 align-items:center;
 padding:clamp(40px,6vh,96px) clamp(8px,1vw,16px) clamp(60px,10vh,140px);
 min-height:0}

/* left · giant serif title (CN + italic EN) */
.s01 .cov-title-wrap{grid-column:1;align-self:center;min-width:0}
.s01 .title{font-family:var(--serif);font-weight:600;
 font-size:clamp(60px,7.8vw,136px);line-height:.92;letter-spacing:-.022em;
 color:var(--ink);margin:0;display:block}
.s01 .title .cn{font-family:var(--serifCN);font-weight:600;display:block;
 font-size:1.1em;white-space:nowrap;
 letter-spacing:.005em;color:var(--ink)}
.s01 .title em{font-style:italic;display:block;font-weight:500;
 color:var(--mute);margin-top:.22em;font-size:.46em;
 letter-spacing:-.008em;line-height:1.08}

/* right · editorial meta column */
.s01 .meta{grid-column:2;align-self:center;
 display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:6px;
 padding-bottom:0}
.s01 .meta .line1{font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:clamp(20px,1.8vw,28px);color:var(--ink);line-height:1.18;margin-bottom:4px}
.s01 .meta .tiny{font-family:var(--sans);font-size:11px;font-weight:500;
 letter-spacing:.18em;text-transform:uppercase;color:var(--ink);opacity:.82;line-height:1.4}
.s01 .meta .cover-quote{font-family:var(--serif);font-style:italic;font-weight:400;
 font-size:clamp(13px,1.05vw,16px);letter-spacing:0;text-transform:none;
 color:var(--mute);opacity:1;line-height:1.5;margin-top:10px;
 max-width:32ch}
.s01 .meta .cover-quote em{font-style:italic;color:var(--ink2)}

/* left-top · stagger dot grid (Cavalry signature) */
.s01 .cov-canvas{position:absolute;top:clamp(24px,4vh,56px);left:clamp(16px,2.4vw,40px);
 width:clamp(180px,18vw,260px);height:clamp(180px,18vw,260px);
 opacity:.92;pointer-events:none;z-index:1}

/* sunset orb behind cover (Airlight signature · pastel morning) */
.s01 .cover-stage::after{content:"";position:absolute;top:-12%;right:-22%;z-index:-1;
 width:clamp(560px,72vw,1080px);height:clamp(560px,72vw,1080px);border-radius:50%;
 filter:blur(140px);opacity:.48;pointer-events:none;
 background:radial-gradient(circle at 28% 34%, rgba(255,214,165,.58), rgba(255,158,128,.42) 22%, rgba(255,107,107,.28) 44%, rgba(189,178,255,.26) 64%, rgba(160,196,255,.30) 82%, transparent 100%);
 transform:translate3d(calc(var(--glow-shift-x) * .26), calc(var(--glow-shift-y) * .18), 0)}

@media (max-width:900px){
 .s01 .cover-stage{grid-template-columns:1fr;align-items:start;gap:32px}
 .s01 .meta{align-items:flex-start;text-align:left}
 .s01 .cov-canvas{position:relative;top:auto;left:auto;width:160px;height:160px}
}

/* ---- S02 timeline (5 stages + video wall) ---- */
.s02 .s-body{display:grid;grid-template-columns:1fr;align-content:center;justify-items:stretch;gap:18px}
.s02 .tl{position:relative;display:grid;grid-template-columns:repeat(7,1fr);align-items:start;
 width:100%;padding-top:60px;padding-bottom:20px;margin-top:10px}
.s02 .tl-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.s02 .tp{position:relative;padding:0 8px;text-align:center;z-index:2;
 --pulse:0;
 --node-color:217,115,67;
 --text-color:25,29,36;
 --halo-color:217,115,67;
 --node-fill:transparent;
 transform:translateY(calc(var(--pulse) * -2px));
 transition:transform .12s ease-out}
.s02 .tp::before{content:"";position:absolute;top:-6px;left:50%;
 transform:translateX(-50%) scale(calc(1 + var(--pulse) * 0.85));
 width:10px;height:10px;
 background:var(--node-fill);
 border:1.5px solid rgb(var(--node-color));
 border-radius:50%;
 transition:background .35s ease, border-color .35s ease, box-shadow .25s ease;
 box-shadow:0 0 calc(var(--pulse) * 18px) calc(var(--pulse) * 4px) rgba(var(--halo-color),calc(var(--pulse) * 0.55))}
.s02 .tp.lit{--node-fill:rgb(var(--node-color));--halo-color:var(--node-color)}
.s02 .tp.hi{--node-color:217,115,67;--node-fill:rgb(217,115,67);--halo-color:217,115,67}
.s02 .tp .dt{font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:clamp(16px,1.4vw,20px);color:var(--ink);margin-top:20px;
 transform:scale(calc(1 + var(--pulse) * 0.18));
 transition:color .35s ease}
.s02 .tp.lit .dt{color:rgb(var(--text-color))}
.s02 .tp.hi .dt{color:var(--accent)}
.s02 .tp .cap{font-family:var(--sans);font-size:11px;color:var(--mute);
 line-height:1.45;margin-top:8px;letter-spacing:.02em;
 opacity:calc(.65 + var(--pulse) * 0.35)}

/* 4-stage variant */
.s02 .s-body:has(.tl-5){grid-template-rows:auto 1fr;align-content:start;gap:18px;min-height:0}
.s02 .tl.tl-5{grid-template-columns:repeat(4,1fr);padding-top:96px;padding-bottom:12px;margin-top:0}
.s02 .tl.tl-5 .dt{display:none}
.s02 .tp5{position:relative;padding:0 12px;text-align:center;z-index:2;
 --pulse:0;
 --node-color:217,115,67;
 --text-color:25,29,36;
 --halo-color:217,115,67;
 --node-fill:transparent;
 transform:translateY(calc(var(--pulse) * -2px));
 transition:transform .12s ease-out}
.s02 .tp5::before{content:"";position:absolute;top:-6px;left:50%;
 transform:translateX(-50%) scale(calc(1 + var(--pulse) * 0.85));
 width:11px;height:11px;
 background:var(--node-fill);
 border:1.5px solid rgb(var(--node-color));
 border-radius:50%;
 transition:background .35s ease, border-color .35s ease, box-shadow .25s ease;
 box-shadow:0 0 calc(var(--pulse) * 18px) calc(var(--pulse) * 4px) rgba(var(--halo-color),calc(var(--pulse) * 0.55))}
.s02 .tp5.lit{--node-fill:rgb(var(--node-color));--halo-color:var(--node-color)}
.s02 .tp5.hi{--node-color:217,115,67;--node-fill:rgb(217,115,67);--halo-color:217,115,67}
.s02 .tp5 .dt{font-family:var(--mono);font-size:10.5px;
 letter-spacing:.18em;text-transform:uppercase;color:var(--mute);margin-top:18px}
.s02 .tp5.lit .dt{color:rgb(var(--text-color))}
.s02 .tp5.hi .dt{color:var(--accent)}
.s02 .tp5 .num{font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:clamp(28px,2.6vw,42px);line-height:1;color:var(--ink);
 position:absolute;left:0;right:0;bottom:calc(100% + 20px);text-align:center;
 transform:scale(calc(1 + var(--pulse) * 0.16));
 transform-origin:50% 100%;
 transition:transform .35s ease,color .35s ease}
.s02 .tp5.lit .num{color:rgb(var(--text-color))}
.s02 .tp5 .cap{font-family:var(--serifCN);font-weight:500;
 font-size:clamp(13px,1.15vw,16px);line-height:1.3;color:var(--ink);margin-top:24px;
 letter-spacing:.005em;opacity:calc(.75 + var(--pulse) * 0.25)}
.s02 .tp5 .ex{display:none}

/* stage video wall */
.s02 .stage-wall{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
 gap:18px;min-height:0;padding-top:10px;width:100%}
.s02 .stage-narrative{display:none}
.s02 .tl.tl-hidden{visibility:hidden;pointer-events:none;height:0;padding:0;margin:0;overflow:hidden}
.s02 .s-body:has(.tl-hidden){grid-template-rows:1fr;padding-top:0}

/* Stage 01 archive layout */
.s02 .stage-wall.with-narrative{
 display:grid;grid-template-columns:1.25fr 1fr;column-gap:clamp(60px,9vw,160px);
 align-items:center;justify-items:stretch;
 width:100%;max-width:min(96vw,1640px);margin:0 auto;padding:0 clamp(20px,3vw,40px);min-height:0}
.s02 .stage-wall.with-narrative .stage-narrative{
 display:flex;flex-direction:column;gap:14px;max-width:600px;width:100%;justify-self:end}
.s02 .stage-wall.with-narrative .stage-grid{
 position:relative;height:min(70vh,760px);aspect-ratio:3/4;max-width:none;width:auto;
 background:linear-gradient(180deg, rgba(184,227,255,.32), rgba(248,236,173,.22));
 border:1px solid var(--rule);
 padding:clamp(28px,3.4vw,56px);
 display:flex;align-items:center;justify-content:center;justify-self:start;margin:0;
 box-shadow:0 22px 44px rgba(106,117,137,.10)}
.s02 .stage-wall.with-narrative .stage-grid .sg-cell{height:100%;width:auto;max-width:none}
.s02 .stage-wall.with-narrative .stage-grid .sg-frame{
 aspect-ratio:9/19.5;height:100%;width:auto;flex:0 0 auto;border-radius:8px}
.s02 .stage-wall.with-narrative .stage-grid .sg-tag{display:none}

/* Archive narrative type */
.s02 .stage-narrative .sn-tag{font-family:var(--mono);font-size:10px;letter-spacing:.22em;
 text-transform:uppercase;color:var(--faint);font-weight:500;margin-bottom:4px}
.s02 .stage-narrative .sn-cn{font-family:var(--serifCN);font-weight:500;
 font-size:clamp(28px,3.4vw,52px);line-height:1.22;color:var(--ink);margin:0;letter-spacing:-.005em}
.s02 .stage-narrative .sn-cn em{font-family:var(--serif);font-style:italic;
 color:var(--accent);font-weight:500}
.s02 .stage-narrative .sn-en{font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:clamp(14px,1.2vw,18px);color:var(--mute);margin:0;line-height:1.5}
.s02 .stage-narrative .sn-rule{height:1px;background:var(--rule);margin:6px 0}
.s02 .stage-narrative .sn-meta{list-style:none;padding:0;margin:0;
 display:flex;flex-direction:column;gap:0;max-width:560px}
.s02 .stage-narrative .sn-meta li{display:grid;grid-template-columns:auto 1fr;gap:14px;
 padding:9px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.s02 .stage-narrative .sn-meta li:last-child{border-bottom:none}
.s02 .stage-narrative .sn-meta .k{font-family:var(--mono);font-size:10px;
 letter-spacing:.18em;text-transform:uppercase;color:var(--faint);font-weight:500;min-width:14ch}
.s02 .stage-narrative .sn-meta .v{font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:clamp(15px,1.3vw,20px);color:var(--ink);text-align:right;justify-self:end}
.s02 .stage-narrative .sn-foot{font-family:var(--sans);font-size:13px;line-height:1.7;
 color:var(--ink);opacity:.78;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--rule)}

.s02 .stage-grid{display:flex;justify-content:center;align-items:flex-start;gap:32px;
 height:clamp(300px,52vh,560px);width:100%;max-width:100%}
.s02 .stage-grid .sg-cell{position:relative;height:100%;display:flex;
 flex-direction:column;align-items:center;gap:14px;min-width:0}
.s02 .stage-grid .sg-frame{position:relative;flex:1 1 auto;aspect-ratio:9/19.5;
 background:var(--bg2);border-radius:6px;overflow:hidden;
 box-shadow:0 1px 0 rgba(25,29,36,.04),
            0 14px 36px -12px rgba(106,117,137,.16),
            0 4px 10px -4px rgba(106,117,137,.10);
 transition:transform .35s ease, box-shadow .35s ease}
.s02 .stage-grid .sg-frame::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
 box-shadow:inset 0 0 0 1px rgba(25,29,36,.10), inset 0 0 0 2px rgba(255,255,255,.5)}
.s02 .stage-grid .sg-frame video{width:100%;height:100%;object-fit:cover;
 object-position:top center;display:block;background:var(--bg2)}
.s02 .stage-grid .sg-tag{display:flex;flex-direction:column;align-items:center;
 gap:4px;padding:0 2px;min-height:34px;flex:0 0 auto}
.s02 .stage-grid .sg-slug{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
 color:var(--faint);text-transform:uppercase;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s02 .stage-grid .sg-label{font-family:var(--serifCN);font-weight:500;
 font-size:14px;color:var(--ink);letter-spacing:.01em;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s02 .stage-grid[data-count="0"]{display:none}
.s02 .stage-grid[data-count="1"]{justify-content:center;max-width:300px;margin:0 auto}
.s02 .stage-grid[data-count="2"]{max-width:640px;margin:0 auto;gap:36px}
.s02 .stage-grid[data-count="3"]{max-width:920px;margin:0 auto;gap:32px}
.s02 .stage-grid[data-count="4"]{max-width:1180px;margin:0 auto;gap:24px}
.s02 .stage-grid[data-count="5"]{max-width:1380px;margin:0 auto;gap:18px}

/* ============================================================
   S05 · Two Observations → One Conclusion
   Editorial spread · type-driven · single accent moment
   ============================================================ */
.s05 .s-body{display:block;padding:0}

.s05 .obs-spread{
 height:100%;width:100%;
 display:grid;grid-template-rows:1fr;
 padding:clamp(28px,3vw,48px) clamp(40px,4.4vw,84px) clamp(28px,3vw,48px);
 gap:clamp(28px,3.6vh,52px)}

/* Header — title + supporting line */
.s05 .obs-head{max-width:none}
.s05 .obs-title{
 font-family:var(--serifCN);font-weight:500;
 font-size:clamp(32px,3.6vw,54px);line-height:1.08;letter-spacing:-.012em;
 color:var(--ink);margin:0;white-space:nowrap}
.s05 .obs-title em{font-style:normal;font-weight:600;color:var(--ink)}
.s05 .obs-title .num{font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:1.6em;line-height:0;vertical-align:-.05em;
 color:var(--accent);margin:0 .12em;letter-spacing:0}
.s05 .obs-sub{
 font-family:var(--serif);font-style:italic;font-weight:400;
 font-size:clamp(15px,1.3vw,20px);line-height:1.4;color:var(--mute);
 margin:clamp(8px,1vh,14px) 0 0 0;letter-spacing:.01em}

/* Body — two columns: premise (left, 1.05fr) · conclusion (right, .95fr) */
.s05 .obs-body{
 display:grid;
 grid-template-columns:1.05fr .95fr;
 gap:clamp(40px,5vw,84px);
 align-items:stretch}

/* ---------- Left column · premise (three stacked observations) ---------- */
.s05 .obs-premise{
 display:flex;flex-direction:column;
 padding-top:0}
.s05 .obs-item{
 padding:clamp(14px,2vh,22px) 0;
 display:flex;flex-direction:column;
 opacity:0;transform:translateY(10px);
 transition:opacity 520ms cubic-bezier(.4,0,.2,1),transform 520ms cubic-bezier(.4,0,.2,1)}
.s05 .obs-item:first-of-type{padding-top:0}
.s05 .obs-item + .obs-item{border-top:1px solid var(--rule)}

/* Tag row · 01 — The Tool */
.s05 .obs-tag{
 display:flex;align-items:baseline;gap:14px;
 margin-bottom:clamp(10px,1.4vh,18px);
 font-family:var(--sans);font-size:11px;font-weight:600;
 letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.s05 .obs-tag-n{
 font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:clamp(20px,1.6vw,26px);letter-spacing:0;text-transform:none;
 color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.s05 .obs-tag-n::after{content:".";color:var(--ink)}
.s05 .obs-tag-l{color:var(--mute)}

.s05 .obs-h{
 font-family:var(--serifCN);font-weight:500;
 font-size:clamp(22px,2.4vw,34px);line-height:1.24;letter-spacing:-.006em;
 color:var(--ink);margin:0 0 clamp(8px,1.2vh,16px) 0}
.s05 .obs-h em{font-style:normal;font-weight:600;color:var(--ink)}

.s05 .obs-p{
 font-family:var(--serifCN);font-weight:400;
 font-size:clamp(14px,1.05vw,17px);line-height:1.6;color:var(--mute);
 margin:0;max-width:34ch}
.s05 .obs-p em{font-style:normal;font-weight:500;color:var(--ink)}

/* ---------- Right column · conclusion ---------- */
.s05 .obs-conclude{
 position:relative;
 display:flex;flex-direction:column;justify-content:center;
 padding:0 0 0 clamp(20px,2.4vw,40px);
 margin-top:-6vh;
 border-left:1px solid var(--rule);
 opacity:0;transform:translateY(10px);
 transition:opacity 520ms cubic-bezier(.4,0,.2,1),transform 520ms cubic-bezier(.4,0,.2,1)}
.s05 .obs-glyph{display:none}
.s05 .obs-c-h{
 font-family:var(--serifCN);font-weight:500;
 font-size:clamp(28px,3vw,46px);line-height:1.18;letter-spacing:-.008em;
 color:var(--ink);margin:0;max-width:none}
.s05 .obs-c-h em{font-style:normal;font-weight:600;color:var(--accent);white-space:nowrap}
.s05 .obs-c-h em:last-of-type{color:var(--ink)}
.s05 .obs-c-rule{
 width:48px;height:1px;background:var(--accent);
 margin:clamp(20px,2.4vh,32px) 0 clamp(10px,1.2vh,14px) 0;
 opacity:.9}
.s05 .obs-c-tag{
 font-family:var(--sans);font-size:11px;font-weight:600;
 letter-spacing:.22em;text-transform:uppercase;color:var(--mute);
 margin:0}

/* Bottom caption — column footer */
.s05 .obs-caption{
 font-family:var(--serif);font-style:italic;font-weight:400;
 font-size:clamp(11px,.85vw,13px);letter-spacing:.04em;color:var(--mute);
 padding-top:clamp(14px,2vh,22px);margin-top:auto;
 border-top:1px dotted rgba(60,40,20,.18)}
.s05 .obs-conclude .obs-caption{border-top:1px dotted rgba(60,40,20,.18)}

/* Cascade in once the slide becomes active */
.s05.active .obs-item[data-step="1"]{opacity:1;transform:none;transition-delay:160ms}
.s05.active .obs-item[data-step="2"]{opacity:1;transform:none;transition-delay:520ms}
.s05.active .obs-item[data-step="3"]{opacity:1;transform:none;transition-delay:880ms}
.s05.active .obs-conclude{opacity:1;transform:none;transition-delay:1180ms}

/* Roadmap variant (3-observations layout) — calmer, no "seed lift" treatment */
.s05 .obs-roadmap{opacity:0;transform:translateY(10px);
 transition:opacity 520ms cubic-bezier(.4,0,.2,1),transform 520ms cubic-bezier(.4,0,.2,1)}

/* When jumping S05 → S08, lift the conclusion as the "seed" */
.s05.leave-to-zoom .obs-conclude{
 transform:scale(1.04) translateY(-4px);opacity:.4;
 transition:opacity 420ms ease,transform 420ms cubic-bezier(.4,0,.2,1)}
.s05.leave-to-zoom .obs-head,
.s05.leave-to-zoom .obs-premise{
 opacity:0;transition:opacity 280ms ease}

@media (prefers-reduced-motion: reduce){
 .s05.active .obs-item,
 .s05.active .obs-conclude{opacity:1;transform:none;transition:none}
}

/* ---- S08 duo · "Taste + Engineering" ---- */
.s08 .s-body{display:grid;place-items:center;text-align:center}
.s08 .duo{font-family:var(--serif);font-weight:500;
 font-size:clamp(60px,9.6vw,156px);line-height:.98;letter-spacing:-.024em;color:var(--ink);
 max-width:96vw;white-space:nowrap}
.s08 .duo .plus{font-style:italic;color:var(--accent);padding:0 .12em;font-weight:500}
.s08 .cn{font-family:var(--serifCN);font-size:clamp(20px,2.3vw,30px);
 color:var(--mute);margin-top:24px;letter-spacing:.04em}

/* Zoom-bridge from S05 seed → S08 hero.
   The seed sits in the rightmost column of S05; we mimic that origin (right ~83%),
   start small + faded, then ease into place. The CN line + en-quote follow softly. */
.s08.enter-from-seed .duo{
 transform-origin:83% 50%;
 animation:s08DuoGrow 820ms cubic-bezier(.22,.7,.18,1) 60ms both}
.s08.enter-from-seed .cn{
 opacity:0;animation:s08FadeUp 520ms cubic-bezier(.4,0,.2,1) 720ms forwards}
.s08.enter-from-seed .en-quote{
 opacity:0;animation:s08FadeUp 520ms cubic-bezier(.4,0,.2,1) 880ms forwards}
.s08.enter-from-seed .tiny{
 opacity:0;animation:s08FadeUp 480ms cubic-bezier(.4,0,.2,1) 640ms forwards}

@keyframes s08DuoGrow{
 0%   { transform:translateY(-2vh) scale(.22); opacity:0; letter-spacing:-.04em; filter:blur(2px) }
 35%  { opacity:.85; filter:blur(0) }
 100% { transform:none; opacity:1; letter-spacing:-.024em; filter:none }
}
@keyframes s08FadeUp{
 from { opacity:0; transform:translateY(10px) }
 to   { opacity:1; transform:none }
}
@media (prefers-reduced-motion: reduce){
 .s08.enter-from-seed .duo,
 .s08.enter-from-seed .cn,
 .s08.enter-from-seed .en-quote,
 .s08.enter-from-seed .tiny{animation:none;opacity:1;transform:none;filter:none}
}

/* ---- Observation statement screens · shared layout ----
   Used by s5a (Observation 01) · s10c0 (Observation 02) · s09 (Observation 03).
   Same big-duo + CN sub + EN quote rhythm; each slide just plugs in its own
   strings. To opt in, give the slide's body root the class .obs-statement. */
.obs-statement{
 width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
 text-align:center;gap:0}
.obs-statement .tiny{
 color:var(--mute);letter-spacing:.22em;text-transform:uppercase;
 font-size:11px;font-weight:600;margin-bottom:22px}
.obs-statement .duo{
 font-family:var(--serif);font-weight:600;
 font-size:clamp(54px,8vw,128px);line-height:1.02;letter-spacing:-.02em;color:var(--ink);
 max-width:96vw;display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;
 gap:clamp(12px,1.4vw,28px)}
.obs-statement .duo.zt-spectrum{font-family:var(--serif);white-space:nowrap}
.obs-statement .duo em{font-style:italic;color:var(--accent);font-weight:inherit}
.obs-statement .cn em{font-style:italic;color:var(--accent);font-weight:500}
/* "Arrow" variant for s9 (0→1 / 1→100):
   numbers get a size bump and the arrow becomes an SVG hairline so it stays
   tasteful at any font weight. */
.obs-statement .duo.zt-arrow{font-family:var(--serif);white-space:nowrap;
 align-items:baseline;gap:clamp(20px,2vw,40px)}
.obs-statement .duo.zt-arrow .zt-num{font-size:1.18em;line-height:1;letter-spacing:-.01em}
.obs-statement .duo.zt-arrow .zt-svg{
 display:inline-block;vertical-align:.06em;
 width:clamp(38px,3.6vw,72px);height:auto;
 margin:0 clamp(8px,.8vw,16px);
 color:var(--accent);opacity:.92}
.obs-statement .duo.zt-arrow .zt-taste,
.obs-statement .duo.zt-arrow .zt-eng{display:inline-flex;align-items:baseline;gap:0;flex-direction:row;flex-wrap:wrap;justify-content:center}
.obs-statement .duo.zt-arrow .zt-sub{flex:0 0 100%;text-align:center}
.obs-statement .duo .plus{font-style:italic;color:var(--accent);padding:0 .12em;font-weight:600}
.obs-statement .duo .zt-taste,
.obs-statement .duo .zt-eng{display:inline-flex;flex-direction:column;align-items:center;gap:.18em}
.obs-statement .duo .zt-sub{
 font-family:var(--serifCN);font-style:normal;font-weight:500;
 font-size:clamp(15px,1.3vw,22px);letter-spacing:.04em;color:var(--mute);
 line-height:1.3;margin-top:.1em}
.obs-statement .duo .zt-taste .zt-sub{color:var(--accent)}
.obs-statement .duo .zt-eng   .zt-sub{color:var(--ink)}
/* "Subject on top" variant: small label sits above the big statement,
   so left/right read as "subject → predicate" rather than "predicate → tag". */
.obs-statement .duo.sub-on-top .zt-sub{
 margin-top:0;margin-bottom:.35em;
 font-style:italic;font-family:var(--serif);
 font-size:clamp(13px,1.05vw,18px);letter-spacing:.06em}
.obs-statement .cn{
 font-family:var(--serifCN);font-size:clamp(20px,2.3vw,30px);
 color:var(--mute);margin-top:24px;letter-spacing:.04em}
.obs-statement .en-quote{max-width:64ch;margin-top:34px}

/* Lit dot grid — used by s09 to echo "lit up the maps" with a tiny constellation
   of dots: most are muted grey (capability cells not yet built), a sparse few
   are accent-orange + softly pulsing (already shipped). Data-driven via
   data-cols / data-rows / data-lit on the <div class="lit-map"> element. */
.lit-map{
 display:grid;
 width:clamp(620px,72vw,1020px);
 gap:clamp(9px,1vw,16px);
 justify-self:center;
 margin-top:clamp(40px,5vh,72px);
}
.lit-map span{
 width:5px;height:5px;border-radius:50%;
 background:rgba(72,78,90,.22);
 justify-self:center;align-self:center}
/* Default state for lit dots: muted grey, so the map starts as a blank
   capability grid. When the slide becomes active, .lit-running is added
   on the .lit-map element and each lit dot animates in turn (--lit-i is
   set by the renderer to that dot's sequence number). */
.lit-map span.lit{
 background:rgba(72,78,90,.22);
 box-shadow:none}
/* Wave-based stagger: each lit dot's delay = base + wave*620ms + jitter.
   Dots in the same wave (--lit-b) light up together within a ~350ms window;
   waves are separated by ~620ms so the map reads as "a cluster of lights →
   pause → another cluster → pause", not a left-to-right sweep. */
.lit-map.lit-running span.lit{
 animation:
  litTurnOn .55s cubic-bezier(.3,.7,.4,1) forwards calc(var(--lit-b,0) * 620ms + var(--lit-j,0) * 35ms + 250ms),
  litPulse  2.6s ease-in-out infinite           calc(var(--lit-b,0) * 620ms + var(--lit-j,0) * 35ms + 1000ms);
}
@keyframes litTurnOn{
 0%   {background:rgba(72,78,90,.22);box-shadow:0 0 0 rgba(217,115,67,0);transform:scale(1)}
 55%  {background:var(--accent);     box-shadow:0 0 8px rgba(217,115,67,.55);transform:scale(1.3)}
 100% {background:var(--accent);     box-shadow:0 0 5px rgba(217,115,67,.35);transform:scale(1)}
}
@keyframes litPulse{
 0%,100%{opacity:.82;transform:scale(1)}
 50%    {opacity:1;  transform:scale(1.18)}
}
@media (prefers-reduced-motion: reduce){
 .lit-map.lit-running span.lit{
  animation:none;background:var(--accent);box-shadow:0 0 8px rgba(217,115,67,.45)}
}
@media (max-width:900px){
 .obs-statement .duo{flex-wrap:wrap;white-space:normal}
}

/* Slides that host an obs-statement need a centred s-body. */
.s5a .s-body,
.s10a .s-body,
.s10c0 .s-body,
.s16a .s-body,
.s09 .s-body{display:grid;place-items:center;text-align:center}

/* ---- S05A · "Two sides of one observation" twofold variant ----
   Two statements placed SIDE-BY-SIDE, separated by a vertical hairline rule —
   the layout itself echoes "two sides of one shift". Each column keeps the duo
   typographic system but scaled down so both columns can breathe in one viewport.
   The eyebrow + summary cn stay on top / bottom. Falls back to stacked rows on
   narrow viewports. */
.obs-statement.obs-twofold{gap:0;width:100%}
.obs-statement.obs-twofold .duo{
 font-size:clamp(30px,4.4vw,72px);line-height:1.06;letter-spacing:-.015em;
 white-space:normal}
.obs-statement.obs-twofold .duo em{
 font-style:italic;color:var(--accent);font-weight:600}
.obs-twofold-cols{
 display:grid;grid-template-columns:1fr auto 1fr;
 align-items:start;width:100%;
 gap:clamp(24px,3.6vw,72px);
 margin-top:clamp(12px,1.6vw,24px)}
.obs-twofold-row{position:relative;display:flex;flex-direction:column;
 align-items:center;justify-content:flex-start;gap:14px;
 padding:clamp(8px,1vw,16px) 0;text-align:center}
.obs-twofold-ix{position:static;display:block;transform:none;
 font-family:var(--serif);font-style:italic;
 font-weight:500;font-size:clamp(13px,1.05vw,18px);letter-spacing:.18em;
 color:var(--mute);text-transform:uppercase;margin-bottom:clamp(4px,.6vw,10px)}
.obs-twofold-row .duo{margin-top:clamp(6px,1vw,16px)}
.obs-twofold-en{font-family:var(--serif);font-style:italic;
 font-size:clamp(14px,1.15vw,20px);color:var(--mute);
 letter-spacing:.01em;max-width:38ch;line-height:1.5;margin:clamp(14px,1.6vw,24px) auto 0}
.obs-twofold-en em{font-style:italic;color:var(--ink);font-weight:500}
.obs-twofold-rule{width:1px;height:auto;align-self:stretch;
 min-height:clamp(180px,28vh,360px);
 background:linear-gradient(180deg,transparent,var(--rule) 18%,var(--rule) 82%,transparent);
 margin:0;justify-self:center}
.obs-statement.obs-twofold .cn{margin-top:clamp(28px,3vw,44px)}
@media (max-width:900px){
 .obs-twofold-cols{grid-template-columns:1fr;gap:clamp(20px,5vw,36px)}
 .obs-twofold-rule{width:clamp(120px,40vw,260px);height:1px;min-height:0;
  background:linear-gradient(90deg,transparent,var(--rule) 20%,var(--rule) 80%,transparent)}
 .obs-statement.obs-twofold .duo{font-size:clamp(28px,7vw,48px)}
}

/* ---- S10 / S10C tools grid (shared 2×3 card system) ---- */
.s10 .s-body{grid-template-rows:auto 1fr;gap:20px}
/* S10C inherits S18 two-column resonance layout: left = 4 trend cards, right = title block */
.s10c .s-body{grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,72px);align-items:center}
.s10 .tools{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);
 gap:1px;background:var(--rule);border:1px solid var(--rule);height:100%}
.s10 .tc{background:var(--bg2);padding:22px;display:flex;flex-direction:column;
 justify-content:space-between;position:relative;overflow:hidden;
 transition:background 220ms ease}
.s10 .tc:hover{background:var(--bg3)}
.s10 .tc .n{font-family:var(--serif);font-weight:500;
 font-size:clamp(20px,1.9vw,28px);letter-spacing:-.008em;color:var(--ink)}
.s10 .tc .d{font-family:var(--sans);font-size:12px;color:var(--mute);line-height:1.55;max-width:28ch}
.s10 .tc .t{font-family:var(--sans);font-size:10px;font-weight:600;
 letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.s10 .tc .vis{position:absolute;right:-16px;bottom:-16px;width:120px;height:120px;
 opacity:.20;color:var(--ink)}
.s10 .tc .vis svg{width:100%;height:100%}
.s10 .statement-cn em, .s10c .statement-cn em{font-style:italic;color:var(--accent);font-weight:500}

/* ---- S10B · Frame · Capture tool spotlight (mirrors S11 hero structure) ---- */
.s10b .s-body, .s10b1 .s-body, .s10b2 .s-body{display:block}
.s10b .fc-stage, .s10b1 .fc-stage, .s10b2 .fc-stage{
 width:100%;height:100%;
 display:grid;
 grid-template-columns:.78fr 1.35fr;
 gap:clamp(28px,3.4vw,60px);
 align-items:center}

/* Left · text column — same typographic system as S11 .brand */
.s10b .fc-text, .s10b1 .fc-text, .s10b2 .fc-text{max-width:none}
.s10b .fc-brand, .s10b1 .fc-brand, .s10b2 .fc-brand{font-family:var(--serif);font-weight:500;
 font-size:clamp(60px,8vw,128px);line-height:.92;letter-spacing:-.02em;color:var(--ink);
 margin:0}
.s10b .fc-brand em, .s10b1 .fc-brand em, .s10b2 .fc-brand em{font-style:italic;display:block;font-size:.32em;
 color:var(--mute);margin-top:.42em;font-weight:500;letter-spacing:-.005em;line-height:1.2}
.s10b .fc-brand .fc-accent, .s10b1 .fc-brand .fc-accent, .s10b2 .fc-brand .fc-accent{color:var(--accent)}
.s10b .body-text em, .s10b1 .body-text em, .s10b2 .body-text em{font-style:normal;color:var(--ink);font-weight:600}

/* Right · video card (16:9, airlight border) */
.s10b .fc-screen, .s10b2 .fc-screen{position:relative;width:100%;
 aspect-ratio:16/9;background:#0d0c0a;
 border:1px solid var(--rule);border-radius:2px;overflow:hidden;
 box-shadow:0 1px 0 rgba(0,0,0,.02), 0 24px 60px -28px rgba(60,40,20,.22)}
.s10b1 .fc-screen{position:relative;width:100%;
 aspect-ratio:16/9;background:transparent;
 border:0;border-radius:2px;overflow:hidden;
 box-shadow:none}
.s10b .fc-video, .s10b1 .fc-video, .s10b2 .fc-video{position:absolute;inset:0;width:100%;height:100%;
 object-fit:cover;display:block}
.s10b2 .fc-video{object-position:top left}
.s10b1 .fc-video{object-position:top left}
.s10b .fc-screen-meta, .s10b1 .fc-screen-meta, .s10b2 .fc-screen-meta{position:absolute;bottom:0;left:0;right:0;
 display:flex;justify-content:space-between;align-items:center;
 padding:8px 14px;
 font-family:var(--sans);font-size:10px;font-weight:600;
 letter-spacing:.22em;text-transform:uppercase;color:rgba(247,247,244,.8);
 background:linear-gradient(180deg,transparent 0%,rgba(13,12,10,.7) 100%);
 pointer-events:none}
.s10b .fc-screen-meta span:first-child, .s10b1 .fc-screen-meta span:first-child, .s10b2 .fc-screen-meta span:first-child{color:rgba(247,247,244,.86)}
.s10b .fc-screen-meta span:first-child::first-letter, .s10b1 .fc-screen-meta span:first-child::first-letter, .s10b2 .fc-screen-meta span:first-child::first-letter{color:var(--accent)}

@media (prefers-reduced-motion: reduce){
 .s10b .fc-video, .s10b1 .fc-video, .s10b2 .fc-video{animation:none}
}

/* ---- S11 / S11B / S11S Design Engine hero (shared layout) ---- */
.s11 .s-body, .s11b .s-body, .s11s .s-body{grid-template-columns:.78fr 1.35fr;gap:clamp(28px,3.4vw,60px);align-items:center}
.s11 .brand, .s11b .brand, .s11s .brand{font-family:var(--serif);font-weight:500;
 font-size:clamp(60px,8vw,128px);line-height:.92;letter-spacing:-.02em;color:var(--ink)}
.s11 .brand em, .s11b .brand em, .s11s .brand em{font-style:italic;display:block;font-size:.38em;
 color:var(--mute);margin-top:.32em;font-weight:500;letter-spacing:-.01em}
.s11 .brand .brand-accent, .s11b .brand .brand-accent, .s11s .brand .brand-accent{color:var(--accent)}

/* ---- S11S override · render SPRING WORLD at a fixed 1600x900 logical viewport,
   then scale-fit into the 16:9 demo-frame so all 6 sandboxes are visible.
   The actual scale value is set as --s11s-scale by deck.js via ResizeObserver. ---- */
.s11s .demo-frame{overflow:hidden;position:relative;--s11s-scale:1}
.s11s .demo-frame iframe{
 position:absolute; top:0; left:0;
 width:1600px; height:900px;
 transform-origin:0 0;
 transform:scale(var(--s11s-scale));
}

/* ---- S11B override · stacked layout (text on top · video full-width below) ---- */
.s11b .s-body{grid-template-columns:1fr;grid-template-rows:auto 1fr;
 gap:clamp(8px,1vh,16px);align-items:stretch;align-content:start;
 transform:translateY(18px)}
.s11b .s11b-head{display:flex;flex-direction:column;align-items:flex-start}
.s11b .brand{font-size:clamp(36px,4.4vw,68px);line-height:1.04;
 display:flex;align-items:baseline;flex-wrap:wrap;gap:.22em;
 white-space:nowrap}
.s11b .brand em{display:inline;font-size:.42em;margin-top:0;
 margin-left:.4em;letter-spacing:-.005em;line-height:1}
.s11b .body-text{max-width:none;font-size:clamp(12px,.95vw,14px)}
.s11b .s11b-stage{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
 min-height:0;width:100%;
 padding-right:clamp(40px,7vw,120px);
 padding-bottom:clamp(40px,5.5vh,80px)}
.s11b .s11b-stage .demo-frame{width:auto;max-width:100%;max-height:100%;
 display:flex;align-items:center;justify-content:center}
.s11b .s11b-stage .demo-frame video{width:auto;height:100%;max-width:100%;max-height:100%;
 object-fit:contain;display:block}

/* ---- S12 three layers ---- */
.s12 .s-body{grid-template-rows:auto 1fr;gap:20px}
.s12 .layers{display:grid;grid-template-columns:repeat(3,1fr);gap:0;align-items:start;height:100%}
.s12 .layer{padding:8px clamp(16px,2.4vw,36px);position:relative}
.s12 .layer + .layer{border-left:1px solid var(--rule)}
.s12 .layer .ix{font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:18px;color:var(--mute);margin-bottom:8px}
.s12 .layer h3{font-family:var(--serif);font-weight:500;
 font-size:clamp(24px,2.6vw,40px);line-height:1.06;margin-bottom:14px;
 letter-spacing:-.012em;color:var(--ink)}
.s12 .layer h3 em{font-style:italic;display:block;font-size:.55em;
 color:var(--mute);margin-top:.32em;letter-spacing:-.005em;font-weight:500}
.s12 .layer .num{font-family:var(--serif);font-style:italic;font-weight:500;
 color:var(--mute);font-size:clamp(72px,8vw,124px);line-height:.86;margin-bottom:10px;opacity:.72}

/* ---- S13 business map ---- */
.s13 .s-body{grid-template-columns:1fr 1fr;gap:clamp(28px,3.5vw,64px);align-items:center}
.s13 .map{position:relative;height:56vh;min-height:360px;
 border:1px solid var(--rule);overflow:hidden;background:var(--bg2)}
.s13 .node{position:absolute;transform:translate(-50%,-50%);
 font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--ink);
 padding:6px 10px;background:var(--paper);border:1px solid var(--rule);white-space:nowrap}
.s13 .node.hi{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.s13 .dot{position:absolute;width:6px;height:6px;background:var(--ink);
 transform:translate(-50%,-50%);border-radius:50%}
.s13 .dot.blue{background:var(--accent)}

/* ---- S14 Judgement · the moment ---- */
.s14 .s-body{display:grid;place-items:center;text-align:center;position:relative}
.s14 .flux{font-family:var(--serifCN);
 font-size:clamp(200px,28vw,520px);line-height:.92;letter-spacing:.015em;
 font-variation-settings:"wght" 500;will-change:font-variation-settings;color:var(--ink)}
.s14 .sub{margin-top:30px;font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:clamp(18px,1.8vw,26px);color:var(--mute)}

/* ---- S15 Quick demo ---- */
.s15 .s-body, .s10c2 .s-body, .s13b .s-body, .s11b1 .s-body{grid-template-columns:1.35fr .78fr;gap:clamp(28px,3.4vw,60px);align-items:center}
.s15 .steps, .s10c2 .steps, .s13b .steps, .s11b1 .steps{display:flex;flex-direction:column;gap:0}
.s15 .step, .s10c2 .step, .s13b .step, .s11b1 .step{display:grid;grid-template-columns:auto 1fr;gap:18px;
 padding:16px 0;border-top:1px solid var(--rule)}
.s15 .step:last-child, .s10c2 .step:last-child, .s13b .step:last-child, .s11b1 .step:last-child{border-bottom:1px solid var(--rule)}
.s15 .step .si, .s10c2 .step .si, .s13b .step .si, .s11b1 .step .si{font-family:var(--serif);font-style:italic;font-weight:500;
 color:var(--mute);font-size:20px;min-width:36px}
.s15 .step .sn, .s10c2 .step .sn, .s13b .step .sn, .s11b1 .step .sn{font-family:var(--serif);font-weight:500;
 font-size:clamp(20px,1.8vw,26px);letter-spacing:-.008em;margin-bottom:4px;color:var(--ink)}
.s15 .step .sd, .s10c2 .step .sd, .s13b .step .sd, .s11b1 .step .sd{font-family:var(--sans);font-size:12px;color:var(--mute);line-height:1.55}
/* S10C2: mirrors S15 layout — left = demo video, right = title + step list (Chinese serif) */
.s10c2 .step .sn, .s13b .step .sn, .s11b1 .step .sn{font-family:var(--serifCN)}
.s10c2 .demo-frame, .s13b .demo-frame, .s11b1 .demo-frame{max-width:88%;margin:0 auto}
.s13b .demo-frame, .s11b1 .demo-frame{max-width:100%}
.s10c2 .s-body > div:last-child, .s13b .s-body > div:last-child, .s11b1 .s-body > div:last-child{transform:translateX(-10px)}
.s10 .statement-cn em, .s10c .statement-cn em, .s10c2 .statement-cn em, .s13b .statement-cn em, .s11b1 .statement-cn em{font-style:italic;color:var(--accent);font-weight:500}
.s10 .statement-cn em, .s10c .statement-cn em, .s10c2 .statement-cn em{font-style:italic;color:var(--accent);font-weight:500}

/* ---- S16 emergence ---- */
.s16 .s-body{grid-template-columns:.78fr 1.35fr;gap:clamp(28px,3.4vw,60px);align-items:center}
.s16 .flow{position:relative;height:52vh;min-height:340px;
 border:1px solid var(--rule);background:var(--bg2)}
.s16 .flow svg{position:absolute;inset:0;width:100%;height:100%}
.s16 .flow .lbl{position:absolute;font-family:var(--sans);font-size:10px;font-weight:500;
 letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
 padding:5px 9px;background:var(--paper);border:1px solid var(--rule);
 transform:translate(-50%,-50%);white-space:nowrap}
.s16 .flow .sink{background:var(--ink);color:var(--paper);border-color:var(--ink);letter-spacing:.1em}
/* override the SVG arrow color via CSS variable swap — affect existing inline svgs is hard,
   but the marker is cobalt #2F36F1 in inline SVG; we paint a soft overlay instead */
.s16 .flow svg path{stroke:var(--accent) !important}
.s16 .flow svg defs marker path{fill:var(--accent) !important}

/* S16 · "growth" workflow — emergent / branching version */
.s16 .flow-growth{background:var(--paper);overflow:hidden}
.s16 .flow-growth .lbl{font-family:var(--serifCN);font-weight:500;
 font-size:11.5px;letter-spacing:.04em;text-transform:none;
 padding:7px 11px;background:var(--paper);
 border:1px solid var(--rule);border-radius:1px;
 box-shadow:0 1px 0 rgba(60,40,20,.02), 0 6px 14px -10px rgba(60,40,20,.18)}
.s16 .flow-growth .lbl.stage{font-size:12.5px;letter-spacing:.02em;padding:9px 14px;
 display:flex;align-items:baseline;gap:9px;
 box-shadow:0 1px 0 rgba(60,40,20,.04), 0 10px 22px -14px rgba(60,40,20,.28)}
.s16 .flow-growth .lbl.stage .ix{font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:13px;color:var(--accent);letter-spacing:0;line-height:1}
.s16 .flow-growth .lbl.sink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.s16 .flow-growth .lbl.sink .ix{color:var(--peach)}
.s16 .flow-growth .lbl.merged{padding:10px 18px;font-size:12.5px;
 background:var(--paper);border-color:rgba(217,115,67,.55);
 box-shadow:0 1px 0 rgba(60,40,20,.04), 0 14px 28px -14px rgba(217,115,67,.32)}
.s16 .flow-growth .lbl.skill{font-size:10px;letter-spacing:.04em;
 color:var(--mute);padding:5px 9px;
 background:rgba(255,255,255,.7);
 border-color:rgba(60,40,20,.08)}
.s16 .flow-growth .lbl.bud{font-family:var(--serif);font-weight:500;
 font-size:14px;line-height:1;letter-spacing:0;
 width:18px;height:18px;padding:0;
 display:flex;align-items:center;justify-content:center;
 color:var(--accent);background:var(--paper);
 border:1px dashed rgba(217,115,67,.6);border-radius:50%;
 animation:s16BudPulse 3.4s ease-in-out infinite}
.s16 .flow-growth .lbl.bud:nth-child(odd){animation-delay:-1.1s}
.s16 .flow-growth .lbl.bud:nth-child(even){animation-delay:-2.3s}

.s16 .flow-growth .flow-cap{position:absolute;left:0;right:0;bottom:12px;
 text-align:center;font-family:var(--mono);font-size:10px;
 letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
 pointer-events:none}
.s16 .flow-growth .flow-cap em{font-style:italic;color:var(--accent);
 font-family:var(--serif);text-transform:none;letter-spacing:0;
 font-size:11px;font-weight:500;margin-left:6px}

/* dashed branches breathe subtly */
.s16 .flow-growth svg .buds path{
 animation:s16BudStroke 4.2s ease-in-out infinite}

@keyframes s16BudPulse{
 0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.7}
 50%    {transform:translate(-50%,-50%) scale(1.18);opacity:1}
}
@keyframes s16BudStroke{
 0%,100%{stroke-opacity:.35}
 50%    {stroke-opacity:.72}
}
@media (prefers-reduced-motion: reduce){
 .s16 .flow-growth .lbl.bud,
 .s16 .flow-growth svg .buds path{animation:none}
}

/* ---- S17 You are here ---- */
.s17 .s-body{display:grid;place-items:center;position:relative}
.s17 .here-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.s17 .here{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.s17 .here-date{font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:clamp(96px,14vw,200px);line-height:.92;color:var(--ink);
 transform-origin:center;will-change:transform;letter-spacing:-.018em}
.s17 .here-sub{margin-top:16px;font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:clamp(15px,1.4vw,20px);color:var(--ink2)}
.s17 .here .body-text em{font-style:italic;color:var(--accent);font-weight:500}

/* ---- S18 Resonance ---- */
.s18 .s-body{grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,72px);align-items:center}
.s18 .trend-grid, .s10c .trend-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;
 background:var(--rule);border:1px solid var(--rule)}
.s18 .trend-card, .s10c .trend-card{background:var(--bg2);padding:clamp(18px,2vw,28px);
 display:flex;flex-direction:column;gap:8px;
 transition:background 220ms ease;min-height:clamp(180px,22vh,260px)}
.s18 .trend-card:hover, .s10c .trend-card:hover{background:var(--bg3)}
.s18 .trend-card-head, .s10c .trend-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px}
.s18 .trend-ix, .s10c .trend-ix{font-family:var(--serif);font-style:italic;font-weight:500;
 color:var(--mute);font-size:clamp(28px,2.6vw,40px);line-height:.9;opacity:.85}
.s18 .trend-icon, .s10c .trend-icon{width:clamp(28px,2.4vw,38px);height:clamp(28px,2.4vw,38px);
 color:var(--ink);opacity:.72}
.s18 .trend-tn, .s10c .trend-tn{font-family:var(--serif);font-weight:500;
 font-size:clamp(18px,1.6vw,24px);letter-spacing:-.008em;color:var(--ink);line-height:1.18}
.s18 .trend-brand, .s10c .trend-brand{font-family:var(--mono);font-size:10px;letter-spacing:.18em;
 color:var(--accent);font-weight:500;text-transform:uppercase}
.s18 .trend-td, .s10c .trend-td{font-family:var(--sans);font-size:12.5px;color:var(--mute);line-height:1.55;margin-top:4px}
.s18 .trend-td em, .s10c .trend-td em{font-style:italic;color:var(--ink2);font-weight:500;font-family:var(--serif)}
.s10c .trend-tn{font-family:var(--serifCN)}
.s18 .stmt{font-family:var(--serif);font-weight:500;
 font-size:clamp(42px,5.2vw,80px);line-height:1.04;letter-spacing:-.018em;color:var(--ink)}
.s18 .stmt em{font-style:italic;color:var(--accent);display:block;font-size:.34em;
 margin-top:.5em;letter-spacing:-.005em;font-weight:500}
/* S10C variant: Chinese serif heading with inline italic accent */
.s10c .stmt{font-family:var(--serifCN);font-weight:500;
 font-size:clamp(36px,4.4vw,68px);line-height:1.12;letter-spacing:-.008em;color:var(--ink);margin:0}
.s10c .stmt em{font-style:italic;color:var(--accent);display:inline;font-family:var(--serif);
 font-size:1em;font-weight:500;letter-spacing:-.005em;margin:0 .04em}
.s10c .body-text em{font-style:italic;color:var(--accent);font-weight:500;font-family:var(--serif)}

/* ---- S19 bottleneck ---- */
.s19 .s-body{display:grid;place-items:center;text-align:center}
.s19 .big{font-family:var(--serif);font-weight:500;
 font-size:clamp(56px,8vw,128px);line-height:1;letter-spacing:-.018em;max-width:16ch;color:var(--ink)}
.s19 .big em{font-style:italic;color:var(--accent)}
.s19 .cn{font-family:var(--serifCN);margin-top:26px;
 font-size:clamp(18px,2vw,28px);color:var(--mute);letter-spacing:.02em}

/* ---- S20 four capabilities ---- */
.s20 .s-body{grid-template-rows:auto 1fr auto;gap:22px}
.s20 .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;height:100%;align-items:stretch}
.s20 .cell{padding:clamp(20px,2.4vw,36px);display:grid;
 grid-template-rows:auto 1fr auto auto;row-gap:clamp(12px,1.6vh,22px);
 position:relative}
.s20 .cell + .cell{border-left:1px solid var(--rule)}
.s20 .cell .ix{font-family:var(--serif);font-style:italic;font-weight:500;
 color:var(--mute);font-size:20px}
.s20 .cell .n{font-family:var(--serif);font-weight:500;
 font-size:clamp(40px,4.2vw,64px);line-height:1;letter-spacing:-.014em;color:var(--ink);
 align-self:start}
.s20 .cell .n em{font-style:italic;display:block;font-size:.42em;color:var(--accent);
 margin-top:.4em;font-weight:500;letter-spacing:-.005em}
.s20 .cell .d{font-family:var(--sans);font-size:12px;color:var(--mute);line-height:1.55;align-self:end}

/* focused cells — 当前重点：审美 × 工程 并行（去掉顶部横条与背景渐变，仅以橙色 ix + 底部标签区分） */
.s20 .cell.focus .ix{color:var(--accent);opacity:.85}
.s20 .cell .cell-tag{display:none}
.s20 .cell.focus .cell-tag{display:inline-block;
 font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.22em;
 text-transform:uppercase;color:var(--accent);
 padding:4px 8px;border:1px solid rgba(217,115,67,.5);justify-self:start}

/* bottom caption — 一句扣题 (国际化对仗版) */
.s20 .grid4-cap{text-align:center;padding:22px 0 4px;border-top:1px solid var(--rule);
 display:flex;flex-direction:column;align-items:center;gap:8px}
.s20 .grid4-cap .grid4-cap-en{font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:clamp(18px,1.7vw,26px);line-height:1.2;color:var(--ink);letter-spacing:-.005em}
.s20 .grid4-cap .grid4-cap-en em{font-style:italic;color:var(--accent)}
.s20 .grid4-cap .grid4-cap-quote{font-family:var(--serif);font-style:italic;font-weight:400;
 font-size:clamp(12px,1vw,14.5px);line-height:1.5;color:var(--mute);
 letter-spacing:.002em;max-width:60ch}
.s20 .grid4-cap .grid4-cap-quote em{font-style:italic;color:var(--accent);font-weight:500}
.s20 .grid4-cap .grid4-cap-cn{font-family:var(--serifCN);font-weight:500;
 font-size:clamp(13px,1.1vw,16px);color:var(--ink2);line-height:1.55;
 letter-spacing:.01em;max-width:54ch}
.s20 .grid4-cap .grid4-cap-cn em{font-style:italic;color:var(--accent);font-family:var(--serif);
 font-weight:500;margin:0 .1em}

/* ---- S21 limitations ---- */
.s21 .s-body{grid-template-rows:auto 1fr auto;gap:20px;align-content:start}
.s21 .limits{display:grid;grid-template-columns:repeat(5,1fr);gap:0;align-items:stretch;height:100%}
.s21 .lim{padding:clamp(18px,2vw,30px);display:flex;flex-direction:column;
 justify-content:space-between;position:relative}
.s21 .lim + .lim{border-left:1px solid var(--rule)}
.s21 .lim-ix{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--mute);
 font-size:clamp(40px,4.4vw,68px);line-height:.86;margin-bottom:18px;opacity:.85}
.s21 .lim-cn{font-family:var(--serifCN);font-size:clamp(15px,1.4vw,20px);line-height:1.42;
 color:var(--ink);font-weight:500;letter-spacing:-.003em;max-width:18ch}
.s21 .lim-meta{font-family:var(--mono);font-size:10px;font-weight:600;
 letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
 margin-top:12px;line-height:1.5;opacity:.9}
.s21 .lim-en{font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:clamp(11px,.95vw,13px);color:var(--mute);line-height:1.55;
 margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);max-width:24ch}

/* ---- S22 ask ---- */
.s22 .s-body{display:grid;place-items:center;text-align:center;position:relative}
.s22 .ask{display:flex;flex-direction:column;align-items:center;gap:32px;max-width:1000px}
.s22 .ask-h{font-family:var(--serif);font-weight:500;
 font-size:clamp(56px,7.4vw,124px);line-height:.96;letter-spacing:-.02em;color:var(--ink)}
.s22 .ask-h em{font-style:italic;color:var(--accent)}
.s22 .ask-cn{font-family:var(--serifCN);font-weight:500;
 font-size:clamp(20px,2vw,30px);line-height:1.46;color:var(--ink2);letter-spacing:.005em}
.s22 .ask-rules, .s17 .ask-rules{list-style:none;display:flex;gap:0;margin-top:18px;padding:0;
 border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.s22 .ask-rules li, .s17 .ask-rules li{padding:14px 22px;display:flex;align-items:baseline;gap:10px;
 font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:clamp(15px,1.4vw,20px);color:var(--ink)}
.s22 .ask-rules li + li, .s17 .ask-rules li + li{border-left:1px solid var(--rule)}
.s22 .ask-rules .rk, .s17 .ask-rules .rk{font-family:var(--mono);font-style:normal;font-size:10px;
 letter-spacing:.18em;color:var(--mute);text-transform:uppercase}

/* ---- S23 finale ---- */
.s23 .s-foot{display:none} /* finale: no bottom meta — same treatment as cover (.s01) */
.s23 .s-body{display:grid;place-items:center;text-align:center;position:relative}
/* Pulse canvas echoes the cover's stagger grid (s01) — same size & top-corner anchor,
   but mirrored to the RIGHT side and kept in concentric-ring form, so the open/close
   reads as "grid → rings · order → convergence". */
.s23 .pulse-canvas{position:absolute;
 top:clamp(24px,4vh,56px);right:clamp(16px,2.4vw,40px);
 /* MUST override .cavalry's inset:0 explicitly, otherwise left:0/bottom:0
    win the cascade (in LTR `right` is ignored when both left + right + width
    are non-auto) and the canvas stays glued to the top-left. */
 left:auto;bottom:auto;
 width:clamp(180px,18vw,260px);height:clamp(180px,18vw,260px);
 z-index:0;opacity:.75;pointer-events:none}
/* 5-char main title — sized larger than the 7-char cover so it lands like
   a single struck note. */
.s23 .final{position:relative;z-index:2;font-family:var(--serifCN);
 font-size:clamp(80px,11vw,200px);line-height:1.02;letter-spacing:.06em;
 white-space:nowrap;font-variation-settings:"wght" 500;color:var(--ink)}
.s23 .final-en{position:relative;z-index:2;margin-top:26px;
 font-family:var(--serifCN);font-style:normal;font-weight:500;
 font-size:clamp(18px,1.8vw,26px);color:var(--ink2);line-height:1.5;
 max-width:64ch;margin-left:auto;margin-right:auto;text-align:center}
.s23 .final-en .final-en-quote{display:block;margin-top:8px;
 font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:.82em;color:var(--mute);letter-spacing:-.005em}
.s23 .final-en .final-attr{display:block;margin-top:14px;
 font-family:var(--sans);font-style:normal;font-weight:600;
 font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}
/* Signature / 落款 — anchored to the bottom of the slide body, the way a colophon
   sits at the foot of an editorial page. Mirrors the cover .meta .tiny typography
   so opening "business card" and closing "signature" form a typographic pair. */
.s23 .thanks{position:absolute;bottom:0;left:50%;transform:translateX(-50%);
 z-index:2;white-space:nowrap;
 font-family:var(--sans);font-size:11px;font-weight:500;
 letter-spacing:.18em;text-transform:uppercase;color:var(--ink);opacity:.78}

/* ================================================================
   HUD / notes / overview / progress — Airlight tinted glass
   ================================================================ */
.hud{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(0);z-index:50;
 display:flex;align-items:center;gap:14px;padding:10px 18px;
 background:rgba(252,251,248,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
 border:1px solid var(--rule);
 font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.18em;
 text-transform:uppercase;color:var(--mute);user-select:none;
 transition:opacity 420ms cubic-bezier(.4,0,.2,1),transform 420ms cubic-bezier(.4,0,.2,1);opacity:1}
.hud.hide{opacity:0;transform:translateX(-50%) translateY(60%);pointer-events:none}
.hud button{appearance:none;border:0;background:transparent;font:inherit;
 color:var(--mute);cursor:pointer;padding:4px 6px;letter-spacing:.18em;text-transform:uppercase}
.hud button:hover{color:var(--ink)}
.hud .mini{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
.hud .sep{width:1px;height:14px;background:var(--ruleS)}
.hud .hint{font-size:10px;color:var(--faint)}
.hud .timer{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);
 padding:2px 8px;border:1px solid var(--ruleS);border-radius:3px;cursor:pointer;
 transition:color 200ms ease, border-color 200ms ease, background 200ms ease}
.hud .timer:hover{border-color:var(--ink)}
.hud .timer.running{color:var(--ink);border-color:var(--accent);
 background:rgba(255,206,130,.32)}
.hud .timer.warn{color:#fff;background:#C8553D;border-color:#C8553D;
 animation:warnBlink 1.4s ease-in-out infinite}
@keyframes warnBlink{50%{opacity:.6}}

.notes{position:fixed;right:22px;bottom:22px;width:min(420px,32vw);max-height:38vh;z-index:50;
 padding:16px 18px;background:rgba(252,251,248,.94);
 backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
 border:1px solid var(--rule);font-family:var(--sans);font-size:13px;line-height:1.55;
 color:var(--ink2);overflow:auto;display:none}
.notes.show{display:block}
.notes h4{font-family:var(--sans);font-size:10px;font-weight:600;
 letter-spacing:.22em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.notes p{margin:0 0 8px}
.notes em{font-style:italic;color:var(--accent);font-family:var(--serif);font-weight:500}

.overview{position:fixed;inset:0;z-index:100;display:none;overflow:auto;padding:60px;
 background:rgba(247,247,244,.96);backdrop-filter:blur(20px)}
.overview.show{display:block}
.ov-head{display:flex;justify-content:space-between;align-items:baseline;
 margin-bottom:28px;border-bottom:1px solid var(--rule);padding-bottom:18px}
.ov-title{font-family:var(--serif);font-weight:500;
 font-size:32px;letter-spacing:-.012em;color:var(--ink)}
.ov-meta{font-family:var(--sans);font-size:11px;font-weight:500;
 letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.ov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.ov-card{position:relative;aspect-ratio:16/9;background:var(--bg2);
 border:1px solid var(--rule);padding:18px;cursor:pointer;
 display:flex;flex-direction:column;justify-content:space-between;
 transition:border-color 200ms ease,transform 200ms ease,background 200ms ease}
.ov-card:hover{border-color:var(--ink);transform:translateY(-2px);background:var(--bg3)}
.ov-card .ov-num{font-family:var(--serif);font-style:italic;font-weight:500;
 font-size:26px;color:var(--ink)}
.ov-card .ov-name{font-family:var(--sans);font-size:12px;font-weight:500;
 letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);line-height:1.4}
.ov-card .ov-chp{font-family:var(--sans);font-size:9px;font-weight:600;
 letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

.prog{position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:50;
 transition:width 380ms cubic-bezier(.4,0,.2,1)}

/* ================================================================
   S10C1A · The Median Default — dark Cavalry diagnosis
   "它们只是在复读训练数据里最高频的视觉模式。"
   Acid lime accent (#DEFF00) borrowed from the v2 field report.
   ================================================================ */
.s10c1a .s-body{display:block;position:relative;padding:0}

.s10c1a .diag-stage{position:relative;z-index:2;
 max-width:760px;
 padding:clamp(40px,6vh,80px) 0;
 display:flex;flex-direction:column;gap:clamp(18px,2.4vh,30px)}

.s10c1a .diag-eyebrow{display:flex;align-items:center;gap:14px;
 font-family:var(--sans);font-size:11px;font-weight:600;
 letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.s10c1a .diag-rule{width:36px;height:1px;background:var(--accent);display:inline-block}

.s10c1a .diag-h{font-family:var(--serifCN);font-weight:500;
 font-size:clamp(40px,5.4vw,84px);line-height:1.05;letter-spacing:-.012em;
 color:var(--ink);margin:0;
 /* 标题挣脱 760px 容器，避免长句被压折 */
 width:max-content;max-width:none}
.s10c1a .diag-h em{
 /* 与周围中文使用同一字体 + 同字重，仅用颜色区分强调 */
 font-family:var(--serifCN);font-style:normal;font-weight:inherit;
 color:var(--accent);letter-spacing:0}
.s10c1a .diag-h .diag-nowrap{white-space:nowrap;display:inline-block}

.s10c1a .diag-p{font-family:var(--serifCN);font-size:clamp(14px,1.15vw,18px);
 line-height:1.7;color:var(--ink2);max-width:60ch;margin:0;font-weight:400}

.s10c1a .diag-strong{font-family:var(--serifCN);font-weight:600;
 font-size:clamp(15px,1.25vw,19px);line-height:1.6;color:var(--ink);
 margin:0;letter-spacing:.005em}

/* ================================================================
   S10C1B · Scaffolding for Agency — light editorial growth
   "审美如何生长出来 / Design System as Scaffolding"
   Sage green accent (#00C853-ish, softened) borrowed from v2 report.
   ================================================================ */
:root{
 /* Kept variable names for backwards compat, but values now use the
    deck's global terracotta accent so this slide reads consistent. */
 --grow-green:var(--accent);
 --grow-green-soft:rgba(217,115,67,.14);
}

.s10c1b .s-body{display:grid;
 grid-template-rows:auto 1fr;
 gap:clamp(28px,4vh,56px);
 align-content:start;
 padding:clamp(8px,1.6vh,24px) 0}

.s10c1b .grow-head{display:flex;flex-direction:column;
 gap:clamp(14px,2vh,22px);
 padding-top:clamp(8px,1.4vh,16px);
 max-width:none}

.s10c1b .grow-eyebrow{display:flex;align-items:center;gap:14px;
 font-family:var(--sans);font-size:11px;font-weight:600;
 letter-spacing:.22em;text-transform:uppercase;color:var(--grow-green)}
.s10c1b .grow-rule{width:36px;height:1px;background:var(--grow-green);display:inline-block}

.s10c1b .grow-h{font-family:var(--serifCN);font-weight:500;
 font-size:clamp(36px,4.6vw,68px);line-height:1.1;letter-spacing:-.012em;
 color:var(--ink);margin:0}
.s10c1b .grow-h em{
 /* 与周围中文同字体 + 同字重，仅用颜色区分 */
 font-family:var(--serifCN);font-style:normal;font-weight:inherit;
 color:var(--grow-green);letter-spacing:0}

.s10c1b .grow-p{font-family:var(--serifCN);font-size:clamp(14px,1.15vw,18px);
 line-height:1.7;color:var(--ink2);margin:0;max-width:78ch;font-weight:400}
.s10c1b .grow-p .grow-em{
 font-family:var(--serifCN);font-style:normal;font-weight:inherit;color:var(--grow-green)}
.s10c1b .grow-p strong{font-weight:600;color:var(--ink);
 background:linear-gradient(180deg,transparent 60%,var(--grow-green-soft) 60%);
 padding:0 .12em}

/* Bottom row · 4 equal columns, mirroring the s21 limits grid system */
.s10c1b .grow-cards{display:grid;grid-template-columns:repeat(4,1fr);
 gap:0;align-items:stretch;height:100%;
 border-top:1px solid var(--rule)}
.s10c1b .gcard{padding:clamp(20px,2.4vw,34px) clamp(18px,2vw,28px);
 display:flex;flex-direction:column;
 position:relative}
.s10c1b .gcard + .gcard{border-left:1px solid var(--rule)}
.s10c1b .gcard-ix{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--mute);
 font-size:clamp(40px,4.4vw,68px);line-height:.86;margin-bottom:clamp(14px,2vh,22px);opacity:.85}
.s10c1b .gcard-cn{font-family:var(--serifCN);font-weight:600;
 font-size:clamp(20px,2vw,28px);line-height:1.2;color:var(--ink);
 letter-spacing:-.005em;margin-bottom:clamp(10px,1.4vh,16px)}
.s10c1b .gcard-en{font-family:var(--serifCN);font-size:clamp(13px,1.05vw,15.5px);
 line-height:1.6;color:var(--mute);margin:0;max-width:24ch}

/* ambient wash removed — keep background consistent with the rest of the deck.
   The green accent now lives only in text/rules, not in the page background. */
.s10c1b{position:relative;isolation:isolate}

/* cascade in */
.s10c1b .gcard{opacity:0;transform:translateY(8px);
 transition:opacity 460ms cubic-bezier(.4,0,.2,1),transform 460ms cubic-bezier(.4,0,.2,1)}
.s10c1b.active .gcard{opacity:1;transform:none}
.s10c1b.active .gcard:nth-child(1){transition-delay:240ms}
.s10c1b.active .gcard:nth-child(2){transition-delay:420ms}
.s10c1b.active .gcard:nth-child(3){transition-delay:600ms}
.s10c1b.active .gcard:nth-child(4){transition-delay:780ms}

@media (prefers-reduced-motion: reduce){
 .s10c1b .gcard{opacity:1;transform:none;transition:none}
}

@media print{
 body{overflow:visible}
 .shell,.hud,.notes,.overview,.prog,.cursor-glow,.global-glow{display:none !important}
 .deck{height:auto}
 .slide{position:relative;inset:auto;opacity:1 !important;transform:none !important;
  visibility:visible !important;page-break-after:always;height:100vh}
}
/* ================================================================
   CN typography hygiene: Chinese serif italic is a fake-slant in browsers
   and looks weak. Wherever a Chinese-typeset element contains <em>, we use
   weight + colour to express emphasis instead of the italic axis.
   English/numeric italic (e.g. variable-font serif italic) is unaffected
   because it's never typeset with var(--serifCN) at the parent level.

   We use a high-specificity selector list (`html` prefix lifts specificity
   above other slide-scoped rules like `.s10 .statement-cn em`) so this
   stays the final word for every CN <em>.
   ================================================================ */
html .statement-cn em,
html .obs-h em,
html .obs-c-h em,
html .diag-h em,
html .grow-h em,
html .grow-p .grow-em,
html .flow-cap em,
html .s17 .here .body-text em,
html .s18 .stmt em,
html .s19 .big em,
html .s22 .ask-h em,
html .s10c .stmt em,
html .s10c .body-text em,
html .s20 .grid4-cap .grid4-cap-quote em,
html .s20 .grid4-cap .grid4-cap-cn em,
html .s20 .statement em,
html .s21 .statement em,
html .body-text em,
html .s02 .stage-narrative .sn-cn em,
html .notes em{
 font-style:normal !important;
 font-family:inherit;
 font-weight:inherit;
 color:var(--accent)}

@page{size:1600px 900px landscape;margin:0}

@media (prefers-reduced-motion: reduce){
 .cursor-glow,.global-glow{transition:none;transform:none !important}
}

/* ================================================================
   S07A · Two matrices (chips variant)
   Left "Tools Matrix" | hairline rule | right "Taste & Project Matrix"
   ================================================================ */
.s7a .s-body{display:grid;grid-template-rows:auto 1fr;gap:clamp(20px,3vh,38px)}
.s7a .tm-head-row{display:flex;flex-direction:column;gap:8px;max-width:78ch}
.s7a .tm-head-row .statement-cn em{font-style:normal;color:var(--accent);font-weight:500}
.s7a .two-matrix{display:grid;grid-template-columns:1fr 1px 1fr;
 gap:clamp(28px,3vw,56px);align-items:stretch;height:100%;
 border-top:1px solid var(--rule);padding-top:clamp(20px,2.6vh,32px)}
.s7a .matrix-rule{background:var(--rule);width:1px;height:100%;justify-self:center}
.s7a .matrix-col{display:flex;flex-direction:column;gap:clamp(12px,1.4vh,18px)}
.s7a .matrix-ix{font-family:var(--serif);font-style:italic;font-weight:500;
 color:var(--mute);font-size:clamp(40px,4.2vw,64px);line-height:.86;opacity:.85}
.s7a .matrix-title{font-family:var(--serifCN);font-weight:600;
 font-size:clamp(30px,3vw,46px);line-height:1.18;color:var(--ink);
 letter-spacing:-.005em}
.s7a .matrix-title em{display:block;font-family:var(--serif);font-style:italic;
 font-weight:500;font-size:.5em;color:var(--mute);margin-top:.35em;letter-spacing:-.005em}
.s7a .matrix-sub{font-family:var(--serifCN);font-size:clamp(13px,1.05vw,16px);
 line-height:1.55;color:var(--mute);max-width:34ch}
.s7a .matrix-chips{list-style:none;padding:0;margin:6px 0 0;
 display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
.s7a .chip{display:flex;flex-direction:column;gap:2px;padding:10px 12px;
 background:rgba(217,115,67,.05);border:1px solid var(--rule);border-radius:2px}
.s7a .chip-k{font-family:var(--sans);font-size:10px;font-weight:600;
 letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.s7a .chip-v{font-family:var(--serifCN);font-size:clamp(13px,1.05vw,15px);
 font-weight:500;color:var(--ink);line-height:1.3}
.s7a .chip.more{grid-column:1 / -1;
 background:transparent;border:none;
 align-items:center;justify-content:center;padding:4px 12px;min-height:24px}
.s7a .chip.more .chip-v{font-family:var(--serif);font-style:italic;
 font-weight:500;font-size:clamp(18px,1.6vw,24px);color:var(--mute);
 letter-spacing:.3em;text-align:center;line-height:1}
.s7a .tm-quote{font-family:var(--serif);font-style:italic;
 font-size:clamp(13px,1.05vw,16px);color:var(--mute);text-align:center;
 margin:clamp(14px,2vh,22px) 0 0;letter-spacing:.01em}
.s7a .tm-quote em{font-style:italic;color:var(--ink);font-weight:500}

/* ================================================================
   S07B · Two matrices (stacked card variant)
   ================================================================ */
.s7b .s-body{display:flex;flex-direction:column;justify-content:center;
 gap:clamp(24px,3.4vh,40px)}
.s7b .two-matrix-stack{display:flex;flex-direction:column;
 gap:clamp(24px,3.4vh,40px);max-width:none}
.s7b .tm-head{max-width:78ch}
.s7b .tm-head .statement-cn em{font-style:normal;color:var(--accent);font-weight:500}
.s7b .tm-cards{display:grid;grid-template-columns:1fr 1fr;
 gap:clamp(20px,2.4vw,40px);border-top:1px solid var(--rule);
 padding-top:clamp(20px,2.6vh,32px)}
.s7b .tm-card{padding:clamp(20px,2.4vw,30px);
 border:1px solid var(--rule);border-radius:2px;background:var(--bg2);
 display:flex;flex-direction:column;gap:clamp(10px,1.4vh,16px);
 transition:background 220ms ease}
.s7b .tm-card:hover{background:var(--bg3)}
.s7b .tm-ix{font-family:var(--serif);font-style:italic;font-weight:500;
 color:var(--mute);font-size:clamp(36px,3.6vw,56px);line-height:.86;opacity:.85}
.s7b .tm-h{font-family:var(--serifCN);font-weight:600;
 font-size:clamp(22px,2.2vw,32px);line-height:1.2;color:var(--ink);letter-spacing:-.005em}
.s7b .tm-h em{font-style:italic;font-family:var(--serif);font-weight:500;
 color:var(--mute);font-size:.7em;letter-spacing:0;margin-left:.25em}
.s7b .tm-p{font-family:var(--serifCN);font-size:clamp(13px,1.1vw,16.5px);
 line-height:1.65;color:var(--ink2);margin:0}
.s7b .tm-p em{font-style:normal;color:var(--accent);font-weight:500}
.s7b .tm-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.s7b .tm-tags span{display:inline-flex;align-items:center;padding:4px 10px;
 font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.14em;
 text-transform:uppercase;color:var(--mute);background:rgba(0,0,0,.03);
 border:1px solid var(--rule);border-radius:999px}

/* ================================================================
   S11K1 / S11K2 · Motion Skill key insights
   Two alternative layouts for the procedural-motion skill deep dive.
   ================================================================ */
/* S11K1 · 七项共性 → 四张小卡片（复用 s10c1b 的 gcard 网格） */
.s11k1 .s-body{display:grid;grid-template-rows:auto 1fr;
 gap:clamp(24px,3.2vh,38px);padding:clamp(8px,1.6vh,24px) 0}
.s11k1 .grow-cards{display:grid;grid-template-columns:repeat(4,1fr);
 gap:0;align-items:stretch;border-top:1px solid var(--rule)}
.s11k1 .gcard{padding:clamp(20px,2.4vw,34px) clamp(18px,2vw,28px);
 display:flex;flex-direction:column;position:relative}
.s11k1 .gcard + .gcard{border-left:1px solid var(--rule)}
.s11k1 .gcard-ix{font-family:var(--serif);font-style:italic;font-weight:500;
 color:var(--mute);font-size:clamp(40px,4.4vw,68px);line-height:.86;
 margin-bottom:clamp(14px,2vh,22px);opacity:.85}
.s11k1 .gcard-cn{font-family:var(--serifCN);font-weight:600;
 font-size:clamp(20px,2vw,28px);line-height:1.2;color:var(--ink);
 letter-spacing:-.005em;margin-bottom:clamp(10px,1.4vh,16px)}
.s11k1 .gcard-en{font-family:var(--serifCN);font-size:clamp(13px,1.05vw,15.5px);
 line-height:1.6;color:var(--mute);margin:0;max-width:28ch}
.s11k1 .gcard-en em{font-style:italic;color:var(--ink);font-weight:500;font-family:var(--serif)}
.s11k1 .statement-cn em{font-style:normal;color:var(--accent);font-weight:500}

/* S11K2 · Math × GSAP 融合（左标题 + 分工列表 · 右四张要点小卡）
   S11SK · Physics × Play 共用同一版式
   S11B2 · Tokens × Story（项目类 Skill 提炼）共用同一版式
   S13B2 · Scan × Map（调研类 Skill 提炼）共用同一版式 */
.s11k2 .s-body,.s11sk .s-body,.s11b2 .s-body,.s13b2 .s-body{display:grid;grid-template-columns:1.15fr .85fr;
 gap:clamp(28px,3.4vw,60px);align-items:center}
.s11k2 .brand,.s11sk .brand,.s11b2 .brand,.s13b2 .brand{font-family:var(--serif);font-weight:500;
 font-size:clamp(56px,7.4vw,118px);line-height:.92;letter-spacing:-.02em;color:var(--ink);margin:0}
.s11k2 .brand .brand-accent,.s11sk .brand .brand-accent,.s11b2 .brand .brand-accent,.s13b2 .brand .brand-accent{color:var(--accent);font-style:italic}
.s11k2 .brand em,.s11sk .brand em,.s11b2 .brand em,.s13b2 .brand em{font-style:italic;display:block;font-size:.28em;
 color:var(--mute);margin-top:.5em;font-weight:500;letter-spacing:-.005em;line-height:1.2}
.s11k2 .body-text em,.s11sk .body-text em,.s11b2 .body-text em,.s13b2 .body-text em{font-style:normal;color:var(--ink);font-weight:600}
.s11k2 .motion-divlist,.s11sk .motion-divlist,.s11b2 .motion-divlist,.s13b2 .motion-divlist{list-style:none;margin:clamp(18px,2.4vh,28px) 0 0;padding:0;
 display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--rule);padding-top:14px}
.s11k2 .motion-divlist li,.s11sk .motion-divlist li,.s11b2 .motion-divlist li,.s13b2 .motion-divlist li{display:grid;grid-template-columns:120px 1fr;gap:14px;
 padding:8px 0;border-bottom:1px dashed var(--rule);align-items:baseline}
.s11k2 .md-k,.s11sk .md-k,.s11b2 .md-k,.s13b2 .md-k{font-family:var(--sans);font-size:10.5px;font-weight:600;
 letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.s11k2 .md-v,.s11sk .md-v,.s11b2 .md-v,.s13b2 .md-v{font-family:var(--serifCN);font-size:clamp(13px,1.05vw,15.5px);
 color:var(--ink2);line-height:1.55}
.s11k2 .md-v em,.s11sk .md-v em,.s11b2 .md-v em,.s13b2 .md-v em{font-style:normal;color:var(--accent);font-weight:500}
.s11k2 .motion-rightcards,.s11sk .motion-rightcards,.s11b2 .motion-rightcards,.s13b2 .motion-rightcards{display:grid;grid-template-columns:1fr 1fr;gap:1px;
 background:var(--rule);border:1px solid var(--rule)}
.s11k2 .mrcard,.s11sk .mrcard,.s11b2 .mrcard,.s13b2 .mrcard{background:var(--bg2);padding:clamp(16px,2vw,24px);
 display:flex;flex-direction:column;gap:8px;transition:background 220ms ease}
.s11k2 .mrcard:hover,.s11sk .mrcard:hover,.s11b2 .mrcard:hover,.s13b2 .mrcard:hover{background:var(--bg3)}
.s11k2 .mrc-ix,.s11sk .mrc-ix,.s11b2 .mrc-ix,.s13b2 .mrc-ix{font-family:var(--serif);font-style:italic;font-weight:500;
 color:var(--mute);font-size:clamp(22px,2.2vw,30px);line-height:.86;opacity:.85}
.s11k2 .mrc-h,.s11sk .mrc-h,.s11b2 .mrc-h,.s13b2 .mrc-h{font-family:var(--serifCN);font-weight:600;
 font-size:clamp(15px,1.4vw,20px);line-height:1.2;color:var(--ink);letter-spacing:-.003em}
.s11k2 .mrc-p,.s11sk .mrc-p,.s11b2 .mrc-p,.s13b2 .mrc-p{font-family:var(--serifCN);font-size:clamp(12px,1vw,14.5px);
 line-height:1.55;color:var(--mute);margin:0;max-width:30ch}
.s11k2 .mrc-p em,.s11sk .mrc-p em,.s11b2 .mrc-p em,.s13b2 .mrc-p em{font-style:normal;color:var(--accent);font-weight:500}
@media (max-width:1000px){
 .s11k2 .s-body,.s11sk .s-body,.s11b2 .s-body,.s13b2 .s-body{grid-template-columns:1fr;gap:clamp(20px,3vh,32px)}
 .s11k2 .motion-rightcards,.s11sk .motion-rightcards,.s11b2 .motion-rightcards,.s13b2 .motion-rightcards{grid-template-columns:1fr 1fr}
}