.route-opening { padding: 0; min-height: 100dvh; background: #f7f7f8; }
.route-opening::before { content: ''; position: absolute; left: 5vw; right: 5vw; top: 8vh; height: 1px; background: rgba(0,0,0,.13); }
.opening-kicker { position: absolute; top: 10.5vh; left: 5vw; font: 600 12px/1.4 'JetBrains Mono',monospace; letter-spacing: .22em; color: var(--bl); }
.opening-shell { display: grid; position: relative; width: 100%; min-height: 100dvh; padding: 140px 6vw 80px; place-items: center; }
.opening-judgment,.sutton-reveal { grid-area: 1 / 1; width: 100%; text-align: center; }
.opening-judgment { opacity: 1; }
.opening-premise { font-family: 'Inter','PingFang SC','Microsoft YaHei',sans-serif; font-size: clamp(18px,1.8vw,28px); font-weight: 400; letter-spacing: .025em; line-height: 1.8; color: #242424; white-space: nowrap; }
.opening-judgment,.sutton-reveal { position: absolute; left: 6vw; right: 6vw; top: 50%; width: auto; transform: translateY(-50%); transition: opacity .3s ease!important; }
.route-opening:not([data-flow-step="0"]) .opening-judgment { opacity: 0; pointer-events: none; }
.sutton-reveal { margin: 0; opacity: 0; pointer-events: none; }
.sutton-reveal.is-visible { opacity: 1; pointer-events: auto; }
.sutton-reveal blockquote { font-family: Georgia,'Times New Roman',serif; font-size: clamp(19px,1.8vw,26px); font-weight: 400; line-height: 1.7; font-style: italic; color: #292929; text-wrap: balance; }
.sutton-reveal figcaption { margin-top: 28px; font-size: 13px; font-weight: 400; line-height: 1.6; color: #8b8b8b; letter-spacing: .02em; }
.sutton-reveal cite { font-family: Georgia,'Times New Roman',serif; }
.system-flow { position: relative; grid-area: 1 / 1; width: 100%; opacity: 0; pointer-events: none; transition: opacity .3s ease!important; }
.system-flow[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.flow-principle { margin: 0 0 42px; font-size: clamp(16px,1.6vw,22px); font-weight: 500; text-align: center; color: #333; }
[data-flow-reveal] { opacity: 0; pointer-events: none; transition: opacity .3s ease!important; }
[data-flow-reveal].is-visible { opacity: 1; pointer-events: auto; }
.vlm-network { padding-top: 104px; }
.vlm-connections { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.connection-track { opacity: .36; }
.system-flow .connection-signal { opacity: .8; animation: connection-flow 3.2s linear infinite!important; animation-play-state: paused!important; }
.route-opening[data-motion="active"] .vlm-network.is-visible .connection-signal { animation-play-state: running!important; }
@keyframes connection-flow { to { stroke-dashoffset: -144; } }
.vlm-module { position: relative; width: 240px; margin: 0 auto; padding: 13px 24px 15px; border: 1px solid rgba(0,102,255,.24); border-radius: 4px; background: var(--bl2); text-align: center; }
.vlm-module>span { font: 600 9px/1.4 'JetBrains Mono',monospace; letter-spacing: .13em; color: var(--bl); }
.vlm-module h3 { margin: 5px 0 0; font-size: 24px; color: var(--tx); }
.flow-summary .company-positioning { text-wrap: pretty; }
@media(max-width:800px) {
  .summary-break { display: none; }
  .opening-shell { padding-inline: 7vw; }
  .opening-premise { white-space: normal; text-wrap: balance; font-size: 20px; line-height: 2; }
  .sutton-reveal blockquote { font-size: 19px; line-height: 1.8; }
  .sutton-reveal figcaption { font-size: 11px; margin-top: 24px; }
  .opening-shell { padding-top: 140px; padding-bottom: 50px; }
  .opening-judgment,.sutton-reveal { top: 390px; }
  .vlm-network { padding-top: 40px; }
  .vlm-module { width: 220px; }
  .flow-principle { font-size: 17px; margin-bottom: 26px; line-height: 1.8; }
}
@media(max-width:600px) { .opening-kicker { top: 8vh; left: 18px; font-size: 10px; }.route-opening::before { top: 6vh; left: 18px; right: 18px; } }
@media(prefers-reduced-motion:reduce) { .opening-judgment,.sutton-reveal,.system-flow,[data-flow-reveal] { transition: none!important; } }
@media(prefers-reduced-motion:reduce) { .system-flow .connection-signal { animation: none!important; } }
@media print { .opening-shell { display: block; min-height: auto; }.opening-judgment { opacity: 1!important; visibility: visible!important; }.sutton-reveal { margin-top: 50px; opacity: 1; visibility: visible; } }
