body{margin:0;overflow:hidden;display:flex;font-family:monospace;background-color:#000}#sidebar{width:300px;background:#000;color:#fff;padding:20px;box-sizing:border-box;position:relative;flex-shrink:0;max-height:100vh;overflow-y:auto;padding:1rem;display:flex;flex-direction:column}#sidebar .form-group{display:flex;align-items:center;margin-bottom:20px}.explainer{bottom:0;position:relative;flex-shrink:0;width:100%;margin-top:auto}#content{flex:1;flex-direction:column;display:flex;justify-content:center;align-items:center;position:relative;height:100vh}#scene-container{width:100%;height:100%;position:relative}canvas{width:100%;height:100%;display:block}.play-button{margin:20px 0;background:#fff;color:#000;border:1px solid white;padding:10px 20px;cursor:pointer;font-family:monospace;width:80px}.play-button.playing{background:#000;color:#fff}.autopilot-button{margin:20px 0 20px 10px;background:#fff;color:#000;border:1px solid white;padding:10px 20px;cursor:pointer;font-family:monospace;width:80px}.autopilot-button.active{background:#000;color:#fff;border:1px solid white}input[type=range]{margin:20px 0;appearance:none;-webkit-appearance:none;width:100%;background:transparent}input[type=range]::-webkit-slider-runnable-track{width:100%;height:1px;background:#fff;border:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:#fff;cursor:pointer;border-radius:0%;margin-top:-9px}input[type=range]::-moz-range-track{width:100%;height:2px;background:#fff;border:none;border-radius:0}input[type=range]::-moz-range-thumb{width:20px;height:20px;background:#fff;cursor:pointer;border-radius:0%;margin-top:-9px}input[type=range]::-ms-track{width:100%;height:2px;background:transparent;border-color:transparent;color:transparent}input[type=range]::-ms-fill-lower{background:#fff}input[type=range]::-ms-fill-upper{background:#fff}input[type=range]::-ms-thumb{width:20px;height:20px;background:#fff;cursor:pointer;margin-top:-9px}.slider-container{display:flex;align-items:center}.slider-container span{margin:0 10px}input[type=checkbox]{width:20px;height:20px;margin:0;background-color:#fff;border:1px solid #ccc;appearance:none;-webkit-appearance:none;-moz-appearance:none}.update-rate select{background-color:#000;color:#fff;border:1px solid white;border-radius:0;padding:2px 4px;font-family:inherit;font-size:inherit;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none}.update-rate select:focus{border:1px solid white;outline:none}.update-rate select option{background-color:#000;color:#fff;font-family:inherit;border:none;padding:2px 4px}.update-rate select{background-image:url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");background-repeat:no-repeat;background-position:right 4px center;background-size:8px;padding-right:16px}.instrument select{background-color:#000;color:#fff;border:1px solid white;border-radius:0;padding:2px 16px 2px 4px;font-family:inherit;font-size:inherit;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");background-repeat:no-repeat;background-position:right 4px center;background-size:8px}.instrument select:focus{border:1px solid white;outline:none}.instrument select option{background-color:#000;color:#fff;font-family:inherit;border:none;padding:2px 4px}input[type=checkbox]:checked{background-color:#000}#key,#scale{background-color:#000;color:#fff;border:1px solid white;border-radius:0;padding:2px 16px 2px 4px;font-family:inherit;font-size:inherit;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;margin-right:5px;background-image:url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'><path fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/></svg>");background-repeat:no-repeat;background-position:right 4px center;background-size:8px}#key:focus,#scale:focus{border:1px solid white;outline:none}#key option,#scale option{background-color:#000;color:#fff;font-family:inherit;border:none;padding:2px 4px}#instructions{width:200px;position:absolute;bottom:20px;right:20px;color:#fff;font-family:monospace;display:flex;flex-direction:column;align-items:flex-end}.arrow-keys{display:flex;flex-direction:column;align-items:center}.arrow-key{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid white;margin:2px;font-size:20px;font-weight:700}.arrow-key.active{background:#fff;color:#000}.key-instruction{display:flex;align-items:center}.legend-table{width:100%;border-collapse:separate;border-spacing:0 1em}.legend-header th,.legend-item td{margin:0 0 5px;text-align:left;vertical-align:middle}.color-box{width:20px;height:20px;display:inline-block}#citation{width:200px;position:absolute;top:20px;right:20px;color:#fff;font-family:monospace}#citation a{color:#fff;text-decoration:none}#citation a:hover{text-decoration:underline}#personal-link{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;color:#fff;font-family:monospace}#personal-link a{color:#fff;text-decoration:none;margin-left:5px}#personal-link:hover a,#personal-link:active a{text-decoration:underline}