/* sc-progress-v1 (SC-N411) - one loading/progress language for the customer portal.
   Pairs with /js/sc-progress.js. Tokens follow the portal theme (--blue / --accent / --ink*, [data-theme="light"]).
   Pieces: 1 tokens, 2 ring indicator, 3 inline status, 4 steps, 5 buttons, 6 top bar, 7 skeletons,
   8 legacy upgrades (auto-enhanced "Working..." lines, old spinners, sc-busy, SCJobs), 9 reduced motion. */

/* ---------- 1. Tokens ---------- */
:root{
  --scp-accent:var(--blue,#89c4e1);
  --scp-ink:var(--ink,#e8ecf2);
  --scp-ink2:var(--ink2,#9aa4b2);
  --scp-ink3:color-mix(in srgb,var(--ink2,#9aa4b2) 78%,transparent);
  --scp-ok:#34d399;
  --scp-err:#f87171;
  --scp-tint:color-mix(in srgb,var(--scp-accent) 7%,transparent);
  --scp-edge:color-mix(in srgb,var(--scp-accent) 22%,transparent);
  --scp-track:color-mix(in srgb,var(--scp-ink) 9%,transparent);
  --scp-dot:color-mix(in srgb,var(--scp-ink) 26%,transparent);
  --scp-skel:color-mix(in srgb,var(--scp-ink) 6.5%,transparent);
  --scp-skel-hi:color-mix(in srgb,var(--scp-ink) 13%,transparent);
  --scp-period:.9s;
  --scp-ease:cubic-bezier(.2,.7,.2,1);
  --scp-spring:cubic-bezier(.34,1.45,.64,1);
}
[data-theme="light"]{
  --scp-accent:var(--accent,#2f6bdd);
  --scp-ok:#059669;
  --scp-err:#dc2626;
  --scp-ink3:#5f6b7a;
  --scp-skel:rgba(23,28,36,.055);
  --scp-skel-hi:rgba(23,28,36,.10);
}

/* ---------- 2. Ring: a tapered arc on a faint track, soft halo ---------- */
.scp-ring{
  position:relative;display:inline-block;flex:none;box-sizing:border-box;
  width:16px;height:16px;border-radius:50%;vertical-align:-3px;color:var(--scp-accent);
  box-shadow:inset 0 0 0 1.75px color-mix(in srgb,currentColor 17%,transparent);
}
.scp-ring::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 22%,color-mix(in srgb,currentColor 30%,transparent) 55%,currentColor 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.75px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.75px));
  animation:scp-spin var(--scp-period) linear infinite;animation-delay:var(--scp-ph,0ms);
}
.scp-ring::after{
  content:"";position:absolute;inset:-2px;border-radius:50%;pointer-events:none;
  animation:scp-halo 2.4s ease-out infinite;animation-delay:var(--scp-ph,0ms);
}
.scp-ring > svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scp-ring > svg path{stroke-dasharray:14;stroke-dashoffset:14;animation:scp-draw .42s .08s var(--scp-ease) forwards}
.scp-ring.is-done,.scp-ring.is-fail{animation:scp-pop .45s var(--scp-spring)}
.scp-ring.is-done{color:var(--scp-ok);box-shadow:inset 0 0 0 1.75px currentColor;background:color-mix(in srgb,currentColor 14%,transparent)}
.scp-ring.is-fail{color:var(--scp-err);box-shadow:inset 0 0 0 1.75px currentColor;background:color-mix(in srgb,currentColor 14%,transparent)}
.scp-ring.is-done::before,.scp-ring.is-fail::before,.scp-ring.is-done::after,.scp-ring.is-fail::after{content:none}
.scp-ring.is-done > svg,.scp-ring.is-fail > svg{inset:2px;width:calc(100% - 4px);height:calc(100% - 4px)}
@keyframes scp-spin{to{transform:rotate(360deg)}}
@keyframes scp-halo{0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 28%,transparent)}70%,100%{box-shadow:0 0 0 5px transparent}}
@keyframes scp-draw{to{stroke-dashoffset:0}}
@keyframes scp-pop{0%{transform:scale(.7)}100%{transform:scale(1)}}

/* ---------- 3. Inline status ---------- */
.scp-inline{
  display:inline-flex;align-items:center;gap:10px;box-sizing:border-box;max-width:100%;
  margin-top:14px;padding:8px 14px 8px 11px;border-radius:999px;
  font-family:var(--font,inherit);font-size:13.5px;font-weight:500;line-height:1.4;letter-spacing:-.003em;
  color:var(--scp-ink);background:var(--scp-tint);border:1px solid var(--scp-edge);
  animation:scp-in .28s var(--scp-ease);
}
.scp-inline .scp-body{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.scp-inline .scp-row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:1px;min-width:0}
.scp-inline .scp-label{min-width:0;overflow-wrap:anywhere}
.scp-inline.is-rich .scp-label{flex:1 1 230px}
.scp-inline .scp-time{
  margin-left:auto;flex:none;white-space:nowrap;
  font-family:var(--mono,ui-monospace,monospace);font-size:12px;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--scp-ink3);
}
.scp-inline .scp-time b{font-weight:600;color:var(--scp-ink2)}
.scp-inline .scp-note{margin-top:3px;font-size:12.5px;font-weight:400;line-height:1.5;color:var(--scp-ink2)}
.scp-inline.is-rich{
  display:flex;align-items:flex-start;gap:12px;width:100%;max-width:620px;
  padding:13px 16px 14px 14px;border-radius:10px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--scp-accent) 8%,transparent),color-mix(in srgb,var(--scp-accent) 3%,transparent));
}
.scp-inline.is-rich > .scp-ring{margin-top:2px}
.scp-track{position:relative;height:3px;margin-top:10px;border-radius:99px;background:var(--scp-track);overflow:hidden}
.scp-track > i{
  position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,color-mix(in srgb,var(--scp-accent) 55%,transparent),var(--scp-accent));
  transition:transform .9s var(--scp-ease),background-color .3s;
}
.scp-track::after{
  content:"";position:absolute;inset:0;width:40%;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,#fff 35%,transparent),transparent);
  animation:scp-sweep 1.9s ease-in-out infinite;
}
.scp-inline.is-done{border-color:color-mix(in srgb,var(--scp-ok) 34%,transparent);background:color-mix(in srgb,var(--scp-ok) 8%,transparent)}
.scp-inline.is-fail{border-color:color-mix(in srgb,var(--scp-err) 40%,transparent);background:color-mix(in srgb,var(--scp-err) 8%,transparent)}
.scp-inline.is-fail .scp-label{color:color-mix(in srgb,var(--scp-err) 55%,var(--scp-ink))}
.scp-inline.is-done .scp-track > i{background:var(--scp-ok)}
.scp-inline.is-fail .scp-track > i{background:var(--scp-err)}
.scp-inline:is(.is-done,.is-fail) .scp-track::after{content:none}
.scp-inline.is-out{opacity:0;transform:translateY(-2px);transition:opacity .3s,transform .3s}
@keyframes scp-in{from{opacity:0;transform:translateY(2px)}to{opacity:1;transform:none}}
@keyframes scp-sweep{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}

