* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #fff; color: #101828; font: 16px system-ui, sans-serif; }
body { padding: 0 16px; }
.bar { position: fixed; left: 0; right: 0; min-height: 48px; background: #ffe4f2; color: #b4235e; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 5; }
#top { top: 0; padding-top: env(safe-area-inset-top); border-bottom: 1px dashed #b4235e; }
#bottom { bottom: 0; padding-bottom: env(safe-area-inset-bottom); border-top: 1px dashed #b4235e; }
.edge { position: fixed; top: 45%; width: 12px; height: 80px; background: #00a7c2; }
.edge.left { left: 0; }
.edge.right { right: 0; background: #ee9900; }
main { max-width: 720px; margin: 0 auto; padding: 110px 0 130px; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f2f4f7; padding: 16px; border-radius: 8px; font: 14px/1.5 monospace; }
a { color: #0756a5; }
#probe { visibility: hidden; position: fixed; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }