:root{
  --bg: #ffffff;
  --fg: #111214;
  --muted: #6b6f76;
  --hover: #2b2f36;
  --rule: rgba(0,0,0,0.06);
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
}

body > h1,
body > hr,
body > pre { display: none !important; }

body { visibility: hidden; }
body.ktoo-ready { visibility: visible; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Centered, calm layout */
#ktoo-wrap { opacity: 0; }
body.ktoo-ready #ktoo-wrap {
  opacity: 1;
  transition: opacity 120ms ease-out;
}

#ktoo-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 28px 80px;
  padding-left: 12px; /* subtle left bias */
}

#ktoo-head{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 26px;
}

#ktoo-title{
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--fg);
}

#ktoo-sub{
  font-size: 13px;
  color: var(--muted);
}

#ktoo-rule{
  height: 1px;
  width: 100%;
  background: var(--rule);
  margin: 18px 0 0;
}

/* The rebuilt “tree” list */
#ktoo-tree{
  display: flex;
  flex-direction: column;
  gap: 22px;              /* more float / air */
  margin-top: 34px;
}

/* Float row (no framing, no separators) */
.ktoo-row{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 24px;
  align-items: baseline;

  padding: 6px 0;         /* no horizontal padding */
  background: none;
  border: none;

  transform-origin: top center;
  will-change: transform, opacity, filter;
}

/* No boxy hover — let text do the work */
.ktoo-row:hover{
  background: none;
  border: none;
}

.ktoo-row:first-child{
  opacity: 0.55;
}

.ktoo-name{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Softer metadata */
.ktoo-meta{
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.02em;
  opacity: 0.6;
  white-space: nowrap;
}

/* Quiet link vibe */
.ktoo-row a{
  color: var(--fg);
  text-decoration: none;
  transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.ktoo-row a:hover{
  color: var(--hover);
  opacity: 0.65;
  transform: translateX(2px);
}

/* Directory cue: spatial, not decorative */
.ktoo-dir .ktoo-name{
  padding-left: 12px;
}

/* Optional: keep the trailing slash cue */
.ktoo-dir a::after{
  content: "/";
  color: var(--muted);
  margin-left: 2px;
}

/* Lighter unfold animation (less snap, more drift) */
@keyframes ktooUnfold{
  0%{
    opacity: 0;
    transform: perspective(900px) rotateX(-55deg) translateY(-6px);
    filter: blur(2px);
  }
  100%{
    opacity: 1;
    transform: perspective(900px) rotateX(0deg) translateY(0);
    filter: blur(0);
  }
}

.ktoo-anim{
  animation: ktooUnfold 520ms cubic-bezier(.2,.9,.2,1) both;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ktoo-anim{ animation: none !important; }
}