/* 記事ページの見た目（exp/index62 から分けたもの）
   向きは論理プロパティで書く（block = 行が積まれる向き、inline = 文字が並ぶ向き）。
   vw・vh の単位、グラデーションの向き、overflow-x、JS が書き込む位置は物理のまま（横書きでは同じ意味になる）。 */
* { box-sizing: border-box; margin: 0; }
@property --fi { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --fo { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --d  { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --u  { syntax: "<number>"; inherits: false; initial-value: 0; }
:root {
    --ink: #1d1d1b;          /* 文字 */
    --pale: #a9a9a5;
    --bg: #d6d6d2;           /* 地。記事の種類の色をここに混ぜるので、色味のない灰のまま（一覧の #FFEAEC にはしない） */
    --lit: #e7e6e2;          /* 帯 */
    --shade: #1d1d1b;        /* 帯の外を沈める色 */
    --muted: #3a3936;        /* 控えめな文字（地の上で 7:1 以上） */
    --faint: #353432;        /* 小さい補足の文字。沈んだ帯の上でも 7:1 前後。強弱は大きさと太さで付ける */
    --card-bg: #f1f0ec;      /* 右上やカードの面：明るい表示では明るく */
    --card-fg: #1d1d1b;
    --card-line: rgb(29 29 27 / .16);
    --band: 40svh;
    --band-top: calc(50svh - var(--band) / 2);
    --mark-top: calc(var(--band-top) - 48px);   /* 目印が止まり、印が縮む線。読む線より一段上 */
    --fx: calc(var(--fi) * var(--fo));
    --peek: 96px;
    --gutter: 48px;
    --mark: 22px;
    --tail: 240px;
    --right: 40px;           /* 右の灰色の帯（左の溝と同じくらい） */
    --col: min(36ic, 100vw - var(--gutter) - var(--right));
    --aw: calc(var(--gutter) + 36ic + var(--right));
    --left: max(0px, (100vw - var(--aw)) / 2);
    /* 目印の色（切り替えで変わる） */
    /* 左の目印と跡：灰色。目印（頭）は濃く、跡（胴）は薄く、下へいくほどさらに薄く */
    --mark-c: color-mix(in oklch, var(--ink) calc(var(--fx) * 46%), transparent);
    --trail-top: color-mix(in oklch, var(--ink) calc(var(--fx) * 11%), transparent);
    --trail-end: color-mix(in oklch, var(--ink) calc(var(--fx) * 5%), transparent);
    --pin-c: color-mix(in oklch, var(--ink) calc(var(--fx) * 52%), transparent);
}

/* 左右の帯：記事種別の色をうっすら。種別がなければ灰色 */
/* ダーク：反転ではなく別の値。地は暗い灰、帯は少し明るい程度、文字は真っ白にしない */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ink: #dcdad3; --pale: #6c6b66; --bg: #22221f; --lit: #2d2d2a; --shade: #000;
        --muted: #c2c0b9; --faint: #b6b4ad; --card-bg: #2c2c29; --card-fg: #dcdad3; --card-line: rgb(220 218 211 / .18);
    }
}
:root[data-theme="dark"] {
    --ink: #dcdad3; --pale: #6c6b66; --bg: #22221f; --lit: #2d2d2a; --shade: #000;
    --muted: #c2c0b9; --faint: #b6b4ad; --card-bg: #2c2c29; --card-fg: #dcdad3; --card-line: rgb(220 218 211 / .18);
    color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
:root { --kind: transparent; } /* 種類のない記事は色を敷かない（灰色は「思想」の色なので使わない） */
/* 記事の種類の色：content/kinds.md の色の番号で選ぶ。系統で仲間を見せる（知らせ＝赤〜黄、成果＝青〜紫、読み物＝灰・緑・茶） */
:root:has(article[data-color="1"]) { --kind: #c0182f; } /* 謹告 */
:root:has(article[data-color="2"]) { --kind: #d9661a; } /* 重要なお知らせ */
:root:has(article[data-color="3"]) { --kind: #d4a514; } /* お知らせ */
:root:has(article[data-color="4"]) { --kind: #1f5fbf; } /* 査読付き論文 */
:root:has(article[data-color="5"]) { --kind: #2a9fd6; } /* 査読なし論文 */
:root:has(article[data-color="6"]) { --kind: #7a4fc2; } /* 研究 */
:root:has(article[data-color="7"]) { --kind: #7d8590; } /* 思想 */
:root:has(article[data-color="8"]) { --kind: #2f9e57; } /* 創作 */
:root:has(article[data-color="9"]) { --kind: #9a6b3f; } /* 雑記 */
html {
    background: color-mix(in oklch, var(--kind) calc(var(--fx) * 22%),
        color-mix(in srgb, var(--shade) calc(var(--fx) * 6%), var(--bg)));
}
:root[data-plain] { --fx: 0; }
body {
    background: none;
    font-family: system-ui, sans-serif;
    font-size: 17px;
    line-height: 32px;
    color: var(--ink);
}
:lang(ja) { letter-spacing: .02em; }
:lang(en) { letter-spacing: 0; hyphens: auto; }
article { overflow-wrap: anywhere; }
@media (width >= 768px) { body { font-size: 18px; } }
/* 本文中のリンク：下線も色もなし（気づかずに読める）。キー操作で来たときだけ枠が出る */
a { color: inherit; text-decoration: none; }
html { -webkit-tap-highlight-color: transparent; }
:focus { outline: none; }
/* フォーカス：3px の実線、文字色。地との差は 7:1 以上 */
:is(a, button, [tabindex="0"], summary, input, .g-pin):focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
#card :focus-visible, #settings :focus-visible, #contents :focus-visible { outline-color: var(--card-fg); }

/* ---- 光の帯（index26 の形）。左右だけ本文の列でくっきり ---- */
body::before {
    content: "";
    position: fixed;
    z-index: -1;
    inset-block-start: 0;
    inset-block-end: 0;
    /* 文字の列の左右に 1em ずつ（帯の縁と文字が詰まりすぎないように） */
    inset-inline-start: calc(var(--left) + var(--gutter) - 1em);
    inline-size: calc(var(--col) + 2em);
    /* 上下の端から中央へ、ゆっくり明るくなる */
    background: linear-gradient(
        transparent 2%,
        color-mix(in srgb, var(--lit) 25%, transparent) 12%,
        color-mix(in srgb, var(--lit) 60%, transparent) 21%,
        var(--lit) 30% 70%,
        color-mix(in srgb, var(--lit) 60%, transparent) 79%,
        color-mix(in srgb, var(--lit) 25%, transparent) 88%,
        transparent 98%);
    opacity: var(--fx);
}

article {
    max-inline-size: var(--aw);
    margin-inline: auto;
    padding-block: 0 50svh; padding-inline: var(--gutter) var(--right);
    text-wrap: pretty;
    word-break: auto-phrase;
    text-spacing-trim: normal;
    hanging-punctuation: allow-end;
}
/* ---- 題名の画面 ----
   前後の記事 → 画像（その中にシリーズ・題名・日付・キーワード。右上に記事種別）→ 著者 → アブスト。
   画像がないときも同じ枠（細い線と記事種別の色を薄く敷いた面）に収める */
article > header {
    position: relative;
    min-block-size: calc(100svh - var(--peek));
    display: grid;
    grid-template-rows: auto minmax(120px, 1fr) auto auto auto auto;
    align-content: start;
    padding-block: 72px 48px; padding-inline: 0;
    margin-block-end: 48px;
    border-block-end: 2px solid var(--kind);
}
/* 前後の記事：画像の上。並ばないときは上下に積む */
article > header > nav {
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18em), 1fr));
    gap: 6px 12px;
    padding-block-end: 12px;
    font-size: 13px;
    line-height: 20px;
}
article > header > nav a[rel] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0 6px;
    min-block-size: 44px;
    padding-block: 6px; padding-inline: 10px;
    border-start-start-radius: 2px; border-start-end-radius: 8px; border-end-end-radius: 8px; border-end-start-radius: 2px;
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    color: var(--muted);
}
article > header > nav a[rel]:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
article > header > nav a[rel] small { grid-column: 2; font-size: 11px; line-height: 14px; letter-spacing: .06em; text-transform: uppercase; }
article > header > nav a[rel]::before {
    content: "chevron_left";
    content: "chevron_left" / "";
    grid-row: 1 / span 2;
    font: 18px/1 "Material Symbols Sharp";
    font-feature-settings: "liga";
}
article > header > nav a[rel="next"] { grid-template-columns: 1fr auto; text-align: end; border-start-start-radius: 8px; border-start-end-radius: 2px; border-end-end-radius: 2px; border-end-start-radius: 8px; }
/* 向きを形で：前は右端を、次は左端を詰める */
article > header > nav a[rel="prev"] { margin-inline-end: 1.5em; }
article > header > nav a[rel="next"] { margin-inline-start: 1.5em; }
article > header > nav a[rel="next"] small { grid-column: 1; }
article > header > nav a[rel="next"]::before { content: "chevron_right"; content: "chevron_right" / ""; grid-column: 2; }
article > header > nav a[rel="next"]:only-child { grid-column: -2; }

/* 画像の枠：画像があってもなくても細い線 */
article > header > img {
    grid-row: 2 / 7;
    grid-column: 1;
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 240px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 10px;
}
article > header::before {
    content: "";
    grid-row: 2 / 7;
    grid-column: 1;
    z-index: 1;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
    background: linear-gradient(transparent 10%, rgb(20 20 18 / .55) 45%, rgb(20 20 18 / .85));
    pointer-events: none;
}
/* 画像がないとき：記事種別の色を薄く敷き、文字は地の色のまま */
article > header:not(:has(> img))::before { background: color-mix(in srgb, var(--kind) 10%, color-mix(in srgb, var(--ink) 3%, transparent)); }
article > header > :is(p[data-series], h1, h1 + p, ul[aria-label="Keywords"], [data-kind-name]) { grid-column: 1; z-index: 2; margin: 0; }
article > header:has(> img) > :is(p[data-series], h1, h1 + p, ul[aria-label="Keywords"]) { color: #f4f3ef; text-shadow: 0 1px 12px rgb(0 0 0 / .5); }

/* 記事種別：画像の右上に小さく（色と文字の両方で） */
article > header > [data-kind-name] {
    grid-row: 2;
    align-self: start;
    justify-self: end;
    margin: 12px;
    padding-block: 2px; padding-inline: 10px;
    border-radius: 2px;
    background: color-mix(in srgb, var(--kind) 45%, #000); /* 白い文字との差が 9 色とも 7:1 以上（AAA） */
    color: #f4f3ef;
    font-size: 12px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: .04em;
}
article > header > [data-kind-name]:empty { display: none; }

/* シリーズ：題名の上。名前と番号 */
article > header > p[data-series] {
    grid-row: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    align-items: baseline;
    padding-block: 0 4px; padding-inline: 24px;
    font-size: 13px;
    line-height: 22px;
}
article > header > p[data-series] a { font-weight: 600; }
article > header > p[data-series] a:hover { text-decoration: underline; }
article > header > p[data-series] span { font-variant-numeric: tabular-nums; }
article > header > p[data-series] small { opacity: .8; }
h1 { font-size: 40px; line-height: 52px; letter-spacing: 0; text-wrap: balance; }
article > header > h1 { grid-row: 4; padding-block: 0 2px; padding-inline: 24px; }
/* 日付：題名の下 */
article > header > h1 + p {
    grid-row: 5;
    display: flex;
    flex-wrap: wrap;
    gap: 0 16px;
    padding-block: 0 8px; padding-inline: 24px;
    font-size: 13px;
    line-height: 22px;
}
/* 何日前：日付のすぐ後ろに小さく（日付とは間を詰める） */
article > header > h1 + p .ago { margin-inline-start: -10px; opacity: .75; }
article > header > h1 + p span .ago { margin-inline-start: .4em; }
/* 翻訳版：日付の並びの最後に、言語の名前だけ */
article > header > h1 + p a[data-translation] { text-decoration: underline; text-underline-offset: 3px; }
/* キーワード：画像の中の一番下。多いときは数個だけ見せて「+n more」 */
article > header > ul[aria-label="Keywords"] {
    grid-row: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-block: 0 20px; padding-inline: 24px;
    list-style: none;
    font-size: 12px;
    line-height: 22px;
}
article > header > ul[aria-label="Keywords"] li { margin: 0; padding-block: 0; padding-inline: 7px; border: 1px solid currentColor; border-radius: 3px; }
article > header > ul[aria-label="Keywords"] li[hidden] { display: none; }
article > header > ul[aria-label="Keywords"] button {
    min-block-size: 24px;
    padding-block: 0; padding-inline: 7px;
    border: 0;
    border-radius: 3px;
    background: rgb(255 255 255 / .18);
    color: inherit;
    font: inherit;
    cursor: pointer;
}
article > header:not(:has(> img)) > ul[aria-label="Keywords"] button { background: color-mix(in srgb, var(--ink) 10%, transparent); }

/* 著者（画像の外）：スマホは縦、PC は横。所属と ID 付き。押すと著者のページ */
/* 著者：題名などの文字と同じ縦の線にそろえる（画像の枠の内側の 24px） */
article > header > ul[aria-label="Authors"] {
    grid-row: 7;
    padding-inline: 24px !important;
    display: grid;
    gap: 10px 32px;
    margin-block-start: 20px;
    padding: 0;
    list-style: none;
}
@media (width >= 768px) { article > header > ul[aria-label="Authors"] { grid-auto-flow: column; justify-content: start; } }
/* 本文の箇条書きの「li + li の上の間」をここでは消す（横に並べたとき、2 人目以降だけ下へずれないように）。間は gap で */
article > header > ul[aria-label="Authors"] li + li { margin-block-start: 0; }
article > header > ul[aria-label="Authors"] li > a {
    display: grid;
    grid-template-columns: 32px auto;
    gap: 0 10px;
    align-items: center;
    min-block-size: 44px;
    font-size: 14px;
    line-height: 20px;
}
article > header > ul[aria-label="Authors"] :is(img, [data-icon]) { grid-row: 1 / span 2; inline-size: 32px; block-size: 32px; border-radius: 50%; object-fit: cover; }
article > header > ul[aria-label="Authors"] [data-icon]::before { font-size: 32px; margin: 0; vertical-align: 0; color: var(--faint); }
article > header > ul[aria-label="Authors"] small { font-size: 12px; color: var(--faint); }
article > header > ul[aria-label="Authors"] a:hover b { text-decoration: underline; }
/* アブスト：小見出しと左の線。溝に要約のアイコン */
article > header > p[data-abstract] {
    grid-row: 8;
    position: relative;
    margin-block-start: 28px;
    padding-inline-start: 16px;
    border-inline-start: 3px solid color-mix(in srgb, var(--kind) 40%, transparent);
    font-size: 15px;
    line-height: 26px;
    color: var(--muted);
}
article > header > p[data-abstract]::after {
    content: "summarize";
    content: "summarize" / "";
    position: absolute;
    inset-inline-start: calc(var(--gutter) / -2 - 9px - 3px);
    inset-block-start: 2px;
    font: 18px/1 "Material Symbols Sharp";
    font-feature-settings: "liga";
    color: color-mix(in srgb, var(--ink) 45%, transparent);
}

/* 見出しの終わり：最後の文字のすぐ後ろに、記事種別の色の縦線。折り返しても、どこで終わるかが分かる */
:is(h1, h2, h3)::after {
    content: "";
    content: "" / "";
    display: inline-block;
    inline-size: 3px;
    block-size: 1.25em;
    margin-inline-start: .22em;
    vertical-align: -.24em;
    border-radius: 1px;
    background: var(--kind);
}
section {
    position: relative;
    padding-block-start: 96px;
    scroll-margin-block-start: max(0px, calc(var(--band-top) - 96px));
}
/* 見出しは「後ろの文の頭」：前は広く、後ろは狭く（見出しがどの文のものか、近さで分かる）。
   段の深い見出しほど、前の余白も小さく（節 96px → 小見出し 64px → もう一段 40px）。
   段落の間は 48px（行の高さ 32px の 1.5 倍。WCAG 1.4.8 AAA） */
h2 { font-size: 28px; line-height: 40px; letter-spacing: 0; margin-block-end: 24px; text-wrap: balance; overflow-wrap: anywhere; }
h3 { position: relative; font-size: 21px; line-height: 32px; margin-block: 64px 12px; text-wrap: balance; }
h4 { font-size: 1em; line-height: 32px; font-weight: 700; margin-block: 40px 4px; text-wrap: balance; }
p, ul, ol { margin-block-end: 48px; }
section > :last-child { margin-block-end: 0; }

/* ---- 文字の濃淡（index26 の値：帯の外は透明度 .2・blur 3px まで） ---- */
section > :is(p, ul, ol, blockquote, h2, h3, h4, aside), article > header > * {
    animation: dist linear both;
    animation-timeline: view();
    animation-range: cover;
    opacity: calc(1 - var(--fx) * var(--d) * .8);
    filter: blur(calc(var(--fx) * var(--d) * 3px));
}
@keyframes dist {
    0% { --d: 1; }
    35%, 65% { --d: 0; }
    100% { --d: 1; }
}
::search-text { color: var(--ink); }
section > :is(:focus-within, :target) { animation: none; }

/* 最初の半画面で現れ、最後で消える */
:root {
    animation: fade-in linear both, fade-out linear both;
    animation-timeline: scroll(root), scroll(root);
    animation-range: 0 50svh, calc(100% - 60svh) 100%;
}
@keyframes fade-in { from { --fi: 0; } to { --fi: 1; } }
@keyframes fade-out { from { --fo: 1; } to { --fo: 0; } }

/* ---- コード・数式・画像：かたまりごと ---- */
pre, math[display="block"], figure {
    position: relative;
    inline-size: 100%;
    margin-block-end: 48px;
    animation: unit linear both;
    animation-timeline: view(block 30% 30%);
    animation-range: cover;
}
@keyframes unit {
    0% { --u: 1; }
    10%, 90% { --u: 0; }
    100% { --u: 1; }
}
pre, math[display="block"], figure {
    opacity: calc(1 - var(--fx) * var(--u) * .8);
    filter: blur(calc(var(--fx) * var(--u) * 3px));
}
math[display="block"], pre > code { display: block; overflow-x: auto; }
pre {
    padding-block: 12px; padding-inline: 24px;
    font: 14px/24px ui-monospace, monospace;
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    border-start-start-radius: 4px; border-start-end-radius: 16px; border-end-end-radius: 16px; border-end-start-radius: 4px;
}
math[display="block"] { padding-block: 12px; font-size: 20px; }
:root[data-theme="dark"] article img { filter: brightness(.88); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) article img { filter: brightness(.88); } }
figure img { display: block; max-inline-size: 100%; block-size: auto; cursor: zoom-in; }
/* 画像を大きく見る */
#view {
    margin: auto;
    max-inline-size: 96vw;
    max-block-size: 96svh;
    padding: 0;
    border: 0;
    background: none;
}
#view::backdrop { background: rgb(0 0 0 / .7); }
#view img { display: block; max-inline-size: 96vw; max-block-size: 96svh; cursor: zoom-out; }
figcaption { font-size: 14px; line-height: 24px; color: var(--muted); margin-block-start: 8px; }
/* 番号：図は題の頭に Fig. n、表は Table n（題を上に）、式は右に (n) */
article { counter-reset: fig tab eq; }
figure:has(> img) { counter-increment: fig; }
figcaption .num, caption .num { font-weight: 600; color: var(--ink); margin-inline-end: .5em; }
figure:has(> table) { counter-increment: tab; overflow-x: auto; }
caption { caption-side: top; text-align: start; margin-block: 0 8px; margin-inline: 0; font-size: 14px; line-height: 24px; color: var(--muted); }
figure:has(> math) { counter-increment: eq; display: grid; grid-template-columns: minmax(2.5em, 1fr) minmax(0, auto) minmax(2.5em, 1fr); align-items: center; gap: 8px; }
figure:has(> math) > math { grid-column: 2; grid-row: 1; }
figure:has(> math) .eqno { grid-row: 1; grid-column: 3; justify-self: end; white-space: nowrap; font-size: 15px; color: var(--muted); font-variant-numeric: tabular-nums; }
figure > math[display="block"] { margin: 0; inline-size: auto; overflow-x: auto; animation: none; opacity: 1; filter: none; }
/* 少しだけはみ出す数式は縮めて収める */
figure > math[data-fit] { zoom: var(--fit); }
/* 大きくはみ出すもの：端を薄くして続きがあると見せる（スクロールに合わせて左右が変わる） */
@property --fl { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fr { syntax: "<length>"; inherits: false; initial-value: 40px; }
:is(figure > math, pre > code, figure:has(> table))[data-over] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
    animation: edges linear both;
    animation-timeline: scroll(self inline);
}
@keyframes edges {
    0% { --fl: 0px; --fr: 40px; }
    4% { --fl: 40px; }
    96% { --fr: 40px; }
    100% { --fl: 40px; --fr: 0px; }
}
/* 「全体を見る」 */
figure > .whole {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 36px;
    margin-block-start: 4px;
    padding-block: 0; padding-inline: 10px;
    border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
    border-radius: 6px;
    background: none;
    color: var(--muted);
    font: 13px/1 system-ui, sans-serif;
    cursor: pointer;
}
figure > .whole::before { content: "fit_width"; content: "fit_width" / ""; font: 18px/1 "Material Symbols Sharp"; font-feature-settings: "liga"; }
figure > .whole:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
#view math { display: block; padding-block: 32px; padding-inline: 24px; background: var(--card-bg); color: var(--card-fg); border-radius: 8px; font-size: 22px; }

/* 印刷：読む光を切り、数式は収めて、コードは折り返す */
@media print {
    :root { --fx: 0 !important; }
    #tools, #rail, #card, .g-mark, .g-trail, .g-pin, figure > .whole { display: none !important; }
    figure > math[display="block"] { zoom: var(--print-fit, 1); overflow: visible; }
    :is(figure > math, pre > code, figure:has(> table)) { -webkit-mask-image: none !important; mask-image: none !important; }
    pre > code { white-space: pre-wrap; overflow: visible; }
    figure:has(> table) { overflow: visible; }
}
/* 表 */
table { inline-size: 100%; border-collapse: collapse; font-size: 15px; line-height: 24px; font-variant-numeric: tabular-nums; }
th, td { padding-block: 8px; padding-inline: 12px; text-align: start; vertical-align: top; overflow-wrap: normal; hyphens: manual; }
td:is(:nth-child(2), :nth-child(3)) { white-space: nowrap; }
thead th { border-block-end: 2px solid color-mix(in srgb, var(--ink) 55%, transparent); font-weight: 600; }
tbody tr + tr td { border-block-start: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); }
tfoot :is(th, td) { border-block-start: 2px solid color-mix(in srgb, var(--ink) 55%, transparent); font-weight: 600; }
/* 箇条書き */
ul, ol { padding-inline-start: 1.6em; }
li + li { margin-block-start: 8px; }
li > :is(ul, ol) { margin-block: 8px 0; margin-inline: 0; }
li:has(> input[type="checkbox"]) { list-style: none; margin-inline-start: -1.6em; }
input[type="checkbox"] { inline-size: 1em; block-size: 1em; margin-block: 0; margin-inline: 0 .5em; vertical-align: -.12em; accent-color: color-mix(in srgb, var(--kind) 70%, var(--ink)); }
/* 用語の定義 */
dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin-block-end: 48px; }
dt { font-weight: 600; }
dd { margin: 0; }
@media (width < 600px) { dl { grid-template-columns: 1fr; gap: 0; } dd + dt { margin-block-start: 12px; } }
/* 折りたたみ */
details { margin-block-end: 48px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 4%, transparent); }
summary { padding-block: 8px; padding-inline: 14px; cursor: pointer; font-size: 15px; }
details > :not(summary) { padding-block: 0 12px; padding-inline: 14px; margin: 0; font-size: 15px; }
/* 文中のコード・キー・強調 */
:not(pre) > code { padding-block: 1px; padding-inline: 5px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 7%, transparent); font: .88em ui-monospace, monospace; }
kbd { padding-block: 0; padding-inline: 6px; border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-block-end-width: 2px; border-radius: 4px; font: .85em ui-monospace, monospace; }
mark { background: color-mix(in srgb, var(--kind) 22%, transparent); color: inherit; padding-block: 0; padding-inline: 2px; }
:root[data-theme="dark"] mark { background: color-mix(in srgb, var(--kind) 55%, #000); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) mark { background: color-mix(in srgb, var(--kind) 55%, #000); color: #fff; } }
/* キー操作の枠：今いるかたまり */
[data-cur] { outline: 2px solid color-mix(in srgb, var(--kind) 45%, var(--ink)) !important; outline-offset: 10px; border-radius: 6px; }
[data-cur]:focus { outline-style: solid; }
/* ダーク：色を混ぜず、明るさも抑える */
:root[data-theme="dark"] { --ring: color-mix(in srgb, var(--ink) 48%, var(--bg)); --cur-ring: color-mix(in srgb, var(--ink) 46%, var(--bg)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ring: color-mix(in srgb, var(--ink) 48%, var(--bg)); --cur-ring: color-mix(in srgb, var(--ink) 46%, var(--bg)); } }
:root[data-theme="dark"] :is(a, button, [tabindex="0"], summary, input, .g-pin):focus-visible { outline-color: var(--ring); }
:root[data-theme="dark"] [data-cur] { outline-color: var(--cur-ring) !important; outline-width: 2px; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) :is(a, button, [tabindex="0"], summary, input, .g-pin):focus-visible { outline-color: var(--ring); }
    :root:not([data-theme="light"]) [data-cur] { outline-color: var(--cur-ring) !important; outline-width: 2px; }
}
hr { margin-block: 0 48px; margin-inline: 0; border: 0; block-size: 1px; background: color-mix(in srgb, var(--ink) 18%, transparent); }

/* ---- 左：目印・跡・印（本文の列のすぐ左） ---- */
section {
    view-timeline: --sec block;
    view-timeline-inset: var(--band-top) 0px;
}
.g-mark, .g-pin {
    font: 600 12px/1 ui-monospace, monospace;
    pointer-events: none;
}
/* リンクの印だけは押せる（本文のリンクは目立たせないので、こちらが入口） */
.g-pin[data-k="link"] { pointer-events: auto; cursor: pointer; border: 0; padding: 0; background: none; }
.g-pin[data-k="link"]:hover { color: var(--ink); }
/* 目印：節。見出しの少し上。帯の上の縁で止まり、節の終わりが近づくと自分で縮む */
.g-mark {
    --s: 1;
    display: grid;
    place-items: center;
    position: sticky;
    inset-block-start: var(--mark-top);
    z-index: 2;
    inline-size: var(--mark);
    block-size: var(--mark);
    margin-block: calc(var(--mark) * -1 - 12px) 12px; margin-inline: calc(var(--gutter) / -2 - var(--mark) / 2) 0;
    border-radius: 8px;
    background: var(--mark-c);
    color: var(--lit);
    scale: var(--s);
    animation: shrink linear both;
    animation-timeline: --sec;
    animation-range: cover calc(100% - 24svh) cover 100%;
}
.g-mark::before { content: "#"; }
@property --s { syntax: "<number>"; inherits: false; initial-value: 1; }
@keyframes shrink { from { --s: 1; } to { --s: 0; } }
/* 跡：目印（頭）から続く胴。画面の下端の手前か節の終わりの近い方まで（JS が長さを決める） */
.g-trail {
    position: absolute;
    inset-inline-start: calc(var(--gutter) / -2 - var(--mark) / 2);
    inline-size: var(--mark);
    inset-block-start: var(--t, 0px);
    block-size: var(--h, 0px);
    border-radius: 8px;
    background: linear-gradient(var(--trail-top), var(--trail-end));
    pointer-events: none;
}
/* 印：これから出てくるもの。目印に届くと自分で縮んで消える */
.g-pin {
    --s: 1;
    position: absolute;
    z-index: 1;
    inset-inline-start: calc(var(--gutter) / -2 - 9px);
    inset-block-start: var(--y);
    inline-size: 18px;
    block-size: 18px;
    display: grid;
    place-items: center;
    color: var(--pin-c);
    scale: var(--s);
    animation: shrink linear both;
    animation-timeline: view(block calc(var(--mark-top) + var(--mark)) 0px);
    animation-range: exit -100% exit 100%;
}
/* 小見出しは「##」を斜めにずらして（記号の階層） */
.g-pin[data-k="h3"]::before { content: "#"; translate: -2px -2px; text-shadow: 4px 4px 0 currentColor; }
.g-pin:not([data-k="h3"], [data-k="cite"])::before, #card .i {
    font-family: "Material Symbols Sharp";
    font-feature-settings: "liga";
    font-weight: 300;
    line-height: 1;
}
.g-pin:not([data-k="h3"], [data-k="cite"])::before { font-size: 17px; }
.g-pin[data-k="fig"]::before  { content: "image"; }
.g-pin[data-k="code"]::before { content: "code"; }
.g-pin[data-k="link"]::before { content: "link"; }
.g-pin[data-k="note"]::before { content: "sticky_note_2"; }
.g-pin[data-k="table"]::before { content: "table"; }
.g-pin[data-k="math"]::before { content: "function"; }
.g-pin[data-k="details"]::before { content: "unfold_more"; }
.g-mark, .g-trail, .g-pin { opacity: var(--fx); }

/* 注釈（本文の中の aside）：「注釈」とは書かず、小さく控えめに。何であるかは左のアイコンが示す */
aside {
    margin-block: -12px 30px; margin-inline: 0;
    padding-inline-start: 12px;
    border-inline-start: 2px solid color-mix(in srgb, var(--ink) 25%, transparent);
    font-size: 14px;
    line-height: 24px;
    color: var(--muted);
}

/* ---- 文中の小さなアイコン（例：アイテム名の頭） ---- */
[data-icon] { white-space: nowrap; }
[data-icon]::before {
    content: attr(data-icon);
    content: attr(data-icon) / "";
    font: 400 1.05em/1 "Material Symbols Sharp";
    font-feature-settings: "liga";
    vertical-align: -.16em;
    margin-inline-end: .12em;
    color: color-mix(in srgb, var(--kind) 25%, var(--ink));
}

/* ---- コードのコピー ---- */
pre { padding-inline-end: 48px; }
pre > .copy {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 6px;
    inline-size: 32px;
    block-size: 32px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: none;
    color: color-mix(in srgb, var(--ink) 55%, transparent);
    cursor: pointer;
    font: 18px/1 "Material Symbols Sharp";
    font-feature-settings: "liga";
    transition: scale .15s, color .15s;
}
pre > .copy:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
pre > .copy.done { scale: 1.15; color: var(--ink); }

/* ---- リンクカード：段落の後ろに置く（p data-card の中のリンク） ---- */
p[data-card] { margin-block-start: -24px; }
:is(p[data-card], footer li) > a {
    display: grid;
    grid-template-columns: 88px 1fr auto;
    gap: 0 14px;
    align-items: center;
    min-block-size: 64px;
    overflow: hidden;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    font-size: 15px;
    line-height: 22px;
}
/* 画像のないカード：文字を左の余白から始める */
:is(p[data-card], footer li) > a:not(:has(> img)) { grid-template-columns: 1fr auto; padding-inline-start: 16px; }
/* 左は画像で埋める */
:is(p[data-card], footer li) > a > img { inline-size: 88px; block-size: 100%; min-block-size: 64px; object-fit: cover; }
:is(p[data-card], footer li) > a > span { padding-block: 10px; padding-inline: 0; }
:is(p[data-card], footer li) > a b { display: block; font-weight: 600; }
:is(p[data-card], footer li) > a small { display: block; font-size: 12px; line-height: 18px; color: var(--faint); }
:is(p[data-card], footer li) > a::after {
    content: "open_in_new";
    content: "open_in_new" / "";
    padding-inline-end: 14px;
    font: 18px/1 "Material Symbols Sharp";
    font-feature-settings: "liga";
    opacity: .5;
}
:is(p[data-card], footer li) > a:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }

/* ---- 記事の末尾：シリーズの次と、関連する記事 ---- */
article > footer { margin-block-start: 96px; padding-block-start: 48px; border-block-start: 2px solid var(--kind); }
article > footer h2 { font-size: 14px; line-height: 24px; letter-spacing: .08em; text-transform: uppercase; margin-block-end: 16px; color: color-mix(in srgb, var(--kind) 25%, var(--ink)); }
article > footer h2::after { display: none; }
article > footer ul { display: grid; gap: 12px; padding: 0; list-style: none; margin-block-end: 48px; }
article > footer li + li { margin-block-start: 0; }

/* ---- 引用文献の番号：文中は小さな番号だけ（リンクの見た目にしない） ---- */
sup > a[href^="#ref-"] { font-size: .7em; color: color-mix(in srgb, var(--kind) 25%, var(--ink)); }
sup > a[href^="#ref-"]::before { content: "["; }
sup > a[href^="#ref-"]::after { content: "]"; }

/* ---- 引用：出典は下に小さく ---- */
blockquote { margin-block: 0 48px; margin-inline: 0; padding-inline-start: 16px; border-inline-start: 3px solid color-mix(in srgb, var(--kind) 45%, transparent); }
blockquote p { margin-block-end: 8px; }
blockquote footer { font-size: 13px; line-height: 22px; color: var(--muted); }
blockquote footer::before { content: "― "; }

/* ---- 参考文献 ---- */
#refs ol { padding-inline-start: 2em; font-size: 14px; line-height: 24px; }
#refs li { margin-block-end: 12px; }
#refs li:target { background: color-mix(in srgb, var(--kind) 12%, transparent); }

/* 左の印：引用文献は番号、引用は引用符、リンクカードはリンク */
.g-pin[data-k="cite"]::before { content: "[" attr(data-n) "]"; font: 600 11px/1 ui-monospace, monospace; letter-spacing: -.04em; }
.g-pin[data-k="quote"]::before { content: "format_quote"; }
.g-pin[data-k="card"]::before { content: "link"; }
.g-pin:is([data-k="cite"], [data-k="quote"]) { pointer-events: auto; cursor: pointer; border: 0; padding: 0; background: none; }
.g-pin:is([data-k="cite"], [data-k="quote"]):hover { color: var(--ink); }

/* ---- 段落ごとのコメント・更新履歴（左の印） ---- */
.g-pin[data-k="comment"]::before { content: "chat_bubble"; }
.g-pin[data-k="history"]::before { content: "history"; }
.g-pin:is([data-k="comment"], [data-k="history"]) { pointer-events: auto; cursor: pointer; border: 0; padding: 0; background: none; }
.g-pin[data-k="comment"]::after {
    content: attr(data-n);
    position: absolute;
    inset-inline-end: -6px;
    inset-block-start: -4px;
    font: 600 9px/1 ui-monospace, monospace;
}
#card ul { padding: 0; list-style: none; white-space: normal; }
#card ul li + li { margin-block-start: 6px; }
#card ul b { font-weight: 600; margin-inline-end: 6px; }

/* ---- 右：自作のスクロールバー（つまみと見出しの刻みを一列に） ---- */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
/* 見出しが多いときは小見出しの文字を外す（reading.js が data-dense を付ける） */
#rail[data-dense] a[data-k="h3"] .lbl { display: none; }
#rail {
    position: fixed;
    z-index: 6;
    inset-block-start: 12px;
    inset-block-end: 12px;
    inset-inline-end: 8px;
    inline-size: 14px;
    touch-action: none;
    cursor: pointer;
}
#rail .thumb {
    position: absolute;
    inset-inline-end: 3px;
    inline-size: 8px;
    block-size: calc(var(--vr) * 100%);
    border-radius: 4px;
    background: color-mix(in srgb, var(--ink) 22%, transparent);
    animation: thumb linear both;
    animation-timeline: scroll(root);
    transition: background .15s;
}
#rail:hover .thumb, #rail.drag .thumb { background: color-mix(in srgb, var(--ink) 38%, transparent); }
@keyframes thumb { from { inset-block-start: 0; } to { inset-block-start: calc((1 - var(--vr)) * 100%); } }
#rail a {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: var(--y);
    inline-size: 14px;
    block-size: 9px;
    translate: 0 -4px;
    display: grid;
    align-items: center;
    justify-items: end;
}
#rail a::before { content: ""; block-size: 2px; inline-size: 14px; border-radius: 1px; background: color-mix(in srgb, var(--ink) 45%, transparent); transition: width .15s; }
#rail a[data-k="h3"]::before { inline-size: 7px; background: color-mix(in srgb, var(--ink) 30%, transparent); }
#rail a:hover::before { inline-size: 14px; background: var(--ink); }
@media (pointer: coarse) {
    #rail { inline-size: 28px; inset-inline-end: 4px; }
    #rail .thumb { inset-inline-end: 6px; }
    #rail a { inline-size: 28px; block-size: 24px; translate: 0 -12px; }
    .g-pin:is([data-k="cite"], [data-k="quote"], [data-k="comment"], [data-k="history"]) { inline-size: 40px; block-size: 40px; inset-inline-start: calc(var(--gutter) / -2 - 20px); translate: 0 -11px; }
}
/* 幅が広いとき：刻みに見出しを添える。本文にかからない幅で、重なる分は上下にずらす */
#rail a .lbl { display: none; }
#rail[data-labels] a .lbl {
    display: block;
    position: absolute;
    inset-inline-end: calc(100% + 8px);
    inset-block-start: calc(50% + var(--dy, 0px));
    translate: 0 -50%;
    inline-size: var(--lw);
    padding-block: 2px; padding-inline: 8px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 16px;
    text-align: end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--faint);
    transition: background .25s, color .25s;
}
#rail[data-labels] a[data-k="h3"] .lbl { font-size: 11px; }
#rail[data-labels] a .lbl:hover { color: var(--ink); }
#rail[data-labels] a[aria-current] .lbl { background: color-mix(in srgb, var(--kind) 14%, color-mix(in srgb, var(--ink) 5%, transparent)); color: var(--ink); }
#rail[data-labels] a[aria-current]::before { inline-size: 14px; background: var(--ink); }
/* カード：目的のアイコン・内容・動作・閉じる（左の印・目印・右の刻みで共通） */
#card {
    position: fixed;
    inset: auto;
    inset-block-start: var(--y, 0);
    inset-inline-start: var(--l, auto);
    inset-inline-end: var(--r, auto);
    margin: 0;
    display: none;
    align-items: center;
    gap: 4px;
    max-inline-size: min(36ic, calc(100vw - 32px));
    padding-block: 4px; padding-inline: 10px 4px;
    border: 1px solid var(--card-line);
    border-start-start-radius: 10px; border-start-end-radius: 2px; border-end-end-radius: 2px; border-end-start-radius: 10px;
    background: var(--card-bg);
    color: var(--card-fg);
    font: 13px/18px system-ui, sans-serif;
    translate: 0 -50%;
}
#card ol { display: flex; flex-wrap: wrap; gap: 0 6px; padding: 0; list-style: none; white-space: normal; }
#card li + li::before { content: "›"; margin-inline-end: 6px; opacity: .5; }
#card:popover-open { display: flex; }
#card[data-mode="margin"] { inline-size: var(--w); }
#card[data-mode="margin"] .t, #card[data-mode="sheet"] .t { white-space: normal; }
#card[data-mode="sheet"] { border-start-start-radius: 10px; border-start-end-radius: 10px; border-end-end-radius: 2px; border-end-start-radius: 2px; }
#card[data-mode="sheet"] {
    inset-block-start: auto;
    inset-block-end: 16px;
    inset-inline-start: 50%;
    inset-inline-end: auto;
    inline-size: min(36ic, calc(100vw - 32px));
    translate: -50% 0;
    padding-block: 8px; padding-inline: 14px 6px;
    font-size: 14px;
    line-height: 20px;
}
#card .i { flex: none; font-size: 17px; opacity: .7; margin-inline-end: 4px; }
#card .t { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline-end: 4px; }
#card button {
    flex: none;
    inline-size: 40px;
    block-size: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 8px;
    background: none;
    color: inherit;
    cursor: pointer;
    font: 20px/1 "Material Symbols Sharp";
    font-feature-settings: "liga";
}
#card button:hover { background: color-mix(in srgb, var(--card-fg) 10%, transparent); }
#card button[hidden] { display: none; }
#card button.go { background: none; }


