/* WinLuisPlus Malware Museum: the cards, the "virtual monitor" dialog and every exhibit's fake screen.
   Sizes inside the screen are in em, and the screen's font size follows its own width (container query),
   so an exhibit looks the same on a phone and on a 4K monitor. Nothing here animates while the dialog is closed:
   the exhibits are only in the page while they run. */

/* ------------------------------------------------------------------ the cards */
.mus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.mus-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.mus-card__shot { aspect-ratio: 16 / 9; background: #111 center / cover no-repeat; border-bottom: 1px solid rgba(255,255,255,.08); }
.mus-card__shot--pixel { image-rendering: pixelated; background-size: contain; background-color: #000; }
.mus-card__body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mus-card__body > p { margin: 0; color: var(--text-soft); }
.mus-card__meta { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--text-dim); }
.mus-card__title { margin: 0; font: 500 1.3rem/1.2 var(--font-display); }
.mus-card__actions { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.mus-run {
  font-size: .95rem; padding: 10px 18px; cursor: pointer;
  background: rgba(74,134,232,.26); border: 1px solid rgba(127,178,255,.5); color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.mus-run:hover { background: rgba(74,134,232,.42); border-color: rgba(127,178,255,.8); }
.mus-run:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

/* ------------------------------------------------------------------ the virtual monitor */
.mus-vm { width: min(1120px, 96vw); max-width: none; max-height: 100svh; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.mus-vm::backdrop { background: rgba(3, 5, 12, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mus-vm__frame { background: #11151f; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 10px 12px 12px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.9); }
.mus-vm__top { display: flex; align-items: center; gap: 10px; padding: 2px 2px 10px; }
.mus-vm__badge { font: 600 .72rem/1 var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #07130c; background: #78ffaa; padding: 5px 8px; border-radius: 6px; white-space: nowrap; }
.mus-vm__title { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mus-vm__btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: inherit; font-size: 1.05rem; cursor: pointer; }
.mus-vm__btn:hover { background: rgba(255,255,255,.14); }
.mus-vm__btn--close:hover { background: #c42b1c; border-color: #c42b1c; }
.mus-vm__btn:focus-visible { outline: 2px solid #78ffaa; outline-offset: 2px; }

.mus-vm__screen {
  position: relative; overflow: hidden; isolation: isolate;
  width: min(100%, calc((100svh - 190px) * 1.6)); margin: 0 auto; aspect-ratio: 16 / 10;
  background: #000; color: #000; border-radius: 6px;
  container-type: inline-size;
  font: 400 clamp(8px, 1.45cqi, 15px)/1.35 "Segoe UI", Tahoma, system-ui, sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
@supports not (font-size: 1cqi) { .mus-vm__screen { font-size: clamp(8px, 1.2vw, 15px); } }
.mus-vm__screen.is-invert { filter: invert(1); }
.mus-vm__screen[data-exhibit="memz"] { cursor: none; }
.mus-vm__caption { min-height: 3em; margin: 10px 4px 0; color: var(--text-soft); font-size: .95rem; line-height: 1.45; text-wrap: pretty; }
@media (max-width: 640px) {
  .mus-vm { width: 100vw; }
  .mus-vm__frame { border-radius: 0; padding: 8px 8px 10px; }
  .mus-vm__screen { aspect-ratio: 4 / 3.4; font-size: clamp(8px, 2.3cqi, 12px); }
  .mus-vm__badge { display: none; }
}

/* ------------------------------------------------------------------ shared pieces */
.mus-vm__screen button { font: inherit; cursor: pointer; }
.ms-full { position: absolute; inset: 0; z-index: 5; }
.ms-dim { opacity: .7; }
.ms-desk { position: absolute; inset: 0 0 2.4em; }
.ms-desk--teal { background: #3a6ea5; }
.ms-desk--xp { background: linear-gradient(180deg, #5a9be8 0%, #87bdf0 55%, #4f9a3a 56%, #3e8a2c 100%); }
.ms-desk--vista { background: radial-gradient(120% 90% at 70% 20%, #2f8b6f, #0f3d4a 55%, #06141c); }
.ms-desk--w10 { background: linear-gradient(135deg, #0a3a78, #0c5cc4 55%, #0a2a5a); }

.ms-task { position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em; display: flex; align-items: center; gap: .6em; padding: 0 .4em; z-index: 4; }
.ms-task__start { font-weight: 700; padding: .25em .7em; }
.ms-task__clock { margin-left: auto; padding: 0 .6em; font-size: .9em; }
.ms-task--2000 { background: #d4d0c8; border-top: 2px solid #fff; }
.ms-task--2000 .ms-task__start { border: 2px outset #fff; background: #d4d0c8; }
.ms-task--2000 .ms-task__clock { border: 1px inset #fff; }
.ms-task--xp { background: linear-gradient(180deg, #3168d5, #245edb 40%, #1941a5); color: #fff; }
.ms-task--xp .ms-task__start { background: linear-gradient(180deg, #4ea342, #3c8f2f); border-radius: 0 .8em .8em 0; font-style: italic; margin-left: -.4em; height: 100%; display: flex; align-items: center; padding: 0 1.2em; }
.ms-task--xp .ms-task__clock { background: #0f8ee8; align-self: stretch; display: flex; align-items: center; }
.ms-task--vista { background: rgba(10,14,20,.85); color: #fff; border-top: 1px solid rgba(255,255,255,.25); }
.ms-task--vista .ms-task__start { width: 1.8em; height: 1.8em; padding: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8fd0ff, #1b6fc2); font-size: 0; }
.ms-task--w10 { background: rgba(16,20,28,.94); color: #fff; }
.ms-task--w10 .ms-task__start { font-size: 1.3em; font-weight: 400; color: #8fd0ff; }

/* windows, in the style of each era */
.mw { position: absolute; display: flex; flex-direction: column; overflow: hidden; z-index: 3; box-shadow: 0 .6em 1.6em rgba(0,0,0,.45); }
.mw__bar { display: flex; align-items: center; gap: .5em; padding: .25em .35em .25em .6em; flex: none; }
.mw__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.mw__btns { display: flex; gap: .2em; }
.mw__btns i, .mw__x { width: 1.35em; height: 1.2em; display: grid; place-items: center; font-style: normal; font-size: .9em; }
.mw__x { cursor: pointer; }
.mw__body { flex: 1; min-height: 0; overflow: hidden; }

.mw--2000 { background: #d4d0c8; border: 2px outset #fff; }
.mw--2000 .mw__bar { background: linear-gradient(90deg, #0a246a, #a6caf0); color: #fff; }
.mw--2000 .mw__btns i, .mw--2000 .mw__x { background: #d4d0c8; color: #000; border: 1px outset #fff; }
.mw--2000 .mw__body { padding: .5em; }

.mw--xp { background: #ece9d8; border: .2em solid #0831d9; border-top: 0; border-radius: .6em .6em 0 0; }
.mw--xp .mw__bar { background: linear-gradient(180deg, #0997ff, #0053ee 12%, #0050ee 88%, #06f); color: #fff; padding: .35em .35em .35em .6em; text-shadow: 1px 1px #0f1089; }
.mw--xp .mw__btns i { background: #2d6cf0; border: 1px solid #fff; border-radius: .2em; }
.mw--xp .mw__x { background: #e04a2c; color: #fff; border: 1px solid #fff; border-radius: .2em; }

.mw--vista { background: #f3f6f9; border: 1px solid rgba(0,0,0,.6); border-radius: .5em; }
.mw--vista .mw__bar { background: linear-gradient(180deg, rgba(160,200,230,.95), rgba(90,140,180,.95)); color: #0b1a2a; font-weight: 400; }
.mw--vista .mw__title { font-weight: 400; }
.mw--vista .mw__btns i { background: rgba(255,255,255,.35); border-radius: .2em; }
.mw--vista .mw__x { background: linear-gradient(180deg, #e8806a, #c3381f); color: #fff; border-radius: .2em; width: 2.2em; }

.mw--w10 { background: #fff; border: 1px solid #1e73be; }
.mw--w10 .mw__bar { background: #fff; color: #000; font-weight: 400; padding: 0 0 0 .7em; }
.mw--w10 .mw__title { font-weight: 400; }
.mw--w10 .mw__btns { gap: 0; }
.mw--w10 .mw__btns i, .mw--w10 .mw__x { width: 2.6em; height: 2em; }
.mw--w10 .mw__btns i::before { content: ""; width: .8em; border-top: 1px solid #000; }
.mw--w10 .mw__x:hover { background: #e81123; color: #fff; }

/* icons, drawn with CSS */
.ms-ico { display: inline-block; width: 1.4em; height: 1.6em; vertical-align: middle; flex: none; position: relative; border-radius: .12em; }
.ms-ico--txt { background: #fff; border: 1px solid #888; box-shadow: inset 0 .45em 0 -.32em #999, inset 0 .75em 0 -.62em #999; }
.ms-ico--img { background: linear-gradient(180deg, #8ecbff 55%, #3c9a3c 55%); border: 1px solid #555; }
.ms-ico--doc { background: #fff; border: 1px solid #2b579a; box-shadow: inset 0 -.5em 0 #2b579a; }
.ms-ico--vbs { background: #f2e3b3; border: 1px solid #8a6d1f; }
.ms-ico--vbs::after { content: ""; position: absolute; inset: 25% 20%; background: #2a6ebb; border-radius: 50%; }
.ms-ico--x { width: 2.4em; height: 2.4em; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a7a, #d10f00 65%); }
.ms-ico--x::before, .ms-ico--x::after { content: ""; position: absolute; left: 20%; right: 20%; top: calc(50% - .12em); height: .24em; background: #fff; transform: rotate(45deg); }
.ms-ico--x::after { transform: rotate(-45deg); }

.ms-file { display: inline-flex; flex-direction: column; align-items: center; gap: .25em; width: 6.5em; text-align: center; font-size: .85em; word-break: break-word; }
.ms-file .ms-ico { width: 2.2em; height: 2.6em; }

.ms-bar { height: 1.1em; background: #fff; border: 1px solid #7a7a7a; overflow: hidden; }
.ms-bar i { display: block; height: 100%; width: 0; background: #0a246a; transition: width .1s linear; }
.ms-bar--green i { background: linear-gradient(180deg, #7be37b, #1e9e1e); }
.ms-bar--xp { border-radius: .3em; border-color: #686868; padding: 1px; }
.ms-bar--xp i { background: repeating-linear-gradient(90deg, #2fb32f 0 .8em, transparent .8em 1em); }

.ms-gate { display: grid; place-content: center; gap: 1.2em; text-align: center; background: #0b0d12; color: #fff; font-size: 1.25em; padding: 1em; }
.ms-gate p { margin: 0; }
.ms-gate div { display: flex; flex-wrap: wrap; justify-content: center; gap: .7em; }
.ms-gate button { padding: .6em 1.2em; border-radius: .5em; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.08); color: #fff; }
.ms-gate button:first-child { background: #78ffaa; color: #07130c; border-color: #78ffaa; }

/* ------------------------------------------------------------------ ILOVEYOU */
.ms-ol { display: grid; grid-template-columns: 24% 1fr; height: 100%; background: #fff; border: 1px inset #fff; }
.ms-ol__folders { display: flex; flex-direction: column; gap: .4em; padding: .5em; background: #f4f2ec; border-right: 1px solid #aaa; font-size: .9em; }
.ms-ol__main { display: grid; grid-template-rows: 45% 1fr; min-height: 0; }
.ms-ol__list { overflow: hidden; border-bottom: 2px solid #aaa; }
.ms-ol__row { display: grid; grid-template-columns: 28% 1fr 4em; gap: .5em; padding: .15em .5em; border-bottom: 1px solid #eee; font-size: .9em; white-space: nowrap; overflow: hidden; }
.ms-ol__row span { overflow: hidden; text-overflow: ellipsis; }
.ms-ol__row.is-new { font-weight: 700; }
.ms-ol__row.is-sel { background: #0a246a; color: #fff; }
.ms-ol__preview { padding: .6em .8em; overflow: hidden; }
.ms-ol__preview p { margin: 0 0 .6em; }
.ms-attach { display: inline-flex; align-items: center; gap: .4em; padding: .3em .6em; background: #f4f2ec; border: 1px solid #888; }
.ms-attach:hover { background: #e3ecff; }
.ms-hidden-ext { display: none; color: #c00; font-weight: 700; }
.ms-attach.is-revealed .ms-hidden-ext { display: inline; }
.ms-attach.is-revealed { outline: 2px solid #c00; }
.ms-send__to, .ms-send__n { margin: .2em 0 .5em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-files { display: flex; flex-wrap: wrap; gap: .4em; background: #fff; padding: .4em; border: 1px inset #fff; }
.ms-file.is-vbs { color: #c00; }
.ms-world { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; display: grid; gap: .2em; text-align: center; padding: 1em 2em; background: rgba(10,20,40,.92); color: #fff; border: 2px solid #ff5a8a; border-radius: .4em; }
.ms-world b { font-size: 3em; line-height: 1; color: #ff8ab0; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ You Are an Idiot */
.mus-vm__screen[data-exhibit="idiot"] .mw { left: 0; top: 0; will-change: transform; }
.ms-idiot { display: grid; grid-template-columns: repeat(3, 1fr); justify-items: center; gap: .3em; padding: .8em .4em; background: #000; color: #fff; text-align: center; }
.ms-idiot b { grid-column: 1 / -1; font-size: 1.1em; }
.ms-smile { width: 2.6em; height: 2.6em; border-radius: 50%; background:
  radial-gradient(circle at 34% 38%, #000 0 .22em, transparent .24em),
  radial-gradient(circle at 66% 38%, #000 0 .22em, transparent .24em),
  radial-gradient(ellipse 34% 22% at 50% 62%, transparent 60%, #000 62% 78%, transparent 80%) ,
  #ffe600; clip-path: circle(50%); }
.ms-tm { margin-left: .4em; padding: .2em .7em; background: #fff; color: #000; border: 1px solid #0b2f8f; border-radius: .3em; font-weight: 700; box-shadow: 0 0 0 .2em rgba(255,230,0,.8); }

/* ------------------------------------------------------------------ Fake antivirus */
.ms-av { display: flex; flex-direction: column; gap: .6em; height: 100%; padding: .7em; }
.ms-av__head { display: flex; align-items: center; gap: .8em; }
.ms-av__head > div { flex: 1; min-width: 0; display: grid; }
.ms-av__file { font-size: .85em; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ms-av__count { font-size: 2.2em; color: #d10f00; font-variant-numeric: tabular-nums; }
.ms-shield { width: 2.6em; height: 3em; background: linear-gradient(180deg, #ff6a5a, #b00); clip-path: polygon(50% 0, 100% 15%, 92% 65%, 50% 100%, 8% 65%, 0 15%); flex: none; }
.ms-av__table { flex: 1; min-height: 0; overflow: hidden; border: 1px solid #c5ccd4; background: #fff; }
.ms-av__row { display: flex; justify-content: space-between; padding: .2em .6em; border-bottom: 1px solid #eef1f4; font-size: .9em; }
.ms-av__row span:last-child { color: #d10f00; font-weight: 700; }
.ms-av__foot { display: flex; justify-content: flex-end; min-height: 2.6em; }
.ms-buy { padding: .5em 1.4em; border: 1px solid #1a7a1a; border-radius: .3em; background: linear-gradient(180deg, #7be37b, #1e9e1e); color: #fff; font-weight: 700; font-size: 1.05em; text-shadow: 0 1px 1px rgba(0,0,0,.4); }
.ms-balloon { position: absolute; right: 1em; bottom: 3em; z-index: 6; width: 34%; display: grid; gap: .2em; padding: .6em .8em; background: #ffffe1; border: 1px solid #555; border-radius: .5em; box-shadow: 0 .3em .9em rgba(0,0,0,.4); font-size: .9em; }
.ms-balloon b { color: #b00; }
.ms-pay { display: grid; gap: .6em; padding: .8em; }
.ms-pay label { display: grid; gap: .2em; font-size: .9em; }
.ms-pay input { font: inherit; padding: .3em .5em; border: 1px solid #9aa4ad; background: #fff; }
.ms-pay__stop { margin: .2em 0 0; padding: .5em; text-align: center; font-weight: 700; font-size: 1.3em; color: #fff; background: #d10f00; }
.mw.is-pop { animation: ms-pop .25s ease-out; z-index: 7; }
@keyframes ms-pop { from { transform: scale(.85); opacity: 0; } }

/* ------------------------------------------------------------------ Petya */
.ms-bsod { display: flex; align-items: center; padding: 0 12%; background: #0078d7; color: #fff; font-size: 1.3em; }
.ms-bsod p { margin: 0 0 .8em; }
.ms-bsod__face { font-size: 4.5em; line-height: 1; }
.ms-chk, .ms-ransom, .ms-rsod { padding: 1.2em 1.6em; overflow: hidden; }
.ms-chk pre, .ms-skull pre, .ms-ransom pre, .ms-rsod pre { margin: 0; font: 1em/1.35 ui-monospace, Consolas, "Courier New", monospace; white-space: pre-wrap; }
.ms-chk { background: #000; color: #c0c0c0; }
.ms-skull { display: grid; place-items: center; background: #000; color: #ff1a1a; cursor: pointer; }
.ms-skull pre { font-size: .95em; line-height: 1.15; white-space: pre; }
.ms-skull.is-flash { animation: ms-flash-skull 1s steps(1) infinite; }
@keyframes ms-flash-skull { 50% { background: #ff1a1a; color: #000; } }
.ms-ransom { background: #000; color: #ff1a1a; }

/* ------------------------------------------------------------------ MEMZ */
.ms-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ms-cursor { position: absolute; left: 0; top: 0; z-index: 9; width: 1.2em; height: 1.8em; pointer-events: none; background: #fff; clip-path: polygon(0 0, 0 78%, 22% 60%, 38% 100%, 52% 94%, 37% 56%, 66% 56%); filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000); }
.ms-note { margin: 0; padding: .6em .8em; font: .95em/1.4 Consolas, "Courier New", monospace; white-space: pre-wrap; }
.ms-prog { height: 6em; background: linear-gradient(180deg, #f3f3f3, #e2e2e2); }
.ms-memz-end { display: grid; place-content: center; gap: .8em; text-align: center; background: #0d1a4a; color: #fff; font-size: 1.25em; padding: 1em; }
.ms-memz-end p { margin: 0; }
.ms-memz-rain { height: .5em; width: 60%; margin: 0 auto !important; background: linear-gradient(90deg, #ff0000, #ff9900, #ffff00, #33ff00, #0099ff, #6633ff); border-radius: .3em; }

/* ------------------------------------------------------------------ 000.exe */
.ms-road { background: linear-gradient(180deg, #050505 0 45%, #151515 45% 100%); overflow: hidden; }
.ms-road__lines { position: absolute; left: 50%; bottom: 0; width: 2em; height: 55%; transform: translateX(-50%) perspective(10em) rotateX(55deg); transform-origin: bottom; background: repeating-linear-gradient(180deg, #ddd 0 1.5em, transparent 1.5em 3em); animation: ms-road 0.9s linear infinite; }
@keyframes ms-road { to { background-position: 0 3em; } }
.ms-creepy { position: absolute; margin: 0; z-index: 2; color: #e00; font: 700 1em/1 "Courier New", monospace; text-shadow: 0 0 .3em #900; white-space: nowrap; }
.ms-urnext { position: absolute; inset: .6em; z-index: 6; display: flex; flex-flow: column wrap; align-content: flex-start; gap: .3em; pointer-events: none; }
.ms-file--dark { width: 5.4em; color: #fff; text-shadow: 0 1px 2px #000; font-size: .75em; }
.ms-boot { display: grid; place-content: center; justify-items: center; gap: 1em; background: #000; color: #fff; font-size: 1.4em; }
.ms-boot p { margin: 0; }
.ms-spin { width: 2.2em; height: 2.2em; border-radius: 50%; border: .25em solid rgba(255,255,255,.2); border-top-color: #fff; animation: ms-spin 1s linear infinite; }
@keyframes ms-spin { to { transform: rotate(1turn); } }
.ms-login { display: grid; place-content: center; justify-items: center; gap: .5em; background: radial-gradient(circle at 50% 40%, #1f4f8f, #08162e); color: #fff; }
.ms-login p { margin: 0; }
.ms-avatar { width: 7em; height: 7em; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #cfd6e0 0 18%, transparent 19%), radial-gradient(ellipse 34% 26% at 50% 86%, #cfd6e0 99%, transparent 100%), #5b6b80; }
.ms-login__name { font-size: 2em; font-weight: 300; }

/* ------------------------------------------------------------------ WannaCry */
.ms-icons { position: absolute; inset: .6em; display: flex; flex-flow: column wrap; align-content: flex-start; gap: .5em; }
.ms-file--w10 { width: 7.5em; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); overflow-wrap: anywhere; word-break: normal; }
.ms-file.is-locked .ms-ico { background: #d9d9d9; border-color: #777; box-shadow: none; }
.ms-file.is-locked .ms-ico::after { content: "🔒"; position: absolute; inset: auto -.3em -.3em auto; font-size: .9em; }
.ms-desk.is-wncry { background: #000; }
.ms-wncry-wall { position: absolute; left: 0; right: 0; top: 38%; margin: 0; text-align: center; color: #e00; font-weight: 700; font-size: 1.6em; }
.ms-wc { display: grid; grid-template-columns: 30% 1fr; gap: .8em; height: 100%; padding: .8em; background: #8b0000; color: #fff; }
.ms-wc__left { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2em; }
.ms-wc__left p { margin: .6em 0 0; color: #ffd84a; font-size: .85em; }
.ms-wc__left b { font: 700 1.3em/1 ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; }
.ms-lock { width: 4em; height: 4.4em; margin: .4em 0; background:
  linear-gradient(#ffd84a, #e0a800) 0 100% / 100% 62% no-repeat; border-radius: .3em; position: relative; }
.ms-lock::before { content: ""; position: absolute; left: 20%; right: 20%; top: 0; height: 50%; border: .5em solid #e0e0e0; border-bottom: 0; border-radius: 1.4em 1.4em 0 0; }
.ms-wc__right { background: #fff; color: #000; padding: .6em .8em; overflow: hidden; display: flex; flex-direction: column; }
.ms-wc__right h3 { margin: 0 0 .5em; font-size: 1.2em; color: #8b0000; }
.ms-wc__right p { margin: 0 0 .6em; font-size: .9em; }
.ms-wc__addr { font-family: ui-monospace, Consolas, monospace; background: #f1f1f1; padding: .3em .5em; }
.ms-wc__btns { margin-top: auto; display: flex; gap: .6em; }
.ms-wc__btns button { flex: 1; padding: .4em; background: #e1e1e1; border: 1px solid #888; }
.ms-wc__btns button:hover { background: #cde4ff; }

/* ------------------------------------------------------------------ Windows XP Horror Edition */
.ms-xpsetup { display: grid; grid-template-columns: 32% 1fr; background: linear-gradient(180deg, #4a7fd8, #0b3d91); color: #fff; }
.ms-xpsetup__side { padding: 1.2em 1em; background: rgba(0,0,30,.25); display: flex; flex-direction: column; gap: .8em; }
.ms-xpsetup__side > b { font-size: 1.6em; font-style: italic; }
.ms-xpsetup__side sup { color: #f60; font-size: .55em; }
.ms-xpsetup__side ol { margin: 0; padding-left: 1.2em; display: grid; gap: .4em; opacity: .8; }
.ms-xpsetup__side li.is-on { font-weight: 700; opacity: 1; color: #ffd84a; }
.ms-xpsetup__side p { margin: auto 0 0; font-size: .9em; }
.ms-xpsetup__main { display: grid; align-content: center; gap: .6em; padding: 0 12%; }
.ms-xpsetup__main p { margin: 0; }
.ms-xpsetup__pct { font-variant-numeric: tabular-nums; }
.mus-vm__screen[data-exhibit="xphorror"] .mw { z-index: 8; }
.ms-err { display: flex; align-items: center; gap: 1em; padding: 1em; }
.ms-err p { margin: 0; white-space: pre-line; }
.ms-err__btns { display: flex; justify-content: center; padding: 0 0 .8em; }
.ms-err__btns button { min-width: 6em; padding: .25em 1em; background: #fff; border: 1px solid #003c74; border-radius: .25em; }
.ms-red { display: grid; place-content: center; justify-items: center; gap: 1em; background: radial-gradient(circle, #9a0000, #3a0000 75%); color: #fff; }
.ms-red.is-flash { animation: ms-flash-red .9s steps(1) infinite; }
@keyframes ms-flash-red { 50% { background: #e00000; } }
.ms-eye { width: 40cqi; max-width: 60%; height: auto; }
.ms-red__text { margin: 0; font: 700 2em/1 "Courier New", monospace; letter-spacing: .05em; text-shadow: 0 0 .3em #000; }
.ms-rsod { background: #a00000; color: #fff; display: grid; align-content: center; padding: 0 10%; }

/* no flashing or endless motion for people who asked for less of it */
@media (prefers-reduced-motion: reduce) {
  .ms-skull.is-flash, .ms-red.is-flash, .ms-road__lines, .ms-spin, .mw.is-pop { animation: none; }
  .ms-bar i { transition: none; }
}