/* ===========================================================================
   w95_desktop.css - Windows 95 style desktop shell for the PRODIGY web client.

   This is a presentation layer only. It wraps the existing .chat-web-app in a
   draggable/resizable application window that sits on a simulated Windows 95
   desktop (wallpaper, icons, taskbar, Start menu, tray clock).

   Nothing in here changes chat behaviour. Every rule that touches existing
   Prodigy markup is scoped to `body.w95-on`, so when the shell is disabled
   (small screens, or JS off) the page renders exactly as it did before.

   Typeface comes from themesberg/windows-95-ui-kit (MIT) - see
   static/vendor/windows-95-ui-kit/LICENSE. All icon artwork here is original
   vector work drawn on a 32x32 grid for this project; no Microsoft system
   files are redistributed. See THIRD_PARTY_NOTICES.md.
   =========================================================================== */

@font-face {
  font-family: "Windows 95";
  src: url("/static/vendor/windows-95-ui-kit/fonts/w-95-sans-serif.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --w95-face: #c0c0c0;
  --w95-face-lit: #dfdfdf;
  --w95-white: #ffffff;
  --w95-shadow: #808080;
  --w95-dark: #000000;
  --w95-desk: #008080;
  --w95-title-a1: #000080;
  --w95-title-a2: #1084d0;
  --w95-title-i1: #808080;
  --w95-title-i2: #b5b5b5;
  --w95-taskbar-h: 30px;
  --w95-top: 0px;
  /* The chrome is drawn in the same face the sign-on dialog uses. The bundled
     "Windows 95" webfont (@font-face above, still registered) is a converted
     bitmap: crisp only at the one size it was cut for, and visibly wobbly
     anywhere else. MS Sans Serif IS the Windows 95 UI font and is still on
     every Windows box; Tahoma is the near-identical fallback elsewhere. Put
     "Windows 95" back at the front of this list to restore the pixel face. */
  --w95-font: "MS Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
}

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

.w95-desktop {
  display: none;
}

body.w95-on {
  margin: 0;
  overflow: hidden;
  background: var(--w95-desk);
}

body.w95-on .w95-desktop {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--w95-top);
  bottom: 0;
  z-index: 0;
  display: block;
  background: var(--w95-desk);
  color: #000;
  overflow: hidden;
  cursor: default;
}

/* The desktop's typeface belongs to the desktop's own chrome and nowhere else.
   Setting it on .w95-desktop put it on the Prodigy client too, because the
   client is now a descendant - so the service's menus and dialogs, designed in
   Arial at 14-17px, were being drawn in a bitmap face scaled well past its
   native size. That is what made them look shaky. */
.w95-icons,
.w95-taskbar,
.w95-startmenu,
.w95-submenu,
.w95-msgbox,
.w95-shutdown {
  font-family: var(--w95-font);
  font-size: 12px;
  user-select: none;
}

/* Work area: everything above the taskbar. */
.w95-workarea {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: var(--w95-taskbar-h);
}

/* styles.css styles every <button> on the site as a modern rounded pill
   (inline-flex, border-radius: 999px, white text on a gradient). Undo that for
   the desktop chrome only. Written with :where() so the whole selector carries
   almost no specificity and every component rule below still wins on a plain
   class. The Prodigy client's own buttons are deliberately left alone. */
:where(.w95-icons, .w95-taskbar, .w95-startmenu, .w95-submenu, .w95-msgbox,
       .w95-titlebar, .w95-menubar) :where(button, a) {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--w95-face);
  color: #000;
  font: 12px var(--w95-font);
  font-weight: normal;
  text-decoration: none;
  cursor: default;
}

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

.w95-icons {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 2px;
  padding: 6px 4px;
  z-index: 1;
}

.w95-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 86px;
  padding: 4px 2px 5px;
  border: 0;
  background: transparent;
  color: #fff;
  font: 12px var(--w95-font);
  text-align: center;
  cursor: default;
}

.w95-icon-art {
  display: block;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin: 0 auto 3px;
  image-rendering: pixelated;
}

.w95-icon-label {
  display: inline-block;
  max-width: 82px;
  text-align: center;
  padding: 1px 2px;
  line-height: 1.15;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.75);
  /* Wrap between words only. break-word was splitting "Neighborhood" across
     two lines rather than letting the label be two words tall. */
  overflow-wrap: normal;
  word-break: normal;
}

.w95-icon.is-selected .w95-icon-art {
  /* Classic selection tint over the glyph. */
  filter: brightness(0.72) sepia(1) hue-rotate(190deg) saturate(3.5);
}

.w95-icon.is-selected .w95-icon-label {
  background: var(--w95-title-a1);
  outline: 1px dotted #fff;
  outline-offset: -1px;
  text-shadow: none;
}

.w95-icon:focus {
  outline: none;
}

[data-w95-service][hidden] {
  display: none !important;
}

/* ===========================================================================
   WINDOWS
   =========================================================================== */

.w95-windows {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Webamp renders its own faithful application windows. This desktop-owned
   host gives those windows the work area as their coordinate system without
   wrapping them in a second, fake title bar. It is created only on launch. */
.prodigyamp-host {
  position: absolute;
  inset: 0;
  z-index: 350;
  overflow: hidden;
  pointer-events: none;
}

.prodigyamp-host[hidden] {
  display: none;
}

.prodigyamp-host > * {
  pointer-events: auto;
}

.w95-window {
  display: block;
  position: absolute;
  left: 40px;
  top: 40px;
  width: 900px;
  height: 640px;
  z-index: 100;
  pointer-events: auto;
  background: var(--w95-face);
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow);
  padding: 3px;
}

.w95-window[data-w95-state="minimized"],
.w95-window[data-w95-state="closed"] {
  display: none;
}

/* The frame is the containing block for every position:fixed panel the chat
   client creates (room window, IM window, modals). A transform makes fixed
   descendants resolve against this box instead of the viewport, which is what
   turns the existing MDI-style client into a real child of this window - and
   overflow:hidden keeps those panels clipped to the window, exactly like the
   original MDI application did. */
.w95-window-frame {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  transform: translate(0px, 0px);
  background: var(--w95-face);
}

/* Client area for windows the shell builds itself (W95.openWindow). The
   Prodigy window does not use this - it brings its own chrome. */
.w95-window-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
  bottom: 0;
  overflow: auto;
  background: var(--w95-face);
}

.w95-app-window .w95-window-content {
  overflow: hidden;
  background: #c0c0c0;
}

.w95-app-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #c0c0c0;
}

/* Resize grips. Eight of them, sitting on the window's outer edge. */
.w95-resizer {
  position: absolute;
  z-index: 5;
}

.w95-window[data-w95-state="maximized"] .w95-resizer,
.w95-window[data-w95-resizable="false"] .w95-resizer {
  display: none;
}

.w95-resizer[data-dir="n"]  { left: 8px; right: 8px; top: -3px; height: 7px; cursor: n-resize; }
.w95-resizer[data-dir="s"]  { left: 8px; right: 8px; bottom: -3px; height: 7px; cursor: s-resize; }
.w95-resizer[data-dir="w"]  { top: 8px; bottom: 8px; left: -3px; width: 7px; cursor: w-resize; }
.w95-resizer[data-dir="e"]  { top: 8px; bottom: 8px; right: -3px; width: 7px; cursor: e-resize; }
.w95-resizer[data-dir="nw"] { left: -3px; top: -3px; width: 12px; height: 12px; cursor: nw-resize; }
.w95-resizer[data-dir="ne"] { right: -3px; top: -3px; width: 12px; height: 12px; cursor: ne-resize; }
.w95-resizer[data-dir="sw"] { left: -3px; bottom: -3px; width: 12px; height: 12px; cursor: sw-resize; }
.w95-resizer[data-dir="se"] { right: -3px; bottom: -3px; width: 12px; height: 12px; cursor: se-resize; }

/* Drag/resize feedback: no smoothing, no transitions - Windows 95 moved the
   whole window instantly. */
body.w95-dragging,
body.w95-dragging * {
  user-select: none !important;
}

/* --- generic window chrome (used by desktop-owned windows, e.g. dialogs) --- */
.w95-titlebar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  height: 20px;
  padding: 0 2px 0 3px;
  background: linear-gradient(90deg, var(--w95-title-a1), var(--w95-title-a2));
  color: #fff;
  font: bold 12px var(--w95-font);
  cursor: default;
}

.w95-window[data-w95-active="false"] .w95-titlebar {
  background: linear-gradient(90deg, var(--w95-title-i1), var(--w95-title-i2));
  color: #dfdfdf;
}

.w95-titlebar img {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  object-fit: contain;
}

.w95-titlebar-text {
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.w95-titlebar-buttons {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}

.w95-tb-button {
  width: 16px;
  height: 14px;
  padding: 0;
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow);
  border-radius: 0;
  background: var(--w95-face);
  color: #000;
  font: bold 10px var(--w95-font);
  line-height: 1;
  cursor: default;
}

.w95-tb-button:active {
  border-color: var(--w95-dark) var(--w95-face-lit) var(--w95-face-lit) var(--w95-dark);
  box-shadow: inset 1px 1px 0 var(--w95-shadow), inset -1px -1px 0 var(--w95-white);
}

.w95-tb-button[data-w95-action="close"] {
  margin-left: 2px;
}

/* Application menu bar, for windows that want the period chrome without
   pulling in the chat client's full menu system. */
.w95-menubar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  padding: 2px 4px;
  background: var(--w95-face);
  border-bottom: 1px solid var(--w95-shadow);
  box-shadow: inset 0 -2px 0 var(--w95-white);
  font: 12px var(--w95-font);
  color: #000;
}

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

.w95-menu {
  position: relative;
}

.w95-menu > button {
  padding: 2px 7px;
  border: 1px solid transparent;
  background: transparent;
  font: 12px var(--w95-font);
  color: #000;
}

/* Keyboard and pointer open the same way. :focus-within also keeps the menu up
   while a link inside it has focus, so Tab walks the whole menu. */
.w95-menu:hover > button,
.w95-menu:focus-within > button {
  border-color: var(--w95-white) var(--w95-shadow) var(--w95-shadow) var(--w95-white);
  background: var(--w95-face);
}

.w95-menu-popup {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 60;
  display: none;
  min-width: 196px;
  padding: 2px;
  background: var(--w95-face);
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow),
              2px 2px 0 rgba(0, 0, 0, 0.3);
}

.w95-menu:hover > .w95-menu-popup,
.w95-menu:focus-within > .w95-menu-popup {
  display: block;
}

/* A clicked menu can remain open through :focus-within. As soon as the pointer
   moves to a sibling menu, stand the focused one down so two popups never stack. */
.w95-menubar:hover .w95-menu:not(:hover) > .w95-menu-popup {
  display: none;
}

.w95-menubar:hover .w95-menu:hover > .w95-menu-popup {
  display: block;
}

.w95-menu-popup a,
.w95-menu-popup button,
.w95-menu-popup .is-disabled {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  padding: 3px 20px 3px 9px;
  border: 0;
  background: transparent;
  color: #000;
  font: 12px var(--w95-font);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: default;
}

.w95-menu-popup .w95-menu-shortcut {
  margin-left: auto;
  padding-left: 28px;
  text-align: right;
}

.w95-menu-popup a:hover,
.w95-menu-popup button:hover,
.w95-menu-popup a:focus-visible,
.w95-menu-popup button:focus-visible {
  background: var(--w95-title-a1);
  color: #fff;
  outline: none;
}

/* Windows greyed an unavailable command rather than hiding it - the etched
   look is the period way of saying "this exists, just not here". */
.w95-menu-popup .is-disabled {
  color: var(--w95-shadow);
  text-shadow: 1px 1px 0 var(--w95-white);
  pointer-events: none;
}

.w95-menu-sep {
  height: 2px;
  margin: 3px 2px;
  border-top: 1px solid var(--w95-shadow);
  border-bottom: 1px solid var(--w95-white);
}

.w95-desktop-context.is-open {
  position: absolute;
  z-index: 30000;
  display: block;
  min-width: 184px;
}

/* ===========================================================================
   HOSTING A PAGE THAT BRINGS NO CHROME OF ITS OWN
   Chat, Mail, Boards and the service pages each have a title bar the shell can
   drive. A page that has none - Public Highlights is the member view of the
   public site - gets this pair instead: the shell's own title bar on top, the
   page below it as the client area.
   =========================================================================== */

.w95-hosted-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  background: var(--w95-face);
}

.w95-hosted-app > .w95-titlebar {
  flex: 0 0 auto;
}

.w95-hosted-canvas {
  background: #fff;
}

/* Shell off: no window, so the borrowed chrome must not be left stranded. */
body:not(.w95-on) .w95-hosted-app,
body:not(.w95-on) .w95-hosted-canvas {
  display: contents;
}

body:not(.w95-on) .w95-hosted-app > .w95-titlebar {
  display: none;
}

/* ===========================================================================
   LEGACY APPLICATION FITTING
   The client rectangle is what is left of the window after the Win95 chrome -
   title bar, menu bar, borders, any status strip. The logical page is scaled
   into it uniformly by w95_desktop.js. min-height/min-width: 0 on every link
   in the chain, because a flex or grid child defaults to min-content and will
   otherwise push its parent taller than the window.
   =========================================================================== */

/* Explicit `display` on every shell container above and below is deliberate:
   a page served where this stylesheet cannot load (the Bulletin Boards file is
   also the public site's own page, and there /static is a different vhost)
   needs to default the wrappers to `display: contents` so its content still
   flows. That fallback can only be overridden if the values here are stated
   rather than left at their initial value. */

[data-w95-client] {
  display: block;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}

/* Reserves the SCALED footprint. A transform does not change layout, so
   without this the client would scroll as though the page were full size. */
.w95-fit-sizer {
  display: block;
  position: relative;
  margin: 0 auto;
  min-height: 0;
  min-width: 0;
}

.w95-fit-canvas {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: top left;
}

/* Shell off: no window, no fitting - the page lays out normally again. */
body:not(.w95-on) .w95-fit-sizer,
body:not(.w95-on) .w95-fit-canvas {
  display: contents;
}

/* ===========================================================================
   TASKBAR
   =========================================================================== */

.w95-taskbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 3px;
  height: var(--w95-taskbar-h);
  padding: 2px;
  background: var(--w95-face);
  border-top: 1px solid var(--w95-white);
}

.w95-start-button {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 6px 0 4px;
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow);
  border-radius: 0;
  background: var(--w95-face);
  color: #000;
  font: bold 12px var(--w95-font);
  cursor: default;
}

.w95-start-button.is-open,
.w95-start-button:active {
  border-color: var(--w95-dark) var(--w95-face-lit) var(--w95-face-lit) var(--w95-dark);
  box-shadow: inset 1px 1px 0 var(--w95-shadow), inset -1px -1px 0 var(--w95-white);
  padding: 1px 5px 0 5px;
}

.w95-start-button img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.w95-task-divider {
  flex: 0 0 auto;
  width: 2px;
  height: 22px;
  border-left: 1px solid var(--w95-shadow);
  border-right: 1px solid var(--w95-white);
}

.w95-tasks {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

.w95-task {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 1 168px;
  min-width: 40px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow);
  border-radius: 0;
  background: var(--w95-face);
  color: #000;
  font: 12px var(--w95-font);
  justify-content: flex-start;
  text-align: left;
  cursor: default;
  overflow: hidden;
  white-space: nowrap;
}

.w95-task img {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  image-rendering: pixelated;
}

.w95-task span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.w95-task.is-active {
  border-color: var(--w95-dark) var(--w95-face-lit) var(--w95-face-lit) var(--w95-dark);
  box-shadow: inset 1px 1px 0 var(--w95-shadow), inset -1px -1px 0 var(--w95-white);
  background-color: var(--w95-face);
  background-image: repeating-conic-gradient(#c0c0c0 0 25%, #dfdfdf 0 50%);
  background-size: 2px 2px;
  font-weight: bold;
  padding-left: 7px;
}

.w95-tray {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid;
  border-color: var(--w95-shadow) var(--w95-white) var(--w95-white) var(--w95-shadow);
  box-shadow: inset 1px 1px 0 var(--w95-dark), inset -1px -1px 0 var(--w95-face-lit);
  font: 12px var(--w95-font);
}

/* The Prodigy notification-area icon. Flat until you press it, like every
   other tray icon - it is not a toolbar button. */
.w95-tray-app {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  cursor: default;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.w95-tray-app img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.w95-tray-app:active {
  border-color: var(--w95-shadow) var(--w95-white) var(--w95-white) var(--w95-shadow);
}

.w95-tray-menu {
  min-width: 188px;
}

.w95-tray-icon {
  width: 16px;
  height: 16px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: default;
  image-rendering: pixelated;
}

.w95-clock {
  min-width: 56px;
  text-align: center;
  cursor: default;
  user-select: none;
}

.w95-clock:focus {
  outline: 1px dotted #000;
  outline-offset: 1px;
}

.w95-clock-menu {
  z-index: 130;
  min-width: 174px;
}

.w95-clock-menu .w95-startitem {
  padding-left: 9px;
}

/* Windows 95 Date/Time Properties. This is a fixed-size properties dialog,
   not a responsive application window, so its proportions stay close to the
   original Control Panel applet. */
.w95-date-time-window .w95-window-content {
  overflow: hidden;
  background: var(--w95-face);
}

.w95-date-time-window .w95-titlebar-text {
  font-weight: bold;
}

.w95-date-time-properties {
  display: flex;
  flex-direction: column;
  padding: 7px 8px 8px;
  font: 12px "MS Sans Serif", "Microsoft Sans Serif", Tahoma, sans-serif;
}

.w95-datetime-tabs {
  display: flex;
  flex: 0 0 24px;
  align-items: flex-end;
  padding-left: 2px;
  position: relative;
  z-index: 2;
}

.w95-datetime-tab {
  height: 23px;
  margin: 0 -1px -2px 0;
  padding: 2px 9px 3px;
  border: 2px solid;
  border-color: var(--w95-white) var(--w95-dark) var(--w95-face) var(--w95-white);
  border-radius: 0;
  background: var(--w95-face);
  color: #000;
  font: inherit;
  cursor: default;
}

.w95-datetime-tab:not(.is-active) {
  height: 21px;
  padding-top: 1px;
  border-bottom-color: var(--w95-dark);
}

.w95-datetime-tab.is-active {
  position: relative;
  z-index: 2;
  padding-left: 10px;
  padding-right: 10px;
}

.w95-datetime-tab:focus {
  outline: 1px dotted #000;
  outline-offset: -5px;
}

.w95-datetime-panel {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  border: 2px solid;
  border-color: var(--w95-white) var(--w95-dark) var(--w95-dark) var(--w95-white);
  box-shadow: inset -1px -1px 0 var(--w95-shadow);
}

.w95-datetime-date-view {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 30px;
  gap: 8px 10px;
  height: 100%;
  padding: 9px 10px 2px;
}

.w95-datetime-date-view[hidden],
.w95-datetime-zone-view[hidden] {
  display: none !important;
}

.w95-datetime-group {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 9px 10px 10px;
  border: 2px groove var(--w95-white);
}

.w95-datetime-group legend {
  padding: 0 3px;
}

.w95-datetime-date-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 97px;
  gap: 10px;
  margin-bottom: 12px;
}

.w95-datetime-select,
.w95-datetime-year,
.w95-datetime-time-input {
  box-sizing: border-box;
  height: 25px;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  border-radius: 0;
  background: #fff;
  color: #000;
  font: inherit;
}

.w95-datetime-select {
  width: 100%;
  padding: 1px 3px;
}

.w95-datetime-spinbox,
.w95-datetime-time-wrap {
  display: flex;
  min-width: 0;
}

.w95-datetime-year,
.w95-datetime-time-input {
  min-width: 0;
  padding: 2px 5px;
}

.w95-datetime-year { width: 76px; }

.w95-datetime-spinner {
  display: grid;
  flex: 0 0 20px;
  grid-template-rows: 1fr 1fr;
  height: 25px;
}

.w95-datetime-spinner button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0;
  border: 1px solid;
  border-color: var(--w95-white) var(--w95-dark) var(--w95-dark) var(--w95-white);
  border-radius: 0;
  background: var(--w95-face);
  color: #000;
  font: 7px Arial, sans-serif;
  line-height: 1;
}

.w95-datetime-spinner button:active {
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
}

.w95-datetime-calendar {
  height: 158px;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  background: #fff;
}

.w95-datetime-weekdays,
.w95-datetime-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.w95-datetime-weekdays {
  height: 25px;
  align-items: center;
  background: #808080;
  color: #dfdfdf;
}

.w95-datetime-weekdays span {
  text-align: center;
}

.w95-datetime-days {
  grid-auto-rows: 21px;
  padding: 3px 4px;
}

.w95-datetime-days button,
.w95-datetime-days span {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  height: 20px;
}

.w95-datetime-days button {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #000;
  font: inherit;
  cursor: default;
}

.w95-datetime-days button.is-selected {
  justify-self: center;
  width: 22px;
  background: #000080;
  color: #fff;
}

.w95-datetime-days button:focus {
  outline: 1px dotted #fff;
  outline-offset: -2px;
}

.w95-datetime-time-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 5px;
}

.w95-datetime-clock-wrap {
  position: relative;
  width: 160px;
  height: 160px;
  margin: 1px auto 10px;
}

.w95-datetime-clock-face {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0;
  overflow: visible;
}

.w95-datetime-clock-face circle {
  fill: #008b8b;
  stroke: #808080;
  stroke-width: 0.5;
}

.w95-datetime-clock-face circle.is-hour {
  fill: #000;
  stroke: #fff;
  stroke-width: 1;
}

.w95-datetime-clock-face line {
  stroke-linecap: square;
}

.w95-clock-hour {
  stroke: #008b8b;
  stroke-width: 7;
}

.w95-clock-minute {
  stroke: #008b8b;
  stroke-width: 5;
}

.w95-clock-second {
  stroke: #808080;
  stroke-width: 1;
}

.w95-datetime-clock-face .w95-clock-pin {
  fill: #000;
  stroke: #008b8b;
  stroke-width: 2;
}

.w95-datetime-clock-face .w95-clock-hour,
.w95-datetime-clock-face .w95-clock-minute,
.w95-datetime-clock-face .w95-clock-second,
.w95-datetime-clock-face .w95-clock-pin {
  transform-box: view-box;
  transform-origin: 80px 80px;
}

.w95-datetime-travel-button {
  display: block;
  min-width: 120px;
  height: 22px;
  margin: 3px auto 0;
  padding: 1px 6px;
  border: 2px solid;
  border-color: var(--w95-white) var(--w95-dark) var(--w95-dark) var(--w95-white);
  border-radius: 0;
  background: var(--w95-face);
  color: #000;
  font: 10px "MS Sans Serif", Tahoma, sans-serif;
  white-space: nowrap;
}

.w95-datetime-travel-button[hidden] {
  display: none;
}

.w95-datetime-travel-button:active {
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
}

.w95-time-circuit[hidden] {
  display: none;
}

.w95-time-circuit {
  box-sizing: border-box;
  width: 410px;
  max-width: 100%;
  margin: 0 auto;
  padding: 4px 4px 3px;
  border: 2px solid;
  border-color: #e5e5e5 #292929 #292929 #e5e5e5;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #4b4b4b, #777 45%, #454545);
  box-shadow: inset 1px 1px #9b9b9b, inset -1px -1px #1e1e1e;
  animation: w95-time-circuit-on .24s steps(3, end);
}

@keyframes w95-time-circuit-on {
  0% { opacity: 0; filter: brightness(3); }
  45% { opacity: .55; filter: brightness(.5); }
  100% { opacity: 1; filter: brightness(1); }
}

.w95-time-circuit-row {
  --circuit-color: #ff482f;
  margin-bottom: 3px;
  padding: 2px 2px 1px;
  border: 1px solid;
  border-color: #202020 #aaa #aaa #202020;
  background: #292929;
}

