/* Miruro loader — concentric arcs turning around a single-stroke geometric "M".
   Markup: resources/themes/miruro/views/miruro/loader.blade.php (size sm|md|lg, label, class, decorative).
   Preview: public/theme/miruro/design-loader.html. Loaded on every miruro page right after miruro.css.

   Colour  --mr-loader-c (default: the theme primary, #BAA7FF iris dark / #2F265F light).
           .mr-loader--lime = the owner's #A6FF47; any element can set --mr-loader-c for its subtree.
   Size    .mr-loader--sm 28px · --md 64px · --lg 160px (or set --mr-ld-s); every part is em-based,
           with px floors on stroke widths so it stays crisp when small.
   Extras  .mr-loader--backdrop = the round radial backdrop of the original snippet.
   Motion  continuous animation is transform / opacity only; the M's one-off draw-in uses
           stroke-dashoffset. prefers-reduced-motion: static arcs and a slow fade.

   Part 2 restyles the placeholders main.js / theme JS already render (.loading, .hs-spin, .hs-beads,
   .hs-film.mini, .hs-cst-load, .hs-spark, the player intro #hs-pi ...) with CSS only — the "lite" form is
   two pseudo-elements: ::before = rotating double arc, ::after = the M.
   Part 3 is the CSS-only first-paint overlay (html::before / html::after). */

:root {
    /* the M as a mask (stroke drawn in black, coloured by background: currentColor) */
    --mr-ld-msvg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 80V27L50 55L82 27V80' fill='none' stroke='%23000' stroke-width='12' stroke-linecap='square'/%3E%3C/svg%3E");
    --mr-ld-glow-a: 60%;
}
html[data-theme="light"] { --mr-ld-glow-a: 10%; }

/* ======================================================================================
   1. Component  <span class="mr-loader mr-loader--md">…</span>
   ====================================================================================== */
.mr-loader {
    --mr-ld-s: 64px;
    --mr-ld-gl: color-mix(in srgb, currentColor var(--mr-ld-glow-a), transparent);
    position: relative; display: inline-block; flex: none; box-sizing: border-box;
    width: 1em; height: 1em; font-size: var(--mr-ld-s); line-height: 1; vertical-align: middle;
    color: var(--mr-loader-c, var(--mr-primary, #BAA7FF));
    pointer-events: none;
}
.mr-loader--sm { --mr-ld-s: 28px; }
.mr-loader--md { --mr-ld-s: 64px; }
.mr-loader--lg { --mr-ld-s: 160px; }
.mr-loader--lime { --mr-loader-c: #A6FF47; --mr-ld-glow-a: 60%; --mr-ld-base: #0A0D08; }

.mr-loader > * { position: absolute; box-sizing: border-box; }
.mr-loader-sr { width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* faint full track under the outer arc + a soft core glow that breathes with the M */
.mr-loader::before, .mr-loader::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.mr-loader::before { inset: 4%; border: max(1px, 0.009em) solid color-mix(in srgb, currentColor 13%, transparent); }
.mr-loader::after {
    inset: 22%;
    background: radial-gradient(closest-side, color-mix(in srgb, currentColor 20%, transparent), transparent);
    opacity: 0.8; animation: mr-ld-breathe 2.4s ease-in-out 1s infinite;
}

/* arcs: a conic fade (tail -> bright head) cut to a thin band by a radial mask */
.mr-loader-ring {
    --w: max(1.5px, 0.022em);
    inset: 4%; border-radius: 50%;
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--w) - 0.6px), #000 calc(100% - var(--w) + 0.4px) calc(100% - 0.5px), #0000 100%);
            mask: radial-gradient(farthest-side, #0000 calc(100% - var(--w) - 0.6px), #000 calc(100% - var(--w) + 0.4px) calc(100% - 0.5px), #0000 100%);
    will-change: transform;
}
/* outer: long comet, round head at 3 o'clock, soft glow, eased turn */
.mr-loader-a {
    background:
        radial-gradient(circle at calc(100% - var(--w) / 2) 50%, currentColor calc(var(--w) / 2 - 0.3px), #0000 calc(var(--w) / 2 + 0.4px)),
        conic-gradient(from -0.17turn, #0000, color-mix(in srgb, currentColor 35%, transparent) 0.2turn, currentColor 0.42turn, #0000 0);
    filter: drop-shadow(0 0 0.035em var(--mr-ld-gl));
    animation: mr-ld-spin 1.7s cubic-bezier(0.55, 0.15, 0.4, 0.85) infinite;
}
/* middle: short reverse arc at 55% */
.mr-loader-b {
    --w: max(1px, 0.012em);
    inset: 12%; opacity: 0.55;
    background: conic-gradient(from 0.55turn, currentColor, #0000 0.3turn);
    animation: mr-ld-spin 3s linear infinite reverse;
}
/* inner: bottom comet at 70% */
.mr-loader-c {
    --w: max(1.5px, 0.02em);
    inset: 17%; opacity: 0.7;
    background: conic-gradient(from 0.3turn, #0000, currentColor 0.34turn, #0000 0);
    animation: mr-ld-spin 2.7s cubic-bezier(0.45, 0.05, 0.55, 0.95) -0.9s infinite;
}
/* a faint dot orbiting between the outer and middle arcs */
.mr-loader-o { inset: 8%; animation: mr-ld-spin 4.8s linear infinite; will-change: transform; }
.mr-loader-o::before {
    content: ""; position: absolute; left: 50%; top: 0; width: max(2px, 0.026em); height: max(2px, 0.026em);
    margin: calc(max(2px, 0.026em) / -2) 0 0 calc(max(2px, 0.026em) / -2); border-radius: 50%;
    background: currentColor; box-shadow: 0 0 0.05em 0.01em var(--mr-ld-gl); opacity: 0.75;
}
/* the M: draws itself in once, then breathes */
.mr-loader-m {
    left: 31%; top: 31%; width: 38%; height: 38%; overflow: visible;
    fill: none; stroke: currentColor; stroke-width: 11; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-linecap: square;
    filter: drop-shadow(0 0 0.03em var(--mr-ld-gl));
    animation: mr-ld-pulse 2.4s ease-in-out 1s infinite;
}
.mr-loader-m path { stroke-dasharray: 100 120; stroke-dashoffset: 100; animation: mr-ld-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.08s forwards; }

/* small: outer arc + track + a bolder M; the inner arcs and orbit would crowd the M at 28px */
.mr-loader--sm .mr-loader-b, .mr-loader--sm .mr-loader-c, .mr-loader--sm .mr-loader-o { display: none; }
.mr-loader--sm .mr-loader-m { left: 28%; top: 28%; width: 44%; height: 44%; stroke-width: 12; }
.mr-loader--sm::after { display: none; }
/* large: hairlines stay hairlines */
.mr-loader--lg .mr-loader-a { --w: 2.5px; }
.mr-loader--lg .mr-loader-b { --w: 1.5px; }
.mr-loader--lg .mr-loader-c { --w: 2px; }

/* round radial backdrop, like the original snippet */
.mr-loader--backdrop {
    border-radius: 50%;
    background: radial-gradient(circle at 50% 40%, color-mix(in srgb, currentColor 16%, var(--mr-ld-base, var(--mr-card, #1A191B))) 0%, var(--mr-ld-base, var(--mr-card, #1A191B)) 72%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 9%, transparent), 0 0.08em 0.25em -0.08em rgba(0, 0, 0, 0.45);
}

@keyframes mr-ld-spin { to { transform: rotate(360deg); } }
@keyframes mr-ld-draw { to { stroke-dashoffset: 0; } }
@keyframes mr-ld-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.72; transform: scale(0.94); } }
@keyframes mr-ld-breathe { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.9); } }
@keyframes mr-ld-pop { from { opacity: 0; transform: scale(0.6); } }
@keyframes mr-ld-fade { from { opacity: 1; } to { opacity: 0.45; } }

/* ======================================================================================
   2. Existing placeholders, restyled (CSS only — no JS/markup changes)
   "Lite" loader on a host: ::before = double arc (outer comet + inner comet, one rotating layer),
   ::after = the M. Both are 1em boxes centred on the host; --mr-ld-s sets the size.
   ====================================================================================== */
.mr :is(.loading, .hs-spin, .hs-eps-status .hs-film.mini, .hs-cst-load, .mrs-wait .mrs-sub)::before,
.mr :is(.loading, .hs-spin, .hs-eps-status .hs-film.mini, .hs-cst-load, .mrs-wait .mrs-sub)::after {
    content: ""; position: absolute; left: var(--mr-ld-x, 50%); top: 50%; z-index: 5; box-sizing: border-box;
    width: 1em; height: 1em; margin: -0.5em 0 0 -0.5em; padding: 0; border: 0; border-radius: 50%;
    font-size: var(--mr-ld-s, 64px); line-height: 1; clip-path: none;
    color: var(--mr-loader-c, var(--mr-primary, #BAA7FF));
    pointer-events: none;
}
.mr :is(.loading, .hs-spin, .hs-eps-status .hs-film.mini, .hs-cst-load, .mrs-wait .mrs-sub)::before {
    --w: max(1.5px, 0.026em); --w2: max(1.5px, 0.022em);
    background:
        radial-gradient(closest-side, currentColor 74%, #0000 74.5%) center / 100% 100% no-repeat,
        conic-gradient(from -0.17turn, color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, currentColor 40%, transparent) 0.2turn, currentColor 0.42turn, color-mix(in srgb, currentColor 12%, transparent) 0);
    -webkit-mask:
        radial-gradient(farthest-side, #0000 calc(92% - var(--w) - 0.6px), #000 calc(92% - var(--w) + 0.4px) calc(92% - 0.5px), #0000 92%),
        conic-gradient(from 0.33turn, #0000, rgba(0, 0, 0, var(--mr-ld-in, 0.7)) 0.34turn, #0000 0),
        radial-gradient(farthest-side, #0000 calc(64% - var(--w2) - 0.6px), #000 calc(64% - var(--w2) + 0.4px) calc(64% - 0.5px), #0000 64%);
    -webkit-mask-composite: source-over, source-in;
    mask:
        radial-gradient(farthest-side, #0000 calc(92% - var(--w) - 0.6px), #000 calc(92% - var(--w) + 0.4px) calc(92% - 0.5px), #0000 92%),
        conic-gradient(from 0.33turn, #0000, rgba(0, 0, 0, var(--mr-ld-in, 0.7)) 0.34turn, #0000 0),
        radial-gradient(farthest-side, #0000 calc(64% - var(--w2) - 0.6px), #000 calc(64% - var(--w2) + 0.4px) calc(64% - 0.5px), #0000 64%);
    mask-composite: add, intersect;
    animation: mr-ld-spin 1.5s cubic-bezier(0.55, 0.15, 0.4, 0.85) infinite;
}
.mr :is(.loading, .hs-spin, .hs-eps-status .hs-film.mini, .hs-cst-load, .mrs-wait .mrs-sub)::after {
    background: currentColor;
    -webkit-mask: var(--mr-ld-msvg) center / var(--mr-ld-mz, 40%) var(--mr-ld-mz, 40%) no-repeat;
            mask: var(--mr-ld-msvg) center / var(--mr-ld-mz, 40%) var(--mr-ld-mz, 40%) no-repeat;
    filter: drop-shadow(0 0 0.03em color-mix(in srgb, currentColor var(--mr-ld-glow-a), transparent));
    animation: mr-ld-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.25) both, mr-ld-pulse 2.4s ease-in-out 0.5s infinite;
}

/* 28px and below: no inner arc, bigger M */
.mr :is(.hs-spin, .hs-eps-status .hs-film.mini, .hs-cst-load, .mrs-wait .mrs-sub, .block_area-comment .loading-absolute .loading) { --mr-ld-in: 0; --mr-ld-mz: 46%; }
/* main.js containers ($.fn.loading, #player, AjaxForm): md */
.mr .loading { --mr-ld-s: 64px; }
/* theme placeholders (.hs-loading > .hs-spin) */
.mr .hs-spin { --mr-ld-s: 28px; position: relative; display: inline-block; width: 1em; height: 1em; font-size: 28px; vertical-align: middle; }
.mr .hs-spin.sm, .mr .hs-loading.sm .hs-spin { --mr-ld-s: 20px; font-size: 20px; }
.mr .hs-spin.lg { --mr-ld-s: 64px; font-size: 64px; }
/* comment composer overlay (comments.js .loading-absolute > .loading): sm, drop the old arc mask */
.mr .block_area-comment .loading-absolute .loading {
    --mr-ld-s: 28px; width: 28px; height: 28px; background: none; -webkit-mask: none; mask: none; animation: none;
}
/* the player is dark in both modes: keep the dark-mode primary there */
.mr #player-wrapper { --mr-loader-c: #BAA7FF; --mr-ld-glow-a: 60%; }

/* episode list head ("Loading… / Stills…" while main.js refreshes the list): small inline loader */
.mr .hs-eps-status .hs-film.mini {
    --mr-ld-s: 20px; position: relative; width: 20px; height: 20px;
    background: none; -webkit-mask: none; mask: none; animation: none; border-radius: 0;
}
/* live search popup: the loader replaces the constellation */
.mr .hs-cst-load { --mr-ld-s: 28px; --mr-ld-x: 30px; position: relative; padding-left: 58px; }
.mr .hs-cst-load .hs-cst { display: none; }
/* schedule first load: a small loader before "Loading this week…" */
.mr .mrs-wait .mrs-sub { --mr-ld-s: 18px; --mr-ld-x: 9px; position: relative; padding-left: 26px; }

/* .hs-beads (comments "Loading comments…", busy "load more" buttons) and .hs-spark (hover-card
   loading): their <i>s become the full loader — i1 outer arc, i2 inner arc, i3 the M, i4 orbit. */
.mr :is(.hs-beads, .hs-spark) {
    --mr-ld-s: 28px; position: relative; display: inline-block; flex: none; gap: 0;
    width: var(--mr-ld-s); height: var(--mr-ld-s); font-size: var(--mr-ld-s); vertical-align: middle;
    color: var(--mr-loader-c, var(--mr-primary, #BAA7FF));
}
.mr .hs-beads.sm { --mr-ld-s: 18px; }
.mr .hs-spark { --mr-ld-s: 26px; }
.mr :is(.hs-beads, .hs-spark) i {
    position: absolute; inset: 4%; left: 4%; top: 4%; right: 4%; bottom: 4%; display: block;
    width: auto; height: auto; margin: 0; border-radius: 50%; opacity: 1; transform: none; filter: none; box-shadow: none;
    color: inherit; background: none; clip-path: none; -webkit-mask: none; mask: none; animation: none;
}
.mr :is(.hs-beads, .hs-spark) i:nth-child(1) {
    --w: max(1.5px, 0.03em);
    background: conic-gradient(from -0.17turn, color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, currentColor 40%, transparent) 0.2turn, currentColor 0.42turn, color-mix(in srgb, currentColor 12%, transparent) 0);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--w) - 0.6px), #000 calc(100% - var(--w) + 0.4px) calc(100% - 0.5px), #0000 100%);
            mask: radial-gradient(farthest-side, #0000 calc(100% - var(--w) - 0.6px), #000 calc(100% - var(--w) + 0.4px) calc(100% - 0.5px), #0000 100%);
    animation: mr-ld-spin 1.5s cubic-bezier(0.55, 0.15, 0.4, 0.85) infinite;
}
.mr :is(.hs-beads, .hs-spark) i:nth-child(2) {
    --w: max(1.5px, 0.024em);
    inset: 20%; opacity: 0.6;
    background: conic-gradient(from 0.55turn, currentColor, #0000 0.32turn);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--w) - 0.6px), #000 calc(100% - var(--w) + 0.4px) calc(100% - 0.5px), #0000 100%);
            mask: radial-gradient(farthest-side, #0000 calc(100% - var(--w) - 0.6px), #000 calc(100% - var(--w) + 0.4px) calc(100% - 0.5px), #0000 100%);
    animation: mr-ld-spin 2.6s linear infinite reverse;
}
.mr :is(.hs-beads, .hs-spark) i:nth-child(3) {
    inset: 0; border-radius: 0; background: currentColor;
    -webkit-mask: var(--mr-ld-msvg) center / 46% 46% no-repeat;
            mask: var(--mr-ld-msvg) center / 46% 46% no-repeat;
    animation: mr-ld-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.25) both, mr-ld-pulse 2.4s ease-in-out 0.5s infinite;
}
.mr :is(.hs-beads, .hs-spark) i:nth-child(2), .mr :is(.hs-beads, .hs-spark) i:nth-child(n+4) { display: none; }
.mr .hs-cm-load { gap: 12px; }
.mr .hs-busy > .hs-beads { margin-left: 8px; }

/* small single-pseudo spots: arc only */
/* server being switched to (refine.css / watch.css put an equalizer on li.active::before) */
.mr #watch-main:has(#player .loading) :is(.hs-sv, .hs-srv) .type li.active::before {
    --w: 1.5px; content: ""; flex: none; width: 12px; height: 12px; margin-right: 7px; font-size: 12px;
    border-radius: 50%; color: var(--mr-loader-c, var(--mr-primary, #BAA7FF));
    background: conic-gradient(from -0.17turn, color-mix(in srgb, currentColor 15%, transparent), currentColor 0.42turn, color-mix(in srgb, currentColor 15%, transparent) 0);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--w) - 0.6px), #000 calc(100% - var(--w) + 0.4px));
            mask: radial-gradient(farthest-side, #0000 calc(100% - var(--w) - 0.6px), #000 calc(100% - var(--w) + 0.4px));
    animation: mr-ld-spin 1.2s linear infinite;
}
/* server list refetch (watch.js data-hs-busy on #w-servers): ::after keeps its "Loading servers…" text */
.mr #w-servers[data-hs-busy]::before {
    --w: 2px; width: 28px; height: 28px; margin-left: -14px; font-size: 28px; border-radius: 50%;
    color: var(--mr-loader-c, var(--mr-primary, #BAA7FF));
    background: conic-gradient(from -0.17turn, color-mix(in srgb, currentColor 14%, transparent), currentColor 0.42turn, color-mix(in srgb, currentColor 14%, transparent) 0);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--w) - 0.6px), #000 calc(100% - var(--w) + 0.4px));
            mask: radial-gradient(farthest-side, #0000 calc(100% - var(--w) - 0.6px), #000 calc(100% - var(--w) + 0.4px));
    animation: mr-ld-spin 1.2s linear infinite, hs-ld-in 0.2s ease-out both;
}

/* Player intro (#hs-pi, driven by player-intro.js): the miruro loader instead of the mascot sting.
   The md loader sits in .hs-pi-col (watch.blade.php); the old figure / wordmark are hidden. */
.mr .hs-pi {
    background:
        radial-gradient(42% 52% at 50% 46%, rgba(186, 167, 255, 0.11), transparent 72%),
        linear-gradient(180deg, rgba(14, 13, 16, 0.95), rgba(8, 8, 10, 0.98));
}
.mr .hs-pi::before { display: none; }
.mr .hs-pi-fig, .mr .hs-pi-wm { display: none; }
.mr .hs-pi-col { gap: 1.25em; }
.mr .hs-pi .mr-loader { font-size: clamp(56px, 15cqh, 84px); animation: hs-pi-in 0.3s ease-out both; }
.mr .hs-pi-line { width: 7.5em; background: rgba(255, 255, 255, 0.1); }
.mr .hs-pi-line i { background: linear-gradient(90deg, rgba(186, 167, 255, 0.35), #BAA7FF); }
.mr .hs-pi-srv { color: #BAA7FF; }
.mr .hs-pi-badge { color: rgba(238, 238, 240, 0.7); }

/* ======================================================================================
   3. First-paint page overlay (CSS only, no JS)
   Shows only while the HTML is still being parsed (the layout's last tag, the miruro.js <script>,
   not in the DOM yet) AND only after 300ms, so fast loads never flash. Once parsing reaches that
   tag it fades out; if it never does (broken markup / stalled stream) it fades by itself at 4s.
   It never takes pointer events. ::before = backdrop + the M, ::after = the turning arc.
   ====================================================================================== */
html::before, html::after {
    content: ""; position: fixed; z-index: 2147483000; pointer-events: none;
    opacity: 0; visibility: hidden;
}
html::before {
    inset: 0;
    background: var(--mr-ld-page-m, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 80V27L50 55L82 27V80' fill='none' stroke='%23BAA7FF' stroke-width='11' stroke-linecap='square'/%3E%3C/svg%3E")) center / 40px 40px no-repeat, var(--hs-bg, #121113);
}
html[data-theme="light"]::before {
    --mr-ld-page-m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M18 80V27L50 55L82 27V80' fill='none' stroke='%232F265F' stroke-width='11' stroke-linecap='square'/%3E%3C/svg%3E");
}
html::after {
    --w: 2px;
    left: 50%; top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%;
    color: var(--mr-primary, #BAA7FF);
    background: conic-gradient(from -0.17turn, color-mix(in srgb, currentColor 12%, transparent), color-mix(in srgb, currentColor 40%, transparent) 0.2turn, currentColor 0.42turn, color-mix(in srgb, currentColor 12%, transparent) 0);
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - var(--w) - 0.6px), #000 calc(100% - var(--w) + 0.4px) calc(100% - 0.5px), #0000 100%);
            mask: radial-gradient(farthest-side, #0000 calc(100% - var(--w) - 0.6px), #000 calc(100% - var(--w) + 0.4px) calc(100% - 0.5px), #0000 100%);
}
/* still parsing: run the life cycle (hidden 0–300ms, fade in, hold, fade out 4–4.4s) */
html:not(:has(> body > script[src*="/js/miruro.js"]))::before,
html:not(:has(> body > script[src*="/js/miruro.js"]))::after {
    visibility: visible;
    animation: mr-pl-life 4.4s linear both;
}
html:not(:has(> body > script[src*="/js/miruro.js"]))::after {
    animation: mr-pl-life 4.4s linear both, mr-ld-spin 1.5s cubic-bezier(0.55, 0.15, 0.4, 0.85) infinite;
}
/* parsed: freeze the life cycle where it is (0 if it never got past 300ms) and fade the rest away */
html:has(> body > script[src*="/js/miruro.js"])::before,
html:has(> body > script[src*="/js/miruro.js"])::after {
    animation: mr-pl-life 4.4s linear both paused;
    filter: opacity(0); transition: filter 0.35s ease, visibility 0s linear 0.35s;
}
html:has(> body > script[src*="/js/miruro.js"])::after {
    animation: mr-pl-life 4.4s linear both paused, mr-ld-spin 1.5s cubic-bezier(0.55, 0.15, 0.4, 0.85) infinite;
}
@keyframes mr-pl-life {
    0%, 6.8% { opacity: 0; }
    12% { opacity: 1; }
    90.9% { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}

/* ======================================================================================
   Reduced motion: nothing turns; arcs hold still, the whole loader fades slowly
   ====================================================================================== */
@media (prefers-reduced-motion: reduce) {
    .mr-loader-ring, .mr-loader-o, .mr-loader-m, .mr-loader::after,
    .mr :is(.loading, .hs-spin, .hs-eps-status .hs-film.mini, .hs-cst-load, .mrs-wait .mrs-sub)::before,
    .mr :is(.loading, .hs-spin, .hs-eps-status .hs-film.mini, .hs-cst-load, .mrs-wait .mrs-sub)::after,
    .mr :is(.hs-beads, .hs-spark) i,
    .mr #watch-main:has(#player .loading) :is(.hs-sv, .hs-srv) .type li.active::before,
    .mr #w-servers[data-hs-busy]::before { animation: none; }
    .mr-loader-m path { animation: none; stroke-dashoffset: 0; }
    .mr-loader, .mr :is(.loading, .hs-spin, .hs-eps-status .hs-film.mini, .hs-cst-load, .mrs-wait .mrs-sub)::after,
    .mr :is(.hs-beads, .hs-spark) i:nth-child(3) { animation: mr-ld-fade 1.6s ease-in-out infinite alternate; }
    html:not(:has(> body > script[src*="/js/miruro.js"]))::after { animation: mr-pl-life 4.4s linear both; }
}