:root {
    --ratio: 1;
    --ratio-font: 1;
    color: var(--base-text-color); 
}

html { transition: all 0.2s ease-in-out; }
html[data-theme='light'] { color-scheme: light; }
html[data-theme='dark'] { color-scheme: dark; }
.hide-scrollbar,
html {
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar { display: none; }
}
body {
    min-height: calc(100dvh - 2rem);
    width: calc(100dvw - 2rem);
    display: grid;
    place-items: center;
    margin: 1rem;
    padding: 0;
    background: var(--base-background-color);
    transition: all 0.2s ease-in-out;
}

html, body, button, input, select, textarea {
    font-family:
        -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC",
        "Noto Sans SC", "Noto Sans CJK SC", "Noto Sans",
        "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.font-mono {
    font-family:
        "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas,
        "Noto Sans Mono CJK SC", "Noto Sans Mono", "Noto Code",
        ui-monospace, monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button {
    --style-color: var(--base-text-color);
    --style-background: var(--base-background-color);
    --border-color: var(--style-color);
    --background-color: var(--style-background);
    --text-color: var(--style-color);
    color: var(--text-color);
    cursor: pointer;
    box-sizing: border-box;
    border: var(--border-color) 0.0625rem solid;
    background: var(--background-color);
    font-size: calc(1.2rem * var(--ratio-font));
    font-weight: bold;
    padding: 0 1rem;
    height: calc(2.5rem * var(--ratio));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    transition: all 0.2s ease-in-out;
    outline: none;
    @media (hover: hover) {
        &:hover {
            background: var(--style-color);
            color: var(--style-background);
        }
    }

    &:active {
        background: var(--style-color);
        color: var(--style-background);
        transition: none;
    }

    &.primary { --style-color: var(--color-primary); }
    &.info { --style-color: var(--color-info); }
    &.error { --style-color: var(--color-error); }
    &.focus {
        display: flex;
        align-items: center;
        justify-content: center;
        height: calc(3.5rem * var(--ratio));
        font-size: calc(1.6rem * var(--ratio-font));
        font-weight: bold;
    }
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

input {
    font-size: calc(1rem * var(--ratio-font));
    padding: 0;
    margin: 0;
    border: none;
    background: var(--base-background-color);
    text-align: center;
    -moz-appearance: textfield;
    appearance: none;
    color: var(--base-text-color);
    transition: all 0.2s ease-in-out;
    &:focus { outline: none; }
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
}

@media (max-width: 32rem) { :root { font-size: 2.88vw; } }
@media screen and (orientation: portrait) and (pointer: coarse) {
    :root {
        --ratio: 1.5;
        --ratio-font: 1.2;
    }
}