:root{--ff: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--hue: 40;--sat: 10%;--accent-hue: 200;--bg-dark: hsl(var(--hue), var(--sat), 10%);--bg-mid: hsl(var(--hue), var(--sat), 15%);--bg-light: hsl(var(--hue), var(--sat), 20%);--bg-selected: hsl(var(--hue), var(--sat), 30%);--bg-hover: hsl(var(--hue), var(--sat), 40%);--fg-dark: hsl(var(--hue), var(--sat), 40%);--fg-mid: hsl(var(--hue), var(--sat), 60%);--fg-light: hsl(var(--hue), var(--sat), 90%);--bg-accent-muted: hsl(var(--accent-hue), 60%, 13%);--bg-accent: hsl(var(--accent-hue), 60%, 20%);--bg-accent-hover: hsl(var(--accent-hue), 60%, 30%);--fg-accent-muted: hsl(var(--accent-hue), 60%, 50%);--fg-accent: hsl(var(--accent-hue), 100%, 70%);--fg-accent-hover: hsl(var(--accent-hue), 100%, 80%);--input-bg: var(--bg-dark);--input-fg: var(--fg-accent);--input-fg-dark: var(--bg-light);--h1: 1.5rem/1em var(--ff);--h2: bold 1rem/2em var(--ff);--h3: bold 1rem/1.5em var(--ff);--details: 1rem/1.5em var(--ff);--gap: 2rem;--element-gap: 1rem;--big-button: 3rem}*{box-sizing:border-box}body{margin:0;padding:0;background-color:var(--bg-mid);font:1em/1.5em var(--ff);color:var(--fg-mid)}header{text-align:left}main{max-width:1200px;margin:0 auto;padding:2rem;display:flex;flex-direction:column;gap:var(--gap);text-align:center}.flex-row{display:flex;flex-direction:row;flex:1;gap:calc(2 * var(--gap))}.flex-row>*{flex:1}@media (max-width: 768px){.flex-row{flex-direction:column}#metronome{display:flex;flex-direction:column;gap:var(--gap);padding:var(--element-gap)}}@media (min-width: 769px){#metronome{display:grid;grid-template-columns:50% 50%;align-items:center}#metronome>*{padding:calc(.5 * var(--element-gap));padding-left:var(--gap);padding-right:var(--gap)}#metronome .rhythm{grid-column:1}#metronome .tempo{grid-column:2}#metronome .heading{grid-row:1;padding-top:var(--gap)}#metronome .rendered{grid-row:2;padding-top:2rem;padding-bottom:2rem}#metronome .input{grid-row:3}#metronome .buttons{grid-row:4;padding-bottom:var(--gap)}}.flex-column{display:flex;flex-direction:column;gap:var(--element-gap)}#metronome{background:var(--bg-light);box-shadow:0 8px 32px #0003;border-radius:1.5rem}#metronome>h2{margin:0}#metronome .rendered{color:var(--fg-light);font-size:3rem;line-height:5rem}#metronome .rendered span{display:inline-block;padding:0 1rem;border-radius:.3em}#metronome .rendered span.current-cell{color:var(--fg-accent)}#docs *{text-align:left}footer{max-width:1200px;margin:0 auto}footer a{color:var(--fg-mid)}footer a:hover{color:var(--fg-light)}h1,h2,h3{margin:2rem 0 0}h1{color:var(--fg-light);font:var(--h1)}h2{font:var(--h2)}h3{font:var(--h3)}p{margin:0 0 1rem}p.tight{margin-bottom:.2rem}ul{list-style:none;padding:0;margin:0}button{min-height:var(--big-button);min-width:var(--big-button);background:var(--bg-accent);padding:0 1rem;border:none;border-radius:.5rem;color:var(--fg-accent);font-size:1.2rem;border:solid 1px var(--fg-accent-muted);box-shadow:0 2px 5px var(--bg-dark)}button:hover{color:var(--fg-accent-hover);background-color:var(--bg-accent-hover);border:solid 1px var(--fg-accent)}button.text-btn{width:8rem;flex:0 0 8rem}.grouped-buttons{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:var(--element-gap)}.oneof-buttons{background-color:var(--bg-dark);border-radius:.8rem;padding:calc(.5 * var(--element-gap))}.oneof-buttons button{background:var(--bg-dark);color:var(--fg-accent-muted);border:none;box-shadow:none;border-radius:.8rem}.oneof-buttons button.selected{background:var(--bg-accent-muted);box-shadow:0 0 8px var(--bg-accent-muted);color:var(--fg-accent)}.oneof-buttons button:hover{color:var(--fg-accent-hover)}.note-buttons button{font-size:2rem}input[type=text]{font-size:2rem;background:var(--input-bg);width:100%;padding:.7rem;border:none;border-radius:.8rem;color:var(--input-fg);text-align:center}input[type=text]::placeholder{color:var(--input-fg-dark)}input[type=range]{width:100%;color:var(--fg-accent);background:var(--bg-dark);-webkit-appearance:none;-moz-appearance:none;appearance:none;height:.5rem;border-radius:10rem}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--fg-accent);cursor:pointer}input[type=range]::-moz-range-thumb{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--fg-accent);cursor:pointer;border:none}#preset-list{background:var(--input-bg);padding:.5rem;border-radius:.8rem;text-align:left}.preset-btn{padding:.5rem 1rem;white-space:nowrap}.preset-btn *{text-align:left;margin:0}.preset-btn .preset-text{font:var(--details);color:var(--fg-accent-muted)}.preset-btn:hover .preset-text{color:var(--fg-accent)}.tempo-controls{display:flex;align-items:center;gap:var(--element-gap);width:100%}.tempo-buttons{display:flex;gap:.5rem}.tempo-adjust-btn{min-width:3rem;min-height:2.5rem;font-size:1rem;padding:.5rem .8rem;background:var(--bg-accent);color:var(--fg-accent);border:solid 1px var(--fg-accent-muted);border-radius:.5rem;box-shadow:0 2px 5px var(--bg-dark)}.tempo-adjust-btn:hover{color:var(--fg-accent-hover);background-color:var(--bg-accent-hover);border:solid 1px var(--fg-accent)}.bpm-slider{flex:1;margin:0 .5rem}