.xdp {
  --c-bg: #0A0A0B; --c-card: #141417; --c-raised: #1B1B1E;
  --c-line: #27272A; --c-line-2: #3F3F46;
  --c-text: #FAFAFA; --c-muted: #A1A1AA;
  --c-blue: #50A2FF; --c-heat: #F59E0B; --c-heat-hi: #FCD34D; --c-crit: #F87171; --c-ok: #4ADE80;
  --xdp-mono: 'JetBrains Mono', var(--font-mono, ui-monospace), monospace;
  --xdp-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--c-text); min-width: 0;
}
.xdp *, .xdp *::before, .xdp *::after { box-sizing: border-box; }
.xdp__head { max-width: 640px; margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.xdp-fig { margin: 0; min-width: 0; }
.xdp-card { border: 1px solid var(--c-line); border-radius: var(--radius-xl, 24px); background: var(--c-card); padding: clamp(1rem, 2.4vw, 1.5rem); overflow: hidden; }

.xdp-bar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: clamp(1rem, 2vw, 1.25rem); }
.xdp-rail { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.375rem, 1.2vw, 0.875rem); list-style: none; margin: 0; padding: 0; }
.xdp-rail li { position: relative; display: flex; align-items: baseline; gap: 0.5rem; padding-bottom: 0.625rem; min-width: 0; color: var(--c-text); transition: color var(--dur-slow, 420ms) var(--ease-out, ease); }
.xdp-rail__n { font-family: var(--xdp-mono); font-size: 0.75rem; color: var(--c-blue); }
.xdp-rail__t { font-size: clamp(0.875rem, 1.6vw, 1rem); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xdp-rail__p { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--c-line-2); overflow: hidden; }
.xdp-rail__p::after { content: ""; position: absolute; inset: 0; background: var(--c-blue); transform-origin: 0 50%; transform: scaleX(var(--p, 1)); }
.xdp.is-anim .xdp-rail li { color: var(--c-muted); }
.xdp.is-anim .xdp-rail li.is-on { color: var(--c-text); }
.xdp.is-anim .xdp-rail li:not(.is-on):not(.is-done) .xdp-rail__n { color: var(--c-muted); }

.xdp-toggle { appearance: none; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 1px solid var(--c-line-2); border-radius: 999px; background: var(--c-raised); color: var(--c-text);
  transition: border-color var(--dur-fast, 160ms) ease; }
.xdp-toggle:hover { border-color: var(--c-blue); }
.xdp-toggle:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }
.xdp-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xdp-toggle .i-play { display: none; fill: currentColor; stroke: none; }
.xdp.is-paused .xdp-toggle .i-play { display: block; }
.xdp.is-paused .xdp-toggle .i-pause { display: none; }
.xdp-toggle[hidden] { display: none; }

.xdp-stage { display: grid; gap: clamp(0.75rem, 1.6vw, 1rem); transition: opacity var(--dur-slow, 420ms) var(--ease-in-out, ease); }
@media (min-width: 860px) { .xdp-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); } }
.xdp.is-reset .xdp-stage { opacity: 0; }
.xdp-panel, .xdp-box { position: relative; min-width: 0; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 14px; }
.xdp-panel { padding: clamp(0.75rem, 1.6vw, 1rem); display: flex; flex-direction: column; gap: 0.5rem; }
.xdp-mcc { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; overflow: visible; }

.xdp-tag { margin: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; font-family: var(--xdp-mono); font-size: 0.75rem; letter-spacing: 0.02em; }
.xdp-tag > span { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem; border: 1px solid var(--c-line-2); border-radius: 999px; color: var(--c-muted);
  transition: opacity var(--dur-slow, 420ms) ease, color var(--dur-slow, 420ms) ease, border-color var(--dur-slow, 420ms) ease; }
.xdp-tag__plan { border-style: dashed !important; border-color: rgba(80, 162, 255, 0.55) !important; color: var(--c-blue) !important; }
.xdp-tag__on { color: var(--c-text) !important; }
.xdp-led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c-ok); box-shadow: 0 0 8px rgba(74, 222, 128, 0.6); flex: none; }

