<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">:root {
    --hud-box-pad: 5px;
    --dialog-margin-vert: 10px;
    --hud-color-light: #9f1;
    --hud-color-2: #f26;
    --hud-color-3: #f90;
    --hud-color-4: #d15;
    --hud-color-5: #fc0;
    --hud-color-6: #df4;
    --hud-color-7: #bd3;
    --hud-color-8: #d25f00;
    --hud-color-9: #5fe;
    --hud-color-10: #6f9;
    --hud-color-11: #1a7;
    --hud-color-12: #086;
    --hud-btn-color-hover: #fa3;
    --ctrls-btn-color: #aaa;
    --box-background-1: rgba(0,0,0,0.875);
    --box-background-2: #000;
}
body {
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    color: white;
    font-family: monospace;
}
body * {
    box-sizing: border-box;
}
canvas {
    width: 100%;
    height: 100%;
}
h1 {
    font-size: 150%;
}
h2 {
    font-size: 130%;
}
h3 {
    font-size: 115%;
}
h4, p, label, #ctrls-cntnr button, a {
    font-size: 95%;
}

.hud-elmnt {
    position: fixed;
    /*display: none;*/
}
.hud-elmnt a {
    color: var(--hud-color-light);
}

#load-overlay {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 175px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--hud-color-2);
    border: 2px solid var(--hud-color-2);
    padding: var(--hud-box-pad);
}
#load-overlay.loaded {
    display: none;
}
#load-overlay h1 {
    margin: var(--hud-box-pad) 0 calc(2 * var(--hud-box-pad)) 0;
}
#load-anim-cntnr {
    display: flex;
    flex-direction: row;
    position: relative;
    height: 20px;
    width: 100%;
}
.load-strobe {
    box-sizing: border-box;
    flex: 1;
    height: 100%;
    margin-right: 3px;
    border: 1px solid var(--hud-color-2);
    background-color: black;
}
.load-strobe:last-child {
    margin-right: 0;
}
.strobe-light {
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    height: 100%;
    width: calc( 8.33% - 3px );
    background-color: #fff;
    border: 1px solid var(--hud-color-2);
    animation: load-strobe 1.125s steps(11, end) infinite;
}
#load-overlay.loaded .strobe-light {
    animation: none;
}


