+dl {
+ display: inline-grid;
+ grid: auto-flow / min-content repeat(10, auto);
+}
+
+form > ul {
+ display: table;
+ border-spacing: 0 2px;
+}
+form > ul > li {
+ display: table-row;
+}
+form > ul > li > * {
+ display: table-cell;
+ padding-right: .5em;
+}
+form > ul > li > label {
+ /* th */
+ text-align: right;
+}
+form > ul > li > label + * {
+ /* td */
+ width: 40em;
+}
+
+.multiinput,
+input,select {
+ box-sizing: border-box;
+ flex-grow: 1;
+}
+input:not([type=submit]) {
+ padding: .4rem;
+ font-family: monospace;
+}
+input[type=number] {
+ max-width: 7em;
+}
+select {
+ padding: .3rem .2rem; /* TODO: input */
+}
+#thumbpreview {
+ width: 300px;
+ align-self: start;
+ flex-shrink: 0;
+}
+
+ul.popup {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: end;
+ position: fixed;
+ left: 0;
+ top: 0;
+ margin: auto;
+ max-height: 90%;
+ max-width: 90%;
+ overflow: auto;
+ background: rgba(0, 0, 0, .8);
+ border: 1px solid #CCC;
+}
+
+h1 {
+ margin-bottom: 1ex;
+}
+.inline {
+ display: inline-flex;
+ align-items: baseline;
+ margin: 0 -1ex; /* inner gap */
+}
+.inline > * {
+ margin: 0 1ex;
+}
+.inline .inline {
+ display: flex;
+ margin: 0;
+}
+.inline.multiinput {
+ flex-wrap: wrap;
+}
+.multiinput > input {
+ width: 10em;
+}
+
+#nav > ul,
+#nav > ul strong,
+#nav form {
+ margin: 1ex 0;
+ display: inline-block;
+}