.xtr {
  --xtr-bg: #0A0A0B; --xtr-card: #141417; --xtr-raised: #1B1B1E; --xtr-line: #27272A; --xtr-line-2: #3F3F46;
  --xtr-text: #FAFAFA; --xtr-muted: #A1A1AA;
  --xtr-acc: var(--pillar-accent, #50A2FF); --xtr-acc-rgb: var(--pillar-accent-rgb, 80, 162, 255);
  --xtr-adv: var(--sev-adv, #F59E0B); --xtr-adv-rgb: var(--sev-adv-rgb, 245, 158, 11);
  margin: clamp(2.5rem, 5vw, 4rem) 0 0; color: var(--xtr-text);
  background: var(--xtr-card); border: 1px solid var(--xtr-line); border-radius: 24px; padding: clamp(1.125rem, 2.6vw, 1.75rem);
}
.xtr__eyebrow { margin: 0; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--xtr-muted); }
.xtr__title { margin: 0.375rem 0 0; font-family: var(--font-heading); font-size: clamp(1.25rem, 2.4vw, 1.625rem); font-weight: 600; line-height: 1.25; }
.xtr__body { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 1.5rem); margin-top: 1.25rem; align-items: stretch; }

.xtr-chart { display: grid; gap: 0.5rem; min-width: 0; padding: 1rem; background: var(--xtr-bg); border: 1px solid var(--xtr-line); border-radius: 16px; }
.xtr-chart__top { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--xtr-muted); }
.xtr-chart__top b { font-weight: 500; color: var(--xtr-text); }
.xtr-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--xtr-muted); }
.xtr-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.xtr-legend i { display: inline-block; }
.xtr-legend .k-line { width: 16px; height: 2px; border-radius: 2px; background: var(--xtr-acc); }
.xtr-legend .k-round { width: 9px; height: 9px; border-radius: 50%; background: var(--xtr-text); box-shadow: 0 0 0 2px var(--xtr-bg), 0 0 0 3px var(--xtr-muted); }
.xtr-legend .k-adv { width: 16px; height: 0; border-top: 1.5px dashed var(--xtr-adv); }
.xtr-plot { position: relative; aspect-ratio: 600 / 240; margin-top: 0.25rem; }
.xtr-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xtr-svg .g-grid line { stroke: var(--xtr-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.xtr-svg .g-adv { stroke: var(--xtr-adv); stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; opacity: 0.85; }
.xtr-svg .g-area { fill: rgba(var(--xtr-acc-rgb), 0.08); }
.xtr-svg .g-line { fill: none; stroke: var(--xtr-acc); stroke-width: 2.25; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.xtr-svg .g-hot-area { fill: rgba(var(--xtr-adv-rgb), 0.16); }
.xtr-svg .g-hot { fill: none; stroke: var(--xtr-adv); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.xtr-svg .g-round { stroke: var(--xtr-muted); stroke-width: 1; stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.xtr-svg [data-xtr-reveal] { opacity: var(--xtr-fade, 1); }

.xtr-head { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--xtr-acc); box-shadow: 0 0 0 4px rgba(var(--xtr-acc-rgb), 0.22); opacity: 0; pointer-events: none; }
.xtr-pin { position: absolute; transform: translate(-50%, -50%); }
.xtr-pin__dot { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--xtr-text); box-shadow: 0 0 0 2px var(--xtr-bg), 0 0 0 3px var(--xtr-muted); }
.xtr-pin__lab {
  position: absolute; left: 50%; top: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap;
  padding: 0.2rem 0.45rem; border-radius: 6px; background: var(--xtr-raised); border: 1px solid var(--xtr-line-2);
  font-family: var(--font-mono); font-size: 0.6875rem; color: var(--xtr-text); font-variant-numeric: tabular-nums;
}
.xtr-pin__lab small { color: var(--xtr-muted); font-size: inherit; }
.xtr-peak { position: absolute; transform: translate(-50%, calc(-100% - 8px)); white-space: nowrap; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--xtr-adv); font-variant-numeric: tabular-nums; }
.xtr-band { position: absolute; top: 0; bottom: 0; border-left: 1px solid rgba(var(--xtr-adv-rgb), 0.5); border-right: 1px solid rgba(var(--xtr-adv-rgb), 0.5); background: rgba(var(--xtr-adv-rgb), 0.05); }
.xtr-band__lab { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); white-space: nowrap; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--xtr-adv); }
.xtr-adv-lab { position: absolute; right: 0; transform: translateY(calc(-100% - 4px)); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--xtr-adv); }
.xtr-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--xtr-muted); font-variant-numeric: tabular-nums; }
.xtr-chart__note { margin: 0; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--xtr-muted); }

