/* v0.4 — the operation is the visual, options are explicit controls. */
.nav-cta{height:44px}.header-badge{height:44px;width:auto;max-width:none}.nav-tools{gap:18px}.header{height:86px}
.approach{background:linear-gradient(180deg,#f6f8f9 0%,#eef3f4 70%,#fff 100%);padding-bottom:100px}
.method-heading{column-gap:90px}.method-heading h2{font-size:53px}.method-heading .lead{font-size:14px}
.approach-selector{display:flex;align-items:center;gap:0;border-bottom:1px solid #d6e1e6;margin-top:42px;overflow-x:auto;scrollbar-width:thin}
.approach-option{flex:1;min-width:130px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-bottom:3px solid transparent;padding:19px 12px;background:transparent;color:#617582;font-size:12px;white-space:nowrap;transition:background .3s,color .3s,border-color .3s}
.approach-option:hover{background:#ffffffa0;color:var(--navy)}
.approach-option[aria-selected=true]{border-bottom-color:var(--green);background:white;color:var(--navy);font-weight:500}
.option-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.dot-0{background:#57616a}.dot-1{background:#e78914}.dot-2{background:#62a234}.dot-3{background:#5686a3}.dot-4{background:#137dca}
.operation-explorer{display:grid;grid-template-columns:1.55fr 1fr;column-gap:60px;align-items:center;margin-top:35px;min-height:540px}
.operation-scene{position:relative;min-width:0;aspect-ratio:3/2;isolation:isolate;--scene-color:#42a447}
.operation-factory{display:block;width:100%;height:auto;position:relative;z-index:2;transition:transform .8s cubic-bezier(.2,.75,.2,1);transform-origin:center}
.scene-ground{position:absolute;left:5%;right:5%;top:14%;bottom:10%;border-radius:50%;background:radial-gradient(ellipse,#dce8e980,transparent 66%);transform:rotate(-18deg);z-index:1}
.operation-network{position:absolute;inset:0;width:100%;height:100%;z-index:3;overflow:visible;pointer-events:none}
.network-path{stroke:#42a447;stroke-width:8;stroke-linecap:round;opacity:0;stroke-dasharray:1300;stroke-dashoffset:0;filter:drop-shadow(0 2px 2px #ffffff)}
.knowledge-path{stroke:#267da7;stroke-width:5;stroke-linecap:round;opacity:0;stroke-dasharray:1200}
.network-point{fill:#fff;stroke:#42a447;stroke-width:6;opacity:0;filter:drop-shadow(0 3px 6px #09294422)}
.operation-scene[data-active="1"] .network-path,.operation-scene[data-active="2"] .network-path,.operation-scene[data-active="3"] .network-path,.operation-scene[data-active="4"] .network-path{opacity:.9}
.operation-scene[data-active="1"] .network-point,.operation-scene[data-active="2"] .network-point,.operation-scene[data-active="3"] .network-point,.operation-scene[data-active="4"] .network-point{opacity:1}
.operation-scene[data-active="3"] .knowledge-path,.operation-scene[data-active="4"] .knowledge-path{opacity:.7}
.scene-change[data-active="1"] .network-path,.scene-change[data-active="2"] .network-path{animation:draw-route 1.25s ease both}
.scene-change[data-active="3"] .knowledge-path,.scene-change[data-active="4"] .knowledge-path{animation:draw-route 1.25s ease both}
@keyframes draw-route{from{stroke-dashoffset:1300;opacity:0}to{stroke-dashoffset:0;opacity:.9}}
.scene-annotation{position:absolute;left:8%;top:14%;display:flex;align-items:center;gap:11px;max-width:260px;padding:14px 17px;background:#fff;border:1px solid #d7e4e9;border-radius:7px;box-shadow:0 12px 30px #09294410;z-index:4;transition:top .8s,left .8s,transform .8s,border-color .8s;pointer-events:none}
.scene-annotation::after{content:'';width:1px;height:46px;background:#99b6c2;position:absolute;top:100%;left:36px;transform:rotate(-12deg);transform-origin:top}
.scene-annotation>span:not(.annotation-icon){font-size:11px;line-height:1.5;color:var(--navy)}
.annotation-icon{color:var(--green);display:flex}.annotation-icon svg{width:21px;height:21px}
.scene-annotation>i{width:5px;height:5px;border-radius:50%;background:var(--green);margin-left:3px;flex-shrink:0}
.operation-scene[data-active="1"] .scene-annotation{left:35%;top:9%;border-color:#edcb96}
.operation-scene[data-active="1"] .annotation-icon{color:#d97805}
.operation-scene[data-active="2"] .scene-annotation{left:5%;top:63%;border-color:#a7cc9a}
.operation-scene[data-active="2"] .scene-annotation::after{height:29px;top:auto;bottom:100%;left:70%;transform:rotate(35deg)}
.operation-scene[data-active="3"] .scene-annotation,.operation-scene[data-active="4"] .scene-annotation{left:56%;top:5%;border-color:#9abacf}
.operation-scene[data-active="3"] .annotation-icon,.operation-scene[data-active="4"] .annotation-icon{color:#137dca}
.scene-data{position:absolute;left:69%;top:21%;width:17%;padding:9px;background:#fffffff0;border:1px solid #d9e5eb;border-radius:4px;z-index:4;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s;pointer-events:none}
.scene-data span{display:block;height:3px;background:#bacdd8;margin:5px 0;width:85%}.scene-data span:nth-child(2){width:62%;background:#42a447}.scene-data span:last-child{width:73%}
.operation-scene[data-active="3"] .scene-data,.operation-scene[data-active="4"] .scene-data{opacity:1;transform:translateY(0)}
#layer-panel{max-width:440px;min-height:310px;padding:28px 0 28px 30px;border-left-width:1px}
#layer-panel h3{font-size:31px;line-height:1.25}#layer-panel>p:last-of-type{font-size:13px;line-height:1.95}.layer-panel-motif{display:none}
.motion-enabled .operation-scene:not(.in-view) .operation-factory{transform:translateY(65px) scale(.83)}
.motion-enabled .operation-scene .operation-factory{transition:transform 1.4s cubic-bezier(.16,.8,.2,1)}
.motion-enabled .operation-scene:not(.in-view) .scene-annotation{transform:translateY(-45px);opacity:0}
.motion-enabled .operation-scene .scene-annotation{transition:top .8s,left .8s,transform 1.1s,opacity 1s,border-color .8s}
.motion-enabled .operation-scene.in-view .scene-annotation{transform:translateY(0);opacity:1}
.problems .problem-grid{margin-bottom:0}
@media(max-width:1150px){.method-heading{gap:45px}.method-heading h2{font-size:45px}.operation-explorer{grid-template-columns:1.4fr 1fr;gap:35px;min-height:470px}#layer-panel h3{font-size:28px}.approach-option{font-size:11px;min-width:115px}.scene-annotation{padding:11px 13px;gap:8px}.scene-annotation>span:not(.annotation-icon){font-size:10px}.header-badge{height:44px;width:auto}.nav-tools{gap:14px}}
@media(max-width:900px){.header{height:80px}nav{top:79px}.nav-cta{display:inline-flex;height:40px;font-size:10px;padding:8px 10px;gap:8px}.header-badge{height:40px;width:auto}.nav-tools{gap:12px}.brand img{width:140px}.operation-explorer{grid-template-columns:1.2fr 1fr;gap:25px;min-height:400px}.method-heading h2{font-size:41px}#layer-panel{padding-left:20px}#layer-panel h3{font-size:25px}#layer-panel>p:last-of-type{font-size:12px}.scene-annotation>span:not(.annotation-icon){font-size:9px}.scene-annotation{gap:6px;padding:10px}.annotation-icon svg{width:18px;height:18px}.operation-scene[data-active="3"] .scene-annotation,.operation-scene[data-active="4"] .scene-annotation{left:45%}.approach-selector{margin-top:35px}.approach-option{min-width:115px}.operation-scene{aspect-ratio:3/2}}
@media(max-width:650px){.header{height:76px}nav{top:75px}.nav-wrap{gap:8px}.brand img{width:92px}.nav-tools{gap:9px}.languages{gap:7px}.languages a{font-size:8px}.nav-cta{height:35px;font-size:9px;padding:8px;gap:0}.nav-cta>span{display:none}.header-badge{height:35px;width:auto}.menu-toggle{width:23px}.menu-toggle span{width:20px}.approach{padding-bottom:65px}.method-heading h2{font-size:37px}.approach-selector{margin-top:30px}.approach-option{font-size:11px;min-width:112px;padding:16px 10px;gap:8px}.operation-explorer{display:flex;flex-direction:column;gap:20px;min-height:0;margin-top:30px}.operation-scene{width:100%;aspect-ratio:3/2}.layer-panel-wrap{width:100%}#layer-panel{max-width:none;min-height:220px;padding:21px 0 21px 22px}#layer-panel h3{font-size:26px}#layer-panel>p:last-of-type{font-size:12px}.scene-annotation{padding:9px 11px}.scene-annotation>span:not(.annotation-icon){font-size:9px}.scene-annotation::after{height:25px}.operation-scene[data-active="3"] .scene-annotation,.operation-scene[data-active="4"] .scene-annotation{left:45%}.scene-data{top:23%}}
@media(max-width:380px){.nav-wrap{width:calc(100% - 20px);gap:6px}.brand img{width:76px}.languages{gap:5px}.nav-tools{gap:7px}.nav-cta{height:31px;font-size:8px;padding:6px}.header-badge{height:31px;width:auto}.menu-toggle{width:20px}.scene-annotation>span:not(.annotation-icon){font-size:8px}}
@media(prefers-reduced-motion:reduce){.operation-factory,.scene-annotation,.scene-data,.network-path,.knowledge-path{transition:none!important;animation:none!important;transform:none!important}.scene-annotation{opacity:1!important}}