/* SmartScreen walkthrough: pure CSS recreation of the Windows 10 "protected your PC" dialog
   on a desktop-wallpaper card. Sized in em, scaled to the card width via container units. */
.ss-card { width: min(100%, 440px); margin: 0 auto; padding: 3.5%; box-sizing: border-box; border-radius: 8px; box-shadow: 0 18px 40px -14px #0b1d4a59, 0 2px 6px #0b1d4a26;
  background:
    radial-gradient(ellipse 60% 38% at 14% 104%, #17402a 0 98%, transparent 100%),
    radial-gradient(ellipse 70% 42% at 86% 106%, #25583a 0 98%, transparent 100%),
    radial-gradient(ellipse 80% 34% at 50% 98%, #3b7d4d 0 98%, transparent 100%),
    radial-gradient(ellipse 50% 22% at 30% 70%, #5a9a66aa 0 98%, transparent 100%),
    linear-gradient(180deg, #cfe9ee 0%, #9ccbc9 30%, #5e9c78 58%, #2a5c3b 100%); }
.ss-stage { container-type: inline-size; width: 100%; }
.ss-win { --ss-blue: #0063b1; position: relative; width: 100%; height: 25em; font-size: 14px; font-family: "Segoe UI", "Geist", system-ui, sans-serif; font-weight: 400; color: #fff; text-align: left; background: var(--ss-blue); box-shadow: 0 .6em 1.6em -.4em #00000066, 0 0 0 1px #0000002e; overflow: hidden; user-select: none; }
@supports (font-size: 1cqw) { .ss-win { font-size: calc(100cqw / 26); } }
.ss-pane { position: absolute; inset: 0; padding: 2.7em 1.8em 0; }
.ss-close { position: absolute; top: 0; right: 0; z-index: 2; display: grid; place-items: center; width: 2.1em; height: 1.6em; background: #fff; color: #1b1b1b; }
.ss-close svg { width: .7em; height: .7em; stroke: currentColor; stroke-width: 1.4; fill: none; }
.ss-title { margin: 0; font-size: 1.7em; font-weight: 300; line-height: 1.2; letter-spacing: 0; }
.ss-body { margin: .8em 0 0; max-width: 22em; font-size: .9em; line-height: 1.45; font-weight: 400; }
.ss-link { position: absolute; left: 2em; top: 10.5em; font-size: .9em; text-decoration: underline; text-underline-offset: .15em; }
.ss-list { display: grid; grid-template-columns: 5.4em 1fr; row-gap: .25em; margin: 1.1em 0 0; font-size: .9em; line-height: 1.4; }
.ss-list dt, .ss-list dd { margin: 0; font-weight: 400; }
.ss-btn { position: absolute; bottom: 1.3em; display: grid; place-items: center; height: 2.3em; box-sizing: border-box; border: 1px solid #8a8a8a; background: #fff; color: #1b1b1b; font-size: .9em; line-height: 1; }
.ss-btn-dont { right: 1.5em; width: 6.9em; }
.ss-btn-run { right: 9em; width: 7.3em; }
.ss-cursor { position: absolute; left: 0; top: 0; z-index: 3; width: 1.7em; height: 2em; margin: -.07em 0 0 -.74em; opacity: 0; pointer-events: none; filter: drop-shadow(0 .08em .12em #00000080); }
.ss-cursor svg { display: block; width: 100%; height: 100%; }
.ss-steps, .legal-body .ss-steps { display: none; width: min(100%, 420px); margin: 1.2rem auto 0; padding: 0; list-style: none; text-align: left; color: var(--muted-ink, #506080); font-size: .95rem; line-height: 1.6; }
.ss-steps li + li { margin-top: .3rem; }
.ss-steps b { color: var(--ink, #111a2e); }
.ss-caption, .legal-body .ss-caption { margin: 1.4rem auto 0; max-width: 560px; text-align: center; color: #8a93a6; font-size: .9rem; line-height: 1.55; letter-spacing: 0; }

/* 8 s loop. Cursor coordinates are in em inside the dialog. */
.ss-pane-1 { animation: ss-pane1 8s infinite; }
.ss-pane-2 { opacity: 0; animation: ss-pane2 8s infinite; }
.ss-cursor { animation: ss-cursor 8s infinite; }
.ss-pane-1 .ss-link { animation: ss-linkhi 8s infinite; }
.ss-pane-2 .ss-btn-run { animation: ss-runhi 8s infinite; }

@keyframes ss-pane1 { 0%, 31% { opacity: 1; } 33%, 94% { opacity: 0; } 98%, 100% { opacity: 1; } }
@keyframes ss-pane2 { 0%, 31% { opacity: 0; } 33%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
@keyframes ss-cursor {
  0%   { opacity: 0; transform: translate(22em, 6em) scale(1); }
  6%   { opacity: 1; transform: translate(22em, 6em) scale(1); }
  22%  { opacity: 1; transform: translate(3.6em, 11.2em) scale(1); }
  25%  { opacity: 1; transform: translate(3.6em, 11.2em) scale(.84); }
  28%  { opacity: 1; transform: translate(3.6em, 11.2em) scale(1); }
  36%  { opacity: 1; transform: translate(3.6em, 11.2em) scale(1); }
  66%  { opacity: 1; transform: translate(14em, 22.5em) scale(1); }
  70%  { opacity: 1; transform: translate(14em, 22.5em) scale(.84); }
  74%  { opacity: 1; transform: translate(14em, 22.5em) scale(1); }
  90%  { opacity: 1; transform: translate(14em, 22.5em) scale(1); }
  95%, 100% { opacity: 0; transform: translate(14em, 22.5em) scale(1); }
}
@keyframes ss-linkhi { 0%, 21% { opacity: 1; } 23%, 30% { opacity: .75; } 100% { opacity: 1; } }
@keyframes ss-runhi { 0%, 66% { background: #fff; } 70%, 90% { background: #cccccc; } 100% { background: #fff; } }

@media (prefers-reduced-motion: reduce) {
  .ss-pane-1, .ss-cursor { display: none; animation: none; }
  .ss-pane-2 { opacity: 1; animation: none; }
  .ss-pane-2 .ss-btn-run { animation: none; }
  .ss-steps, .legal-body .ss-steps { display: block; }
}