/* ==========================================================================
   TWIN — "Physical | Twin" plate (SPEC 6.3; the signature of digital-twins.html)
   Markup: $SP/parts/twin.html · behaviour: js/twin.js
   Stands alone: every site token has a fallback, everything is scoped under .twin.

   .twin                     root (full width of its column; [data-twin] or [data-twin="scan"])
     figure.twin-plate       sized plate: never wider than 1.25× the 1024px source, never taller than the viewport
       .twin-frame           hairline frame + accent corner ticks outside it
         .twin-stage         the picture box (1024:825), a size container; JS adds .twin-fx / .twin-over layers
       .twin-control         (JS) the native range, drawn as a hairline scale aligned with the picture
       figcaption.twin-caption   mono "PLATE · …" caption (+ JS: the measured trace time)
   State classes (JS): is-armed, is-ready, is-shown, is-lens, is-dragging, is-scanning, is-edge-left/right.
   Custom properties (JS): --twin-split (0..1, share showing the photo), --twin-tail, --twin-lens (px).
   ========================================================================== */

.twin {
    --twin-wire: #3CC8FF;
    --twin-wire-rgb: 60, 200, 255;
    --twin-hot: #E2F8FF;
    --twin-mark: #FF8A3D;               /* safety orange: marks and indices only */
    --twin-ink: #02060E;
    --twin-max: 1280px;                 /* 1.25 × the 1024px source: never upscale further */
    --twin-reserve: calc(var(--header-offset, 64px) + 5rem);     /* the picture and its scale fit under the header */
    --twin-pad: 5px;
    --twin-tick: 14px;
    --twin-tick-gap: 7px;
    --twin-thumb: 18px;
    --twin-range-h: 2rem;
    --twin-split: .5;
    --twin-tail: 120px;
    --twin-lens: 90px;
    display: block;
    min-width: 0;
    margin: 0;
    color: var(--text, #E9EDFA);
}

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

/* the home reel shares its screen with a heading and copy */
.twin[data-twin="scan"] {
    --twin-reserve: calc(var(--header-offset, 64px) + 10rem);
}

.twin-plate {
    container: twin-plate / inline-size;
    position: relative;
    /* fill the column, but cap at 1.25× the source and at the viewport height (never below 18rem for that) */
    width: min(100% - 2 * var(--twin-tick-gap),
        max(min(var(--twin-max), (100vh - var(--twin-reserve)) * 1.2412 + 2 * var(--twin-pad)), 18rem));
    width: min(100% - 2 * var(--twin-tick-gap),
        max(min(var(--twin-max), (100svh - var(--twin-reserve)) * 1.2412 + 2 * var(--twin-pad)), 18rem));
    min-width: 0;
    margin: var(--twin-tick-gap) auto;
}

/* ---------- frame + corner ticks ---------- */

.twin-frame {
    position: relative;
    padding: var(--twin-pad);
    border-radius: var(--r-xs, 3px);
    background: rgba(3, 4, 10, .6);
    box-shadow:
        inset 0 0 0 1px var(--line-strong, rgba(142, 155, 255, .30)),
        0 2.5rem 6rem -3.5rem rgba(var(--twin-wire-rgb), .35);
}

.twin-frame::before {
    --c: var(--accent, var(--twin-wire));
    content: "";
    position: absolute;
    inset: calc(-1 * var(--twin-tick-gap));
    pointer-events: none;
    background:
        linear-gradient(var(--c), var(--c)) 0 0 / var(--twin-tick) 1px,
        linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--twin-tick),
        linear-gradient(var(--c), var(--c)) 100% 0 / var(--twin-tick) 1px,
        linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--twin-tick),
        linear-gradient(var(--c), var(--c)) 0 100% / var(--twin-tick) 1px,
        linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--twin-tick),
        linear-gradient(var(--c), var(--c)) 100% 100% / var(--twin-tick) 1px,
        linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--twin-tick);
    background-repeat: no-repeat;
}

