@import "cascadia_code.css";
@import "merriweather.css";
*{margin:0;padding:0;box-sizing:border-box}
html{height:100%;background:#eee;color:#333;font:400 clamp(8pt,6pt + 0.5vw + 0.5vh,16pt)/1.65 __merriweather__,sans-serif}
body{min-height:100%;display:grid;place-items:center;padding:2em;gap:1em}
main{max-width:60ch;display:grid;gap:2em}
section{display:grid;gap:1em}
h1,h2,h3{font-weight:700;text-align:center;padding:1em}
h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.33em;font-style:italic;padding-bottom:.5em}
pre,code{font:400 1em/1.2 __cascadia_code__,monospace}
b{font-weight:800}
em{font-style:italic;font-weight:700}
em b{font-weight:900}
a{color:#2860b3}
fieldset{position:relative;padding:1em;border-style:solid;border-radius:.5em;background:#fff}
fieldset.js{border-color:#ffdf00}
fieldset.ts{border-color:#2f74c0}
fieldset.html{border-color:#03c988}
fieldset.map{border-color:#333}
fieldset code{font-size:.75em;white-space:pre}
fieldset pre{font-size:.75em}
.map{position:relative;aspect-ratio:1/1;contain:paint}
.map legend{position:relative;z-index:1}
.map legend+*{position:absolute;inset:0;margin-top:-.85em;border-radius:.5em;contain:paint}
legend{font-size:.67em;font-style:italic;font-weight:900;padding:.5em}
nav{display:grid;grid-template-columns:repeat(3,1fr)}
nav>*{text-align:center}
nav>*:first-child{text-align:start}
nav>*:last-child{text-align:end}
ol{padding:1em;line-height:2em;list-style-type:decimal;text-indent:1em}
@media (max-width:700px){
  fieldset pre{font-size:2vw}
  nav>*{font-size:.75em}
}