/*
 * Witten 98 shell
 *
 * Visual baseline: https://rahul.io/
 * Classic control primitives: https://jdan.github.io/98.css/
 *
 * 98.css portions are MIT licensed; locally bundled font attribution is in
 * THIRD_PARTY_NOTICES.md. This stylesheet contains one shell only.
 */

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("/vendor/98.css-0.1.21/fonts/converted/ms_sans_serif.woff2?v=0.1.21") format("woff2"),
    url("/vendor/98.css-0.1.21/fonts/converted/ms_sans_serif.woff?v=0.1.21") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Pixelated MS Sans Serif";
  src: url("/vendor/98.css-0.1.21/fonts/converted/ms_sans_serif_bold.woff2?v=0.1.21") format("woff2"),
    url("/vendor/98.css-0.1.21/fonts/converted/ms_sans_serif_bold.woff?v=0.1.21") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --desktop-a: #008080;
  --desktop-b: #008080;
  --desktop-c: #008080;
  --desktop-glow: transparent;
  --desktop-line: transparent;
  --window-bg: #c0c0c0;
  --window-surface: #c0c0c0;
  --window-plate: #c0c0c0;
  --window-light: #ffffff;
  --window-face: #dfdfdf;
  --window-shadow: #808080;
  --window-shadow-deep: #424242;
  --window-dark: #0a0a0a;
  --title-active-a: #08216b;
  --title-active-b: #a5cef7;
  --title-inactive-a: #808080;
  --title-inactive-b: #b5b5b5;
  --selection: #000080;
  --selection-text: #ffffff;
  --text: #000000;
  --text-soft: #222222;
  --online: #008000;
  --offline: #8b4513;
  --taskbar-height: 27px;
  --font-ui: "Pixelated MS Sans Serif", "MS Sans Serif", Arial, sans-serif;
  --font-mono: "Lucida Console", "Courier New", monospace;
  --classic-raised: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff,
    inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --classic-sunken: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a,
    inset -2px -2px #dfdfdf, inset 2px 2px #808080;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

body,
button,
input,
textarea,
select,
option {
  font-family: var(--font-ui);
  -webkit-font-smoothing: none;
}

body {
  margin: 0;
  color: var(--text);
  font-size: 11px;
  line-height: 1.25;
  background: #008080;
}

body[data-wallpaper="teal"] {
  background: #008080;
}

body[data-wallpaper="clouds"] {
  background:
    radial-gradient(ellipse at 18% 16%, #ffffff 0 4%, #dbeaf2 4.4% 8%, transparent 8.5%),
    radial-gradient(ellipse at 72% 24%, #ffffff 0 5%, #dbeaf2 5.4% 9%, transparent 9.5%),
    linear-gradient(180deg, #3f8fbd 0, #95c0d6 72%, #d5e4eb 100%);
}

body[data-wallpaper="night"] {
  background:
    radial-gradient(circle at 8px 12px, #ffffff 0 1px, transparent 1.4px),
    radial-gradient(circle at 38px 44px, #8797c8 0 1px, transparent 1.4px),
    #000040;
  background-size: 58px 58px, 72px 72px, auto;
}

code,
time {
  font-family: var(--font-mono);
}

/* Desktop */

.desktop {
  min-height: 100dvh;
  padding: 0 0 var(--taskbar-height);
  overflow: hidden;
  animation: none;
}

.desktop::before,
.desktop-grain,
.desktop-atmosphere {
  display: none;
}

.workspace {
  position: relative;
  width: 100%;
  height: calc(100dvh - var(--taskbar-height));
  margin: 0;
  overflow: hidden;
}

.desktop-icons,
.desktop-icons.is-arranged {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: calc(100dvh - var(--taskbar-height));
  min-height: 0;
}

.desktop-icon {
  width: 94px;
  min-height: 64px;
  padding: 4px 8px;
  gap: 1px;
  color: #ffffff;
  text-shadow: 1px 1px #000000;
  background: transparent;
  border: 0;
  border-radius: 0;
  transform: none;
  transition: none;
}

.desktop-icon-btn {
  padding: 4px 8px;
}

.desktop-icon-glyph {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.42));
}

.desktop-icon-label {
  max-width: 78px;
  padding: 1px 2px;
  font-size: 11px;
  line-height: 12px;
  font-weight: 400;
  text-align: center;
}

.desktop-icon:focus,
.desktop-icon:focus-visible,
.desktop-icon.is-selected,
.desktop-icons.is-arranged .desktop-icon.is-dragging {
  outline: 0;
  color: #ffffff;
  background: transparent;
  filter: none;
}

.desktop-icon:focus .desktop-icon-label,
.desktop-icon:focus-visible .desktop-icon-label,
.desktop-icon.is-selected .desktop-icon-label,
.desktop-icons.is-arranged .desktop-icon.is-dragging .desktop-icon-label {
  color: #ffffff;
  background: #000080;
  text-shadow: none;
  outline: 1px dotted #ffffff;
  outline-offset: -1px;
}

.desktop-icon:focus .desktop-icon-glyph,
.desktop-icon:focus-visible .desktop-icon-glyph,
.desktop-icon.is-selected .desktop-icon-glyph,
.desktop-icons.is-arranged .desktop-icon.is-dragging .desktop-icon-glyph {
  filter: grayscale(0.25) drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.42));
}

@media (hover: hover) {
  .desktop-icon:hover {
    color: #ffffff;
    background: transparent;
    border-color: transparent;
    transform: none;
  }

  .desktop-icon:hover .desktop-icon-glyph {
    filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.42));
  }
}

/* Window frame and caption */

.win-window {
  min-width: 220px;
  min-height: 170px;
  padding: 2px;
  overflow: hidden;
  color: #000000;
  background: #c0c0c0;
  border: 1px solid #ffffff;
  border-right-color: #848484;
  border-bottom-color: #848484;
  border-radius: 0;
  box-shadow: 1px 1px 0 #424242;
  animation: none;
  transition: none;
}

.win-window.is-focused {
  box-shadow: 1px 1px 0 #424242;
}

