.assembly-line-page .connector-hero-media img,
.assembly-line-page .connector-material-card img {
  object-fit: cover;
  object-position: center;
}

.assembly-line-page .connector-hero-copy h1 {
  max-width: min(17ch, 580px);
}

.assembly-line-page .connector-hero-grid {
  grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.92fr);
  gap: 28px;
  align-items: stretch;
}

.assembly-line-page .connector-hero-media {
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  max-height: none;
}

.line-hero-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 12px;
  margin-top: 36px;
}

.line-hero-actions .btn {
  min-width: 0;
  width: 100%;
  justify-content: center;
  white-space: nowrap;
}

.line-hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 32px;
}

.line-metric {
  padding: 16px 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
}

.line-metric strong {
  display: block;
  font-size: 22px;
  line-height: 1.1;
}

.line-metric span {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,0.62);
  font-size: 12px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.assembly-line-page .connector-overview-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(350px, 0.78fr);
  gap: 24px;
}

.assembly-line-page .connector-overview,
.assembly-line-page .assembly-line-features-section {
  padding: 44px 0;
}

.assembly-line-page .connector-overview .connector-section-heading,
.assembly-line-page .assembly-line-features-section .connector-section-heading {
  margin-bottom: 16px;
}

.assembly-line-page .connector-overview .connector-section-heading h2,
.assembly-line-page .assembly-line-features-section .connector-section-heading h2 {
  font-size: clamp(26px, 2.4vw, 36px);
  margin-top: 12px;
}

.assembly-line-page .connector-overview .connector-section-heading p,
.assembly-line-page .assembly-line-features-section .connector-section-heading p {
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6;
  margin-top: 12px;
}

.assembly-line-page .connector-material-card .connector-material-copy {
  padding: 20px 24px 24px;
}

.assembly-line-page .connector-material-card h3 {
  font-size: clamp(19px, 1.5vw, 23px);
  margin-top: 10px;
}

.assembly-line-page .connector-material-card p {
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.55;
  margin-top: 10px;
}

.assembly-line-page .assembly-line-component-stack {
  display: grid;
  grid-template-rows: auto repeat(6, minmax(0, 1fr));
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.assembly-line-page .assembly-line-component-stack .snap-component-card {
  align-items: center;
  padding: 13px 18px;
}

.assembly-line-page .assembly-line-component-stack .snap-component-icon {
  width: 42px;
  height: 42px;
}

.assembly-line-page .assembly-line-component-stack .snap-component-body strong {
  font-size: clamp(14.5px, 1.06vw, 16px);
}

.assembly-line-page .assembly-line-component-stack .snap-component-body p {
  font-size: clamp(12px, 0.9vw, 13px);
  line-height: 1.42;
}

.explorer-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.explorer-nav,
.explorer-stage,
.line-parameter-table,
.layout-summary-card {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(18,20,24,0.96), rgba(7,8,10,0.96));
  box-shadow: 0 30px 80px rgba(0,0,0,0.3);
}

.explorer-nav {
  padding: 18px;
  display: grid;
  gap: 10px;
  align-content: start;
  position: sticky;
  top: 24px;
}

.explorer-trigger {
  width: 100%;
  padding: 16px 16px 15px;
  border: 1px solid rgba(255,255,255,0.1);
  border-left: 3px solid transparent;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.82);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.explorer-trigger strong {
  display: block;
  font-size: 18px;
  line-height: 1.15;
}

.explorer-trigger span {
  display: block;
  margin-top: 7px;
  color: rgba(255,255,255,0.52);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.explorer-trigger:hover,
.explorer-trigger:focus-visible,
.explorer-trigger.is-active {
  transform: translateX(3px);
  border-color: rgba(255,255,255,0.14);
  border-left-color: #ff4a45;
  background: linear-gradient(180deg, rgba(229,57,53,0.16), rgba(255,255,255,0.04));
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03), 0 12px 24px rgba(0,0,0,0.12);
  outline: none;
}

.explorer-stage {
  position: relative;
  min-height: 0;
  overflow: visible;
  isolation: isolate;
}

.explorer-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(229,57,53,0.08), transparent 18%),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
}

