@import"https://fonts.googleapis.com/css2?family=Goudy+Bookletter+1911&display=swap";:root{--color-dark: #333;--color-subtle: #ddd;--color-light: #f7f7f7;font-family:"Goudy Bookletter 1911",serif;line-height:1.5;color:var(--color-dark)}body{margin:0;align-items:center;min-width:320px;min-height:100vh;background-image:url(./texture-light-DSj4ZtpV.jpg);background-size:min(100vh,700px)}h1{font-size:3.2rem;margin-block:0 .3rem;padding-block:.33em;line-height:1}h1,footer{padding-inline:1rem}.accent{color:var(--color-light);background-image:url(./texture-dark-98cvGTdK.jpg);background-size:300px}a{color:#4169e1}a:hover{opacity:.8}.controls{display:flex;flex-wrap:wrap;gap:.35rem 1rem;padding-inline:.5rem;justify-content:center}label,select{font-size:1.6rem}select{font-family:inherit;background-color:transparent;border:none;border-bottom:2px solid var(--color-dark)}#app{max-width:1280px;margin:0 auto;text-align:center;padding-bottom:1rem}main{margin-block:1.6rem;display:flex;flex-wrap:wrap;border:1px solid var(--color-subtle);gap:2rem 4rem}figure{flex:1 0 300px;margin:0}figure a{text-decoration:none}demo-diagram{--diagram-light: #ecedf3;--diagram-dark: lightsteelblue}.player{font-size:1.6em;border-bottom:2px solid var(--color-subtle)}.player:first-of-type{margin-block:0 .6em}.player:last-of-type{margin-block:.6em 0}footer .accent{padding-inline:.6rem}footer{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}footer p{line-height:1.3;gap:.35rem;font-size:1.4rem;margin:0;max-width:350px}footer img{width:32px}@media (min-width: 480px){#app,main{padding:2rem}}