:root{
  --paper:#fbfaf3;
  --ink:#1f3c99;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px)
}

html{
  height:100%;
  scroll-padding-top:env(safe-area-inset-top,0px)
}

body{
  margin:0;
  height:100%;
  background:#fbfaf3;
  overflow:hidden;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  font-family:Caveat,"Comic Sans MS",cursive
}

canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block
}

#mute{
  position:fixed;
  right:52px;
  top:calc(8px + env(safe-area-inset-top,0px));
  font:700 22px Caveat,"Comic Sans MS",cursive;
  color:#1f3c99;
  background:transparent;
  border:2px solid #1f3c99;
  border-radius:12px 9px 14px 8px;
  padding:0 10px;
  cursor:pointer
}

#mute:focus-visible{
  outline:2px dashed #d2322d;
  outline-offset:3px
}