/* ══ Hoseini Web — the opening shot ═════════════════════════════════════════
   Plain CSS + a small classic script (loader.js), both loaded before the app
   bundle, so the first paint is already the scene.

   The picture is one image used twice:
     .ld-sky    a tiny pre-blurred copy, cover, zooming outward from the
                vanishing point in two staggered copies — an endless tunnel
     .ld-astro  the sharp image, sized by the viewport height so the astronaut
                is always the same size and dead centre, radially masked so
                only he and the clouds around him are crisp
   Both are graded into the site's own night (navy → wine → amber, the hero's
   ground), and the flight runs over a wireframe floor — the world is a
   render, and the interface is the instrument reading it: tapes, a progress
   ring locked on the rider, a boot log written by the real load milestones.
   Everything that moves animates transform/opacity only. The exit's iris is
   a soft disc of the hero's own navy scaling out of the vanishing point, so
   it stays smooth even while the site behind is compiling its 3D scenes.

   Geometry, in the sharp image's own coordinates (1200 × 2100):
     astronaut body centre  (600, 1150)  → placed at 50vw, 54svh
     vanishing point        (600,  735)  → lands at 50vw, 29.3svh
   With the image 125svh tall: top = 54 − 1150/2100·125 = −14.45svh. */

:root { --ld-vy: 29.3vh; --ld-ink: #f4f7fb; --ld-dim: rgba(244, 247, 251, .58); --ld-hair: rgba(244, 247, 251, .26);
  --ld-navy: #073364; --ld-night: #030c1a; --ld-amber: #F8BF68; --ld-signal: #E23A6A;
  --ld-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
@supports (height: 1svh) { :root { --ld-vy: 29.3svh; } }

html.is-loading { overflow: hidden; }

.ld { position: fixed; inset: 0; z-index: 1000; overflow: hidden; background: #0d2244; color: var(--ld-ink);
  font-family: var(--ld-mono); -webkit-font-smoothing: antialiased; user-select: none; touch-action: none;
  contain: strict;
  /* fail-safe: if the script never runs, the scene leaves on its own */
  animation: ld-failsafe .5s ease 9s forwards; }
@keyframes ld-failsafe { to { opacity: 0; visibility: hidden; } }
.ld-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── the world: everything the camera flies through ── */
.ld-world { position: absolute; inset: 0; transform-origin: 50% var(--ld-vy); will-change: transform; isolation: isolate; }

.ld-sky { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; object-position: 50% 40%;
  transform-origin: 50% calc(var(--ld-vy) + 3%); will-change: transform, opacity; }
.ld-sky--b { opacity: 0; }

/* the grade: the pale sky multiplied into the hero's night — navy on the
   left, wine up top-right, amber low-right, a lift at the vanishing point */
.ld-world::before { content: ""; position: absolute; inset: -12%; z-index: 1; pointer-events: none; mix-blend-mode: multiply;
  background:
    radial-gradient(34vmax 26vmax at 50% calc(var(--ld-vy) + 6%), #b9c9ea 0%, rgba(185,201,234,0) 100%),
    radial-gradient(70vw 70vh at 100% 0%, #6a2c4c 0%, rgba(106,44,76,0) 70%),
    radial-gradient(70vw 70vh at 100% 100%, #b58546 0%, rgba(181,133,70,0) 72%),
    linear-gradient(115deg, #0e2b5c 0%, #2a3f73 46%, #5a4256 74%, #8a6538 100%); }

/* the floor: a wireframe plane from the horizon to the viewer, streaming
   toward us. The run is one cell longer than the plane and slides one cell
   per loop, so it never jumps */
.ld-floor { position: absolute; z-index: 2; left: 50%; top: calc(var(--ld-vy) + 1px); width: 500vw; height: 56vh; margin-left: -250vw;
  transform-origin: 50% 0; transform: perspective(60vh) rotateX(80deg); overflow: hidden; pointer-events: none;
  mix-blend-mode: screen; opacity: .85;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 80%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0%, #000 30%, #000 80%, transparent 100%); }
.ld-floor-run { position: absolute; left: 0; right: 0; top: -3vh; bottom: 0; will-change: transform;
  background:
    repeating-linear-gradient(90deg, rgba(248,191,104,.6) 0 1px, transparent 1px 3vh),
    repeating-linear-gradient(180deg, rgba(120,170,255,.5) 0 1px, transparent 1px 3vh); }

/* speed rays: two interleaved conic patterns (different periods, so the
   spacing never looks regular), hollow in the middle */
.ld-rays { position: absolute; z-index: 3; left: 50%; top: var(--ld-vy); width: 260vmax; height: 260vmax; margin: -130vmax 0 0 -130vmax;
  border-radius: 50%; opacity: 0; will-change: transform, opacity; mix-blend-mode: screen;
  background:
    repeating-conic-gradient(from 3deg, rgba(255,226,180,0) 0deg 4.3deg, rgba(255,226,180,.5) 4.55deg, rgba(255,226,180,0) 4.8deg 7deg),
    repeating-conic-gradient(from 1deg, rgba(160,195,255,0) 0deg 9.1deg, rgba(160,195,255,.4) 9.3deg, rgba(160,195,255,0) 9.6deg 11deg);
  -webkit-mask: radial-gradient(circle, transparent 7vmax, rgba(0,0,0,.25) 16vmax, #000 44vmax, transparent 70vmax);
  mask: radial-gradient(circle, transparent 7vmax, rgba(0,0,0,.25) 16vmax, #000 44vmax, transparent 70vmax); }

/* the sharp image. Sized off the height so the astronaut is the same
   size on every screen, masked to an ellipse around him, and given a
   lighter pass of the same grade so he sits in the night, not on it */
.ld-astro { position: absolute; z-index: 4; left: 50%; top: -14.45vh; height: 125vh; aspect-ratio: 1200 / 2100;
  translate: -50% 0; will-change: transform; isolation: isolate;
  -webkit-mask: radial-gradient(ellipse 33% 27% at 50% 56%, #000 58%, rgba(0,0,0,.6) 78%, transparent 100%);
  mask: radial-gradient(ellipse 33% 27% at 50% 56%, #000 58%, rgba(0,0,0,.6) 78%, transparent 100%); }
@supports (height: 1svh) { .ld-astro { top: -14.45svh; height: 125svh; } }
.ld-astro img { display: block; width: 100%; height: 100%; }
.ld-astro::after { content: ""; position: absolute; inset: 0; mix-blend-mode: multiply; pointer-events: none;
  background: linear-gradient(180deg, #8ea3cf 0%, #b3bedb 45%, #8b7f95 70%, #4d4a6c 100%); }

/* ── over the world: the sensor's own layers ── */
/* a dot matrix, fading out toward the centre */
.ld-dots { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: radial-gradient(circle, rgba(244,247,251,.22) 0 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask: radial-gradient(70% 70% at 50% 50%, transparent 30%, #000 100%);
  mask: radial-gradient(70% 70% at 50% 50%, transparent 30%, #000 100%); }
/* the scan: a thin line of light sweeping down, over and over */
.ld-scan { position: absolute; left: 0; right: 0; top: 0; height: 22vh; pointer-events: none; opacity: .5; will-change: transform;
  background: linear-gradient(180deg, rgba(120,170,255,0) 0%, rgba(120,170,255,0) 70%, rgba(120,170,255,.08) 94%, rgba(210,230,255,.6) 99.4%, rgba(210,230,255,0) 100%);
  animation: ld-scan 3.6s linear infinite; }
@keyframes ld-scan { from { transform: translateY(-24vh); } to { transform: translateY(104vh); } }

/* light at the end of the tunnel — the exit punches through it */
.ld-flash { position: absolute; left: 50%; top: var(--ld-vy); width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax;
  border-radius: 50%; opacity: 0; pointer-events: none; will-change: transform, opacity;
  background: radial-gradient(circle, rgba(255,240,215,.95) 0, rgba(248,191,104,.55) 14%, rgba(248,191,104,0) 46%); }

/* a whisper of film grain and scan, static — the same grain as the hero */
.ld-grain { position: absolute; inset: 0; pointer-events: none; opacity: .55; mix-blend-mode: overlay;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0 1px, transparent 1px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
/* the edges sink into night, so the type always reads */
.ld-vignette { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3,12,26,.55) 0%, rgba(3,12,26,0) 24%, rgba(3,12,26,0) 66%, rgba(3,12,26,.62) 100%),
    radial-gradient(120% 90% at 50% 45%, rgba(3,12,26,0) 50%, rgba(3,12,26,.5) 100%); }

/* ── the interface ── */
.ld-ui { position: absolute; inset: 0; pointer-events: none; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(3,12,26,.5);
  --pad: max(18px, env(safe-area-inset-left)); --pt: max(18px, env(safe-area-inset-top)); --pb: max(18px, env(safe-area-inset-bottom)); }
.ld-ui > * { position: absolute; }
.ld-k { color: var(--ld-dim); }
.ld-ui em { font-style: normal; color: var(--ld-ink); }

/* the frame: four fine corners */
.ld-c { width: 14px; height: 14px; border: 0 solid var(--ld-amber); opacity: .8; }
.ld-c--tl { left: var(--pad); top: var(--pt); border-width: 1px 0 0 1px; }
.ld-c--tr { right: var(--pad); top: var(--pt); border-width: 1px 1px 0 0; }
.ld-c--bl { left: var(--pad); bottom: var(--pb); border-width: 0 0 1px 1px; }
.ld-c--br { right: var(--pad); bottom: var(--pb); border-width: 0 1px 1px 0; }

.ld-tl { left: calc(var(--pad) + 26px); top: calc(var(--pt) + 4px); display: grid; gap: 6px; }
.ld-tl b { font-weight: 600; letter-spacing: .3em; display: flex; align-items: center; gap: 10px; }
.ld-logo { display: block; width: 24px; height: 18px; color: var(--ld-ink); opacity: .92;
  filter: drop-shadow(0 1px 6px rgba(3,12,26,.5)); }
.ld-rec { display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 8px; border-radius: 50%; background: var(--ld-signal);
  box-shadow: 0 0 8px var(--ld-signal); animation: ld-blink 1.1s steps(2, jump-none) infinite; }
@keyframes ld-blink { 50% { opacity: .15; } }

/* subsystem chips, top centre: each lights as its milestone really lands */
.ld-top { left: 50%; top: calc(var(--pt) + 2px); translate: -50% 0; display: flex; gap: 6px; }
.ld-chip { padding: 5px 9px 4px 20px; border: 1px solid var(--ld-hair); border-radius: 999px; font-size: 9px; letter-spacing: .2em; color: var(--ld-dim);
  position: relative; background: rgba(3,12,26,.22); transition: color .3s, border-color .3s, background-color .3s; }
.ld-chip::before { content: ""; position: absolute; left: 8px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  border: 1px solid currentColor; animation: ld-blink .8s steps(2, jump-none) infinite; }
.ld-chip.on { color: var(--ld-night); background: var(--ld-amber); border-color: var(--ld-amber); text-shadow: none; }
.ld-chip.on::before { background: currentColor; animation: none; }

.ld-tr { right: calc(var(--pad) + 26px); top: calc(var(--pt) + 4px); display: grid; grid-template-columns: auto auto auto; gap: 6px 12px; text-align: right; }
.ld-tr b { font-weight: 500; font-variant-numeric: tabular-nums; }

/* the tapes: altitude on the left, speed on the right, the scale streaming
   past a fixed read-out window */
.ld-tape { top: 50%; width: 58px; height: 40vh; margin-top: -20vh; }
.ld-tape--l { left: calc(var(--pad) + 4px); }
.ld-tape--r { right: calc(var(--pad) + 4px); }
.ld-tape::before { content: ""; position: absolute; inset: 0; overflow: hidden; border-left: 1px solid var(--ld-hair); }
.ld-tape--r::before { border-left: 0; border-right: 1px solid var(--ld-hair); }
.ld-tape-run { position: absolute; left: 0; right: 0; top: 0; bottom: 0; overflow: hidden;
  -webkit-mask: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  mask: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }
.ld-tape-run::before { content: ""; position: absolute; left: 0; right: 0; top: -40px; bottom: -40px; will-change: transform;
  background:
    repeating-linear-gradient(180deg, rgba(244,247,251,.75) 0 1px, transparent 1px 40px) 0 0 / 16px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(244,247,251,.35) 0 1px, transparent 1px 8px) 0 0 / 8px 100% no-repeat;
  animation: ld-tape 1s linear infinite; animation-play-state: var(--ld-run, running); }
.ld-tape--r .ld-tape-run::before { background-position: 100% 0, 100% 0; animation-direction: reverse; }
@keyframes ld-tape { from { transform: translateY(0); } to { transform: translateY(40px); } }
.ld-tape b { position: absolute; top: 50%; translate: 0 -50%; padding: 4px 6px 3px; font-weight: 500; font-variant-numeric: tabular-nums;
  border: 1px solid var(--ld-amber); color: var(--ld-amber); background: rgba(3,12,26,.55); letter-spacing: .08em; }
.ld-tape--l b { left: 12px; }
.ld-tape--r b { right: 12px; }
.ld-tape .ld-k { position: absolute; bottom: -18px; font-size: 9px; white-space: nowrap; }
.ld-tape--r .ld-k { right: 0; }

/* the ring: locked on the rider. Outer ticks, a slow counter-turning pair of
   dashed tracks, and the one that matters — load, drawn in amber */
.ld-hud { left: 50%; top: 56vh; width: 78vh; height: 78vh; margin: -39vh 0 0 -39vh; overflow: visible; will-change: transform, opacity; }
@supports (height: 1svh) { .ld-hud { top: 56svh; width: 78svh; height: 78svh; margin: -39svh 0 0 -39svh; } }
.ld-hud * { fill: none; vector-effect: non-scaling-stroke; }
.ld-hud-tick { stroke: rgba(244,247,251,.35); stroke-width: 6; stroke-dasharray: .4 4.68; opacity: .6; }
.ld-hud-dash { stroke: rgba(244,247,251,.28); stroke-width: 1; stroke-dasharray: 2 6; }
.ld-hud-arc { stroke: rgba(244,247,251,.55); stroke-width: 1; }
.ld-hud-track { stroke: rgba(244,247,251,.14); stroke-width: 2; }
.ld-hud-prog { vector-effect: none; stroke: var(--ld-amber); stroke-width: .6; stroke-dasharray: 0 100; transform: rotate(-90deg);
  filter: drop-shadow(0 0 4px rgba(248,191,104,.7)); }
.ld-hud-dot { fill: var(--ld-amber); }
.ld-hud-arc2 { stroke: rgba(120,170,255,.7); stroke-width: 1.5; }
.ld-hud-spin { animation: ld-spin 38s linear infinite; }
.ld-hud-spin2 { animation: ld-spin 14s linear infinite reverse; }
@keyframes ld-spin { to { transform: rotate(360deg); } }

/* the reticle: four brackets around the rider, closing in as we load */
.ld-ret { left: 50%; top: 30vh; width: 34vh; height: 54vh; translate: -50% 0; will-change: transform, opacity; }
@supports (height: 1svh) { .ld-ret { top: 30svh; width: 34svh; height: 54svh; } }
.ld-ret i { position: absolute; width: 16px; height: 16px; border: 0 solid rgba(255,255,255,.8); }
.ld-ret i:nth-child(1) { left: 0; top: 0; border-width: 1px 0 0 1px; }
.ld-ret i:nth-child(2) { right: 0; top: 0; border-width: 1px 1px 0 0; }
.ld-ret i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1px 1px; }
.ld-ret i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.ld-ret span { position: absolute; left: calc(100% + 14px); top: 0; white-space: nowrap; font-size: 9.5px; line-height: 1.7; color: var(--ld-dim);
  padding-left: 10px; border-left: 1px solid var(--ld-hair); }
.ld-ret span b { color: var(--ld-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.ld-ret span .ld-lock { color: var(--ld-amber); }
.ld-ret span .ld-lock.on { color: #7ee2b8; }
/* the vanishing point, marked */
.ld-vp { left: 50%; top: var(--ld-vy); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
.ld-vp::before, .ld-vp::after { content: ""; position: absolute; background: var(--ld-amber); }
.ld-vp::before { left: 4px; top: 0; width: 1px; height: 9px; }
.ld-vp::after { left: 0; top: 4px; width: 9px; height: 1px; }

/* bottom left: the boot log over the status word */
.ld-bl { left: calc(var(--pad) + 26px); bottom: calc(var(--pb) + 4px); display: grid; gap: 7px; }
.ld-bl > b { font-weight: 600; letter-spacing: .24em; min-height: 1.2em; color: var(--ld-amber); }
.ld-log { list-style: none; display: grid; gap: 4px; margin-bottom: 14px; font-size: 9.5px; letter-spacing: .08em; text-transform: none; }
.ld-log li { display: grid; grid-template-columns: 6.2em 4.4em 15em 2.4em; color: var(--ld-dim); animation: ld-swap .35s cubic-bezier(.2,.7,.2,1) both; }
.ld-log li b { font-weight: 500; text-align: right; color: var(--ld-dim); }
.ld-log li.ok b { color: #7ee2b8; }
.ld-log li .ld-key { color: var(--ld-ink); text-transform: uppercase; letter-spacing: .14em; }

.ld-br { right: calc(var(--pad) + 26px); bottom: calc(var(--pb) - 2px); display: grid; justify-items: end; gap: 4px; }
.ld-num { font-size: clamp(54px, 9vw, 112px); line-height: .9; font-weight: 300; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
  text-transform: none; }
.ld-num small { font-size: .26em; letter-spacing: .1em; margin-left: .2em; vertical-align: top; color: var(--ld-amber); }
/* the segmented bar under the number */
.ld-seg { display: flex; gap: 3px; margin-bottom: 4px; }
.ld-seg i { width: 7px; height: 4px; background: rgba(244,247,251,.16); transition: background-color .2s, box-shadow .2s; }
.ld-seg i.on { background: var(--ld-amber); box-shadow: 0 0 6px rgba(248,191,104,.6); }

/* the ruler: ticks that light up with progress */
.ld-ticks { left: 50%; bottom: calc(var(--pb) + 8px); width: min(36vw, 420px); translate: -50% 0; height: 10px;
  display: flex; justify-content: space-between; align-items: flex-end; }
.ld-ticks i { width: 1px; height: 5px; background: rgba(255,255,255,.3); transition: background-color .25s, height .25s; }
.ld-ticks i:nth-child(4n + 1) { height: 9px; }
.ld-ticks i.on { background: var(--ld-amber); }

/* the status word changes with a short lift */
.ld-swap { animation: ld-swap .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes ld-swap { from { opacity: 0; transform: translateY(6px); } }

/* ── arrival: the scene and the interface come up ── */
.ld.is-in .ld-ui > * { animation: ld-ui-in .9s cubic-bezier(.2,.7,.2,1) both; }
.ld.is-in .ld-ui > :nth-child(n+5) { animation-delay: .18s; }
.ld.is-in .ld-ret { animation: ld-ret-in 1.2s cubic-bezier(.2,.7,.2,1) .1s both; }
.ld.is-in .ld-hud { animation: ld-hud-in 1.4s cubic-bezier(.2,.7,.2,1) .05s both; }
@keyframes ld-ui-in { from { opacity: 0; } }
@keyframes ld-ret-in { from { opacity: 0; transform: scale(1.25); } }
@keyframes ld-hud-in { from { opacity: 0; transform: scale(.82) rotate(-40deg); } }

/* ── the exit: the iris — night opening at the vanishing point, in the
   hero's ground colour, so when it fills the screen the hero is already there ── */
.ld-iris { position: absolute; left: 50%; top: var(--ld-vy); width: 100vmax; height: 100vmax; margin: -50vmax 0 0 -50vmax;
  border-radius: 50%; transform: scale(0); pointer-events: none; will-change: transform;
  background: radial-gradient(circle, #030c1a 0 52%, rgba(3,12,26,.85) 60%, rgba(3,12,26,0) 71%); }

/* ── skip: a chip like the subsystem ones, bottom centre above the ruler.
   It only fades in if the load takes a moment (loader.js) ── */
.ld-skip { position: absolute; left: 50%; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 34px); translate: -50% 0; z-index: 5;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 20px;
  font: 600 10px/1 var(--ld-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ld-ink);
  background: rgba(3,12,26,.38); border: 1px solid var(--ld-hair); border-radius: 999px; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity .4s ease, border-color .25s ease, background-color .25s ease; }
.ld-skip.on { opacity: 1; pointer-events: auto; }
.ld-skip i { width: 7px; height: 7px; border: solid var(--ld-amber); border-width: 1.5px 1.5px 0 0; rotate: 45deg; margin-left: -2px; }
.ld-skip:hover { border-color: var(--ld-amber); background: rgba(3,12,26,.55); }
.ld-skip:focus-visible { outline: 2px solid var(--ld-amber); outline-offset: 3px; }
.ld.is-out .ld-skip { opacity: 0; }

/* ── smaller screens: fewer instruments, same idea ── */
@media (max-width: 900px) {
  .ld-log { display: none; }
  .ld-tape { display: none; }
}
@media (max-width: 640px) {
  .ld-ui { font-size: 9.5px; letter-spacing: .12em; }
  .ld-tr .ld-vel { display: none; }
  .ld-ticks, .ld-seg { display: none; }
  .ld-ret span { display: none; }
  .ld-top { top: auto; bottom: calc(var(--pb) + 92px); left: calc(var(--pad) + 26px); translate: none; }
  .ld-tl .ld-k:last-child { display: none; }
  .ld-hud { width: min(78vh, 118vw); height: min(78vh, 118vw); margin: calc(min(78vh, 118vw) / -2) 0 0 calc(min(78vh, 118vw) / -2); }
  .ld-num { font-size: 58px; }
  /* the bottom belongs to the read-outs here: skip sits top right, under the
     altitude, where a skip lives on a phone */
  .ld-skip { left: auto; right: calc(max(18px, env(safe-area-inset-right)) + 8px); bottom: auto;
    top: calc(max(18px, env(safe-area-inset-top)) + 40px); translate: none; padding: 0 14px 0 16px; font-size: 9.5px; }
}
@media (max-width: 360px) { .ld-num { font-size: 44px; } .ld-chip { padding-right: 6px; letter-spacing: .12em; } }
@media (max-height: 460px) { .ld-ret, .ld-hud, .ld-tape { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .ld.is-in .ld-ui > *, .ld.is-in .ld-ret, .ld.is-in .ld-hud { animation-duration: .01s; animation-delay: 0s; }
  .ld-scan, .ld-hud-spin, .ld-hud-spin2, .ld-tape-run::before, .ld-rec, .ld-chip::before { animation: none; }
  .ld-scan { opacity: 0; }
}