/* The app's screens redrawn in HTML at their real sizes (points as CSS px), then scaled to fit
   their frame on the page. macOS text styles in points: large title 26, title 22, title 2 17,
   title 3 15, headline 13 semibold, body 13, callout 12, subheadline 11, caption 10. Type is
   the system font, which is SF on a Mac, as in the app. */

.shot { position: relative; overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08); background: #f5f5f7; }
/* A screen whose frame grows with its container, on the rainbow field (Check contrast). */
.shot.fill-shot { background: var(--rainbow-field); }
.shot > .native { position: absolute; left: 0; top: 0; transform-origin: 0 0; text-align: left; }

.mac {
  --ink: #1d1d1f; --ink-2: rgb(60 60 67 / 0.6); --sep: rgb(0 0 0 / 0.1); --content: #f5f5f7;
  --accent: #007aff; --green: #34c759; --red: #ff3b30;
  font: 13px/1.25 system-ui, -apple-system, sans-serif; color: var(--ink);
  -webkit-font-smoothing: antialiased; letter-spacing: 0;
}
.mac .mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-variant-numeric: tabular-nums; }
.mac .num { font-variant-numeric: tabular-nums; }
.mac .t-large { font-size: 26px; font-weight: 600; }
.mac .t-title { font-size: 22px; }
.mac .t-title2 { font-size: 17px; }
.mac .t-head { font-size: 13px; font-weight: 600; }
.mac .t-callout { font-size: 12px; }
.mac .t-sub { font-size: 11px; }
.mac .t-cap { font-size: 10px; }
.mac .quiet { color: var(--ink-2); }
.mac .semi { font-weight: 600; }

/* Liquid Glass, drawn plainly: a bright translucent fill over a blur, with a hairline edge. */
.mac .glass {
  background: rgb(255 255 255 / 0.62); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 0 0 0.5px rgb(255 255 255 / 0.8), 0 0 0 0.5px rgb(0 0 0 / 0.12), 0 12px 40px rgb(0 0 0 / 0.16);
}


/* A color swatch with a hairline edge, as the app's swatches have. */
.mac .swatch { border-radius: 6px; box-shadow: inset 0 0 0 1px var(--sep); }

/* Check contrast's window, 380 wide. */
.mac .contrast { position: absolute; width: 380px; padding: 20px; border-radius: 24px; display: flex; flex-direction: column; gap: 16px; }
.mac .btn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 99px; background: rgb(0 0 0 / 0.06); font-size: 13px; }
.mac .fields { display: flex; gap: 12px; }
.mac .field { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mac .field .swatch { height: 56px; border-radius: 8px; }
.mac .sample { padding: 16px; border-radius: 10px; display: flex; flex-direction: column; gap: 4px; }
.mac .check { display: flex; align-items: center; gap: 6px; }
.mac .check svg { width: 15px; height: 15px; }

/* The main window over a rainbow field, cropped by its view: its traffic lights only, then its
   cool neutral content (D-043). */
.mac .window { position: absolute; left: 72px; top: 56px; width: 1240px; height: 840px; border-radius: 16px; overflow: hidden; background: var(--content);
  box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.2), 0 24px 64px rgb(0 0 0 / 0.25); }
.mac .titlebar { height: 52px; display: flex; align-items: center; padding: 0 20px; }
.mac .dots { display: flex; gap: 8px; }
.mac .dots i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; display: block; }
.mac .dots i:nth-child(2) { background: #febc2e; }
.mac .dots i:nth-child(3) { background: #28c840; }

/* The main window's content: segmented controls and cards, drawn plainly. */
.mac .seg { display: inline-flex; padding: 2px; border-radius: 99px; background: rgb(0 0 0 / 0.06); }
.mac .seg span { padding: 3px 12px; border-radius: 99px; font-size: 13px; }
.mac .seg span.on { background: #fff; box-shadow: 0 0.5px 2px rgb(0 0 0 / 0.15); font-weight: 500; }
.mac .card { background: #fff; border-radius: 10px; overflow: hidden; }
.mac .large .chip { height: 72px; box-shadow: inset 0 0 0 1px var(--sep); border-radius: 10px 10px 0 0; }
.mac .large .meta { padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.mac .compact { display: flex; align-items: center; gap: 10px; padding: 10px; }
.mac .one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mac .beau { image-rendering: pixelated; display: block; }