:root {
    color-scheme: light dark;
}
@media (prefers-color-scheme: light) {
    :root {
        --primary-fg-color: black;
        --primary-bg-color: white;
        --inverted-fg-color: white;
        --inverted-bg-color: black;
        --secondary-fg-color: gray;
        --accent-color-active: purple;
        --accent-color-done: teal;
        --accent-color-hint: green;
        --secondary-label-opacity: 33%;
        --function-key-opacity: 15%;
        --function-key-opacity-keydown: 33%;
        --function-key-opacity-hint: 50%;
        --insignificant-key-opacity: 33%;
        --color-mix-percentage-done: 15%;
        --color-mix-percentage-hint: 10%;
        --color-mix-percentage-active: 25%;
    }
}
@media (prefers-color-scheme: dark) {
    :root {
        --primary-fg-color: #CCC;
        --primary-bg-color: #111;
        --inverted-fg-color: black;
        --inverted-bg-color: white;
        --secondary-fg-color: gray;
        --accent-color-active: violet;
        --accent-color-done: cyan;
        --accent-color-hint: lightgreen;
        --secondary-label-opacity: 50%;
        --function-key-opacity: 33%;
        --function-key-opacity-keydown: 50%;
        --insignificant-key-opacity: 33%;
        --color-mix-percentage-done: 33%;
        --color-mix-percentage-hint: 20%;
        --color-mix-percentage-active: 40%;
    }
}
body {
    color: var(--primary-fg-color);
    background-color: var(--primary-bg-color);
}
kbd {
    font-family: Maple Mono, LXGW WenKai, Maple Mono CN, Fantasque Sans Mono, Inter, monospace;
}
.text-box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 24px;
    min-height: 120px;
}
.caption {
    //border: 1px dotted;
    //border-radius: 32px;
    color: var(--secondary-fg-color);
    font-family: Maple Mono, LXGW WenKai, Maple Mono CN, Fantasque Sans Mono, Inter, sans-serif;
    font-size: 3.5rem;
    padding: 16px 32px;
    text-align: center;
    width: fit-content;
}
.caption .accepted {
    color: var(--accent-color-done);
}
.caption .highlight {
    color: var(--accent-color-active);
}
.caption .cursor {
    text-decoration: underline;
}
.echo-bar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    margin: 24px 0;
    height: 80px;
}
.input-code {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 24px;
    width: 384px;
    height: 80px;
    margin: 2px;
    border: 1px dotted;
    border-radius: 24px;
    font-size: 2.2rem;
    overflow: hidden;
}
.input-code.freeplay {
    border-color: var(--accent-color-active);
    color: var(--accent-color-active);
}
.input-code.target {
    border-color: var(--accent-color-hint);
    color: var(--accent-color-hint);
}
.input-code.success {
    background-color: color-mix(in srgb, var(--accent-color-done) var(--color-mix-percentage-done), transparent);
    border-color: var(--accent-color-done);
    color: var(--accent-color-done);
}
.translated-input, .lookup-code, .exercises, .theories, .layouts {
    font-family: LXGW WenKai, Maple Mono CN, Maple Mono, Fantasque Sans Mono, Inter, sans-serif;
    font-size: 2rem;
}
.input-code .single-column {
    flex: 1;
    text-align: center;
    padding: 8px;
}
.input-code .left-column {
    flex: 1;
    text-align: right;
}
.input-code .right-column {
    flex: 1;
    overflow: visible;
    overflow-wrap: break-word;
    white-space: nowrap;
}
.lookup-code, .exercises, .theories, .layouts {
    border: 1px dotted var(--accent-color-hint);
    border-radius: 10px;
    margin: auto 18px;
    width: 100%;
}
.board {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}
.board .row:last-child .key {
    border-radius: 10% / 30%;
    height: 80px;
    width: 384px;
}
.board.ortholinear.split .row:last-child .key {
    border-radius: 20% / 40%;
    height: 80px;
    width: 184px;
}
.board.staggered .row:last-child .key {
    border-radius: 5% / 30%;
    height: 80px;
    width: 486px;
}
.board.ortholinear.split .row:nth-child(-n+4) .key:nth-child(6),
.board.ortholinear.split .row:last-child .key:last-child {
    margin-left: 80px;
}
.board.size-30.staggered .row:nth-child(3) .key:first-child,
.board.size-30.staggered .row:nth-child(4) .key:first-child {
    margin-left: 51px;
}
.board.size-60.staggered .row:nth-child(3) .key:first-child {
    margin-left: 51px;
}
.board.size-60.staggered .row:nth-child(4) .key:first-child {
    margin-left: -51px;
}
.row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
}
.key {
    border: 3px solid;
    border-radius: 40% 40% 20% 20% / 50% 50% 30% 30%;
    height: 80px;
    width: 80px;
}
.board .row:nth-child(3) .key:nth-child(4) kbd.label.primary,
.board .row:nth-child(3) .key:nth-child(7) kbd.label.primary {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--secondary-fg-color) 66%, transparent);
    text-underline-offset: 16px;
}
.function.key, .function.key.pressed {
    color: var(--inverted-fg-color);
    background-color: var(--inverted-bg-color);
    opacity: var(--function-key-opacity);
}
.function.key.keydown {
    color: var(--inverted-fg-color);
    background-color: var(--inverted-bg-color);
    opacity: var(--function-key-opacity-keydown);
}
.key.hint {
    color: var(--accent-color-hint);
    background-color: color-mix(in srgb, var(--accent-color-hint) var(--color-mix-percentage-hint), transparent);
}
.key.pressed {
    color: var(--accent-color-active);
    background-color: color-mix(in srgb, var(--accent-color-active) var(--color-mix-percentage-hint), transparent);
}
.key.hint.pressed {
    color: var(--accent-color-done);
    background-color: color-mix(in srgb, var(--accent-color-done) var(--color-mix-percentage-active), transparent);
}
.key.keydown, .key.hint.keydown {
    color: var(--accent-color-active);
    background-color: color-mix(in srgb, var(--accent-color-active) var(--color-mix-percentage-active), transparent);
}
.function.key.hint {
    color: var(--inverted-fg-color);
    background-color: var(--accent-color-hint);
    opacity: var(--function-key-opacity-hint);
}
.function.key.hint.pressed {
    color: var(--inverted-fg-color);
    background-color: var(--accent-color-done);
    opacity: var(--function-key-opacity-hint);
}
.key.fallback, .key.empty {
    opacity: var(--insignificant-key-opacity);
}
.key.hidden {
    visibility: hidden;
}
.key .label {
    font-size: 2.2rem;
    margin: auto;
    vertical-align: middle;
    text-align: center;
    line-height: 1;
    flex: 1;
}
.function.key .label {
    font-size: 1.2rem;
}
.key .label.secondary {
    font-size: 1.2rem;
    opacity: var(--secondary-label-opacity);
}
.vertical-box, .horizontal-box {
    display: flex;
    justify-content: center;
}
.vertical-box {
    flex-direction: column;
}
.horizontal-box {
    flex-direction: row;
}
.vertical-box:first-child > .label.secondary {
    margin-bottom: auto;
}
.vertical-box:last-child > .label.secondary {
    margin-top: auto;
}
.horizontal-box:first-child > .label.secondary {
    margin-right: auto;
}
.horizontal-box:last-child > .label.secondary {
    margin-left: auto;
}