.xa3-section, .xa3 {
  --xa3-bg: #0A0A0B;
  --xa3-card: #141417;
  --xa3-raised: #1B1B1E;
  --xa3-line: #27272A;
  --xa3-line-2: #3F3F46;
  --xa3-text: #FAFAFA;
  --xa3-muted: #A1A1AA;
  --xa3-blue: #50A2FF;
  --xa3-blue-rgb: 80, 162, 255;
  --xa3-heat: #F59E0B;
  --xa3-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
}
.xa3 {
  position: relative;
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--xa3-text);
}

.xa3 [hidden] { display: none !important; }

.xa3__viewport {
  position: relative;
  border: 1px solid var(--xa3-line);
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(var(--xa3-blue-rgb), 0.10), transparent 60%),
    radial-gradient(80% 60% at 50% 100%, rgba(var(--xa3-blue-rgb), 0.05), transparent 70%),
    var(--xa3-card);
  overflow: hidden;
  isolation: isolate;
}
.xa3.is-3d .xa3__viewport { height: clamp(540px, 56vw, 720px); }   .xa3__svg { display: block; width: 100%; height: auto; max-width: 880px; margin: 0 auto; padding: clamp(0.75rem, 2vw, 1.5rem); box-sizing: border-box; }
.xa3.is-3d .xa3__svg { display: none; }
.xa3s-node > rect { fill: var(--xa3-raised); stroke: var(--xa3-line-2); stroke-width: 1.5; transition: stroke var(--dur-fast, 160ms) ease, fill var(--dur-fast, 160ms) ease; }
.xa3s-num { font-family: var(--xa3-mono); font-size: 15px; fill: var(--xa3-blue); }
.xa3s-lab { font-size: 18px; font-weight: 600; fill: var(--xa3-text); }
.xa3s-ico { fill: none; stroke: var(--xa3-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xa3s-ico .xa3s-heat { fill: var(--xa3-heat); stroke: none; }
.xa3s-node.is-active > rect { stroke: var(--xa3-blue); stroke-width: 2.5; fill: #14243a; }
.xa3s-node.is-active .xa3s-ico { stroke: var(--xa3-blue); }
.xa3.is-js .xa3s-node { cursor: pointer; }

.xa3__gl { position: absolute; inset: 0; cursor: grab; }
.xa3__gl:active { cursor: grabbing; }
.xa3__gl canvas { display: block; width: 100% !important; height: 100% !important; outline: none; }
.xa3__gl canvas:focus-visible { outline: 2px solid var(--xa3-blue); outline-offset: -4px; border-radius: 20px; }

.xa3__pins { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.xa3__pin {
  position: absolute; left: 0; top: 0;
  transform: translate3d(var(--x, -999px), var(--y, -999px), 0) translate(-50%, -100%);
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.2rem 0.5rem; border-radius: 999px;
  font: 500 0.75rem/1.2 var(--xa3-mono); letter-spacing: 0.02em; white-space: nowrap;
  color: var(--xa3-muted); background: rgba(20, 20, 23, 0.82);
  border: 1px solid var(--xa3-line-2);
  transition: color 200ms ease, border-color 200ms ease, opacity 200ms ease;
  will-change: transform;
}
.xa3__pin b { color: var(--xa3-blue); font-weight: 500; }
.xa3__pin.is-active { color: var(--xa3-text); border-color: var(--xa3-blue); background: rgba(16, 33, 56, 0.92); opacity: 0; }
.xa3__pin.is-behind { opacity: 0.35; }
.xa3__pin.is-off, .xa3__pin.is-collide { opacity: 0; }
.xa3__pin.is-compact .xa3__pin-t { display: none; }

.xa3__callout {
  position: relative; margin: 0 clamp(0.75rem, 2vw, 1.5rem) clamp(0.75rem, 2vw, 1.5rem);
  padding: 1rem 1.15rem 1.05rem;
  border: 1px solid rgba(var(--xa3-blue-rgb), 0.5); border-radius: 14px;
  background: rgba(16, 22, 32, 0.94);
  box-shadow: 0 18px 50px -20px rgba(0, 0, 0, 0.9), 0 0 0 4px rgba(var(--xa3-blue-rgb), 0.06);
}
.xa3__callout:focus-visible { outline: 2px solid var(--xa3-blue); outline-offset: 3px; }
.xa3__callout-num { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.35rem; font: 500 0.8125rem/1.3 var(--xa3-mono); letter-spacing: 0.06em; color: var(--xa3-blue); }
.xa3__callout-zone { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--xa3-muted); white-space: nowrap; }
.xa3__callout-zone:empty { display: none; }
.xa3__callout-title { margin: 0 0 0.35rem; font-family: var(--font-heading, 'IBM Plex Sans', system-ui, sans-serif); font-size: 1.0625rem; line-height: 1.3; font-weight: 600; color: var(--xa3-text); }
.xa3__callout-desc { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: #D4D4D8; }
.xa3.is-3d .xa3__callout {
  position: absolute; left: 0.75rem; right: 0.75rem; top: 0.75rem; margin: 0; z-index: 3;
  width: auto;
  transition: opacity 260ms ease;
}
.xa3.is-3d .xa3__callout.is-swap { opacity: 0; }
.xa3__callout::before { content: none; }
.xa3.is-3d .xa3__callout-step::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 0.5rem; border-radius: 50%;
  background: var(--xa3-blue); box-shadow: 0 0 0 4px rgba(var(--xa3-blue-rgb), 0.18); vertical-align: 1px;
}
.xa3__marker {
  position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none;
  width: 0; height: 0;
  transform: translate3d(var(--x, -999px), var(--y, -999px), 0);
}
.xa3__marker::before, .xa3__marker::after {
  content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--xa3-blue); background: rgba(var(--xa3-blue-rgb), 0.25);
}
.xa3__marker::after { animation: xa3-ping 1.8s ease-out infinite; background: transparent; }
@keyframes xa3-ping { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.6); opacity: 0; } }
.xa3__leader { position: absolute; inset: 0; z-index: 2; pointer-events: none; width: 100%; height: 100%; overflow: visible; }
.xa3__leader line { stroke: rgba(var(--xa3-blue-rgb), 0.7); stroke-width: 1.25; stroke-dasharray: 3 4; }

