.application-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
}
.application-figure { min-width: 0; }
.application-visual {
  --field-background: #f0f2f3;
  --field-atmosphere: #e1e8ed;
  --field-ground-top: #d5dfe5;
  --field-ground-mid: #e2e8eb;
  --field-ground-bottom: #f0f2f3;
  --field-land: #b4c2cd;
  --field-land-shade: #d1dce2;
  --field-shadow: #52677c;
  --field-cloud: #fafbf9;
  --field-metal-light: #fafaf6;
  --field-metal: #e4e9ec;
  --field-metal-mid: #c5cfd8;
  --field-metal-dark: #99acbc;
  --field-outline: #4b6076;
  --field-panel-light: #47658b;
  --field-panel: #2c4d77;
  --field-panel-dark: #203958;
  --field-panel-line: #a3b6cd;
  --field-highlight: #fbfcf9;
  --field-muted-line: #8f9fad;
  --field-link-muted: #78899b;
  --field-accent: var(--blue);
  position: relative;
  overflow: hidden;
  background: var(--field-background);
  color: var(--field-outline);
}
html[data-theme="night"] .application-visual {
  --field-background: #151e2b;
  --field-atmosphere: #202e40;
  --field-ground-top: #34485d;
  --field-ground-mid: #253548;
  --field-ground-bottom: #151e2b;
  --field-land: #60778d;
  --field-land-shade: #3f566b;
  --field-shadow: #0c1420;
  --field-cloud: #8e9eaf;
  --field-metal-light: #e7ebed;
  --field-metal: #cbd4dc;
  --field-metal-mid: #9aabbc;
  --field-metal-dark: #6e849a;
  --field-outline: #b4c3d1;
  --field-panel-light: #405c7e;
  --field-panel: #2a4260;
  --field-panel-dark: #1c2e46;
  --field-panel-line: #8199b5;
  --field-highlight: #eef1f1;
  --field-muted-line: #70869b;
  --field-link-muted: #72879d;
  --field-accent: var(--blue);
}
/* 同色场景直接接入章节，仅收住地表底边，保留完整设备轮廓。 */
@supports (mask-image: linear-gradient(#000, transparent)) {
  .application-visual {
    mask-image: linear-gradient(to bottom, #000 95%, transparent);
    mask-repeat: no-repeat;
  }
}
#application-field { position: relative; aspect-ratio: 4 / 3; isolation: isolate; }
.application-field { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.field-stars { fill: var(--field-muted-line); opacity: .28; }
.field-orbit { stroke: var(--field-muted-line); stroke-width: 1; stroke-dasharray: 3 12; opacity: .24; }
.field-cloud { fill: var(--field-cloud); opacity: .2; }
.field-cloud-trace { stroke: var(--field-muted-line); stroke-width: 1; opacity: .16; }
.field-surface { fill: url(#field-ground); }
.field-land { fill: url(#field-land); stroke: var(--field-muted-line); stroke-width: .75; stroke-opacity: .22; stroke-linejoin: round; }
.field-land-island { fill: var(--field-land); opacity: .32; }
.field-earth-cloud { fill: url(#field-earth-cloud); }
.field-earth-shade { fill: url(#field-earth-shade); }
.field-horizon-haze, .field-beam { display: none; }
.field-horizon { stroke: var(--field-muted-line); stroke-width: 1.2; opacity: .48; }
.field-contour { stroke: var(--field-muted-line); stroke-width: .8; opacity: .2; }
.field-meridian { stroke: var(--field-muted-line); stroke-width: .8; opacity: .16; }
.field-coast-trace { stroke: var(--field-muted-line); stroke-width: .8; opacity: .23; }
/* 链路用色彩区分选择；不再整体减透明度，以免浅底上的细线消失。 */
.field-track { color: var(--field-link-muted); opacity: 1; transition: color 400ms ease; }
.field-connection { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.field-packet { stroke: var(--field-accent); stroke-width: 4; stroke-linecap: round; opacity: 0; stroke-dasharray: .018 .982; }
.field-node-group { opacity: .85; transition: opacity 400ms ease; }
.field-satellite, .field-rocket, .field-aircraft { filter: none; }
.field-icon-line, .field-icon-body, .field-panel { stroke: var(--field-outline); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.field-icon-body { fill: url(#field-alloy); }
.field-panel { fill: url(#field-panel-depth); }
.field-array-edge { fill: var(--field-metal-mid); stroke: var(--field-outline); stroke-width: .7; }
.field-array-side { fill: var(--field-panel-dark); stroke: var(--field-panel-line); stroke-width: .7; }
.field-hardware-top { fill: url(#field-metal-edge); stroke: var(--field-outline); stroke-width: .8; }
.field-hardware-side { fill: var(--field-metal-dark); stroke: var(--field-outline); stroke-width: .8; }
.field-panel-cells { stroke: var(--field-panel-line); stroke-width: .8; opacity: .5; }
.field-solar-module { fill: var(--field-panel); stroke: var(--field-panel-line); stroke-width: 1; }
.field-panel-bus { stroke: var(--field-panel-line); stroke-width: .65; opacity: .55; }
.field-panel-reflection { fill: url(#field-panel-reflection); }
.field-panel-recess { fill: var(--field-panel-dark); opacity: .75; }
.field-hinge { fill: var(--field-metal-dark); stroke: var(--field-outline); stroke-width: 1.2; }
.field-component-rail { stroke: var(--field-outline); stroke-width: 2; }
.field-panel-highlight { stroke: var(--field-panel-line); stroke-width: 1; opacity: .6; }
.field-edge-highlight { stroke: var(--field-highlight); stroke-width: 1.1; opacity: .65; stroke-linecap: round; }
.field-face-shadow { fill: var(--field-shadow); opacity: .2; }
.field-circuit-detail { stroke: var(--field-panel-line); stroke-width: 1; opacity: .65; }
.field-fastener { fill: var(--field-outline); opacity: .7; }
.field-icon-detail { stroke: var(--field-outline); stroke-width: 1.4; stroke-linecap: round; }
.field-component-panel { fill: url(#field-panel-depth); stroke: var(--field-outline); stroke-width: 1.3; }
.field-station-shadow { fill: url(#field-contact-shadow); }
.field-platform-top { fill: var(--field-metal-mid); stroke: var(--field-outline); stroke-width: .7; }
.field-platform-side { fill: var(--field-metal-dark); stroke: var(--field-outline); stroke-width: .7; }
.field-station-roof { fill: url(#field-metal-edge); stroke: var(--field-outline); stroke-width: .8; }
.field-site-platform { fill: var(--field-metal-mid); stroke: var(--field-outline); stroke-width: 1.2; }
.field-platform-highlight { opacity: .4; }
.field-building-panels { fill: var(--field-panel); }
.field-building-seam { stroke: var(--field-outline); stroke-width: .8; opacity: .6; }
.field-mast-brace { stroke: var(--field-outline); stroke-width: 1.2; stroke-linejoin: round; opacity: .85; }
.field-icon-port { fill: var(--field-outline); }
.field-dish-shell { fill: url(#field-reflector); stroke: var(--field-outline); stroke-width: 2; }
.field-dish-mesh { fill: url(#field-reflector-mesh); }
.field-dish-ribs { stroke: var(--field-outline); stroke-width: 1; opacity: .54; }
.field-dish-rim { stroke: var(--field-outline); stroke-width: 1.4; }
.field-dish-support { stroke: var(--field-outline); stroke-width: 1.8; stroke-linejoin: round; }
.field-aircraft-body { fill: url(#field-alloy); stroke: var(--field-outline); stroke-width: 1.8; stroke-linejoin: round; }
.field-aircraft-spine { fill: var(--field-highlight); opacity: .4; }
.field-aircraft-detail { stroke: var(--field-outline); stroke-width: 1.2; stroke-linecap: round; }
.field-aircraft-seam { stroke: var(--field-outline); stroke-width: .9; }
.field-engine-intake { fill: var(--field-panel-dark); stroke: var(--field-outline); stroke-width: .7; }
.field-aircraft-window { fill: var(--field-panel); }
.field-wing-panel { fill: url(#field-wing-shade); }
.field-aircraft-terminal { fill: var(--field-panel); stroke: var(--field-outline); stroke-width: 1; }
.field-aircraft-engine { fill: url(#field-cylinder); stroke: var(--field-outline); stroke-width: 1.2; }
.field-rocket .field-icon-body { fill: url(#field-cylinder); }
.field-rocket-fairing { fill: url(#field-alloy); }
.field-rocket-fin { fill: var(--field-metal-dark); stroke: var(--field-outline); stroke-width: 1.6; stroke-linejoin: round; }
.field-rocket-interstage { fill: var(--field-panel); }
.field-rocket-collar { fill: var(--field-metal-dark); opacity: .65; }
.field-rocket-joint { stroke: var(--field-outline); stroke-width: 1; opacity: .8; }
.field-rocket-fairing-seam { stroke: var(--field-outline); stroke-width: .9; opacity: .65; }
.field-rocket-service { fill: var(--field-metal-dark); stroke: var(--field-outline); stroke-width: .6; }
.field-rocket-nozzle { fill: url(#field-panel-depth); stroke: var(--field-outline); stroke-width: 1.5; }
.field-rocket-seam { stroke: var(--field-panel-line); stroke-width: .8; }
.field-fin-bevel { fill: var(--field-metal-light); opacity: .7; }
.field-rocket-plume { fill: url(#field-exhaust); }
.field-rocket-plume-core { fill: url(#field-exhaust); opacity: .75; }
[data-application-figure="space"] :is([data-field-link~="space"], [data-field-node="space"]),
[data-application-figure="airborne"] :is([data-field-link~="airborne"], [data-field-node="airborne"]),
[data-application-figure="ground"] :is([data-field-link~="ground"], [data-field-node="ground"]) { opacity: 1; }
[data-application-figure="space"] [data-field-link~="space"],
[data-application-figure="airborne"] [data-field-link~="airborne"],
[data-application-figure="ground"] [data-field-link~="ground"] { color: var(--field-accent); }
[data-application-figure="space"] [data-field-link~="space"] .field-connection,
[data-application-figure="airborne"] [data-field-link~="airborne"] .field-connection,
[data-application-figure="ground"] [data-field-link~="ground"] .field-connection { stroke-width: 2.2; }
[data-application-ready="true"][data-application-figure="space"] [data-field-link~="space"] .field-packet,
[data-application-ready="true"][data-application-figure="airborne"] [data-field-link~="airborne"] .field-packet,
[data-application-ready="true"][data-application-figure="ground"] [data-field-link~="ground"] .field-packet {
  animation: signal-travel 4.2s linear infinite;
  animation-play-state: paused;
}
/* 选中链路错峰传递；离屏暂停保留相位，再次看到时接着流动。 */
[data-application-ready="true"][data-application-figure] [data-field-connection="satellite-aircraft"] .field-packet { animation-delay: -1.05s; }
[data-application-ready="true"][data-application-figure] [data-field-connection="aircraft-ground"] .field-packet { animation-delay: -2.1s; }
[data-application-ready="true"][data-application-figure] [data-field-connection="rocket-ground"] .field-packet { animation-delay: -3.15s; }
[data-application-ready="true"] .field-satellite-motion { animation: satellite-drift 7.2s ease-in-out infinite; animation-play-state: paused; }
[data-application-ready="true"] .field-aircraft-motion { animation: aircraft-drift 8.6s ease-in-out infinite; animation-delay: -2.1s; animation-play-state: paused; }
[data-application-ready="true"] .field-rocket-motion { animation: rocket-drift 6.6s ease-in-out infinite; animation-delay: -1.8s; animation-play-state: paused; }
[data-application-ready="true"][data-application-visible="true"][data-application-figure="space"] [data-field-link~="space"] .field-packet,
[data-application-ready="true"][data-application-visible="true"][data-application-figure="airborne"] [data-field-link~="airborne"] .field-packet,
[data-application-ready="true"][data-application-visible="true"][data-application-figure="ground"] [data-field-link~="ground"] .field-packet { animation-play-state: running; }
[data-application-ready="true"][data-application-visible="true"] :is(.field-satellite-motion, .field-aircraft-motion, .field-rocket-motion) { animation-play-state: running; }
@keyframes signal-travel {
  0% { stroke-dashoffset: 1; opacity: 0; }
  8%, 92% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
/* 只移动设备内层：最大位移仍在机身覆盖范围内，不让连接端点脱开。 */
@keyframes satellite-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes aircraft-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3.5px); } }
@keyframes rocket-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.application { display: block; padding-block: 25px; }
.application-heading { display: block; }
.application-select { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px; min-height: 48px; padding: 0; background: transparent; color: var(--ink); text-align: left; transition: color 240ms ease; }
.application-select:hover, .application-select[aria-pressed="true"] { color: var(--blue); }
.application-arrow { flex: none; }
.application-title-short { display: none; }
.application-arrow .arrow { transform: rotate(-45deg); opacity: .4; transition: transform 300ms ease, opacity 300ms ease; }
.application-select[aria-pressed="true"] .arrow { transform: rotate(0); opacity: 1; }
.application-label { display: block; margin-top: 4px; color: var(--muted); }
.application[data-active="true"] .application-label { color: var(--blue); }
@media (max-width: 1050px) { .application-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } }
@media (max-width: 760px) {
  /* 窄屏保留模块与主支撑，去掉亚像素细纹以免设备表面糊成一片。 */
  .field-micro-detail { display: none; }
  .application-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .application-figure { max-width: 520px; width: 100%; justify-self: center; }
  .application-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
  .application { display: contents; }
  .application-heading { grid-row: 1; }
  .application-select { min-height: 52px; border-bottom: 1px solid var(--line); }
  .application-select[aria-pressed="true"] { border-color: var(--blue); }
  .application-title-short { display: inline; min-width: 0; overflow-wrap: anywhere; }
  .application-title-long, .application-label, .application-arrow { display: none; }
  .application-layout:not(:has([data-application-ready="true"])) .application-grid { display: block; }
  .application-layout:not(:has([data-application-ready="true"])) .application { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.field-packet, .field-satellite-motion, .field-aircraft-motion, .field-rocket-motion) { animation: none !important; }
  :is(.field-satellite-motion, .field-aircraft-motion, .field-rocket-motion) { transform: none !important; }
  .field-track, .field-node-group { transition: none; }
}
.motion-paused :is(.field-packet, .field-satellite-motion, .field-aircraft-motion, .field-rocket-motion) { animation: none !important; }
.motion-paused :is(.field-satellite-motion, .field-aircraft-motion, .field-rocket-motion) { transform: none !important; }
.motion-paused :is(.field-track, .field-node-group) { transition: none; }
/* 宽屏把标题和三条索引收成一组，垂直居中在示意图旁；示意图用上下弹性行吃掉多余高度。 */
@media (min-width: 761px) {
  .applications > .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: clamp(40px, 5vw, 80px);
  }
  .applications .section-head { grid-column: 2; grid-row: 2; margin: 0 0 16px; align-self: end; }
  .application-layout {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    gap: normal;
    align-items: stretch;
    pointer-events: none;
  }
  .application-figure { grid-column: 1; grid-row: 1 / -1; align-self: center; }
  .application-grid { grid-column: 2; grid-row: 3; align-self: start; border-block: 1px solid var(--line); pointer-events: auto; }
  .application { padding-block: 0; }
  .application-heading { position: relative; }
  .application-select { min-height: 4rem; }
  html:not([lang="en"]) .application-label {
    position: absolute;
    top: 50%;
    right: 2.75rem;
    margin: 0;
    transform: translateY(-50%);
    pointer-events: none;
    white-space: nowrap;
  }
  html[lang="en"] .application-label { display: none; }
}
@media (max-width: 1050px) and (min-width: 761px) {
  .applications > .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; }
}