@charset "utf-8";

/* Global */

:root,
:root.light {
    /* The default color scheme is light. */
    color-scheme: light;

    --menu-icon-slice-width: 18px;
    --menu-icon-slice-height: 2px;
    --article-page-width: 1000px;
    --gap-large: 2rem;
    --gap-small: 1.5rem;
    --header-height: 52px;

    --link: #0366d6;
    --link-visited: #336699;
    --link-black: #1f2628;

    /* Headers in articles */
    --color-article-h2: #30040f;
    --color-article-h3: #0a5261;
    --color-article-h4: #055c26;

    --header-background: #f9f9f9;
    --header-item-focused-background-color: rgba(0, 0, 0, 0.04);
    --header-item-focused-shadow-color: rgba(0, 8, 15, 0.125);
    --header-link-color: #333;
    --header-link-color-hover: black;
    --logo-img-filter: none;

    --header-important-item-background-color: rgb(200, 0, 68);
    --header-important-item-color: #f2f2f2;
    --header-important-item-hover-color: #f1f1f1;
    --header-important-item-hover-background-color: #2c1f1c;

    --sidebar-background-color: #111;
    --background-secondary-color: #dee2e6;
    --code-bg-color: #f6f8fa;
    --elem-shadow-color: rgba(0, 0, 0, 0.05);
    --article-background: white;
    --logo-text-color: black;
    --body-text-color: #24292e;
    --box-sep-color: rgba(0, 0, 0, 10%);
    --sidebar-link-color: #ccc;
    --target-color: cornflowerblue;
    --code-inline-bg: #f3f3f3;

    --blockquote-text-color: #575e66;
    --blockquote-border-color: #dfe2e5;
    --blockquote-bg-start: #dfe2e556;
    --blockquote-bg-end: #dfe2e525;

    --sidebar-link-color-hover: #f1f1f1;
    --sidebar-important-link-color-hover: #fff6f1;

    --download-button-text-color: var(--link);
    --download-button-border-color: var(--link);
    --blockquote-bg-start: color-mix(in srgb, var(--blockquote-border-color), transparent 90%);
    --blockquote-bg-end: color-mix(in srgb, var(--blockquote-border-color), transparent 98%);

    --img-shadow-color: #999;

    --nagbar-color: #453128;
    --nagbar-bg: #fbf6e3;
    --nagbar-border: #e2c491;

    --normal-underline-color: transparent;
    --hover-underline-color: transparent;
}

/* Document rules for each theme */

:root.pink {
    /* Pink theme */
    color-scheme: light;

    --body-text-color: #955e4b;
    --body-bg-color: #fcf2f5;
    --logo-text-color: var(--body-text-color);

    --header-link-color: var(--body-text-color);
    --header-link-color-hover: #ac370d;
    --header-background: #fff9f3;
    --header-color: var(--link-black);
    --header-item-focused-background-color: rgba(245, 159, 146, 0.2);
    --header-item-focused-shadow-color: rgba(189, 119, 108, 0.33);
    --logo-img-filter: invert(39%) sepia(24%) saturate(834%) hue-rotate(329deg) brightness(97%) contrast(90%);

    --background-secondary-color: #f2ddd4cc;
    --article-background: #fff9f3cc;

    --link: #d47999;
    --link-visited: var(--link);
    --link-black: #973f22;
    --link-black-hover: #cf572f;

    --code-inline-color: white;
    --code-inline-bg: #e6a2ba;
    --code-bg-color: #ffdeeb;

    --sidebar-link-color: #f98e9a;
    --sidebar-background-color: #fff1ea;
    --sidebar-link-color-hover: #d47999;
    --sidebar-important-link-color-hover: #fff6f1;
    --sidebar-list-marker: var(--link);
    --sidebar-item-background-color-hover: #f59f92;

    --md-button-background: var(--code-inline-bg);
    --md-button-background-hover: var(--link);
    --summary-text-color: var(--link);
    --summary-important-text-color: black;
    --summary-background-color: var(--code-bg-color);
    --details-border-color: var(--link);
    --box-sep-color: rgba(149, 93, 75, 0.231);
    --hr-color: #ff9999;
    --target-color: var(--hr-color);

    --download-button-text-color: var(--link);
    --download-button-border-color: var(--link);
    --download-button-background-color: rgba(248, 181, 189, 0.15);
    --download-button-shadow-color: rgba(248, 181, 189, 0.5);

    --blockquote-text-color: #cf828b;
    --blockquote-border-color: var(--code-inline-bg);
}

:root.pink main ul > li {
    list-style-image: url("/blog/img/list-style-image.webp");
}

:root.pink body::before,
:root.pink body::after {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 20vw;
    z-index: -1;
    background-repeat: repeat-y;
    background-image: url("/blog/img/deco-side.svg");
    background-position: top right;
    background-size: 100% auto;
}

:root.pink body::before {
    left: 0;
    transform: scaleX(-1);
}

:root.pink footer {
    background-color: #744356;
    background-image: linear-gradient(rgba(197, 138, 159, 0.33), rgba(68, 47, 55, 0.66)),
        url("/blog/img/blog-bg-pink-theme.webp");
    background-size: cover;
    background-position: center 20%;
}

:root.pink footer::after {
    --decor-height: 26px;
    content: "";
    display: block;
    position: absolute;
    top: calc(-1 * var(--decor-height));
    height: var(--decor-height);
    width: 100%;
    background-image: url("/blog/img/bottom-pattern.webp");
    background-position: bottom left;
    background-repeat: repeat-x;
    background-size: auto;
    transform: scaleY(-1);
}

:root.pink #sidebar {
    background-image: url("/blog/img/bg-pattern.webp");
    background-position: top left;
    background-repeat: repeat;
}

