/* ==========================================================================
   Windows XP desktop theme
   Loaded after styles.css + vendor/xp/XP.css
   - .xp-desktop : listing pages (game-design / apps / tutorials) as a desktop
   - .xp-embed   : sub-pages loaded inside a popup window iframe
   ========================================================================== */

/* ---------- Screen-reader-only ---------- */
.xp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   DESKTOP
   ========================================================================== */

body.xp-desktop {
  margin: 0;
  min-height: 100vh;
  padding-bottom: 30px; /* taskbar */
  font-family: Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: #000;
  overflow-x: hidden;
  background-color: #3a6ea5;
  background-image:
    /* clouds */
    radial-gradient(ellipse 300px 64px at 17% 17%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 210px 48px at 26% 20%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 340px 70px at 74% 12%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 68%),
    radial-gradient(ellipse 230px 50px at 83% 16%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 72%),
    radial-gradient(ellipse 190px 42px at 47% 27%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 74%),
    radial-gradient(ellipse 150px 34px at 60% 33%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 76%),
    /* rolling hill (crisp Bliss horizon, crest ~75% at x=48%) */
    radial-gradient(ellipse 150% 60% at 48% 135%, #4f9c22 0 52%, #5cb12a 98%, rgba(92, 177, 42, 0) 100%),
    /* sky */
    linear-gradient(180deg,
      #1c55bd 0%,
      #3a80dd 24%,
      #6faded 46%,
      #a6d3f5 62%,
      #cfe9fb 73%,
      #e9f6fd 79%,
      #f4fbff 86%,
      #f8fdff 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

body.xp-desktop :focus-visible {
  outline: 1px dotted #000;
  outline-offset: 1px;
}

.xp-desktop .skip-link {
  background: #ece9d8;
  color: #000;
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  font-family: Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  font-size: 11px;
  z-index: 1200;
}

.xp-desktop .skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.xp-desktop .bg-decor {
  display: none;
}

.xp-noscript {
  max-width: 46ch;
  margin: 16px 14px 0;
  padding: 10px 12px;
  color: #fff;
  font-size: 12px;
  line-height: 1.5;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
}

.xp-noscript a {
  color: #ffe98a;
  text-decoration: underline;
}

/* ---------- Stage (desktop area) ---------- */
.xp-stage {
  position: relative;
  z-index: 1;
  min-height: calc(100vh - 30px);
}

/* ---------- Desktop icons ---------- */
.xp-icons {
  list-style: none;
  margin: 0;
  padding: 14px 10px 72px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 2px;
}

.xp-icons > li {
  flex: 0 0 auto;
  width: 96px;
  list-style: none;
}

.xp-icon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 96px;
  padding: 7px 4px;
  border: 1px dotted transparent;
  border-radius: 2px;
  color: #fff;
  text-align: center;
  font-size: 11px;
  line-height: 1.3;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.95), 0 0 5px rgba(0, 0, 0, 0.6);
}

.xp-icon:hover {
  background: rgba(49, 106, 197, 0.4);
  text-decoration: none;
}

.xp-icon.is-selected,
.xp-icon:focus-visible {
  background: rgba(49, 106, 197, 0.75);
  border-color: rgba(255, 255, 255, 0.85);
  outline: none;
  text-decoration: none;
}

.xp-icon__frame {
  position: relative;
  display: block;
  width: 48px;
  height: 48px;
}

.xp-icon__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.xp-icon__label {
  display: block;
  overflow-wrap: anywhere;
}

/* Windows shortcut arrow badge */
.xp-icon--shortcut .xp-icon__frame::after {
  content: "";
  position: absolute;
  left: -3px;
  bottom: -3px;
  width: 15px;
  height: 15px;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2.5 7.5 L7.5 2.5 M4.2 2.5 H7.5 V5.8' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") center / 9px no-repeat;
  border: 1px solid #7f9db9;
}

/* ---------- Explorer task pane (inside folder windows) ---------- */
.xp-pane {
  flex: none;
  width: 194px;
  padding: 10px 8px;
  overflow-y: auto;
  font-family: Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  font-size: 11px;
  background:
    linear-gradient(180deg, #7ba2e7 0%, #74a0e9 14%, #6d97e8 55%, #658ee6 100%);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.15);
}

.xp-pane-group {
  margin-bottom: 14px;
  background: linear-gradient(180deg, #f0f4fd 0%, #dbe5fa 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(31, 63, 143, 0.25);
  overflow: hidden;
}

.xp-pane-head {
  margin: 0;
  padding: 4px 9px;
  font-family: Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
  background: linear-gradient(90deg, #5572cf 0%, #7b9de8 55%, #9db8f2 100%);
}

.xp-pane-body {
  padding: 8px 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #14264f;
}

.xp-pane-preview {
  display: flex;
  align-items: center;
  gap: 9px;
}

.xp-pane-preview img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  flex: none;
}

.xp-pane-title {
  margin: 0;
  font-weight: 700;
  font-size: 11px;
  color: #1c3f8f;
  overflow-wrap: anywhere;
}

.xp-pane-tags {
  margin: 0;
  font-size: 10px;
  color: #4a5f8f;
  font-style: italic;
}

.xp-pane-desc {
  margin: 0;
  font-size: 11px;
  line-height: 1.45;
  color: #24365f;
}

.xp-pane-links {
  gap: 5px;
}

.xp-pane-links a {
  color: #215dc6;
  text-decoration: none;
}

.xp-pane-links a:hover,
.xp-pane-links a:focus-visible {
  text-decoration: underline;
}

/* ---------- Folder windows ---------- */
.xp-desktop .window--folder .window-body {
  flex-direction: column;
  background: #ece9d8;
}

.xp-folder {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.xp-folder__view {
  flex: 1 1 auto;
  min-width: 0;
  margin: 3px 3px 3px 0;
  overflow: auto;
  background: #fff;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #dfdfdf,
    inset -2px -2px grey,
    inset 2px 2px #fff;
}

.xp-desktop .window--folder .status-bar {
  flex: none;
  margin: 0 1px;
}

.xp-desktop .window--folder .status-bar-field {
  font-family: Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  font-size: 11px;
}

/* Icons shown inside a folder window (Explorer file view) */
.xp-icons--window {
  padding: 10px 8px 16px;
  gap: 6px;
}

.xp-icons--window > li {
  width: 92px;
}

.xp-icons--window .xp-icon {
  width: 92px;
  color: #000;
  text-shadow: none;
}

.xp-icons--window .xp-icon__label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.xp-icons--window .xp-icon:hover {
  background: rgba(49, 106, 197, 0.16);
}

.xp-icons--window .xp-icon.is-selected,
.xp-icons--window .xp-icon:focus-visible {
  background: #316ac5;
  color: #fff;
}

/* Folders use the folder artwork as-is */
.xp-icon--folder .xp-icon__frame img {
  object-fit: contain;
}

.xp-pane-head {
  border-radius: 4px 4px 0 0;
}

.xp-pane-group > .xp-pane-head + .xp-pane-body {
  border-radius: 0 0 4px 4px;
}

/* ---------- Popup application windows ---------- */
.xp-desktop .window {
  position: fixed;
  left: 24px;
  top: 32px;
  width: min(780px, calc(100vw - 48px));
  height: min(560px, calc(100vh - 96px));
  min-width: 0;
  min-height: 0;
  max-width: calc(100vw - 8px);
  max-height: calc(100vh - 38px);
  display: none;
  flex-direction: column;
  z-index: 50;
  font-family: Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  filter: drop-shadow(3px 6px 10px rgba(0, 0, 0, 0.45));
}

.xp-desktop .window.is-open {
  display: flex;
  animation: xp-window-in 170ms ease-out;
}

@keyframes xp-window-in {
  from {
    opacity: 0;
    transform: scale(0.86) translateY(14px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.xp-desktop .window.is-maximized {
  filter: none;
}

.xp-desktop .window.is-minimized {
  display: none;
}

.xp-desktop .window.is-minimized.is-open {
  animation: none;
}

/* Title bar: drag surface + inactive variant (active uses XP.css Luna gradient) */
.xp-desktop .title-bar {
  cursor: move;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.xp-desktop .window:not(.is-active) .title-bar {
  background: linear-gradient(180deg,
    #a7bfef 0%,
    #90a9e4 8%,
    #8ba4e2 40%,
    #839ce0 88%,
    #7f99df 93%,
    #829ce1 95%,
    #7189d6 96%,
    #7189d6 100%);
  border-top-color: #9db3e8;
  border-left-color: #9db3e8;
  border-right-color: #6c84cd;
}

.xp-desktop .window:not(.is-active) .title-bar-text {
  color: #e8edfb;
}

.xp-desktop .title-bar-text {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.xp-desktop .title-bar-text .title-bar__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xp-desktop .title-bar__icon {
  width: 16px;
  height: 16px;
  flex: none;
  object-fit: contain;
}

.xp-desktop .title-bar-controls button {
  width: 21px;
  height: 21px;
  min-width: 21px;
  min-height: 21px;
  padding: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 21px 21px;
  box-shadow: none;
  cursor: default;
}

.xp-desktop .title-bar-controls button:focus-visible {
  outline: 1px dotted rgba(255, 255, 255, 0.9);
  outline-offset: -4px;
}

/* Full-bleed iframe body */
.xp-desktop .window-body {
  margin: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  background: #ece9d8;
}

.xp-desktop .window-body iframe {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #ece9d8;
}

/* ---------- Message box dialog ---------- */
.xp-desktop .window--dialog {
  width: min(380px, calc(100vw - 16px));
  height: auto;
}

.xp-desktop .window--dialog .window-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 14px 12px;
  background: #ece9d8;
}

.xp-msgbox__icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #8ec0ff 0%, #2f6fd6 55%, #1a4fae 100%);
  color: #fff;
  font: italic bold 20px/32px "Trebuchet MS", Tahoma, sans-serif;
  text-align: center;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.xp-msgbox__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.xp-msgbox__text {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: #000;
}

/* ---------- Windows Media Player ---------- */
.xp-desktop .window--wmp .window-body {
  flex-direction: column;
  padding: 2px;
  background: linear-gradient(180deg, #5b91e0 0%, #2f6ac6 45%, #1c4fa8 100%);
}

.wmp {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  font-family: Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  color: #000;
  background: linear-gradient(180deg, #f2f5fb 0%, #d3dcee 100%);
}

/* Menu strip */
.wmp__menu {
  flex: none;
  display: flex;
  gap: 15px;
  padding: 4px 9px 5px;
  background: linear-gradient(180deg, #fdfdfd 0%, #eef1f7 100%);
  border-bottom: 1px solid #b7c1d8;
  font-size: 11px;
  cursor: default;
  user-select: none;
}

.wmp__menu span:hover {
  color: #1c3f8f;
  text-decoration: underline;
}

/* Seek row */
.wmp__seekrow {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 4px;
  background: linear-gradient(180deg, #e2e7f1 0%, #c8d1e4 100%);
  border-bottom: 1px solid #9aa6c0;
}

.wmp .wmp__seek {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 15px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.wmp .wmp__seek::-webkit-slider-runnable-track {
  height: 9px;
  background-color: #ccd4e5;
  background-image: linear-gradient(180deg, #7cbcff 0%, #2b7bd8 100%);
  background-repeat: no-repeat;
  background-size: var(--wmp-progress, 0%) 100%;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.4), inset -1px -1px 0 rgba(255, 255, 255, 0.85);
}

.wmp .wmp__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 17px;
  margin-top: -4px;
  border-radius: 2px;
  border: 1px solid #56648a;
  background: linear-gradient(180deg, #ffffff 0%, #d6ddef 55%, #a9b8d6 100%);
  box-shadow: inset 1px 1px 0 #fff;
}

.wmp .wmp__seek::-moz-range-track {
  height: 9px;
  background-color: #ccd4e5;
  background-image: linear-gradient(180deg, #7cbcff 0%, #2b7bd8 100%);
  background-repeat: no-repeat;
  background-size: var(--wmp-progress, 0%) 100%;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.4);
}

.wmp .wmp__seek::-moz-range-thumb {
  width: 9px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid #56648a;
  background: linear-gradient(180deg, #ffffff 0%, #d6ddef 55%, #a9b8d6 100%);
}

.wmp__seekbtns {
  display: flex;
  gap: 3px;
}

.wmp__mini {
  width: 20px;
  height: 17px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid #8794b2;
  border-radius: 2px;
  background: linear-gradient(180deg, #f6f8fc 0%, #ccd5e8 100%);
  box-shadow: inset 0 1px 0 #fff;
  cursor: default;
}

.wmp__mini::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: center / 13px 13px no-repeat;
}

.wmp__mini--eq::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 11V6M6 11V3M9 11V7M12 11V4' stroke='%233c5b8f' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.wmp__mini--view::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='2' y='3' width='10' height='8' rx='1' fill='none' stroke='%233c5b8f' stroke-width='1.3'/%3E%3Cpath d='M2 8.5 5 6l3 2.5 2-1.5 2 1.5' fill='none' stroke='%233c5b8f' stroke-width='1.2'/%3E%3C/svg%3E");
}

/* Video stage + playlist */
.wmp__main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  background: #000;
  border-top: 1px solid #7180a1;
  border-bottom: 1px solid #7180a1;
}

.wmp__stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  background: #000;
}

.wmp__stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.wmp__playlist {
  flex: none;
  width: 170px;
  overflow-y: auto;
  padding: 7px;
  font-size: 11px;
  background: linear-gradient(180deg, #e9effb 0%, #ccd8ef 100%);
  border-left: 1px solid #7f8dab;
}

.wmp__playlist[hidden] {
  display: none;
}

.wmp__playlist-head {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  color: #1c3f8f;
}

.wmp__playlist-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wmp__track {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px;
  border-radius: 2px;
}

.wmp__track img {
  width: 30px;
  height: 21px;
  object-fit: cover;
  flex: none;
  border: 1px solid #8d99b5;
}

.wmp__track.is-current {
  background: #316ac5;
  color: #fff;
}

.wmp__track span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Transport bar */
.wmp__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: linear-gradient(180deg, #86addf 0%, #4d80cf 42%, #2e60b6 100%);
  border-top: 1px solid #cadcf8;
}

.wmp__bar-left,
.wmp__bar-center,
.wmp__bar-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wmp__bar-left {
  flex: 1 1 0;
  justify-content: flex-start;
}

.wmp__bar-center {
  flex: none;
}

.wmp__bar-right {
  flex: 1 1 0;
  justify-content: flex-end;
}

.wmp__btn {
  position: relative;
  width: 26px;
  height: 26px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid #1d3f7e;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 26%, #c6ddff 0%, #6ba1e6 45%, #2a5bb5 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.75), 0 1px 2px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.wmp__btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.wmp__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: center / 12px 12px no-repeat;
}

.wmp__btn--play {
  width: 40px;
  height: 40px;
  background: radial-gradient(circle at 34% 24%, #ffffff 0%, #a8d4ff 26%, #3379de 64%, #16409a 100%);
}

.wmp__btn--play::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 1.4 10.4 6 2.6 10.6z' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 15px 15px;
}

.wmp__btn--play.is-playing::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 1.6h2.6v8.8H2.6zM6.8 1.6h2.6v8.8H6.8z' fill='%23fff'/%3E%3C/svg%3E");
}

.wmp__btn--rewind::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6.2 1.9 1.6 6l4.6 4.1zM11 1.9 6.4 6 11 10.1z' fill='%23fff'/%3E%3C/svg%3E");
}

.wmp__btn--prev::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M8.6 2 3.6 6l5 4z' fill='%23fff'/%3E%3C/svg%3E");
}

.wmp__btn--next::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.4 2l5 4-5 4z' fill='%23fff'/%3E%3C/svg%3E");
}

.wmp__btn--skin::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2.6h8M2 6h8M2 9.4h8' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.wmp__btn--mute::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.6 4.5h2.2L6.4 2.2v7.6L3.8 7.5H1.6z' fill='%23fff'/%3E%3Cpath d='M8 4.3a2.6 2.6 0 0 1 0 3.4M9.6 3.1a4.5 4.5 0 0 1 0 5.8' fill='none' stroke='%23fff' stroke-width='1.1' stroke-linecap='round'/%3E%3C/svg%3E");
}

.wmp__btn--mute.is-muted::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.6 4.5h2.2L6.4 2.2v7.6L3.8 7.5H1.6z' fill='%23fff'/%3E%3Cpath d='M8 4.2l3.2 3.4M11.2 4.2 8 7.6' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.wmp__btn--full::before {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.8V2h2.8M10 4.8V2H7.2M2 7.2V10h2.8M10 7.2V10H7.2' fill='none' stroke='%23fff' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.wmp__time {
  min-width: 66px;
  text-align: center;
  font-size: 11px;
  color: #eef4ff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.wmp .wmp__vol {
  -webkit-appearance: none;
  appearance: none;
  width: 86px;
  height: 15px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.wmp .wmp__vol::-webkit-slider-runnable-track {
  height: 6px;
  background-color: #123a72;
  background-image: linear-gradient(180deg, #c4ff8c 0%, #3fae1c 100%);
  background-repeat: no-repeat;
  background-size: var(--wmp-progress, 70%) 100%;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.wmp .wmp__vol::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 15px;
  margin-top: -5px;
  border-radius: 1px;
  border: 1px solid #2c3d5c;
  background: linear-gradient(180deg, #ffffff 0%, #d9e2f2 60%, #aebbd6 100%);
}

.wmp .wmp__vol::-moz-range-track {
  height: 6px;
  background-color: #123a72;
  background-image: linear-gradient(180deg, #c4ff8c 0%, #3fae1c 100%);
  background-repeat: no-repeat;
  background-size: var(--wmp-progress, 70%) 100%;
}

.wmp .wmp__vol::-moz-range-thumb {
  width: 7px;
  height: 14px;
  border-radius: 1px;
  border: 1px solid #2c3d5c;
  background: linear-gradient(180deg, #ffffff 0%, #d9e2f2 60%, #aebbd6 100%);
}

/* Compact / mobile */
@media (max-width: 700px) {
  .wmp__menu {
    gap: 11px;
  }

  .wmp .wmp__vol {
    width: 62px;
  }

  .wmp__time {
    min-width: 54px;
  }
}

@media (max-width: 560px) {
  .wmp__bar-center {
    display: none;
  }

  .wmp__playlist {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    width: 62%;
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.45);
  }

  .wmp__main {
    position: relative;
  }

  .wmp__btn--play {
    width: 34px;
    height: 34px;
  }
}


/* ---------- Date and Time Properties ---------- */
.xp-desktop .window--datetime {
  height: auto;
}

.xp-desktop .window--datetime .window-body {
  display: block;
  padding: 12px 14px;
  background: #ece9d8;
  max-height: calc(100vh - 92px);
  overflow: auto;
}

.dt {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  font-family: Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  font-size: 11px;
  color: #000;
}

.dt__group {
  flex: 1 1 176px;
  min-width: 0;
  margin: 0;
  padding: 10px 10px 12px;
  border: 1px solid #a3a3a3;
  border-radius: 2px;
  background: #ece9d8;
}

.dt__group legend {
  padding: 0 4px;
  color: #0000a8;
  font-size: 11px;
}

.dt__pickers {
  display: flex;
  gap: 8px;
  margin: 0 0 8px;
}

.dt__combo,
.dt__spin {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 94px;
  padding: 2px 2px 2px 6px;
  background: #fff;
  border: 1px solid #7f9db9;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.08);
  cursor: default;
}

.dt__spin {
  min-width: 66px;
}

.dt__arrow::before {
  content: "\25BC";
  font-size: 6px;
  color: #000;
  padding: 0 4px;
  border-left: 1px solid #dfdfdf;
}

.dt__spin-arrows::before {
  content: "\25B2\A\25BC";
  white-space: pre;
  font-size: 5px;
  line-height: 1.1;
  color: #000;
  padding: 0 3px;
  border-left: 1px solid #dfdfdf;
}

.dt__cal {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #7f9db9;
  table-layout: fixed;
}

.dt__cal th {
  padding: 2px 0;
  color: #0000a8;
  font-size: 10px;
  font-weight: 400;
  text-align: center;
}

.dt__cal td {
  height: 17px;
  font-size: 10px;
  text-align: center;
  vertical-align: middle;
  color: #000;
}

.dt__cal td.is-today {
  box-shadow: inset 0 0 0 1px #000;
}

.dt__clock {
  display: flex;
  justify-content: center;
  padding: 2px 0 8px;
}

.dt__face {
  width: 134px;
  height: 134px;
}

.dt__tick {
  fill: #3c4a66;
}

.dt__hour {
  fill: #0f6f61;
}

.dt__min {
  fill: #16213a;
}

.dt__sec {
  fill: #b02020;
}

.dt__pin {
  fill: #16213a;
}

.dt__hour,
.dt__min,
.dt__sec {
  transform-box: view-box;
  transform-origin: 50% 50%;
}

.dt__digital-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
}

.dt__digital {
  width: 104px;
  padding: 3px 6px;
  background: #fff;
  border: 1px solid #7f9db9;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.08);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.dt__digital-spin {
  display: inline-flex;
  padding: 2px 3px;
  background: #fff;
  border: 1px solid #7f9db9;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.08);
  cursor: default;
}

.dt__actions {
  flex: 1 1 100%;
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.dt__actions button {
  min-width: 74px;
}

@media (max-width: 560px) {
  .dt {
    flex-direction: column;
    align-items: stretch;
  }

  .dt__group {
    flex: 1 1 auto;
    width: 100%;
  }

  .dt__actions {
    justify-content: center;
  }
}

/* ---------- Taskbar ---------- */
.xp-desktop .taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  display: flex;
  align-items: stretch;
  z-index: 1000;
  font-family: Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  background: linear-gradient(180deg,
    #1f66d6 0%,
    #3f8cf3 4%,
    #2b6fe2 9%,
    #245edb 14%,
    #245edb 84%,
    #1e52c4 92%,
    #1941a5 100%);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.15) inset;
}

/* Start button */
.xp-start {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0 24px 1px 8px;
  border: none;
  border-radius: 0 10px 10px 0;
  background: linear-gradient(180deg,
    #5ba747 0%,
    #4a9a37 6%,
    #3f8f33 22%,
    #36872b 74%,
    #2c7a22 92%,
    #1e5c16 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 1px 0 0 rgba(255, 255, 255, 0.2),
    2px 0 4px rgba(0, 0, 0, 0.25);
  color: #fff;
  font: italic 700 15px/1 "Trebuchet MS", Tahoma, sans-serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.55);
  cursor: default;
}

.xp-start .xp-flag {
  width: 17px;
  height: 17px;
  flex: none;
}

.xp-desktop .taskbar .xp-start:active,
.xp-desktop .taskbar .xp-start[aria-expanded="true"] {
  background: linear-gradient(180deg, #2c7a22 0%, #256b1c 40%, #1b5413 100%);
  box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.45);
}

/* Task buttons */
.xp-tasks {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 6px;
  overflow: hidden;
}

.xp-desktop .xp-task {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 1 175px;
  min-width: 44px;
  min-height: 0;
  height: 23px;
  margin: 0;
  padding: 0 8px;
  border: none;
  border-radius: 3px;
  background: linear-gradient(180deg, #4a93f7 0%, #3276e8 8%, #2b6ae2 45%, #245edb 80%, #1f56cc 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 1px 0 0 rgba(255, 255, 255, 0.15),
    inset -1px -1px 0 rgba(0, 0, 0, 0.25);
  color: #fff;
  font: 11px/1 Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
  cursor: default;
  overflow: hidden;
}

.xp-desktop .xp-task img {
  width: 16px;
  height: 16px;
  object-fit: cover;
  flex: none;
}

.xp-task__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xp-desktop .taskbar .xp-task.is-active {
  background: linear-gradient(180deg, #1f56c4 0%, #1c4db4 50%, #1945a4 100%);
  box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.5);
}

.xp-desktop .taskbar .xp-task:active {
  box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.5);
}

/* System tray */
.xp-desktop .taskbar__tray {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding: 0 12px 0 14px;
  background: linear-gradient(180deg,
    #18a4ef 0%,
    #1596e6 6%,
    #118fe0 40%,
    #0f83d4 80%,
    #0d76c4 94%,
    #0b68b2 100%);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.3), inset 2px 0 0 rgba(0, 0, 0, 0.12);
  color: #fff;
}

.xp-clock {
  min-width: 58px;
  min-height: 0;
  margin: 0;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  box-shadow: none;
  font-family: Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}

.xp-clock:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.18);
}

.xp-clock:active {
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.xp-clock:focus-visible {
  outline: 1px dotted #fff;
  outline-offset: -3px;
}

/* Audio player living inside the tray */
.xp-desktop .taskbar__tray .audio-player {
  position: static;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  z-index: auto;
  transition: none;
}

.xp-desktop .taskbar__tray .audio-player:hover {
  transform: none;
  box-shadow: none;
}

.xp-desktop .taskbar__tray .audio-player__btn {
  width: 22px;
  height: 22px;
  border-radius: 2px;
  background: linear-gradient(180deg, #4f92f5 0%, #2e6fe0 45%, #245edb 100%);
  border: 1px solid #1941a5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #fff;
}

.xp-desktop .taskbar__tray .audio-player__btn:active {
  transform: none;
  box-shadow: inset 1px 2px 3px rgba(0, 0, 0, 0.45);
}

.xp-desktop .taskbar__tray .audio-player__btn .icon {
  width: 11px;
  height: 11px;
}

.xp-desktop .taskbar__tray .audio-player__info {
  flex-direction: column;
  gap: 0;
}

.xp-desktop .taskbar__tray .audio-player__label {
  display: none;
}

.xp-desktop .taskbar__tray .audio-player__track {
  font-size: 11px;
  font-weight: 400;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.xp-desktop .taskbar__tray .audio-player__volume {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 0;
  border-left: none;
  padding-left: 0;
}

.xp-desktop .taskbar__tray .audio-player__vol-icon {
  color: #fff;
}

.xp-desktop .taskbar__tray .audio-player__slider {
  -webkit-appearance: none;
  appearance: none;
  width: 64px;
  height: 14px;
  margin: 0;
  background: transparent;
  border-radius: 0;
  outline: none;
  cursor: pointer;
}

.xp-desktop .taskbar__tray .audio-player__slider::-webkit-slider-runnable-track {
  height: 5px;
  background: linear-gradient(180deg, #073f7c 0%, #0c5aa4 100%);
  border-radius: 0;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.4);
}

.xp-desktop .taskbar__tray .audio-player__slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 9px;
  height: 15px;
  margin-top: -5px;
  border-radius: 1px;
  background: linear-gradient(180deg, #ffffff 0%, #e8e4dc 55%, #cfcac0 100%);
  border: 1px solid #404040;
  box-shadow: inset 1px 1px 0 #fff;
}

.xp-desktop .taskbar__tray .audio-player__slider::-moz-range-track {
  height: 5px;
  background: linear-gradient(180deg, #073f7c 0%, #0c5aa4 100%);
  border-radius: 0;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.4);
}

.xp-desktop .taskbar__tray .audio-player__slider::-moz-range-thumb {
  width: 8px;
  height: 14px;
  border-radius: 1px;
  background: linear-gradient(180deg, #ffffff 0%, #e8e4dc 55%, #cfcac0 100%);
  border: 1px solid #404040;
  box-shadow: inset 1px 1px 0 #fff;
}

/* ---------- Start menu (repurposed #mobile-menu) ---------- */
.xp-desktop .mobile-menu {
  position: fixed;
  inset: 0 0 30px 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 950;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.xp-desktop .mobile-menu.active {
  opacity: 1;
  pointer-events: auto;
}

.xp-desktop .mobile-nav {
  position: relative;
  width: min(246px, calc(100vw - 8px));
  max-height: calc(100vh - 46px);
  overflow-y: auto;
  margin: 0;
  padding: 0 0 0 26px;
  background: #fff;
  border: 1px solid #0831d9;
  border-radius: 7px 7px 7px 0;
  box-shadow: 3px -2px 10px rgba(0, 0, 0, 0.45);
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  text-align: left;
  transform: translateY(10px) scale(0.96);
  transform-origin: bottom left;
  transition: transform 0.14s ease-out;
}

.xp-desktop .mobile-menu.active .mobile-nav {
  transform: translateY(0) scale(1);
}

/* Blue side strip like the XP start menu */
.xp-desktop .mobile-nav::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 26px;
  border-radius: 7px 0 0 0;
  background: linear-gradient(180deg, #1c5fbf 0%, #245edb 30%, #3f8cf3 78%, #5fa9f7 100%);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 0;
}

.xp-start__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  order: -1;
  margin-left: -26px;
  padding: 7px 10px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, #1c5fbf 0%, #245edb 45%, #3f8cf3 100%);
  color: #fff;
  font: 700 12px/1.2 Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45);
}

.xp-start__avatar {
  width: 26px;
  height: 26px;
  flex: none;
  border: 2px solid #fff;
  border-radius: 3px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.8) 0 12%, transparent 14%),
    linear-gradient(135deg, #ffd76e 0%, #ff9c3f 55%, #e86a17 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.xp-desktop .mobile-nav a {
  position: relative;
  z-index: 1;
  width: auto;
  margin: 0;
  padding: 7px 10px;
  border: none;
  border-radius: 0;
  color: #000;
  font: 400 11px/1.35 Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  font-weight: 400;
  text-align: left;
  letter-spacing: 0;
  background: transparent;
  transition: none;
}

.xp-desktop .mobile-nav a:hover,
.xp-desktop .mobile-nav a:focus-visible,
.xp-desktop .mobile-nav a.active {
  background: #316ac5;
  color: #fff;
  text-decoration: none;
  transform: none;
  border-color: transparent;
  box-shadow: none;
  outline: none;
}

.xp-start__sep {
  position: relative;
  z-index: 1;
  height: 1px;
  margin: 4px 8px;
  background: #d6d6d6;
  box-shadow: 0 1px 0 #fff;
}

/* ---------- Footer watermark ---------- */
.xp-desktop .site-footer {
  position: fixed;
  left: 10px;
  bottom: 36px;
  z-index: 3;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 11px;
  line-height: 1.5;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

.xp-desktop .site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  padding-top: 0;
  border-top: none;
}

.xp-desktop .site-footer p {
  margin: 0;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
  .xp-desktop .window--folder .xp-pane {
    display: none;
  }
}

@media (max-width: 700px) {
  .xp-desktop .taskbar__tray .audio-player__track {
    display: none;
  }

  .xp-desktop .taskbar__tray {
    gap: 8px;
    padding: 0 8px 0 10px;
  }

  .xp-clock {
    min-width: 52px;
  }
}

@media (max-width: 560px) {
  .xp-icons {
    padding: 10px 6px 64px;
    gap: 0;
  }

  /* Phone-sized folders are small, content-sized and draggable */
  .xp-desktop .window--folder {
    height: auto;
    max-height: calc(100vh - 64px);
  }

  .xp-icons--window {
    padding: 8px 6px 12px;
  }

  .xp-icon {
    width: 84px;
    padding: 6px 2px;
    font-size: 10.5px;
  }

  .xp-icon__frame {
    width: 44px;
    height: 44px;
  }

  .xp-desktop .taskbar__tray .audio-player__volume {
    display: none;
  }

  .xp-start {
    padding: 0 16px 1px 6px;
    font-size: 13px;
  }

  .xp-start .xp-flag {
    width: 15px;
    height: 15px;
  }

  .xp-desktop .site-footer {
    font-size: 10px;
    bottom: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .xp-desktop .window.is-open {
    animation: none;
  }

  .xp-desktop .mobile-nav {
    transition: none;
  }
}

/* ==========================================================================
   EMBED MODE (sub-page content inside a popup window iframe)
   ========================================================================== */

.xp-embed .site-header,
.xp-embed .mobile-menu,
.xp-embed .site-footer,
.xp-embed .audio-player,
.xp-embed .bg-decor,
.xp-embed .back-link,
.xp-embed .skip-link {
  display: none;
}

.xp-embed body {
  font-family: Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  font-size: 12px;
  line-height: 1.55;
  color: #000;
  background: #ece9d8;
  background-attachment: scroll;
  overflow-x: hidden;
}

.xp-embed :focus-visible {
  outline: 1px dotted #000;
  outline-offset: 1px;
}

.xp-embed .container {
  width: min(100% - 28px, 860px);
}

.xp-embed .hero {
  padding: 18px 0 4px;
}

.xp-embed .hero__inner {
  max-width: none;
}

.xp-embed .hero__title,
.xp-embed .hero__title--day {
  display: block;
  margin: 0;
  font-family: Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  gap: 0;
}

.xp-embed .hero__title-line,
.xp-embed .hero__title-line--alt {
  color: #000;
  text-shadow: none;
  filter: none;
}

.xp-embed .hero__lede {
  margin: 6px 0 14px;
  font-size: 12px;
  color: #333;
  max-width: none;
}

.xp-embed .panel {
  margin: 4px 0 16px;
  padding: 0;
}

.xp-embed .panel > .container,
.xp-embed .panel > .container.about {
  background: #fff;
  border: none;
  border-radius: 0;
  padding: 16px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow:
    inset -1px -1px #0a0a0a,
    inset 1px 1px #dfdfdf,
    inset -2px -2px grey,
    inset 2px 2px #fff;
}

.xp-embed h2,
.xp-embed .about h2,
.xp-embed .photography-showcase h2,
.xp-embed .archive__header h2 {
  margin: 14px 0 6px;
  font-family: Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  color: #000;
}

.xp-embed h2:first-child {
  margin-top: 0;
}

.xp-embed h3 {
  margin: 12px 0 4px;
  font-family: Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #000;
}

.xp-embed p,
.xp-embed li {
  font-size: 12px;
  color: #000;
}

.xp-embed .about p {
  color: #000;
}

.xp-embed a {
  color: #0000cc;
}

.xp-embed a:hover,
.xp-embed a:focus-visible {
  color: #0000cc;
  text-decoration: underline;
}

.xp-embed main img {
  border: 1px solid #a0a0a0;
}

.xp-embed .video-wrapper {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid #7f9db9;
  background: #000;
}

.xp-embed .code-container {
  background: #000;
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 10px;
}

.xp-embed .code-container code {
  font-family: "Perfect DOS VGA 437 Win", Consolas, Monaco, monospace;
  font-size: 13px;
  color: silver;
}

/* Download rows (documents kept on Google Drive) */
.xp-embed .download-row {
  background: #f4f4ee;
  border: 1px solid #a3a3a3;
  border-radius: 2px;
  box-shadow: inset 1px 1px 0 #fff;
}

.xp-embed .download-link {
  display: inline-block;
  padding: 3px 14px;
  color: #000;
  font-family: Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  font-size: 11px;
  line-height: 1.5;
  text-decoration: none;
  background: linear-gradient(180deg, #fdfdfd 0%, #ece9d8 45%, #dcd7c8 100%);
  border: 1px solid #8a8a8a;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 #fff;
  cursor: pointer;
}

.xp-embed .download-link:hover {
  filter: brightness(1.04);
  text-decoration: none;
}

.xp-embed .download-link:active {
  box-shadow: inset 1px 2px 3px rgba(0, 0, 0, 0.25);
}

.xp-embed .download-link:focus-visible {
  outline: 1px dotted #000;
  outline-offset: 1px;
}