.xenv {
  --xe-bg: #0A0A0B; --xe-card: #141417; --xe-raised: #1B1B1E;
  --xe-line: #27272A; --xe-line2: #3F3F46;
  --xe-tx: #FAFAFA; --xe-tx2: #A1A1AA;
  --xe-accent: var(--pillar-accent, #5FC4B2); --xe-accent-rgb: var(--pillar-accent-rgb, 95, 196, 178);
  --xe-ok: var(--sev-live, #4ADE80);
  --xe-adv: var(--sev-adv, #FCD34D); --xe-warn: var(--sev-warn, #F59E0B); --xe-crit: var(--sev-crit, #F87171);
  --xe-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  --xe-ease: var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  --xe-dur: var(--dur-slow, 420ms);
}
.xenv__panel { --xe-lvl: var(--xe-crit); --xe-lvl-tx: var(--xe-crit); }
.xenv__panel[data-level="none"] { --xe-lvl: var(--xe-accent); --xe-lvl-tx: var(--xe-tx); }
.xenv__panel[data-level="ror"]  { --xe-lvl: var(--xe-adv);  --xe-lvl-tx: var(--xe-adv); }
.xenv__panel[data-level="adv"]  { --xe-lvl: var(--xe-adv);  --xe-lvl-tx: var(--xe-adv); }
.xenv__panel[data-level="warn"] { --xe-lvl: var(--xe-warn); --xe-lvl-tx: var(--xe-warn); }
.xenv__panel[data-level="crit"] { --xe-lvl: var(--xe-crit); --xe-lvl-tx: var(--xe-crit); }

.xenv__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; }

.xenv__head { max-width: 720px; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.xenv__lede { margin: 0.875rem 0 0; font-size: var(--fs-lede, 1.125rem); line-height: 1.5; color: var(--xe-tx2); }
.xenv__lede span { color: var(--xe-tx); }

.xenv__fig { margin: 0; border: 1px solid var(--xe-line); border-radius: 14px; background: var(--xe-card); overflow: hidden; }
.xenv__bar {
  display: flex; align-items: center; gap: 0.75rem; min-height: 52px; flex-wrap: wrap;
  padding: 0.375rem 0.5rem 0.375rem 0.5rem; border-bottom: 1px solid var(--xe-line); background: var(--xe-raised);
}
.xenv-tabs { display: inline-flex; gap: 0.25rem; padding: 0.1875rem; border: 1px solid var(--xe-line2); border-radius: 10px; background: var(--xe-card); }
.xenv-tab {
  appearance: none; border: 0; background: transparent; cursor: pointer; min-height: 40px; padding: 0 0.875rem; border-radius: 7px;
  font: 500 0.875rem var(--font-body, inherit); color: var(--xe-tx2);
  transition: color var(--dur-fast, 160ms) var(--xe-ease), background-color var(--dur-fast, 160ms) var(--xe-ease);
}
.xenv-tab:hover { color: var(--xe-tx); }
.xenv-tab[aria-selected="true"] { color: var(--xe-tx); background: var(--xe-raised); box-shadow: inset 0 0 0 1px var(--xe-line2), inset 0 -2px 0 var(--xe-accent); }
.xenv-tab:focus-visible { outline: 2px solid var(--color-accent, #50A2FF); outline-offset: 2px; }
.xenv:not(.is-js) .xenv-tabs { display: none; }
.xenv__toggle {
  appearance: none; display: inline-flex; align-items: center; gap: 0.375rem; height: 40px; padding: 0 0.75rem; cursor: pointer; margin-left: auto;
  border: 1px solid var(--xe-line2); border-radius: 8px; background: var(--xe-card); color: var(--xe-tx);
  font: inherit; font-family: var(--xe-mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase;
  transition: border-color var(--dur-fast, 160ms) var(--xe-ease);
}
.xenv__toggle:hover { border-color: var(--color-accent, #50A2FF); }
.xenv__toggle:focus-visible { outline: 2px solid var(--color-accent, #50A2FF); outline-offset: 3px; }
.xenv__toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.xenv__toggle .i-play { display: none; fill: currentColor; stroke: none; }
.xenv.is-paused .xenv__toggle .i-play { display: block; }
.xenv.is-paused .xenv__toggle .i-pause { display: none; }
.xenv:not(.is-js) .xenv__toggle, .xenv__toggle[hidden] { display: none; }

.xenv__ptitle { margin: 0; padding: 0.875rem 1rem 0; font-family: var(--xe-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--xe-tx2); }
.xenv.is-js .xenv__ptitle { display: none; }
.xenv:not(.is-js) .xenv__panel + .xenv__panel { border-top: 1px solid var(--xe-line); }

.xenv__stage {
  display: grid; gap: 1px; background: var(--xe-line);
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 19rem);
  grid-template-areas: "assets trend alert" "assets trend log";
  transition: opacity 600ms var(--xe-ease);
}
.xenv__panel.is-fade .xenv__stage { opacity: 0.25; }
.xenv__stage > * { background: var(--xe-card); padding: clamp(1rem, 2vw, 1.375rem); min-width: 0; }

.xenv__assets { grid-area: assets; list-style: none; margin: 0; display: grid; gap: 0.125rem; align-content: start; }
.xenv__assets li {
  display: flex; align-items: center; gap: 0.625rem; padding: 0.4375rem 0.5rem; border-radius: 7px;
  font-size: 0.875rem; line-height: 1.3; color: var(--xe-tx2);
  transition: color var(--xe-dur) var(--xe-ease), background-color var(--xe-dur) var(--xe-ease);
}
.xenv__assets i { flex: none; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--xe-line2); transition: all var(--xe-dur) var(--xe-ease); }
.xenv__assets li.is-on { color: var(--xe-tx); }
.xenv__assets li.is-on i { border-color: var(--xe-accent); background: var(--xe-accent); box-shadow: 0 0 0 3px rgba(var(--xe-accent-rgb), 0.16); }
.xenv__assets li.is-hot { background: color-mix(in srgb, var(--xe-lvl) 9%, transparent); color: var(--xe-lvl-tx); }
.xenv__assets li.is-hot i { border-color: var(--xe-lvl); background: var(--xe-lvl); box-shadow: 0 0 0 4px color-mix(in srgb, var(--xe-lvl) 22%, transparent); }
.xenv__cid { margin-left: auto; padding-left: 0.375rem; font-family: var(--xe-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; color: var(--xe-lvl-tx); opacity: 0; transition: opacity var(--xe-dur) var(--xe-ease); }
.xenv__assets li.is-hot .xenv__cid { opacity: 1; }
.xenv.is-live .xenv__assets li.is-hot i { animation: xenv-pulse 1.1s var(--xe-ease) infinite; }

.xenv__trend { grid-area: trend; display: flex; flex-direction: column; gap: 0.75rem; }
.xenv__read { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.375rem 0.5rem; font-family: var(--xe-mono); }
.xenv__sid { flex-basis: 100%; font-size: 0.75rem; letter-spacing: 0.06em; color: var(--xe-tx2); }
.xenv__read b { font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1; font-weight: 500; color: var(--xe-lvl-tx); font-variant-numeric: tabular-nums; transition: color var(--xe-dur) var(--xe-ease); }
.xenv__unit { font-size: 1rem; color: var(--xe-tx2); }
.xenv__now { margin-left: auto; font-size: 0.75rem; color: var(--xe-tx2); font-variant-numeric: tabular-nums; }
.xenv__badge {
  align-self: flex-start; margin: -0.25rem 0 0; padding: 0.1875rem 0.5rem; border-radius: 5px;
  border: 1px solid var(--xe-line2); font-family: var(--xe-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--xe-tx);
}
.xenv__plot { position: relative; flex: 1; min-height: 14rem; margin-right: 5rem; }
.xenv__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.xenv__seg { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.xenv__seg--none { stroke: var(--xe-accent); }
.xenv__seg--ror, .xenv__seg--adv { stroke: var(--xe-adv); }
.xenv__seg--warn { stroke: var(--xe-warn); }
.xenv__seg--crit { stroke: var(--xe-crit); }
.xenv__area { fill: var(--xe-lvl); fill-opacity: 0.1; transition: fill var(--xe-dur) var(--xe-ease); }
.xenv__th, .xenv__base { position: absolute; left: 0; right: -5rem; height: 0; border-top: 1px dashed var(--xe-line2); }
.xenv__base { right: 0; border-top-style: dotted; }
.xenv__th em {
  position: absolute; right: 0; bottom: 3px; font-style: normal; font-family: var(--xe-mono); font-size: 0.6875rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--xe-tx2); transition: color var(--xe-dur) var(--xe-ease);
}
.xenv__th--adv.is-hit  { border-top-color: var(--xe-adv); }
.xenv__th--warn.is-hit { border-top-color: var(--xe-warn); }
.xenv__th--crit.is-hit { border-top-color: var(--xe-crit); }
.xenv__th--adv.is-hit em  { color: var(--xe-adv); }
.xenv__th--warn.is-hit em { color: var(--xe-warn); }
.xenv__th--crit.is-hit em { color: var(--xe-crit); }
.xenv__head-dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--xe-lvl); box-shadow: 0 0 0 4px rgba(250, 250, 250, 0.08), 0 0 16px var(--xe-lvl); opacity: 0; }
.xenv__head-dot.is-on { opacity: 1; }
.xenv__ror { position: absolute; width: 0; height: 0; opacity: 0; transition: opacity var(--xe-dur) var(--xe-ease); }
.xenv__ror::before { content: ""; position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--xe-adv); background: var(--xe-card); }
.xenv__ror::after { content: ""; position: absolute; left: 0; bottom: 6px; height: 2.25rem; border-left: 1px solid var(--xe-adv); }
.xenv__ror em {
  position: absolute; left: -0.5rem; bottom: 2.5rem; white-space: nowrap; padding: 0.1875rem 0.5rem; border-radius: 5px;
  font-style: normal; font-family: var(--xe-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--xe-bg); background: var(--xe-adv);
}
.xenv__ror.is-on { opacity: 1; }
.xenv__note { margin: 0; font-family: var(--xe-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--xe-tx2); }
.xenv__mini { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.5rem; margin: 0; }
.xenv__mini div { padding: 0.5rem 0.625rem; border-radius: 7px; background: var(--xe-raised); }
.xenv__mini dt { font-family: var(--xe-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--xe-tx2); }
.xenv__mini dd { margin: 0.125rem 0 0; font-family: var(--xe-mono); font-size: 0.875rem; color: var(--xe-tx); white-space: nowrap; }

.xenv__alert { grid-area: alert; position: relative; }
.xenv__alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--xe-lvl); transform: scaleY(0); transform-origin: top; transition: transform var(--xe-dur) var(--xe-ease), background-color var(--xe-dur) var(--xe-ease); }
.xenv__alert.is-on::before { transform: none; }
.xenv.is-live .xenv__alert.is-on { animation: xenv-in var(--xe-dur) var(--xe-ease); }
.xenv__lvl {
  display: inline-flex; align-items: center; gap: 0.5rem; margin: 0 0 0.875rem; font-family: var(--xe-mono); font-size: 0.75rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--xe-lvl-tx); transition: color var(--xe-dur) var(--xe-ease);
}
.xenv__lvl::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.xenv__panel.is-acked .xenv__lvl, .xenv__panel[data-level="none"] .xenv__lvl { color: var(--xe-ok); }
.xenv__panel.is-acked .xenv__lvl::before, .xenv__panel[data-level="none"] .xenv__lvl::before { border-radius: 50%; }
.xenv__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; margin: 0; }
.xenv__fields dt { font-family: var(--xe-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--xe-tx2); }
.xenv__fields dd { margin: 0.125rem 0 0; font-family: var(--xe-mono); font-size: 0.875rem; color: var(--xe-tx); font-variant-numeric: tabular-nums; }
.xenv__fields div:nth-child(3) dd { color: var(--xe-lvl-tx); transition: color var(--xe-dur) var(--xe-ease); }
.xenv__chain { list-style: none; margin: 1.125rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
.xenv__chain::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 6px; border-top: 1px solid var(--xe-line2); }
.xenv__chain::after { content: ""; position: absolute; left: 12.5%; width: 75%; top: 6px; border-top: 2px solid var(--xe-lvl); margin-top: -0.5px; transform: scaleX(var(--xe-chain, 1)); transform-origin: left; transition: transform var(--xe-dur) var(--xe-ease), border-color var(--xe-dur) var(--xe-ease); }
.xenv__panel.is-acked .xenv__chain::after { border-top-color: var(--xe-lvl); }
.xenv__chain li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.4375rem; font-size: 0.75rem; color: var(--xe-tx2); text-align: center; transition: color var(--xe-dur) var(--xe-ease); }
.xenv__chain i { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--xe-line2); background: var(--xe-card); transition: all var(--xe-dur) var(--xe-ease); }
.xenv__chain li.is-on { color: var(--xe-tx); }
.xenv__chain li.is-on i { background: var(--xe-lvl); border-color: var(--xe-lvl); }
.xenv__chain li.is-proj i { border-style: dashed; }
.xenv__chain li.is-proj.is-on i { background: var(--xe-card); }
.xenv__chain small { font-family: var(--xe-mono); font-size: 0.625rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--xe-tx2); margin-top: -0.25rem; }
.xenv.is-live .xenv__chain li.is-on i { animation: xenv-pop 520ms var(--xe-ease); }