.xdp-grid path { fill: none; stroke: var(--c-line); stroke-width: 0.6; }
.xdp-grid { opacity: 0.35; transition: opacity 0.8s ease; }
.xdp-draw * { fill: none; stroke: #52525B; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.5s var(--ease-in-out, ease), stroke 0.8s ease; }
.xdp-draw path:nth-child(2) { stroke-width: 3; stroke: #71717A; }
.xdp-hw * { fill: var(--c-raised); stroke: var(--c-line-2); stroke-width: 1.2; transition: opacity 0.6s ease; }
.xdp-scan { stroke: var(--c-blue); stroke-width: 1.5; opacity: 0; }

.xdp-ring { fill: rgba(80, 162, 255, 0.08); stroke: var(--c-blue); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: 0; transform: scale(0.4);
  transition: opacity 0.4s ease calc(var(--i) * 110ms), transform 0.5s var(--xdp-pop) calc(var(--i) * 110ms); }
.xdp-pad { fill: var(--c-raised); stroke: var(--c-blue); stroke-width: 1.6;
  transition: opacity 0.35s ease calc(var(--i) * 130ms), transform 0.55s var(--xdp-pop) calc(var(--i) * 130ms), stroke 0.4s ease; }
.xdp-dot { fill: var(--c-ok); transition: fill 0.3s ease calc(var(--i) * 70ms); }
.xdp-pulse { fill: none; stroke: var(--c-crit); stroke-width: 1.5; opacity: 0; }
.xdp-pt--hot .xdp-pad { stroke: var(--c-crit); }
.xdp-pt--hot .xdp-dot { fill: var(--c-crit); }
.xdp-pt--hot .xdp-pulse { opacity: 0.55; transform: scale(1.5); }

.xdp-side { display: grid; gap: clamp(0.75rem, 1.6vw, 1rem); align-content: start; min-width: 0; }
.xdp-box { padding: clamp(0.875rem, 1.8vw, 1.125rem); transition: opacity var(--dur-slow, 420ms) ease; }
.xdp-box__k { margin: 0; font-family: var(--xdp-mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-muted); }
.xdp-state { margin: 0; display: inline-flex; align-items: center; gap: 0.375rem; font-family: var(--xdp-mono); font-size: 0.75rem; color: var(--c-text); transition: opacity var(--dur-slow, 420ms) ease; }

.xdp-gw { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.75rem 1rem; }
.xdp-gw__row { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.xdp-gw__on { grid-row: 1; grid-column: 2; }
.xdp-node { flex: none; padding: 0.375rem 0.625rem; border: 1px solid var(--c-line-2); border-radius: 8px; background: var(--c-raised); font-family: var(--xdp-mono); font-size: 0.75rem; color: var(--c-text); transition: border-color 0.4s ease, opacity 0.4s ease; }
.xdp-node--gw { border-color: rgba(80, 162, 255, 0.6); }
.xdp-link { position: relative; flex: 1 1 auto; min-width: 2rem; height: 2px; background: repeating-linear-gradient(90deg, var(--c-line-2) 0 4px, transparent 4px 8px); }
.xdp-link i { position: absolute; top: -2px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--c-blue); opacity: 0; }
.xdp-link i:nth-child(1) { left: 20%; opacity: 1; } .xdp-link i:nth-child(2) { left: 50%; opacity: 1; } .xdp-link i:nth-child(3) { left: 80%; opacity: 1; }

.xdp-dash__top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.xdp-dash__top .xdp-box__k { margin-right: auto; }
.xdp-dash__learn { color: var(--c-muted); display: none; }
.xdp-chart { position: relative; height: clamp(96px, 13vw, 128px); }
.xdp-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }
.xdp-chart path { vector-effect: non-scaling-stroke; }
.xdp-c-axis { fill: none; stroke: var(--c-line); stroke-width: 1; }
.xdp-c-load { fill: none; stroke: #71717A; stroke-width: 1.2; stroke-dasharray: 3 4; transition: opacity 0.8s ease; }
.xdp-c-band { fill: rgba(80, 162, 255, 0.16); stroke: rgba(80, 162, 255, 0.45); stroke-width: 1; }
.xdp-c-bandg { clip-path: inset(0 0 0 0); transition: clip-path 2.4s var(--ease-in-out, ease); }
.xdp-c-read, .xdp-c-hot { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xdp-c-read { stroke: var(--c-blue); }
.xdp-c-hot { stroke: var(--c-heat); }
.xdp-c-readg { clip-path: inset(-10% 0 -10% 0); transition: clip-path 3s linear 0.4s; }
.xdp-c-hotg { clip-path: inset(-40% 0 -40% 0); transition: clip-path 0.9s var(--ease-in, ease); }
.xdp-c-mark { position: absolute; left: 96.67%; top: 35.4%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--c-crit); box-shadow: 0 0 0 4px rgba(248, 113, 113, 0.25), 0 0 14px rgba(248, 113, 113, 0.6); transition: opacity 0.3s ease, transform 0.4s var(--xdp-pop); }
.xdp-c-alert { position: absolute; right: 7%; top: 0; transform: translateY(-30%); padding: 0.125rem 0.5rem; border-radius: 999px; border: 1px solid var(--c-crit); background: rgba(248, 113, 113, 0.14);
  font-family: var(--xdp-mono); font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-text); transition: opacity 0.3s ease, transform 0.4s var(--xdp-pop); }
.xdp-axis { display: flex; justify-content: space-between; margin-top: 0.375rem; font-family: var(--xdp-mono); font-size: 0.6875rem; color: var(--c-muted); }
.xdp-legend { margin: 0.5rem 0 0; font-family: var(--xdp-mono); font-size: 0.75rem; color: var(--c-muted); }
.xdp-lg { display: inline-flex; align-items: center; gap: 0.5rem; transition: opacity 0.5s ease; }
.xdp-lg::before { content: ""; width: 18px; height: 8px; border-radius: 2px; background: rgba(80, 162, 255, 0.22); border: 1px solid rgba(80, 162, 255, 0.55); }

.xdp-esc { list-style: none; margin: 0.875rem 0 0; padding: 0.875rem 0 0; border-top: 1px solid var(--c-line); display: flex; align-items: center; gap: 0; min-width: 0; }
.xdp-esc__i { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 0.25rem 0.625rem; border: 1px solid var(--c-crit); border-radius: 8px; background: rgba(248, 113, 113, 0.1);
  font-size: 0.8125rem; color: var(--c-text); white-space: nowrap; transition: border-color 0.35s ease, background-color 0.35s ease, color 0.35s ease; }
.xdp-esc__i + .xdp-esc__i { margin-left: clamp(1.25rem, 3vw, 2rem); }
.xdp-esc__i + .xdp-esc__i::before { content: ""; position: absolute; right: 100%; top: 50%; width: clamp(1.25rem, 3vw, 2rem); height: 2px; margin-top: -1px; background: var(--c-crit); transform-origin: 0 50%; transition: transform 0.35s ease; }
.xdp-esc__i--bell { width: 34px; padding: 0; color: var(--c-crit); }
.xdp-esc__i--bell svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.xdp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: clamp(0.875rem, 2vw, 1.25rem) 0 0; }
.xdp-facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.25rem; min-width: 0; padding: 0.75rem 0.875rem; border: 1px solid var(--c-line); border-radius: 12px; background: var(--c-raised); position: relative; overflow: hidden;
  transition: border-color var(--dur-slow, 420ms) ease; }
