/* ==========================================================
   3.1.css — Windows 3.1 for the modern web
   Requires 640K. Should be enough for anyone.
   Usage: <link rel="stylesheet" href="3.1.css">
   ========================================================== */
:root {
  --w31-desktop: #a8a8a8;
  --w31-face: #c0c0c0;
  --w31-shadow: #808080;
  --w31-light: #ffffff;
  --w31-dark: #000000;
  --w31-title: #a4c8f0;
  --w31-title-text: #000000;
  --w31-title-inactive: #ffffff;
  --w31-title-inactive-text: #000000;
  --w31-frame: #c0c0c0;
  --w31-window: #ffffff;
  --w31-app: #fffbf0;
  --w31-text: #000000;
  --w31-highlight: #000080;
  --w31-highlight-text: #ffffff;
  --w31-menu: #ffffff;
  --w31-font: "MS Sans Serif", "Microsoft Sans Serif", Arial, sans-serif;
  --w31-cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='19' shape-rendering='crispEdges'><path d='M0.5 0.5v16l4-4 3 6 2-1-3-6h5z' fill='white' stroke='black'/></svg>") 0 0, default;
}

.desktop, .w31 {
  background: var(--w31-desktop);
  font-family: var(--w31-font);
  font-size: 13px;
  color: var(--w31-text);
  -webkit-font-smoothing: none;
  font-smooth: never;
  cursor: var(--w31-cursor);
  margin: 0;
  min-height: 100vh;
}
.desktop *, .w31 * { cursor: inherit; }

/* ---------- Window ---------- */
.window {
  background: var(--w31-frame);
  border: 1px solid var(--w31-dark);
  padding: 3px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.window > .inner {
  border: 1px solid var(--w31-dark);
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  background: var(--w31-window);
}
.title-bar {
  display: flex; align-items: stretch;
  height: 19px;
  background: var(--w31-title);
  color: var(--w31-title-text);
  border-bottom: 1px solid var(--w31-dark);
  user-select: none;
  flex-shrink: 0;
}
.window.inactive .title-bar { background: var(--w31-title-inactive); color: var(--w31-title-inactive-text); }
.title-bar-text {
  flex: 1; text-align: center; font-weight: bold; line-height: 19px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.title-bar-controls { display: flex; }
.title-bar button {
  width: 19px; height: 19px; min-width: 0; padding: 0; margin: 0;
  border: none; border-radius: 0;
  background: var(--w31-face);
  box-shadow: inset -1px -1px var(--w31-shadow), inset 1px 1px var(--w31-light);
  position: relative; outline: none;
}
.title-bar-controls button { border-left: 1px solid var(--w31-dark); }
.title-bar button.ctl { border-right: 1px solid var(--w31-dark); box-shadow:none; }
.title-bar button:active { box-shadow: inset 1px 1px var(--w31-shadow); }
.title-bar button[aria-label=Control]::after {
  content:""; position:absolute; left:4px; top:8px; width:10px; height:3px;
  background: var(--w31-light); border:1px solid var(--w31-dark); box-sizing:border-box;
  box-shadow: 1px 1px 0 var(--w31-shadow);
}
.title-bar button[aria-label=Minimize]::after,
.title-bar button[aria-label=Maximize]::after {
  content:""; position:absolute; left:5px; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent;
}
.title-bar button[aria-label=Minimize]::after { top:7px; border-top:4px solid var(--w31-dark); }
.title-bar button[aria-label=Maximize]::after { top:6px; border-bottom:4px solid var(--w31-dark); }
.title-bar button[aria-label=Restore]::before,
.title-bar button[aria-label=Restore]::after {
  content:""; position:absolute; left:5px; width:0; height:0;
  border-left:4px solid transparent; border-right:4px solid transparent;
}
.title-bar button[aria-label=Restore]::before { top:3px; border-bottom:4px solid var(--w31-dark); }
.title-bar button[aria-label=Restore]::after { top:10px; border-top:4px solid var(--w31-dark); }

/* ---------- Menu bar ---------- */
.menu-bar {
  display:flex; background: var(--w31-menu); border-bottom:1px solid var(--w31-dark);
  height: 19px; user-select:none; flex-shrink:0; position:relative;
}
.menu-bar > .menu-item { padding: 1px 8px; line-height: 17px; position:relative; }
.menu-bar > .menu-item.open { background: var(--w31-highlight); color: var(--w31-highlight-text); }
.menu-dropdown {
  position:absolute; top:19px; left:0; z-index:999;
  background: var(--w31-menu); color: var(--w31-text);
  border:1px solid var(--w31-dark); box-shadow: 2px 2px 0 var(--w31-dark);
  min-width: 160px; padding: 1px 0;
}
.menu-dropdown > div { padding: 2px 18px; white-space:nowrap; }
.menu-dropdown > div:hover { background: var(--w31-highlight); color: var(--w31-highlight-text); }
.menu-dropdown > hr { border:0; border-top:1px solid var(--w31-dark); margin:3px 0; }

.window-body { flex:1; overflow:auto; position:relative; background: var(--w31-window); min-height:0; }
.window-body.app { background: var(--w31-app); }
.window-body.pad { padding: 10px; }

/* ---------- Buttons ---------- */
button, .btn {
  font-family: var(--w31-font); font-size: 13px; color: var(--w31-text);
  background: var(--w31-face);
  min-width: 70px; padding: 4px 10px;
  border: 1px solid var(--w31-dark); border-radius: 3px;
  box-shadow: inset -2px -2px var(--w31-shadow), inset 2px 2px var(--w31-light);
  outline: none;
}
button:active, .btn:active {
  box-shadow: inset 1px 1px var(--w31-shadow); padding: 5px 9px 3px 11px;
}
button.default { border-width: 2px; }
button:focus-visible span, button:focus-visible { outline: 1px dotted var(--w31-dark); outline-offset: -5px; }
button:disabled { color: var(--w31-shadow); text-shadow: 1px 1px var(--w31-light); }

/* ---------- Inputs ---------- */
input[type=text], input[type=password], textarea, select {
  font-family: var(--w31-font); font-size: 13px;
  border: 1px solid var(--w31-dark); border-radius:0; background: var(--w31-light);
  padding: 2px 4px; outline: none; color: var(--w31-text);
}
input[type=text]:focus::selection, textarea::selection { background: var(--w31-highlight); color: var(--w31-highlight-text); }
input[type=checkbox], input[type=radio] {
  appearance:none; -webkit-appearance:none; width:13px; height:13px; margin:0 6px 0 0;
  border:1px solid var(--w31-dark); background: var(--w31-light); vertical-align:-2px; position:relative;
}
input[type=radio] { border-radius:50%; }
input[type=checkbox]:checked { background:
  linear-gradient(45deg, transparent 45%, #000 45%, #000 55%, transparent 55%),
  linear-gradient(-45deg, transparent 45%, #000 45%, #000 55%, transparent 55%), var(--w31-light); }
input[type=radio]:checked::after { content:""; position:absolute; inset:3px; border-radius:50%; background: var(--w31-dark); }

fieldset { border:1px solid var(--w31-dark); padding: 8px 10px; margin: 8px 0; }
legend { padding: 0 3px; }

/* ---------- Icons ---------- */
.icon {
  display:inline-flex; flex-direction:column; align-items:center; width:76px;
  text-align:center; user-select:none; vertical-align:top;
}
.icon img, .icon svg { width:32px; height:32px; image-rendering:pixelated; }
.icon span { margin-top:3px; padding: 0 2px; line-height: 13px; }
.icon.selected span { background: var(--w31-highlight); color: var(--w31-highlight-text); }

/* ---------- Scrollbars ---------- */
.desktop ::-webkit-scrollbar, .w31 ::-webkit-scrollbar { width:17px; height:17px; }
.desktop ::-webkit-scrollbar-track, .w31 ::-webkit-scrollbar-track { background: #e0e0e0; border-left:1px solid #000; }
.desktop ::-webkit-scrollbar-thumb, .w31 ::-webkit-scrollbar-thumb {
  background: var(--w31-face); border:1px solid #000;
  box-shadow: inset -2px -2px var(--w31-shadow), inset 2px 2px var(--w31-light);
}
.desktop ::-webkit-scrollbar-button:single-button, .w31 ::-webkit-scrollbar-button:single-button {
  background: var(--w31-face); border:1px solid #000; height:17px; width:17px; display:block;
  box-shadow: inset -2px -2px var(--w31-shadow), inset 2px 2px var(--w31-light);
}

/* ---------- Dialog ---------- */
.dialog .window-body { background: var(--w31-light); padding: 14px; }
.status-bar { background: var(--w31-face); border-top:1px solid var(--w31-dark); padding: 2px 6px; font-size: 12px; }

/* ===== Demo-only bits (not part of library usage) ===== */
.dos { background:#000; color:#c0c0c0; font-family: "Courier New", monospace; font-size:14px; padding:6px; height:100%; box-sizing:border-box; overflow:auto; }
.dos input { background:transparent; border:0; color:#c0c0c0; font-family:inherit; font-size:inherit; outline:none; caret-color:#c0c0c0; width:70%; padding:0; }
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0 } }
pre.code { font-family: "Courier New", monospace; font-size: 12px; white-space: pre-wrap; margin:0; }
.footer31 { position:fixed; bottom:0; left:0; right:0; background: var(--w31-face); border-top:1px solid #000; font-size:12px; padding:2px 8px; display:flex; justify-content:space-between; z-index:99999; }
.footer31 a { color: var(--w31-highlight); }