body { font-family: sans-serif; margin: 1rem; max-width: 60rem; color: #222; }
pre { background: #eee; padding: .75rem; overflow-x: auto; font-size: .8rem; }
ol.frames { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; }
ol.frames > li { flex: 1 1 16rem; max-width: 100%; }
.desktop, .phone { border: 2px solid #888; background: #f4f4f4; padding: .4rem; }
.desktop { aspect-ratio: 16 / 10; border-radius: 4px; }
.phone { aspect-ratio: 9 / 16; max-width: 12rem; border-radius: 1rem; }
.box { background: #ccc; margin: .3rem 0; padding: .3rem; font-size: .75rem; }
.open { border: 2px dashed #333; background: #fff; }
.out { background: #e6e6e6; border: 1px dotted #666; }
.cap { font-size: .9rem; margin-top: .4rem; }