.span-root {
    --span-bg: #06100e;
    --span-panel: rgba(13, 29, 25, .88);
    --span-panel-strong: rgba(18, 39, 33, .96);
    --span-border: rgba(197, 255, 234, .11);
    --span-border-bright: rgba(121, 242, 199, .34);
    --span-text: #f5fcf8;
    --span-muted: rgba(225, 243, 235, .61);
    --span-dim: rgba(225, 243, 235, .37);
    --span-green: #79f2c7;
    --span-green-strong: #32d6a0;
    --span-lime: #d7f58d;
    --span-blue: #78bcff;
    --span-orange: #ffb86c;
    --span-pad: clamp(8px, min(1.35cqw, 1.75cqh), 22px);
    --span-gap: clamp(6px, min(.95cqw, 1.35cqh), 14px);
    --span-card-pad: clamp(10px, min(1.45cqw, 2cqh), 24px);
    --span-radius: clamp(14px, min(1.55cqw, 2.1cqh), 23px);
    --span-row-height: clamp(38px, min(5.7cqh, 5.2cqw), 56px);
    position: relative;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    container-type: size;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--span-text);
    background:
        radial-gradient(circle at 8% -8%, rgba(50, 214, 160, .17), transparent 39%),
        radial-gradient(circle at 96% 22%, rgba(82, 150, 255, .12), transparent 34%),
        linear-gradient(145deg, #091713 0%, var(--span-bg) 55%, #050d0b 100%);
    font-family: aa_normal, sans_serif_normal, Arial, sans-serif;
    isolation: isolate;
}

.span-root *,
.span-root *::before,
.span-root *::after {
    box-sizing: border-box;
}

.span-root button {
    appearance: none;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
}

.span-root button:focus-visible {
    outline: 2px solid rgba(121, 242, 199, .82);
    outline-offset: 2px;
}

