*,
*:before,
*:after {
  box-sizing: border-box;
}

body{overflow-x: hidden;}
body,html{background:#fafafa;color:#450c13;font-family: arial;line-height:1.3;margin:0;padding:0;}
.page{padding:20px;margin:auto; max-width:990px;}
.example-tag {
  font-size: .825em;
  margin-bottom: -.5em;
  margin-top: 2em;
  text-transform: uppercase;
}

header {
  border-bottom: 1px solid #999;
  padding-bottom: 1.5em;
}

main details {
  display: block;
  margin-top: 4em;
}

section:first-of-type > details {
  margin-top: 2em;
}

summary h2 {
  display: inline-block;
  margin: 0;
}

[role="status"] {
  background: #233;
  bottom: 0;
  color: #fff;
  left: 0;
  margin: auto;
  opacity: 0;
  padding: .5em;
  position: fixed;
  right: 0;
  text-align: center;
  transition:
    opacity 1s ease-in-out,
    bottom 1s ease-in-out,
    visibility 2s ease-in-out;
  visibility: visible;
  width: 60vw;
}

[role="status"].ready-toast {
  opacity: 1;
  bottom: 10%;
}

[role="status"].burnt-toast {
  visibility: hidden;
}