:root {
  color-scheme: light;
  --paper: #fff; --ink: #242422; --muted: #74746e; --line: #d5d5ce; --soft: #f6f6f3;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", sans-serif;
}
:root[data-theme=dark] {color-scheme:dark;--paper:#191919;--ink:#e3e3dd;--muted:#aaa9a1;--line:#4b4b46;--soft:#232321}
* {box-sizing:border-box}
html {scroll-behavior:smooth;scroll-padding-top:32px}
body {margin:0;background:var(--paper);color:var(--ink);font:16px/2.05 var(--sans);overflow-wrap:anywhere;-webkit-font-smoothing:antialiased}
a {color:inherit;text-decoration-thickness:1px;text-underline-offset:.23em;text-decoration-color:var(--line)}
a:hover {text-decoration-color:var(--ink)}
button,input {font:inherit;color:inherit}
button,a,input,summary {-webkit-tap-highlight-color:transparent}
button,summary {cursor:pointer}
button {background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:.23em}
:focus-visible {outline:1px solid var(--ink);outline-offset:5px}
.skip {position:absolute;left:20px;top:-100px;background:var(--paper);z-index:5}
.skip:focus {top:12px}

/* Site Header */
.site-header {width:min(884px,calc(100% - 80px));margin:32px auto 0;display:grid;grid-template-columns:156px minmax(0,1fr);align-items:center;gap:48px}
.wordmark {display:inline-flex;align-items:center;text-decoration:none;color:var(--ink)}
.wordmark-text {font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Helvetica Neue","Arial Black",sans-serif;font-weight:900;font-size:30px;line-height:1;letter-spacing:.02em;color:var(--ink);-webkit-text-stroke:1.2px var(--ink);display:inline-block;margin-left:-2px}

/* 全ページ共通：左上にロゴ画像、右側に4メニュー */

/* 4つのメニュー：センタリング、太い罫線、太いフォント */
.main-nav {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line);width:100%}
.main-nav a {font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Sans",sans-serif;font-weight:700;font-size:15pt;line-height:1.8;letter-spacing:.08em;text-align:center;padding:10px 8px;text-decoration:none;color:var(--muted);transition:color .15s ease}
.main-nav a[aria-current=page] {color:var(--ink);text-decoration:underline;text-underline-offset:.35em;text-decoration-thickness:2.5px}
.main-nav a:hover {color:var(--ink)}

.page-heading {max-width:790px;margin:72px auto 57px;text-align:center;padding:0 24px}
.page-heading {display:none!important}
.page-heading h1 {font-weight:400;font-size:34px;line-height:1.65;letter-spacing:.08em;margin:0 0 17px;text-wrap:balance}
.page-heading .description {margin:0;font-size:14px;color:var(--muted)}
.page-heading .meta {font:11px/1.9 var(--sans);color:var(--muted);margin:19px 0 0}
.reading-layout {width:min(884px,calc(100% - 80px));margin:56px auto 0;display:grid;grid-template-columns:156px minmax(0,1fr);column-gap:48px;row-gap:0}
.toc {grid-column:1;font:12px/1.9 var(--sans);padding-top:6px;align-self:start;position:sticky;top:32px}
.toc strong {display:block;font:10px/1.8 var(--sans);letter-spacing:.16em;color:var(--muted);margin-bottom:16px}
.toc ul {margin:0;padding:0;list-style:none;border-left:1px solid var(--line)}
.toc li {padding:5px 0 5px 16px;margin:0}
.toc a {color:var(--muted);text-decoration:none}
.toc a:hover {color:var(--ink)}
.reading-body {grid-column:2;min-width:0}
.article-layout {margin:64px auto 0}
.article-layout .toc {grid-column:1;font:12px/1.9 var(--sans);padding-top:6px;align-self:start;position:sticky;top:32px}
.article-layout .reading-body {grid-column:2;min-width:0}

/* Subpage Header Ornament */
.subpage-ornament {width:min(884px,calc(100% - 80px));margin:54px auto 44px;display:grid;grid-template-columns:156px minmax(0,1fr);column-gap:48px}
.subpage-star-wrap {grid-column:2;display:flex;justify-content:center;align-items:center}
.subpage-star {width:20px;height:20px;display:block;opacity:.65}
:root[data-theme=dark] .subpage-star {filter:invert(1);opacity:.8}

/* Main Title Logo Image */
.top-heading h1 {display:flex;justify-content:center;align-items:center;margin:0 0 18px}
.top-title-img {max-width:520px;width:100%;height:auto;display:block;margin:0 auto}
:root:not([data-theme=dark]) .top-title-img {filter:invert(1)}

.article-heading {text-align:left;margin:0 0 38px;padding:0;max-width:100%}
.article-heading h1 {font-weight:700;font-size:29px;line-height:1.5;letter-spacing:.035em;margin:0 0 16px;text-align:left}
.article-heading .description {font-size:14px;line-height:1.9;color:var(--muted);margin:0 0 16px;text-align:left}
.article-heading .meta {font:11px/1.9 var(--sans);color:var(--muted);margin:0;text-align:left}
.reading-body section {margin-bottom:52px;scroll-margin-top:32px}
.reading-body section:focus {outline:none}
h2 {font-size:21px;line-height:1.75;margin:0 0 23px;padding:0 0 9px;border-bottom:1px solid var(--line);font-weight:500;letter-spacing:.035em}
h3 {font-size:17px;line-height:1.8;margin:28px 0 13px;font-weight:500}
p {margin:0 0 20px}
ul {padding-left:1.4em}
li {margin:.6em 0}
.plain-list {list-style:none;padding:0}
.plain-list li {margin:22px 0}
.plain-list li>a {font-weight:700}
.plain-list small {display:block;color:var(--muted);font:12px/1.9 var(--sans);margin-top:7px}
.entry-list {list-style:none;padding:0}
.entry-list li {display:grid;grid-template-columns:80px minmax(0,1fr);column-gap:21px;align-items:baseline;margin:20px 0}
.entry-list time,.date {font:11px/1.9 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.entry-list small {font:11px/1.8 var(--sans);color:var(--muted)}
blockquote {margin:23px 0;padding:4px 0 4px 22px;border-left:1px solid var(--line)}
blockquote p {margin:0}
.reminder {font-size:17px;line-height:2.15}
.source-note {color:var(--muted);font:11px/1.9 var(--sans)}
.source-note a {color:inherit}
.search-form {display:flex;gap:17px;align-items:center;margin:24px 0 20px}
.search-form input {width:100%;min-width:0;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--paper);padding:8px 0;font:13px/1.8 var(--sans)}
.search-form button {white-space:nowrap;font:12px var(--sans)}
.search-form>a {font:12px var(--sans);white-space:nowrap}
.result-count {font:11px/1.8 var(--sans);color:var(--muted);margin-bottom:31px}
.blog-index article {margin:0 0 30px;padding-bottom:29px;border-bottom:1px solid var(--line)}
.blog-index article:last-child {border-bottom:0;padding-bottom:0}
.blog-index .date {margin-bottom:8px}
.blog-index h2 {font-size:21px;font-weight:700;margin:0 0 10px;border:0;padding:0;letter-spacing:.02em}
.blog-index h2 a {text-decoration:none}
.blog-index h2 a:hover {text-decoration:underline}
.blog-index p {font-size:14px;line-height:1.95;margin-bottom:0;color:var(--muted)}
.article-body>p {line-height:2.15;line-break:strict}
.source-block {margin:28px 0}
.source-block blockquote {margin:10px 0 13px;font-size:14px}
.source-block .source-note {font-size:11px}
.related-list {font-size:14px}
.site-footer {width:min(884px,calc(100% - 80px));margin:68px auto 34px;border-top:1px solid var(--line);padding-top:19px;font:10px/1.9 var(--sans);color:var(--muted);display:flex;flex-wrap:wrap;gap:12px 24px}
.site-footer a,.site-footer button {color:inherit;font:inherit}
.site-footer span {margin-right:auto}
.no-script {max-width:680px;margin:50px auto}
details {font-size:14px;margin:18px 0}
details>summary {color:var(--muted);font:12px/1.9 var(--sans)}
details[open]>summary {margin-bottom:12px}
.empty {padding:30px 0}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.draft-label {font:10px/1.7 var(--sans);color:var(--muted);margin-left:9px;white-space:nowrap}
.more {font-size:12px;margin:27px 0 0}
.change-kind {font:10px var(--sans);color:var(--muted);margin-left:10px;white-space:nowrap}
.log-summary {font-size:13px;margin:6px 0 4px;line-height:1.95}
.changelog-list {padding-left:1.1em}
.changelog-list>li {margin:0 0 28px;padding-left:7px}
.changelog-list small {font:11px/1.8 var(--sans);color:var(--muted)}
.day-heading {font-family:var(--sans);font-weight:400;font-size:19px;margin:29px 0 24px;letter-spacing:.025em}
.history-list {list-style:none;padding:0}
.history-list li {padding:19px 0;border-bottom:1px solid var(--line);margin:0}
.history-list li:first-child {padding-top:0}
.history-list li>div {font:11px/1.9 var(--sans);color:var(--muted)}
.history-list p {font-size:13px;margin:8px 0 0}
.version-notice,.draft-notice {font:11px/1.9 var(--sans);color:var(--muted);border-left:1px solid var(--line);padding:4px 0 4px 16px}
.meta-separator {padding:0 7px}
@media(max-width:780px) {
 .site-header {grid-template-columns:1fr;gap:18px;width:calc(100% - 40px);margin-top:26px}
 .wordmark {text-align:center;justify-content:center}
 .wordmark-text {font-size:30px;-webkit-text-stroke:1.2px var(--ink);margin-left:0}
 .main-nav {border-top:1.5px solid var(--line);border-bottom:1.5px solid var(--line)}
 .main-nav a {font-size:15px;font-weight:700;padding:8px 4px}
 .page-heading {margin:41px auto 37px;padding:0 20px}
 .page-heading h1 {font-size:28px}
 .page-heading .description {font-size:12px}
 .reading-layout {display:block;width:calc(100% - 40px);margin:32px auto 0}
 .subpage-ornament {display:flex;justify-content:center;width:calc(100% - 40px);margin:36px auto 28px}
 .subpage-star-wrap {grid-column:auto;width:100%;display:flex;justify-content:center}
 .article-layout {margin-top:32px}
 .top-title-img {max-width:320px}
 .article-heading {margin:0 0 28px;padding:0;text-align:left}
 .top-title-main {font-size:34px}
 .top-title-sub {font-size:12px;max-width:190px}
 .article-heading h1 {font-size:24px;text-align:left}
 .article-heading .description {font-size:13px;text-align:left}
 .article-heading .meta {font-size:11px;text-align:left}
 .toc, .article-layout .toc {display:none!important}
 .reading-body {max-width:100%;margin:0}
 .reading-body section {margin-bottom:42px}
 body {font-size:15px}
 h2,.blog-index h2 {font-size:19px}
 .site-footer {width:calc(100% - 40px);margin-top:48px;gap:12px 18px}
 .reminder {font-size:15px}
 .entry-list li {grid-template-columns:69px minmax(0,1fr);gap:13px}
 .entry-list time {font-size:10px}
 .draft-notice {font-size:11px}
}
@media(prefers-reduced-motion:reduce) {html{scroll-behavior:auto}}
@media print {
 .site-header,.toc,.site-footer,.search-form {display:none}
 .reading-layout {display:block;width:100%}.page-heading {margin-top:0}
 :root {--paper:#fff;--ink:#000;--muted:#333;--line:#777}
 body {font-size:11pt}a {color:#000}
}

/* The only visual field: a quiet, interactive map of the actual blog. */
.top-graph {width:min(884px,calc(100% - 80px));margin:48px auto 70px}
#blog-graph {background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:12px/1.8 var(--sans)}
.graph-toolbar {display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:13px 0;color:var(--muted)}
.graph-caption {font-size:11px;letter-spacing:.12em}
.graph-toolbar>div {display:flex;align-items:center;gap:20px}
.graph-toolbar button {font:11px/1.8 var(--sans);text-decoration:none}
.graph-toolbar button:hover,.graph-toolbar button[aria-expanded=true] {color:var(--ink)}
.graph-stage {position:relative;isolation:isolate}
.graph-canvas {display:block;width:100%;height:450px;touch-action:none;cursor:grab;overflow:hidden}
.graph-canvas:active {cursor:grabbing}
.graph-canvas:focus-visible {outline-offset:0;outline-color:var(--line)}
.graph-edges {stroke:var(--muted);pointer-events:none}
.graph-node {cursor:pointer;outline:none}
.graph-node:not([color]) {color:var(--ink)}
.graph-node.tag:not([color]) {color:var(--muted)}
.graph-hit {fill:transparent;stroke:none}
.graph-dot {fill:currentColor;stroke:currentColor;stroke-width:1}
.graph-node.tag .graph-dot {fill:var(--paper);stroke-width:1.2}
.graph-node:focus-visible .graph-dot {stroke-width:3}
.graph-label {fill:currentColor;font-family:var(--sans);pointer-events:none;paint-order:stroke;stroke:var(--paper);stroke-width:3px;stroke-linejoin:round;letter-spacing:.01em}
.graph-footer {display:flex;justify-content:space-between;gap:20px;color:var(--muted);padding:12px 0 0;font-size:10px;font-variant-numeric:tabular-nums}
.graph-help {font-size:10px;color:var(--muted);margin:8px 0 12px}
.graph-explanation {margin:0 0 15px;font-size:12px;color:var(--muted)}
.graph-explanation>summary {font-size:10px}
.graph-explanation p {margin:12px 0}
.graph-accessible-list {columns:2;list-style:none;padding:0;font-size:12px}
.graph-accessible-list li {break-inside:avoid}
.graph-settings {position:absolute;z-index:3;top:0;right:0;width:280px;max-height:100%;overflow:auto;background:var(--paper);border:1px solid var(--line);padding:16px 18px;box-shadow:0 6px 24px #00000009;overscroll-behavior:contain}
.graph-settings-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:11px}
.graph-settings-heading strong {font-weight:500}.graph-settings-heading button {font-size:10px;color:var(--muted)}
.graph-settings details {margin:17px 0 0;border-top:1px solid var(--line);padding-top:12px}
.graph-settings summary {font-size:12px;color:var(--ink)}
.graph-settings label {display:block;font-size:11px;margin:11px 0}
.graph-settings input[type=search],.graph-settings select {display:block;width:100%;min-width:0;background:var(--paper);color:var(--ink);font:11px/1.7 var(--sans);border:1px solid var(--line);padding:6px 8px;border-radius:3px;margin-top:6px}
.graph-settings input[type=range] {display:block;width:100%;margin:9px 0;accent-color:var(--ink)}
.graph-settings input[type=checkbox] {accent-color:var(--ink);margin:0 8px 0 0}
.graph-settings .graph-check {display:flex;align-items:center}
.graph-settings button {font-size:11px}
.graph-note {font-size:10px;color:var(--muted);line-height:1.8;margin:9px 0}
.graph-group-row {display:flex;gap:7px;align-items:center;margin:10px 0}
.graph-group-row input[type=color] {width:23px;height:23px;padding:0;border:0;flex-shrink:0;background:none}
.graph-group-row input[type=search] {margin:0}.graph-group-row button {font-size:10px;white-space:nowrap}
.graph-tooltip {position:absolute;left:0;bottom:0;background:var(--paper);border:1px solid var(--line);max-width:min(90%,600px);font-size:11px;padding:6px 12px;pointer-events:none}
.graph-menu {position:absolute;right:12px;top:12px;z-index:4;max-width:90%;padding:12px 18px;background:var(--paper);border:1px solid var(--line)}
.graph-menu a,.graph-menu button {display:block;font-size:12px;padding:5px 0}
.graph-empty {position:absolute;top:45%;width:100%;text-align:center;font-size:12px;color:var(--muted);pointer-events:none}
.graph-open {overflow:hidden}
#blog-graph.graph-expanded {position:fixed;inset:20px;z-index:50;padding:0 24px;display:flex;flex-direction:column;border:1px solid var(--line)}
.graph-expanded .graph-stage {flex:1;min-height:0}.graph-expanded .graph-canvas {height:100%}
.graph-expanded .graph-explanation {max-height:20vh;overflow:auto;flex-shrink:0}
[hidden] {display:none!important}
@media(max-width:780px) {
 .top-graph {width:calc(100% - 40px);margin-bottom:42px}
 .graph-canvas {height:380px}.graph-toolbar>div {gap:14px}
 .graph-toolbar {gap:10px}.graph-caption {letter-spacing:0;font-size:10px}
 .graph-settings {width:min(280px,100%)}
 .graph-accessible-list {columns:1}
 #blog-graph.graph-expanded {inset:8px;padding:0 12px}
 .graph-help {max-width:29em;font-size:10px}
}
@media print {.top-graph {display:none}}

/* Article Tags (matches user screenshot design) */
.article-tags {
  margin: 36px 0 20px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.tag-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px 7px;
  border-radius: 6px;
  font: 400 13px/1.5 var(--sans);
  text-decoration: none;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--ink);
  transition: background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.tag-chip:hover {
  background: #eaeae4;
  border-color: var(--ink);
  color: var(--ink);
  text-decoration: none;
}
:root[data-theme=dark] .tag-chip {
  background: #20262d;
  border-color: #3c4450;
  color: #c9d1d9;
}
:root[data-theme=dark] .tag-chip:hover {
  background: #2b323c;
  border-color: #8b949e;
  color: #f0f6fc;
}
.all-tags {
  margin: 14px 0 0;
  font-size: 12px;
}
.all-tags a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: .25em;
}
.all-tags a:hover {
  color: var(--ink);
}