/* 本文へ飛ぶ：Tab で最初に届き、そのときだけ見える */
#skip { position: fixed; z-index: 20; inset-block-start: 8px; inset-inline-start: 8px; padding-block: 10px; padding-inline: 16px; border-radius: 8px; background: var(--card-bg); color: var(--card-fg); translate: 0 -200%; }
#skip:focus { translate: 0 0; }
/* 参考文献から引用箇所へ戻る */
#refs .back { display: inline-flex; gap: 2px; margin-inline-start: 6px; vertical-align: 1px; }
#refs .back a {
    display: inline-grid;
    place-items: center;
    min-inline-size: 28px;
    block-size: 28px;
    padding-block: 0; padding-inline: 6px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    font-size: 12px;
}
#refs .back a:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); }
/* 操作の一覧：キーを見ながら、そのまま実行できる */
#keymenu {
    position: fixed;
    inset-block: 62px auto; inset-inline: auto max(32px, env(safe-area-inset-right) + 24px);
    margin: 0;
    inline-size: min(340px, calc(100vw - 32px));
    max-block-size: calc(100svh - 80px);
    overflow: auto;
    padding: 8px;
    border: 1px solid var(--card-line);
    border-start-start-radius: 12px; border-start-end-radius: 2px; border-end-end-radius: 12px; border-end-start-radius: 12px;
    background: var(--card-bg);
    color: var(--card-fg);
    font: 14px/20px system-ui, sans-serif;
}
#keymenu ol { padding: 0; list-style: none; }
#keymenu li + li { margin: 0; }
#keymenu li.sep { block-size: 1px; margin-block: 6px; margin-inline: 4px; background: var(--card-line); }
#keymenu button {
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    inline-size: 100%;
    min-block-size: 40px;
    padding-block: 0; padding-inline: 10px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}