.xenv__log { grid-area: log; display: flex; flex-direction: column; gap: 0.75rem; }
.xenv__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; font-family: var(--xe-mono); font-size: 0.75rem; }
.xenv__rows li { display: flex; gap: 0.75rem; align-items: center; padding: 0.25rem 0.5rem; border-radius: 5px; background: var(--xe-raised); opacity: 0; transform: translateY(4px); transition: opacity var(--xe-dur) var(--xe-ease), transform var(--xe-dur) var(--xe-ease); }
.xenv__rows li.is-on { opacity: 1; transform: none; }
.xenv__rows time { color: var(--xe-tx2); font-variant-numeric: tabular-nums; }
.xenv__rows span { color: var(--xe-tx); font-variant-numeric: tabular-nums; }
.xenv__rows i { flex: none; width: 3px; height: 0.875rem; border-radius: 2px; }
.xenv__rows .k-ror { width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--xe-adv); background: transparent; }
.xenv__rows .k-adv { background: var(--xe-adv); }
.xenv__rows .k-warn { background: var(--xe-warn); }
.xenv__rows .k-crit { background: var(--xe-crit); }
.xenv__rows .k-ack { background: var(--xe-ok); }
.xenv__rows .xenv__tick { color: var(--xe-ok); }
.xenv__rows .t-ror, .xenv__rows .t-adv { color: var(--xe-adv); }
.xenv__rows .t-warn { color: var(--xe-warn); }
.xenv__rows .t-crit { color: var(--xe-crit); }
.xenv__export { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0; font-size: 0.75rem; line-height: 1.4; color: var(--xe-tx2); }
.xenv__csv { flex: none; font-family: var(--xe-mono); font-size: 0.6875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--xe-tx); }

@keyframes xenv-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--xe-lvl) 28%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }
@keyframes xenv-in { from { transform: translateY(6px); } to { transform: none; } }
@keyframes xenv-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.25); } 100% { transform: none; } }

@media (max-width: 1100px) {
  .xenv__cid { display: none; }
  .xenv__stage { grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr) minmax(0, 0.8fr); grid-template-areas: "assets trend trend" "alert alert log"; }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .xenv__alert { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 1.5rem; align-content: start; }
  .xenv__lvl { grid-column: 1 / -1; }
  .xenv__fields { grid-row: 2 / 4; }
  .xenv__chain { margin-top: 0.5rem; }
}
@media (max-width: 720px) {
  .xenv__stage { grid-template-columns: minmax(0, 1fr); grid-template-areas: "assets" "trend" "alert" "log"; }
  .xenv__assets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.125rem 0.25rem; }
  .xenv__assets li { font-size: 0.8125rem; padding: 0.375rem; gap: 0.5rem; }
  .xenv__plot { min-height: 11rem; margin-right: 4.25rem; }
  .xenv__th { right: -4.25rem; }
  .xenv__bar { padding: 0.5rem; }
  .xenv-tabs { width: 100%; }
  .xenv-tab { flex: 1; padding: 0 0.25rem; font-size: 0.78125rem; white-space: nowrap; }
  .xenv__toggle { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .xenv *, .xenv *::before, .xenv *::after { animation: none !important; transition: none !important; }
  .xenv__panel.is-fade .xenv__stage { opacity: 1; }
}