.explorer-panel {
  position: relative;
  padding: 24px;
  display: none;
  grid-template-columns: 1fr;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 18px;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  transition: none;
  z-index: 1;
}

.explorer-panel.is-active {
  display: grid;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.explorer-visual,
.explorer-copy {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}

.explorer-copy {
  display: grid;
  order: 1;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 14px;
}

.explorer-copy > .connector-card-label,
.explorer-copy > h3,
.explorer-copy > p,
.explorer-copy > .explorer-badges,
.explorer-copy > .explorer-list {
  grid-column: 1;
}

.explorer-visual {
  order: 2;
}

.explorer-visual {
  position: relative;
  min-height: 520px;
  background:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(145deg, rgba(136,151,172,0.9), rgba(196,206,221,0.82));
  background-size: 48px 48px, 48px 48px, auto;
}

.explorer-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,0.18) 48%, transparent 58%);
}

.explorer-panel.is-active .explorer-visual::after {
  opacity: 1;
  animation: explorerSweep 680ms ease;
}

.explorer-copy {
  padding: 28px;
}

.explorer-copy h3 {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(24px, 1.9vw, 28px);
  line-height: 1.2;
  font-weight: 720;
}

.explorer-copy p {
  margin: 0;
  max-width: 620px;
  color: rgba(255,255,255,0.72);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.7;
}

.explorer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.explorer-badge {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: rgba(255,255,255,0.84);
  background: rgba(255,255,255,0.03);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.explorer-list {
  display: grid;
  gap: 10px;
}

.explorer-list div {
  padding: 14px 16px;
  border-left: 3px solid rgba(229,57,53,0.72);
  background: rgba(255,255,255,0.035);
}

.explorer-list strong {
  display: block;
  font-size: 18px;
}

.explorer-list span {
  display: block;
  margin-top: 6px;
  color: rgba(255,255,255,0.62);
  font-size: 14px;
  line-height: 1.45;
}

.module-visual {
  display: block;
}

.module-visual img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: contain;
  object-position: center;
  background: #bfc8d6;
  box-shadow: 0 18px 42px rgba(0,0,0,0.18);
}

.arrangement-visual img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: contain;
  object-position: center;
  background: #d7d8dc;
  box-shadow: 0 18px 42px rgba(0,0,0,0.18);
}

.frontend-visual img,
.backend-visual img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  object-fit: contain;
  object-position: center;
  background: #d7d8dc;
  box-shadow: 0 18px 42px rgba(0,0,0,0.18);
}

.annotation-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 440px;
  border-radius: 6px;
  overflow: hidden;
  background: #cfd6e0;
}

.annotation-canvas img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: contrast(1.03) saturate(1.04);
}

.annotation-dimension-plate {
  position: absolute;
  left: 18px;
  bottom: 14px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(12,12,12,0.9);
  color: #f2f2f2;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 10px 20px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.04);
}

.annotation-tag,
.annotation-line {
  position: absolute;
  pointer-events: none;
}

