*{box-sizing:border-box}html,body{margin:0;background:#eef2ef;color:#183d32;font-family:"PingFang SC","Microsoft YaHei",sans-serif}body{min-height:100dvh;display:grid;place-items:center}main{width:min(1600px,100%);padding:38px 50px 28px;background:#e7eeea}header{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}h1{font-size:26px;letter-spacing:-.8px;font-weight:500;margin:0 0 10px}header p{font-size:12px;color:#536c60;margin:0}.brand{font-size:11px;line-height:1.5;letter-spacing:2px;font-weight:600}.viewport{width:100%;overflow:auto;scrollbar-color:#b8cec1 transparent;scrollbar-width:thin}#world{height:540px;position:relative}canvas{display:block;width:100%;height:100%;outline:none}#labels{position:absolute;inset:0;pointer-events:none}.label{position:absolute;transform:translate(-50%,0);text-align:center;white-space:nowrap;font-size:12px;line-height:1.7;color:#3e5d4c}.label strong{font-weight:500;font-size:14px;color:#203c32;display:block}.label small{font-size:10px;color:#61776a}.label:before{content:"";display:block;height:22px;border-left:1px solid #b7cbbd;width:1px;margin:0 auto 9px}.label.above{transform:translate(-50%,-100%)}.label.above:before{display:none}.label.above:after{content:"";display:block;height:18px;border-left:1px solid #b7cbbd;width:1px;margin:7px auto 0}.label.internal{font-size:10px;color:#246c59}.label.internal:before{height:12px}.label.internal strong{font-size:11px}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#e7eeea;font-size:13px;color:#536c60}footer{position:relative;padding:20px 0 0;border-top:1px solid #cedbd2;display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px}.narrative{display:flex;align-items:center;gap:12px}.live-dot{height:6px;width:6px;border-radius:50%;background:#397f63}.narrative p{margin:0;font-size:14px;font-weight:400}.actions{display:flex;gap:8px}button{font:inherit;font-size:12px;border:1px solid #b8cbbf;border-radius:24px;background:transparent;color:#234a38;padding:10px 18px;cursor:pointer;min-height:42px}button:hover{background:#e3ece6}button:focus-visible{outline:2px solid #28715a;outline-offset:3px}#pause{background:#203f31;color:#fff;border-color:#203f31;min-width:64px}#xray[aria-pressed=true]{background:#dcebe2}.timeline{grid-column:1/-1;height:2px;background:#dce5df;overflow:hidden}.timeline i{display:block;width:100%;height:100%;background:#4d8a6c;transform:scaleX(0);transform-origin:left}.legend{grid-column:1/-1;display:flex;gap:24px;align-items:center;font-size:10px;color:#52695a}.legend span{display:flex;gap:7px;align-items:center}.legend b{width:13px;height:3px;background:#6bafbb;display:inline-block}.legend .oil{background:#af9459}.legend .signal{background:transparent;border-top:1px dashed #3e7b5e}.legend small{margin-left:auto;font-size:10px}.mobile-hint{display:none}::selection{background:#c7ddce}@media(min-width:1600px){#world{height:610px}}@media(max-width:760px){body{display:block}main{padding:28px 20px 24px}h1{font-size:22px;max-width:260px;line-height:1.5}.brand{display:none}#world{min-width:1000px;height:470px}.viewport{margin:5px -20px 0;width:calc(100% + 40px)}.mobile-hint{display:block;text-align:center;font-size:10px;color:#587260;margin:8px 0 22px}footer{grid-template-columns:1fr;gap:18px}.narrative p{font-size:12px;line-height:1.7}.actions{justify-content:flex-end}.legend{gap:15px;flex-wrap:wrap}.legend small{width:100%;margin:3px 0 0}.label strong{font-size:13px}}
.legend .signal{border-top-color:#5b7295;border-top-width:2px}.legend .mixed{background:#3d9874}.dose-label strong{color:#8c652d}.dose-label small{color:#896c42}.dose-label:after{border-color:#c29d5a}.mixing-label,.dose-label,.pressure-label{transition:opacity .25s}.mixing-label strong,.pressure-label strong{font-size:12px}.dose-label strong{font-size:14px}@media(prefers-reduced-motion:reduce){.label{transition:none}}
.dose-label:before{border-color:#c29d5a}
/* Dedicated control surface; never overlaps scene annotations. */
[hidden]{display:none!important}h1{font-size:25px}.stage-shell{display:grid;grid-template-columns:212px minmax(0,1fr);gap:20px;margin-top:26px}.phone-control{display:flex;flex-direction:column;align-items:center;border-right:1px solid #d3dfd6;padding:12px 24px 14px 0;justify-content:center}.phone-control h2{font-size:13px;font-weight:500;margin:0 0 16px;color:#335541}.phone-frame{width:170px;padding:5px;background:#25352d;border-radius:26px;box-shadow:8px 15px 25px #1e3b2417;position:relative}.phone-screen{aspect-ratio:.476;position:relative;overflow:hidden;border-radius:21px;background:white}.phone-screen img{position:absolute;width:369%;max-width:none;left:-61.3%;top:-9.7%;height:auto}.phone-actions{text-align:center;margin-top:18px;width:100%}#start{background:#245b43;color:white;width:100%;font-size:13px;min-height:44px}#start:disabled{background:#dde8df;color:#42624f;border-color:#c8d7cb;cursor:default}.phone-actions p{font-size:10px;line-height:1.8;margin:10px 0 0;color:#526b5b}.command-feedback{position:absolute;inset:40% 8% auto;padding:13px 0;background:#183d32ed;color:white;font-size:12px;text-align:center;border-radius:8px;opacity:0;pointer-events:none}.sent .command-feedback{animation:command 1.6s both}@keyframes command{0%{opacity:0;transform:translateY(8px)}20%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-5px)}}.focus-hud{position:absolute;inset:15px 20px;opacity:0;pointer-events:none;color:#285a43}.focus-hud>div{position:absolute;top:0;left:4px;display:grid;gap:8px}.focus-hud strong{font-size:15px;font-weight:500}.focus-hud span{font-size:10px;color:#5b7764}.corner{position:absolute;width:22px;height:22px;border-color:#87af96;border-style:solid;opacity:.7}.tl{top:62px;left:0;border-width:1px 0 0 1px}.tr{top:62px;right:0;border-width:1px 1px 0 0}.bl{bottom:15px;left:0;border-width:0 0 1px 1px}.br{bottom:15px;right:0;border-width:0 1px 1px 0}.is-focused .phone-control{opacity:.65}.viewport{overflow:hidden}#world{height:540px}.is-focused .viewport{border-radius:5px}.is-focused .mixing-label,.is-focused .pressure-label{background:#e7eeead9;padding:5px 8px;border-radius:4px}
@media(max-width:1000px) and (min-width:761px){main{padding:28px 24px}.stage-shell{grid-template-columns:180px minmax(0,1fr);gap:10px}.phone-frame{width:145px}.phone-control{padding-right:15px}.label strong{font-size:11px}.label small{font-size:9px}}
@media(max-width:760px){h1{font-size:22px;max-width:none;line-height:1.5}.stage-shell{display:block;margin-top:18px}.phone-control{display:grid;grid-template-columns:110px 1fr;gap:12px 22px;border-right:0;border-bottom:1px solid #d3dfd6;padding:16px 0 24px;opacity:1!important}.phone-control h2{grid-column:2;grid-row:1;align-self:end;margin:0;text-align:left;font-size:15px}.phone-frame{grid-column:1;grid-row:1/3;width:110px;border-radius:20px}.phone-screen{border-radius:15px}.phone-actions{grid-column:2;grid-row:2;align-self:start;margin-top:0}.phone-actions p{text-align:left;font-size:11px}.viewport{overflow:auto}.is-focused #world{min-width:0;width:100%;height:540px}.focus-hud{inset:16px 12px}.is-focused .label strong{font-size:11px}.is-focused .label small{font-size:9px}.is-focused .mixing-label,.is-focused .pressure-label{padding:3px}.legend{column-gap:15px;row-gap:10px}}
@media(prefers-reduced-motion:reduce){.command-feedback{animation:none!important}.sent .command-feedback{display:none}}
/* Launch choreography and live phone controls. */
.phone-screen{container-type:inline-size}.phone-clock{position:absolute;z-index:1;left:11%;top:1%;width:31%;height:4.8%;display:flex;align-items:center;justify-content:center;background:#edf6f3;color:#182c24;font-size:5.7cqw;font-weight:650;letter-spacing:.15px}.device-dial{position:absolute;left:10%;top:43%;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff 48%,#f5f9f7 60%,#fff 74%);display:grid;place-items:center;color:#7e8d9b;font-size:7cqw}.device-dial i{position:absolute;inset:8%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#6bb8a8 0deg 1.7deg,transparent 1.7deg 5deg);mask:radial-gradient(circle,transparent 57%,#000 58% 68%,transparent 69%)}.device-dial span{position:relative;z-index:1}.sent .device-dial i{animation:dial-spin 3s linear infinite}.sent .device-dial span{color:#347b63}.command-feedback{inset:auto 8% 5%;padding:8px 0;font-size:10px}@keyframes dial-spin{to{transform:rotate(360deg)}}.stage-shell{grid-template-columns:212px minmax(0,1fr);transition:grid-template-columns 1.6s cubic-bezier(.22,1,.36,1),gap 1.6s cubic-bezier(.22,1,.36,1);perspective:1000px}.phone-control{min-width:0;overflow:hidden;transform-origin:right center;transition:opacity .8s ease,transform 1.2s cubic-bezier(.22,1,.36,1);will-change:transform,opacity}.stage-shell.is-running{grid-template-columns:0px minmax(0,1fr);gap:0}.stage-shell.is-running .phone-control{opacity:0!important;transform:translateX(-32px) translateZ(-70px) rotateY(-16deg) scale(.94);pointer-events:none}.stage-shell.is-running .viewport{position:relative;z-index:1}.network-label strong{font-size:12px;color:#526a87}.network-label small{color:#61758e}.mixing-label:after{height:12px}.stage-shell.is-focused+.mobile-hint{visibility:hidden}
@media(max-width:1000px) and (min-width:761px){.stage-shell{grid-template-columns:180px minmax(0,1fr)}}
@media(max-width:760px){.stage-shell{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:270px auto;gap:0;transition:grid-template-rows 1.6s cubic-bezier(.22,1,.36,1)}.phone-control{height:260px;min-height:0;box-sizing:border-box}.stage-shell.is-running{grid-template-columns:minmax(0,1fr);grid-template-rows:0px auto}.stage-shell.is-running .phone-control{transform:translateY(-30px) scale(.94)}.network-label{font-size:10px}}
@media(prefers-reduced-motion:reduce){.stage-shell,.phone-control{transition:none!important}.device-dial i{animation:none!important}}
@media(min-width:761px){.phone-control{contain:size}.phone-actions{width:187px}.phone-control h2{white-space:nowrap}.phone-frame{flex-shrink:0}}
/* A single phone moves from the control surface into the system scene. */
.stage-shell{position:relative}.travel-phone{position:absolute;left:0;top:0;width:170px;z-index:5;pointer-events:none;transform-origin:0 0;opacity:0;will-change:transform}.travel-phone .phone-frame{width:170px!important}.travel-phone .phone-screen{border-radius:21px}.travel-phone .device-dial i{animation:dial-spin 3s linear infinite}.travel-phone .device-dial span{color:#347b63}
.label{transition:opacity .65s ease}.label:before{height:30px}.label.above:after{height:26px}.mixing-label:after{height:20px}
.intro-start{position:absolute;z-index:6;bottom:26px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:16px;min-width:370px;text-align:left;background:#245b43;color:#fff;border:1px solid #4d8266;border-radius:12px;padding:17px 24px;box-shadow:0 10px 28px #173e3220;font-size:13px;line-height:1.7}.intro-start b{display:block;font-size:16px;font-weight:500}.intro-start:hover{background:#194c37}.play-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid #ffffff66;border-radius:50%;font-size:14px;flex-shrink:0}
@media(max-width:760px){.intro-start{left:500px;min-width:320px;padding:14px 18px}.intro-start b{font-size:14px}.travel-phone .phone-frame{display:block}.travel-phone .phone-screen{border-radius:21px}}
/* Keep the drawing buffer fixed throughout the desktop handoff. */
@media(min-width:761px){
.stage-shell,.stage-shell.is-running{display:block;transition:none;perspective:none}
.phone-control{position:absolute;left:0;top:0;width:212px;height:540px;z-index:2;contain:layout style}
.stage-shell .viewport{width:100%;margin:0}
.stage-shell.is-running .phone-control{transform:translate3d(-24px,0,0);opacity:0}
.intro-start{left:calc(50% + 116px)}
}
@media(min-width:761px) and (max-width:1000px){.phone-control{width:180px}.intro-start{left:calc(50% + 95px)}}
.travel-phone{backface-visibility:hidden}.travel-phone .phone-screen img{will-change:transform}.device-dial i{will-change:transform}
canvas{touch-action:none;cursor:grab}canvas.dragging{cursor:grabbing}canvas:focus-visible{outline:2px solid #8aac9c;outline-offset:-3px}
.view-controls{position:absolute;right:12px;top:9px;z-index:7;display:flex;gap:5px;align-items:center;background:#e7eeeae8;border:1px solid #cedbd2;border-radius:24px;padding:3px 5px 3px 14px}.view-controls span{font-size:11px;margin-right:8px;color:#597466}.view-controls button{min-height:34px;padding:5px 10px;border:0}.view-controls #zoom-in,.view-controls #zoom-out{font-size:20px;width:34px}.mobile-hint{display:block;text-align:center;font-size:11px;color:#587260;margin:10px 0 18px}
@media(max-width:760px){#world,.is-focused #world{min-width:0;width:100%;height:540px}.viewport{overflow:hidden}.intro-start{left:50%;min-width:0;width:calc(100% - 32px)}.view-controls{right:8px;top:8px}.view-controls span{font-size:10px}.label strong{font-size:11px}.label small{font-size:9px}.travel-phone{pointer-events:none}}
.filter-views{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;gap:8px;z-index:6;white-space:nowrap}.filter-views button{background:#e7eeeae8;font-size:11px;min-height:32px;padding:5px 14px}.filter-views:has(~.intro-start:not([hidden])){display:none}
.stage-shell>.view-controls{z-index:10}.travel-phone{overflow:hidden;max-height:400px}
@media(max-width:760px){.stage-shell:not(.is-running)>.view-controls{top:280px}}
/* V3.1 website surface and typography. */
html.embedded,html.embedded body{background:#e7eeea;min-height:0;display:block;color:#203c32;font-family:'PingFang SC','Microsoft YaHei',sans-serif}
.embedded main{width:100%;padding:0 20px 20px;background:#e7eeea}
.embedded main>header{display:none}.embedded .stage-shell{margin-top:0}.embedded button{font-family:inherit}.embedded #start,.embedded .intro-start{background:#246c59}.embedded .intro-start:hover{background:#183d32}.embedded .legend,.embedded .phone-actions p{color:#4d6258}
@media(max-width:760px){.embedded main{padding:0 16px 20px}.embedded .viewport{margin-inline:-16px;width:calc(100% + 32px)}.embedded .intro-start b{font-size:13px}.embedded .legend{flex-wrap:wrap}}
/* Native vertical range: wheel input remains available for page scrolling. */
.zoom-control{position:absolute;right:12px;top:66px;z-index:10;display:flex;flex-direction:column;align-items:center;gap:7px;width:48px;padding:12px 4px;background:#e7eeeae8;border:1px solid #cedbd2;border-radius:24px;color:#246c59}
.zoom-control label,.zoom-control output{font-size:10px;font-variant-numeric:tabular-nums}.zoom-control>span{font-size:17px;line-height:1}
#zoom-range{writing-mode:vertical-lr;direction:rtl;width:32px;height:142px;margin:0;accent-color:#246c59;cursor:pointer;touch-action:none}
#zoom-range:focus-visible{outline:2px solid #246c59;outline-offset:3px;border-radius:8px}
@media(max-width:760px){.zoom-control{right:8px;top:64px;width:42px;padding:10px 3px}#zoom-range{height:118px}.stage-shell:not(.is-running)>.zoom-control{top:334px}}
html[lang=en] .intro-start{max-width:440px;min-width:0;width:calc(100% - 40px)}html[lang=en] .intro-start b{font-size:14px;line-height:1.5}html[lang=en] .device-dial{font-size:6cqw}html[lang=en] .label strong{font-size:12px}html[lang=en] .label small{font-size:9px}html[lang=en] .narrative{min-width:0}html[lang=en] .narrative p{font-size:12px;line-height:1.7}
@media(max-width:760px){html[lang=en] .label{white-space:normal;min-width:72px;max-width:130px}html[lang=en] .label strong{font-size:10px}html[lang=en] .legend{gap:12px}html[lang=en] .phone-control h2{font-size:13px}}
/* Mobile diagram key: readable copy stays outside the rotating model. */
.mobile-key,.mobile-pin{display:none}
@media(max-width:760px){
#world,.is-focused #world{height:360px}
.mobile-pin{display:grid;place-items:center;position:absolute;transform:translate(-50%,-50%);width:24px;height:24px;border:1px solid #a2b8ab;border-radius:50%;background:#f6f9f6;color:#234a38;font-size:10px;font-weight:600;font-variant-numeric:tabular-nums}
.mobile-key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;list-style:none;padding:0;margin:0 0 18px;border-top:1px solid #cedbd2}
.mobile-key li{display:flex;gap:8px;align-items:baseline;min-width:0;padding:12px 0;border-bottom:1px solid #cedbd2}
.key-number{flex:0 0 20px;font-size:10px;font-weight:600;color:#426653;font-variant-numeric:tabular-nums}
.mobile-key li>div{min-width:0}.mobile-key strong{display:block;font-size:14px;line-height:1.5;font-weight:500;overflow-wrap:anywhere;color:#203c32}
.mobile-key small{display:block;font-size:12px;line-height:1.6;margin-top:4px;color:#4d6258}.mobile-key .key-dose strong{color:#785625}
.view-controls{padding:0 3px 0 12px}.view-controls button{min-height:44px}
.zoom-control{width:44px;padding:8px 0;gap:5px}#zoom-range{height:86px;width:40px}
.mobile-hint{font-size:11px;line-height:1.7;margin:8px 0 18px}
.actions{justify-content:space-between;gap:6px}.actions button{min-height:44px;padding:10px 13px}
html[lang=en] .mobile-key strong{font-size:13px}html[lang=en] .mobile-key small{font-size:11px}
}