.w95-time-circuit-row.is-present { --circuit-color: #43ff70; }
.w95-time-circuit-row.is-last { --circuit-color: #ffc33a; }

.w95-time-circuit-fields {
  display: grid;
  grid-template-columns: 57px 43px 76px 52px 52px 52px;
  justify-content: center;
  gap: 3px;
  align-items: end;
}

.w95-time-circuit-cell {
  display: block;
  min-width: 0;
  color: #d1d1d1;
  text-align: center;
}

.w95-time-circuit-cell > span {
  display: block;
  height: 9px;
  overflow: hidden;
  color: #e6b8ad;
  font: bold 7px Arial, sans-serif;
  line-height: 9px;
  letter-spacing: -.2px;
}

.w95-time-circuit-value {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  height: 31px;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  border: 1px solid #111;
  border-radius: 0;
  background: #050505;
  color: var(--circuit-color);
  box-shadow: inset 1px 1px #000, inset -1px -1px #454545;
  font: bold 22px/29px "Lucida Console", "Courier New", monospace;
  letter-spacing: -2px;
  text-align: center;
  text-shadow: 0 0 3px var(--circuit-color);
}

input.w95-time-circuit-value {
  outline: none;
  caret-color: var(--circuit-color);
}

input.w95-time-circuit-value:focus {
  border-color: var(--circuit-color);
  background: #101010;
}

input.w95-time-circuit-value.is-invalid {
  border-color: #fff;
  color: #fff;
}

.w95-time-circuit-cell.is-meridiem .w95-time-circuit-value {
  font-size: 14px;
  letter-spacing: -1px;
}

.w95-time-circuit-row-title {
  height: 11px;
  margin: 1px auto 0;
  overflow: hidden;
  background: #141414;
  color: #d8d8d8;
  font: bold 8px Arial, sans-serif;
  line-height: 11px;
  letter-spacing: .5px;
  text-align: center;
}

.w95-time-circuit-helper {
  min-height: 20px;
  padding: 1px 2px 0;
  color: #f0f0f0;
  font: 9px/10px "MS Sans Serif", Tahoma, sans-serif;
  text-align: center;
  text-shadow: 1px 1px #000;
}

.w95-datetime-time-group.is-travel-revealed .w95-datetime-clock-wrap,
.w95-datetime-time-group.is-travel-revealed .w95-datetime-time-wrap {
  display: none;
}

.w95-datetime-time-group.is-revealing .w95-clock-hour {
  animation: w95-clock-rewind-hour 1.85s cubic-bezier(.32, 0, .18, 1) forwards;
}

.w95-datetime-time-group.is-revealing .w95-clock-minute {
  animation: w95-clock-rewind-minute 1.85s cubic-bezier(.32, 0, .18, 1) forwards;
}

.w95-datetime-time-group.is-revealing .w95-clock-second {
  animation: w95-clock-rewind-second 1.85s cubic-bezier(.32, 0, .18, 1) forwards;
}

.w95-datetime-time-group.is-revealing .w95-clock-pin {
  animation: w95-clock-pin-out 1.85s ease-in forwards;
}

.w95-datetime-time-group.is-travel-revealed .w95-clock-hour,
.w95-datetime-time-group.is-travel-revealed .w95-clock-minute,
.w95-datetime-time-group.is-travel-revealed .w95-clock-second,
.w95-datetime-time-group.is-travel-revealed .w95-clock-pin {
  opacity: 0;
}

.w95-datetime-time-group.is-returning .w95-clock-hour,
.w95-datetime-time-group.is-returning .w95-clock-minute,
.w95-datetime-time-group.is-returning .w95-clock-second {
  animation: w95-clock-forward 1.85s cubic-bezier(.32, 0, .18, 1) forwards;
}

.w95-datetime-time-group.is-returning .w95-clock-pin {
  animation: w95-clock-pin-in 1.85s ease-out forwards;
}

@keyframes w95-clock-rewind-hour {
  0% { opacity: 1; transform: rotate(0deg); }
  15% { opacity: 1; transform: rotate(-60deg); }
  72% { opacity: 1; transform: rotate(-3300deg); }
  100% { opacity: 0; transform: rotate(-4680deg); }
}

@keyframes w95-clock-rewind-minute {
  0% { opacity: 1; transform: rotate(0deg); }
  15% { opacity: 1; transform: rotate(-90deg); }
  72% { opacity: 1; transform: rotate(-4500deg); }
  100% { opacity: 0; transform: rotate(-6120deg); }
}

@keyframes w95-clock-rewind-second {
  0% { opacity: 1; transform: rotate(0deg); }
  15% { opacity: 1; transform: rotate(-150deg); }
  72% { opacity: 1; transform: rotate(-5400deg); }
  100% { opacity: 0; transform: rotate(-7200deg); }
}

@keyframes w95-clock-forward {
  0% { opacity: 0; transform: rotate(-5400deg); }
  28% { opacity: 1; }
  85% { opacity: 1; transform: rotate(-90deg); }
  100% { opacity: 1; transform: rotate(0deg); }
}

@keyframes w95-clock-pin-out {
  0%, 72% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes w95-clock-pin-in {
  0% { opacity: 0; }
  28%, 100% { opacity: 1; }
}

.w95-datetime-time-wrap {
  width: 142px;
}

.w95-datetime-time-input {
  width: 122px;
  text-align: center;
}

.w95-datetime-current-zone {
  grid-column: 1 / -1;
  align-self: center;
  padding: 1px 2px;
}

.w95-datetime-zone-view {
  box-sizing: border-box;
  height: 100%;
  padding: 10px;
}

.w95-datetime-zone-group {
  height: 100%;
}

.w95-datetime-zone-label {
  display: block;
  margin: 4px 2px;
}

.w95-datetime-zone-select {
  display: block;
  margin-top: 5px;
}

.w95-datetime-zone-map {
  position: relative;
  height: 145px;
  margin: 12px 4px;
  overflow: hidden;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  background: #000080;
}

.w95-datetime-zone-map::before,
.w95-datetime-zone-map::after,
.w95-datetime-zone-map span,
.w95-datetime-zone-map i,
.w95-datetime-zone-map b {
  content: "";
  position: absolute;
  display: block;
  background: #008b8b;
}

.w95-datetime-zone-map::before { left: 9%; top: 28%; width: 27%; height: 24%; transform: skew(-18deg); }
.w95-datetime-zone-map::after { left: 58%; top: 24%; width: 31%; height: 21%; transform: skew(16deg); }
.w95-datetime-zone-map span { left: 24%; top: 53%; width: 14%; height: 34%; transform: rotate(-12deg); }
.w95-datetime-zone-map i { left: 66%; top: 47%; width: 18%; height: 27%; transform: rotate(9deg); }
.w95-datetime-zone-map b { left: 82%; top: 72%; width: 9%; height: 10%; }

.w95-datetime-dst {
  display: block;
  margin: 5px 2px 0;
}

.w95-datetime-buttons {
  display: flex;
  flex: 0 0 39px;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
}

.w95-datetime-buttons .w95-button {
  min-width: 92px;
  height: 28px;
}

.w95-datetime-buttons .w95-button:disabled {
  color: var(--w95-shadow);
  text-shadow: 1px 1px var(--w95-white);
}

/* ===========================================================================
   DISPLAY PROPERTIES
   The controls only style the simulated desktop element. Screen savers are
   in-page animation layers and disappear without disturbing any open window.
   =========================================================================== */

.w95-display-properties {
  display: flex;
  flex-direction: column;
  padding: 8px 9px;
}

.w95-display-tabs {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 25px;
  align-items: flex-end;
  padding-left: 3px;
}

.w95-display-tab {
  box-sizing: border-box;
  height: 24px;
  margin-right: -1px;
  padding: 2px 10px 3px;
  border: 1px solid;
  border-color: var(--w95-white) var(--w95-dark) var(--w95-face) var(--w95-white);
  border-radius: 0;
  background: var(--w95-face);
  color: #000;
  font: 12px var(--w95-font);
  white-space: nowrap;
}

.w95-display-tab.is-active {
  position: relative;
  z-index: 2;
  height: 27px;
  margin-top: -3px;
  padding-top: 3px;
  border-bottom-color: var(--w95-face);
}

.w95-display-tab:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -5px;
}

.w95-display-views {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid;
  border-color: var(--w95-white) var(--w95-dark) var(--w95-dark) var(--w95-white);
  box-shadow: inset 1px 1px 0 var(--w95-face-lit), inset -1px -1px 0 var(--w95-shadow);
}

.w95-display-view {
  box-sizing: border-box;
  height: 100%;
  padding: 10px 13px;
}

.w95-display-view[hidden],
.w95-display-marquee-setting[hidden] {
  display: none !important;
}

.w95-display-monitor {
  position: relative;
  width: 196px;
  height: 142px;
  margin: 0 auto 7px;
}

.w95-display-monitor-bezel {
  position: absolute;
  left: 8px;
  top: 0;
  box-sizing: border-box;
  width: 180px;
  height: 116px;
  padding: 8px 9px 18px;
  border: 2px solid;
  border-color: var(--w95-white) #404040 #404040 var(--w95-white);
  box-shadow: inset 1px 1px 0 #dfdfdf, inset -2px -2px 0 #808080;
  background: #c0c0c0;
}

.w95-display-monitor-screen {
  position: relative;
  box-sizing: border-box;
  width: 158px;
  height: 86px;
  overflow: hidden;
  border: 2px solid;
  border-color: #404040 #fff #fff #404040;
  background: #008080;
}

.w95-display-monitor-screen.is-wallpaper::after,
.w95-display-monitor-screen.is-saver-preview:empty::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  border-top: 1px solid #fff;
  background: #c0c0c0;
}

.w95-display-monitor-controls {
  position: absolute;
  right: 12px;
  bottom: 3px;
  color: #555;
  font: 9px Arial, sans-serif;
}

.w95-display-monitor-neck {
  position: absolute;
  left: 83px;
  top: 114px;
  width: 30px;
  height: 17px;
  border: 1px solid #505050;
  background: #a9a9a9;
}

.w95-display-monitor-foot {
  position: absolute;
  left: 55px;
  top: 130px;
  width: 86px;
  height: 9px;
  border: 1px solid;
  border-color: #fff #404040 #404040 #fff;
  background: #c0c0c0;
}

.w95-display-background-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  gap: 12px;
}

.w95-display-label {
  display: block;
}

.w95-display-wallpaper-list,
.w95-display-select,
.w95-display-wait,
.w95-display-marquee-input {
  box-sizing: border-box;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  border-radius: 0;
  background: #fff;
  color: #000;
  font: 12px var(--w95-font);
}

