.hero3d-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:28px 30px 18px;position:relative;z-index:4}
.hero3d-head h3{font-size:clamp(29px,3.2vw,46px);letter-spacing:-.048em;margin:5px 0 0;line-height:1}
.hero3d-tabs{display:flex;gap:5px;padding:5px;background:rgba(245,247,242,.62);border:1px solid rgba(42,54,55,.09);border-radius:999px;backdrop-filter:blur(12px)}
.hero3d-tabs button{border:0;background:transparent;padding:9px 13px;border-radius:999px;color:var(--muted);font-size:12px;cursor:pointer;white-space:nowrap}
.hero3d-tabs button.active{background:rgba(255,255,252,.9);color:var(--ink);box-shadow:0 4px 18px rgba(42,54,55,.08)}
.hero3d-stage{height:min(68vh,690px);min-height:520px;position:relative;overflow:hidden;border-top:1px solid rgba(42,54,55,.08);border-bottom:1px solid rgba(42,54,55,.08);isolation:isolate;background:radial-gradient(circle at 47% 32%,rgba(255,255,252,.96),rgba(231,237,233,.82) 49%,rgba(215,226,222,.78) 100%)}
.hero3d-stage:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(74,93,89,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(74,93,89,.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,transparent,black 30%,black 88%,transparent);pointer-events:none;z-index:0}
#hero3dCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;z-index:1;outline:none}#hero3dCanvas:active{cursor:grabbing}
.hero3d-labels{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero3d-label{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;border:1px solid rgba(41,55,55,.12);background:rgba(246,248,244,.88);backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(46,59,58,.08);border-radius:13px;padding:9px 11px;text-align:left;color:var(--ink);min-width:112px;max-width:190px;cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.hero3d-label:hover,.hero3d-label.selected{background:rgba(255,255,252,.96);border-color:rgba(72,106,97,.3);transform:translate(-50%,-100%) translateY(-3px)}
.hero3d-label b{display:block;font-size:11px;line-height:1.2}.hero3d-label small{display:block;color:var(--muted);font-size:9px;line-height:1.35;margin-top:4px}.hero3d-label i{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;background:var(--dot,#7b9f8a)}
.hero3d-edge{position:absolute;transform:translate(-50%,-50%);pointer-events:none;padding:5px 8px;border-radius:999px;background:rgba(246,248,244,.78);border:1px solid rgba(42,54,55,.09);backdrop-filter:blur(8px);font-size:8px;color:#697576;white-space:nowrap}
.hero3d-route{position:absolute;left:22px;bottom:20px;z-index:3;display:flex;gap:7px;align-items:center;flex-wrap:wrap;max-width:calc(100% - 44px);pointer-events:none}
.hero3d-route span{padding:7px 9px;background:rgba(246,248,244,.78);border:1px solid rgba(42,54,55,.09);border-radius:999px;font-size:9px;color:#566164;backdrop-filter:blur(10px)}
.hero3d-route em{font-style:normal;color:#8c9897;font-size:11px}
.hero3d-info{display:grid;grid-template-columns:.7fr 1.3fr;gap:28px;padding:24px 30px 28px;align-items:start;min-height:120px}
.hero3d-info h4{font-size:25px;letter-spacing:-.04em;margin:4px 0 0}.hero3d-info p{margin:3px 0 0;color:var(--muted);max-width:820px}.hero3d-info code{font-size:.9em;background:rgba(71,89,85,.07);padding:2px 5px;border-radius:6px}
.hero3d-hint{position:absolute;right:22px;bottom:20px;z-index:3;font-size:9px;color:rgba(70,82,83,.58);background:rgba(246,248,244,.64);border-radius:999px;padding:7px 10px;backdrop-filter:blur(8px);pointer-events:none}
@media(max-width:900px){.hero3d-head{align-items:flex-start;flex-direction:column}.hero3d-tabs{max-width:100%;overflow:auto}.hero3d-stage{height:570px}.hero3d-info{grid-template-columns:1fr}.hero3d-hint{display:none}}
@media(max-width:640px){.hero3d{border-radius:25px}.hero3d-head{padding:22px 18px 14px}.hero3d-tabs button{padding:8px 10px}.hero3d-stage{height:520px;min-height:480px}.hero3d-info{padding:20px 18px 22px}.hero3d-label{padding:7px 8px;min-width:86px}.hero3d-label small{display:none}.hero3d-route{left:12px;bottom:12px;max-width:calc(100% - 24px)}.hero3d-route span{font-size:8px;padding:5px 7px}}

.hero3d{margin-top:45px;border:1px solid #d5e2f0;border-radius:24px;overflow:hidden;background:#f2f7fd}
.hero3d-stage{background:radial-gradient(ellipse at 40% 30%,#fff,#e6effb 75%);min-height:560px}
.hero3d-head h3{font:400 34px/1.1 Georgia,serif;letter-spacing:-.035em}
.hero3d-info h4{font-size:21px;font-weight:500}.hero3d-info p{font-size:14px}
.hero3d-label{background:#f7faffeb;border-color:#c7d8ec;box-shadow:0 6px 20px #315d8310}
.hero3d-label:hover,.hero3d-label.selected{background:#fff;border-color:#76a1d7}
.hero3d-edge,.hero3d-route span{background:#f7faffdc;color:#547497;border-color:#dae5f2}
.hero3d-tabs{background:#e5edf8}.hero3d-tabs button.active{background:#fff;color:#2f69bb}
.model-fallback{padding:40px}.infra-intro{max-width:950px}.infra-intro h1{max-width:900px}
.reference{border-bottom:1px solid var(--line);padding:20px 0}.reference summary{cursor:pointer;font-size:18px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:20px}.reference summary:after{content:"+";color:var(--blue)}.reference[open] summary:after{content:"−"}.reference p{margin-top:18px}.reference pre{font-size:12px;overflow:auto;background:#eaf1f9;padding:20px;border-radius:12px}
@media(max-width:640px){.hero3d-stage{min-height:430px;height:430px}.hero3d-head{padding:22px 16px}.hero3d-head h3{font-size:28px}.hero3d-label{min-width:0;max-width:100px;padding:6px 7px;border-radius:8px}.hero3d-label b{font-size:9px}.hero3d-edge{display:none}.hero3d-route{bottom:8px;gap:4px}.hero3d-route span{padding:4px}.hero3d-info{padding:22px 16px;gap:12px}.hero3d-tabs button{font-size:11px}.hero3d{margin-inline:-8px}}
.hero3d-edge{display:none!important}
.model-components{display:none}
@media(max-width:640px){#hero3dLabels{display:none}.model-components{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;padding:12px 18px;border-bottom:1px solid var(--line);background:#f4f8fd}.model-components button{padding:9px 0;border:0;background:transparent;text-align:left;color:#416087;font-size:12px}.model-components button:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#8caaca;margin-right:7px}.model-components button[aria-pressed=true]{color:#245fc0}.hero3d-stage{height:360px;min-height:360px}.hero3d-route{display:none}}