:root {
  --bg: #fbfbfa;
  --surface: #fff;
  --ink: #111;
  --muted: #646562;
  --quiet: #979994;
  --line: rgba(17,17,17,.12);
  --blue: #142e90;
  --orange: #ff5a00;
  --dark: #0b0d0e;
  --ease: cubic-bezier(.22,1,.36,1);
  --font: "兰亭黑-简", "Lantinghei SC", "PingFang SC", "Microsoft YaHei", "Geist Sans", "SF Pro Display", system-ui, sans-serif;
  --display: "Outfit", "兰亭黑-简", "Lantinghei SC", "PingFang SC", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: var(--font); }
body { -webkit-font-smoothing: antialiased; }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.topbar { position: fixed; z-index: 20; inset: 0 0 auto; height: 76px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(22px,5vw,72px); color: #fff; border-bottom: 1px solid rgba(255,255,255,.2); }
.brand { width: 138px; height: 36px; display: block; }
.brand img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.brand__light { display: none !important; }
.brand__dark { display: block !important; }
body.is-light .brand__light { display: block !important; }
body.is-light .brand__dark { display: none !important; }
.topbar__title { position: absolute; left: 50%; transform: translateX(-50%); font: 500 12px/1.2 var(--display); letter-spacing: .08em; opacity: .8; }
.topbar__tools { display: flex; align-items: center; gap: 18px; font: 500 12px/1 var(--display); letter-spacing: .08em; }
.icon-button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.42); border-radius: 7px; background: transparent; color: inherit; font-size: 17px; transition: .25s var(--ease); }
.icon-button:hover, .icon-button:focus-visible { border-color: currentColor; transform: translateY(-2px); }
body.is-light .topbar { color: var(--ink); border-color: var(--line); }
body.is-light .icon-button { border-color: var(--line); }
#deck { width: 100%; height: 100%; outline: none; }
.slide { position: absolute; inset: 0; visibility: hidden; opacity: 0; overflow: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.slide.is-active { visibility: visible; opacity: 1; transition-delay: 0s; }
.slide__inner { position: relative; width: min(1248px, calc(100% - 144px)); height: 100%; margin: auto; padding: 140px 0 96px; }
.kicker { display: block; color: var(--blue); font: 600 11px/1.5 var(--display); letter-spacing: .14em; text-transform: uppercase; }
.kicker--light { color: rgba(255,255,255,.78); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { letter-spacing: 0; }
h1, h2 { font-weight: 600; line-height: 1.12; }
h2 { font-size: clamp(38px, 4.2vw, 58px); }
h2 strong, h2 em { color: var(--orange); font-style: normal; font-weight: 600; }
.lede { max-width: 550px; color: var(--muted); font-size: 16px; line-height: 1.85; }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 26px; padding: 12px 17px 12px 20px; border: 1px solid var(--line); border-radius: 7px; text-decoration: none; font-size: 13px; transition: .25s var(--ease); }
.button span { font: 18px/1 var(--display); transition: transform .25s var(--ease); }
.button:hover, .button:focus-visible { transform: translateY(-2px); border-color: rgba(20,46,144,.4); }
.button:hover span { transform: translateX(4px); }
.button--light { border-color: rgba(255,255,255,.7); background: #fff; color: var(--ink); }
.button--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.button--quiet { background: transparent; color: var(--ink); }
.cover__image, .close__image, .close__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background-position: center; background-size: cover; transform: scale(1.03); transition: transform 1.5s var(--ease); }
.slide.is-active .cover__image, .slide.is-active .close__image, .slide.is-active .close__video { transform: scale(1); }
.cover__image { background-image: url('assets/hero-spatial-world.webp'); }
.close__video { pointer-events: none; }
.cover__veil, .close__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,8,10,.84), rgba(5,8,10,.25) 62%, rgba(5,8,10,.15)), linear-gradient(0deg, rgba(5,8,10,.5), transparent 50%); }
.cover__content, .close__content { position: absolute; z-index: 1; left: max(24px, calc((100% - 1248px)/2)); top: 21%; color: #fff; }
.cover__content h1 { margin: 20px 0 17px; font-size: clamp(68px, 9vw, 132px); line-height: .96; }
.cover__content h1 em, .close__content h2 em { color: #f4ad72; }
.cover__subtitle { font-size: 18px; letter-spacing: .04em; }
.cover__lead { margin: 34px 0 30px; color: rgba(255,255,255,.84); font-size: 16px; line-height: 1.85; }
.cover__footer, .close__footer { position: absolute; z-index: 1; left: max(24px, calc((100% - 1248px)/2)); right: max(24px, calc((100% - 1248px)/2)); bottom: 34px; display: flex; justify-content: space-between; color: rgba(255,255,255,.65); font: 500 10px/1.5 var(--display); letter-spacing: .12em; }
.scroll-cue { position: absolute; z-index: 1; right: clamp(24px,5vw,72px); top: 50%; display: flex; align-items: center; gap: 12px; writing-mode: vertical-rl; border: 0; background: transparent; color: rgba(255,255,255,.75); font-size: 11px; letter-spacing: .14em; }
.scroll-cue span { width: 1px; height: 58px; background: rgba(255,255,255,.7); }
.heading { display: grid; align-content: start; gap: 20px; }
.heading h2 { margin-top: 5px; }
.why-layout { display: grid; grid-template-columns: .74fr 1.26fr; grid-template-rows: auto auto; gap: 20px 64px; align-content: center; }
.why-layout .heading { grid-column: 1; grid-row: 1 / span 2; }
.why-stage { grid-column: 2; grid-row: 1; position: relative; overflow: hidden; border-radius: 8px; align-self: center; background: var(--surface); }
.why-stage > video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; pointer-events: none; }
.why-stage::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: linear-gradient(0deg, rgba(5,8,10,.58), transparent); pointer-events: none; }
.why-stage .visual-caption { z-index: 1; }
.worldpath { grid-column: 2; grid-row: 2; align-self: center; display: grid; grid-template-columns: auto 1fr auto 1fr auto; grid-template-areas: "g1 . g2 . ." "t1 . t2 . t3" "d1 l1 d2 l2 d3" "c1 . c2 . c3"; row-gap: 13px; align-items: center; }
.wp-group { color: var(--orange); font: 700 13px/1.4 var(--display); letter-spacing: .02em; white-space: nowrap; }
.wp-g1 { grid-area: g1; justify-self: center; }
.wp-g2 { grid-area: g2; justify-self: center; }
.wp-tag { justify-self: center; background: #111; color: #fff; padding: 7px 18px; border-radius: 5px; font-size: 16px; font-weight: 600; white-space: nowrap; }
.wp-t1 { grid-area: t1; } .wp-t2 { grid-area: t2; } .wp-t3 { grid-area: t3; }
.wp-dot { justify-self: center; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px rgba(255,90,0,.16); }
.wp-d1 { grid-area: d1; } .wp-d2 { grid-area: d2; } .wp-d3 { grid-area: d3; }
.wp-link { position: relative; align-self: center; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 0 6px; }
.wp-l1 { grid-area: l1; } .wp-l2 { grid-area: l2; }
.wp-link em { font-style: normal; color: var(--muted); font-size: 10px; line-height: 1.55; text-align: center; }
.wp-link::after { content: ""; border-top: 2px dashed rgba(17,17,17,.32); }
.wp-link::before { content: ""; position: absolute; right: 3px; bottom: 2px; width: 7px; height: 7px; border-top: 2px solid rgba(17,17,17,.45); border-right: 2px solid rgba(17,17,17,.45); transform: rotate(45deg); }
.wp-cap { justify-self: center; background: var(--surface); border: 1px solid rgba(17,17,17,.22); border-radius: 3px; padding: 7px 13px; font-size: 11px; color: #3c3c3c; white-space: nowrap; }
.wp-c1 { grid-area: c1; } .wp-c2 { grid-area: c2; } .wp-c3 { grid-area: c3; }
.visual-caption { position: absolute; left: 22px; right: 22px; bottom: 19px; display: flex; gap: 12px; align-items: center; color: #fff; font: 500 12px/1.2 var(--display); }
.visual-caption b { color: #f4ad72; font-size: 18px; }
.why-refs { grid-column: 1; grid-row: 2; align-self: end; display: grid; gap: 9px; padding-top: 16px; border-top: 1px solid var(--line); }
.why-refs > span { color: var(--orange); font: 600 11px/1.5 var(--display); letter-spacing: .07em; }
.why-refs a { color: var(--muted); font-size: 12.5px; line-height: 1.55; text-decoration: none; }
.why-refs a b { margin-right: 8px; color: var(--blue); font-weight: 600; }
.why-refs a:hover { color: var(--ink); }
.ladder-layout, .capabilities-layout, .experience-layout, .loop-layout, .cases-layout, .question-layout, .about-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: 90px; align-items: center; }
.ladder { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 12px; min-height: 360px; padding-bottom: 60px; }
.ladder:before { content: ''; position: absolute; left: 0; right: 0; bottom: 58px; height: 1px; background: var(--line); }
.ladder-step { position: relative; min-height: 160px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 0 10px 20px; border: 0; border-left: 1px solid var(--line); background: transparent; text-align: left; color: var(--ink); transition: .35s var(--ease); }
.ladder-step:after { content: ''; position: absolute; left: -1px; bottom: 0; width: 2px; height: 100%; background: var(--blue); transform: scaleY(.12); transform-origin: bottom; transition: transform .4s var(--ease); }
.ladder-step:nth-child(2) { min-height: 190px; }.ladder-step:nth-child(3) { min-height: 220px; }.ladder-step:nth-child(4) { min-height: 265px; }.ladder-step:nth-child(5) { min-height: 315px; }
.ladder-step:hover, .ladder-step.is-active { color: var(--blue); transform: translateY(-4px); }.ladder-step:hover:after, .ladder-step.is-active:after { transform: scaleY(1); }
.ladder-step span { font: 500 11px/1 var(--display); color: var(--orange); }.ladder-step strong { font-size: 16px; font-weight: 600; white-space: nowrap; }.ladder-step small { min-height: 38px; color: var(--muted); font-size: 11px; line-height: 1.6; }.ladder-step i { position: absolute; top: 14px; right: 9px; font-style: normal; font-size: 19px; opacity: 0; transition: opacity .3s; }.ladder-step:hover i, .ladder-step.is-active i { opacity: 1; }
.ladder-detail, .capability-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.capability-map { position: relative; min-height: 500px; }
.capability-map:before, .capability-map:after { content: ''; position: absolute; background: var(--line); }.capability-map:before { width: 1px; top: 8%; bottom: 8%; left: 50%; }.capability-map:after { height: 1px; left: 8%; right: 8%; top: 50%; }
.capability-center { position: absolute; z-index: 2; left: 50%; top: 50%; width: 178px; height: 178px; transform: translate(-50%,-50%); display: grid; place-content: center; border: 1px solid var(--blue); border-radius: 50%; background: var(--surface); text-align: center; box-shadow: 0 0 0 14px rgba(20,46,144,.04); }.capability-center b { font-size: 21px; font-weight: 600; }.capability-center span { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.capability { position: absolute; z-index: 2; width: 136px; min-height: 48px; padding: 12px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--ink); font-size: 13px; transition: .3s var(--ease); }.capability:hover, .capability:focus-visible { border-color: rgba(20,46,144,.5); color: var(--blue); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(20,46,144,.1); }.capability--one { left: 5%; top: 18%; }.capability--two { right: 5%; top: 18%; }.capability--three { left: 4%; bottom: 20%; }.capability--four { right: 4%; bottom: 20%; }.capability--five { left: 30%; top: 2%; }.capability--six { right: 30%; bottom: 2%; }
.slide--why, .slide--ladder, .slide--capabilities, .slide--experience, .slide--loop, .slide--about, .slide--cases, .slide--question, .slide--decision { background: var(--bg); }.slide--why { background: #f1f3ef; }
.industry-image { position: absolute; inset: 0; background: var(--image) center/cover; transform: scale(1.03); transition: transform 1.3s var(--ease); }.slide.is-active .industry-image { transform: scale(1); }.industry-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transform: scale(1.03); transition: transform 1.3s var(--ease); }.slide.is-active .industry-video { transform: scale(1); }.industry-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(7,9,10,.82), rgba(7,9,10,.33) 64%, rgba(7,9,10,.24)), linear-gradient(0deg, rgba(7,9,10,.48), transparent 45%); }.industry-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 10vw; align-items: center; }.industry-copy { color: #fff; max-width: 600px; }.industry-copy h2 { margin: 22px 0 20px; font-size: clamp(40px,4.4vw,64px); }.industry-copy p { max-width: 490px; color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.9; }.accordion { display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.4); }.accordion-item { min-height: 89px; display: grid; grid-template-columns: 42px 1fr; gap: 0 16px; align-content: center; padding: 17px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff; text-align: left; }.accordion-item span { grid-row: 1 / span 2; color: #f4ad72; font: 500 11px/1.4 var(--display); }.accordion-item b { font-size: 18px; font-weight: 600; }.accordion-item small { max-height: 0; overflow: hidden; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.6; opacity: 0; transition: .4s var(--ease); }.accordion-item.is-open small, .accordion-item:hover small { max-height: 60px; margin-top: 7px; opacity: 1; }.accordion-item:hover b, .accordion-item.is-open b { color: #f4ad72; }
.experience-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }.experience-card { min-height: 155px; display: flex; flex-direction: column; justify-content: flex-end; gap: 7px; padding: 22px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); transition: .3s var(--ease); }.experience-card:hover { border-color: rgba(20,46,144,.32); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(20,46,144,.1); }.experience-card--large { grid-column: span 2; position: relative; min-height: 280px; overflow: hidden; color: #fff; }.experience-card--large:after { content:''; position:absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.74), transparent 70%); }.experience-card--large img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }.experience-card--large:hover img { transform: scale(1.04); }.experience-card--large div { position: relative; z-index: 1; }.experience-card span { color: var(--blue); font: 600 11px/1.4 var(--display); letter-spacing: .08em; }.experience-card--large span { color: #f4ad72; }.experience-card h3 { font-size: 19px; font-weight: 600; }.experience-card__symbol { color: var(--orange); font: 500 36px/1 var(--display); }.loop-diagram { position: relative; min-height: 500px; }.loop-diagram:before { content:''; position:absolute; inset: 13% 16%; border: 1px dashed rgba(20,46,144,.35); border-radius: 50%; animation: orbit 24s linear infinite; }.loop-center { position: absolute; left: 50%; top: 50%; width: 144px; height: 144px; transform: translate(-50%,-50%); display: grid; place-items: center; border: 1px solid var(--blue); border-radius: 50%; background: var(--surface); color: var(--blue); text-align: center; box-shadow: 0 0 0 12px rgba(20,46,144,.04); }.loop-center strong { font-size: 21px; line-height: 1.45; }.loop-node { position:absolute; width: 126px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }.loop-node b { display:block; font-size: 15px; font-weight: 600; }.loop-node span { display:block; margin-top:5px; color:var(--muted); font-size:11px; }.loop-node--top { left: 50%; top: 0; transform: translateX(-50%); }.loop-node--right { right: 0; top: 26%; }.loop-node--bottom-right { right: 11%; bottom: 3%; }.loop-node--bottom-left { left: 11%; bottom: 3%; }.loop-node--left { left: 0; top: 26%; }.loop-arrow { position:absolute; color:var(--orange); font: 22px/1 var(--display); }.loop-arrow--one { right: 13%; top: 37%; }.loop-arrow--two { right: 29%; bottom: 12%; }.loop-arrow--three { left: 13%; bottom: 12%; }.loop-arrow--four { left: 29%; top: 37%; }.slide--close .close__content { top: 25%; }.close__content h2 { margin: 20px 0 24px; color:#fff; font-size: clamp(56px,7vw,100px); line-height:.98; }.close__content p { margin-bottom: 28px; color:rgba(255,255,255,.84); font-size:16px; line-height:1.9; }.close__footer { justify-content: flex-end; }
.about-layout { gap: 92px; }.about-system { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.about-line { min-height: 142px; display: flex; flex-direction: column; justify-content: space-between; padding: 17px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.about-line span { color: var(--orange); font: 500 11px/1 var(--display); }.about-line b { font-size: 18px; font-weight: 600; }.about-line small { color: var(--muted); font-size: 11px; line-height: 1.6; }.about-partnership { grid-column: 1 / -1; padding: 17px 0 0; color: var(--muted); font-size: 11px; line-height: 1.7; }.cover__affiliation { letter-spacing: .02em; }.cover__footer { bottom: 57px; }
.cases-layout { gap: 72px; }.case-list { display: grid; gap: 0; }.case-row { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 21px 0 20px; border-top: 1px solid var(--line); }.case-row__index { color: var(--orange); font: 500 11px/1.5 var(--display); }.case-row span { color: var(--blue); font: 600 11px/1.5 var(--display); letter-spacing: .06em; }.case-row h3 { margin: 8px 0 7px; font-size: 19px; font-weight: 600; }.case-row p { color: var(--muted); font-size: 12px; line-height: 1.75; }.case-sources { display: flex; flex-wrap: wrap; gap: 7px 18px; padding-top: 17px; border-top: 1px solid var(--line); }.case-sources a { color: var(--blue); font-size: 11px; text-decoration: none; }.case-sources a:hover { text-decoration: underline; }
.question-layout { gap: 100px; }.relation-map { position: relative; min-height: 500px; }.relation-map:before, .relation-map:after { content: ''; position: absolute; background: rgba(20,46,144,.14); }.relation-map:before { left: 50%; top: 11%; bottom: 11%; width: 1px; }.relation-map:after { left: 11%; right: 11%; top: 50%; height: 1px; }.relation-center { position: absolute; left: 50%; top: 50%; z-index: 2; width: 166px; height: 166px; transform: translate(-50%,-50%); display: grid; place-content: center; border: 1px solid var(--blue); border-radius: 50%; background: var(--surface); color: var(--blue); text-align: center; box-shadow: 0 0 0 15px rgba(20,46,144,.04); }.relation-center b { font-size: 21px; }.relation-center span { margin-top: 7px; color: var(--muted); font-size: 11px; }.relation-node { position: absolute; z-index: 2; width: 108px; padding: 14px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); text-align: center; font-size: 16px; font-weight: 600; }.relation-node small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; font-weight: 400; }.relation-node--person { left: 8%; top: 18%; }.relation-node--object { right: 8%; top: 18%; }.relation-node--path { left: 4%; bottom: 18%; }.relation-node--time { right: 4%; bottom: 18%; }.relation-node--behavior { left: 50%; bottom: 1%; transform: translateX(-50%); }
.decision-panel { min-height: 430px; display: grid; align-content: center; gap: 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.decision-line { display: grid; grid-template-columns: 1.2fr 1fr 24px; align-items: center; min-height: 80px; padding: 0 18px; border-bottom: 1px solid var(--line); }.decision-line span { color: var(--muted); font-size: 13px; }.decision-line b { color: var(--ink); font-size: 21px; font-weight: 600; }.decision-line i { color: var(--orange); font: 22px/1 var(--display); font-style: normal; }.decision-line.is-focus { background: var(--blue); border-color: var(--blue); color: #fff; }.decision-line.is-focus span, .decision-line.is-focus b { color: #fff; }.decision-examples { display: flex; flex-wrap: wrap; gap: 8px 15px; padding: 21px 18px 3px; color: var(--muted); font-size: 11px; line-height: 1.6; }.decision-examples span { position: relative; padding-left: 12px; }.decision-examples span:before { content: ''; position: absolute; left: 0; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: var(--orange); }
.slide--co-create .close__content { top: 17%; }.co-create-layout { position: relative; display: block; width: min(1248px, calc(100% - 144px)); height: 100%; margin: auto; padding: 0; }.co-create-layout .close__content { left: 0; right: auto; max-width: 46%; }.co-create-layout .close__content h2 { font-size: clamp(48px, 6.2vw, 86px); }.co-create-canvas { position: absolute; right: 0; top: 28%; width: min(500px, 38%); display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255,255,255,.44); border-left: 1px solid rgba(255,255,255,.44); }.co-create-canvas > div { min-height: 148px; display: flex; flex-direction: column; justify-content: space-between; padding: 17px; border-right: 1px solid rgba(255,255,255,.44); border-bottom: 1px solid rgba(255,255,255,.44); color: #fff; }.co-create-canvas span { color: #f4ad72; font: 500 11px/1 var(--display); }.co-create-canvas b { font-size: 18px; font-weight: 600; }.co-create-canvas small { color: rgba(255,255,255,.7); font-size: 11px; line-height: 1.6; }.slide--co-create .close__footer { left: max(24px, calc((100% - 1248px)/2)); right: max(24px, calc((100% - 1248px)/2)); justify-content: flex-end; }
.wechat-qr { position: absolute; right: 0; bottom: 7%; display: flex; align-items: center; gap: 13px; padding: 8px 0; color: #fff; }.wechat-qr img { display: block; width: 76px; height: 76px; padding: 4px; border-radius: 3px; background: #fff; }.wechat-qr div { display: grid; gap: 5px; max-width: 190px; }.wechat-qr b { font-size: 14px; font-weight: 600; }.wechat-qr small { color: rgba(255,255,255,.72); font-size: 10px; line-height: 1.6; }.miniapp-qr { position: absolute; left: 0; bottom: 7%; display: flex; align-items: center; gap: 13px; padding: 8px 0; color: #fff; }.miniapp-qr img { display: block; width: 76px; height: 76px; padding: 4px; border-radius: 3px; background: #fff; }.miniapp-qr div { display: grid; gap: 5px; max-width: 190px; }.miniapp-qr b { font-size: 14px; font-weight: 600; }.miniapp-qr small { color: rgba(255,255,255,.72); font-size: 10px; line-height: 1.6; }
.chapter-nav { position: fixed; z-index: 21; left: clamp(22px,5vw,72px); right: clamp(22px,5vw,72px); bottom: 25px; display: flex; gap: 16px; }.chapter-nav button { width: 18px; height: 18px; padding: 0; border: 0; border-bottom: 2px solid rgba(255,255,255,.42); background: transparent; color: rgba(255,255,255,.6); font: 500 9px/1 var(--display); transition: .25s; }.chapter-nav button:hover, .chapter-nav button.is-active { color: currentColor; border-color: var(--orange); }.chapter-nav.is-light button { color: var(--muted); border-color: var(--line); }.chapter-nav.is-light button.is-active { color: var(--ink); border-color: var(--orange); }
.overview { position: fixed; z-index: 60; inset: 0; overflow: auto; padding: 112px max(24px, calc((100% - 1248px)/2)); background: #f1f1ee; }.overview__head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 36px; }.overview__head h2 { font-size: 36px; }.overview__head .icon-button { color:var(--ink); border-color:var(--line); }.overview__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }.overview__item { min-height: 145px; padding: 20px; border:1px solid var(--line); border-radius:8px; background:#fff; text-align:left; transition:.25s var(--ease); }.overview__item:hover { transform:translateY(-3px); border-color:rgba(20,46,144,.35); box-shadow:0 14px 28px rgba(20,46,144,.08); }.overview__item span { color:var(--orange); font: 500 11px/1 var(--display); }.overview__item h3 { margin-top:25px; font-size:18px; font-weight:600; }.overview__item p { margin-top:7px; color:var(--muted); font-size:12px; }
.blank-screen { position: fixed; z-index: 90; inset: 0; background: #05070a; cursor: none; }
.mobile-gate { position: fixed; z-index: 100; inset: 0; display:grid; place-items:center; padding:22px; background:rgba(0,0,0,.55); }.mobile-gate[hidden], .overview[hidden] { display: none; }.mobile-gate__panel { width:min(420px,100%); padding:30px; border-radius:8px; background:#fff; }.mobile-gate__panel h2 { margin:15px 0 13px; font-size:30px; }.mobile-gate__panel p { color:var(--muted); font-size:14px; line-height:1.8; }.mobile-gate__actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }.mobile-gate__actions .button { flex:1; min-width:145px; gap:8px; }.mobile-gate__panel small { display:block; min-height:17px; margin-top:12px; color:var(--blue); font-size:12px; }
.reveal { opacity: 0; transform: translateY(18px); }.slide.is-active .reveal { animation: reveal .72s var(--ease) forwards; }.slide.is-active .reveal:nth-child(2) { animation-delay: .1s; }.slide.is-active .reveal:nth-child(3) { animation-delay: .18s; }.slide.is-active .reveal:nth-child(4) { animation-delay: .26s; }
@keyframes reveal { to { opacity:1; transform:none; } } @keyframes orbit { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .reveal { opacity:1; transform:none; } }
@media (max-width: 980px) { .slide__inner { width: calc(100% - 64px); padding-top: 110px; }.why-layout, .ladder-layout, .capabilities-layout, .industry-layout, .experience-layout, .loop-layout, .cases-layout, .question-layout, .about-layout { grid-template-columns:1fr; gap: 32px; align-content:center; }.worldpath { grid-column:1; grid-row: auto; }.why-layout .heading { grid-row: auto; }.why-stage { grid-column:1; grid-row: auto; }.why-refs { grid-column:1; grid-row: auto; align-self:auto; }.ladder { min-height: 300px; }.capability-map { min-height: 420px; }.industry-copy h2 { font-size: 46px; }.accordion { max-width:650px; }.experience-layout .heading { align-self:end; }.experience-gallery { max-width:700px; }.loop-diagram { min-height:390px; }.about-layout, .cases-layout, .question-layout { gap: 28px; }.about-system { max-width: 700px; }.relation-map { min-height: 380px; }.decision-panel { min-height: 350px; }.co-create-layout { width: calc(100% - 64px); }.co-create-canvas { width: min(500px, 46%); }.overview__grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 620px) { .topbar { height: 62px; padding:0 18px; }.brand { width:105px; height:28px; }.topbar__title { display:none; }.topbar__tools { gap:8px; font-size:10px; }.icon-button { width:29px; height:29px; }.slide__inner { width:calc(100% - 40px); padding:88px 0 70px; }.kicker { font-size:10px; }.lede { font-size:14px; line-height:1.75; }.cover__content, .close__content { left:20px; right:20px; top:18%; }.cover__content h1 { font-size:72px; }.cover__subtitle { font-size:14px; }.cover__lead { margin:26px 0; font-size:14px; }.cover__footer, .close__footer { left:20px; right:20px; bottom:24px; font-size:8px; }.cover__footer span:last-child { display:none; }.why-layout, .ladder-layout, .capabilities-layout, .industry-layout, .experience-layout, .loop-layout { gap:22px; }.why-layout { align-content:start; }.why-stage { height:190px; }.why-stage > video { height:100%; object-fit:cover; }.worldpath { row-gap: 9px; }.wp-cap { white-space:normal; text-align:center; }.wp-link em { display:none; }.wp-tag { font-size: 12px; padding: 5px 9px; }.wp-group { font-size: 10px; }.wp-cap { font-size: 8.5px; padding: 5px 7px; }.wp-link em { font-size: 8px; }.wp-link { padding: 0 2px; }.wp-dot { width: 9px; height: 9px; box-shadow: 0 0 0 3px rgba(255,90,0,.16); }.why-refs { gap:6px; padding-top:11px; }.why-refs a { font-size:11px; }.ladder-layout .heading { margin-bottom:12px; }.ladder { min-height:330px; gap:3px; padding-bottom:50px; }.ladder-step { min-height:120px; padding:0 4px 14px; }.ladder-step:nth-child(2) { min-height:145px; }.ladder-step:nth-child(3) { min-height:175px; }.ladder-step:nth-child(4) { min-height:215px; }.ladder-step:nth-child(5) { min-height:260px; }.ladder-step strong { font-size:12px; white-space:normal; }.ladder-step small { font-size:9px; }.ladder-step i { display:none; }.ladder-detail { font-size:11px; }.capability-map { min-height:350px; }.capability-center { width:125px; height:125px; }.capability-center b { font-size:17px; }.capability-center span { font-size:9px; }.capability { width:105px; min-height:41px; padding:8px 6px; font-size:10px; }.capability--one { left:0; top:15%; }.capability--two { right:0; top:15%; }.capability--three { left:0; bottom:15%; }.capability--four { right:0; bottom:15%; }.capability--five { left:23%; top:0; }.capability--six { right:23%; bottom:0; }.capability-copy { font-size:10px; }.industry-layout { align-content:center; }.industry-copy h2 { margin:14px 0; font-size:39px; }.industry-copy p { font-size:14px; line-height:1.75; }.accordion-item { min-height:74px; }.accordion-item b { font-size:15px; }.accordion-item small { font-size:11px; }.experience-gallery { grid-template-columns:1fr 1fr; gap:8px; }.experience-card { min-height:115px; padding:14px; }.experience-card--large { min-height:185px; }.experience-card h3 { font-size:15px; }.experience-card__symbol { font-size:27px; }.loop-diagram { min-height:310px; }.loop-diagram:before { inset:12% 12%; }.loop-center { width:100px; height:100px; }.loop-center strong { font-size:15px; }.loop-node { width:92px; padding:8px; }.loop-node b { font-size:11px; }.loop-node span { font-size:9px; }.loop-arrow { font-size:16px; }.close__content h2 { font-size:60px; }.close__content p { font-size:14px; }.chapter-nav { left:18px; right:18px; bottom:14px; justify-content:space-between; gap:3px; }.chapter-nav button { width:15px; font-size:8px; }.overview { padding:82px 18px; }.overview__grid { grid-template-columns:1fr; gap:8px; }.overview__item { min-height:82px; padding:14px; }.overview__item h3 { margin-top:12px; font-size:16px; }.overview__item p { display:none; } }

@media (max-width: 620px) {
  .about-layout, .cases-layout, .question-layout { gap: 22px; }
  .about-layout, .cases-layout { align-content: start; }
  .about-system { grid-template-columns: 1fr 1fr; }
  .about-line { min-height: 98px; padding: 11px; }
  .about-line b { font-size: 13px; }
  .about-line small { font-size: 9px; }
  .about-partnership { padding-top: 11px; font-size: 9px; }
  .cover__affiliation { max-width: 280px; line-height: 1.6; }
  .case-row { grid-template-columns: 29px 1fr; gap: 10px; padding: 13px 0; }
  .case-row h3 { font-size: 16px; }
  .case-row p { font-size: 11px; }
  .case-sources { gap: 6px 12px; padding-top: 11px; }
  .case-sources a { font-size: 9px; }
  .relation-map { min-height: 290px; }
  .relation-center { width: 108px; height: 108px; }
  .relation-center b { font-size: 15px; }
  .relation-center span { font-size: 9px; }
  .relation-node { width: 77px; padding: 8px 4px; font-size: 12px; }
  .relation-node small { font-size: 8px; }
  .relation-node--person { left: 0; top: 13%; }.relation-node--object { right: 0; top: 13%; }
  .relation-node--path { left: 0; bottom: 13%; }.relation-node--time { right: 0; bottom: 13%; }.relation-node--behavior { bottom: 0; }
  .decision-panel { min-height: 260px; }
  .decision-line { min-height: 57px; grid-template-columns: 1fr 1fr 18px; padding: 0 10px; }
  .decision-line span { font-size: 10px; }.decision-line b { font-size: 14px; }.decision-line i { font-size: 16px; }
  .decision-examples { padding: 12px 10px 0; font-size: 9px; }
  .salon-visual { max-width: none; }
  .salon-chips { gap: 6px; margin-top: 12px; }
  .salon-chips span { padding: 6px 10px; font-size: 10px; }
  .salon-note { font-size: 11px; }
  .about-steps { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .about-steps > div { padding: 10px; }
  .about-steps b { font-size: 12px; }
  .about-steps small { font-size: 9px; }
  .about-partnership { margin-top: 12px; }
  .co-create-layout { width: calc(100% - 40px); }
  .co-create-layout .close__content { top: 14%; left: 0; right: 0; }
  .co-create-layout .close__content h2 { font-size: 47px; }.co-create-layout .close__content p { font-size: 13px; }
  .co-create-canvas { left: 0; right: 0; top: auto; bottom: 16%; width: 100%; }
  .co-create-canvas > div { min-height: 92px; padding: 11px; }.co-create-canvas b { font-size: 13px; }.co-create-canvas small { font-size: 9px; }
  .wechat-qr { right: 0; bottom: 3%; gap: 8px; }.wechat-qr img { width: 58px; height: 58px; padding: 3px; }.wechat-qr div { gap: 2px; max-width: 96px; }.wechat-qr b { font-size: 10px; }.wechat-qr small { display: none; }.miniapp-qr { left: 0; bottom: 3%; gap: 8px; }.miniapp-qr img { width: 58px; height: 58px; padding: 3px; }.miniapp-qr div { gap: 2px; max-width: 96px; }.miniapp-qr b { font-size: 10px; }.miniapp-qr small { display: none; }
  .slide--co-create .close__footer { left: 20px; right: 20px; justify-content: flex-end; }
}

/* Presentation mode: every visual explanation is visible without a click. */
.ladder-step, .capability, .accordion-item { cursor: default; }
.ladder-step:hover { color: var(--ink); transform: none; }
.ladder-step.is-active { color: var(--blue); transform: translateY(-4px); }
.ladder-step:hover:after { transform: scaleY(.12); }
.capability:hover, .capability:focus-visible { border-color: var(--line); color: var(--ink); transform: none; box-shadow: none; }
.accordion-item small, .accordion-item.is-open small, .accordion-item:hover small { max-height: 60px; margin-top: 7px; opacity: 1; }
.accordion-item b, .accordion-item:hover b, .accordion-item.is-open b { color: #f4ad72; }

/* Photo-based visuals for capabilities / about / relations / decision */
.salon-visual { position: relative; overflow: hidden; border-radius: 8px; align-self: center; background: var(--surface); }
.salon-visual > img, .salon-visual > video { display: block; width: 100%; aspect-ratio: 1.48; object-fit: cover; transition: transform .9s var(--ease); }
.salon-visual:hover > img { transform: scale(1.03); }
.salon-visual > video { pointer-events: none; }
.about-layout .salon-visual > img, .about-layout .salon-visual > video { aspect-ratio: 1.92; }
.salon-visual:before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; background: linear-gradient(0deg, rgba(5,8,10,.58), transparent); pointer-events: none; }
.salon-visual .visual-caption { z-index: 1; }
.salon-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.salon-chips span { padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 12px; color: var(--ink); }
.salon-note { margin-top: 12px; max-width: 640px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.about-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.about-steps > div { display: grid; gap: 4px; align-content: start; padding: 11px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.about-steps span { color: var(--orange); font: 500 10px/1 var(--display); }
.about-steps b { font-size: 13px; font-weight: 600; white-space: nowrap; }
.about-steps small { color: var(--muted); font-size: 9.5px; line-height: 1.5; }
.about-partnership { margin-top: 13px; }
.about-layout .salon-visual > img { aspect-ratio: 1.92; }
.capabilities-layout .salon-visual, .about-layout .salon-visual, .question-layout .salon-visual { width: 100%; }
/* 右列多块内容统一放入流式容器，整体垂直居中（仅桌面双栏布局生效） */
.col-flow { display: grid; gap: 14px; align-self: center; }
@media (min-width: 981px) {
  .capabilities-layout .col-flow, .about-layout .col-flow, .question-layout .col-flow { grid-column: 2; }
}
.col-flow .decision-examples { padding: 2px 2px 0; }
.decision-examples { padding: 16px 2px 0; }