/*! MixtureCSS v2025.12.1b MIT-License https://github.com/na2204/mixture-css */
@layer base, mod-blog;
@layer base {
    @media (prefers-color-scheme: light) {
        :root {
            color-scheme: light;
            --blue: #35e;
            --red: #f22;
            --body-bg: #fafafa;
            --body-fg: #333;
            --btn-fg: var(--blue);
        }
    }

    @media (prefers-color-scheme: dark) {
        :root {
            color-scheme: dark;
            --blue: #57e; /*67f*/
            --red: #e33; /*f22*/
            --body-bg: #111;
            --body-fg: #ddd;
            --btn-fg: var(--blue);
        }
    }

    * {
        word-break: break-all;
    }

    *, *::before, *::after {
        box-sizing: border-box;
    }

    *:not(pre, code) {
        font-family: sans-serif;
    }

    body {
        background-color: var(--body-bg);
        color: var(--body-fg);
        width: 95%;
        min-width: 160px;
        max-width: 720px;
        margin: 24px auto 8px auto;
    }

    /* bulk */
    hr,
    iframe,
    img,
    ol:not(ol > ol, ul > ol),
    p,
    pre,
    ul:not(ul > ul, ol > ul),
    table,
    textarea,
    video {
        margin: 8px 0;
    }

    label,
    li,
    p {
        font-size: 1.05rem;
    }

    iframe:not(ex) ,img:not(ex) ,video:not(ex)  {
        width: 100%;
        aspect-ratio: 21/9;
        object-fit: contain;
        overflow: hidden;
    }

    /* block */
    blockquote {
        padding-left: 8px;
        margin: 16px;
        border-left: solid 4px var(--body-fg);
    }

    footer {
        margin-top: 48px;
    }

    h1, h2, h3, h4, h5, h6 {
        margin: 24px 0 4px 0;
    }

    h1 + h2,
    h2 + h3,
    h3 + h4,
    h4 + h5,
    h5 + h6 {
        margin: 4px 0;
    }

    h1 {
        font-size: 2.0rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    h4 {
        font-size: 1.2rem;
    }

    h5 {
        font-size: 1.1rem;
    }

    h6 {
        font-size: 1rem;
    }

    nav:not(ex) {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    nav:not(ex) > a {
        display: inline-block;
        flex-shrink: 0;
        padding: 2px 4px;
        font-size: 1.2rem;
        font-weight: bold;
        text-decoration: none;
    }

    pre:not(ex) {
        background-color: var(--body-fg);
        color: var(--body-bg);
        padding: 8px;
        font-size: 1rem;
        border: solid 1px var(--color-body-fg);
        overflow-x: auto;
    }

    table:not(.table-scroll) {
        width: 100%;
        border-spacing: 0;
        overflow: hidden;
    }

    table.table-scroll {
        display: block;
        border-spacing: 0;
        overflow-x: auto;
    }

    table:not(ex) th,
    table:not(ex) td {
        padding: 4px;
        border-bottom: dashed 2px var(--body-fg);
        vertical-align: top;
    }

    table:not(.table-scroll) th, table:not(.table-scroll) td {
        font-size: clamp(12px, 2vw, 1rem);
    }

    table.table-scroll th, table.table-scroll td {
        min-width: 128px;
    }

    textarea:not(ex) {
        width: 100%;
        height: 4lh;
        min-height: 4lh;
        resize: vertical;
    }

    /* inline */
    a:not(ex) {
        color: var(--btn-fg);
    }

    button,
    input[type="button"],
    input[type="reset"],
    input[type="submit"] {
        background-color: var(--btn-fg);
        color: var(--body-bg);
        margin: 0 4px;
        padding: 2px 8px;
        border: 0;
        font-size: 1rem;
        cursor: pointer;
    }

    input[type="reset"] {
        background-color: var(--red);
    }

    a:hover,
    button:hover,
    input[type="button"]:hover,
    input[type="reset"]:hover,
    input[type="submit"]:hover {
        opacity: 0.4;
        mix-blend-mode: luminosity;
    }

    button:active,
    input[type="button"]:active,
    input[type="reset"]:active,
    input[type="submit"]:active {
        opacity: 0.6;
    }

    input[type="text"],
    input[type="email"],
    select,
    textarea {
        font-size: 1.05rem;
    }

    input[type="checkbox"],
    input[type="radio"] {
        transform: scale(1.2);
    }

    code:not(pre code) {
        margin: 0 1px;
        padding: 1px 2px;
        border: solid 1px var(--color-body-fg);
        border-radius: 4px;
    }

    /* special */
    header:not(ex) > * {
        margin: 4px 0;
    }

    .rt {
        text-align: right;
    }

    .lt {
        text-align: left;
    }
}

@layer mod-blog {
    /* mod:blog */
    header > * {
        margin: 4px 0;
    }

    .line {
        background-color: var(--body-fg);
        display: block;
        width: 100%;
        height: 2px;
        margin: 32px 0;
    }

    .card-post {
        display: flex;
        flex-direction: column;
        padding: 64px 0;
    }

    .card-post .pst-title {
        font-size: 2rem;
        font-weight: bold;
    }

    .card-post .pst-meta {
        color: var(--body-fg);
        opacity: 0.8;
    }

    .card-post .pst-meta a {
        color: var(--body-fg);
    }

    a.card-article {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        background-color: var(--body-fg);
        color: var(--body-bg);
        margin: 4px 0;
        text-decoration: none;
        overflow: hidden;
    }

    a.card-article > img {
        flex-shrink: 0;
        width: 35%;
        min-width: 120px;
        margin: 0;
        padding: 0;
        aspect-ratio: 16/9;
        object-fit: cover;
        -webkit-user-drag: none;
        user-select: none;
    }

    a.card-article > div {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 8px 4px;
    }

    a.card-article .art-title {
        display: -webkit-box;
        font-weight: bold;
        font-size: 1.2rem;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    a.card-article .art-meta {
        display: -webkit-box;
        font-size: 0.9rem;
        opacity: 0.7;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;        
    }

    @media (max-width: 780px) {
        a.card-article .art-title {
            -webkit-line-clamp: 1;
        }

        a.card-article .art-meta {
            -webkit-line-clamp: 2;
        }
    }

    @media (max-width: 480px) {
        a.card-article .art-title {
            font-size: 0.9rem;
            -webkit-line-clamp: 2;
        }

        a.card-article .art-meta {
            display: none;
        }
    }

    .card-link {
        display: block;
        color: var(--body-fg);
        margin: 8px 0;
        padding: 4px 8px;
        border: solid 2px var(--body-fg);
        border-left: solid 8px var(--body-fg);
        font-weight: bold;
        font-size: 1.4rem;
        text-decoration: none;
    }

    .prev-next {
        display:  flex;
        justify-content: space-between;
        gap: 8px;
    }

    .prev-next > a {
        display: block;
        color: var(--body-fg);
        width: 100%;
        height: 80px;
        padding: 8px;
        margin: 8px 0;
        border: solid 2px var(--body-fg);
        overflow: hidden;
        text-decoration: none;
    }

    .prev-next > a > span {
        display: block;
    }

    .prev-next > a > span:first-child {
        font-size: 0.8rem;
    }
}