*{box-sizing:border-box}body{margin:0}h1{font:inherit}a{color:inherit}
.home {
  min-height: 100vh;
  background: #141615;
  color: #d8dcd8;
  font-family: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  font-size: 14px;
  line-height: 1.8;
  color-scheme: dark;
  padding: clamp(32px, 8vw, 100px) clamp(20px, 6vw, 80px);
}
.shell { max-width: 1000px; margin: 0 auto; }
.command { color: #939c96; margin: 0 0 30px; }
.command span { color: #a9c1ac; }
.root { font: inherit; font-size: 18px; font-weight: 600; margin: 0 0 12px; color: #f0f2ed; }
.tree ul { list-style: none; padding: 0; margin: 0; }
.tree ul ul { margin-top: 5px; }
.tree li { position: relative; padding: 0 0 8px 28px; }
.tree li::before { content: ''; position: absolute; left: 4px; top: 0; bottom: 0; border-left: 1px solid #59635b; }
.tree li::after { content: ''; position: absolute; left: 4px; top: 13px; width: 15px; border-top: 1px solid #59635b; }
.tree li:last-child::before { bottom: auto; height: 13px; }
.tree > ul > li { padding-bottom: 16px; }
.tree a { color: inherit; text-decoration: none; display: inline-flex; flex-wrap: wrap; column-gap: 18px; border-radius: 2px; }
.tree a:hover { color: #c4e6ca; text-decoration: underline; text-underline-offset: 4px; }
.tree a:focus-visible { outline: 2px solid #c4e6ca; outline-offset: 4px; }
.directory { color: #a9c1ac; }
.number { color: #a7b2a9; white-space: nowrap; }
.host { color: #939c96; font-size: 12px; }
.summary { color: #939c96; margin: 26px 0 0; font-size: 12px; }
@media (max-width: 600px) {
  .home { font-size: 13px; padding: 32px 20px; }
  .tree li { padding-left: 21px; }
  .tree li::after { width: 10px; }
  .tree a { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .tree li { padding-bottom: 13px; }
  .number { font-size: 11px; }
}