#title-cntnr {
    color: var(--hud-color-light);
    padding: 0 0.5em;
    background-color: #000;
    top: 0;
    left: 50%;
    left: 0;
    transform: translateX(-50%);
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: var(--hud-box-pad);
    /*display: none;*/
}
#title-cntnr h1 {
    margin: 0;
    text-align: center;
    text-align: left;
}
#title-cntnr p {
    margin: var(--hud-box-pad) 0;
}
#instructions-cntnr {
    top: 0;
    left: 50%;
    margin: var(--hud-box-pad);
    transform: translateX(-50%);
    color:  var(--hud-color-light);
    background-color: var(--box-background-1);
}
#instructions-cntnr p {
    margin: 0.25rem;
    padding: 0 0.25rem;
}
#about-btn-cntnr {
    margin: 0.5rem;
    right: 0;
}
button {
    all: unset;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    color: #000;
}
#about-btn {
    background-color: var(--hud-color-light);
}
#about-btn.active {
    background-color: var(--hud-color-2);
    color: white;
}
#about-btn-cntnr h2 {
    padding: 0 0.25rem;
    margin: 0.25rem 0;
}
#ctrls-cntnr {
    display: flex;
    flex-direction: column;
    color: var(--hud-color-light);
    background-color: var(--box-background-1);
    left: 0;
    bottom: 0;
    margin: var(--hud-box-pad);
    border: 2px solid var(--hud-color-light);
    max-height: calc(100% - 2 * var(--hud-box-pad));
    overflow-y: hidden;
}
#ctrls-cntnr .ctrls-hide {
    display: unset
}
#ctrls-cntnr.closed .ctrls-hide {
    display: none;
}
#ctrls-cntnr .title-cntnr {
    background-color: var(--hud-color-light);/**/
    display: flex;
    justify-content: space-between;
}
#ctrls-cntnr h2 {
    flex: 1;
    padding: 0 0.25rem;
    margin: 0;
    background-color: var(--hud-color-light);
    color: black;
}
#ctrls-cntnr .title-cntnr button { 
    width: unset;
    background-color: transparent;
    padding: 0;
}
#ctrls-toggle {
    position: relative;
}
#ctrls-toggle.open #ctrls-open {
    display: none;
}
#ctrls-toggle.closed #ctrls-close {
    display: none;
}
#ctrls-toggle svg {
    position: absolute;
    background-color: black;
    top: 0;
    right: 0;
    width: auto;
    height: 100%;
}
#ctrls-toggle svg polyline {
    stroke: white;
    stroke-width: 10;
    stroke-linecap: round;
    stroke-linejoin: bevel;
    fill: none;
}
#ctrls-cntnr button {
    /*font-size: 110%;*/
    background-color: var(--ctrls-btn-color);
    font-weight: bold;
    width: 100%;
    padding: 0.125rem 0.25rem;
}
button#reset-sim {
    background-color: var(--hud-color-6);
}
button#pause-sim {
    background-color: var(--hud-color-6);
}
button#pause-sim.paused {
    background-color: var(--hud-color-10);
}
#ctrls-inputs-cntnr {
    border-top: 2px solid var(--hud-color-light);
    overflow-y: auto;
}
.ctrl-input-cntnr {
    padding: 0.125rem 0.125rem;
    border-bottom: 1px solid #777;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.ctrl-input-cntnr label {
    margin-left: 0.25rem;
    margin-right: var(--hud-box-pad);
}
.ctrl-input-cntnr:last-child {
    border-bottom: none;
}
.dialog {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border: 2px solid var(--hud-color-2);
    background-color: var(--box-background-1);
    width: 95%;
    max-width: 600px;
    max-height: 95%;
}
#about-dialog {
    display: none;
    overflow-y: hidden;/**/
    flex-direction: column;
}
#about-dialog.active {
    display: flex;
}
#about-dialog .content-cntnr {
    overflow-y: auto;
}
.dialog .subtitle-cntnr {
    color: white;
    background-color: var(--hud-color-2);
    position: relative;
    padding: 0.5px;
    display: flex;
    justify-content: center;
}
.dialog .subtitle-cntnr h2 {
    margin: 0.25em;
}
.dialog .subtitle-cntnr .exit-btn {
    height: 25px;
    width: 25px;
    position: absolute;
    right: 0;
    top: 0;
    background-color: black;
}
.dialog .exit-btn svg {
    width: 100%;
    height: 100%;
}
.dialog .exit-btn  line {
    stroke: #fff;
    stroke-width: 10;
}
.dialog a {
    color: #5fe;
}
.dialog h3 {
    margin: 0.625rem 0;
    text-decoration: underline;
}
.dialog p {
    margin: 0.5rem var(--hud-box-pad);
    /*padding: 0 var(--hud-box-pad);*/
}
.dialog ul {
    border-top: 2px solid var(--hud-color-2);
    margin: 0;
    padding: var(--hud-box-pad);
    padding-top: 0;
}
.dialog span.separator {
    flex: 1;
    border-bottom: 1px dashed #fff;
}
.dialog li {
    display: flex;
    justify-content: space-between;
    margin: 0.25rem 0;
}
.dialog li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
.dialog li h4 {
    margin: 0;
}
dialog li::marker {
    display: none;
}
#threejs-link {
    bottom: 0;
    right: 0;
    margin: var(--hud-box-pad);
    background-color: var(--box-background-1);
}
#copyright-cntnr {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: var(--hud-box-pad);
    background-color: var(--box-background-1);
    color: var(--hud-color-light);/**/
}
/*
#copyright-cntnr span.copy {
    /*color: var(--hud-color-5);
    color: white;
}
*/
span.copy {
    /*color: var(--hud-color-5);*/
    color: white;
}
#threejs-link p,
#copyright-cntnr p {
    padding: 0 0.25rem;
    margin: var(--hud-box-pad) 0;
}
@media (hover: hover) {
    .hud-elmnt a:hover {
        color: var(--hud-color-3);
    }
    #about-btn:hover {
        background-color: var(--hud-color-6);
    }
    #about-btn.active:hover {
        color: white;
        background-color: var(--hud-color-4);
    }
    .dialog .subtitle-cntnr .exit-btn:hover {
        background-color: #aaa;
    }
    .dialog .subtitle-cntnr .exit-btn:hover svg line {
        stroke: black;
    }
    .dialog a:hover {
        color: var(--hud-color-5);
    }
    #ctrls-toggle:hover svg {
        background-color: #aaa;
    }
    #ctrls-toggle:hover svg polyline {
        stroke: black;
    }
    #ctrls-cntnr button:hover {
        color: white;
        background-color: #666;
    }
    button#reset-sim:hover {
        color: var(--hud-color-6);
        background-color: #5a5540;
    }
    button#pause-sim:hover {
        color: var(--hud-color-6);
        background-color: #5a5540;
    }
    button#pause-sim.paused:hover {
        color: var(--hud-color-10);
        background-color: #3a5043;
    }
}
#ctrls-toggle:active svg {
    background-color: #888;
}
#ctrls-cntnr button:active {
    background-color: #444;
}
.dialog .subtitle-cntnr .exit-btn:active {
    background-color: #888;
}
#about-btn:active {
    color: white;
    background-color: var(--hud-color-2);
}
button#reset-sim:active {
    color: var(--hud-color-6);
    background-color: #4a402a;
}
button#pause-sim:active {
    color: var(--hud-color-6);
    background-color: #4a402a;
}
button#pause-sim.paused:active {
    color: var(--hud-color-10);
    background-color: #30403a;
}

.narrow-hide {
    display: none;
}
.narrow-show {
    display: unset;
}

@media ( min-width: 577px ) {
    h1 {
        font-size: 175%;
    }
    h2 {
        font-size: 150%;
    }
    h3 {
        font-size: 135%;
    }
    h4, p, label, #ctrls-cntnr button, a {
        font-size: 105%;
    }
}
@media ( min-width: 769px ) {
    .narrow-hide {
        display: unset;
    }
    .narrow-show {
        display: none;
    }
}

@media ( max-height: 450px ) {
    #title-cntnr {
        flex-direction: column-reverse;
        align-items: flex-end;
        left: unset;
        right: 0;
        top: unset;
        bottom: 0;
    }
    h2 {
        font-size: 130%;
    }
    h3 {
        font-size: 115%;
    }
    h4, p, label, #ctrls-cntnr button, a {
        font-size: 95%;
    }
}


@keyframes load-strobe {
    0% {
        transform: translateX(0);
    }
    50% {
        transform: translateX( calc( 1100% + 11 * 3.75px ));
    }
    100% {
        transform: translateX(0);
    }
}</pre></body></html>