/* ---------- the picture box ---------- */

.twin-stage {
    container: twin-stage / size;
    position: relative;
    aspect-ratio: 1024 / 825;
    overflow: hidden;
    isolation: isolate;
    border-radius: 1px;
    background: var(--twin-ink);
}

.twin--full.is-ready .twin-stage {
    touch-action: pan-y;               /* vertical swipes scroll; horizontal ones move the divider */
    cursor: crosshair;
    -webkit-user-select: none;
    user-select: none;
}

.twin.is-dragging .twin-stage {
    cursor: ew-resize;
}

.twin-photo,
.twin-photo img {
    display: block;
    width: 100%;
    height: 100%;
}

.twin-photo img {
    max-width: none;
    object-fit: cover;
}

.twin-fx,
.twin-over {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.twin-fx { z-index: 1; }
.twin-leaders,
.twin-callout { z-index: 2; }
.twin-over { z-index: 3; }

.twin-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    -webkit-user-drag: none;
}

/* A full-stage pane inside a moving window (the window moves one way, the pane the other: transforms only) */
.twin-pane {
    position: absolute;
    left: 0;
    top: 0;
    width: 100cqw;
    height: 100cqh;
}

/* The twin, right of the divider */
.twin-edge {
    position: absolute;
    inset: 0;
    overflow: hidden;
    transform: translateX(calc(var(--twin-split) * 100%));
}

.twin-edge > .twin-pane {
    transform: translateX(calc(var(--twin-split) * -100%));
}

/* The opposite reality, shown inside the lens and the scan band */
.twin-inv-twin {
    clip-path: inset(0 calc((1 - var(--twin-split)) * 100%) 0 0);
}

.twin-inv-photo {
    clip-path: inset(0 0 0 calc(var(--twin-split) * 100%));
}

/* ---------- scan band (moves with scroll; JS sets the transforms) ---------- */

.twin-band {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--twin-tail);
    opacity: 0;
    transition: opacity 500ms var(--ease-out, ease-out);
    will-change: transform;
}

.twin-band-mask {
    position: absolute;
    inset: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3) 45%, #000 calc(100% - 1px));
    mask-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .3) 45%, #000 calc(100% - 1px));
}

.twin-band.is-up .twin-band-mask {
    -webkit-mask-image: linear-gradient(to top, transparent, rgba(0, 0, 0, .3) 45%, #000 calc(100% - 1px));
    mask-image: linear-gradient(to top, transparent, rgba(0, 0, 0, .3) 45%, #000 calc(100% - 1px));
}

.twin-band-line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--twin-wire-rgb), 0), var(--twin-wire) 10%, var(--twin-hot) 50%, var(--twin-wire) 90%, rgba(var(--twin-wire-rgb), 0));
    box-shadow: 0 0 10px 1px rgba(var(--twin-wire-rgb), .7);
}

.twin-band.is-up .twin-band-line {
    top: 0;
    bottom: auto;
}

.twin--full.is-scanning .twin-band,
.twin--scan.is-ready .twin-band {
    opacity: 1;
}

/* ---------- x-ray lens (fine pointers) ---------- */

.twin-lens,
.twin-reticle {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(2 * var(--twin-lens));
    height: calc(2 * var(--twin-lens));
    border-radius: 50%;
    opacity: 0;
    transition: opacity 220ms var(--ease-out, ease-out);
    will-change: transform;
}

.twin-lens {
    overflow: hidden;
}

.twin.is-lens .twin-lens,
.twin.is-lens .twin-reticle {
    opacity: 1;
}

/* the lens rim: a hairline ring with a dark halo and four outward ticks, like a loupe's reticle */
.twin-reticle::before,
.twin-reticle::after {
    content: "";
    position: absolute;
}

