@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPMincho:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1+Code:wght@100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
    line-height: 1.5;
    font-weight: 400;
    color-scheme: dark light;
    --max-width: 100rem;
}


:root {
    color-scheme: light;
    --bg-surface: #fff;
    --bg-primary: #f4f4f4;
    --bg-secondary: #e0e0e0;
    --border-secondary: #d0d0d8;
    --border-primary: #b0b0bc;
    --border-strong: #7b7b85;
    --medium-gray: #444;
    --color-text: #111111;
    --color-text-button: #222;

    --primary-bg: #dde8ff;
    --primary-bg-active: #c8d8f8;
    --primary-border: #6688cc;
    --primary: #2255cc;
    --primary-light: #1133aa;

    --error-bg-active: #ffd0d0;
    --error-bg: #ffe4e4;
    --error-border: #cc4444;
    --error-text: #bc0404;

    --success-bg-active: #d0ffd0;
    --success-bg: #4c42;
    --success-border: #4c4;
    --success-text: #1a1;

    --warning-bg-active: #ffedb3;
    --warning-bg: #ffbb0033;
    --warning-border: #cf9900;
    --warning-text: #8e6d00;

    --color-shadow-inset: #0002;
    --bevel-light: #fffc;
    --bevel-dark: #0002;
    /*--font-theme: "BIZ UDPGothic", sans-serif;*/
    --font-theme: "Noto Sans JP", sans-serif;
    --mono-font: "M PLUS 1 Code";

    --solar-yellow:    #b58900;
    --solar-orange:    #cb4b16;
    --solar-red:       #dc322f;
    --solar-magenta:   #d33682;
    --solar-violet:    #6c71c4;
    --solar-blue:      #268bd2;
    --solar-cyan:      #2aa198;
    --aurora-1:        #bf616a;
    --aurora-2:        #d08770;
    --aurora-3:        #ebcb8b;
    --aurora-4:        #a3be8c;
    --aurora-5:        #b48ead;
    --frost-1:         #8fbcbb;
    --frost-2:         #88c0d0;
    --frost-3:         #81a1c1;
    --frost-4:         #5e81ac;
    --monokailight-accent1: #ce4770;
    --monokailight-accent2: #d4572b;
    --monokailight-accent3: #b16803;
    --monokailight-accent4: #218871;
    --monokailight-accent5: #2473b6;
    --monokailight-accent6: #6851a2;

    --spectral-bg-1: #d61051;
    --spectral-bg-2: #00a569;
    --spectral-bg-3: #1b94ea;
    --spectral-bg-4: #b26fc8;
    --spectral-fg: #fff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="parchment"]):not([data-theme="hacker"]):not([data-theme="sakura"]):not([data-theme="neon"]) {
        /* DARK MODE VARIABLES */
        color-scheme: dark;
        --bg-surface: #111;
        --bg-primary: #222;
        --bg-secondary: #333;
        --border-secondary: #444;
        --border-primary: #555;
        --border-strong: #9999a6;
        --medium-gray: #999;
        --color-text: #eee;
        --color-text-button: #eee;

        --primary-bg: #236;
        --primary-bg-active: #125;
        --primary-border: #56b;
        --primary: #58f;
        --primary-light: #a6bfff;

        --error-bg-active: #400;
        --error-bg: #600;
        --error-border: #982121;
        --error-text: #ea3d3d;

        --success-bg-active: #040;
        --success-bg: #0f02;
        --success-border: #0f04;
        --success-text: #0f0b;

        --warning-bg-active: #ffedb3;
        --warning-bg: #4c3c00;
        --warning-border: #bc8f00;
        --warning-text: #b58900;

        --color-shadow-inset: #0008;
        --bevel-light: #fff3;
        --bevel-dark: #0008;

        --spectral-bg-1: #b51010;
        --spectral-bg-2: #17854a;
        --spectral-bg-3: #5353ba;
        --spectral-bg-4: #9f4b9f;
        --spectral-fg: #fff;
    }
}

:root[data-theme="parchment"] {
    color-scheme: light;
    --bg-surface: #fdf6e3;
    --bg-primary: #f5ede0;
    --bg-secondary: #ede3cf;
    --border-secondary: #d4c4a0;
    --border-primary: #b8a070;
    --border-strong: #73603e;
    --medium-gray: #7a6050;
    --color-text: #3d2b1f;
    --color-text-button: #4a3628;
    --primary-bg: #e8d8b0;
    --primary-bg-active: #d8c898;
    --primary-border: #911616;
    --primary: #d30;
    --primary-light: #5a1010;
    --error-bg-active: #ba0000;
    --error-bg: #c65f5f;
    --error-border: #8f0000;
    --error-text: #ffffff;
    --success-bg-active: #d0e8c0;
    --success-bg: #0a04;
    --success-border: #0a0;
    --success-text: #080;
    --color-shadow-inset: #0001;
    --bevel-light: #fff0;
    --bevel-dark: #0000;
    --font-theme: "BIZ UDPMincho", serif;

    --spectral-bg-1: #8f0000;
    --spectral-bg-2: #778e00;
    --spectral-bg-3: #0f639c;
    --spectral-bg-4: #9963a1;
    --spectral-fg: #fff;
}

:root[data-theme="sakura"] {
    color-scheme: light;
    --bg-surface: #fff0f5;
    --bg-primary: #ffe4ef;
    --bg-secondary: #ffd0e4;
    --border-secondary: #ffb3cc;
    --border-primary: #ff80aa;
    --border-strong: #8f1042;
    --medium-gray: #b6164d;
    --color-text: #5c0028;
    --color-text-button: #7a0033;

    --primary-bg: #ffb6db;
    --primary-bg-active: #ffcce4;
    --primary-border: #e8006a;
    --primary: #ff0074;
    --primary-light: #b8005a;

    --error-bg-active: #ffd0d0;
    --error-bg: #ffb9b9;
    --error-border: #cc4444;
    --error-text: #aa2222;

    --success-bg-active: #d0f0e0;
    --success-bg: #d2f8e2;
    --success-border: #44aa66;
    --success-text: #1a6741;

    --color-shadow-inset: #ff006622;
    --bevel-light: #fffa;
    --bevel-dark: #ff0066aa;
    --font-theme: "Zen Maru Gothic", sans-serif;

    --spectral-bg-1: #ff247b;
    --spectral-bg-2: #34bc77;
    --spectral-bg-3: #6db2ea;
    --spectral-bg-4: #a07fb6;
    --spectral-fg: #fff;
}

:root[data-theme="neon"] {
    color-scheme: dark;
    --bg-surface: #18003a;
    --bg-primary: #0d0020;
    --bg-secondary: #220045;
    --border-secondary: #44006a;
    --border-primary: #7700bb;
    --border-strong: #a52eec;
    --medium-gray: #bb88dd;
    --color-text: #eed8ff;
    --color-text-button: #ffccff;
    --primary-bg: #3a0055;
    --primary-bg-active: #4a0070;
    --primary-border: #ff0099;
    --primary: #ff0099;
    --primary-light: #ff66cc;
    --error-bg-active: #440010;
    --error-bg: #330008;
    --error-border: #ff0044;
    --error-text: #ff4488;
    --success-bg-active: #003344;
    --success-bg: #002233;
    --success-border: #00ffee;
    --success-text: #00eedd;
    --color-shadow-inset: #ff009933;
    --bevel-light: #ff009922;
    --bevel-dark: #00000088;
    --font-theme: "Orbitron", "M PLUS 1 Code", sans-serif;

    --spectral-bg-1: #e80089;
    --spectral-bg-2: #007aa3;
    --spectral-bg-3: #8517c3;
    --spectral-bg-4: rgb(140, 134, 147);
    --spectral-fg: #fff;
}

:root[data-theme="neon"] h2,
:root[data-theme="neon"] h3,
:root[data-theme="neon"] nav strong {
    text-shadow: 0 0 8px var(--primary), 0 0 24px color-mix(in srgb, var(--primary) 50%, transparent);
}

:root[data-theme="neon"] button:not(.secondary):not(.delete) {
    box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 60%, transparent),
    inset 0 1px 0 var(--bevel-light), inset 0 -1px 0 var(--bevel-dark);
}

:root[data-theme="neon"] input[type=checkbox]:checked {
    box-shadow: 0 0 8px color-mix(in srgb, var(--primary) 70%, transparent);
}

:root[data-theme="hacker"] {
    color-scheme: dark;
    --bg-surface: #000;
    --bg-primary: #111;
    --bg-secondary: #133;
    --border-secondary: #252;
    --border-primary: #272;
    --border-strong: #199719;
    --medium-gray: #3c3;
    --color-text: #0f0;
    --color-text-button: #dd0;

    --primary-bg: #0a1a0a;
    --primary-bg-active: #0f2a0f;
    --primary-border: #00aa00;
    --primary: #0f0;
    --primary-light: #3f3;

    --error-bg-active: #300;
    --error-bg: #400;
    --error-border: #f00;
    --error-text: #f44;

    --success-bg-active: #030;
    --success-bg: #020;
    --success-border: #0f0;
    --success-text: #0f0;

    --warning-bg-active: #ff08;
    --warning-bg: #ff02;
    --warning-border: #ff08;
    --warning-text: #ff0c;

    --color-shadow-inset: #0f44;
    --bevel-light: #0f03;
    --bevel-dark: #0f03;
    --font-theme: "M PLUS 1 Code", monospace;

    --spectral-bg-1: #ff4747;
    --spectral-bg-2: #e4d200;
    --spectral-bg-3: #00b314;
    --spectral-bg-4: #00c0da;
    --spectral-fg: #000;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg-surface: #111;
    --bg-primary: #222;
    --bg-secondary: #333;
    --border-secondary: #444;
    --border-primary: #555;
    --border-strong: #bdbdbd;
    --medium-gray: #999;
    --color-text: #eee;
    --color-text-button: #eee;
    --primary-bg: #236;
    --primary-bg-active: #125;
    --primary-border: #56b;
    --primary: #58f;
    --primary-light: #a6bfff;
    --error-bg-active: #400;
    --error-bg: #600;
    --error-border: #982121;
    --error-text: #ea3d3d;
    --success-bg-active: #040;
    --success-bg: #0f02;
    --success-border: #0f04;
    --success-text: #0f0b;

    --warning-bg-active: #ffedb3;
    --warning-bg: #4c3c00;
    --warning-border: #bc8f00;
    --warning-text: #b58900;

    --color-shadow-inset: #0008;
    --bevel-light: #fff3;
    --bevel-dark: #0008;

    --spectral-bg-1: #b51010;
    --spectral-bg-2: #17854a;
    --spectral-bg-3: #5353ba;
    --spectral-bg-4: #9f4b9f;
    --spectral-fg: #fff;
}

body {
    background: var(--bg-primary);
    overflow: auto;
    accent-color: var(--primary);
    margin: 0;
}

body, input, textarea, button, select {
    font-family: var(--font-theme);
    line-height: 1.5;
    color: var(--color-text);
}

header, footer {
    margin-inline: auto;
    padding: 20px;
    padding-block-start: 20px;
    padding-block-end: 0;
    max-inline-size: var(--max-width);
    box-sizing: border-box;
    hgroup {
        h1 {
            margin-block-start: 0;
            margin-block-end: 0;
            img {
                display: inline-block;
                border: none;
                box-shadow: none;
                margin-inline-end: 0;
            }
        }
        p {
            margin-block-start: 0;
            margin-block-end: 16px;
            text-wrap: balance;
            opacity: 0.8;
        }
    }
}

nav {
    align-self: stretch;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 10px;
    background: var(--bg-secondary);
    padding-inline: 3px;
    padding-block: 3px;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    box-shadow: 0 3px 10px var(--color-shadow-inset);
    a {
        line-height: 1;
        display: block;
        color: var(--primary);
        text-decoration: none;
        padding-inline: 8px;
        padding-block: 8px;
        border-radius: 7px;

        &:hover, &:focus-visible {
            color: var(--primary-light);
            background: var(--color-shadow-inset);
            text-decoration: none;
        }
    }

    ul {
        list-style: none;
        display: flex;
        flex-direction: row;
        gap: 5px;
        justify-content: end;
        flex-wrap: wrap;
        flex-grow: 1;
        line-height: 1;
        margin: 0;
        padding: 0;
        li {
            margin: 0;
            padding: 0;
            margin-block-end: 0;
        }
    }
    form {
        margin: 0;
    }
}

main {
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    gap: 20px;
    max-inline-size: var(--max-width);
    overflow-x: auto;
}

footer {
    margin-block-start: auto;
}

hr {
    inline-size: 100%;
    border: none;
    border-block-start: 1px solid var(--border-primary);
}

form {
    margin-block-start: 16px;
    margin-block-end: 20px;
}
label {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-block-end: 16px;
    line-height: calc(1rem + 8px);
    input, select, textarea {
        width: 0;
        flex-grow: 1;
        flex-shrink: 1;
        min-width: 0;
        margin: 0;
    }
    input[type=checkbox], input[type=radio] {
        margin: 0;
    }
}
label[for] {
    flex-direction: column;
    align-items: start;
    margin-block-end: 8px;
}


input, textarea, select {
    font-size: 1rem;
    padding: 4px;
    padding-inline: 10px;
    box-sizing: border-box;
    height: auto;
    width: 100%;
    max-width: none;
    display: block;
    min-width: 0;
    margin: 0;
    margin-block-end: 16px;
    flex-grow: 1;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-surface);
    box-shadow: inset 0 0 10px var(--color-shadow-inset);

    &:read-only, &:disabled {
        background: var(--bg-primary);
        box-shadow: none;
        border-color: var(--border-secondary);
        &:hover:not(:disabled) {
            box-shadow: none;
            /*box-shadow: inset 0 0 10px var(--color-shadow-inset);*/
            /*border-color: var(--border-primary);*/
        }
    }

    &:disabled {
        color: var(--border-primary);
    }

    &::placeholder {
        color: var(--border-primary);
    }

    &:hover:not(:disabled):not(:read-only) {
        border-color: var(--primary-border);
        &::placeholder {
            color: var(--border-secondary);
        }
    }

    &:focus-visible {
        border-color: var(--primary-border);
        outline: none;
    }
}

input[type=checkbox] {
    display: inline-block;
    appearance: none;
    flex-grow: 0;
    flex-shrink: 0;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: 4px;
    margin-inline-end: 4px;
    cursor: pointer;
    border: 1px solid var(--primary-border);
    border-radius: 6px;
    background: var(--bg-surface);
    transition: background 0.15s;
    position: relative;

    &:hover:not(:disabled) {
        background: var(--bg-secondary);
        border-color: var(--primary-border);
    }

    &:checked {
        background: var(--primary-bg);
        border-color: var(--primary-border);
        box-shadow: inset 0 +2px var(--bevel-light), inset 0 -2px var(--bevel-dark);

        &:hover {
            background: var(--primary-bg);
        }
        &::after {
            content: '';
            display: block;
            inline-size: 100%;
            block-size: 100%;
            background-color: var(--color-text-button);
            mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='1.5,5.5 4.5,8.5 10.5,1.5' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
            -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='1.5,5.5 4.5,8.5 10.5,1.5' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
            mask-repeat: no-repeat;
            mask-position: center;
            mask-size: 85%;
        }
    }

    &:disabled {
        opacity: 0.45;
        background: var(--bg-primary);
        border-color: var(--border-primary);
        cursor: default;
    }

    &:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }
}
input[type=radio] {
    flex-grow: 0;
    flex-shrink: 0;
    inline-size: 1.25rem;
    block-size: 1.25rem;
}

textarea {
    field-sizing: content;
    overflow: hidden;
    overflow-block: auto;
    resize: none;
}

[role=group] {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin-inline-end: -1px;
    input, select, button, a.buttonLink {
        margin-inline-end: -1px;
        margin-block-end: 0;
        &:not(:last-child) {
            border-end-end-radius: 0;
            border-start-end-radius: 0;
        }
        &:not(:first-child) {
            border-end-start-radius: 0;
            border-start-start-radius: 0;
        }
    }
    select {
        inline-size: auto;
        min-inline-size: 0;
        max-inline-size: none;
        flex-grow: 1;
    }
    button, input[type=submit] {
        flex-grow: 0.1;
    }
}

