@font-face {
  font-family: ChicagoFLF;
  src: url('/fonts/ChicagoFLFRegular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  font-family: Geneva, Verdana, Arial, sans-serif;
  font-size: 12px;
  color: #000;
  background: #9196af;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: #000; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px dotted #000; outline-offset: 2px; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: block; width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.portrait { display: block; width: 72px; height: 72px; object-fit: cover; border: 1px solid #000; flex: none; }
.startup-screen { display: none; position: fixed; inset: 0; z-index: 600; background: #c0c0c0; pointer-events: none; }
.booting .startup-screen { display: block; }
.startup-picture { display: block; width: 100%; height: 100%; }
.startup-wallpaper { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip-link { position: fixed; top: -60px; left: 6px; z-index: 500; padding: 5px 8px; background: #fff; border: 1px solid #000; }
.skip-link:focus { top: 29px; }

/* Finder menu bar */
.menu-bar {
  height: 23px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  position: relative;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #000;
}
.menus { display: flex; align-items: stretch; padding-left: 7px; }
.menu-group { position: relative; display: flex; }
.menu-trigger {
  height: 22px;
  min-width: 35px;
  padding: 0 9px;
  border: 0;
  border-radius: 0;
  color: #000;
  background: transparent;
  font: 12px ChicagoFLF, Geneva, Verdana, sans-serif;
  white-space: nowrap;
}
.menu-trigger:hover, .menu-trigger[aria-expanded="true"] { color: #fff; background: #000; }
.menu-group:first-child .menu-trigger { min-width: 43px; padding: 0 6px; }
.site-initials { display: block; min-width: 25px; font: 14px/21px ChicagoFLF, Geneva, sans-serif; text-align: center; letter-spacing: -1px; }
.menu-panel {
  position: absolute;
  top: 22px;
  left: 0;
  z-index: 150;
  min-width: 220px;
  padding: 3px 0;
  background: #fff;
  border: 1px solid #000;
  box-shadow: 1px 1px 0 #000;
}
.menu-panel[hidden] { display: none; }
.menu-panel a, .menu-panel button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 22px;
  padding: 2px 17px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #000;
  text-decoration: none;
  text-align: left;
  white-space: nowrap;
  font: 12px ChicagoFLF, Geneva, sans-serif;
}
.menu-panel a:hover, .menu-panel button:hover, .menu-panel [role="menuitem"]:focus-visible {
  color: #fff;
  background: #000;
  outline: 0;
}
.menu-panel span { margin-left: auto; font-family: Geneva, Verdana, sans-serif; font-size: 11px; }
.menu-panel hr { height: 1px; margin: 4px 8px; border: 0; background: #888; }
.menu-bar-right { display: flex; align-items: center; gap: 3px; padding: 0 5px 0 13px; white-space: nowrap; font: 12px ChicagoFLF, Geneva, sans-serif; }
.clock-short { display: none; }
.menu-bar-tool { display: grid; place-items: center; width: 23px; height: 21px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #000; }
.menu-bar-tool:hover, .menu-bar-tool:active { background: #ddd; }
.help-tool img { display: block; width: 16px; height: 16px; image-rendering: pixelated; }
.mascot-tool { width: 29px; }
.mascot-tool picture { display: block; line-height: 0; }
.mascot-tool img { display: block; width: 26px; height: 19px; image-rendering: pixelated; }

/* Muted periwinkle control-panel pattern and original color Finder-style icons */
.desktop-surface {
  position: relative;
  min-height: calc(100vh - 23px);
  overflow: hidden;
  background-color: #9196af;
  background-image: repeating-conic-gradient(#7d849f 0 25%, #a1a7bd 0 50%);
  background-size: 4px 4px;
}
.desktop-icons {
  position: absolute;
  top: 43px;
  right: 15px;
  bottom: 10px;
  z-index: 2;
  width: 186px;
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.desktop-icon-group { display: grid; grid-template-columns: repeat(2, 88px); grid-auto-rows: 71px; column-gap: 9px; row-gap: 4px; }
.desktop-icon {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 3px;
  width: 88px;
  min-height: 66px;
  padding: 2px 0;
  color: #000;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: center;
  text-decoration: none;
}
.icon-art { display: block; width: 32px; height: 32px; flex: none; }
.icon-label { display: block; max-width: 86px; padding: 1px 2px; background: #fff; font: 11px/1.1 Geneva, Verdana, sans-serif; overflow-wrap: anywhere; }
.desktop-icon:hover .icon-label, .desktop-icon.selected .icon-label, .desktop-icon:focus-visible .icon-label { color: #fff; background: #000; }
.desktop-icon.selected .icon-art { filter: grayscale(1) brightness(.62) contrast(1.3); }
.desktop-icon[data-icon="trash"] { position: fixed; right: 15px; bottom: 10px; }
.mobile-finder { display: none; }
.workspace { position: relative; z-index: 4; min-height: calc(100vh - 23px); pointer-events: none; }
.workspace > * { pointer-events: none; }

/* Classic document and Finder windows */
.mac-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 290px;
  max-height: calc(100vh - 48px);
  overflow: hidden;
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: 2px 2px 0 #555;
  pointer-events: auto;
}
.mac-window:not(.active) { border-color: #777; box-shadow: 1px 1px 0 #888; }
.welcome-window { top: 60px; left: max(8vw, calc((100vw - 950px) / 2)); width: 548px; }
.section-window { top: clamp(57px, 9vh, 94px); left: max(7vw, calc((100vw - 970px) / 2)); width: 620px; height: min(410px, calc(100vh - 61px)); }
.section-window[data-window="links"] { width: 420px; height: 300px; }
.section-window[data-window="contact"] { width: 455px; height: min(445px, calc(100vh - 61px)); }
.desktop-preview { min-width: 0; }
.photo-finder-preview { top: 525px; left: 24px; width: 500px; height: 286px; z-index: 3; }
.featured-photo-preview { top: 585px; left: 430px; width: 475px; height: auto; z-index: 6; }
.stickies-window-preview { top: 435px; left: max(910px, calc(50vw + 180px)); width: 320px; height: 240px; z-index: 4; }
.terminal-window-preview { top: 725px; left: max(910px, calc(50vw + 180px)); width: 320px; height: 212px; z-index: 5; }
.window-titlebar {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  flex: none;
  padding: 2px 3px;
  background: #fff;
  border-bottom: 1px solid #000;
  cursor: move;
  user-select: none;
  touch-action: none;
}
.mac-window:not(.active) .window-titlebar { border-color: #999; }
.window-close, .window-zoom, .window-control-space {
  display: block;
  width: 13px;
  height: 13px;
  flex: none;
  padding: 0;
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #888;
}
.window-close:hover, .window-zoom:hover { background: #ccc; }
.window-close:active, .window-zoom:active { background: #000; }
.window-zoom::after { content: ''; display: block; width: 6px; height: 6px; margin: 2px; border: 1px solid #000; }
.window-control-space { visibility: hidden; }
.mac-window:not(.active) .window-close, .mac-window:not(.active) .window-zoom { visibility: hidden; }
.desktop-preview:not(.active) .window-close, .desktop-preview:not(.active) .window-zoom { visibility: visible; border-color: #777; }
.title-stripes {
  height: 12px;
  flex: 1;
  background: repeating-linear-gradient(to bottom, #777 0 1px, #fff 1px 3px);
}
.mac-window:not(.active) .title-stripes { background: none; }
.desktop-preview:not(.active) .title-stripes { background: repeating-linear-gradient(to bottom, #aaa 0 1px, #fff 1px 3px); }
.window-title { min-width: 0; margin: 0 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px/16px ChicagoFLF, Geneva, sans-serif; transform: translateY(1px); }
.window-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 19px;
  padding: 0 8px;
  flex: none;
  background: #fff;
  border-bottom: 1px solid #000;
  font: 11px Geneva, Verdana, sans-serif;
}
.window-main { display: flex; flex: 1; min-height: 0; }
.window-body {
  flex: 1;
  min-width: 0;
  overflow: auto;
  background: #fff;
  scrollbar-width: none;
}
.window-body::-webkit-scrollbar { display: none; }
.window-scrollbar {
  display: flex;
  flex-direction: column;
  flex: 0 0 16px;
  width: 16px;
  background: #fff;
  border-left: 1px solid #000;
}
.window-scrollbar button, .window-footer button {
  display: block;
  flex: none;
  width: 15px;
  height: 15px;
  padding: 0;
  background: #fff;
  border: 0;
  border-radius: 0;
  color: #000;
  font: 9px/1 Geneva, sans-serif;
}
.window-scrollbar button:first-child { border-bottom: 1px solid #000; }
.window-scrollbar button:last-child { border-top: 1px solid #000; }
.window-scrollbar button:hover:not(:disabled), .window-footer button:hover:not(:disabled) { background: #ddd; }
.window-scrollbar button:active:not(:disabled), .window-footer button:active:not(:disabled) { color: #fff; background: #000; }
.window-scrollbar button:disabled, .window-footer button:disabled { color: #999; }
.scroll-track, .horizontal-track {
  position: relative;
  flex: 1;
  background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%);
  background-size: 2px 2px;
}
.scroll-thumb { position: absolute; top: 0; left: 1px; right: 1px; height: 29px; border: 1px solid #000; background: #fff; box-shadow: inset 1px 1px #fff, inset -1px -1px #aaa; }
.window-footer { display: flex; flex: none; height: 16px; border-top: 1px solid #000; }
.window-footer button:first-child { border-right: 1px solid #000; }
.window-footer button:nth-last-child(2) { border-left: 1px solid #000; }
.window-footer .window-resize { border-left: 1px solid #000; cursor: se-resize; font-size: 13px; line-height: 11px; }
.welcome-window .window-body { overflow: visible; }

/* Application content uses Geneva-style document and Finder density. */
.welcome-content { padding: 17px 21px 14px; }
.welcome-main { display: flex; align-items: flex-start; gap: 19px; }
.welcome-portrait { width: 88px; height: 88px; margin: 0 0 0 3px; }
.welcome-copy { flex: 1; }
.welcome-copy h1 { margin: 0 0 4px; font: 16px ChicagoFLF, Geneva, sans-serif; }
.welcome-copy p { margin: 0 0 10px; font: 12px/1.5 Geneva, Verdana, sans-serif; }
.welcome-copy .welcome-role { margin: 0 0 13px; font-weight: bold; }
.welcome-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; margin: 10px 0 0; padding-top: 13px; border-top: 1px solid #888; }
.classic-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 2px 11px;
  color: #000;
  background: #eee;
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: inset 1px 1px #fff, inset -1px -1px #888;
  text-decoration: none;
  white-space: nowrap;
  font: 12px ChicagoFLF, Geneva, sans-serif;
}
.classic-button:hover { background: #fff; }
.classic-button:active { color: #fff; background: #000; box-shadow: inset 1px 1px #777; }
.default-button { margin: 2px; box-shadow: 0 0 0 2px #000, inset 1px 1px #fff, inset -1px -1px #888; }
.classic-link { margin-left: 3px; font: 11px Geneva, sans-serif; }
.welcome-hint { margin: 13px 0 0; color: #333; text-align: center; font: 11px Geneva, sans-serif; }
.content-intro { padding: 13px 17px 10px; border-bottom: 1px solid #aaa; }
.content-intro h1 { margin: 0 0 5px; font: 15px ChicagoFLF, Geneva, sans-serif; }
.content-intro p { margin: 0; font: 11px/1.45 Geneva, Verdana, sans-serif; }
.document-page { padding: 17px 21px; font: 12px/1.55 Geneva, Verdana, sans-serif; }
.document-page .content-intro { padding: 0 0 11px; margin-bottom: 13px; }
.document-page p { margin: 0 0 12px; }
.document-page h2 { margin: 0 0 7px; font: 13px ChicagoFLF, Geneva, sans-serif; }
.document-page hr { height: 1px; margin: 17px 0; border: 0; background: #999; }
.document-page a { text-decoration: underline; }
.project-page .project-action { margin-top: 14px; font: 12px ChicagoFLF, Geneva, sans-serif; }
.project-page .project-secondary-link { margin-top: 15px; }
.project-page .project-photo { display: block; float: right; width: 190px; max-width: 42%; height: auto; margin: 0 0 10px 16px; border: 1px solid #000; }
.project-page:has(.project-photo)::after { content: ''; display: block; clear: both; }
.resume-page .resume-section h2 { margin-bottom: 11px; }
.resume-entry { margin: 0 0 17px; }
.resume-entry h3 { margin: 0 0 2px; font: 12px ChicagoFLF, Geneva, sans-serif; }
.resume-entry p { margin-bottom: 5px; }
.resume-entry .resume-organization { margin-bottom: 1px; font-weight: bold; }
.resume-entry .resume-period { color: #444; font-size: 11px; }
.resume-skills { margin: 0; padding-left: 19px; }
.resume-skills li { margin: 0 0 3px; }
.resume-actions { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 10px; }
.resume-actions .classic-button { text-decoration: none; }
.resume-actions .classic-button:disabled { color: #777; cursor: default; }
.contact-form { display: grid; gap: 5px; }
.contact-form label { font: 11px ChicagoFLF, Geneva, sans-serif; }
.contact-form input, .contact-form textarea { width: 100%; min-width: 0; padding: 5px 6px; border: 1px solid #000; border-radius: 0; background: #fff; color: #000; font: 12px/1.4 Geneva, Verdana, sans-serif; }
.contact-form textarea { min-height: 90px; resize: vertical; }
.contact-form-actions { margin-top: 5px; }
.contact-form .classic-button:disabled { color: #777; cursor: default; }
.contact-note { margin-top: 9px !important; }
.finder-list { width: 100%; }
.file-row { display: grid; grid-template-columns: 34px minmax(0,1fr) 95px; gap: 9px; align-items: start; min-height: 56px; padding: 8px 12px; border-bottom: 1px solid #ddd; }
.file-row .icon { width: 29px; height: 29px; }
.file-row h2 { margin: 0 0 4px; font: 13px ChicagoFLF, Geneva, sans-serif; }
.file-row h2 a { text-decoration: underline; }
.file-row p { margin: 0; font: 11px/1.3 Geneva, sans-serif; }
.file-row .file-meta { margin-bottom: 3px; font-weight: bold; }
.file-kind { padding-top: 2px; text-align: right; font: 10px Geneva, sans-serif; }
.file-row:hover, .file-row:focus-within { background: #e7e7e7; }
.content-actions { display: flex; gap: 9px; padding: 13px 17px; }
.empty-state { display: flex; gap: 12px; align-items: flex-start; padding: 22px 17px; }
.empty-state .icon { width: 29px; height: 29px; }
.empty-state strong { font: 13px ChicagoFLF, Geneva, sans-serif; }
.empty-state p { margin: 5px 0; font: 11px/1.45 Geneva, sans-serif; }
.small-note { font: 10px/1.4 Geneva, sans-serif; }
.archive-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2px 10px; padding: 12px 14px; }
.archive-folder { min-width: 0; }
.archive-folder summary { display: flex; align-items: center; gap: 6px; min-height: 39px; list-style: none; cursor: pointer; font: 11px Geneva, sans-serif; }
.archive-folder summary::-webkit-details-marker, .album-folder summary::-webkit-details-marker { display: none; }
.archive-folder summary:hover span, .archive-folder[open] summary span { color: #fff; background: #000; }
.archive-folder summary .icon { width: 29px; height: 29px; }
.archive-folder p { margin: 0 0 8px 36px; font: 10px/1.4 Geneva, sans-serif; }
.archive-note { margin: 6px 14px 13px; }
.album-folder { margin: 0; border-bottom: 1px solid #ddd; }
.album-folder summary { display: flex; gap: 9px; align-items: center; min-height: 48px; padding: 6px 15px; list-style: none; cursor: pointer; }
.album-folder summary:hover { background: #e7e7e7; }
.album-folder summary strong, .album-folder summary small { display: block; }
.album-folder summary strong { font: 12px ChicagoFLF, Geneva, sans-serif; }
.album-folder summary small { margin-top: 3px; font: 10px Geneva, sans-serif; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 14px; padding: 14px; }
.photo-card { margin: 0; }
.photo-card a { display: block; border: 1px solid #000; }
.photo-card img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.photo-card figcaption { padding-top: 5px; font: 10px/1.4 Geneva, sans-serif; }
.photo-card figcaption strong, .photo-card figcaption span { display: block; }

/* An already-open desktop: live content when available, explicit development spaces otherwise. */
.preview-folder-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px 5px; padding: 18px 10px 8px; }
.preview-folder { display: flex; align-items: center; flex-direction: column; gap: 3px; min-width: 0; color: #000; text-align: center; text-decoration: none; font: 10px/1.15 Geneva, Verdana, sans-serif; }
.preview-folder:hover span, .preview-folder:focus-visible span { color: #fff; background: #000; }
.preview-folder .icon { width: 32px; height: 32px; }
.preview-note { margin: 10px 14px 13px; padding-top: 8px; border-top: 1px solid #aaa; font: 10px/1.45 Geneva, Verdana, sans-serif; }
.preview-note a { white-space: nowrap; }
.featured-photo, .photo-development { display: flex; flex-direction: column; height: 100%; margin: 0; }
.featured-photo-preview .window-main { flex: none; }
.featured-photo-preview .window-body { overflow: hidden; }
.featured-photo { height: auto; }
.featured-photo a { display: block; flex: none; overflow: hidden; }
.featured-photo img { display: block; width: 100%; height: auto; }
.featured-photo figcaption { padding: 5px 9px; border-top: 1px solid #000; color: #000; background: #fff; font: 10px Geneva, Verdana, sans-serif; }
.photo-test-grid { display: grid; flex: 1; min-height: 0; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(3,1fr); gap: 2px; padding: 5px; background: #222; }
.photo-test-grid span:nth-child(1), .photo-test-grid span:nth-child(8) { background: #8498ad; }
.photo-test-grid span:nth-child(2), .photo-test-grid span:nth-child(10) { background: #b9a785; }
.photo-test-grid span:nth-child(3), .photo-test-grid span:nth-child(11) { background: #7e8a6f; }
.photo-test-grid span:nth-child(4), .photo-test-grid span:nth-child(9) { background: #bb8976; }
.photo-test-grid span:nth-child(5) { background: #d4bd8d; }
.photo-test-grid span:nth-child(6) { background: #677f9a; }
.photo-test-grid span:nth-child(7) { background: #b4a0b5; }
.photo-test-grid span:nth-child(12) { background: #d9d2bf; }
.photo-development-label { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border-top: 1px solid #000; font: 10px/1.25 Geneva, Verdana, sans-serif; }
.photo-development-label strong { font: 11px ChicagoFLF, Geneva, sans-serif; }
.terminal-window-preview .window-body { display: flex; flex-direction: column; min-height: 0; padding: 4px; background: #ddd; }
.terminal-window-preview .terminal-screen { flex: 1; min-height: 0; max-height: none; }
.terminal-window-preview form { background: #000; }
.terminal-window-preview .terminal-input { color: #fff; background: #000; border: 1px solid #000; }
.terminal-window-preview .terminal-input::placeholder { color: #bbb; opacity: 1; }
.stickies-window-preview .window-body { padding: 13px 14px; background: #fff0a5; }
.sticky-note { height: 100%; font: 11px/1.55 Geneva, Verdana, sans-serif; }
.sticky-note > strong { display: block; margin-bottom: 12px; font: 13px ChicagoFLF, Geneva, sans-serif; }
.sticky-note p { margin: 0 0 9px; }
.sticky-note small { display: block; margin-top: 22px; text-align: right; font: 10px Geneva, Verdana, sans-serif; }
.sticky-note a { color: #000; }

/* Small modeless accessories */
.utility-window { top: 17vh; left: calc(50vw - 180px); width: 360px; min-height: 175px; }
.utility-window .window-body { padding: 14px 17px; overflow: auto; }
.utility-window .window-body h2 { margin: 0 0 10px; font: 14px ChicagoFLF, Geneva, sans-serif; }
.utility-window p { margin: 0 0 9px; font: 11px/1.45 Geneva, sans-serif; }
.disk-status { display: flex; justify-content: space-between; margin: -14px -17px 0; padding: 5px 10px; border-bottom: 1px solid #000; font: 11px Geneva, sans-serif; }
.disk-file-list { margin: 0 -17px; }
.disk-file-list a { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 4px 12px; color: #000; border-bottom: 1px solid #ccc; text-decoration: none; font: 12px Geneva, sans-serif; }
.disk-file-list .icon { width: 27px; height: 27px; }
.disk-file-list a:hover, .disk-file-list a:focus-visible { color: #fff; background: #000; }
.utility-window .disk-note { margin: 10px 0 0; }
.web-links-list { list-style: none; margin: 0 0 14px; padding: 0; }
.web-links-list li { display: flex; align-items: baseline; gap: 5px; padding: 6px 0; border-bottom: 1px solid #ddd; }
.web-links-list a { color: #0000ee; text-decoration: underline; }
.web-links-file .small-note { color: #333; }
.about-mini { display: flex; align-items: center; gap: 12px; }
.about-mini .about-mascot { display: block; width: 72px; height: 52px; object-fit: contain; image-rendering: pixelated; flex: none; }
.about-mini .eyebrow { display: none; }
.mini-facts { margin-top: 11px; padding-top: 8px; border-top: 1px solid #999; font: 11px/1.7 Geneva, sans-serif; }
.search-input, .terminal-input { width: 100%; padding: 5px 6px; border: 1px solid #000; border-radius: 0; background: #fff; }
.search-results { max-height: 200px; overflow: auto; margin-top: 8px; }
.search-results a { display: block; padding: 5px; border-bottom: 1px solid #ddd; }
.search-results a:hover { color: #fff; background: #000; }
.utility-window:has(.terminal-screen) { left: calc(50vw - 230px); width: 460px; }
.utility-window .window-body:has(.terminal-screen) { padding: 5px; background: #ddd; }
.terminal-screen { min-height: 145px; max-height: 245px; padding: 8px; overflow: auto; color: #fff; background: #000; white-space: pre-wrap; font: 11px/1.4 Monaco, 'Courier New', monospace; }
.utility-window .window-body:has(.terminal-screen) form { margin-top: 5px; }
.photo-viewer-window { top: 9vh; left: max(12px, calc(50vw - 340px)); width: min(680px, calc(100vw - 36px)); height: auto; min-width: 0; min-height: 0; }
.photo-viewer-window .window-body { display: block; padding: 0; overflow: hidden; }
.photo-document { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; margin: 0; }
.photo-stage { display: block; flex: none; }
.photo-stage img { display: block; width: 100%; height: auto; }
.photo-document figcaption { display: flex; justify-content: space-between; gap: 10px; padding: 6px 5px 4px; color: #000; background: #fff; font: 11px/1.3 Geneva, Verdana, sans-serif; }
.photo-document figcaption a { color: #000; white-space: nowrap; }
.terminal-input { font: 11px Monaco, 'Courier New', monospace; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; }
.toast { position: fixed; bottom: 12px; left: 50%; z-index: 300; padding: 6px 10px; transform: translateX(-50%); border: 1px solid #000; background: #fff; font: 11px Geneva, sans-serif; }
.toast[hidden] { display: none; }
.noscript { position: fixed; bottom: 0; z-index: 300; width: 100%; padding: 6px; border-top: 1px solid #000; background: #fff; text-align: center; }

@media (min-width: 1440px) and (min-height: 901px) {
  .welcome-window { width: 620px; }
}
@media (max-width: 1439px) and (min-width: 1101px), (max-height: 900px) and (min-width: 1101px) {
  .desktop-surface, .workspace { min-height: max(850px, calc(100vh - 23px)); }
  .welcome-window { top: 55px; }
  .photo-finder-preview { top: 420px; left: 16px; width: 440px; height: 260px; }
  .featured-photo-preview { top: min(495px, calc(100vh - 300px)); left: 365px; width: 390px; }
  .stickies-window-preview { top: 398px; left: calc(100vw - 530px); width: 300px; height: 230px; }
  .terminal-window-preview { top: 643px; left: 760px; width: min(300px, calc(100vw - 980px)); height: 145px; }
}
@media (max-height: 760px) and (min-width: 1200px) {
  .stickies-window-preview { height: 175px; }
  .terminal-window-preview { top: 585px; height: 110px; }
}
@media (max-width: 1199px) and (min-width: 681px) {
  .desktop-surface, .workspace { min-height: 1360px; }
  .desktop-icons { right: 8px; }
  .desktop-icon[data-icon="trash"] { right: 8px; }
  .welcome-window { top: 55px; left: 18px; width: min(548px, calc(100vw - 230px)); }
  .section-window { left: 18px; width: min(620px, calc(100vw - 230px)); }
  .photo-finder-preview { top: 420px; left: 15px; width: min(440px, calc(100vw - 230px)); height: 245px; }
  .featured-photo-preview { top: 535px; left: clamp(120px, calc(100vw - 700px), 340px); width: 390px; }
  .stickies-window-preview { top: 915px; left: 18px; width: 315px; height: 220px; }
  .terminal-window-preview { top: 915px; left: 350px; width: 350px; height: 205px; }
}
@media (min-width: 1020px) and (max-width: 1199px) {
  .stickies-window-preview { top: 110px; left: calc(100vw - 440px); width: 210px; height: 220px; }
}
@media (max-width: 900px) and (min-width: 681px) {
  .desktop-surface, .workspace { min-height: 1570px; }
  .stickies-window-preview { width: min(410px, calc(100vw - 230px)); }
  .terminal-window-preview { top: 1145px; left: 68px; width: min(360px, calc(100vw - 230px)); }
}
@media (min-width: 900px) and (max-width: 1019px) {
  .stickies-window-preview { top: 360px; left: calc(100vw - 440px); width: 210px; height: 170px; }
}
@media (max-height: 650px) and (min-width: 681px) {
  .desktop-icons { top: 36px; gap: 6px; padding-top: 14px; }
  .desktop-icon-group { grid-auto-rows: 62px; row-gap: 2px; }
}
@media (max-width: 680px) {
  .menu-bar { height: 32px; }
  .menu-trigger { height: 31px; padding: 0 6px; font-size: 12px; }
  .menu-panel { top: 31px; }
  .menu-bar-right { padding: 0 6px; font-size: 10px; }
  .mascot-tool { width: 23px; height: 31px; }
  .mascot-tool img { width: 18px; height: 31px; }
  .clock-long { display: none; }
  .clock-short { display: inline; }
  .desktop-surface { display: flex; flex-direction: column; min-height: calc(100dvh - 32px); overflow: visible; }
  .desktop-icons { display: none; }
  .workspace { order: 1; min-height: 0; padding: 12px 10px 17px; }
  .mobile-finder { display: block; order: 2; background: #fff; border-top: 1px solid #000; }
  .photo-finder-preview { height: 245px !important; }
  .terminal-window-preview { height: 185px !important; }
  .stickies-window-preview { height: 190px !important; }
  .mobile-finder-head { display: flex; justify-content: space-between; align-items: center; height: 29px; padding: 0 12px; border-bottom: 1px solid #000; font: 11px ChicagoFLF, Geneva, sans-serif; }
  .mobile-finder-head span { font: 10px Geneva, sans-serif; }
  .mobile-finder a, .mobile-finder button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 45px; padding: 5px 12px; border: 0; border-bottom: 1px solid #ccc; border-radius: 0; background: #fff; color: #000; text-decoration: none; text-align: left; font: 12px Geneva, sans-serif; }
  .mobile-finder a:hover, .mobile-finder button:hover, .mobile-finder a:focus-visible, .mobile-finder button:focus-visible { color: #fff; background: #000; }
  .mobile-finder .icon { width: 28px; height: 28px; }
  .mobile-finder a span:nth-child(2), .mobile-finder button span:nth-child(2) { flex: 1; }
  .mobile-finder a span:last-child, .mobile-finder button span:last-child { font-size: 16px; }
  .mac-window, .welcome-window, .section-window, .utility-window, .utility-window:has(.terminal-screen) { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; height: auto; min-height: 0; max-height: none; margin: 0 0 8px; box-shadow: 2px 2px 0 #555; }
  .mac-window[hidden] { display: none; }
  .window-titlebar { height: 24px; cursor: default; touch-action: auto; }
  .window-body { max-height: none; overflow: visible; }
  .photo-viewer-window .window-body { display: block; }
  .photo-stage img { width: 100%; height: auto; }
  .photo-document figcaption { flex-wrap: wrap; }
  .window-scrollbar, .window-footer, .window-zoom { display: none; }
  .window-control-space { display: block; }
  .welcome-content { padding: 14px 13px; }
  .welcome-main { gap: 11px; }
  .welcome-portrait { width: 68px; height: 68px; margin: 0; }
  .welcome-copy h1 { font-size: 14px; }
  .welcome-copy p { font-size: 12px; }
  .welcome-actions { gap: 8px; }
  .content-intro { padding: 12px; }
  .file-row { grid-template-columns: 29px minmax(0,1fr); padding: 9px 11px; }
  .file-kind { grid-column: 2; text-align: left; margin-top: -5px; }
  .document-page { padding: 14px; }
  .archive-grid { grid-template-columns: 1fr; }
  .utility-window .window-body { padding: 12px; }
  .disk-status { margin: -12px -12px 0; }
  .disk-file-list { margin: 0 -12px; }
  .photo-viewer-window .window-body { padding: 0; }
  .project-page .project-photo { float: none; width: min(100%, 240px); max-width: none; margin: 0 auto 14px; }
}
@media (max-width: 400px) {
  .menu-bar-right { gap: 1px; padding: 0 2px; font-size: 9px; }
  .menu-trigger { min-width: 0; padding: 0 3px; font-size: 10px; }
  .menu-group:first-child .menu-trigger { min-width: 32px; padding: 0 3px; }
  .menu-bar-tool { width: 21px; }
  .mascot-tool { width: 23px; }
  .welcome-main { display: block; }
  .welcome-portrait { float: left; margin: 0 12px 7px 0; }
}
@media (max-width: 360px) {
  .menu-group:nth-child(3), .menu-group:nth-child(4) { display: none; }
  .menu-trigger { min-width: 0; padding: 0 3px; font-size: 10px; }
  .menu-group:first-child .menu-trigger { min-width: 36px; padding: 0 3px; }
}
@media (prefers-reduced-motion: no-preference) {
  .desktop-icon .icon-art { transition: transform 100ms linear; }
  .desktop-icon:hover .icon-art { transform: translateY(-1px); }
}
@media print {
  .menu-bar, .desktop-icons, .mobile-finder, .window-titlebar, .window-scrollbar, .window-footer, .window-status, .welcome-actions { display: none !important; }
  .desktop-surface, .workspace, .window-body { background: #fff !important; min-height: 0; }
  .mac-window { position: static !important; width: 100% !important; height: auto; max-height: none; border: 0; box-shadow: none; }
  .window-body { overflow: visible; }
}