:root {
  --desktop: #008080;
  --silver: #c0c0c0;
  --navy: #000080;
  --taskbar-height: 34px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  overflow: hidden;
  background: var(--desktop);
  color: #222;
  font-family: "Pixelated MS Sans Serif", "MS Sans Serif", Arial, sans-serif;
}
button, a { font: inherit; }
a { color: #000080; }
.skip-link { position: fixed; top: -100px; left: 8px; z-index: 10000; padding: 8px; background: white; }
.skip-link:focus { top: 8px; }

.desktop {
  position: relative;
  height: calc(100vh - var(--taskbar-height));
  min-height: 480px;
  overflow: hidden;
  background-color: var(--desktop);
  background-image: radial-gradient(rgba(255,255,255,.045) .7px, transparent .7px);
  background-size: 3px 3px;
}
.desktop-icons {
  position: absolute;
  z-index: 1;
  top: 10px;
  left: 8px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, 78px);
  gap: 3px 12px;
}
.desktop-icon {
  display: flex;
  width: 86px;
  min-width: 0;
  height: 74px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  border: 0;
  box-shadow: none;
  padding: 4px 2px;
  overflow: visible;
  color: white;
  background: transparent;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px #000;
  cursor: default;
}
.desktop-icon:not(:disabled):active { padding: 4px 2px; box-shadow: none; }
.desktop-icon:focus, .desktop-icon:hover { outline: 1px dotted white; outline-offset: -2px; background: rgba(0,0,128,.35); }
.desktop-icon span:last-child { line-height: 13px; }

