:root {
    color-scheme: light dark;
    --color-text: light-dark(#1f2328, #f0f6fc);
    --color-text-muted: light-dark(#59636e, #9198a1);
    --color-background: light-dark(#ffffff, #0d1117);
    --color-surface: light-dark(#f6f8fa, #161b22);
    --color-border: light-dark(#d1d9e0, #3d444d);
    --color-accent: light-dark(#0969da, #4493f8);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: var(--color-text);
    background: var(--color-background);
    font: 16px/1.5 system-ui, sans-serif;
}

.stack {
    display: grid;
    gap: 0.75rem;
}

.app {
    width: min(100%, 720px);
    margin: 0 auto;
    padding: 1rem;

    h1,
    h2,
    p {
        margin: 0;
    }

    > section {
        padding-block-start: 0.5rem;
        border-block-start: 1px solid var(--color-border);
    }

    code {
        display: inline-block;
        padding: 0.125rem 0.375rem;
        border: 1px solid var(--color-border);
        border-radius: 0.4rem;
        background: var(--color-surface);
        font: 0.9em ui-monospace, "Cascadia Code", Consolas, monospace;
    }

    footer {
        color: var(--color-text-muted);
        text-align: center;

        a {
            color: inherit;
        }
    }
}

.field,
.button,
.example {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    font: inherit;

    &:is(.field, .example) {
        color: inherit;
        background: transparent;
    }

    &:is(.button, .example) {
        cursor: pointer;
    }
}

.button {
    background: var(--color-accent);
}

.example {
    text-align: left;
}

details {
    /* Indent content */
    padding: 0 1em;
    border: 1px solid var(--color-border);
    border-radius: 0.5em;

    p {
        margin: 0.5em 0;
    }

    >summary {
        cursor: pointer;
        /* Enlarge clickable area */
        padding: 0.5em 1em;
        /* Align summary with content edges */
        margin: 0 -1em;
    }

    &:open{
        summary {
            /* Nice little separator */
            border-bottom: 1px dashed var(--color-border);
        }

        &::details-content {
            padding: 0.5em 0;
        }
    }
}