.xa3.is-3d .xa3__callout {
  background: linear-gradient(180deg, rgba(24, 34, 50, 0.92), rgba(15, 19, 27, 0.94));
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  border-color: rgba(var(--xa3-blue-rgb), 0.42);
}
.xa3.is-3d .xa3__callout::after {
  content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--xa3-blue-rgb), 0.95), transparent);
}
@media (min-width: 900px) {
  .xa3.is-3d .xa3__callout {
    display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); column-gap: 1.5rem; align-items: center;
    padding: 0.85rem 1.25rem; border-radius: 16px;
  }
  .xa3.is-3d .xa3__callout-num { grid-column: 1; grid-row: 1; }
  .xa3.is-3d .xa3__callout-title { grid-column: 1; grid-row: 2; margin: 0; font-size: 1.125rem; }
  .xa3.is-3d .xa3__callout-desc { grid-column: 2; grid-row: 1 / span 2; padding-left: 1.5rem; border-left: 1px solid var(--xa3-line-2); }
  .xa3 .xa3__modes { top: auto; bottom: 0.75rem; }
  .xa3 .xa3__hint { left: calc(0.75rem + var(--xa3-modes-w, 15rem) + 1rem); bottom: 1.45rem; }
}
@media (min-width: 900px) and (max-width: 1199px) { .xa3 .xa3__hint { display: none; } }
@media (min-width: 1100px) {
  .xa3.is-3d .xa3__callout-desc { font-size: 1rem; line-height: 1.6; }
}

.xa3__modes {
  position: absolute; left: 0.75rem; top: 0.75rem; z-index: 4;
  display: inline-flex; padding: 3px; gap: 2px;
  background: rgba(20, 20, 23, 0.86); border: 1px solid var(--xa3-line-2); border-radius: 11px;
}
.xa3__mode {
  min-height: 32px; padding: 0 0.75rem; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--xa3-muted); font: 500 0.8125rem/1 var(--xa3-mono);
  transition: background 160ms ease, color 160ms ease;
}
.xa3__mode:hover { color: var(--xa3-text); }
.xa3__mode[aria-pressed="true"] { background: #13243a; color: var(--xa3-text); box-shadow: inset 0 0 0 1px rgba(var(--xa3-blue-rgb), 0.55); }
.xa3__mode:focus-visible { outline: 2px solid var(--xa3-blue); outline-offset: 2px; }

.xa3__tools {
  position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 4;
  display: flex; gap: 0.375rem; flex-wrap: wrap; justify-content: flex-end;
}
.xa3__tool, .xa3__open3d {
  min-height: 36px; min-width: 36px; padding: 0 0.7rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  font: 500 0.8125rem/1 var(--xa3-mono); color: var(--xa3-text);
  background: rgba(27, 27, 30, 0.88); border: 1px solid var(--xa3-line-2); border-radius: 10px;
  cursor: pointer; transition: border-color 160ms ease, background 160ms ease;
}
.xa3__tool[data-xa3="zoomin"], .xa3__tool[data-xa3="zoomout"] { font-size: 1.1rem; padding: 0; }
.xa3__tool-ico { font-size: 0.65rem; letter-spacing: -1px; }
.xa3__tool:hover, .xa3__open3d:hover { border-color: var(--xa3-blue); }
.xa3__tool:focus-visible, .xa3__open3d:focus-visible, .xa3__tab:focus-visible {
  outline: 2px solid var(--focus-color, var(--xa3-blue)); outline-offset: 2px;
}
.xa3__open3d { position: absolute; right: 0.75rem; top: 0.75rem; z-index: 4; }
.xa3__hint {
  position: absolute; left: 0.9rem; bottom: 0.85rem; z-index: 4; margin: 0;
  font: 400 0.75rem/1.3 var(--xa3-mono); color: var(--xa3-muted); pointer-events: none;
}
.xa3__hint kbd { font: inherit; padding: 0 0.25rem; border: 1px solid var(--xa3-line-2); border-radius: 4px; }

.xa3__tabs {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.5rem;
  margin-top: 0.75rem;
}
.xa3__tab {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem;
  padding: 0.7rem 0.8rem 0.8rem; min-height: 44px; text-align: left;
  background: var(--xa3-card); color: var(--xa3-muted);
  border: 1px solid var(--xa3-line); border-radius: 12px; cursor: pointer;
  font-family: var(--font-heading, 'IBM Plex Sans', system-ui, sans-serif);
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
  overflow: hidden;
}
.xa3__tab-num { font: 500 0.75rem/1 var(--xa3-mono); color: var(--xa3-blue); letter-spacing: 0.05em; }
.xa3__tab-name { font-size: 0.875rem; line-height: 1.3; font-weight: 600; }
.xa3__tab:hover { color: var(--xa3-text); border-color: var(--xa3-line-2); }
.xa3__tab[aria-selected="true"] { color: var(--xa3-text); border-color: var(--xa3-blue); background: #101c2c; }
.xa3__tab-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--xa3-blue); transform-origin: left; transform: scaleX(0); }
.xa3__tab[aria-selected="true"] .xa3__tab-bar { transform: scaleX(1); }
.xa3.is-touring .xa3__tab[aria-selected="true"] .xa3__tab-bar { animation: xa3-progress var(--xa3-step, 4000ms) linear forwards; }
@keyframes xa3-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.xa3__list { margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: xa3; display: grid; gap: 0.5rem; }
.xa3__list li { counter-increment: xa3; padding: 0.75rem 1rem; border: 1px solid var(--xa3-line); border-radius: 12px; background: var(--xa3-card); color: #D4D4D8; font-size: 0.9375rem; line-height: 1.55; }
.xa3__list li::before { content: "0" counter(xa3) " · " attr(data-name); display: block; margin-bottom: 0.2rem; font: 500 0.8125rem/1.3 var(--xa3-mono); color: var(--xa3-blue); }
.xa3.is-js .xa3__list { display: none; }
.xa3__sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.xa3-section [data-xp-stage] { transition: border-color 200ms ease, background 200ms ease; }
.xa3-section [data-xp-stage].xa3-linked { border-color: rgba(var(--xa3-blue-rgb), 0.55); background: linear-gradient(180deg, rgba(var(--xa3-blue-rgb), 0.06), transparent 70%), var(--xa3-card); }
.xa3-cardbtn {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.75rem; padding: 0.35rem 0; min-height: 32px;
  background: none; border: 0; cursor: pointer; color: var(--xa3-muted); font: 500 0.8125rem/1.3 var(--xa3-mono);
}
.xa3-cardbtn span { color: var(--xa3-blue); }
.xa3-cardbtn:hover, .xa3-linked .xa3-cardbtn { color: var(--xa3-text); }
.xa3-cardbtn:focus-visible { outline: 2px solid var(--xa3-blue); outline-offset: 4px; border-radius: 4px; }

@media (max-width: 1023px) {
  .xa3__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .xa3.is-3d .xa3__viewport { height: 600px; }
  .xa3.is-3d .xa3__callout { padding: 0.8rem 0.9rem; }
  .xa3__hint { display: none; }
  .xa3__modes { top: auto; bottom: calc(0.75rem + 46px); }
  .xa3__tools { left: 0.75rem; right: 0.75rem; flex-wrap: nowrap; }
  .xa3__tool[data-xa3="play"] { margin-right: auto; }
}
@media (max-width: 639px) {
  .xa3.is-3d .xa3__viewport { height: 540px; }
  .xa3__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xa3__callout-desc { font-size: 0.875rem; }
  .xa3__mode-long { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .xa3__marker::after { animation: none; opacity: 0; }
  .xa3.is-touring .xa3__tab[aria-selected="true"] .xa3__tab-bar { animation: none; transform: scaleX(1); }
  .xa3.is-3d .xa3__callout, .xa3__pin, .xa3__tab, .xa3s-node > rect { transition: none; }
}