:root {
  color-scheme: dark;
  --bg: #1e1e1e;
  --panel: #252526;
  --panel-raised: #2d2d30;
  --line: #383838;
  --fg: #d4d4d4;
  --muted: #858585;
  --blue: #9cdcfe;
  --green: #ce9178;
  --yellow: #dcdcaa;
  --accent: #007acc;
  font-family: "Segoe UI", "Yu Gothic UI", Meiryo, sans-serif;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; height: 100%; margin: 0; background: var(--bg); color: var(--fg); }
body { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
.app-shell { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.titlebar { height: 40px; flex: 0 0 40px; display: flex; align-items: center; gap: 14px; padding: 0 12px; background: var(--panel); border-bottom: 1px solid #171717; -webkit-app-region: drag; }
.window-dots { display: flex; gap: 7px; margin-right: 6px; }
.window-dots i { display: block; width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.window-dots i:nth-child(2) { background: #febc2e; }
.window-dots i:nth-child(3) { background: #28c840; }
.brand { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12px; color: #c5c5c5; }
.brand-mark { color: #75beff; font-size: 16px; }
.search-box { position: relative; width: min(420px, 46vw); height: 27px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #454545; border-radius: 5px; background: #3c3c3c; color: #aaa; }
.search-box:focus-within { border-color: #007fd4; }
.search-box input { width: 100%; border: 0; outline: 0; color: var(--fg); background: transparent; font-size: 12px; }
.search-box input::placeholder { color: #aaa; }
.theme-picker { display: flex; align-items: center; gap: 5px; color: #8fb4cb; font: 11px ui-monospace, monospace; white-space: nowrap; }
.theme-picker select { max-width: 136px; padding: 4px 19px 4px 6px; border: 1px solid #454545; border-radius: 4px; outline: none; background: #303033; color: #c8c8c8; font-size: 11px; }
.theme-picker select:focus { border-color: #007fd4; }
.top-link { color: #b8b8b8; font-size: 12px; }
.workbench { display: flex; flex: 1; min-height: 0; }
.activitybar { width: 48px; flex: 0 0 48px; background: #333333; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 12px; }
.activity { width: 48px; min-height: 42px; display: grid; place-items: center; border: 0; border-left: 2px solid transparent; background: transparent; color: #858585; font-size: 22px; cursor: pointer; }
.activity.active { color: white; border-left-color: white; }
.sidebar { width: 250px; flex: 0 0 250px; background: var(--panel); border-right: 1px solid var(--line); overflow: auto; }
.sidebar-heading { height: 35px; padding: 12px 18px 8px; color: #bbb; font-size: 11px; letter-spacing: .08em; }
.folder-row { min-height: 26px; display: flex; align-items: center; gap: 7px; padding: 0 12px; color: #ccc; font-size: 12px; font-weight: 600; }
.folder-nested { padding-left: 27px; color: #bdbdbd; }
.folder-link { text-decoration: none; }
.folder-link:hover, .folder-link.is-active { background: #37373d; color: white; }
.count { margin-left: auto; color: var(--muted); font-weight: 400; }
.file-list { padding: 3px 0 18px; }
.file-row { min-height: 24px; display: flex; align-items: center; gap: 7px; padding: 2px 10px 2px 49px; color: #c5c5c5; font-size: 12px; line-height: 1.4; }
.file-row:hover, .file-row.is-active { background: #37373d; }
.file-row.is-active { color: white; }
.file-row span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-icon { flex: 0 0 12px; color: #519aba; font-size: 11px; }
.editor-area { min-width: 0; flex: 1; display: flex; flex-direction: column; background: var(--bg); }
.tabbar { height: 36px; flex: 0 0 36px; display: flex; align-items: stretch; background: var(--panel); border-bottom: 1px solid var(--line); }
.tab { min-width: 160px; max-width: min(360px, 65vw); padding: 0 14px; display: flex; align-items: center; gap: 8px; background: var(--bg); border-top: 1px solid var(--accent); color: #ddd; font-size: 12px; }
.tab span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab-icon { color: #75beff; }
.tab-spacer { flex: 1; }
.tab-context { align-self: center; padding: 0 12px; color: #727272; font: 10px ui-monospace, monospace; letter-spacing: .07em; }
.draft-badge { padding: 2px 4px; border-radius: 2px; background: #825b00; color: #ffe09b; font-size: 9px; }
.breadcrumb { height: 30px; flex: 0 0 30px; display: flex; align-items: center; gap: 9px; padding: 0 24px; color: #999; font-size: 11px; }
.breadcrumb a:hover, .top-link:hover { color: #fff; }
.editor-scroll { flex: 1; overflow: auto; scroll-behavior: smooth; }
.article-wrap { min-height: 100%; display: flex; max-width: 1120px; margin: 0 auto; padding: 26px 28px 70px 0; }
.line-numbers { width: 48px; flex: 0 0 48px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 6px; color: #606060; font: 12px/1.7 ui-monospace, monospace; user-select: none; }
.article { min-width: 0; flex: 1; max-width: 850px; padding: 0 18px; }
.article-heading { padding: 0 0 14px; }
.eyebrow { margin: 0 0 12px; color: #777; font: 11px ui-monospace, monospace; letter-spacing: .05em; }
.eyebrow span { color: #555; }
h1 { margin: 0; color: #e7e7e7; font-size: clamp(23px, 3vw, 32px); font-weight: 500; line-height: 1.5; letter-spacing: .01em; }
.article-date { margin: 8px 0 0; color: #858585; font: 12px ui-monospace, monospace; }
.json-meta { margin: 10px 0 20px; padding: 13px 16px; border-left: 1px solid #3b3b3b; color: #bbb; font: 13px/1.9 ui-monospace, "Cascadia Code", monospace; overflow-wrap: anywhere; }
.meta-row { min-height: 24px; }
.meta-row:not(:first-child) { padding-left: 18px; }
.meta-row.json-close { padding-left: 36px; }
.json-key { color: var(--blue); }
.json-string { color: #ce9178; }
.json-array { color: #b5cea8; }
.json-array .tag-link { color: inherit; text-decoration: none; }
.json-array .tag-link:hover { color: #d7f0c9; text-decoration: underline; text-underline-offset: 2px; }
.json-brace, .punctuation { color: #9a9a9a; }
.article-content { color: #d4d4d4; font-size: 15px; line-height: 1.9; overflow-wrap: anywhere; }
.article-content h2, .article-content h3, .article-content h4 { margin: 1.9em 0 .6em; color: #dcdcaa; font-weight: 500; line-height: 1.55; }
.article-content h2 { padding-bottom: .35em; border-bottom: 1px solid #383838; font-size: 21px; }
.article-content h3 { font-size: 18px; }
.article-content p { margin: .8em 0 1.15em; }
.article-content a { color: #75beff; text-decoration: underline; text-decoration-color: #477ca0; text-underline-offset: 3px; }
.article-content a:hover { color: #a9d7ff; }
.article-content ul, .article-content ol { padding-left: 1.5em; }
.article-content li { padding-left: .2em; margin: .25em 0; }
.article-content blockquote { margin: 1.2em 0; padding: 2px 16px; border-left: 3px solid #007acc; color: #aaa; }
.article-content pre { overflow-x: auto; padding: 14px 16px; border: 1px solid #383838; border-radius: 4px; background: #181818; color: #d7ba7d; font: 13px/1.7 ui-monospace, "Cascadia Code", monospace; tab-size: 4; }
.article-content code { padding: .12em .3em; border-radius: 3px; background: #2a2a2a; color: #d7ba7d; font: .9em ui-monospace, "Cascadia Code", monospace; }
.article-content pre code { padding: 0; background: transparent; }
html[data-code-theme="vs2015"] .article-content pre code.hljs { color: #dcdcdc; background: #1e1e1e; }
html[data-code-theme="github-dark-dimmed"] .article-content pre code.hljs { color: #adbac7; background: #22272e; }
html[data-code-theme="tokyo-night-dark"] .article-content pre code.hljs { color: #9aa5ce; background: #1a1b26; }
html[data-code-theme="dracula"] .article-content pre code.hljs { color: #f8f8f2; background: #282a36; }
.article-content table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
.article-content th, .article-content td { padding: 7px 10px; border: 1px solid #454545; text-align: left; }
.article-content th { background: #2a2d2e; color: var(--blue); }
.article-figure { margin: 1.3em 0; text-align: center; }
.article-figure img { max-width: 100%; height: auto; border: 1px solid #383838; border-radius: 3px; }
.page-about { max-width: 760px; }
.page-about .article-heading { padding-bottom: 8px; }
.page-about .article-content > p:first-child { max-width: 58ch; margin: 0 0 28px; padding: 18px 20px; border-left: 3px solid #3796c5; border-radius: 0 5px 5px 0; background: linear-gradient(105deg, #202d35, #222); color: #cbdde8; font-size: 17px; line-height: 1.9; }
.page-about .article-content h2 { display: flex; align-items: center; gap: 10px; margin-top: 1.65em; padding-bottom: 9px; border: 0; color: #e7e7e7; font-size: 15px; letter-spacing: .04em; }
.page-about .article-content h2::before { width: 3px; height: 15px; border-radius: 2px; background: #3796c5; content: ""; }
.page-about .article-content table { display: block; overflow: visible; border: 0; }
.page-about .article-content thead { display: none; }
.page-about .article-content tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.page-about .article-content tr { display: flex; min-height: 92px; flex-direction: column; justify-content: center; gap: 8px; padding: 15px 17px; border: 1px solid #393d40; border-radius: 5px; background: linear-gradient(135deg, #25282a, #222); }
.page-about .article-content td { padding: 0; border: 0; }
.page-about .article-content td:first-child { color: #8ca4b3; font-size: 11px; letter-spacing: .08em; }
.page-about .article-content td:last-child { color: #e0e0e0; font-size: 14px; }
.page-about .article-content a[href^="tel:"] { display: inline-block; color: #9cdcfe; font-size: 22px; font-variant-numeric: tabular-nums; text-decoration: none; }
.page-about .article-content a[href^="tel:"]:hover { color: #fff; }
.page-about .article-content p:has(a[href^="tel:"]) { display: inline-flex; min-height: 55px; align-items: center; margin: 0; padding: 5px 18px; border: 1px solid #3c6278; border-radius: 5px; background: #202d35; }
.page-about .article-content ul { display: grid; gap: 8px; padding: 0; list-style: none; }
.page-about .article-content li { margin: 0; padding: 12px 15px; border: 1px solid #393d40; border-radius: 5px; background: #242628; }
.article-wrap:has(> .article.page-about) > .line-numbers { display: none; }
.page-about { max-width: 940px; }
.page-technology { max-width: 940px; }
.page-technology .article-content > p:first-child { max-width: 70ch; margin: 0 0 24px; padding: 16px 19px; border-left: 3px solid #3796c5; border-radius: 0 5px 5px 0; background: linear-gradient(105deg, #202d35, #222); color: #cbdde8; font-size: 16px; line-height: 1.9; }
.page-technology .article-content h2 { margin-top: 1.5em; }
.article-wrap:has(> .article.page-technology) > .line-numbers { display: none; }
.profile-json { overflow: hidden; border: 1px solid #383838; border-radius: 6px; background: #191a1b; box-shadow: 0 12px 32px #0002; }
.profile-json-label { padding: 9px 15px; border-bottom: 1px solid #333; background: #222426; color: #8c8c8c; font: 11px ui-monospace, "Cascadia Code", monospace; }
.profile-json-code { overflow-x: auto; padding: 14px 0 18px; color: #d4d4d4; font: 13px/1.85 ui-monospace, "Cascadia Code", "Yu Gothic UI", monospace; counter-reset: profile-line; }
.json-line { position: relative; min-height: 24px; padding: 0 22px 0 calc(62px + var(--indent) * 1.7em); white-space: pre-wrap; overflow-wrap: anywhere; counter-increment: profile-line; }
.json-line::before { position: absolute; top: 0; left: 12px; width: 32px; color: #777; text-align: right; content: counter(profile-line); user-select: none; }
.profile-json .json-key { display: inline-block; width: var(--key-width, auto); color: #9cdcfe; }
.profile-json .json-string { color: #d69d85; }
.profile-json .json-brace { color: #dcdcdc; }
.profile-json .punctuation { color: #d4d4d4; }
.profile-json .json-line:hover { background: #ffffff0a; }
.json-placeholder { margin-left: 9px; padding: 2px 5px; border: 1px solid #725b28; border-radius: 3px; background: #3c321e; color: #e4c778; font: 10px/1.5 "Segoe UI", "Yu Gothic UI", Meiryo, sans-serif; vertical-align: 1px; }
.home-heading { padding: 8px 0 20px; }
.home-intro { max-width: 58ch; margin: 12px 0; color: #bdbdbd; line-height: 1.8; }
.home-list { font: 13px/1.8 ui-monospace, monospace; }
.archive-home-link { display: inline-block; margin: 8px 0 20px; color: #75beff; text-decoration: none; }
.archive-home-link:hover { color: #a9d7ff; text-decoration: underline; text-underline-offset: 3px; }
.section-title { margin-bottom: 9px; }
.home-card { display: block; margin: 0 0 10px; padding: 13px 16px; border: 1px solid #383838; border-radius: 4px; background: #222; font-family: "Segoe UI", "Yu Gothic UI", Meiryo, sans-serif; }
.article-content a.home-card { text-decoration: none; }
.home-card:hover { border-color: #557c95; background: #25282a; }
.home-card h2 { margin: 4px 0; color: #e0e0e0; font-size: 16px; font-weight: 500; }
.home-card p { margin: 4px 0 8px; color: #aaa; font-size: 13px; line-height: 1.65; }
.card-tags { color: #91b69b; font-size: 11px; }
.list-close { padding: 4px 0 14px; }
.statusbar { position: relative; height: 22px; flex: 0 0 22px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: #007acc; color: #fff; font: 11px ui-monospace, monospace; }
.statusbar b { color: #b6f2b1; font-size: 9px; }
.status-right { display: flex; align-items: center; gap: 14px; }
.archive-status { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border: 1px solid #853442; border-radius: 3px; background: #632832; color: #ffe0e3; font: inherit; line-height: 16px; cursor: help; }
.archive-status:hover, .archive-status:focus-visible, .archive-status[aria-expanded="true"] { border-color: #d67a87; background: #7a303b; outline: none; }
.archive-status > span { color: #ff9aa6; font-size: 8px; }
.archive-tooltip { position: absolute; z-index: 20; right: 12px; bottom: calc(100% + 8px); width: max-content; max-width: min(360px, calc(100vw - 24px)); padding: 10px 12px; border: 1px solid #9a4a56; border-radius: 5px; background: #252526; color: #eee; box-shadow: 0 8px 24px #0009; font: 12px/1.65 "Segoe UI", "Yu Gothic UI", Meiryo, sans-serif; white-space: normal; }
.archive-tooltip[hidden], .archive-status[hidden] { display: none !important; }
.mobile-menu, .mobile-scrim { display: none; }
.search-results { position: absolute; z-index: 12; top: calc(100% + 6px); right: 0; width: min(460px, calc(100vw - 20px)); max-height: min(70vh, 560px); overflow: auto; border: 1px solid #4a4a4a; border-radius: 5px; background: #252526; box-shadow: 0 12px 30px #0009; }
.search-results[hidden] { display: none !important; }
.search-result { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; padding: 10px 13px; border-bottom: 1px solid #383838; }
.search-result:hover { background: #2e3942; }
.search-result strong { overflow: hidden; color: #dcdcdc; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.search-result small { align-self: center; color: #888; font: 10px ui-monospace, monospace; }
.search-result span { grid-column: 1 / -1; color: #a4a4a4; font-size: 11px; line-height: 1.6; }
.search-result-status { padding: 8px 13px; color: #999; font-size: 11px; }
.no-results { padding: 14px 16px; color: #999; font-size: 12px; }
@media (max-width: 760px) {
  .titlebar { gap: 10px; height: 48px; flex-basis: 48px; padding: 0 10px; }
  .window-dots, .activitybar, .tab-context, .line-numbers { display: none; }
  .mobile-menu { display: block; width: 30px; height: 34px; border: 0; background: transparent; color: #ccc; font-size: 19px; }
  .brand { gap: 5px; font-size: 11px; }
  .search-box { width: auto; flex: 1; margin: 0 0 0 auto; }
  .theme-picker { gap: 2px; }
  .theme-picker select { max-width: 92px; padding-left: 4px; font-size: 10px; }
  .search-results { position: fixed; top: 54px; left: 8px; right: 8px; width: auto; max-height: calc(100dvh - 100px); }
  .top-link { display: none; }
  .sidebar { position: fixed; z-index: 5; top: 48px; bottom: 22px; left: 0; width: min(310px, 84vw); transform: translateX(-101%); transition: transform .18s ease; box-shadow: 10px 0 25px #0007; }
  .sidebar.is-open { transform: translateX(0); }
  .mobile-scrim.is-open { display: block; position: fixed; z-index: 4; inset: 48px 0 22px; background: #0008; }
  .tab { min-width: 0; max-width: 100%; flex: 1; }
  .breadcrumb { padding: 0 13px; }
  .article-wrap { padding: 19px 11px 45px 0; }
  .article { padding: 0 12px; }
  h1 { font-size: 24px; }
  .article-content { font-size: 15px; line-height: 1.85; }
  .page-about .article-content > p:first-child { font-size: 16px; }
  .page-about .article-content tbody { grid-template-columns: 1fr; gap: 8px; }
  .page-about .article-content tr { min-height: 76px; }
  .profile-json-code { font-size: 11px; }
  .json-line { padding-right: 12px; padding-left: calc(48px + var(--indent) * 1.45em); }
  .json-line::before { left: 8px; width: 26px; }
  .json-meta { margin-left: -4px; padding: 10px 9px; font-size: 12px; }
  .meta-row:not(:first-child) { padding-left: 10px; }
  .meta-row.json-close { padding-left: 22px; }
  .article-content pre { margin-left: -8px; margin-right: -3px; padding: 12px; font-size: 12px; }
  .statusbar { height: 22px; flex-basis: 22px; padding: 0 7px; }
  .status-right { gap: 7px; font-size: 10px; }
  .archive-status { gap: 3px; padding: 0 4px; font-size: 9px; }
  .archive-tooltip { right: 7px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }