:root { --u: 1vmin; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #000; color: #fff; font-family: Arial, Helvetica, sans-serif; }
body { overflow: hidden; }
.screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
.hidden { display: none !important; }
#setup { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6vh 6vw; overflow: auto; text-align: center; }
h1 { flex: none; font-size: calc(8 * var(--u)); line-height: 1.1; margin: 0 0 calc(4.5 * var(--u)); font-weight: normal; }
.row { flex: none; display: flex; width: calc(142 * var(--u)); max-width: 100%; margin-bottom: calc(5 * var(--u)); }
.picker { width: 50%; min-width: 0; padding: 0 calc(5 * var(--u)); }
.label { font-size: calc(4.5 * var(--u)); line-height: 1.2; color: #bbb; font-weight: normal; margin: 0 0 calc(2.5 * var(--u)); }
.control { display: flex; align-items: center; justify-content: center; }
.value { width: calc(17 * var(--u)); flex: none; font-size: calc(10 * var(--u)); line-height: 1; }
.btn { flex: none; font-family: inherit; color: #fff; background: #262626; border: calc(.7 * var(--u)) solid #262626; border-radius: calc(2 * var(--u)); cursor: pointer; outline: none; padding: 0; }
.btn:focus { border-color: #fff; background: #2855cb; }
.btn:active { background: #527ff5; }
.step { width: calc(15 * var(--u)); height: calc(14 * var(--u)); font-size: calc(9 * var(--u)); line-height: 1; }
.play { width: calc(60 * var(--u)); max-width: 90%; height: calc(13 * var(--u)); font-size: calc(6 * var(--u)); }
.hint { flex: none; font-size: calc(3.3 * var(--u)); line-height: 1.3; color: #bbb; margin: calc(3.5 * var(--u)) 0 0; }
.back-hint { flex: none; font-size: calc(2.8 * var(--u)); line-height: 1.3; color: #888; margin: calc(1 * var(--u)) 0 0; }
#frame { display: block; width: 100%; height: 100%; border: 0; background: #000; }