body {
  font-family: "MS Sans Serif", Tahoma, Geneva, sans-serif;
  background: #008080;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

/* Layout: desktop icon column on the left, content area to its right */
.desktop {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding: 24px 1rem 70px;   /* bottom room for taskbar */
  box-sizing: border-box;
  min-height: 100vh;
}
.desktop > .window {
  flex: 1;                   /* window takes remaining width so it can center inside it */
}

/* Left-hand icon column */
.desktop-icons {
  display: flex;
  flex-direction: column;
  gap: 22px;
  flex: 0 0 auto;
  width: 6rem;
}
.icon {
  width: 100%;
  text-decoration: none;
  text-align: center;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  font-size: 0.78rem;
  padding: 3px;
}
.icon svg { display: block; margin: 0 auto 4px; }
.icon:hover span {
  background: #000080;
  outline: 1px dotted #fff;
}
/* Open-on-hover folders: show closed by default, open on hover */
.icon .folder-open { display: none; }
.icon:hover .folder-closed { display: none; }
.icon:hover .folder-open { display: block; }
/* Pixel-perfect chunky detail: icons "press in" when clicked */
.icon:active svg { transform: translate(1px, 1px); }

/* Window */
.window {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;            /* centers the window in its available space */
  box-sizing: border-box;    /* keep border + padding inside the 100% width */
  background: #c0c0c0;
  border: 2px solid #000;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #fff, 3px 3px 0 rgba(0,0,0,0.4);
  padding: 3px;
}
.titlebar {
  background: #000080;
  color: #fff;
  font-weight: bold;
  padding: 3px 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.titlebar .buttons { display: flex; gap: 2px; }
.titlebar .btn {
  background: #c0c0c0;
  color: #000;
  border: 1px solid #000;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #fff;
  width: 16px; height: 14px;
  font-size: 10px; line-height: 12px;
  text-align: center;
  cursor: pointer;
}
.content { padding: 12px 14px; line-height: 1.5; }
.content h1 { margin: 0 0 0.4em; font-size: 1.4rem; }
.content a { color: #000080; }
.content ul { padding-left: 1.4em; }
.content li { margin-bottom: 0.5em; }
.back { display: inline-block; margin-top: 1.2em; font-size: 0.85rem; }

/* Taskbar */
.taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 34px;
  background: #c0c0c0;
  border-top: 2px solid #fff;
  display: flex;
  align-items: center;
  padding: 0 4px;
  z-index: 500;
}
.start {
  display: flex; align-items: center; gap: 5px;
  font-weight: bold; font-size: 0.85rem;
  background: #c0c0c0;
  border: 1px solid #000;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #fff;
  padding: 3px 8px;
  cursor: pointer;
}
.start:active {
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff;
}
.clock {
  margin-left: auto;
  font-size: 0.8rem;
  border: 1px solid #808080;
  box-shadow: inset 1px 1px 0 #fff;
  padding: 3px 8px;
}

/* Start menu */
.start-menu {
  display: none;
  position: fixed;
  bottom: 34px;
  left: 4px;
  width: 12rem;
  max-width: calc(100vw - 8px);
  background: #c0c0c0;
  border: 2px solid #000;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #fff, 3px 3px 0 rgba(0,0,0,0.4);
  z-index: 501;
}
.start-menu.open { display: block; }
.start-menu a {
  display: block;
  padding: 8px 12px;
  color: #000;
  text-decoration: none;
  font-size: 0.9rem;
}
.start-menu a:hover { background: #000080; color: #fff; }

/* CRT scanline overlay */
.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;          /* never blocks clicks */
  z-index: 9999;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.06) 0px,
    rgba(0,0,0,0.06) 1px,
    transparent 1px,
    transparent 3px
  );
}

/* Fake security dialog */
.dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);   /* darkened so the dialog stands out, like a real modal */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 1rem;
  box-sizing: border-box;
}
.dialog {
  width: 100%;
  max-width: 22rem;
  box-sizing: border-box;
  background: #c0c0c0;
  border: 2px solid #000;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #fff, 4px 4px 0 rgba(0,0,0,0.4);
  padding: 3px;
}
.dialog-body { padding: 14px; text-align: center; }
.dialog-body p { margin: 0 0 10px; }
.ok-btn {
  font-family: inherit;
  background: #c0c0c0;
  border: 1px solid #000;
  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #fff;
  padding: 4px 20px;
  cursor: pointer;
}
.ok-btn:active {
  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #fff;  /* presses in */
}

/* Mobile: stack icons above content */
@media (max-width: 34rem) {
  .desktop {
    flex-direction: column;
    padding: 16px 0.75rem 80px;   /* a little tighter on small screens, room for taskbar */
  }
  .desktop-icons {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: 14px 20px;
    justify-content: center;       /* center the icon row on mobile */
  }
  .icon {
    width: 4.5rem;                 /* fixed-ish width keeps the icon grid tidy */
  }
  .desktop > .window {
    flex: none;                    /* let the window size naturally when stacked */
    width: calc(100% - 3px);       /* leave room for the 3px drop shadow so box + shadow sit centered */
  }
  .dialog {
    transform: translateX(-2px);   /* offset half the 4px drop shadow so box + shadow sit centered */
  }
  .content { padding: 12px 12px; }
  .content h1 { font-size: 1.25rem; }
  .content pre {
    font-size: 0.68rem;            /* keep the key block from overflowing */
  }
}