.xtr-recs { display: grid; gap: 0.75rem; align-content: stretch; min-width: 0; }
.xtr-rec { display: grid; align-content: start; gap: 0.5rem; padding: 0.875rem 1rem; border-radius: 16px; background: var(--xtr-raised); border: 1px solid var(--xtr-line); }
.xtr-rec--sensor { border-color: rgba(var(--xtr-acc-rgb), 0.45); }
.xtr-rec__k { margin: 0; display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--xtr-muted); }
.xtr-rec__k i { width: 9px; height: 9px; border-radius: 50%; }
.xtr-rec--rounds .xtr-rec__k i { background: var(--xtr-text); box-shadow: 0 0 0 2px var(--xtr-raised), 0 0 0 3px var(--xtr-muted); }
.xtr-rec--sensor .xtr-rec__k i { background: var(--xtr-acc); }
.xtr-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; font-family: var(--font-mono); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.xtr-rows li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0.5rem; transition: opacity var(--dur-base, 240ms) var(--ease-out, ease); }
.xtr-rows time { color: var(--xtr-muted); }
.xtr-rows .is-adv { color: var(--xtr-adv); }
.xtr-rec__sum { margin: 0.125rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--xtr-line); font-size: 0.875rem; line-height: 1.45; color: var(--xtr-text); }
.xtr-rec__sum span { color: var(--xtr-muted); }

.xtr.is-js [data-xtr-at] { transition: opacity var(--dur-base, 240ms) var(--ease-out, ease); }
.xtr.is-js [data-xtr-at]:not(.is-on) { opacity: 0; }
.xtr.is-js .xtr-rows li[data-xtr-at]:not(.is-on) { opacity: 0.15; }

.xtr__cap { margin: 1.25rem 0 0; display: flex; align-items: flex-start; gap: 1rem; }
.xtr__line { margin: 0; flex: 1; font-size: 0.9375rem; line-height: 1.55; color: var(--xtr-muted); max-width: 72ch; }
.xtr__toggle {
  appearance: none; flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; cursor: pointer;
  color: var(--xtr-text); background: rgba(20, 20, 23, 0.8); border: 1px solid var(--xtr-line-2); border-radius: 50%;
}
.xtr__toggle:hover { border-color: var(--xtr-acc); }
.xtr__toggle:focus-visible { outline: 2px solid #50A2FF; outline-offset: 3px; }
.xtr__toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xtr__toggle .i-play { display: none; fill: currentColor; stroke: none; }
.xtr.is-paused .xtr__toggle .i-play { display: block; }
.xtr.is-paused .xtr__toggle .i-pause { display: none; }
.xtr__toggle[hidden] { display: none; }

@media (max-width: 899px) {
  .xtr__body { grid-template-columns: minmax(0, 1fr); }
  .xtr-recs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .xtr { border-radius: 20px; }
  .xtr-chart { padding: 0.75rem; }
  .xtr-plot { aspect-ratio: 600 / 300; }
  .xtr-pin__lab, .xtr-peak, .xtr-band__lab, .xtr-adv-lab { font-size: 0.625rem; }
  .xtr-recs { grid-template-columns: minmax(0, 1fr); }
  .xtr-band__lab { display: none; }   .xtr-rows { font-size: 0.75rem; }
}
.xtr__sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}