/* WXP styling: Windows XP's Luna theme.
   The art (icons, wallpapers, start button, fonts) is the real XP art in
   assets/xp/, copied by scripts/import-xp-assets.py from its manifest. The
   gradients, box shadows and scrollbar images follow win32.run's
   src/app.css (MIT). The class names (.nx-window, .nx-titlebar, ...) are
   the ones the copied window-manager.js emits, kept unrenamed on purpose
   (see Plans/current/merge.md). Retheme through the :root tokens; the
   layout rules (position/flex/sizing) are what the JS depends on.

   Sections: fonts & tokens / desktop & icons / taskbar & tray / start menu /
   windows / dialogs & menus / screens / scrollbars (win32.run) / shared app
   chrome / Internet Explorer / page content / Word / lens / captcha (copied
   from WWW). */

@font-face {
  font-family: "Tahoma XP";
  src: url("assets/xp/fonts/tahoma.ttf");
}

@font-face {
  font-family: "Trebuchet XP";
  src: url("assets/xp/fonts/trebuchet.ttf");
}

:root {
  --wxp-luna-blue: #0054e3;
  --wxp-luna-frame: #0831d9;
  --wxp-panel: #ece9d8;
  --wxp-panel-dark: #aca899;
  --wxp-select: #316ac5;
  --wxp-text: #000000;
  --wxp-ui-font: "Tahoma XP", Tahoma, "Segoe UI", Arial, sans-serif;
  --wxp-title-font: "Trebuchet XP", "Trebuchet MS", Tahoma, sans-serif;
  --wxp-page-font: "Times New Roman", Times, serif;
  --wxp-taskbar-height: 30px;
  --wxp-titlebar-height: 28px;
  --wxp-taskbar-gradient: rgb(31, 47, 134) 0px, rgb(49, 101, 196) 3%, rgb(54, 130, 229) 6%, rgb(68, 144, 230) 10%, rgb(56, 131, 229) 12%, rgb(43, 113, 224) 15%, rgb(38, 99, 218) 18%, rgb(35, 91, 214) 20%, rgb(34, 88, 213) 23%, rgb(33, 87, 214) 38%, rgb(36, 93, 219) 54%, rgb(37, 98, 223) 86%, rgb(36, 95, 220) 89%, rgb(33, 88, 212) 92%, rgb(29, 78, 192) 95%, rgb(25, 65, 165) 98%;
  --wxp-titlebar-gradient: 180deg, #0997ff, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005bff 95%, #003dd7 96%, #003dd7;
  --wxp-titlebar-gradient-inactive: 180deg, rgb(118, 151, 231) 0%, rgb(126, 158, 227) 3%, rgb(148, 175, 232) 6%, rgb(151, 180, 233) 8%, rgb(130, 165, 228) 14%, rgb(124, 159, 226) 17%, rgb(121, 150, 222) 25%, rgb(123, 153, 225) 56%, rgb(130, 169, 233) 81%, rgb(128, 165, 231) 89%, rgb(123, 150, 225) 94%, rgb(122, 147, 223) 97%, rgb(171, 186, 227) 100%;
  --wxp-window-shadow: inset -1px -1px #424fa2, inset 1px 1px #4e68d1, inset -2px -2px #5669c0, inset 2px 2px #528eef, inset -3px -3px #4e73d7, inset 3px 3px #5284da;
  --wxp-window-shadow-inactive: inset -1px -1px rgb(130, 165, 228), inset 1px 1px rgb(130, 165, 228), inset -2px -2px rgb(130, 165, 228), inset 2px 2px rgb(130, 165, 228), inset -3px -3px rgb(130, 165, 228), inset 3px 3px rgb(130, 165, 228);
}

* {
  box-sizing: border-box;
}

/* Suppressed for the duration of any window drag -- see WindowManager.beginDrag/endDrag. */
body.nx-dragging {
  -webkit-user-select: none;
  user-select: none;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--wxp-ui-font);
  font-size: 11px;
  background: #000;
  /* XP drew its chrome text without antialiasing; browsers smooth glyph
     edges by default. Font smoothing inherits on its own, regardless of
     font-family, so the reading surfaces (.ie-view, .word-page) would pick
     "none" up from here despite declaring their own font -- each sets
     -webkit-font-smoothing: antialiased to stay smooth. Don't remove those
     overrides on the assumption that their own font declaration is enough. */
  -webkit-font-smoothing: none;
  font-smooth: never;
}

button {
  font-family: var(--wxp-ui-font);
}

/* ---------- Desktop & icons ---------- */

#desktop {
  position: relative;
  width: 100%;
  height: calc(100% - var(--wxp-taskbar-height));
  overflow: hidden;
  background: #3a6ea5 center / cover no-repeat;
}

/* Log Off / Turn Off panels fade the desktop to gray behind them, as XP does. */
body.xp-fade-desktop #desktop,
body.xp-fade-desktop #taskbar {
  filter: grayscale(1);
  transition: filter 1.2s;
}

#desktop-icons {
  position: absolute;
  inset: 0;
  user-select: none;
}

.xp-icon {
  position: absolute;
  width: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  outline: none;
  cursor: default;
}

.xp-icon-img {
  position: relative;
  width: 32px;
  height: 32px;
}

.xp-icon-img img {
  width: 32px;
  height: 32px;
  pointer-events: none;
}

.xp-icon-img .xp-shortcut {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 11px;
  height: 11px;
}

.xp-icon-label {
  max-width: 74px;
  padding: 0 2px;
  color: #fff;
  font-size: 11px;
  text-align: center;
  text-shadow: 1px 1px 1px #000;
  overflow-wrap: break-word;
  pointer-events: none;
}

.xp-icon.selected .xp-icon-img img {
  filter: brightness(0.7) sepia(1) hue-rotate(180deg) saturate(4);
  opacity: 0.8;
}

.xp-icon.selected .xp-icon-label {
  background: var(--wxp-select);
  text-shadow: none;
}

.xp-icon.selected:focus .xp-icon-label {
  outline: 1px dotted #fff;
}

.xp-icon.dragging {
  opacity: 0.6;
  z-index: 1;
}

/* ---------- Taskbar & tray ---------- */

#taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--wxp-taskbar-height);
  display: flex;
  align-items: center;
  background: linear-gradient(var(--wxp-taskbar-gradient));
  user-select: none;
  z-index: 100000;
}

#start-button {
  width: 100px;
  height: 100%;
  flex: none;
  border: none;
  padding: 0;
  background: url("assets/xp/start-button.png") left center / cover no-repeat;
  cursor: pointer;
}

#start-button:hover {
  filter: brightness(1.1);
}

#start-button.pressed {
  filter: brightness(0.85);
}

#taskbar-buttons {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 3px;
  padding: 0 6px;
}

.xp-task {
  flex: 0 1 160px;
  min-width: 0;
  height: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  color: #fff;
  font-size: 11px;
  text-align: left;
  border: none;
  border-radius: 3px;
  background: #3c81f3;
  box-shadow: inset -1px 0 rgba(0, 0, 0, 0.3), inset 1px 1px 1px rgba(255, 255, 255, 0.2);
  cursor: default;
}

.xp-task:hover {
  background: #53a3ff;
}

.xp-task.active {
  background: #1e52b7;
  box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.2), inset 1px 0 1px rgba(0, 0, 0, 0.7);
}

.xp-task img {
  width: 16px;
  height: 16px;
  flex: none;
}

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

#tray {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px 0 10px;
  color: #fff;
  font-size: 11px;
  background: linear-gradient(to bottom, #0c59b9 1%, #139ee9 6%, #18b5f2 10%, #139beb 14%, #1290e8 19%, #0d8dea 63%, #0d9ff1 81%, #0f9eed 88%, #119be9 91%, #1392e2 94%, #137ed7 97%, #095bc9 100%);
  border-left: 1px solid #1042af;
  box-shadow: inset 1px 0 1px #18bbff;
}

#tray-volume {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

#tray-connection {
  width: 16px;
  height: 16px;
}

/* ---------- Start menu ---------- */

#start-menu {
  position: absolute;
  left: 0;
  bottom: var(--wxp-taskbar-height);
  width: 390px;
  display: none;
  flex-direction: column;
  border-radius: 7px 7px 0 0;
  overflow: visible;
  background: #1f59d1;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
  user-select: none;
}

#start-menu.open {
  display: flex;
}

.sm-head {
  height: 62px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(#1868ce 0%, #0e60cb 12%, #0e60cb 20%, #1164cf 32%, #1667cf 33%, #1b6cd3 47%, #1e70d9 54%, #2476dc 60%, #297ae0 65%, #3482e3 77%, #3786e5 79%, #428ee9 90%, #4791eb 100%);
  color: #fff;
  font: bold 14px var(--wxp-title-font);
  text-shadow: 1px 1px 1px #0f1089;
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, transparent, #da884a 50%, transparent) 1;
}

.sm-head img {
  width: 42px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 3px;
}

.sm-body {
  display: flex;
  margin: 0 2px;
  min-height: 330px;
}

.sm-left,
.sm-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 6px 2px;
}

.sm-left {
  background: #fff;
}

.sm-list {
  flex: 1;
}

.sm-right {
  background: #d3e5fa;
  border-left: 1px solid #95bdee;
}

.sm-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border: none;
  background: none;
  text-align: left;
  font-size: 11px;
  color: #000;
  cursor: default;
}

.sm-item img {
  width: 24px;
  height: 24px;
  flex: none;
}

.sm-item.big img {
  width: 32px;
  height: 32px;
}

.sm-right .sm-item {
  color: #00136b;
}

.sm-item.bold .sm-label > span {
  font-weight: bold;
}

.sm-label {
  display: flex;
  flex-direction: column;
}

.sm-label small {
  color: #888;
  font-size: 11px;
}

.sm-label small:empty {
  display: none;
}

.sm-item:hover {
  background: var(--wxp-select);
  color: #fff;
}

.sm-item:hover small {
  color: #fff;
}