.w95-display-wallpaper-list {
  display: block;
  width: 100%;
  height: 125px;
  margin-top: 4px;
  padding: 1px;
}

.w95-display-wallpaper-list option {
  padding: 2px 4px;
}

.w95-display-background-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding-top: 17px;
}

.w95-display-background-actions .w95-button {
  width: 94px;
}

.w95-display-pattern-name {
  min-height: 18px;
  padding-left: 3px;
  color: #404040;
}

.w95-display-select {
  display: block;
  width: 100%;
  height: 24px;
  margin-top: 3px;
}

.w95-display-saver-group,
.w95-display-settings-group {
  margin: 0;
  padding: 10px;
  border: 2px groove var(--w95-white);
}

.w95-display-saver-select {
  width: 250px;
  margin: 0;
}

.w95-display-saver-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 8px;
}

.w95-display-saver-options {
  display: grid;
  grid-template-columns: auto 48px auto 1fr;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.w95-display-wait {
  width: 48px;
  height: 23px;
  padding: 1px 3px;
}

.w95-display-password {
  justify-self: end;
  color: var(--w95-shadow);
  text-shadow: 1px 1px #fff;
}

.w95-display-marquee-setting {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.w95-display-marquee-input {
  height: 23px;
  padding: 2px 4px;
}

.w95-display-appearance-sample {
  width: 350px;
  height: 195px;
  margin: 14px auto 20px;
  padding: 8px;
  border: 2px solid;
  border-color: #404040 #fff #fff #404040;
  background: #008080;
}

.w95-display-appearance-sample .w95-titlebar {
  height: 21px;
}

.w95-display-sample-body {
  display: flex;
  height: 135px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  background: #c0c0c0;
}

.w95-display-note {
  margin: 12px 2px 0;
  color: #404040;
  line-height: 1.35;
}

.w95-display-settings-desktop {
  position: absolute;
  inset: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #008080;
  color: #fff;
  font: bold 10px var(--w95-font);
}

.w95-display-settings-group {
  margin: 2px 10px 0;
}

.w95-display-resolution {
  height: 28px;
  margin: 3px 0 8px;
  padding: 5px;
  border: 2px solid;
  border-color: #404040 #fff #fff #404040;
  background: #fff;
  text-align: center;
}

.w95-display-buttons {
  display: flex;
  flex: 0 0 39px;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
}

.w95-display-buttons .w95-button {
  min-width: 88px;
  height: 27px;
}

.w95-display-properties .w95-button:disabled,
.w95-display-properties select:disabled,
.w95-display-properties input:disabled {
  color: var(--w95-shadow);
  text-shadow: 1px 1px #fff;
}

.w95-screensaver-overlay {
  position: absolute;
  inset: 0;
  z-index: 50000;
  overflow: hidden;
  outline: none;
  background: #000;
  cursor: none;
}

.w95-saver-scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}

.w95-saver-flag {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: 38px;
  height: 38px;
  image-rendering: pixelated;
  animation: w95-flying-window 3.1s linear var(--delay) infinite;
}

.w95-display-monitor-screen .w95-saver-flag {
  width: 13px;
  height: 13px;
}

@keyframes w95-flying-window {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.15); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.6); }
}

.w95-saver-star {
  position: absolute;
  left: calc(var(--x) * 1%);
  top: calc(var(--y) * 1%);
  width: 2px;
  height: 2px;
  background: #fff;
  animation: w95-starfield var(--speed) linear var(--delay) infinite;
}

@keyframes w95-starfield {
  0% { opacity: 0; transform: scale(.2); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: scale(5); }
}

.w95-saver-mystify-line {
  position: absolute;
  left: 28%;
  top: 24%;
  width: 44%;
  height: 47%;
  border: 2px solid var(--color);
  transform: skew(23deg) rotate(0deg);
  animation: w95-mystify 4.5s ease-in-out var(--delay) infinite alternate;
}

.w95-display-monitor-screen .w95-saver-mystify-line {
  border-width: 1px;
}

@keyframes w95-mystify {
  0% { transform: translate(-28%, -18%) skew(23deg) rotate(0deg); }
  45% { transform: translate(34%, 12%) skew(-18deg) rotate(135deg); }
  100% { transform: translate(-8%, 32%) skew(8deg) rotate(290deg); }
}

.w95-saver-marquee {
  position: absolute;
  top: 46%;
  left: 100%;
  color: #fff;
  font: bold clamp(18px, 4vw, 44px) "Courier New", monospace;
  white-space: nowrap;
  animation: w95-marquee 8s linear infinite;
}

.w95-display-monitor-screen .w95-saver-marquee {
  font-size: 9px;
  animation-duration: 4s;
}

@keyframes w95-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-100vw - 100%)); }
}

/* ===========================================================================
   START MENU
   =========================================================================== */

.w95-startmenu {
  position: absolute;
  left: 2px;
  bottom: var(--w95-taskbar-h);
  z-index: 20;
  display: none;
  width: 214px;
  padding: 3px;
  background: var(--w95-face);
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow);
}

.w95-startmenu.is-open {
  display: flex;
}

/* The vertical "Prodigy 95" spine down the left edge. */
.w95-startmenu-spine {
  flex: 0 0 24px;
  background: linear-gradient(180deg, var(--w95-title-a2), var(--w95-title-a1));
  color: #fff;
  font: bold 13px var(--w95-font);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
  padding: 8px 4px;
  letter-spacing: 0.5px;
}

.w95-startmenu-items {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding-left: 2px;
}

.w95-startitem {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: 27px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #000;
  font: 12px var(--w95-font);
  justify-content: flex-start;
  text-align: left;
  cursor: default;
}

.w95-startitem img {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  image-rendering: pixelated;
}

.w95-startitem span {
  flex: 1 1 auto;
}

.w95-startitem .w95-arrow {
  flex: 0 0 auto;
  font-size: 10px;
}

.w95-startitem:hover,
.w95-startitem.is-open {
  background: var(--w95-title-a1);
  color: #fff;
}

.w95-startsep {
  height: 2px;
  margin: 3px 2px;
  border-top: 1px solid var(--w95-shadow);
  border-bottom: 1px solid var(--w95-white);
}

.w95-submenu {
  position: absolute;
  z-index: 21;
  display: none;
  min-width: 176px;
  padding: 3px;
  background: var(--w95-face);
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow);
}

.w95-submenu.is-open {
  display: block;
}

.w95-submenu .w95-startitem {
  height: 24px;
}

.w95-submenu .w95-startitem img {
  width: 16px;
  height: 16px;
}

/* ===========================================================================
   WORKING ACCESSORIES
   Calculator, the text editors, Character Map and Paint run wholly in the
   browser. Their document area uses the same inset borders as Windows 95.
   =========================================================================== */

.w95-accessory-window .w95-window-content {
  overflow: hidden;
  background: var(--w95-face);
}

.w95-accessory {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 8px;
  color: #000;
  font: 12px var(--w95-font);
}

.w95-accessory-toolbar {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 29px;
  margin: -8px -8px 7px;
  padding: 4px 6px;
  border-bottom: 1px solid var(--w95-shadow);
  box-shadow: inset 0 -1px 0 var(--w95-white);
}

.w95-calculator {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.w95-calc-display {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 4px 7px;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  border-radius: 0;
  background: #fff;
  color: #000;
  font: 24px "Courier New", monospace;
  text-align: right;
}

.w95-calc-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 42px;
  gap: 7px;
}

.w95-calc-keys .w95-button {
  min-width: 0;
  height: 100%;
  padding: 0;
  font-size: 14px;
}

.w95-calc-keys .is-equals {
  font-weight: bold;
  color: #000080;
}

.w95-text-accessory {
  display: flex;
  flex-direction: column;
}

.w95-text-editor {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  padding: 5px;
  resize: none;
  overflow: auto;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  border-radius: 0;
  outline: 0;
  background: #fff;
  color: #000;
  font: 14px "Courier New", monospace;
  white-space: pre-wrap;
}

.w95-text-editor.is-rich {
  font-family: "Times New Roman", serif;
}

.w95-accessory-status {
  flex: 0 0 auto;
  margin-top: 4px;
  padding: 2px 5px;
  border: 1px solid;
  border-color: var(--w95-shadow) var(--w95-white) var(--w95-white) var(--w95-shadow);
}

.w95-charmap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.w95-char-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
  overflow: auto;
  padding: 3px;
  background: #fff;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
}

.w95-char-button {
  min-width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #808080;
  border-radius: 0;
  background: #fff;
  font: 18px "Times New Roman", serif;
}

.w95-char-button:focus,
.w95-char-button:hover {
  outline: 2px solid #000080;
  outline-offset: -2px;
}