.annotation-tag {
  padding: 10px 14px;
  border: 1px solid rgba(95,188,246,0.74);
  background: linear-gradient(180deg, rgba(8,26,44,0.84), rgba(4,13,24,0.88));
  color: #e7f6ff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

.annotation-line {
  display: none;
}

.annotation-canvas-frontend .tag-loading {
  left: 2.6%;
  top: 56%;
}

.annotation-canvas-frontend .tag-diode {
  left: 56.5%;
  top: 18.5%;
}

.annotation-canvas-frontend .tag-unload-main {
  right: 2.4%;
  top: 47%;
  max-width: 170px;
}

.annotation-canvas-frontend .tag-unload-middle {
  right: 2.4%;
  top: 67%;
}

.annotation-canvas-frontend .line-front-load-1 {
  left: 13.2%;
  top: 31%;
  width: 19%;
  transform: rotate(0deg);
}

.annotation-canvas-frontend .line-front-load-2 {
  left: 13.2%;
  top: 48%;
  width: 17%;
}

.annotation-canvas-frontend .line-front-load-3 {
  left: 13.2%;
  top: 65%;
  width: 15%;
}

.annotation-canvas-frontend .line-front-diode {
  left: 58%;
  top: 33%;
  width: 17%;
}

.annotation-canvas-frontend .line-front-unload-main {
  left: 82.2%;
  top: 54%;
  width: 11%;
}

.annotation-canvas-frontend .line-front-unload-middle {
  left: 81.4%;
  top: 77%;
  width: 12%;
}

.annotation-canvas-backend .tag-loading {
  left: 2.2%;
  top: 58%;
}

.annotation-canvas-backend .tag-manual {
  left: 36%;
  top: 76%;
}

.annotation-canvas-backend .tag-press {
  right: 6.3%;
  top: 43%;
}

.annotation-canvas-backend .tag-unload-top {
  right: 4.4%;
  top: 24%;
}

.annotation-canvas-backend .tag-unload-bottom {
  right: 4.4%;
  top: 62%;
}

.annotation-canvas-backend .line-back-load-1 {
  left: 13%;
  top: 45%;
  width: 16%;
}

.annotation-canvas-backend .line-back-load-2 {
  left: 13%;
  top: 66%;
  width: 13%;
}

.annotation-canvas-backend .line-back-manual {
  left: 42%;
  top: 72%;
  width: 13%;
  transform: rotate(-39deg);
  transform-origin: left center;
}

.annotation-canvas-backend .line-back-press-1 {
  left: 53%;
  top: 38%;
  width: 23%;
  transform: rotate(24deg);
  transform-origin: left center;
}

.annotation-canvas-backend .line-back-press-2 {
  left: 53%;
  top: 67%;
  width: 22%;
  transform: rotate(-28deg);
  transform-origin: left center;
}

.annotation-canvas-backend .line-back-unload-top {
  left: 78.2%;
  top: 32%;
  width: 12%;
}

.annotation-canvas-backend .line-back-unload-bottom {
  left: 78%;
  top: 67%;
  width: 12%;
}

.annotation-canvas-arrangement .tag-front-cell {
  left: 5%;
  top: 18%;
}

.annotation-canvas-arrangement .tag-back-split {
  right: 4.5%;
  bottom: 19%;
}

.arrangement-visual,
.frontend-visual,
.backend-visual,
.flow-visual,
.module-visual {
  padding: 24px;
}

.line-layout-stage {
  position: relative;
  height: 100%;
  min-height: 472px;
}

.line-body,
.line-body-small,
.line-feeder,
.line-bridge,
.line-dock,
.line-unload-box,
.line-middle-box {
  position: absolute;
  border-radius: 8px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.22);
}

