* {
    background: #eee;
    font-family: Lato, sans-serif;
}

html, body {
    margin: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

#back {
    width: 100%;
    height: 100%;
    display: block;
}

.temp-output-overlay {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: min(560px, calc(100vw - 24px));
    max-height: 16vh;
    overflow: auto;
    padding: 6px 8px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    color: #222;
    font: 9px/1.25 monospace;
}

.temp-output-overlay-heading {
    margin-bottom: 3px;
    background: transparent;
    color: #666;
    font: 600 8px/1.2 sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.temp-output-overlay-body {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    background: transparent;
}

.fps-overlay {
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 21;
    pointer-events: none;
    padding: 4px 6px;
    border: 1px solid rgba(0, 0, 0, 0.18);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    color: #222;
    font: 11px/1.2 monospace;
}

.logo_evil {
    color: #ff622e;
}

.logo_works {
    color: #222;
    font-family: "Lato Thin";
}