:root {
    color-scheme: light dark;
    
    /* grays */
    --A: #000;
    --AAAB: #2B2B2B;
    --AB: #555;
    --BBBA: #7F7F7F;
    --B: #AAA;
    --BBBC: #BFBFBF;
    --BC: #D4D4D4;
    --CCCB: #EAEAEA;
    --C: #FFF;
    --CCCA: #BFBFBF;
    --AC: #7F7F7F;
    --AAAC: #404040;

    /* blues */
    --D: #68B;
    --AD: #33445E;
    --AAAD: #1A222F;
    --BD: #8899B3;
    --BBBD: #99A2AE;
    --CD: #B3C3DD;
    --CCCD: #D9E1EE;
    --DDDA: #4D668C;
    --DDDB: #7791B7;
    --DDDC: #8CA6CC;

    /* primary colors */
    --shadow-color: var(--A);
    --midground-color: var(--B);
    --highlight-color: var(--C);
    --accent-color: var(--D);

    /* derived colors 1/2 */
    --background-color: var(--AB);
    --foreground-color: var(--BBBC);
    --accent-background-color: var(--AD);
    --accent-faint-color: var(--BD);
    --accent-foreground-color: var(--CD);
    --shadow-highlight-color: var(--AC);
/* 
    --background-color: color-mix(in srgb, var(--A), var(--B));
    --foreground-color: color-mix(in srgb, var(--A), var(--C));
    --accent-background-color: color-mix(in srgb, var(--A), var(--D));
    --accent-faint-color: color-mix(in srgb, var(--B), var(--D));
    --accent-foreground-color: color-mix(in srgb, var(--C), var(--D));
    --shadow-highlight-color: color-mix(in srgb, var(--A), var(--C)); */

    /*             
    0
    170
    255
    102 136 187
     */




    -webkit-text-size-adjust: none;

    font-family: system-ui, sans-serif;
    background-color: var(--midground-color);
    color: var(--shadow-color);
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
}

@supports (--test: color-mix(in srgb, red, blue)) {
    --test: 3;  /* quirk-fix for Safari 15 */

    :root {
        --AAAB: color-mix(in srgb, var(--A) 75%, var(--B) 25%);
        --AB: color-mix(in srgb, var(--A), var(--B));
        --BBBA: color-mix(in srgb, var(--B) 75%, var(--A) 25%);
        --BBBC: color-mix(in srgb, var(--B) 75%, var(--C) 25%);
        --BC: color-mix(in srgb, var(--B), var(--C));
        --CCCB: color-mix(in srgb, var(--C) 75%, var(--B) 25%);
        --CCCA: color-mix(in srgb, var(--C) 75%, var(--A) 25%);
        --AC: color-mix(in srgb, var(--A), var(--C));
        --AAAC: #color-mix(in srgb, var(--A) 75%, var(--C) 25%);

        --AD: color-mix(in srgb, var(--A), var(--D));
        --AAAD: color-mix(in srgb, var(--A) 75%, var(--D) 25%);
        --BD: color-mix(in srgb, var(--B), var(--D));
        --BBBD: color-mix(in srgb, var(--B) 75%, var(--D) 25%);
        --CD: color-mix(in srgb, var(--C), var(--D));
        --CCCD: color-mix(in srgb, var(--C) 75%, var(--D) 25%);
        --DDDA: color-mix(in srgb, var(--D) 75%, var(--A) 25%);
        --DDDB: color-mix(in srgb, var(--D) 75%, var(--B) 25%);
        --DDDC: color-mix(in srgb, var(--D) 75%, var(--C) 25%);
    }
}



@media (prefers-color-scheme: dark) {
    :root {
        --A: #FFF;
        --B: #555;
        --C: #000;
        /* --shadow-color: #FFF;
        --midground-color: #AAA;
        --highlight-color: #000;
        --accent-color: #68B; */
    
        /* derived colors */
        /* --background-color: #7C7C7C;
        --foreground-color: #DADADA;
        --accent-background-color: #496289;
        --accent-faint-color: #8D9AB3;
        --accent-foreground-color: #C6CFE0;
        --shadow-highlight-color: #BCBCBC; */
    }
}


/* custom elements that not have been loaded */
:not(:defined) {
    /* display: none; */
    background-color: #0ff4;
    display: block;
    outline: 10px solid #f008;
    outline-offset: -5px;
}

:not(:defined)::before {
    content: "Missing";
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

/* html {
    background-color: #000;
    color: #fff;
    height: 100%;
} */

/* * {
    cursor: default;
    user-select: none;
} */



html,
body {
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;

    margin: 0;
    /* color: blue; */
}

@media print {
    html,
    body {
        overflow: auto;
        height: auto;
    }
}


button {
    background-color: var(--midground-color);
    border: 1px solid var(--shadow-color);
    border-top-color: var(--highlight-color);
    border-left-color: var(--highlight-color);
    color: var(--shadow-color);
}

button:active {
    background-color: var(--accent-color);
    border: 1px solid var(--shadow-color);
    border-bottom-color: var(--highlight-color);
    border-right-color: var(--highlight-color);
    color: var(--shadow-color);
}

button:disabled {
    background-color: var(--BBBA);
    border: 1px solid var(--shadow-color);
    border-top-color: var(--CCCA);
    border-left-color: var(--CCCA);
    color: var(--shadow-color);
}


/* input[type="checkbox"] {
    outline: 1px solid red;
    outline-offset: 1px;
} */


/* svg {
    height: 100%;
    min-width: 800px;
    min-height: 480px;
    width: 100%;
} */


/* div {
    background-color: red;
    border-radius: 240px;
    height: 480px;
    width: 480px;
} */


.hidden {
    display: none;
}


ui-h-stack {
    display: flex;
    width: 100%;
}

ui-v-stack {
    display: flex;
    flex-direction: column;
    height: 100%;
}

ui-h-stack > ui-spacer,
ui-v-stack > ui-spacer {
    flex: 1 1 1px;
}

.ui-scroll-view {
    flex: 1 1 1px;
    overflow-y: scroll;
}