:root.dark {
    /* Dark theme */
    color-scheme: dark;

    --background-secondary-color: rgba(255, 255, 255, 0.25);
    --article-background: #131616;
    --link: #3eafaf;
    --link-black: #a6a6a6;
    --link-black-hover: #808080;
    --link-visited: var(--link);
    --header-color: var(--link-black);

    /* Headers in articles */
    --color-article-h2: #e42253;
    --color-article-h3: #23bbda;
    --color-article-h4: #21cf64;

    --body-text-color: #e5e5e5;
    --body-bg-color: #161818;
    --logo-text-color: var(--body-text-color);
    --header-link-color: var(--body-text-color);
    --logo-img-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);

    --header-background: #2e2e2e;
    --header-item-focused-shadow-color: rgba(0, 0, 0, 0.7);
    --header-item-focused-background-color: rgba(255, 255, 255, 0.219);
    --header-link-color-hover: rgba(245, 250, 255, 0.9);

    --header-important-item-hover-background-color: rgb(255, 0, 55);

    --code-inline-color: black;
    --code-bg-color: #4d4d4d;
    --code-inline-bg: #1b3535;
    --code-inline-color: var(--link);

    --sidebar-link-color: var(--header-link-color);
    --sidebar-link-color-hover: var(--header-link-color-hover);
    --sidebar-list-marker: var(--link);

    --summary-text-color: var(--link);
    --summary-important-text-color: var(--body-text-color);
    --summary-background-color: var(--code-inline-bg);

    --details-border-color: var(--link);
    --box-sep-color: rgba(233, 233, 233, 0.16);
    --kbd-color: var(--body-text-color);
    --img-shadow-color: #333;

    --md-button-background: var(--code-inline-bg);
    --md-button-background-hover: var(--link);

    --blockquote-text-color: #9c9c9c;
    --blockquote-border-color: var(--code-inline-bg);

    --nagbar-color: #f1b79c;
    --nagbar-bg: #313127;
    --nagbar-border: #554a38;

    a.anchor svg {
        /* Fix anchor visibility */
        filter: invert(1);
    }
}

/* Main elements */

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

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

/* Body with sticky footer */

html,
body {
    min-height: 100vh;
    min-height: 100dvh;
}

html:focus-within {
    scroll-behavior: smooth;
}

body {
    font-family: "Noto Sans", "Droid Sans", "DejaVu Sans", "Liberation Sans", Roboto, Cantarell, "Segoe UI", Arial,
        Meiryo, Oxygen, Ubuntu, "Helvetica Neue", Helvetica, "Noto Color Emoji", "Noto Sans CJK JP", IPAGothic,
        Yu Gothic, sans-serif;
    background-color: var(--body-bg-color, #f3f3f3);
    color: var(--body-text-color, black);
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    line-height: 1.5;
}

body > div#divbodyholder {
    flex: 1 0 auto;
}

body > header,
body > footer {
    flex-shrink: 0;
}

/* Links general */

a,
a:visited {
    text-decoration: none;
    color: var(--link);
}

a:visited {
    color: var(--link-visited);
}

a:hover {
    text-decoration: underline;
}

/* Accented links */

a.ablack {
    color: var(--link-black);
}

a.ablack:is(:hover, :active, :focus) {
    color: var(--link-black-hover, DarkSlateBlue);
    filter: hue-rotate(-30deg) brightness(90%);
}

/* Header */

header {
    font-family: "Noto Serif", "DejaVu Serif", "Liberation Serif", "Times New Roman", "Noto Serif CJK JP", "IPAexMincho",
        "Yu Mincho", Georgia, Times, serif;
    width: 100%;
    position: sticky;
    z-index: 100;
    top: 0;
    box-shadow: 0 5px 0 var(--background-secondary-color), 0 6px 4px 0 var(--elem-shadow-color);
    min-width: 256px;
    min-height: var(--header-height);
    background-color: var(--header-background);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    font-size: 16px;
}

/* logo; icon and title */

header a.logo,
header a.logo:visited {
    height: var(--header-height);
    text-decoration: none;
    text-transform: uppercase;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    transition: opacity 0.2s;
    gap: 6px;
}

header a.logo > span {
    font-size: 20px;
    font-weight: bold;
    color: var(--logo-text-color, black);
    text-align: center;
    margin-right: 8px;
}

header a.logo:is(:hover, :active, :focus) {
    filter: saturate(1.5);
    background-color: var(--header-background);
}

header a.logo > img {
    height: 100%;
    padding: 2px;
    filter: var(--logo-img-filter, none);
}

/* Hidden elements. Description is visible only on wide screens. */

header #description,
header nav {
    display: none;
}

/* Navigation */

header > nav {
    clear: both;
    flex-flow: row nowrap;
    justify-content: space-between;
    height: var(--header-height);
    flex: 2 1 200px;
}

header > nav a,
header > nav a:visited {
    height: var(--header-height);
    white-space: nowrap;
    padding: 0 2px;
}

/* Important links inside Header */

header > nav a.important {
    color: var(--header-important-item-color);
    background-color: var(--header-important-item-background-color);

    &:is(:hover, :active, :focus) {
        color: var(--header-important-item-hover-color);
        background-color: var(--header-important-item-hover-background-color);
    }
}

/* Header on wide screens */

@media screen and (min-width: 760px) {
    header > nav {
        display: flex;
    }

    header > nav a {
        flex: 2 1 20px;
    }
}

@media screen and (min-width: 1000px) {
    header > nav a:nth-last-of-type(2) {
        margin-left: auto;
    }

    header > nav a {
        flex: 0 1 20px;
        padding: 0 16px;
    }
}

/* Common rules for buttons and anchors */

header a,
header a:visited,
header button,
header label {
    display: block;
    color: var(--header-link-color, #333);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: var(--header-background);
    transition: background-color 0.08s ease-in-out, box-shadow 0.12s ease-in-out;
    line-height: var(--header-height);
    user-select: none;
    position: relative;

    &:not(.logo)::after {
        content: "";
        position: absolute;
        display: block;
        inset: 0;
        box-shadow: 0px 5px 0px 0px var(--normal-underline-color);
        transition: box-shadow 0.1s;
    }
    &:is(:hover, :active, :focus)::after {
        box-shadow: 0px 5px 0px 0px var(--hover-underline-color);
    }
}

header button:hover,
header button[open],
header :is(label, a:not(.logo)):is(:hover, :active, :focus) {
    color: var(--header-link-color-hover, black);
    text-decoration: none;
    background-color: var(--header-item-focused-background-color);
    box-shadow: inset 0 1px 2px 0 var(--header-item-focused-shadow-color, rgba(0, 8, 15, 0.125));
}

/* Mark guide link */

header a.guide_link {
    --normal-underline-color: rgb(253, 122, 93);
    --hover-underline-color: rgb(200, 0, 68);
}

/* body */

#divbodyholder {
    overflow-wrap: break-word;
    margin: var(--gap-large) 0 var(--gap-large);
}

