:root {
  color-scheme: light;
  --background: #ffffff;
  --grid: #eef0f2;
  --text: #202020;
  --muted: #797979;
  --tree: #b8b8b8;
  --link: #202020;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, "Noto Sans Mono CJK JP", monospace;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html { background: var(--background); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background-color: var(--background);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
}

.directory {
  width: min(100%, 500px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 80px 20px 120px;
}

.profile h1 {
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.4;
}

.profile-role { margin: 4px 0 0; color: var(--muted); font-weight: 500; }

.tree { margin-top: 44px; }
.root { margin: 0 0 10px; color: var(--text); font-weight: 700; }

.fs-tree,
.fs-tree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fs-tree ul {
  margin-left: 7px;
  padding-left: 24px;
}

.fs-tree li {
  position: relative;
  margin: 0;
  padding: 0 0 0 28px;
}

.tree > .fs-tree > li { padding-bottom: 22px; }
.tree > .fs-tree > li:last-child { padding-bottom: 0; }
.subtree > .fs-tree > li { padding-bottom: 18px; }
.subtree > .fs-tree > li:last-child { padding-bottom: 0; }
.fs-tree > li:last-child { padding-bottom: 0; }
.fs-tree ul > li { padding-bottom: 0; }

.fs-tree li::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: .82em;
  border-bottom: 1px solid var(--tree);
  border-left: 1px solid var(--tree);
  content: "";
}

.fs-tree li::after {
  position: absolute;
  top: .82em;
  bottom: 0;
  left: 0;
  border-left: 1px solid var(--tree);
  content: "";
}

.fs-tree li:last-child::after { display: none; }

.tree-node {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: .72em;
  min-height: 1.65em;
  white-space: nowrap;
}

.label,
a { color: var(--link); text-decoration: none; }
.slash { color: var(--text); }
.meta { color: var(--muted); font-weight: 500; }
.pending { color: var(--muted); }
a:hover,
a:focus-visible { color: #5f5f5f; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .25em; }
a:focus-visible { outline: 1px solid var(--link); outline-offset: 4px; }

@media (max-width: 620px) {
  body { font-size: 14px; }
  .directory { padding: 58px 20px 72px; }
  .tree { margin-top: 44px; }
  .root { margin-bottom: 10px; }
  .fs-tree ul { margin-left: 4px; padding-left: 18px; }
  .fs-tree li { padding-left: 22px; }
  .fs-tree li::before { width: 15px; }
  .tree-node { flex-wrap: wrap; gap: 0 .5em; white-space: normal; }
  .tree-node > :first-child { overflow-wrap: anywhere; }
  .meta { overflow: visible; text-overflow: clip; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* sub pages */
.subpage {
  width: min(100%, 560px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 80px 20px 120px;
}

.subpage-header { margin: 0; }
.subpage-header > a { font-weight: 700; }
.path { margin: 44px 0 0; color: var(--muted); }
.path a { color: var(--muted); }
.path a::after { content: " "; }
.path strong { color: var(--text); }

.subtree { margin-top: 44px; }

.readme,
.page-block { margin-top: 44px; }
.filename { margin: 0 0 18px; color: var(--text); font-weight: 700; }
.prose {
  margin: 0;
  color: #3f3f3f;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  font-weight: 400;
  line-height: 1.9;
}
.prose + .prose { margin-top: 12px; }

.page-block h2 {
  margin: 0 0 12px;
  font: inherit;
  font-weight: 700;
}

.file-list { margin: 0; padding: 0; border-top: 1px solid #dedede; list-style: none; }
.file-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  padding: 10px 0;
  border-bottom: 1px solid #ededed;
}
.file-list .detail { color: var(--muted); text-align: right; }
.file-list .available { color: var(--text); font-weight: 700; }
.file-list .inactive { color: var(--muted); }

.subpage-footer { margin-top: 64px; }
.subpage-footer a { color: var(--muted); }

@media (max-width: 620px) {
  .subpage { width: min(390px, 100%); margin: 0; padding: 58px 20px 72px; }
  .prose { overflow-wrap: anywhere; }
  .file-list li { grid-template-columns: 1fr; gap: 2px; }
  .file-list .detail { text-align: left; }
}