:root{--bg:#fff;--surface:#f6f6f6;--ink:#242424;--muted:#6f6f6f;--line:#e8e8e8;--accent:#252525;--blue:#287bc1}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button,summary{touch-action:manipulation}a:hover{color:var(--blue)}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:4px}.skip{position:fixed;top:-80px;z-index:10;background:var(--ink);color:#fff;padding:12px}.skip:focus{top:8px}header,main,footer{max-width:1160px;margin:auto}header{height:68px;display:flex;align-items:center;gap:24px;padding:0 32px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:9px;font-size:22px;font-weight:650;letter-spacing:-.7px}.preview{font-size:9px;letter-spacing:1px;color:var(--muted);border:1px solid var(--line);padding:3px 5px;border-radius:4px}nav{display:flex;gap:24px;margin-left:auto;font-size:13px}#language{padding:5px 11px;border:1px solid var(--line);border-radius:6px;background:white;font-size:12px}#language:hover{background:var(--surface)}main>section{padding:32px;border-bottom:1px solid var(--line)}.eyebrow{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:1px;color:var(--muted)}.status-dot{width:6px;height:6px;flex-shrink:0;background:var(--ink);border-radius:50%}.hero{display:grid;grid-template-columns:1.15fr 1fr;column-gap:40px;align-items:center}.hero>.eyebrow{grid-column:1/-1;margin-bottom:18px}h1{font-size:clamp(44px,5vw,64px);font-weight:550;line-height:1.06;letter-spacing:-2.8px;margin:0}em{font-style:normal;color:var(--muted)}.hero-bottom p{margin:0 0 18px;font-size:15px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:30px;padding:12px 20px;background:var(--accent);color:#fff;border-radius:6px;font-size:13px;font-weight:600}.button:hover{background:#414141;color:#fff}small{display:block;font-size:10px;color:var(--muted);margin-top:8px}p{color:var(--muted)}h2{font-size:32px;font-weight:500;line-height:1.18;letter-spacing:-1px;margin:12px 0 22px}h2 span{color:var(--muted)}h3{font-size:17px;line-height:1.4;font-weight:550;margin:0}.case-heading{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}.case-heading h2{margin-bottom:18px}.case-heading p{font-size:13px;margin:0 0 18px}.case-brief{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:8px;background:var(--surface)}.case-brief>div{padding:18px 20px}.case-brief>div+div{border-left:1px solid var(--line)}.brief-label{display:block;font-size:10px;letter-spacing:.8px;color:var(--muted);margin-bottom:8px}.case-brief strong{font-size:14px;font-weight:550}.case-brief p{font-size:12px;margin:6px 0 0}.recording-pending{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted);padding-top:12px}.duration{margin-left:auto;white-space:nowrap}.feature-rows{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.feature-rows article{border-top:1px solid var(--line);padding-top:14px}.feature-rows article>span{display:block;color:var(--muted);font-size:10px;margin-bottom:8px}.feature-rows p{font-size:13px;line-height:1.7;margin:8px 0 0}.guide{display:grid;grid-template-columns:.85fr 1.4fr;gap:48px}.text-link{color:var(--blue);font-size:12px}.guide ol{list-style:none;counter-reset:steps;margin:0;padding:0}.guide li{counter-increment:steps;position:relative;padding:0 0 14px 34px;margin-bottom:14px;border-bottom:1px solid var(--line)}.guide li:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}.guide li:before{content:'0' counter(steps);position:absolute;left:0;top:3px;font-size:11px;color:var(--muted)}.guide p{font-size:12px;margin:6px 0 0}.boundaries{display:grid;grid-template-columns:.85fr 1.4fr;column-gap:48px}.boundaries>.eyebrow,.boundaries>h2{grid-column:1}.boundaries>.eyebrow{align-self:end}.boundaries>h2{grid-row:2/5;margin-top:12px}details{grid-column:2;border-top:1px solid var(--line);padding:13px 0}details:first-of-type{grid-row:1/3}summary{font-size:14px;cursor:pointer}details p{font-size:12px;margin:10px 0}details a{font-size:12px;color:var(--blue)}.closing{background:var(--surface);display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 28px}.closing .eyebrow{grid-column:1/-1}.closing h2{font-size:36px;margin:12px 0 0}.closing h2 br{display:none}.closing .button{grid-column:2;grid-row:2}.closing p{grid-column:2;font-size:10px;margin:6px 0 0}footer{display:flex;align-items:center;gap:24px;padding:22px 32px;font-size:12px}footer>.brand{font-size:18px}footer>span{margin-right:auto;color:var(--muted);font-size:11px}[hidden]{display:none!important}@media(max-width:760px){header{padding:0 20px;gap:14px;height:60px}nav{gap:16px}nav a:first-child,.preview{display:none}main>section{padding:26px 20px}.hero{grid-template-columns:1fr;gap:18px}.hero>.eyebrow{margin:0}.hero-bottom p{font-size:14px;margin-bottom:14px}h1{font-size:48px;letter-spacing:-2px}.hero-bottom{display:flex;gap:20px;align-items:center;justify-content:space-between}.hero-bottom p br{display:none}.hero-bottom p{max-width:260px}.hero-bottom>div{flex-shrink:0}.case-heading{gap:18px}.case-heading h2{font-size:26px}.case-heading p{font-size:12px}.case-brief>div{padding:14px}.feature-rows{gap:16px}.feature-rows h3{font-size:15px}.feature-rows p{font-size:12px}.guide,.boundaries{column-gap:24px;grid-template-columns:1fr 1.4fr}h2{font-size:28px}.closing h2{font-size:30px}footer{padding:20px;gap:16px}footer>span{display:none}footer>.brand{margin-right:auto}}@media(max-width:520px){nav a:nth-child(2){display:none}header{gap:12px}.brand{font-size:20px}.hero-bottom{display:block}.hero-bottom p{max-width:none}.hero-bottom small{display:inline;margin-left:10px;font-size:9px}.case-heading,.case-brief,.guide,.boundaries{display:block}.case-heading p{margin-bottom:16px}.case-brief>div+div{border-left:0;border-top:1px solid var(--line)}.recording-pending{flex-wrap:wrap;font-size:10px}.duration{margin-left:16px}.feature-rows{grid-template-columns:1fr;gap:16px}.feature-rows article{display:grid;grid-template-columns:24px 1fr;gap:0 10px}.feature-rows p{grid-column:2;margin-top:5px}.feature-rows article>span{margin-top:3px}.guide ol{margin-top:22px}.closing{display:block}.closing .button{margin-top:18px}.closing p{margin-top:8px}.closing h2{font-size:32px}h1{font-size:44px}.hero-bottom small{display:block;margin:8px 0 0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Let content wrap naturally; compact, consistent section rhythm. */
main>section{padding-top:24px;padding-bottom:24px}.hero{grid-template-columns:1fr;gap:14px}.hero>.eyebrow{margin-bottom:0}.hero h1{font-size:clamp(36px,4.4vw,56px);line-height:1.15;letter-spacing:-2px}.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px}.hero-bottom p{margin:0;max-width:650px}.hero-bottom>div{flex-shrink:0}.case-heading{grid-template-columns:1fr;gap:0}.case-heading h2{margin:8px 0 10px}.case-heading p{max-width:940px;margin:0 0 16px}h2{font-size:29px;margin:8px 0 18px;line-height:1.25}.guide{grid-template-columns:1fr;gap:18px}.guide h2{display:inline-block;margin:8px 24px 0 0}.guide ol{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.guide li{margin:0;padding-bottom:0;border-bottom:0}.boundaries{grid-template-columns:1fr;gap:0}.boundaries>.eyebrow,.boundaries>h2,.boundaries details,.boundaries details:first-of-type{grid-column:auto;grid-row:auto}.boundaries h2{margin-bottom:14px}.closing h2{font-size:32px}.closing .eyebrow{margin-bottom:2px}.case-brief>div{padding:14px 18px}.feature-rows{gap:20px}footer{padding-top:18px;padding-bottom:18px}@media(max-width:760px){.hero h1{font-size:40px}.hero-bottom p{max-width:430px}.guide ol{gap:16px}.guide h3{font-size:15px}.guide li{padding-left:25px}h2{font-size:26px}}@media(max-width:520px){main>section{padding-top:22px;padding-bottom:22px}.hero h1{font-size:34px;letter-spacing:-1px}.hero-bottom{display:block}.hero-bottom p{margin-bottom:14px}.guide ol{display:block;margin-top:0}.guide li{margin-bottom:16px}.guide li:last-child{margin-bottom:0}.guide .text-link{display:block;margin-top:10px}.case-heading h2,h2{font-size:24px}.closing h2{font-size:28px}}
.hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(145deg,#f6f6f6 0%,#fff 65%)}.hero:before{content:'';position:absolute;inset:0;z-index:-1;background-image:var(--task-image);background-size:100% auto;background-position:center 120px;opacity:.055;filter:blur(3px);pointer-events:none}.hero-shot{margin:4px 0 0;grid-column:1/-1}.hero-shot a{display:block;max-width:1000px;margin:auto;border:1px solid #dedede;border-radius:10px;overflow:hidden;box-shadow:0 12px 36px #24242412;background:white}.hero-shot img{display:block;width:100%;height:auto}.hero-shot figcaption{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:11px;margin:10px auto 0;max-width:1000px}.hero-shot figcaption a{display:inline;border:0;box-shadow:none;background:none;color:var(--blue);margin:0;white-space:nowrap}@media(max-width:520px){.hero-shot figcaption{font-size:10px}.hero-shot a{border-radius:6px}}

.hero{--task-image:url("./media/task-en.png")}html[lang="zh-CN"] .hero{--task-image:url("./media/task-zh.png")}

/* Unified hero composition: text and action left, bounded screenshot right. */
header,main,footer{max-width:1560px;width:calc(100% - 64px)}
.hero{display:grid;grid-template-columns:minmax(390px, .9fr) minmax(0,1.4fr);gap:40px;align-items:center;position:relative;isolation:isolate;overflow:hidden;padding:40px 32px;background:radial-gradient(ellipse at 16% 45%,#e6f0ee 0%,transparent 57%),radial-gradient(ellipse at 88% 80%,#e2e8ef 0%,transparent 52%),linear-gradient(140deg,#fff,#f7f9fa)}
.hero:before{display:none}.hero-intro{position:relative;z-index:2;min-width:0}.hero-intro>.eyebrow{margin-bottom:18px}.hero h1{font-size:clamp(34px,3vw,46px);line-height:1.2;letter-spacing:-1.6px;margin:0 0 18px}.hero-bottom{display:block}.hero-bottom p{font-size:15px;line-height:1.8;margin:0 0 20px;max-width:490px}.hero-bottom>div{display:block}.hero small{margin-top:8px}.scene-copy{margin-top:30px;padding-top:22px;border-top:1px solid #d7e2e2}.scene-kicker{font-size:10px;letter-spacing:.6px;color:var(--muted)}.scene-copy h2{font-size:25px;letter-spacing:-.7px;line-height:1.3;margin:9px 0}.scene-copy p{font-size:13px;line-height:1.8;margin:0;max-width:490px}.scene-roles{display:flex;gap:8px;margin-top:14px}.scene-roles span{font-size:10px;padding:4px 10px;background:#ffffffb8;border:1px solid #dce4e4;border-radius:20px}.scene-roles span:nth-child(1){color:#287451}.scene-roles span:nth-child(2){color:#aa5a22}.scene-roles span:nth-child(3){color:#ad466f}.hero-shot{display:block;min-width:0;width:100%;max-width:880px;margin:0;justify-self:end;padding:0}.scene-window{position:relative;perspective:1500px;padding:0 8px 22px;isolation:isolate}.scene-window:before{content:'';position:absolute;z-index:-1;pointer-events:none;left:8%;right:-3%;bottom:0;height:30%;background:radial-gradient(ellipse,#50677940,transparent 68%);filter:blur(18px)}.scene-label{display:flex;align-items:center;gap:8px;font-size:11px;color:#466463;margin:0 0 18px}.scene-label .status-dot{background:#478b6d;box-shadow:0 0 0 4px #478b6d12}.hero-shot .scene-window>a{max-width:none;border:1px solid white;border-radius:12px;transform:rotateY(-5deg) rotateX(2deg) rotateZ(.6deg);box-shadow:-4px -4px 16px #fff,2px 4px 0 #cbd5dc,12px 20px 30px #354d6324;transition:transform .3s}.hero-shot .scene-window>a:hover{transform:rotateY(0) rotateX(0) rotateZ(0)}.hero-shot img{display:block;width:100%;height:auto;border-radius:10px}.scene-delivery{position:relative;display:flex;gap:10px;align-items:center;margin:18px 0 0 auto;width:max-content;max-width:100%;padding:10px 14px;border-radius:9px;border:1px solid #fff;background:linear-gradient(135deg,#fff,#f4f7f9);box-shadow:3px 6px 16px #3b536318}.delivery-icon{font-size:22px;color:var(--blue)}.scene-delivery strong{display:block;font-size:12px;font-weight:550}.scene-delivery div>span{display:block;font-size:10px;color:var(--muted)}.hero-shot figcaption{display:flex;justify-content:space-between;gap:14px;width:100%;font-size:10px;color:var(--muted);margin:0}.hero-shot figcaption>a{display:inline;border:0;box-shadow:none;background:none;color:var(--blue);margin:0;white-space:nowrap}
@media(min-width:1700px){header,main,footer{max-width:1680px;width:calc(100% - 96px)}.hero{grid-template-columns:minmax(440px,1fr) minmax(0,1.5fr);gap:56px}.hero h1{font-size:48px}}
@media(max-width:1150px){header,main,footer{width:calc(100% - 32px)}.hero{grid-template-columns:minmax(330px,.9fr) minmax(0,1.1fr);gap:24px;padding:30px 24px}.hero h1{font-size:35px}.scene-copy h2{font-size:23px}.hero-bottom p{font-size:14px}.scene-copy{margin-top:22px;padding-top:18px}.hero-shot figcaption{flex-wrap:wrap;gap:5px}.scene-delivery strong{font-size:11px}}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:26px}.hero-intro{display:grid;grid-template-columns:1.2fr 1fr;gap:0 30px;align-items:start}.hero-intro>.eyebrow,.hero h1{grid-column:1/-1}.hero h1{font-size:38px}.scene-copy{margin:0;padding:0;border:0}.scene-copy h2{font-size:23px}.hero-shot{max-width:720px;justify-self:center}.hero-bottom p{margin-bottom:14px}.hero-shot figcaption{flex-wrap:nowrap}}
@media(max-width:600px){header,main,footer{width:100%}.hero{padding:24px 20px;gap:24px}.hero-intro{display:block}.hero h1{font-size:34px;letter-spacing:-1px}.hero-intro>.eyebrow{margin-bottom:14px}.scene-copy{margin-top:22px;padding-top:18px;border-top:1px solid #d7e2e2}.scene-copy h2{font-size:23px}.scene-window{padding:0 0 16px}.hero-shot .scene-window>a{transform:none}.scene-label{font-size:10px;margin-bottom:12px}.scene-delivery{margin-top:12px;width:100%;box-shadow:none}.hero-shot figcaption{font-size:9px}.hero-bottom small{margin-left:0;display:block}.scene-roles{margin-top:10px}}
@media(prefers-reduced-motion:reduce){.hero-shot .scene-window>a{transition:none}}
.hero-intro{grid-column:1;grid-row:1}.hero-shot{grid-column:2;grid-row:1}.hero-bottom p{max-width:none}@media(max-width:900px){.hero-intro{grid-column:1;grid-row:1}.hero-shot{grid-column:1;grid-row:2}}
.hero{align-items:start}.hero-intro{padding-top:24px}.hero-shot{max-width:760px}@media(max-width:900px){.hero-intro{padding-top:0}.hero-shot{max-width:680px}}

/* Development status and contribution invitation. */
.development-note { padding: 18px 0; border-top: 1px solid #e8e8e8; font-size: 14px; line-height: 1.65; color: #666; }
.development-note p { margin: 0 0 6px; max-width: none; }
.development-note a { color: #287bc1; white-space: nowrap; }