blockquote {
    border-inline-start: 4px solid var(--border-secondary);
    padding-inline-start: 10px;
    margin-inline-start: 0;
    margin-inline-end: 0;
}

button, a.buttonLink, input[type=submit] {
    color: var(--color-text-button);
    font-size: 1rem;
    padding: 4px;
    padding-inline: 10px;
    box-sizing: content-box;
    height: auto;
    width: auto;
    background: var(--primary-bg);
    border-radius: 8px;
    border: 1px solid var(--primary-border);
    cursor: pointer;
    text-decoration: none;
    box-shadow: inset 0 +1px 0 var(--bevel-light), inset 0 -1px 0 var(--bevel-dark);
    text-wrap: nowrap;
    margin-inline-end: 10px;
    margin-block-end: 10px;
    &:last-child {
        margin-inline-end: 0;
    }

    &:hover {
        text-decoration: none;
        background: var(--primary-bg-active);
        box-shadow: inset 0 -1px 0 var(--bevel-light), inset 0 +1px 0 var(--bevel-dark);
    }

    &:active {
        background: var(--bg-primary);
        border-color: var(--border-primary);
    }

    &.secondary {
        background: var(--bg-secondary);
        border-color: var(--border-primary);

        &:hover {
            background: var(--bg-primary);
            border-color: var(--border-primary);
        }

        &:active {
            border-color: var(--primary-border);
        }
    }

    &.delete {
        background: var(--error-bg);
        border-color: var(--error-border);
        color: var(--error-text);

        &:hover {
            background: var(--error-bg-active);
        }

        &:active {
            color: var(--color-text-button);
            background: var(--bg-secondary);
            border-color: var(--border-primary);
        }
    }

    &:focus-visible {
        outline: none;
        border: 1px solid var(--primary);
    }

    &:disabled {
        color: var(--border-primary);
        box-shadow: none;
        background: var(--bg-primary);
        border-color: var(--border-primary);
        cursor: default;
    }
}

select {
    display: inline-block;
    block-size: 34px;
}

fieldset:not([role=group]) {
    border-radius: 8px;
    margin-block-end: 16px;
    padding-block: 8px;
    :last-child {
        margin-block-end: 0;
    }
    legend {
        /*font-weight: bold;*/
        /*font-size: 1.2rem;*/
        /*margin-block-end: 10px;*/
    }
}
fieldset[role=group] {
    border: none;
    padding: 0;
    margin: 0;
}

article {
    overflow: hidden;
    background: var(--bg-primary);
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid var(--border-secondary);
    box-shadow: 0 3px 10px var(--color-shadow-inset);
    margin-block-end: 20px;
    &:last-child {
        margin-block-end: 0;
    }

    header, footer {
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-secondary);
        margin: 0; padding: 8px 20px;
        margin-inline:-20px;
    }
    header {
        margin-top:-10px;
        font-weight: bold;
    }
    footer {
        border-top: 1px solid var(--border-secondary);
        margin-bottom:-10px;
    }
}

small {
    color: var(--medium-gray);
}