#keymenu button:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--card-fg) 9%, transparent); outline: none; }
#keymenu kbd { justify-self: start; min-inline-size: 22px; text-align: center; }
#toast {
    position: fixed;
    z-index: 30;
    inset-inline-start: 50%;
    inset-block-end: 24px;
    translate: -50% 0;
    margin: 0;
    padding-block: 8px; padding-inline: 14px;
    border: 1px solid var(--card-line);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--card-fg);
    font: 13px/18px system-ui, sans-serif;
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;
}
#toast:not(:empty) { opacity: 1; }

/* シリーズの一覧 */
#series {
    position: fixed;
    inset: auto;
    inset-block-start: var(--y, 80px);
    inset-inline-start: var(--x, 16px);
    margin: 0;
    inline-size: min(360px, calc(100vw - 32px));
    max-block-size: 60svh;
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--card-line);
    border-start-start-radius: 2px; border-start-end-radius: 12px; border-end-end-radius: 12px; border-end-start-radius: 12px;
    background: var(--card-bg);
    color: var(--card-fg);
    font: 14px/20px system-ui, sans-serif;
}
#series > p { display: flex; justify-content: space-between; gap: 12px; padding-block: 4px 8px; padding-inline: 8px; font-size: 13px; }
#series > p span { opacity: .75; }
#series > nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-block-end: 8px; }
#series > nav a { display: grid; padding: 8px; border-radius: 6px; background: color-mix(in srgb, var(--card-fg) 6%, transparent); font-size: 13px; line-height: 18px; }
#series > nav a:hover { background: color-mix(in srgb, var(--card-fg) 12%, transparent); }
#series > nav small { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
#series > nav a:last-child { text-align: end; }
#series ol { padding: 0; margin: 0; list-style: none; }
/* 離れている所は縦の点。番号の列にそろえる */
#series li.gap { padding-block: 0; padding-inline: 8px; line-height: 16px; font-size: 16px; opacity: .55; user-select: none; }
#series > p { margin: 0; }
#series li { margin: 0; }
#series li a { display: block; padding-block: 10px; padding-inline: 8px; border-radius: 6px; }
#series li a:hover { background: color-mix(in srgb, var(--card-fg) 8%, transparent); }
#series li a[aria-current] { font-weight: 600; background: color-mix(in srgb, var(--kind) 18%, transparent); }
#series > a { display: block; padding-block: 10px 4px; padding-inline: 8px; font-size: 13px; text-decoration: underline; }

