/* VANTRIX v10 — Page 04: Networking & Power.
   Scoped to .network-page. Loads after the approved Solutions stylesheets and
   servers-page.css, reusing their components; only new pieces are styled here. */

.network-page { --net-cyan: #6fe9fb; --net-violet: #8b7bff; --net-power: #9d8cff; }

/* ---------- HERO */
.net-hero h1 { font-size: clamp(42px, 5.3vw, 84px); }
.net-hero .device-hero-photo > img { object-position: center 55%; filter: brightness(.66) saturate(.85); }
.net-hero-signals { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; transform: translate(calc(var(--dx) * .35), calc(var(--dy) * .35)); }
.net-hero-signals .sig-base { fill: none; stroke: #6fe9fb24; stroke-width: 1.2; }
.net-hero-signals .sig-pulse { fill: none; stroke: #8af0ff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 70 1700; filter: drop-shadow(0 0 6px #20cfff); animation: netSignal 7s linear infinite; }
@keyframes netSignal { from { stroke-dashoffset: 1770; } to { stroke-dashoffset: 0; } }
.net-hero .servers-hero-indicators span.is-power i { background: var(--net-power); box-shadow: 0 0 10px #7d6bff; }

/* ---------- 01 explorer: brand-free UPS illustration fills the same fixed frame */
.network-page .gallery-photo.is-illustration { background: #071624; }
.network-page .gallery-photo.is-illustration > svg.ups-illustration { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- 02 LIVING NETWORK */
.net-living { background: radial-gradient(ellipse at 30% 55%, #0a3049a6, #0000 58%), linear-gradient(#051422, #020a13); }
.net-living .device-section-top > p { color: #8ea6b7; }
.topo-explorer { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr); gap: clamp(24px, 3.5vw, 56px); align-items: center; }
.topo-stage { position: relative; width: 100%; max-width: 860px; aspect-ratio: 820 / 540; max-height: 600px; justify-self: center; }
.topo-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.topo-zone { fill: #0a1d2d66; stroke: #23445c; stroke-dasharray: 5 6; }
.topo-zone-floor { fill: #0a1a2840; }
.topo-zone-label { fill: #557890; font: 600 9px/1 Arial, sans-serif; letter-spacing: .16em; }
.topo-tag { fill: #5f8aa3; font: 600 8.5px/1 Arial, sans-serif; letter-spacing: .14em; }
.topo-tag-power { fill: #8577d6; }
.topo-edge { fill: none; stroke: #2a4d66; stroke-width: 2; stroke-linejoin: round; transition: stroke .35s, opacity .35s, stroke-width .35s; }
.topo-uplink { stroke-width: 3.2; }
.topo-radio { stroke-dasharray: 2 7; stroke-linecap: round; stroke-width: 2.4; }
.topo-power { stroke: #3c3778; stroke-dasharray: 6 6; stroke-width: 1.6; }
.topo-wan { stroke-width: 2.6; }
.topo-edge.is-lit { stroke: #5fdcf3; filter: drop-shadow(0 0 5px #1fbfff88); }
.topo-power.is-lit { stroke: #9d8cff; filter: drop-shadow(0 0 5px #7d6bff88); }
.topo-stage.has-focus .topo-edge:not(.is-lit) { opacity: .32; }
.topo-node { cursor: pointer; outline: none; transition: opacity .35s ease; }
.topo-box { fill: url(#topo-node-g); stroke: #2f5770; stroke-width: 1.4; transition: stroke .3s, fill .3s; }
.topo-ico { fill: none; stroke: #8fc7dc; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.topo-ico .ico-fill { fill: #8fc7dc; stroke: none; }
.topo-name { fill: #dcecf4; font: 500 12.5px/1 Arial, sans-serif; letter-spacing: -.01em; }
.topo-sub { fill: #6d8ea3; font: 600 8.5px/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.topo-k-ups .topo-ico { stroke: #b0a4ff; } .topo-k-ups .topo-ico .ico-fill { fill: #b0a4ff; }
.topo-stage.has-focus .topo-node:not(.is-linked):not(.is-active) { opacity: .42; }
.topo-node.is-linked .topo-box { stroke: #4fb8d6; }
.topo-node.is-active .topo-box { stroke: var(--net-cyan); stroke-width: 2; filter: url(#topo-glow); }
.topo-node.is-active .topo-ico { stroke: #c9f8ff; } .topo-node.is-active .topo-ico .ico-fill { fill: #c9f8ff; }
.topo-node:hover .topo-box, .topo-node:focus-visible .topo-box { stroke: #9eeefa; }
.topo-node:focus-visible .topo-box { stroke-width: 2.4; }
.topo-pulse { fill: #9ef3ff; filter: drop-shadow(0 0 5px #22d3ff); }
.topo-pulse.is-power { fill: #c2b8ff; filter: drop-shadow(0 0 5px #7d6bff); }
.network-page .topo-information {
  display: grid !important; grid-template-columns: 1fr !important; gap: 18px; align-self: center; min-height: 0 !important;
  padding: 28px !important; margin: 0; border: 1px solid #72ceec47 !important; border-radius: 8px;
  background: linear-gradient(140deg, #0e3146e6, #051525dc); box-shadow: 0 18px 48px #00000029;
}
.network-page .topo-information > * { grid-column: 1 / -1 !important; }
.topo-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 10px; letter-spacing: .12em; color: #7f9fb3; text-transform: uppercase; }
.topo-legend span { display: inline-flex; align-items: center; gap: 7px; }
.topo-legend i { width: 18px; height: 0; border-top: 2px solid #5fdcf3; }
.topo-legend i.lg-radio { border-top: 2px dotted #5fdcf3; }
.topo-legend i.lg-power { border-top: 2px dashed #9d8cff; }
.topo-expls { display: grid; }
.topo-expl { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.topo-expl.is-on { visibility: visible; opacity: 1; animation: .4s both deviceDetail; }
.topo-expl .device-micro { display: block; margin-bottom: 10px; color: #5fdcf0; }
.topo-expl h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.03em; margin-bottom: 12px; }
.topo-expl p { color: #9bb0c0; font-size: 15px; line-height: 1.75; }
.topo-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.topo-chips button { font: inherit; font-size: 11.5px; cursor: pointer; color: #a8c4d3; background: transparent; border: 1px solid #315268; border-radius: 999px; padding: 7px 11px; transition: all .2s; }
.topo-chips button:hover { border-color: #6fbad2; color: #dff8ff; }
.topo-chips button[aria-pressed="true"] { color: #072335; background: #95e3f0; border-color: #95e3f0; }
.net-living .device-photo-note { color: #8597a8; }

/* ---------- 03 DEPLOYMENT JOURNEY */
.net-journey { background: linear-gradient(#edf0f2, #e7ecef); }
.journey-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.journey-media { position: sticky; top: 104px; }
.journey-frame { position: relative; aspect-ratio: 4 / 3; max-height: 470px; width: 100%; overflow: hidden; border-radius: 6px; background: #0c1d2c; box-shadow: 0 26px 60px #0a2a3d2e; }
.journey-shot { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity .8s ease, transform 1.4s cubic-bezier(.2,.8,.2,1); }
.journey-shot.is-on { opacity: 1; transform: none; }
.journey-shot > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.journey-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(#0000 55%, #020a14b0); pointer-events: none; }
.journey-label { position: absolute; z-index: 2; left: 22px; bottom: 18px; font-size: 10px; letter-spacing: .18em; color: #e3f5fb; }
.journey-steps { list-style: none; margin: 0; padding: 0 0 0 26px; position: relative; display: grid; gap: 10px; }
.journey-steps::before { content: ""; position: absolute; left: 6px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(#c8d4dc, #c8d4dc) no-repeat, #c8d4dc; }
.journey-steps::after { content: ""; position: absolute; left: 6px; top: 18px; width: 2px; height: calc(var(--journey, 0) * (100% - 36px)); background: linear-gradient(#37c2e2, #1d7fd0); box-shadow: 0 0 12px #2bb6e6; transition: height .6s cubic-bezier(.2,.8,.2,1); }
.journey-step { position: relative; padding: 18px 22px; border: 1px solid #cfdbe2; border-radius: 6px; background: #ffffff80; transition: background .35s, border-color .35s, box-shadow .35s, opacity .35s; }
.journey-step > .stream-anchor { left: -20px !important; }
.journey-step::before { content: ""; position: absolute; left: -26px; top: 24px; width: 12px; height: 12px; border-radius: 50%; background: #e7edf0; border: 2px solid #b9c8d2; transition: all .35s; }
.journey-step.is-done::before, .journey-step.is-active::before { background: #6fe9fb; border-color: #1fa4cf; box-shadow: 0 0 0 4px #6fe9fb2e, 0 0 12px #20cfff; }
.journey-step > button { display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: #0f2b3b; text-align: left; }
.journey-step > button small { font-size: 10px; letter-spacing: .14em; color: #7d93a1; }
.journey-step > button b { font-size: 11px; letter-spacing: .18em; font-weight: 600; color: #136d8a; }
.journey-body h3 { margin: 10px 0 8px; font-size: clamp(19px, 1.6vw, 23px); font-weight: 500; letter-spacing: -.03em; color: #10293a; }
.journey-body p { color: #526474; font-size: 14.5px; line-height: 1.75; }
.journey-body ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.journey-body li { font-size: 11px; letter-spacing: .04em; color: #0b5671; background: #dff1f7; border: 1px solid #b5dbe8; border-radius: 999px; padding: 5px 10px; }
.journey-step:not(.is-active) { opacity: .62; }
.journey-step.is-active { opacity: 1; background: #fff; border-color: #1595bd; box-shadow: 0 14px 34px #0b3a5222, inset 3px 0 #1595bd; }

/* ---------- 04 POWER CHAPTER (deeper navy, violet/cyan power pulses) */
.net-power { background: radial-gradient(ellipse at 18% 30%, #2b1f7a40, #0000 50%), radial-gradient(ellipse at 85% 75%, #0b3b5a55, #0000 52%), #01060f; }
.net-power .device-eyebrow > span { color: #a99bff; }
.net-power .device-section-top > p { color: #93a6c2; }
.ups-sim { border: 1px solid #2a3f74; border-radius: 12px; background: linear-gradient(150deg, #0b1734ee, #050c1cf2); box-shadow: 0 30px 80px #0007, inset 0 1px 0 #8d7cff22; padding: clamp(18px, 2.4vw, 30px); }
.ups-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.ups-controls [role="tab"] { font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; gap: 9px; align-items: baseline; padding: 10px 16px; border-radius: 999px; color: #b7c6e6; background: #0b1630; border: 1px solid #2d4073; transition: all .25s; }
.ups-controls [role="tab"] small { font-size: 9.5px; letter-spacing: .12em; color: #7f8fbf; }
.ups-controls [role="tab"][aria-selected="true"] { color: #071225; background: #b9f2fb; border-color: #b9f2fb; }
.ups-controls [role="tab"][aria-selected="true"] small { color: #1b4b66; }
.ups-sim[data-ups-state="outage"] .ups-controls [role="tab"][aria-selected="true"] { background: #cbc2ff; border-color: #cbc2ff; }
.ups-play { margin-left: auto; font: inherit; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; color: #93a6c2; background: transparent; border: 1px solid #2d4073; border-radius: 999px; }
.ups-play .vx-ico-play { display: none; } .ups-play[aria-pressed="false"] .vx-ico-play { display: block; } .ups-play[aria-pressed="false"] .vx-ico-pause { display: none; }
.ups-body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: center; }
.ups-diagram { aspect-ratio: 820 / 300; width: 100%; }
.ups-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ups-line { fill: none; stroke: #1d2f55; stroke-width: 6; stroke-linecap: round; }
.ups-flow { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 15; opacity: 0; transition: opacity .6s ease, stroke .6s ease; }
.ups-in, .ups-out { stroke: #74ecff; filter: drop-shadow(0 0 4px #22d3ff); }
.ups-batt { stroke: #b0a4ff; filter: drop-shadow(0 0 4px #7d6bff); }
.ups-box { fill: #0c1a35; stroke: #34508a; stroke-width: 1.5; }
.ups-unit .ups-box { stroke: #5fd3ef; }
.ups-ring { fill: #0b1834; stroke: #34508a; stroke-width: 1.5; transition: stroke .6s; }
.ups-ico { fill: none; stroke: #8fd8ee; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .6s, opacity .6s; }
.ups-label { fill: #a8bad9; font: 600 11px/1 Arial, sans-serif; letter-spacing: .16em; }
.ups-label-in { fill: #d9f7ff; font-size: 13px; }
.ups-mini { fill: #8fb3c9; font: 600 9px/1 Arial, sans-serif; letter-spacing: .06em; }
.ups-stage { fill: #0a2340; stroke: #2f5a86; }
.ups-arrow { fill: none; stroke: #6fe9fb; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ups-u { fill: #12244a; stroke: #2e4a80; }
.ups-led { fill: #5df0a0; animation: rkBlink 2.4s steps(2, jump-none) infinite; }
.ups-batt-bg { fill: #0a1430; }
.ups-batt-level { fill: url(#ups-batt-g); transform-box: fill-box; transform-origin: left center; transform: scaleX(1); transition: transform 7s linear; }
.ups-cut { opacity: 0; transition: opacity .6s ease; }
.ups-cut circle { fill: #2a1d16; stroke: #e6a46e; stroke-width: 1.4; }
.ups-cut path { stroke: #e6a46e; stroke-width: 1.8; stroke-linecap: round; }
/* states */
.ups-sim[data-ups-state="normal"] .ups-in, .ups-sim[data-ups-state="normal"] .ups-out,
.ups-sim[data-ups-state="recovery"] .ups-in, .ups-sim[data-ups-state="recovery"] .ups-out,
.ups-sim[data-ups-state="outage"] .ups-out { opacity: 1; animation: upsFlow 1.1s linear infinite; }
.ups-sim[data-ups-state="normal"] .ups-batt { opacity: .35; animation: upsFlow 2.6s linear infinite; }
.ups-sim[data-ups-state="recovery"] .ups-batt { opacity: 1; animation: upsFlow 1.6s linear infinite; }
.ups-sim[data-ups-state="outage"] .ups-batt { opacity: 1; animation: upsFlow 1.1s linear infinite reverse; }
.ups-sim[data-ups-state="outage"] .ups-mains .ups-ico { stroke: #4d5f80; opacity: .6; }
.ups-sim[data-ups-state="outage"] .ups-mains .ups-ring { stroke: #6a5040; }
.ups-sim[data-ups-state="outage"] .ups-cut { opacity: 1; }
.ups-sim[data-ups-state="outage"] .ups-battery .ups-box { stroke: #9d8cff; }
.ups-sim[data-ups-state="outage"] .ups-batt-level { transform: scaleX(.52); }
.ups-sim[data-ups-state="recovery"] .ups-batt-level { transform: scaleX(1); transition-duration: 5.5s; }
.ups-sim[data-ups-state="normal"] .ups-batt-level { transition-duration: .8s; }
@keyframes upsFlow { to { stroke-dashoffset: -36; } }
.ups-status { display: grid; gap: 18px; }
.ups-expls { display: grid; }
.ups-expl { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.ups-status { grid-template-areas: "s" "r"; }
.ups-status > .ups-expl { grid-area: s; }
.ups-status > .ups-runtime { grid-area: r; }
.ups-expl.is-on { visibility: visible; opacity: 1; animation: .45s both deviceDetail; }
.ups-expl .device-micro { color: #b0a4ff; display: block; margin-bottom: 10px; }
.ups-sim[data-ups-state="normal"] .ups-expl .device-micro, .ups-sim[data-ups-state="recovery"] .ups-expl .device-micro { color: #6fe9fb; }
.ups-expl h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 500; letter-spacing: -.03em; margin-bottom: 10px; color: #eef3ff; }
.ups-expl p { color: #a3b3cf; font-size: 15px; line-height: 1.75; }
.ups-runtime { margin: 0; padding-top: 14px; border-top: 1px solid #22335e; color: #8fa1c4; font-size: 12.5px; line-height: 1.7; }
.ups-runtime span { display: block; font-size: 9.5px; letter-spacing: .16em; color: #b0a4ff; margin-bottom: 4px; }
.power-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid #1d2c52; }
.power-points li { padding: 20px 20px 4px 0; }
.power-points b { display: block; font-size: 15.5px; font-weight: 500; color: #eef3ff; margin-bottom: 7px; letter-spacing: -.01em; }
.power-points b::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; vertical-align: middle; border-radius: 50%; background: #9d8cff; box-shadow: 0 0 8px #7d6bff; }
.power-points p { color: #8b9dbd; font-size: 13.5px; line-height: 1.65; }
.power-note { margin-top: 24px !important; max-width: 860px; color: #8b9dbd; font-size: 12.5px; line-height: 1.8; padding-left: 14px; border-left: 2px solid #6b5ce0; }

/* ---------- 05 COMPARISON (2 or 3 options; shared column system) */
.net-cmp { --cols: 2; }
.net-cmp[data-cols="3"] { --cols: 3; }
.net-cmp-heads, .net-cmp-table tbody tr { display: grid; grid-template-columns: 24% repeat(var(--cols), minmax(0, 1fr)); align-items: start; }
.net-cmp-heads { padding-bottom: 8px; }
.net-cmp-heads > span { align-self: center; font-size: 10px; letter-spacing: .13em; color: #597382; }
.net-cmp-heads .cmp-head { padding-right: 24px; min-width: 0; }
.net-cmp-table { display: block; width: 100%; border-collapse: collapse; }
.net-cmp-table thead { display: none; }
.net-cmp-table tbody { display: block; animation: .4s both deviceDetail; }
.net-cmp-table tbody tr { border-bottom: 1px solid #1c405729; }
.net-cmp-table th, .net-cmp-table td { display: block; text-align: left; padding: 16px 24px 16px 0; font-size: 14px; line-height: 1.55; color: #4c6170; font-weight: 400; min-width: 0; }
.net-cmp-table tbody th { color: #173647; font-weight: 600; }

/* ---------- 06 lifecycle: five stages */
.net-lifecycle .procurement-track { grid-template-columns: repeat(5, 1fr); }

/* ---------- motion */
html[data-motion="paused"] .network-page * { animation-play-state: paused !important; }
.network-page .device-section:not(.is-inview) .ups-flow,
.network-page .device-section:not(.is-inview) .ups-led { animation-play-state: paused; }
.net-hero:not(.is-inview) .sig-pulse { animation-play-state: paused; }

/* ---------- responsive */
@media (max-width: 1100px) {
  .topo-explorer { grid-template-columns: 1fr; }
  .topo-stage { max-width: 760px; }
  .power-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ups-body { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .journey-grid { grid-template-columns: 1fr; gap: 22px; }
  .journey-media { position: sticky; top: 10px; z-index: 3; }
  .journey-frame { aspect-ratio: 16 / 8; max-height: 230px; box-shadow: 0 14px 30px #0a2a3d40; }
}
@media (max-width: 800px) {
  .net-hero .servers-hero-indicators { display: none; }
  .net-hero h1 { font-size: clamp(36px, 9.6vw, 60px); }
  .network-page .topo-information { padding: 20px !important; gap: 14px; }
  .topo-expl h3 { font-size: 21px; }
  .topo-expl p, .ups-expl p { font-size: 14px; }
  .topo-chips button { font-size: 11px; padding: 7px 10px; }
  .ups-controls [role="tab"] { font-size: 12px; padding: 9px 12px; }
  .ups-play { margin-left: 0; }
  .ups-diagram { aspect-ratio: auto; }
  .power-points li { padding-right: 12px; }
  .net-cmp-heads { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: 16px; }
  .net-cmp-heads > span { grid-column: 1 / -1; margin-bottom: 10px; }
  .net-cmp-heads .cmp-head { padding-right: 0; }
  .net-cmp-table tbody tr { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: 16px; padding: 16px 0; }
  .net-cmp-table tbody th { grid-column: 1 / -1; padding: 0 0 8px; font-size: 12px; }
  .net-cmp-table td { padding: 0; font-size: 13px; }
  /* three options: stack each option with its name so nothing gets squeezed */
  .net-cmp[data-cols="3"] .net-cmp-heads { display: none; }
  .net-cmp[data-cols="3"] .net-cmp-table tbody tr { grid-template-columns: 1fr; row-gap: 10px; }
  .net-cmp[data-cols="3"] .net-cmp-table td::before { content: attr(data-name); display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #136d8a; margin-bottom: 3px; }
  .net-lifecycle .procurement-track { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 420px) {
  .power-points { grid-template-columns: 1fr; }
  .journey-frame { max-height: 190px; }
  .journey-step { padding: 15px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .net-hero-signals .sig-pulse, .ups-flow, .ups-led { animation: none !important; }
  .ups-sim .ups-flow { stroke-dasharray: none; }
  .ups-batt-level, .journey-shot { transition: none !important; }
  .net-hero-signals { transform: none !important; }
}
.ups-short { display: none; }
/* phones: keep the diagrams legible — bigger nodes and strokes, labels only where they fit */
@media (max-width: 600px) {
  .topo-name, .topo-sub, .topo-tag, .topo-zone-label { display: none; }
  .topo-node.is-active .topo-name { display: block; font-size: 25px; font-weight: 600; fill: #e9fbff; }
  .topo-node.is-active .topo-name { transform: translateY(14px); }
  .topo-box, .topo-ico { transform-box: fill-box; transform-origin: center; }
  .topo-box { transform: scale(1.3); }
  .topo-ico { transform: scale(1.55); }
  .topo-edge { stroke-width: 3.6; }
  .topo-uplink { stroke-width: 5.4; }
  .topo-radio { stroke-width: 4; stroke-dasharray: 3 9; }
  .topo-power { stroke-width: 3; stroke-dasharray: 9 8; }
  .topo-pulse { transform-box: fill-box; transform-origin: center; transform: scale(1.7); }
  .ups-long, .ups-mini { display: none; }
  .ups-short { display: block; font-size: 26px; letter-spacing: .08em; }
  .ups-label-in { font-size: 26px; }
  .ups-line { stroke-width: 9; }
  .ups-flow { stroke-width: 5; }
}
.topo-name, .topo-sub { paint-order: stroke; stroke: #041320; stroke-width: 5px; stroke-linejoin: round; }