/* ==========================================================================
   Dialup themes. Every OS is scoped by [data-os] on an ancestor so the same
   markup can be restyled live when the OS is switched.
   ========================================================================== */

@font-face {
  font-family: 'Chicago';
  src: url('https://cdn.jsdelivr.net/npm/@sakun/system.css@0.1.11/dist/ChicagoFLF.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Monaco Pixel';
  src: url('https://cdn.jsdelivr.net/npm/@sakun/system.css@0.1.11/dist/monaco.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'MS Sans';
  src: url('https://cdn.jsdelivr.net/npm/98.css@0.1.21/dist/ms_sans_serif.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'MS Sans';
  src: url('https://cdn.jsdelivr.net/npm/98.css@0.1.21/dist/ms_sans_serif_bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Shared structure
   -------------------------------------------------------------------------- */

[data-os] .window {
  position: absolute;
  display: flex;
  flex-direction: column;
  user-select: none;
  -webkit-user-select: none;
}
[data-os] .titlebar {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: default;
  touch-action: none;
}
[data-os] .tb-title {
  flex: 1;
  min-width: 0;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
  pointer-events: none;
}
[data-os] .tb-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-os] .tb-btn {
  appearance: none;
  border: 0;
  padding: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  cursor: default;
  font: inherit;
  color: inherit;
}
[data-os] .win-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
[data-os] .window.shaded .win-body { display: none; }

[data-os] .viewport {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
}
[data-os] .viewport > * { grid-area: 1 / 1; }
[data-os] .viewport canvas,
[data-os] .viewport img.final { display: block; max-width: 100%; }
[data-os] .viewport img.final { -webkit-user-drag: auto; user-select: auto; }

[data-os] .placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
  max-width: 320px;
}
[data-os] .placeholder .pix { width: 32px; height: 32px; }
[data-os] .placeholder .aqua,
[data-os] .dialog-icon .aqua { width: 48px; height: 48px; display: block; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25)); }

[data-os] .statusbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}
[data-os] .sb-status { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
[data-os] .sb-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
[data-os] .progress { position: relative; overflow: hidden; flex-shrink: 0; }
[data-os] .progress-fill { display: block; height: 100%; width: 0; }

[data-os] .dialog { width: max-content; max-width: min(420px, calc(100% - 24px)); }
[data-os] .dialog-body { display: flex; gap: 16px; align-items: flex-start; }
[data-os] .dialog-icon { flex-shrink: 0; }
[data-os] .dialog-icon .pix { width: 32px; height: 32px; }
[data-os] .dialog-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
[data-os] .dialog-main p { margin: 0; line-height: 1.4; }
[data-os] .dialog-buttons { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
[data-os] .field { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 8px; }
[data-os] .field.stack { grid-template-columns: 1fr; }
[data-os] .input { width: 100%; min-width: 0; font: inherit; color: inherit; outline: none; }
[data-os] textarea.input { resize: vertical; min-height: 84px; line-height: 1.35; }
[data-os] .check { display: flex; align-items: center; gap: 6px; }
[data-os] .dialer-status { min-height: 1.4em; }
[data-os] .btn { font: inherit; cursor: default; min-width: 72px; }
[data-os] .btn:disabled { opacity: 0.5; }
/* Mac default buttons already wear their ring; skip the browser's focus outline */
[data-os]:not([data-os='win']) .btn-default:focus { outline: none; }

[data-os] .menu-panel { position: absolute; z-index: 10050; padding: 2px 0; min-width: 190px; }
[data-os] .menu-item {
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  white-space: nowrap;
  cursor: default;
}
[data-os] .menu-item .mi-check { width: 12px; flex-shrink: 0; text-align: center; }
[data-os] .menu-item .mi-label { flex: 1; }
[data-os] .menu-item .mi-key { opacity: 0.85; }
[data-os] .menu-item.disabled { pointer-events: none; }
[data-os] .menu-item.has-sub::after { content: '\25B8'; font-size: 0.8em; }

[data-os] .pix { display: block; image-rendering: pixelated; shape-rendering: crispEdges; }

[data-os] .progress.indeterminate .progress-fill { width: 100% !important; animation: barber 0.6s linear infinite; }
@keyframes barber { to { background-position: 24px 0; } }

/* ==========================================================================
   SYSTEM 7: 1-bit, Chicago, striped title bars
   ========================================================================== */

[data-os='os7'] {
  font-family: 'Chicago', Geneva, sans-serif;
  font-size: 12px;
  color: #000;
  -webkit-font-smoothing: none;
  --desk: #6b6bab;
}
[data-os='os7'] .window {
  background: #fff;
  border: 1px solid #000;
  box-shadow: 1px 1px 0 #000;
}
[data-os='os7'] .titlebar { height: 19px; padding: 0 8px; gap: 8px; border-bottom: 1px solid #000; background: #fff; }
[data-os='os7'] .window.active .titlebar::before {
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  top: 4px;
  height: 11px;
  background: repeating-linear-gradient(#000 0 1px, transparent 1px 2px);
}
[data-os='os7'] .tb-text { background: #fff; padding: 0 6px; line-height: 18px; }
[data-os='os7'] .tb-btn {
  width: 13px;
  height: 11px;
  background: #fff;
  border: 1px solid #000;
  box-shadow: 0 0 0 1px #fff, 1px 0 0 1px #fff, -1px 0 0 1px #fff;
}
[data-os='os7'] .window:not(.active) .tb-btn { visibility: hidden; }
[data-os='os7'] .tb-btn:active { background: #000; }
[data-os='os7'] .tb-close { order: 0; }
[data-os='os7'] .tb-title { order: 1; }
[data-os='os7'] .tb-min { display: none; }
[data-os='os7'] .tb-zoom { order: 2; }
[data-os='os7'] .tb-zoom::after { content: ''; position: absolute; left: 0; top: 0; width: 6px; height: 5px; border-right: 1px solid #000; border-bottom: 1px solid #000; }
[data-os='os7'] .window.dialog .tb-btn { display: none; }

[data-os='os7'] .viewport { background: #fff; min-height: 180px; }
[data-os='os7'] .statusbar { border-top: 1px solid #000; padding: 3px 8px; font-size: 12px; height: 22px; }
[data-os='os7'] .progress { width: 140px; height: 12px; border: 1px solid #000; background: #fff; }
[data-os='os7'] .progress-fill {
  background: #000 repeating-linear-gradient(45deg, #000 0 2px, #555 2px 4px);
}
[data-os='os7'] .progress.indeterminate .progress-fill { background: repeating-linear-gradient(45deg, #000 0 6px, #fff 6px 12px); background-size: 24px 100%; }

[data-os='os7'] .dialog { border: 1px solid #000; box-shadow: 2px 2px 0 #000; }
[data-os='os7'] .dialog-body { padding: 16px 16px 12px; }
[data-os='os7'] .dialog-buttons { padding: 0 16px 16px; gap: 16px; }
[data-os='os7'] .btn {
  height: 20px;
  padding: 0 14px;
  background: #fff;
  color: #000;
  border: 1px solid #000;
  border-radius: 6px;
}
[data-os='os7'] .btn:active:not(:disabled) { background: #000; color: #fff; }
[data-os='os7'] .btn-default { box-shadow: 0 0 0 2px #fff, 0 0 0 5px #000; border-radius: 6px; margin: 0 3px; }
[data-os='os7'] .input { border: 1px solid #000; padding: 3px 4px; background: #fff; font-family: 'Monaco Pixel', Monaco, monospace; font-size: 16px; }
[data-os='os7'] .input:focus { box-shadow: inset 0 0 0 1px #000; }
[data-os='os7'] .pix-art:not(.keep-color) { filter: grayscale(1) contrast(1.6); }

[data-os='os7'] .menubar { height: 20px; background: #fff; border-bottom: 1px solid #000; }
[data-os='os7'] .mb-item { padding: 0 10px; line-height: 19px; }
[data-os='os7'] .mb-item.open { background: #000; color: #fff; }
[data-os='os7'] .menu-panel { background: #fff; border: 1px solid #000; box-shadow: 1px 1px 0 #000; }
[data-os='os7'] .menu-item { padding: 1px 14px 1px 4px; line-height: 16px; }
[data-os='os7'] .menu-item:hover,
[data-os='os7'] .menu-item.sub-open { background: #000; color: #fff; }
[data-os='os7'] .menu-item.disabled { color: #999; }
[data-os='os7'] .menu-sep { margin: 1px 0; border-top: 1px dotted #000; }
[data-os='os7'] .desk-icon .di-label { background: #fff; color: #000; padding: 0 3px; font-family: Geneva, Verdana, sans-serif; font-size: 11px; }
[data-os='os7'] .desk-icon.selected .di-label { background: #000; color: #fff; }
[data-os='os7'] .desk-icon.selected .original-icon { filter: brightness(0.5); }

/* ==========================================================================
   MAC OS 9: Platinum
   ========================================================================== */

[data-os='os9'] {
  font-family: 'Chicago', Charcoal, Geneva, sans-serif;
  font-size: 12px;
  color: #000;
  -webkit-font-smoothing: none;
  --desk: #5462a8;
  --hl: #3d3dbd;
}
[data-os='os9'] .window {
  background: #dddddd;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #999, 1px 1px 0 rgba(0, 0, 0, 0.35);
  padding: 0 5px 5px;
}
[data-os='os9'] .titlebar { height: 21px; padding: 0 3px; gap: 8px; }
[data-os='os9'] .window.active .titlebar::before {
  content: '';
  position: absolute;
  left: 22px;
  right: 46px;
  top: 5px;
  height: 11px;
  background: repeating-linear-gradient(#fff 0 1px, #999 1px 2px);
}
[data-os='os9'] .window.dialog.active .titlebar::before { left: 6px; right: 6px; }
[data-os='os9'] .tb-text { background: #ddd; padding: 0 8px; line-height: 21px; }
[data-os='os9'] .window:not(.active) .tb-text { color: #888; }
[data-os='os9'] .tb-btn {
  width: 13px;
  height: 13px;
  background: linear-gradient(135deg, #999, #fff);
  border: 1px solid #333;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #888;
}
[data-os='os9'] .tb-btn:active { background: #777; box-shadow: inset 1px 1px 0 #444; }
[data-os='os9'] .window:not(.active) .tb-btn { visibility: hidden; }
[data-os='os9'] .tb-close { order: 0; }
[data-os='os9'] .tb-title { order: 1; }
[data-os='os9'] .tb-zoom { order: 2; }
[data-os='os9'] .tb-min { order: 3; }
[data-os='os9'] .tb-zoom::after { content: ''; position: absolute; inset: 2px 4px 4px 2px; border: 1px solid #333; }
[data-os='os9'] .tb-min::after { content: ''; position: absolute; left: 2px; right: 2px; top: 4px; height: 3px; border-top: 1px solid #333; border-bottom: 1px solid #333; }
[data-os='os9'] .window.dialog .tb-btn { display: none; }

[data-os='os9'] .win-body { border: 1px solid #777; box-shadow: 1px 1px 0 #fff; }
[data-os='os9'] .viewport { background: #fff; min-height: 180px; }
[data-os='os9'] .statusbar {
  background: #ddd;
  border-top: 1px solid #888;
  box-shadow: inset 0 1px 0 #fff;
  padding: 3px 8px;
  font-family: Geneva, Verdana, sans-serif;
  font-size: 10px;
  height: 22px;
  -webkit-font-smoothing: auto;
}
[data-os='os9'] .progress {
  width: 150px;
  height: 12px;
  border: 1px solid #333;
  background: linear-gradient(#999, #ddd 40%, #eee);
}
[data-os='os9'] .progress-fill {
  background: linear-gradient(#c8c8ff, #6666cc 45%, #4444aa 55%, #8888ee);
  box-shadow: inset -1px 0 0 #222;
}
[data-os='os9'] .progress.indeterminate .progress-fill {
  background: repeating-linear-gradient(-45deg, #6666cc 0 6px, #c8c8ff 6px 12px);
  background-size: 24px 100%;
  box-shadow: none;
}

[data-os='os9'] .dialog { padding-bottom: 0; }
[data-os='os9'] .dialog-body { padding: 14px 12px 12px; }
[data-os='os9'] .dialog-buttons { padding: 0 12px 14px; gap: 14px; }
[data-os='os9'] .btn {
  height: 21px;
  padding: 0 14px;
  border: 1px solid #000;
  border-radius: 4px;
  color: #000;
  background: linear-gradient(#fff, #ddd 60%, #ccc);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #999;
}
[data-os='os9'] .btn:active:not(:disabled) { background: #555; color: #fff; box-shadow: inset 1px 1px 0 #333; }
[data-os='os9'] .btn-default { box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #999, 0 0 0 2px #ddd, 0 0 0 4px #333, 0 0 0 5px #000; border-radius: 4px; margin: 0 4px; }
[data-os='os9'] .input {
  border: 1px solid #000;
  box-shadow: 1px 1px 0 #fff, -1px -1px 0 #888;
  padding: 3px 4px;
  background: #fff;
  font-family: Geneva, Verdana, sans-serif;
  font-size: 11px;
  -webkit-font-smoothing: auto;
}
[data-os='os9'] .input:focus { box-shadow: 0 0 0 2px #9999ff; }
[data-os='os9'] .dialog-main p { font-family: Geneva, Verdana, sans-serif; font-size: 11px; -webkit-font-smoothing: auto; }
[data-os='os9'] .field > span { text-align: right; }

[data-os='os9'] .menubar {
  height: 20px;
  background: linear-gradient(#f2f2f2, #dddddd);
  border-bottom: 1px solid #000;
}
[data-os='os9'] .mb-item { padding: 0 10px; line-height: 19px; }
[data-os='os9'] .mb-item.open { background: var(--hl); color: #fff; }
[data-os='os9'] .menu-panel {
  background: #ddd;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, 2px 2px 0 rgba(0, 0, 0, 0.4);
}
[data-os='os9'] .menu-item { padding: 2px 16px 2px 6px; line-height: 16px; }
[data-os='os9'] .menu-item:hover,
[data-os='os9'] .menu-item.sub-open { background: var(--hl); color: #fff; }
[data-os='os9'] .menu-item.disabled { color: #999; }
[data-os='os9'] .menu-sep { margin: 3px 0; border-top: 1px solid #999; border-bottom: 1px solid #fff; }
[data-os='os9'] .desk-icon .di-label { background: #fff; padding: 0 3px; font-family: Geneva, Verdana, sans-serif; font-size: 11px; -webkit-font-smoothing: auto; }
[data-os='os9'] .desk-icon.selected .di-label { background: #000; color: #fff; }
[data-os='os9'] .desk-icon.selected .pix { filter: brightness(0.5); }

/* ==========================================================================
   MAC OS X: Aqua, pinstripes, glossy lozenges
   ========================================================================== */

[data-os='osx'] {
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 13px;
  color: #000;
  --desk: #0b4ea2;
  --pin: repeating-linear-gradient(#fff 0 1px, #ededed 1px 2px, #e3e3e3 2px 3px, #f5f5f5 3px 4px);
  --aqua: linear-gradient(#cfe5ff 0%, #7ab4f5 20%, #3b88e8 50%, #2d7de3 51%, #5cb4ff 100%);
}
[data-os='osx'] .window {
  background: var(--pin);
  border-radius: 7px 7px 0 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 10px 15px rgba(0, 0, 0, 0.38);
  overflow: hidden;
}
[data-os='osx'] .window:not(.active) { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.35); }
[data-os='osx'] .titlebar {
  height: 22px;
  padding: 0 8px;
  gap: 7px;
  background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 55%), var(--pin);
  border-bottom: 1px solid #9a9a9a;
}
[data-os='osx'] .tb-title { order: 3; padding-right: 54px; }
[data-os='osx'] .tb-text { font-size: 13px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
[data-os='osx'] .window:not(.active) .tb-text { color: #777; }
[data-os='osx'] .tb-btn {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 2px 3px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(255, 255, 255, 0.8);
  overflow: hidden;
}
[data-os='osx'] .tb-btn::before {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  top: 1px;
  height: 5px;
  border-radius: 50%;
  background: linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.1));
}
[data-os='osx'] .tb-close { order: 0; background: radial-gradient(circle at 50% 75%, #ffb7a8, #e5403a 45%, #a8180f); }
[data-os='osx'] .tb-min { order: 1; background: radial-gradient(circle at 50% 75%, #ffeaa0, #f2b31f 45%, #ab6e00); }
[data-os='osx'] .tb-zoom { order: 2; background: radial-gradient(circle at 50% 75%, #c8f7a8, #5dc13a 45%, #1e7b0c); }
[data-os='osx'] .window:not(.active) .tb-btn { background: radial-gradient(circle at 50% 75%, #fff, #c9c9c9 45%, #8d8d8d); }
[data-os='osx'] .tb-btn:active { filter: brightness(0.75); }
[data-os='osx'] .titlebar:hover .tb-btn::after {
  position: absolute; inset: 0; text-align: center; color: #4b2418;
  font: bold 12px/13px Arial, sans-serif;
}
[data-os='osx'] .titlebar:hover .tb-close::after { content: '×'; }
[data-os='osx'] .window:not(.dialog) .titlebar:hover .tb-min::after { content: '−'; }
[data-os='osx'] .window:not(.dialog) .titlebar:hover .tb-zoom::after { content: '+'; color: #225311; }
[data-os='osx'] .window.dialog .tb-min,
[data-os='osx'] .window.dialog .tb-zoom { background: radial-gradient(circle at 50% 75%, #fff, #c9c9c9 45%, #8d8d8d); }

[data-os='osx'] .win-body { padding: 0; }
[data-os='osx'] .viewport { background: #fff; min-height: 200px; border-bottom: 1px solid #b5b5b5; }
[data-os='osx'] .statusbar { padding: 4px 10px; font-size: 11px; height: 24px; color: #222; }
[data-os='osx'] .progress {
  width: 160px;
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(#bdbdbd, #f0f0f0 50%, #fafafa);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}
[data-os='osx'] .progress-fill {
  border-radius: 6px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0) 55%, rgba(255, 255, 255, 0.35)),
    repeating-linear-gradient(-45deg, #2f86ec 0 6px, #5fb0ff 6px 12px);
  background-size: 100% 100%, 24px 100%;
  box-shadow: inset 0 0 0 1px rgba(0, 40, 120, 0.45);
  animation: barber 0.9s linear infinite;
}
[data-os='osx'] .progress.indeterminate .progress-fill {
  background:
    linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0) 55%, rgba(255, 255, 255, 0.35)),
    repeating-linear-gradient(-45deg, #9a9a9a 0 6px, #e8e8e8 6px 12px);
  background-size: 100% 100%, 24px 100%;
}

[data-os='osx'] .dialog-body { padding: 20px 20px 14px; }
[data-os='osx'] .dialog-buttons { padding: 0 20px 18px; gap: 12px; }
[data-os='osx'] .btn {
  height: 22px;
  padding: 0 18px;
  border-radius: 11px;
  border: 0;
  color: #000;
  background:
    linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0) 51%),
    linear-gradient(#f4f4f4, #d6d6d6 50%, #f2f2f2);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.15);
  font-size: 13px;
}
[data-os='osx'] .btn-default {
  background:
    linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 50%, rgba(0, 0, 0, 0) 51%),
    var(--aqua);
  box-shadow: inset 0 0 0 1px rgba(0, 40, 120, 0.55), 0 1px 2px rgba(0, 0, 0, 0.25);
  animation: throb 1.6s ease-in-out infinite;
}
@keyframes throb { 50% { filter: brightness(1.15) saturate(0.75); } }
[data-os='osx'] .btn:active:not(:disabled) { filter: brightness(0.82); }
[data-os='osx'] .input {
  border: 1px solid #8a8a8a;
  border-top-color: #5e5e5e;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  padding: 4px 5px;
  background: #fff;
  font-size: 12px;
}
[data-os='osx'] .input:focus { box-shadow: 0 0 0 3px rgba(80, 150, 240, 0.65); border-color: #4a8ae0; }
[data-os='osx'] .field > span { text-align: right; font-size: 12px; }
[data-os='osx'] .dialog-main p { font-size: 12px; }

[data-os='osx'] .menubar {
  height: 22px;
  background: var(--pin);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  font-size: 14px;
}
[data-os='osx'] .mb-item { padding: 0 10px; line-height: 22px; }
[data-os='osx'] .mb-item.open { background: linear-gradient(#5ea5f5, #2a6fd8); color: #fff; }
[data-os='osx'] .menu-panel {
  background: rgba(250, 250, 250, 0.96);
  border-radius: 0 0 6px 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: 4px 0;
  font-size: 14px;
}
[data-os='osx'] .menu-item { padding: 2px 16px 2px 8px; line-height: 18px; }
[data-os='osx'] .menu-item:hover,
[data-os='osx'] .menu-item.sub-open { background: linear-gradient(#5ea5f5, #2a6fd8); color: #fff; }
[data-os='osx'] .menu-item.disabled { color: #aaa; }
[data-os='osx'] .menu-sep { margin: 5px 0; border-top: 1px solid #dcdcdc; }
[data-os='osx'] .desk-icon .di-label {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 8px;
}
[data-os='osx'] .desk-icon.selected .di-label { background: #2a6fd8; }
[data-os='osx'] .desk-icon.selected .pix { filter: brightness(0.75); }

/* ==========================================================================
   WINDOWS 95: bevels, navy captions, chunky progress blocks
   ========================================================================== */

[data-os='win'] {
  font-family: 'MS Sans', Tahoma, sans-serif;
  font-size: 11px;
  color: #000;
  -webkit-font-smoothing: none;
  --desk: #008080;
  --raised: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;
  --sunken: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  --field: inset -1px -1px #fff, inset 1px 1px #808080;
}
[data-os='win'] .window { background: #c0c0c0; box-shadow: var(--raised); padding: 3px; }
[data-os='win'] .titlebar {
  height: 18px;
  padding: 0 2px 0 3px;
  gap: 0;
  background: #000080;
  color: #fff;
  font-weight: 700;
}
[data-os='win'] .window:not(.active) .titlebar { background: #808080; color: #c0c0c0; }
[data-os='win'] .tb-title { order: 0; justify-content: flex-start; }
[data-os='win'] .tb-min { order: 1; }
[data-os='win'] .tb-zoom { order: 2; }
[data-os='win'] .tb-close { order: 3; margin-left: 2px; }
[data-os='win'] .tb-btn {
  width: 16px;
  height: 14px;
  background-color: #c0c0c0;
  box-shadow: var(--raised);
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
[data-os='win'] .tb-btn:active { box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080; background-position: 55% 60%; }
[data-os='win'] .tb-min { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='9'%3E%3Crect y='7' width='6' height='2'/%3E%3C/svg%3E"); }
[data-os='win'] .tb-zoom { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath fill-rule='evenodd' d='M0 0h9v9H0zM1 2v6h7V2z'/%3E%3C/svg%3E"); }
[data-os='win'] .tb-close { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7'%3E%3Cpath d='M0 0h2v1h1v1h2V1h1V0h2v1H7v1H6v1H5v1h1v1h1v1h1v1H6V6H5V5H3v1H2v1H0V6h1V5h1V4h1V3H2V2H1V1H0z'/%3E%3C/svg%3E"); }
[data-os='win'] .window.dialog .tb-min,
[data-os='win'] .window.dialog .tb-zoom { display: none; }

[data-os='win'] .win-body { margin-top: 2px; }
[data-os='win'] .viewport { background: #fff; box-shadow: var(--sunken); padding: 2px; min-height: 180px; }
[data-os='win'] .statusbar { padding: 3px 0 0; gap: 3px; height: 22px; }
[data-os='win'] .sb-status,
[data-os='win'] .sb-bytes { box-shadow: var(--field); padding: 2px 4px; line-height: 13px; }
[data-os='win'] .sb-status { flex: 1; }
[data-os='win'] .sb-right { gap: 3px; }
[data-os='win'] .progress { width: 150px; height: 17px; box-shadow: var(--field); padding: 2px; }
[data-os='win'] .progress-fill {
  background: repeating-linear-gradient(90deg, #000080 0 8px, transparent 8px 10px);
}
[data-os='win'] .progress.indeterminate .progress-fill {
  background: repeating-linear-gradient(90deg, #000080 0 8px, transparent 8px 10px);
  background-size: 30px 100%;
  -webkit-mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  animation: sweep 1.2s steps(12) infinite;
}
@keyframes sweep { from { -webkit-mask-position: -150px 0; mask-position: -150px 0; } to { -webkit-mask-position: 150px 0; mask-position: 150px 0; } }
[data-os='win'] .dialog-body { padding: 12px 10px 10px; }
[data-os='win'] .dialog-buttons { padding: 0 10px 10px; gap: 6px; }
[data-os='win'] .btn {
  min-width: 75px;
  height: 23px;
  padding: 0 12px;
  border: 0;
  background: #c0c0c0;
  box-shadow: var(--raised);
  color: #000;
}
[data-os='win'] .btn:active:not(:disabled) { box-shadow: var(--sunken); padding-top: 2px; }
[data-os='win'] .btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
[data-os='win'] .btn-default { box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #0a0a0a, inset -2px -2px #0a0a0a, inset 2px 2px #fff, inset -3px -3px #808080, inset 3px 3px #dfdfdf; }
[data-os='win'] .input { background: #fff; box-shadow: var(--sunken); border: 0; padding: 3px 4px; height: 21px; }
[data-os='win'] textarea.input { height: auto; }

[data-os='win'] .menu-panel { background: #c0c0c0; box-shadow: var(--raised); padding: 3px; min-width: 180px; }
[data-os='win'] .menu-item { padding: 0 18px 0 4px; line-height: 20px; }
[data-os='win'] .menu-item:hover,
[data-os='win'] .menu-item.sub-open { background: #000080; color: #fff; }
[data-os='win'] .menu-item.disabled { color: #808080; text-shadow: 1px 1px 0 #fff; }
[data-os='win'] .menu-sep { margin: 3px 2px; border-top: 1px solid #808080; border-bottom: 1px solid #fff; }
[data-os='win'] .menu-item .mi-icon { width: 24px; height: 24px; flex-shrink: 0; display: grid; place-items: center; }
[data-os='win'] .menu-item .mi-icon .pix { width: 16px; height: 16px; }
[data-os='win'] .start-menu .menu-item { line-height: 30px; padding-left: 2px; gap: 10px; }
[data-os='win'] .desk-icon .di-label { color: #fff; padding: 1px 2px; }
[data-os='win'] .desk-icon.selected .di-label { background: #000080; outline: 1px dotted #ff0; }
[data-os='win'] .desk-icon.selected .pix { filter: sepia(1) hue-rotate(190deg) saturate(4) brightness(0.6); }

/* ==========================================================================
   Desktop surfaces
   ========================================================================== */

.surface { background: var(--desk); }

[data-os='os7'] .surface {
  background: var(--desk) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Crect width='1' height='1' fill='%234c4c8c'/%3E%3Crect x='2' y='2' width='1' height='1' fill='%234c4c8c'/%3E%3C/svg%3E");
  image-rendering: pixelated;
}
[data-os='os9'] .surface {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .2 0 0 0 0 .5 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 25% 15%, #7d8be0 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%, #3a3f8f 0%, transparent 65%),
    #5462a8;
}
[data-os='osx'] .surface {
  background: #38659b url('/static/wallpapers/aqua-blue.jpg') center / cover no-repeat;
}
[data-os='win'] .surface { background: #008080; }


/* ==========================================================================
   Read Me: SimpleText / TextEdit / Notepad
   ========================================================================== */

[data-os] .text-doc {
  margin: 0;
  width: 400px;
  height: 340px;
  overflow: auto;
  padding: 8px 10px;
  background: #fff;
  color: #000;
  white-space: pre-wrap;
  user-select: text;
  -webkit-user-select: text;
  outline: none;
}
[data-os='os7'] .text-doc,
[data-os='os9'] .text-doc { font: 16px/13px 'Monaco Pixel', Monaco, monospace; -webkit-font-smoothing: none; }
[data-os='os9'] .text-window .win-body { border: 1px solid #777; }
[data-os='osx'] .text-doc { font: 11px/15px Monaco, Menlo, monospace; }
[data-os='win'] .text-doc { font: 700 13px/16px 'Courier New', Courier, monospace; -webkit-font-smoothing: none; box-shadow: var(--sunken); padding: 6px 8px; }
[data-os='win'] .text-window .wm-item { pointer-events: none; }
.window.zoomed .text-doc { width: auto; height: auto; flex: 1; }
.window.zoomed.text-window .win-body { flex: 1; }
@media (max-width: 760px) {
  [data-os] .text-doc { width: auto; height: 60vh; }
}

/* Win95: app icon at the left of the caption, "document - App" titles */
[data-os] .tb-icon,
[data-os] .tb-app { display: none; }
[data-os='win'] .window:not(.dialog) .tb-icon { display: block; order: -1; width: 16px; height: 16px; margin-right: 3px; flex-shrink: 0; }
[data-os='win'] .tb-icon .pix { width: 16px; height: 16px; }
[data-os='win'] .tb-app { display: inline; }
[data-os] .dialer-indent { margin-left: 100px; }
@media (max-width: 760px) { [data-os] .dialer-indent { margin-left: 0; } }

/* Period checkboxes ------------------------------------------------------ */

[data-os] .check input[type='checkbox'] {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin: 0;
  flex-shrink: 0;
  background: #fff no-repeat 50% 50%;
  cursor: default;
}
/* System 7: an X */
[data-os='os7'] .check input[type='checkbox'] { border: 1px solid #000; }
[data-os='os7'] .check input[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' shape-rendering='crispEdges'%3E%3Cpath d='M0 0L11 11M11 0L0 11' stroke='black'/%3E%3C/svg%3E");
}
/* Mac OS 9: Platinum box, check mark */
[data-os='os9'] .check input[type='checkbox'] {
  border: 1px solid #000;
  background-color: #eee;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #aaa;
}
[data-os='os9'] .check input[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M1.5 5.5l3 3 5.5-8' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E");
}
/* Mac OS X: Aqua */
[data-os='osx'] .check input[type='checkbox'] {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background-image: linear-gradient(#fdfdfd, #dcdcdc);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.1);
}
[data-os='osx'] .check input[type='checkbox']:checked {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M3.5 7l2.5 3 5-7' stroke='white' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%),
    linear-gradient(#7ab4f5, #2d7de3);
  box-shadow: inset 0 0 0 1px rgba(0, 40, 120, 0.55);
}
/* Windows 95: sunken white well */
[data-os='win'] .check input[type='checkbox'] { box-shadow: var(--sunken); }
[data-os='win'] .check input[type='checkbox']:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Cpath d='M7 0H6v1H5v1H4v1H3v1H2V3H1V2H0v3h1v1h1v1h1V6h1V5h1V4h1V3h1z'/%3E%3C/svg%3E");
}
[data-os] .check input[type='checkbox']:disabled { opacity: 0.6; }
[data-os] .check input[type='checkbox']:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }