body {
    margin: 0;

    /**
     * https://developer.apple.com/design/
     * human-interface-guidelines/foundations/color
     */
    --color-blue: rgb(0, 122, 255);
    --color-green: rgb(52, 199, 89);
    --color-indigo: rgb(88, 86, 214);
    --color-orange: rgb(255, 149, 0);
    --color-pink: rgb(255, 45, 85);
    --color-purple: rgb(175, 82, 222);
    --color-red: rgb(255, 59, 48);
    --color-teal: rgb(90, 200, 250);
    --color-yellow: rgb(255, 204, 0);
    --color-gray-min: rgb(0, 0, 0);
    --color-gray: rgb(142, 142, 147);
    --color-gray2: rgb(174, 174, 178);
    --color-gray3: rgb(199, 199, 204);
    --color-gray4: rgb(209, 209, 214);
    --color-gray5: rgb(229, 229, 234);
    --color-gray6: rgb(242, 242, 247);
    --color-gray-max: rgb(255, 255, 255);
    
    --color-text: var(--color-gray-min);
    --color-background: var(--color-gray6);
    --color-button-border: var(--color-gray4);
    --color-button-background: var(--color-gray-max);
    --color-button-sending: var(--color-blue);
    --color-code-background: var(--color-gray-max);
    --color-output-backdrop: rgba(0, 0, 0, 0.4);
    --color-output-border: var(--color-gray);

    background-color: var(--color-background);
    color: var(--color-text);
    font-family: system-ui;
    font-size: 18px;
    line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
    body {
        --color-blue: rgb(10, 132, 255);
        --color-green: rgb(48, 209, 88);
        --color-indigo: rgb(94, 92, 230);
        --color-orange: rgb(255, 159, 10);
        --color-pink: rgb(255, 55, 95);
        --color-purple: rgb(191, 90, 242);
        --color-red: rgb(255, 69, 58);
        --color-teal: rgb(100, 210, 255);
        --color-yellow: rgb(255, 214, 10);
        --color-gray-min: rgb(255, 255, 255);
        --color-gray: rgb(142, 142, 147);
        --color-gray2: rgb(99, 99, 102);
        --color-gray3: rgb(72, 72, 74);
        --color-gray4: rgb(58, 58, 60);
        --color-gray5: rgb(44, 44, 46);
        --color-gray6: rgb(28, 28, 30);
        --color-gray-max: rgb(0, 0, 0);
    }
}

h1 { font-size: 2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.8rem; }
h6 { font-size: 0.5rem; }

h1, h2, h3, h4, h5, h6 {
    margin: 1rem 0;
    padding: 0;
}

#root > .panel,
.config {
    margin: 0.5rem;
}

.panel-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
    grid-auto-flow: row dense;
    gap: 1rem;
}

.panel-buttons > select {
    appearance: none;
    text-wrap-mode: wrap;
    text-align: center;
    text-align-last: center;
}

button,
.panel-buttons > select {
    min-height: 2rem;
    padding: 3px 6px;
    border: 1px solid var(--color-button-border);

    background-color: var(--color-button-background);
    border-radius: 0.5rem;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;  
    -moz-user-select: none;    
    -ms-user-select: none;      
}

button:has(> :is(label,a)) {
    display: flex;
    align-items: stretch;
    padding: 0;
}

button > :is(label, a) {
    flex: 1;
    align-content: center;

    cursor: pointer;
    color: var(--color-text);
    text-decoration: none;
}

button.is-sending,
.panel-buttons > select.is-sending {
    border-color: var(--color-button-sending);
}

button[disabled],
.panel-buttons > select[disabled] {
    color: var(--color-button-border);
    background-color: var(--color-background);
}

.config input[type=file] {
    display: none;
}

.code-block {
    padding: 0.5rem;
    font-size: 1rem;
    background-color: var(--color-code-background);
    color: var(--color-gray2);
    font-family: ui-monospace, monospace;
    white-space: pre;
    word-wrap: nowrap;
    overflow-x: scroll;
}

body.is-process .config {
    display: none;
}


/* ## Response Error List */

.errors:not(:has(.errors-list > li)) {
    display: none;
}

.errors-list {
    list-style: none;
    margin: 0;
    padding: 0;

    display: grid;
    grid-template-columns: max-content max-content 1fr;
    gap: 1rem;
}