.line-feeder {
  left: 2%;
  top: 54%;
  width: 16%;
  height: 34%;
  background: linear-gradient(180deg, #f4f4f6, #d3d0d7);
}

.line-feeder::after {
  content: "";
  position: absolute;
  inset: 14% 10% 14% 52%;
  background: rgba(76,58,79,0.32);
}

.line-body {
  left: 18%;
  top: 38%;
  width: 32%;
  height: 28%;
  background: linear-gradient(180deg, #fff, #bbb5c3 64%, #5c4b4f 64%, #4b3f43 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.64);
}

.line-body::before,
.line-body::after,
.line-body-small::before,
.line-body-small::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  height: 3px;
  background: #08118f;
}

.line-body::before,
.line-body-small::before {
  top: 34%;
}

.line-body::after,
.line-body-small::after {
  top: 68%;
}

.line-body-small {
  width: 28%;
  height: 24%;
  background: linear-gradient(180deg, #fff, #bdb9c4 62%, #604f52 62%, #493d40 100%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,0.64);
}

.arrangement-visual .line-body:first-of-type {
  left: 54%;
  top: 16%;
}

.arrangement-visual .line-body-small:nth-of-type(3) {
  left: 58%;
  top: 46%;
}

.line-bridge {
  left: 47%;
  top: 42%;
  width: 12%;
  height: 12%;
  background: linear-gradient(180deg, #5c5660, #433a40);
  clip-path: polygon(0 25%, 100% 0, 100% 70%, 0 100%);
}

.line-dock {
  left: 50%;
  top: 50%;
  width: 10%;
  height: 20%;
  background: linear-gradient(180deg, #5d5963, #423a3f);
}

.stage-tag,
.stage-tag-small {
  position: absolute;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,0.66);
  background: rgba(255,255,255,0.9);
  color: #111;
  font-weight: 900;
  font-size: 15px;
  line-height: 1.2;
  box-shadow: 0 12px 28px rgba(0,0,0,0.16);
}

.stage-tag {
  min-width: 176px;
}

.tag-left { left: 3%; top: 12%; }
.tag-right-top { right: 4%; top: 18%; }
.tag-right-bottom { right: 4%; bottom: 18%; }
.tag-center-top { right: 19%; top: 8%; min-width: 168px; }
.tag-bottom-center { left: 32%; bottom: 3%; min-width: 184px; }

.arrow-beam {
  position: absolute;
  height: 6px;
  background: linear-gradient(90deg, #3b9ee7, #68b8f1);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.16);
}

.arrow-beam::after {
  content: "";
  position: absolute;
  right: -14px;
  top: -5px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 14px solid #68b8f1;
}

.beam-left-top { left: 14%; top: 24%; width: 28%; }
.beam-left-mid { left: 14%; top: 50%; width: 22%; }
.beam-left-low { left: 14%; top: 75%; width: 18%; }
.beam-right-mid { right: 20%; top: 53%; width: 18%; }
.beam-right-low { right: 20%; top: 77%; width: 14%; }

.arrangement-visual .beam-arrangement-1 { left: 30%; top: 30%; width: 18%; transform: rotate(-76deg); transform-origin: left center; }
.arrangement-visual .beam-arrangement-2 { left: 43%; top: 32%; width: 20%; transform: rotate(-58deg); transform-origin: left center; }
.arrangement-visual .beam-arrangement-3 { left: 63%; top: 30%; width: 19%; }

.frontend-visual .line-feeder {
  left: 4%;
  top: 12%;
  width: 20%;
  height: 72%;
}

.frontend-visual .line-body {
  left: 28%;
  top: 22%;
  width: 56%;
  height: 46%;
  transform: skew(-8deg);
}

.frontend-visual .stage-tag-right-top {
  top: 16%;
}

.backend-visual .line-body:first-of-type {
  left: 34%;
  top: 14%;
  width: 42%;
  height: 24%;
  transform: rotate(8deg);
}

.backend-visual .line-body-small:nth-of-type(2) {
  left: 35%;
  top: 48%;
  width: 42%;
  height: 24%;
  transform: rotate(8deg);
}

.backend-visual .line-feeder {
  left: 10%;
  top: 42%;
  width: 18%;
  height: 36%;
}

.backend-visual .beam-right-top { right: 10%; top: 22%; width: 12%; }
.backend-visual .beam-right-mid { right: 10%; top: 47%; width: 12%; }
.backend-visual .beam-left-top { left: 11%; top: 54%; width: 20%; }
.backend-visual .beam-left-low { left: 11%; top: 69%; width: 16%; }

.flow-visual img {
  display: block;
  width: 96%;
  height: auto;
  max-width: 96%;
  max-height: 96%;
  padding: 0;
  box-sizing: content-box;
  border-radius: 6px;
  object-fit: contain;
  object-position: center;
  background: #d7d8dc;
  box-shadow: 0 18px 42px rgba(0,0,0,0.18);
}

.flow-visual {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-visual img {
  transform: translateY(-10px);
}

.flow-diagram {
  display: block;
  width: 100%;
  height: auto;
  min-height: auto;
  overflow: visible;
}

.flow-box rect {
  fill: rgba(255,255,255,0.98);
  stroke: #111316;
  stroke-width: 3.5;
  rx: 0;
}

.flow-box text {
  fill: #111316;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 14px;
  text-anchor: middle;
  dominant-baseline: middle;
}

.flow-box-tiny text {
  font-size: 11px;
}

.flow-connector,
.flow-main-loop,
.flow-return-line {
  fill: none;
  stroke: #5aa9e6;
  stroke-width: 7;
  stroke-linecap: square;
  stroke-linejoin: round;
  marker-end: url(#flow-arrow-head);
  animation: flowStroke 5.2s ease-in-out infinite;
}

.flow-main-loop,
.flow-return-line {
  stroke-width: 5;
  opacity: 0.92;
}

.flow-main-loop-large {
  stroke-width: 14;
  opacity: 0.86;
}

.flow-arrow-head {
  fill: #5aa9e6;
}

.line-parameter-table {
  overflow: hidden;
}

.line-parameter-table table {
  width: 100%;
  border-collapse: collapse;
}

.line-parameter-table th,
.line-parameter-table td {
  padding: 24px 22px;
  border: 1px solid rgba(255,255,255,0.1);
  text-align: left;
  vertical-align: top;
}

.line-parameter-table th {
  width: 18%;
  color: #fff;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.line-parameter-table td {
  color: rgba(255,255,255,0.78);
  font-size: 18px;
  line-height: 1.55;
}

.layout-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.layout-summary-card {
  padding: 22px;
}

.layout-summary-card h3 {
  margin: 14px 0 0;
  font-size: 24px;
}

.layout-summary-card p {
  margin: 12px 0 0;
  color: rgba(255,255,255,0.68);
  font-size: 15px;
  line-height: 1.55;
}

.assembly-line-page .connector-cta-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}

@keyframes flowPulse {
  0%,
  100% {
    opacity: 0.78;
    filter: saturate(0.9);
  }

  50% {
    opacity: 1;
    filter: saturate(1.15);
  }
}

@keyframes flowStroke {
  0%,
  100% {
    stroke: #4f9ddd;
    filter: drop-shadow(0 0 0 rgba(90,169,230,0));
  }

  50% {
    stroke: #73bef6;
    filter: drop-shadow(0 0 12px rgba(90,169,230,0.32));
  }
}

@keyframes explorerSweep {
  0% {
    opacity: 0;
    transform: translateX(-16%);
  }

  25% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
    transform: translateX(16%);
  }
}

@media (max-width: 1180px) {
  .assembly-line-page .connector-hero-media {
    max-height: 620px;
  }

  .line-hero-metrics,
  .layout-summary-grid,
  .flow-diagram {
    min-height: auto;
  }

  .explorer-shell,
  .explorer-panel,
  .assembly-line-page .connector-overview-grid,
  .assembly-line-page .connector-cta-section {
    grid-template-columns: 1fr;
  }

  .explorer-nav {
    position: static;
  }

  .explorer-copy {
    grid-template-columns: 1fr;
  }

  .explorer-copy > .connector-card-label,
  .explorer-copy > h3,
  .explorer-copy > p,
  .explorer-copy > .explorer-badges,
  .explorer-copy > .explorer-list {
    grid-column: 1;
  }

  .explorer-stage {
    min-height: 1120px;
  }

  .explorer-visual {
    min-height: 460px;
  }

  .flow-box text {
    font-size: 12px;
  }

  .annotation-tag {
    font-size: 11px;
    padding: 8px 10px;
  }

  .annotation-dimension-plate {
    font-size: 11px;
    letter-spacing: 0.05em;
  }
}

@media (max-width: 760px) {
  .line-hero-actions,
  .line-hero-metrics,
  .layout-summary-grid,
  .flow-track {
    grid-template-columns: 1fr;
  }

  .explorer-panel {
    padding: 18px;
  }

  .explorer-stage {
    min-height: 1240px;
  }

  .explorer-copy,
  .layout-summary-card {
    padding: 18px;
  }

  .module-visual,
  .arrangement-visual,
  .frontend-visual,
  .backend-visual,
  .flow-visual {
    padding: 16px;
  }

  .annotation-canvas {
    min-height: 360px;
  }

  .annotation-line {
    display: none;
  }

  .annotation-tag {
    font-size: 9px;
    padding: 6px 8px;
    max-width: 128px;
  }

  .annotation-dimension-plate {
    left: 10px;
    right: 10px;
    bottom: 10px;
    font-size: 9px;
    letter-spacing: 0.04em;
    text-align: center;
  }

  .line-parameter-table th,
  .line-parameter-table td {
    padding: 16px 14px;
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .explorer-trigger,
  .explorer-panel,
  .flow-arrow,
  .explorer-visual::after {
    transition: none;
    animation: none;
  }
}