.w95-char-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.w95-char-selected {
  width: 60px;
  height: 31px;
  border-radius: 0;
  background: #fff;
  font: 22px "Times New Roman", serif;
  text-align: center;
}

.w95-paint {
  display: flex;
  flex-direction: column;
}

.w95-paint-color {
  width: 42px;
  height: 24px;
  padding: 0;
  border-radius: 0;
}

.w95-paint-size {
  height: 24px;
  border-radius: 0;
  font: 12px var(--w95-font);
}

.w95-paint-canvas {
  box-sizing: border-box;
  display: block;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  touch-action: none;
  cursor: crosshair;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  background: #fff;
}

.w95-volume-control {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 22px;
}

.w95-volume-control label:first-child {
  display: grid;
  gap: 8px;
  font-weight: bold;
}

.w95-volume-control input[type="range"] {
  width: 100%;
}

.w95-volume-mute {
  padding-top: 10px;
  border-top: 1px solid var(--w95-shadow);
}

/* The DOS prompt is intentionally a local terminal-shaped toy. Its scrollback
   and input share the black client surface so it reads like COMMAND.COM. */
.w95-accessory-window:has(.w95-dos) .w95-window-content {
  background: #000;
}

.w95-dos {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 5px 7px 7px;
  overflow: hidden;
  background: #000;
  color: #c0c0c0;
  font: 16px/1.22 "Courier New", "Lucida Console", monospace;
}

.w95-dos-output {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-color: #c0c0c0 #000;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.w95-dos-line {
  min-height: 1.22em;
}

.w95-dos-command {
  min-height: 1.22em;
  color: #fff;
}

.w95-dos-matrix {
  color: #00ff00;
  text-shadow: 0 0 3px #008000;
}

.w95-dos-input-row {
  display: flex;
  flex: 0 0 auto;
  align-items: baseline;
  min-width: 0;
  margin: 0;
  color: #fff;
}

.w95-dos-prompt {
  flex: 0 0 auto;
  white-space: pre;
}

.w95-dos-input {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  height: 1.3em;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: #000;
  color: #fff;
  caret-color: #fff;
  font: inherit;
}

@media (max-height: 720px) {
  .w95-dos { font-size: 14px; }
}

/* ScanDisk keeps the compact dialog layout of the Windows 95 utility. The
   surface map appears only for a Thorough scan. */
.w95-scandisk {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 10px 6px;
  overflow: auto;
  font: 12px var(--w95-font);
}

.w95-scandisk-lead {
  flex: 0 0 auto;
}

.w95-scandisk-drives {
  box-sizing: border-box;
  flex: 0 0 63px;
  width: 100%;
  padding: 2px;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  border-radius: 0;
  background: #fff;
  color: #000;
  font: 12px var(--w95-font);
}

.w95-scandisk-test-group,
.w95-scandisk-options-group {
  margin: 0;
  padding: 5px 8px 7px;
  border: 2px groove var(--w95-white);
}

.w95-scandisk-test-group legend,
.w95-scandisk-options-group legend {
  padding: 0 4px;
}

.w95-scandisk-test-choice {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 2px 0 6px;
}

.w95-scandisk-test-choice > span,
.w95-scandisk-test-choice small {
  display: block;
}

.w95-scandisk-test-choice small {
  margin-top: 2px;
}

.w95-scandisk-auto {
  flex: 0 0 auto;
}

.w95-scandisk-progress-panel {
  flex: 0 0 auto;
  min-height: 67px;
  padding: 6px;
  border: 2px solid;
  border-color: var(--w95-shadow) var(--w95-white) var(--w95-white) var(--w95-shadow);
  background: var(--w95-face);
}

