.rules > aside
{
 margin:0.5em 0.25em;
 padding:0.25em 0.5em;
 background:linear-gradient(to bottom,var(--grey1) 0,var(--blue1) 100%);
 border:1px solid var(--blue2);
 border-radius:var(--UI-big-border-radius)
}

.rules > aside > h2
{
 margin:0;
 padding:0;
 color:var(--blue4);
 font-size:var(--font-size-sub-title);
 line-height:var(--line-height-sub-title)
}

.rules > aside > ol
{
 margin:0;
 padding:0;
 list-style-position:inside
}

.rules > aside > ol > li
{
 margin:0;
 padding:0;
 font-size:var(--font-size-text);
 line-height:var(--line-height-text)
}

.waitForInput #hiddenUntilInput
{
 display:none
}

.settings
{
 padding:0.25em;
 display:grid;
 gap:0.25em 0.25em
}

.settings > :is(h1, h2, label)
{
 padding:0.25em
}

.settings > h1
{
 margin:0.25em 0 0 0;
 color:var(--blue4);
 font-size:var(--font-size-title);
 line-height:var(--line-height-title);
 border-bottom:1px solid var(--grey6)
}

.settings > h2
{
 margin:0.25em 0 0 0;
 color:var(--grey8);
 font-size:var(--font-size-sub-title);
 font-weight:normal;
 line-height:var(--line-height-sub-title)
}

.settings > label
{
 white-space:nowrap;
 font-size:var(--font-size-text);
 line-height:var(--line-height-text)
}

@media (min-width:40rem)
{
 .rules
 {
  display:flex
 }

 .rules > *
 {
  flex:1
 }
}