/* ═══════════════════════════════════════════════════════════════════
   zOS: text-mode windows, deep-fried icons, one accent colour.
   Ugly on purpose.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --fg: #d9d9cf;
  --fg-dim: #8b8b80;
  --fg-dark: #262a26;
  --acc: #79d06f;
  --glow: transparent;
  --tint: contrast(1.15) saturate(1.35);
  --font: "VT323", "Courier New", monospace;
  --taskbar-h: 34px;
  /* Windows 98-style 1-bit cursors, drawn for this site */
  --cur-arrow: url(/assets/img/cursors/cursor-arrow.png) 0 0, default;
  --cur-hand: url(/assets/img/cursors/cursor-hand.png) 5 0, pointer;
  --cur-busy: url(/assets/img/cursors/cursor-busy.png) 5 7, wait;
}
:root[data-theme="amber"] { --acc: #e3a845; }
:root[data-theme="pink"] { --acc: #e38bc0; }
:root[data-theme="white"] { --acc: #f2f2f2; }

html, body.os { height: 100%; overflow: hidden; }
body.os { background: #000; color: var(--fg); font: 20px/1.15 var(--font); }
.os a { color: var(--fg); text-decoration-color: var(--acc); }
.os a:hover { background: var(--acc); color: #000; text-shadow: none; }
.os ::selection { background: var(--acc); color: #000; }
.os * { scrollbar-color: var(--fg-dim) #000; }
.os :focus-visible { outline: 2px dashed var(--acc); outline-offset: 2px; }
.dim { color: var(--fg-dim); }
.defs { position: absolute; }

/* ── desktop ─────────────────────────────────────────────────────── */
.desktop {
  position: fixed;
  inset: 0 0 var(--taskbar-h) 0;
  overflow: hidden;
  background: #000 url(/assets/img/wallpaper.webp) center / contain no-repeat;
}
.desk-sig { position: absolute; right: 12px; bottom: 6px; margin: 0; padding: 0 6px; background: #000; color: var(--fg-dim); font-size: 16px; }

.icons {
  position: absolute;
  inset: 10px auto 10px 8px;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(auto-fill, 86px);
  gap: 0 6px;
  align-content: start;
  z-index: 1;
}
.icons.is-free { inset: 0; display: block; pointer-events: none; }
.icons.is-free .icon { position: absolute; pointer-events: auto; }
.icon {
  width: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 2px;
  text-decoration: none;
  text-align: center;
  line-height: 1;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
}
.os .icon:hover { background: none; }
.icon .px-icon {
  width: 44px;
  height: 44px;
  image-rendering: pixelated;
  transform: rotate(var(--tilt, 0deg));
  filter: url(#fried) drop-shadow(2px 2px 0 #000);
}
.px-icon { filter: url(#bw); }
.icon img.px-icon { object-fit: contain; }
.icon span { padding: 0 3px; background: #000; color: var(--fg); font-size: 18px; overflow-wrap: break-word; }
.icon:hover span, .icon:focus-visible span, .icon.is-selected span { background: var(--acc); color: #000; text-shadow: none; }
.icon:hover .px-icon { animation: jitter 0.25s steps(2) infinite; }
@keyframes jitter { 50% { transform: rotate(calc(var(--tilt, 0deg) * -1)) translate(1px, -1px); } }
.icon.is-dragging { opacity: 0.75; cursor: grabbing; z-index: 5; }
.icon.is-dragging .px-icon { animation: none; }

/* ── windows (text-mode boxes) ───────────────────────────────────── */
.windows { position: absolute; inset: 0; pointer-events: none; }
.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 260px;
  min-height: 140px;
  background: #000;
  border: 4px double var(--fg-dim);
  box-shadow: 12px 12px 0 #000;
  pointer-events: auto;
  inset: 16px 16px 16px 110px; /* no-JS fallback; JS positions windows */
}
.js .win { inset: auto; }
.win.is-active { border-color: var(--fg); }
.win.is-opening { animation: win-open 180ms steps(3); }
@keyframes win-open { from { clip-path: inset(0 0 100% 0); } }
.win[hidden] { display: none; }
.win.is-max { inset: 0 !important; width: auto !important; height: auto !important; box-shadow: none; }

.win-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 2px 0 6px;
  color: var(--fg-dim);
  border-bottom: 1px solid var(--fg-dim);
  cursor: var(--cur-arrow);
  user-select: none;
  touch-action: none;
}
.win.is-active .win-bar { background: var(--acc); color: #000; text-shadow: none; border-bottom-color: var(--fg); }
.win-title { display: flex; align-items: center; justify-content: center; gap: 6px; flex: 1; min-width: 0; margin: 0; font: 22px/1 var(--font); white-space: nowrap; }
.win-title::before, .win-title::after { content: "══"; opacity: 0.6; }
.win-name { overflow: hidden; text-overflow: ellipsis; }
.win-icon { display: flex; flex: none; }
.win-icon .px-icon { width: 16px; height: 16px; image-rendering: pixelated; }
.win:not(.is-active) .win-icon { opacity: 0.6; }
.win-btns { display: flex; }
.win-btns > * {
  all: unset;
  padding: 0 2px;
  color: inherit;
  font: 22px/1 var(--font);
  cursor: var(--cur-hand);
}
.win-btns > *::before { content: "["; }
.win-btns > *::after { content: "]"; }
.js .win-btns > [hidden] { display: inline; }
.win-btns > *:hover { background: #000; color: var(--fg); }
.win:not(.is-active) .win-btns > *:hover { background: var(--acc); color: #000; }

.win-body { flex: 1; min-height: 0; overflow: auto; }
.win-status { flex: none; padding: 0 24px 0 6px; border-top: 1px solid var(--fg-dim); color: var(--fg-dim); font-size: 17px; }
.win-status p { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.win-grip { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; color: var(--acc); font-size: 18px; line-height: 18px; text-align: center; }
.win-grip::before { content: "◢"; }
.win.is-max .win-grip { display: none; }
.win.is-dragging, .win.is-dragging * { user-select: none; }
.win.is-dragging iframe { pointer-events: none; }
.win-loading { padding: 12px; }

/* only the little preview on the home window gets deep-fried; real content stays untouched */
/* the ls projects/ preview: monochrome in the accent colour, with scanlines; hover for the real thing */
/* the ls projects/ preview: real colours with scanlines, framed in the accent colour; hover for the clean image */
.preview::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0 1px, transparent 1px 3px); }
.preview:hover::after { opacity: 0; }

/* ── taskbar ─────────────────────────────────────────────────────── */
.taskbar {
  position: fixed;
  inset: auto 0 0 0;
  height: var(--taskbar-h);
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 3px 4px;
  background: #000;
  border-top: 2px solid var(--acc);
  z-index: 10000;
  counter-reset: task;
}
.taskbar [hidden] { display: none !important; }
.taskbar button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  border: 0;
  background: var(--fg-dark);
  color: var(--fg);
  font: 20px/1 var(--font);
  text-shadow: inherit;
}
.start { background: var(--acc) !important; color: #000 !important; text-shadow: none !important; }
.taskbar button:hover { background: var(--acc); color: #000; text-shadow: none; }
.tasks { flex: 1; display: flex; gap: 6px; min-width: 0; overflow: hidden; }
.tasks button { flex: 0 1 200px; min-width: 44px; padding: 0 8px 0 0; justify-content: flex-start; overflow: hidden; white-space: nowrap; }
.tasks button::before { counter-increment: task; content: counter(task); align-self: stretch; display: grid; place-items: center; padding: 0 6px; background: #000; color: var(--fg); }
.tasks button span { overflow: hidden; text-overflow: ellipsis; }
.tasks button .px-icon { width: 16px; height: 16px; flex: none; image-rendering: pixelated; }
.tasks button.is-active { background: var(--acc); color: #000; text-shadow: none; }
.tasks button.is-min { color: var(--fg-dim); }
.tray { display: flex; align-items: center; gap: 12px; padding: 0 8px; border-left: 2px solid var(--fg-dim); }
.tray-music { all: unset; cursor: var(--cur-hand); max-width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.clock { font-size: 20px; }

/* ── start menu ──────────────────────────────────────────────────── */
.start-menu { position: absolute; bottom: var(--taskbar-h); left: 4px; min-width: 250px; background: #000; border: 4px double var(--acc); box-shadow: 10px -10px 0 #000; }
.start-menu[hidden] { display: none; }
.start-head { margin: 0; padding: 2px 8px; background: var(--acc); color: #000; text-shadow: none; }
.start-menu ul { list-style: none; margin: 0; padding: 4px 0; }
.start-menu a, .start-menu li > button {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 1px 10px;
  color: var(--fg);
  font: 20px/1.1 var(--font);
  cursor: var(--cur-hand);
}
.start-menu a::before, .start-menu li > button::before { content: " "; width: 1ch; }
.start-menu a:hover::before, .start-menu li > button:hover::before, .start-menu a:focus-visible::before { content: ">"; }
.start-menu a:hover, .start-menu a:focus-visible, .start-menu li > button:hover, .start-menu li > button:focus-visible { background: var(--acc); color: #000; text-shadow: none; }
.start-menu .px-icon { width: 16px; height: 16px; image-rendering: pixelated; }
.start-menu .sep { margin: 4px 8px; border-top: 1px dashed var(--fg-dim); }

/* ── boot & shutdown ─────────────────────────────────────────────── */
.boot, .shutdown { position: fixed; inset: 0; z-index: 20000; background: #000; color: var(--fg); font: 20px/1.2 var(--font); padding: 3vh 4vw; cursor: var(--cur-hand); }
.boot[hidden], .shutdown[hidden] { display: none; }
.boot-log { margin: 0; font: inherit; white-space: pre; overflow: hidden; }
.boot-skip { position: absolute; bottom: 3vh; right: 4vw; margin: 0; color: var(--fg-dim); }
.boot-choice { all: unset; color: var(--acc); cursor: var(--cur-hand); white-space: pre-wrap; }
.boot-choice:hover, .boot-choice:focus-visible { background: var(--acc); color: #000; }
.shutdown-restart { animation: blink 1.4s steps(1) infinite; }
.boot-log .safe { color: var(--acc); }

/* ── home ────────────────────────────────────────────────────────── */
.home { position: relative; padding: 0 16px 16px; }
.marquee { overflow: hidden; margin: 0 -16px 10px; border-bottom: 1px dashed var(--fg-dim); white-space: nowrap; color: var(--acc); }
.marquee span { display: inline-block; padding-left: 100%; animation: marquee 22s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }
.sticker {
  position: absolute;
  top: 48px;
  right: 22px;
  padding: 6px 10px;
  border: 5px solid;
  border-image: repeating-linear-gradient(-45deg, #ffd400 0 8px, #000 8px 16px) 5;
  background: #ffd400;
  color: #000;
  text-shadow: none;
  font: 700 15px/1.05 "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive;
  text-align: center;
  transform: rotate(9deg);
  box-shadow: 4px 4px 0 #000;
}
/* home.sh: "+ cmd" lines like a shell tracing a script (set -x) */
.cmd { margin: 14px 0 2px; color: var(--fg); }
.cmd::before { content: "+ "; color: var(--fg-dim); }
.cmd.is-prompt::before { content: "Z:\\>"; color: var(--acc); }
.cmd.is-last { margin-top: 6px; }
.out { margin: 0 0 0 2ch; }
.out p { margin: 0 0 6px; }
.out b { font-weight: 400; background: var(--fg-dark); padding: 0 3px; }
.who { margin: 2px 0 0 2ch; font: 56px/1 var(--font); letter-spacing: 2px; color: #fff; }
.who .blink { font-size: 0.8em; }

.dir { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 14px; align-items: start; }
.dir ul { list-style: none; margin: 4px 0; padding: 0; }
.dir .tile { display: flex; gap: 2ch; padding: 0 4px; text-decoration: none; white-space: pre; overflow: hidden; }
.dir .tile.is-on { background: var(--fg-dark); }
.dir .tile:hover { background: var(--acc); color: #000; }
.d-type { color: var(--fg-dim); }
.dir .tile:hover .d-type { color: #000; }
.d-title { overflow: hidden; text-overflow: ellipsis; }
.preview { position: relative; display: block; border: 4px double var(--acc); text-decoration: none; background: #000 !important; transform: rotate(-1.2deg); }
.preview img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; image-rendering: pixelated; }
.preview-cap { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 0 6px; background: #000; color: var(--fg); }
.desc { color: var(--fg-dim); margin-top: 6px; }

.rows { list-style: none; padding: 0; }
.rows li { display: flex; gap: 2ch; }
.rows .when { flex: none; white-space: pre; color: var(--fg-dim); }
.rows b { font-weight: 400; }
.ago { margin-left: auto; color: var(--fg-dim); }

/* ── folders ─────────────────────────────────────────────────────── */
.folder { padding: 6px 14px 14px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.sec-head h2 { margin: 0; font: 28px/1.1 var(--font); }
.sec-head h2::before { content: "Z:\\> dir "; color: var(--fg-dim); }
.folder-note { margin: 0 0 8px; color: var(--fg-dim); }
.folder-h { margin: 14px 0 6px; padding: 0 4px; font: 22px/1.1 var(--font); background: var(--fg-dark); }
.folder-h::before { content: "== "; }
.folder-h::after { content: " =="; }
.empty { color: var(--fg-dim); }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.card { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.os .card:hover { background: none; color: var(--fg); }
.card picture { display: block; }
.card img[width] { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 2px solid var(--fg-dim); }
.card:hover img { border-color: var(--acc); filter: none; }
.card strong { font-weight: 400; font-size: 22px; }
.card:hover strong { background: var(--acc); color: #000; text-shadow: none; }
.card-meta { color: var(--fg-dim); font-size: 17px; }
.card-sum { display: none; }
.cards--wide { grid-template-columns: 1fr; }
.cards--wide .card { display: grid; grid-template-columns: minmax(0, 46%) 1fr; grid-template-rows: auto auto 1fr; gap: 2px 14px; align-items: start; }
.cards--wide .card picture { grid-row: 1 / 4; }
.cards--wide .card img[width] { aspect-ratio: 16 / 9; }
.cards--wide .card strong { font-size: 30px; }
.cards--wide .card-sum { display: block; }

.log { list-style: none; margin: 0; padding: 0; }
.log li { display: flex; flex-wrap: wrap; gap: 0 2ch; }
.log time { color: var(--fg-dim); }
.log-sum { flex-basis: 100%; color: var(--fg-dim); padding-left: 4ch; }
.tag { padding: 0 4px; background: var(--fg-dark); }

.photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.photo-grid img[width] { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--fg-dim); }
.photo-grid li span { display: block; color: var(--fg-dim); font-size: 17px; }
.viewer { height: 100%; margin: 0; display: grid; grid-template-rows: 1fr auto; background: #000; }
.viewer img { width: 100%; height: 100%; object-fit: contain; min-height: 0; }
.viewer p { margin: 0; padding: 0 8px; }

.files { list-style: none; margin: 0; padding: 0; }
.files li { display: flex; align-items: center; gap: 10px; padding: 0 4px; }
.files li:hover { background: var(--acc); color: #000; text-shadow: none; }
.files .px-icon { width: 16px; height: 16px; image-rendering: pixelated; }
.files small { margin-left: auto; font-size: inherit; color: inherit; opacity: 0.7; }

/* ── webring ─────────────────────────────────────────────────────── */
.webring { padding: 8px 14px 14px; }
.ring { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 18px; padding: 4px; border: 4px double var(--acc); }
.ring span { display: inline-flex; align-items: center; gap: 8px; }
.ring .px-icon { width: 24px; height: 24px; image-rendering: pixelated; }
.buttons { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, 88px); gap: 8px 6px; }
.b88 {
  display: grid;
  place-items: center;
  width: 88px;
  height: 31px;
  padding: 2px;
  overflow: hidden;
  border: 1px solid #000;
  outline: 1px solid #777;
  outline-offset: -2px;
  background: #3b1d6e;
  color: #f6a8ff !important;
  font: 700 10px/1 Verdana, sans-serif;
  text-align: center;
  text-decoration: none;
  text-shadow: 1px 1px 0 #000;
}
.buttons li:nth-child(3n) .b88 { background: #0f5b52; color: #9ff0c6 !important; }
.buttons li:nth-child(3n + 1) .b88 { background: #6b5410; color: #ffe27a !important; }
.b88:hover { filter: brightness(1.4) saturate(2); }
.b88-img { image-rendering: pixelated; filter: none !important; }
.snippet { margin: 0; padding: 6px; overflow-x: auto; border: 1px dashed var(--fg-dim); white-space: pre-wrap; word-break: break-all; font: 17px var(--font); }

/* ── terminal ────────────────────────────────────────────────────── */
.term { min-height: 100%; padding: 6px 10px; color: var(--acc); font: 20px/1.15 var(--font); cursor: text; }
.term-out p { margin: 0; white-space: pre-wrap; word-break: break-word; }
.term-out .t-dim { color: var(--fg-dim); }
.term-out .t-hi { color: var(--acc); }
.term-out .t-err { color: #ff4040; }
.term-out button { all: unset; cursor: var(--cur-hand); text-decoration: underline; }
.term-out button:hover { background: var(--acc); color: #000; }
.term-line { display: flex; }
.term-prompt { flex: none; }
.term-input { flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: var(--fg); font: inherit; text-shadow: inherit; caret-color: var(--acc); outline: none; }

/* ── zAMP ────────────────────────────────────────────────────────── */
.player { padding: 8px 10px; }
.player-screen { display: grid; justify-items: center; gap: 2px; padding: 10px 8px 6px; border: 4px double var(--fg-dim); }
.player-viz { display: flex; align-items: flex-end; gap: 3px; height: 54px; width: 80%; }
.player-viz i { flex: 1; height: 6%; background: repeating-linear-gradient(0deg, var(--acc) 0 3px, transparent 3px 5px); }
.player.is-playing .player-viz i { animation: viz 600ms steps(5) infinite alternate; }
.player-viz i:nth-child(3n) { animation-duration: 420ms !important; }
.player-viz i:nth-child(4n + 1) { animation-duration: 760ms !important; }
.player-viz i:nth-child(5n + 2) { animation-duration: 520ms !important; }
@keyframes viz { from { height: 8%; } to { height: 100%; } }
.player-now { width: 100%; margin: 0; overflow: hidden; white-space: nowrap; text-align: center; font-size: 24px; }
.player.is-playing .player-now span { display: inline-block; padding-left: 100%; animation: marquee 12s linear infinite; }
.player-time { margin: 0; color: var(--fg-dim); }
.player-seek { width: 100%; margin: 8px 0 4px; accent-color: var(--acc); }
.player-controls { display: flex; align-items: center; gap: 4px; }
.player-controls button { all: unset; padding: 0 4px; cursor: var(--cur-hand); font: 22px/1 var(--font); }
.player-controls button::before { content: "["; }
.player-controls button::after { content: "]"; }
.player-controls button:hover, .player-controls button[aria-pressed="true"] { background: var(--acc); color: #000; text-shadow: none; }
.player-vol { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--fg-dim); }
.player-vol input { width: 90px; accent-color: var(--acc); }
.playlist { margin: 8px 0 0; padding: 0; list-style: none; counter-reset: t; max-height: 180px; overflow: auto; border-top: 1px dashed var(--fg-dim); }
.playlist button { all: unset; box-sizing: border-box; display: flex; gap: 1ch; width: 100%; padding: 0 4px; cursor: var(--cur-hand); }
.playlist button::before { counter-increment: t; content: counter(t, decimal-leading-zero) "."; color: var(--fg-dim); }
.playlist button small { margin-left: auto; font-size: inherit; color: var(--fg-dim); }
.playlist button:hover, .playlist button.is-current { background: var(--acc); color: #000; text-shadow: none; }
.playlist button:hover::before, .playlist button.is-current::before, .playlist button:hover small, .playlist button.is-current small { color: #000; }
.player .empty { margin: 8px 0 0; }

/* ── mobile: one full-screen window at a time ─────────────────────── */
@media (max-width: 700px) {
  .icons, .icons.is-free { inset: 10px 4px; display: grid; grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-template-rows: none; justify-items: center; pointer-events: auto; }
  .icons.is-free .icon { position: static; }
  .icon { width: 84px; }
  .desk-sig { display: none; }
  .win, .js .win { inset: 0 !important; width: auto !important; height: auto !important; border-width: 4px 0 0; }
  .win-grip, .win-btns [data-act="max"] { display: none !important; }
  .tasks button { flex-basis: 52px; }
  .tasks button span { display: none; }
  .tray-music { display: none !important; }
  .who { font-size: 40px; }
  .sticker { top: 34px; right: 8px; font-size: 12px; }
  .dir { grid-template-columns: 1fr; }
  .dir .preview { order: -1; }
  .d-type, .d-date { display: none; }
  .rows li { flex-wrap: wrap; column-gap: 1ch; }
  .rows .ago { display: none; }
  .cards--wide .card { grid-template-columns: 1fr; }
  .cards--wide .card picture { grid-row: auto; }
}

/* ── explorer ────────────────────────────────────────────────────── */
.xp { min-height: 100%; display: flex; flex-direction: column; }
.xp-bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  background: #000;
  border-bottom: 1px solid var(--fg-dim);
}
.xp-btn { all: unset; flex: none; padding: 0 6px; border: 1px solid var(--fg-dim); color: var(--fg); cursor: var(--cur-hand); text-decoration: none; }
.xp-btn:hover, .os .xp-btn:hover { background: var(--acc); color: #000; border-color: var(--acc); }
.xp-btn.is-off { color: var(--fg-dark); border-color: var(--fg-dark); cursor: var(--cur-arrow); }
.xp-addr { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; }
.xp-addr > span:first-child { color: var(--fg-dim); }
.xp-field { flex: 1; min-width: 0; padding: 0 6px; border: 1px solid var(--fg-dim); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xp-head { display: none; }
.xp-items { list-style: none; margin: 0; padding: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 14px 8px; align-content: start; }
.xp-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px; text-align: center; text-decoration: none; color: var(--fg); }
.os .xp-item:hover { background: none; color: var(--fg); }
.xp-ic { display: grid; place-items: center; width: 52px; height: 52px; }
.xp-ic .px-icon { width: 44px; height: 44px; image-rendering: pixelated; }
.xp-thumb { width: 92px; height: 70px; }
.xp-thumb img[width] { width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--fg-dim); }
.xp-name { max-width: 100%; padding: 0 3px; font-size: 18px; line-height: 1.05; overflow-wrap: anywhere; }
.xp-item:hover .xp-name, .xp-item:focus-visible .xp-name { background: var(--acc); color: #000; }
.xp-size, .xp-type, .xp-date { display: none; }
.xp-empty { margin: 16px; color: var(--fg-dim); }

/* details view */
.xp.is-details .xp-head, .xp.is-details .xp-item { display: grid; grid-template-columns: minmax(0, 1fr) 90px 170px 110px; gap: 12px; align-items: center; }
.xp.is-details .xp-head { padding: 2px 16px 2px 40px; border-bottom: 1px solid var(--fg-dark); color: var(--fg-dim); }
.xp.is-details .xp-items { display: block; padding: 4px 6px; }
.xp.is-details .xp-item { position: relative; padding: 1px 10px 1px 34px; text-align: left; }
.xp.is-details .xp-ic { position: absolute; left: 8px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); }
.xp.is-details .xp-ic .px-icon { width: 16px; height: 16px; }
.xp.is-details .xp-thumb img[width] { width: 18px; height: 18px; border: 0; }
.xp.is-details .xp-name { font-size: 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }
.xp.is-details .xp-size, .xp.is-details .xp-type, .xp.is-details .xp-date { display: block; color: var(--fg-dim); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.xp.is-details .xp-size { text-align: right; }
.xp.is-details .xp-item:hover { background: var(--acc); color: #000; }
.xp.is-details .xp-item:hover > span { color: #000; background: none; }
.viewer video { width: 100%; height: 100%; min-height: 0; background: #000; }

/* ── TIME TO DEATH ───────────────────────────────────────────────── */
.ttd { padding: 12px 18px 18px; text-align: center; }
.ttd-who { margin: 0; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 2px; }
.ttd-big { margin: 6px 0 0; font-size: clamp(40px, 7vw, 64px); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ttd-unit { margin: 2px 0 12px; color: var(--acc); text-transform: uppercase; letter-spacing: 3px; }
.ttd-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; }
.ttd-modes button, .ttd-btns button { all: unset; padding: 0 6px; border: 1px solid var(--fg-dim); cursor: var(--cur-hand); }
.ttd-modes button:hover, .ttd-modes button[aria-pressed="true"], .ttd-btns button:hover { background: var(--acc); border-color: var(--acc); color: #000; }
.ttd-bar { margin: 14px 0 2px; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.ttd-date { margin: 0; color: var(--fg-dim); }
.ttd-form { margin: 14px auto 0; max-width: 420px; text-align: left; }
.ttd-form summary { cursor: var(--cur-hand); text-align: center; list-style: none; }
.ttd-form summary::-webkit-details-marker { display: none; }
.ttd-form summary:hover { color: var(--acc); }
.ttd-form form { display: grid; gap: 6px; margin-top: 8px; padding: 10px; border: 4px double var(--fg-dim); }
.ttd-form label { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; }
.ttd-form input, .ttd-form select { padding: 0 4px; border: 1px solid var(--fg-dim); background: #000; color: var(--fg); font: inherit; color-scheme: dark; }
.ttd-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.ttd-hint, .ttd-fine { color: var(--fg-dim); font-size: 17px; }
.ttd-fine { margin: 16px 0 0; }

@media (max-width: 700px) {
  .xp.is-details .xp-head, .xp.is-details .xp-item { grid-template-columns: minmax(0, 1fr) 80px; }
  .xp.is-details .xp-type, .xp.is-details .xp-date, .xp.is-details .xp-head span:nth-child(n + 3) { display: none; }
  .xp-addr > span:first-child { display: none; }
}
.ttd-born { display: grid; grid-template-columns: 70px 1fr 1fr 1.4fr; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; }
.ttd-born legend { float: left; padding: 0; }
.ttd-nudge { margin: 14px 0 0; color: var(--acc); font-size: 22px; }

/* email "catch the @" game */
.mail { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.mail-play { all: unset; color: var(--fg-dim); cursor: var(--cur-hand); }
.mail-play:hover { background: var(--acc); color: #000; }
.mail-game { position: relative; display: inline-block; width: 220px; height: 44px; border: 1px dashed var(--fg-dim); vertical-align: middle; }
.mail-at { all: unset; position: absolute; padding: 0 4px; color: #000; background: var(--acc); font: 22px/1.1 var(--font); cursor: var(--cur-hand); transition: left 0.12s steps(3), top 0.12s steps(3); }
.mail-at:focus-visible { outline: 2px dashed var(--fg); }
.mail-score { position: absolute; right: 4px; bottom: 0; color: var(--fg-dim); font-size: 16px; }
.mail-won { color: var(--fg-dim); }

/* webring: real 88×31 buttons, or icon + name for sites that don't have one */
.buttons a { display: block; width: 88px; height: 31px; text-decoration: none; }
.os .buttons a:hover { background: none; }
.buttons .b88-img { display: block; width: 88px; height: 31px; object-fit: contain; image-rendering: pixelated; }
.b88--icon { display: flex !important; align-items: center; gap: 3px; padding: 1px 3px 1px 1px; background: #111 !important; color: #ddd !important; font: 700 9px/1 Verdana, sans-serif; text-align: left; place-items: initial; }
.b88--icon img { flex: none; height: 27px; width: auto; max-width: 46px; object-fit: contain; image-rendering: pixelated; }
.b88--icon span { overflow: hidden; }
.buttons a:hover .b88-img, .buttons a:hover .b88 { filter: brightness(1.3); outline: 1px solid var(--acc); }

/* photo albums: bigger thumbnails, captions as names */
.xp-about { margin: 8px 12px 0; color: var(--fg-dim); }
.xp-items--photos { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.xp-items--photos .xp-thumb { width: 160px; height: 120px; }
.xp-thumb { overflow: hidden; }
.xp-thumb picture { display: block; width: 100%; height: 100%; }
.b88--icon span { font-size: 8px; line-height: 1.05; white-space: normal; overflow-wrap: anywhere; max-height: 27px; }

/* ── zVIEW image viewer ──────────────────────────────────────────── */
.win[data-app="zview"] .win-body { overflow: hidden; }
.zv { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.zv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 4px 6px; border-bottom: 1px solid var(--fg-dim); }
.zv-bar button { all: unset; padding: 0 6px; border: 1px solid var(--fg-dim); cursor: var(--cur-hand); white-space: nowrap; }
.zv-bar button:hover:not(:disabled), .zv-bar button[aria-pressed="true"] { background: var(--acc); border-color: var(--acc); color: #000; }
.zv-bar button:disabled { color: var(--fg-dark); border-color: var(--fg-dark); cursor: var(--cur-arrow); }
.zv-sep { color: var(--fg-dark); }
.zv-count { margin-left: auto; color: var(--fg-dim); }
.zv-stage {
  position: relative;
  min-height: 0;
  overflow: auto;
  display: grid;
  place-items: center;
  /* hard-edged checkerboard, like an old paint program's transparent canvas */
  background: repeating-conic-gradient(#151515 0 25%, #0c0c0c 0 50%) 0 0 / 24px 24px;
  cursor: var(--cur-hand);
}
.zv-stage img, .zv-stage video { display: block; max-width: none; filter: drop-shadow(6px 6px 0 #000); }
/* fit: pin the picture inside the stage and letterbox it */
.zv-stage.is-fit img, .zv-stage.is-fit video { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; }
.zv-stage video { cursor: var(--cur-arrow); }
.zv-strip { display: flex; gap: 6px; margin: 0; padding: 6px; list-style: none; overflow-x: auto; border-top: 4px double var(--fg-dim); }
.zv-strip button { all: unset; display: grid; place-items: center; width: 64px; height: 48px; border: 2px solid var(--fg-dark); background: #000; cursor: var(--cur-hand); overflow: hidden; }
.zv-strip button img { width: 100%; height: 100%; object-fit: cover; }
.zv-strip button span { color: var(--fg-dim); font-size: 16px; }
.zv-strip button:hover { border-color: var(--fg-dim); }
.zv-strip button.is-on { border-color: var(--acc); }
@media (max-width: 700px) {
  .zv-strip button { width: 48px; height: 36px; }
}

/* the lasagna button on the desktop */
.desk-lasagna { position: absolute; right: 12px; bottom: 34px; display: block; line-height: 0; }
.os .desk-lasagna:hover { background: none; }
.desk-lasagna img { image-rendering: pixelated; }
.desk-lasagna:hover img { outline: 1px solid var(--acc); outline-offset: 1px; }
@media (max-width: 700px) { .desk-lasagna { right: 8px; bottom: 8px; } }

/* zAMP: tracks without an audio file are links out */
.playlist .pl-link { box-sizing: border-box; display: flex; gap: 1ch; width: 100%; padding: 0 4px; text-decoration: none; color: var(--fg); }
.playlist .pl-link::before { counter-increment: t; content: counter(t, decimal-leading-zero) "."; color: var(--fg-dim); }
.playlist .pl-link small { margin-left: auto; font-size: inherit; color: var(--fg-dim); }
.playlist .pl-link b { font-weight: 400; color: var(--acc); }
.os .playlist .pl-link:hover { background: var(--acc); color: #000; }
.playlist .pl-link:hover small, .playlist .pl-link:hover b, .playlist .pl-link:hover::before { color: #000; }
.playlist { max-height: 260px; }
.playlist .pl-link span, .playlist button span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.playlist .pl-link small, .playlist button small { flex: none; white-space: nowrap; }

/* zAMP's YouTube TV: visible and at least 200px tall, per YouTube's embed rules */
.player-tv { position: relative; aspect-ratio: 16 / 9; min-height: 200px; margin-bottom: 6px; border: 4px double var(--fg-dim); background: #000; display: grid; place-items: center; }
.player-tv p { margin: 0; color: var(--fg-dim); }
.player-tv iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* with a TV on top, the bars stay hidden so the playlist never jumps when a video starts */
.player:has(.player-tv) .player-viz { display: none; }
.player:has(.player-tv) .player-screen { padding-top: 6px; }
.playlist li { display: flex; align-items: center; }
.playlist li > button, .playlist li > .pl-link { flex: 1; min-width: 0; }
.playlist .pl-yt { flex: none; padding: 0 6px; color: var(--acc); text-decoration: none; }
.os .playlist .pl-yt:hover { background: var(--acc); color: #000; }

/* webring: the copy-paste code stays folded until asked for */
.snippet-box { margin-top: 6px; }
.snippet-box summary { display: inline-block; cursor: var(--cur-hand); color: var(--fg-dim); list-style: none; }
.snippet-box summary::-webkit-details-marker { display: none; }
.snippet-box summary:hover { background: var(--acc); color: #000; }
.snippet-box[open] summary { color: var(--fg); }
.snippet-box .snippet { margin-top: 6px; }

/* zAMP mini player: minimizing zAMP while a video plays docks just the video
   (356×200, YouTube's minimum is 200×200) in the corner. Click its title bar to restore. */
.win.is-mini {
  inset: auto 12px 12px auto !important;
  width: 364px !important;
  height: auto !important;
  min-height: 0;
  z-index: 9000 !important;
  box-shadow: 8px 8px 0 #000;
}
.win.is-mini .win-bar { cursor: var(--cur-hand); }
.win.is-mini .win-btns [data-act="min"], .win.is-mini .win-btns [data-act="max"], .win.is-mini .win-status, .win.is-mini .win-grip { display: none !important; }
.win.is-mini .win-body { overflow: hidden; }
.win.is-mini .player { padding: 0; }
.win.is-mini .player > :not(.player-tv) { display: none; }
.win.is-mini .player-tv { margin: 0; border: 0; }
@media (max-width: 700px) {
  .win.is-mini, .js .win.is-mini { inset: auto 8px 8px auto !important; width: 364px !important; max-width: calc(100vw - 16px) !important; height: auto !important; border-width: 4px; }
}
/* download bar at the top of CV.PDF */
.doc-bar { margin: 0 0 12px; text-align: right; }
.doc-bar a { text-decoration: none; }
.os .doc-bar a:hover { background: var(--acc); color: #000; }
/* zAMP: the video stays put and only the playlist scrolls, so scrolling never
   drags the YouTube player under the mouse (which pops up YouTube's own overlay) */
.win[data-app="music"]:not(.is-mini) .win-body { overflow: hidden; }
.win[data-app="music"]:not(.is-mini) .player { height: 100%; display: flex; flex-direction: column; }
.win[data-app="music"]:not(.is-mini) .player > * { flex: none; }
.win[data-app="music"]:not(.is-mini) .playlist { flex: 1 1 auto; min-height: 60px; max-height: none; overflow-y: auto; }
/* terminal: no focus outline on the command line, the caret already shows where you type */
.term-input:focus, .term-input:focus-visible { outline: none; box-shadow: none; }

/* ── BAIL OUT (itch.io game) ─────────────────────────────────────── */
.win[data-app="game"] .win-body { overflow: hidden; }
.game { height: 100%; display: flex; flex-direction: column; }
.game-bar { flex: none; display: flex; gap: 8px; padding: 4px 6px; border-bottom: 1px solid var(--fg-dim); }
.game-bar button, .game-bar a { all: unset; padding: 0 6px; border: 1px solid var(--fg-dim); cursor: var(--cur-hand); }
.game-bar button:hover:not(:disabled), .os .game-bar a:hover { background: var(--acc); border-color: var(--acc); color: #000; }
.game-bar button:disabled { color: var(--fg-dark); border-color: var(--fg-dark); cursor: var(--cur-arrow); }
.game-screen { flex: 1; min-height: 0; display: grid; place-items: center; background: #000; }
.game-screen iframe { width: 100%; height: 100%; border: 0; }
.game-start { all: unset; position: relative; display: grid; place-items: center; max-width: 100%; max-height: 100%; cursor: var(--cur-hand); }
.game-start picture, .game-start img[width] { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; image-rendering: pixelated; }
.game-start span { position: absolute; bottom: 12%; padding: 2px 10px; background: #000; color: var(--fg); border: 4px double var(--acc); font-size: 26px; }
.game-start:hover span, .game-start:focus-visible span { background: var(--acc); color: #000; }
.game-note { flex: none; margin: 0; padding: 4px 8px; color: var(--fg-dim); font-size: 17px; border-top: 1px solid var(--fg-dark); }

/* cursors: arrow everywhere, hand on anything clickable, hourglass while loading */
body.os { cursor: var(--cur-arrow); }
.os a, .os button, .os summary, .os select, .os label, .os .icon, .os .xp-item, .os .tile { cursor: var(--cur-hand); }
.os button:disabled { cursor: var(--cur-arrow); }
.os .win-loading, .os .win:has(.win-loading) { cursor: var(--cur-busy); }
.os input[type="text"], .os input:not([type]), .os input[type="number"], .os .term, .os .term-input { cursor: text; }
.os .icon.is-dragging { cursor: grabbing; }

/* TIME TO DEATH splash: only the skull until it's drawn, then the app */
.ttd.is-splash { min-height: 100%; padding: 0; display: grid; }
.ttd.is-splash > :not(.ttd-splash) { display: none !important; }
.ttd-splash { display: grid; place-items: center; min-height: 100%; background: #000; cursor: var(--cur-hand); }
.ttd-splash[hidden] { display: none; }
.ttd-splash img[width], .ttd-splash video { display: block; width: min(340px, 70%); height: auto; image-rendering: pixelated; }
.ttd-splash.is-flicker img, .ttd-splash.is-flicker video { animation: skull-flicker 450ms steps(1) 1; }
@keyframes skull-flicker { 0% { opacity: 1; } 25% { opacity: 0.2; } 50% { opacity: 1; } 75% { opacity: 0.4; } 100% { opacity: 0; } }
.win[data-app="ttd"] .win-body > .ttd { min-height: 100%; box-sizing: border-box; }

/* ── STEAM: a little library in the style of the 2004 green Steam client ── */
.win[data-app="library"] .win-body { overflow: hidden; }
.lib { --st-bg: #4c5844; --st-panel: #3e4637; --st-line: #282e22; --st-text: #d8ded3; --st-dim: #a0aa95; --st-gold: #c4b550; --st-sel: #958831;
  height: 100%; display: flex; flex-direction: column; background: var(--st-bg); color: var(--st-text); font: 12px/1.35 Tahoma, Verdana, "DejaVu Sans", sans-serif; text-shadow: none; }
.lib a { color: var(--st-text); text-decoration: none; }
.os .lib a:hover { background: none; color: #fff; }
.lib-top { flex: none; display: flex; align-items: baseline; gap: 16px; padding: 6px 12px; background: var(--st-panel); border-bottom: 1px solid var(--st-line); }
.lib-logo { font: 700 18px Tahoma, Verdana, sans-serif; color: #fff; letter-spacing: 1px; }
.lib-tab { color: var(--st-dim); font-size: 11px; letter-spacing: 1px; }
.lib-tab.is-on { color: var(--st-gold); }
.lib-tab--dim { opacity: 0.6; }
.lib-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px 1fr; }
.lib-list { overflow-y: auto; background: var(--st-panel); border-right: 1px solid var(--st-line); }
.lib-list-h { margin: 0; padding: 6px 8px; color: var(--st-gold); font-size: 11px; letter-spacing: 1px; border-bottom: 1px solid var(--st-line); }
.lib-list ul { list-style: none; margin: 0; padding: 2px 0; }
.lib-list a { display: block; padding: 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.os .lib-list a:hover { background: #5a6a50; }
.os .lib-list a.is-on { background: var(--st-sel); color: #fff; }
.lib-view { overflow-y: auto; padding: 12px; }
.lib-detail { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--st-line); }
.lib-detail-art { flex: none; width: min(460px, 100%); aspect-ratio: 460 / 215; background: var(--st-panel); border: 1px solid var(--st-line); }
.lib-detail-art img { width: 100%; height: 100%; object-fit: cover; }
.lib-detail-info h2 { margin: 0 0 2px; font: 700 22px Tahoma, Verdana, sans-serif; color: #fff; }
.lib-detail-played { margin: 0 0 10px; color: var(--st-gold); font-size: 12px; }
.lib-btn { display: inline-block; padding: 4px 14px; background: #5c7e10; border: 1px solid #8fb93b; color: #fff !important; font-weight: 700; letter-spacing: 1px; }
.os .lib .lib-btn:hover { background: #79a315; }
.lib-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 10px; }
.lib-cap { display: flex; flex-direction: column; gap: 3px; }
.lib-cap picture, .lib-cap img[width] { display: block; width: 100%; height: auto; aspect-ratio: 460 / 215; object-fit: cover; }
.lib-cap img { border: 1px solid var(--st-line); }
.lib-cap:hover img, .lib-cap.is-on img { outline: 2px solid var(--st-gold); outline-offset: -1px; }
.lib-cap-title { font-size: 11px; color: var(--st-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-cap.is-on .lib-cap-title { color: var(--st-gold); }
.lib-cap-hrs { margin-top: -3px; font-size: 10px; color: var(--st-gold); opacity: 0.85; }
.lib-grid-h { margin: 14px 0 8px; color: var(--st-gold); font: 400 11px Tahoma, Verdana, sans-serif; letter-spacing: 1px; }
.lib-detail + .lib-grid-h { margin-top: 0; }
.lib-list ul + .lib-list-h { border-top: 1px solid var(--st-line); }
@media (max-width: 700px) {
  .lib-main { grid-template-columns: 1fr; }
  .lib-list { display: none; }
}

/* ── plain mode (?plain, from /recruiter/): just the document, as a normal readable page ── */
.plain-back { display: none; }
html.plain, html.plain body.os { height: auto; overflow: visible; }
html.plain .desktop > :not(.windows), html.plain .taskbar, html.plain .boot, html.plain .skip,
html.plain .win-bar, html.plain .win-status { display: none !important; }
html.plain .desktop, html.plain .windows { position: static; pointer-events: auto; background: #000; }
html.plain .win.is-initial { position: static; display: block; width: auto; height: auto; max-width: 860px; margin: 0 auto; border: 0; box-shadow: none; background: none; }
html.plain .win-body { overflow: visible; height: auto; }
html.plain .plain-back { display: block; max-width: 860px; margin: 0 auto; padding: 18px 16px 0; font: 24px/1.2 var(--font); color: var(--acc); }
html.plain .prose { max-width: none; padding: 10px 16px 40px; font: 15px/1.6 Verdana, Tahoma, Geneva, "DejaVu Sans", sans-serif; }
html.plain .prose h1, html.plain .prose h2, html.plain .prose h3, html.plain .prose .kicker, html.plain .prose-foot { font-family: var(--font); }
html.plain .prose h3 { font-size: 26px; }
html.plain .prose .kicker, html.plain .prose-foot { font-size: 21px; }
html.plain .prose img { cursor: auto; }

/* home.sh: 88x31 link buttons (email, site, github, linkedin, itch) */
.me-buttons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.os .me-buttons a, .os .me-buttons a:hover { display: block; background: none; line-height: 0; }
.me-buttons a:hover img { outline: 2px solid var(--acc); outline-offset: 1px; }