:root {
    --bg: #fff;
    --side: #f5f6f8;
    --ink: #1c2128;
    --mut: #5d6675;
    --line: #e1e4ea;
    --acc: #2447c9;
    --code: #f2f4f7;
    --tag: #e6ecfc;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px)
}

@media(prefers-color-scheme:dark) {
    :root:not([data-theme="light"]) {
        --bg: #11151c;
        --side: #151a23;
        --ink: #e4e8ee;
        --mut: #97a1b0;
        --line: #262d3a;
        --acc: #86a1ff;
        --code: #1a2030;
        --tag: #222c4a
    }
}

:root[data-theme="dark"] {
    --bg: #11151c;
    --side: #151a23;
    --ink: #e4e8ee;
    --mut: #97a1b0;
    --line: #262d3a;
    --acc: #86a1ff;
    --code: #1a2030;
    --tag: #222c4a
}

* {
    box-sizing: border-box
}

@media (prefers-reduced-motion: no-preference) {
    *,
    *::before,
    *::after {
        transition: background-color 350ms ease, color 350ms ease, border-color 350ms ease
    }
}

html {
    scroll-padding-top: 64px
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 15.5px/1.7 "IBM Plex Sans", system-ui, sans-serif
}

a {
    text-decoration: none;
    color: var(--acc)
}

code,
pre {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 13px
}

header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    gap: 16px;
    align-items: center;
    height: 48px;
    padding: 0 18px;
    background: var(--bg);
    border-bottom: 1px solid var(--line)
}

.logo {
    font-weight: 600;
    font-size: 16px;
    color: var(--ink);
    text-decoration: none
}

.logo:hover {
    color: var(--acc)
}

header nav a {
    color: var(--ink);
    text-decoration: none;
    margin-right: 12px;
    font-size: 14px
}

header nav a:hover {
    color: var(--acc)
}

header .sp {
    flex: 1
}

select,
button {
    font: inherit;
    font-size: 13px;
    color: var(--ink);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 3px 8px;
    cursor: pointer
}

#th {
    display: flex;
    align-items: center;
    gap: 6px
}

#theme-icon {
    font-size: 15px;
    line-height: 1
}

#menu {
    display: none
}

.wrap {
    display: flex
}

aside {
    width: 210px;
    flex: none;
    position: sticky;
    top: 48px;
    height: calc(100vh - 48px);
    overflow: auto;
    padding: 14px 10px 24px;
    background: var(--side);
    border-right: 1px solid var(--line);
    font-size: 13.5px;
    line-height: 1.4
}

aside h4 {
    margin: 14px 8px 4px;
    font-size: 12.5px;
    color: var(--mut);
    font-weight: 600
}

aside h4:first-child {
    margin-top: 2px
}

aside a {
    display: block;
    padding: 4px 8px;
    color: var(--ink);
    text-decoration: none;
    border-radius: 3px
}

aside a:hover {
    background: var(--line)
}

aside a.on {
    background: var(--tag);
    color: var(--acc);
    font-weight: 500
}

main {
    flex: 1;
    min-width: 0;
    max-width: 820px;
    margin: 0 auto;
    padding: 24px 36px 56px
}

.crumb {
    font-size: 13px;
    color: var(--mut)
}

.crumb a {
    color: var(--mut);
    text-decoration: none
}

.crumb a:hover {
    color: var(--acc);
    text-decoration: underline
}

h1 {
    font-size: 30px;
    line-height: 1.25;
    margin: 8px 0 4px
}

.lead {
    color: var(--mut);
    margin: 0 0 20px;
    font-size: 16.5px
}

h2 {
    font-size: 20px;
    margin: 30px 0 8px;
    padding-top: 8px;
    border-top: 1px solid var(--line)
}

pre {
    background: var(--code);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 11px 14px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.5
}

:not(pre)>code {
    background: var(--code);
    padding: 1px 5px;
    border-radius: 3px
}

table {
    border-collapse: collapse;
    width: 100%;
    display: block;
    overflow-x: auto;
    scrollbar-width: none;
    font-size: 14px
}

table::-webkit-scrollbar {
    display: none
}

th,
td {
    border: 1px solid var(--line);
    padding: 6px 10px;
    text-align: left;
    vertical-align: top
}

th {
    background: var(--code)
}

.tag {
    display: inline-block;
    background: var(--tag);
    color: var(--acc);
    border-radius: 3px;
    padding: 0 7px;
    font-size: 12.5px;
    margin: 0 6px 8px 0
}

.note {
    border-left: 3px solid var(--acc);
    background: var(--side);
    padding: 8px 14px;
    margin: 16px 0
}

.toc {
    font-size: 13.5px;
    border: 1px solid var(--line);
    background: var(--side);
    padding: 8px 14px;
    margin: 0 0 18px;
    border-radius: 4px
}

.toc a {
    margin-right: 14px;
    white-space: nowrap
}

.cta a {
    display: inline-block;
    margin: 6px 10px 6px 0;
    padding: 7px 15px;
    border: 1px solid var(--acc);
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500
}

.cta a:first-child {
    background: var(--acc);
    color: var(--bg)
}

.pn {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 40px
}

.pn a {
    border: 1px solid var(--line);
    padding: 7px 13px;
    border-radius: 4px;
    text-decoration: none;
    background: var(--side)
}

@media(max-width:860px) {
    #menu {
        display: inline-block
    }

    header nav {
        display: none
    }

    aside {
        display: none;
        position: fixed;
        top: 48px;
        left: 0;
        z-index: 4;
        width: 78%;
        max-width: 280px;
        height: calc(100% - 48px)
    }

    aside.open {
        display: block
    }

    main {
        padding: 18px 16px 48px
    }
}