.span-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.span-ambient {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.span-ambient-orb {
    position: absolute;
    width: min(44cqw, 520px);
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(clamp(48px, 7cqw, 90px));
    opacity: .11;
    will-change: transform;
    animation: spanAmbientDrift 16s ease-in-out infinite alternate;
}

.span-ambient-orb-a {
    top: -30%;
    left: 18%;
    background: var(--span-green);
}

.span-ambient-orb-b {
    right: -22%;
    bottom: -35%;
    background: var(--span-blue);
    animation-delay: -8s;
}

.span-grid-lines {
    position: absolute;
    inset: 0;
    opacity: .2;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: clamp(34px, 4cqw, 58px) clamp(34px, 4cqw, 58px);
    mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.span-shell {
    width: min(1500px, 100%);
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: var(--span-gap);
    margin: 0 auto;
    padding: var(--span-pad);
    overflow: hidden;
}

.span-header {
    min-width: 0;
    min-height: clamp(30px, min(5.8cqh, 4.2cqw), 52px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--span-gap);
}

.span-brand,
.span-header-status,
.span-card-heading,
.span-power-reading,
.span-power-context,
.span-flow-footer,
.span-history-summary,
.span-detail-topline {
    display: flex;
    align-items: center;
}

.span-brand {
    min-width: 0;
    gap: clamp(7px, .9cqw, 12px);
}

.span-mark {
    width: clamp(29px, min(4.2cqw, 5.6cqh), 44px);
    aspect-ratio: 1;
    flex: none;
    display: grid;
    place-items: center;
    border: 1px solid rgba(121, 242, 199, .25);
    border-radius: clamp(9px, 1.1cqw, 13px);
    background: linear-gradient(145deg, rgba(121, 242, 199, .18), rgba(121, 242, 199, .045));
    box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 12px 34px rgba(0, 0, 0, .23);
}

.span-mark svg {
    width: 53%;
    height: 53%;
    fill: var(--span-green);
    filter: drop-shadow(0 0 9px rgba(121, 242, 199, .42));
}

.span-eyebrow,
.span-card-kicker,
.span-summary-diagnostics small,
.span-detail-grid small,
.span-detail-topline small,
.span-history-summary small {
    color: var(--span-muted);
    font-family: odudo_semibold, sans_serif_semibold, sans-serif;
    font-size: clamp(7px, min(.72cqw, 1.05cqh), 10px);
    line-height: 1.05;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.span-eyebrow {
    max-height: 14px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 420ms cubic-bezier(.2, .8, .2, 1), opacity 260ms ease;
}

.span-title {
    margin-top: clamp(2px, .35cqh, 4px);
    color: var(--span-text);
    font-family: aa_bold, sans_serif_bold, sans-serif;
    font-size: clamp(13px, min(1.55cqw, 2.35cqh), 20px);
    line-height: 1;
    white-space: nowrap;
}

.span-header-status {
    flex: none;
    gap: clamp(7px, .85cqw, 12px);
}

.span-capture-time {
    max-width: 80px;
    overflow: hidden;
    color: var(--span-dim);
    font-family: odudo, monospace;
    font-size: clamp(8px, min(.74cqw, 1.15cqh), 11px);
    white-space: nowrap;
    opacity: 1;
    transition: max-width 420ms cubic-bezier(.2, .8, .2, 1), opacity 240ms ease;
}

.span-live-badge {
    min-width: clamp(78px, 8.5cqw, 106px);
    height: clamp(28px, min(3.4cqw, 4.6cqh), 38px);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(6px, .7cqw, 9px);
    padding: 0 clamp(9px, 1cqw, 14px);
    border: 1px solid rgba(121, 242, 199, .21);
    border-radius: 999px;
    background: rgba(121, 242, 199, .075);
    color: var(--span-green);
    font-family: odudo_semibold, sans-serif;
    font-size: clamp(8px, min(.78cqw, 1.18cqh), 11px);
    white-space: nowrap;
}

.span-live-radar {
    position: relative;
    width: clamp(7px, .72cqw, 9px);
    aspect-ratio: 1;
    flex: none;
    border-radius: 50%;
    background: var(--span-green);
    box-shadow: 0 0 12px rgba(121, 242, 199, .66);
}

.span-live-radar i {
    position: absolute;
    inset: -1px;
    border: 1px solid var(--span-green);
    border-radius: 50%;
    animation: spanRadar 1.9s ease-out infinite;
}

.span-stage {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    grid-template-rows: minmax(108px, .36fr) minmax(0, .64fr);
    grid-template-areas:
        "summary summary"
        "history circuits";
    gap: var(--span-gap);
    overflow: hidden;
    transition:
        grid-template-columns 540ms cubic-bezier(.2, .8, .2, 1),
        grid-template-rows 540ms cubic-bezier(.2, .8, .2, 1);
}

.span-card {
    position: relative;
    min-width: 0;
    min-height: 0;
    border: 1px solid var(--span-border);
    border-radius: var(--span-radius);
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .038), transparent 46%),
        var(--span-panel);
    box-shadow: inset 0 1px rgba(255, 255, 255, .038), 0 20px 56px rgba(0, 0, 0, .2);
    backdrop-filter: blur(22px);
    overflow: hidden;
}

.span-summary-card {
    grid-area: summary;
    display: grid;
    grid-template-columns: minmax(140px, .9fr) clamp(78px, min(12cqw, 18cqh), 138px) minmax(260px, 1.32fr);
    align-items: center;
    gap: clamp(10px, min(1.5cqw, 2cqh), 24px);
    padding: var(--span-card-pad);
    transition: grid-template-columns 540ms cubic-bezier(.2, .8, .2, 1), padding 360ms ease;
}

.span-summary-card::before {
    content: "";
    position: absolute;
    width: min(34cqw, 420px);
    aspect-ratio: 1;
    left: -10%;
    top: -76%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(121, 242, 199, .105), transparent 68%);
    pointer-events: none;
}

.span-power-copy {
    z-index: 2;
    min-width: 0;
}

.span-power-reading {
    align-items: flex-end;
    gap: clamp(5px, .65cqw, 9px);
    margin-top: clamp(7px, min(1.1cqw, 1.6cqh), 17px);
}