/* 目次ダイアログ */
#contents {
    position: fixed;
    inset-block: 62px auto; inset-inline: auto max(32px, env(safe-area-inset-right) + 24px);
    margin: 0;
    inline-size: min(320px, calc(100vw - 32px));
    max-block-size: calc(100svh - 80px);
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--card-line);
    border-start-start-radius: 12px; border-start-end-radius: 2px; border-end-end-radius: 12px; border-end-start-radius: 12px;
    background: var(--card-bg);
    color: var(--card-fg);
    font: 14px/20px system-ui, sans-serif;
}
#contents ol { padding: 0; list-style: none; }
/* 小見出しは節のすぐ下に続け、次の節との間をあける（どの小見出しがどの節のものか、並びで分かる） */
/* 押せる高さは 44px（WCAG 2.5.5 AAA）。詰めるのは行の間ではなく、節の間の余白で関係を見せる */
#contents a { display: flex; align-items: center; min-block-size: 44px; padding-block: 4px; padding-inline: 10px; border-radius: 8px; }
#contents li[data-k="h2"]:not(:first-child) { margin-block-start: 8px; }
#contents a:hover { background: color-mix(in srgb, var(--card-fg) 8%, transparent); }
#contents li[data-k="h3"] a { padding-inline-start: 26px; font-size: 13px; }
#contents li + li { margin: 0; }
#contents p { padding-block: 8px 0; padding-inline: 10px; font-size: 12px; opacity: .85; }
kbd { white-space: nowrap; }

