/* ─────────────────────────────────────────────────────────
 * The depicted Mac (macOS 26 Tahoe). Values of the depicted world,
 * measured off real captures; never used for the site's own UI.
 * Everything is laid out in points on a 1440 × 900 screen; the
 * scene scales the whole screen as one.
 * ───────────────────────────────────────────────────────── */

.mac-screen {
  position: relative;
  width: 1440px; height: 900px;
  overflow: hidden;
  font-family: system-ui, -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #d9c7a8 center / cover no-repeat;
  user-select: none;
}

/* ── Dock ── */
.dock {
  position: absolute; left: 50%; bottom: 7px;
  translate: -50% 0;
  display: flex; align-items: flex-start; gap: 16px;
  height: 76px; box-sizing: border-box;
  padding: 15px 15px 0;
  border-radius: 21px;
  /* Liquid Glass: the wallpaper blurred and lifted, a bright rim that is
     strongest at the top-left, a faint dark outer edge */
  background: linear-gradient(180deg, rgba(255,255,255,0.26), rgba(255,255,255,0.14));
  -webkit-backdrop-filter: blur(22px) saturate(1.5) brightness(1.04);
  backdrop-filter: blur(22px) saturate(1.5) brightness(1.04);
  box-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.75),
    inset 0.5px 0 0 rgba(255,255,255,0.35),
    inset -0.5px 0 0 rgba(255,255,255,0.25),
    inset 0 -0.5px 0 rgba(255,255,255,0.3),
    0 0 0 0.5px rgba(0,0,0,0.12),
    0 10px 30px -12px rgba(0,0,0,0.28);
}
.dk-app { position: relative; width: 46px; height: 46px; flex: none; }
.dk-app > svg { display: block; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.18)); }
.dk-app.is-running::after {
  content: ""; position: absolute; left: 50%; top: 53px;
  width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
  background: rgba(0,0,0,0.78);
}
.dk-sep {
  flex: none; width: 1px; height: 46px; margin: 0 -1px;
  background: rgba(0,0,0,0.28);
  box-shadow: 1px 0 0 rgba(255,255,255,0.25);
}