.span-power-value {
    color: #fff;
    font-family: aa_bold, sans_serif_bold, sans-serif;
    font-size: clamp(35px, min(5.7cqw, 9.5cqh), 78px);
    line-height: .84;
    letter-spacing: -.045em;
    text-shadow: 0 0 38px rgba(121, 242, 199, .13);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.span-power-unit {
    padding-bottom: clamp(3px, .7cqh, 7px);
    color: var(--span-green);
    font-family: odudo_semibold, sans-serif;
    font-size: clamp(10px, min(1.2cqw, 2cqh), 16px);
}

.span-power-context {
    min-width: 0;
    gap: 7px;
    margin-top: clamp(7px, min(1.05cqw, 1.55cqh), 15px);
    color: var(--span-muted);
    font-size: clamp(8px, min(.82cqw, 1.25cqh), 12px);
    white-space: nowrap;
}

.span-power-trend {
    overflow: hidden;
    text-overflow: ellipsis;
}

.span-trend-icon {
    width: clamp(17px, min(1.75cqw, 2.7cqh), 21px);
    aspect-ratio: 1;
    flex: none;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(121, 242, 199, .1);
    color: var(--span-green);
    font-family: odudo_bold, monospace;
    font-size: clamp(7px, .7cqw, 10px);
}

.span-power-gauge {
    position: relative;
    z-index: 2;
    width: 100%;
    aspect-ratio: 1;
    justify-self: center;
}

.span-power-gauge svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.span-power-gauge circle {
    fill: none;
    stroke-width: 8;
}

.span-gauge-track {
    stroke: rgba(255, 255, 255, .075);
}

.span-gauge-value {
    stroke: var(--span-green);
    stroke-linecap: round;
    stroke-dasharray: 308;
    stroke-dashoffset: 308;
    filter: drop-shadow(0 0 5px rgba(121, 242, 199, .52));
    transition: stroke-dashoffset 760ms cubic-bezier(.2, .8, .2, 1), stroke 300ms ease;
}

.span-capacity-elevated .span-gauge-value { stroke: var(--span-lime); }
.span-capacity-high .span-gauge-value { stroke: var(--span-orange); }

.span-gauge-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.span-gauge-label strong {
    color: var(--span-text);
    font-family: odudo_bold, sans-serif;
    font-size: clamp(14px, min(1.85cqw, 3cqh), 23px);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.span-gauge-label > span {
    margin-top: clamp(2px, .5cqh, 6px);
    color: var(--span-dim);
    font-size: clamp(5px, min(.62cqw, .9cqh), 8px);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.span-gauge-label small {
    max-height: 13px;
    margin-top: clamp(2px, .45cqh, 5px);
    overflow: hidden;
    color: var(--span-green);
    font-family: odudo_semibold, sans-serif;
    font-size: clamp(5px, min(.58cqw, .82cqh), 8px);
    white-space: nowrap;
    opacity: .75;
    transition: max-height 360ms ease, opacity 240ms ease;
}

.span-source-zone {
    min-width: 0;
    width: 100%;
    max-height: 100%;
    padding-left: clamp(8px, 1.2cqw, 18px);
    overflow: hidden;
    border-left: 1px solid rgba(255, 255, 255, .055);
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity 320ms ease,
        transform 520ms cubic-bezier(.2, .8, .2, 1),
        padding 520ms cubic-bezier(.2, .8, .2, 1),
        border-color 260ms ease;
}

.span-card-heading {
    min-width: 0;
    justify-content: space-between;
    gap: clamp(8px, 1cqw, 16px);
}

.span-flow-state,
.span-card-title,
.span-history-scope {
    margin-top: clamp(3px, .55cqh, 7px);
    color: var(--span-text);
    font-family: aa_bold, sans_serif_bold, sans-serif;
    font-size: clamp(12px, min(1.35cqw, 2.05cqh), 18px);
    line-height: 1.05;
}

.span-flow-pill {
    flex: none;
    padding: clamp(5px, .7cqh, 7px) clamp(7px, .75cqw, 10px);
    border: 1px solid rgba(121, 242, 199, .16);
    border-radius: 999px;
    background: rgba(121, 242, 199, .08);
    color: var(--span-green);
    font-family: odudo_semibold, sans-serif;
    font-size: clamp(6px, min(.58cqw, .86cqh), 9px);
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.span-flow-stage {
    height: clamp(54px, 9.5cqh, 88px);
    display: grid;
    grid-template-columns: clamp(43px, 5cqw, 66px) minmax(60px, 1fr) clamp(43px, 5cqw, 66px);
    align-items: center;
    gap: clamp(5px, .85cqw, 12px);
    margin-top: clamp(1px, .35cqh, 4px);
}

.span-flow-node {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.span-flow-node > span {
    color: var(--span-muted);
    font-size: clamp(6px, min(.65cqw, .92cqh), 9px);
}

.span-flow-node > strong {
    color: var(--span-text);
    font-family: odudo_semibold, sans-serif;
    font-size: clamp(7px, min(.75cqw, 1.08cqh), 11px);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.span-node-icon {
    width: clamp(28px, min(3.6cqw, 5.4cqh), 44px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid rgba(121, 242, 199, .16);
    border-radius: clamp(9px, 1cqw, 13px);
    background: rgba(121, 242, 199, .055);
    box-shadow: inset 0 1px rgba(255, 255, 255, .04), 0 10px 24px rgba(0, 0, 0, .17);
}

.span-home-icon svg {
    width: 53%;
    height: 53%;
    fill: var(--span-green);
}

.span-grid-icon {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
}

.span-grid-icon i {
    width: clamp(2px, .28cqw, 4px);
    border-radius: 3px;
    background: var(--span-blue);
    box-shadow: 0 0 7px rgba(119, 191, 255, .45);
}

.span-grid-icon i:nth-child(1) { height: 35%; }
.span-grid-icon i:nth-child(2) { height: 58%; }
.span-grid-icon i:nth-child(3) { height: 47%; }

.span-flow-lane {
    position: relative;
    height: 24px;
    overflow: hidden;
}

.span-flow-beam {
    position: absolute;
    top: 11px;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(119, 191, 255, .18), var(--span-green), rgba(121, 242, 199, .16));
    box-shadow: 0 0 10px rgba(121, 242, 199, .26);
}

.span-flow-lane i {
    position: absolute;
    top: 8px;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #dffff3;
    box-shadow: 0 0 9px 3px rgba(121, 242, 199, .58);
    will-change: transform, opacity;
    animation: spanEnergyFlow 2.6s linear infinite;
}

.span-flow-lane i:nth-child(2) { animation-delay: -.86s; }
.span-flow-lane i:nth-child(3) { animation-delay: -1.72s; }
.span-exporting .span-flow-lane i { animation-direction: reverse; }

.span-summary-diagnostics {
    max-height: 42px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(5px, .65cqw, 9px);
    overflow: hidden;
    opacity: 1;
    transition: max-height 420ms cubic-bezier(.2, .8, .2, 1), opacity 240ms ease;
}

.span-summary-diagnostics > span {
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 3px 7px;
    padding: clamp(5px, .7cqh, 8px) clamp(7px, .7cqw, 10px);
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: clamp(8px, .8cqw, 11px);
    background: rgba(255, 255, 255, .022);
}

.span-summary-diagnostics small {
    grid-column: 1 / 3;
}

.span-summary-diagnostics b {
    color: var(--span-text);
    font-family: odudo_semibold, sans-serif;
    font-size: clamp(9px, min(.95cqw, 1.4cqh), 13px);
    font-variant-numeric: tabular-nums;
}

.span-summary-diagnostics em {
    min-width: 0;
    overflow: hidden;
    color: var(--span-dim);
    font-size: clamp(6px, min(.55cqw, .8cqh), 8px);
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.span-flow-footer {
    justify-content: space-between;
    gap: 10px;
    margin-top: clamp(3px, .65cqh, 8px);
    color: var(--span-dim);
    font-size: clamp(6px, min(.59cqw, .85cqh), 9px);
    white-space: nowrap;
}

.span-flow-footer > span:first-child {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.span-flow-footer b {
    overflow: hidden;
    color: var(--span-muted);
    font-family: aa_normal, sans-serif;
    font-weight: normal;
    text-overflow: ellipsis;
}

.span-flow-detail {
    overflow: hidden;
    text-overflow: ellipsis;
}

.span-footer-dot {
    width: 6px;
    height: 6px;
    flex: none;
    display: block;
    border-radius: 50%;
    background: var(--span-green);
    box-shadow: 0 0 8px rgba(121, 242, 199, .55);
}

.span-mini-trend {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 43%;
    height: 46%;
    opacity: .14;
    pointer-events: none;
    transition: width 520ms cubic-bezier(.2, .8, .2, 1), opacity 320ms ease;
}

.span-mini-trend svg {
    width: 100%;
    height: 100%;
}

.span-mini-area { fill: rgba(121, 242, 199, .09); }

.span-mini-line {
    fill: none;
    stroke: var(--span-green);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 5px rgba(121, 242, 199, .28));
}

.span-history-card {
    grid-area: history;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: var(--span-card-pad);
    opacity: 1;
    transform: translateX(0) scale(1);
    visibility: visible;
    transition:
        opacity 300ms ease,
        transform 540ms cubic-bezier(.2, .8, .2, 1),
        visibility 0s linear 0s,
        padding 360ms ease;
}

.span-history-heading {
    min-height: 38px;
}

.span-history-scope {
    max-width: min(32cqw, 360px);
    display: block;
    padding: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

.span-history-scope.span-filtered {
    color: var(--span-green);
    cursor: pointer;
}

.span-history-scope.span-filtered::after {
    content: " ×";
    color: var(--span-muted);
}

.span-segmented {
    flex: none;
    display: flex;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, .065);
    border-radius: 11px;
    background: rgba(0, 0, 0, .14);
}

.span-segmented button {
    min-width: clamp(42px, 4.2cqw, 50px);
    min-height: 36px;
    border-radius: 8px;
    color: var(--span-dim);
    font-family: odudo_semibold, sans-serif;
    font-size: clamp(7px, min(.64cqw, .92cqh), 9px);
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.span-segmented button:hover { color: var(--span-muted); }
.span-segmented button:active { transform: scale(.95); }

.span-segmented button.span-selected {
    background: rgba(121, 242, 199, .12);
    color: var(--span-green);
    box-shadow: inset 0 0 0 1px rgba(121, 242, 199, .08), 0 5px 18px rgba(0, 0, 0, .12);
}

.span-chart-wrap {
    position: relative;
    min-width: 0;
    min-height: 0;
    margin-top: clamp(4px, .8cqh, 11px);
    overflow: hidden;
}

.span-chart {
    width: 100%;
    height: 100%;
    overflow: visible;
    cursor: crosshair;
}

.span-chart-grid line {
    stroke: rgba(255, 255, 255, .052);
    stroke-width: 1;
    stroke-dasharray: 4 7;
    vector-effect: non-scaling-stroke;
}

.span-chart-area {
    fill: url(#spanAreaGradient);
    opacity: .92;
}

.span-chart-line {
    fill: none;
    stroke: var(--span-green);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 6px rgba(121, 242, 199, .34));
}

.span-chart-points circle {
    fill: var(--span-panel-strong);
    stroke: var(--span-green);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.span-chart-cursor {
    opacity: 0;
    stroke: rgba(255, 255, 255, .3);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
    transition: opacity 120ms ease;
}

.span-chart-cursor.span-visible { opacity: 1; }

.span-chart-y,
.span-chart-x {
    position: absolute;
    z-index: 2;
    color: var(--span-dim);
    font-family: odudo, monospace;
    font-size: clamp(6px, min(.52cqw, .78cqh), 8px);
    pointer-events: none;
}

.span-chart-y { left: 5px; }
.span-chart-y-max { top: 9%; }
.span-chart-y-min { bottom: 16%; }
.span-chart-x { bottom: 7%; }
.span-chart-x-first { left: 5px; }
.span-chart-x-last { right: 5px; }

.span-chart-tooltip {
    position: absolute;
    z-index: 4;
    top: 8px;
    min-width: 104px;
    padding: 9px 10px;
    border: 1px solid rgba(121, 242, 199, .18);
    border-radius: 10px;
    opacity: 0;
    background: rgba(7, 17, 15, .95);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    pointer-events: none;
    transform: translate(-50%, -5px);
    transition: opacity 120ms ease, transform 120ms ease;
}

.span-chart-tooltip.span-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.span-chart-tooltip strong,
.span-chart-tooltip span {
    display: block;
    text-align: center;
}

.span-chart-tooltip strong {
    color: var(--span-green);
    font-family: odudo_semibold, sans-serif;
    font-size: 12px;
}

.span-chart-tooltip span {
    margin-top: 3px;
    color: var(--span-muted);
    font-size: 8px;
}

.span-chart-empty {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 48%;
    max-width: 260px;
    color: var(--span-dim);
    font-size: clamp(8px, min(.8cqw, 1.1cqh), 11px);
    line-height: 1.45;
    opacity: 0;
    text-align: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: opacity 220ms ease;
}

.span-chart-empty.span-visible { opacity: 1; }

.span-history-summary {
    justify-content: flex-start;
    gap: clamp(24px, 5cqw, 72px);
    min-height: clamp(38px, 5.4cqh, 54px);
    padding-top: clamp(7px, 1cqh, 12px);
    border-top: 1px solid rgba(255, 255, 255, .052);
}

.span-history-summary > span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.span-history-summary b {
    color: var(--span-text);
    font-family: odudo_semibold, sans-serif;
    font-size: clamp(9px, min(.9cqw, 1.32cqh), 13px);
    font-variant-numeric: tabular-nums;
}

.span-circuits-card {
    grid-area: circuits;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: var(--span-card-pad);
    transition: padding 360ms ease;
}

.span-circuits-heading {
    min-height: 38px;
}

.span-circuit-count {
    flex: none;
    padding: 6px 9px;
    border: 1px solid rgba(121, 242, 199, .12);
    border-radius: 999px;
    color: var(--span-muted);
    font-family: odudo_semibold, sans-serif;
    font-size: clamp(7px, min(.62cqw, .9cqh), 9px);
    white-space: nowrap;
}

.span-circuit-list {
    min-width: 0;
    min-height: 0;
    margin-top: clamp(4px, .8cqh, 12px);
    overflow: hidden;
    transition: mask-position 300ms ease;
}

.span-has-circuit-detail .span-circuit-list {
    mask-image: linear-gradient(to bottom, black 0, black 64%, transparent 91%);
}

.span-circuit-row {
    position: relative;
    width: 100%;
    height: var(--span-row-height);
    min-height: 0;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, .05);
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transform-origin: center top;
    transition:
        height 360ms cubic-bezier(.2, .8, .2, 1),
        opacity 250ms ease,
        border-color 250ms ease;
}

.span-circuit-row.span-row-clipped {
    height: 0;
    border-color: transparent;
    opacity: 0;
    pointer-events: none;
}

.span-circuit-row.span-row-entering {
    opacity: 0;
    transform: translate3d(0, 7px, 0);
}

.span-circuit-button {
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: clamp(19px, 2.2cqw, 28px) minmax(0, 1fr);
    gap: clamp(5px, .65cqw, 9px);
    align-items: center;
    padding: clamp(4px, .65cqh, 8px) clamp(4px, .6cqw, 8px);
    border-radius: clamp(8px, .85cqw, 11px);
    text-align: left;
    cursor: pointer;
    transition: background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.span-circuit-button:hover,
.span-circuit-row.span-selected .span-circuit-button {
    background: rgba(121, 242, 199, .055);
}

.span-circuit-button:active { transform: scale(.993); }

.span-circuit-row.span-selected .span-circuit-button {
    box-shadow: inset 2px 0 var(--span-green);
}

.span-circuit-rank {
    color: var(--span-dim);
    font-family: odudo, monospace;
    font-size: clamp(7px, min(.62cqw, .9cqh), 9px);
    opacity: 1;
    transition: opacity 220ms ease, transform 360ms cubic-bezier(.2, .8, .2, 1);
}

.span-circuit-body,
.span-circuit-name-line,
.span-circuit-meta {
    min-width: 0;
    display: flex;
}

.span-circuit-body { flex-direction: column; }

.span-circuit-name-line {
    align-items: center;
    justify-content: space-between;
    gap: clamp(7px, .9cqw, 12px);
}

.span-circuit-name {
    min-width: 0;
    overflow: hidden;
    color: var(--span-text);
    font-family: aa_normal, sans-serif;
    font-size: clamp(8px, min(.84cqw, 1.2cqh), 11px);
    font-weight: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.span-circuit-power {
    flex: none;
    color: var(--span-text);
    font-family: odudo_semibold, sans-serif;
    font-size: clamp(8px, min(.74cqw, 1.08cqh), 10px);
    font-variant-numeric: tabular-nums;
    transition: color 200ms ease, opacity 200ms ease, transform 200ms ease;
}

.span-value-changed {
    animation: spanValueChanged 420ms cubic-bezier(.2, .8, .2, 1);
}

.span-circuit-track {
    height: clamp(2px, .34cqh, 3px);
    margin-top: clamp(3px, .55cqh, 7px);
    overflow: hidden;
    border-radius: 99px;
    background: rgba(255, 255, 255, .055);
}

.span-circuit-track i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--span-green-strong), var(--span-lime));
    box-shadow: 0 0 7px rgba(121, 242, 199, .33);
    transition: width 680ms cubic-bezier(.2, .8, .2, 1);
}

.span-circuit-meta {
    justify-content: space-between;
    gap: 8px;
    max-height: 12px;
    margin-top: clamp(2px, .42cqh, 4px);
    overflow: hidden;
    color: var(--span-dim);
    font-size: clamp(6px, min(.57cqw, .82cqh), 8px);
    opacity: 1;
    transition: max-height 360ms ease, margin 360ms ease, opacity 220ms ease;
}

.span-circuit-empty {
    height: 100%;
    display: grid;
    place-items: center;
    padding: 20px;
    color: var(--span-dim);
    font-size: 10px;
    text-align: center;
}

.span-circuit-detail {
    position: absolute;
    z-index: 4;
    left: var(--span-card-pad);
    right: var(--span-card-pad);
    bottom: var(--span-card-pad);
    padding: clamp(10px, min(1cqw, 1.4cqh), 15px);
    border: 1px solid rgba(121, 242, 199, .13);
    border-radius: clamp(11px, 1.1cqw, 15px);
    opacity: 0;
    background: rgba(15, 36, 30, .97);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .36), inset 0 1px rgba(255, 255, 255, .04);
    pointer-events: none;
    transform: translate3d(0, calc(100% + var(--span-card-pad)), 0);
    transition: opacity 250ms ease, transform 420ms cubic-bezier(.2, .8, .2, 1);
}

.span-circuit-detail.span-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
}

.span-detail-topline {
    justify-content: space-between;
    gap: 12px;
}

.span-detail-topline > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.span-detail-name {
    overflow: hidden;
    color: var(--span-text);
    font-family: aa_bold, sans-serif;
    font-size: clamp(10px, min(.95cqw, 1.35cqh), 13px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.span-detail-close {
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 50%;
    color: var(--span-muted);
    font-size: 18px;
    cursor: pointer;
    transition: background 150ms ease, transform 150ms ease;
}

.span-detail-close:hover { background: rgba(255, 255, 255, .06); }
.span-detail-close:active { transform: scale(.92); }

.span-detail-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: clamp(7px, 1cqh, 12px);
}

.span-detail-grid > span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.span-detail-grid b {
    overflow: hidden;
    color: var(--span-text);
    font-family: odudo_semibold, sans-serif;
    font-size: clamp(8px, min(.76cqw, 1.06cqh), 11px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.span-detail-meta {
    margin-top: clamp(6px, .85cqh, 10px);
    overflow: hidden;
    color: var(--span-dim);
    font-size: clamp(6px, min(.55cqw, .78cqh), 8px);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.span-footer {
    display: none;
}

.span-error-overlay {
    position: absolute;
    z-index: 20;
    left: 50%;
    bottom: var(--span-pad);
    width: min(420px, calc(100% - (2 * var(--span-pad))));
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border: 1px solid rgba(255, 184, 108, .25);
    border-radius: 14px;
    opacity: 0;
    visibility: hidden;
    background: rgba(32, 23, 14, .96);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .38);
    pointer-events: none;
    transform: translate(-50%, 15px);
    transition: opacity 220ms ease, transform 220ms ease, visibility 0s linear 220ms;
}

.span-has-error .span-error-overlay {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

.span-error-icon {
    width: 35px;
    height: 35px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(255, 184, 108, .1);
    color: var(--span-orange);
}

.span-error-overlay > div:last-child {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.span-error-overlay strong {
    color: #fff3e6;
    font-family: aa_bold, sans-serif;
    font-size: 11px;
}

.span-error-overlay span {
    overflow: hidden;
    color: rgba(255, 235, 214, .6);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.span-stale .span-live-badge {
    border-color: rgba(255, 184, 108, .22);
    background: rgba(255, 184, 108, .08);
    color: var(--span-orange);
}

.span-stale .span-live-radar,
.span-stale .span-footer-dot {
    background: var(--span-orange);
    box-shadow: 0 0 10px rgba(255, 184, 108, .45);
}

.span-stale .span-live-radar i,
.span-stale .span-flow-lane i,
.span-stale .span-ambient-orb {
    animation-play-state: paused;
}

.span-stale .span-stage { filter: saturate(.58); }

.span-size-medium {
    --span-row-height: clamp(35px, min(6.6cqh, 5.8cqw), 49px);
}

.span-size-medium .span-stage {
    grid-template-rows: minmax(96px, .34fr) minmax(0, .66fr);
}

.span-size-medium .span-summary-card {
    grid-template-columns: minmax(126px, .92fr) clamp(72px, min(11.5cqw, 17cqh), 112px) minmax(220px, 1.2fr);
}

.span-size-medium .span-summary-diagnostics {
    max-height: 0;
    opacity: 0;
}

.span-size-medium .span-flow-stage {
    height: clamp(46px, 8.5cqh, 67px);
}

.span-size-medium .span-flow-footer {
    margin-top: 1px;
}

.span-size-medium .span-history-summary {
    min-height: 34px;
}

.span-size-compact {
    --span-card-pad: clamp(9px, min(2.8cqw, 2.3cqh), 16px);
    --span-row-height: clamp(30px, min(9.4cqh, 10.5cqw), 42px);
}

.span-size-compact .span-shell {
    gap: clamp(5px, 1.7cqh, 9px);
}

.span-size-compact .span-stage {
    grid-template-columns: minmax(0, 0fr) minmax(0, 1fr);
    grid-template-rows: minmax(88px, .46fr) minmax(0, .54fr);
}

.span-size-compact .span-summary-card {
    grid-template-columns: minmax(0, 1fr) clamp(72px, min(22cqw, 24cqh), 104px) minmax(0, 0fr);
    gap: clamp(7px, 2cqw, 13px);
}

.span-size-compact .span-source-zone {
    padding-left: 0;
    border-color: transparent;
    opacity: 0;
    pointer-events: none;
    transform: translateX(16px);
}

.span-size-compact .span-history-card {
    padding-left: 0;
    padding-right: 0;
    border-color: transparent;
    opacity: 0;
    transform: translateX(-18px) scale(.98);
    visibility: hidden;
    pointer-events: none;
    transition-delay: 0s, 0s, 520ms, 0s;
}

.span-size-compact .span-circuits-card {
    border-radius: var(--span-radius);
}

.span-size-compact .span-eyebrow {
    max-height: 0;
    opacity: 0;
}

.span-size-compact .span-title { margin-top: 0; }

.span-size-compact .span-capture-time {
    max-width: 0;
    opacity: 0;
}

.span-size-compact .span-live-badge {
    min-width: 72px;
    padding-inline: 8px;
}

.span-size-compact .span-power-value {
    font-size: clamp(34px, min(14cqw, 16cqh), 58px);
}

.span-size-compact .span-power-context {
    max-width: 40cqw;
}

.span-size-compact .span-gauge-label small {
    max-height: 0;
    opacity: 0;
}

.span-size-compact .span-mini-trend {
    width: 66%;
    opacity: .34;
}

.span-size-compact .span-circuits-heading .span-card-kicker {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
}

.span-size-compact .span-card-title {
    margin-top: 0;
    color: var(--span-muted);
    font-size: clamp(9px, 2.8cqw, 12px);
    letter-spacing: .09em;
    text-transform: uppercase;
}

.span-size-compact .span-circuit-count {
    padding: 4px 7px;
    font-size: 7px;
}

.span-size-compact .span-circuit-button {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 3px;
}

.span-size-compact .span-circuit-rank {
    position: absolute;
    opacity: 0;
    transform: translateX(-5px);
    pointer-events: none;
}

.span-size-compact .span-circuit-meta {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
}

.span-size-compact .span-circuit-name {
    font-size: clamp(8px, 2.5cqw, 10px);
}

.span-size-compact .span-circuit-power {
    font-size: clamp(7px, 2.2cqw, 9px);
}

.span-size-compact .span-circuit-detail {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate3d(0, calc(100% + var(--span-card-pad)), 0) !important;
}

@keyframes spanRadar {
    0% { opacity: .75; transform: scale(.75); }
    80%, 100% { opacity: 0; transform: scale(2.7); }
}

@keyframes spanEnergyFlow {
    0% { opacity: 0; transform: translate3d(-8px, 0, 0) scale(.55); }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--span-flow-distance, 120px), 0, 0) scale(1); }
}

@keyframes spanAmbientDrift {
    from { transform: translate3d(-4%, -2%, 0) scale(.92); }
    to { transform: translate3d(6%, 5%, 0) scale(1.08); }
}

@keyframes spanValueChanged {
    0% { color: var(--span-text); opacity: 1; transform: translateY(0); }
    35% { color: var(--span-green); opacity: .68; transform: translateY(-2px); }
    100% { color: var(--span-text); opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .span-root *,
    .span-root *::before,
    .span-root *::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}