:root {
  --xp-blue: #0a62d8;
  --xp-blue-dark: #0649b7;
  --xp-blue-light: #3a95f2;
  --chrome: #ece9d8;
  --chrome-hi: #ffffff;
  --chrome-mid: #aca899;
  --chrome-dark: #716f64;
  --taskbar-height: 30px;
  color-scheme: only light;
  font-family: Tahoma, "MS Sans Serif", Arial, sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #3a83d2;
}

button,
input { font: inherit; }

button { color: inherit; }

button:focus-visible,
input:focus-visible,
.browser-window:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -2px;
}

.desktop {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 480px;
  overflow: hidden;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,59,136,.04)),
    url("assets/xp-hills.png");
  background-position: center center;
  background-size: cover;
  user-select: none;
}

.desktop::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.012) 0 1px, rgba(0,0,0,.012) 1px 2px);
  mix-blend-mode: overlay;
}

.desktop-shortcuts {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 7px;
  display: flex;
  width: 78px;
  flex-direction: column;
  gap: 13px;
}

.desktop-icon {
  width: 74px;
  min-height: 66px;
  padding: 2px 1px;
  border: 1px solid transparent;
  background: transparent;
  color: #fff;
  cursor: default;
  text-shadow: 1px 1px 1px #12396a, -1px -1px 1px #12396a;
  font-size: 11px;
  line-height: 14px;
}

.desktop-icon:hover,
.desktop-icon:focus-visible {
  border-color: rgba(184, 210, 248, .75);
  background: rgba(24, 87, 169, .38);
}

.desktop-icon img,
.desktop-glyph {
  display: block;
  width: 34px;
  height: 34px;
  margin: 0 auto 4px;
  object-fit: contain;
  filter: drop-shadow(1px 2px 1px rgba(0,0,0,.35));
}

.jpeg-file-icon {
  position: relative;
  display: block;
  width: 38px;
  height: 40px;
  margin: 0 auto 4px;
  padding: 3px;
  border: 1px solid #74869c;
  background: #fff;
  box-shadow: 1px 2px 1px rgba(0,0,0,.3);
}

.jpeg-file-icon::after {
  content: "JPG";
  position: absolute;
  right: -5px;
  bottom: -3px;
  padding: 0 2px;
  border: 1px solid #315585;
  background: #eaf3ff;
  color: #173d70;
  font: 700 7px/10px Tahoma, sans-serif;
  text-shadow: none;
}

.desktop-icon .jpeg-file-icon img {
  width: 30px;
  height: 32px;
  margin: 0;
  object-fit: cover;
  filter: none;
}

.recycle-glyph {
  border: 2px solid #d7ecf6;
  border-radius: 2px 2px 7px 7px;
  background: linear-gradient(135deg, #f9ffff 0 38%, #91c9db 39% 52%, #f4ffff 53%);
  color: #2a8b52;
  font-size: 22px;
  line-height: 30px;
  text-shadow: none;
}

.folder-glyph {
  position: relative;
  width: 36px;
  height: 26px;
  margin-top: 7px;
  border: 1px solid #b66f00;
  border-radius: 2px;
  background: linear-gradient(180deg, #fff09b 0 22%, #f6bd31 23% 100%);
}

.folder-glyph::before {
  content: "";
  position: absolute;
  left: 2px;
  top: -6px;
  width: 15px;
  height: 7px;
  border: 1px solid #b66f00;
  border-bottom: 0;
  background: #f9d353;
}

.browser-window {
  position: absolute;
  z-index: 5;
  left: 12vw;
  top: 7vh;
  display: grid;
  width: 76vw;
  height: calc(86vh - var(--taskbar-height));
  min-width: 640px;
  min-height: 420px;
  grid-template-rows: 24px 25px 40px 27px 28px minmax(0, 1fr) 24px;
  overflow: hidden;
  border: 2px solid #0756c3;
  border-radius: 6px 6px 2px 2px;
  background: var(--chrome);
  box-shadow: 1px 2px 4px rgba(0, 28, 72, .48);
  color: #000;
}

.browser-window.hidden { display: none; }

.photo-window {
  position: absolute;
  z-index: 8;
  left: 2vw;
  top: 10vh;
  display: grid;
  width: clamp(400px, 42vw, 560px);
  height: min(76vh, 670px);
  min-width: 360px;
  min-height: 430px;
  grid-template-rows: 24px minmax(0, 1fr) 24px;
  overflow: hidden;
  border: 2px solid #0756c3;
  border-radius: 6px 6px 2px 2px;
  background: #ece9d8;
  box-shadow: 1px 2px 6px rgba(0, 28, 72, .55);
}

.photo-window.hidden { display: none; }

.photo-window.maximized {
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: calc(100vh - var(--taskbar-height)) !important;
  min-width: 0;
  border-radius: 0;
}

.browser-window:not(.is-active) .titlebar,
.photo-window:not(.is-active) .titlebar {
  background: linear-gradient(#7f9db9, #5e7796 52%, #7f9db9);
}

.photo-viewer-stage {
  display: grid;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  padding: 12px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #aca899;
  background: #d7d7d7;
}

.photo-viewer-stage img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  border: 1px solid #777;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  object-fit: contain;
}

.photo-viewer-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 7px;
  border-top: 1px solid #fff;
  color: #333;
  font-size: 11px;
}

.jpeg-title-icon,
.jpeg-task-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border: 1px solid #4c6686;
  background: linear-gradient(145deg, #83c6ef 0 45%, #4c8f45 46% 68%, #f0cf66 69%);
  box-shadow: inset 1px 1px #fff;
}

.jpeg-task-icon { width: 16px; height: 16px; }

.browser-window.maximized {
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: calc(100vh - var(--taskbar-height)) !important;
  min-width: 0;
  border-radius: 0;
}

.titlebar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 2px 3px 2px 5px;
  background:
    linear-gradient(180deg, #1492f6 0, #1d83e9 9%, #0a68d8 44%, #0757cc 58%, #0c67dc 82%, #1187ef 100%);
  color: #fff;
  cursor: default;
  text-shadow: 1px 1px #194d91;
}

.titlebar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 1px solid rgba(255,255,255,.7);
  border-radius: 4px 4px 0 0;
  pointer-events: none;
}

.titlebar-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.titlebar-title img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.titlebar-title span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.window-controls { display: flex; gap: 2px; }