.w95-scandisk-action,
.w95-scandisk-path {
  min-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w95-scandisk-path {
  color: #000080;
}

.w95-scandisk-progress {
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  gap: 1px;
  height: 15px;
  margin-top: 3px;
  padding: 2px;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  background: #fff;
}

.w95-scandisk-progress i { background: transparent; }
.w95-scandisk-progress i.is-filled { background: #000080; }

.w95-scandisk-progress-text {
  padding-top: 2px;
  text-align: center;
}

.w95-scandisk-surface {
  flex: 0 0 auto;
}

.w95-scandisk-surface[hidden] {
  display: none !important;
}

.w95-scandisk-grid {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: 1px;
  padding: 5px;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  background: #808080;
}

.w95-scandisk-grid i,
.w95-scandisk-legend i {
  box-sizing: border-box;
  border: 1px solid #404040;
  background: #fff;
}

.w95-scandisk-grid i {
  aspect-ratio: 1;
  min-height: 8px;
}

.w95-scandisk-grid .is-checked,
.w95-scandisk-legend .is-checked { background: #00aaaa; }
.w95-scandisk-grid .is-data,
.w95-scandisk-legend .is-data { background: #0000aa; }
.w95-scandisk-grid .is-system,
.w95-scandisk-legend .is-system { background: #000; }
.w95-scandisk-grid .is-bad,
.w95-scandisk-legend .is-bad { background: #ff0000; }

.w95-scandisk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding-top: 4px;
}

.w95-scandisk-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.w95-scandisk-legend i {
  width: 11px;
  height: 11px;
}

.w95-scandisk-last {
  flex: 0 0 auto;
  color: #555;
}

.w95-scandisk-controls {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 8px;
}

.w95-scandisk-controls .w95-button {
  min-width: 80px;
}

.w95-scandisk-controls .w95-button:disabled,
.w95-scandisk input:disabled + span {
  color: var(--w95-shadow);
  text-shadow: 1px 1px var(--w95-white);
}

.w95-scandisk-safety {
  margin: 0 -7px -3px;
}

.w95-scandisk-advanced {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
  overflow: auto;
  font: 12px var(--w95-font);
}

.w95-scandisk-options-group label,
.w95-scandisk-advanced-checks label {
  display: block;
  margin: 4px 0;
}

.w95-scandisk-advanced-checks {
  grid-column: 1 / -1;
  padding: 2px 8px;
}

.w95-scandisk-advanced .w95-scandisk-controls {
  grid-column: 1 / -1;
}

.w95-scandisk-results .w95-msgbox-body > div {
  white-space: pre-line;
}

@media (max-height: 720px) {
  .w95-scandisk { gap: 4px; padding-top: 5px; }
  .w95-scandisk-test-choice { margin-bottom: 2px; }
  .w95-scandisk-grid i { min-height: 6px; }
}

.w95-defrag {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 8px 6px;
  font: 12px var(--w95-font);
}

.w95-defrag-menu {
  display: flex;
  flex: 0 0 auto;
  margin: 0 -8px;
  padding: 1px 3px 2px;
  border-bottom: 1px solid var(--w95-shadow);
}

.w95-defrag-menu-button {
  padding: 3px 7px;
  border: 0;
  background: transparent;
  color: #000;
  font: 12px var(--w95-font);
}

.w95-defrag-menu-button:active,
.w95-defrag-menu-button:focus {
  outline: 1px dotted #000;
  outline-offset: -2px;
}

.w95-defrag-drive-row {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
}

.w95-defrag-drive-row label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.w95-defrag-select {
  min-width: 190px;
  height: 23px;
  padding: 1px 4px;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  border-radius: 0;
  background: #fff;
  color: #000;
  font: 12px var(--w95-font);
}

.w95-defrag-machine {
  margin-left: auto;
  color: #000080;
  font-weight: bold;
}

.w95-defrag-headline {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: bold;
}

.w95-defrag-map {
  position: relative;
  flex: 1 1 230px;
  min-height: 160px;
  overflow: hidden;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  background: #808080;
}

.w95-defrag-map canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

.w95-defrag-legend {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.w95-defrag-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.w95-defrag-legend i {
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  border: 1px solid #000;
}

.w95-defrag-action {
  flex: 0 0 auto;
  min-height: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w95-defrag-progress {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(25, 1fr);
  gap: 2px;
  height: 18px;
  padding: 2px;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  background: #fff;
}

.w95-defrag-progress i { background: transparent; }
.w95-defrag-progress i.is-filled { background: #000080; }

.w95-defrag-progress-text {
  flex: 0 0 auto;
  text-align: center;
}

.w95-defrag-details {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: max-content minmax(55px, 1fr) max-content minmax(95px, 1fr);
  gap: 2px 9px;
  padding: 5px 7px;
  border: 2px solid;
  border-color: var(--w95-shadow) var(--w95-white) var(--w95-white) var(--w95-shadow);
}

.w95-defrag-details strong {
  text-align: right;
}

.w95-defrag-activity {
  display: inline-grid;
  grid-template-columns: repeat(8, 8px);
  gap: 2px;
  align-items: center;
}

.w95-defrag-activity i {
  height: 10px;
  border: 1px solid #808080;
  background: #fff;
}

.w95-defrag-activity i.is-on {
  border-color: #004f00;
  background: #00aa00;
}

.w95-defrag-controls {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  gap: 8px;
}

.w95-defrag-controls .w95-button {
  min-width: 76px;
}

.w95-defrag-controls .w95-button:disabled {
  color: var(--w95-shadow);
  text-shadow: 1px 1px var(--w95-white);
}

.w95-defrag-status {
  margin-top: 0;
}

@media (max-height: 720px) {
  .w95-defrag-details { display: none; }
  .w95-defrag-map { min-height: 130px; }
}

.w95-explorer {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 3px;
}

.w95-explorer-menubar {
  margin: -3px -3px 0;
}

.w95-explorer-menubar .w95-menu.is-dismissed > .w95-menu-popup {
  display: none !important;
}

.w95-explorer-toolbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 3px;
  min-height: 31px;
  padding: 3px;
  border: 1px solid;
  border-color: var(--w95-white) var(--w95-shadow) var(--w95-shadow) var(--w95-white);
}

.w95-explorer-toolbar .w95-button {
  min-width: 0;
  height: 25px;
  padding: 0 8px;
}

.w95-explorer-toolbar .w95-button:active {
  padding: 1px 7px 0 9px;
}

.w95-explorer-toolbar .w95-button:disabled {
  color: var(--w95-shadow);
  text-shadow: 1px 1px var(--w95-white);
}

.w95-explorer-toolbar-sep {
  align-self: stretch;
  width: 2px;
  margin: 1px 2px;
  border-left: 1px solid var(--w95-shadow);
  border-right: 1px solid var(--w95-white);
}

.w95-explorer-addressbar {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-height: 29px;
  padding: 3px 5px;
  border-bottom: 1px solid var(--w95-shadow);
  box-shadow: inset 0 -1px var(--w95-white);
  font: 12px var(--w95-font);
}

.w95-explorer-address {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  height: 23px;
  padding: 2px 5px;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  border-radius: 0;
  background: #fff;
  color: #000;
  font: 12px var(--w95-font);
}

.w95-explorer-files {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 3px;
  padding: 5px;
  overflow: auto;
  border: 2px solid;
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
  background: #fff;
}

.w95-explorer-files.is-large {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  align-content: start;
  gap: 8px;
  padding: 10px;
}

.w95-explorer-files.is-small {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  align-content: start;
  gap: 2px 8px;
}

.w95-explorer-files.is-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 220px;
  grid-template-rows: repeat(auto-fill, 27px);
  align-content: start;
  justify-content: start;
  gap: 1px 10px;
}

.w95-explorer-files.is-details {
  display: block;
  padding: 0;
}

.w95-explorer-item {
  box-sizing: border-box;
  min-width: 0;
  margin: 0;
  padding: 3px;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: #000;
  font: 12px var(--w95-font);
  cursor: default;
}

.w95-explorer-name {
  min-width: 0;
}

.w95-explorer-label {
  min-width: 0;
}

.w95-explorer-name img {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  image-rendering: pixelated;
}

.w95-explorer-files.is-large .w95-explorer-item {
  min-height: 72px;
  text-align: center;
}

.w95-explorer-files.is-large .w95-explorer-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.w95-explorer-files.is-large .w95-explorer-label {
  overflow-wrap: anywhere;
}

.w95-explorer-files.is-small .w95-explorer-item,
.w95-explorer-files.is-list .w95-explorer-item {
  height: 27px;
  padding: 1px 3px;
  text-align: left;
}

.w95-explorer-files.is-small .w95-explorer-name,
.w95-explorer-files.is-list .w95-explorer-name {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 100%;
}

.w95-explorer-files.is-small .w95-explorer-name img,
.w95-explorer-files.is-list .w95-explorer-name img {
  width: 20px;
  height: 20px;
}

.w95-explorer-files.is-small .w95-explorer-label,
.w95-explorer-files.is-list .w95-explorer-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w95-explorer-details-header,
.w95-explorer-files.is-details .w95-explorer-item {
  display: grid;
  grid-template-columns: minmax(210px, 1fr) 90px minmax(145px, 0.7fr) 160px;
  align-items: center;
}

.w95-explorer-details-header {
  position: sticky;
  top: 0;
  z-index: 2;
  height: 23px;
  background: var(--w95-face);
}

.w95-explorer-details-header button {
  height: 23px;
  min-width: 0;
  padding: 1px 5px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--w95-white) var(--w95-dark) var(--w95-dark) var(--w95-white);
  background: var(--w95-face);
  color: #000;
  font: 12px var(--w95-font);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w95-explorer-details-header button:active {
  border-color: var(--w95-dark) var(--w95-white) var(--w95-white) var(--w95-dark);
}

.w95-explorer-files.is-details .w95-explorer-item {
  width: 100%;
  height: 25px;
  padding: 0;
  text-align: left;
}

.w95-explorer-files.is-details .w95-explorer-name {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 1px 5px;
}

.w95-explorer-files.is-details .w95-explorer-name img {
  width: 18px;
  height: 18px;
}

.w95-explorer-files.is-details .w95-explorer-label,
.w95-explorer-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w95-explorer-cell {
  min-width: 0;
  padding: 0 5px;
}

.w95-explorer-size {
  text-align: right;
}

.w95-game-file-dos img { background: #d9f2d9; }
.w95-game-file-c64 img { background: #dfdeff; }
.w95-game-file-console img { background: #ffe0e0; }
.w95-game-file-win img { background: #dcefff; }

.w95-explorer-item:focus {
  outline: none;
}

.w95-explorer-item.is-selected .w95-explorer-label {
  padding: 1px 2px;
  background: var(--w95-title-a1);
  color: #fff;
}

.w95-explorer-item:focus .w95-explorer-label {
  outline: 1px dotted #000;
  outline-offset: -1px;
}

.w95-explorer-files.is-details .w95-explorer-item.is-selected {
  background: var(--w95-title-a1);
  color: #fff;
}

.w95-explorer-files.is-details .w95-explorer-item.is-selected .w95-explorer-label {
  padding: 0;
  background: transparent;
}

.w95-explorer-files.is-details .w95-explorer-item:focus {
  outline: 1px dotted #000;
  outline-offset: -2px;
}

.w95-explorer-status {
  display: grid;
  grid-template-columns: minmax(115px, auto) minmax(0, 1fr) minmax(115px, auto);
  gap: 2px;
  min-height: 23px;
  padding: 2px;
  border: 0;
  background: var(--w95-face);
}

.w95-explorer-status > span {
  min-width: 0;
  padding: 2px 5px;
  overflow: hidden;
  border: 1px solid;
  border-color: var(--w95-shadow) var(--w95-white) var(--w95-white) var(--w95-shadow);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w95-explorer-context {
  position: absolute;
  top: 0;
  z-index: 90;
  display: block;
  min-width: 190px;
}

/* ===========================================================================
   MESSAGE BOX (for icons/menu entries that are decorative only)
   =========================================================================== */

.w95-msgbox {
  position: absolute;
  z-index: 30;
  width: 340px;
  padding: 3px;
  background: var(--w95-face);
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow);
}

.w95-msgbox-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 14px 10px;
  font: 12px var(--w95-font);
  line-height: 1.35;
}

.w95-msgbox-body img {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  image-rendering: pixelated;
}

.w95-msgbox-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 4px 0 12px;
}

.w95-button {
  min-width: 75px;
  height: 23px;
  padding: 0 10px;
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow);
  border-radius: 0;
  background: var(--w95-face);
  color: #000;
  font: 12px var(--w95-font);
  cursor: default;
}

.w95-button:active {
  border-color: var(--w95-dark) var(--w95-face-lit) var(--w95-face-lit) var(--w95-dark);
  box-shadow: inset 1px 1px 0 var(--w95-shadow), inset -1px -1px 0 var(--w95-white);
  padding: 1px 9px 0 11px;
}

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

/* ===========================================================================
   SHUT DOWN SCREEN
   =========================================================================== */

.w95-shutdown {
  position: fixed;
  inset: 0;
  z-index: 40000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #ffa000;
  font: bold clamp(18px, 3.2vw, 34px) var(--w95-font);
  text-align: center;
  letter-spacing: 1px;
  cursor: default;
}

/* ===========================================================================
   HOSTING THE EXISTING PRODIGY CLIENT INSIDE THE WINDOW
   Everything below only applies while the shell is on.
   =========================================================================== */

body.w95-on.chat-web-page {
  min-height: 0;
  background: transparent;
}

body.w95-on .chat-web-app {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  /* Restated rather than inherited, so no future desktop-wide font rule can
     reach into the service again. */
  font-family: Arial, Helvetica, sans-serif;
}

/* The service shell becomes the window's client area: title bar and menu bar
   pinned, the white main screen taking whatever height is left. Because the
   main screen's panels are anchored with `bottom:`, they reflow for real as
   the window grows or shrinks - they are not scaled. */
body.w95-on .prodigy-service-shell {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 0;
  box-shadow: none;
}

/* The white main screen takes whatever height the window leaves it. Both the
   Classic (724px) and Large (880px) floors have to go, or the screen would
   overflow the window instead of reflowing inside it - its panels are anchored
   with `bottom:`, so they follow the height for real. */
body.w95-on .chat-main-screen,
body.w95-on .chat-web-app[data-window-size="large"] .chat-main-screen {
  flex: 1 1 auto;
  min-height: 0;
}

body.w95-on .prodigy-os-titlebar {
  cursor: default;
  background: linear-gradient(90deg, var(--w95-title-a1), var(--w95-title-a2));
  padding: 1px 2px 1px 4px;
}

body.w95-on .w95-window[data-w95-active="false"] .prodigy-os-titlebar {
  background: linear-gradient(90deg, var(--w95-title-i1), var(--w95-title-i2));
  color: #dfdfdf;
}

body.w95-on .prodigy-os-controls button {
  width: 16px;
  height: 14px;
  border: 1px solid;
  border-color: var(--w95-face-lit) var(--w95-dark) var(--w95-dark) var(--w95-face-lit);
  box-shadow: inset 1px 1px 0 var(--w95-white), inset -1px -1px 0 var(--w95-shadow);
  background: var(--w95-face);
  font: bold 10px var(--w95-font);
  cursor: default;
}

body.w95-on .prodigy-os-controls button:active {
  border-color: var(--w95-dark) var(--w95-face-lit) var(--w95-face-lit) var(--w95-dark);
  box-shadow: inset 1px 1px 0 var(--w95-shadow), inset -1px -1px 0 var(--w95-white);
}

body.w95-on .prodigy-os-controls button[data-w95-action="close"] {
  margin-left: 2px;
}

/* The guest countdown banner is appended to <body> by chat_web.js; the desktop
   is shifted down by its height (--w95-top) rather than sitting under it. */
body.w95-on #guest-banner {
  z-index: 40001;
}

/* ===========================================================================
   SMALL SCREENS
   The shell switches itself off below ~1000px of viewport width (see
   w95_desktop.js). `display: contents` dissolves the wrapper boxes so the
   transform/containing block disappears and the page lays out exactly as it
   did before the desktop existed.
   =========================================================================== */

body:not(.w95-on) .w95-desktop,
body:not(.w95-on) .w95-workarea,
body:not(.w95-on) .w95-windows,
body:not(.w95-on) .w95-window,
body:not(.w95-on) .w95-window-frame {
  display: contents;
}

body:not(.w95-on) .w95-icons,
body:not(.w95-on) .w95-taskbar,
body:not(.w95-on) .w95-startmenu,
body:not(.w95-on) .w95-resizer {
  display: none;
}

/* --- menu flyouts (Goodies > Bookmarks) ---------------------------------
   A submenu opens to the RIGHT of its parent item, the way a Windows 95 menu
   does, rather than below it. The parent popup must not clip it, so the
   flyout is positioned against the item and the popup keeps its own overflow
   visible. Hover-driven like the rest of this menubar - no JS state to get
   out of step with the CSS.
   ------------------------------------------------------------------------ */
.w95-menu-item-sub {
  position: relative;
}

.w95-menu-item-sub > button {
  width: 100%;
}

.w95-menu-arrow {
  margin-left: auto;
  padding-left: 18px;
  font-size: 10px;
  line-height: 1;
}

.w95-menu-sub {
  left: 100%;
  top: -3px;
  min-width: 184px;
  max-height: 70vh;
  overflow-y: auto;
}

.w95-menu-item-sub:hover > .w95-menu-sub,
.w95-menu-item-sub:focus-within > .w95-menu-sub {
  display: block;
}

/* A flyout close to the right edge would otherwise run off the window. */
@media (max-width: 900px) {
  .w95-menu-sub { left: auto; right: 100%; }
}

/* --- Edit Bookmarks dialog ---------------------------------------------- */
.bookmark-dialog {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.35);
  font-family: Arial, Helvetica, sans-serif;
}

.bookmark-dialog[hidden] { display: none; }

.bookmark-dialog-frame {
  width: min(640px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #c0c0c0;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
  color: #000;
  font-size: 12px;
}

.bookmark-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #000080;
  color: #fff;
  font: bold 12px Arial, Helvetica, sans-serif;
  padding: 3px 3px 3px 6px;
}

.bookmark-close {
  width: 18px;
  height: 17px;
  padding: 0;
  background: #c0c0c0;
  color: #000;
  font: bold 11px Arial, Helvetica, sans-serif;
  line-height: 1;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #404040;
  border-bottom: 1px solid #404040;
  border-radius: 0;
  cursor: pointer;
}

.bookmark-body {
  padding: 10px;
  overflow-y: auto;
}

.bookmark-hint,
.bookmark-note,
.bookmark-empty {
  margin: 0 0 8px;
  color: #333;
  font-size: 11px;
}

.bookmark-list {
  background: #fff;
  border: 1px solid #808080;
  padding: 2px;
  min-height: 62px;
  max-height: 220px;
  overflow-y: auto;
  margin-bottom: 8px;
}

.bookmark-empty { padding: 8px; margin: 0; }

.bookmark-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-bottom: 1px solid #e6e6e6;
}
.bookmark-row:last-child { border-bottom: 0; }
.bookmark-row.is-editing { background: #ffffcc; }

.bookmark-row-main {
  flex: 1 1 auto;
  min-width: 0;
  cursor: default;
}
.bookmark-row-main:focus-visible { outline: 1px dotted #000; }

.bookmark-row-title {
  display: block;
  font-weight: bold;
}

.bookmark-row-url {
  display: block;
  color: #0000aa;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bookmark-row-check {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  white-space: nowrap;
}

.bookmark-suggestions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
  font-size: 11px;
}

.bookmark-suggestion,
.bookmark-button {
  padding: 3px 10px;
  background: #c0c0c0;
  color: #000;
  font: 11px Arial, Helvetica, sans-serif;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #808080;
  border-bottom: 2px solid #808080;
  border-radius: 0;
  cursor: pointer;
}
.bookmark-button { font-size: 12px; min-width: 74px; }
.bookmark-suggestion:active,
.bookmark-button:active {
  border-top-color: #808080;
  border-left-color: #808080;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
}
.bookmark-suggestion:disabled,
.bookmark-button:disabled { color: #808080; cursor: default; }

.bookmark-form {
  border-top: 1px solid #9a9a9a;
  padding-top: 10px;
}

.bookmark-field { margin-bottom: 6px; }
.bookmark-field label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bookmark-field input[type="text"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px 5px;
  background: #fff;
  border-top: 1px solid #808080;
  border-left: 1px solid #808080;
  border-right: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  border-radius: 0;
  font: 12px Arial, Helvetica, sans-serif;
}

.bookmark-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 2px;
  font-weight: bold;
}

.bookmark-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.bookmark-status { font-size: 11px; color: #7a0000; }

/* --- an emulated title running in a desktop window ------------------------
   Games opened from Start > Programs > Accessories > Games run here rather
   than on the Packard Bell shelf. The splash covers the frame until it loads,
   because an archive item fetches a whole Windows 3.1 image first and an empty
   white rectangle looks like a failure.
   ------------------------------------------------------------------------ */
.w95-emu {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
  background: #000;
}

.w95-emu-stage {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #000;
}

.w95-emu-stage iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  border: 0;
  background: #000;
  visibility: hidden;
  transform-origin: center center;
}

.w95-emu-stage iframe.is-ready { visibility: visible; }

.w95-emu-splash {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #000;
  color: #d8d8d8;
  font: 14px var(--w95-font);
  text-align: center;
  z-index: 2;
}

.w95-emu-splash.is-done { display: none; }
.w95-emu-stage .w95-emu-splash { bottom: 0; }
.w95-emu-sub { font-size: 12px; color: #8a8a8a; }

@keyframes w95-emu-dots { 0% { opacity: 0.2; } 50% { opacity: 1; } 100% { opacity: 0.2; } }
.w95-emu-dots { animation: w95-emu-dots 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .w95-emu-dots { animation: none; } }

.w95-emu-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 26px;
  padding: 0 8px;
  background: var(--w95-face);
  border-top: 1px solid var(--w95-white);
  color: #000;
  font: 11px var(--w95-font);
}

.w95-emu-bar span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.w95-emu-bar a { color: #000080; }