:root{--ink:#202923;--green:#285b47;--muted:#56635b;--ground:#f5f7f4;--panel:#e7ece7;--white:#fff;--accent:#d8e5aa;--radius:8px;--small:14px;--body:17px;--sub:24px;--title:36px;--display:clamp(52px,6vw,90px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:88px}body{margin:0;background:var(--ground);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:var(--body);line-height:1.7}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,.button{min-height:46px;cursor:pointer;border:0;border-radius:var(--radius);padding:10px 18px;background:var(--panel);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:20px;transition:background .2s,transform .2s}button:hover,.button:hover{background:var(--accent);transform:translateY(-2px)}button:active,.button:active{transform:translateY(0)}button:disabled{opacity:.4;cursor:default;transform:none}a:hover{color:var(--green)}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--green);outline-offset:4px}sup{font-size:12px;white-space:nowrap;font-weight:400;color:inherit;margin-left:4px;vertical-align:baseline}p,h1,h2,h3,figure{margin:0}h1,h2,h3{font-weight:600;line-height:1.25;letter-spacing:-.035em}h2{font-size:var(--title)}h3{font-size:var(--sub)}.skip{position:fixed;left:16px;top:-80px;z-index:20;background:var(--accent);padding:10px}.skip:focus{top:16px}header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;gap:24px;background:var(--ground)}.brand{font-size:24px;font-weight:650;letter-spacing:-1px}header nav{display:flex;gap:30px}header nav a{font-size:var(--small)}.motion{font-size:var(--small);display:flex;align-items:center;gap:8px;cursor:pointer}.motion input{accent-color:var(--green);width:18px;height:18px}.board{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;margin:0 12px}.tile{border-radius:var(--radius);overflow:hidden;background:var(--panel)}.name-tile{grid-column:span 5;grid-row:span 2;background:var(--green);color:var(--white);padding:36px;display:flex;flex-direction:column;align-items:flex-start;gap:24px}.name-tile h1{font-size:var(--display);line-height:1.05}.name-tile .lead{font-size:clamp(32px,3vw,44px);line-height:1.35;letter-spacing:-.035em}.name-tile>p:not(.lead){font-size:var(--body);line-height:1.7}.light{background:var(--accent);color:var(--ink);margin-top:8px}.small{font-size:var(--small)}.calendar-tile{grid-column:span 7;background:var(--white);display:flex;flex-direction:column}.image-window{height:360px;overflow:hidden}.calendar-tile img{display:block;width:100%;height:auto;transform-origin:center 55%}.tile figcaption{font-size:var(--small);padding:12px 20px;color:var(--muted)}.statement-tile{grid-column:span 4;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}.statement-tile p{font-size:var(--sub);line-height:1.55}.statement-tile a,.role a,.device-copy a{font-size:var(--small);font-weight:600}.phone-tile{grid-column:span 3;height:245px;background:var(--white);position:relative}.phone-tile img{width:190px;display:block;margin:14px auto 0}.phone-tile figcaption{position:absolute;bottom:0;left:0;width:100%;background:var(--white)}.action-tile{grid-column:span 12;background:var(--accent);padding:24px 32px;display:flex;justify-content:space-between;align-items:center;gap:24px}.action-tile p{font-size:var(--sub);line-height:1.5}.route{display:flex;gap:20px;align-items:center}.route span{font-size:var(--body)}.about,.demo,.scope{margin:120px 32px}.section-intro{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-bottom:40px}.section-intro p{max-width:620px}.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.role{padding:32px;display:flex;flex-direction:column;gap:24px}.role p{max-width:580px}.role a{margin-top:auto}.feature-strip{display:flex;flex-wrap:wrap;gap:14px 30px;padding-top:26px;font-size:var(--small);color:var(--green)}.demo-top{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-bottom:32px}.demo-top p{margin-top:18px;color:var(--muted)}.demo-badge{font-size:var(--small);color:var(--muted)}.chapters{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}.chapters button{padding:16px 12px;font-size:var(--body);text-align:left;justify-content:space-between}.chapters button[aria-current=true]{background:var(--green);color:var(--white)}.chapters small{font-size:var(--small);opacity:.8}.player{display:grid;grid-template-columns:minmax(280px,4fr) minmax(0,8fr);gap:8px}.story{background:var(--white);padding:32px;border-radius:var(--radius);display:flex;flex-direction:column;min-width:0}.story-meta{display:flex;justify-content:space-between;gap:12px;font-size:var(--small);color:var(--muted);margin-bottom:32px}.story h3{font-size:clamp(24px,2.1vw,32px);margin-bottom:24px;line-height:1.35}.story p{line-height:1.85}.instruction{margin-top:32px;padding:20px;background:var(--panel);border-radius:var(--radius)}.instruction>span{font-size:var(--small);color:var(--green)}.instruction p{margin-top:8px}.story .note{margin-top:24px;font-size:var(--small);color:var(--muted)}.story .source{font-size:12px;color:var(--muted);margin-top:16px}.step-dots{display:flex;gap:8px;margin-top:auto;padding-top:30px;flex-wrap:wrap}.step-dots button{padding:0;width:36px;min-height:36px;border-radius:var(--radius);font-size:var(--small)}.step-dots button[aria-current=step]{background:var(--green);color:var(--white)}.visual{background:var(--panel);border-radius:var(--radius);overflow:hidden;min-width:0;display:flex;flex-direction:column}.stage{display:flex;gap:24px;align-items:center;justify-content:center;min-height:620px;padding:24px;overflow:hidden;flex:1}.screen-wrap{position:relative;display:inline-block;flex-shrink:0;line-height:0;max-width:100%}.screen-wrap img{display:block;max-width:100%;height:auto;max-height:580px;object-fit:contain}.stage.portrait .screen-wrap img{height:580px;width:auto;max-width:100%}.stage.landscape .screen-wrap{width:100%}.stage.landscape .screen-wrap img{width:100%}.stage.landscape .detail-panel{display:none}.screen-wrap #highlight{position:absolute;border:3px solid var(--green);border-radius:var(--radius);pointer-events:none;background:rgb(216 229 170 / .12);outline:4px solid rgb(255 255 255 / .75)}.detail-panel{flex:1;min-width:150px;max-width:360px}.detail-panel p{font-size:var(--sub);line-height:1.5;margin-bottom:24px}.detail-panel>span{font-size:var(--small);color:var(--muted);display:block;margin-top:14px}.crop{height:220px;overflow:hidden;position:relative;background:var(--white);border-radius:var(--radius)}.crop img{position:absolute;max-width:none}.visual-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 24px;background:var(--white);font-size:var(--small)}.visual-footer button{background:transparent;font-size:var(--small);padding:8px;min-height:44px;white-space:nowrap}.controls{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:16px}.step-controls,.extra-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.controls button,.controls label{font-size:var(--small)}.primary{background:var(--green);color:var(--white);min-width:110px}.primary:hover{color:var(--ink)}.extra-controls button{background:transparent}.extra-controls select{border:0;border-radius:4px;padding:8px;background:var(--panel);color:var(--ink)}.progress{height:4px;margin-top:16px;background:var(--panel);overflow:hidden}#progress-fill{height:100%;background:var(--green);transform:scaleX(0);transform-origin:left}.player-help{font-size:var(--small);color:var(--muted);margin-top:14px}.devices{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;margin:120px 12px}.device-copy{grid-column:span 4;padding:32px;display:flex;flex-direction:column;gap:28px;background:var(--green);color:var(--white)}.device-copy h2{font-size:var(--title)}.device-copy a{margin-top:auto}.device-copy a:hover{color:var(--accent)}.device-desktop{grid-column:span 6;background:var(--white);display:flex;flex-direction:column;justify-content:center}.device-desktop img{width:100%;height:auto}.device-phone{grid-column:span 2;background:var(--white)}.device-phone img{display:block;width:100%;height:auto}.scope h2{margin-bottom:32px}.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.scope details{background:var(--panel);border-radius:var(--radius);padding:24px}.scope summary{cursor:pointer;font-size:var(--body);font-weight:600;min-height:44px}.scope details p{margin-top:14px}.scope details a{display:inline-block;margin-top:18px;font-size:var(--small);color:var(--green)}footer{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:0 12px 12px;padding:24px;background:var(--ink);color:var(--white);border-radius:var(--radius);font-size:var(--small)}footer>a:first-child{font-size:24px}footer a:hover{color:var(--accent)}dialog{border:0;border-radius:var(--radius);padding:0;width:min(96vw,1500px);max-height:94vh;background:var(--ground);color:var(--ink)}dialog::backdrop{background:rgb(20 32 24 / .8)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px}.dialog-head p{font-size:var(--body)}.original-scroll{overflow:auto;max-height:calc(94vh - 150px);background:var(--panel);text-align:center}.original-scroll img{max-width:100%;height:auto;display:block;margin:auto}.original-scroll img.portrait-original{width:390px;max-width:100%}.dialog-hint{font-size:var(--small);padding:12px 24px}body:has(dialog[open]){overflow:hidden}.demo:fullscreen{background:var(--ground);overflow:auto;padding:24px;margin:0}.demo:fullscreen .demo-top{margin-bottom:16px}.demo:fullscreen .stage{min-height:540px}.demo:fullscreen .screen-wrap img{max-height:510px}.demo:fullscreen .stage.portrait .screen-wrap img{height:510px}
@media(min-width:1600px){main,header,footer{max-width:1660px;margin-left:auto;margin-right:auto}.image-window{height:410px}}
@media(max-width:1100px){.name-tile{padding:28px;gap:20px}.image-window{height:320px}.statement-tile{padding:24px}.route{gap:10px}.player{grid-template-columns:minmax(260px,4fr) minmax(0,7fr)}.story{padding:24px}.stage{gap:16px;padding:18px}.detail-panel{display:none}.stage.portrait .screen-wrap img{height:580px}.device-copy{grid-column:span 5}.device-desktop{grid-column:span 7}.device-phone{display:none}.device-copy h2{font-size:30px}}
@media(max-width:760px){html{scroll-padding-top:20px}header{height:auto;min-height:76px;padding:16px 20px;flex-wrap:wrap;gap:12px}header nav{order:3;width:100%;justify-content:space-between;gap:16px;padding-bottom:4px}.board{margin:0 8px;gap:8px}.name-tile{grid-column:span 12;grid-row:auto;padding:28px;gap:20px}.name-tile h1{font-size:60px}.name-tile .lead{font-size:36px}.name-tile .lead br{display:none}.name-tile>p:not(.lead) br{display:none}.calendar-tile{grid-column:span 12}.image-window{height:auto;max-height:350px}.statement-tile{grid-column:span 7;padding:22px;gap:24px}.statement-tile p{font-size:22px}.phone-tile{grid-column:span 5;height:270px}.phone-tile img{width:150px}.tile figcaption{padding:10px 16px}.phone-tile figcaption{font-size:12px}.action-tile{display:block;padding:24px}.action-tile p{font-size:24px}.action-tile p br{display:none}.route{margin-top:20px;gap:10px;flex-wrap:wrap}.route span{font-size:14px}.about,.demo,.scope{margin:80px 20px}h2{font-size:30px}.section-intro{display:block;margin-bottom:28px}.section-intro p{margin-top:24px}.role-grid{grid-template-columns:1fr}.role{padding:24px}.feature-strip{gap:12px 24px}.demo-top{display:block;margin-bottom:24px}.demo-top p{font-size:14px;margin-top:14px}.demo-badge{display:block;margin-top:14px}.chapters{grid-template-columns:1fr 1fr}.chapters button{padding:12px;font-size:16px;gap:8px}.player{grid-template-columns:1fr}.story{padding:24px;min-height:0}.story-meta{margin-bottom:20px}.story h3{font-size:26px;margin-bottom:18px}.story p{font-size:16px}.instruction{margin-top:20px;padding:16px}.story .note{margin-top:18px}.step-dots{padding-top:20px}.stage{min-height:0;padding:20px 12px}.stage.portrait .screen-wrap img{height:auto;max-height:none;width:290px}.stage.landscape .screen-wrap img{max-height:none}.visual-footer{padding:12px;gap:8px;flex-wrap:wrap}.visual-footer>span{font-size:12px}.visual-footer button{font-size:14px}.controls{gap:12px}.step-controls{display:grid;grid-template-columns:1fr 1fr 1fr;width:100%}.step-controls button{padding:10px 8px;font-size:14px;gap:4px;min-width:0}.extra-controls{justify-content:space-between;width:100%;gap:4px}.extra-controls button{padding:8px 4px}.extra-controls label{font-size:12px}.extra-controls select{padding:8px 4px;font-size:12px}.devices{margin:80px 8px;grid-template-columns:1fr}.device-copy,.device-desktop{grid-column:auto}.device-copy{padding:24px}.device-copy h2{font-size:30px}.device-phone{display:none}.scope-grid{grid-template-columns:1fr}.scope details{padding:20px}.scope summary{font-size:16px}footer{margin:0 8px 8px;padding:24px;display:flex;flex-wrap:wrap}footer>span{width:100%;order:3}.dialog-head{padding:12px;align-items:start}.dialog-head p{font-size:14px}.dialog-head button{font-size:14px;white-space:nowrap}.dialog-hint{padding:12px}.demo:fullscreen{padding:16px}.demo:fullscreen .stage.portrait .screen-wrap img{height:auto;max-height:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}body.reduced{scroll-behavior:auto}body.reduced *{transition:none!important}

/* Final composition refinements after browser review. */
.phone-tile img{height:auto}.name-tile .lead{font-size:36px}.name-tile>p:not(.lead){font-size:24px}sup{font-size:14px}.story .source{font-size:14px}.story-meta{margin:24px 0 0}.step-dots{margin-top:0;padding-top:16px}header{padding-left:24px;padding-right:24px}.board{margin-left:24px;margin-right:24px}.about,.demo,.scope{margin-left:24px;margin-right:24px}.devices{margin-left:24px;margin-right:24px}footer{margin-left:24px;margin-right:24px}
@media(max-width:760px){header{padding-left:20px;padding-right:20px}.board,.about,.demo,.scope,.devices,footer{margin-left:20px;margin-right:20px}.name-tile .lead{font-size:30px}.name-tile>p:not(.lead){font-size:17px}.statement-tile p{font-size:24px}.phone-tile figcaption,.visual-footer>span,.extra-controls label,.extra-controls select,.dialog-head p,.dialog-head button{font-size:14px}.story h3{font-size:24px}.story p{font-size:17px}.story .source,.story .note{font-size:14px}.chapters button,.scope summary{font-size:17px}.step-controls button{font-size:14px}}

.phone-tile img{margin-top:-70px}@media(max-width:760px){.phone-tile img{margin-top:-45px}}

html{scroll-padding-top:20px}.playback-bar{position:sticky;bottom:0;z-index:3;background:var(--ground);padding:10px 0}.controls{margin-top:0}.stage{min-height:520px}.screen-wrap img{max-height:480px}.stage.portrait .screen-wrap img{height:480px}.story{padding:24px}.story h3{font-size:28px;margin-bottom:18px}.instruction{margin-top:20px;padding:16px}.story .note{margin-top:16px}.story .source{margin-top:12px}.story-meta{margin-top:16px}.progress{margin-top:10px}.player-help{margin-top:8px}.demo:fullscreen .stage{min-height:500px}.demo:fullscreen .screen-wrap img{max-height:460px}.demo:fullscreen .stage.portrait .screen-wrap img{height:460px}@media(max-width:760px){.stage{min-height:0}.stage.portrait .screen-wrap img{height:auto;max-height:none}.stage.landscape .screen-wrap img{max-height:none}.story h3{font-size:24px}.playback-bar{padding:8px 0}.player-help{font-size:14px}.demo:fullscreen .stage.portrait .screen-wrap img{height:auto;max-height:none}}

.playback-bar{position:static;padding:8px 0 20px}.demo:fullscreen .demo-top p,.demo:fullscreen .demo-badge,.demo:fullscreen .player-help{display:none}.demo:fullscreen .demo-top{margin-bottom:12px}.demo:fullscreen .playback-bar{padding-bottom:12px}