.twin-reticle::before {
    inset: 0;
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 1.5px rgba(var(--twin-wire-rgb), .95),
        inset 0 0 1.25rem rgba(var(--twin-wire-rgb), .3),
        0 0 0 3px rgba(2, 6, 14, .55),
        0 0 1.5rem rgba(var(--twin-wire-rgb), .35);
}

.twin-reticle::after {
    inset: -9px;
    background:
        linear-gradient(var(--twin-wire), var(--twin-wire)) 50% 0 / 1px 9px,
        linear-gradient(var(--twin-wire), var(--twin-wire)) 50% 100% / 1px 9px,
        linear-gradient(var(--twin-wire), var(--twin-wire)) 0 50% / 9px 1px,
        linear-gradient(var(--twin-wire), var(--twin-wire)) 100% 50% / 9px 1px;
    background-repeat: no-repeat;
}

/* ---------- divider + knob + corner words ---------- */

.twin-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    transform: translateX(calc(var(--twin-split) * 100cqw));
}

.twin-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -.5px;
    width: 1px;
    background: linear-gradient(to bottom, rgba(var(--twin-wire-rgb), .15), var(--twin-wire) 12%, var(--twin-hot) 50%, var(--twin-wire) 88%, rgba(var(--twin-wire-rgb), .15));
    box-shadow: 0 0 12px rgba(var(--twin-wire-rgb), .6);
}

/* the seam breathes light onto both realities */
.twin-line::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -2.5rem;
    width: 5rem;
    background: radial-gradient(closest-side, rgba(var(--twin-wire-rgb), .16), rgba(var(--twin-wire-rgb), 0));
    background-size: 100% 140%;
    background-position: center;
    mix-blend-mode: screen;
}

.twin-knob {
    position: absolute;
    top: 50%;
    left: 0;
    display: grid;
    place-items: center;
    width: clamp(2.25rem, 7cqw, 3rem);
    aspect-ratio: 1;
    border-radius: 50%;
    color: var(--twin-hot);
    background: rgba(2, 6, 14, .74);
    box-shadow:
        inset 0 0 0 1px rgba(var(--twin-wire-rgb), .9),
        0 0 0 4px rgba(2, 6, 14, .32),
        0 0 1.5rem rgba(var(--twin-wire-rgb), .45);
    transform: translate(-50%, -50%);
    transition: transform 320ms var(--ease-out, ease-out), box-shadow 320ms var(--ease-out, ease-out);
}

.twin-knob svg {
    width: 58%;
    height: 58%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.twin--full.is-ready .twin-stage:hover .twin-knob {
    transform: translate(-50%, -50%) scale(1.04);
}

.twin.is-dragging .twin-knob {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow:
        inset 0 0 0 1px var(--twin-hot),
        0 0 0 4px rgba(2, 6, 14, .32),
        0 0 2rem rgba(var(--twin-wire-rgb), .7);
}

/* keyboard focus on the range lights the knob it drives */
.twin-plate:has(.twin-range:focus-visible) .twin-knob {
    outline: 2px solid var(--focus, var(--twin-wire));
    outline-offset: 3px;
    color: #fff;
    box-shadow:
        inset 0 0 0 1px var(--twin-hot),
        0 0 0 9px rgba(3, 4, 10, .7),
        0 0 2rem rgba(var(--twin-wire-rgb), .7);
}

.twin-tag {
    position: absolute;
    bottom: clamp(.5rem, 3.2cqh, 1.25rem);
    display: flex;
    align-items: baseline;
    gap: .6em;
    padding: .2em .1em;
    font-family: var(--font-mono, ui-monospace, 'Cascadia Mono', Consolas, monospace);
    font-size: clamp(.75rem, .45rem + 1cqw, .8125rem);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    letter-spacing: .2em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--text-2, rgba(233, 237, 250, .72));
    text-shadow: 0 0 .5rem var(--twin-ink), 0 0 2px var(--twin-ink);
    transition: opacity 260ms var(--ease-out, ease-out);
}

