@layer start.base.document, start.group;
@layer start.variables {
    @layer default {
        :root {
            --start-font-family-serif: ui-serif, Georgia, "Times New Roman", Times, serif;
            --start-font-family-sans-serif: system-ui, Roboto, "Helvetica Neue", sans-serif;
            --start-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
            --start-font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
            --start-font-family-base: var(--start-font-family-sans-serif), var(--start-font-family-emoji);
            --start-font-family-heading: var(--start-font-family-sans-serif);
            --start-font-family-code: var(--start-font-family-monospace);
            --start-font-family-ui: var(--start-font-family-sans-serif);
            --start-space-base: 1.5rem;
            --start-space-xs: calc(var(--start-space-base)*0.5);
            --start-space-sm: calc(var(--start-space-base)*0.75);
            --start-space-md: var(--start-space-base);
            --start-space-lg: calc(var(--start-space-base)*1.5);
            --start-space-xl: calc(var(--start-space-base)*2);
            --start-selection-bg: hsl(from var(--start-bg-primary, darkslateblue) h calc(s - 30) l);
            --start-bg-muted: var(--start-scheme-bg-muted);
            --start-color-muted: var(--start-scheme-color-muted);
            --start-color-accent: var(--statrt-scheme-color-accent, var(--start-scheme-color-primary, inherit));
            --start-border-color: var(--start-scheme-border-color, currentColor)
        }
    }
}
@layer start.variables.scheme {
    @layer light {
        :root {
            --start-scheme-light-bg-base: #fff;
            --start-scheme-light-bg-muted: #f5f6f7;
            --start-scheme-light-bg-secondary: #e9ecf0;
            --start-scheme-light-color-base: #111827;
            --start-scheme-light-color-muted: #6b7280;
            --start-scheme-light-color-emphasis: #000;
            --start-scheme-light-color-primary: #0b5fff;
            --start-scheme-light-color-info: #1d79e2;
            --start-scheme-light-color-success: #32d296;
            --start-scheme-light-color-warning: #faa05a;
            --start-scheme-light-color-danger: #f0506e;
            --start-scheme-light-border-color: #e5e7eb
        }
        @media (prefers-color-scheme:light) {
            :root:not([data-scheme]) {
                color-scheme: light dark
            }
        }
        :root[data-scheme=light] {
            color-scheme: light
        }
    }
    @layer dark {
        :root {
            --start-scheme-dark-bg-base: #0f1724;
            --start-scheme-dark-bg-muted: hsl(from var(--start-scheme-dark-bg-base) h s calc(l + 10));
            --start-scheme-dark-bg-secondary: hsl(from var(--start-scheme-dark-bg-base) h calc(s - 10) calc(l - 90));
            --start-scheme-dark-color-base: #e6eef8;
            --start-scheme-dark-color-muted: #9aa4b2;
            --start-scheme-dark-color-emphasis: #fff;
            --start-scheme-dark-color-primary: #4da3ff;
            --start-scheme-dark-color-info: #4da3ff;
            --start-scheme-dark-color-success: #38e2ad;
            --start-scheme-dark-color-warning: #ffc072;
            --start-scheme-dark-color-danger: #f68;
            --start-scheme-dark-border-color: #243044
        }
        @media (prefers-color-scheme:dark) {
            :root:not([data-scheme]) {
                color-scheme: dark light
            }
        }
        :root[data-scheme=dark] {
            color-scheme: dark
        }
    }
    :root {
        --start-scheme-bg-base: light-dark(var(--start-scheme-light-bg-base), var(--start-scheme-dark-bg-base));
        --start-scheme-bg-muted: light-dark(var(--start-scheme-light-bg-muted), var(--start-scheme-dark-bg-muted));
        --start-scheme-bg-secondary: light-dark(var(--start-scheme-light-bg-secondary), var(--start-scheme-dark-bg-secondary));
        --start-scheme-color-base: light-dark(var(--start-scheme-light-color-base), var(--start-scheme-dark-color-base));
        --start-scheme-color-muted: light-dark(var(--start-scheme-light-color-muted), var(--start-scheme-dark-color-muted));
        --start-scheme-color-emphasis: light-dark(var(--start-scheme-light-color-emphasis), var(--start-scheme-dark-color-emphasis));
        --start-scheme-color-primary: light-dark(var(--start-scheme-light-color-primary), var(--start-scheme-dark-color-primary));
        --start-scheme-color-info: light-dark(var(--start-scheme-light-color-info), var(--start-scheme-dark-color-info));
        --start-scheme-color-success: light-dark(var(--start-scheme-light-color-success), var(--start-scheme-dark-color-success));
        --start-scheme-color-warning: light-dark(var(--start-scheme-light-color-warning), var(--start-scheme-dark-color-warning));
        --start-scheme-color-danger: light-dark(var(--start-scheme-light-color-danger), var(--start-scheme-dark-color-danger));
        --start-scheme-border-color: light-dark(var(--start-scheme-light-border-color), var(--start-scheme-dark-border-color))
    }
}
@layer start.base.document {
    :root::selection {
        background-color: var(--start-selection-bg, Highlight);
        color: #fff
    }
    ::-moz-selection {
        background-color: var(--start-selection-bg, Highlight);
        color: #fff
    }
    @media (prefers-reduced-motion:no-preference) {
        :root {
            scroll-behavior: smooth
        }
    }
    * {
        box-sizing: border-box
    }
    @supports (-webkit-text-size-adjust:100%) {
        html {
            -webkit-text-size-adjust: 100%
        }
    }
    html {
        background-color: var(--start-scheme-bg-base, transparent);
        color: var(--start-scheme-color-base, canvastext);
        font: 400 16px/1.5 var(--theme-body-font-family, var(--start-font-family-base))
    }
    body {
        margin: 0
    }
    [hidden], template {
        display: none
    }
    [disabled] {
        cursor: not-allowed
    }
}
@layer start.elements.section {
    :where(article, section, nav, aside, hgroup, header, footer, address) > :last-child {
        margin-block-end: 0
    }
}
@layer start.heading {
    :where(h1, h2, h3, h4, h5, h6) {
        color: var(--theme-heading-color, var(--start-scheme-color-base));
        font-family: var(--theme-heading-font-family, var(--start-font-family-heading));
        font-weight: bolder;
        line-height: 1.2;
        margin-block: 0 var(--start-space-md, 1em)
    }
    * + :where(h1, h2, h3, h4, h5, h6) {
        margin-top: calc(var(--margin-base, 1em)*2)
    }
    h1 {
        font-size: 2.25rem;
        overflow-wrap: break-word
    }
    h2 {
        font-size: 1.8rem
    }
    h3 {
        font-size: 1.33rem
    }
    h4 {
        font-size: 1.15rem
    }
    h5 {
        font-size: 1rem
    }
    h6 {
        font-size: 14px
    }
    @media (max-width:640px) {
        :where(h1, h2) {
            hyphens: auto
        }
    }
    ol, ul {
        padding-inline-start: 2rem
    }
}
@layer start.text {
    a {
        color: var(--link-color, revert);
        &:any-link {
            text-decoration: underline;
            text-underline-offset: 2px;
            &:hover {
                color: var(--link-hover-color, revert);
                text-decoration: none
            }
            &:active {
                color: var(--link-active-color, revert);
                text-decoration: line-through
            }
        }
    }
    b {
        font-weight: bolder
    }
    strong {
        font-weight: 700
    }
    :not(pre) > code, :not(pre) > kbd, :not(pre) > samp {
        background: var(--theme-code-bg, var(--start-bg-muted, rgba(0, 0, 0, .15)));
        border-radius: .125rem;
        color: var(--theme-code-color, inherit);
        font-family: var(--font-monospace, ui-monospace), monospace;
        font-size: .875em;
        padding: .125rem .25rem
    }
    em {
        color: var(--start-color-accent, inherit)
    }
    small {
        font-size: 80%
    }
    sub, sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline
    }
    sub {
        bottom: -.25em
    }
    sup {
        top: -.5em
    }
}
@layer start.button {
    .as-btn, button {
        align-items: center;
        -webkit-appearance: none;
        background-color: transparent;
        border: 1px solid var(--border-color);
        border-radius: 2px;
        color: hsl(from currentColor h s l/.75);
        color: inherit;
        display: inline-flex;
        font: inherit;
        font-size: .875rem;
        gap: 1rem;
        justify-content: center;
        line-height: 1.2;
        margin: 0;
        padding: .7rem 1rem;
        text-align: center;
        text-decoration: none;
        text-transform: none;
        transition: .2s ease;
        transition-property: border-color, color
    }
    .as-btn:not(:disabled), button:not(:disabled) {
        cursor: pointer
    }
    .as-btn:hover, button:hover {
        border-color: currentColor;
        color: inherit
    }
    .as-btn:active, button:active {
        border-color: currentColor;
        color: var(--link-active-color)
    }
}
@layer start.embed {
    audio, canvas, iframe, img, svg, video {
        vertical-align: middle
    }
    iframe, img, svg, video {
        height: auto;
        max-width: 100%
    }
    iframe, video {
        aspect-ratio: 16/9;
        border: 0
    }
    svg:not([fill]) {
        fill: currentColor
    }
}
@layer start.group {
    :where(p, hr, pre, blockquote, ol, ul, menu, dl, figure) {
        margin: 0 0 var(--start-space-md)
    }
    * + :where(p, hr, pre, blockquote, ol, ul, menu, dl, figure) {
        margin-block-start: var(--start-space-md)
    }

    /* !!!! нужно пересмотреть . смотри например когда 1 параграф в div - отступа не будет - выходит не очень хорошо !!!!  */
    hr {
        background: var(--start-border-color);
        border: 0;
        height: 1px
    }
    pre {
        background-color: var(--theme-code-bg, var(--start-scheme-bg-muted));
        border: 4px transparent;
        border-left: 4px solid var(--start-scheme-color-primary);
        border-radius: .25em;
        color: var(--theme-code-color, var(--start-scheme-color-base));
        font: .875em/1.5 var(--start-font-family-code);
        max-height: 500px;
        overflow: auto;
        padding: 25px;
        position: relative;
        tab-size: 4;
        & code {
            font-family: var(--start-font-family-code)
        }
        @supports (scrollbar-width:thin) {
            &, & code {
                scrollbar-width: thin
            }
        }
    }
    dt {
        font-weight: 700
    }
    dd {
        margin-inline-start: var(--start-space-md, 1em)
    }
    dl > dt:nth-child(n+2) {
        margin-block-start: var(--margin-small, 1em)
    }
}
@layer start.interactive {
    details {
        display: block
    }
    summary {
        display: list-item
    }
}
:where(textarea) {
    resize: vertical
}
::-webkit-input-placeholder {
    color: inherit;
    opacity: .54
}
@layer start.form {
    fieldset {
        border: none;
        margin: 0;
        min-width: 0;
        padding: 0
    }
    button, input, optgroup, select, textarea {
        font: inherit;
        font-family: var(--start-font-family-ui, inherit);
        margin: 0
    }
    [type=button], [type=reset], [type=submit], button {
        -webkit-appearance: button
    }
    legend {
        padding: 0
    }
    progress {
        vertical-align: baseline
    }
    ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
        height: auto
    }
    input {
        font-size: .875rem
    }
    [type=search] {
        -webkit-appearance: textfield
    }
    ::-webkit-search-decoration {
        -webkit-appearance: none
    }
    ::-webkit-file-upload-button {
        -webkit-appearance: button;
        font: inherit
    }
    :where(button, input, select, textarea) {
        background-color: var(--theme-form-bg-color-default);
        border: 1px solid var(--start-scheme-border-color, currentColor);
        color: inherit;
        font: inherit;
        letter-spacing: inherit;
        padding: .25em 1em
    }
    :where(input, select, textarea) {
        max-width: 100%;
        transition: border-color .2s ease-in-out;
        width: 100%
    }
    :where(select) {
        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
        background-position: 100% 50%;
        background-repeat: no-repeat;
        border-radius: 0;
        padding-right: 1em
    }
    :where(select[multiple]) {
        background-image: none
    }
    :where([type=color i], [type=range i]) {
        border-width: 0;
        padding: 0
    }
}
:where(input, select, textarea):focus {
    background-color: var(--theme-bg-color);
    border-color: var(--start-scheme-color-info);
    outline: none
}
@layer start.table {
    :where(table) {
        border-collapse: collapse;
        border-spacing: 0;
        width: 100%;
        & caption, & th {
            text-align: start
        }
        & th {
            vertical-align: middle
        }
    }
}
table td, table th {
    border-bottom: thin solid;
    padding: .2em
}