#divbodyholder > div {
    border: 1px solid var(--box-sep-color);
    background-color: var(--article-background, white);
    padding: clamp(1.5rem, 3vw, 2rem);
    margin: 0 auto;
    width: 100%;
    max-width: var(--article-page-width);
    box-shadow: 0 1px 4px 0 var(--elem-shadow-color);
}

/* container for articles */

#divbodyholder > #divbody {
    padding-top: 0;
}

/* index page nag bar */

#divbodyholder > .indexnagbar {
    color: var(--nagbar-color, black);
    background-color: var(--nagbar-bg, yellow);
    border: 1px solid var(--nagbar-border, brown);
    margin-bottom: var(--gap-large);
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 10px;
}

.indexnagbar a,
.indexnagbar a:visited {
    color: #a85c43;
}

.indexnagbar a:is(:hover, :active, :focus) {
    color: #ab2f17;
}

.indexnagbar svg.nagbar_icon {
    display: block;
    min-width: 2rem;
    width: 2rem;
    height: 2rem;
    fill: var(--nagbar-color, black);
}

@media screen and (max-width: 500px) {
    #divbodyholder > .indexnagbar {
        flex-flow: column nowrap;
    }
}

/* main */

main * + * {
    margin-block: 1rem 0;
}

main li > :is(ol, ul):first-of-type,
main a,
main article {
    margin-block: 0;
}

main ol,
main ul {
    padding-left: 2em;
}

main li + li {
    margin-top: 0.25em;
}

main img.shadow {
    box-shadow: 2px 2px 3px var(--img-shadow-color);
}

article > h1:first-child {
    margin-block-end: 0px;
}

article a.anchor {
    float: left;
    padding-right: 4px;
    margin-left: -20px;
    line-height: 1;
}

blockquote {
    padding: 0 1em;
    color: var(--blockquote-text-color, red);
    border-left: 0.25em solid var(--blockquote-border-color, red);
    background-image: linear-gradient(to right, var(--blockquote-bg-start, red), var(--blockquote-bg-end, yellow));
}

blockquote a {
    filter: saturate(70%);
}

main ::selection {
    background-color: #b3d4fc;
    color: #000;
    text-shadow: none;
}

main p {
    line-height: 1.5;
}

code,
kbd,
pre {
    font-family: "Noto Sans Mono", "Liberation Mono", "DejaVu Sans Mono", "Courier New", "Lucida Console", Courier,
        Consolas, "Noto Sans Mono CJK JP", monospace;
}

code {
    word-break: keep-all;
    font-size: 85%;
    padding: 0.2em 0.4em;
    background-color: var(--code-inline-bg, #f3f3f3);
    color: var(--code-inline-color, currentColor);
    border-radius: 4px;
}

pre {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    background-color: var(--code-bg-color);
    border-radius: 6px;
    padding: 1rem;
    line-height: 1.45;
}

pre img {
    margin: 12px 0px;
}

pre iframe {
    margin: 12px 0px;
}

pre code {
    padding: 0;
    background-color: initial;
    color: inherit;
}

kbd {
    display: inline-block;
    margin: 0 1px 2px;
    padding: 3px 4px;
    font-size: 0.6875rem;
    line-height: normal;
    line-height: 10px;
    color: var(--kbd-color, #24292f);
    vertical-align: middle;
    background-color: var(--code-bg-color);
    border: 1px solid rgba(175, 184, 193, 0.2);
    border-radius: 6px;
    box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2);
}

#all_posts {
    margin-top: var(--gap-small);
    text-align: center;
}

article {
    display: flow-root;
}

article a {
    transition: filter 0.2s, color 0.2s;
}

article a:hover {
    filter: hue-rotate(-20deg) brightness(120%);
}

/* Article headers */

main :is(h1, h2, h3, h4, h5, h6) {
    margin-block: 1.5rem 0;
    line-height: 1.25;
    clear: both;
    color: var(--header-color, currentColor);
}

main :is(h1, h2, h3, h4, h5, h6) > a:is(:hover, :active, :focus) {
    text-decoration: none;
}

main h1 {
    font-size: 1.7rem;
}

main h2 {
    font-size: 1.5rem;
    color: var(--color-article-h2, currentColor);
}

main h3 {
    font-size: 1.25rem;
    color: var(--color-article-h3, currentColor);
}

main h4 {
    font-size: 1.125rem;
    color: var(--color-article-h4, currentColor);
}

article a.anchor > svg {
    vertical-align: middle;
    visibility: hidden;
    display: inline-block;
}

article :is(h1, h2, h3, h4, h5, h6):is(:hover, :active, :focus) .anchor > svg {
    visibility: visible;
}

article .subtitle {
    font-size: small;
    margin: 3px 0 1rem;
}

/* Highlight targets */

main [id] {
    --target-shift: calc(10px + var(--header-height));

    position: relative;
    scroll-margin-top: var(--target-shift);
    scroll-snap-align: start;
}

main [id]::after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    bottom: -3px;
    height: 2px;
    width: min(33%, 275px);
    background-image: linear-gradient(to right, var(--target-color), var(--target-color) 33%, transparent);
    transition: clip-path 1s ease-out;
    /* Hidden by default */
    clip-path: inset(0 100% 0 0);
}

main [id]:target::after {
    clip-path: inset(0);
}

/* Download button */

a.download_button {
    display: inline-block;
    font-size: 1.5625rem;
    line-height: 49px;
    min-width: 220px;
    padding: 0 5px;
    color: var(--download-button-text-color, var(--link));
    border: 1px solid var(--download-button-border-color, #0366d6);
    border-radius: 2px;
    transition: all 0.3s;
}

a.download_button:is(:hover, :active, :focus) {
    background-color: var(--download-button-background-color, rgba(3, 102, 214, 0.05));
    text-decoration: none;
    box-shadow: 0 2px 4px var(--download-button-shadow-color, rgba(83, 100, 255, 0.45));
    filter: none;
}

/* Cut line */

article hr {
    border: 0;
    border-top: 2px solid var(--hr-color, lightgrey);
}

/* Tables */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

article table {
    display: block;
    max-width: 100%;
    overflow: auto;
    overscroll-behavior-inline: contain;
    width: max-content;
}

article table td,
article table th {
    border: 1px solid #e0e3e6;
    padding: 6px 13px;
}

article table td:first-child {
    white-space: nowrap;
}

article table tr:nth-child(2n) {
    background-color: var(--code-bg-color);
}

/* Menu button */

input#menu-btn {
    /* Hide checkbox, the input tag.
       The user clicks on the label instead. */
    display: none;
}

