@layer base {
    /* Der Grundausgleich. `margin` und `padding` standen bis Gruppe 1 in
       theme.css und damit AUSSERHALB jeder Schicht — sie schlugen jede
       @layer-Regel, unabhaengig von der Ladereihenfolge. Gemessen: die
       rechte Leiste bekam 0 statt 12 px Innenabstand, das Modellabzeichen
       0 statt `auto` als Aussenabstand, und kein Feld aus components.css
       hatte je den Innenabstand, der dort steht. Hier, in `@layer base`,
       wirkt derselbe Ausgleich — und laesst sich ueberschreiben. */
    *,
    *::before,
    *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    html {
        min-height: 100%;
        color-scheme: dark;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    /* Die hellen Rollen stehen in tokens.css. `color-scheme` ist keine
       Rolle, sondern eine Angabe an den Browser: er faerbt damit
       Bildlaufleisten, Auswahlfelder und das Standard-Chrome eines
       Dialogs. Ohne sie bleiben sie im hellen Modus dunkel. */
    html[data-theme="light"] {
        color-scheme: light;
    }

    body {
        min-height: 100vh;
        margin: 0;
        background: var(--surface-canvas);
        color: var(--ink-primary);
        font-family: var(--font-ui);
        font-size: var(--text-base);
        font-weight: var(--font-weight-regular);
        line-height: var(--line-height-prose);
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }

    button,
    input,
    optgroup,
    select,
    textarea {
        margin: 0;
        color: inherit;
        font: inherit;
    }

    button,
    select {
        text-transform: none;
    }

    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
        cursor: pointer;
    }

    button:disabled,
    input:disabled,
    select:disabled,
    textarea:disabled {
        cursor: not-allowed;
    }

    textarea {
        resize: vertical;
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--ink-muted);
        opacity: 1;
    }

    img,
    picture,
    svg,
    canvas,
    video {
        display: block;
        max-width: 100%;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-block: 0;
        color: var(--ink-primary);
        font-family: var(--font-ui);
        font-weight: var(--font-weight-medium);
        line-height: 1.25;
    }

    p {
        margin-block: 0;
    }

    a {
        color: inherit;
        text-decoration-thickness: from-font;
        text-underline-offset: 0.16em;
    }

    code,
    kbd,
    samp,
    pre,
    time,
    input[type="number"],
    .data-value,
    [data-value] {
        font-family: var(--font-data);
        font-variant-numeric: tabular-nums;
    }

    body .chat-stream {
        width: 100%;
        max-inline-size: var(--measure-prose);
    }

    ::selection {
        background: var(--accent-subtle);
        color: var(--ink-primary);
    }

    :focus-visible {
        outline: 2px solid var(--line-focus);
        outline-offset: 2px;
    }

    @media (prefers-reduced-motion: reduce) {
        html:focus-within {
            scroll-behavior: auto;
        }

        /* Ladeanzeigen sind keine Zier: sie sagen, dass gearbeitet wird.
           Wer Bewegung reduziert, will trotzdem wissen, ob das Programm
           haengt. Deshalb bleiben sie und ihre Kinder ausgenommen — alles
           andere steht still. */
        *:not(:where(.ui-spinner, .hotbar-thinking-spinner, [aria-busy="true"], [aria-busy="true"] *)),
        *:not(:where(.ui-spinner, .hotbar-thinking-spinner, [aria-busy="true"], [aria-busy="true"] *))::before,
        *:not(:where(.ui-spinner, .hotbar-thinking-spinner, [aria-busy="true"], [aria-busy="true"] *))::after {
            animation-name: none !important;
            scroll-behavior: auto !important;
            transition-delay: 0ms !important;
            transition-duration: var(--dur-instant) !important;
            transition-property: opacity !important;
        }

        .ui-spinner,
        .hotbar-thinking-spinner {
            animation-duration: 1600ms !important;
        }
    }
}