.xdp-facts > div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c-blue); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-slow, 420ms) var(--ease-out, ease); }
.xdp-facts > div:first-child { grid-column: 1 / -1; }
.xdp-facts dt { font-size: 0.8125rem; line-height: 1.35; color: var(--c-muted); }
.xdp-facts dd { margin: 0; font-size: 0.9375rem; font-weight: 500; line-height: 1.35; color: var(--c-text); }
.xdp-facts > div:first-child dd { font-family: var(--xdp-mono); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; }
@media (min-width: 640px) {
  .xdp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xdp-facts > div:first-child { grid-column: auto; grid-row: span 2; justify-content: center; }
  .xdp-facts > div:first-child dd { font-size: 2rem; }
}
@media (min-width: 1100px) {
  .xdp-facts { grid-template-columns: 1.1fr repeat(4, minmax(0, 1fr)); }
  .xdp-facts > div:first-child { grid-row: auto; }
}
.xdp.s-1 [data-xdp-fact="1"], .xdp.s-2 [data-xdp-fact="2"], .xdp.s-3 [data-xdp-fact="3"] { border-color: rgba(80, 162, 255, 0.45); }
.xdp.s-1 [data-xdp-fact="1"]::before, .xdp.s-2 [data-xdp-fact="2"]::before, .xdp.s-3 [data-xdp-fact="3"]::before { transform: scaleX(1); }

