* {
    touch-action: manipulation;
}

html {
    box-sizing: border-box;
    font-size: 4svmin;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

html,
body {
    margin: 0;
}

html,
body,
div,
span,
dialog,
button,
input,
output {
    background-color: #fff;
    color: #000;
}

dialog::backdrop {
    background-color: #ccc9;
    backdrop-filter: blur(0.5svmin);
    -webkit-backdrop-filter: blur(0.5svmin);
}

body,
button,
input,
output {
    font-family: system-ui;
    font-weight: 400;
}

#container-display .result,
button {
    text-box: trim-both cap alphabetic;
    align-content: center;
}

button svg * {
    stroke: #000;
}

button,
input,
output {
    align-content: center;
}

#loading {
    height: 100svh;
    text-align: center;
    font-size: min(50svh, 10svw);
}

#container {
    display: grid;
    gap: 1svmin;
    padding: 1svmin;
    height: 100svh;
    grid-template:
        "  a   a " 2.2fr
        "  b   c " 6fr
        / 5fr 5fr;
}

#container-display {
    display: flex;
    align-items: center;
    grid-area: a;
}

#container-scientific {
    display: grid;
    gap: 1svmin;
    grid-area: b;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

#container-basic {
    display: grid;
    gap: 1svmin;
    grid-area: c;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

#display {
    flex: auto;
    min-width: 0;
}

#display .result {
    overflow-x: clip;
    text-overflow: ellipsis;
}

.result {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: min(5svh, 6.3svw);
    height: 6.3svh;
}

.result.smaller-font-1 {
    font-size: min(5svh, 5svw);
}

.result.smaller-font-2 {
    font-size: min(5svh, 4svw);
}

.result.smaller-font-3 {
    font-size: min(5svh, 3.15svw);
}

.result.smaller-font-4 {
    font-size: min(5svh, 2.5svw);
}

#status {
    flex: none;
}

.status {
    text-align: left;
    font-size: 3.15svh;
    height: 1.25em;
}

.status.smaller-font-1 {
    font-size: 2.5svh;
}

.status.smaller-font-2 {
    font-size: 2svh;
}

#error {
    flex: auto;
    text-align: right;
    font-size: min(8svh, 6.3svw);
}

button {
    border-radius: 2svmin;
    font-size: min(5svh, 2svw);
}

button.smaller-font-1 {
    font-size: min(5svh, 1.6svw);
}

button.smaller-font-2 {
    font-size: min(5svh, 1.25svw);
}

button.larger-font-1 {
    font-size: min(6.3svh, 2.5svw);
}

.inline-icon {
    margin: 0 0.1em;
}

dialog {
    padding: 2svmin;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2svmin;
}

form button,
input[type="text"],
label,
output {
    margin-top: 0.5svmin;
    margin-bottom: 0.5svmin;
    vertical-align: middle;
    font-size: 4svmin;
    min-height: 8svmin;
}

form button {
    padding: 1svmin;
}

fieldset {
    padding: 1svmin;
}

#copy-paste .result {
    display: inline-block;
    font-size: 4svmin;
    width: 70svmin;
    height: 6.3svmin;
}

#copy-paste .result.smaller-font-2 {
    font-size: 3.15svmin;
}

#copy-paste .result.smaller-font-3 {
    font-size: 2.5svmin;
}

#copy-paste .result.smaller-font-4 {
    font-size: 2svmin;
}

.buttons {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 1svmin;
}

@media (orientation: portrait) {
    #container {
        grid-template:
            "a" 1.8fr
            "b" 6fr
            "c" 6fr;
    }

    .result {
        font-size: min(2.5svh, 6.3svw);
        height: 3.15svh;
    }

    .result.smaller-font-1 {
        font-size: min(2.5svh, 5svw);
    }

    .result.smaller-font-2 {
        font-size: min(2.5svh, 4svw);
    }

    .result.smaller-font-3 {
        font-size: min(2.5svh, 3.15svw);
    }

    .result.smaller-font-4 {
        font-size: min(2.5svh, 2.5svw);
    }

    .status {
        font-size: 1.6svh;
    }

    .status.smaller-font-1 {
        font-size: 1.25svh;
    }

    .status.smaller-font-2 {
        font-size: 1svh;
    }

    #error {
        font-size: min(4svh, 6.3svw);
    }

    button {
        font-size: min(2.5svh, 4svw);
    }

    button.smaller-font-1 {
        font-size: min(2.5svh, 3.15svw);
    }

    button.smaller-font-2 {
        font-size: min(2.5svh, 2.5svw);
    }

    button.larger-font-1 {
        font-size: min(3.15svh, 5svw);
    }
}

