/* The Platform page: serin.work's screens in a quiet browser frame. Layout,
   glow and motion come from mac.css; this adds the frame and two-up rows. */

/* A browser window, kept minimal: three dots and the address. */
.browser {
  position: relative; z-index: 1; overflow: hidden;
  border-radius: 14px; background: #1b1d22;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 30px 50px rgb(0 0 0 / 0.4);
}
.browser-bar {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px;
  background: #202227; border-bottom: 1px solid rgb(255 255 255 / 0.06);
}
.browser-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / 0.14); }
.browser-bar b {
  margin: 0 auto; transform: translateX(-24px); padding: 3px 14px; border-radius: 7px;
  background: rgb(255 255 255 / 0.06); font: 500 12px/1.4 var(--font-sans); color: var(--muted);
}
.browser img { display: block; width: 100%; height: auto; }

/* The frame carries the tilt and shadow the Mac page gives its bare window. */
.mac-window .browser { transform-origin: 50% 100%; }
.mac-window img, .mac-shot img { filter: none; animation: none; transform: none; }
@supports (animation-timeline: view()) {
  .js .mac-window .browser { animation: window-flat linear both; animation-timeline: view(); animation-range: entry 55% cover 48%; }
}

/* Two screens side by side, each with its caption. */
.shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.shot-pair .label { margin-top: 18px; font-weight: 500; color: var(--muted); }
@media (max-width: 820px) { .shot-pair { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .js .mac-window .browser { animation: none !important; transform: none; }
}