/* DYOB — Mac System 7 Ghost Theme --------------------------------- */

/* Silkscreen : bitmap pixel font — chrome, labels, headings
   Share Tech Mono : crisp monospace — body copy, excerpts        */
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=Share+Tech+Mono&display=swap');

/* ── Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ───────────────────────────────────────────────────────── */
:root {
  --font-pixel: 'Silkscreen', 'Chicago', Charcoal, sans-serif;
  --font-body:  'Share Tech Mono', 'Courier New', monospace;
  --font:       var(--font-pixel);
  --black:  #000;
  --white:  #fff;
  --grey:   #888;
  --border: 2px solid #000;
  --stripe: repeating-linear-gradient(
    to bottom,
    #000 0px, #000 1px,
    #fff 1px, #fff 2px
  );
  --hatch: repeating-linear-gradient(
    45deg,
    #000 0, #000 1px,
    #fff 1px, #fff 7px
  );
}

/* ── Desktop background — Mac System 7 50% stipple ───────────────── */
html {
  /* Classic Mac checkerboard stipple: alternating black/white pixels = medium gray */
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
  background-size: 2px 2px;
  image-rendering: pixelated;
  min-height: 100vh;
}
body {
  background: transparent;
  min-height: 100vh;
  font-family: var(--font);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
  padding-top: 22px; /* menu bar height */
}

/* ── Mac OS Menu Bar ──────────────────────────────────────────────── */
.mac-menubar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 22px;
  background: var(--white);
  border-bottom: 1px solid #555;
  display: flex;
  align-items: stretch;
  z-index: 1000;
  font-family: var(--font-pixel);
  font-size: 12px;
  user-select: none;
}
.mac-menubar__item {
  display: flex;
  align-items: center;
  padding: 0 10px;
  cursor: default;
  white-space: nowrap;
  position: relative;
  color: var(--black);
  text-decoration: none;
}
.mac-menubar__item:hover,
.mac-menubar__item:focus-within {
  background: var(--black);
  color: var(--white);
}
.mac-menubar__apple {
  padding: 0 12px;
  font-size: 15px;
  line-height: 1;
}
/* Dropdown menus */
.mac-menubar__dropdown {
  display: none;
  position: absolute;
  top: 22px;
  left: 0;
  min-width: 160px;
  background: var(--white);
  border: 1px solid var(--black);
  box-shadow: 2px 2px 0 var(--black);
  z-index: 1001;
  padding: 2px 0;
}
.mac-menubar__item:hover .mac-menubar__dropdown,
.mac-menubar__item:focus-within .mac-menubar__dropdown {
  display: block;
}
.mac-menubar__dropdown a,
.mac-menubar__dropdown span {
  display: block;
  padding: 3px 18px;
  font-family: var(--font-pixel);
  font-size: 11px;
  color: var(--black);
  text-decoration: none;
  white-space: nowrap;
}
.mac-menubar__dropdown a:hover {
  background: var(--black);
  color: var(--white);
}
.mac-menubar__dropdown hr {
  border: none;
  border-top: 1px solid #999;
  margin: 3px 0;
}
.mac-menubar__dropdown .disabled {
  color: #aaa;
  cursor: default;
}
/* Right side clock */
.mac-menubar__clock {
  margin-left: auto;
  padding: 0 12px;
  display: flex;
  align-items: center;
  font-family: var(--font-pixel);
  font-size: 11px;
  border-left: 1px solid #bbb;
}

/* ── The window ───────────────────────────────────────────────────── */
.mac-window {
  background: var(--white);
  border: 3px solid var(--black);
  max-width: 960px;
  width: calc(100% - 32px);
  margin: 20px auto 40px;
  min-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
  box-shadow: 5px 5px 0 var(--black);
}

/* ── Title bar ────────────────────────────────────────────────────── */
.mac-titlebar {
  height: 38px;
  display: flex;
  align-items: stretch;
  border-bottom: var(--border);
  background: var(--stripe);
  flex-shrink: 0;
}