.twin-tag b {
    font-weight: 500;
    color: var(--text, #E9EDFA);
}

.twin-tag--physical {
    left: clamp(.5rem, 2.6cqw, 1.25rem);
}

.twin-tag--twin {
    right: clamp(.5rem, 2.6cqw, 1.25rem);
    flex-direction: row-reverse;
}

.twin-tag--twin b {
    color: var(--twin-wire);
}

.twin.is-edge-left .twin-tag--physical,
.twin.is-edge-right .twin-tag--twin {
    opacity: 0;
}

/* the divider and its words appear with the first reveal */
.twin-over {
    opacity: 0;
    transition: opacity 600ms var(--ease-out, ease-out);
}

.twin.is-ready.is-shown .twin-over {
    opacity: 1;
}

/* ---------- callouts with leader lines (static markup: also shown without JS) ----------
   Positions are in the 1024×825 image space; the leader paths in the markup use the same numbers. */

.twin-leaders {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* Without JS: a plain 1px hairline. Armed (JS): stroked in the plate's own units so the pathLength-normalised
   dash draw covers each leader at any plate size (a non-scaling stroke would lay the dash out in screen px and
   leave the leader short on plates wider than 1024px); --twin-unit keeps it 1px wide. */
.twin-leaders path {
    fill: none;
    stroke: rgba(var(--twin-wire-rgb), .8);
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 2px rgba(2, 6, 14, .9));
}

.twin.is-armed .twin-leaders path {
    vector-effect: none;
    stroke-width: var(--twin-unit, 1.4);
    stroke-dasharray: 1 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 900ms var(--ease-io, ease-in-out) 200ms;
}

.twin-callout {
    --node: 7px;
    position: absolute;
    max-width: 38cqw;
    margin: 0;
    padding: 0 0 clamp(.2rem, .9cqw, .45rem);
    font-family: var(--font-mono, ui-monospace, 'Cascadia Mono', Consolas, monospace);
    font-size: clamp(.75rem, .4rem + 1.15cqw, .875rem);
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text, #E9EDFA);
    text-shadow: 0 0 .6rem var(--twin-ink), 0 0 3px var(--twin-ink), 0 0 1px var(--twin-ink);
    pointer-events: none;
    transform: translateY(-100%);          /* the bottom edge sits on the leader's shelf */
    transition: opacity 600ms var(--ease-out, ease-out) 650ms, translate 800ms var(--ease-out, ease-out) 650ms;
}

.twin-callout-index {
    margin-right: .5em;
    color: var(--twin-mark);
}

/* anchor node on the asset */
.twin-callout::before {
    content: "";
    position: absolute;
    width: var(--node);
    height: var(--node);
    margin: calc(var(--node) / -2);
    border-radius: 50%;
    background: var(--twin-ink);
    box-shadow:
        inset 0 0 0 1.5px var(--twin-wire),
        0 0 0 3px rgba(2, 6, 14, .55),
        0 0 .75rem rgba(var(--twin-wire-rgb), .85);
    transition: scale 500ms var(--ease-out, ease-out) 950ms;
}

/* 01 Physical asset — shelf y 112 from x 40 →; anchor (232, 158) on the fan cowl */
.twin-callout--physical {
    left: 3.906cqw;                        /* x 40 */
    top: 13.576cqh;                        /* y 112 */
}

.twin-callout--physical::before {
    left: 18.75cqw;                        /* 232 − 40 */
    top: calc(100% + 5.576cqh);            /* 158 − 112 */
}

/* 02 Virtual replica — shelf y 112 ← to x 984; anchor (812, 214) on the twin's casing */
.twin-callout--replica {
    right: 3.906cqw;                       /* 1024 − 984 */
    top: 13.576cqh;
    text-align: right;
}

.twin-callout--replica::before {
    right: 16.797cqw;                      /* 984 − 812 */
    top: calc(100% + 12.364cqh);           /* 214 − 112 */
}

.twin-leaders .twin-lead-narrow {
    display: none;
}

/* ---------- the range: a hairline scale under the frame, aligned with the picture ---------- */

.twin-control {
    position: relative;
    margin-top: calc(var(--twin-tick-gap) + .125rem);
}

.twin-range {
    --track: rgba(233, 237, 250, .3);
    --tick-major: rgba(233, 237, 250, .5);
    --tick-minor: rgba(233, 237, 250, .26);
    --lit: var(--twin-wire);
    --thumb: var(--plasma, #F2F7FF);
    display: block;
    width: calc(100% - 2 * var(--twin-pad) + var(--twin-thumb));
    height: var(--twin-range-h);
    margin: 0 0 0 calc(var(--twin-pad) - var(--twin-thumb) / 2);
    padding: 0;
    border: 0;
    border-radius: var(--r-xs, 3px);
    background: transparent;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
}

@media (pointer: coarse) {
    .twin {
        --twin-range-h: 2.75rem;
    }
}

/* physical side quiet, twin side lit; ticks every 5 %, taller every 25 % */
.twin-range::-webkit-slider-runnable-track {
    height: 100%;
    border: 0;
    background:
        linear-gradient(var(--lit), var(--lit)) right calc(var(--twin-thumb) / 2) center / calc((1 - var(--twin-split)) * (100% - var(--twin-thumb))) 1px,
        linear-gradient(var(--track), var(--track)) left calc(var(--twin-thumb) / 2) center / calc(var(--twin-split) * (100% - var(--twin-thumb))) 1px,
        linear-gradient(90deg, var(--tick-major) 1px, transparent 1px) left calc(var(--twin-thumb) / 2) center / calc((100% - var(--twin-thumb)) / 4) 11px,
        linear-gradient(90deg, var(--tick-minor) 1px, transparent 1px) left calc(var(--twin-thumb) / 2) center / calc((100% - var(--twin-thumb)) / 20) 5px;
    background-repeat: no-repeat, no-repeat, repeat-x, repeat-x;
}

.twin-range::-moz-range-track {
    height: 100%;
    border: 0;
    background:
        linear-gradient(var(--lit), var(--lit)) right calc(var(--twin-thumb) / 2) center / calc((1 - var(--twin-split)) * (100% - var(--twin-thumb))) 1px,
        linear-gradient(var(--track), var(--track)) left calc(var(--twin-thumb) / 2) center / calc(var(--twin-split) * (100% - var(--twin-thumb))) 1px,
        linear-gradient(90deg, var(--tick-major) 1px, transparent 1px) left calc(var(--twin-thumb) / 2) center / calc((100% - var(--twin-thumb)) / 4) 11px,
        linear-gradient(90deg, var(--tick-minor) 1px, transparent 1px) left calc(var(--twin-thumb) / 2) center / calc((100% - var(--twin-thumb)) / 20) 5px;
    background-repeat: no-repeat, no-repeat, repeat-x, repeat-x;
}

.twin-range::-webkit-slider-thumb {
    width: var(--twin-thumb);
    height: 1.5rem;
    margin-top: calc((var(--twin-range-h) - 1.5rem) / 2);
    border: 0;
    border-radius: 2px;
    background:
        linear-gradient(var(--thumb), var(--thumb)) 50% 50% / 2px 100% no-repeat,
        radial-gradient(closest-side, rgba(var(--twin-wire-rgb), .6), rgba(var(--twin-wire-rgb), 0)) 50% 50% / 100% 100% no-repeat;
    -webkit-appearance: none;
    appearance: none;
}

.twin-range::-moz-range-thumb {
    width: var(--twin-thumb);
    height: 1.5rem;
    border: 0;
    border-radius: 2px;
    background:
        linear-gradient(var(--thumb), var(--thumb)) 50% 50% / 2px 100% no-repeat,
        radial-gradient(closest-side, rgba(var(--twin-wire-rgb), .6), rgba(var(--twin-wire-rgb), 0)) 50% 50% / 100% 100% no-repeat;
}

.twin-range:focus-visible {
    outline: 2px solid var(--focus, var(--twin-wire));
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(3, 4, 10, .85);
}

/* ---------- caption ---------- */

.twin-caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .3em 1.5em;
    margin-top: calc(var(--twin-tick-gap) + .6rem);
    font-family: var(--font-mono, ui-monospace, 'Cascadia Mono', Consolas, monospace);
    font-size: max(var(--t-mono, .72rem), 12px);
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-3, rgba(233, 237, 250, .56));
}