.xhix { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: 1.25rem; margin-top: 1rem; }
.xhix__plotwrap { position: relative; align-self: start; padding: 0 0 1.5rem 2.25rem; }
.xhix__plot { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--ox-line, #27272A); border-radius: 10px; background: #0A0A0B; overflow: hidden; touch-action: none; cursor: crosshair; }
.xhix__plot canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.xhix__dot {
  position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none;
  background: var(--color-text-primary, #FAFAFA); box-shadow: 0 0 0 4px rgba(10, 10, 11, 0.6), 0 0 0 6px rgba(var(--pillar-accent-rgb), 0.6);
  transition: left 120ms ease-out, top 120ms ease-out;
}
.xhix__ax { position: absolute; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; color: var(--color-text-secondary); }
.xhix__ax--x { left: 2.25rem; right: 0; bottom: 0; display: flex; justify-content: space-between; }
.xhix__ax--y { left: 0; top: 0; bottom: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; }
.xhix__side { display: flex; flex-direction: column; gap: 1rem; }
.xhix__out { margin: 0; padding: 0.875rem 1rem; border: 1px solid var(--ox-line, #27272A); border-radius: 10px; background: #141417; }
.xhix__out .x-lens__state { font-family: var(--font-mono); font-size: 1rem; }
.xhix__out small { display: block; margin-top: 0.375rem; font-size: 0.8125rem; color: var(--color-text-secondary); }
.xhix label { display: grid; gap: 0.375rem; font-size: 0.875rem; color: var(--color-text-secondary); }
.xhix label b { font-family: var(--font-mono); font-weight: 500; color: var(--color-text-primary); }
.xhix input[type="range"] { width: 100%; accent-color: var(--color-accent, #50A2FF); min-height: 32px; }
.xhix__presets { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.xhix__presets button {
  appearance: none; min-height: 36px; padding: 0 0.75rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ox-line-strong, #3F3F46); background: transparent; color: var(--color-text-primary); font: inherit; font-size: 0.8125rem;
}
.xhix__presets button:hover { border-color: var(--color-accent, #50A2FF); }
.xhix__presets button:focus-visible, .xhix input:focus-visible { outline: 2px solid var(--color-accent, #50A2FF); outline-offset: 2px; }
.xhix__limits { margin: 1rem 0 0; font-size: 0.8125rem; line-height: 1.55; color: var(--color-text-secondary); max-width: 70ch; }
.xhix:not(.is-js) .xhix__plotwrap, .xhix:not(.is-js) .xhix__presets { display: none; }
@media (max-width: 760px) { .xhix { grid-template-columns: minmax(0, 1fr); } }