:root{--ink:#162e3e;--muted:#627887;--line:#dae4e8;--teal:#087f82;--speed:1s}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f7f5;color:var(--ink);font-family:"Microsoft YaHei",system-ui,sans-serif}button,a,select{-webkit-tap-highlight-color:transparent}button,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}header{height:80px;display:flex;align-items:center;justify-content:space-between;max-width:1440px;margin:auto;padding:0 5%;border-bottom:1px solid var(--line)}.brand{font-size:25px;color:var(--teal);font-weight:700}.brand span{font-size:17px;color:var(--ink)}nav{display:flex;align-items:center;gap:30px;font-size:14px}button{border:1px solid var(--line);background:white;color:var(--ink);padding:10px 15px;border-radius:7px}button:hover,a:hover{color:var(--teal)}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #ffb45e;outline-offset:3px}main{max-width:1440px;margin:auto;padding:0 5%}.hero{padding:72px 0 60px;position:relative;overflow:hidden}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--teal);font-weight:700}h1{font-size:clamp(38px,4.7vw,68px);line-height:1.2;letter-spacing:-2px;margin:22px 0}h2{font-size:30px;margin:12px 0}p{line-height:1.85;color:var(--muted)}.hero p{max-width:640px;font-size:16px}.facts{display:flex;gap:40px;margin:30px 0;color:var(--muted);font-size:13px}.facts b{display:block;color:var(--ink);font-size:32px;margin-bottom:8px}.facts b span{font-size:14px;font-weight:400}.primary{display:inline-block;background:var(--teal);color:white;padding:14px 23px;border-radius:6px}.primary:hover{color:white;background:#066365}.hero-decor{position:absolute;right:0;top:100px;font-size:clamp(65px,8vw,122px);font-weight:800;line-height:1.05;color:#e1e9e4;pointer-events:none;z-index:-1}.hero-decor em{font-style:normal;font-size:.58em}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.section-head p{font-size:13px}.toolbar{display:flex;justify-content:space-between;gap:15px;padding:16px;background:#e9efec;border-radius:12px 12px 0 0;flex-wrap:wrap}.modes,.play{display:flex;gap:8px;align-items:center}.modes button{border:0}.modes .active{background:var(--ink);color:white}.play{font-size:12px}.play select{padding:8px;border:1px solid var(--line);border-radius:6px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 255px;background:white;border:1px solid var(--line);border-radius:0 0 12px 12px;overflow:hidden}.stage{position:relative;align-self:center;background:white}.stage>img{display:block;width:100%}.stage svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.flow path{fill:none;stroke-width:5;stroke-linecap:round;stroke-dasharray:6 26;animation:flow var(--speed) linear infinite;filter:drop-shadow(0 0 2px #fff)}.hot{stroke:#fff8dd}.cold{stroke:#b8faff}.warm{stroke:#fffacb}@keyframes flow{to{stroke-dashoffset:-32}}.paused .flow path{animation-play-state:paused}.flow.off{opacity:.06}.spot{position:absolute;transform:translate(-50%,-50%);padding:0;width:26px;height:26px;border-radius:50%;border:2px solid white;background:var(--teal);color:white;font-size:12px;box-shadow:0 2px 10px #163f4655}.spot:hover{background:#f79b35;color:white}.zoom{position:absolute;right:12px;bottom:12px;font-size:12px;background:#ffffffef;padding:6px 10px}aside{padding:26px 20px;background:#f8faf9;border-left:1px solid var(--line)}aside h3{font-size:23px;margin:14px 0}aside p{font-size:13px}.sequence{font-size:12px;line-height:1.9;padding:14px;background:#e7f0ed;border-radius:8px;color:#286764}.legend{display:flex;flex-direction:column;gap:12px;margin:24px 0;font-size:12px}.legend i{display:inline-block;width:22px;height:4px;margin-right:9px;vertical-align:middle}.red{background:#ed4242}.blue{background:#217ef5}.orange{background:#fb9232}small{font-size:11px;color:var(--muted);line-height:1.8;display:block}.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin:32px 0 70px}.principles article{border-top:1px solid var(--line);padding-top:20px}.principles span{color:var(--teal);font-size:12px}.principles h3{font-size:18px}.principles p{font-size:13px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.gallery button{padding:0;text-align:left;overflow:hidden;border-radius:10px}.gallery img{width:100%;display:block;transition:transform .3s}.gallery button:hover img{transform:scale(1.03)}.gallery span{display:block;padding:20px;font-size:11px;color:var(--muted)}.gallery b{display:block;font-size:16px;color:var(--ink);margin-top:8px}.downloads{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin:28px 0 50px;font-size:13px}.downloads a{border-bottom:1px solid var(--teal);padding:10px 0;color:var(--teal)}footer{border-top:1px solid var(--line);padding:30px 0;font-size:12px}footer p{margin:10px 0}dialog{max-width:96vw;width:1400px;border:0;border-radius:12px;padding:20px;background:#fff}dialog::backdrop{background:#0a2238bb}dialog img{width:100%;display:block;margin-top:10px}dialog button{float:right}dialog p{font-size:12px}.explore:fullscreen{overflow:auto;background:#f5f7f5;padding:20px}.explore:fullscreen .stage{max-width:1400px}@media(max-width:900px){.workspace{grid-template-columns:1fr}aside{border-left:0;border-top:1px solid var(--line);padding:20px}.legend{flex-direction:row;margin:16px 0}.hero-decor{display:none}.section-head{align-items:start}.facts{gap:28px}}@media(max-width:600px){header{height:auto;flex-wrap:wrap;padding:10px 5%;gap:8px}.brand{font-size:20px}.brand span{font-size:14px}header>a[href*="index.html"]{order:3;width:100%;padding:8px 0!important;font-size:12px!important;border-top:1px solid var(--line);margin:0!important}nav{gap:10px}nav>a{display:none}.hero{padding:42px 0}.facts{gap:20px}.facts b{font-size:26px}.section-head{display:block}.toolbar{padding:10px}.modes{display:grid;grid-template-columns:repeat(2,1fr);width:100%}.play{width:100%;justify-content:space-between}.principles,.gallery{grid-template-columns:1fr}.principles{gap:14px;margin-bottom:45px}.spot{width:22px;height:22px;font-size:10px}.zoom{bottom:0;right:0;font-size:10px;padding:4px}.legend{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.flow path{animation:none}.gallery img{transition:none}}