/* =============================================================
   MUSEUM.EXE — a 90s CD-ROM museum inside a Win98 window.
   Everything happens on a fixed 860×480 stage that museum.js
   scales to fit the window, so art and hotspots always line up.
   ============================================================= */
#win-museum .win-body-inner {
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.museum-fit { position: relative; flex-shrink: 0; }
.museum-stage {
  position: absolute;
  top: 0; left: 0;
  width: 860px;
  height: 480px;
  transform-origin: 0 0;
  overflow: hidden;
  background: #000;
  font-family: "MS Sans Serif", Arial, sans-serif;
  font-size: 12px;
  color: #000;
}
.m-art, .m-art img {
  position: absolute;
  inset: 0;
  width: 860px;
  height: 480px;
  display: block;
  object-fit: cover;
}
/* A room with no art yet */
.m-noart {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse, #1b1f6b, #05061a 70%);
  color: #9fd3ff;
  font: bold 28px Georgia, serif;
}

/* Neon signs over the mall storefronts */
.m-sign {
  position: absolute;
  z-index: 2;
  transform: translate(-50%, -50%);
  pointer-events: none;
  white-space: nowrap;
  padding: 1px 6px;
  font: bold 11px/1.2 "Arial Black", Arial, sans-serif;
  letter-spacing: 1px;
  color: #fff;
  background: rgba(10, 0, 20, 0.55);
  border: 1px solid #ff6ec7;
  border-radius: 4px;
  text-shadow: 0 0 4px #ff6ec7, 0 0 10px #ff2fa8;
  box-shadow: 0 0 8px rgba(255, 46, 168, 0.6), inset 0 0 6px rgba(255, 46, 168, 0.4);
}
.m-sign-off {
  color: #9a8aa0;
  border-color: #5a4a60;
  text-shadow: none;
  box-shadow: none;
}

/* Always-visible way back, in every room but the lobby */
.m-nav {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 4;
  font-weight: bold;
}

