/* Small schematic overlays that make X-ray mode feel like a look-through view. */
.xr-active .devices-stage { background: #06151e; }
.xr-active .devices-stage > img {
  filter: grayscale(1) invert(1) sepia(1) saturate(2.4) hue-rotate(130deg) contrast(1.5);
  mix-blend-mode: screen; opacity: .65;
}
.xr-active .survey-plan { background: #06151e; border-color: #70c7d5; }
.xr-active .survey-plan > img {
  filter: grayscale(1) invert(1) sepia(1) saturate(2) hue-rotate(135deg) contrast(1.3);
  mix-blend-mode: screen; opacity: .85;
}
.xr-active .survey-plan > .survey-heat { mix-blend-mode: screen; opacity: .38; }
.xr-active .survey-plan > .walker { z-index: 4; background: #eaffff; border-color: #72e5ef; box-shadow: 0 0 0 6px #72e5ef33, 0 0 16px #72e5ef; }
.xr-active .kuma-hero-art .kuma-watch-layer {
  filter: grayscale(1) invert(1) sepia(1) saturate(2) hue-rotate(135deg);
  mix-blend-mode: screen; opacity: .45;
}
.xr-active .kuma-hero-art .kuma-paint { opacity: .07; }
.xr-active .kuma-phones .phone { border: 1px solid #8be5ec66; box-shadow: 0 0 0 7px #72e5ef08, 0 16px 40px #0004; }
.xr-active .kuma-phones .phone > img { filter: grayscale(1) invert(1) sepia(1) saturate(1.3) hue-rotate(135deg); opacity: .7; }
.xr-active .vl-ad > img { filter: grayscale(1) invert(1) sepia(1) saturate(2) hue-rotate(135deg); mix-blend-mode: screen; opacity: .5; }
.xr-active .hero h1 { color: #dffcff; text-shadow: 0 0 30px #72e5ef20; }
.xr-active .hero-id { position: relative; }
.xr-active .hero-id::before {
  content: ''; position: absolute; inset: -22px -18px; z-index: -1;
  border: 1px solid #72e5ef24; border-radius: 3px;
  transform: translate(9px, 10px); pointer-events: none;
}
.xr-active .hero-id::after {
  content: ''; position: absolute; left: -18px; right: -18px; top: -22px; height: 10px;
  border: 1px solid #b9f7ff88; border-bottom: 0; pointer-events: none;
}
.xr-active .xr-cutaway {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  color: #b9f7ff;
  opacity: .9;
}

.xr-active .xr-cutaway :is(.xr-viz-glass, .xr-viz-watch, .xr-viz-flowbox) {
  fill: #62e8f51c;
  stroke: #c9fbff;
  stroke-width: 2.2;
  vector-effect: non-scaling-stroke;
}
.xr-active .xr-cutaway .xr-viz-glass path,
.xr-active .xr-cutaway .xr-viz-watch path,
.xr-active .xr-cutaway .xr-viz-flowbox path {
  stroke-linecap: round;
  stroke-linejoin: round;
}
.xr-active .xr-cutaway .xr-viz-dash {
  fill: none;
  stroke: #79dce9;
  stroke-width: 1.4;
  stroke-dasharray: 5 7;
  opacity: .8;
}
.xr-active .xr-cutaway .xr-viz-dots { stroke-dasharray: 2 7; }
.xr-active .xr-cutaway .xr-viz-fine {
  fill: none;
  stroke: #a8f3fb;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .78;
}
.xr-active .xr-cutaway .xr-viz-flow {
  fill: none;
  stroke: #ecffff;
  stroke-width: 2;
  stroke-dasharray: 2 8;
  stroke-linecap: round;
  opacity: .9;
}
.xr-active .xr-cutaway .xr-viz-labels {
  fill: #d5fbff;
  stroke: none;
  font: 600 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 2px;
}
.xr-active .xr-cutaway .xr-viz-labels path {
  fill: none;
  stroke: #9debf3;
  stroke-width: 1;
  opacity: .75;
}

.xr-active .devices-stage,
.xr-active .survey-plan,
.xr-active .kuma-hero-art,
.xr-active .vl-browser { position: relative; }
.xr-active .survey-plan > .xr-viz-survey { z-index: 3; }
.xr-active .survey-plan::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  opacity: .11;
  background: repeating-linear-gradient(to bottom, transparent 0 7px, #9bf3fb 8px, transparent 9px 15px);
}
.xr-active .survey-plan > .survey-heat { z-index: 1; }
.xr-active .kuma-hero-art > .xr-viz-kuma { z-index: 4; opacity: .64; }
.xr-active .vl-browser { overflow: hidden; }
.xr-active .vl-browser > img { opacity: .27; }
.xr-active .vl-browser > .xr-viz-verilock { z-index: 3; opacity: .92; }
.xr-active .vl-browser > .vl-browser-bar { position: relative; z-index: 4; }
.xr-active .vl-browser > .xr-viz-verilock .xr-viz-flowbox {
  fill: #06131dcc;
  stroke-width: 1.4;
}
.xr-active .vl-browser > .xr-viz-verilock .xr-viz-labels { font-size: 12px; letter-spacing: 1.5px; }

@media (max-width: 600px) {
  .xr-active .xr-cutaway .xr-viz-labels { display: none; }
  .xr-active .xr-cutaway { opacity: .78; }
  .xr-active .kuma-hero-art > .xr-viz-kuma { opacity: .48; }
}

/* The ad castle swaps to a see-through render of the same scene. */
@media screen {
  .xr-active .vl-ad-keep > img:not(.xr-only) { display: none; }
}
.xr-active .vl-ad-keep > img.xr-only { filter: none; mix-blend-mode: normal; opacity: 1; background: #000; }

/* Station 03 swaps to a see-through render with the mapping schematic drawn live on top. */
@media screen {
  .xr-active .devices-stage > img:not(.xr-only) { display: none; }
}
.xr-active .devices-stage > img.xr-only { filter: none; mix-blend-mode: normal; opacity: 1; background: #000; }
.xr-active .devices-stage > :is(.screen-ui, .devices-pulse) { visibility: hidden; }
.xr-active .devices-stage > .xr-sig {
  position: absolute; inset: 0; z-index: 6;
  width: 100%; height: 100%;
  pointer-events: none; overflow: visible;
  fill: none; stroke-linecap: round; stroke-linejoin: round;
}
.xr-sig { --sig-a: #72e5ef; --sig-b: #c3b2ff; }
.xr-sig :is(path, circle, rect) { vector-effect: non-scaling-stroke; }

/* Path A: equipment, data line, board and screen. */
.xr-sig-art { stroke: #c9fbff; stroke-width: 1.6; fill: #62e8f50f; }
.xr-sig-art .xr-sig-trace { fill: none; stroke: #9feaff; stroke-width: 1.4; }
.xr-sig-art .xr-sig-port { fill: #c9fbff; }
.xr-sig-glow { stroke: #7fd4ff; stroke-width: 7; opacity: .3; filter: blur(4px); }
.xr-sig-core { stroke: #f2fdff; stroke-width: 1.6; opacity: .85; filter: drop-shadow(0 0 4px #9feaff) drop-shadow(0 0 10px #4fc8f5); }
.xr-sig-arcs { stroke: #b4f1ff; stroke-width: 1.4; }
.xr-sig-arcs path { opacity: calc(.75 - var(--i) * .2); }
.xr-sig-packets path { stroke: #dffaff; stroke-width: 3; opacity: .45; }
.xr-sig-packets circle { fill: #ffffff; filter: drop-shadow(0 0 5px #9feaff); }
.xr-sig-node { fill: #ffffff; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 14px #6fd6ff); transition: transform .3s ease; }
.xr-sig-node.xr-map-current { transform: scale(1.7); }
.xr-sig-grid { stroke: #72e5ef; stroke-width: 1; opacity: .22; }
.xr-sig-drive { stroke: #9feaff; stroke-width: 1.4; stroke-dasharray: 3 7; opacity: .55; }
.xr-sig-read { stroke: none; opacity: .8; }
.xr-sig-read[data-level=good] { fill: #87e8a0; }
.xr-sig-read[data-level=fair] { fill: #f2c66d; }
.xr-sig-read[data-level=poor] { fill: #ff8f7b; }
.xr-sig-bars { stroke: #9feaff; stroke-width: 10; stroke-linecap: butt; opacity: .5; }
.xr-sig-screen { transition: opacity .3s ease; opacity: .75; }
.xr-sig-screen.xr-map-current { opacity: 1; }

/* Path B, in violet: the phones record, then a dashed line through the PC software and server to the screen. */
.xr-sig-ghost { stroke: var(--sig-b); stroke-width: 1.3; stroke-dasharray: 8 10; opacity: .5; }
.xr-sig-rec circle { stroke: var(--sig-b); stroke-width: 1.2; opacity: .3; transform-box: fill-box; transform-origin: center; transform: scale(calc(.3 + var(--i) * .22)); }
.xr-sig-recdot { fill: #e3dcff; filter: drop-shadow(0 0 6px #a898ff); }
.xr-sig-kotlin { transition: opacity .3s ease; opacity: .85; }
.xr-sig-kotlin.xr-map-current { opacity: 1; }
.xr-sig-kotlin.xr-map-current .xr-sig-ghost { opacity: .9; }
.xr-sig-b-route { stroke: var(--sig-b); stroke-width: 1.6; stroke-dasharray: 6 8; opacity: .55; transition: opacity .3s ease; }
.xr-sig-b-node { fill: #e3dcff; filter: drop-shadow(0 0 6px #a898ff); opacity: .7; }
.xr-sig-b.xr-map-current .xr-sig-b-route { opacity: 1; }

/* Numbered stops that match the lesson below. */
.xr-sig-label { --c: var(--sig-a); }
.xr-sig-label:is([data-map-node=kotlin], [data-map-node=pc], [data-map-node=server]) { --c: var(--sig-b); }
.xr-sig-lead { stroke: var(--c); stroke-width: 1.3; stroke-dasharray: 3 5; opacity: .85; filter: drop-shadow(0 0 1.5px #000) drop-shadow(0 0 3px #000); }
.xr-sig-plate { fill: #06131de6; stroke: color-mix(in srgb, var(--c) 45%, transparent); stroke-width: 1; transition: stroke .3s ease; }
.xr-sig-badge { fill: #06131d; stroke: var(--c); stroke-width: 1.6; transition: fill .3s ease; }
.xr-sig-badge-n { fill: #e6f7fb; text-anchor: middle; font: 600 22px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.xr-sig-title { fill: #e6f7fb; font: 600 18px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 1.5px; }
.xr-sig-sub { fill: #9bb8c4; font: 500 15px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .5px; }
.xr-sig-label.xr-map-current .xr-sig-plate { stroke: var(--c); }
.xr-sig-label.xr-map-current .xr-sig-badge { fill: var(--c); }
.xr-sig-label.xr-map-current .xr-sig-badge-n { fill: #06131d; }
.xr-sig-label.xr-map-current .xr-sig-lead { opacity: 1; stroke-dasharray: none; }

/* On a phone the render is too small for labels, so only larger numbered badges remain. */
@media (max-width: 600px) {
  .xr-sig-label :is(.xr-sig-plate, .xr-sig-title, .xr-sig-sub) { display: none; }
  .xr-sig-badge { r: 46px; stroke-width: 1.4; }
  .xr-sig-badge-n { font-size: 50px; transform: translateY(10px); }
  .xr-sig-lead { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .xr-sig-rec circle { animation: xr-sig-ring 2.6s ease-out infinite; animation-delay: calc(var(--i) * -.87s); }
  .xr-sig-arcs path { animation: xr-sig-blink 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * .3s); }
  .xr-sig-recdot { animation: xr-sig-blink 1.6s ease-in-out infinite; }
  .xr-sig-b-route { animation: xr-sig-flow 1.4s linear infinite; }
}
@keyframes xr-sig-flow { to { stroke-dashoffset: -28; } }
@keyframes xr-sig-ring { from { transform: scale(.15); opacity: .7; } to { transform: scale(1); opacity: 0; } }
@keyframes xr-sig-blink { 50% { opacity: .35; } }

.xr-active .devices-caption-normal, .xr-active .survey-caption-normal { display: none; }

/* The bridge swaps to the same tower site at night. */
@media screen {
  .xr-active .bridge-media > img:not(.xr-only) { display: none; }
}
.xr-active .bridge-media > img.xr-only { filter: none; opacity: 1; }

/* Faint satellites and rare meteors, contained above the mountain skyline. */
.xr-bridge-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  clip-path: inset(0 0 57% 27%);
  pointer-events: none;
  fill: #dcefff;
}
.xr-sky-satellite, .xr-sky-meteor { opacity: 0; }
.xr-sky-meteor path {
  fill: none;
  stroke: url(#xr-bridge-meteor-tail);
  stroke-width: .65;
  stroke-linecap: round;
}
@media screen and (prefers-reduced-motion: no-preference) {
  .xr-sky-satellite {
    animation: xr-sky-orbit 42s linear infinite;
    animation-delay: -13s;
    animation-play-state: paused;
  }
  .xr-sky-satellite-two {
    animation-name: xr-sky-orbit-back;
    animation-duration: 56s;
    animation-delay: -36s;
  }
  .xr-sky-meteor {
    animation: xr-sky-streak 21s linear infinite;
    animation-delay: 6s;
    animation-play-state: paused;
  }
  .xr-sky-meteor-two { animation-duration: 32s; animation-delay: 13s; }
  .xr-active .xr-sky-running :is(.xr-sky-satellite, .xr-sky-meteor) {
    animation-play-state: running;
  }
}
@keyframes xr-sky-orbit {
  0% { transform: translate(0, 0); opacity: 0; }
  12%, 80% { opacity: .54; }
  100% { transform: translate(480px, 48px); opacity: 0; }
}
@keyframes xr-sky-orbit-back {
  0% { transform: translate(0, 0); opacity: 0; }
  12%, 80% { opacity: .42; }
  100% { transform: translate(-500px, -42px); opacity: 0; }
}
@keyframes xr-sky-streak {
  0% { transform: translateX(0); opacity: 0; }
  .4% { opacity: .66; }
  2.5% { transform: translateX(95px); opacity: 0; }
  100% { transform: translateX(95px); opacity: 0; }
}