mark {
    display: inline-block;
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    color: var(--error-text);
    padding: 5px;
    padding-inline: 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    margin: 6px;
    &.success {
        background: var(--success-bg);
        border-color: var(--success-border);
        color: var(--success-text);
    }
    &.primary {
        background: var(--primary-bg);
        border-color: var(--primary-border);
        color: var(--color-text-button);
    }
    &.warning {
        background: var(--warning-bg);
        border-color: var(--warning-border);
        color: var(--warning-text);
    }
    &.animate {
        animation: blink 2s infinite ease-in-out;
    }
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* TYPOGRAPHY */
article {
    h1, h2, h3, h4, h5, h6 {
        &:first-child {
            margin-block-start: 0;
        }
        margin-block-end: 8px;
        /*border-block-end: 1px solid var(--border-secondary);*/
    }
    h1 {
       font-size: 2.0rem;
       font-weight: bold;
    }
    h2 {
       margin-top: 16px;
       font-weight: normal;
       font-size: 1.9rem;
    }
    h3 {
       font-weight: bold;
       margin-top: 16px;
       font-size: 1.5rem;
    }
    h4 {
       font-weight: bold;
       margin-top: 16px;
       font-size: 1.35rem;
    }
    h5 {
       margin-top: 16px;
       font-size: 1.2rem;
    }
    h6 {
       margin-top: 16px;
       font-weight: 900;
       font-size: 1rem;
    }
}

img {
    max-inline-size: 100%;
    border-radius: 10px;
    border: 1px solid var(--border-secondary);
    box-shadow: 0 3px 10px var(--color-shadow-inset);
}

a {
    color: var(--primary);
    text-decoration: none;
    text-underline-offset: 2px;
    &:hover {
        text-decoration: underline;
    }
    &:focus-visible {
        outline: 2px solid var(--primary);
        outline-offset: 2px;
    }
}

abbr {
    cursor: help;
}

ul, ol {
    line-height: 1.5;
}
ul {
    list-style: disc;
    padding-inline-start: 30px;
    li {
        ul {
            list-style: circle;
            padding-inline-start: 20px;
        }
    }
}
ol {
    list-style: decimal;
    padding-inline-start: 30px;
    ol {
        list-style: lower-alpha;
    }
}
li {
    margin-block-end: 4px;
}
dl {
    dt{
        font-weight: bold;
        margin-block-start: 4px;
    }
}

details {
    &[open] {
        border: 1px solid var(--border-secondary);
        border-radius: 8px;
        padding: 4px 8px;
        summary {
            margin: -4px -8px;
        }
    }
    summary {
        cursor: pointer;
        user-select: none;
        border-radius: 8px;
        padding: 4px 8px;
        &:hover {
            background: var(--bg-secondary);
        }
        &:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }
    }
}

code {
    background: var(--bg-surface);
    padding: 4px;
    padding-inline: 6px;
    margin-inline: 2px;
    border-radius: 5px;
    border: 1px solid var(--border-secondary);
}

pre {
    background: var(--bg-surface);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border-secondary);
    box-shadow: inset 0 0 10px var(--color-shadow-inset);
    overflow-x: auto;
    code {
        background: none;
        padding: 0;
        border: none;
    }
}
pre, code {
    font-family: var(--mono-font), monospace;
    font-size: 1rem;
}

kbd {
    background: var(--bg-secondary);
    padding: 4px;
    padding-inline: 6px;
    margin-inline: 2px;
    border-radius: 5px;
    box-shadow: inset 0 +1px 0 var(--bevel-light), inset 0 -1px 0 var(--bevel-dark);
}

samp {
    background: var(--bg-surface);
    padding: 4px;
    padding-inline: 6px;
    margin-inline: 2px;
    border-radius: 5px;
}

p {
    flex-grow: 0;
    margin-block: 8px;
    margin-block-end: 8px;
}

table {
    border-collapse: collapse;
    margin-block-end: 16px;
    caption {
        margin-block-end: 0.2rem;
        margin-block-start: 0.4rem;
    }
    td, th {
        padding: 4px;
        padding-inline: 10px;
        border-bottom: 1px solid var(--border-primary);
    }
    tbody tr:last-child td {
        border-bottom-width: 2px;
    }
    thead th {
        border-width: 2px;
        text-align: left;
        font-weight: bold;
    }
    tfoot {
        border-block-start: 2px solid var(--border-primary);
        th {
            border: none;
            text-align: left;
        }
    }
}

.overflow {
    overflow: auto;
}

[aria-busy=true] {
    &::after {
        content: '';
        display: inline-block;
        width: 0.6rem;
        height: 0.6rem;
        opacity: 0.5;
        border: 0.2rem solid var(--color-text-button);
        border-radius: 100%;
        margin-inline-start: 0.5rem;
        border-color: var(--color-text-button) var(--color-text-button) var(--color-text-button) transparent;
        animation: spin 1s linear infinite;
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}