@supports not (color: light-dark(#000, #fff)) {
    body {
        max-width: 32em;
        padding: 1em;
        margin: auto;
    }
    [role="doc-pullquote"] {
        display: none;
    }
}
@supports (color: light-dark(#000, #fff)) {
* {
    box-sizing: border-box;
}
html {
    overflow-inline: hidden;
    font: 10pt/1.6 sans-serif;
    --acc: light-dark(#666, #bbb);
    accent-color: var(--acc);
    background: var(--bg);
    color: var(--fg);
    --bg: light-dark(#fafafa, #333);
    --fg: light-dark(#000, #f9f9f9);
    --dim: light-dark(hsl(from var(--fg) h s l / 40%), hsl(from var(--fg) h s l / 50%));
    --faint: light-dark(hsl(from var(--fg) h s l / 10%), hsl(from var(--fg) h s l / 15%));
    color-scheme: light dark;
    &:lang(zh), &:lang(ja) {
        writing-mode: vertical-rl;
    }
}
a:any-link {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-style: dotted;
    color: var(--acc);
    &:hover {
        text-decoration-style: solid;
    }
}
::selection {
    background: light-dark(hsl(from var(--acc) h s l / 15%), hsl(from var(--acc) h s l / 30%));
    color: var(--fg);
}
::target-text {
    background: light-dark(hsl(from var(--acc) h s l / 25%), hsl(from var(--acc) h s l / 50%));
    color: var(--fg);
}
p, li, dd {
    text-align: justify;
    hanging-punctuation: allow-end last;
}
ol {
    margin-block: 1lh;
    &:lang(zh), &:lang(ja) {
        list-style: cjk-decimal;
    }
}
dt {
    font-weight: bold;
}
h1, h2, h3 {
    line-height: 1.3;
    text-wrap: balance;
}
blockquote {
    font-size: .9em;
    margin-block: 1lh;
}
small {
    font-size: .75em;
}
code, kbd {
    font-family: "Menlo", monospace;
    font-size: .86em;
    
}


.horizon{
  writing-mode: horizontal-tb;
  unicode-bidi: bidi-override;
  border: 1px solid;
  padding: 5px;
  margin: 5px;
  word-wrap: break-word;
  overflow-y:auto;
  background: #000;

  color: #fff;
  max-width: 400px;
  max-height: 100%;
  font-size: .75em;
}
kbd {
    font-size: .75em;
    padding: .15em;
    padding-inline: .3em;
    background: var(--faint);
    border: 1px solid var(--dim);
    border-radius: .2em;
}
pre {
    overflow: auto;
    :not(figure) > & {
        margin: 0.02lh;
    }
}
abbr, .upright {
    text-orientation: upright;
}
.combined {
    text-combine-upright: all;
}
html {
    display: flex;
    flex-direction: column;
    min-block-size: 100%;
}

body {
    flex: 1;
    margin: 0;
    display: grid;
    grid-template-columns:
        [full-start] minmax(2em, 1fr)
        [main-start top-start] minmax(0, 16em)
        [top-end] 3em
        [bottom-start] minmax(0, 42em)
        [bottom-end main-end] minmax(2em, 1fr)
        [full-end];
    grid-template-rows: max-content 1fr min-content;
    @media print {
        display: block;
    }
    h2 {
        text-transform: uppercase;
        letter-spacing: .25em;
        font-size: .86em;
        color: var(--dim);
    }
    details {
        margin-block: 1em;
    }
    summary {
        font-family: sans-serif;
        font-size: .86em;
    }
    & > aside {
        padding-block: 1em;
        grid-row: 1;
        grid-column: bottom;
        align-self: end;
    }
    & > header {
        grid-column: top;
        grid-row: 1;
        padding-block: 2em;
        display: flex;
        align-items: end;
        a:any-link {
            text-decoration: none;
            &:hover {
                opacity: .6;
            }
        }
        img {
            outline: 2px solid var(--fg);
            width: 50px;
            height: 50px;

            border-radius: 999px;
            @media print {
                width: 32px;
                height: 32px;
                border-radius: 0;
            }
        }
    }
    & > main {
        grid-column: main;
        padding-block: clamp(0em, 2vw, 1.5em);
        font-family: "Space Grotesk","Source Han Serif TC", "Source Han Serif", serif, sans-serif;
        font-size: 14pt;
        :not(:lang(zh), :lang(ja), :lang(nan-Hant)), /* :lang("*-Latn") */:lang(zh-Latn) {
            font-family: "Source Serif 4", serif;
            :is(h2, th, figcaption, header + section) &, &:is(abbr, .upright, .combined) {
                font-family: unset;
            }
            p, li {
                hyphens: auto;
                line-height: 1.4;
            }
        }
        :is(h1, header p, div, .archive li) > a:any-link {
            text-decoration: none;
            &:hover {
                background: var(--faint);
            }
        }
        & > article {
            & + & {
                margin-block-start: 1em;
            }
            header > h1 {
                font-size: 1.25em;
                margin-block: .15em 1em;
                a:any-link {
                    color: inherit;
                }
            }
            header > p {
                margin: 0;
                margin-block: .2em .4em;
                text-indent: -.5em;
                font-size: 1rem;
                font-family: sans-serif;
                color: var(--dim);
                text-wrap: balance;
            }
            header > time {
                text-transform: uppercase;
                letter-spacing: .25em;
                font-size: 1rem;
                font-family: sans-serif;
                color: var(--dim);
                font-weight: bold;
                display: block;
                text-wrap: balance;
            }
            /* can't use first-letter as the line-height is bugged in Firefox for some reason */
            header ~ p:first-of-type/*::first-letter*/ .init {
                float: left;
                font-size: 1.8lh;
                line-height: 1;
                margin-inline-end: .5rem;
                color: var(--acc);
            }
            &, blockquote {
                > p {
                    margin: 0;
                }
                > :is(p, p + aside) + p {
                    text-indent: 2em;
                }
            }
            > p:last-child::after, > ol:last-child > li:last-child::after {
                content: "◼";
                color: var(--acc);
            }
            .readmore {
                font-family: sans-serif;
                font-size: .86em;
                text-align: end;
                a::before {
                    content: "→ ";
                }
            }
            > footer {
                margin-block: 1em;
                font-size: .75em;
                font-family: sans-serif;
                text-align: end;
            }
            figure {
                max-inline-size: 100%;
                margin-block: 1lh;
                > :not(figcaption) {
                    max-inline-size: 100%;
                }
                > img {
                    border: 1px solid var(--dim);
                    padding: .5ch;
                }
                figcaption {
                    font-size: .75em;
                    font-family: sans-serif;
                    opacity: .6;
                    min-width: 100%;
                }
            }
            table {
                font-size: .9em;
                border-collapse: collapse;
                th, td {
                    padding: .25em;
                    padding-inline: .75em;
                    border-block: 1px solid var(--faint);
                }
                th {
                    text-transform: uppercase;
                    letter-spacing: .25em;
                    font-size: .85em;
                    font-family: sans-serif;
                    color: var(--acc);
                }
            }
            hr {
                border: 0;
                color: inherit;
                text-align: center;
                letter-spacing: 2em;
                font-size: .5em;
                margin-block: 3em;
                &::before {
                    content: "＊＊＊";
                }
            }
            em {
                font-style: normal;
                text-emphasis: filled var(--acc);
            }
            h2 {
                margin-block-start: 2rem;
                color: inherit;
                font-family: sans-serif;
            }
            [role="doc-pullquote"] {
                margin: 1rem;
                margin-block: 1em;
                padding: 2em;
                padding-block: 1em;
                float: inline-start;
                margin-inline-start: -2rem;
                inline-size: 50%;
                font-size: 1.3em;
                line-height: 1.4;
                text-wrap: balance;
                color: var(--acc);
                position: relative;
                transform: scale(.9, 1);
                break-inside: avoid;
                &:nth-of-type(2n) {
                    float: inline-end;
                    margin: 1rem;
                    margin-inline-end: -2rem;
                }
                &::before, &::after {
                    content: "「";
                    display: block;
                    position: absolute;
                    pointer-events: none;
                    font-size: 2em;
                    inset-inline-start: 0;
                    inset-block-start: 0;
                    color: var(--dim);
                }
                &::after {
                    content: "」";
                    inset: auto;
                    inset-inline-end: 0;
                    inset-block-end: 0;
                }
                @media (height < 500px) {
                    display: none;
                }
            }
        }
        > .archive {
            h2 {
                text-transform: uppercase;
                letter-spacing: .25em;
                font-size: 1rem;
                font-family: sans-serif;
                font-weight: bold;
                color: var(--dim);
                padding-block: 1em 0;
            }
            ol {
                padding: 0; 
                margin: 0;
            }
            li {
                list-style: none;
                font-size: 1.05em;
                margin-block: .5em;
                a:any-link {
                    color: inherit;
                    font-weight: bold;
                }
            }
        }
    }
    & > footer {
        padding-block: 1em;
        grid-column: main;
        grid-row: 3;
        text-align: center;
        nav a:any-link {
            text-wrap: balance;
            display: flex;
            flex-direction: column;
            text-decoration: none;
            opacity: .8;
            color: inherit;
            &:hover {
                opacity: 1;
            }
        }
        p {
            color: var(--dim);
            text-wrap: balance;
            text-align: center;
        }
        nav:not(.pagination) {
            display: flex;
            gap: 3em;
            justify-content: center;
            flex-wrap: wrap;
            a:any-link {
                font-weight: bold;
            }
        }
        nav.pagination {
            margin-block-end: 2em;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            font-family: sans-serif;
            color: light-dark(#666, #bbb);
            margin-inline: auto;
            > :first-child {
                text-align: start;
                & > b::before {
                    content: "← ";
                }
            }
            > :last-child {
                grid-column: 3;
                text-align: end;
                & > b::after {
                    content: " →";
                }
            }
            b {
                display: block;
                font-size: smaller;
            }
        }
        @media print {
            display: none;
        }
    }
}
}