.sm-sep {
  height: 1px;
  margin: 4px 8px;
  background: linear-gradient(to right, transparent, #c5c2b8 20%, #c5c2b8 80%, transparent);
}

.sm-right .sm-sep {
  background: linear-gradient(to right, transparent, #95bdee 20%, #95bdee 80%, transparent);
}

.sm-all {
  position: relative;
  z-index: 1; /* its flyout opens over the right column */
  border-top: 1px solid #c5c2b8;
  padding-top: 4px;
}

.sm-all-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: none;
  background: none;
  font-weight: bold;
  font-size: 11px;
  cursor: default;
}

.sm-all-btn img {
  width: 16px;
  height: 16px;
}

.sm-all-btn:hover,
.sm-all.open .sm-all-btn {
  background: var(--wxp-select);
  color: #fff;
}

.sm-flyout {
  display: none;
  position: absolute;
  left: 90%;
  bottom: 0;
  width: 220px;
  padding: 2px 0;
  background: #fff;
  border-left: 4px solid var(--wxp-select);
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}

.sm-all.open .sm-flyout {
  display: block;
}

.sm-flyout .sm-item img {
  width: 16px;
  height: 16px;
}

.sm-foot {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding: 6px 8px;
  background: linear-gradient(#4282d6 0%, #3b85e0 3%, #418ae3 5%, #418ae3 17%, #3c87e2 21%, #3786e4 26%, #3482e3 29%, #2e7ee1 39%, #2374df 49%, #2072db 57%, #196edb 62%, #176bd8 72%, #1468d5 75%, #1165d2 83%, #0f61cb 88%);
}

.sm-foot button {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: none;
  background: none;
  color: #fff;
  font-size: 11px;
  cursor: default;
}

.sm-foot button:hover {
  background: rgba(60, 80, 156, 0.6);
}

.sm-foot img {
  width: 22px;
  height: 22px;
}

/* ---------- Windows ---------- */

.nx-window {
  position: absolute;
  min-width: 220px;
  min-height: 120px;
  padding: 0 3px 3px;
  background: var(--wxp-panel);
  border-radius: 8px 8px 0 0;
  box-shadow: var(--wxp-window-shadow-inactive), 2px 3px 10px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}

.nx-window.xp-active {
  box-shadow: var(--wxp-window-shadow), 2px 3px 10px rgba(0, 0, 0, 0.45);
}

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

.nx-window.xp-maximized {
  border-radius: 0;
  padding: 0;
}

.nx-window .nx-titlebar {
  height: var(--wxp-titlebar-height);
  margin: 0 -3px;
  border-radius: 7px 7px 0 0;
  background: linear-gradient(var(--wxp-titlebar-gradient-inactive));
  color: #d8e4f8;
  display: flex;
  align-items: center;
  padding: 0 4px 0 6px;
  gap: 4px;
  cursor: default;
  user-select: none;
  flex: none;
  touch-action: none;
}

.nx-window.xp-active .nx-titlebar {
  background: linear-gradient(var(--wxp-titlebar-gradient));
  color: #fff;
}

.nx-window.xp-maximized .nx-titlebar {
  margin: 0;
  border-radius: 0;
}

.xp-title-icon {
  width: 16px;
  height: 16px;
  flex: none;
}

.nx-window .nx-title-text {
  flex: 1;
  text-align: left;
  font: bold 13px var(--wxp-title-font);
  text-shadow: 1px 1px #0f1089;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nx-window:not(.xp-active) .nx-title-text {
  text-shadow: none;
}

.nx-window .nx-title-text-editable[contenteditable="true"] {
  user-select: text;
  cursor: text;
}

/* Caption buttons: the real XP button art (win32.run's icons), which already
   includes each button's blue or red face. */
.nx-window .nx-close,
.xp-caption {
  width: 21px;
  height: 21px;
  flex: none;
  padding: 0;
  border: none;
  background: center / 100% 100% no-repeat;
  color: transparent;
  font-size: 0;
  cursor: default;
}

.nx-window .nx-close { background-image: url("assets/xp/icons/Exit.png"); }
.xp-caption.xp-min { background-image: url("assets/xp/icons/Minimize.png"); }
.xp-caption.xp-max { background-image: url("assets/xp/icons/Maximize.png"); }
.xp-maximized .xp-caption.xp-max { background-image: url("assets/xp/icons/Restore.png"); }

.nx-window .nx-close:hover,
.xp-caption:hover {
  filter: brightness(1.15);
}

.xp-caption:disabled {
  filter: grayscale(0.6) opacity(0.6);
}

.nx-window:not(.xp-active) .nx-close,
.nx-window:not(.xp-active) .xp-caption {
  opacity: 0.75;
}

.nx-window .nx-fullscreen-btn,
.nx-window .nx-zoom-btn {
  display: none; /* the window manager's own controls; xp-chrome.js drives fullscreen */
}

.nx-window .nx-body {
  flex: 1;
  overflow: auto;
  padding: 10px 12px;
  font-family: var(--wxp-ui-font);
  /* !important: the copied window-manager.js's applyZoom() sets this
     element's font-size as an inline style on every window (base 14px at
     zoom 1 -- WWW's comfortable reading floor), which otherwise beats any
     stylesheet rule here regardless of specificity. Every WXP window that
     actually wants a reading size of its own (.ie-view, .word-page) already
     sets its own font-size directly, so this only overrides chrome text
     that would otherwise inherit the 14px meant for essay prose. */
  font-size: 11px !important;
  line-height: 1.4;
  color: var(--wxp-text);
}

.nx-window .nx-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  z-index: 5;
  cursor: nwse-resize;
  touch-action: none;
  background: linear-gradient(
    135deg,
    transparent 0 50%,
    var(--wxp-panel-dark) 50% 60%,
    transparent 60% 70%,
    var(--wxp-panel-dark) 70% 80%,
    transparent 80%
  );
}

.nx-window.fixed-size .nx-resize-handle:not(.nx-resize-handle-proportional),
.nx-window.xp-maximized .nx-resize-handle {
  display: none;
}

/* ---------- Dialogs & menus ---------- */

.xp-button {
  min-width: 75px;
  height: 23px;
  padding: 0 10px;
  font-size: 11px;
  color: #000;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, #ecebe6 86%, #d6d0c5);
  cursor: default;
}

.xp-button:hover {
  box-shadow: inset -1px 1px #fff0cf, inset 1px 2px #fdd889, inset -2px 2px #fbc761, inset 2px -2px #e5a01a;
}

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

.xp-msgbox {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 6px 4px 2px;
}

.xp-msgbox-body {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.xp-msgbox-body img {
  width: 32px;
  height: 32px;
  flex: none;
}

.xp-msgbox-body p {
  margin: 8px 0 0;
  max-width: 300px;
}

.xp-msgbox-buttons,
.xp-dialog-buttons {
  display: flex;
  justify-content: center;
  gap: 6px;
}

.xp-dialog-buttons {
  justify-content: flex-end;
  padding-top: 10px;
}

/* Display Properties */
.xp-tabs {
  display: flex;
  border-bottom: 1px solid #919b9c;
}

.xp-tabs span {
  padding: 3px 8px;
  border: 1px solid #919b9c;
  border-bottom: none;
  border-radius: 3px 3px 0 0;
  background: #fff;
  box-shadow: inset 0 2px #ffc83c;
}

.xp-tab-page {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: #fcfcfe;
  border: 1px solid #919b9c;
  border-top: none;
}

.xp-monitor {
  align-self: center;
  width: 190px;
  height: 150px;
  padding: 12px 12px 26px;
  border-radius: 8px 8px 4px 4px;
  background: linear-gradient(#e8e8e8, #b8b8b8);
  box-shadow: inset 0 0 0 1px #888;
}

.xp-monitor-screen {
  width: 100%;
  height: 100%;
  background: #3a6ea5 center / cover no-repeat;
  border: 1px solid #555;
}

.xp-listbox {
  width: 100%;
  font: 11px var(--wxp-ui-font);
  border: 1px solid #7f9db9;
}

/* Right-click menus */
.xp-menu {
  position: fixed;
  min-width: 160px;
  margin: 0;
  padding: 2px;
  list-style: none;
  background: #fff;
  border: 1px solid #aca899;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
  font-size: 11px;
  user-select: none;
}

.xp-menu .xp-menu {
  display: none;
  position: absolute;
  left: 100%;
  top: -3px;
}

.xp-menu-item {
  position: relative;
  padding: 3px 20px;
  white-space: nowrap;
  cursor: default;
}

.xp-menu-item.bold {
  font-weight: bold;
}

.xp-menu-item.disabled {
  color: #aca899;
}

.xp-menu-item.has-sub::after {
  content: "▸";
  position: absolute;
  right: 6px;
}

.xp-menu-item:hover:not(.disabled) {
  background: var(--wxp-select);
  color: #fff;
}

.xp-menu-item:hover > .xp-menu {
  display: block;
  color: #000;
}

.xp-menu-sep {
  height: 1px;
  margin: 3px 1px;
  background: #aca899;
}

/* Log Off / Turn Off panel */
.xp-panel-overlay {
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.xp-panel {
  width: 312px;
  border: 1px solid #000;
  background: #5a7edc;
  box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.5);
}

.xp-panel-head {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  background: #0a246a;
  color: #fff;
  font: 16px var(--wxp-title-font);
}

.xp-panel-head img {
  height: 30px;
}

.xp-panel-choices {
  display: flex;
  justify-content: space-evenly;
  padding: 26px 8px;
  background: linear-gradient(to right, #5a7edc, #7b9ee8 50%, #5a7edc);
  border-top: 2px solid #d3def7;
}

.xp-panel-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 80px;
  padding: 0;
  border: none;
  background: none;
  color: #fff;
  font-size: 11px;
  cursor: default;
}

.xp-panel-choice img {
  width: 34px;
  height: 34px;
}

.xp-panel-choice:hover img {
  filter: brightness(1.2);
}

.xp-panel-foot {
  display: flex;
  justify-content: flex-end;
  padding: 10px 12px;
  background: #0a246a;
}

/* ---------- Screens (logging off, shutting down, safe to turn off) ---------- */

.xp-screen {
  position: fixed;
  inset: 0;
  z-index: 300000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  color: #fff;
  font: 18px var(--wxp-title-font);
  text-align: center;
}

.xp-screen-status {
  background: linear-gradient(#00309c 0 12%, #5a7edc 12% 88%, #00309c 88%);
}

.xp-screen-status img {
  height: 90px;
}

.xp-screen-black {
  background: #000;
  color: #e0a040;
  font: 22px var(--wxp-ui-font);
  cursor: none;
}

/* The boot screens (js/boot-screen.js): see their own section at the
   end of this file, following win32.run's boot_manager.svelte and
   starting.svelte/welcome.svelte. */

/* ---------- Scrollbars: XP's, from win32.run's src/app.css (MIT) ---------- */

::-webkit-scrollbar {
  width: 17px;
}
::-webkit-scrollbar-corner {
  background: #dfdfdf;
}
::-webkit-scrollbar-track:vertical {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 1' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eeede5' d='M0 0h1m15 0h1'/%3E%3Cpath stroke='%23f3f1ec' d='M1 0h1'/%3E%3Cpath stroke='%23f4f1ec' d='M2 0h1'/%3E%3Cpath stroke='%23f4f3ee' d='M3 0h1'/%3E%3Cpath stroke='%23f5f4ef' d='M4 0h1'/%3E%3Cpath stroke='%23f6f5f0' d='M5 0h1'/%3E%3Cpath stroke='%23f7f7f3' d='M6 0h1'/%3E%3Cpath stroke='%23f9f8f4' d='M7 0h1'/%3E%3Cpath stroke='%23f9f9f7' d='M8 0h1'/%3E%3Cpath stroke='%23fbfbf8' d='M9 0h1'/%3E%3Cpath stroke='%23fbfbf9' d='M10 0h2'/%3E%3Cpath stroke='%23fdfdfa' d='M12 0h1'/%3E%3Cpath stroke='%23fefefb' d='M13 0h3'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-track:horizontal {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 1 17' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eeede5' d='M0 0h1M0 16h1'/%3E%3Cpath stroke='%23f3f1ec' d='M0 1h1'/%3E%3Cpath stroke='%23f4f1ec' d='M0 2h1'/%3E%3Cpath stroke='%23f4f3ee' d='M0 3h1'/%3E%3Cpath stroke='%23f5f4ef' d='M0 4h1'/%3E%3Cpath stroke='%23f6f5f0' d='M0 5h1'/%3E%3Cpath stroke='%23f7f7f3' d='M0 6h1'/%3E%3Cpath stroke='%23f9f8f4' d='M0 7h1'/%3E%3Cpath stroke='%23f9f9f7' d='M0 8h1'/%3E%3Cpath stroke='%23fbfbf8' d='M0 9h1'/%3E%3Cpath stroke='%23fbfbf9' d='M0 10h1m-1 1h1'/%3E%3Cpath stroke='%23fdfdfa' d='M0 12h1'/%3E%3Cpath stroke='%23fefefb' d='M0 13h1m-1 1h1m-1 1h1'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-thumb {
  background-position: 50%;
  background-repeat: no-repeat;
  background-color: #c8d6fb;
  background-size: 7px;
  border: 1px solid #fff;
  border-radius: 2px;
  box-shadow: inset -3px 0 #bad1fc, inset 1px 1px #b7caf5;
}

::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
  display: block;
}

::-webkit-scrollbar-thumb:vertical {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 7 8' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eef4fe' d='M0 0h6M0 2h6M0 4h6M0 6h6'/%3E%3Cpath stroke='%23bad1fc' d='M6 0h1M6 2h1M6 4h1'/%3E%3Cpath stroke='%23c8d6fb' d='M0 1h1M0 3h1M0 5h1M0 7h1'/%3E%3Cpath stroke='%238cb0f8' d='M1 1h6M1 3h6M1 5h6M1 7h6'/%3E%3Cpath stroke='%23bad3fc' d='M6 6h1'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-thumb:horizontal {
  background-size: 8px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 8 7' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eef4fe' d='M0 0h1m1 0h1m1 0h1m1 0h1M0 1h1m1 0h1m1 0h1m1 0h1M0 2h1m1 0h1m1 0h1m1 0h1M0 3h1m1 0h1m1 0h1m1 0h1M0 4h1m1 0h1m1 0h1m1 0h1M0 5h1m1 0h1m1 0h1m1 0h1'/%3E%3Cpath stroke='%23c8d6fb' d='M1 0h1m1 0h1m1 0h1m1 0h1'/%3E%3Cpath stroke='%238cb0f8' d='M1 1h1m1 0h1m1 0h1m1 0h1M1 2h1m1 0h1m1 0h1m1 0h1M1 3h1m1 0h1m1 0h1m1 0h1M1 4h1m1 0h1m1 0h1m1 0h1M1 5h1m1 0h1m1 0h1m1 0h1M1 6h1m1 0h1m1 0h1m1 0h1'/%3E%3Cpath stroke='%23bad1fc' d='M0 6h1m1 0h1'/%3E%3Cpath stroke='%23bad3fc' d='M4 6h1m1 0h1'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:vertical:start {
  height: 17px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eeede5' d='M0 0h1m15 0h1M0 1h1M0 2h1M0 3h1M0 4h1M0 5h1M0 6h1M0 7h1M0 8h1M0 9h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m15 0h1M0 16h1m15 0h1'/%3E%3Cpath stroke='%23fdfdfa' d='M1 0h1'/%3E%3Cpath stroke='%23fff' d='M2 0h14M1 1h1m13 0h1M1 2h1m13 0h1M1 3h1m13 0h1M1 4h1m13 0h1M1 5h1m13 0h1M1 6h1m13 0h1M1 7h1m13 0h1M1 8h1m13 0h1M1 9h1m13 0h1M1 10h1m13 0h1M1 11h1m13 0h1M1 12h1m13 0h1M1 13h1m13 0h1M1 14h1m13 0h1M2 15h13'/%3E%3Cpath stroke='%23e6eefc' d='M2 1h1'/%3E%3Cpath stroke='%23d0dffc' d='M3 1h1M2 2h1'/%3E%3Cpath stroke='%23cad8f9' d='M4 1h1M2 3h1'/%3E%3Cpath stroke='%23c4d2f7' d='M5 1h1'/%3E%3Cpath stroke='%23c0d0f7' d='M6 1h1'/%3E%3Cpath stroke='%23bdcef7' d='M7 1h1M2 6h1'/%3E%3Cpath stroke='%23bbcdf5' d='M8 1h1'/%3E%3Cpath stroke='%23b8cbf6' d='M9 1h1M2 7h1'/%3E%3Cpath stroke='%23b7caf5' d='M10 1h1M2 8h1'/%3E%3Cpath stroke='%23b5c8f7' d='M11 1h1'/%3E%3Cpath stroke='%23b3c7f5' d='M12 1h1'/%3E%3Cpath stroke='%23afc5f4' d='M13 1h1'/%3E%3Cpath stroke='%23dce6f9' d='M14 1h1'/%3E%3Cpath stroke='%23dfe2e1' d='M16 1h1'/%3E%3Cpath stroke='%23e1eafe' d='M3 2h1'/%3E%3Cpath stroke='%23dae6fe' d='M4 2h1M3 3h1'/%3E%3Cpath stroke='%23d4e1fc' d='M5 2h1M3 4h1'/%3E%3Cpath stroke='%23d1e0fd' d='M6 2h1M4 4h1'/%3E%3Cpath stroke='%23d0ddfc' d='M7 2h1M3 5h1'/%3E%3Cpath stroke='%23cedbfd' d='M8 2h1M6 3h1'/%3E%3Cpath stroke='%23cad9fd' d='M9 2h1M7 3h1M5 5h1'/%3E%3Cpath stroke='%23c8d8fb' d='M10 2h1'/%3E%3Cpath stroke='%23c5d6fc' d='M11 2h1m-8 8h1m1 0h1'/%3E%3Cpath stroke='%23c2d3fc' d='M12 2h1m-2 1h1m-9 7h1m0 1h1'/%3E%3Cpath stroke='%23bccefa' d='M13 2h1m-1 2h1m-9 9h2'/%3E%3Cpath stroke='%23b9c9f3' d='M14 2h1M5 14h3'/%3E%3Cpath stroke='%23cfd7dd' d='M16 2h1'/%3E%3Cpath stroke='%23d8e3fc' d='M4 3h1'/%3E%3Cpath stroke='%23d1defd' d='M5 3h1'/%3E%3Cpath stroke='%23c9d8fc' d='M8 3h1M6 4h2M5 6h2M3 7h1'/%3E%3Cpath stroke='%23c5d5fc' d='M9 3h1M3 9h1m3 0h1'/%3E%3Cpath stroke='%23c5d3fc' d='M10 3h1'/%3E%3Cpath stroke='%23bed0fc' d='M12 3h1M9 4h1m-7 7h1m0 1h1'/%3E%3Cpath stroke='%23bccdfa' d='M13 3h1'/%3E%3Cpath stroke='%23baccf4' d='M14 3h1'/%3E%3Cpath stroke='%23bdcbda' d='M16 3h1'/%3E%3Cpath stroke='%23c4d4f7' d='M2 4h1'/%3E%3Cpath stroke='%23cddbfc' d='M5 4h1M3 6h1'/%3E%3Cpath stroke='%23c8d5fb' d='M8 4h1'/%3E%3Cpath stroke='%23bbcefd' d='M10 4h3M9 5h1'/%3E%3Cpath stroke='%23bcccf3' d='M14 4h1m-1 1h1m-1 1h1'/%3E%3Cpath stroke='%23b1c2d5' d='M16 4h1'/%3E%3Cpath stroke='%23bed0f8' d='M2 5h1'/%3E%3Cpath stroke='%23ceddfd' d='M4 5h1'/%3E%3Cpath stroke='%23c8d6fb' d='M6 5h2M3 8h2'/%3E%3Cpath stroke='%234d6185' d='M8 5h1M7 6h3M6 7h5M5 8h3m1 0h3M4 9h3m3 0h3m-8 1h1m5 0h1'/%3E%3Cpath stroke='%23bacdfc' d='M10 5h1m1 0h2M3 12h1'/%3E%3Cpath stroke='%23b9cdfb' d='M11 5h1m-2 1h1m1 0h2m-1 1h1'/%3E%3Cpath stroke='%23a8bbd4' d='M16 5h1'/%3E%3Cpath stroke='%23cddafc' d='M4 6h1'/%3E%3Cpath stroke='%23b7cdfc' d='M11 6h1m0 1h1'/%3E%3Cpath stroke='%23a4b8d3' d='M16 6h1'/%3E%3Cpath stroke='%23cad8fd' d='M4 7h2'/%3E%3Cpath stroke='%23b6cefb' d='M11 7h1m0 1h1'/%3E%3Cpath stroke='%23bacbf4' d='M14 7h1'/%3E%3Cpath stroke='%23a0b5d3' d='M16 7h1m-1 1h1m-1 5h1'/%3E%3Cpath stroke='%23c1d3fb' d='M8 8h1'/%3E%3Cpath stroke='%23b6cdfb' d='M13 8h1m-5 5h1'/%3E%3Cpath stroke='%23b9cbf3' d='M14 8h1'/%3E%3Cpath stroke='%23b4c8f6' d='M2 9h1'/%3E%3Cpath stroke='%23c2d5fc' d='M8 9h1m-1 1h1m-3 1h2'/%3E%3Cpath stroke='%23bdd3fb' d='M9 9h1m-2 3h1'/%3E%3Cpath stroke='%23b5cdfa' d='M13 9h1'/%3E%3Cpath stroke='%23b5c9f3' d='M14 9h1'/%3E%3Cpath stroke='%239fb5d2' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1'/%3E%3Cpath stroke='%23b1c7f6' d='M2 10h1'/%3E%3Cpath stroke='%23c3d5fd' d='M7 10h1'/%3E%3Cpath stroke='%23bad4fc' d='M9 10h1m-1 1h1'/%3E%3Cpath stroke='%23b2cffb' d='M10 10h1m1 0h1m-2 2h1'/%3E%3Cpath stroke='%23b1cbfa' d='M13 10h1'/%3E%3Cpath stroke='%23b3c8f5' d='M14 10h1m-6 4h2'/%3E%3Cpath stroke='%23adc3f6' d='M2 11h1'/%3E%3Cpath stroke='%23c3d3fd' d='M5 11h1'/%3E%3Cpath stroke='%23c1d5fb' d='M8 11h1'/%3E%3Cpath stroke='%23b7d3fc' d='M10 11h1m-2 1h1'/%3E%3Cpath stroke='%23b3d1fc' d='M11 11h1'/%3E%3Cpath stroke='%23afcefb' d='M12 11h1'/%3E%3Cpath stroke='%23aecafa' d='M13 11h1'/%3E%3Cpath stroke='%23b1c8f3' d='M14 11h1'/%3E%3Cpath stroke='%23acc2f5' d='M2 12h1'/%3E%3Cpath stroke='%23c1d2fb' d='M5 12h1'/%3E%3Cpath stroke='%23bed1fc' d='M6 12h2'/%3E%3Cpath stroke='%23b6d1fb' d='M10 12h1'/%3E%3Cpath stroke='%23afccfb' d='M12 12h1'/%3E%3Cpath stroke='%23adc9f9' d='M13 12h1m-2 1h1'/%3E%3Cpath stroke='%23b1c5f3' d='M14 12h1'/%3E%3Cpath stroke='%23aac0f3' d='M2 13h1'/%3E%3Cpath stroke='%23b7cbf9' d='M3 13h1'/%3E%3Cpath stroke='%23b9cefb' d='M4 13h1'/%3E%3Cpath stroke='%23bbcef9' d='M7 13h1'/%3E%3Cpath stroke='%23b9cffb' d='M8 13h1'/%3E%3Cpath stroke='%23b2cdfb' d='M10 13h1'/%3E%3Cpath stroke='%23b0cbf9' d='M11 13h1'/%3E%3Cpath stroke='%23aec8f7' d='M13 13h1'/%3E%3Cpath stroke='%23b0c5f2' d='M14 13h1'/%3E%3Cpath stroke='%23dbe3f8' d='M2 14h1'/%3E%3Cpath stroke='%23b7c6f1' d='M3 14h1'/%3E%3Cpath stroke='%23b8c9f2' d='M4 14h1m3 0h1'/%3E%3Cpath stroke='%23b2c8f4' d='M11 14h1'/%3E%3Cpath stroke='%23b1c6f3' d='M12 14h1'/%3E%3Cpath stroke='%23b0c4f2' d='M13 14h1'/%3E%3Cpath stroke='%23d9e3f6' d='M14 14h1'/%3E%3Cpath stroke='%23aec0d6' d='M16 14h1'/%3E%3Cpath stroke='%23c3d4e7' d='M1 15h1'/%3E%3Cpath stroke='%23aec4e5' d='M15 15h1'/%3E%3Cpath stroke='%23edf1f3' d='M1 16h1'/%3E%3Cpath stroke='%23aac0e1' d='M2 16h1'/%3E%3Cpath stroke='%2394b1d9' d='M3 16h1'/%3E%3Cpath stroke='%2388a7d8' d='M4 16h1'/%3E%3Cpath stroke='%2383a4d3' d='M5 16h1'/%3E%3Cpath stroke='%237da0d4' d='M6 16h1m3 0h3'/%3E%3Cpath stroke='%237e9fd2' d='M7 16h1'/%3E%3Cpath stroke='%237c9fd3' d='M8 16h2'/%3E%3Cpath stroke='%2382a4d6' d='M13 16h1'/%3E%3Cpath stroke='%2394b0dd' d='M14 16h1'/%3E%3Cpath stroke='%23ecf2f7' d='M15 16h1'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:vertical:end {
  height: 17px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eeede5' d='M0 0h1m15 0h1M0 1h1M0 2h1M0 3h1M0 4h1M0 5h1M0 6h1M0 7h1M0 8h1M0 9h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m-1 1h1m15 0h1M0 16h1m15 0h1'/%3E%3Cpath stroke='%23fdfdfa' d='M1 0h1'/%3E%3Cpath stroke='%23fff' d='M2 0h14M1 1h1m13 0h1M1 2h1m13 0h1M1 3h1m13 0h1M1 4h1m13 0h1M1 5h1m13 0h1M1 6h1m13 0h1M1 7h1m13 0h1M1 8h1m13 0h1M1 9h1m13 0h1M1 10h1m13 0h1M1 11h1m13 0h1M1 12h1m13 0h1M1 13h1m13 0h1M1 14h1m13 0h1M2 15h13'/%3E%3Cpath stroke='%23e6eefc' d='M2 1h1'/%3E%3Cpath stroke='%23d0dffc' d='M3 1h1M2 2h1'/%3E%3Cpath stroke='%23cad8f9' d='M4 1h1M2 3h1'/%3E%3Cpath stroke='%23c4d2f7' d='M5 1h1'/%3E%3Cpath stroke='%23c0d0f7' d='M6 1h1'/%3E%3Cpath stroke='%23bdcef7' d='M7 1h1M2 6h1'/%3E%3Cpath stroke='%23bbcdf5' d='M8 1h1'/%3E%3Cpath stroke='%23b8cbf6' d='M9 1h1M2 7h1'/%3E%3Cpath stroke='%23b7caf5' d='M10 1h1M2 8h1'/%3E%3Cpath stroke='%23b5c8f7' d='M11 1h1'/%3E%3Cpath stroke='%23b3c7f5' d='M12 1h1'/%3E%3Cpath stroke='%23afc5f4' d='M13 1h1'/%3E%3Cpath stroke='%23dce6f9' d='M14 1h1'/%3E%3Cpath stroke='%23dfe2e1' d='M16 1h1'/%3E%3Cpath stroke='%23e1eafe' d='M3 2h1'/%3E%3Cpath stroke='%23dae6fe' d='M4 2h1M3 3h1'/%3E%3Cpath stroke='%23d4e1fc' d='M5 2h1M3 4h1'/%3E%3Cpath stroke='%23d1e0fd' d='M6 2h1M4 4h1'/%3E%3Cpath stroke='%23d0ddfc' d='M7 2h1M3 5h1'/%3E%3Cpath stroke='%23cedbfd' d='M8 2h1M6 3h1'/%3E%3Cpath stroke='%23cad9fd' d='M9 2h1M7 3h1M5 5h1'/%3E%3Cpath stroke='%23c8d8fb' d='M10 2h1'/%3E%3Cpath stroke='%23c5d6fc' d='M11 2h1m-8 8h3'/%3E%3Cpath stroke='%23c2d3fc' d='M12 2h1m-2 1h1m-9 7h1m0 1h1'/%3E%3Cpath stroke='%23bccefa' d='M13 2h1m-1 2h1m-9 9h2'/%3E%3Cpath stroke='%23b9c9f3' d='M14 2h1M5 14h3'/%3E%3Cpath stroke='%23cfd7dd' d='M16 2h1'/%3E%3Cpath stroke='%23d8e3fc' d='M4 3h1'/%3E%3Cpath stroke='%23d1defd' d='M5 3h1'/%3E%3Cpath stroke='%23c9d8fc' d='M8 3h1M6 4h2M6 6h2M3 7h1'/%3E%3Cpath stroke='%23c5d5fc' d='M9 3h1M3 9h3'/%3E%3Cpath stroke='%23c5d3fc' d='M10 3h1'/%3E%3Cpath stroke='%23bed0fc' d='M12 3h1M9 4h1m-7 7h1m0 1h1'/%3E%3Cpath stroke='%23bccdfa' d='M13 3h1'/%3E%3Cpath stroke='%23baccf4' d='M14 3h1'/%3E%3Cpath stroke='%23bdcbda' d='M16 3h1'/%3E%3Cpath stroke='%23c4d4f7' d='M2 4h1'/%3E%3Cpath stroke='%23cddbfc' d='M5 4h1M3 6h1'/%3E%3Cpath stroke='%23c8d5fb' d='M8 4h1'/%3E%3Cpath stroke='%23bbcefd' d='M10 4h3M9 5h1M8 6h1'/%3E%3Cpath stroke='%23bcccf3' d='M14 4h1m-1 1h1m-1 1h1'/%3E%3Cpath stroke='%23b1c2d5' d='M16 4h1'/%3E%3Cpath stroke='%23bed0f8' d='M2 5h1'/%3E%3Cpath stroke='%23ceddfd' d='M4 5h1'/%3E%3Cpath stroke='%23c8d6fb' d='M6 5h3M3 8h2'/%3E%3Cpath stroke='%23bacdfc' d='M10 5h1m1 0h2M3 12h1'/%3E%3Cpath stroke='%23b9cdfb' d='M11 5h1M9 6h2m1 0h2m-1 1h1'/%3E%3Cpath stroke='%23a8bbd4' d='M16 5h1'/%3E%3Cpath stroke='%23cddafc' d='M4 6h1'/%3E%3Cpath stroke='%234d6185' d='M5 6h1m5 0h1M4 7h3m3 0h3M5 8h3m1 0h3M6 9h5m-4 1h3m-2 1h1'/%3E%3Cpath stroke='%23a4b8d3' d='M16 6h1'/%3E%3Cpath stroke='%23c1d3fb' d='M7 7h2M8 8h1'/%3E%3Cpath stroke='%23b6cefb' d='M9 7h1m2 1h1m-2 1h2'/%3E%3Cpath stroke='%23bacbf4' d='M14 7h1'/%3E%3Cpath stroke='%23a0b5d3' d='M16 7h1m-1 1h1m-1 5h1'/%3E%3Cpath stroke='%23b6cdfb' d='M13 8h1m-5 5h1'/%3E%3Cpath stroke='%23b9cbf3' d='M14 8h1'/%3E%3Cpath stroke='%23b4c8f6' d='M2 9h1'/%3E%3Cpath stroke='%23b5cdfa' d='M13 9h1'/%3E%3Cpath stroke='%23b5c9f3' d='M14 9h1'/%3E%3Cpath stroke='%239fb5d2' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1'/%3E%3Cpath stroke='%23b1c7f6' d='M2 10h1'/%3E%3Cpath stroke='%23b2cffb' d='M10 10h3m-2 2h1'/%3E%3Cpath stroke='%23b1cbfa' d='M13 10h1'/%3E%3Cpath stroke='%23b3c8f5' d='M14 10h1m-6 4h2'/%3E%3Cpath stroke='%23adc3f6' d='M2 11h1'/%3E%3Cpath stroke='%23c3d3fd' d='M5 11h1'/%3E%3Cpath stroke='%23c2d5fc' d='M6 11h2'/%3E%3Cpath stroke='%23bad4fc' d='M9 11h1'/%3E%3Cpath stroke='%23b7d3fc' d='M10 11h1m-2 1h1'/%3E%3Cpath stroke='%23b3d1fc' d='M11 11h1'/%3E%3Cpath stroke='%23afcefb' d='M12 11h1'/%3E%3Cpath stroke='%23aecafa' d='M13 11h1'/%3E%3Cpath stroke='%23b1c8f3' d='M14 11h1'/%3E%3Cpath stroke='%23acc2f5' d='M2 12h1'/%3E%3Cpath stroke='%23c1d2fb' d='M5 12h1'/%3E%3Cpath stroke='%23bed1fc' d='M6 12h2'/%3E%3Cpath stroke='%23bdd3fb' d='M8 12h1'/%3E%3Cpath stroke='%23b6d1fb' d='M10 12h1'/%3E%3Cpath stroke='%23afccfb' d='M12 12h1'/%3E%3Cpath stroke='%23adc9f9' d='M13 12h1m-2 1h1'/%3E%3Cpath stroke='%23b1c5f3' d='M14 12h1'/%3E%3Cpath stroke='%23aac0f3' d='M2 13h1'/%3E%3Cpath stroke='%23b7cbf9' d='M3 13h1'/%3E%3Cpath stroke='%23b9cefb' d='M4 13h1'/%3E%3Cpath stroke='%23bbcef9' d='M7 13h1'/%3E%3Cpath stroke='%23b9cffb' d='M8 13h1'/%3E%3Cpath stroke='%23b2cdfb' d='M10 13h1'/%3E%3Cpath stroke='%23b0cbf9' d='M11 13h1'/%3E%3Cpath stroke='%23aec8f7' d='M13 13h1'/%3E%3Cpath stroke='%23b0c5f2' d='M14 13h1'/%3E%3Cpath stroke='%23dbe3f8' d='M2 14h1'/%3E%3Cpath stroke='%23b7c6f1' d='M3 14h1'/%3E%3Cpath stroke='%23b8c9f2' d='M4 14h1m3 0h1'/%3E%3Cpath stroke='%23b2c8f4' d='M11 14h1'/%3E%3Cpath stroke='%23b1c6f3' d='M12 14h1'/%3E%3Cpath stroke='%23b0c4f2' d='M13 14h1'/%3E%3Cpath stroke='%23d9e3f6' d='M14 14h1'/%3E%3Cpath stroke='%23aec0d6' d='M16 14h1'/%3E%3Cpath stroke='%23c3d4e7' d='M1 15h1'/%3E%3Cpath stroke='%23aec4e5' d='M15 15h1'/%3E%3Cpath stroke='%23edf1f3' d='M1 16h1'/%3E%3Cpath stroke='%23aac0e1' d='M2 16h1'/%3E%3Cpath stroke='%2394b1d9' d='M3 16h1'/%3E%3Cpath stroke='%2388a7d8' d='M4 16h1'/%3E%3Cpath stroke='%2383a4d3' d='M5 16h1'/%3E%3Cpath stroke='%237da0d4' d='M6 16h1m3 0h3'/%3E%3Cpath stroke='%237e9fd2' d='M7 16h1'/%3E%3Cpath stroke='%237c9fd3' d='M8 16h2'/%3E%3Cpath stroke='%2382a4d6' d='M13 16h1'/%3E%3Cpath stroke='%2394b0dd' d='M14 16h1'/%3E%3Cpath stroke='%23ecf2f7' d='M15 16h1'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:horizontal:start {
  width: 17px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eeede5' d='M0 0h17m-1 1h1m-1 14h1m-1 1h1'/%3E%3Cpath stroke='%23fdfdfa' d='M0 1h1'/%3E%3Cpath stroke='%23fff' d='M1 1h15M0 2h1m14 0h1M0 3h1m14 0h1M0 4h1m14 0h1M0 5h1m14 0h1M0 6h1m14 0h1M0 7h1m14 0h1M0 8h1m14 0h1M0 9h1m14 0h1M0 10h1m14 0h1M0 11h1m14 0h1M0 12h1m14 0h1M0 13h1m14 0h1M0 14h1m14 0h1M1 15h14'/%3E%3Cpath stroke='%23e6eefc' d='M1 2h1'/%3E%3Cpath stroke='%23d0dffc' d='M2 2h1M1 3h1'/%3E%3Cpath stroke='%23cad8f9' d='M3 2h1M1 4h1'/%3E%3Cpath stroke='%23c4d2f7' d='M4 2h1'/%3E%3Cpath stroke='%23c0d0f7' d='M5 2h1'/%3E%3Cpath stroke='%23bdcef7' d='M6 2h1M1 7h1'/%3E%3Cpath stroke='%23bbcdf5' d='M7 2h2'/%3E%3Cpath stroke='%23b8cbf6' d='M9 2h1M1 8h1'/%3E%3Cpath stroke='%23b7caf5' d='M10 2h1M1 9h1'/%3E%3Cpath stroke='%23b5c8f7' d='M11 2h1'/%3E%3Cpath stroke='%23b3c7f5' d='M12 2h1'/%3E%3Cpath stroke='%23afc5f4' d='M13 2h1'/%3E%3Cpath stroke='%23dce6f9' d='M14 2h1'/%3E%3Cpath stroke='%23dfe2e1' d='M16 2h1'/%3E%3Cpath stroke='%23e1eafe' d='M2 3h1'/%3E%3Cpath stroke='%23dae6fe' d='M3 3h1M2 4h1'/%3E%3Cpath stroke='%23d4e1fc' d='M4 3h1M2 5h1'/%3E%3Cpath stroke='%23d1e0fd' d='M5 3h1M3 5h1'/%3E%3Cpath stroke='%23d0ddfc' d='M6 3h1M2 6h1'/%3E%3Cpath stroke='%23cedbfd' d='M7 3h1M5 4h1'/%3E%3Cpath stroke='%23cddbfc' d='M8 3h1M4 5h1M2 7h1'/%3E%3Cpath stroke='%23cad9fd' d='M9 3h1M6 4h1M4 6h1'/%3E%3Cpath stroke='%23c8d8fb' d='M10 3h1'/%3E%3Cpath stroke='%23c5d6fc' d='M11 3h1m-9 7h3'/%3E%3Cpath stroke='%23c2d3fc' d='M12 3h1m-2 1h1M2 10h1m0 1h1'/%3E%3Cpath stroke='%23bccefa' d='M13 3h1m-1 2h1M4 13h2'/%3E%3Cpath stroke='%23b9c9f3' d='M14 3h1M4 14h3'/%3E%3Cpath stroke='%23cfd7dd' d='M16 3h1'/%3E%3Cpath stroke='%23d8e3fc' d='M3 4h1'/%3E%3Cpath stroke='%23d1defd' d='M4 4h1'/%3E%3Cpath stroke='%23c9d8fc' d='M7 4h1M5 5h2M4 7h1M2 8h1'/%3E%3Cpath stroke='%234d6185' d='M8 4h1M7 5h3M6 6h3M5 7h3M4 8h3M5 9h3m-2 1h3m-2 1h3m-2 1h1'/%3E%3Cpath stroke='%23c5d5fc' d='M9 4h1'/%3E%3Cpath stroke='%23c5d3fc' d='M10 4h1'/%3E%3Cpath stroke='%23bed0fc' d='M12 4h1M2 11h1m0 1h1'/%3E%3Cpath stroke='%23bccdfa' d='M13 4h1'/%3E%3Cpath stroke='%23baccf4' d='M14 4h1'/%3E%3Cpath stroke='%23bdcbda' d='M16 4h1'/%3E%3Cpath stroke='%23c4d4f7' d='M1 5h1'/%3E%3Cpath stroke='%23bbcefd' d='M10 5h3M9 6h1'/%3E%3Cpath stroke='%23bcccf3' d='M14 5h1m-1 1h1m-1 1h1'/%3E%3Cpath stroke='%23b1c2d5' d='M16 5h1'/%3E%3Cpath stroke='%23bed0f8' d='M1 6h1'/%3E%3Cpath stroke='%23ceddfd' d='M3 6h1'/%3E%3Cpath stroke='%23c8d6fb' d='M5 6h1M2 9h3'/%3E%3Cpath stroke='%23bacdfc' d='M10 6h1m1 0h2M2 12h1'/%3E%3Cpath stroke='%23b9cdfb' d='M11 6h1M8 7h3m1 0h2m-1 1h1'/%3E%3Cpath stroke='%23a8bbd4' d='M16 6h1'/%3E%3Cpath stroke='%23cddafc' d='M3 7h1'/%3E%3Cpath stroke='%23b7cdfc' d='M11 7h1m0 1h1'/%3E%3Cpath stroke='%23a4b8d3' d='M16 7h1'/%3E%3Cpath stroke='%23cad8fd' d='M3 8h1'/%3E%3Cpath stroke='%23c1d3fb' d='M7 8h2'/%3E%3Cpath stroke='%23b6cefb' d='M9 8h3M9 9h4'/%3E%3Cpath stroke='%23bacbf4' d='M14 8h1'/%3E%3Cpath stroke='%23a0b5d3' d='M16 8h1m-1 1h1m-1 4h1'/%3E%3Cpath stroke='%23bdd3fb' d='M8 9h1m-2 3h1'/%3E%3Cpath stroke='%23b6cdfb' d='M13 9h1m-5 4h1'/%3E%3Cpath stroke='%23b9cbf3' d='M14 9h1'/%3E%3Cpath stroke='%23b1c7f6' d='M1 10h1'/%3E%3Cpath stroke='%23bad4fc' d='M9 10h1'/%3E%3Cpath stroke='%23b2cffb' d='M10 10h3m-2 2h1'/%3E%3Cpath stroke='%23b1cbfa' d='M13 10h1'/%3E%3Cpath stroke='%23b3c8f5' d='M14 10h1m-6 4h2'/%3E%3Cpath stroke='%239fb5d2' d='M16 10h1m-1 1h1m-1 1h1'/%3E%3Cpath stroke='%23adc3f6' d='M1 11h1'/%3E%3Cpath stroke='%23c3d3fd' d='M4 11h1'/%3E%3Cpath stroke='%23c2d5fc' d='M5 11h2'/%3E%3Cpath stroke='%23b7d3fc' d='M10 11h1m-2 1h1'/%3E%3Cpath stroke='%23b3d1fc' d='M11 11h1'/%3E%3Cpath stroke='%23afcefb' d='M12 11h1'/%3E%3Cpath stroke='%23aecafa' d='M13 11h1'/%3E%3Cpath stroke='%23b1c8f3' d='M14 11h1'/%3E%3Cpath stroke='%23acc2f5' d='M1 12h1'/%3E%3Cpath stroke='%23c1d2fb' d='M4 12h1'/%3E%3Cpath stroke='%23bed1fc' d='M5 12h2'/%3E%3Cpath stroke='%23b6d1fb' d='M10 12h1'/%3E%3Cpath stroke='%23afccfb' d='M12 12h1'/%3E%3Cpath stroke='%23adc9f9' d='M13 12h1m-2 1h1'/%3E%3Cpath stroke='%23b1c5f3' d='M14 12h1'/%3E%3Cpath stroke='%23aac0f3' d='M1 13h1'/%3E%3Cpath stroke='%23b7cbf9' d='M2 13h1'/%3E%3Cpath stroke='%23b9cefb' d='M3 13h1'/%3E%3Cpath stroke='%23bbcef9' d='M6 13h1'/%3E%3Cpath stroke='%23b9cffb' d='M7 13h1'/%3E%3Cpath stroke='%23b8cffa' d='M8 13h1'/%3E%3Cpath stroke='%23b2cdfb' d='M10 13h1'/%3E%3Cpath stroke='%23b0cbf9' d='M11 13h1'/%3E%3Cpath stroke='%23aec8f7' d='M13 13h1'/%3E%3Cpath stroke='%23b0c5f2' d='M14 13h1'/%3E%3Cpath stroke='%23dbe3f8' d='M1 14h1'/%3E%3Cpath stroke='%23b7c6f1' d='M2 14h1'/%3E%3Cpath stroke='%23b8c9f2' d='M3 14h1m3 0h2'/%3E%3Cpath stroke='%23b2c8f4' d='M11 14h1'/%3E%3Cpath stroke='%23b1c6f3' d='M12 14h1'/%3E%3Cpath stroke='%23b0c4f2' d='M13 14h1'/%3E%3Cpath stroke='%23d9e3f6' d='M14 14h1'/%3E%3Cpath stroke='%23aec0d6' d='M16 14h1'/%3E%3Cpath stroke='%23c3d4e7' d='M0 15h1'/%3E%3Cpath stroke='%23aec4e5' d='M15 15h1'/%3E%3Cpath stroke='%23edf1f3' d='M0 16h1'/%3E%3Cpath stroke='%23aac0e1' d='M1 16h1'/%3E%3Cpath stroke='%2394b1d9' d='M2 16h1'/%3E%3Cpath stroke='%2388a7d8' d='M3 16h1'/%3E%3Cpath stroke='%2383a4d3' d='M4 16h1'/%3E%3Cpath stroke='%237da0d4' d='M5 16h1m4 0h3'/%3E%3Cpath stroke='%237e9fd2' d='M6 16h1'/%3E%3Cpath stroke='%237c9fd3' d='M7 16h3'/%3E%3Cpath stroke='%2382a4d6' d='M13 16h1'/%3E%3Cpath stroke='%2394b0dd' d='M14 16h1'/%3E%3Cpath stroke='%23ecf2f7' d='M15 16h1'/%3E%3C/svg%3E");
}
::-webkit-scrollbar-button:horizontal:end {
  width: 17px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -0.5 17 17' shape-rendering='crispEdges'%3E%3Cpath stroke='%23eeede5' d='M0 0h17m-1 1h1m-1 14h1m-1 1h1'/%3E%3Cpath stroke='%23fdfdfa' d='M0 1h1'/%3E%3Cpath stroke='%23fff' d='M1 1h15M0 2h1m14 0h1M0 3h1m14 0h1M0 4h1m14 0h1M0 5h1m14 0h1M0 6h1m14 0h1M0 7h1m14 0h1M0 8h1m14 0h1M0 9h1m14 0h1M0 10h1m14 0h1M0 11h1m14 0h1M0 12h1m14 0h1M0 13h1m14 0h1M0 14h1m14 0h1M1 15h14'/%3E%3Cpath stroke='%23e6eefc' d='M1 2h1'/%3E%3Cpath stroke='%23d0dffc' d='M2 2h1M1 3h1'/%3E%3Cpath stroke='%23cad8f9' d='M3 2h1M1 4h1'/%3E%3Cpath stroke='%23c4d2f7' d='M4 2h1'/%3E%3Cpath stroke='%23c0d0f7' d='M5 2h1'/%3E%3Cpath stroke='%23bdcef7' d='M6 2h1M1 7h1'/%3E%3Cpath stroke='%23bbcdf5' d='M7 2h2'/%3E%3Cpath stroke='%23b8cbf6' d='M9 2h1M1 8h1'/%3E%3Cpath stroke='%23b7caf5' d='M10 2h1'/%3E%3Cpath stroke='%23b5c8f7' d='M11 2h1'/%3E%3Cpath stroke='%23b3c7f5' d='M12 2h1'/%3E%3Cpath stroke='%23afc5f4' d='M13 2h1'/%3E%3Cpath stroke='%23dce6f9' d='M14 2h1'/%3E%3Cpath stroke='%23dfe2e1' d='M16 2h1'/%3E%3Cpath stroke='%23e1eafe' d='M2 3h1'/%3E%3Cpath stroke='%23dae6fe' d='M3 3h1M2 4h1'/%3E%3Cpath stroke='%23d4e1fc' d='M4 3h1M2 5h1'/%3E%3Cpath stroke='%23d1e0fd' d='M5 3h1M3 5h1'/%3E%3Cpath stroke='%23d0ddfc' d='M6 3h1M2 6h1'/%3E%3Cpath stroke='%23cedbfd' d='M7 3h1M5 4h1'/%3E%3Cpath stroke='%23cddbfc' d='M8 3h1M4 5h1M2 7h1'/%3E%3Cpath stroke='%23cad9fd' d='M9 3h1M6 4h1M4 6h1'/%3E%3Cpath stroke='%23c8d8fb' d='M10 3h1'/%3E%3Cpath stroke='%23c5d6fc' d='M11 3h1m-9 7h3'/%3E%3Cpath stroke='%23c2d3fc' d='M12 3h1m-2 1h1M2 10h1m0 1h1'/%3E%3Cpath stroke='%23bccefa' d='M13 3h1m-1 2h1M4 13h2'/%3E%3Cpath stroke='%23b9c9f3' d='M14 3h1M4 14h3'/%3E%3Cpath stroke='%23cfd7dd' d='M16 3h1'/%3E%3Cpath stroke='%23d8e3fc' d='M3 4h1'/%3E%3Cpath stroke='%23d1defd' d='M4 4h1'/%3E%3Cpath stroke='%234d6185' d='M7 4h1M6 5h3M7 6h3M8 7h3M9 8h3M8 9h3m-4 1h3m-4 1h3m-2 1h1'/%3E%3Cpath stroke='%23c8d6fb' d='M8 4h1M5 6h2'/%3E%3Cpath stroke='%23c5d5fc' d='M9 4h1M2 9h5'/%3E%3Cpath stroke='%23c5d3fc' d='M10 4h1'/%3E%3Cpath stroke='%23bed0fc' d='M12 4h1M9 5h1m-8 6h1m0 1h1'/%3E%3Cpath stroke='%23bccdfa' d='M13 4h1'/%3E%3Cpath stroke='%23baccf4' d='M14 4h1'/%3E%3Cpath stroke='%23bdcbda' d='M16 4h1'/%3E%3Cpath stroke='%23c4d4f7' d='M1 5h1'/%3E%3Cpath stroke='%23c9d8fc' d='M5 5h1M4 7h3M2 8h1'/%3E%3Cpath stroke='%23bbcefd' d='M10 5h3M7 7h1'/%3E%3Cpath stroke='%23bcccf3' d='M14 5h1m-1 1h1m-1 1h1'/%3E%3Cpath stroke='%23b1c2d5' d='M16 5h1'/%3E%3Cpath stroke='%23bed0f8' d='M1 6h1'/%3E%3Cpath stroke='%23ceddfd' d='M3 6h1'/%3E%3Cpath stroke='%23bacdfc' d='M10 6h1m1 0h2M2 12h1'/%3E%3Cpath stroke='%23b9cdfb' d='M11 6h1m0 1h2m-1 1h1'/%3E%3Cpath stroke='%23a8bbd4' d='M16 6h1'/%3E%3Cpath stroke='%23cddafc' d='M3 7h1'/%3E%3Cpath stroke='%23b7cdfc' d='M11 7h1m0 1h1'/%3E%3Cpath stroke='%23a4b8d3' d='M16 7h1'/%3E%3Cpath stroke='%23cad8fd' d='M3 8h3'/%3E%3Cpath stroke='%23c1d3fb' d='M6 8h3'/%3E%3Cpath stroke='%23bacbf4' d='M14 8h1'/%3E%3Cpath stroke='%23a0b5d3' d='M16 8h1m-1 5h1'/%3E%3Cpath stroke='%23b4c8f6' d='M1 9h1'/%3E%3Cpath stroke='%23c2d5fc' d='M7 9h1m-3 2h1'/%3E%3Cpath stroke='%23b6cefb' d='M11 9h2'/%3E%3Cpath stroke='%23b5cdfa' d='M13 9h1'/%3E%3Cpath stroke='%23b5c9f3' d='M14 9h1'/%3E%3Cpath stroke='%239fb5d2' d='M16 9h1m-1 1h1m-1 1h1m-1 1h1'/%3E%3Cpath stroke='%23b1c7f6' d='M1 10h1'/%3E%3Cpath stroke='%23c3d5fd' d='M6 10h1'/%3E%3Cpath stroke='%23b2cffb' d='M10 10h3m-2 2h1'/%3E%3Cpath stroke='%23b1cbfa' d='M13 10h1'/%3E%3Cpath stroke='%23b3c8f5' d='M14 10h1m-6 4h2'/%3E%3Cpath stroke='%23adc3f6' d='M1 11h1'/%3E%3Cpath stroke='%23c3d3fd' d='M4 11h1'/%3E%3Cpath stroke='%23bad4fc' d='M9 11h1'/%3E%3Cpath stroke='%23b7d3fc' d='M10 11h1m-2 1h1'/%3E%3Cpath stroke='%23b3d1fc' d='M11 11h1'/%3E%3Cpath stroke='%23afcefb' d='M12 11h1'/%3E%3Cpath stroke='%23aecafa' d='M13 11h1'/%3E%3Cpath stroke='%23b1c8f3' d='M14 11h1'/%3E%3Cpath stroke='%23acc2f5' d='M1 12h1'/%3E%3Cpath stroke='%23c1d2fb' d='M4 12h1'/%3E%3Cpath stroke='%23bed1fc' d='M5 12h2'/%3E%3Cpath stroke='%23bbd3fd' d='M8 12h1'/%3E%3Cpath stroke='%23b6d1fb' d='M10 12h1'/%3E%3Cpath stroke='%23afccfb' d='M12 12h1'/%3E%3Cpath stroke='%23adc9f9' d='M13 12h1m-2 1h1'/%3E%3Cpath stroke='%23b1c5f3' d='M14 12h1'/%3E%3Cpath stroke='%23aac0f3' d='M1 13h1'/%3E%3Cpath stroke='%23b7cbf9' d='M2 13h1'/%3E%3Cpath stroke='%23b9cefb' d='M3 13h1'/%3E%3Cpath stroke='%23bbcef9' d='M6 13h1'/%3E%3Cpath stroke='%23b9cffb' d='M7 13h1'/%3E%3Cpath stroke='%23b8cffa' d='M8 13h1'/%3E%3Cpath stroke='%23b6cdfb' d='M9 13h1'/%3E%3Cpath stroke='%23b2cdfb' d='M10 13h1'/%3E%3Cpath stroke='%23b0cbf9' d='M11 13h1'/%3E%3Cpath stroke='%23aec8f7' d='M13 13h1'/%3E%3Cpath stroke='%23b0c5f2' d='M14 13h1'/%3E%3Cpath stroke='%23dbe3f8' d='M1 14h1'/%3E%3Cpath stroke='%23b7c6f1' d='M2 14h1'/%3E%3Cpath stroke='%23b8c9f2' d='M3 14h1m3 0h2'/%3E%3Cpath stroke='%23b2c8f4' d='M11 14h1'/%3E%3Cpath stroke='%23b1c6f3' d='M12 14h1'/%3E%3Cpath stroke='%23b0c4f2' d='M13 14h1'/%3E%3Cpath stroke='%23d9e3f6' d='M14 14h1'/%3E%3Cpath stroke='%23aec0d6' d='M16 14h1'/%3E%3Cpath stroke='%23c3d4e7' d='M0 15h1'/%3E%3Cpath stroke='%23aec4e5' d='M15 15h1'/%3E%3Cpath stroke='%23edf1f3' d='M0 16h1'/%3E%3Cpath stroke='%23aac0e1' d='M1 16h1'/%3E%3Cpath stroke='%2394b1d9' d='M2 16h1'/%3E%3Cpath stroke='%2388a7d8' d='M3 16h1'/%3E%3Cpath stroke='%2383a4d3' d='M4 16h1'/%3E%3Cpath stroke='%237da0d4' d='M5 16h1m4 0h3'/%3E%3Cpath stroke='%237e9fd2' d='M6 16h1'/%3E%3Cpath stroke='%237c9fd3' d='M7 16h3'/%3E%3Cpath stroke='%2382a4d6' d='M13 16h1'/%3E%3Cpath stroke='%2394b0dd' d='M14 16h1'/%3E%3Cpath stroke='%23ecf2f7' d='M15 16h1'/%3E%3C/svg%3E");
}


/* ---------- Shared app chrome (menubar, status bar) ---------- */

/* App windows (IE, Word) lay out their own chrome edge to edge. */
.nx-window .nx-body:has(> .ie),
.nx-window .nx-body:has(> .word) {
  padding: 0;
  overflow: hidden;
  display: flex;
}

.ie,
.word {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.xp-menubar {
  display: flex;
  padding: 1px 2px;
  background: var(--wxp-panel);
  border-bottom: 1px solid #fff;
  flex: none;
  user-select: none;
}

.xp-menubar span {
  padding: 2px 7px;
}

.xp-menubar span:hover {
  background: var(--wxp-select);
  color: #fff;
}

.xp-statusbar {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--wxp-panel);
  border-top: 1px solid var(--wxp-panel-dark);
  flex: none;
  font-size: 11px;
  user-select: none;
}

.xp-statusbar > span {
  padding: 1px 8px;
  border: 1px solid;
  border-color: var(--wxp-panel-dark) #fff #fff var(--wxp-panel-dark);
}

/* ---------- Internet Explorer ---------- */

.ie-toolbar,
.ie-addressbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px;
  background: var(--wxp-panel);
  border-bottom: 1px solid var(--wxp-panel-dark);
  flex: none;
}

/* IE's real toolbar row: icon-and-label buttons (Back, Forward, Stop,
   Refresh, Home, Search, Favorites, History, Mail), from the audit of
   inspiration/Model.png. Explorer's own toolbar (js/explorer.js, S24) is
   visually separate and keeps the plain .ie-btn styling below. */
.iet-bar {
  flex-wrap: wrap;
  gap: 0;
}

.iet-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  font: 11px var(--wxp-ui-font);
  cursor: pointer;
}

.iet-btn img {
  width: 20px;
  height: 20px;
}

.iet-btn:hover:not(:disabled) {
  border-color: var(--wxp-panel-dark);
  background: #fff;
}

.iet-btn:disabled {
  color: var(--wxp-panel-dark);
  cursor: default;
}

.iet-btn:disabled img {
  filter: grayscale(1) opacity(0.5);
}

.iet-caret {
  width: 0;
  height: 0;
  margin-left: 1px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid #333;
}

.iet-sep {
  width: 1px;
  height: 24px;
  margin: 0 4px;
  background: var(--wxp-panel-dark);
  box-shadow: 1px 0 #fff;
}

.ie-addressbar label {
  color: #555;
  padding: 0 4px;
}

.iet-addr-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}

.iet-addr-icon {
  position: absolute;
  left: 4px;
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.ie-addressbar input {
  flex: 1;
  min-width: 0;
  font: 12px var(--wxp-ui-font);
  padding: 2px 4px 2px 24px;
  border: 1px solid #7f9db9;
}

.iet-go {
  padding: 0 2px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.iet-go img {
  display: block;
  width: 22px;
  height: 22px;
}

.ie-zone {
  display: flex;
  align-items: center;
  gap: 3px;
}

.ie-zone img {
  width: 14px;
  height: 14px;
}

/* The page area renders like an unstyled early-2000s web page: IE's own
   defaults, Times at 16px, blue and purple links. */
.ie-view {
  flex: 1;
  overflow: auto;
  padding: 8px 14px 24px;
  background: #fff;
  font: 16px/1.35 var(--wxp-page-font);
  user-select: text;
  /* A reading surface, unlike the chrome around it -- stays smooth. */
  -webkit-font-smoothing: antialiased;
  font-smooth: auto;
}

.ie-view a { color: #0000ee; }
.ie-view a:visited { color: #551a8b; }
.ie-view img { max-width: 100%; }

/* ---------- Page content (docs/*.html) ---------- */

/* The owner's notes to self (a <span class="todo"> in a page or note).
   Loud on purpose, so none ships by accident. The rhizome pages' own layout
   is css/rhizome-page.css. */
.todo {
  background: #fff3a0;
  color: #7a4b00;
}
/* ---------- Word ---------- */

.word-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  background: var(--wxp-panel);
  border-bottom: 1px solid var(--wxp-panel-dark);
  flex: none;
  user-select: none;
}

.word-field {
  padding: 1px 6px;
  background: #fff;
  border: 1px solid #7f9db9;
  min-width: 36px;
}

.word-style { min-width: 90px; }
.word-font { min-width: 130px; }

.word-toolbar b,
.word-toolbar i,
.word-toolbar u {
  width: 20px;
  text-align: center;
  font-family: var(--wxp-page-font);
  font-size: 14px;
}

.word-ruler {
  height: 16px;
  flex: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 11px, #888 11px 12px) bottom / 100% 4px no-repeat,
    #fff;
  border-bottom: 1px solid var(--wxp-panel-dark);
}

.word-canvas {
  flex: 1;
  overflow: auto;
  background: #8c8c8c;
  padding: 20px 0;
}

/* Letter-sized, double-spaced (the assignment counts double-spaced pages). */
.word-page {
  width: 640px;
  min-height: 828px;
  margin: 0 auto;
  padding: 72px 80px;
  background: #fff;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font: 16px/2 var(--wxp-page-font);
  color: #000;
  /* A reading surface, unlike the chrome around it -- stays smooth. */
  -webkit-font-smoothing: antialiased;
  font-smooth: auto;
}

.word-page h2 {
  font-size: 16px;
  margin: 0;
}

.word-page p {
  margin: 0;
}

/* ---------- Lens (js/lens.js) ---------- */

.lens-stack {
  display: grid;
  position: relative;
  cursor: text;
}

.lens-stack > * {
  grid-area: 1 / 1;
  min-width: 0;
  /* Surface and ring must lay out identically; kerning and ligatures across
     the ring's per-character spans would otherwise shift glyphs. */
  font-kerning: none;
  font-variant-ligatures: none;
}

.lens-surface {
  outline: none;
  user-select: text;
}

.lens-on .lens-surface {
  -webkit-mask-image: radial-gradient(circle at var(--lx) var(--ly), transparent var(--r-out), #000 calc(var(--r-out) + 1px));
  mask-image: radial-gradient(circle at var(--lx) var(--ly), transparent var(--r-out), #000 calc(var(--r-out) + 1px));
}

.lens-beneath,
.lens-ring {
  visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.lens-on .lens-beneath,
.lens-on .lens-ring {
  visibility: visible;
}

/* A faint paper tint marks the circle itself. */
.lens-beneath {
  position: relative;
  background: #fffaf0;
  clip-path: circle(var(--r-in) at var(--lx) var(--ly));
}

.lens-beneath > * {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  overflow: hidden; /* lens.js sets a height only on an overlong block */
}

.lens-ring .lc {
  position: relative;
  color: transparent;
}

/* The glitch: a scrambled glyph (data-g, rescrambled by lens.js) with torn
   magenta/cyan ghosts, the look of WWW's Hide/Run menu distortion. */
.lens-ring .lc.on::after {
  content: attr(data-g);
  position: absolute;
  left: 0;
  top: 0;
  color: #000;
  text-shadow: -2px 0 #ff2b6e, 2px 0 #00c8c8;
  animation: lens-jitter 0.11s steps(2, jump-none) infinite;
}

@keyframes lens-jitter {
  0% { transform: translate(0, 0) skewX(0deg); }
  25% { transform: translate(-2px, 1px) skewX(-8deg); }
  50% { transform: translate(1px, -1px) skewX(6deg); }
  75% { transform: translate(-1px, 1px) skewX(-4deg); }
  100% { transform: translate(0, 0) skewX(0deg); }
}

/* ---------- Explorer, folder view, file dialogs, Notepad, picture viewer ---------- */

.nx-window .nx-body:has(> .explorer),
.nx-window .nx-body:has(> .notepad),
.nx-window .nx-body:has(> .imageviewer) {
  padding: 0;
  overflow: hidden;
  display: flex;
}

.explorer,
.notepad,
.imageviewer {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.xp-menubar span.open {
  background: var(--wxp-select);
  color: #fff;
}

.xp-menu-item.checked::before {
  content: "✓";
  position: absolute;
  left: 6px;
}

.xp-key-hint {
  float: right;
  margin-left: 24px;
}

.xp-msgbox-body p {
  white-space: pre-line;
}

/* Explorer's own toolbar row (js/explorer.js, S24): Back, Forward, Up,
   Search, Folders, Views, from the audit of inspiration/Model.png. */
.ext-bar {
  flex-wrap: wrap;
  gap: 0;
}

.ext-btn {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  font: 11px var(--wxp-ui-font);
  cursor: pointer;
}

.ext-btn img {
  width: 20px;
  height: 20px;
}

.ext-btn:hover:not(:disabled) {
  border-color: var(--wxp-panel-dark);
  background: #fff;
}

.ext-btn:disabled {
  color: var(--wxp-panel-dark);
  cursor: default;
}

.ext-btn:disabled img {
  filter: grayscale(1) opacity(0.5);
}

.ext-btn.active {
  border-color: var(--wxp-panel-dark);
  background: #dce6f7;
  box-shadow: inset 1px 1px var(--wxp-panel-dark);
}

.ext-caret {
  width: 0;
  height: 0;
  margin-left: 1px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid #333;
}

.ext-sep {
  width: 1px;
  height: 24px;
  margin: 0 4px;
  background: var(--wxp-panel-dark);
  box-shadow: 1px 0 #fff;
}

/* The Windows flag at the right end of the menu bar. xp-logo.png also
   carries the "xp" wordmark well to its lower right; at this height that
   text shrinks to a few pixels and reads as part of the flag's shadow. */
.ex-flag {
  height: 24px;
  width: auto;
  margin-left: auto;
  margin-right: 4px;
}

.ex-address-icon {
  width: 16px;
  height: 16px;
}

.ex-main {
  flex: 1;
  min-height: 0;
  display: flex;
}

.ex-tasks {
  width: 190px;
  flex: none;
  overflow: auto;
  padding: 10px;
  background: linear-gradient(#7ba2e7, #6375d6);
}

.ex-taskbox {
  margin-bottom: 10px;
  border: 1px solid #7dabf0;
  border-radius: 6px;
  overflow: hidden;
}

.ex-taskbox h3 {
  margin: 0;
  padding: 4px 4px 4px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(to right, #0a51cc, #4d90f5 70%, #8fbcfb);
}

/* The round chevron that collapses/expands a box; state.collapsed
   remembers which ones for the window's session (js/explorer.js). */
.ex-taskbox-toggle {
  flex: none;
  position: relative;
  width: 15px;
  height: 15px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
}

.ex-taskbox-toggle::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 4px;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-bottom: 4px solid #fff;
}

.ex-taskbox.collapsed .ex-taskbox-toggle::before {
  top: 5px;
  border-bottom: none;
  border-top: 4px solid #fff;
}

.ex-taskbox > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
  background: #d6e4fb;
}

.ex-taskbox.collapsed > div {
  display: none;
}

.ex-task {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  color: #215dc6;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.ex-task img {
  width: 16px;
  height: 16px;
  flex: none;
}

.ex-task:hover:not(:disabled) span {
  color: #428eff;
  text-decoration: underline;
}

.ex-task:disabled {
  opacity: 0.5;
  cursor: default;
}

.ex-details {
  margin: 0;
  font-size: 11px;
}

.ex-taskbox .ex-search-input {
  height: 21px;
  padding: 0 3px;
  border: 1px solid #7f9db9;
  font: inherit;
}

.ex-taskbox .ex-search-btn {
  align-self: flex-start;
}

/* FolderView (folder-view.js) */
.fv {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 8px;
  background: #fff;
  outline: none;
  user-select: none;
}

.fv-icons {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px 4px;
}

.fv-icons .fv-item {
  width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 2px;
  text-align: center;
}

.fv-icons .fv-item img {
  width: 32px;
  height: 32px;
}

/* A picture's own contents, in place of its file-type icon. */
.fv-item img.fv-thumb {
  object-fit: cover;
  background: #fff;
  border: 1px solid #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.6);
}

.fv-name {
  padding: 0 2px;
  overflow-wrap: break-word;
}

.fv-item.selected .fv-name {
  background: var(--wxp-select);
  color: #fff;
}

.fv-item.selected img {
  filter: brightness(0.8) sepia(1) hue-rotate(180deg) saturate(3);
}

.fv-details {
  padding: 0;
}

.fv-details .fv-head,
.fv-details .fv-item {
  display: grid;
  grid-template-columns: 16px minmax(140px, 2fr) 1.2fr 1.3fr;
  align-items: center;
  gap: 6px;
  padding: 1px 6px;
}

.fv-details .fv-head {
  position: sticky;
  top: 0;
  background: #ebeadb;
  border-bottom: 1px solid #d6d2c2;
}

.fv-details .fv-head span:first-child {
  grid-column: span 2;
}

.fv-details .fv-item img {
  width: 16px;
  height: 16px;
}

.fv-type,
.fv-date {
  color: #444;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fv-empty {
  margin: 8px;
  color: #888;
}

.fv-rename {
  width: 84px;
  font: 11px var(--wxp-ui-font);
  text-align: center;
  border: 1px solid #000;
}

/* Open / Save As (file-dialog.js) */
.xp-filedialog {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fd-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fd-top select {
  flex: 1;
  font: 11px var(--wxp-ui-font);
}

.fd-top button {
  padding: 0;
  border: none;
  background: none;
}

.fd-top button img {
  width: 22px;
  height: 22px;
}

.fd-middle {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 6px;
}

.fd-places {
  width: 84px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
  background: #7089c6;
  border: 1px solid #7f9db9;
}

.fd-places button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: none;
  background: none;
  color: #fff;
  font-size: 11px;
}

.fd-places img {
  width: 32px;
  height: 32px;
}

.fd-middle .fv {
  border: 1px solid #7f9db9;
}

.fd-fields {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px 8px;
}

.fd-fields input,
.fd-fields select {
  font: 11px var(--wxp-ui-font);
  border: 1px solid #7f9db9;
  padding: 2px;
}

/* Notepad */
.notepad textarea {
  flex: 1;
  resize: none;
  border: none;
  border-top: 1px solid var(--wxp-panel-dark);
  outline: none;
  padding: 2px 4px;
  font: 13px "Lucida Console", Monaco, monospace;
}

/* Windows Picture and Fax Viewer */
.imageviewer {
  background: #fff;
  outline: none;
}

.iv-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 8px;
}

.iv-img {
  max-width: 100%;
  max-height: 100%;
}

.imageviewer.actual-size .iv-stage {
  display: block;
}

.imageviewer.actual-size .iv-img {
  max-width: none;
  max-height: none;
}

.iv-toolbar {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 4px;
  background: linear-gradient(#f5f8fd, #d9e3f5);
  border-top: 1px solid #a9b8d6;
}

.iv-toolbar button {
  min-width: 28px;
  height: 26px;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  font-size: 16px;
  color: #215dc6;
}

.iv-toolbar button:hover {
  border-color: #a9b8d6;
  background: #fff;
}

.iv-toolbar img {
  width: 20px;
  height: 20px;
}

.iv-sep {
  width: 1px;
  margin: 2px 4px;
  background: #a9b8d6;
}

/* ---------- Embedded programs, Minesweeper, Media Player ---------- */

.nx-window .nx-body:has(> .xp-embed-host),
.nx-window .nx-body:has(> .minesweeper),
.nx-window .nx-body:has(> .wmp) {
  padding: 0;
  overflow: hidden;
  display: flex;
}

.xp-embed-host {
  flex: 1;
  display: flex;
  background: #c0c0c0;
}

.xp-embed {
  flex: 1;
  border: none;
  background: #c0c0c0;
}

/* A window drag must not get swallowed by a frame the pointer crosses. */
body.nx-dragging iframe {
  pointer-events: none;
}

/* Minesweeper: the classic raised/sunken 3D bevels. */
.minesweeper {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #c0c0c0;
  outline: none;
}

.ms-frame {
  margin: 0 3px 3px;
  padding: 6px;
  border: 3px solid;
  border-color: #fff #808080 #808080 #fff;
}

.ms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  padding: 4px 5px;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
}

.ms-led {
  min-width: 41px;
  padding: 0 2px;
  background: #000;
  color: #f00;
  font: bold 22px/25px "Courier New", monospace;
  letter-spacing: 1px;
  text-align: right;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
}

.ms-face {
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 15px;
  line-height: 20px;
  background: #c0c0c0;
  border: 3px solid;
  border-color: #fff #808080 #808080 #fff;
  cursor: default;
}

.ms-face:active {
  border-color: #808080 #fff #fff #808080;
}

.ms-board {
  display: grid;
  border: 3px solid;
  border-color: #808080 #fff #fff #808080;
  user-select: none;
}

.ms-cell {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: bold 12px Tahoma, sans-serif;
  background: #c0c0c0;
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
}

.ms-cell.open {
  border: none;
  border-right: 1px solid #808080;
  border-bottom: 1px solid #808080;
  font-size: 13px;
}

.ms-cell.mine,
.ms-cell.wrong {
  font-size: 10px;
}

.ms-cell.exploded {
  background: #f00;
}

.ms-cell.wrong {
  background: repeating-linear-gradient(45deg, transparent 0 6px, rgba(255, 0, 0, 0.5) 6px 8px), #c0c0c0;
}

/* Windows Media Player */
.wmp {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(#3d5d95, #1b2e54);
  color: #fff;
}

.wmp-body {
  flex: 1;
  min-height: 0;
  display: flex;
}

.wmp-nav {
  width: 118px;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  font-size: 11px;
  background: linear-gradient(to right, #2a4a86, #3a64ad);
}

.wmp-nav span {
  padding: 5px 10px;
  color: #d8e4ff;
}

.wmp-nav span.active {
  background: #6d93d9;
  color: #fff;
  font-weight: bold;
}

.wmp-now {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 6px;
  background: #000;
  border: 1px solid #6d93d9;
}

.wmp-vis {
  flex: 1;
  width: 100%;
  min-height: 0;
}

.wmp-title {
  padding: 4px 8px;
  font-size: 11px;
  color: #9cff5c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wmp-list {
  width: 190px;
  flex: none;
  margin: 6px 6px 6px 0;
  padding: 4px 4px 4px 24px;
  overflow: auto;
  font-size: 11px;
  background: #0e1a33;
  border: 1px solid #6d93d9;
}

.wmp-list li {
  padding: 2px 0;
  cursor: default;
}

.wmp-list li.playing {
  color: #9cff5c;
  font-weight: bold;
}

.wmp-list li.selected {
  background: var(--wxp-select);
  color: #fff;
}

.wmp-controls {
  padding: 4px 10px 8px;
  background: linear-gradient(#c9d6ea, #8ea6cc);
  color: #000;
}

.wmp-seek {
  width: 100%;
}

.wmp-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wmp-buttons button {
  width: 30px;
  height: 30px;
  border: 1px solid #3a5a95;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #b8c8e6 70%);
  font-size: 12px;
  cursor: default;
}

.wmp-buttons .wmp-play {
  width: 38px;
  height: 38px;
  font-size: 14px;
}

.wmp-time {
  margin-left: auto;
  font-size: 11px;
}

.wmp-volume {
  width: 90px;
}

/* ---------- Run ---------- */

.xp-run {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
}

.xp-run .run-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.xp-run .run-top img {
  width: 32px;
  height: 32px;
  flex: none;
}

.xp-run .run-top p {
  margin: 2px 0 0;
}

.run-fields {
  display: flex;
  align-items: center;
  gap: 8px;
}

.xp-run .xp-dialog-buttons {
  padding-top: 2px;
}

.run-fields input {
  flex: 1;
  height: 21px;
  padding: 0 3px;
  border: 1px solid #7f9db9;
  font: inherit;
}

/* ---------- Sign-in (js/signin.js): the Family Rhizome's four-window toll,
   the fourth being the captcha's own window below ---------- */

.signin-field {
  padding: 12px 14px;
}

.signin-field label {
  display: block;
  margin-bottom: 4px;
}

.signin-field input {
  width: 100%;
  height: 21px;
  padding: 0 4px;
  font: 11px var(--wxp-ui-font);
  border: 1px solid #7f9db9;
}

.signin-rules {
  margin: 6px 0 0;
  color: #555;
  font: italic 11px var(--wxp-ui-font);
}

.signin-prompt {
  margin: 0;
  padding: 16px 14px;
}

/* ---------- Boot screens (js/boot-screen.js), from win32.run's
   src/routes/boot_manager.svelte and xp/starting.svelte and welcome.svelte
   (MIT) ---------- */

.xp-bios {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  background: #000;
  color: #c0c0c0;
  font: 16px "Courier New", monospace;
  padding: 48px;
  cursor: none;
}

.xp-bios-option {
  margin: 0;
  padding: 2px 8px;
  background: #c0c0c0;
  color: #000;
}

.xp-bios-hint {
  margin: 0;
}

.xp-boot-loading {
  background: #000;
}

.xp-boot-loading-inner img {
  display: block;
  width: 400px;
  margin: 0 auto;
}

/* win32.run's .xp-loader: a track holding three blocks that all slide the
   same distance in lockstep (no per-block delay in the source). */
.xp-loader {
  width: 150px;
  height: 20px;
  margin: 150px auto 0;
  padding: 2px 1px;
  border: 2px solid #b2b2b2;
  border-radius: 7px;
  overflow: hidden;
  font-size: 0;
}

.xp-loader div {
  display: inline-block;
  width: 9px;
  height: 100%;
  margin-right: 2px;
  background: linear-gradient(to bottom, #2838c7 0%, #5979ef 17%, #869ef3 32%, #869ef3 45%, #5979ef 59%, #2838c7 100%);
  animation: xp-loader-slide 2s linear infinite;
}

@keyframes xp-loader-slide {
  0% {
    transform: translateX(-30px);
  }
  100% {
    transform: translateX(150px);
  }
}

.xp-boot-copyright {
  position: absolute;
  left: 32px;
  bottom: 32px;
  margin: 0;
  font: 16px var(--wxp-ui-font);
}

.xp-boot-mslogo {
  position: absolute;
  right: 32px;
  bottom: 32px;
  width: 120px;
}

.xp-boot-welcome {
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  background: #5a7edc;
  font-family: var(--wxp-title-font);
}

.xp-welcome-bar-top {
  flex: none;
  height: 70px;
  background: #00309c;
}

.xp-welcome-edge-top {
  flex: none;
  height: 2px;
  background: linear-gradient(45deg, #466dcd, #c7ddff, #b0c9f7, #5a7edc);
}

.xp-welcome-middle {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 5% 5%, #91b1ef 0, #7698e6 6%, #5a7edc 12%);
}

.xp-welcome-middle span {
  position: absolute;
  top: 40%;
  left: 50%;
  font: italic bold 42px var(--wxp-title-font);
  color: #f8fafc;
}

.xp-welcome-edge-bottom {
  flex: none;
  height: 2px;
  background: linear-gradient(45deg, #003399, #f99736, #c2814d, #00309c);
}

.xp-welcome-bar-bottom {
  flex: none;
  height: 70px;
  background: linear-gradient(90deg, #3833ac, #00309c);
}

/* ---------- Captcha: copied verbatim from WWW web/style.css (with js/captcha.js; see merge.md) ---------- */

/* ---- The "contains: human" captcha (js/captcha.js) --------------------
   This is the one part of the site allowed to look like 2015 Google, so the
   block is self-contained: it sets its own font, colour and box model and
   inherits nothing from the NeXT chrome around it. The site's titlebar wraps
   it; everything below the titlebar is Google's.
   Always light, regardless of the site theme -- the reference is a fixed
   light-mode widget. */

/* Let the widget sit flush to the window edge (the .nx-body default is
   14px/18px of padding and a right-flipped scrollbar). */
.nx-window .nx-body:has(> .captcha) {
  padding: 0;
  overflow: hidden;
  direction: ltr;
}

.captcha,
.captcha * {
  box-sizing: border-box;
}

.captcha {
  --captcha-blue: #4a90e2;
  --captcha-verify: #1c7bd6;
  font-family: "Roboto", "Helvetica Neue", "Arial", sans-serif;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  color: #000;
  user-select: none;
  -webkit-user-select: none;
}

.captcha-error {
  padding: 16px;
  font-size: 13px;
  line-height: 1.5;
}

.captcha-header {
  flex: none;
  background: var(--captcha-blue);
  color: #fff;
  padding: 15px 15px 16px;
}

.captcha-header-prompt {
  font-size: 25px;
  font-weight: 500;
  line-height: 1.15;
}

.captcha-body {
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 1;
  background: #c9c9c9;
  overflow: hidden;
}

/* Round 3's box is the ENGRAVING's aspect ratio (1400/1169), not the
   reference screenshot's portrait 4:5. That was the original spec and it was
   wrong: the Flammarion is landscape, so a 4:5 box cover-cropped 33% of its
   width away -- the left border column and the sun's face, both of which the
   coloring mechanic exists to reveal. Matching the image means the cover-fit
   is a no-op and the whole picture is always on screen.

   Consequence, accepted deliberately: round 3 is now WIDER than it is tall,
   where a real reCAPTCHA is squarish. The widget reads slightly off-brand for
   one round. Showing the entire picture is worth more than the imitation here,
   because this picture is the point of the round.

   Keep this in step with `pleroma.width/height` in captcha-images.json. */
.captcha-body-round3 {
  aspect-ratio: 1400 / 1169;
}

.captcha-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  background: #fff;
}

.captcha-cell {
  position: relative;
  padding: 0;
  border: 0;
  margin: 0;
  background: #c9c9c9;
  overflow: hidden;
  cursor: pointer;
}

.captcha-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.18s ease;
}

/* The real widget shrinks a tile slightly as the check fades in. */
.captcha-cell.is-selected img {
  transform: scale(0.86);
}

.captcha-check {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1a73e8;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.captcha-check::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 5px;
  width: 6px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.captcha-cell.is-selected .captcha-check {
  opacity: 1;
  transform: scale(1);
}

.captcha-canvas-wrap {
  position: absolute;
  inset: 0;
}

.captcha-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  touch-action: manipulation;
}

.captcha-footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  background: #fff;
  border-top: 1px solid #e0e0e0;
}

.captcha-tools {
  display: flex;
  gap: 2px;
}

/* reload, audio and info. They answer in WXP and are inert in WWW's copy;
   see js/captcha.js and merge.md. */
.captcha-tool {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #9aa0a6;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.captcha-tool:hover {
  color: #5f6368;
}

/* The small print, shown by the Help button. No `display` here: it has to
   stay hidden by the `hidden` attribute alone. */
.captcha-about {
  padding: 0 12px 10px;
  font-size: 11px;
  color: #9aa0a6;
  text-align: right;
}

.captcha-tool svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.captcha-verify {
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: #fff;
  background: var(--captcha-verify);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  padding: 9px 17px;
  cursor: pointer;
}

.captcha-verify:hover {
  background: #1a6fc2;
}