.menu-btn {
    /* Label*/
    padding: calc((var(--header-height) - var(--menu-icon-slice-height)) / 2)
        calc((var(--header-height) - var(--menu-icon-slice-width)) / 2);
    user-select: none;
    display: block;
}

.menu-btn > .menu-icon {
    background-color: currentColor;
    display: block;
    width: var(--menu-icon-slice-width);
    height: var(--menu-icon-slice-height);
    position: relative;
    font-size: 0px;
}

.menu-btn > .menu-icon::before,
.menu-btn > .menu-icon::after {
    content: "";
    display: block;
    background-color: inherit;
    position: absolute;
    width: 100%;
    height: 100%;
}

/* Hamburger */

.menu-btn > .hamburger,
.menu-btn > .hamburger::before,
.menu-btn > .hamburger::after {
    transition: all 0.2s ease-out;
}

.menu-btn > .hamburger::before {
    top: 5px;
}

.menu-btn > .hamburger::after {
    top: -5px;
}

/* Hamburger checked */

input#menu-btn:checked ~ header label.menu-btn {
    background-color: var(--header-item-focused-background-color);
}

input#menu-btn:checked ~ header .hamburger {
    background-color: transparent;
}

input#menu-btn:checked ~ header .hamburger::before {
    rotate: -45deg;
    top: 0;
}

input#menu-btn:checked ~ header .hamburger::after {
    rotate: 45deg;
    top: 0;
}

body:has(input#menu-btn:checked) {
    /* When the sidebar is visible, the body shouldn't scroll.
       Instead the user scrolls the sidebar (if the sidebar is tall enough). */
    overflow-y: hidden;
}

/* Sidebar: Jump to top button */

.menu-btn > .up-arrow {
    rotate: 90deg;
}

.menu-btn > .up-arrow::before,
.menu-btn > .up-arrow::after {
    width: 58%;
    left: -2px;
}

.menu-btn > .up-arrow::before {
    rotate: 45deg;
    top: 3px;
}

.menu-btn > .up-arrow::after {
    rotate: -45deg;
    top: -3px;
}

/* Sidebar: Close button */

.menu-btn > .close-btn {
    background-color: transparent;
}

.menu-btn > .close-btn::before,
.menu-btn > .close-btn::after {
    top: 0;
}

.menu-btn > .close-btn::before {
    rotate: -45deg;
}

.menu-btn > .close-btn::after {
    rotate: 45deg;
}

/* Sidebar */

#sidebar {
    --sidebar-width: min(100vw, 400px);
    --main-shadow: 0 0 1rem rgb(0 0 0 / 0.33);
    --overlay-shadow-off: 0 0 0 200vmax transparent;
    --overlay-shadow-on: 0 0 0 200vmax rgb(0 0 0 / 0.25);

    width: var(--sidebar-width);
    max-width: 100vw;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-block: contain;
    font-size: 1rem;
    z-index: 150;
    background-color: var(--sidebar-background-color);
    color: gray;
    position: fixed;
    inset: 0 calc(-1 * var(--sidebar-width)) 0 auto;
    visibility: hidden;
    transition: right 0.2s, visibility 0.2s, box-shadow 0.33s;
    box-shadow: var(--main-shadow), var(--overlay-shadow-off);
}

/* Opened sidebar */

input#menu-btn:checked ~ #sidebar {
    right: 0px;
    visibility: visible;
    box-shadow: var(--main-shadow), var(--overlay-shadow-on);
}

/* Inside sidebar */

#sidebar ul,
#sidebar ol {
    list-style-position: inside;
    padding-left: 1em;
}

#sidebar > .page-contents > ul,
#sidebar > .page-contents > ol {
    clear: both;
    margin: 8px;
    padding-left: 0;
}

#sidebar > .page-contents ::marker {
    color: var(--sidebar-list-marker, #7fdbffaa);
}

#sidebar ul:only-child,
#sidebar ol:only-child {
    padding-left: 0;
}

#sidebar li + li {
    padding-top: 0.25em;
}

#sidebar a,
#sidebar a:visited {
    display: inline;
    color: var(--sidebar-link-color);
    text-decoration: none;
    user-select: none;
}

#sidebar a:is(:hover, :active, :focus) {
    color: var(--sidebar-link-color-hover, #f1f1f1);
}

#sidebar > hr {
    border: 0px;
    border-top: 2px solid var(--hr-color, lightgrey);
    opacity: 0.25;
    margin: 10px 20px;
}

#sidebar > :is(div:empty, div:empty + hr) {
    visibility: hidden;
    display: none;
}

/* Sidebar: Top links */

#sidebar .sidebar_header {
    display: flex;
    background-color: inherit;
    align-content: stretch;
    align-items: stretch;
    flex-flow: row nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 18px;
    height: var(--header-height);
}

#sidebar .sidebar_header > a:first-child {
    flex: 2 1 auto;
}

#sidebar .sidebar_header > *,
#sidebar .sidebar_header > *:visited {
    user-select: none;
    min-width: var(--header-height);
    line-height: var(--header-height);
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.1s, color 0.1s;
}

#sidebar .sidebar_header > :is(:hover, :active) {
    background-color: var(--sidebar-item-background-color-hover, #3f3f3f);
    color: var(--sidebar-important-link-color-hover, #f1f1f1);
}

/* Theme selector */

.sidebar_header input[type="radio"] {
    --button-size: 14px;
    --button-outline: 3px;
    appearance: none;
    display: grid;
    place-items: center;
}

.sidebar_header input[type="radio"]::after {
    display: block;
    content: "";
    width: var(--button-size);
    height: var(--button-size);
    outline: var(--button-outline) solid var(--theme-radio-color, currentColor);
    outline-offset: var(--button-outline);
    border-radius: 100vmax;
    margin: auto;
}

.sidebar_header input[type="radio"]:checked::after {
    background-color: var(--theme-radio-color, currentColor);
}

.sidebar_header input[type="radio"]#light {
    --theme-radio-color: lightgrey;
}