.errors-list > li {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / 4;
    padding: 0.5rem;
    border: 1px solid var(--color-red);
    border-radius: 0.5rem;
    background-color: color-mix(
        in oklab,
        var(--color-red) 20%,
        var(--color-background) 80%
    );
}

.errors-list > li,
.errors-list > li > div {
    min-width: 0;
}

.errors-message span {
    word-break: break-word;
}

.errors-message details {
    display: contents;
}

.errors-message details summary {
    display: inline-block;
    margin: 0 0.5rem;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--color-button-border);
    border-radius: 0.5rem;
    background-color: var(--color-button-background);
    cursor: pointer;
}


/* ## Generic Overlay Styles */

dialog {
    display: none;
    margin: 0;
    border: none;
    padding: 0;
    width: 100dvw;
    max-width: none;
    height: 100dvh;
    max-height: none;

    position: fixed;
    left: 0;
    top: 0;
    z-index: 1001;

    background-color: transparent;
    opacity: 0;
    transform: scale(0.8);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease,
        display 0.5s allow-discrete;
}

dialog > * {
    box-sizing: border-box;
    width: 80dvw;
    height: 80dvh;
    margin: auto;
}

@media (max-width: 600px) {
    dialog {
        width: 100dvw;
        height: 100dvh;
    }
    dialog > * {
        width: 100dvw;
        height: 90dvh;
        margin: 10dvh 0 0 0;
    }
}

dialog[open] {
    display: grid;
    opacity: 1;
    transform: scale(1);
}
@starting-style {
    dialog[open] {
        opacity: 0;
        transform: scale(0.8);
    }
}

dialog::backdrop {
    display: none;
}

.dialog-backdrop {
    display: none;
    margin: 0;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;

    opacity: 0;
    backdrop-filter: blur(8px);
    background-color: var(--color-output-backdrop);
    transition-behavior: allow-discrete;
    transition: opacity 0.5s ease, display 0.5s allow-discrete;
}

body:has(dialog[open]) .dialog-backdrop {
    display: block;
    opacity: 1;

}
@starting-style {
    body:has(dialog[open]) .dialog-backdrop {
        opacity: 0;
    }
}


/* ## Output Overlay */

.output-visible {
    display: grid;
    grid-template-rows: max-content 1fr;

    background-color: var(--color-background);
    border: 1px solid var(--color-output-border);
    border-radius: 0.5rem;
}

.output-controls {
    padding: 1rem;
}

.output-content {
    border-radius: 0 0 0.5rem 0.5rem;
}


/* ## Input Overlay */

.input-visible {
    display: grid;
    grid-template-rows: 1fr max-content;

    background-color: var(--color-background);
    border: 1px solid var(--color-output-border);
    border-radius: 0.5rem;
}

.input-controls {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
}

.input-key {
    display: inline-block;
    margin: 0 0.25rem;
    border: 1px solid var(--color-button-border);
    padding: 0 0.25rem;
    font-size: 1rem;
    background-color: var(--color-code-background);
    color: var(--color-gray2);
    font-family: ui-monospace, monospace;
    border-radius: 0.25rem;
}

.input-info {
    display: inline;
}

.input-inputs {
    overflow-y: scroll;
    border-radius: 0.5rem 0.5rem 0 0;
}

.input-inputs > ul {
    display: grid;
    grid-template-columns: fit-content(50%) 1fr;
    gap: 1rem;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
}

.input-inputs > ul > li {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: start;
    justify-items: start;
}

.input-inputs > ul > li:not(:first-child) {
    margin-top: 0.5rem;
    border-top: 1px solid var(--color-button-border);
    padding-top: 0.5rem;
}

.input-inputs input {
    border: 1px solid var(--color-button-border);
    padding: 0.5rem;
    width: 100%;

    box-sizing: border-box;
    border-radius: 0.5rem;
    font-size: 1rem;
}


/* ## Process Output Window */

.process .process-out,
.process .process-error {
    padding: 1rem;
    font-family: ui-monospace, monospace;
    white-space: pre;
    word-wrap: nowrap;
}
.process .process-error {
    color: var(--color-red);
}
.process .indicator-loading,
.process .indicator-error {
    display: none;
    font-family: ui-monospace, monospace;
    margin: 1rem 0 0 0;
    width: 100dvw;
    justify-content: center;
    color: var(--color-blue);
}

.process .indicator-error {
    color: var(--color-red);
}

.process.is-loading .indicator-loading,
.process.is-error .indicator-error {
    display: flex;
}