:root {
    --ACCENT2: rgb(182, 139, 252);
    --ACCENT: rgb(115, 155, 255);

    --BACKGROUND: rgb(20, 20, 20);
    --GROUP: rgb(25, 25, 25);

    --OUTLINE_LIGHT: rgb(55, 55, 55);
    --OUTLINE_DARK: rgb(10, 10, 10);

    --DIM_ELEMENT: rgb(50, 50, 50);
    --HOVERED_ELEMENT: rgb(120, 120, 120);
    --SELECTED_ELEMENT: rgb(200, 200, 200);

    --BAR_SIZE: 90px;
    --MARGIN: 20px;
    --PADDING: 8px;
    --ITEM_HEIGHT: 12px;

    --TEXT: #c8c8c8;
    --DIM_TEXT: #9a9a9a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: var(--BACKGROUND);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--MARGIN);
    font: 12px Verdana, Geneva, Tahoma, sans-serif;
    color: var(--TEXT);
}

.board {
    width: 680px;
    max-width: 95vw;
    background: linear-gradient(var(--GROUP), var(--BACKGROUND));
    border: 1px solid var(--OUTLINE_DARK);
    box-shadow: inset 0 0 0 1px var(--OUTLINE_LIGHT);
}

.inner { padding: var(--PADDING); text-align: center; }

.ascii {
    font-family: ui-monospace, monospace;
    font-size: min(8px, calc((min(380px, 92vw) - 48px) / 42));
    line-height: 1;
    letter-spacing: 0;
    white-space: pre;
    margin: 0;
    color: var(--ACCENT);
    user-select: none;
}

.status {
    margin-top: 18px;
    font-size: 11px;
    color: var(--DIM_TEXT);
}

code {
    font-family: ui-monospace, monospace;
    color: var(--ACCENT2);
    word-break: break-all;
}

a {
    color: var(--ACCENT);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}