.sidebar_header input[type="radio"]#pink {
    --theme-radio-color: pink;
}

.sidebar_header input[type="radio"]#dark {
    --theme-radio-color: rgb(94, 94, 94);
}

/* Sidebar: Buttons */

#sidebar .menu-btn > .menu-icon:not(.close-btn),
#sidebar .menu-btn > .menu-icon::before,
#sidebar .menu-btn > .menu-icon::after {
    background-color: var(--sidebar-link-color);
    transition: background-color 0.1s;
}

#sidebar .menu-btn:is(:hover, :active, :focus) > .menu-icon:not(.close-btn),
#sidebar .menu-btn:is(:hover, :active, :focus) > .menu-icon::before,
#sidebar .menu-btn:is(:hover, :active, :focus) > .menu-icon::after {
    background-color: var(--sidebar-important-link-color-hover);
}

/* Sidebar: important links */

#sidebar .important-links {
    margin: 10px 20px;
    gap: 10px;
    columns: 2;
}

#sidebar .important-links a {
    display: block;
    padding: 6px 0 6px 6px;
    text-align: left;
    column-gap: 10px;
    transition: background-color 0.1s, color 0.1s;
}

#sidebar .important-links a:last-child:nth-child(odd) {
    column-span: all;
}

#sidebar .important-links a:is(:hover, :active, :focus) {
    color: var(--sidebar-important-link-color-hover, #f1f1f1);
    background-color: var(--sidebar-item-background-color-hover, #3f3f3f);
}

/* Tooltips */

article :is(span, abbr)[title] {
    cursor: help;
    text-decoration: underline dotted;
}

article :is(span, abbr)[title]:is(:hover, :active, :focus) {
    text-decoration: none;
    color: rgb(159, 20, 26);
}

/*
   Inline images
   The Yomichan guide utilizes inline images.
*/

article img {
    display: inline-block;
    margin: 0;
}

/* Link buttons */

a.md-button,
a.md-button:visited {
    min-width: 225px;
    max-width: 100%;
    height: 50px;
    color: white;
    background-color: var(--md-button-background, #0b5570);
    font-weight: 700;
    border-radius: 2.2px;
    text-decoration: none;
    line-height: 1.6;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    column-gap: 5px;
    flex-flow: row nowrap;
    transition: background-color 125ms;
    padding: 0 1.8em;
    font-size: 1rem;
    text-shadow: none;
}

a.md-button:is(:hover, :active, :focus) {
    text-decoration: none;
    background-color: var(--md-button-background-hover, #00bad6);
    color: white;
    filter: none;
}

a.md-button::before {
    --icon-side: 1.4em;

    content: "";
    width: var(--icon-side);
    height: var(--icon-side);
    background-size: auto var(--icon-side);
    background-position: center;
    background-repeat: no-repeat;
}

/* Chats - Element */

a.md-button.element {
    background-color: #0dbd8b;
}

a.md-button.element:is(:hover, :active, :focus) {
    background-color: #099970;
}

a.md-button.element::before {
    background-image: url("data:image/svg+xml,%3Csvg width='54' height='54' viewBox='0 0 54 54' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.4414 3.24C19.4414 1.4506 20.892 0 22.6814 0C34.6108 0 44.2814 9.67065 44.2814 21.6C44.2814 23.3894 42.8308 24.84 41.0414 24.84C39.252 24.84 37.8014 23.3894 37.8014 21.6C37.8014 13.2494 31.032 6.48 22.6814 6.48C20.892 6.48 19.4414 5.0294 19.4414 3.24Z' fill='%230DBD8B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M34.5586 50.76C34.5586 52.5494 33.108 54 31.3186 54C19.3893 54 9.71861 44.3294 9.71861 32.4C9.71861 30.6106 11.1692 29.16 12.9586 29.16C14.748 29.16 16.1986 30.6106 16.1986 32.4C16.1986 40.7505 22.9681 47.52 31.3186 47.52C33.108 47.52 34.5586 48.9706 34.5586 50.76Z' fill='%230DBD8B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.24 34.5601C1.4506 34.5601 -6.34076e-08 33.1095 -1.41625e-07 31.3201C-6.63074e-07 19.3907 9.67065 9.72007 21.6 9.72007C23.3894 9.72007 24.84 11.1707 24.84 12.9601C24.84 14.7495 23.3894 16.2001 21.6 16.2001C13.2495 16.2001 6.48 22.9695 6.48 31.3201C6.48 33.1095 5.0294 34.5601 3.24 34.5601Z' fill='%230DBD8B'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M50.76 19.4399C52.5494 19.4399 54 20.8905 54 22.6799C54 34.6093 44.3294 44.2799 32.4 44.2799C30.6106 44.2799 29.16 42.8293 29.16 41.0399C29.16 39.2505 30.6106 37.7999 32.4 37.7999C40.7505 37.7999 47.52 31.0305 47.52 22.6799C47.52 20.8905 48.9706 19.4399 50.76 19.4399Z' fill='%230DBD8B'/%3E%3C/svg%3E%0A");
    filter: grayscale(100%) brightness(2);
}

/* Chats - Telegram */

a.md-button.telegram {
    background-color: #0096d6;
}

a.md-button.telegram:is(:hover, :active, :focus) {
    background-color: #00bdec;
}

a.md-button.telegram::before {
    background-image: url("https://telegram.org/img/t_logo.svg");
}

/* Chats - SimpleX */

a.md-button.simplex {
    background-color: #0053d0;
}

a.md-button.simplex:is(:hover, :active, :focus) {
    background-color: #063b8c;
}

a.md-button.simplex::before {
    background-image: url("https://raw.githubusercontent.com/simplex-chat/simplex-chat/refs/heads/stable/website/src/img/icon.svg");
}

/* Fediverse - Pleroma */

a.md-button.pleroma {
    background-color: #0f161e;
}

a.md-button.pleroma:is(:hover, :active, :focus) {
    background-color: #18232f;
}

a.md-button.pleroma::before {
    background-image: url("https://pleroma.social/images/pleroma_logo_vector_nobg_nopan.svg");
}


/* LibrePay */

a.md-button.lp {
    background-color: #ffee16;
    color: #1a171b;
}

a.md-button.lp:is(:hover, :active, :focus) {
    background-color: #fff463;
    color: #333;
}

a.md-button.lp::before {
    background-image: url("https://liberapay.com/assets/liberapay/icon-v2_white-on-yellow.svg");
}

/* Patreon */

a.md-button.patreon {
    text-transform: uppercase;
    background-color: #f96854;
}

a.md-button.patreon:is(:hover, :active, :focus) {
    background-color: #ff424d;
}

a.md-button.patreon::before {
    background-image: url("/blog/img/patreon_logo.webp");
}

/* Boosty */

a.md-button.boosty {
    background-color: color-mix(in srgb, #ff6701, #262626 30%);
}

a.md-button.boosty:is(:hover, :active, :focus) {
    background-color: color-mix(in srgb, #ff8101, #262626 10%);
}

a.md-button.boosty::before {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Слой_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 235.6 292.2' style='enable-background:new 0 0 235.6 292.2;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:url(%23SVGID_1_);%7D%0A%3C/style%3E%3Cg id='b_1_'%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='145.0777' y1='76.148' x2='80.5868' y2='296.0785'%3E%3Cstop offset='0' style='stop-color:%23EF7829'/%3E%3Cstop offset='5.189538e-02' style='stop-color:%23F07529'/%3E%3Cstop offset='0.3551' style='stop-color:%23F0672B'/%3E%3Cstop offset='0.6673' style='stop-color:%23F15E2C'/%3E%3Cstop offset='1' style='stop-color:%23F15A2C'/%3E%3C/linearGradient%3E%3Cpath class='st0' d='M44.3,164.5L76.9,51.6H127l-10.1,35c-0.1,0.2-0.2,0.4-0.3,0.6L90,179.6h24.8c-10.4,25.9-18.5,46.2-24.3,60.9 c-45.8-0.5-58.6-33.3-47.4-72.1 M90.7,240.6l60.4-86.9h-25.6l22.3-55.7c38.2,4,56.2,34.1,45.6,70.5 c-11.3,39.1-57.1,72.1-101.7,72.1C91.3,240.6,91,240.6,90.7,240.6z'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-size: 28px;
}

/* DonationAlerts */

a.md-button.donationalerts {
    background-color: color-mix(in srgb, #ff6701, #262626 30%);
}

a.md-button.donationalerts:is(:hover, :active, :focus) {
    background-color: color-mix(in srgb, #ff8101, #262626 10%);
}

a.md-button.donationalerts::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 20'%3E%3Cdefs%3E%3ClinearGradient id='da_svg__a' x1='71.526%25' x2='20.024%25' y1='13.678%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23F59C07'%3E%3C/stop%3E%3Cstop offset='100%25' stop-color='%23F57507'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23da_svg__a)' d='M12.647 0c.242 0 .473.107.63.293l3.524 4.148c.144.17.215.393.196.617l-.532 6.132a.839.839 0 01-.248.528l-4.348 4.259a.825.825 0 01-.579.235H6.662L2.587 20l.316-3.79H.83a.829.829 0 01-.612-.271.843.843 0 01-.215-.638L1.268.75c.042-.425.4-.75.827-.75zm-1.558 3.021H4.828a.833.833 0 00-.827.752l-.746 8.517a.852.852 0 00.219.635.839.839 0 00.609.274h6.156c.214 0 .42-.082.574-.23l2.517-2.418a.834.834 0 00.248-.531l.338-3.785a.84.84 0 00-.214-.611l-1.987-2.315a.827.827 0 00-.626-.288zm-2.383 6.9c.078 0 .152.03.205.082a.24.24 0 01.07.193l-.118 1.222c-.012.13-.131.23-.275.23H7.253a.286.286 0 01-.204-.083.231.231 0 01-.07-.192l.118-1.222c.011-.13.13-.23.274-.23h1.335zm.466-5.294c.15 0 .272.12.272.266l-.38 4.13a.27.27 0 01-.262.232h-1.36a.27.27 0 01-.272-.266l.37-4.128a.27.27 0 01.272-.234h1.36z'%3E%3C/path%3E%3C/svg%3E");
}

/* Donations button (footer) */

a.md-button.donations {
    min-width: 100px;
    width: 100%;
    text-transform: uppercase;
    background-color: #5e5e5e;
    border-bottom: 1px solid #2626261b;
    border-right: 1px solid #2626261b;
    box-shadow: inset 1px 1px 0 #777, 0 2px 3px rgba(0, 0, 0, 0.4);
}

a.md-button.donations:is(:hover, :active, :focus) {
    background-color: #757575;
}

a.md-button.donations::before {
    background-image: url("/img/heart.svg");
    filter: grayscale(100%) invert(100%);
}

/* ToC navigation */

#divbodyholder > #divbody {
    position: relative;
}

.toc_navigation {
    position: absolute;
    z-index: 50;
    bottom: -1rem;
    right: 0px;
    padding-right: inherit;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    gap: 10px;
}

.toc_navigation > a {
    min-width: 50px;
    height: 31px;
    padding: 0 1.4em;
}

.toc_navigation > a::before {
    background-image: url("/blog/img/up-arrow.svg");
    filter: invert(1);
    width: 1em;
    height: 1em;
    background-size: 1em;
}

.toc_navigation > a.next::before {
    rotate: 90deg;
}

.toc_navigation > a.prev::before {
    rotate: -90deg;
}

/* copy/select button for code blocks */

article div.pre-wrap {
    /* Wraps all pre tags. */
    position: relative;
}

article pre > .select_button {
    position: absolute;
    display: block;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 3px 6px;
    margin: 0;
    right: 6px;
    top: 6px;
    text-transform: capitalize;
    background-color: var(--code-bg-color);
    border: 1px solid #1b1f2426;
    border-radius: 6px;
    transition: background-color cubic-bezier(0.33, 1, 0.68, 1) 80ms, opacity ease-in 0.15s, visibility ease-in 0.15s;
    color: #57606a;
    cursor: pointer;
    visibility: hidden;
    opacity: 0;
}

article pre > .select_button::before {
    content: "";
    background-image: url("/blog/img/copy-to-clip.svg");
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: -4px;
    cursor: pointer;
    filter: invert(34%) sepia(19%) saturate(307%) hue-rotate(171deg) brightness(99%) contrast(87%);
}

article pre > .select_button:is(:hover, :active, :focus) {
    background-color: #f3f4f6;
}

article pre > .select_button:active {
    background-color: #ebecf0;
}

article pre:is(:hover, :active, :focus) > .select_button {
    visibility: visible;
    opacity: 1;
}

/* Status tooltip for copy/select button */

article pre > .select_button::after {
    display: block;
    content: "";
    line-height: 18px;
    min-width: 90px;
    background-color: #000000b2;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 3px 0px;
    position: absolute;
    z-index: 150;
    top: 0px;
    right: calc(100% + 6px);
    opacity: 0;
    visibility: hidden;
}

article pre:is(:hover, :active, :focus) > .select_button[status]::after {
    visibility: visible;
    opacity: 1;
}

.select_button[status="copied"]::after {
    content: "Copied.";
}

.select_button[status="selected"]::after {
    content: "Selected.";
}

/* Footer */

footer {
    font-size: 1rem;
    border-top: solid 1px var(--box-sep-color, #ccc);
    background-color: #51628f;
    background-image: linear-gradient(rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.66)), url("/img/bg.webp");
    color: white;
    text-shadow: #0006 1px 1px 2px;
    position: relative;
}

footer p {
    line-height: 1.5;
}

footer a,
footer a:visited {
    color: #e9e2dc;
}

footer a:is(:hover, :active, :focus) {
    color: #fff8ee;
}

footer > .footer-linkbox {
    display: grid;
    max-width: 1350px;
    margin: 0 auto;
    grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
    gap: 1rem;
    align-content: start;
    justify-content: space-around;
    text-align: left;
    padding: 15px 10px;
}

footer > .footer-linkbox div {
    padding: 5px;
}

footer > .footer-linkbox h3 {
    text-transform: uppercase;
    font-size: 1.3125rem;
    line-height: 25px;
    letter-spacing: 0px;
    margin-bottom: 10px;
}

footer > .footer-linkbox p {
    margin-bottom: 1rem;
}

footer > .footer-linkbox p:last-child {
    margin-bottom: 0;
}

footer > .footer-linkbox ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

footer > .footer-linkbox ul li a {
    line-height: 28px;
    display: inline-block;
}

footer > .footer-bottom {
    background-color: #0004;
    font-size: 0.875rem;
    text-align: center;
    padding: 10px 4px;
    border-top: 1px solid #ffffff1e;
}

/* Mega links */

a.mega_link {
    display: inline-block;
    width: 1em;
    aspect-ratio: 1 / 1;
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' height='361.39999' viewBox='0 0 361.39998 361.39998' width='361.39999'%3E%3Cpath fill='%23d9272e' d='M180.7 0C80.9 0 0 80.9 0 180.7c0 99.8 80.9 180.7 180.7 180.7 99.8 0 180.7-80.9 180.7-180.7C361.4 80.9 280.5 0 180.7 0Zm93.8 244.6c0 3.1-2.5 5.6-5.6 5.6h-23.6c-3.1 0-5.6-2.5-5.6-5.6v-72.7c0-.6-.7-.9-1.2-.5l-50 50c-4.3 4.3-11.4 4.3-15.7 0l-50-50c-.4-.4-1.2-.1-1.2.5v72.7c0 3.1-2.5 5.6-5.6 5.6H92.4c-3.1 0-5.6-2.5-5.6-5.6V116.8c0-3.1 2.5-5.6 5.6-5.6h16.2c2.9 0 5.8 1.2 7.9 3.3l62.2 62.2c1.1 1.1 2.8 1.1 3.9 0l62.2-62.2c2.1-2.1 4.9-3.3 7.9-3.3h16.2c3.1 0 5.6 2.5 5.6 5.6v127.8z'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    vertical-align: middle;
    top: -0.125em;
    margin-inline-start: 0.5ch;
    user-select: none;
    cursor: pointer;
}

/* Floating images in articles */

article img[float] {
    /* Mobile screens first */
    float: none;
    display: block;
    margin-inline: auto;
    max-height: min(40vh, 250px);
}

article * + img[float] {
    margin-block: 1rem 0;
}

@media only screen and (min-width: 800px) {
    /* Wide screens. Enable floating. */
    article img[float] {
        float: right;
        max-width: 33.3%;
        margin-inline: 5px 0;
    }

    article img[float="left"] {
        float: left;
        margin-inline: 0 5px;
    }
}

/* Audio elements with controls */

article audio {
    display: block;
    max-width: 100%;
    margin: 0.25em 0 0;
    height: 1.8em;
}

/* Notes in articles and Magnet links */

article .article-note,
article a[href^="magnet:?"]:not(.download_button) {
    --paint-with: green;

    color: var(--paint-with, black);
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: baseline;
    font-weight: bold;
    gap: 3px;

    &::before {
        content: "";
        background-color: var(--paint-with);
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='octicon octicon-info mr-2' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E");
        background-repeat: no-repeat;
        width: 1em;
        aspect-ratio: 1/1;
        align-self: center;
    }
}

/* Magnet links, Magnet icon */

article a[href^="magnet:?"]:not(.download_button) {
    --paint-with: #cb4154;
    flex-direction: row-reverse;

    &:is(:hover, :active, :focus) {
        filter: hue-rotate(20deg) saturate(140%);
    }

    &::before {
        mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg viewBox='0 0 16 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath fill='black' d='M11 0h5v4h-5v-4z'%3E%3C/path%3E%3Cpath fill='blac4' d='M11 5v3c0 1.6-1.4 3-3 3s-3-1.4-3-3v-3h-5v3c0 4.4 3.6 8 8 8s8-3.6 8-8v-3h-5z'%3E%3C/path%3E%3Cpath fill='blac4' d='M0 0h5v4h-5v-4z'%3E%3C/path%3E%3C/svg%3E%0A");
    }
}

/* Onion links */

article a[href^="http://"][href*=".onion"]
{
    display: inline-flex;
    flex-flow: row nowrap;
    align-items: baseline;
}

article a[href^="http://"][href*=".onion"]::after
{
    content: "";
    width: 1em;
    aspect-ratio: 1/1;
    align-self: center;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABEJJREFUeNrEVl1sTGkYfmfVmvrpHFWZhm5nLvy0g5npBWqT1lRUY4M0IV2hbdoLMUIMF1z4t7Gb4IL6S5eLFmPZFZQSrEaaNlEt0RJCK+g0Km3pz5BGiTre55s5o1OtzJkO3uTJd87MOd/zvs/7cz6ib2D2otlGgH6EMbGNURDo85oQk+fw4mCkMNIZMxlr89NLOvp7JyxExNt4qWfsYWxnVDNAmvI18pAowORWXrYybF4ncF8TCDnspxAI4PCSS2rJB6wARw/S9h4/gTSByesD3WOgCth63aeoIQ/aAY1Gk84weqtcMVR7jdq9BgXpwGJezjU9csf9HB6mlWKGlTL5iu82bBD9/AVz5Cv/n5QtFpPM988Y1u868ZhQ7ux6Km/cvEY2jpoIJ2zB7BNsDUjKtbvjNWnDwvsqyG8WucQ4l5W9SH5YWyZSkBaXAQWCVkFt9bcnz0yUXzTXyIeP7BZACn5PWCGHDx4KJ/b0VCgkXeCN+qROF7Htjx3rtHn7d1BL80tyu9+QVjuE9LEStdV105y4DGrtbEps7Wy28/O1/OqjUERtRZVDakiOwgOQAqiAIsRqibfKW9LyBXqqMSAFvMOmIjNrYXTh8TzS60dz1K8pJ9tBqanJNHVaAjW4nlNX13uaaDJSeckdih7xC0UNi6ZxUZPoQdPtxG75A9JxNdjoqxGpEvW/p/+Wkf+KqkviHorgWqmJOP1nFYDlv25SlLCpVoBfyjEYYuyXr/4j7v/6cx/dqqqhU//lCyVgTucZknQRxM9RXe1TunGrkiZHzvDtMXxIBHV//ECu9jo4kKd2Djg2bFwtLk4cPyPW/MO7fH9eLL5GZrNJrEuzFlJ5eSXpx0ZSx9tWv02mGWZhThj7m5Rfc8A6b0GqyHkxkyjOwA4eKBADKCl5OsUaxlJ5WaX4HUq4u/wdwJAyRE4g7xEtMAeQM2zGbUdOjn7lqlzP1GNn5qYtYeJEETUM/53gVEwxx5OLC7IvQ2GyWVSdCREZDNEpDixftp527t7M0sf70gAlYtlZ1ALM1faYDCMn9LWlpCYF9Q2uRr8fQAbJFXK0H5xzNTRSUtJ0UQO93+m9Z8AOyLJcz3J2gMRsMdG9ew8FMr2yK12xYdNqoYDZ4pEfMESO/5K5vQ7LXbVFWOR0nqV581N9XQAyJXrkHDWikyKYuNFXiL0NXeFqEw4UqXXg6MH9BZzbESIyHa/oBpFnJkQL9kyPYnpPwfms7MklLKVQVZUD/EIpV/3exRl2ltohVDh0oFB0gqKCYnDOQx6jnA2E3X1RAeCknBvUgYSdWMu5L7QvWydaT+kEFCOKztMlN33yW8bM8CO/cP8YLnP7iz7Qz/H5lpZXGh61tmb+BL97914QYhzjk3yxuESMaCl8FP1mWkKN7md04cExqnJdB2kKlAzZQZRRgAOJ9/TjBxxKRg6NwnU1viOB7vtJgAEAHxwDVZNJYl8AAAAASUVORK5CYII=");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Details elements */

details {
    --spacing: 0.5rem;
    outline: 1px solid var(--details-border-color, #0098d4);
    border-radius: calc(var(--spacing) / 3);
    padding: 0 var(--spacing);
}

details[open] {
    padding: 0 var(--spacing) var(--spacing);
}

details summary {
    background-color: var(--summary-background-color, #00b8d415);
    color: var(--summary-text-color, #1f56aa);
    cursor: pointer;
    padding: calc(var(--spacing) / 3) var(--spacing);
    margin: 0 calc(-1 * var(--spacing));
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: calc(var(--spacing) / 1.5);
    user-select: none;
}

details summary::before {
    --tri-size: 0.4rem;
    --tri-color: currentColor;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: var(--tri-size) solid transparent;
    border-right: var(--tri-size) solid transparent;
    border-top: calc(var(--tri-size) * 1.5) solid var(--tri-color);
    rotate: -90deg;
    transition: rotate 0.2s;
}

details[open] summary::before {
    rotate: 0deg;
}

details summary::after {
    content: "(click here)";
    color: var(--summary-text-color);
    opacity: 60%;
    font-size: 70%;
    font-weight: bold;
    margin-left: auto;
}

details summary + * {
    margin-top: var(--spacing);
}

details summary > * {
    display: inline;
}

/* Highlight important blocks */

details.important_details {
    --main-color: green;

    outline-color: color-mix(  in oklab, var(--main-color) 70%, rgba(0 0 0 / 0%)  );
    background-color: color-mix(  in oklab, var(--main-color) 5%, rgba(0 0 0 / 0%)  );
    summary {
      background-color: color-mix(  in oklab, var(--main-color) 20%, rgba(0 0 0 / 0%)  );
      color: var(--summary-important-text-color, black);
    }
}

/* Downstep line colors (used in articles about pitch accent) */

.heiban {
    --downstep-color: #3366cc;
}
.atamadaka {
    --downstep-color: #ff0000;
}
.odaka {
    --downstep-color: #008000;
}
.nakadaka {
    --downstep-color: #eb8500;
}

/* Downstep lines. */

.HL {
    box-shadow: inset -2px 2px 0 0px var(--downstep-color, currentColor);
}
.L {
    box-shadow: inset 0px -2px 0 0px var(--downstep-color, currentColor);
}
.LH {
    box-shadow: inset -2px -2px 0 0 var(--downstep-color, currentColor);
}
.H {
    box-shadow: inset 0px 2px 0 0px var(--downstep-color, currentColor);
}