body {
    background: #666;
    color: white;
    font-family: sans-serif;
    font-size: 20px;
    margin: 0 0 8em;
}

a {
    color: gold;
}

body > header {
    padding: 1em;
    margin-bottom: 1em;
    display: flex;
    align-items: baseline;
    background: #222;
}
body > header h1 {
    margin: 0;
}
body > header cite {
    flex: 1;
    margin: 0 0.5em;
}
body > header button {
    align-self: stretch;
}

#help {
    position: fixed;
    top: 6em;
    bottom: 2em;
    left: 2em;
    right: 2em;
    overflow: auto;
    padding: 1em 3em 3em;
    display: none;

    background: #f0f0f0;
    color: #222;
    border: 2px solid #222;
    border-radius: 0.25em;
    box-shadow: 0 0.5em 1em #00000080;
}
#help.visible {
    display: inherit;
}
#help h2 {
    border-top: 1px dotted #222;
    padding-top: 0.5em;
}
#help h2:first-child {
    border-top: none;
    padding-top: 0;
}
#help em {
    color: black;
}

input, label, button {
    vertical-align: middle;
}
input[type=checkbox] {
    vertical-align: text-bottom;
}
button {
    box-sizing: content-box;
    /* Apply minimum width and height to ensure the preset particle buttons are
     * all the same size (despite emoji/symbol variation), and the play/pause
     * button doesn't change size when its label changes */
    min-width: 1em;
    min-height: 1.66em;
    text-align: center;
}
/* Make color input sorta the same size as regular buttons */
input[type=color] {
    box-sizing: content-box;
    min-height: 1.66em;
}
input[type=range] {
    min-width: 3em;
}

#generator {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1em;
}

#generator canvas {
    object-fit: contain;
    border: 2px solid #444;
}
#generator figure {
    display: flex;
    margin: 0.5em 0;
    flex-direction: column;
}
#generator figure canvas {
    display: block;
}
#generator figure figcaption {
    display: flex;
    padding: 0.25em 0.5em;
    background: #444;
    align-items: center;
    column-gap: 0.5em;
}
#generator figure figcaption p {
    margin: 0;
    flex: 1;
}
#generator figure figcaption input[type=file] {
    display: none;
}
#generator figure figcaption input,
#generator figure figcaption button {
    flex: 0 auto;
}
#generator figure.drag-hover canvas {
    border-color: gold;
}
#generator figure.drag-hover figcaption {
    background-color: gold;
    color: #444;
}

#generator .generation {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    column-gap: 1em;
    justify-content: space-around;
}

#generator .particle {
    display: flex;
    flex-direction: row-reverse;
}
#generator .particle #preview {
    width: 100%;
    box-sizing: border-box;
}
#generator .particle-presets {
    display: flex;
    margin: 0.5em 0;
    padding: 0;
    flex-direction: column;
}
#generator .particle-presets li {
    margin: 0.25em;
    list-style: none;
}
#generator .control-grid {
    display: grid;
    margin: 1em 0;
    grid-template-columns: max-content 1fr;
    row-gap: 0.25em;
    column-gap: 0.5em;
    align-items: center;
}
#generator .control-grid dt.hidden,
#generator .control-grid dt.hidden + dd {
    display: none;
}
#generator .control-grid dt {
    grid-column: 1;
    text-align: right;
    color: #ccc;
}
#generator .control-grid dd {
    margin: 0;
    grid-column: 2;
}
#generator .control-grid output {
    display: inline-block;
    min-width: 3em;
}
#generator .generation-checkboxes {
    display: grid;
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    justify-content: space-around;
}
#generator #control-generate {
    font-size: 2em;
    box-sizing: border-box;
    width: 100%;
    outline: 3px solid transparent;
    outline-offset: 2px;
}
@keyframes pulsing-submit {
    0% {
        outline-color: transparent;
    }
    100% {
        outline-color: hsl(90, 75%, 50%);
    }
}
#generator #control-generate.dirty {
    animation: pulsing-submit 0.5s infinite alternate;
}

/* Layout of the playback area at the bottom */
#generator .playback {
    display: flex;
    max-width: 95%;
    column-gap: 1em;
    justify-content: center;
}
#generator .playback .main-canvas {
    flex: 0 3 75%;
    max-width: -moz-fit-content;
    max-width: fit-content;
}
#generator .playback .parts {
    flex: 0 1 25%;
}
/* Force the canvases to scale to fit their available space */
#generator .playback canvas {
    box-sizing: border-box;
    width: 100%;
}

#generator .playback-controls {
    display: flex;
    column-gap: 0.5em;
    margin: 0 0.5em;
}
#generator .playback-controls label {
    align-self: center;
}
#generator .playback-controls #knob-play {
    flex: 0 auto;
    min-width: 1.5em;
}
#generator .playback-controls #knob-progress {
    flex: 1 auto;
}
#generator .playback-controls output {
    flex: 0 auto;
    align-self: center;
    text-align: center;
}
#generator .other-playback-controls {
    margin: 1em 0;
    display: grid;
    grid-template-rows: max-content max-content;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    column-gap: 1em;
}
#generator .other-playback-controls p {
    margin: 0 0.5em;
    display: flex;
    justify-content: space-between;
}