.status-error {
    color: #c02;
    font-weight: 700;
}

.status-warning {
    color: #b80;
    font-weight: 700;
}

.status-info {
    color: #333;
}

.status-verbose {
    color: #999;
}

dialog,
button,
fieldset,
input[type="text"] {
    border: 2px solid #999;
}

button:not(.disabled):hover {
    background-color: #eee;
}

button:not(.disabled):active {
    border-color: #000;
    background-color: #ddd;
}

button.enabled:not(.disabled) {
    border-color: #000;
    background-color: #333;
    color: #fff;
    font-weight: 500;
}

button.enabled:not(.disabled) svg * {
    stroke: #fff;
}

button.enabled:not(.disabled):hover {
    background-color: #222;
}

button.enabled:not(.disabled):active {
    background-color: #000;
}

button.level-2:not(.disabled) {
    color: #096;
}

button.level-2:not(.disabled) svg * {
    stroke: #096;
}

button.level-2.enabled:not(.disabled) {
    background-color: #375;
    color: #fff;
    font-weight: 500;
}

button.level-2.enabled:not(.disabled) svg * {
    stroke: #fff;
}

button.level-2.enabled:not(.disabled):hover {
    background-color: #264;
}

button.level-2.enabled:not(.disabled):active {
    background-color: #053;
}

button.clear:not(.disabled) {
    color: #c02;
}

button.clear.enabled:not(.disabled) {
    background-color: #833;
    color: #fff;
    font-weight: 500;
}

button.clear.enabled:not(.disabled):hover {
    background-color: #722;
}

button.clear.enabled:not(.disabled):active {
    background-color: #601;
}

button.input:not(.disabled),
.result.input {
    color: #069;
}

.result.input.input-error {
    color: #c02;
}

button.done:not(.disabled) {
    background-color: #375;
    color: #fff;
    font-weight: 500;
}

button.done:not(.disabled):hover {
    background-color: #264;
}

button.done:not(.disabled):active {
    background-color: #053;
}

button.disabled {
    color: #999;
}

button.disabled svg * {
    stroke: #999;
}

@media (prefers-color-scheme: dark) {

    html,
    body,
    div,
    span,
    dialog,
    button,
    input,
    output {
        background-color: #000;
        color: #eee;
    }

    dialog::backdrop {
        background-color: #4449;
    }

    div,
    span,
    button,
    input,
    output {
        font-weight: 500;
    }

    button svg * {
        stroke: #eee;
    }

    .status-error {
        color: #f77;
    }

    .status-warning {
        color: #da0;
    }

    .status-info {
        color: #ddd;
    }

    .status-verbose {
        color: #777;
    }

    dialog,
    button,
    fieldset,
    input[type="text"] {
        border-color: #777;
    }

    button:not(.disabled):hover {
        background-color: #222;
    }

    button:not(.disabled):active {
        border-color: #eee;
        background-color: #333;
    }

    button.enabled:not(.disabled) {
        border-color: #eee;
        background-color: #555;
        color: #eee;
    }

    button.enabled:not(.disabled) svg * {
        stroke: #eee;
    }

    button.enabled:not(.disabled):hover {
        background-color: #666;
    }

    button.enabled:not(.disabled):active {
        background-color: #777;
    }

    button.level-2:not(.disabled) {
        color: #aec;
    }

    button.level-2:not(.disabled) svg * {
        stroke: #aec;
    }

    button.level-2.enabled:not(.disabled) {
        background-color: #042;
        color: #eee;
    }

    button.level-2.enabled:not(.disabled) svg * {
        stroke: #eee;
    }

    button.level-2.enabled:not(.disabled):hover {
        background-color: #153;
    }

    button.level-2.enabled:not(.disabled):active {
        background-color: #264;
    }

    button.clear:not(.disabled) {
        color: #f77;
    }

    button.clear.enabled:not(.disabled) {
        background-color: #400;
        color: #eee;
    }

    button.clear.enabled:not(.disabled):hover {
        background-color: #511;
    }

    button.clear.enabled:not(.disabled):active {
        background-color: #622;
    }

    button.input:not(.disabled),
    .result.input {
        color: #feb;
    }

    .result.input.input-error {
        color: #f77;
    }

    button.done:not(.disabled) {
        background-color: #042;
        color: #eee;
    }

    button.done:not(.disabled):hover {
        background-color: #153;
    }

    button.done:not(.disabled):active {
        background-color: #264;
    }

    button.disabled {
        border-color: #777;
        background-color: #000;
        color: #777;
    }

    button.disabled svg * {
        stroke: #777;
    }
}

.nodisplay,
.shift-nodisplay {
    display: none !important;
}

.transparent {
    visibility: hidden !important;
}