/* Résumé panel (a clone of the print résumé) */
.m-resume h1 { font: bold 18px Georgia, serif; margin-bottom: 2px; }
.m-resume h2 { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid #808080; margin: 10px 0 4px; color: #000080; }
.m-resume h3 { font-size: 11px; margin: 6px 0 1px; color: #000; }
.m-resume .r-contact, .m-resume .r-meta { font-size: 10px; color: #444; }
.m-resume ul { margin: 2px 0 4px 16px; }
.m-resume li, .m-resume p { font-size: 10.5px; margin-bottom: 2px; }
.m-resume .r-skills-grid div { font-size: 10.5px; margin-bottom: 2px; }

/* Hotspots: SVG polygons traced around each object. Invisible until
   hovered or focused, then the object's outline glows, 90s style. */
.m-hotspots, .m-hotsvg {
  position: absolute;
  inset: 0;
  width: 860px;
  height: 480px;
}
.m-hotsvg { overflow: visible; }
.m-hot {
  fill: transparent;
  stroke: transparent;
  stroke-width: 2;
  stroke-linejoin: round;
  pointer-events: all;
  outline: none;
  transition: fill 0.12s, stroke 0.12s;
}
.m-hot:hover, .m-hot:focus-visible {
  fill: rgba(255, 225, 77, 0.10);
  stroke: #ffe14d;
  filter: drop-shadow(0 0 4px rgba(255, 225, 77, 0.9));
}
.m-hot.m-closed:hover, .m-hot.m-closed:focus-visible {
  fill: rgba(0, 0, 0, 0.18);
  stroke: #9a9a9a;
  filter: none;
}

/* Status bar along the bottom, like a CD-ROM title */
.m-status {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 24px;
  background: linear-gradient(#202020, #000);
  border-top: 1px solid #555;
  color: #ffe14d;
  font: bold 12px/24px "Courier New", monospace;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  z-index: 5;
  pointer-events: none;
}
.m-status .m-room { color: #9fd3ff; }

/* Docent: pixel Derek with a speech bubble */
.m-docent {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.m-bubble {
  position: absolute;
  z-index: 4;
  max-width: 250px;
  background: #fffbe6;
  border: 2px solid #000;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.4;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.5);
  white-space: pre-wrap;
}
/* Tail points left, toward the docent */
.m-bubble::after {
  content: "";
  position: absolute;
  left: -14px; top: 16px;
  border: 7px solid transparent;
  border-right-color: #000;
}
.m-bubble .m-bubble-to { font-weight: bold; color: #000080; display: block; margin-bottom: 3px; }
.m-bubble-close {
  float: right;
  margin: -4px -4px 0 6px;
  border: none;
  background: none;
  font-weight: bold;
  font-size: 11px;
}

/* Panels: Win98-style windows inside the stage */
.m-panel-backdrop {
  position: absolute;
  inset: 0 0 24px 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-panel {
  width: 640px;
  max-height: 440px;
  display: flex;
  flex-direction: column;
  background: #d4d0c8;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
  box-shadow: 3px 3px 0 #000;
}
.m-panel-title {
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3px 0 6px;
  background: linear-gradient(to right, #000080, #1084d0);
  color: #fff;
  font-weight: bold;
  font-size: 11px;
}
.m-panel-x {
  width: 16px; height: 14px;
  padding: 0;
  background: #d4d0c8;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  font: bold 9px/1 "Courier New", monospace;
}
.m-panel-body {
  padding: 10px 12px;
  overflow: auto;
  font-size: 11px;
  line-height: 1.5;
}
.m-panel-body h3 { font-size: 15px; margin-bottom: 6px; color: #000080; }
.m-panel-body p { margin-bottom: 8px; }
.m-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 10px; }
.m-tag {
  background: #fff;
  border: 1px solid #808080;
  padding: 1px 6px;
  font-size: 10px;
}
.m-links { display: flex; flex-wrap: wrap; gap: 6px; }
.m-btn, .m-links a {
  display: inline-block;
  padding: 3px 10px;
  background: #d4d0c8;
  color: #000;
  text-decoration: none;
  font: 11px "MS Sans Serif", Arial, sans-serif;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #404040;
  border-bottom: 2px solid #404040;
}
.m-btn:active, .m-links a:active {
  border-top-color: #404040; border-left-color: #404040;
  border-right-color: #fff; border-bottom-color: #fff;
}
.m-btn.m-primary { font-weight: bold; }
.m-btn:disabled { color: #808080; }

/* Splash: the CD-ROM title screen */
.m-splash {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: radial-gradient(ellipse at 50% 40%, #1b1f6b, #05061a 70%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}
.m-cd {
  width: 110px; height: 110px;
  border-radius: 50%;
  background:
    radial-gradient(circle, #05061a 0 12%, #c0c0c0 12% 15%, transparent 15%),
    conic-gradient(#f0f0f0, #9ad7ff, #f7a8ff, #fff6a0, #a8ffc4, #f0f0f0);
  box-shadow: 0 0 30px rgba(154, 215, 255, 0.4);
  animation: mSpin 2.4s linear infinite;
}
@keyframes mSpin { to { transform: rotate(360deg); } }
.m-logo {
  font: bold 30px/1.05 Georgia, "Times New Roman", serif;
  letter-spacing: 1px;
  background: linear-gradient(#fff 0%, #cfe8ff 45%, #6aa8e8 50%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(2px 2px 0 #000);
}
.m-edition { font: 12px "Courier New", monospace; color: #ffe14d; letter-spacing: 3px; }
.m-loadbar {
  width: 260px; height: 14px;
  background: #000;
  border: 2px inset #808080;
}
.m-loadbar > div {
  height: 100%;
  width: 0;
  background: repeating-linear-gradient(90deg, #1084d0 0 10px, #000080 10px 12px);
  transition: width 0.25s linear;
}
.m-enter { display: flex; gap: 18px; }
.m-click {
  background: none;
  border: 1px solid transparent;
  padding: 4px 8px;
  font: bold 13px "Courier New", monospace;
  color: #9fd3ff;
}
.m-click:first-child { animation: mBlink 1s step-end infinite; }
.m-click:hover, .m-click:focus-visible { color: #ffe14d; border-color: #ffe14d; animation: none; outline: none; }

/* Speaker toggle at the right of the status bar */
.m-sound {
  pointer-events: auto;
  background: none;
  border: none;
  padding: 0 0 0 10px;
  font-size: 14px;
  line-height: 24px;
}
@keyframes mBlink { 50% { opacity: 0; } }

/* Canary Lab simulation */
.cl-grid { display: grid; grid-template-columns: 150px 1fr; gap: 10px; }
.cl-controls label { display: block; font-weight: bold; margin-top: 8px; }
.cl-controls input[type=range] { width: 100%; }
.cl-val { font-family: "Courier New", monospace; color: #000080; }
.cl-baseline { margin-top: 10px; padding: 6px; background: #fff; border: 1px solid #808080; font-size: 10px; }
.cl-run { margin-top: 12px; width: 100%; }
.cl-screen {
  background: #001a00;
  color: #3dff3d;
  font: 10px/1.4 "Courier New", monospace;
  padding: 6px 8px;
  border: 2px inset #808080;
  min-height: 250px;
  min-width: 0;
  overflow: hidden;
}
.cl-lanes { position: relative; height: 54px; margin-bottom: 6px; }
.cl-lane { position: absolute; left: 0; right: 0; height: 22px; border-bottom: 1px dashed #1f6b1f; }
.cl-lane span { position: absolute; right: 2px; top: 3px; font-size: 10px; }
.cl-lane.base { top: 2px; }
.cl-lane.can { top: 28px; color: #ffe14d; }
.cl-dot {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #3dff3d;
  top: 8px;
  animation: clRun 1.1s linear forwards;
}
.cl-lane.can .cl-dot { background: #ffe14d; }
@keyframes clRun { from { left: 0; } to { left: 75%; } }
.cl-hist { display: block; width: 100%; height: 70px; background: #000; border: 1px solid #1f6b1f; }
.cl-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.cl-table th, .cl-table td { text-align: left; padding: 1px 3px; border-bottom: 1px solid #1f4f1f; white-space: nowrap; }
.cl-pass { color: #3dff3d; }
.cl-fail { color: #ff5a5a; }
.cl-warn { color: #ffe14d; }
.cl-verdict { margin-top: 8px; padding: 6px; border: 2px solid currentColor; font-weight: bold; text-align: center; }
.cl-human { display: flex; gap: 6px; justify-content: center; margin-top: 6px; }

/* ELI5 cards */
.e5-card { background: #fffef2; border: 1px solid #c8b560; padding: 10px 12px; box-shadow: 2px 2px 0 rgba(0,0,0,0.2); }
.e5-card p { font-size: 13px; line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
  .m-cd, .m-click { animation: none; }
  .cl-dot { display: none; }
}