/* Small, deliberately crude pixel-art icons. */
.pixel-icon { position: relative; display: block; width: 34px; height: 34px; flex: 0 0 34px; filter: drop-shadow(1px 1px 0 #002f2f); }
.pixel-icon.folder::before { content: ""; position: absolute; left: 2px; top: 8px; width: 29px; height: 23px; background: #f7d35c; border: 2px outset #fff0a1; }
.pixel-icon.folder::after { content: ""; position: absolute; left: 4px; top: 4px; width: 14px; height: 8px; background: #f7d35c; border: 2px outset #fff0a1; }
.pixel-icon.document::before { content: ""; position: absolute; left: 7px; top: 1px; width: 22px; height: 30px; background: white; border: 1px solid #111; box-shadow: inset -4px -4px #ddd; }
.pixel-icon.document::after { content: ""; position: absolute; left: 11px; top: 9px; width: 13px; height: 2px; background: #1854a3; box-shadow: 0 5px #1854a3, 0 10px #1854a3, 0 15px #1854a3; }
.pixel-icon.cv::before { background: #fff; }
.pixel-icon.cv i::after { content: "PDF"; position: absolute; z-index: 2; left: 8px; top: 12px; padding: 1px 2px; color: white; background: #a00; font: bold 8px Arial; text-shadow: none; }
.pixel-icon.computer::before { content: ""; position: absolute; left: 2px; top: 2px; width: 29px; height: 22px; border: 2px outset white; background: #bbb; }
.pixel-icon.computer::after { content: ""; position: absolute; left: 6px; top: 6px; width: 21px; height: 14px; background: #082b76; box-shadow: 4px 21px 0 -2px #bbb, 0 25px 0 -1px #ddd; }
.pixel-icon.mail::before { content: ""; position: absolute; left: 2px; top: 7px; width: 30px; height: 21px; border: 2px outset #fff; background: #eee; }
.pixel-icon.mail::after { content: ""; position: absolute; left: 7px; top: 7px; width: 18px; height: 18px; border-right: 2px solid #555; border-bottom: 2px solid #555; transform: rotate(45deg); }
.pixel-icon.bin::before { content: ""; position: absolute; left: 8px; top: 8px; width: 19px; height: 23px; border: 2px solid #eee; background: repeating-linear-gradient(90deg,#ddd 0 3px,#777 3px 5px); transform: perspective(20px) rotateX(-2deg); }
.pixel-icon.bin::after { content: ""; position: absolute; left: 6px; top: 5px; width: 23px; height: 4px; border: 1px solid white; background: #aaa; }

.app-window {
  position: absolute;
  z-index: 10;
  top: 42px;
  left: clamp(118px, 17vw, 245px);
  width: min(680px, calc(100vw - 160px));
  min-width: 300px;
  max-height: calc(100vh - 76px);
  display: flex;
  flex-direction: column;
}
.app-window.active .title-bar { background: linear-gradient(90deg, navy, #1084d0); }
.app-window:not(.active) .title-bar { background: linear-gradient(90deg, #777, #aaa); }
.app-window[hidden] { display: none !important; }
.app-window.maximized { inset: 0 !important; width: 100% !important; height: calc(100vh - var(--taskbar-height)); max-height: none; }
.app-window.maximized .window-body { flex: 1; }
.drag-handle { cursor: default; user-select: none; }
.window-body { margin: 8px; overflow: auto; }
.menu-bar { display: flex; gap: 18px; padding: 5px 9px 0; }
.menu-bar span::first-letter { text-decoration: underline; }
.status-bar { margin: 0 3px 3px; }
.status-bar .status-bar-field:last-child { flex-grow: 0; min-width: 84px; }

.readme-body { min-height: 300px; padding: 18px 22px; background: white; box-shadow: inset -1px -1px white, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; font-family: "Courier New", monospace; font-size: 14px; line-height: 1.55; }
.readme-body h1 { margin: 0 0 2px; font-size: 22px; }
.readme-body .role { margin-top: 0; color: #555; }
.readme-actions { display: flex; gap: 8px; align-items: center; margin-top: 24px; font-family: "Pixelated MS Sans Serif", Arial, sans-serif; }
.button-link { display: inline-flex; min-height: 23px; align-items: center; justify-content: center; padding: 0 12px; color: #222; background: silver; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px white, inset -2px -2px grey, inset 2px 2px #dfdfdf; text-decoration: none; }
.button-link:active { padding: 2px 11px 0 13px; box-shadow: inset -1px -1px white, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px grey; }
.button-link:focus { outline: 1px dotted #000; outline-offset: -4px; }

.toolbar { display: flex; align-items: center; gap: 7px; padding: 5px 8px 0; }
.address-bar { flex: 1; padding: 4px 6px; background: white; box-shadow: inset -1px -1px white, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; }
.explorer-body { min-height: 330px; padding: 0; background: white; box-shadow: inset -1px -1px white, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; }
.explorer-intro { display: flex; flex-direction: column; gap: 3px; padding: 16px 12px 12px; color: white; background: linear-gradient(90deg,#1c4da1,#fff); }
.explorer-intro strong { font-size: 15px; }
.project-table { width: 100%; }
.project-row { display: grid; width: 100%; min-height: 30px; grid-template-columns: 1.5fr 1fr .8fr; align-items: center; border: 0; padding: 0; color: #111; background: white; box-shadow: none; text-align: left; }
.project-row:not(.project-header):active { padding: 0; box-shadow: none; }
.project-row > span { overflow: hidden; padding: 6px 9px; text-overflow: ellipsis; white-space: nowrap; }
.project-header { min-height: 25px; border-bottom: 1px solid #888; background: silver; }
.project-header span { border-right: 1px solid #888; padding-block: 4px; }
.project-row:not(.project-header):hover, .project-row:not(.project-header):focus { outline: none; color: white; background: navy; }
.mini-folder, .mini-world { display: inline-block; width: 14px; height: 11px; margin-right: 7px; background: #f3ca43; border: 1px solid #8c6e00; vertical-align: -1px; }
.mini-world { border-radius: 50%; background: #269dce; border-color: #06436b; }

.detail-window { top: 80px; left: clamp(140px, 27vw, 420px); width: min(540px, calc(100vw - 180px)); }
.project-detail { line-height: 1.45; }
.detail-heading { display: flex; align-items: center; gap: 14px; margin: 4px 5px 13px; }
.detail-heading h2 { margin: 0 0 3px; font-size: 16px; }
.detail-heading p { margin: 0; }
.large-folder { position: relative; width: 44px; height: 31px; background: #f5cf4b; border: 2px outset #fff3a0; }
.large-folder::before { content: ""; position: absolute; left: 1px; top: -8px; width: 20px; height: 8px; background: #f5cf4b; border: 1px solid #947b1f; }
.large-world { width: 42px; height: 42px; border: 2px solid #06336e; border-radius: 50%; background: radial-gradient(circle at 70% 30%,#42bb4c 0 12%,transparent 13%), radial-gradient(circle at 30% 63%,#42bb4c 0 18%,transparent 19%), #2089d0; }
.project-detail fieldset { margin-bottom: 14px; }
.project-detail fieldset p { margin: 5px; }
.project-detail dl { display: grid; grid-template-columns: 85px 1fr; gap: 9px 12px; margin: 12px 6px; }
.project-detail dt { font-weight: bold; }
.project-detail dd { margin: 0; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.file-list { padding-left: 24px; line-height: 1.5; }
.file-list li { margin-bottom: 12px; }

.document-body { min-height: 365px; padding: 26px 34px; background: white; box-shadow: inset -1px -1px white, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; font-family: Georgia, serif; font-size: 13px; line-height: 1.45; }
.document-body h2 { margin: 0 0 9px; font-size: 17px; }
.document-body hr { margin: 20px 0; border: 0; border-top: 1px solid #aaa; }
.contact-body { min-height: 250px; }
.contact-list { display: grid; gap: 8px; margin: 18px 2px; }
.contact-list a { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: center; padding: 9px; color: #111; text-decoration: none; }
.contact-list a:hover, .contact-list a:focus { color: white; outline: 1px dotted white; background: navy; }
.contact-list a > span:first-child { font: bold 16px monospace; text-align: center; }
.contact-list small { display: block; margin-top: 3px; }
.empty-state { display: flex; min-height: 220px; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-state p { margin: 5px; }

.taskbar { position: fixed; z-index: 9998; inset: auto 0 0; display: flex; height: var(--taskbar-height); align-items: center; gap: 4px; padding: 3px; background: silver; box-shadow: inset 0 1px white, inset 0 2px #dfdfdf; }
.start-button { display: flex; min-width: 70px; height: 28px; align-items: center; gap: 5px; padding: 2px 6px; }
.start-button:active { padding: 3px 5px 1px 7px; }
.windows-mark { color: #e02b2b; text-shadow: 5px 0 #2389d7, 0 5px #40a83e, 5px 5px #f3cd34; margin: 0 4px 5px 1px; }
.task-divider { width: 2px; height: 25px; border-left: 1px solid #888; border-right: 1px solid white; }
.task-buttons { display: flex; min-width: 0; flex: 1; gap: 3px; }
.task-button { width: 150px; max-width: 25vw; height: 27px; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.task-button.current { font-weight: bold; background: repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 0 / 2px 2px; box-shadow: inset -1px -1px white, inset 1px 1px #0a0a0a; }
.tray { display: flex; height: 27px; min-width: 89px; align-items: center; justify-content: flex-end; gap: 7px; padding: 3px 8px; box-shadow: inset -1px -1px white, inset 1px 1px #808080; }
.speaker { font-size: 15px; }
.start-menu { position: fixed; z-index: 9999; bottom: 32px; left: 2px; display: flex; width: 245px; min-height: 220px; padding: 3px; }
.start-menu[hidden] { display: none; }
.start-banner { display: flex; width: 30px; align-items: flex-end; justify-content: center; padding-bottom: 8px; color: white; background: #777; }
.start-banner strong { transform: rotate(-90deg); white-space: nowrap; font-size: 17px; }
.start-banner span { font-weight: normal; color: #ccc; }
.start-items { flex: 1; padding: 2px; }
.start-items button, .start-items a { display: flex; width: 100%; min-height: 42px; align-items: center; gap: 12px; border: 0; padding: 7px 10px; color: #111; background: transparent; box-shadow: none; text-align: left; text-decoration: none; }
.start-items button:active { padding: 7px 10px; box-shadow: none; }
.start-items button:hover, .start-items a:hover, .start-items button:focus, .start-items a:focus { color: white; outline: none; background: navy; }
.start-items button span, .start-items a span { width: 25px; font-size: 20px; text-align: center; }

@media (max-width: 700px) {
  body { overflow: auto; }
  .desktop { min-height: calc(100vh - var(--taskbar-height)); height: auto; overflow: visible; padding: 10px 8px 55px; }
  .desktop-icons { position: static; display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-template-rows: none; gap: 4px; }
  .desktop-icon { width: 100%; }
  .app-window, .detail-window { position: relative !important; inset: auto !important; width: 100% !important; min-width: 0; max-height: none; margin: 14px 0 0; }
  .app-window.maximized { height: auto; }
  .app-window:not(.active) { display: none; }
  .readme-body, .explorer-body, .document-body { min-height: 0; }
  .readme-body { padding: 15px; }
  .document-body { padding: 20px; }
  .project-row { grid-template-columns: 1.35fr .8fr; }
  .project-row > span:nth-child(2) { display: none; }
  .project-detail dl { grid-template-columns: 1fr; gap: 3px; }
  .project-detail dd { margin-bottom: 7px; }
  .task-button { width: 42px; font-size: 0; }
  .task-button::first-letter { font-size: 12px; }
  .speaker { display: none; }
  .tray { min-width: 63px; padding-inline: 6px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }