/* Normal-mode instruments. Keep the four corner anchors for the symbiotic skin. */
#ui-instruments {
    --dial-size: clamp(132px, min(15vw, 25vh), 242px);
    --edge-x: clamp(42px, 4.5vw, 92px);
    --edge-y: clamp(26px, 5.5vh, 68px);
    --enamel: #eee0bd;
    --enamel-edge: #ae8d65;
    position: absolute;
    inset: 0;
    color: var(--enamel);
    font-family: Georgia, serif;
}

.instrument {
    position: absolute;
    width: var(--dial-size);
    height: var(--dial-size);
    filter: drop-shadow(0 5px 5px #171a2b55);
    isolation: isolate;
}

.instrument-camera { top: var(--edge-y); left: var(--edge-x); }
.instrument-position { bottom: var(--edge-y); left: var(--edge-x); }
.instrument-rotation { bottom: var(--edge-y); right: var(--edge-x); }
.instrument-levels {
    top: var(--edge-y);
    right: var(--edge-x);
    width: clamp(265px, 22vw, 390px);
    height: auto;
    aspect-ratio: 1635 / 962;
}

/* The little wings are part of the normal-mode instrument silhouette. */
.winged::before,
.winged::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 35%;
    left: -23%;
    width: 33%;
    height: 30%;
    clip-path: polygon(0 0, 100% 11%, 100% 88%, 0 100%);
    background: repeating-linear-gradient(to bottom,
        #e5d5b0 0 3px, #6490a2 3px 18px,
        #264d65 18px 21px, #e5d5b0 21px 24px);
    border-radius: 6px;
}
.winged::after {
    left: auto;
    right: -23%;
    transform: scaleX(-1);
}
.instrument-levels.winged::before,
.instrument-levels.winged::after {
    top: 30%;
    height: 40%;
    width: 20%;
    left: -13%;
}
.instrument-levels.winged::after { left: auto; right: -13%; }

.round-bezel {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: relative;
    display: grid;
    place-items: center;
    padding: 5px;
    border: clamp(8px, 1vw, 14px) solid var(--enamel);
    border-radius: 50%;
    background: #c6ad87;
    box-shadow:
        inset 0 0 0 2px #765e48,
        0 0 0 2px var(--enamel-edge),
        0 2px 2px #fff9 inset;
}
.round-bezel::after {
    content: "";
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 2%, #775938 0 3px, #e8d4a6 3px 5px, transparent 5px),
        radial-gradient(circle at 98% 50%, #775938 0 3px, #e8d4a6 3px 5px, transparent 5px),
        radial-gradient(circle at 50% 98%, #775938 0 3px, #e8d4a6 3px 5px, transparent 5px),
        radial-gradient(circle at 2% 50%, #775938 0 3px, #e8d4a6 3px 5px, transparent 5px);
}

.camera-face,
.dial-face {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px #f4e7c7, inset 0 0 12px #112c3c88;
}
.instrument-camera .camera-face,
.instrument-position .position-face,
.instrument-rotation .rotation-face {
    position: absolute;
    left: 49.7%;
    top: 50.45%;
    width: 76%;
    height: 76%;
    transform: translate(-50%, -50%);
}
.camera-face { background: #080d14; }
#out-mediapipe {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: auto;
    border: 0;
    transform: translate(-50%, -50%);
    /* Let the camera span the dial, then soften its straight top/bottom edges. */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
}
#ui-pointer-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(circle, #456b82, #183142);
    color: #f2e6c9;
    font: 700 clamp(10px, .9vw, 15px) / 1.2 system-ui, sans-serif;
    letter-spacing: .14em;
    text-align: center;
}
#ui-pointer-placeholder[hidden] { display: none; }
.tracking-light {
    position: absolute;
    z-index: 3;
    right: 9%;
    top: 10%;
    width: clamp(10px, 1.1vw, 17px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 3px solid #d7c197;
    background: radial-gradient(circle at 42% 38%, #78796b, #414239 75%);
    box-shadow: inset 0 1px 2px #312e26, 0 0 0 2px #d7c19744, 0 0 5px #ddbc7880;
    transition: background 160ms ease-out, border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.tracking-light::before,
.tracking-light::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.tracking-light::before {
    inset: -6px;
    border: 1px solid #dfca9b55;
}
.tracking-light::after {
    inset: 32%;
    background: #cbb98d;
    opacity: .25;
}
.tracking-light.is-tracking {
    background: radial-gradient(circle at 42% 38%, #9df0b6, #61d992 45%, #28b970 100%);
    box-shadow: inset 0 0 3px #cbf4d7, 0 0 0 2px #70e4a555, 0 0 8px 2px #35d98288;
}
.tracking-light.is-tracking::before {
    border-color: #83eab077;
    box-shadow: 0 0 5px #50e99b66;
}
.tracking-light.is-tracking::after {
    background: #b2f4c6;
    opacity: .5;
}

.levels-panel {
    position: absolute;
    z-index: 1;
    inset: 0;
    width: 100%;
    height: 100%;
}
.levels-housing {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.level-gauge {
    position: absolute;
    top: 31%;
    width: 3.4%;
    height: 48.2%;
    transform: translateX(-50%);
}
.level-gauge:nth-child(1) { left: 30.4%; }
.level-gauge:nth-child(2) { left: 50.1%; }
.level-gauge:nth-child(3) { left: 69.8%; }
.level-dot { display: none; }
.level-track {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.level-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--level) * 100%);
    border-radius: 7px;
    background: linear-gradient(to right, #ffffff66, transparent 35%, #21140833), var(--level-color);
    opacity: .88;
    transition: height 120ms linear;
}
.level-pointer {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: calc(var(--level) * 100%);
    width: clamp(16px, 1.5vw, 24px);
    height: 5px;
    border: 1px solid #91643e;
    border-radius: 3px;
    background: #fff3d5;
    box-shadow: 0 1px 2px #2b271d88;
    transform: translate(-50%, 50%);
    transition: bottom 120ms linear;
}

.position-face {
    background: radial-gradient(circle farthest-side at center, #427b96 35%, #173b51 100%);
}
.position-face::before,
.position-face::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}
.position-face::before {
    background: repeating-conic-gradient(#f7e6bca8 0 .7deg, transparent .7deg 5deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px) calc(100% - 3px), transparent calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px) calc(100% - 3px), transparent calc(100% - 2px));
}
.position-face::after {
    background: repeating-conic-gradient(#fff0ca 0 1.4deg, transparent 1.4deg 30deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px) calc(100% - 3px), transparent calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 14px), #000 calc(100% - 13px) calc(100% - 3px), transparent calc(100% - 2px));
}
.position-cross {
    position: absolute;
    z-index: 2;
    background: #f8e8c4;
    box-shadow: 0 0 3px #f6e9c5;
}
.position-cross-x { left: 9%; right: 9%; top: calc(50% - 1px); height: 2px; }
.position-cross-y { top: 9%; bottom: 9%; left: calc(50% - 1px); width: 2px; }
.position-hub {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: 7px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #f7e9cb;
    transform: translate(-50%, -50%);
}
.axis-letter {
    position: absolute;
    z-index: 3;
    font: 700 clamp(10px, .8vw, 14px) / 1 system-ui, sans-serif;
}
.axis-x { right: 10%; top: 51%; }
.axis-y { top: 9%; left: 52%; }
.axis-x-left { left: 10%; top: 51%; }
.axis-y-bottom { bottom: 9%; left: 52%; }
#ui-position-dot {
    position: absolute;
    z-index: 4;
    opacity: 0;
    left: var(--x, 50%);
    top: var(--y, 50%);
    width: clamp(12px, 1.25vw, 20px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 38%, #ffcf85, #f8a342 45%, #e97618 100%);
    box-shadow: 0 0 0 2px #ffc87f88, 0 0 8px 2px #ff8d3477;
    transform: translate(-50%, -50%);
    transition: left 120ms linear, top 120ms linear, opacity 150ms ease-out;
}
#ui-position-dot.is-visible { opacity: 1; }
#ui-position-dot::before,
#ui-position-dot::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
#ui-position-dot::before {
    inset: -45%;
    background: radial-gradient(circle, #ffb65c55, transparent 70%);
}
#ui-position-dot::after {
    inset: 34%;
    background: #ffd393;
    opacity: .55;
}

.rotation-face { background: #23516c; }
.rotation-face::before,
.rotation-face::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}
.rotation-face::before {
    background: repeating-conic-gradient(#f7e6bca8 0 .7deg, transparent .7deg 5deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px) calc(100% - 3px), transparent calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 8px) calc(100% - 3px), transparent calc(100% - 2px));
}
.rotation-face::after {
    background: repeating-conic-gradient(#fff0ca 0 1.4deg, transparent 1.4deg 30deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px) calc(100% - 3px), transparent calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 16px), #000 calc(100% - 15px) calc(100% - 3px), transparent calc(100% - 2px));
}
.round-housing {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: 138%;
    height: 138%;
    max-width: none;
    object-fit: contain;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.camera-horizon {
    position: absolute;
    inset: -30%;
    background: linear-gradient(to bottom,
        #356f8d 0% 49.55%,
        #f7e4bf 49.55% 50.45%,
        #b7683a 50.45% 100%);
    transform: rotate(var(--camera-roll, 0deg));
    transition: transform 35ms linear;
}
.rotation-vignette {
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle farthest-side at center,
        transparent 50%,
        #27374220 75%,
        #25344470 100%);
}
.hand-needle {
    position: absolute;
    z-index: 3;
    inset: 0;
    transform: rotate(var(--hand-angle, 0deg));
    transition: transform 70ms linear;
}
.hand-needle span {
    position: absolute;
    left: calc(50% - 2px);
    top: 12%;
    width: 4px;
    height: 38%;
    border-radius: 4px;
    background: #ff7927;
    box-shadow: 0 0 4px #ff8a32;
}
.hand-needle span::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -3px;
    width: clamp(8px, .8vw, 13px);
    aspect-ratio: 1;
    border: 2px solid #fff0c9;
    border-radius: 50%;
    background: #ff862e;
    transform: translateX(-50%);
}
.rotation-hub {
    position: absolute;
    z-index: 4;
    left: 50%;
    top: 50%;
    width: clamp(9px, .8vw, 13px);
    aspect-ratio: 1;
    border: 2px solid #987b55;
    border-radius: 50%;
    background: #f7e9cb;
    transform: translate(-50%, -50%);
}

/* Both visual skins stay mounted so a later transition can reveal either one. */
.symbiotic-skin { opacity: 0; }
#out-ui[data-mode="symbiotic"] .normal-skin { opacity: 0; }
#out-ui[data-mode="symbiotic"] .symbiotic-skin { opacity: 1; }
.symbiotic-network {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
}
#out-ui[data-mode="symbiotic"] .instrument { z-index: 1; }
#out-ui[data-mode="symbiotic"] .instrument-position,
#out-ui[data-mode="symbiotic"] .instrument-rotation {
    bottom: calc(var(--edge-y) + 5vh);
}
#out-ui[data-mode="symbiotic"] .instrument-position {
    left: calc(var(--edge-x) - 1.2vw);
}
#out-ui[data-mode="symbiotic"] .instrument-levels {
    right: clamp(20px, 3vw, 52px);
    width: clamp(240px, 19vw, 340px);
}

.symbiotic-frame {
    position: absolute;
    z-index: 2;
    inset: -12%;
    border: 1px solid #70b9ff99;
    border-radius: 50%;
    box-shadow: 0 0 12px #328dff99, inset 0 0 9px #ff3d9d88;
    pointer-events: none;
}
.symbiotic-frame::before,
.symbiotic-frame::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}
.symbiotic-frame::before {
    inset: 7%;
    border: 2px solid #ff4ea9;
    border-top-color: #77e4ff;
    border-right-color: #8a8dff;
    box-shadow: 0 0 10px #ff4ea9, inset 0 0 9px #25c8ff;
}
.symbiotic-frame::after {
    inset: -8%;
    border: 1px dotted #a87cffaa;
    box-shadow: 0 0 7px #8a5cff88;
}
.frame-orbit {
    position: absolute;
    inset: -12%;
    border-radius: 50%;
    background: conic-gradient(from 210deg,
        transparent 0deg 28deg, #49d7ff 31deg 63deg,
        transparent 68deg 134deg, #ff4bac 138deg 160deg,
        transparent 166deg 255deg, #b469ff 260deg 290deg,
        transparent 295deg 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
    filter: drop-shadow(0 0 5px #c457ff);
}
.frame-spark {
    position: absolute;
    z-index: 1;
    width: 6px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #ffffff;
}
.frame-spark-a {
    top: 6%;
    right: 15%;
    box-shadow: 0 0 4px #fff, 0 0 10px 3px #29dcff;
}
.frame-spark-b {
    bottom: 9%;
    left: 12%;
    box-shadow: 0 0 4px #fff, 0 0 10px 3px #ff40a6;
}
.symbiotic-levels {
    position: absolute;
    inset: 28% 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 1%;
    box-sizing: border-box;
}
.symbiotic-meter {
    position: relative;
    width: 25%;
    aspect-ratio: 1;
    border-radius: 50%;
    --ring-start: -15deg;
}
#ui-symbiotic-intensity { --ring-highlight: #ffd1e6; --ring-dim: #a7346866; --dot-turn: 0deg; }
#ui-symbiotic-density { --ring-highlight: #f0d6ff; --ring-dim: #8055a866; --dot-turn: 9deg; }
#ui-symbiotic-anarchy { --ring-highlight: #fff; --ring-dim: #7280ac66; --dot-turn: -6deg; }
.symbiotic-meter::before,
.symbiotic-meter::after,
.symbiotic-meter > span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}
.symbiotic-meter::before {
    content: "";
    inset: -7%;
    background: conic-gradient(from 30deg,
        transparent 0deg 28deg,
        var(--ring-dim) 40deg 155deg,
        transparent 172deg 215deg,
        var(--ring-color) 230deg 258deg,
        transparent 275deg 360deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 85%, #000 87% 89%, transparent 91%);
    mask: radial-gradient(circle closest-side, transparent 85%, #000 87% 89%, transparent 91%);
    opacity: .72;
}
.symbiotic-meter::after {
    content: "";
    inset: -9%;
    z-index: 0;
    background: conic-gradient(from var(--ring-start), var(--ring-color) 0deg var(--sweep), transparent var(--sweep) 360deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 52%, #000 54% 78%, transparent 80%);
    mask: radial-gradient(circle closest-side, transparent 52%, #000 54% 78%, transparent 80%);
    filter: blur(7px);
    opacity: .62;
}
.meter-track,
.meter-arc {
    -webkit-mask: radial-gradient(circle closest-side, transparent 54%, #000 56% 81%, transparent 83%);
    mask: radial-gradient(circle closest-side, transparent 54%, #000 56% 81%, transparent 83%);
}
.symbiotic-meter .meter-track {
    z-index: 1;
    background: conic-gradient(from var(--ring-start),
        var(--ring-dim) 0deg 280deg,
        transparent 291deg 360deg);
    opacity: .78;
}
.symbiotic-meter .meter-arc {
    z-index: 2;
    background: conic-gradient(from var(--ring-start),
        var(--ring-highlight) 0deg,
        var(--ring-color) var(--sweep),
        transparent var(--sweep) 360deg);
    filter: drop-shadow(0 0 4px var(--ring-color)) drop-shadow(0 0 9px var(--ring-color));
}
.meter-arc::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from var(--ring-start),
        var(--ring-highlight) 0deg var(--sweep),
        transparent var(--sweep) 360deg);
    -webkit-mask: radial-gradient(circle closest-side, transparent 72%, #000 74% 78%, transparent 80%);
    mask: radial-gradient(circle closest-side, transparent 72%, #000 74% 78%, transparent 80%);
    opacity: .85;
}
.symbiotic-meter .meter-core {
    z-index: 3;
    inset: 28%;
    background: radial-gradient(circle at 45% 42%, #0b0a20 0 40%, #02030d 77%);
    box-shadow: inset 0 0 10px #000c, 0 0 0 1px var(--ring-dim), 0 0 10px #02020d;
}
.symbiotic-meter .meter-dots {
    z-index: 4;
    inset: -14%;
    background: repeating-conic-gradient(from var(--dot-turn),
        var(--ring-color) 0deg .8deg,
        transparent 1deg 6deg);
    -webkit-mask-image:
        radial-gradient(circle closest-side, transparent 85%, #000 87% 89%, transparent 91%),
        conic-gradient(from var(--dot-turn),
            transparent 0deg 18deg, #000 34deg 105deg, #0005 127deg,
            #000 157deg 225deg, transparent 247deg 265deg,
            #000a 285deg 320deg, transparent 343deg 360deg);
    -webkit-mask-composite: source-in;
    mask-image:
        radial-gradient(circle closest-side, transparent 85%, #000 87% 89%, transparent 91%),
        conic-gradient(from var(--dot-turn),
            transparent 0deg 18deg, #000 34deg 105deg, #0005 127deg,
            #000 157deg 225deg, transparent 247deg 265deg,
            #000a 285deg 320deg, transparent 343deg 360deg);
    mask-composite: intersect;
    opacity: .72;
    filter: drop-shadow(0 0 2px var(--ring-color));
}
#out-ui[data-mode="symbiotic"] .instrument-camera .camera-face,
#out-ui[data-mode="symbiotic"] .instrument-position .position-face,
#out-ui[data-mode="symbiotic"] .instrument-rotation .rotation-face {
    width: 85%;
    height: 85%;
}
#out-ui[data-mode="symbiotic"] .camera-face {
    box-shadow: inset 0 0 0 2px #ff4ea9, 0 0 12px #9f45ff99;
}
#out-ui[data-mode="symbiotic"] #ui-pointer-placeholder {
    background: radial-gradient(circle, #102444, #030714);
    color: #a7edff;
    text-shadow: 0 0 8px #42cfff;
}
#out-ui[data-mode="symbiotic"] .tracking-light {
    border: 2px solid #7467a5;
    background: radial-gradient(circle at 45% 40%, #544a83, #18142f 72%);
    box-shadow: 0 0 0 2px #6154a333, 0 0 6px 1px #765ac066, inset 0 0 5px #080817;
}
#out-ui[data-mode="symbiotic"] .tracking-light::before {
    inset: -6px;
    border: 1px solid #8b72d455;
    box-shadow: 0 0 5px #7758c255;
}
#out-ui[data-mode="symbiotic"] .tracking-light::after {
    inset: 30%;
    background: #c9c0f1;
    opacity: .25;
}
#out-ui[data-mode="symbiotic"] .tracking-light.is-tracking {
    border-color: #a6ffe1;
    background: radial-gradient(circle at 45% 40%, #a0f1d6, #60e6bb 38%, #20dca6 74%, #078a77 100%);
    box-shadow: 0 0 0 2px #4dffbb55, 0 0 8px 2px #52ffca88, 0 0 15px 4px #24f5a344, inset 0 0 4px #c3f5e5;
}
#out-ui[data-mode="symbiotic"] .tracking-light.is-tracking::before {
    border-color: #62ffca77;
    box-shadow: 0 0 6px #72ffcc77;
}
#out-ui[data-mode="symbiotic"] .tracking-light.is-tracking::after {
    background: #b0f4dc;
    opacity: .5;
}
#out-ui[data-mode="symbiotic"] .position-face,
#out-ui[data-mode="symbiotic"] .rotation-face {
    background: radial-gradient(circle farthest-side at center, #091a32 32%, #030713 100%);
    box-shadow: inset 0 0 0 1px #35cfff, inset 0 0 17px #116eac88;
}
.position-grid {
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: 50%;
    background:
        repeating-linear-gradient(to right, #45b6e52a 0 1px, transparent 1px 25%),
        repeating-linear-gradient(to bottom, #45b6e52a 0 1px, transparent 1px 25%);
    pointer-events: none;
}
#out-ui[data-mode="symbiotic"] .position-face::before,
#out-ui[data-mode="symbiotic"] .rotation-face::before {
    background: repeating-conic-gradient(#54d8ff99 0 .7deg, transparent .7deg 5deg);
}
#out-ui[data-mode="symbiotic"] .position-face::after,
#out-ui[data-mode="symbiotic"] .rotation-face::after {
    background: repeating-conic-gradient(#e36bff 0 1.4deg, transparent 1.4deg 30deg);
}
#out-ui[data-mode="symbiotic"] .position-cross {
    background: #56dfff;
    box-shadow: 0 0 6px #56dfff;
}
#out-ui[data-mode="symbiotic"] .axis-letter { color: #a6efff; }
#out-ui[data-mode="symbiotic"] .axis-x-left,
#out-ui[data-mode="symbiotic"] .axis-y-bottom { opacity: 0; }
#out-ui[data-mode="symbiotic"] #ui-position-dot {
    background: radial-gradient(circle at 42% 38%, #a0efff, #67ddf5 38%, #37bbe0 72%, #159ac8 100%);
    box-shadow: 0 0 0 2px #b4ffff88, 0 0 8px 2px #70efff88, 0 0 16px 4px #2bbfff44;
}
#out-ui[data-mode="symbiotic"] #ui-position-dot::before {
    inset: -50%;
    background: radial-gradient(circle, #9bffff66 0 14%, #39dfff33 35%, transparent 72%);
}
#out-ui[data-mode="symbiotic"] #ui-position-dot::after {
    background: #aceeff;
}
#out-ui[data-mode="symbiotic"] .position-hub,
#out-ui[data-mode="symbiotic"] .rotation-hub {
    background: #e9faff;
    border-color: #a874ff;
    box-shadow: 0 0 8px #ac7dff;
}
#out-ui[data-mode="symbiotic"] .camera-horizon {
    background: linear-gradient(to bottom,
        transparent 0% 49.7%,
        #5bddff 49.7% 50.3%,
        transparent 50.3% 100%);
}
.rotation-reticle {
    position: absolute;
    z-index: 1;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, transparent 0 32%, #569add55 32.3% 32.7%, transparent 33% 58%, #569add44 58.3% 58.7%, transparent 59%),
        linear-gradient(90deg, transparent 49.7%, #4acbff40 49.7% 50.3%, transparent 50.3%);
    pointer-events: none;
}
.camera-needle {
    position: absolute;
    z-index: 3;
    inset: 0;
    transform: rotate(var(--camera-roll, 0deg));
    transition: transform 35ms linear;
    pointer-events: none;
}
.camera-needle span {
    position: absolute;
    left: 50%;
    top: calc(50% - 1px);
    width: 38%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to right, #d8f6ff, #b7caff);
    box-shadow: 0 0 5px #99c9ff;
}
.camera-needle span::after {
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    width: 10px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #f5f8ff;
    box-shadow: 0 0 7px #b6caff;
    transform: translateY(-50%);
}
#out-ui[data-mode="symbiotic"] .hand-needle { z-index: 4; }
#out-ui[data-mode="symbiotic"] .rotation-hub { z-index: 5; }
#out-ui[data-mode="symbiotic"] .hand-needle span {
    background: #ff4eaa;
    box-shadow: 0 0 7px #ff4eaa;
}
#out-ui[data-mode="symbiotic"] .hand-needle span::before {
    background: #ff4eaa;
    border-color: #ffd6f1;
    box-shadow: 0 0 8px #ff4eaa;
}

#ui-input-note {
    position: absolute;
    left: 50%;
    bottom: 14px;
    max-width: 55vw;
    padding: 5px 12px;
    border-radius: 8px;
    background: #142a3bc9;
    color: #f4e8c9;
    font: 12px/1.35 system-ui, sans-serif;
    text-align: center;
    white-space: pre-line;
    transform: translateX(-50%);
}
#ui-input-note:empty { display: none; }
#out-ui[data-mode="symbiotic"] #ui-input-note {
    border: 1px solid #9872e799;
    background: #060b22d9;
    color: #c6e8ff;
    box-shadow: 0 0 14px #8144eb66;
}

/* One short interference burst accompanies either change of visual mode. */
#out-ui.is-glitching #ui-instruments {
    animation: ui-mode-jump var(--ui-transition-duration, 1000ms) steps(1, end) both;
}
#out-ui.is-glitching::before,
#out-ui.is-glitching::after {
    content: "";
    position: absolute;
    z-index: 10;
    inset: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}
#out-ui.is-glitching::before {
    background: repeating-linear-gradient(to bottom,
        transparent 0 5px,
        #51dfff46 6px 7px,
        transparent 8px 14px,
        #ff4fa82b 15px 16px,
        transparent 17px 27px);
    animation: ui-mode-scan var(--ui-transition-duration, 1000ms) steps(1, end) both;
}
#out-ui.is-glitching::after {
    background: linear-gradient(to bottom,
        transparent 0 36%,
        #4ad9ff66 39%,
        #fff5ff99 40%,
        #f44aa577 42%,
        transparent 47% 100%);
    filter: drop-shadow(0 0 12px #8c7dff);
    animation: ui-mode-flash var(--ui-transition-duration, 1000ms) steps(1, end) both;
}
@keyframes ui-mode-jump {
    0%, 7% { opacity: 1; transform: none; filter: none; clip-path: inset(0); }
    8% { opacity: .85; transform: translateX(-7px) skewX(-.5deg); filter: hue-rotate(45deg); clip-path: inset(0); }
    10%, 15% { opacity: 0; transform: translateX(9px); filter: brightness(2); clip-path: inset(34% 0 42%); }
    17% { opacity: .9; transform: translateX(-5px); filter: hue-rotate(-30deg); clip-path: inset(0); }
    21%, 37% { opacity: 1; transform: none; filter: none; clip-path: inset(0); }
    40% { opacity: .7; transform: translateX(4px); filter: brightness(1.5); clip-path: inset(0 0 8%); }
    43%, 66% { opacity: 1; transform: none; filter: none; clip-path: inset(0); }
    69% { opacity: .85; transform: translateX(-3px); filter: hue-rotate(20deg); clip-path: inset(0); }
    72%, 100% { opacity: 1; transform: none; filter: none; clip-path: inset(0); }
}
@keyframes ui-mode-scan {
    0%, 6%, 22%, 38%, 45%, 67%, 73%, 100% { opacity: 0; transform: none; }
    8%, 13% { opacity: .75; transform: translateY(13px); }
    18% { opacity: .4; transform: translateY(-8px); }
    40%, 42% { opacity: .4; transform: translateY(5px); }
    69%, 71% { opacity: .22; transform: translateY(-4px); }
}
@keyframes ui-mode-flash {
    0%, 6%, 21%, 38%, 44%, 67%, 73%, 100% { opacity: 0; transform: translateY(-35%); }
    8% { opacity: .45; transform: translateY(-35%); }
    11%, 14% { opacity: .85; transform: translateY(4%); }
    18% { opacity: .25; transform: translateY(42%); }
    40%, 42% { opacity: .35; transform: translateY(18%); }
    69%, 71% { opacity: .16; transform: translateY(-8%); }
}
@media (prefers-reduced-motion: reduce) {
    #out-ui.is-glitching #ui-instruments,
    #out-ui.is-glitching::before,
    #out-ui.is-glitching::after { animation: none; }
}

@media (max-width: 650px), (max-height: 500px) {
    #ui-instruments {
        --dial-size: clamp(90px, min(18vw, 22vh), 142px);
        --edge-x: 24px;
        --edge-y: 18px;
    }
    .instrument-levels { width: clamp(190px, 30vw, 240px); }
    .round-bezel { border-width: 7px; padding: 3px; }
    .level-pointer { width: 16px; }
}