.window-button {
  position: relative;
  width: 20px;
  height: 19px;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 3px;
  background: linear-gradient(135deg, #77baff, #1b72da 48%, #0a46ad);
  box-shadow: inset 1px 1px rgba(255,255,255,.55), 1px 1px #003a9a;
  color: #fff;
  font-weight: 700;
  line-height: 15px;
  text-shadow: 1px 1px #174c9b;
}

.window-button:hover { filter: brightness(1.14); }
.window-button:active { transform: translate(1px, 1px); }
.window-button.close-window { background: linear-gradient(135deg, #f28b66, #e24e2c 52%, #a9230d); }
.window-button.close-window span { position: relative; top: -1px; font-size: 17px; }
.window-button.minimize span { position: absolute; left: 5px; bottom: 4px; width: 8px; border-bottom: 2px solid #fff; }
.window-button.maximize span { position: absolute; inset: 4px; border: 2px solid #fff; border-top-width: 3px; }

.menu-bar,
.navigation-bar,
.bookmarks-bar,
.tab-strip-shell,
.status-bar {
  background: var(--chrome);
}

.menu-bar {
  display: flex;
  align-items: center;
  gap: 1px;
  padding: 0 6px;
  border-bottom: 1px solid var(--chrome-mid);
  font-size: 12px;
}

.menu-bar button,
.bookmarks-bar button {
  height: 22px;
  padding: 1px 6px;
  border: 1px solid transparent;
  background: transparent;
}

.menu-bar button:hover,
.bookmarks-bar button:hover {
  border-color: #316ac5;
  background: #c1d2ee;
}

.navigation-bar {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 3px;
  padding: 4px 6px 4px 2px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid var(--chrome-mid);
}

.toolbar-grip {
  width: 5px;
  height: 75%;
  flex: 0 0 5px;
  border-left: 1px solid #fff;
  border-right: 1px solid #aaa79a;
}

.nav-button {
  position: relative;
  width: 28px;
  height: 29px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: #2d6aa3;
  font-family: Arial, sans-serif;
  font-size: 26px;
  font-weight: 900;
  line-height: 25px;
  text-shadow: 0 1px #fff;
}

.nav-button:not(:disabled):hover { border-color: var(--chrome-mid); background: linear-gradient(#fff, #dcd9ca); }
.nav-button:disabled { color: #aaa; opacity: .62; }
.nav-button.dropdown { width: 12px; font-size: 12px; }
.nav-button.reload { color: #1763a8; font-size: 29px; }
.nav-button.stop { color: #bc2a3a; }
.nav-button.home { width: 31px; }

.home-roof,
.home-roof::before,
.home-roof::after { position: absolute; display: block; content: ""; }
.home-roof { left: 7px; top: 12px; width: 17px; height: 13px; border: 2px solid #124f8f; background: #659bd0; }
.home-roof::before { left: 0; top: -8px; width: 12px; height: 12px; border-left: 4px solid #195994; border-top: 4px solid #195994; transform: rotate(45deg); background: #7cb2e1; }
.home-roof::after { left: 6px; bottom: 0; width: 4px; height: 7px; background: #f7dda3; }

.address-field,
.search-field {
  display: flex;
  height: 27px;
  align-items: center;
  border: 1px solid #7f9db9;
  background: #fff;
  box-shadow: inset 1px 1px #d4d0c8;
}

.address-field { min-width: 180px; flex: 1 1 auto; }
.address-field img { width: 18px; height: 18px; margin: 0 4px; object-fit: contain; }
.address-field input,
.search-field input { min-width: 0; height: 23px; padding: 1px 2px; border: 0; outline: 0; background: transparent; font-size: 13px; user-select: text; }
.address-field input { flex: 1; }
.address-field .rss { color: #f47a11; font-size: 16px; font-weight: 700; transform: rotate(45deg); }
.address-field .star { color: #c8c5b9; padding: 0 2px; font-size: 20px; }
.address-arrow { padding: 0 4px; color: #555; font-size: 11px; }
.search-field { width: 170px; flex: 0 0 170px; }
.search-field input { flex: 1; }
.search-logo { margin-left: 3px; padding-right: 4px; border-right: 1px solid #ccc; color: #1e57ae; font: 17px Georgia, serif; }
.magnifier { width: 12px; height: 12px; margin-right: 4px; border: 2px solid #6a87a2; border-radius: 50%; }
.magnifier::after { content: ""; display: block; width: 6px; margin: 8px 0 0 8px; border-top: 2px solid #6a87a2; transform: rotate(45deg); }

.bookmarks-bar {
  display: flex;
  align-items: center;
  padding: 2px 4px 2px 2px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid var(--chrome-mid);
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
}

.bookmarks-bar button { display: flex; align-items: center; gap: 3px; }
.bookmark-icon { display: inline-grid; width: 15px; height: 15px; place-items: center; color: #fff; font-size: 10px; }
.bookmark-icon.orange,
.bookmark-icon.feed { border-radius: 2px; background: #f47a11; }
.bookmark-icon.page { border: 1px solid #8494a2; background: linear-gradient(135deg, #fff 0 64%, #69aa71 65%); }

.tab-strip-shell {
  display: flex;
  min-width: 0;
  align-items: end;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #8e8b80;
  background: linear-gradient(#f5f4ed, #d8d6cc);
}

.tabs {
  display: flex;
  min-width: 0;
  height: 27px;
  flex: 0 1 auto;
  align-items: end;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar { display: none; }

.tab-wrapper {
  position: relative;
  display: flex;
  width: clamp(120px, 20vw, 210px);
  min-width: 92px;
  height: 25px;
  flex: 1 1 180px;
  margin-left: -1px;
}

.tab {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  height: 25px;
  align-items: center;
  gap: 5px;
  padding: 2px 27px 2px 7px;
  border: 1px solid #a5a29a;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(#f8f8f7, #d7d6d1);
  color: #111;
  font-size: 12px;
  white-space: nowrap;
}

.tab-wrapper.active,
.tab-wrapper.active .tab {
  z-index: 2;
  height: 27px;
}

.tab[aria-selected="true"] {
  background: #fff;
  box-shadow: inset 0 2px #fff;
}

.tab:hover { background: linear-gradient(#fff, #e6e5df); }
.tab-icon { width: 16px; height: 16px; flex: 0 0 16px; object-fit: contain; }
.tab-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.tab-close {
  position: absolute;
  z-index: 3;
  top: 3px;
  right: 4px;
  display: grid;
  width: 18px;
  height: 18px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  background: transparent;
  color: #b3232e;
  font: 700 17px/15px Arial, sans-serif;
}
.tab-close:hover { border-color: #a78b8e; border-radius: 2px; background: #f6d9db; }

.new-tab-button,
.all-tabs-button {
  height: 25px;
  flex: 0 0 28px;
  margin: 0 0 1px 2px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
}

.new-tab-button { color: #4d901c; font: 900 25px/20px Arial, sans-serif; text-shadow: 1px 1px #fff; }
.new-tab-button:hover,
.all-tabs-button:hover { border-color: #aaa79c; background: linear-gradient(#fff, #d9d7cc); }
.all-tabs-button { margin-left: auto; color: #333; font-size: 17px; }

.content-frame {
  display: flex;
  min-width: 0;
  min-height: 0;
  background: #fff;
}

.tab-panels { position: relative; min-width: 0; min-height: 0; flex: 1; background: #fff; }
.tab-panel {
  position: absolute;
  inset: 0;
  overflow: auto;
  background: #fff;
  scrollbar-width: none;
  user-select: text;
}
.tab-panel::-webkit-scrollbar { display: none; }
.tab-panel.pm-deck-panel { overflow: hidden; }
.pm-deck-frame { display: block; width: 100%; height: 100%; min-height: 0; border: 0; background: #f3efe4; }

/* 2008 YouTube watch page / Shopify content */
.youtube-page {
  min-height: 100%;
  padding: 0 0 34px;
  background: #fff;
  color: #111;
  font: 11px/1.25 Arial, Helvetica, sans-serif;
}
.youtube-page a { color: #0033a0; text-decoration: none; }
.youtube-page a:hover { text-decoration: underline; }

.yt-header,
.yt-watch-layout { width: min(100%, 875px); margin: 0 auto; }
.yt-header { padding-top: 7px; }
.yt-header-top {
  display: grid;
  min-height: 58px;
  grid-template-columns: 132px 1fr auto;
  align-items: start;
  gap: 9px;
}
.yt-logo { position: relative; display: block; width: 124px; height: 50px; }
.yt-logo img { display: block; width: 124px; height: 50px; object-fit: contain; }
.yt-logo small { position: absolute; top: 48px; right: 1px; color: #777; font: 8px Arial, sans-serif; letter-spacing: 0; }
.yt-locale { padding-top: 10px; color: #888; }
.yt-header-top > nav { padding-top: 10px; white-space: nowrap; }
.yt-header-top > nav a { padding: 0 5px; }

.yt-primary-row { height: 30px; padding-left: 182px; }
.yt-primary-row nav { display: flex; gap: 5px; height: 30px; }
.yt-primary-row a {
  display: grid;
  width: 123px;
  place-items: center;
  border: 1px solid #c6ccd3;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(#fff, #e5e5e5);
  color: #1e1e1e;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
}
.yt-primary-row a.active,
.yt-primary-row a:hover { background: linear-gradient(#fff, #cce1fa); color: #003985; text-decoration: none; }

.yt-search {
  display: flex;
  height: 37px;
  align-items: center;
  gap: 5px;
  padding: 0 7px 0 225px;
  border-radius: 7px;
  background: linear-gradient(#eee, #f8f8f8);
}
.yt-search input { width: 260px; height: 23px; border: 1px solid #aaa; }
.yt-search select { width: 83px; height: 23px; border: 1px solid #999; background: #fff; font-size: 11px; }
.yt-search button { height: 23px; border: 1px solid #777; border-radius: 3px; background: linear-gradient(#fff, #ddd); }
.yt-search > a { margin-left: 4px; font-size: 9px; }
.yt-search .yt-upload { margin-left: auto; padding: 0 17px; border-color: #e7b800; background: linear-gradient(#fff9a7, #ffd524); color: #6b4a00; font-weight: 700; }

.yt-watch-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 34px; padding-top: 17px; }
.yt-watch-main h1 { margin: 0 0 6px; font-size: 19px; line-height: 1.15; }
.yt-player { position: relative; border: 1px solid #777; background: #111; }
.yt-video-stage { position: relative; height: 362px; overflow: hidden; background: #080808; }
.yt-video { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; background: #000; object-fit: contain; }
.yt-player-controls { display: flex; height: 24px; align-items: center; gap: 5px; padding: 0 4px; border-top: 1px solid #aaa; background: linear-gradient(#eee, #cfcfcf); }
.yt-player-controls button { display: grid; min-width: 24px; height: 19px; place-items: center; padding: 0 4px; border: 1px solid #999; background: linear-gradient(#fff, #c8c8c8); color: #222; font-size: 10px; }
.yt-player-controls time { width: 58px; font-size: 9px; text-align: center; }
.yt-timeline { flex: 1; height: 7px; cursor: pointer; border: 1px solid #aaa; background: #eee; }
.yt-timeline span { display: block; width: 0; height: 100%; background: #d59a96; }
.yt-high-quality { display: block; margin: 3px 0 1px; text-align: right; font-weight: 700; }

.yt-video-stats { display: flex; align-items: center; justify-content: space-between; padding: 6px 7px 3px; border: 1px solid #ccc; border-bottom: 0; font-size: 12px; }
.yt-actions { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #ccc; }
.yt-actions a { padding: 7px 5px; border-right: 1px solid #ddd; font-size: 13px; font-weight: 700; text-align: center; }
.yt-actions a:last-child { border-right: 0; }
.yt-actions span { color: #777; }
.yt-actions a:first-child span { color: #d72727; }

.yt-description { margin-top: 8px; padding: 7px; border: 1px solid #ccc; background: #f3f3f3; }
.yt-description > div { display: inline-block; margin-right: 18px; color: #777; }
.yt-description p { margin: 6px 0 0; }
.yt-comments { margin-top: 10px; padding-bottom: 8px; border: 1px solid #bbb; }
.yt-comments h2 { margin: 0; padding: 5px 7px; background: #e7e7e7; font-size: 12px; }
.yt-comments p { margin: 7px 8px 2px; }
.yt-comments blockquote { margin: 2px 8px 9px; }
.yt-continue { margin: 0 8px; padding: 4px 8px; border: 1px solid #777; border-radius: 2px; background: linear-gradient(#fff, #ddd); color: #0033a0; font: 700 11px Arial, sans-serif; }
.forum-continue { margin-top: 6px; padding: 7px 11px; border: 1px solid #8b6900; border-radius: 3px; background: linear-gradient(#fff6a4, #f2c91f); color: #4b3800; font-weight: 700; }

.yt-sidebar { padding-top: 29px; }
.yt-shopify-banner { display: flex; height: 54px; align-items: center; justify-content: space-between; padding: 0 12px; background: linear-gradient(120deg, #0d2f1d, #173f2a 58%, #2c6e49); color: #bde5c9; }
.yt-shopify-banner a { display: grid; width: 112px; height: 36px; place-items: center; padding: 4px 7px; background: #fff; }
.yt-shopify-banner img { display: block; max-width: 100%; max-height: 100%; }
.yt-shopify-banner strong { font-size: 12px; }
.yt-channel-card { padding: 6px; border: 1px solid #bbb; border-top: 0; background: #eee; }
.yt-channel-heading { display: grid; grid-template-columns: 52px 1fr auto; gap: 6px; align-items: center; }
.yt-channel-mark { display: grid; width: 50px; height: 50px; place-items: center; border: 2px solid #173f2a; background: #fff; }
.yt-channel-mark img { display: block; width: 34px; height: 40px; object-fit: contain; }
.yt-channel-heading small { display: block; margin-top: 3px; color: #666; }
.yt-channel-heading .yt-more-info { display: block; margin-top: 2px; font-size: 9px; }
.yt-channel-heading button { padding: 5px 12px; border: 1px solid #e6bd20; border-radius: 4px; background: linear-gradient(#fff9a7, #ffd82c); color: #765500; font-weight: 700; }
.yt-channel-card p { margin: 7px 0; }
.yt-channel-card label { display: grid; grid-template-columns: 42px 1fr; align-items: center; margin-top: 3px; color: #555; }
.yt-channel-card input { min-width: 0; height: 19px; border: 1px solid #aaa; background: #fff; font-size: 9px; }
.yt-more-videos h2 { margin: 8px 0 4px; padding-bottom: 4px; border-bottom: 1px solid #bbb; font-size: 16px; }
.yt-related-video { display: grid; width: 100%; min-height: 63px; grid-template-columns: 92px 1fr; gap: 7px; padding: 4px; border: 0; border-bottom: 1px solid #ddd; background: #fff; color: #111; text-align: left; }
.yt-related-video:hover { background: #eef5fc; }
.yt-related-video.is-selected { background: #dbeaf8; }
.yt-related-thumb { display: grid; height: 55px; place-items: center; overflow: hidden; border: 1px solid #555; background: linear-gradient(135deg, #0d2f1d, #4b9b68); color: #fff; }
.yt-related-thumb.project-2 { background: linear-gradient(135deg, #173f2a, #77a96b); }
.yt-related-thumb.project-3 { background: linear-gradient(135deg, #132b50, #3d79b5); }
.yt-related-thumb b { font-size: 11px; letter-spacing: 1px; }
.yt-related-copy { display: flex; flex-direction: column; font-size: 9px; }
.yt-related-copy strong { color: #0033a0; font-size: 11px; line-height: 1.12; }
.yt-related-copy span { margin-top: 2px; }

/* MozillaZine / phpBB-era Firefox builds forum */
.forum-page {
  min-height: 100%;
  padding: 0 0 28px;
  background: #eaedf0;
  color: #263442;
  font: 11px/1.35 Verdana, Arial, Helvetica, sans-serif;
}

.forum-page a {
  color: #204f82;
  font-weight: 700;
  text-decoration: none;
}

.forum-page a:hover { color: #b44b22; text-decoration: underline; }

.forum-masthead {
  display: flex;
  width: min(100%, 960px);
  min-height: 76px;
  align-items: stretch;
  justify-content: space-between;
  margin: 0 auto;
  border-right: 1px solid #718393;
  border-left: 1px solid #718393;
  background: linear-gradient(90deg, #fafafa 0 47%, #d2dbe2 100%);
}

.forum-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 16px 4px 13px;
}

.forum-brand img { width: 66px; height: 66px; object-fit: contain; }
.forum-brand > div { display: flex; align-items: baseline; }
.forum-brand strong {
  color: #405466;
  font: 700 29px/1 Arial, Helvetica, sans-serif;
  letter-spacing: -2px;
}
.forum-brand strong span { color: #202a33; }
.forum-brand small {
  margin-left: 7px;
  color: #a13e21;
  font: italic 700 16px/1 Georgia, serif;
}

.forum-masthead > nav {
  display: flex;
  align-items: flex-end;
  gap: 1px;
  padding: 0 10px 9px 0;
}

.forum-masthead > nav a {
  padding: 5px 8px;
  border: 1px solid #708394;
  background: linear-gradient(#f8fafb, #c4cfd7);
  color: #334d63;
  font-size: 10px;
}
.forum-masthead > nav a[aria-current="page"] { background: #4b657b; color: #fff; }

.forum-shell {
  width: min(100%, 960px);
  min-height: 500px;
  margin: 0 auto;
  padding: 7px 10px 26px;
  border: 1px solid #718393;
  border-top: 5px solid #485f72;
  background: #f7f8f9;
}

.forum-userbar,
.forum-actions,
.forum-actions-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.forum-userbar {
  padding: 1px 2px 7px;
  color: #5a6874;
  font-size: 9px;
}
.forum-userbar > nav { text-align: right; }
.forum-userbar .forum-account { color: #9d3f22; }
.forum-userbar .forum-account span {
  color: #3b8b31;
  font-size: 8px;
  text-shadow: 0 1px #fff;
}

.forum-breadcrumb {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid #8fa1b0;
  background: #dce4ea;
  box-shadow: inset 0 1px #fff;
}
.forum-breadcrumb b { color: #81909d; }

.forum-intro { padding: 12px 9px 9px; }
.forum-intro .forum-kicker {
  margin: 0 0 1px;
  color: #a04425;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.forum-intro h1 {
  margin: 0;
  color: #334d63;
  font: 700 21px/1.2 Arial, Helvetica, sans-serif;
}
.forum-intro p:last-child { margin: 3px 0 0; color: #52616e; }

.forum-actions { min-height: 29px; padding: 0 1px 5px; font-size: 9px; }
.forum-actions > div { text-align: right; }
.forum-actions strong,
.forum-actions > div > a { padding: 2px 4px; border: 1px solid #9caab6; background: #eef2f5; }
.forum-actions strong { background: #536e84; color: #fff; }

.forum-new-topic {
  min-width: 88px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid #293e50;
  border-radius: 2px;
  background: linear-gradient(#71899c 0 48%, #425c71 49% 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.6);
  color: #fff;
  font: 700 10px Verdana, sans-serif;
  text-shadow: 0 -1px #263847;
}
.forum-new-topic:hover { filter: brightness(1.08); }
.forum-new-topic span { color: #ffd29b; }

.forum-board { border: 1px solid #4d6477; background: #fff; }
.forum-board > h2 {
  margin: 0;
  padding: 5px 8px;
  border-bottom: 1px solid #30485d;
  background: linear-gradient(#657e93, #405b70);
  color: #fff;
  font: 700 12px Verdana, sans-serif;
  text-shadow: 0 -1px #2d4252;
}

.forum-topic-row {
  display: grid;
  min-height: 58px;
  grid-template-columns: 38px minmax(290px, 1fr) 58px 62px 132px;
  align-items: stretch;
  border-bottom: 1px solid #aab7c1;
  background: #e7edf2;
}
.forum-topic-row:nth-of-type(odd) { background: #dce5ec; }
.forum-topic-row:last-child { border-bottom: 0; }
.forum-topic-row > * { display: flex; min-width: 0; align-items: center; padding: 6px; border-right: 1px solid #b1bdc6; }
.forum-topic-row > *:last-child { border-right: 0; }

.forum-topic-row.forum-table-head {
  min-height: 22px;
  background: #b8c8d5;
  color: #30495e;
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
}
.forum-table-head > * { justify-content: center; padding-block: 3px; }

.forum-folder-icon {
  justify-content: center;
  background: rgba(255,255,255,.18);
}
.forum-folder-icon i {
  position: relative;
  display: block;
  width: 20px;
  height: 16px;
  border: 1px solid #6f552e;
  background: linear-gradient(#ffd980, #d99529);
  box-shadow: inset 0 1px #fff1bd;
}
.forum-folder-icon i::before {
  position: absolute;
  top: -4px;
  left: 1px;
  width: 8px;
  height: 3px;
  border: 1px solid #6f552e;
  border-bottom: 0;
  background: #efbd57;
  content: '';
}
.forum-topic-row.announcement .forum-folder-icon i,
.forum-topic-row.sticky .forum-folder-icon i { background: linear-gradient(#ffc8a9, #d65b2b); }
.forum-topic-row.hot .forum-folder-icon i,
.forum-folder-icon.hot i { background: linear-gradient(#ffaf8d, #c64128); }
.forum-folder-icon.read i { filter: grayscale(1); opacity: .66; }

.forum-topic-copy { display: block; padding: 6px 8px; }
.forum-topic-title { display: block; line-height: 1.25; }
.forum-topic-title > b { color: #a13f20; }
.forum-topic-copy p { margin: 2px 0 1px; color: #52616e; font-size: 9px; }
.forum-topic-copy small { color: #71808b; font-size: 8px; }

.forum-stat { flex-direction: column; justify-content: center; color: #455968; text-align: center; }
.forum-stat b { font-size: 10px; }
.forum-stat small { color: #7b8790; font-size: 8px; }

.forum-last-post { flex-direction: column; align-items: flex-start; justify-content: center; color: #576570; font-size: 8px; line-height: 1.45; }
.forum-last-post a { font-size: 8px; }
.forum-last-post b { display: inline-grid; width: 11px; height: 11px; place-items: center; background: #536e84; color: #fff; }

.forum-actions-bottom { min-height: 39px; padding-top: 6px; }
.forum-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 7px;
  border: 1px solid #a4b0ba;
  background: #e6ebef;
  color: #5b6873;
  font-size: 9px;
}
.forum-legend > div { display: flex; align-items: center; gap: 5px; }
.forum-legend .forum-folder-icon { display: block; padding: 0; background: none; }
.forum-legend .forum-folder-icon i { width: 14px; height: 11px; }
.forum-legend .forum-folder-icon i::before { width: 6px; height: 2px; }
.forum-legend p { flex: 1 0 100%; margin: 1px 0 0; border-top: 1px solid #bdc6cd; padding-top: 5px; }

.forum-footer { padding-top: 11px; color: #7a858d; font-size: 8px; text-align: center; }
.forum-footer p { margin: 2px; }

/* MySpace profile tab */
.myspace-page {
  min-height: 100%;
  background: #e5e5e5;
  color: #000;
  font: 12px/1.15 Arial, Helvetica, sans-serif;
}

.myspace-page a {
  color: #003399;
  font-weight: 700;
  text-decoration: none;
}
.myspace-page a:hover { text-decoration: underline; }

.myspace-header,
.myspace-nav,
.myspace-profile {
  width: min(100%, 900px);
  margin: 0 auto;
}

.myspace-header {
  padding: 8px 10px 19px;
  background: #003399;
  color: #fff;
}

.myspace-utility {
  display: grid;
  min-height: 26px;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
  font-size: 11px;
}
.myspace-utility > :last-child { text-align: right; }
.myspace-utility a { color: #fff; }

.myspace-search {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.myspace-search label { display: flex; align-items: center; gap: 3px; }
.myspace-search input[type="radio"] { width: 12px; height: 12px; margin: 0; accent-color: #fff; }
.myspace-search input[type="search"] { width: 175px; height: 18px; border: 1px inset #ccc; background: #fff; }
.myspace-search button { height: 20px; padding: 0 8px; border: 2px outset #ddd; background: #eee; font-size: 11px; }

.myspace-logo-panel {
  display: flex;
  width: 72%;
  height: 64px;
  align-items: center;
  margin: 5px auto 0;
  padding: 8px;
  border: 2px solid #000;
  background: #fff;
  color: #000;
}
.myspace-logo-lockup { display: flex; align-items: center; gap: 6px; }
.myspace-logo-lockup img { width: 42px; height: 32px; }
.myspace-logo-lockup span { display: flex; flex-direction: column; }
.myspace-logo-lockup strong { font-size: 26px; line-height: 22px; letter-spacing: -2px; }
.myspace-logo-lockup small { font-size: 11px; font-weight: 700; }

.myspace-nav {
  display: flex;
  height: 27px;
  align-items: center;
  justify-content: center;
  overflow-x: auto;
  padding: 0 10px;
  background: #6699cc;
  white-space: nowrap;
  scrollbar-width: none;
}
.myspace-nav::-webkit-scrollbar { display: none; }
.myspace-nav a { padding: 0 7px; color: #fff; font-size: 11px; font-weight: 400; }
.myspace-nav i { height: 11px; border-left: 1px solid #d7e9fa; }

.myspace-profile {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 24px;
  padding: 12px 16px 40px;
  background: #fff;
}

.profile-sidebar h1 {
  margin: 0 0 12px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
}
.profile-intro { display: grid; grid-template-columns: 174px 1fr; gap: 12px; }
.profile-photo {
  display: block;
  width: 174px;
  height: 174px;
  border: 1px solid #9eaebd;
  object-fit: cover;
}
.view-pics { display: block; padding: 10px 0 12px; text-align: center; }
.profile-facts p { margin: 0 0 13px; }
.profile-facts .last-login { margin-top: 46px; }

.myspace-box { margin-bottom: 13px; border: 2px solid #6699cc; }
.myspace-box h2 {
  margin: 0;
  padding: 2px 10px;
  background: #6699cc;
  color: #fff;
  font-size: 14px;
}
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; padding: 9px 11px 7px; gap: 11px 15px; }
.contact-grid a { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 400; }
.contact-grid span { width: 20px; color: #6b4a24; font-size: 17px; text-align: center; }

.profile-player .player-body { padding: 7px; background: #d7e8f7; }
.player-display {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding: 5px 6px;
  border: 2px inset #c7d6e2;
  background: #1b1b1b;
  color: #76ff56;
  font-family: "Courier New", monospace;
}
.player-copy { display: flex; min-width: 0; flex-direction: column; }
.player-copy strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.player-copy small { color: #b7d7ad; font-size: 9px; }
.player-equalizer { display: flex; height: 20px; align-items: end; gap: 2px; }
.player-equalizer i { display: block; width: 3px; height: 6px; background: #76ff56; }
.player-equalizer i:nth-child(2) { height: 13px; }
.player-equalizer i:nth-child(3) { height: 18px; }
.player-equalizer i:nth-child(4) { height: 10px; }
.player-equalizer i:nth-child(5) { height: 15px; }
.player-progress { height: 8px; margin: 5px 0; border: 2px inset #d9e7f3; background: #fff; }
.player-progress span { display: block; width: 12%; height: 100%; background: #336699; }
.player-controls { display: flex; align-items: center; gap: 4px; }
.player-controls button {
  min-width: 30px;
  height: 22px;
  padding: 0 6px;
  border: 2px outset #d4d0c8;
  background: #ece9d8;
  color: #000;
  font-size: 10px;
}
.player-controls button:active { border-style: inset; }
.player-controls span { margin-left: auto; color: #244c73; font-size: 9px; font-weight: 700; }
.player-status { margin: 5px 0 0; color: #244c73; font-size: 9px; text-align: right; }
.profile-player.playing .player-progress span { animation: fake-track-progress 24s linear infinite; }
.profile-player.playing .player-equalizer i { animation: fake-equalizer 640ms steps(3, end) infinite alternate; }
.profile-player.playing .player-equalizer i:nth-child(2n) { animation-delay: -280ms; }

@keyframes fake-track-progress { from { width: 12%; } to { width: 94%; } }
@keyframes fake-equalizer { from { transform: scaleY(.45); } to { transform: scaleY(1); } }

.interests-box dl { margin: 0; padding: 3px; background: #fff; }
.interests-box dl > div { display: grid; grid-template-columns: 108px 1fr; margin-bottom: 3px; background: #c8def2; }
.interests-box dt { padding: 5px; color: #336699; font-weight: 700; }
.interests-box dd { min-height: 66px; margin: 0; padding: 5px; border-left: 3px solid #fff; }

.profile-main { padding-top: 1px; }
.extended-network {
  display: grid;
  height: 76px;
  place-items: center;
  margin-bottom: 16px;
  border: 2px solid #000;
  text-align: center;
}
.extended-network h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 18px; }
.blog-preview { margin-bottom: 24px; }
.blog-preview h2 { margin: 0 0 15px; font-size: 12px; }
.blog-preview p { margin: 0 0 14px; }
.blog-preview .view-all { display: inline-block; margin-top: 3px; }

.orange-section { margin-bottom: 15px; }
.orange-section h2 {
  margin: 0 0 6px;
  padding: 2px 10px;
  background: #ffcc99;
  color: #ff6600;
  font-size: 14px;
}
.orange-section h3 { margin: 6px 6px 2px; color: #ff6600; font-size: 14px; }
.orange-section p { margin: 4px 6px 12px; }
.friend-count strong { color: #d40066; font-size: 15px; }

.company-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 12px; padding: 4px 8px 2px; }
.company-friend { min-width: 0; text-align: center; }
.company-friend a { display: block; }
.company-friend strong { display: block; height: 18px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.company-image-placeholder {
  position: relative;
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1;
  place-items: center;
  border: 1px solid #8da1b5;
  background: repeating-linear-gradient(135deg, #e8edf2 0 9px, #cfd9e2 9px 18px);
  color: #607284;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .5px;
  overflow: hidden;
}
.company-away-message {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border: 2px solid #000080;
  background: #ffffd7;
  color: #000;
  opacity: 0;
  text-align: left;
  visibility: hidden;
}
.away-title {
  display: flex;
  height: 21px;
  flex: 0 0 21px;
  align-items: center;
  gap: 5px;
  padding: 2px 4px;
  background: #000080;
  color: #fff;
  font: 700 9px/1 Tahoma, Arial, sans-serif;
  letter-spacing: 0;
}
.away-title b { color: #f5d629; }
.away-body { display: flex; flex: 1; flex-direction: column; justify-content: center; padding: 6px; line-height: 1.15; letter-spacing: 0; }
.away-body b { margin-bottom: 3px; color: #000080; font-size: 12px; }
.away-body em { margin-bottom: 7px; color: #333; font-size: 10px; font-style: normal; font-weight: 700; }
.away-body span { font-size: 10px; }
.away-footer { padding: 3px 4px; border-top: 1px solid #c4b65a; background: #fff8a8; color: #5d5400; font-size: 8px; letter-spacing: 0; }
.company-friend:not(.hover-suppressed):hover .company-away-message,
.company-friend.focus-preview .company-away-message,
.company-friend.is-open .company-away-message {
  opacity: 1;
  visibility: visible;
}

.profile-comments {
  margin: 22px 0 8px;
  border: 1px solid #b9b9b9;
  background: #fff;
  box-shadow: 2px 3px 6px rgba(0,0,0,.28);
}
.comments-heading-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 3px 6px 0;
}
.comments-heading-row h2 { margin: 0; font-size: 17px; }
.comments-heading-row a { font-size: 10px; }
.comments-pagination { display: flex; justify-content: space-between; padding: 3px 6px 6px; font-size: 10px; }
.comments-pagination span:last-child { margin-right: 39%; }
.comments-list { margin: 0 6px; }
.myspace-comment {
  display: grid;
  min-height: 150px;
  grid-template-columns: minmax(118px, 28%) minmax(0, 1fr);
  border-bottom: 2px solid #fff;
}
.comment-author {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  padding: 5px 8px 8px;
  background: #ff9933;
  text-align: center;
}
.comment-author > a { display: block; width: 100%; overflow: hidden; margin-bottom: 8px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.comment-author small { margin-top: 3px; color: #008000; font-size: 8px; }
.comment-author small b { color: #ffdc00; }
.comment-avatar {
  display: grid;
  width: min(90px, 100%);
  aspect-ratio: 1 / 1;
  place-items: center;
  border: 1px solid rgba(0,0,0,.25);
  color: #fff;
  text-shadow: 1px 1px #1e3551;
}
.comment-avatar span { font: 700 30px/1 Georgia, serif; }
.web-friend-avatar { background: radial-gradient(circle at 65% 25%, #d9b775 0 11%, transparent 12%), repeating-linear-gradient(135deg, #23598a 0 12px, #4c80a5 12px 24px); }
.work-friend-avatar { background: radial-gradient(circle at 30% 30%, #f7d0dd 0 9%, transparent 10%), repeating-linear-gradient(45deg, #34184d 0 10px, #734981 10px 20px); }
.comment-copy { position: relative; min-width: 0; padding: 5px 6px 24px; background: #f9d4b0; }
.comment-copy h3 { margin: 0 0 13px; font-size: 14px; }
.comment-copy p { margin: 0; font-size: 11px; }
.comment-copy .delete-comment { position: absolute; right: 6px; bottom: 9px; font-size: 11px; }
.comments-pagination-bottom { padding-top: 6px; }

/* Narrative pass: persistent MySpace chapters */
.myspace-profile { grid-template-areas: "sidebar main"; }
.profile-sidebar { grid-area: sidebar; }
.profile-main { grid-area: main; }
.myspace-utility span,
.myspace-nav span { color: inherit; }
.myspace-search-field { display: inline-block; width: 150px; height: 18px; border: 1px inset #ccc; background: #fff; }
.myspace-nav span { padding: 0 7px; font-size: 11px; }
.company-grid { gap: 12px 8px; }
.company-friend {
  display: block;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #003399;
  text-align: center;
}
.company-friend:hover,
.company-friend:focus-visible { text-decoration: underline; }
.company-friend:focus-visible { outline: 2px solid #ff6600; outline-offset: 2px; }
.company-friend.is-selected .company-image { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000080; }
.company-image {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 4px;
  border: 1px solid #8da1b5;
  background: #e8edf2;
}
.company-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.company-hover-copy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 7px;
  background: linear-gradient(to top, rgba(0, 0, 51, .96), rgba(0, 51, 153, .82));
  color: #fff;
  opacity: 0;
  text-align: left;
  transform: translateY(7px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.company-hover-copy small {
  display: block;
  margin-bottom: 3px;
  color: #b8d8ff;
  font-size: 8px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
}
.company-hover-copy > span { font-size: 9px; font-weight: 700; line-height: 1.2; }
.company-friend:hover .company-hover-copy,
.company-friend:focus-visible .company-hover-copy { opacity: 1; transform: translateY(0); }
.company-friend strong { display: block; height: auto; margin: 0; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.company-detail { min-height: 128px; margin: 12px 8px 2px; border: 2px solid #000080; background: #ffffd7; }
.company-detail-copy { padding: 9px 11px; }
.company-detail-copy > small { color: #655d17; font: 700 9px "Courier New", monospace; letter-spacing: .08em; }
.company-detail-copy h3 { margin: 3px 0 1px; color: #000080; font-size: 15px; }
.company-detail-copy > strong { color: #333; font-size: 11px; }
.company-detail-copy p { margin: 6px 0 0; line-height: 1.3; }
.myspace-continue { margin-top: 7px; padding: 5px 8px; border: 2px outset #d4d0c8; background: #ece9d8; color: #000080; font-weight: 700; }
.profile-comment-easter-egg { margin: 18px 0 8px; border: 1px solid #bbb; background: #f4f4f4; }
.profile-comment-easter-egg summary { padding: 6px 8px; color: #003399; cursor: pointer; font-weight: 700; }
.profile-comment-easter-egg p { margin: 0; padding: 0 9px 9px; }

/* PM Twin 2.0 case study */
.pm-page {
  min-height: 100%;
  background: #f4f5f1;
  color: #172030;
  font: 13px/1.45 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.pm-page button { font: inherit; }
.pm-topbar {
  position: sticky;
  z-index: 3;
  top: 0;
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 18px;
  border-bottom: 1px solid #273348;
  background: #101827;
  color: #fff;
}
.pm-topbar > div { display: flex; align-items: center; gap: 8px; }
.pm-topbar > div > span:last-child { color: #a9b4c6; }
.pm-jetski-mark { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; background: #4e7cff; color: #fff !important; font-weight: 900; }
.pm-local-status { color: #bdc6d5; font-size: 11px; }
.pm-local-status > span { width: 7px; height: 7px; border-radius: 50%; background: #63d79c; box-shadow: 0 0 0 3px rgba(99,215,156,.13); }
.pm-app-shell { display: grid; min-height: 620px; grid-template-columns: 205px minmax(0, 1fr); }
.pm-case-nav { display: flex; flex-direction: column; gap: 5px; padding: 18px 10px; border-right: 1px solid #d5dae1; background: #e9ece8; }
.pm-case-nav button { display: grid; grid-template-columns: 28px 1fr; gap: 0 8px; padding: 9px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #596477; text-align: left; }
.pm-case-nav button > span { grid-row: 1 / 3; color: #8a94a5; font: 700 10px/1.4 ui-monospace, monospace; }
.pm-case-nav button strong { color: #283346; font-size: 12px; }
.pm-case-nav button small { font-size: 9px; }
.pm-case-nav button:hover { background: #f7f8f5; }
.pm-case-nav button[aria-current="step"] { border-color: #b9c8f9; background: #fff; box-shadow: inset 3px 0 #4e7cff; }
.pm-stage { min-width: 0; padding: clamp(18px, 4vw, 42px); background: #f8f9f6; }
.pm-view[hidden] { display: none !important; }
.pm-view { max-width: 1040px; margin: 0 auto; }
.pm-section-heading { max-width: 760px; margin-bottom: 22px; }
.pm-section-heading > small,
.pm-session-restore small,
.pm-next-test aside small { color: #4e7cff; font: 700 10px ui-monospace, monospace; letter-spacing: .12em; }
.pm-section-heading h1,
.pm-session-restore h1 { margin: 4px 0 6px; font-size: clamp(23px, 3.3vw, 38px); line-height: 1.05; letter-spacing: -.035em; }
.pm-section-heading p,
.pm-session-restore p { margin: 0; color: #5c6677; font-size: 14px; }
.pm-session-restore { display: grid; grid-template-columns: 62px 1fr; gap: 17px; align-items: center; margin-bottom: 22px; padding: 18px; border: 1px solid #cbd2dc; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(30,42,60,.07); }
.pm-restore-icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: #eef2ff; color: #4e7cff; font-size: 31px; }
.pm-before-after { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pm-before-after article { min-height: 240px; padding: 20px; border: 1px solid #d5dae1; border-radius: 12px; background: #fff; }
.pm-before-after article.aware { border-color: #b7c6f8; background: #f2f5ff; }
.pm-before-after small { color: #7d8797; font: 700 9px ui-monospace, monospace; letter-spacing: .1em; }
.pm-before-after h2 { margin: 8px 0 6px; font-size: 21px; }
.pm-before-after p { color: #5c6677; }
.pm-empty-chat { margin-top: 25px; padding: 14px; border: 1px solid #e0e3e8; border-radius: 10px; color: #8b93a0; text-align: center; }
.pm-before-after blockquote { margin: 28px 0 0; padding-left: 13px; border-left: 4px solid #4e7cff; color: #1d2a42; font-size: 19px; font-weight: 700; }
.pm-next,
.pm-restart { display: block; margin: 20px 0 0 auto; padding: 9px 13px; border: 0; border-radius: 7px; background: #1c2940; color: #fff; font-weight: 700; }
.pm-memory-pipeline { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0 0 18px; padding: 0; list-style: none; }
.pm-memory-pipeline li { position: relative; min-width: 0; padding: 13px 11px; border: 1px solid #d5dae1; border-right: 0; background: #fff; }
.pm-memory-pipeline li:first-child { border-radius: 9px 0 0 9px; }
.pm-memory-pipeline li:last-child { border-right: 1px solid #d5dae1; border-radius: 0 9px 9px 0; background: #eef2ff; }
.pm-memory-pipeline li > span { display: block; margin-bottom: 7px; color: #4e7cff; font: 700 9px ui-monospace, monospace; }
.pm-memory-pipeline strong { display: block; font-size: 11px; line-height: 1.2; }
.pm-memory-pipeline small { display: block; margin-top: 4px; color: #687386; font-size: 9px; line-height: 1.25; }
.pm-system-demo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(220px, .75fr); gap: 14px; }
.pm-wiki-browser,
.pm-aware-session { overflow: hidden; border: 1px solid #cdd3dc; border-radius: 10px; background: #fff; box-shadow: 0 8px 20px rgba(28,40,60,.06); }
.pm-wiki-browser > header,
.pm-aware-session > header { display: flex; justify-content: space-between; padding: 9px 11px; border-bottom: 1px solid #dce0e6; background: #f1f3f5; font: 700 9px ui-monospace, monospace; }
.pm-wiki-browser header b,
.pm-aware-session header b { color: #27835a; }
.pm-wiki-layout { display: grid; min-height: 235px; grid-template-columns: 145px 1fr; }
.pm-wiki-layout ul { margin: 0; padding: 9px; border-right: 1px solid #e1e4e8; background: #f7f8f9; list-style: none; font: 10px/2 ui-monospace, monospace; }
.pm-wiki-layout li.active { color: #3f68d7; font-weight: 700; }
.pm-wiki-layout article { padding: 15px; }
.pm-wiki-layout article > small { color: #7a8492; font: 8px ui-monospace, monospace; }
.pm-wiki-layout h2 { margin: 8px 0 13px; }
.pm-wiki-add { color: #177149; }
.pm-wiki-change { color: #9a6310; }
.pm-control-row { display: flex; gap: 6px; margin-top: 16px; }
.pm-control-row button,
.pm-control-console button { padding: 5px 8px; border: 1px solid #c5cbd4; border-radius: 5px; background: #fff; color: #334057; font-size: 10px; }
.pm-aware-session p { margin: 18px 14px 10px; padding: 12px; border-radius: 8px; background: #eef2ff; }
.pm-aware-session > small { display: block; padding: 0 14px 18px; color: #6a7485; }
.pm-decision-grid,
.pm-risk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.pm-decision-grid article,
.pm-risk-grid article { min-height: 155px; padding: 18px; border: 1px solid #d5dae1; border-radius: 10px; background: #fff; }
.pm-decision-grid span { color: #4e7cff; font: 700 10px ui-monospace, monospace; }
.pm-decision-grid h2,
.pm-risk-grid h2,
.pm-next-test h2 { margin: 7px 0 5px; font-size: 17px; }
.pm-decision-grid p,
.pm-risk-grid p,
.pm-next-test p { margin: 0; color: #626d7e; }
.pm-risk-grid article { border-top: 4px solid #efb450; }
.pm-control-console { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; padding: 10px; border: 1px solid #ccd3dd; border-radius: 8px; background: #eef0ed; }
.pm-control-console > span { margin-right: auto; color: #596576; font: 10px ui-monospace, monospace; }
.pm-next-test { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.3fr); gap: 17px; }
.pm-next-test aside { padding: 22px; border-radius: 12px; background: #17243b; color: #fff; }
.pm-next-test blockquote { margin: 15px 0 0; font-size: 22px; font-weight: 700; line-height: 1.25; }
.pm-next-test > div { display: grid; gap: 9px; }
.pm-next-test article { display: grid; grid-template-columns: 35px 1fr; padding: 13px 15px; border: 1px solid #d5dae1; border-radius: 9px; background: #fff; }
.pm-next-test article > span { grid-row: 1 / 3; color: #4e7cff; font: 700 10px ui-monospace, monospace; }
.pm-next-test h2 { margin-top: 0; }
.pm-restart { background: #4e7cff; }

/* PM Twin Mission Control art direction, adapted from Barron's original Alfred Hub deck */
@font-face {
  font-family: "PMApestron";
  src: url("assets/Apestron.ttf") format("truetype");
  font-display: swap;
}
.pm-page {
  --pm-space: oklch(13% .028 252);
  --pm-panel: oklch(18% .032 250);
  --pm-panel-hi: oklch(23% .035 247);
  --pm-rule: oklch(42% .045 238);
  --pm-paper: oklch(94% .018 88);
  --pm-ink: oklch(18% .025 252);
  --pm-muted: oklch(72% .03 243);
  --pm-signal: oklch(82% .16 84);
  --pm-cyan: oklch(78% .11 210);
  --pm-green: oklch(79% .16 151);
  --pm-warn: oklch(77% .17 62);
  min-height: 100%;
  background:
    radial-gradient(circle at 12% 15%, oklch(26% .045 242 / .28) 0 1px, transparent 1.5px),
    radial-gradient(circle at 76% 34%, oklch(87% .04 95 / .18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 82%, oklch(78% .08 210 / .16) 0 1px, transparent 1.5px),
    var(--pm-space);
  background-size: 53px 53px, 79px 79px, 101px 101px, auto;
  color: var(--pm-paper);
  font: 13px/1.45 "Segoe UI", Tahoma, sans-serif;
}
.pm-page button { font: inherit; }
.pm-topbar {
  min-height: 64px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--pm-rule);
  background: oklch(10% .024 254 / .98);
  color: var(--pm-paper);
  box-shadow: 0 7px 24px oklch(5% .02 250 / .35);
}
.pm-mission-brand { min-width: 0; }
.pm-mission-brand img {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid oklch(88% .02 90 / .45);
  border-radius: 50%;
  object-fit: cover;
}
.pm-mission-brand > div { display: grid; min-width: 0; gap: 2px; }
.pm-mission-brand small {
  color: var(--pm-cyan);
  font: 8px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .13em;
}
.pm-mission-brand strong {
  overflow: hidden;
  font: 16px/1 "PMApestron", Impact, sans-serif;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pm-local-status {
  color: var(--pm-muted);
  font: 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
}
.pm-local-status > span {
  width: 8px;
  height: 8px;
  background: var(--pm-green);
  box-shadow: 0 0 0 3px oklch(79% .16 151 / .14), 0 0 12px oklch(79% .16 151 / .35);
}
.pm-app-shell { min-height: 650px; grid-template-columns: 190px minmax(0, 1fr); }
.pm-case-nav {
  gap: 7px;
  padding: 16px 9px;
  border-color: var(--pm-rule);
  background: oklch(15% .03 251 / .98);
}
.pm-case-nav::before {
  display: block;
  padding: 0 8px 7px;
  color: var(--pm-muted);
  content: "MISSION PHASES";
  font: 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .14em;
}
.pm-case-nav button {
  grid-template-columns: 27px 1fr;
  padding: 10px 8px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--pm-muted);
}
.pm-case-nav button > span { color: oklch(61% .045 240); }
.pm-case-nav button strong { color: var(--pm-paper); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.pm-case-nav button small { color: var(--pm-muted); font-size: 8px; }
.pm-case-nav button:hover { background: var(--pm-panel); }
.pm-case-nav button[aria-current="step"] {
  border-color: var(--pm-signal);
  background: oklch(24% .04 247);
  box-shadow: 0 0 16px oklch(82% .16 84 / .12);
}
.pm-case-nav button[aria-current="step"] > span { color: var(--pm-signal); }
.pm-stage {
  padding: clamp(19px, 3.5vw, 40px);
  background: transparent;
}
.pm-view { max-width: 1080px; }
.pm-view[hidden] { display: none !important; }
.pm-section-heading { max-width: 820px; margin-bottom: 20px; }
.pm-section-heading > small,
.pm-briefing-copy > small,
.pm-thesis-panel > small,
.pm-debrief-grid aside > small {
  color: var(--pm-signal);
  font: 8px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .16em;
}
.pm-section-heading h1,
.pm-briefing-copy h1 {
  margin: 6px 0 8px;
  color: var(--pm-paper);
  font: clamp(28px, 4.2vw, 50px)/.94 "PMApestron", Impact, sans-serif;
  letter-spacing: .015em;
}
.pm-section-heading p,
.pm-briefing-copy p { max-width: 70ch; margin: 0; color: var(--pm-muted); font-size: 13px; }
.pm-briefing-grid {
  display: grid;
  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 46px);
  align-items: center;
  margin-bottom: 22px;
}
.pm-patch-lockup { display: grid; justify-items: center; gap: 9px; }
.pm-patch-lockup img {
  width: min(100%, 225px);
  aspect-ratio: 1;
  border: 1px solid oklch(91% .02 90 / .45);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 8px oklch(18% .025 250), 0 0 50px oklch(78% .11 210 / .17);
}
.pm-patch-lockup span {
  color: var(--pm-cyan);
  font: 10px/1 "PMApestron", Impact, sans-serif;
  letter-spacing: .17em;
}
.pm-restore-bridge {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 12px;
  margin-top: 18px;
  padding: 11px 12px;
  border: 1px solid var(--pm-rule);
  background: oklch(17% .03 250 / .75);
}
.pm-restore-bridge b { color: var(--pm-cyan); font: 8px ui-monospace, monospace; letter-spacing: .1em; }
.pm-restore-bridge span { color: var(--pm-muted); font-size: 11px; }
.pm-problem-console { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border: 1px solid var(--pm-rule); }
.pm-console-window,
.pm-thesis-panel { min-height: 205px; margin: 0; padding: 18px; background: var(--pm-panel); }
.pm-console-window { border-right: 1px solid var(--pm-rule); }
.pm-console-window > header,
.pm-flight-log > header,
.pm-wiki-browser > header,
.pm-aware-session > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -18px -18px 15px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--pm-rule);
  background: oklch(11% .025 252);
  color: var(--pm-muted);
  font: 8px ui-monospace, monospace;
  letter-spacing: .08em;
}
.pm-console-window > header b { color: var(--pm-warn); }
.pm-console-window > p,
.pm-thesis-panel > p { margin: 12px 0 0; color: var(--pm-muted); }
.pm-blank-session { display: grid; min-height: 88px; place-content: center; justify-items: center; color: oklch(60% .03 242); }
.pm-blank-session i { width: 28px; height: 28px; border: 1px solid var(--pm-rule); border-radius: 50%; }
.pm-blank-session h2 { margin: 8px 0 0; font-size: 16px; font-weight: 400; }
.pm-thesis-panel { background: var(--pm-paper); color: var(--pm-ink); }
.pm-thesis-panel > small { color: oklch(50% .13 70); }
.pm-thesis-panel h2 { margin: 9px 0 6px; font-size: 20px; line-height: 1.08; }
.pm-thesis-panel > p { color: oklch(43% .03 250); }
.pm-thesis-panel blockquote { margin: 22px 0 0; color: var(--pm-ink); font: 24px/1.08 "PMApestron", Impact, sans-serif; }
.pm-next,
.pm-restart {
  margin-top: 18px;
  padding: 9px 13px;
  border: 1px solid var(--pm-signal);
  border-radius: 2px;
  background: var(--pm-signal);
  color: oklch(16% .03 250);
  font-weight: 800;
  letter-spacing: .025em;
}
.pm-next:hover,
.pm-restart:hover { filter: brightness(1.08); }
.pm-memory-pipeline { margin-bottom: 15px; }
.pm-memory-pipeline li {
  min-height: 84px;
  padding: 11px 10px;
  border-color: var(--pm-rule);
  background: var(--pm-panel);
}
.pm-memory-pipeline li:last-child { border-color: var(--pm-rule); background: oklch(25% .05 235); }
.pm-memory-pipeline li > span { color: var(--pm-signal); }
.pm-memory-pipeline strong { color: var(--pm-paper); }
.pm-memory-pipeline small { color: var(--pm-muted); }
.pm-telemetry-board {
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr);
  border: 1px solid var(--pm-rule);
  background: var(--pm-panel);
}
.pm-constellation { position: relative; min-height: 230px; overflow: hidden; border-right: 1px solid var(--pm-rule); }
.pm-constellation > small { position: absolute; z-index: 4; top: 10px; left: 11px; color: var(--pm-cyan); font: 8px ui-monospace, monospace; letter-spacing: .1em; }
.pm-orbit { position: absolute; top: 50%; left: 50%; border: 1px solid oklch(63% .07 215 / .35); border-radius: 50%; transform: translate(-50%, -50%); }
.orbit-one { width: 150px; height: 150px; }
.orbit-two { width: 220px; height: 220px; }
.pm-core { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 86px; place-items: center; transform: translate(-50%, -50%); text-align: center; }
.pm-core img { width: 58px; height: 58px; border: 1px solid var(--pm-signal); border-radius: 50%; object-fit: cover; }
.pm-core b { margin-top: 4px; color: var(--pm-paper); font: 8px/1.1 ui-monospace, monospace; }
.pm-source { position: absolute; z-index: 4; padding: 4px 6px; border: 1px solid var(--pm-cyan); background: oklch(12% .03 250); color: var(--pm-cyan); font: 7px ui-monospace, monospace; }
.source-chat { top: 19%; right: 14%; }
.source-drive { right: 8%; bottom: 20%; }
.source-mail { bottom: 13%; left: 14%; }
.source-calendar { top: 25%; left: 8%; }
.pm-flight-log { min-width: 0; padding: 18px; }
.pm-flight-log > header { margin-bottom: 0; }
.pm-flight-log > header b { color: var(--pm-signal); }
.pm-flight-log ol { margin: 0; padding: 0; list-style: none; }
.pm-flight-log li { display: grid; grid-template-columns: 43px 1fr auto; gap: 10px; align-items: center; min-height: 53px; border-bottom: 1px solid var(--pm-rule); }
.pm-flight-log time { color: var(--pm-cyan); font: 9px ui-monospace, monospace; }
.pm-flight-log li > span { color: var(--pm-paper); }
.pm-flight-log li > b { color: var(--pm-green); font: 7px ui-monospace, monospace; letter-spacing: .06em; }
.pm-flight-log li:last-child > b { color: var(--pm-warn); }
.pm-system-demo { margin-top: 14px; grid-template-columns: minmax(0, 1.45fr) minmax(220px, .75fr); }
.pm-wiki-browser,
.pm-aware-session { border-color: var(--pm-rule); border-radius: 0; background: var(--pm-panel); box-shadow: none; }
.pm-wiki-browser > header,
.pm-aware-session > header { margin: 0; }
.pm-wiki-browser header b,
.pm-aware-session header b { color: var(--pm-green); }
.pm-wiki-layout { min-height: 210px; grid-template-columns: 140px 1fr; }
.pm-wiki-layout ul { border-color: var(--pm-rule); background: oklch(15% .03 250); color: var(--pm-muted); }
.pm-wiki-layout li.active { color: var(--pm-signal); }
.pm-wiki-layout article { color: var(--pm-paper); }
.pm-wiki-layout article > small { color: var(--pm-muted); }
.pm-wiki-add { color: var(--pm-green); }
.pm-wiki-change { color: var(--pm-signal); }
.pm-control-row button,
.pm-control-console button { border-color: var(--pm-rule); border-radius: 1px; background: oklch(25% .035 246); color: var(--pm-paper); }
.pm-aware-session p { background: oklch(24% .05 234); color: var(--pm-paper); }
.pm-aware-session > small { color: var(--pm-muted); }
.pm-flight-plan { border: 1px solid var(--pm-rule); }
.pm-flight-plan-head,
.pm-flight-plan article { display: grid; grid-template-columns: minmax(150px, .75fr) minmax(220px, 1.25fr) minmax(180px, 1fr); gap: 18px; align-items: center; }
.pm-flight-plan-head { padding: 8px 15px; background: oklch(10% .025 252); color: var(--pm-cyan); font: 8px ui-monospace, monospace; letter-spacing: .11em; }
.pm-flight-plan article { min-height: 86px; padding: 14px 15px; border-top: 1px solid var(--pm-rule); background: var(--pm-panel); }
.pm-flight-plan article:nth-child(odd) { background: var(--pm-panel-hi); }
.pm-flight-plan article > span { color: var(--pm-signal); font: 9px ui-monospace, monospace; text-transform: uppercase; }
.pm-flight-plan h2 { margin: 0; color: var(--pm-paper); font-size: 17px; line-height: 1.15; }
.pm-flight-plan p { margin: 0; color: var(--pm-muted); }
.pm-safety-layout { display: grid; grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr); gap: 14px; }
.pm-signal-console { border: 1px solid var(--pm-rule); background: oklch(10% .025 252); }
.pm-signal-console > header { padding: 9px 11px; border-bottom: 1px solid var(--pm-rule); color: var(--pm-cyan); font: 8px ui-monospace, monospace; letter-spacing: .11em; }
.pm-signal-console > div { display: grid; grid-template-columns: 1fr 10px auto; gap: 8px; align-items: center; min-height: 54px; padding: 0 11px; border-bottom: 1px solid var(--pm-rule); }
.pm-signal-console span { color: var(--pm-muted); font: 8px ui-monospace, monospace; }
.pm-signal-console i { width: 8px; height: 8px; border-radius: 50%; }
.pm-signal-console .signal-good { background: var(--pm-green); box-shadow: 0 0 10px oklch(79% .16 151 / .55); }
.pm-signal-console .signal-warn { background: var(--pm-warn); box-shadow: 0 0 10px oklch(77% .17 62 / .55); }
.pm-signal-console b { color: var(--pm-paper); font: 7px ui-monospace, monospace; }
.pm-safety-protocols { border: 1px solid var(--pm-rule); }
.pm-safety-protocols article { display: grid; grid-template-columns: 38px 1fr; min-height: 72px; padding: 11px 14px; border-bottom: 1px solid var(--pm-rule); background: var(--pm-panel); }
.pm-safety-protocols article:last-child { border-bottom: 0; }
.pm-safety-protocols article > span { color: var(--pm-signal); font: 9px ui-monospace, monospace; }
.pm-safety-protocols small { color: var(--pm-cyan); font: 7px ui-monospace, monospace; letter-spacing: .08em; }
.pm-safety-protocols h2 { margin: 3px 0; color: var(--pm-paper); font-size: 15px; }
.pm-safety-protocols p { margin: 0; color: var(--pm-muted); font-size: 11px; }
.pm-control-console { border-color: var(--pm-rule); border-radius: 0; background: oklch(15% .03 250); }
.pm-control-console > span { color: var(--pm-muted); }
.pm-debrief-grid { display: grid; grid-template-columns: minmax(230px, .82fr) minmax(0, 1.18fr); border: 1px solid var(--pm-rule); }
.pm-debrief-grid > aside { display: grid; align-content: start; padding: 20px; background: var(--pm-paper); color: var(--pm-ink); }
.pm-debrief-grid aside img { width: 96px; height: 96px; margin-bottom: 14px; border: 1px solid oklch(35% .03 250); border-radius: 50%; object-fit: cover; }
.pm-debrief-grid aside > small { color: oklch(48% .12 65); }
.pm-debrief-grid blockquote { margin: 13px 0 0; font: 23px/1.12 "PMApestron", Impact, sans-serif; }
.pm-debrief-grid > section { background: var(--pm-panel); }
.pm-debrief-grid section article { display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; min-height: 91px; padding: 13px 15px; border-bottom: 1px solid var(--pm-rule); }
.pm-debrief-grid section article:last-child { border-bottom: 0; }
.pm-debrief-grid section article > span { color: var(--pm-signal); font: 9px ui-monospace, monospace; }
.pm-debrief-grid h2 { margin: 0 0 3px; font-size: 16px; }
.pm-debrief-grid p { margin: 0; color: var(--pm-muted); font-size: 11px; }
.pm-debrief-grid section article > b { color: var(--pm-green); font: 8px ui-monospace, monospace; letter-spacing: .08em; }
.pm-closing-signal { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-top: 14px; padding: 13px 15px; border: 1px solid var(--pm-signal); background: oklch(20% .045 246); }
.pm-closing-signal span { color: var(--pm-signal); font: 8px ui-monospace, monospace; letter-spacing: .11em; }
.pm-closing-signal strong { font: 20px/1 "PMApestron", Impact, sans-serif; text-align: right; }

.classic-scrollbar {
  display: flex;
  width: 16px;
  flex: 0 0 16px;
  flex-direction: column;
  border-left: 1px solid #9c9a90;
  background: #ece9d8;
}

.classic-scrollbar button {
  width: 15px;
  height: 16px;
  padding: 0;
  border: 1px solid;
  border-color: #fff #777 #777 #fff;
  background: #ece9d8;
  font-size: 8px;
}
.scroll-track { min-height: 0; flex: 1; background: repeating-conic-gradient(#fff 0 25%, #d6d3c6 0 50%) 0 / 2px 2px; }
.scroll-thumb { display: block; height: 52px; margin: 1px; border: 1px solid; border-color: #fff #777 #777 #fff; background: #ece9d8; }

.status-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  padding-left: 5px;
  border-top: 1px solid #aaa79b;
  font-size: 11px;
}
.status-spacer { height: 18px; flex: 1; border-left: 1px solid #aaa79b; box-shadow: inset 1px 0 #fff; }
.resize-grip {
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  background: repeating-linear-gradient(135deg, transparent 0 3px, #777 3px 4px, #fff 4px 5px);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.taskbar {
  position: absolute;
  z-index: 20;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: var(--taskbar-height);
  align-items: stretch;
  border-top: 1px solid #2e8af0;
  background: linear-gradient(#297fea 0, #1768d7 16%, #0a56c7 52%, #0b4fba 100%);
  box-shadow: inset 0 1px rgba(255,255,255,.35);
}

.start-button {
  display: flex;
  width: 94px;
  align-items: center;
  gap: 6px;
  padding: 0 11px 0 8px;
  border: 0;
  border-right: 2px solid #0d7a27;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(#62c456 0, #3aaf3c 16%, #238b2d 52%, #168325 100%);
  box-shadow: inset 0 1px 1px #b4e8a7, 2px 0 3px rgba(0,0,0,.3);
  color: #fff;
  font-size: 17px;
  font-style: italic;
  font-weight: 700;
  text-shadow: 1px 1px #164e12;
}
.start-button:hover { filter: brightness(1.1); }
.start-button[aria-expanded="true"] { filter: brightness(.88); }
.windows-mark { display: grid; width: 19px; height: 17px; grid-template-columns: 1fr 1fr; gap: 1px; transform: skewY(-5deg); }
.windows-mark i:nth-child(1) { background: #f54b39; }
.windows-mark i:nth-child(2) { background: #58c248; }
.windows-mark i:nth-child(3) { background: #3e86dd; }
.windows-mark i:nth-child(4) { background: #ffd13a; }

.quick-launch { display: flex; align-items: center; gap: 5px; padding: 0 7px; border-right: 1px solid #0a43a3; color: #dbeeff; font-size: 13px; }
.task-button {
  display: flex;
  width: min(190px, 28vw);
  align-items: center;
  gap: 5px;
  margin: 3px 2px;
  padding: 0 8px;
  overflow: hidden;
  border: 1px solid #0a3d9a;
  border-radius: 2px;
  background: linear-gradient(#3d8ae5, #1762c9);
  box-shadow: inset 1px 1px rgba(255,255,255,.28);
  color: #fff;
  font-size: 11px;
  text-align: left;
  white-space: nowrap;
}
.task-button.active { background: linear-gradient(#1b5fb4, #124c9d); box-shadow: inset 1px 1px 3px rgba(0,0,0,.42); }
.task-button img { width: 16px; height: 16px; object-fit: contain; }
.task-button[hidden] { display: none !important; }
.task-button span { overflow: hidden; text-overflow: ellipsis; }
.taskbar-space { flex: 1; }
.system-tray {
  display: flex;
  min-width: 132px;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 10px;
  border-left: 1px solid #0c5dbf;
  background: linear-gradient(#2f9bec, #0d83dc);
  box-shadow: inset 1px 0 rgba(255,255,255,.3);
  color: #fff;
  font-size: 11px;
}
.tray-icons { letter-spacing: 1px; }

.start-menu {
  position: absolute;
  z-index: 19;
  bottom: var(--taskbar-height);
  left: 0;
  width: 380px;
  border: 2px solid #0755c7;
  border-radius: 5px 5px 0 0;
  background: #fff;
  box-shadow: 2px -2px 6px rgba(0,0,0,.35);
  font-size: 12px;
}
.start-menu[hidden] { display: none; }
.start-menu > header {
  display: flex;
  height: 58px;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: linear-gradient(#2686e8, #0a5acb);
  color: #fff;
  font-size: 18px;
  text-shadow: 1px 1px #174c91;
}
.user-avatar { display: grid; width: 44px; height: 44px; place-items: center; border: 2px solid #fff; border-radius: 3px; background: #e7b043; color: #26365e; font: 700 24px Georgia, serif; }
.start-menu-body { display: grid; min-height: 300px; grid-template-columns: 1fr 1fr; }
.start-primary,
.start-secondary { display: flex; flex-direction: column; padding: 8px 6px; }
.start-secondary { border-left: 1px solid #aac4e7; background: #d3e5fa; }
.start-menu-body button { display: flex; min-height: 46px; align-items: center; gap: 9px; padding: 5px; border: 1px solid transparent; background: transparent; text-align: left; }
.start-menu-body button:hover { border-color: #316ac5; background: #316ac5; color: #fff; }
.start-menu-body img,
.start-menu-body .mail-icon,
.start-menu-body .start-glyph { width: 32px; height: 32px; object-fit: contain; font-size: 27px; text-align: center; }
.start-menu-body small { display: block; color: #777; }
.start-menu-body button:hover small { color: #e9f3ff; }
.start-menu hr { width: 90%; margin: 5px auto; border: 0; border-top: 1px solid #ccc; }
.start-menu > footer { display: flex; justify-content: flex-end; gap: 8px; padding: 7px 9px; background: linear-gradient(#1c75df, #0755c3); }
.start-menu > footer button { border: 0; background: transparent; color: #fff; font-size: 11px; }

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

@media (max-width: 760px), (max-height: 560px) {
  :root { --taskbar-height: 34px; }
  .desktop { min-height: 0; }
  .desktop-shortcuts { display: none; }
  .photo-window {
    left: 8px !important;
    top: 42px !important;
    width: min(88vw, 440px) !important;
    height: calc(100vh - var(--taskbar-height) - 54px) !important;
    min-width: 0;
    min-height: 0;
  }
  .browser-window {
    left: 4px !important;
    top: 4px !important;
    width: calc(100vw - 8px) !important;
    height: calc(100vh - var(--taskbar-height) - 8px) !important;
    min-width: 0;
    min-height: 0;
    grid-template-rows: 25px 24px 38px 28px minmax(0, 1fr) 23px;
  }
  .bookmarks-bar { display: none; }
  .search-field { display: none; }
  .menu-bar button:nth-child(n+5) { display: none; }
  .navigation-bar { gap: 1px; }
  .nav-button { width: 25px; }
  .nav-button.dropdown,
  .nav-button.stop { display: none; }
  .address-field { min-width: 100px; }
  .address-field .rss,
  .address-field .star { display: none; }
  .tab-wrapper { width: 150px; flex: 0 0 150px; }
  .resize-grip { cursor: default; opacity: .4; }
  .quick-launch { display: none; }
  .start-button { width: 82px; }
  .task-button { width: 130px; }
  .system-tray { min-width: 84px; padding: 0 6px; }
  .tray-icons { display: none; }
  .start-menu { width: min(380px, 100vw); }
  .myspace-utility { grid-template-columns: 1fr auto; }
  .myspace-utility > :last-child { display: none; }
  .myspace-search { justify-content: flex-end; }
  .myspace-search label { display: none; }
  .myspace-search-field { width: min(118px, 32vw); }
  .myspace-logo-panel { width: 92%; }
  .myspace-nav { justify-content: flex-start; }
  .myspace-profile { grid-template-columns: 1fr; grid-template-areas: "main" "sidebar"; gap: 18px; padding: 12px 10px 32px; }
  .profile-sidebar { max-width: 390px; }
  .interests-box { display: none; }
  .profile-intro { grid-template-columns: minmax(145px, 174px) 1fr; }
  .profile-photo { width: 100%; height: auto; aspect-ratio: 1; }
  .profile-facts .last-login { margin-top: 20px; }
  .company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-comments { margin-top: 18px; }
  .myspace-comment { grid-template-columns: 105px minmax(0, 1fr); }
  .comment-author { padding-inline: 6px; }
  .comment-copy h3 { font-size: 12px; }
  .comments-pagination span:last-child { margin-right: 28%; }
  .yt-header,
  .yt-watch-layout { width: 100%; }
  .yt-header { padding: 5px; }
  .yt-header-top { min-height: 57px; grid-template-columns: 125px 1fr; }
  .yt-header-top > nav { text-align: right; white-space: normal; }
  .yt-locale { display: none; }
  .yt-primary-row { height: 27px; padding-left: 0; }
  .yt-primary-row nav { height: 27px; }
  .yt-primary-row a { width: auto; flex: 1; font-size: 11px; }
  .yt-search { height: 35px; padding: 0 5px; }
  .yt-search input { min-width: 0; flex: 1; }
  .yt-search > a { display: none; }
  .yt-search .yt-upload { padding-inline: 8px; }
  .yt-watch-layout { grid-template-columns: 1fr; gap: 10px; padding: 12px 7px 24px; }
  .yt-video-stage { height: min(56vw, 315px); }
  .yt-sidebar { padding-top: 0; }
  .yt-shopify-banner { display: none; }
  .yt-channel-card { border-top: 1px solid #bbb; }
  .yt-more-videos { display: none; }
  .yt-actions a { font-size: 11px; }
  .forum-page { padding-bottom: 14px; }
  .forum-masthead { min-height: 59px; }
  .forum-brand { padding-left: 8px; }
  .forum-brand img { width: 49px; height: 49px; }
  .forum-brand strong { font-size: 23px; }
  .forum-brand small { margin-left: 4px; font-size: 12px; }
  .forum-masthead > nav { align-items: center; padding: 0 6px 0 0; }
  .forum-masthead > nav a { display: none; }
  .forum-masthead > nav a[aria-current="page"] { display: block; }
  .forum-shell { padding: 6px 5px 20px; }
  .forum-userbar > span { display: none; }
  .forum-userbar { justify-content: flex-end; font-size: 8px; }
  .forum-userbar .forum-secondary-links { display: none; }
  .forum-intro { padding: 10px 5px 8px; }
  .forum-intro h1 { font-size: 18px; }
  .forum-actions > div { max-width: 58%; line-height: 1.8; }
  .forum-topic-row { grid-template-columns: 33px minmax(0, 1fr) 105px; }
  .forum-topic-row > :nth-child(3),
  .forum-topic-row > :nth-child(4) { display: none; }
  .forum-table-head > :nth-child(5) { display: flex; }
  .forum-topic-copy { padding: 6px; }
  .forum-topic-copy p { display: none; }
  .forum-last-post { padding-inline: 5px; }
  .forum-legend { gap: 6px 10px; }
  .pm-topbar { min-height: 52px; padding: 6px 9px; }
  .pm-mission-brand img { width: 36px; height: 36px; flex-basis: 36px; }
  .pm-mission-brand small { display: none; }
  .pm-mission-brand strong { font-size: 12px; }
  .pm-local-status { display: none !important; }
  .pm-app-shell { min-height: 0; grid-template-columns: 1fr; }
  .pm-case-nav { position: sticky; z-index: 2; top: 52px; flex-direction: row; overflow-x: auto; padding: 7px; border-right: 0; border-bottom: 1px solid var(--pm-rule); scrollbar-width: none; }
  .pm-case-nav::before { display: none; }
  .pm-case-nav::-webkit-scrollbar { display: none; }
  .pm-case-nav button { min-width: 126px; flex: 0 0 126px; }
  .pm-case-nav button small { display: none; }
  .pm-stage { padding: 15px 10px 28px; }
  .pm-section-heading h1,
  .pm-briefing-copy h1 { font-size: clamp(25px, 8vw, 35px); }
  .pm-briefing-grid { grid-template-columns: 92px minmax(0, 1fr); gap: 16px; }
  .pm-patch-lockup img { width: 88px; box-shadow: 0 0 0 4px oklch(18% .025 250); }
  .pm-patch-lockup span { font-size: 7px; }
  .pm-restore-bridge { grid-template-columns: 1fr; }
  .pm-problem-console,
  .pm-telemetry-board,
  .pm-system-demo,
  .pm-safety-layout,
  .pm-debrief-grid { grid-template-columns: 1fr; }
  .pm-console-window { border-right: 0; border-bottom: 1px solid var(--pm-rule); }
  .pm-console-window,
  .pm-thesis-panel { min-height: 0; }
  .pm-memory-pipeline { display: flex; overflow-x: auto; padding-bottom: 5px; }
  .pm-memory-pipeline li { min-width: 150px; border-right: 1px solid var(--pm-rule); }
  .pm-constellation { min-height: 210px; border-right: 0; border-bottom: 1px solid var(--pm-rule); }
  .pm-flight-log li { grid-template-columns: 38px 1fr; padding: 7px 0; }
  .pm-flight-log li > b { grid-column: 2; }
  .pm-wiki-layout { grid-template-columns: 100px 1fr; }
  .pm-flight-plan-head { display: none; }
  .pm-flight-plan article { grid-template-columns: 1fr; gap: 5px; }
  .pm-safety-protocols article { min-height: 0; }
  .pm-control-console > span { flex: 1 0 100%; }
  .pm-debrief-grid section article { grid-template-columns: 30px 1fr; }
  .pm-debrief-grid section article > b { grid-column: 2; }
  .pm-closing-signal { display: grid; }
  .pm-closing-signal strong { text-align: left; }
}

@media (max-height: 700px) and (min-width: 641px) {
  .pm-stage { padding: 22px clamp(24px, 3.5vw, 40px) 30px; }
  .pm-section-heading { margin-bottom: 14px; }
  .pm-section-heading h1,
  .pm-briefing-copy h1 { font-size: 36px; line-height: .95; }
  .pm-briefing-grid {
    grid-template-columns: minmax(135px, 160px) minmax(0, 1fr);
    gap: 28px;
    margin-bottom: 16px;
  }
  .pm-patch-lockup { gap: 7px; }
  .pm-patch-lockup img {
    width: 150px;
    box-shadow: 0 0 0 5px oklch(18% .025 250), 0 0 34px oklch(78% .11 210 / .15);
  }
  .pm-patch-lockup span { font-size: 8px; }
  .pm-restore-bridge { margin-top: 12px; padding: 8px 10px; }
}

@media (prefers-reduced-motion: no-preference) {
  .browser-window { transition: opacity 120ms ease; }
  .tab,
  .window-button,
  .task-button { transition: filter 100ms linear, background-color 100ms linear; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}