@charset "UTF-8";
:root {
  color-scheme: light;
  --paper: #f5f3ed;
  --ink: #202120;
  --coral: #ed594d;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; }
.wrap { width: min(1320px, calc(100% - 96px)); margin-inline: auto; }
.site-header { height: 88px; display: flex; align-items: center; flex-shrink: 0; }
.wordmark { font-size: 28px; font-weight: 850; letter-spacing: -1.5px; }
.wordmark span { color: var(--coral); }
main { flex: 1; display: grid; place-items: center; padding: 20px 0 30px; }
/* Apple Design Resources PNGs are used unchanged. Screen bounds and masks
   come from their matching Photoshop Screen layers; no device parts are drawn. */
.device {
  --device-width: min(980px, calc(100vw - 96px), calc((100svh - 210px) * 1.3765));
  position: relative;
  width: var(--device-width);
  aspect-ratio: 3093 / 2247;
  margin: 0;
}
.device-frame, .device-frame img { display: block; width: 100%; height: auto; }
.device-frame { position: relative; z-index: 1; pointer-events: none; }
.device-screen {
  position: absolute;
  left: 3.879728%;
  top: 5.340454%;
  width: 92.240543%;
  height: 89.319092%;
  mask-image: url('/assets/apple-duo-open-screen-mask.png');
  mask-mode: luminance;
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.device-screen img { display: block; width: 100%; height: 100%; }
.site-footer { display: flex; align-items: center; justify-content: flex-end; min-height: 64px; font-size: 11px; }
.site-footer a { padding-block: 10px; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { height: 76px; }
  .wordmark { font-size: 26px; }
  main { padding: 10px 0 28px; }
  .device { --device-width: min(calc(100vw - 28px), calc((100svh - 184px) * 1.3765)); }
  .site-footer { min-height: 60px; font-size: 10px; }
}

@media (max-width: 760px) and (orientation: portrait) {
  .device {
    --device-width: min(360px, calc(100vw - 40px), calc((100svh - 194px) * .717411));
    aspect-ratio: 1574 / 2194;
  }
  .device-screen {
    left: 5.590851%;
    top: 3.646308%;
    width: 88.818297%;
    height: 92.707384%;
    mask-image: url('/assets/apple-duo-closed-screen-mask.png');
  }
}

.site-header .brand-lockup { display: inline-flex; align-items: center; gap: 12px; }
.site-header .app-icon { display: block; width: 44px; height: 44px; flex: none; border-radius: 10px; }
@media (max-width: 760px) {
  .site-header .brand-lockup { gap: 10px; }
  .site-header .app-icon { width: 40px; height: 40px; border-radius: 9px; }
}