/* ---------- 4. Steps ---------- */
.scp-steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:0}
.scp-steps li{position:relative;display:flex;align-items:center;gap:10px;min-height:26px;font-size:13px;font-weight:500;color:var(--scp-ink3);transition:color .25s}
.scp-steps li + li::before{content:"";position:absolute;left:6.5px;top:-6px;height:12px;width:1px;background:var(--scp-track)}
.scp-steps li.is-done + li::before{background:color-mix(in srgb,var(--scp-ok) 45%,transparent)}
.scp-steps .scp-dot{position:relative;flex:none;width:14px;height:14px;border-radius:50%;box-sizing:border-box;box-shadow:inset 0 0 0 1.5px var(--scp-dot)}
.scp-steps li.is-now{color:var(--scp-ink)}
.scp-steps li.is-now .scp-dot{box-shadow:none}
.scp-steps li.is-now .scp-ring{width:14px;height:14px;vertical-align:0}
.scp-steps li.is-done{color:var(--scp-ink2)}
.scp-steps li.is-done .scp-dot{box-shadow:none;background:color-mix(in srgb,var(--scp-ok) 16%,transparent);color:var(--scp-ok)}
.scp-steps li.is-fail{color:color-mix(in srgb,var(--scp-err) 60%,var(--scp-ink))}
.scp-steps li.is-fail .scp-dot{box-shadow:inset 0 0 0 1.5px var(--scp-err);background:color-mix(in srgb,var(--scp-err) 14%,transparent)}
.scp-steps .scp-dot > svg{position:absolute;inset:2.5px;width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 5. Buttons (ScProgress.button, setLoading, sc-busy) ---------- */
.scp-btn-busy{position:relative!important;cursor:progress!important}
html body .scp-btn-busy:not(#scp-x),html body .scp-btn-busy:not(#scp-x) *:not(.scp-btn-spin):not(.scp-btn-spin *){color:transparent!important}
html body .scp-btn-busy:not(#scp-x) > :not(.scp-btn-spin){visibility:hidden}
.scp-btn-spin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;visibility:visible}
.scp-btn-spin .scp-ring{color:var(--scp-btn-ink,var(--scp-accent))!important}
.scp-btn-busy.sc-is-busy::after{content:none!important}
html .portal-layout .btn.btn-primary.scp-btn-busy[disabled],
html .portal-layout .btn.btn-primary.sc-is-busy[disabled],
html body .btn.btn-primary.scp-btn-busy[disabled],
html body .btn.btn-primary[disabled]:has(.spinner,.fa-spin,.scs-spin,.scb-spin,.scp-ring){
  background:var(--sc-primary,#1b76b1)!important;border:1px solid var(--sc-primary,#1b76b1)!important;color:#fff!important;
  opacity:1!important;filter:saturate(.9) brightness(.96)!important;
}
html .portal-layout .btn.scp-btn-busy[disabled]:not(.btn-primary){border-style:solid!important}
/* sc-busy marks the button whose POST is running: keep its size and label position (no padding jump), quiet ring */
html .portal-layout .btn.sc-is-busy,
html .portal-layout .btn.sc-is-busy:disabled{padding-left:var(--scp-pl,16px)!important}
html body .sc-is-busy:not(#scp-x):not(:has(.spinner,.fa-spin,.scs-spin,.scb-spin,.scp-ring)){color:transparent!important}
html body .sc-is-busy:not(#scp-x):not(:has(.spinner,.fa-spin,.scs-spin,.scb-spin,.scp-ring)) > *{visibility:hidden}
html body .sc-is-busy:not(#scp-x):not(:has(.spinner,.fa-spin,.scs-spin,.scb-spin,.scp-ring))::after{
  content:""!important;position:absolute!important;inset:auto!important;top:50%!important;left:50%!important;
  width:16px!important;height:16px!important;margin:-8px 0 0 -8px!important;border:0!important;border-radius:50%!important;
  color:var(--scp-accent);
  background:conic-gradient(from 0deg,transparent 0 22%,color-mix(in srgb,var(--scp-accent) 30%,transparent) 55%,var(--scp-accent) 100%)!important;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.75px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.75px));
  animation:scp-spin var(--scp-period) linear infinite!important;visibility:visible;
}
html body .btn-primary.sc-is-busy:not(#scp-x):not(:has(.spinner,.fa-spin,.scs-spin,.scb-spin,.scp-ring))::after{
  background:conic-gradient(from 0deg,transparent 0 22%,rgba(255,255,255,.35) 55%,#fff 100%)!important;
}
html body .sc-is-busy:not(#scp-x):has(.spinner,.fa-spin,.scs-spin,.scb-spin,.scp-ring)::after{content:none!important}
html body .sc-is-busy:not(#scp-x):has(.spinner,.fa-spin,.scs-spin,.scb-spin,.scp-ring) > *{opacity:1!important}
/* pvisual hid the leading icon of a busy button (width jump); keep it in the box, just invisible */
html body .portal-layout .btn.sc-is-busy:not(#scp-x) > i:first-child{display:inline-block!important}

/* ---------- 6. Top bar ---------- */
.scp-on .sc-busy-bar{display:none!important}
.scp-bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:2147483001;pointer-events:none;opacity:0;transition:opacity .35s ease}
.scp-bar.is-on{opacity:1;transition:opacity .12s ease}
.scp-bar > i{
  position:absolute;left:0;top:0;bottom:0;width:0;border-radius:0 2px 2px 0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--scp-accent) 0%,transparent),color-mix(in srgb,var(--scp-accent) 70%,transparent) 40%,var(--scp-accent));
  box-shadow:0 0 8px color-mix(in srgb,var(--scp-accent) 60%,transparent);
  transition:width .45s var(--scp-ease);
}
.scp-bar > i::after{
  content:"";position:absolute;right:-1px;top:-2px;width:90px;height:6px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--scp-accent) 75%,#fff),transparent);opacity:.65;filter:blur(1px);
}
.scp-bar.is-done > i{width:100%!important;transition:width .22s ease}

/* ---------- 7. Skeletons: one quiet sheen that travels across the whole page ---------- */
.skel,.skeleton,.sc-skeleton,.scp-sk{
  background-color:var(--scp-skel)!important;
  background-image:linear-gradient(100deg,transparent 35%,var(--scp-skel-hi) 50%,transparent 65%)!important;
  background-size:100vw 100%!important;background-repeat:no-repeat!important;background-attachment:fixed!important;
  animation:scp-sheen 1.9s ease-in-out infinite!important;
}
@keyframes scp-sheen{0%{background-position:-100vw 0}100%{background-position:100vw 0}}
.scp-sk{display:block;height:11px;border-radius:6px}
.scp-skel{display:grid;gap:14px;padding:4px 0;animation:scp-in .3s var(--scp-ease)}
.scp-skel .scp-sk.t{height:14px;width:34%}
.scp-skel--table .scp-skr{display:grid;grid-template-columns:2.2fr 1.2fr 1fr .8fr;gap:18px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line,rgba(255,255,255,.06))}
.scp-skel--table .scp-skr:last-child{border-bottom:0}
.scp-skel--table .scp-skr.h .scp-sk{height:8px;opacity:.7}
.scp-skel--cards{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.scp-skel--cards .scp-skc{display:grid;gap:10px;padding:18px;border:1px solid var(--line,rgba(255,255,255,.06));border-radius:var(--sc-radius,8px);background:color-mix(in srgb,var(--scp-ink) 1.5%,transparent)}
.scp-skel--cards .scp-skc .scp-sk:nth-child(2){height:22px;width:62%;border-radius:7px}
.scp-skel--kv .scp-skr{display:flex;justify-content:space-between;gap:24px}
.scp-skel--kv .scp-skr .scp-sk:first-child{width:28%}
.scp-skel--kv .scp-skr .scp-sk:last-child{width:22%}
.scp-below{margin-top:16px}
.scp-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 8. Legacy upgrades ---------- */
/* auto-enhanced status text ("Working...", "Loading usage...", "Creating your datastore...") */
.scp-auto-ind{margin-right:9px;width:clamp(13px,1em,22px);height:clamp(13px,1em,22px);vertical-align:-.16em}
[data-scp-auto][data-scp-t]::after{
  content:attr(data-scp-t);margin-left:10px;font-family:var(--mono,ui-monospace,monospace);font-size:12px;font-weight:500;
  font-variant-numeric:tabular-nums;color:var(--scp-ink3);letter-spacing:0;
}
html [data-scp-auto="ring"]:is(.pbs-msg,.bg-msg,.scb-msg,.sc-act__msg,.scc-state,.v6-sub){
  display:inline-flex!important;align-items:center;gap:0;margin-top:14px;padding:8px 14px 8px 11px;border-radius:999px;
  font-size:13.5px;font-weight:500;line-height:1.4;color:var(--scp-ink);background:var(--scp-tint);border:1px solid var(--scp-edge);
}
html [data-scp-auto="ring"]:is(.pbs-msg,.bg-msg,.scb-msg,.sc-act__msg,.scc-state,.v6-sub)::before{content:none!important}
.toast:has([data-scp-auto]) > i{display:none}
.toast .scp-auto-ind{margin-right:10px}
.btn .scp-auto-ind,button .scp-auto-ind{margin-right:8px;color:inherit}
.btn-primary .scp-auto-ind{color:#fff}
/* bare "Loading..." placeholders become a text-sized shimmer */
[data-scp-auto="sk"]{color:transparent!important;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background-color:var(--scp-skel)!important;
  background-image:linear-gradient(100deg,transparent 35%,var(--scp-skel-hi) 50%,transparent 65%)!important;
  background-size:100vw 100%!important;background-repeat:no-repeat!important;background-attachment:fixed!important;
  animation:scp-sheen 1.9s ease-in-out infinite;user-select:none}
[data-scp-auto="skb"]{position:relative!important;color:transparent!important;user-select:none}
[data-scp-auto="skb"] > .scp-sk{position:absolute;height:.72em;min-height:9px;max-height:14px;width:min(160px,60%);top:50%;transform:translateY(-50%)}
/* old spinners everywhere take the same ring */
.spinner,.scs-spin,.scb-spin{
  position:relative;border:0!important;border-radius:50%!important;color:var(--scp-accent);
  box-shadow:inset 0 0 0 1.75px color-mix(in srgb,currentColor 17%,transparent)!important;background:none!important;
  animation:none!important;
}
.spinner::before,.scs-spin::before,.scb-spin::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 22%,color-mix(in srgb,currentColor 30%,transparent) 55%,currentColor 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.75px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.75px));
  animation:scp-spin var(--scp-period) linear infinite;animation-delay:var(--scp-ph,0ms);
}
.spinner.spinner-sm{width:15px!important;height:15px!important;vertical-align:-3px}
.btn-primary .spinner,.btn-primary .scs-spin{color:#fff}
.scs-spin{color:inherit}
i.fa-spin:is(.fa-spinner,.fa-circle-notch){
  position:relative;display:inline-block;width:1em;height:1em;vertical-align:-.14em;border-radius:50%;
  box-shadow:inset 0 0 0 .11em color-mix(in srgb,currentColor 17%,transparent);
  animation:scp-spin var(--scp-period) linear infinite!important;animation-delay:var(--scp-ph,0ms)!important;
}
i.fa-spin:is(.fa-spinner,.fa-circle-notch)::before{
  content:""!important;position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 22%,color-mix(in srgb,currentColor 30%,transparent) 55%,currentColor 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - .125em),#000 calc(100% - .11em));
          mask:radial-gradient(farthest-side,transparent calc(100% - .125em),#000 calc(100% - .11em));
}
.loading-state{gap:12px;color:var(--scp-ink2)}
/* VPS "Reinstalling this server" banner when it carries a ScProgress panel */
.srv-busy.srv-busy--scp{display:block!important;padding:0!important;border:0!important;background:none!important;margin:0 0 14px}
.srv-busy.srv-busy--scp .scp-inline{margin-top:0;max-width:none}
.scp-slot:empty{display:none}
.scp-slot .scp-inline{width:100%;max-width:none}
/* SCJobs (reinstall / restore / certificate jobs): same surface, ring, steps */
.scj{border:1px solid var(--scp-edge)!important;border-radius:10px!important;padding:14px 16px 15px!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--scp-accent) 8%,transparent),color-mix(in srgb,var(--scp-accent) 3%,transparent))!important}
.scj.ok{border-color:color-mix(in srgb,var(--scp-ok) 34%,transparent)!important;background:color-mix(in srgb,var(--scp-ok) 7%,transparent)!important}
.scj.err{border-color:color-mix(in srgb,var(--scp-err) 40%,transparent)!important;background:color-mix(in srgb,var(--scp-err) 7%,transparent)!important}
.scj-top{font-size:13.5px!important;font-weight:600;color:var(--scp-ink)}
.scj-time{font-family:var(--mono,ui-monospace,monospace);font-size:12px!important;opacity:1!important;color:var(--scp-ink3)}
.scj-bar{height:3px!important;background:var(--scp-track)!important;margin:10px 0 12px!important}
.scj-bar i{background:linear-gradient(90deg,color-mix(in srgb,var(--scp-accent) 55%,transparent),var(--scp-accent))!important;transition:width .9s var(--scp-ease)!important}
.scj.ok .scj-bar i{background:var(--scp-ok)!important}.scj.err .scj-bar i{background:var(--scp-err)!important}
.scj-steps li{font-size:13px!important;font-weight:500;color:var(--scp-ink3);opacity:1!important;min-height:22px}
.scj-steps li.r{color:var(--scp-ink)}.scj-steps li.d{color:var(--scp-ink2)}
.scj-steps li::before{box-shadow:inset 0 0 0 1.5px var(--scp-dot);border:0!important;opacity:1!important}
.scj-steps li.r::before{box-shadow:inset 0 0 0 1.75px color-mix(in srgb,var(--scp-accent) 17%,transparent);border:0!important;
  background:conic-gradient(from 0deg,transparent 0 22%,color-mix(in srgb,var(--scp-accent) 30%,transparent) 55%,var(--scp-accent) 100%)!important;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.75px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.75px));
  animation:scp-spin var(--scp-period) linear infinite!important;animation-delay:var(--scp-ph,0ms)!important}
.scj-steps li.d::before{background-color:var(--scp-ok)!important;box-shadow:none}
.scj-steps li.x::before{background:var(--scp-err)!important;box-shadow:none}

/* ---------- 9. Reduced motion: no spin, no sweep; a slow breathing ring says "working" ---------- */
@media (prefers-reduced-motion:reduce){
  .scp-ring::before,.spinner::before,.scs-spin::before,.scb-spin::before,i.fa-spin:is(.fa-spinner,.fa-circle-notch),
  .sc-is-busy::after,.scj-steps li.r::before{animation:scp-breathe 2.4s ease-in-out infinite!important}
  .scp-ring::after,.scp-track::after{content:none}
  .skel,.skeleton,.sc-skeleton,.scp-sk,[data-scp-auto="sk"]{animation:none!important;background-image:none!important}
  .scp-inline,.scp-skel,.scp-ring.is-done,.scp-ring.is-fail{animation:none}
  .scp-ring > svg path{animation:none;stroke-dashoffset:0}
  .scp-track > i,.scp-bar > i{transition:none}
}
@keyframes scp-breathe{0%,100%{opacity:1}50%{opacity:.35}}