/* Period browser chrome for the experience page. Each window follows the
   browser of its years: Chrome after the 2018 Material refresh, Firefox
   Australis (2014 to 2017), and Internet Explorer 8 on Windows 7 Aero.
   The reload control is a real button, placed where each browser had it. */
.browser-window[data-browser] {
  position: relative;
}
.browser-window[data-browser] .browser-decoration {
  font:
    12px "Segoe UI",
    system-ui,
    Arial,
    sans-serif;
}
.browser-window[data-browser] .browser-decoration svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
}
.browser-window[data-browser] .window-controls {
  display: flex;
  align-items: stretch;
  height: 100%;
  letter-spacing: 0;
}
.browser-window[data-browser] .window-controls i {
  display: grid;
  place-items: center;
  width: 46px;
}
.browser-window[data-browser] .window-controls svg {
  width: 12px;
  height: 12px;
}
.browser-window[data-browser] .browser-toolbar {
  gap: 4px;
}
.nav-buttons {
  display: flex;
  align-items: center;
}
.nav-buttons i,
.browser-tools i {
  display: grid;
  place-items: center;
  font-style: normal;
}
.browser-reload {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
}
.browser-reload:focus-visible {
  outline: 2px solid #1a73e8;
  outline-offset: 1px;
}
.browser-window[data-browser] .browser-reload .icon-stop {
  display: none;
}
.browser-window[data-browser][data-reload="loading"] .browser-reload .icon-reload {
  display: none;
}
.browser-window[data-browser][data-reload="loading"] .browser-reload .icon-stop {
  display: block;
}
.browser-window[data-browser] .browser-address {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.browser-address i {
  display: grid;
  place-items: center;
  margin: 0;
  font-style: normal;
  flex: none;
}
.address-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.address-text b {
  font-weight: 400;
}
.browser-address .address-text {
  flex: 1 1 auto;
}
.browser-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 190px;
  min-width: 90px;
  color: #6d7278;
}
.browser-search > span {
  flex: 1;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-engine {
  font-style: normal;
  font-weight: 700;
}
.browser-window[data-browser] .browser-tab b {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
}
.browser-window[data-browser] .browser-tab b svg {
  width: 9px;
  height: 9px;
}
.browser-window[data-browser] .tab-plus {
  display: grid;
  place-items: center;
  align-self: center;
  padding: 0;
}
.browser-window[data-browser] .tab-plus svg {
  width: 13px;
  height: 13px;
}
/* The Internet Explorer 7/8 logo, wherever the browser showed its own icon. */
.ie-e {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  overflow: hidden;
  font-size: 0;
  color: transparent;
  text-shadow: none;
  background: url("assets/browsers/internet-explorer.webp") center / contain no-repeat;
}

/* Tabs from 2011 on show the favicon of the company's own site. DevJeroen
   had no site of its own, so that tab keeps the personal mark. */
.browser-window[data-browser] .browser-tab[data-experience-jump="lameco"] i {
  background: url("assets/favicons/lameco.svg") center / 16px no-repeat;
}
.browser-window[data-browser] .browser-tab[data-experience-jump="pidz"] i {
  background: url("assets/favicons/pidz.webp") center / 16px no-repeat;
}
.browser-window[data-browser] .browser-tab[data-experience-jump="altran"] i {
  background: url("assets/favicons/altran.png") center / 16px no-repeat;
}

/* ---- Status while loading -------------------------------------------- */
.browser-statusbubble {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 2;
  max-width: 70%;
  padding: 3px 9px 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font:
    12px "Segoe UI",
    system-ui,
    Arial,
    sans-serif;
  color: #5f6368;
  background: #dee1e6;
  border: 1px solid #c4c7cc;
  border-width: 1px 1px 0 0;
  border-radius: 0 4px 0 0;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
[data-reload="loading"] .browser-statusbubble {
  opacity: 1;
}
.browser-window[data-reload="loading"] .browser-content {
  background: #fff;
}
.browser-content[data-load="pending"] > * {
  visibility: hidden;
}
.browser-tab[data-loading] i {
  background: none !important;
  border: 2px solid #c6c9ce !important;
  border-top-color: #1a73e8 !important;
  border-radius: 50% !important;
  transform: none;
  animation: browser-spin 0.75s linear infinite;
}
@keyframes browser-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes browser-paint {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---- Chrome, 2018 onwards ------------------------------------------- */
.browser-window[data-browser="chrome"] {
  border: 1px solid #b9bcc2;
  border-radius: 10px;
  background: #fff;
}
[data-browser="chrome"] .browser-decoration {
  font-family:
    -apple-system,
    "SF Pro Text",
    "Helvetica Neue",
    system-ui,
    sans-serif;
}
[data-browser="chrome"] .browser-titlebar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 42px;
  padding: 0 0 0 14px;
  background: none;
}
.browser-window[data-browser="chrome"] .window-controls {
  align-items: center;
  gap: 8px;
  flex-direction: row-reverse;
}
.browser-window[data-browser="chrome"] .window-controls i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.5px #0000002e;
}
.browser-window[data-browser="chrome"] .window-controls svg {
  display: none;
}
[data-browser="chrome"] .wc-close {
  background: #ff5f57;
}
[data-browser="chrome"] .wc-min {
  background: #febc2e;
  order: -1;
}
[data-browser="chrome"] .wc-max {
  background: #28c840;
  order: -2;
}
.page-experience [data-browser="chrome"] .browser-tabs {
  height: 42px;
  padding: 8px 12px 0 84px;
  gap: 0;
  background: #dee1e6;
}
.page-experience [data-browser="chrome"] .browser-tab {
  position: relative;
  height: 34px;
  max-width: 240px;
  padding: 0 8px 0 12px;
  gap: 8px;
  border-radius: 8px 8px 0 0;
  background: none;
  color: #5f6368;
  font-size: 12px;
}
.page-experience [data-browser="chrome"] .browser-tab::after {
  content: "";
  position: absolute;
  right: 0;
  top: 8px;
  width: 1px;
  height: 18px;
  background: #a9adb3;
}
.page-experience [data-browser="chrome"] .browser-tab[aria-current="location"],
.page-experience [data-browser="chrome"] .browser-tab:hover {
  background: #fff;
  color: #3c4043;
}
.page-experience [data-browser="chrome"] .browser-tab[aria-current="location"]::after,
.page-experience [data-browser="chrome"] .browser-tab:hover::after {
  display: none;
}
/* The flared feet of the active tab. */
.page-experience [data-browser="chrome"] .browser-tab[aria-current="location"]::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  bottom: 0;
  height: 8px;
  background:
    radial-gradient(circle at 0 0, transparent 7.5px, #fff 8px) left / 8px 8px no-repeat,
    radial-gradient(circle at 100% 0, transparent 7.5px, #fff 8px) right / 8px 8px no-repeat;
  pointer-events: none;
}
[data-browser="chrome"] .browser-tab i {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 3px;
  background: url("icon.svg") center / 16px no-repeat;
}
[data-browser="chrome"] .tab-plus {
  width: 28px;
  height: 28px;
  margin: 0 0 3px 6px;
  border-radius: 50%;
  color: #5f6368;
}
[data-browser="chrome"] .browser-toolbar {
  min-height: 40px;
  padding: 4px 8px;
  background: #fff;
  border-bottom: 1px solid #dadce0;
  color: #5f6368;
}
[data-browser="chrome"] .nav-buttons i,
[data-browser="chrome"] .browser-tools i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
[data-browser="chrome"] .nav-forward {
  color: #bdc1c6;
}
[data-browser="chrome"] .browser-reload:hover {
  background: #f1f3f4;
}
[data-browser="chrome"] .browser-address {
  height: 28px;
  padding: 0 12px;
  border-radius: 14px;
  background: #f1f3f4;
  color: #5f6368;
  font-size: 13px;
}
[data-browser="chrome"] .address-icon svg {
  width: 13px;
  height: 13px;
}
[data-browser="chrome"] .address-text b {
  color: #202124;
}
[data-browser="chrome"] .browser-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
}
[data-browser="chrome"] .browser-tools .tool-profile {
  width: 24px;
  height: 24px;
  margin: 0 4px;
  background: #1a73e8;
  color: #fff;
  font-weight: 600;
}
[data-browser="chrome"] .browser-content[data-load="styled"] > * {
  animation: browser-paint 0.2s ease-out both;
}

/* ---- Firefox Australis, 2014 to 2017 on Windows 8 --------------------- */
.browser-window[data-browser="firefox-australis"] {
  border: 1px solid #4a78b8;
  border-radius: 0;
  background: #f5f6f7;
}
[data-browser="firefox-australis"] .browser-titlebar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  height: 24px;
  padding: 0;
  background: none;
  color: #fff;
}
[data-browser="firefox-australis"] .window-controls i {
  width: 30px;
}
[data-browser="firefox-australis"] .window-controls .wc-close {
  width: 46px;
  background: #c75050;
}
.page-experience [data-browser="firefox-australis"] .browser-tabs {
  height: 40px;
  padding: 9px 120px 0 12px;
  gap: 0;
  background: #6a9cdc;
}
.page-experience [data-browser="firefox-australis"] .browser-tab {
  position: relative;
  height: 31px;
  max-width: 230px;
  padding: 0 14px 0 20px;
  gap: 8px;
  border-radius: 14px 14px 0 0 / 28px 28px 0 0;
  background: none;
  color: #fff;
  font-size: 12px;
  text-shadow: 0 1px 1px #2a4f8555;
}
.page-experience [data-browser="firefox-australis"] .browser-tab[aria-current="location"],
.page-experience [data-browser="firefox-australis"] .browser-tab:hover {
  background: linear-gradient(#fdfdfe, #f5f6f7);
  color: #222;
  text-shadow: none;
}
.page-experience [data-browser="firefox-australis"] .browser-tab[aria-current="location"]::before {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  bottom: 0;
  height: 12px;
  background:
    radial-gradient(ellipse 12px 12px at 0 0, transparent 11.5px, #f5f6f7 12px) left / 12px 12px no-repeat,
    radial-gradient(ellipse 12px 12px at 100% 0, transparent 11.5px, #f5f6f7 12px) right / 12px 12px no-repeat;
  pointer-events: none;
}
[data-browser="firefox-australis"] .browser-tab i {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 3px;
  background: url("icon.svg") center / 16px no-repeat;
}
[data-browser="firefox-australis"] .tab-plus {
  width: 26px;
  height: 22px;
  margin: 0 0 4px 8px;
  color: #fff;
}
[data-browser="firefox-australis"] .browser-tab[data-loading] i {
  border-style: dotted !important;
  border-color: #9aa3ad !important;
  border-top-color: #0a84ff !important;
}
[data-browser="firefox-australis"] .browser-toolbar {
  min-height: 38px;
  padding: 5px 8px;
  gap: 6px;
  background: #f5f6f7;
  border-bottom: 1px solid #c7ccd1;
  color: #4a4f55;
}
/* The keyhole: a round back button with the forward button tucked behind it. */
[data-browser="firefox-australis"] .nav-back {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border: 1px solid #a5acb4;
  border-radius: 50%;
  background: linear-gradient(#fff, #eef0f2);
  box-shadow: 0 1px 0 #fff inset;
}
[data-browser="firefox-australis"] .nav-forward {
  width: 28px;
  height: 26px;
  margin-left: -7px;
  padding-left: 5px;
  border: 1px solid #b1b7bd;
  border-right: 0;
  background: #fff;
  color: #a9afb6;
}
[data-browser="firefox-australis"] .browser-address {
  height: 26px;
  margin-left: -6px;
  padding: 0 0 0 6px;
  border: 1px solid #b1b7bd;
  border-radius: 0 3px 3px 0;
  background: #fff;
  color: #777;
  font-size: 13px;
}
[data-browser="firefox-australis"] .address-text b {
  color: #111;
}
[data-browser="firefox-australis"] .address-drop {
  color: #9aa0a6;
}
[data-browser="firefox-australis"] .browser-reload {
  width: 26px;
  height: 24px;
  border-left: 1px solid #d8dbde;
  border-radius: 0;
  color: #5a6067;
}
[data-browser="firefox-australis"] .browser-reload:hover {
  background: #eef0f2;
}
[data-browser="firefox-australis"] .browser-search {
  height: 26px;
  padding: 0 7px;
  border: 1px solid #b1b7bd;
  border-radius: 3px;
  background: #fff;
  font-size: 13px;
}
[data-browser="firefox-australis"] .search-engine {
  color: #2f6fdb;
}
[data-browser="firefox-australis"] .browser-tools {
  display: flex;
  align-items: center;
  gap: 3px;
}
[data-browser="firefox-australis"] .browser-tools i {
  width: 28px;
  height: 28px;
}
[data-browser="firefox-australis"] .browser-tools .tool-menu {
  margin-left: 4px;
  padding-left: 6px;
  border-left: 1px solid #d0d4d8;
  width: 34px;
}
[data-browser="firefox-australis"] .browser-statusbubble {
  background: #f5f6f7;
  border-color: #b1b7bd;
  color: #333;
}
/* Text arrives in a fallback face first, then the web font swaps in. */
[data-browser="firefox-australis"] .browser-content[data-load="text"] h3,
[data-browser="firefox-australis"] .browser-content[data-load="text"] p {
  font-family: Arial, sans-serif;
  letter-spacing: 0;
}
[data-browser="firefox-australis"] .browser-content[data-load="text"] .tags {
  visibility: hidden;
}

/* ---- Internet Explorer 8 on Windows 7 Aero, 2009 ----------------------- */
.browser-window[data-browser="ie8"] {
  border: 7px solid #a9c8e8;
  border-top-width: 0;
  border-radius: 8px 8px 6px 6px;
  background: #a9c8e8;
  box-shadow:
    inset 0 0 0 1px #ffffffb0,
    0 0 0 1px #4d6f91,
    0 24px 50px #0003;
}
[data-browser="ie8"] .browser-decoration {
  background: linear-gradient(#d3e5f7, #b8d3ee 46px, #a9c8e8 47px);
  margin: 0 -7px;
  padding: 0 7px;
}
[data-browser="ie8"] .browser-titlebar {
  height: 28px;
  padding: 0 0 0 4px;
  background: none;
  color: #000;
  align-items: start;
}
[data-browser="ie8"] .browser-app {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding-top: 6px;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow:
    0 0 7px #fff,
    0 0 7px #fff,
    0 0 3px #fff;
}
[data-browser="ie8"] .window-controls {
  height: 19px;
  margin-right: 1px;
  border: 1px solid #56708c;
  border-top: 0;
  border-radius: 0 0 5px 5px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #ffffff90;
}
[data-browser="ie8"] .window-controls i {
  width: 27px;
  background: linear-gradient(#e6eff8, #c3d6ea 45%, #a9c3df 50%, #c7dbee);
  border-right: 1px solid #56708c;
  color: #1d2f44;
}
[data-browser="ie8"] .window-controls .wc-close {
  width: 45px;
  border-right: 0;
  background: linear-gradient(#f0a596, #d8614f 45%, #c5392b 50%, #de7866);
  color: #fff;
}
[data-browser="ie8"] .browser-toolbar {
  min-height: 0;
  padding: 1px 2px 6px;
  gap: 6px;
  background: none;
  border-bottom: 0;
  color: #1e395b;
}
[data-browser="ie8"] .nav-buttons {
  gap: 0;
}
[data-browser="ie8"] .nav-buttons i {
  border-radius: 50%;
  border: 1px solid #26466d;
  color: #fff;
  box-shadow:
    inset 0 1px 1px #ffffffc0,
    0 0 0 1px #ffffff80;
}
[data-browser="ie8"] .nav-back {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 28px;
  background: radial-gradient(circle at 50% 30%, #8cc6f7, #2e7fe0 55%, #1b56b8);
}
[data-browser="ie8"] .nav-forward {
  width: 24px;
  height: 24px;
  margin-left: -3px;
  background: radial-gradient(circle at 50% 30%, #dbe8f5, #a9c2dc 60%, #8fabc8);
  color: #f4f8fc;
}
[data-browser="ie8"] .browser-address {
  height: 22px;
  padding: 0 0 0 4px;
  gap: 5px;
  border: 1px solid #7f93a8;
  border-radius: 0;
  background: #fff;
  color: #6b6b6b;
  font-size: 12px;
}
[data-browser="ie8"] .address-text b {
  color: #000;
}
[data-browser="ie8"] .address-drop {
  color: #4a6785;
}
[data-browser="ie8"] .address-action {
  color: #4a6785;
  padding: 0 3px;
  border-left: 1px solid #d5dde6;
  align-self: stretch;
}
/* IE kept refresh and stop side by side; the idle one is dimmed. */
[data-browser="ie8"] .browser-reload {
  display: flex;
  align-items: center;
  gap: 5px;
  width: auto;
  height: 100%;
  padding: 0 4px;
  border-left: 1px solid #d5dde6;
  border-radius: 0;
}
.browser-window[data-browser="ie8"] .browser-reload .icon-reload,
.browser-window[data-browser="ie8"] .browser-reload .icon-stop {
  display: block;
}
[data-browser="ie8"] .browser-reload .icon-stop {
  opacity: 0.35;
}
[data-browser="ie8"][data-reload="loading"] .browser-reload .icon-stop {
  opacity: 1;
}
.browser-window[data-browser="ie8"][data-reload="loading"] .browser-reload .icon-reload {
  display: block;
  opacity: 0.35;
}
[data-browser="ie8"] .browser-reload:hover {
  background: #e8f1fb;
}
[data-browser="ie8"] .browser-search {
  height: 22px;
  padding: 0 5px;
  border: 1px solid #7f93a8;
  background: #fff;
  font-size: 12px;
  color: #6d7278;
}
[data-browser="ie8"] .search-engine {
  color: #e8801a;
  font-family: Georgia, serif;
}
.browser-favorites {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 3px 8px;
  overflow: hidden;
  white-space: nowrap;
  background: linear-gradient(#f6f9fd, #e1eaf5);
  border-top: 1px solid #fff;
  color: #1e395b;
}
.browser-favorites > span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.favorites-main {
  padding-right: 10px;
  border-right: 1px solid #b9c8d9;
}
.favorites-main svg {
  color: #d9980b;
  fill: #f6c744;
}
.browser-favorites .icon-chevron,
.browser-command .icon-chevron {
  width: 9px !important;
  height: 9px !important;
}
.browser-tabrow {
  display: flex;
  align-items: end;
  gap: 8px;
  padding: 3px 4px 0;
  background: linear-gradient(#e6eff9, #d3e1f1);
  border-bottom: 1px solid #8e9bab;
}
.page-experience [data-browser="ie8"] .browser-tabs {
  flex: 1 1 auto;
  min-width: 0;
  height: 25px;
  padding: 0;
  gap: 0;
  background: none;
}
.page-experience [data-browser="ie8"] .browser-tab {
  height: 22px;
  max-width: 190px;
  margin-right: -1px;
  padding: 0 6px;
  gap: 5px;
  border: 1px solid #8e9bab;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(#f3f7fc, #d9e5f2);
  color: #000;
  font-size: 12px;
}
.page-experience [data-browser="ie8"] .browser-tab[aria-current="location"],
.page-experience [data-browser="ie8"] .browser-tab:hover {
  height: 25px;
  background: linear-gradient(#fff, #f2f6fb);
}
[data-browser="ie8"] .browser-tab i {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 0;
  transform: none;
  background: none;
}
.page-experience [data-browser="ie8"] .browser-tab i {
  background: url("assets/browsers/internet-explorer.webp") center / contain no-repeat;
}
[data-browser="ie8"] .browser-tab[data-loading] i {
  border-color: #b9d4ee !important;
  border-top-color: #2f7fd6 !important;
}
[data-browser="ie8"] .browser-tab b {
  display: none;
}
[data-browser="ie8"] .browser-tab[aria-current="location"] b {
  display: grid;
  color: #5c6b7c;
}
[data-browser="ie8"] .tab-plus {
  width: 26px;
  height: 20px;
  margin: 0;
  border: 1px solid #8e9bab;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(#f3f7fc, #d9e5f2);
  align-self: end;
}
[data-browser="ie8"] .tab-plus svg {
  display: none;
}
.browser-command {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
  padding-bottom: 4px;
  color: #1e395b;
  white-space: nowrap;
}
.browser-command > * {
  display: flex;
  align-items: center;
  gap: 2px;
  font-style: normal;
}
.browser-command svg {
  color: #3c5f86;
}
.browser-window[data-browser="ie8"] .browser-status {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
  height: 23px;
  padding: 0 2px 0 6px;
  background: linear-gradient(#f2f6fb, #dbe5f1);
  border-top: 1px solid #8e9bab;
  font:
    12px "Segoe UI",
    system-ui,
    Arial,
    sans-serif;
  color: #1e1e1e;
}
.status-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.status-progress {
  display: none;
  flex: none;
  width: 118px;
  height: 13px;
  margin: 0 8px;
  padding: 1px;
  border: 1px solid #8e9bab;
  background: #fff;
}
[data-reload="loading"] .status-progress {
  display: block;
}
.status-progress i {
  display: block;
  height: 100%;
  width: var(--reload-progress, 0%);
  background: repeating-linear-gradient(90deg, #35b13a 0 7px, transparent 7px 9px);
  transition: width 0.3s linear;
}
.status-zone,
.status-zoom {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: none;
  height: 100%;
  padding: 0 9px;
  border-left: 1px solid #b5c1cf;
  box-shadow: 1px 0 0 #fff inset;
  white-space: nowrap;
}
.status-zone svg {
  color: #2b7a3d;
}
/* Internet Explorer painted the markup before the stylesheet arrived. */
[data-browser="ie8"] .browser-content[data-load="text"] .eyebrow,
[data-browser="ie8"] .browser-content[data-load="text"] h3,
[data-browser="ie8"] .browser-content[data-load="text"] p,
[data-browser="ie8"] .browser-content[data-load="text"] .tags li {
  font-family: "Times New Roman", Times, serif;
  letter-spacing: 0;
  color: #000;
}
[data-browser="ie8"] .browser-content[data-load="text"] .eyebrow {
  font-size: 16px;
  margin-bottom: 12px;
}
[data-browser="ie8"] .browser-content[data-load="text"] h3 {
  font-size: 24px;
  font-weight: 700;
  border: 0;
  padding: 0;
  margin-bottom: 16px;
}
[data-browser="ie8"] .browser-content[data-load="text"] p {
  font-size: 16px;
  line-height: 1.25;
}
[data-browser="ie8"] .browser-content[data-load="text"] .tags {
  display: block;
  padding-left: 40px;
  list-style: disc;
}
[data-browser="ie8"] .browser-content[data-load="text"] .tags li {
  display: list-item;
  padding: 0;
  border: 0;
  background: none;
  font-size: 16px;
}

/* ---- Narrow screens: keep the essentials ------------------------------ */
@media (max-width: 760px) {
  .browser-search,
  .browser-command > span,
  .browser-command > i:nth-child(n + 3),
  .favorites-link + .favorites-link,
  [data-browser="chrome"] .tool-profile,
  [data-browser="firefox-australis"] .browser-tools i:not(.tool-menu),
  .status-zoom {
    display: none !important;
  }
  .browser-window[data-browser="firefox-australis"] .window-controls i {
    width: 30px;
  }
  .browser-window[data-browser="ie8"] .window-controls i {
    width: 22px;
  }
  .browser-window[data-browser="ie8"] .window-controls .wc-close {
    width: 34px;
  }
  .page-experience [data-browser="chrome"] .browser-tabs {
    padding-left: 72px;
    height: 38px;
  }
  [data-browser="chrome"] .browser-titlebar {
    height: 38px;
    padding-left: 11px;
  }
  .browser-window[data-browser="chrome"] .window-controls {
    gap: 6px;
  }
  .page-experience [data-browser="firefox-australis"] .browser-tabs {
    padding-right: 110px;
  }
  .browser-window[data-browser] .browser-address {
    font-size: 11px;
  }
  .browser-window[data-browser="ie8"] {
    border-width: 0 4px 4px;
  }
  [data-browser="ie8"] .browser-decoration {
    margin: 0 -4px;
    padding: 0 4px;
  }
  .status-zone {
    padding: 0 6px;
    font-size: 10px;
  }
  .status-progress {
    width: 70px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .browser-tab[data-loading] i {
    animation: none;
  }
}

/* ---- Period desktops: wallpaper, menu bar or taskbar ------------------ */
.os-desktop {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 24px 50px #0003;
  font:
    12px "Segoe UI",
    system-ui,
    Arial,
    sans-serif;
}
.os-desktop > .browser-window {
  margin: 26px 30px 30px;
  box-shadow: 0 18px 46px #00000070;
}
.os-bar {
  display: flex;
  align-items: center;
  flex: none;
  white-space: nowrap;
  user-select: none;
}
.os-bar svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: none;
}
.os-bar i {
  display: grid;
  place-items: center;
  font-style: normal;
}
.os-tray {
  display: flex;
  align-items: center;
  margin-left: auto;
}
/* macOS: translucent menu bar on top, a dock underneath. */
.os-macos {
  background:
    radial-gradient(ellipse 60% 70% at 12% 18%, #ffb36b 0, transparent 60%),
    radial-gradient(ellipse 60% 60% at 88% 12%, #ff6fa3 0, transparent 60%),
    radial-gradient(ellipse 80% 70% at 70% 100%, #6a4bd8 0, transparent 65%),
    linear-gradient(140deg, #f08a5d, #b83b9e 50%, #3b2c9b);
}
.os-menubar {
  height: 25px;
  padding: 0 12px;
  gap: 12px;
  background: #ffffff59;
  backdrop-filter: blur(18px) saturate(1.6);
  color: #1d1d1f;
  font:
    13px -apple-system,
    "SF Pro Text",
    "Helvetica Neue",
    system-ui,
    sans-serif;
}
.os-menu {
  display: flex;
  align-items: center;
  gap: 17px;
  min-width: 0;
  overflow: hidden;
}
.os-menu b {
  font-weight: 700;
}
.os-menubar .os-tray {
  gap: 13px;
}
.os-menubar time {
  font-variant-numeric: tabular-nums;
}
.os-macos > .browser-window {
  margin: 22px 30px 14px;
}
.os-dock {
  display: flex;
  align-self: center;
  gap: 7px;
  margin: 0 0 8px;
  padding: 5px 7px;
  border: 1px solid #ffffff52;
  border-radius: 15px;
  background: #ffffff40;
  backdrop-filter: blur(16px);
}
.os-dock i {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  box-shadow: 0 2px 5px #0004;
}
.dock-finder {
  background: linear-gradient(90deg, #4fb4f7 50%, #e8f1fb 50%);
}
.os-dock .dock-chrome {
  background: url("assets/browsers/chrome.svg") center / 32px no-repeat;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 2px 3px #0005);
}
.dock-terminal {
  background: linear-gradient(#3a3d41, #17191c);
}
.dock-terminal::before {
  content: ">_";
  position: absolute;
  left: 6px;
  top: 7px;
  color: #d5ef78;
  font: 700 11px monospace;
}
.dock-code {
  background: linear-gradient(135deg, #2aa8f2, #0a6cc2);
}
.dock-mail {
  background: linear-gradient(#5ac8fa, #1d7cf2);
}
.dock-trash {
  background: linear-gradient(#f4f5f7, #c9ccd2);
  margin-left: 8px;
}
.os-dock .is-open::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: #1d1d1f;
}
/* Windows 10: flat dark taskbar. */
.os-win10 {
  border-radius: 0;
  background:
    radial-gradient(ellipse 55% 80% at 72% 48%, #5cb6ff 0, #1877d6 30%, transparent 70%),
    linear-gradient(120deg, #021a3d, #0b4d9c 60%, #03224c);
}
.os-taskbar-10 {
  height: 40px;
  background: #101318f0;
  color: #fff;
}
.os-taskbar-10 > i {
  width: 46px;
  height: 100%;
}
.os-taskbar-10 .os-start svg {
  width: 17px;
  height: 17px;
}
.os-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 270px;
  height: 100%;
  padding: 0 12px;
  background: #3a3d42;
  color: #d0d3d8;
  font-size: 13px;
  flex: 0 1 270px;
  min-width: 0;
  overflow: hidden;
}
.os-taskbar-10 .os-app.is-open {
  background: #ffffff1f;
  box-shadow: inset 0 -2px 0 #76b9ed;
}
.os-taskbar-10 .os-app img {
  display: block;
  width: 24px;
  height: 24px;
}
.os-taskbar-10 .os-tray {
  height: 100%;
  gap: 0;
  font-size: 11px;
}
.os-taskbar-10 .os-tray > * {
  padding: 0 7px;
}
.os-taskbar-10 time,
.os-taskbar-7 time {
  text-align: center;
  line-height: 1.35;
}
/* Windows 7: Aero glass with the Start orb. */
.os-win7 {
  border-radius: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 62%, #8fd3ff 0, transparent 60%),
    radial-gradient(ellipse 40% 90% at 78% 40%, #6fc0f5 0, transparent 60%),
    linear-gradient(160deg, #1d6fc0, #2c8fdc 45%, #0b4f96);
}
.os-taskbar-7 {
  height: 40px;
  gap: 2px;
  padding-left: 4px;
  background: linear-gradient(#a9c8e6e0, #5f8dbde6 48%, #3f6fa3e6 52%, #6d98c4e6);
  border-top: 1px solid #ffffffa0;
  box-shadow: 0 -1px 0 #1b3c5f;
  color: #fff;
  text-shadow: 0 1px 2px #0009;
}
.os-orb {
  width: 38px;
  height: 38px;
  margin-right: 8px;
  border-radius: 50%;
  border: 1px solid #12365e;
  background: radial-gradient(circle at 50% 28%, #b7e1ff, #2f86d8 50%, #0d4b93);
  box-shadow:
    inset 0 1px 2px #ffffffd0,
    0 0 0 1px #ffffff60;
}
.os-orb svg {
  width: 22px;
  height: 22px;
}
.os-taskbar-7 .os-app {
  width: 54px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 3px;
}
.os-taskbar-7 .os-app svg {
  width: 24px;
  height: 24px;
}
.os-taskbar-7 .os-app .ie-e {
  width: 26px;
  height: 26px;
}
.os-taskbar-7 .os-app.is-open {
  border-color: #ffffff90;
  background: linear-gradient(#ffffff80, #ffffff26 50%, #ffffff12 51%, #ffffff40);
  box-shadow: inset 0 0 0 1px #ffffff50;
}
.os-taskbar-7 .os-tray {
  height: 100%;
  gap: 8px;
  font-size: 11px;
}
.os-show-desktop {
  width: 13px;
  height: 100%;
  margin-left: 4px;
  border-left: 1px solid #ffffff70;
  background: linear-gradient(#ffffff50, #ffffff1a);
}
/* Windows 98 gets a proper Start button and tray. */
.retro-taskbar .retro-start {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px 3px 4px;
  font-weight: 700;
}
.retro-start svg {
  width: 17px;
  height: 17px;
}
.retro-grip {
  width: 3px;
  align-self: stretch;
  margin: 2px 0;
  border-left: 1px solid #fff;
  border-right: 1px solid #808080;
}
.retro-taskbar .retro-task {
  font-weight: 700;
  min-width: 150px;
  background: repeating-conic-gradient(#fff 0 25%, #c0c0c0 0 50%) 0 0 / 2px 2px;
}
/* During the page build the desktops stay as quiet as the wireframes. */
.page-surface[data-phase="structure"] .os-desktop {
  background: transparent;
  box-shadow: none;
  outline: 1px dashed #849b6a;
}
.page-surface[data-phase="structure"] .os-bar,
.page-surface[data-phase="structure"] .os-dock {
  visibility: hidden;
}
@media (max-width: 760px) {
  .os-desktop > .browser-window {
    margin: 12px 8px 12px;
  }
  .os-menu span:nth-of-type(n + 4),
  .os-menubar .os-tray i:nth-child(-n + 3),
  .os-search,
  .os-taskbar-10 .os-tray > *:not(time),
  .os-taskbar-7 .os-tray > i:not(.os-show-desktop),
  .os-dock .dock-mail,
  .os-dock .dock-code {
    display: none;
  }
  .os-menu {
    gap: 12px;
  }
  .os-taskbar-10 > i {
    width: 38px;
  }
  .os-taskbar-7 .os-app {
    width: 44px;
  }
}

/* Touch: the reload controls keep their period size but get a larger hit area. */
@media (pointer: coarse) {
  .browser-reload {
    position: relative;
  }
  .browser-reload::after {
    content: "";
    position: absolute;
    inset: -10px;
  }
}