/* 動きを減らす設定：縮む・伸びる動きをやめ、すぐ切り替える */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
    .g-mark, .g-pin { animation-timing-function: steps(1, end) !important; }
    html { scroll-behavior: auto; }
}

#rail { inset-block-start: 68px; }

/* ---- 効果を切るボタン（設定へ移したので使わない） ---- */
#plain { display: none !important; }
#plain {
    position: fixed;
    z-index: 7;
    inset-inline-end: 32px;
    inset-block-end: 16px;
    inline-size: 36px;
    block-size: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: color-mix(in srgb, var(--ink) 8%, transparent);
    color: color-mix(in srgb, var(--ink) 60%, transparent);
    cursor: pointer;
    font: 20px/1 "Material Symbols Sharp";
    font-feature-settings: "liga";
}
#plain:hover { background: color-mix(in srgb, var(--ink) 14%, transparent); }
#plain[aria-pressed="true"] { color: var(--ink); }

/* 段落の履歴のカード：新しい順に、日付・何をしたか・前の文（消し線） */
#card .hist { display: grid; gap: 10px; max-block-size: 50svh; overflow: auto; }
#card .hist > b { font-size: 13px; }
#card .hist small { display: block; font-size: 12px; opacity: .8; }
#card .hist del { display: block; font-size: 13px; line-height: 20px; text-decoration-color: color-mix(in srgb, var(--card-fg) 45%, transparent); opacity: .85; white-space: pre-wrap; }