.xdp-fig figcaption .rp-note { margin-top: 0.875rem; }
.xdp-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.xdp.is-anim:not(.b-install) .xdp-draw * { stroke: var(--c-blue); }
.xdp.is-anim:not(.b-draw) .xdp-draw * { stroke-dashoffset: 1; transition-duration: 0s; }
.xdp.is-anim.b-draw:not(.b-install) .xdp-grid { opacity: 1; }
.xdp.is-anim:not(.b-install) .xdp-hw { opacity: 0; }
.xdp.is-anim.b-draw:not(.b-install) .xdp-scan { opacity: 0.7; animation: xdp-scan 2.6s var(--ease-in-out, ease) infinite; }
.xdp.is-anim.b-plan:not(.b-install) .xdp-ring { opacity: 1; transform: none; }
.xdp.is-anim.b-install .xdp-ring { transition-delay: 0s; transform: scale(0.6); }
.xdp.is-anim:not(.b-plan) .xdp-tag__plan { opacity: 0; }
.xdp.is-anim:not(.b-install) .xdp-pad { opacity: 0; transform: scale(1.9); transition-delay: 0s; }
.xdp.is-anim:not(.b-gw) .xdp-dot { fill: var(--c-line-2); }
.xdp.is-anim:not(.b-gw) .xdp-tag__on { opacity: 0; }
.xdp.is-anim:not(.b-install) .xdp-node { color: var(--c-muted); border-color: var(--c-line); }
.xdp.is-anim:not(.b-install) .xdp-node--pad svg, .xdp.is-anim:not(.b-install) .xdp-link { opacity: 0.3; }
.xdp.is-anim:not(.b-gw) .xdp-gw__on { opacity: 0; }
.xdp.is-anim:not(.b-gw) .xdp-node--gw { border-color: var(--c-line-2); }
.xdp.is-anim:not(.b-gw) .xdp-link i { opacity: 0; }
.xdp.is-anim.b-gw .xdp-link i { animation: xdp-flow 1.6s linear infinite; }
.xdp.is-anim.b-gw .xdp-link i:nth-child(2) { animation-delay: -0.53s; }
.xdp.is-anim.b-gw .xdp-link i:nth-child(3) { animation-delay: -1.07s; }
.xdp.is-anim:not(.b-base) .xdp-chart svg { opacity: 0.4; }
.xdp-chart svg { transition: opacity var(--dur-slow, 420ms) ease; }
.xdp.is-anim:not(.b-base) .xdp-c-bandg { clip-path: inset(0 100% 0 0); transition-duration: 0s; }
.xdp.is-anim:not(.b-base) .xdp-c-load, .xdp.is-anim:not(.b-base) .xdp-lg { opacity: 0; }
.xdp.is-anim:not(.b-base) .xdp-c-readg { clip-path: inset(-10% 100% -10% 0); transition-duration: 0s; transition-delay: 0s; }
.xdp.is-anim.b-base:not(.b-live) .xdp-dash__learn { display: inline-flex; }
.xdp.is-anim:not(.b-live) .xdp-dash__live { display: none; }
.xdp.is-anim:not(.b-hot) .xdp-c-hotg { clip-path: inset(-40% 100% -40% 0); transition-duration: 0s; }
.xdp.is-anim:not(.b-alert) .xdp-c-mark, .xdp.is-anim:not(.b-alert) .xdp-c-alert { opacity: 0; transform: scale(0.4); }
.xdp.is-anim:not(.b-hot) .xdp-pt--hot .xdp-pad { stroke: var(--c-blue); }
.xdp.is-anim:not(.b-hot) .xdp-pt--hot .xdp-dot { fill: var(--c-ok); }
.xdp.is-anim:not(.b-gw) .xdp-pt--hot .xdp-dot { fill: var(--c-line-2); }
.xdp.is-anim.b-hot:not(.b-alert) .xdp-pt--hot .xdp-pad { stroke: var(--c-heat); }
.xdp.is-anim.b-hot:not(.b-alert) .xdp-pt--hot .xdp-dot { fill: var(--c-heat-hi); }
.xdp.is-anim:not(.b-alert) .xdp-pulse { opacity: 0; }
.xdp.is-anim.b-alert .xdp-pulse { animation: xdp-pulse 1.4s ease-out infinite; }
.xdp.is-anim.b-alert .xdp-c-mark { animation: xdp-blink 1.4s ease-in-out infinite; }
.xdp.is-anim .xdp-esc__i { border-color: var(--c-line-2); background: transparent; color: var(--c-muted); }
.xdp.is-anim .xdp-esc__i + .xdp-esc__i::before { transform: scaleX(0); }
.xdp.is-anim.b-e1 [data-xdp-esc="1"], .xdp.is-anim.b-e2 [data-xdp-esc="2"], .xdp.is-anim.b-e3 [data-xdp-esc="3"] { border-color: var(--c-crit); background: rgba(248, 113, 113, 0.1); color: var(--c-text); }
.xdp.is-anim.b-e1 [data-xdp-esc="1"] { color: var(--c-crit); }
.xdp.is-anim.b-e2 [data-xdp-esc="2"]::before, .xdp.is-anim.b-e3 [data-xdp-esc="3"]::before { transform: scaleX(1); }