.twin-control + .twin-caption {
    margin-top: .25rem;
}

@media (min-width: 2560px) {
    .twin-caption {
        font-size: .78rem;
    }
}

.twin-caption-index {
    color: var(--accent, var(--twin-wire));
}

.twin-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* narrow plates: labels wrap onto two lines, so the shelves drop to y 150 (the .twin-lead-narrow paths) */
@container twin-plate (max-width: 30rem) {
    .twin-callout {
        width: min-content;               /* one word per line: the labels stay clear of the engines */
        letter-spacing: .1em;
    }

    .twin-callout--physical,
    .twin-callout--replica {
        top: 18.182cqh;                    /* y 150 */
    }

    .twin-callout--physical::before {
        top: calc(100% + 4.121cqh);        /* anchor (232, 184) */
    }

    .twin-callout--replica::before {
        top: calc(100% + 7.758cqh);        /* anchor (812, 214) */
    }

    .twin-leaders .twin-lead-wide {
        display: none;
    }

    .twin-leaders .twin-lead-narrow {
        display: inline;
    }

    .twin-callout-index,
    .twin-stat-size {
        display: none;
    }
}

@container twin-plate (max-width: 22rem) {
    .twin-tag span {
        display: none;
    }
}

@media (max-height: 520px) {
    .twin,
    .twin[data-twin="scan"] {
        --twin-reserve: calc(var(--header-offset, 48px) + 2.5rem);
    }
}

