html {
  --bg: #ebdfab;
  --bg2: #e9e1cc;
  --fg: rgb(39, 55, 81);
  --fg2: #238ab7;
  background: radial-gradient(var(--bg2) 70%, var(--bg)) fixed var(--bg2);
  background-size: 100% 100%;
  color: var(--fg);
  font-family: caveat, serif;
  font-size: 26px;
}

body {
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
}

input {
  background: #fff6;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
  border-bottom: 1px dashed var(--fg);
  min-width: 0;
}

input[type="number"] {
  width: 3em;
}

p>input {
  margin: 0 5px;
}

header {
  text-align: center;
}

header .title {
  margin: 10px 0;
  font-size: 1.3em;
}

hr {
  border: none;
  border-top: 1px dashed var(--fg);
}

a,
summary,
u {

  text-decoration: wavy underline 1px;
  text-decoration-skip-ink: none;
}

a,
summary {
  color: var(--fg2);
  padding-right: 10px;
}


details[name="app"]>summary {
  display: none;
}

details.info summary {
  cursor: pointer;
}

details.info summary::marker {
  content: '+ ';
}

details.info[open] {
  padding-left: 10px;
  border-left: 1px solid var(--fg);
}

canvas {
  width: 100%;
  min-height: 150px;
  background: #fff3;
}

canvas.short {
  min-height: 60px;
  height: 60px;
}

.players {
  text-align: center;
}

.player {
  position: relative;
  line-height: 0;
  cursor: pointer;
}

.player .caption {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #fff9;
  padding: 5px;
  line-height: 1;
}

.player .caption::before {
  content: '⏯︎ ';
}

.player.playing .caption::before {}

.hidden {
  display: none;
}

.footer {
  text-align: center;
}

img {
  max-width: 100%;
}

@font-face {
  font-family: 'caveat';
  src: url('./caveat.woff2') format('woff2');
}