.xdp.is-paused *, .xdp.is-paused *::before, .xdp.is-paused *::after { animation-play-state: paused !important; }

@keyframes xdp-scan { 0% { transform: translateX(0); } 50% { transform: translateX(320px); } 100% { transform: translateX(0); } }
@keyframes xdp-flow { from { left: 0%; } to { left: calc(100% - 6px); } }
@keyframes xdp-pulse { from { opacity: 0.8; transform: scale(1); } to { opacity: 0; transform: scale(2.2); } }
@keyframes xdp-blink { 50% { box-shadow: 0 0 0 7px rgba(248, 113, 113, 0.14), 0 0 18px rgba(248, 113, 113, 0.7); } }

@media (prefers-reduced-motion: reduce) {
  .xdp *, .xdp *::before, .xdp *::after { animation: none !important; transition: none !important; }
}
.xdp-ring, .xdp-pad, .xdp-pulse, .xdp-dot { transform-box: fill-box; transform-origin: center; }
@media (max-width: 520px) {
  .xdp-rail { gap: 0.375rem; }
  .xdp-rail__n { display: none; }
  .xdp-rail__t { font-size: 0.8125rem; text-overflow: clip; }
  .xdp-esc__i { padding: 0.25rem 0.5rem; }
  .xdp-esc__i + .xdp-esc__i { margin-left: 0.875rem; }
  .xdp-esc__i + .xdp-esc__i::before { width: 0.875rem; }
}
.xdp-node--pad { display: inline-grid; place-items: center; padding: 0.3125rem 0.5rem; }
.xdp-node--pad svg { width: 22px; height: 15px; display: block; }
.xdp-node--pad rect { fill: var(--c-raised); stroke: var(--c-blue); stroke-width: 1.6; }
.xdp-node--pad circle { fill: var(--c-ok); transition: fill 0.3s ease; }
.xdp.is-anim:not(.b-gw) .xdp-node--pad circle { fill: var(--c-line-2); }
.xdp-lamps circle { fill: #3F3F46; stroke: none; transition: opacity 0.6s ease; }
.xdp-lamps circle:nth-child(odd) { fill: #52525B; }
.xdp.is-anim:not(.b-install) .xdp-lamps { opacity: 0; }