:root{color-scheme:dark;--mint:#baffc9;--text:#f3fff8;--soft:#c3e0d4}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:#155b4c;color:var(--text);font-family:'Microsoft YaHei','Segoe UI',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5.5vw,24px);gap:24px;background:#0b5145;border-bottom:1px solid #93e8c426;position:relative;z-index:4}.brand{display:flex;align-items:center;gap:12px;font-size:29px;font-weight:700;white-space:nowrap}.brand svg{width:47px;height:47px}nav{display:flex;gap:36px;font-size:15px}nav a:hover{color:var(--mint)}.outline,.primary{display:inline-flex;align-items:center;justify-content:center;gap:25px;border:1px solid #b5eed3;border-radius:40px;padding:15px 28px;font-size:18px;font-weight:600;transition:background .2s,transform .2s}.primary{background:linear-gradient(100deg,#6cf2b9,#d8ffaf);color:#064d3c;border-color:transparent}.primary:hover,.outline:hover{transform:translateY(-2px);box-shadow:0 6px 24px #9bffd32a}.small{font-size:14px;padding:10px 21px}.hero{position:relative;aspect-ratio:1920/760;isolation:isolate;background:radial-gradient(ellipse at 75% 30%,#287f67,#10584b 50%,#083b32);overflow:hidden}.cover{height:100%;position:relative;display:flex;align-items:center}.copy{position:relative;z-index:2;padding-left:7%;width:55%}.eyebrow{font-size:13px;letter-spacing:5px;color:#aff4d1;margin:0 0 25px}h1{font-size:clamp(38px,4.5vw,86px);line-height:1.2;letter-spacing:-2px;margin:0;font-weight:750}h1 em{font-style:normal;background:linear-gradient(#efffe2,#8cf4bb);background-clip:text;color:transparent}.summary{font-size:clamp(15px,1.55vw,28px);margin:24px 0 30px;white-space:nowrap}.actions{display:flex;gap:18px}.platform{font-size:13px;color:var(--soft);margin:13px 0 24px;padding-left:245px}.play{border:0;background:transparent;color:#ecfff3;padding:8px 0;font-size:15px}.play span{font-size:12px;color:#b4d5c6;margin-left:12px}.hero-art{position:absolute;right:0;width:54%;height:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 14%)}.hero-art svg{width:100%;height:100%}.player{position:absolute;inset:0;z-index:3;background:#10584b}.player[hidden],.cover[hidden]{display:none}.player video{width:100%;height:100%;display:block;object-fit:contain}.video-controls{position:absolute;right:30px;bottom:25px;display:flex;gap:10px}.video-controls button{border:1px solid #b4e5cb80;background:#0a4134e8;color:white;border-radius:24px;padding:10px 17px}.video-label{position:absolute;left:25px;top:20px;background:#0b493cbd;border-radius:18px;padding:7px 13px;color:#d3eadc;font-size:12px}.section{max-width:1640px;margin:auto;padding:54px 40px 15px}.section-head{text-align:center;margin-bottom:32px}.section-head>span{font-size:11px;letter-spacing:4px;color:#a8d8bf}.section-head h2{font-size:32px;margin:11px 0}.section-head p{font-size:15px;color:var(--soft);margin:0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.cards article{background:linear-gradient(140deg,#397b66,#296b58);padding:20px;border:1px solid #8fd5b56b;border-radius:20px;transition:transform .25s,border-color .25s}.cards article:hover{transform:translateY(-5px);border-color:#b2f6d0}.card-title{display:flex;align-items:center;gap:16px;margin-bottom:19px}.icon{width:52px;height:52px;display:grid;place-items:center;background:linear-gradient(140deg,#24bc8f,#096c52);box-shadow:inset 0 0 0 1px #8de2b778;border-radius:14px;font-size:30px}.card-title h3,.helpers h3{font-size:24px;margin:0 0 6px}.card-title p,.helpers p{font-size:14px;color:#d0eadd;margin:0}.card-title>a{margin-left:auto;width:32px;height:32px;border:1px solid #bcecd5;border-radius:50%;display:grid;place-items:center}.photo{aspect-ratio:1.5;background-image:url('assets/features.png');background-size:300% auto;background-repeat:no-repeat;border-radius:12px;position:relative;overflow:hidden}.image-photo{background-position:0 38%}.video-photo{background-position:50% 38%}.ip-photo{background-position:100% 38%}.timeline{display:flex;gap:7px;position:absolute;bottom:0;left:0;right:0;background:#0e493de8;padding:12px}.timeline i{height:14px;flex:1;background:#79caaa;border-radius:3px}.tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px}.tags span{font-size:12px;padding:6px 11px;border:1px solid #98d7b978;border-radius:20px;color:#e8f8ed}.compact{padding-top:36px}.scene-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.scene-row>div{padding:24px;border-top:1px solid #8ed2b77a}.scene-row b{font-size:19px}.scene-row p{font-size:14px;color:var(--soft)}.helpers{display:grid;grid-template-columns:1fr 1fr;gap:22px}.helpers a{display:flex;align-items:center;gap:18px;background:#2c705b;border:1px solid #9addbd70;border-radius:18px;padding:25px}.helpers b{margin-left:auto;font-size:27px}footer{margin-top:42px;border-top:1px solid #8dd3b644;display:flex;justify-content:space-between;gap:20px;padding:25px 6%;font-size:12px;color:#bbd9cb}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}:focus-visible{outline:3px solid #d7ffad;outline-offset:5px}@media(min-width:2000px){.copy{padding-left:max(7%,calc((100vw - 1640px)/2))}}@media(max-width:1100px){nav{gap:17px}.outline,.primary{font-size:14px;padding:12px 19px}.platform{padding-left:180px}.eyebrow{margin-bottom:16px}.summary{margin:16px 0 20px}.platform{margin-bottom:12px}.section{padding:36px 25px 12px}.card-title{gap:10px}.card-title h3{font-size:19px}.icon{width:42px;height:42px}h1{letter-spacing:-1px}}@media(max-width:760px){header{height:72px;padding:0 18px}.brand{font-size:24px}.brand svg{width:36px;height:36px}nav{display:none}.hero{aspect-ratio:auto;min-height:680px}.copy{width:100%;padding:35px 24px 300px;align-self:flex-start}.hero-art{width:100%;height:300px;bottom:0;mask-image:linear-gradient(transparent,#000 20%)}h1{font-size:45px}.summary{font-size:15px;white-space:normal}.eyebrow{font-size:10px}.platform{padding-left:175px}.actions{gap:10px}.play{margin-top:4px}.cards,.scene-row,.helpers{grid-template-columns:1fr}.section-head h2{font-size:25px}.section-head p{font-size:13px}.video-controls{right:12px;left:12px;bottom:20px;justify-content:center;gap:6px}.video-controls button{font-size:12px;padding:9px 13px}.player video{object-fit:contain}footer{flex-direction:column;gap:10px}.card-title h3{font-size:23px}.photo{aspect-ratio:1.6}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* The poster and player share only the right-hand media panel. */
.hero-art,.player{left:auto;right:1.2%;top:50%;bottom:auto;width:54%;height:auto;aspect-ratio:970/470;transform:translateY(-50%)}
.hero-art{mask-image:none;overflow:hidden;border-radius:12px}
.hero-art[hidden]{display:none}
.player{border-radius:12px;overflow:hidden;background:#10584b}
.player video{object-fit:contain}
.video-controls{right:14px;bottom:12px;gap:6px}
.video-controls button{padding:8px 12px;font-size:12px}
.video-label{left:12px;top:12px;font-size:10px;padding:5px 9px}
.copy{width:45%;padding-left:6.5%}
.copy h1{font-size:clamp(36px,3.5vw,68px)}
.summary{font-size:clamp(14px,1.3vw,25px)}
@media(max-width:1100px) and (min-width:761px){.copy{padding-left:4%}.copy h1{font-size:3.8vw}.summary{font-size:1.35vw}.actions{gap:8px}.actions a{font-size:12px;padding:11px 14px}.video-controls button{font-size:10px;padding:6px 9px}}
@media(max-width:760px){.copy{width:100%;padding:35px 24px 300px}.copy h1{font-size:45px}.summary{font-size:15px}.hero-art,.player{left:12px;right:12px;top:auto;bottom:22px;width:calc(100% - 24px);height:auto;aspect-ratio:970/470;transform:none}.video-controls{left:8px;right:8px;bottom:8px}.video-controls button{font-size:11px;padding:7px 10px}}

footer{flex-wrap:wrap}