.mac-titlebar__controls {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 10px;
  background: var(--white);
  border-right: var(--border);
  flex-shrink: 0;
}
/* System 7 close box — single square, slightly larger */
.mac-titlebar__box {
  width: 15px;
  height: 15px;
  border: 2px solid var(--black);
  background: var(--white);
  position: relative;
}
/* Only the first box (close) gets the inner detail square */
.mac-titlebar__box:first-child::after {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid var(--black);
}

.mac-titlebar__center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mac-titlebar__center a {
  background: var(--white);
  padding: 3px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--black);
  text-decoration: none;
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1;
}
.mac-titlebar__center a:hover { text-decoration: underline; }

.mac-titlebar__year {
  display: none; /* hidden — re-enable when wanted */
}

/* ── Availability status light — hidden until ready ─────────────── */
.mac-status {
  display: none; /* toggle to flex when ready */
}
/* (keep all rules below for when it's re-enabled) */
.mac-status.is-visible {
  background: var(--white);
  border-left: var(--border);
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.mac-status__label {
  font-family: var(--font-pixel);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
}
.mac-status__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--black);
  display: block;
  flex-shrink: 0;
}
.mac-status--available .mac-status__dot {
  background: #00cc44;
  box-shadow: 0 0 0 0 rgba(0, 204, 68, 0.7);
  animation: pulse-green 2s infinite;
}
.mac-status--available .mac-status__label {
  color: #007722;
}
.mac-status--engaged .mac-status__dot {
  background: #cc2200;
  box-shadow: 0 0 0 0 rgba(204, 34, 0, 0.7);
  animation: pulse-red 2s infinite;
}
.mac-status--engaged .mac-status__label {
  color: #880000;
}
@keyframes pulse-green {
  0%   { box-shadow: 0 0 0 0   rgba(0, 204, 68, 0.7); }
  70%  { box-shadow: 0 0 0 6px rgba(0, 204, 68, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(0, 204, 68, 0);   }
}
@keyframes pulse-red {
  0%   { box-shadow: 0 0 0 0   rgba(204, 34, 0, 0.7); }
  70%  { box-shadow: 0 0 0 6px rgba(204, 34, 0, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(204, 34, 0, 0);   }
}

/* ── Grow box (resize handle, bottom-right of window) ────────────── */
.mac-growbox {
  height: 16px;
  border-top: var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 0;
  flex-shrink: 0;
  background: var(--white);
}
.mac-growbox__handle {
  width: 16px;
  height: 16px;
  border-left: var(--border);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
/* Two overlapping corner squares — the classic System 7 grow icon */
.mac-growbox__handle::before,
.mac-growbox__handle::after {
  content: '';
  position: absolute;
  border: 2px solid var(--black);
}
.mac-growbox__handle::before {
  width: 10px; height: 10px;
  bottom: 0; right: 0;
}
.mac-growbox__handle::after {
  width: 6px; height: 6px;
  top: 0; left: 0;
}

/* ── Body row: main + sidebar ─────────────────────────────────────── */
.mac-body {
  display: flex;
  flex: 1;
}

/* ── Main content area ────────────────────────────────────────────── */
.mac-main {
  flex: 1;
  min-width: 0;
  border-right: var(--border);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--black) var(--white);
}
.mac-main::-webkit-scrollbar { width: 16px; }
.mac-main::-webkit-scrollbar-track {
  background: var(--white);
  border-left: 2px solid var(--black);
}
.mac-main::-webkit-scrollbar-thumb {
  background: repeating-linear-gradient(
    45deg,
    #000 0, #000 1px,
    #fff 1px, #fff 3px
  );
  border: 1px solid var(--black);
  min-height: 20px;
}
.mac-main::-webkit-scrollbar-button {
  background: var(--white);
  border: 1px solid var(--black);
  border-left: 2px solid var(--black);
  height: 16px;
  display: block;
}
/* Up arrow on top button */
.mac-main::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8,4 13,12 3,12' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
/* Down arrow on bottom button */
.mac-main::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8,12 13,4 3,4' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ── Home sections ────────────────────────────────────────────────── */
.mac-sections { list-style: none; }

.mac-section-link {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  border-bottom: var(--border);
  gap: 18px;
  color: var(--black);
  text-decoration: none;
  background: var(--white);
}
.mac-sections li:last-child .mac-section-link { border-bottom: none; }
.mac-section-link:hover,
.mac-section-link:focus {
  background: var(--black);
  color: var(--white);
  outline: none;
}

.mac-section-icon {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mac-icon-img {
  width: 52px;
  height: 52px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}
/* Invert icons to white when row is hovered/selected */
.mac-section-link:hover .mac-icon-img,
.mac-section-link:focus .mac-icon-img {
  filter: invert(1);
}

.mac-section-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.mac-section-sub {
  display: block;
  font-size: 14px;
  font-family: var(--font-body);
  margin-top: 5px;
  opacity: 0.7;
}

/* ── Sidebar ──────────────────────────────────────────────────────── */
.mac-sidebar {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
}

.mac-sidebar-nav { border-bottom: var(--border); }
.mac-sidebar-nav ul { list-style: none; }
.mac-sidebar-nav li { border-bottom: 1px solid var(--black); }
.mac-sidebar-nav li:last-child { border-bottom: none; }
.mac-sidebar-nav a {
  display: block;
  padding: 8px 12px;
  color: var(--black);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mac-sidebar-nav a:hover,
.mac-sidebar-nav .is-active a {
  background: var(--black);
  color: var(--white);
}

.mac-here {
  padding: 10px 12px;
  border-bottom: var(--border);
  font-size: 12px;
}
.mac-here__label { margin-bottom: 5px; }
.mac-here__badge {
  display: inline-block;
  border: 2px solid var(--black);
  padding: 3px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.mac-sidebar-icons {
  padding: 8px 10px;
  display: flex;
  gap: 6px;
  border-bottom: var(--border);
}
.mac-sidebar-icons .mac-icon-img { width: 26px; height: 26px; }

.mac-sidebar-btns {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mac-btn {
  display: block;
  width: 100%;
  padding: 6px 8px;
  border: 2px solid var(--black);
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
}
.mac-btn:hover { background: var(--black); color: var(--white); }

/* ── Dock ─────────────────────────────────────────────────────────── */
.mac-dock {
  border-top: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 10px 20px;
  background: var(--white);
  flex-shrink: 0;
}
.mac-dock-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  text-decoration: none;
  color: var(--black);
  flex-shrink: 0;
}
.mac-dock-item .mac-icon-img { width: 34px; height: 34px; }
.mac-dock-item:hover .mac-icon-img { filter: invert(1); }
.mac-dock-item:hover { background: var(--black); color: var(--white); }

/* ── Archive header ───────────────────────────────────────────────── */
.mac-archive-header { padding: 20px 24px 16px; border-bottom: var(--border); }
.mac-archive-header h1 { font-size: 18px; font-weight: 700; letter-spacing: 0.04em; }
.mac-archive-header p  { font-family: var(--font-body); font-size: 15px; margin-top: 8px; line-height: 1.7; }

/* ── Card grid (blog / tag listing) ──────────────────────────────── */
.mac-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 20px;
}

.mac-card {
  display: flex;
  flex-direction: column;
  border: 2px solid var(--black);
  text-decoration: none;
  color: var(--black);
  background: var(--white);
  box-shadow: 3px 3px 0 var(--black);
}
.mac-card:hover {
  background: var(--black);
  color: var(--white);
  box-shadow: none;
  transform: translate(3px, 3px);
}

.mac-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-bottom: 2px solid var(--black);
  flex-shrink: 0;
}
.mac-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mac-card__no-image {
  width: 100%;
  height: 100%;
  background: var(--hatch);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.mac-card__no-image span {
  background: var(--white);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  max-width: 90%;
  line-height: 1.4;
}
/* invert hatch on hover */
.mac-card:hover .mac-card__image { border-bottom-color: var(--white); }
.mac-card:hover .mac-card__no-image {
  background: repeating-linear-gradient(45deg,#fff 0,#fff 1px,#000 1px,#000 7px);
}
.mac-card:hover .mac-card__no-image span {
  background: var(--black);
  color: var(--white);
}

.mac-card__body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mac-card__title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.4;
}
.mac-card__meta {
  font-family: var(--font-body);
  font-size: 13px;
  margin-top: 6px;
  opacity: 0.6;
}
.mac-card__excerpt {
  font-family: var(--font-body);
  font-size: 13px;
  margin-top: 8px;
  line-height: 1.65;
  opacity: 0.85;
  flex: 1;
}

/* ── Post / page inner chrome ─────────────────────────────────────── */
.mac-page-header {
  padding: 24px 28px 16px;
  border-bottom: var(--border);
}
.mac-page-header h1 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.4;
}
.mac-meta {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-family: var(--font-body);
  border: 1px solid var(--black);
  padding: 3px 10px;
  opacity: 0.7;
}

.mac-feature-image {
  border-bottom: var(--border);
  line-height: 0;
}
.mac-feature-image img {
  width: 100%;
  display: block;
  max-height: 420px;
  object-fit: cover;
}

.mac-page-body {
  padding: 24px 28px;
  font-size: 16px;
  font-family: var(--font-body);
  line-height: 1.9;
}
.mac-page-body p       { margin-bottom: 16px; }
.mac-page-body h2      { font-family: var(--font-pixel); font-size: 16px; font-weight: 700; margin: 28px 0 12px; letter-spacing: 0.03em; border-bottom: 1px solid #ccc; padding-bottom: 4px; }
.mac-page-body h3      { font-family: var(--font-pixel); font-size: 14px; font-weight: 700; margin: 22px 0 10px; }
.mac-page-body h4, .mac-page-body h5, .mac-page-body h6 { font-family: var(--font-pixel); font-size: 13px; font-weight: 700; margin: 16px 0 8px; }
.mac-page-body ul, .mac-page-body ol { padding-left: 22px; margin-bottom: 14px; }
.mac-page-body li      { margin-bottom: 6px; line-height: 1.8; }
.mac-page-body a       { color: var(--black); text-decoration: underline; }
.mac-page-body a:hover { background: var(--black); color: var(--white); text-decoration: none; }
.mac-page-body blockquote {
  border-left: 4px solid var(--black);
  padding-left: 18px;
  margin: 20px 0;
  font-style: normal;
  opacity: 0.85;
}
.mac-page-body pre  { font-family: var(--font-body); font-size: 14px; background: #f4f4f4; border: 2px solid var(--black); padding: 16px; overflow-x: auto; margin: 16px 0; line-height: 1.6; }
.mac-page-body code { font-family: var(--font-body); font-size: 14px; background: #f4f4f4; border: 1px solid #bbb; padding: 1px 5px; }
.mac-page-body img  { max-width: 100%; border: var(--border); display: block; margin: 16px 0; }
.mac-page-body figure { margin: 20px 0; }
.mac-page-body figcaption { font-family: var(--font-body); font-size: 12px; margin-top: 6px; opacity: 0.65; }
.mac-page-body hr   { border: none; border-top: 2px solid var(--black); margin: 28px 0; }
.mac-page-body strong { font-weight: 700; }
.mac-page-body em { font-style: italic; }

/* ── Social links ─────────────────────────────────────────────────── */
.mac-social {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 24px 0;
  border: var(--border);
  box-shadow: 3px 3px 0 var(--black);
}
.mac-social__link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--black);
  color: var(--black);
  text-decoration: none;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 15px;
  transition: none;
}
.mac-social__link:last-child { border-bottom: none; }
.mac-social__link:hover {
  background: var(--black);
  color: var(--white);
}
.mac-social__link:hover .mac-social__icon { filter: invert(1); }
.mac-social__icon {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  flex-shrink: 0;
  display: block;
}

/* ── Post navigation ──────────────────────────────────────────────── */
.mac-post-nav {
  display: flex;
  border-top: var(--border);
}
.mac-post-nav__item {
  flex: 1;
  padding: 14px 18px;
  color: var(--black);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.mac-post-nav__prev { border-right: 1px solid var(--black); }
.mac-post-nav__item:hover { background: var(--black); color: var(--white); }
.mac-post-nav__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.6;
}
.mac-post-nav__title {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
}

/* ── Pagination ───────────────────────────────────────────────────── */
.mac-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-top: var(--border);
  font-size: 13px;
}
.mac-pagination a { color: var(--black); text-decoration: none; border: 2px solid var(--black); padding: 4px 12px; font-weight: 700; }
.mac-pagination a:hover { background: var(--black); color: var(--white); }
.mac-pagination .page-num { font-family: var(--font-body); font-size: 13px; opacity: 0.7; }

/* ── Empty state ──────────────────────────────────────────────────── */
.mac-empty {
  padding: 24px;
  font-family: var(--font-body);
  font-size: 14px;
  opacity: 0.6;
}

/* ── Error ────────────────────────────────────────────────────────── */
.mac-error { padding: 48px 28px; text-align: center; }
.mac-error h1 { font-size: 48px; font-weight: 700; margin-bottom: 14px; }
.mac-error p  { font-family: var(--font-body); font-size: 16px; margin-bottom: 24px; }

/* ── Ghost Koenig card assets ─────────────────────────────────────── */
.kg-width-wide  { margin: 20px -28px; }
.kg-width-full  { margin: 20px -28px; }
.kg-image-card img { border: var(--border); }
.kg-gallery-container { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 16px 0; }
.kg-gallery-image img { border: var(--border); width: 100%; height: 100%; object-fit: cover; display: block; }
.kg-bookmark-card { border: var(--border); padding: 14px; margin: 16px 0; }
.kg-bookmark-title { font-size: 14px; font-weight: 700; }
.kg-bookmark-description { font-family: var(--font-body); font-size: 13px; margin-top: 5px; opacity: 0.8; }
.kg-callout-card { border-left: 4px solid var(--black); padding: 12px 16px; margin: 16px 0; background: #f8f8f8; font-family: var(--font-body); font-size: 15px; }
.kg-toggle-card { border: var(--border); margin: 16px 0; }
.kg-toggle-heading-text { font-size: 14px; font-weight: 700; padding: 12px 16px; cursor: pointer; display: block; }
.kg-toggle-content { padding: 12px 16px; border-top: 1px solid var(--black); font-family: var(--font-body); font-size: 15px; line-height: 1.8; }
.kg-code-card pre { margin: 0; }
.kg-video-card video { width: 100%; border: var(--border); }
.kg-audio-card { border: var(--border); padding: 12px; margin: 16px 0; }
.kg-button-card { text-align: center; margin: 16px 0; }
.kg-button-card a { display: inline-block; border: 2px solid var(--black); padding: 8px 20px; color: var(--black); text-decoration: none; font-family: var(--font-pixel); font-size: 13px; font-weight: 700; }
.kg-button-card a:hover { background: var(--black); color: var(--white); }

/* ── Help Chat Modal ──────────────────────────────────────────────── */
.help-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Same stipple as the desktop background */
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
  background-size: 2px 2px;
}
.help-overlay[hidden] { display: none; }

.help-window {
  background: var(--white);
  border: 3px solid var(--black);
  box-shadow: 6px 6px 0 var(--black);
  width: 480px;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
}

/* Title bar — same stripe + controls as main window */
.help-titlebar {
  height: 34px;
  background: var(--stripe);
  border-bottom: var(--border);
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}
.help-titlebar__controls {
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: var(--white);
  border-right: var(--border);
  flex-shrink: 0;
}
.help-titlebar__closebox {
  width: 14px;
  height: 14px;
  border: 2px solid var(--black);
  background: var(--white);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.help-titlebar__closebox::after {
  content: '';
  position: absolute;
  inset: 2px;
  border: 1px solid var(--black);
}
.help-titlebar__closebox:hover { background: var(--black); }
.help-titlebar__title {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-pixel);
  font-size: 13px;
  font-weight: 700;
}
.help-titlebar__title span {
  background: var(--white);
  padding: 2px 14px;
  line-height: 1;
  white-space: nowrap;
}

/* Terminal area — black screen, monospace */
.help-terminal {
  background: #000;
  color: #eee;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.75;
  padding: 12px 14px;
  height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #555 #111;
  flex-shrink: 0;
}
.help-terminal::-webkit-scrollbar { width: 10px; }
.help-terminal::-webkit-scrollbar-track { background: #111; }
.help-terminal::-webkit-scrollbar-thumb { background: #555; border: 1px solid #333; }

.help-msg { margin: 0; padding: 0; word-break: break-word; white-space: pre-wrap; }
.help-msg--system  { color: #666; }
.help-msg--user    { color: #fff; }
.help-msg--bot     { color: #4f4; } /* classic terminal green */
.help-msg--error   { color: #f55; }
.help-msg--waiting { color: #888; font-style: italic; }

/* Blinking block cursor */
.help-cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: #fff;
  vertical-align: text-bottom;
  animation: help-blink 1s step-end infinite;
  margin-left: 1px;
}
@keyframes help-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Input row */
.help-inputrow {
  display: flex;
  align-items: center;
  border-top: var(--border);
  background: var(--white);
  flex-shrink: 0;
}
.help-inputrow__prompt {
  font-family: var(--font-pixel);
  font-size: 15px;
  font-weight: 700;
  padding: 0 6px 0 12px;
  flex-shrink: 0;
  user-select: none;
}
.help-inputrow__input {
  flex: 1;
  border: none;
  outline: none;
  background: var(--white);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--black);
  padding: 10px 4px;
  min-width: 0;
}
.help-inputrow__input::placeholder { color: #bbb; font-style: italic; }
.help-inputrow__input:disabled { background: #f4f4f4; color: #888; }
.help-inputrow__send {
  border: none;
  border-left: var(--border);
  background: var(--white);
  color: var(--black);
  font-family: var(--font-pixel);
  font-size: 12px;
  font-weight: 700;
  padding: 10px 14px;
  cursor: pointer;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  line-height: 1;
}
.help-inputrow__send:hover:not(:disabled) { background: var(--black); color: var(--white); }
.help-inputrow__send:disabled { color: #bbb; cursor: default; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .mac-window  { width: 100%; margin: 0; border: none; box-shadow: none; border-top: 3px solid var(--black); }
  .mac-sidebar { width: 130px; }
  .mac-sidebar-nav a { font-size: 11px; padding: 6px 8px; }
  .mac-titlebar__center a { font-size: 11px; padding: 2px 8px; }
  .mac-status__label { display: none; }
  .mac-status { padding: 0 8px; }
  .mac-section-icon { width: 38px; height: 38px; }
  .mac-section-icon svg { width: 32px; height: 32px; }
  .mac-section-title { font-size: 13px; }
  .mac-section-sub { font-size: 12px; }
  .mac-dock { gap: 12px; padding: 8px 12px; }
  .mac-dock-item { width: 32px; height: 32px; }
  .mac-dock-item svg { width: 24px; height: 24px; }
  .mac-page-body { padding: 18px 18px; font-size: 15px; }
  .mac-page-header { padding: 18px 18px 12px; }
  .mac-page-header h1 { font-size: 17px; }
  .mac-card-grid { grid-template-columns: 1fr; gap: 16px; padding: 16px; }
}