.titlebar {
  position: relative;
  height: 18px;
  min-height: 18px;
  padding: 1px 2px;
  gap: 3px;
  color: #ffffff;
  background: #808080;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.win-window.is-focused .titlebar,
.message-box .titlebar {
  background: linear-gradient(90deg, #08216b 0%, #164b9b 45%, #a5cef7 100%);
}

.win-window:not(.is-focused) .titlebar,
.titlebar-secondary {
  color: #dfdfdf;
  background: #808080;
}

.titlebar::after {
  display: none;
}

.titlebar::before {
  content: "";
  position: relative;
  z-index: 1;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(90deg, #d92f2f 0 50%, #45a53d 50%) top / 100% 50% no-repeat,
    linear-gradient(90deg, #f3d03d 0 50%, #2868c7 50%) bottom / 100% 50% no-repeat;
  border: 1px solid #ffffff;
  border-right-color: #424242;
  border-bottom-color: #424242;
  box-sizing: border-box;
}

.win-window[data-window="service"] .titlebar::before,
.win-window[data-window="files"] .titlebar::before {
  background:
    linear-gradient(#e8bd56, #c88d20) 2px 5px / 10px 7px no-repeat,
    linear-gradient(#ffe083, #d8a438) 3px 2px / 7px 4px no-repeat,
    #c0c0c0;
}

.win-window[data-window="notepad"] .titlebar::before,
.win-window[data-window="notes"] .titlebar::before {
  background:
    repeating-linear-gradient(180deg, #ffffff 0 2px, #5f83c2 2px 3px) 3px 2px / 8px 10px no-repeat,
    #c0c0c0;
}

.win-window[data-window="monitor"] .titlebar::before,
.win-window[data-window="control"] .titlebar::before,
.win-window[data-window="properties"] .titlebar::before {
  background:
    linear-gradient(#174f94, #0b2c64) 2px 2px / 10px 7px no-repeat,
    linear-gradient(#424242, #424242) 5px 10px / 4px 2px no-repeat,
    #c0c0c0;
}

.titlebar-text {
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 11px;
  line-height: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-shadow: none;
}

.titlebar-controls {
  align-self: center;
  gap: 2px;
  height: 16px;
}

.control-btn {
  position: relative;
  display: block;
  flex: 0 0 16px;
  width: 16px;
  min-width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  color: transparent;
  font-size: 0;
  line-height: 0;
  background: #c0c0c0;
  border: 1px solid #ffffff;
  border-right-color: #424242;
  border-bottom-color: #424242;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.titlebar-controls .control-btn:last-child {
  margin-left: 1px;
}

.control-btn:active {
  padding: 1px 0 0 1px;
  background: #c0c0c0;
  border-color: #424242 #ffffff #ffffff #424242;
  box-shadow: none;
  transform: none;
}

.control-btn::before,
.control-btn::after {
  content: "";
  position: absolute;
  display: block;
  pointer-events: none;
}

.control-btn[data-window-action="minimize"]::before {
  left: 3px;
  bottom: 3px;
  width: 7px;
  height: 2px;
  background: #000000;
}

.control-btn[data-window-action="maximize"]::before {
  left: 3px;
  top: 2px;
  width: 8px;
  height: 8px;
  border: 1px solid #000000;
  border-top-width: 2px;
}

.control-btn[data-window-action="close"]::before,
.control-btn[data-window-action="close"]::after {
  left: 3px;
  top: 6px;
  width: 8px;
  height: 2px;
  background: #000000;
  transform: rotate(45deg);
}

.control-btn[data-window-action="close"]::after {
  transform: rotate(-45deg);
}

.control-btn:focus-visible {
  outline: 1px dotted #000000;
  outline-offset: 1px;
}

.window-outline {
  border: 2px dotted #ffffff;
  outline: 1px dotted #000000;
  outline-offset: -3px;
  background: transparent;
  box-shadow: none;
}

.window-outline-title {
  padding: 1px 3px;
  color: #ffffff;
  font-size: 11px;
  background: #000080;
}

/* Window sizing: compact desktop applications, not dashboard slabs. */

.service-window {
  top: 54px;
  left: calc(50% - 380px);
  width: min(760px, calc(100% - 204px));
  min-width: 480px;
  min-height: 340px;
  height: min(540px, calc(100% - 82px));
  grid-template-rows: 18px 20px auto auto minmax(0, 1fr) 22px;
}

.monitor-window {
  top: 38px;
  right: 38px;
  width: 320px;
  min-width: 250px;
  height: 300px;
}

.info-window {
  top: 62px;
  right: 52px;
  width: 320px;
  height: 260px;
}

.notepad-window {
  top: 74px;
  right: 72px;
  width: min(520px, calc(100% - 180px));
  min-width: 340px;
  height: min(380px, calc(100% - 110px));
  grid-template-rows: 18px 20px auto minmax(0, 1fr);
}

.run-window {
  top: 112px;
  left: calc(50% - 205px);
  width: 410px;
  min-width: 320px;
  height: 190px;
  grid-template-rows: 18px 20px minmax(0, 1fr) auto;
}

.control-window {
  top: 86px;
  left: calc(50% - 220px);
  width: 440px;
  min-width: 360px;
  height: 330px;
  grid-template-rows: 18px 20px minmax(0, 1fr) 22px;
}

.properties-window {
  top: 72px;
  left: calc(50% - 260px);
  width: 520px;
  min-width: 400px;
  height: 390px;
  grid-template-rows: 18px 20px minmax(0, 1fr) auto;
}

.quake-window,
.gamecenter-window,
.gba-window,
.nzportable-window,
.tekken3-window,
.sauerbraten-window,
.pinball-window,
.claw-window,
.webwars-window,
.minesweeper-window,
.prince-window,
.solitaire-window,
.files-window,
.speedtest-window,
.weather-window,
.market-window {
  border-radius: 0;
}

/* Menus, toolbar and status bars */

.window-menubar {
  min-height: 20px;
  height: 20px;
  gap: 0;
  padding: 1px 4px;
  color: #000000;
  font-size: 11px;
  line-height: 16px;
  background: #c0c0c0;
  border: 0;
  border-bottom: 1px solid #808080;
  box-shadow: inset 0 -1px #ffffff;
}

.window-menu-item {
  padding: 1px 7px;
}

.window-menu-item:hover {
  color: #ffffff;
  background: #000080;
}

.window-toolbar,
.gba-toolbar,
.quake-toolbar,
.tekken3-toolbar,
.sauerbraten-toolbar,
.pinball-toolbar,
.claw-toolbar,
.webwars-toolbar,
.nzportable-toolbar,
.prince-toolbar,
.solitaire-toolbar,
.files-toolbar,
.speedtest-toolbar,
.weather-toolbar,
.market-toolbar {
  min-height: 29px;
  padding: 2px 3px;
  gap: 4px;
  color: #000000;
  background: #c0c0c0;
  border: 0;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #808080;
  box-shadow: none;
}

.window-toolbar {
  flex-wrap: nowrap;
}

.address-line,
.toolbar-search {
  gap: 3px;
}

.address-label {
  color: #000000;
  font-size: 11px;
  font-weight: 400;
}

.address-line code,
.toolbar-search-input,
.run-window-input,
.notepad-editor,
input[type="text"],
input[type="search"],
textarea,
select {
  min-height: 20px;
  padding: 2px 4px;
  color: #000000;
  font-size: 11px;
  background: #ffffff;
  border: 0;
  border-radius: 0;
  box-shadow: var(--classic-sunken);
}

.address-line code {
  line-height: 16px;
}

.toolbar-search {
  min-width: 150px;
}

.toolbar-actions,
.app-toolbar-meta {
  gap: 3px;
}

.app-toolbar-badge,
.app-toolbar-code {
  padding: 1px 4px;
  color: #000000;
  font-size: 10px;
  font-weight: 400;
  background: #c0c0c0;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  border-radius: 0;
}

.market-live-badge {
  font-size: 11px;
  line-height: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.win-btn,
.properties-tab,
.control-item,
.directory-link {
  box-sizing: border-box;
  min-width: 75px;
  min-height: 23px;
  padding: 0 12px;
  color: #000000;
  font-size: 11px;
  font-weight: 400;
  line-height: 21px;
  text-align: center;
  background: #c0c0c0;
  border: 0;
  border-radius: 0;
  box-shadow: var(--classic-raised);
  filter: none;
  transform: none;
}

.win-btn:active,
.properties-tab:active,
.control-item:active,
.directory-link:active {
  padding: 1px 11px 0 13px;
  background: #c0c0c0;
  box-shadow: var(--classic-sunken);
  transform: none;
}

.win-btn:focus-visible,
.properties-tab:focus-visible,
.control-item:focus-visible,
.directory-link:focus-visible {
  outline: 1px dotted #000000;
  outline-offset: -4px;
}

.win-btn:disabled,
.control-item:disabled {
  color: #808080;
  text-shadow: 1px 1px #ffffff;
  opacity: 1;
}

.status-message {
  min-height: 20px;
  margin: 0;
  padding: 3px 5px;
  color: #000000;
  font-size: 11px;
  background: #ffffe1;
  border: 0;
  border-bottom: 1px solid #808080;
}

.status-message.is-ok {
  color: #008000;
  background: #f0fff0;
}

.status-message.is-error {
  color: #800000;
  background: #fff0f0;
}

.window-statusbar {
  min-height: 22px;
  gap: 2px;
  padding: 2px;
  background: #c0c0c0;
  border: 0;
  border-top: 1px solid #ffffff;
}

.statusbar-field {
  min-height: 17px;
  padding: 2px 3px;
  color: #000000;
  font-size: 10px;
  line-height: 13px;
  background: #c0c0c0;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}

.resize-grip {
  filter: none;
}

/* Service Explorer content */

.window-body {
  min-height: 0;
  padding: 2px;
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 2px;
  background: #c0c0c0;
}

.service-window.is-compact .window-body {
  grid-template-columns: minmax(190px, 220px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.left-column,
.right-column {
  min-height: 0;
  color: #000000;
  background: #ffffff;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}

.left-column {
  gap: 0;
  align-content: start;
}

.right-column {
  grid-template-rows: auto auto minmax(0, 1fr);
  padding: 4px;
}

.panel-block,
.panel-block-hero,
.stat-tile,
.desktop-mini-card,
.service-pill,
.directory-card,
.empty-inline,
.empty-block {
  color: #000000;
  background: #ffffff;
  border-radius: 0;
  box-shadow: none;
  animation: none;
  transition: none;
  transform: none;
}

.panel-block {
  padding: 6px;
  border: 0;
  border-bottom: 1px solid #c0c0c0;
}

.panel-block-hero {
  background: linear-gradient(135deg, #ffffff 0%, #ffffff 58%, #e7f1fa 100%);
}

.panel-block h1,
.panel-block h2 {
  padding-bottom: 2px;
  font-size: 12px;
  border-bottom: 1px solid #808080;
}

.shell-kicker,
.desktop-status-kicker {
  color: #245b83;
  font-size: 10px;
  letter-spacing: 1px;
}

.intro-copy,
.list-subcopy,
.gamecenter-copy {
  color: #222222;
  font-size: 10px;
}

.shell-health-track,
.desktop-health-track {
  height: 10px;
  padding: 1px;
  background: #ffffff;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}

.shell-health-bar,
.desktop-health-bar {
  background: #008000;
}

.shell-health-meta,
.desktop-health-copy {
  font-size: 10px;
}

.stats-grid,
.desktop-mini-grid,
.gamecenter-stat-grid {
  gap: 2px;
}

.stat-tile,
.desktop-mini-card {
  min-height: 38px;
  padding: 3px;
  text-align: center;
  border: 1px solid #c0c0c0;
}

.stat-tile p,
.desktop-mini-card span {
  color: #333333;
  font-size: 9px;
}

.stat-tile strong,
.desktop-mini-card strong {
  margin-top: 1px;
  font-size: 14px;
}

.list-head {
  min-height: 18px;
  margin: 0;
  padding: 2px 3px;
  color: #333333;
  font-size: 10px;
  letter-spacing: 0;
  background: #c0c0c0;
  border: 0;
  border-bottom: 1px solid #808080;
}

.list-subcopy {
  margin: 0;
  padding: 3px;
  border-bottom: 1px solid #dfdfdf;
}

.featured-grid {
  gap: 0;
}

.service-pill {
  min-height: 22px;
  padding: 3px 4px 3px 8px;
  border: 0;
  border-bottom: 1px dotted #c0c0c0;
}

.service-pill::before,
.directory-card::before {
  width: 3px;
}

.service-pill-domain,
.directory-domain {
  font-size: 11px;
  font-weight: 700;
}

.service-pill-state,
.directory-state {
  font-size: 9px;
}

.all-services {
  min-height: 0;
  padding: 0;
  gap: 0;
  color: #000000;
  background: #ffffff;
  border: 0;
  box-shadow: var(--classic-sunken);
}

.directory-card {
  min-height: 28px;
  padding: 3px 4px 3px 8px;
  background: #ffffff;
  border: 0;
  border-bottom: 1px solid #eeeeee;
}

.directory-card.is-enabled,
.directory-card.is-disabled,
.directory-card.is-problem,
.directory-card.is-pending,
.service-pill.is-enabled,
.service-pill.is-disabled,
.service-pill.is-problem,
.service-pill.is-pending {
  background: #ffffff;
}

.service-pill:hover,
.directory-card:hover {
  color: #ffffff;
  background: #000080;
  transform: none;
}

.service-pill:hover .service-pill-state,
.directory-card:hover .directory-state {
  color: #ffffff;
}

.directory-state {
  margin-top: 1px;
}

.directory-link {
  min-width: 64px;
  min-height: 21px;
  padding: 0 8px;
  font-size: 10px;
  line-height: 19px;
}

.directory-card:hover .directory-link {
  color: #000000;
  background: #c0c0c0;
}

.empty-inline,
.empty-block {
  margin: 0;
  padding: 5px;
  font-size: 11px;
  border: 0;
}

/* Other application interiors */

.monitor-window-body,
.note-body,
.notepad-body,
.run-window-body,
.control-window-body,
.properties-window-body,
.gamecenter-body {
  color: #000000;
  background: #c0c0c0;
}

.monitor-window-body {
  padding: 6px;
}

.desktop-status-head,
.desktop-health,
.desktop-mini-grid,
.desktop-status-actions {
  margin: 0 0 6px;
}

.desktop-status-badge {
  padding: 1px 4px;
  color: #ffffff;
  font-size: 9px;
  background: #000080;
  border: 0;
  border-radius: 0;
}

.desktop-status-actions {
  gap: 4px;
}

.note-body {
  padding: 5px;
  gap: 4px;
}

.note-body p {
  padding: 4px;
  background: #ffffff;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}

.notepad-body {
  padding: 2px;
}

.notepad-editor {
  height: 100%;
  resize: none;
}

.run-window-body {
  padding: 10px 12px 5px;
}

.run-window-icon {
  border-radius: 0;
}

.run-window-label {
  font-size: 11px;
}

.control-window-body {
  padding: 8px;
  gap: 6px;
}

.control-item {
  min-width: 0;
  min-height: 72px;
  padding: 6px;
  line-height: 1.2;
}

.control-item:hover {
  color: #ffffff;
  background: #000080;
}

.control-item-icon {
  border-radius: 0;
}

.properties-window-body {
  padding: 8px 8px 4px;
  gap: 0;
}

.properties-tabs {
  gap: 2px;
}

.properties-tab {
  min-height: 22px;
  padding: 0 10px;
  line-height: 20px;
  box-shadow:
    inset -1px 0 #0a0a0a,
    inset 1px 1px #ffffff,
    inset -2px 0 #808080,
    inset 2px 2px #dfdfdf;
}

.properties-tab.is-active {
  position: relative;
  z-index: 1;
  top: 1px;
  background: #c0c0c0;
  border: 0;
  box-shadow:
    inset -1px 0 #0a0a0a,
    inset 1px 1px #ffffff,
    inset -2px 0 #808080,
    inset 2px 2px #dfdfdf;
  transform: none;
}

.properties-panels {
  padding: 8px;
  background: #c0c0c0;
  border: 0;
  box-shadow: var(--classic-raised);
}

.properties-choice {
  background: #c0c0c0;
  border-radius: 0;
}

.gamecenter-body {
  padding: 4px;
  gap: 4px;
}

.gamecenter-summary,
.gamecenter-list {
  color: #000000;
  background: #ffffff;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}

.gamecenter-summary {
  padding: 6px;
}

.gamecenter-list {
  padding: 2px;
}

.gamecenter-entry,
.gamecenter-game {
  border-radius: 0;
  box-shadow: none;
}

/* Native-looking classic form controls */

input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  position: relative;
  flex: 0 0 13px;
  width: 13px;
  min-width: 13px;
  height: 13px;
  min-height: 13px;
  margin: 0;
  padding: 0;
  color: #000000;
  background: #ffffff;
  vertical-align: -2px;
}

input[type="checkbox"] {
  border: 0;
  border-radius: 0;
  box-shadow: var(--classic-sunken);
}

input[type="radio"] {
  border: 1px solid #0a0a0a;
  border-radius: 50%;
  box-shadow: inset 1px 1px #808080, inset -1px -1px #ffffff;
}

input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 3px;
  height: 7px;
  border: solid #000000;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg);
}

input[type="radio"]::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #000000;
  opacity: 0;
}

input[type="checkbox"]:checked::after,
input[type="radio"]:checked::after {
  opacity: 1;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  outline: 1px dotted #000000;
  outline-offset: 2px;
}

@media (forced-colors: active) {
  input[type="checkbox"],
  input[type="radio"] {
    appearance: auto;
  }
}

/* Taskbar */

.taskbar {
  height: var(--taskbar-height);
  min-height: var(--taskbar-height);
  padding: 2px;
  gap: 3px;
  align-items: center;
  background: #c0c0c0;
  border: 0;
  border-top: 1px solid #ffffff;
  box-shadow: inset 0 1px #dfdfdf;
}

.start-btn {
  align-self: stretch;
  min-width: 58px;
  height: 23px;
  padding: 0 4px 0 3px;
  gap: 3px;
  color: #000000;
  font-size: 11px;
  font-weight: 700;
  font-style: normal;
  background: #c0c0c0;
  border: 0;
  border-radius: 0;
  box-shadow: var(--classic-raised);
}

.start-btn.is-open,
.start-btn:active {
  padding: 1px 3px 0 4px;
  background: #c0c0c0;
  box-shadow: var(--classic-sunken);
}

.start-logo {
  width: 18px;
  height: 16px;
  border-radius: 0;
  image-rendering: pixelated;
}

.task-buttons {
  height: 23px;
  gap: 3px;
  padding: 0 2px 0 5px;
  border-left: 1px solid #808080;
  box-shadow: inset 1px 0 #ffffff;
}

.task-btn {
  min-width: 110px;
  max-width: 219px;
  height: 21px;
  min-height: 21px;
  padding: 0 5px;
  gap: 4px;
  color: #000000;
  font-size: 10px;
  font-weight: 400;
  line-height: 19px;
  background: #c0c0c0;
  border: 0;
  border-radius: 0;
  box-shadow: var(--classic-raised);
}

.task-btn::before {
  width: 14px;
  height: 14px;
  flex-basis: 14px;
  border-radius: 0;
  image-rendering: pixelated;
}

.task-btn.is-active {
  padding: 1px 4px 0 6px;
  font-weight: 700;
  background:
    repeating-conic-gradient(#ffffff 0 25%, #c0c0c0 0 50%) 0 / 2px 2px;
  border: 0;
  box-shadow: var(--classic-sunken);
}

.task-btn.is-minimized {
  color: #000000;
  opacity: 1;
}

.task-tray {
  align-self: stretch;
  min-width: 134px;
  height: 21px;
  padding: 1px 3px;
  gap: 1px;
  font-size: 10px;
  background: #c0c0c0;
  border: 1px solid #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}

.tray-btn,
.tray-clock-btn {
  min-height: 17px;
  height: 17px;
  padding: 0 2px;
}

.tray-btn.is-active,
.tray-clock-btn.is-active {
  background: #c0c0c0;
  box-shadow: var(--classic-sunken);
}

.tray-clock-btn {
  min-width: 48px;
  padding: 0 1px 0 3px;
}

.task-tray time {
  font-family: var(--font-ui);
  font-size: 10px;
}

.tray-flyout {
  right: 4px;
  bottom: calc(var(--taskbar-height) + 3px);
  width: 230px;
  padding: 2px;
  background: #c0c0c0;
  border: 0;
  border-radius: 0;
  box-shadow: var(--classic-raised), 1px 1px #000000;
}

.tray-flyout-title {
  padding: 2px 3px;
  color: #ffffff;
  font-size: 11px;
  background: linear-gradient(90deg, #08216b, #a5cef7);
}

.tray-flyout-copy {
  padding: 6px 4px 3px;
  font-size: 11px;
}

/* Start menu */

.start-menu {
  left: 2px;
  right: auto;
  bottom: var(--taskbar-height);
  width: 211px;
  max-height: calc(100dvh - var(--taskbar-height) - 2px);
  overflow: visible;
  grid-template-columns: 22px minmax(0, 1fr);
  color: #000000;
  background: #c0c0c0;
  border: 0;
  border-radius: 0;
  box-shadow: var(--classic-raised), 1px 1px #000000;
}

.start-menu[hidden] {
  display: none;
}

.start-menu-side {
  position: relative;
  display: block;
  min-height: 100%;
  padding: 0;
  color: #ffffff;
  background: #000080;
  border: 0;
}

.start-menu-side::before {
  display: none;
}

.start-menu-side strong {
  position: absolute;
  left: 2px;
  bottom: 4px;
  margin: 0;
  color: #c0c0c0;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 18px;
  font-weight: 400;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}

.start-menu-side strong span {
  color: #ffffff;
  font-weight: 700;
}

.start-menu-main {
  min-width: 0;
  padding: 2px;
  background: #c0c0c0;
}

.start-menu-root {
  display: grid;
  gap: 0;
}

.start-menu-separator {
  height: 2px;
  margin: 3px 2px;
  background: linear-gradient(180deg, #808080 0 1px, #ffffff 1px 2px);
}

.start-menu-btn {
  min-height: 30px;
  padding: 0 4px;
  gap: 5px;
  color: #000000;
  font-size: 11px;
  font-weight: 400;
  background: transparent;
  border: 0;
  border-radius: 0;
  transition: none;
}

.start-menu-parent {
  font-weight: 400;
}

.start-menu-btn:hover,
.start-menu-btn:focus-visible,
.start-menu-item.is-open > .start-menu-parent,
.start-menu-item:focus-within > .start-menu-parent {
  color: #ffffff;
  background: #000080;
  outline: 0;
}

.start-menu-btn.is-disabled {
  color: #808080;
  text-shadow: 1px 1px #ffffff;
  background: transparent;
}

.start-menu-parent::after {
  content: "";
  width: 0;
  height: 0;
  margin-left: auto;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
}

.start-menu-icon {
  position: relative;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  background: transparent;
  border: 0;
  box-shadow: none;
  image-rendering: pixelated;
}

.start-menu-icon::before,
.start-menu-icon::after {
  content: "";
  position: absolute;
  display: block;
}

.start-icon-programs::before,
.start-icon-docs::before,
.start-icon-explorer::before {
  left: 3px;
  right: 3px;
  top: 10px;
  bottom: 4px;
  background: #e1b444;
  border: 1px solid #73520d;
  box-shadow: inset 1px 1px #ffe49a;
}

.start-icon-programs::after,
.start-icon-docs::after,
.start-icon-explorer::after {
  left: 5px;
  top: 6px;
  width: 13px;
  height: 6px;
  background: #f4cf66;
  border: 1px solid #73520d;
  border-bottom: 0;
}

.start-icon-refresh::before,
.start-icon-network::before {
  inset: 4px;
  border: 2px solid #1c5b91;
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 44%, #ffffff 44% 56%, transparent 56%),
    linear-gradient(0deg, transparent 44%, #ffffff 44% 56%, transparent 56%),
    #3ca96d;
}

.start-icon-refresh::after,
.start-icon-network::after {
  right: 2px;
  bottom: 3px;
  width: 10px;
  height: 6px;
  background: #1c5b91;
  border: 1px solid #ffffff;
}

.start-icon-settings::before,
.start-icon-display::before,
.start-icon-layout::before,
.start-icon-system::before,
.start-icon-remote::before {
  inset: 4px;
  background: #b5b5b5;
  border: 2px solid #4c4c4c;
  box-shadow: inset 2px 2px #ffffff;
}

.start-icon-settings::after,
.start-icon-display::after,
.start-icon-layout::after,
.start-icon-system::after,
.start-icon-remote::after {
  left: 10px;
  top: 10px;
  width: 8px;
  height: 8px;
  background: #245b83;
  border: 1px solid #ffffff;
}

.start-icon-find::before {
  left: 4px;
  top: 3px;
  width: 15px;
  height: 15px;
  border: 3px solid #6ba2c8;
  border-radius: 50%;
  background: #ffffff;
}

.start-icon-find::after {
  left: 18px;
  top: 18px;
  width: 10px;
  height: 4px;
  background: #424242;
  transform: rotate(45deg);
  transform-origin: left center;
}

.start-icon-help::before {
  inset: 4px 5px;
  background: #8a2fa3;
  border: 1px solid #3d0e4c;
  box-shadow: inset 2px 0 #d889e9, 3px 2px #ffffff;
}

.start-icon-help::after {
  content: "?";
  inset: 5px;
  color: #ffffff;
  font-family: Arial, sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}

.start-icon-notepad::before,
.start-icon-run::before {
  left: 6px;
  top: 3px;
  width: 18px;
  height: 23px;
  background:
    repeating-linear-gradient(180deg, #ffffff 0 3px, #5b7fc0 3px 4px);
  border: 1px solid #424242;
}

.start-icon-notepad::after,
.start-icon-run::after {
  left: 9px;
  top: 6px;
  width: 4px;
  height: 17px;
  border-left: 1px solid #d02020;
}

.start-icon-game::before {
  left: 3px;
  right: 3px;
  top: 7px;
  bottom: 6px;
  background: #7a2720;
  border: 1px solid #3a1110;
  box-shadow: inset 2px 2px #d28980;
}

.start-icon-game::after {
  left: 8px;
  top: 13px;
  width: 14px;
  height: 4px;
  background:
    radial-gradient(circle at 2px 2px, #ffffff 0 2px, transparent 2px),
    radial-gradient(circle at 12px 2px, #ffffff 0 2px, transparent 2px);
}

.start-icon-power::before {
  inset: 5px 3px 4px;
  background: #a1382b;
  border: 1px solid #4f1711;
  box-shadow: inset 2px 2px #e98e83;
}

.start-icon-power::after {
  left: 11px;
  top: 9px;
  width: 8px;
  height: 8px;
  border: 2px solid #ffffff;
  border-radius: 50%;
}

.start-icon-sound::before {
  left: 5px;
  top: 10px;
  width: 8px;
  height: 10px;
  background: #777777;
}

.start-icon-sound::after {
  left: 13px;
  top: 7px;
  width: 10px;
  height: 16px;
  border-right: 3px solid #245b83;
  border-radius: 50%;
}

.start-menu-btn.is-disabled .start-menu-icon {
  opacity: 0.55;
  filter: grayscale(1);
}

.start-menu-btn.is-window-open .start-menu-icon::after {
  box-shadow: 2px 2px 0 #000080;
}

.start-submenu {
  z-index: 10;
  left: calc(100% - 2px);
  top: -2px;
  min-width: 198px;
  max-height: var(--start-submenu-max-height, calc(100dvh - var(--taskbar-height) - 8px));
  padding: 2px;
  overflow: auto;
  color: #000000;
  background: #c0c0c0;
  border: 0;
  border-radius: 0;
  box-shadow: var(--classic-raised), 1px 1px #000000;
}

.start-submenu .start-menu-btn {
  min-height: 22px;
  padding: 1px 5px;
  gap: 4px;
}

.start-submenu .start-menu-icon {
  flex-basis: 16px;
  width: 16px;
  height: 16px;
}

.start-submenu .start-menu-icon::before {
  inset: 2px;
}

.start-submenu .start-menu-icon::after {
  display: none;
}

/* Dialogs, context menus and boot/power surfaces */

.modal-shell {
  padding: 8px;
  background: transparent;
}

.message-box {
  width: min(360px, calc(100vw - 16px));
  padding: 2px;
  color: #000000;
  background: #c0c0c0;
  border: 1px solid #ffffff;
  border-right-color: #848484;
  border-bottom-color: #848484;
  border-radius: 0;
  box-shadow: 1px 1px #424242;
}

.message-box-body,
.shutdown-box-body {
  padding: 10px 12px 4px;
}

.message-box-icon {
  border-radius: 50%;
}

.dialog-actions {
  gap: 6px;
  padding: 5px 10px 9px;
}

.shutdown-choice,
.properties-checkbox {
  gap: 6px;
  font-size: 11px;
}

.context-menu {
  min-width: 140px;
  padding: 2px;
  color: #000000;
  font-size: 11px;
  background: #c0c0c0;
  border: 0;
  border-radius: 0;
  box-shadow: var(--classic-raised), 1px 1px #000000;
}

.context-menu-item {
  padding: 3px 20px 3px 24px;
}

.context-menu-item:hover,
.context-menu-item.is-active {
  color: #ffffff;
  background: #000080;
}

.context-menu-item.is-disabled {
  color: #808080;
  text-shadow: 1px 1px #ffffff;
}

.boot-screen,
.boot-screen[data-mode="boot"] {
  color: #000000;
  background: #008080;
}

.boot-panel {
  width: min(390px, calc(100% - 16px));
  padding: 2px;
  color: #000000;
  background: #c0c0c0;
  border: 1px solid #ffffff;
  border-right-color: #848484;
  border-bottom-color: #848484;
  border-radius: 0;
  box-shadow: 1px 1px #424242;
}

.boot-logo-wrap {
  width: 36px;
  height: 36px;
  margin: 10px 10px 6px;
}

.boot-logo,
.boot-logo-glow {
  border-radius: 0;
}

.boot-logo-glow {
  display: none;
}

.boot-edition {
  margin: 2px 8px 0;
  color: #000080;
  font-size: 10px;
  letter-spacing: 0;
}

.boot-title {
  margin: 2px 8px;
  color: #000000;
  font-size: 14px;
}

.boot-copy {
  margin: 4px 8px;
  color: #000000;
  font-size: 11px;
}

.boot-progress {
  height: 16px;
  margin: 8px;
  padding: 2px;
  background: #ffffff;
  border: 0;
  box-shadow: var(--classic-sunken);
}

.boot-progress-bar {
  background: repeating-linear-gradient(90deg, #000080 0 8px, transparent 8px 10px);
}

.power-screen {
  border-radius: 0;
}

/* Native Windows 98 icon artwork. Desktop/Start root icons use the archive's
   hand-drawn 32px frames; chrome, tray, taskbar and submenus use 16px frames. */

.glyph-folder {
  --win98-desktop-icon: url("/vendor/win98-icons/directory_explorer-4.png");
}

.glyph-monitor {
  --win98-desktop-icon: url("/vendor/win98-icons/computer_explorer-3.png");
}

.glyph-notepad {
  --win98-desktop-icon: url("/vendor/win98-icons/notepad-4.png");
}

.glyph-gamecenter {
  --win98-desktop-icon: url("/vendor/win98-icons/joystick-3.png");
}

.glyph-minesweeper {
  --win98-desktop-icon: url("/vendor/win98-icons/game_mine_1-0.png");
}

.glyph-solitaire {
  --win98-desktop-icon: url("/vendor/win98-icons/game_solitaire-0.png");
}

.glyph-files {
  --win98-desktop-icon: url("/vendor/win98-icons/directory_open_file_mydocs_small-3.png");
}

.glyph-weather {
  --win98-desktop-icon: url("/vendor/win98-icons/world-3.png");
}

.glyph-market {
  --win98-desktop-icon: url("/vendor/win98-icons/bar_graph_default-1.png");
}

.glyph-code {
  --win98-desktop-icon: url("/vendor/win98-icons/script_file_blue-1.png");
}

.glyph-vault {
  --win98-desktop-icon: url("/vendor/win98-icons/key_padlock-0.png");
}

:is(
  .glyph-folder,
  .glyph-monitor,
  .glyph-notepad,
  .glyph-gamecenter,
  .glyph-minesweeper,
  .glyph-solitaire,
  .glyph-files,
  .glyph-weather,
  .glyph-market,
  .glyph-code,
  .glyph-vault
) {
  width: 32px;
  height: 32px;
  margin: 0;
  background: var(--win98-desktop-icon) center / 32px 32px no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
}

:is(
  .glyph-folder,
  .glyph-monitor,
  .glyph-notepad,
  .glyph-gamecenter,
  .glyph-minesweeper,
  .glyph-solitaire,
  .glyph-files,
  .glyph-weather,
  .glyph-market,
  .glyph-code,
  .glyph-vault
)::before,
:is(
  .glyph-folder,
  .glyph-monitor,
  .glyph-notepad,
  .glyph-gamecenter,
  .glyph-minesweeper,
  .glyph-solitaire,
  .glyph-files,
  .glyph-weather,
  .glyph-market,
  .glyph-code,
  .glyph-vault
)::after {
  content: none;
  display: none;
}

.start-logo {
  background: url("/vendor/win98-icons/windows-4.png") center / 16px 16px no-repeat;
  border: 0;
  box-shadow: none;
  transform: none;
}

.start-icon-refresh {
  --win98-menu-icon: url("/vendor/win98-icons/network_normal_two_pcs-2.png");
}

.start-icon-programs {
  --win98-menu-icon: url("/vendor/win98-icons/file_program_group-0.png");
}

.start-icon-favorites {
  --win98-menu-icon: url("/vendor/win98-icons/directory_favorites_small-2.png");
}

.start-icon-documents,
.start-icon-docs {
  --win98-menu-icon: url("/vendor/win98-icons/directory_open_file_mydocs_small-3.png");
}

.start-icon-settings {
  --win98-menu-icon: url("/vendor/win98-icons/settings_gear-3.png");
}

.start-icon-find {
  --win98-menu-icon: url("/vendor/win98-icons/search_file_2-3.png");
}

.start-icon-help {
  --win98-menu-icon: url("/vendor/win98-icons/help_book_small-3.png");
}

.start-icon-run {
  --win98-menu-icon: url("/vendor/win98-icons/application_hourglass_small-3.png");
}

.start-icon-system {
  --win98-menu-icon: url("/vendor/win98-icons/computer_explorer-3.png");
}

.start-icon-power {
  --win98-menu-icon: url("/vendor/win98-icons/shut_down_with_computer-0.png");
}

.start-icon-explorer {
  --win98-menu-icon: url("/vendor/win98-icons/directory_explorer-3.png");
}

.start-icon-notepad {
  --win98-menu-icon: url("/vendor/win98-icons/notepad-3.png");
}

.start-icon-game {
  --win98-menu-icon: url("/vendor/win98-icons/joystick-1.png");
}

.start-icon-remote {
  --win98-menu-icon: url("/vendor/win98-icons/directory_open_file_mydocs_small-5.png");
}

.start-icon-network {
  --win98-menu-icon: url("/vendor/win98-icons/network_normal_two_pcs-3.png");
}

.start-icon-display {
  --win98-menu-icon: url("/vendor/win98-icons/display_properties-1.png");
}

.start-icon-layout {
  --win98-menu-icon: url("/vendor/win98-icons/desktop-3.png");
}

.start-icon-sound {
  --win98-menu-icon: url("/vendor/win98-icons/loudspeaker_rays-1.png");
}

.start-menu-icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  background: var(--win98-menu-icon) center / 32px 32px no-repeat;
  image-rendering: pixelated;
}

.start-menu-icon::before,
.start-menu-icon::after,
.start-menu-btn.is-window-open .start-menu-icon::after {
  content: none;
  display: none;
}

.start-menu-root > .start-menu-item > .start-menu-btn {
  min-height: 32px;
}

.start-submenu .start-menu-icon {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background-size: 16px 16px;
}

.start-submenu .start-icon-settings {
  --win98-menu-icon: url("/vendor/win98-icons/directory_control_panel-1.png");
}

#startMonitorBtn .start-menu-icon {
  --win98-menu-icon: url("/vendor/win98-icons/computer_taskmgr-1.png");
}

#startGamecenterBtn .start-menu-icon {
  --win98-menu-icon: url("/vendor/win98-icons/joystick-1.png");
}

#startGbaBtn .start-menu-icon {
  --win98-menu-icon: url("/vendor/win98-icons/joystick_alt-1.png");
}

#startMinesweeperBtn .start-menu-icon {
  --win98-menu-icon: url("/vendor/win98-icons/game_mine_1-1.png");
}

#startQuakeBtn .start-menu-icon {
  --win98-menu-icon: url("/vendor/win98-icons/ms_dos_2-1.png");
}

#startSolitaireBtn .start-menu-icon {
  --win98-menu-icon: url("/vendor/win98-icons/game_solitaire-1.png");
}

#startWeatherBtn .start-menu-icon {
  --win98-menu-icon: url("/vendor/win98-icons/world-5.png");
}

#startMarketBtn .start-menu-icon {
  --win98-menu-icon: url("/vendor/win98-icons/bar_graph_default-0.png");
}

.win-window[data-window="service"] {
  --win98-window-icon: url("/vendor/win98-icons/directory_explorer-3.png");
}

.win-window[data-window="monitor"] {
  --win98-window-icon: url("/vendor/win98-icons/computer_taskmgr-1.png");
}

.win-window[data-window="notes"] {
  --win98-window-icon: url("/vendor/win98-icons/msinfo32-0.png");
}

.win-window[data-window="notepad"] {
  --win98-window-icon: url("/vendor/win98-icons/notepad-3.png");
}

.win-window[data-window="gamecenter"] {
  --win98-window-icon: url("/vendor/win98-icons/joystick-1.png");
}

.win-window[data-window="gba"] {
  --win98-window-icon: url("/vendor/win98-icons/joystick_alt-1.png");
}

.win-window[data-window="quake"] {
  --win98-window-icon: url("/vendor/win98-icons/ms_dos_2-1.png");
}

:is(
  .win-window[data-window="cs16"],
  .win-window[data-window="nzportable"],
  .win-window[data-window="tekken3"],
  .win-window[data-window="sauerbraten"],
  .win-window[data-window="pinball"],
  .win-window[data-window="claw"],
  .win-window[data-window="webwars"],
  .win-window[data-window="prince"]
) {
  --win98-window-icon: url("/vendor/win98-icons/joystick-1.png");
}

.win-window[data-window="minesweeper"] {
  --win98-window-icon: url("/vendor/win98-icons/game_mine_1-1.png");
}

.win-window[data-window="solitaire"] {
  --win98-window-icon: url("/vendor/win98-icons/game_solitaire-1.png");
}

.win-window[data-window="files"] {
  --win98-window-icon: url("/vendor/win98-icons/directory_open_file_mydocs_small-5.png");
}

.win-window[data-window="speedtest"] {
  --win98-window-icon: url("/vendor/win98-icons/network_normal_two_pcs-3.png");
}

.win-window[data-window="weather"] {
  --win98-window-icon: url("/vendor/win98-icons/world-5.png");
}

.win-window[data-window="market"] {
  --win98-window-icon: url("/vendor/win98-icons/bar_graph_default-0.png");
}

.win-window[data-window="run"] {
  --win98-window-icon: url("/vendor/win98-icons/application_hourglass_small-1.png");
}

.win-window[data-window="control"] {
  --win98-window-icon: url("/vendor/win98-icons/directory_control_panel-1.png");
}

.win-window[data-window="properties"] {
  --win98-window-icon: url("/vendor/win98-icons/display_properties-1.png");
}

.desktop .win-window .titlebar::before,
.desktop .win-window:not(.is-focused) .titlebar::before,
.desktop .win-window.is-focused .titlebar::before,
.desktop .win-window.is-focused .titlebar-secondary::before,
.desktop .message-box .titlebar::before {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  background: var(--win98-window-icon, url("/vendor/win98-icons/windows-4.png")) center / 16px 16px no-repeat;
  border: 0;
  box-shadow: none;
  image-rendering: pixelated;
}

#shutdownDialog .message-box .titlebar::before {
  background-image: url("/vendor/win98-icons/shut_down_with_computer-1.png");
}

.task-btn::before {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: url("/vendor/win98-icons/windows-4.png") center / 16px 16px no-repeat;
  border: 0;
  box-shadow: none;
  image-rendering: pixelated;
}

#taskServiceBtn::before {
  background: url("/vendor/win98-icons/directory_explorer-3.png") center / 16px 16px no-repeat;
}

#taskMonitorBtn::before {
  background: url("/vendor/win98-icons/computer_taskmgr-1.png") center / 16px 16px no-repeat;
}

#taskNotesBtn::before {
  background: url("/vendor/win98-icons/msinfo32-0.png") center / 16px 16px no-repeat;
}

#taskNotepadBtn::before {
  background: url("/vendor/win98-icons/notepad-3.png") center / 16px 16px no-repeat;
}

#taskRunBtn::before {
  background: url("/vendor/win98-icons/application_hourglass_small-1.png") center / 16px 16px no-repeat;
}

#taskControlBtn::before {
  background: url("/vendor/win98-icons/directory_control_panel-1.png") center / 16px 16px no-repeat;
}

#taskPropertiesBtn::before {
  background: url("/vendor/win98-icons/display_properties-1.png") center / 16px 16px no-repeat;
}

#taskGamecenterBtn::before {
  background: url("/vendor/win98-icons/joystick-1.png") center / 16px 16px no-repeat;
}

#taskGbaBtn::before {
  background: url("/vendor/win98-icons/joystick_alt-1.png") center / 16px 16px no-repeat;
}

#taskQuakeBtn::before {
  background: url("/vendor/win98-icons/ms_dos_2-1.png") center / 16px 16px no-repeat;
}

#taskPinballBtn::before {
  background: url("/vendor/win98-icons/joystick-1.png") center / 16px 16px no-repeat;
}

#taskMinesweeperBtn::before {
  background: url("/vendor/win98-icons/game_mine_1-1.png") center / 16px 16px no-repeat;
}

#taskSolitaireBtn::before {
  background: url("/vendor/win98-icons/game_solitaire-1.png") center / 16px 16px no-repeat;
}

#taskFilesBtn::before {
  background: url("/vendor/win98-icons/directory_open_file_mydocs_small-5.png") center / 16px 16px no-repeat;
}

#taskWeatherBtn::before {
  background: url("/vendor/win98-icons/world-5.png") center / 16px 16px no-repeat;
}

#taskMarketBtn::before {
  background: url("/vendor/win98-icons/bar_graph_default-0.png") center / 16px 16px no-repeat;
}

.tray-icon {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 16px 16px;
  image-rendering: pixelated;
}

.tray-icon::before,
.tray-icon::after {
  content: none;
  display: none;
}

.tray-icon-net {
  background-image: url("/vendor/win98-icons/network_normal_two_pcs-3.png");
}

.tray-icon-weather {
  background-image: url("/vendor/win98-icons/world-5.png");
}

.tray-icon-sound {
  background-image: url("/vendor/win98-icons/loudspeaker_rays-1.png");
}

.tray-btn.is-muted .tray-icon-sound {
  background-image: url("/vendor/win98-icons/loudspeaker_muted-1.png");
  opacity: 1;
}

.tray-btn.is-error .tray-icon-weather {
  filter: grayscale(1) contrast(1.35);
}

.message-box-icon {
  background: url("/vendor/win98-icons/msg_information-0.png") center / 32px 32px no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  image-rendering: pixelated;
}

.message-box-icon::before,
.message-box-icon.is-error::before {
  content: none;
  display: none;
}

.message-box-icon.is-error {
  background: url("/vendor/win98-icons/msg_error-0.png") center / 32px 32px no-repeat;
  border: 0;
}

.run-window-icon {
  background: url("/vendor/win98-icons/application_hourglass_small-0.png") center / 32px 32px no-repeat;
  border: 0;
  box-shadow: none;
  transform: none;
  image-rendering: pixelated;
}

.control-item-icon {
  width: 32px;
  height: 32px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 32px 32px;
  border: 0;
  box-shadow: none;
  image-rendering: pixelated;
}

.control-item-display {
  background-image: url("/vendor/win98-icons/display_properties-2.png");
}

.control-item-sounds {
  background-image: url("/vendor/win98-icons/loudspeaker_rays-0.png");
}

.control-item-network {
  background-image: url("/vendor/win98-icons/network_normal_two_pcs-0.png");
}

.control-item-taskbar {
  background-image: url("/vendor/win98-icons/desktop-0.png");
}

/* Scrollbars */

* {
  scrollbar-color: #c0c0c0 #dfdfdf;
  scrollbar-width: auto;
}

*::-webkit-scrollbar {
  width: 17px;
  height: 17px;
}

*::-webkit-scrollbar-track {
  background:
    repeating-conic-gradient(#ffffff 0 25%, #c0c0c0 0 50%) 0 / 2px 2px;
}

*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-button {
  background: #c0c0c0;
  border: 0;
  border-radius: 0;
  box-shadow: var(--classic-raised);
}

*::-webkit-scrollbar-corner {
  background: #c0c0c0;
}

/* Responsive: retain classic density instead of turning into a modern UI. */

@media (max-width: 980px) {
  .service-window {
    min-width: 480px;
    width: calc(100% - 120px);
    left: 104px;
  }

  .window-toolbar {
    flex-wrap: wrap;
  }

  .address-line {
    min-width: 55%;
  }

  .toolbar-search {
    flex: 1 1 180px;
  }

  .task-btn {
    min-width: 92px;
  }
}

@media (max-width: 640px) {
  .desktop-icon {
    width: 82px;
  }

  .desktop-icon-label {
    max-width: 70px;
  }

  .win-window,
  .draggable-window {
    left: 4px !important;
    right: auto !important;
    top: 4px !important;
    bottom: auto !important;
    width: calc(100% - 8px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: calc(100% - 8px) !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .service-window {
    grid-template-rows: 18px 20px auto auto minmax(0, 1fr) 22px;
  }

  .window-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px;
  }

  .address-line {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .toolbar-search {
    min-width: 0;
  }

  .window-body,
  .service-window.is-compact .window-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(120px, 42%) minmax(0, 1fr);
  }

  .task-tray {
    min-width: 73px;
  }

  #trayNetBtn,
  #trayWeatherBtn {
    display: none;
  }

  .task-btn {
    min-width: 76px;
    max-width: 118px;
  }

  .start-menu {
    width: min(211px, calc(100vw - 4px));
    max-height: calc(100dvh - var(--taskbar-height) - 2px);
    overflow-y: auto;
  }

  .start-submenu {
    position: fixed;
    left: 4px;
    right: 4px;
    top: auto;
    bottom: calc(var(--taskbar-height) + 4px);
    width: auto;
    min-width: 0;
    max-height: calc(100dvh - var(--taskbar-height) - 8px);
    margin: 0;
  }

  .properties-choice-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}