/* ==========================================================================
   win98.css — Windows 98 desktop shell, window chrome, taskbar.
   Hand-rolled. System fonts only: zero external requests, zero webfonts.
   Every page is real crawlable HTML that happens to be framed as a window.
   ========================================================================== */

:root {
  --w98-face:        #c0c0c0;
  --w98-face-dark:   #9d9d9d;
  --w98-hilite:      #ffffff;
  --w98-shadow:      #808080;
  --w98-dkshadow:    #000000;
  --w98-title-a:     #000080;
  --w98-title-b:     #1084d0;
  --w98-title-in-a:  #808080;
  --w98-title-in-b:  #b5b5b5;
  --w98-desktop:     #008080;
  --w98-text:        #000000;

  /* Beach GeoCities palette — Pawleys Island by way of 1996.
     Sea green and palm green lead, sand and sun carry the warmth, and white
     does the heavy lifting for readable copy. No purple, no magenta, no black,
     and no cyberspace: this is a beach, not a grid. */
  --geo-cyan:    #16b7a4;   /* sea green, the primary accent */
  --geo-seafoam: #6fe3c4;
  --geo-lagoon:  #3fc4d6;
  --geo-magenta: #f4915c;   /* coral, warm accent only */
  --geo-lime:    #4fd67f;   /* palm */
  --geo-palm:    #1c7440;
  --geo-yellow:  #ffd24a;   /* sun */
  --geo-orange:  #f7a541;
  --geo-red:     #ef6f52;
  --geo-blue:    #2f9fc0;
  --geo-hotpink: #f4915c;
  --geo-sand:    #f6e3ba;   /* wet sand */
  --geo-sand-lt: #fdf4e0;   /* dry sand, near white */
  --geo-shell:   #fffdf7;   /* the white */
  --geo-grid:    #7fd6c4;

  /* Depths, used only for chrome and small inset panels now. */
  --sea-deep:    #0d5f66;
  --sea-mid:     #12808a;
  --sea-panel:   #0f7079;
  --sea-ink:     #0a4a52;

  /* Ink for light panels */
  --ink:         #14424a;
  --ink-soft:    #3c6068;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13px;
  color: var(--w98-text);
  background-color: #7fc9d6;
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   THE DESKTOP — black ground, green perspective wireframe (Pepsi World '96),
   drifting blobs, and a starfield. All CSS, no images, no AI-generated art.
   -------------------------------------------------------------------------- */

.desktop {
  position: relative;
  min-height: 100vh;
  padding: 10px 10px 46px;
  background-color: #7fc9d6;
  isolation: isolate;
}

/* Shoreline. Wet sand meets dry sand at the bottom of the viewport, with a
   soft foam line where they touch. No wireframe, no perspective grid — the
   old version read as cyberspace, and this is meant to read as a beach. */
.desktop::before {
  content: "";
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 20vh;
  z-index: -3;
  pointer-events: none;
  background:
    linear-gradient(to bottom,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.5) 10%,
      rgba(255,255,255,.8) 16%,
      #ecdcb8 26%,
      #e2cf9f 100%);
}

/* starfield + upper fade so the grid reads as a horizon */
.desktop::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 34% 8%,  #fff, transparent),
    radial-gradient(1px 1px at 58% 24%, #fff, transparent),
    radial-gradient(1px 1px at 77% 12%, #fff, transparent),
    radial-gradient(1px 1px at 91% 31%, #fff, transparent),
    radial-gradient(1px 1px at 22% 39%, #fff, transparent),
    radial-gradient(1px 1px at 66% 42%, #fff, transparent),
    radial-gradient(2px 2px at 45% 15%, rgba(255,255,255,.55), transparent),
    linear-gradient(to bottom,
      #bfeaf4 0%, #8fdcea 10%, #4ec3d6 22%, #1fa6bd 38%, #12849c 56%,
      #0d7089 72%, rgba(13,112,137,.35) 84%, transparent 92%);
}

/* drifting blobs — the "generic web design background stuff" */
.blobs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(62px);
  opacity: .30;
  will-change: transform;
}
.blob-1 { width: 46vmin; height: 46vmin; left: -8vmin;  top: 8vmin;
          background: var(--geo-yellow); animation: drift-a 41s ease-in-out infinite; }
.blob-2 { width: 38vmin; height: 38vmin; right: -6vmin; top: 42vmin;
          background: var(--geo-shell);  animation: drift-b 53s ease-in-out infinite; }
.blob-3 { width: 30vmin; height: 30vmin; left: 46vmin;  bottom: -8vmin;
          background: var(--geo-lime);   animation: drift-c 37s ease-in-out infinite; }
.blob-4 { width: 26vmin; height: 26vmin; left: 24vmin;  top: -6vmin;
          background: var(--geo-sand);   animation: drift-b 61s ease-in-out infinite reverse; }

@keyframes drift-a {
  0%,100% { transform: translate3d(0,0,0)        scale(1);   }
  33%     { transform: translate3d(22vmin,14vmin,0) scale(1.18); }
  66%     { transform: translate3d(8vmin,-12vmin,0) scale(.88); }
}
@keyframes drift-b {
  0%,100% { transform: translate3d(0,0,0)         scale(1);   }
  50%     { transform: translate3d(-26vmin,10vmin,0) scale(1.22); }
}
@keyframes drift-c {
  0%,100% { transform: translate3d(0,0,0)         scale(1);   }
  40%     { transform: translate3d(16vmin,-18vmin,0) scale(.82); }
  75%     { transform: translate3d(-14vmin,-6vmin,0) scale(1.14); }
}

/* --------------------------------------------------------------------------
   BEVELS — the load-bearing Windows 98 primitive
   -------------------------------------------------------------------------- */

.bevel-out {
  border: 2px solid;
  border-color: var(--w98-hilite) var(--w98-dkshadow) var(--w98-dkshadow) var(--w98-hilite);
  box-shadow: inset 1px 1px 0 var(--w98-face), inset -1px -1px 0 var(--w98-shadow);
  background: var(--w98-face);
}
.bevel-in {
  border: 2px solid;
  border-color: var(--w98-shadow) var(--w98-hilite) var(--w98-hilite) var(--w98-shadow);
  box-shadow: inset 1px 1px 0 var(--w98-dkshadow), inset -1px -1px 0 var(--w98-face);
  background: #fff;
}

/* --------------------------------------------------------------------------
   WINDOWS
   -------------------------------------------------------------------------- */

.win {
  position: relative;
  margin: 0 auto 18px;
  max-width: 940px;
  border: 2px solid;
  border-color: var(--w98-hilite) var(--w98-dkshadow) var(--w98-dkshadow) var(--w98-hilite);
  box-shadow: inset 1px 1px 0 var(--w98-face), inset -1px -1px 0 var(--w98-shadow),
              3px 3px 0 rgba(0,0,0,.55);
  background: var(--w98-face);
  padding: 3px;
}
.win.is-dragging { opacity: .94; }
.win[hidden] { display: none; }

.win-title {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 3px 3px 4px;
  background: linear-gradient(90deg, var(--w98-title-a), var(--w98-title-b));
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
  cursor: default;
  user-select: none;
}
.win.is-inactive .win-title {
  background: linear-gradient(90deg, var(--w98-title-in-a), var(--w98-title-in-b));
}
.win-title .win-icon { width: 16px; height: 16px; flex: 0 0 16px; image-rendering: pixelated; }
.win-title .win-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.win-buttons { display: flex; gap: 2px; flex: 0 0 auto; }
.win-btn {
  width: 18px; height: 16px;
  display: grid; place-items: center;
  font: 700 10px/1 "MS Sans Serif", Tahoma, sans-serif;
  color: #000;
  background: var(--w98-face);
  border: 2px solid;
  border-color: var(--w98-hilite) var(--w98-dkshadow) var(--w98-dkshadow) var(--w98-hilite);
  cursor: pointer;
  padding: 0 0 1px;
}
.win-btn:active { border-color: var(--w98-dkshadow) var(--w98-hilite) var(--w98-hilite) var(--w98-dkshadow); }
.win-btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

.win-menu {
  display: flex; gap: 2px;
  padding: 2px 3px;
  background: var(--w98-face);
  font-size: 12px;
  border-bottom: 1px solid var(--w98-face-dark);
}
.win-menu a, .win-menu span {
  padding: 1px 7px; color: #000; text-decoration: none; cursor: default;
}
.win-menu a:hover { background: var(--w98-title-a); color: #fff; }
.win-menu u { text-decoration: underline; }

.win-body {
  border: 2px solid;
  border-color: var(--w98-shadow) var(--w98-hilite) var(--w98-hilite) var(--w98-shadow);
  background: #fff;
  padding: 0;
  overflow: hidden;
}

.win-status {
  display: flex; gap: 4px; margin-top: 3px; font-size: 11px;
}
.win-status > span {
  padding: 2px 6px;
  border: 1px solid;
  border-color: var(--w98-shadow) var(--w98-hilite) var(--w98-hilite) var(--w98-shadow);
  background: var(--w98-face);
}
.win-status > span:first-child { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   TASKBAR
   -------------------------------------------------------------------------- */

.taskbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 900;
  display: flex; align-items: center; gap: 4px;
  height: 36px;
  padding: 3px 4px;
  background: var(--w98-face);
  border-top: 2px solid var(--w98-hilite);
  box-shadow: 0 -2px 0 var(--w98-shadow);
}
.start-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 9px 4px 5px;
  font-weight: 700; font-size: 13px; color: #000;
  background: var(--w98-face);
  border: 2px solid;
  border-color: var(--w98-hilite) var(--w98-dkshadow) var(--w98-dkshadow) var(--w98-hilite);
  cursor: pointer;
  text-decoration: none;
}
.start-btn[aria-expanded="true"],
.start-btn:active { border-color: var(--w98-dkshadow) var(--w98-hilite) var(--w98-hilite) var(--w98-dkshadow); }
.start-flag {
  width: 16px; height: 15px; flex: 0 0 16px;
  background:
    linear-gradient(135deg, #ff0000 0 50%, transparent 0) 0 0/8px 7px no-repeat,
    linear-gradient(135deg, #00a000 0 50%, transparent 0) 9px 0/8px 7px no-repeat,
    linear-gradient(135deg, #0000c0 0 50%, transparent 0) 0 8px/8px 7px no-repeat,
    linear-gradient(135deg, #ffc000 0 50%, transparent 0) 9px 8px/8px 7px no-repeat;
}
.task-sep { width: 2px; align-self: stretch; margin: 0 2px;
  border-left: 1px solid var(--w98-shadow); border-right: 1px solid var(--w98-hilite); }

.task-list { display: flex; gap: 3px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.task-btn {
  display: flex; align-items: center; gap: 5px;
  min-width: 0; max-width: 168px; padding: 3px 8px;
  font-size: 12px; color: #000; text-decoration: none;
  background: var(--w98-face);
  border: 2px solid;
  border-color: var(--w98-hilite) var(--w98-dkshadow) var(--w98-dkshadow) var(--w98-hilite);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.task-btn.is-active { border-color: var(--w98-dkshadow) var(--w98-hilite) var(--w98-hilite) var(--w98-dkshadow);
  background-image: repeating-conic-gradient(var(--w98-face) 0 25%, var(--w98-hilite) 0 50%);
  background-size: 2px 2px; font-weight: 700; }
.task-btn img { width: 14px; height: 14px; image-rendering: pixelated; flex: 0 0 14px; }

.tray {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  font-size: 12px;
  border: 1px solid;
  border-color: var(--w98-shadow) var(--w98-hilite) var(--w98-hilite) var(--w98-shadow);
  flex: 0 0 auto;
}
.tray img { width: 15px; height: 15px; image-rendering: pixelated; }

/* Start menu */
.start-menu {
  position: fixed; left: 4px; bottom: 39px; z-index: 950;
  width: 232px; padding: 3px;
  background: var(--w98-face);
  border: 2px solid;
  border-color: var(--w98-hilite) var(--w98-dkshadow) var(--w98-dkshadow) var(--w98-hilite);
  box-shadow: 3px 3px 0 rgba(0,0,0,.5);
  display: flex;
}
.start-menu[hidden] { display: none; }
.start-menu-rail {
  width: 22px; flex: 0 0 22px; margin-right: 3px;
  background: linear-gradient(180deg, var(--w98-title-b), var(--w98-title-a));
  color: #fff; font-weight: 700; font-size: 13px; letter-spacing: 1px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: grid; place-items: center; padding: 8px 0;
}
.start-menu ul { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }
.start-menu a {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; font-size: 13px; color: #000; text-decoration: none;
}
.start-menu a:hover, .start-menu a:focus { background: var(--w98-title-a); color: #fff; outline: none; }
.start-menu img { width: 18px; height: 18px; image-rendering: pixelated; }
.start-menu hr { margin: 3px 2px; border: none;
  border-top: 1px solid var(--w98-shadow); border-bottom: 1px solid var(--w98-hilite); }

/* --------------------------------------------------------------------------
   DESKTOP ICONS
   -------------------------------------------------------------------------- */

.icons {
  display: grid;
  grid-template-columns: repeat(auto-fill, 92px);
  gap: 4px;
  margin-bottom: 14px;
  list-style: none; padding: 0;
}
.icons a {
  display: grid; justify-items: center; gap: 4px;
  padding: 6px 2px; text-decoration: none; color: #fff;
  font-size: 12px; text-align: center; line-height: 1.25;
  text-shadow: 1px 1px 0 #000, 0 0 4px #000;
}
.icons a:hover .icon-art,
.icons a:focus-visible .icon-art { filter: brightness(1.25); }
.icons a:focus-visible { outline: 1px dotted #fff; }
.icons a span { padding: 1px 3px; }
.icons a:hover span { background: var(--w98-title-a); }
.icon-art {
  width: 44px; height: 44px; image-rendering: pixelated;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   RESPONSIVE — the desktop metaphor degrades to a plain stack on phones
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .desktop { padding: 6px 6px 44px; }
  .win { max-width: 100%; margin-bottom: 12px; }
  .icons { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
  .win-menu { display: none; }
  .task-list { display: none; }
  .tray .tray-text { display: none; }
}

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

/* Accessibility helper used throughout */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: #ff0; color: #000; padding: 8px 14px; font-weight: 700;
  border: 3px double #000;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------------------
   SECONDARY DESKTOP WINDOWS
   These sit on the home desktop alongside the main content window. They drag,
   minimise to the taskbar, raise on click and close independently — the actual
   Win98 desktop behaviour. Content inside them is supplementary; nothing the
   crawler or a no-JS visitor needs lives here.
   -------------------------------------------------------------------------- */

.win-mini { max-width: 420px; margin: 0 auto 18px; }
.win-mini-body { background: var(--geo-sand-lt); color: var(--ink); padding: 10px 12px; }
.win-mini-body a { color: #0a6f8c; }

/* Media player */
.player-screen {
  background: #0d5f66;
  border: 2px inset #8fd4c4;
  padding: 8px 10px;
  text-align: center;
}
.player-track {
  font-family: "Courier New", Courier, monospace;
  color: var(--geo-yellow); font-weight: 700; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.player-time {
  font-family: "Courier New", Courier, monospace;
  color: var(--geo-seafoam); font-size: 12px; margin: 3px 0 6px;
}
.player-transport {
  display: flex; gap: 5px; justify-content: center; margin-top: 8px;
}
.player-transport .pbtn {
  display: grid; place-items: center;
  width: 34px; height: 22px;
  background: var(--w98-face); color: #000; font-size: 12px;
  border: 2px solid;
  border-color: var(--w98-hilite) var(--w98-dkshadow) var(--w98-dkshadow) var(--w98-hilite);
}

/* Notepad */
.notepad { background: var(--geo-shell); border: 2px inset #b9a683; padding: 8px 10px; }
.notepad pre {
  margin: 0;
  font-family: "Courier New", Courier, monospace;
  font-size: 12px; line-height: 1.35; color: #000;
  white-space: pre; overflow-x: auto;
}

/* On wide screens the two secondary windows sit side by side under the main
   one, offset like real windows rather than centred in a stack. */
@media (min-width: 900px) {
  .win-mini { display: inline-block; vertical-align: top; margin: 0 10px 18px; width: 400px; }
  .win-player  { margin-left: 6%; }
  .win-readme  { margin-left: 2%; }
}
@media (max-width: 700px) {
  .win-mini { max-width: 100%; }
  .notepad pre { font-size: 11px; }
}