/* ---------- first reveal: leaders draw, nodes ping, labels rise (only when motion is allowed) ---------- */

@media (prefers-reduced-motion: no-preference) {
    :root:not(.motion-off) .twin.is-armed:not(.is-shown) .twin-leaders path {
        stroke-dashoffset: 1;
    }

    :root:not(.motion-off) .twin.is-armed:not(.is-shown) .twin-callout {
        opacity: 0;
        translate: 0 .5rem;
    }

    :root:not(.motion-off) .twin.is-armed:not(.is-shown) .twin-callout::before {
        scale: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .twin *,
    .twin *::before,
    .twin *::after {
        transition: none !important;
    }
}

.motion-off .twin *,
.motion-off .twin *::before,
.motion-off .twin *::after {
    transition: none !important;
}

/* ---------- modes ---------- */

@media (prefers-contrast: more) {
    .twin-callout,
    .twin-tag {
        color: #fff;
        background: rgba(2, 6, 14, .85);
        padding-inline: .35em;
    }

    .twin-tag b {
        color: inherit;
    }
}

@media (forced-colors: active) {
    .twin-frame::before,
    .twin-band,
    .twin-lens,
    .twin-reticle {
        display: none;
    }

    .twin-line {
        background: Highlight;
        box-shadow: none;
    }

    .twin-knob {
        forced-color-adjust: none;
        color: CanvasText;
        background: Canvas;
        box-shadow: inset 0 0 0 2px Highlight;
    }

    .twin-leaders path {
        stroke: Highlight;
        filter: none;
    }

    .twin-callout,
    .twin .twin-callout *,
    .twin-tag,
    .twin .twin-tag * {
        forced-color-adjust: none;
        color: CanvasText;
        background: Canvas;
        text-shadow: none;
    }

    .twin-range {
        forced-color-adjust: none;
        --track: CanvasText;
        --tick-major: CanvasText;
        --tick-minor: GrayText;
        --lit: Highlight;
        --thumb: Highlight;
    }
}