html{color-scheme:light dark}
body{max-width:40rem;margin:2rem auto;padding:0 1rem;font:18px/1.5 system-ui,sans-serif}
h1{margin:0 0 .5rem;letter-spacing:-.02em}
.board{font-size:2.4rem;line-height:1.25;display:inline-block;margin:.5rem 0 1rem}
.board a{text-decoration:none;color:#3b82f6;border-radius:.2em}
.board a:hover,.board a:focus{background:#3b82f6;color:#fff}
.moves,.foot{opacity:.65;font-size:.9rem}
.nav a,.rec a{margin-right:.25rem}
.rec a{display:inline-block;padding:.5rem 1rem;border:2px solid currentColor;border-radius:.5rem;text-decoration:none;font-weight:600}
iframe.rec{display:block;width:100%;height:80vh;min-height:32rem;margin:1rem 0;border:2px dashed #888;border-radius:.5rem;background:transparent}
h2{font-size:1.2rem;margin:1.5rem 0 .5rem}
ul{padding-left:1.2rem}
li{margin:.3rem 0}
.submit a{display:inline-block;margin-top:1.5rem;padding:.6rem 1.1rem;border:2px solid currentColor;border-radius:.5rem;text-decoration:none;font-weight:600}
.beacons{height:0;margin:0;overflow:hidden}
.beacons img{width:1px;height:1px}
.lede{font-size:1.1rem}
.caveman{font-family:ui-monospace,monospace;background:rgba(128,128,128,.12);padding:1rem;border-left:4px solid #f472b6;border-radius:.3rem}
ul li{margin:.5rem 0}